@charset "UTF-8";
/* CSS Document for Delacqua*/

@-ms-viewport {
  width: device-width;
}

body{background-image: url(background_alternate.png); background-repeat: no-repeat; background-position: center center; background-size: cover;}
#isologotype{text-align: left; z-index: -999;}
#isologotype img{position: relative; width: 150px; height: 92px; margin: auto; padding: 0.175em 0 0 0;}
#main-menu{font-family: 'Vidaloka', serif; font-size: 1.1em; text-transform: uppercase; color: white; padding: 0; z-index: 0;}
#main-menu nav ul{display: block; float: none; padding: 0; text-align: right;}
#main-menu nav ul li{display: inline-block; margin: 0 1em 0 1em; padding: 0;}
#main-menu nav ul li a > .social-icons{display: none;}
#main-menu a:link, #main-menu a:active, #main-menu a:visited{color: #ffffff; text-decoration: none;}
#main-menu a:hover{color: #d4e9f8;}

.fa.fa-facebook-official:link, .fa.fa-instagram:link, .fa.fa-facebook-official:visited, .fa.fa-instagram:visited, .fa.fa-facebook-official:active, .fa.fa-instagram:active{color: white; text-decoration: none;}
.fa.fa-facebook-official:hover, .fa.fa-instagram:hover{color: #d4e9f8; text-decoration: none;}

#social-networks{color: white; padding: 0.125em 0 0 0; float: none;}
#social-networks ul{display: block; float: none; padding: 0 0 0 40%;}
#social-networks ul li{display: inline-block; margin: 0; padding: 0;}

#mobile-menu{position: absolute; top: 0; left: 0; width: 100%; height: auto; text-align: right; display: none; z-index: 0;}
#mobile-menu ul{display: block; float: none; padding: 0;}
#mobile-menu ul li{display: inline-block; padding: 0; font-weight: bold;}
#mobile-menu a{padding: 0.3em 0.3em 1em 0; font-size: 1.5em;}
#mobile-menu a:link, #mobile-menu a:active, #mobile-menu a:hover{color: #FFFFFF; text-decoration: none;}

#content{position: relative; width: 100%; height: 50vh;}
.full-screen{width: 100%; height: 90vh;}
.content-gif-frontground{position: relative; width: 100vw; height: 100vh; margin: auto; padding: 0; background-image: url(test_animated_gif.gif); background-repeat: no-repeat; background-size: 15%; background-position: center center; z-index: 999;}
.sub-container{}
#branded{position: absolute; width: auto; height: auto; left: 0; bottom: 0; top: 0; line-height: 0.975;}
#branded img{position: relative; width: 75%; height: auto; margin: 0; padding: 0; text-align: left;}
.subtitle{position: relative; width: auto; height: auto; margin: 0; padding: 0; text-align: left; font-family: 'Playfair Display', serif; font-size: 1.3em; text-transform: uppercase; font-weight: bold; color: #d4e9f8;}
.footer{position: absolute; width: 100%; height: auto; margin: auto; left: 0; bottom: 0; padding: 0 0 0 1em;}
.footer p{font-family: 'Playfair Display', serif; font-size: 0.8em; letter-spacing: 0.05em; color: white;}

.buy-button{position: relative; width: auto; height: auto; margin: auto; padding: 0.3em 1em 0.2em 1em; border: 1px solid #ffffff; font-family: 'Vidaloka', serif; font-size: 1.1em; text-transform: uppercase; text-decoration: none; display: inline-block; top: -6px; left: auto; right: auto; border-collapse: collapse; z-index: 999; background-color: #ffffff; color: #000000;}
.buy-button:hover{background-color: #d4e9f8; color: #000000; border: 1px solid #d4e9f8;}

.top-reference{top: 0.45em; padding-left: 2em;}

#signature img{position: absolute; width: 128px; height: 128px; bottom: 0; right: 3em;}

/*tablet & mobile settings*/

@media screen and (max-width: 768px) {
	body{background-position: top top;}
	.buy-button{right: 45px; font-size: 0.85em; top: 0;}
	.subtitle{font-size: 1.1em;}
	#isologotype img{width: 120px; height: 74px;}
	#signature img{position: absolute; width: 100px; height: 100px; bottom: 0; right: 3em;}
	.top-reference{padding-left: 1.5em;}
	#main-menu nav ul li{font-size: 0.85em;}
}

@media screen and (max-width: 767px) {
	#main-menu{position: absolute; left: 0; top: 25px; z-index: 999;}
	#main-menu nav ul{float: none; display: block; position: absolute; left: 0; top: 20px; right: -100%;}
	#main-menu nav ul li{float: none; display: block; padding: 0.1em 0 0.1em 0; font-size: 1.275em;}
	#main-menu nav a{float: none; display: inline-block; top: 0;}
	#social-networks{display: none;}
	#main-menu nav ul li a > .social-icons{display: block;}
	#mobile-menu{display: inline-block;}
	#main-menu.active-mobile-menu{display: none;}
	#main-menu.active-mobile-menu-hidden{display: block;}
	.buy-button{position: absolute; top: -157px; right: 0;}
}

@media screen and (max-width: 520px) {
	body{background-position: right bottom;}
	#isologotype img{width: 120px; height: 74px;}
	#branded img{width: 75%; height: auto;}
	.subtitle{font-size: 2em;}
	.top-reference{top: 50%; margin-left: -0.5em;}
	#main-menu{position: absolute; left: 0; top: 10px;}
	#main-menu nav ul{float: none; display: block; position: absolute; left: 0; top: 20px; right: 0;}
	#main-menu nav ul li{float: none; display: block; padding: 0.1em 0 0.1em 0; font-size: 1.1em;}
	#main-menu nav a{float: none; display: inline-block; top: 0;}
	#social-networks{display: none;}
	#main-menu nav ul li > .social-icons{display: block;}
	#mobile-menu{display: inline-block;}
	#main-menu.active-mobile-menu{display: none;}
	#main-menu.active-mobile-menu-hidden{display: block;}
	.buy-button{position: absolute; top: -205px; right: 3em;}
	#signature{display: none;}
}