/* CSS Document */

body{background: #fff;}
#main{ padding-bottom: 0;}

@media only screen and (min-width: 1024px) {
#main{ padding-bottom:0px;}
}

@media only screen and (min-width: 1224px) {
#main{padding-bottom: 0px;}
}

#header{border: none !important;}

/* *******************************************
// hero
******************************************* */

.halbergTitle{margin-top: 25%;}
.halbergTitle1{margin-top:50%;}
#hero{position: relative;min-height: 1px;}

/*
// heronav
*/

#hero .heronav{text-decoration: none;position: absolute;bottom: 10px;z-index: 5;font-size: 14px;border: none;}
#hero .prev{left: auto;right: 41px;}
#hero .next{left: auto;	right: 10px;}
#hero .heronav .sprite{display: block;padding: 0;height: 30px;line-height: 30px;width: 30px;color: #000;opacity: .6;text-decoration: none;border: none;text-align: left;text-indent: -9000px;}
#hero .heronav .sprite:hover{ opacity: 1; }
#hero .prev .sprite{-webkit-border-radius: 2px 0 0 2px;	-moz-border-radius: 2px 0 0 2px;border-radius: 2px 0 0 2px;background-position: -40px -195px;}
#hero .next .sprite{-webkit-border-radius: 0 2px 2px 0;-moz-border-radius: 0 2px 2px 0;border-radius: 0 2px 2px 0;background-position: -5px -195px;}

@media only screen and (min-width: 600px) {
.halbergTitle{margin-top: 15%;}
.halbergTitle1{margin-top:20%;}
#hero .heronav{top: 0;bottom: 0;width: 40px;}
#hero .prev{ left: 0; right: auto; }
#hero .next{ left: auto; right: 0; }
#hero .heronav .sprite{font-size: 24px; height: 70px; width: 35px; padding: 0;position: absolute;top: 45%;}	
#hero .prev .sprite{-webkit-border-radius: 0;-moz-border-radius: 0;border-radius: 0;left: 15px;background-position: -115px -195px;}
#hero .next .sprite{right: 15px;-webkit-border-radius: 0;-moz-border-radius: 0;border-radius: 0;background-position: -75px -195px;}
#hero .heronav{ top: 0; bottom: 0;}
#hero .prev{ background: url(hero.prev.png) repeat-y right 0; }
#hero .next{ background: url(hero.next.png) repeat-y 0 0; }
}

@media only screen and (min-width: 1024px) {
#hero .heronav{ width: 75px; }
}

@media only screen and (min-width: 1224px) {
.halbergTitle1{margin-top:50%;}
#hero .heronav{ width: 100px; }	
#hero .next{ right: 25%;}
}

/*
// work
*/
#work{height: 300px;overflow: hidden;position: relative;z-index: 1;}
#work .article{position: absolute;top: 0;bottom:0;left: 0;right: 0;display: block;text-decoration: none;border: none;
	transform:translateZ();
    -ms-transform:translateZ(); /* IE 9 */
    -moz-transform:translateZ(); /* Firefox */
    -webkit-transform:translateZ(); /* Safari and Chrome */
    -o-transform:translateZ(); /* Opera */
    color: #fff;
}

#work .article [data-colgroup="true"]{position: relative; height: 200px;padding: 50px 0px 50px 0px;}
#work .content{position: absolute;left: 0;bottom: 50px;}
.txt-shw{text-shadow:0px 0px 20px rgba(0,0,0,1)}

#work h1{text-transform: uppercase;color: #fff;margin: 0 0 0;padding: 0;color: #fff;font-size: 60px;line-height: .9;text-transform: uppercase; letter-spacing: -2px;}
#work h1 .sml{letter-spacing: 0;}
#work .subhead{font-size: 18px;color: #fff;line-height: 1.2;margin: .5em 0;}
#work .drk-clr{ color:#000 !important; font-weight:100;}
#work .drk-clr1{ color:#0D0F7E !important; font-weight:100;}
#work .drk-clr2{ color:#000000 !important; font-weight:100;}
#work .drk-clr3{ color:#FF8000 !important; font-weight:100;}

#work .content .gph{font-size:.75em; top:-.10em; position: relative; opacity:.75; filter: alpha(opacity=0); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-transition: opacity .25s ease-out;
	-moz-transition: opacity .25s ease-out;	-o-transition: opacity .25s ease-out; -ms-transition: opacity .25s ease-out; transition: opacity .25s ease-out;}
#work .content:hover .gph{ opacity: 1; filter: alpha(opacity=100); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";}

@media only screen and (min-width: 600px) {    
#work{ height: 475px; }
#work .article [data-colgroup="true"]{ height: 375px; }    
#work .content{ top: 20%; }
#work h1{ font-size:60px; letter-spacing: -2px; }	
#work .subhead{font-size:24px; max-width: 550px;}
}


@media only screen and (min-width: 1224px) {
#work .content{top: 15%;}
#work h1{position: relative; font-size: 70px; letter-spacing: -3px;}
#work .subhead{font-size:28px; max-width: 550px;}
}