/* CSS Document */


#header{
    position: fixed;
    top: 0;
}

#right {
    width: 100%;
    height: 60vh;
}

#leftHeader #social a{display: block; width: 25px; height: 25px; float: left; margin: 0;}
    #leftHeader{height: 50px;}
    #leftHeader #social{width: 160px; display: flex; justify-content: space-between;}
    #leftHeader #social a img{width: 100%;}


#menu-mobile{width: 100%; height:calc(100vh - 50px); font-size: 25px; line-height: 40px; top: 50px; z-index: 1; left: 0;}

#video-bg {
    width: 100%;
    height: 100%;
    position: static;
    display: flex;
    justify-content: center;
    overflow: hidden;
    background: url("../media/jungle-juice.gif");
    background-size: cover;
    background-position: center center;
}
#left {
    width: 100%;
	height: 87%;
}
#chiSiamo {
    width: 50%;
    height: 160px;
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
}
#cosaFacciamo {
    width: 50%;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.col {
    width: 100%;
    text-align: center;
}
#left #chiSiamo h3 {
    font-family: 'Gabriel Sans', sans-serif;
    font-size: 2em;
    text-align: center;
    font-weight: 700;
    margin-top: 30px;
}
#left #cosaFacciamo h3 {
    font-family: 'Gabriel Sans', sans-serif;
    font-size: 2em;
    text-align: center;
    font-weight: 700;
    margin-top: 30px;
}


#left #chiSiamo .col .img-wrapper img {
    width: 40px;
    height: auto;
}

#left #cosaFacciamo .col .img-wrapper img {width: 25px; height: auto;}

/*___________________________________________________ Media Queries ______________________________________________________________*/


@media(min-width:568px){
    #menu-mobile{width: 70%; height:calc(100vh - 50px); font-size: 17px; line-height: 32px; top: 50px; z-index: 1; left: 0;}
    #right{width: 70%; height: calc(100vh - 100px); float: left; padding:0;}
    #header{position: static; height: 50px;}
    #leftHeader #social a{display: block; width: 25px; height: 25px; float: left; margin: 0;}
    #leftHeader{height: 50px;}
    #leftHeader #social{width: 130px; display: flex; justify-content: space-between;}
    #leftHeader #social a img{width: 100%;}
    #left{width: 30%; height: calc(100vh - 50px); float: left;}
    #chiSiamo, #cosaFacciamo{height: 50%; width: 100%;}
    #chiSiamo a{display: block;}
    #left #chiSiamo .col .img-wrapper img{width: 40%;}
    #left #chiSiamo h3{margin-top: 7px; font-size: 15px;}
    #video-bg{padding-top: 0; height: 100%;}
    #cosaFacciamo a{display: block;}
    #left #cosaFacciamo .col .img-wrapper img{width: 30%}
    #left #cosaFacciamo h3{margin-top: 7px; font-size: 15px;}
    #contacts{width: 70%; height: 50px;}
    #contatti{width: 30%; height: 50px; font-size: 15px; line-height: 50px;}
    #footer-p-mobile{line-height: 13px;}
}

@media(min-width:768px){
    #menu-mobile{width: 100%; height:calc(60vh - 70px); font-size: 40px; line-height: 50px; top:70px}
    #right{width: 100%; height: 60vh; padding: 0;}
    #video-bg{height: 90%;}
    #header{height: 70px;}
    #left{width: 100%; height: calc(40vh - 70px); display: flex; justify-content: center; align-content: center;}
    #left #chiSiamo{height: 100%;}
    #left #cosaFacciamo{height: 100%;}
    #left #chiSiamo .col .img-wrapper img{width: 30%;}
    #left #cosaFacciamo .col .img-wrapper img{width: 20%}
    #left #chiSiamo h3{margin-top: 20px; font-size: 30px;}
    #left #cosaFacciamo h3{margin-top: 20px; font-size: 30px;}
    #contacts{width: 70%; height: 70px; position: fixed; bottom: 0}
    #contatti{width: 30%; height: 70px; font-size: 15px; line-height: 70px; position: fixed; bottom: 0; right: 0;}
    #footer-p-mobile{font-size: 15px; line-height: 20px;}
}

@media(min-width:800px), (orientation:landscape){
    #menu-mobile{width: 70%; height:calc(100vh - 50px); font-size: 17px; line-height: 32px; top: 50px; z-index: 1; left: 0;}
    #right{width: 70%; height: 60vh; float: left; padding:0;}
    #header{position: static; height: 50px;}
    #leftHeader #social a{display: block; width: 25px; height: 25px; float: left; margin: 0;}
    #leftHeader{height: 50px;}
    #leftHeader #social{width: 130px; display: flex; justify-content: space-between;}
    #leftHeader #social a img{width: 100%;}
    #left{width: 30%; height: calc(100vh - 50px); float: left; display: block;}
    #left #chiSiamo, #left #cosaFacciamo{height: 50%; width: 100%;}
    #chiSiamo a{display: block;}
    #left #chiSiamo .col .img-wrapper img{width: 40%;}
    #left #chiSiamo h3{margin-top: 7px; font-size: 15px;}
    #video-bg{padding-top: 0; height: calc(100vh - 100px);}
    #cosaFacciamo a{display: block;}
    #left #cosaFacciamo .col .img-wrapper img{width: 30%}
    #left #cosaFacciamo h3{margin-top: 7px; font-size: 15px;}
    #contacts{width: 70%; height: 50px;}
    #contatti{width: 30%; height: 50px; font-size: 15px; line-height: 50px;}
    #footer-p-mobile{line-height: 13px;}
}

@media(min-width:834px){
    
    #menu-mobile{width: 100%; height:calc(60vh - 70px); font-size: 40px; line-height: 50px; top:70px}
    #right{width: 100%; height: 60vh; padding: 0;}
    #video-bg{height: 90%;}
    #header{height: 70px;}
    #left{width: 100%; height: calc(40vh - 70px); display: flex; justify-content: center; align-content: center;}
    #left #chiSiamo{height: 100%;}
    #left #cosaFacciamo{height: 100%;}
    #left #chiSiamo .col .img-wrapper img{width: 30%;}
    #left #cosaFacciamo .col .img-wrapper img{width: 20%}
    #left #chiSiamo h3{margin-top: 20px; font-size: 30px;}
    #left #cosaFacciamo h3{margin-top: 20px; font-size: 30px;}
    #contacts{width: 70%; height: 70px; position: fixed; bottom: 0}
    #contatti{width: 30%; height: 70px; font-size: 15px; line-height: 70px; position: fixed; bottom: 0; right: 0;}
    #footer-p-mobile{font-size: 15px; line-height: 20px;}
    
}

@media(min-width:1025px){
	
    #header{height: 70px;}
	#right {width: 70%; height: calc(100vh - 80px); float: left;}
	#menu-mobile{width: 70%; height: calc(100vh - 70px); position:fixed; top:70px; font-size:25px; text-transform:uppercase; line-height:40px; text-align:center;}
    #video-bg {height: calc(100vh - 150px);}
	#left {width: 30%; height: calc(100vh - 80px); float: left; display: block; position: relative; padding-bottom: 0px;}
	#left #chiSiamo {width: 100%; height: 50%; border: none;}
	#left #cosaFacciamo {width: 100%; height: 50%; border: none;}
	#contacts {width: 70%; height: 80px; position: fixed; bottom: 0; line-height: 13px;}
    #contatti {height: 80px; position: fixed; bottom: 0; right: 0; line-height: 80px; font-size: 1.3rem;}
}