body {margin: 0; padding: 0; background-color: #3B3D3F ;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; line-height: 1.428571429; color: #333333; background-color: #584f5b;}

.img-responsive{max-width: 100%; height: auto;}

html {   box-sizing: border-box;}
*, *:before, *:after {  box-sizing: inherit;}

h1, h2, h3, h4, h5, h6, h7 {font-family: 'Righteous', cursive;; font-weight: 400}

h2 {font-size: 32px; color: #FFF}
h3 {font-size: 20px; color: #FFF}

h1, h2, h3 {margin: 0 auto; padding; 0; width: 100%; text-align: center; }

.photo-title {width: 90%; padding-bottom: 10px; margin: 25px auto 0 auto; }

p {font-family: 'Montserrat', sans-serif; font-weight: 400;}

.intro {background-color: #CAE03E; margin: 0; padding: 15px 0 0 0;}
.intro h3 {color: #3B3D3F; font-size; 21px; margin: 0 auto 6px auto; padding-bottom: 10px;}
.intro h3.special {margin-top: 10px;}
.intro h1 {color: #3B3D3F; font-size: 53px; padding-top: 10px; padding-bottom: 10px; line-height: 48px; border-top: 3px solid #3B3D3F; border-bottom: 3px solid #3B3D3F; width: 90%; margin: 0 auto; position: relative;}
.intro h1:before {content: ''; position: absolute; border-top: 3px solid #3B3D3F; top: -9px; left: 0;width: 100%;}
.intro h1:after {content: ''; position: absolute; border-top: 3px solid #3B3D3F; bottom: -9px; left: 0;width: 100%;}
.intro p {color: #3B3D3F; width: 90%; margin: 0 auto; text-align: left; padding: 5px 0 20px 0;abba }

.preloader { position: fixed; top: 50%; left: 50%; width: 50px; height: 50px; margin-top: -25px; margin-left: -25px; -webkit-backface-visibility: hidden; transition: all 0.17s ease-in-out; -moz-transition: all 0.17s ease-in-out; -webkit-transition: all 0.17s ease-in-out; -o-transition: all 0.17s ease-in-out;}

#container {height: 100%; opacity: 0; transition: all 0.17s ease-in-out; -moz-transition: all 0.17s ease-in-out; -webkit-transition: all 0.17s ease-in-out; -o-transition: all 0.17s ease-in-out;}
	#container.active {opacity: 1;}

header {display: block; width: 350px; float: left; background: #3B3D3F; text-align: right; z-index: 4; position: relative; padding: 0;}

.container {position: relative; padding-left: 350px; height: 100%;}

.logo-box,
.logo-box-mobile {padding: 30px 30px; text-align: center; }


.hover-box {position: absolute; width: 100%; height: 100%; background: rgba(62,49,54,.88); text-align: center; color: #FFF; display: table-cell; vertical-align: middle;}

.jh {background: rgba(77, 6, 44,.88);}
.jr {background: rgba(2, 55, 71,.88);}
.ms {background: rgba(62, 3, 7,.88);}
.md {background: rgba(65, 28, 52,.88);}
.mg {background: rgba(31, 114, 154, 0.88);}
.dg {background: rgba(13, 77, 43,.88);}
.aa {background: rgba(90, 12, 52,.88);}
.gc {background: rgba(16, 47, 116,.88);}
.mh {background: rgba(103, 14, 49,.88);}
.kw {background: rgba(7, 2, 2,.88);}
.mi {background: rgba(19, 19, 19,.88);}
.jd {background: rgba(16, 23, 66,.88);}
.mk {background: rgba(85, 18, 21,.88);}
.jm {background: rgba(22, 89, 139,.88);}
.ls {background: rgba(57, 181, 204,.88);}


.hover-box .body-copy,
.hover-box-mobile .body-copy {margin-top: 10%}

.hover-box p,
.hover-box-mobile p {width: 90%; margin: 0 auto; font-size: 14px; color: #FFF; text-align: left; padding: 10px 0;}

.hover-box-mobile {
	margin-top: -42px;
	padding-bottom: 20px;
	padding-top: 15px;
}


.photo {width: 33%; height: 445px;  margin: 0;  padding: 0;  overflow: hidden; display: table;}

iframe {width: 100%; min-height: 325px;}

 @media screen and (min-width: 1756px) {
	.photo {width: 25%;} 
}

@media screen and (max-width: 1755px) {
     .photo {width: 33.3%;}
}

@media screen and (max-width: 1380px) {
     .photo {width: 50%;}
}

@media  screen and (min-width: 769px) {
	.hover-box-mobile,
	.logo-box-mobile
		 { display:none !important;}
	
	}


@media  screen and (max-width: 768px) {
	header {float: none; text-align: center; width: 100%; max-width: 100%; height: auto !important;position:inherit;}
	.intro h1 {padding-bottom: 5px;}
	.container { padding-left: 0;}
	.hover-box { display:none !important;}
	.logo-box { display: none;}
}

@media screen and (max-width: 994px) {
	.photo {width: 100%; /*max-width: 500px;*/}
}