/*  

Theme Name:
Theme URI: 
Description:
Version: 1.0
Author: BeeSoft - Web & Mobile Solutions
Author URI: http://www.beesoft.it

============================================================================

1.0 - General Styles & Inclusions
	1.1 - Preload
	1.2 - Titles & Section's
	1.3 - Buttons, Call-to's
	1.4 - Forms
2.0 - Home Page
	2.1 - Header
	2.2 - Slider
	2.9 - Footer
5.0 - Responsive
	5.1 - Desktop
	5.2 - Tablet Portrait
	5.3 - Mobile
	5.4 - Mobile Landscape

/* ============================================================================ */
/* 1.0 - General Styles & Inclusions											*/
/* ============================================================================ */

@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400italic,400,700');
@import url('https://fonts.googleapis.com/css?family=Merriweather:400,700,900');

/* ============================================================================ */

* {
	font-family: 'Open Sans';
	font-weight: 400;
	font-size: 12px;
}

img {
	width: 100%;
	max-width: 100%;
	height: auto;
	display: block;
}

a, a:hover, a:visited { 
	color: #a9494c;
	text-decoration: none;
}

a,
i {
	-webkit-transition:0.2s ease-in-out;
		-moz-transition:0.2s ease-in-out;
			-ms-transition:0.2s ease-in-out;
				transition:0.2s ease-in-out;
}
a:hover { text-decoration: none; }

h1,
h2,
h3,
h4,
h5 { 
	font-family: 'Merriweather', serif;
	font-weight: 600;
	color: #585858; 
}

h1 { font-size: 2.5em; }
h2 { font-size: 2.2em; }
h3 { font-size: 1.4em; }
h4 { font-size: 1em; }
h5 { font-size: 0.8em; }

ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

/* ============================================================================ */
/* 1.1 - Preloader																*/
/* ============================================================================ */

body { 
	overflow: visible; 
	background: #0d0d0d;
}

body.init { overflow: hidden; }

.loader-wrapper {
	width: 2000px;
	height: 2000px;
	position: fixed;
	z-index: 999;
	top: 50%;
	left: 50%;
	margin: -1000px 0 0 -1000px;
	background: #fff;
	text-align: center;
	opacity: 0;
	border-radius: 50%;
	-webkit-transition:1.5s ease-in-out;
		-moz-transition:1.5s ease-in-out;
			-ms-transition:1.5s ease-in-out;
				transition:1.5s ease-in-out;
	-webkit-transform: scale(0);
		-moz-transform: scale(0);
			-o-transform: scale(0);
				-ms-transform: scale(0);
					transform: scale(0);
 }


.init .loader-wrapper { 
	opacity: 1; 
	-webkit-transform: scale(1.3);
		-moz-transform: scale(1.3);
			-o-transform: scale(1.3);
				-ms-transform: scale(1.3);
					transform: scale(1.3);
}

.loader {
	width: 52px;
	height: 52px;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
			-ms-transform: translate(-50%, -50%);
				-o-transform: translate(-50%, -50%);
					transform: translate(-50%, -50%); 
}
/*
.cube1,
.cube2 {
	width: 12px;
	height: 12px;
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 50%;
	background-color: #0d0d0d;
	-webkit-animation: cubemove 1.8s infinite ease-in-out;
		-moz-animation: cubemove 1.8s infinite ease-in-out;
			-ms-animation: cubemove 1.8s infinite ease-in-out;
				animation: cubemove 1.8s infinite ease-in-out; 
}

.cube2 {
	-webkit-animation-delay: -0.9s;
		-moz-animation-delay: -0.9s;
			-ms-animation-delay: -0.9s;
				-o-animation-delay: -0.9s;
					animation-delay: -0.9s; 
}
*/
/* ============================================================================ */
/* 1.2 - Main Content															*/
/* ============================================================================ */

#main-content {
	background: #0d0d0d;
	display: flex;
	height: 100%;
	height: 100vh;
	flex-direction: column;
}

.logo { 
	margin: auto; 
	width: 500px;
	padding: 40px 0px;
	background: #fff;
	border: 6px solid #bf912c;
	border-radius: 50%;
	position: relative;
}
.logo:before {
	content: '';
	width: 96%;
	height: 96%;
	position: absolute;
	border-radius: 50%;
	border: 3px solid #0d0d0d;
	left: 2%;
	top: 2%;
}
.logo img { 
	border-radius: 50%; 
	background: #fff;
}

