* {
	margin: 0;
	padding: 0;
}

/*

@media only screen and (min-width: 320px) and (max-width: 359px) and (orientation: portrait) {
    
}

@media only screen and (min-width: 360px) and (max-width: 384px) and (orientation: portrait) {
    
}

@media only screen and (min-width: 385px) and (max-width: 414px) and (orientation: portrait) {
    
}

@media only screen and (min-width: 415px) and (max-width: 719px) and (orientation: portrait) {
    
}

@media only screen and (min-width: 720px) and (max-width: 1023px) and (orientation: portrait) {
    
}

*/

@font-face {
    font-family: edelsans;
    src: url(font/edelsans_regular);
}

body {
	width: 100%;
	font-family: edelsans;
	font-size: 13.333px;
}
/*------------------------------------------------------------------------------------*/
/*----------------------------------------HEADER--------------------------------------*/
/*------------------------------------------------------------------------------------*/


/*-----------------------HEROS---------------------*/

.hero {
    position: relative;
    height: 526px;
    width: 100%;
}

@media only screen and (min-width: 320px) and (max-width: 414px) {
    .hero {
        height: 260px;
    }
}

@media only screen and (min-width: 360px) and (max-width: 414px) and (orientation: portrait) {
   .hero {
        height: 330px;
    } 
}

@media only screen and (min-width: 415px) and (max-width: 719px) {
    .hero {
        height: 430px;
    }
}

@media only screen and (min-width: 720px) and (max-width: 1023px) {
    .hero {
        height: 530px;
    }
}

/*--------------INDEX HERO-----------------------*/

.index_Hero {
    background: url("/images/fullsize/blueCanyonHero2.jpg") no-repeat;
    background-position: center 106px;
    background-size:cover;
}

@media only screen and (min-width: 320px) and (max-width: 719px) {
    .index_Hero {
        background-position: center 66px;

    }
}

@media only screen and (min-width: 720px) and (max-width: 1023px) {
    .index_Hero {
        background-position: center 86px;
    }
}

/*--------------INDEX HERO END-----------------------*/


/*--------------ABSTRACT HERO-----------------------*/

.abstract_Hero {
    background: url("/images/fullsize/goldSquaresOnVioletHero.jpg") no-repeat;
    background-position: center 106px;
    background-size:cover;
}

@media only screen and (min-width: 320px) and (max-width: 359px) {
    .abstract_Hero {
        background-position: center 50px;

    }
}

@media only screen and (min-width: 360px) and (max-width: 719px) {
    .abstract_Hero {
        background-position: center 66px;

    }
}

@media only screen and (min-width: 720px) and (max-width: 1023px) {
    .abstract_Hero {
        background-position: center 86px;
    }
}

/*--------------ABSTRACT HERO END-----------------------*/


/*--------------LANDSCAPE HERO-----------------------*/

.landscape_Hero {
    background: url("/images/fullsize/boatHouseHero.jpg") no-repeat;
    background-position: center 106px;
    background-size:cover;
}

@media only screen and (min-width: 320px) and (max-width: 359px) {
    .landscape_Hero {
        background-position: center 50px;

    }
}

@media only screen and (min-width: 360px) and (max-width: 719px) {
    .landscape_Hero {
        background-position: center 66px;

    }
}

@media only screen and (min-width: 720px) and (max-width: 1023px) {
    .landscape_Hero {
        background-position: center 86px;
    }
}

/*--------------LANDSCAPE HERO END-----------------------*/


/*------------------------FIGURE HERO--------------------*/

.figure_Hero {
    background: url("/images/fullsize/reclinedAsianNudeHeroFlip.jpg") no-repeat;
    background-position: center 106px;
    background-size: cover;
}

@media only screen and (min-width: 320px) and (max-width: 359px) {
    .figure_Hero {
        background-position: center 50px;

    }
}

@media only screen and (min-width: 360px) and (max-width: 719px) {
    .figure_Hero {
        background-position: center 66px;

    }
}

@media only screen and (min-width: 720px) and (max-width: 1023px) {
    .figure_Hero {
        background-position: center 86px;
    }
}

/*------------------------FIGURE HERO END--------------------*/


/*------------------------SKETCH HERO--------------------*/

.sketchbook_Hero {
    background: url("/images/fullsize/pointHero.jpg") no-repeat;
    background-position: center 106px;
    background-size:cover;
}

@media only screen and (min-width: 320px) and (max-width: 359px) {
    .sketchbook_Hero {
        background-position: center 50px;
    }
}

@media only screen and (min-width: 360px) and (max-width: 719px) {
    .sketchbook_Hero {
        background-position: center 66px;
    }
}

@media only screen and (min-width: 720px) and (max-width: 1023px) {
    .sketchbook_Hero {
        background-position: center 86px;
    }
}

/*------------------------SKETCH HERO END--------------------*/

/*-----------------------HEROS END---------------------*/


/*--------------------HEADER BAR TOP---------------------*/

.header_Bar_Top {
    position: absolute;
    top: 0;
	width: 100%;
	height: 108px;
	background-color: black;
	margin-bottom: 0;
}

@media only screen and (min-width: 320px) and (max-width: 359px) {
    .header_Bar_Top {
        height: 50px;
    }
}

@media only screen and (min-width: 360px) and (max-width: 719px) {
    .header_Bar_Top {
        height: 66px;
    }
}

@media only screen and (min-width: 720px) and (max-width: 1023px) {
    .header_Bar_Top {
        height: 86px;
    }
}

/*--------------------HEADER BAR TOP END---------------------*/


/*-------------------------HEADER LOGO-----------------------*/

#headerLogoContainer {
	width: 215px;
	float: left;
    margin-left: 5%;
}

@media only screen and (min-width: 320px) and (max-width: 359px) {
   #headerLogoContainer {
	   width: 97px;
    }
}

