@font-face {
    font-family: 'chalet';
    src: url("fonts/chalet/chalet-paris1970-webfont.eot");
    src: url("fonts/chalet/chalet-paris1970-webfont-.eot#iefix") format('embedded-opentype'),
         url("fonts/chalet/chalet-paris1970-webfont.woff") format('woff'),
         url("fonts/chalet/chalet-paris1970-webfont.ttf") format('truetype'),
         url("fonts/chalet/chalet-paris1970-webfont.svg#chunkfiveroman") format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'aleo';
    src: url("fonts/aleo/Aleo-Light-webfont.eot");
    src: url("fonts/aleo/Aleo-Light-webfont-.eot#iefix") format('embedded-opentype'),
         url("fonts/aleo/Aleo-Light-webfont.woff") format('woff'),
         url("fonts/aleo/Aleo-Light-webfont.ttf") format('truetype'),
         url("fonts/aleo/Aleo-Light-webfont.svg#aaarghnormal") format('svg');
    font-weight: normal;
    font-style: normal;
   
}



body {margin: 0; padding: 0; background-color: rgb(180, 183, 184);font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; line-height: 1.428571429; color: #333333; background-color: #584f5b;}

.img-responsive{width: 100%; height: auto; transform: scale(1.025)}

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

h1, h2, h3, h4, h5, h6, h7 {font-family: "chalet"; font-weight: 300}

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

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: "aleo"; font-weight: normal;}

.intro {background-color: rgb(62,49,54); margin: 0; padding: 15px 0 0 0;}
.intro h3 {color: #ded3ae; font-size; 21px; margin: 0 auto 6px auto;}
.intro h3.special {margin-top: 6px;}
.intro h1 {color: #bd785b; font-size: 53px; padding-top: 10px;  line-height: 48px; border-top: 3px solid #51494f; border-bottom: 3px solid #51494f; width: 90%; margin: 20px auto; position: relative;}
.intro h1:before {content: ''; position: absolute; border-top: 3px solid #51494f; top: -9px; left: 0;width: 100%;}
.intro h1:after {content: ''; position: absolute; border-top: 3px solid #51494f; bottom: -9px; left: 0;width: 100%;}
.intro p {color: #ded3ae; 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: #bd785b; text-align: right; z-index: 4; position: relative; padding: 0;}

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

.logo-box {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;}

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

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


.photo, .grid-sizer {width: 33%; max-height: 445px;  margin: 0;  padding: 0;  overflow: hidden; display: table;}

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

@media screen and (min-width: 1651px) {
	.photo, .grid-sizer {width: 25%;}
}

@media screen and (max-width: 1650px) {
     .photo, .grid-sizer {width: 33.3%;}
}

@media screen and (max-width: 1330px) {
     .photo, .grid-sizer {width: 50%; height:auto;}
}

@media screen and (max-width: 994px) {
    .photo, .grid-sizer {width: 50%;}

}

@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;}
}
@media  screen and (max-width: 994px) {
    .photo, .grid-sizer {width: 100%;}
}