.social { 
	margin-bottom: 7%; 
	margin-bottom: 3vh;
	opacity: 1; 
	-webkit-transition:1s ease-in-out;
		-moz-transition:1s ease-in-out;
			-ms-transition:1s ease-in-out;
				transition:1s ease-in-out;
}
.social.visible { opacity: 0; }
.social.topper { margin-top: 3vh; }

.social li { display: inline; }

.social li i {
	width: 54px;
	height: 54px; 
	font-size: 20px;
	color: #fff;
	text-align: center;
	line-height: 50px;
	border: 2px solid #fff;
	-webkit-border-radius: 50%;
		border-radius: 50%;
}
.social.topper li i{ 
	font-size: 14px;
	border: none;
}

.social a { 
	color: #fff; 
	font-weight: 700; 
}

.social > li > a > span { 
	opacity: 0; 
	-webkit-transition:0.2s ease-in-out;
		-moz-transition:0.2s ease-in-out;
			-ms-transition:0.2s ease-in-out;
				transition:0.2s ease-in-out;
}

.social > li > a:hover > span { opacity: 1; }

.social > li > a > span:nth-child(1) { transition-delay: 0.1s; }
.social > li > a > span:nth-child(2) { transition-delay: 0.15s; }
.social > li > a > span:nth-child(3) { transition-delay: 0.2s; }
.social > li > a > span:nth-child(4) { transition-delay: 0.25s; }
.social > li > a > span:nth-child(5) { transition-delay: 0.3s; }
.social > li > a > span:nth-child(6) { transition-delay: 0.35s; }
.social > li > a > span:nth-child(7) { transition-delay: 0.4s; }
.social > li > a > span:nth-child(8) { transition-delay: 0.45s; }
.social > li > a > span:nth-child(9) { transition-delay: 0.5s; }

.social > li > a:hover i {
	background: #fff;
	color: #0d0d0d;
}

.social li.facebook { margin: 0 10px 0 0; }
.social li.facebook i { margin: 0 0 0 5px; }

.social li.li-map { margin: 0 0 0 10px; }
.social li.li-map i { margin: 0 5px 0 0; }

.map-mobile { display: none !important;  }

/* ============================================================================ */
/* 1.2 - Google Map																*/
/* ============================================================================ */

#the-map {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0%;
	left: -210%;
	background: #f00;
	border-radius: 50%;
	transition:0.75s ease-in-out;
}

.opened #the-map { left: 0; }

#the-map:before {
	content: '';
	width: 100%;
	height: 100%;
	border:14px solid #0d0d0d;
	opacity: 0.6;
	position: absolute;
	top: 0;
	left: 0;
}
#the-map .tgl-map {
	position: absolute;
	top: 3vh;
	right: 3vh;
	border-radius: 50%;
	background: #fff;
	border: 4px solid #bf912c;
	color: #fff;
	width: 80px;
	height: 80px;
	z-index: 99;
	text-align: center;
	opacity: 0;
}

#the-map .tgl-map:before {
	content: '';
	width: 92%;
	height: 92%;
	position: absolute;
	border-radius: 50%;
	border: 2px solid #0d0d0d;
	left: 4%;
	top: 4%;
}

#the-map .tgl-map i { 
	font-size: 28px;
	opacity: 0.8;
	color: #0d0d0d;
	text-align: center;
	line-height: 74px;
}

.opened #the-map .tgl-map { 
	opacity: 0.8; 
	transition-delay: 0.85s; 
}

.opened #the-map .tgl-map i { 
	transform: rotate(45deg); 
	transition-delay: 1s; 
}

.map {
	width: 100%;
	height: 100%;
	height: 100vh;
}

.contattami span {
	color: white;
}
.contattami .textx {
	font-family: 'Roboto Slab', serif;
	font-style: initial;
}
.contattami span.riga {
	display: inline-block;
	padding-right: 7px;
}
.contattami span.fa {
	padding-right: 3px;
}

a.staycool, a.staycool:hover, a.staycool:visited { 
	color: white;
	text-decoration: none;
	font-weight: normal;
	font-family: 'Roboto Slab', serif;
	font-style: initial;
}

