﻿
body {
    margin: 0;
    height: 100%;
    width: 100%;
    background-color: #af7660;
    overflow:hidden;
}

#cover {
    visibility: hidden;
    position:absolute;
    width:100%;
    height:100%;
    background-color: #af7660;
    z-index:30;
}

@keyframes rotatel {
    45% {
        rotate: -90deg;
    }
    90% {
        rotate:0deg;
    }
}

#tel {
    position:absolute;
    height:30%;
    top:40%;
    left:40%;
    animation-name: rotatel;
    animation-duration: 2s;
    animation-delay: 1s;
    animation-iteration-count: infinite;
}

.grecaptcha-badge {
    visibility: hidden !important;
}

@font-face {
    font-family: 'New Gerbil';
    src: url('https://terracottaimmobiliare.it/fonts/newgerbil.ttf') format('truetype'), url('https://terracottaimmobiliare.it/fonts/newgerbil.otf') format('opentype'), url('https://terracottaimmobiliare.it/fonts/newgerbil.woff') format('woff'), url('https://terracottaimmobiliare.it/fonts/newgerbil.woff2') format('woff2');
}

#banner {
    position:absolute;
    width: 100%;
}

#menubutton {
    position:absolute;
    width: 50px;
    height:50px;
    left:8%;
    top:40px;
    cursor: pointer;
    z-index:1;
}

#menu {
    visibility: hidden;
    position:absolute;
    right:0%;
    min-height:300px;
    width: 30%;
    border-left: solid white 1px;
    border-top: solid white 1px;
    background-color: #af7660;
    z-index: 1;
}

#lang {
    position: absolute;
    left: 5%;
    top: 2%;
}

.menus {
    color:white;
    font-weight:100;
    font-family: 'Urbanist', sans-serif;
    font-size: 35px;
    margin-bottom: 23px;
}

#list {
    position:absolute;
    left:5%;
    top:22%;
}

.wg:hover {
    font-weight: 700;
    cursor: pointer;
}

hr {
    color: white;
    margin-bottom: 15px;
}

h1 {
    position:absolute;
    width:40%;
    left:30%;
    color:white;
    font-size:50px;
    text-align: center;
    font-family: 'New Gerbil';
    cursor: default;
}

h3 {
    position: absolute;
    width:40%;
    left:30%;
    margin-top:100px;
    color: white;
    text-align: center;
    font-family: 'League Spartan', sans-serif;
    font-weight: 100;
    font-size: 22px;
    cursor: default;

}

#motto {
    width: 30%;
    left: 8%;
    font-family: 'Urbanist', sans-serif;
    color: white;
    font-size: 50px;
    font-weight: 100;
    position: absolute;
    top: 240px;
    cursor: default;
}

#cta {
    position: relative;
    top: 25px;
    height: 50px;
    width: 300px;
    background-color: white;
    color: #af7660;
    font-family: 'League Spartan', sans-serif;
    font-size: 25px;
    text-align: center;
    font-weight: 800;
    line-height: 55px;
    cursor: pointer;
}

#cta:hover {
    background-color: #e9edea;
    color: #caa395;
}

#brick {
    position:absolute;
    height:75px;
    width:20%;
    left:40%;
    align-items: center;
    display:flex;
}

#mattoni {
    width:100%;
}

#sfondo {
    width:100%;
    height:100%;
    background-size: cover;
    position:absolute;
    z-index: -1;
    background-image: url('https://terracottaimmobiliare.it/img/sfondo2.jpg');
}

#footer {
    width: 100%;
    height: 75px;
    position: absolute;
    bottom:0%;
    background-color: #af7660;
    border-top: solid white 1px;
    z-index:2;
}

#dove {
    position: absolute;
    width:30%;
    height:75px;
    border-right: solid white 1px;
}

#pin {
    position: absolute;
    height:70%;
    width:10%;
    top:15%;
    left:4%;
}

#caste {
    margin-left: 16%;
    width: 82%;
}

#rea {
    margin-left:64%;
    width:33%;
    border-left: solid white 1px;
}

#rea p {
    margin-left: 10%;
}

#infoazienda {
    position:absolute;
    left:30%;
    width:40%;
    height:100%;
}

.scritte {
    height: 75px;
    display: flex;
    align-items: center;
    color: white;
    font-family: 'Urbanist', sans-serif;
    font-weight:100;
    font-size: 15px;
    cursor: default;
}

#copy {
    position: absolute;
    margin-left: 3%;
    border-right: solid white 1px;
    width: 33%;
}

#privacy {
    position: absolute;
    right: 0;
    width:30%;
    border-left: solid white 1px;
}

#privacy p {
    margin-left:5%;
}

a {
    color: #e9edea;
    cursor:pointer;
}

@media only screen and (orientation: portrait) {
    body {
        overflow:visible;
    }

    #menu {
        width: 100%;
        z-index:1;
    }

    h1 {
        width: 50%;
        left: 25%;
        font-size: 30px;
        top:15px;
    }

    #motto {
        top: 20%;
        width:66%;
    }

    .menus {
        font-size: 30px;
        margin-bottom: 30px;
    }

    #menubutton {
        width: 40px;
        height: 40px;
        top: 30px;
    }

    h3 {
        width: 50%;
        left: 25%;
        margin-top: 75px;
        font-weight: 100;
        font-size: 18px;
    }

    #footer {
        width: 100%;
        height: 50%;
        bottom: -50%;
        position:absolute;
        background-color: #af7660;
        border-top: solid white 1px;
        z-index: 2;
    }

    #sfondo {
        background-position: 50%;
        background-size:auto;
        background-repeat: no-repeat;
    }

    #dove {
        width:100%;
        height: 25%;
        border-right: none;
    }

    #caste {
        height:100%;
    }

    #copy {
        width: 100%;
        height:50%;
        position:relative;
        border-top: solid white 1px;
        border-right: none;
        margin-left: 0%;
    }

    #copy p {
        margin-left: 5%;
    }

    #privacy {
        width: 100%;
        bottom: 0%;
        border-top: solid white 1px;
        height: 25%;
    }

    #rea {
        position:relative;
        width: 100%;
        height: 50%;
        margin-left:0%;
        border-left: none;
        border-top: solid white 1px;
    }

    #rea p {
        margin-left: 5%;
    }

    #infoazienda {
        width:100%;
        top: 25%;
        height: 50%;
        left:0%;
    }

    #brick {
        height:50%;
        left: 70%;
        top: 0%;
    }
}

@media only screen and (max-width: 760px) and (max-height: 380px) {
    #cover {visibility: visible;}
    #motto {visibility:hidden;}
}