/* Design + Code by Gabe Abadilla   www.gabadilla.com   gabadilla@gmail.com */

/* RESETS */
html,button,input,select,textarea {color: #222;}
body {font-size: 1em; line-height: 1.4;}
::-moz-selection {background: #b3d4fc;text-shadow: none;}
::selection {background: #b3d4fc; text-shadow: none;}
hr {display: block;height: 1px;border: 0;border-top: 1px solid #ccc;margin: 1em 0;padding: 0;}
img {vertical-align: middle;}
fieldset {border: 0;margin: 0;padding: 0;}
textarea {resize: vertical;}
.chromeframe {margin: 0.2em 0;background: #ccc;color: #000;padding: 0.2em 0;}

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0;}
table { border-collapse:collapse;border-spacing:0;}
fieldset,img { margin:0; padding:0; border:0;}
address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal;}
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;}
q:before,q:after {content:'';}
abbr,acronym { border:0;}
@-moz-document url-prefix() {body {font-weight: lighter !important;}}

/* COMMON */
html{background:#ebebeb;   -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-smoothing: antialiased;}
body{color:#555; font-family:'Raleway', sans-serif; font-weight: 500; -webkit-font-smoothing:antialiased}
a, a img, a:hover, a:hover img, .animate{ -webkit-transition: all .4s ease-out; -moz-transition: all .4s ease-out; -ms-transition: all .4s ease-out;-o-transition: all .4s ease-out; transition: all .4s ease-out; text-decoration: none;}
a.quick, a.quick img, a.quick:hover, a.quick:hover img, .animate:hover{ -webkit-transition: all .2s ease-out; -moz-transition: all .2s ease-out; -ms-transition: all .2s ease-out;-o-transition: all .2s ease-out; transition: all .2s ease-out;}
img.imageScale{max-width:100%;}
.sr .revealWork { visibility: hidden;}

div.wrapper{position:relative; margin:0 auto; width:100% ;background: #FAFAFA}
div.container{margin:0 auto; width:1240px}

/* HEADER */
.header { background-color:rgba(39,47,59,0); position: fixed; width: 100%; z-index: 3; height:80px; transition: all 0.2s ease-in-out;}
.header ul {margin: 32px 0 0 0; padding: 0; list-style: none; overflow: hidden; background-color: transparent; padding:0 2% 0 0}
.header ul li{float: left; margin: 0 0 0 40px}
.header li a {display: block; padding:0; font-size: 13px; color:rgba(255,255,255,1); font-weight: 700; text-decoration: none; text-transform:uppercase; letter-spacing: 1.5px;height: 20px}
.header li a:hover,.header .menu-btn:hover {color:rgba(255,255,255,.6)}
.header li a.active{border-bottom: 2px solid #B0A586}
.header li a.active:hover{color:#FFF}
.header .logo {display: block; float: left; margin:27px 0 0 2%; text-decoration: none; width:220px;}
.header.active{background: rgba(39,47,59,1)}

.header li {}
.header li a {}
.header .menu {clear: none; float: right; max-height: none;}
.header .menu-icon {display: none;}
.header .menu-btn {display: none;}

ul.navigation{margin: 32px 0 0 0}
ul.navigation li{float: left; margin: 0 0 0 40px}
ul.navigation li a{display:block; font-size: 13px; color:rgba(255,255,255,1); font-weight: 700; text-decoration: none; text-transform:uppercase; letter-spacing: 1.5px; height: 20px}
ul.navigation li a:hover{color:rgba(255,255,255,.6)}
ul.navigation li a.active{border-bottom: 2px solid #B0A586}
ul.navigation li a.active:hover{color:#FFF}

div.intro{background:url(../img/background_homepage.jpg) 50% 60% #1E2834; background-size: cover; padding:225px 0}
div.intro:before {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 150px;background-image: linear-gradient(to bottom,rgba(0, 0, 0, 1),rgba(0, 0, 0, 0));opacity: .5;
}

div.intro div.messaging{width:70%; margin: 0 auto}
div.intro div.messaging h1{color:#fff; text-align: center; font-size: 44px; font-family: 'roboto slab'; margin:0 0 10px 0}
div.intro div.messaging p{color:#fff; text-align: center; font-size:18px; opacity: .9; line-height: 150%}

div.practiceAreas{padding:80px 0;}
div.practiceAreas div.container{width:960px}
div.practiceAreas h3{margin:0 auto 20px; text-align: center; letter-spacing: 2px; text-transform: uppercase; font-weight: 600; font-size: 14px; color:#333; font-family: 'roboto slab'}
div.practiceAreas span.bar{margin:0 auto 30px; display: block; height: 3px; width:50px; background: #958A6C}
div.practiceAreas div.columns{}
div.practiceAreas div.left{float:left; width:25%}
div.practiceAreas div.right{float:left; width:70%; margin:0 0 0 30px; padding:10px 0 0 0}
div.practiceAreas div.right h4{color:#333; font-family: 'roboto slab'; font-size:28px; font-weight:500; letter-spacing: -.5px; margin:0 0 20px 0;}
div.practiceAreas div.right p{font-size:16px; line-height: 175%; color:#555; margin:0 0 20px 0}
div.practiceAreas a.textButton{display: inline-block; padding:10px 20px; color:#333; font-size:13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; border:2px solid #B0A586; text-decoration: none;}
div.practiceAreas a.textButton:hover{border:2px solid #998F74; background:#B0A586; color:#fff}

div.recognition{padding:80px 0;background:url(../img/light_pattern.gif);}
div.recognition div.container{width:960px}
div.recognition h3{margin:0 auto 20px; text-align: center; letter-spacing: 2px; text-transform: uppercase; font-weight: 600; font-size: 14px; color:#333; font-family: 'roboto slab'}
div.recognition span.bar{margin:0 auto 30px; display: block; height: 3px; width:50px; background: #958A6C}
div.recognition div.blurb {width:28%; float:left; margin: 0 0 0 3%; border:4px solid #E0E0E0; height:135px; padding:70px 0 0 0; background: #FAFAFA; -webkit-box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.03); -moz-box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.03); box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.03);}
div.recognition div.blurb p{margin: 0 auto; width:80%; font-size: 18px; line-height: 150%; color:#333; font-weight: 600; text-align: center}
div.recognition div.blurb p span{display: block; color:#777; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; font-weight: 500}
div.recognition div.blurbs div.one{background:url(../img/blurb_1.png) 50% 30px no-repeat #FAFAFA;}
div.recognition div.blurbs div.two{background:url(../img/blurb_2.png) 50% 30px no-repeat #FAFAFA;}
div.recognition div.blurbs div.three{background:url(../img/blurb_3.png) 50% 30px no-repeat #FAFAFA;}

div.contact{padding:80px 0;background:url(../img/blue_pattern.gif);}
div.contact div.logo{width:220px; margin:0 auto}
div.contact div.contactInfo{padding: 50px 0 0 0; width:320px; margin: 0 auto;}
div.contact ul{}
div.contact ul li{margin:0 0 25px 0; color:#BAC5D1; font-size: 18px; width:400px; position: relative; padding:0 0 0 100px;}
div.contact ul li a{color:#fff; text-decoration: none;}
div.contact ul li a:hover{color:#BAC5D1;}
div.contact ul li span{position:absolute; left:0px; padding:5px 0 0 0; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; font-size: 13px; color:#B0A586; font-family: 'roboto slab'}



/* SECONDARY */
body.secondary div.intro{padding:150px 0}
body.practiceAreas div.intro{background:url(../img/background_practice_areas.jpg) 50% 50% #1E2834; background-size: cover;}
body.publications div.intro{background:url(../img/background_publications.jpg) 50% 50% #1E2834; background-size: cover;}
body.presentations div.intro{background:url(../img/background_presentations.jpg) 50% 50% #1E2834; background-size: cover;}
body.services div.intro{background:url(../img/background_services.jpg) 50% 50% #1E2834; background-size: cover;}

body.secondary div.intro div.messaging{width:70%; margin: 0 auto}
body.secondary div.intro div.messaging h1{color:#fff; text-align: center; font-size: 44px; font-family: 'roboto slab';text-transform: uppercase; letter-spacing: 3px;}

div.contentContainer{padding:80px 0}
div.columnContainer{}

div.mainColumn {width:65%; float:left;}
div.mainColumn h4{font-size: 24px; line-height: 170%; font-family: 'roboto slab'}
div.mainColumn span.divider{display: block; height:3px; margin:40px 0; background:url(../img/divider_pattern.gif) }
div.mainColumn h3{margin:0 0 20px 0; letter-spacing: 2px; text-transform: uppercase; font-weight: 600; font-size: 14px; color:#333; font-family: 'roboto slab'}
div.mainColumn p{margin:0 0 20px 0; line-height: 175%}
div.mainColumn ul.bulletList{list-style-position: outside; list-style-type: disc;}
div.mainColumn ul.bulletList li{margin: 0 0 15px 40px; line-height: 175%}
div.mainColumn ul.plainList{list-style-type: none;}
div.mainColumn ul.plainList li{margin: 0 0 15px 20px; padding: 20px 0 10px ; line-height: 175%; border-top: 1px solid #e6e6e6}

div.mainColumn ul.servicesList{list-style-position: inside; list-style-type: disc;}
div.mainColumn ul.servicesList li{margin: 0 0 15px 0; padding: 0 5% 0 0; line-height: 175%; display: block; width: 45%; float: left;}

div.mainColumn a{font-weight: bold; color: #333; border-bottom: 0px solid transparent; text-decoration: none;}
div.mainColumn a:hover{color: #333; text-decoration: underline; border-bottom: 0px solid #aaa}
div.mainColumn span.emphasis{font-style: italic;}
div.mainColumn div.services{  -webkit-column-count: 2;-moz-column-count: 2;column-count: 2;}

div.sideColumn{width:30%; margin:0 0 0 5%; float: left; background:url(../img/light_pattern.gif);}
div.sideColumn div.imageContainer{width: 80%; margin:40px auto 0}
div.sideColumn h3{margin:0 auto 20px; text-align: center; letter-spacing: 2px; text-transform: uppercase; font-weight: 600; font-size: 14px; color:#333; font-family: 'roboto slab'}
div.sideColumn span.bar{margin:0 auto 30px; display: block; height: 3px; width:50px; background: #958A6C}
div.sideColumn ul{width:80%; margin: 0 auto 40px;}
div.sideColumn li{font-size: 14px; margin: 0 0 20px 0; line-height: 150%;}

/* MEDIA QUERIES*/
@media only screen and (max-width : 1024px) and (min-width : 320px) {
    /* mobile styles */

    .header{background: rgba(39,47,59,1) }
    .header .logo {left; margin:25px 0 0 25px;}
    .header .menu {clear: both; max-height: 0; transition: max-height .2s ease-out; float:none;}
    .header .menu-icon {cursor: pointer; display: inline-block;float: right; padding: 38px 28px;position: relative;user-select: none;}
    .header .menu-icon .navicon {background: #fff;display: block;height: 2px;position: relative; transition: background .2s ease-out;width: 18px;}
    .header .menu-icon .navicon:before,
    .header .menu-icon .navicon:after {background: #fff; content: '';display: block;height: 100%;position: absolute;transition: all .2s ease-out;width: 100%;}
    .header .menu-icon .navicon:before {top: 5px;}
    .header .menu-icon .navicon:after {top: -5px;}
    .header .menu-btn {display: none;}
    .header .menu-btn:checked ~ .menu {max-height: 300px;}
    .header .menu-btn:checked ~ .menu-icon .navicon {background: transparent;}
    .header .menu-btn:checked ~ .menu-icon .navicon:before {transform: rotate(-45deg);}
    .header .menu-btn:checked ~ .menu-icon .navicon:after {transform: rotate(45deg);}
    .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {top: 0;}
    .header ul {margin: 0; padding: 0; list-style: none; overflow: hidden; background-color: transparent; width:100%}
    .header ul li{float:none; display:block; height:60px; margin:0;}
    .header ul li a {display: block; font-size: 13px; color:rgba(255,255,255,1); font-weight: 700; text-decoration: none; text-transform:uppercase; letter-spacing: 1.5px; height: 60px; padding:20px 0 0 25px; background: #1a1e26;}
    .header ul li a:hover,.header .menu-btn:hover {color:#fff; background: #333947}
    .header ul li a.active{border-bottom: 2px solid #B0A586}
    .header ul li a.active:hover{color:#FFF}

    div.container{margin:0 auto; width:90%}
    div.intro{background:url(../img/background_homepage_mobile.jpg) 50% 50% #1E2834; background-size: cover; padding:160px 0 80px}
    div.intro div.messaging h1{font-size: 32px;}
    div.intro div.messaging{width:100%; margin: 0 auto}

    div.practiceAreas{padding:40px 0;}
    div.practiceAreas div.container{width:90%}
    div.practiceAreas div.left{float:left; width:100%}
    div.practiceAreas div.imageContainer{width:240px; margin:0 auto}
    div.practiceAreas div.right{float:left; width:100%; margin:0 0 0 0; padding:10px 0 0 0}
    div.practiceAreas div.right h4{color:#333; font-family: 'roboto slab'; font-size:28px; font-weight:500; letter-spacing: -.5px; margin:0 0 20px 0;}
    div.practiceAreas div.right p{font-size:16px; line-height: 175%; color:#555; margin:0 0 20px 0}
    div.practiceAreas a.textButton{display: block; text-align: center;}
    div.practiceAreas a.textButton:hover{border:2px solid #998F74; background:#B0A586; color:#fff}

    div.recognition{padding:40px 0;}
    div.recognition div.container{width:90%; text-align: center;}
    div.blurbs{width:100%}
    div.recognition div.blurb {width:95%; margin: 0 auto 5%; border:4px solid #E0E0E0; height:auto; padding:60px 0 20px 0; background: #FAFAFA; -webkit-box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.03); -moz-box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.03); box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.03);}
    div.recognition div.blurb p{margin: 0 auto; width:90%; font-size: 16px; line-height: 150%; color:#333; font-weight: 600; text-align: center}
    div.recognition div.blurbs div.one{background:url(../img/blurb_1.png) 50% 20px no-repeat #FAFAFA;}
    div.recognition div.blurbs div.two{background:url(../img/blurb_2.png) 50% 20px no-repeat #FAFAFA;}
    div.recognition div.blurbs div.three{background:url(../img/blurb_3.png) 50% 20px no-repeat #FAFAFA;}
    div.recognition div.blurbs div.blurb:last-child{margin-bottom: 0}

    div.contact{padding:40px 0;background:url(../img/blue_pattern.gif);}
    div.contact div.logo{width:180px; margin:0 auto}
    div.contact div.contactInfo{padding: 50px 0 0 0; width:100%; margin: 0 auto;}
    div.contact ul{}
    div.contact ul li{text-align: center; margin:0 0 25px 0; width:100%; position: relative; padding:0;}
    div.contact ul li span{position:relative; display:block; padding:0; margin:0 0 10px 0;}

    body.secondary div.intro{padding:160px 0 80px}
    body.practiceAreas div.intro{background:url(../img/background_practice_areas_mobile.jpg) 50% 50% #1E2834; background-size: cover;}
    body.publications div.intro{background:url(../img/background_publications_mobile.jpg) 50% 50% #1E2834; background-size: cover;}
    body.presentations div.intro{background:url(../img/background_presentations_mobile.jpg) 50% 50% #1E2834; background-size: cover;}
    body.services div.intro{background:url(../img/background_services_mobile.jpg) 50% 50% #1E2834; background-size: cover;}
    body.secondary div.intro div.messaging{width:100%; margin: 0 auto}
    body.secondary div.intro div.messaging h1{color:#fff; font-size: 22px; font-weight: 700}
    div.contentContainer{padding:40px 0}
    div.columnContainer{}
    div.mainColumn {width:100%;}
    div.mainColumn h4{font-size: 20px; line-height: 150%;}
    div.mainColumn p{margin:0 0 20px 0; line-height: 175%}
    div.mainColumn ul.bulletList{list-style-position: outside; list-style-type: disc;}
    div.mainColumn ul.bulletList li{margin: 0 0 15px 20px;}
    div.mainColumn ul.plainList li{margin: 0 0 15px 0;}
    div.mainColumn div.services{  -webkit-column-count: 1;-moz-column-count: 1;column-count: 1;}
    div.sideColumn{width:100%; margin:40px 0 0 0; float: left; background:url(../img/light_pattern.gif);}
    div.sideColumn div.imageContainer{width:240px; margin:40px auto 0}
    div.sideColumn ul{width:90%; margin: 0 auto 40px;}
    div.sideColumn li{font-size: 15px;}
}
@media only screen and (max-width : 1279px) and (min-width : 1024px) {
    /* medium desktop styles */
    div.container{margin:0 auto; width:90%}
    div.header div.logo{padding:0 0 0 5%;}
    div.navigationContainer{padding:0 5% 0 0}
    div.intro div.messaging{width:100%; margin: 0 auto}
}
@media only screen and (max-width : 1799px) and (min-width : 1280px) {
    /* typical desktop */

}



@media print {
    * {background: transparent !important; color: #000 !important; /* Black prints faster: h5bp.com/s */ box-shadow: none !important; text-shadow: none !important;}
    a, a:visited { text-decoration: underline;}
    a[href]:after { content: " (" attr(href) ")";}
    abbr[title]:after { content: " (" attr(title) ")";}
    .ir a:after,a[href^="javascript:"]:after,a[href^="#"]:after {content: "";}
    pre, blockquote { border: 1px solid #999; page-break-inside: avoid;}
    thead {display: table-header-group; /* h5bp.com/t */}
    tr, img {page-break-inside: avoid;}
    img {max-width: 100% !important;}
    @page {margin: 0.5cm;}
    p, h2, h3 { orphans: 3; widows: 3;}
    h2, h3 { page-break-after: avoid;}
}

/* CLEARFIX */
.clearfix:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}
.clearfix {display: inline-block;}
html[xmlns] .clearfix {display: block;}
* html .clearfix {height: 1%;}