/*
Created by Alessandro Stella on 24/01/2016
*/

html, body {
    font-size: 18px;
    font-style: normal;
    font-family: "gill", georgia, arial, tahoma, serif;
    margin: 0;
    padding: 0;
}
body {
    color: #EAEAEA;
}
@font-face {
    font-family: gill;
    src: url("../style/font/GillCondensed.woff");
    /*font-family: ubuntu;
    src: url("../style/font/UbuntuCondensed-Regular.woff");*/
}
#loader {
    position: fixed;
    z-index: 1001;
    width: 100%;
    top: 0;
    bottom: 0;
    background-color: #4D6781;
    color: #EAEAEA;
}
#loader p {
    text-align: center;
    font-size: 2rem;
    padding-top: 25%;
}
#container #menu_call {
    position: fixed;
    z-index: 999;
    top: 2rem;
    left: 2rem;
    color: #2E2E2E;
    cursor: pointer;
}
#container #menu_call:hover {
    color: #EAEAEA;
}
#container nav {
    position: fixed;
    margin-top: 0;
    padding-left: 0;
    z-index: 1000;
    height: 100%;
    left: -400px;
    transition: all 0.5s ease-out;
    background-color: rgba(40, 40, 40, 0.95);
    color: #EAEAEA;
}
#container nav img {
    cursor: pointer;
    width: 80%;
    padding: 2rem;
}
#container nav ul {
    font-size: 1.8rem;
    list-style-type: none;
    padding-left: 0;
}
#container nav ul li {
    cursor: pointer;
    padding: 0.5rem 0.5rem 0.5rem 2rem;
    border-bottom: solid thin #444;
}
#container nav ul li:hover {
    background-color: #EAEAEA;
    color: #2E2E2E;
}
#container nav footer {
    color: #666;
    position: absolute;
    bottom: 0;
    right: 1rem;
}
#container nav footer a {
    color: #EAEAEA;
    text-decoration: none;
}
#container nav footer a:hover {
    color: #2E2E2E;
    background-color: #EAEAEA;
}
#container header {
    background-color: #6da1ac;
    position: relative;
    text-align:center;
}
#container header #title {
    height: 33%;
}
#container header h1 {
    color: #2E2E2E;
    font-size: 5rem;
    margin: 0;
 }
#container header h2 {
    font-size: 3.5rem;
    margin: 0;
    padding-top: 4rem;
}
#container header #aforisma {
    width: 100%;
    height: 30%;
}
#container header #aforisma img {
    width: 100%;
    max-width: 1900px;
    height: 100%;
}
#container header #tazzina {
    overflow: hidden;
    text-align: center;
    width: 100%;
    height: 37%;
}
#container header #tazzina img {
    width: 100%;
    max-width: 778px;
    min-height: 100%;
}
#container header #mano {
    position: absolute;
    right: 4rem;
    bottom: 0;
    width: 100%;
    max-width: 420px;
}
#container #servizi {
    background-color: #df9b30;
}
#container #servizi h2 {
    font-size: 5rem;
    margin-top: 0;
    padding-top: 2rem;
    padding-left: 10rem;
    margin-bottom: 1rem;
}
#container #servizi p {
    font-size: 1.5rem;
    padding-right: 2rem;
    padding-left: 2rem;
}
#container #servizi p:last-child {
    margin-bottom: 0;
    padding-bottom: 1rem;
}
#container #servizi img {
    float: left;
    width: 35%;
    padding: 2rem;
}
#container #contatti {
    background-color: #5bae76;
}
#container #contatti h2 {
    font-size: 5rem;
    margin-top: 0;
    padding: 2rem 0 2rem 10rem;
    margin-bottom: 1rem;
}
#container #contatti #map-canvas {
    float: none;
    margin: 0 2%;
    height: 350px;
    width: 94%;
}
#container #contatti img {
    float: right;
    width: 45%;
    padding: 0 20% 15rem 4rem;
}
#container #contatti p {
    font-size: 1.5rem;
    text-align: right;
    padding: 0 2rem;
}
#container #contatti p:last-child {
    margin-bottom: 0;
    padding-bottom: 2rem;
}
@media screen and (max-width: 1200px) {
    #container header #aforisma img {
        width: 100%;
        max-width: 1000px;
        height: 100%;
        max-height: 138px;
    }
    #container #contatti img {
        padding: 0 15% 12rem 3rem;
    }
}
@media screen and (max-width: 900px) {
    #container header #aforisma img {
        width: 100%;
        max-width: 500px;
        height: 100%;
        max-height: 250px;
    }
    #container #contatti h2 {
        padding-left: 0;
        text-align: center;
    }
    #container #contatti img {
        float: none;
        width: 85%;
        padding: 5%;
    }
    #container #contatti p {
        font-size: 1.5rem;
        text-align: left;
        padding: 0 2rem;
    }
}
@media screen and (max-width: 720px) {
    #container #menu_call {
        top: 1rem;
        left: 1rem;
    }
    #container #home h2 {
        font-size: 2.5rem;
        padding-top: 1.5rem;
    }
    #container #home h1 {
        font-size: 3.5rem;
    }
    #container #servizi h2 {
        padding-left: 0;
        text-align: center;
    }
    #container #servizi img {
        float: none;
        width: 90%;
        padding: 5%;
    }
    #container #servizi p {
        padding-right: 1rem;
        padding-left: 1rem;
    }
    #container #contatti img {
        width: 100%;
        padding: 0 0 5% 0;
    }
}
@media screen and (max-width: 480px) {
    #container #home h2 {
        font-size: 2rem;
    }
    #container #home h1 {
        font-size: 3rem;
    }
    #container nav {
        text-align: center;
    }
    #container nav img {
        width: 40%;
        padding: 2rem 0;
    }
    #container nav ul li {
        padding-left: 0;
    }
}
@media screen and (max-width: 320px) {
    #container #home h2 {
        font-size: 1.2rem;
    }
    #container #home h1 {
        font-size: 2rem;
    }
}
@media screen and (max-height: 700px) {
    #container header h2 {
        padding-top: 2rem;
    }
}
@media screen and (max-height: 500px) {
    #container header h2 {
        padding-top: 0;
    }
}