@font-face {
    font-family: 'brandon_grotesque_regularRg';
    src: url('fonts/brandongrotesque-regular-webfont.woff2') format('woff2'),
         url('fonts/brandongrotesque-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'brandon_grotesquebold';
    src: url('fonts/brandongrotesque-bold-webfont.woff2') format('woff2'),
         url('fonts/brandongrotesque-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'crimson_textbold_italic';
    src: url('fonts/crimsontext-bolditalic-webfont.woff2') format('woff2'),
         url('fonts/crimsontext-bolditalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
html,body{padding:0; margin:0;background:#000;}
html { 
 
}
.background{ 
  position: fixed; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
   z-index: 0; width: 100%; height: 100%; overflow: visible;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  -webkit-transition: opacity 2s ease-in-out;
  -moz-transition: opacity 2s ease-in-out;
  -o-transition: opacity 2s ease-in-out;
  transition: opacity 2s ease-in-out;
  opacity:0; 
  
}
.background1{background: url(images/background1.jpg) no-repeat center center fixed; opacity:1;}
.background2{background: url(images/background2.jpg) no-repeat center center fixed;}
.background3{background: url(images/background3.jpg) no-repeat center center fixed;}
.background4{background: url(images/background4.jpg) no-repeat center center fixed;}
.background5{background: url(images/background5.jpg) no-repeat center center fixed;}
.background6{background: url(images/background6.jpg) no-repeat center center fixed;}
.background7{background: url(images/background7.jpg) no-repeat center center fixed;}
  
p{margin-top:0;}

.centered {
  width:50%;
  position: fixed; /* or absolute */
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}

#leftpanel, #rightpanel{width:43%; height:365px;}
#leftpanel{ float:left; position:relative; height:370px; padding:15px; -webkit-backface-visibility: hidden;}
#leftpanel .logo{position:absolute; top:0; left:0; width:100%; height:auto; transition: opacity 2s ease-in-out;}
.contacts{position:absolute; bottom:0; left:0;  }
.contacts .addr1{font-family:brandon_grotesquebold; font-size:14px; text-transform:uppercase; color:#fff; letter-spacing:0.05em; margin-bottom:0.5em; }
.contacts .addr2{font-family:brandon_grotesque_regularRg; font-size:14px; text-transform:uppercase; color:#fff; letter-spacing:0.05em; margin-bottom:0; }
.contacts .phone,.contacts .phone a{font-family:brandon_grotesque_regularRg; font-size:14px; text-transform:uppercase; color:#fff; letter-spacing:0.05em; margin-bottom:0.5em; text-decoration:none;}
.contacts .email,.contacts .email a{font-family:crimson_textbold_italic; font-size:20px; color:#fff; letter-spacing:0.05em; margin-bottom:0;text-decoration:none;}

#rightpanel{ float:right; position:relative; text-align: justify; font-family:brandon_grotesque_regularRg; font-size:15px; padding:15px; color:#fff; overflow-y:scroll; background:rgba(0,0,0,0.6); -webkit-backface-visibility: hidden;
 -webkit-transform: translateZ(0) scale(1.0, 1.0);
 }
	
	
.contacts.mobile{display:none;}

.logo2,.logo3,.logo4,.logo5,.logo6,.logo7{opacity:0;}

div#preloader { position: fixed; left: 0; top: 0; z-index: 999; width: 100%; height: 100%; overflow: visible; background: #fff url('images/ripple.gif') no-repeat center center; }

/* Large Devices, Wide Screens */
@media screen and (max-width : 1600px) {
	.centered { width:60%; }
	#leftpanel, #rightpanel{width:43%; height:365px;}
	.contacts.mobile{display:none;}
}



/* Large Devices, Wide Screens */
@media screen and (max-width : 1200px) {

	.centered { width:75%; }
	#leftpanel, #rightpanel{width:43%; height:365px;}
	.contacts.mobile{display:none;}
}

/* Medium Devices, Desktops */
@media screen and (max-width : 992px) {
	.centered { width:80%; }
	#leftpanel, #rightpanel{width:43%; height:300px;}
	.contacts.mobile{display:none;}
}

/* Small Devices, Tablets */
@media screen and (max-width : 768px) {
	.centered { width:90%; }
	#leftpanel, #rightpanel{width:43%; height:300px;}
	.contacts.mobile{display:none;}
}

/* Extra Small Devices, Phones */ 
@media screen and (max-width : 640px) {
	.centered { width:90%; position: relative; top: auto;left: auto; transform: translate(0, 0); padding:5%;}
	#leftpanel{padding:0;}
	#leftpanel, #rightpanel{width:100%; height:auto; float:none;}
	#leftpanel .logo{position:absolute;  width:100%; height:auto; margin-top:40vh;  }
	
	.contacts{position:relative;  width:80%; padding:5%; height:auto;}
	#rightpanel{ width:90%; overflow-y:hidden; padding:5%; margin-top:100vh;}
	.contacts.desktop{display:none;}
	.contacts.mobile{display:block; margin-top:50px;  margin-bottom:50px;}
	
	.background{ position:absolute; width:100vw; height: 100vh; min-width:100vw; min-height: 100vh;  background-attachment: scroll;}

}

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {
	
}