@media only screen and (min-width: 360px) and (max-width: 719px) {
    #headerLogoContainer {
	   width: 130px;
    }
}

@media only screen and (min-width: 720px) and (max-width: 1023px) {
    #headerLogoContainer {
	   width: 171px;
    } 
}


#headerLogo {
	width: 100%;
}

/*-------------------------HEADER LOGO END-----------------------*/


/*--------------------HEADER BAR BOTTOM---------------------*/

.header_Bar_Bottom {
	width: 100%;
	height: 58px;
	background-color: black;
    margin: 0;
    padding: 1px;
    box-shadow: 0 10px 20px 5px #000;
    -moz-box-shadow: 0 10px 20px 5px #000;
    -webkit-box-shadow: 0 10px 20px 5px #000;
}

@media only screen and (min-width: 320px) and (max-width: 359px) {
   .header_Bar_Bottom {
    	height: 152px;
    }
}

@media only screen and (min-width: 360px) and (max-width: 567px) {
    .header_Bar_Bottom {
        height: 152px;
    }
}

/*--------------------HEADER BAR BOTTOM END---------------------*/


/*------------------------HEADER NAV----------------------*/

#headerNav {
	width: 90%;
    text-align: center;
    margin: 22px auto 16px;
	font-size: 1.3em;
    letter-spacing: 4px;
}

@media only screen and (min-width: 320px) and (max-width: 359px) {
   #headerNav {
       width: 100%;
	   font-size: 1.3em;
       margin: 16px auto 1px;
    }
}

@media only screen and (min-width: 360px) and (max-width: 567px) {
    #headerNav {
        width: 100%;
        font-size: 1.3em;
        margin: 16px auto 1px;
    }
}

@media only screen and (min-width: 568px) and (max-width: 663px) {
    #headerNav {
        width: 100%;
        font-size: 1.2em;
    }
}

@media only screen and (min-width: 664px) and (max-width: 719px) {
    #headerNav {
	   font-size: 1.2em;
    }
}

@media only screen and (min-width: 720px) and (max-width: 1023px) {
    #headerNav {
	   font-size: 1.3em;
    } 
}

ul {
	list-style: none;
/* 	display: inline-block; */
	width: 100%;
}

#headerNav li {
	margin: 0 5%;
	display: inline-block;
}

@media only screen and (min-width: 320px) and (max-width: 359px) {
    #headerNav li {
        margin: 0 5% 14px;
        width: 90%;
    }
}

@media only screen and (min-width: 360px) and (max-width: 567px) {
    #headerNav li {
        margin: 0 5% 14px;
        width: 90%;
    }
}

@media only screen and (min-width: 568px) and (max-width: 663px) {
    #headerNav li {
        margin: 0 3%;
    }
}

@media only screen and (min-width: 664px) and (max-width: 719px) {
    #headerNav li {
        margin: 0 4%;
    }
}

@media only screen and (min-width: 720px) and (max-width: 1023px) {
    #headerNav li {
        margin: 0 4.2%;
    } 
}

a {
	text-decoration: none;
	color: white;
}

li#email {
	float: right;
	margin: 0 0 0 5%;
}

/*------------------------HEADER NAV END----------------------*/



/*----------------MAIN CONTAINER----------------*/

#mainContainer {
	/*height: 550px;*/
	width: 90%;
	margin: 64px auto;
	padding: 1%;
}

/*-------------------BLOCKS---------------------*/

.block {
	display: inline-block;
	position: relative;
	width: 22.5%;
	margin: 3% 1%;
}

@media only screen and (min-width: 320px) and (max-width: 359px) {
    .block {
	width: 45.43%;
    margin: 3% 2%;
}
}

@media only screen and (min-width: 360px) and (max-width: 384px) {
    .block {
	width: 45.5%;
    margin: 3% 2%;
}
    
}

@media only screen and (min-width: 385px) and (max-width: 414px) {
    .block {
	width: 45.5%;
    margin: 3% 2%;
}
}

@media only screen and (min-width: 415px) and (max-width: 719px) {
    .block {
	width: 45.55%;
    margin: 2% 
}
}

@media only screen and (min-width: 720px) and (max-width: 1023px) {
    .block {
	width: 28.9%;
    margin: 2% 
}
}

.bigBlock {
    display: inline-block;
	position: relative;
	width: 45%;
	margin: 3% 2%;
}

.imageContainers {
	width: 100%;
}

img.thumbnails {
	width: 100%;
}

img.overlay {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.5s ease;
}

img.overlay:hover {
    opacity: 1;
}

.box-shadow {
	background:#fff;
	box-shadow:0 10px 20px #000;
	-moz-box-shadow:0 10px 20px #000;
	-webkit-box-shadow:0 10px 20px #000;
}

/*--------------------------------------------*/
/*------------------FOOTER--------------------*/
/*--------------------------------------------*/

footer {
	clear: both;
	width: 100%;
	/*min-height: 100%;*/
	height: 76px;
	background-color: black;
	margin-top: 10px;
}

/*--------------FOOTER LOGO------------------*/

#footerLogoContainer {
	width: 150px;
	float: left;
	margin-left: 20px;
}

#footerLogo {
	width: 100%;
}

/*--------------FOOTER LOGO END------------------*/


/*----------------FOOTER NAV----------------*/

#footerNav {
	float: right;
	width: 40%;
	text-align: right;
	margin: 25px 5% 0 0;
	float: right;

}

ul#footerSocialMenu {
	list-style: none;
	width: 100%;
	color: white;
}

ul#footerSocialMenu li {
	margin: 0 3%;
	display: inline-block;
}

#footerSocialMenu img {
	width: 30px;
}

/*----------------FOOTER NAV END----------------*/