/* ============================================================================ */
/* 1.3 - Buttons, Call-to's														*/
/* ============================================================================ */


/* ============================================================================ */
/* 1.4 - Forms																	*/
/* ============================================================================ */


/* ============================================================================ */
/* 2.1 - Header																	*/
/* ============================================================================ */


/* ============================================================================ */
/* 2.2 - Slider																	*/
/* ============================================================================ */



/* ============================================================================ */
/* 2.9 - Footer																	*/
/* ============================================================================ */


	
/* ============================================================================ */
/* 2.0 - Responsive																*/

/*** WIDE 1280px ***/

@media only screen and (min-width: 1280px) {
	
	.container-fluid { max-width: 1300px; }
	
	.logo { width: 30%; }
	
	.social li i {
		width: 34px;
		height: 34px; 
		font-size: 16px;
		color: #fff;
		text-align: center;
		line-height: 30px;
		border: 2px solid #fff;
		-webkit-border-radius: 50%;
			border-radius: 50%;
	}

}


/*** TABLET (vertical) + MOBILE common rules ***/

@media only screen and (max-width: 991px) {
	
	.logo { 
		width: 600px; 
		padding: 48px 0;
	}

}

/*** TABLET 768px (vertical) ***/

@media only screen and (min-width: 768px) and (max-width: 991px) {
	
	.social li i {
		width: 54px;
		height: 54px; 
		font-size: 20px;
		color: #fff;
		text-align: center;
		line-height: 50px;
		border: 2px solid #fff;
		-webkit-border-radius: 50%;
			border-radius: 50%;
	}

	
}

/*** MOBILE 320px ***/

@media only screen and (max-width: 767px) {

	.map-mobile { display: block; }
	
	.logo { 
		width: 250px; 
		padding: 18px 0px;
	}
	
}

/*** MOBILE (WIDE) 480px ***/


@media only screen and (min-width: 480px) and (max-width: 767px) {
	
	.logo { 
		width: 30%; 
		padding: 20px 0px;
	}

}



/** ================================================ **/
/** Preloader Animation **/
/** ================================================ **/

@-webkit-keyframes cubemove {
  25% {
    -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
    -moz-transform: translateX(42px) rotate(-90deg) scale(0.5);
    -ms-transform: translateX(42px) rotate(-90deg) scale(0.5);
    transform: translateX(42px) rotate(-90deg) scale(0.5); }
  50% {
    -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
    -moz-transform: translateX(42px) translateY(42px) rotate(-180deg);
    -ms-transform: translateX(42px) translateY(42px) rotate(-180deg);
    transform: translateX(42px) translateY(42px) rotate(-180deg); }
  75% {
    -webkit-transform: translateX(0) translateY(42px) rotate(-270deg) scale(0.5);
    -moz-transform: translateX(0) translateY(42px) rotate(-270deg) scale(0.5);
    -ms-transform: translateX(0) translateY(42px) rotate(-270deg) scale(0.5);
    transform: translateX(0) translateY(42px) rotate(-270deg) scale(0.5); }
  100% {
    -webkit-transform: rotate(-360deg);
    -moz-transform: rotate(-360deg);
    -ms-transform: rotate(-360deg);
    transform: rotate(-360deg); } }

@keyframes cubemove {
  25% {
    -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
    -moz-transform: translateX(42px) rotate(-90deg) scale(0.5);
    -ms-transform: translateX(42px) rotate(-90deg) scale(0.5);
    transform: translateX(42px) rotate(-90deg) scale(0.5); }
  50% {
    -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
    -moz-transform: translateX(42px) translateY(42px) rotate(-180deg);
    -ms-transform: translateX(42px) translateY(42px) rotate(-180deg);
    transform: translateX(42px) translateY(42px) rotate(-180deg); }
  75% {
    -webkit-transform: translateX(0) translateY(42px) rotate(-270deg) scale(0.5);
    -moz-transform: translateX(0) translateY(42px) rotate(-270deg) scale(0.5);
    -ms-transform: translateX(0) translateY(42px) rotate(-270deg) scale(0.5);
    transform: translateX(0) translateY(42px) rotate(-270deg) scale(0.5); }
  100% {
    -webkit-transform: rotate(-360deg);
    -moz-transform: rotate(-360deg);
    -ms-transform: rotate(-360deg);
    transform: rotate(-360deg); } }