/*
Theme Name: Gravity and Grace
*/

@charset "utf-8";

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,input,textarea{font-size:100%;font:inherit;padding:0;border:0;margin:0;vertical-align:baseline;box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
.sticky{}.bypostauthor{}.wp-caption{}.wp-caption-text{}.gallery-caption{}.alignright{}.alignleft{}.aligncenter{}

body { font-size: 18px; line-height: 30px; font-family: 'Open Sans', Helvetica, Arial, sans-serif; color: #666; }

.container { width: 1300px; margin: 0 auto; }
a img { border: none; }
.clear { clear: both; }
.clearfix:before,
.clearfix:after { content:""; display:table; }
.clearfix:after { clear:both; }
/* For IE 6/7 (trigger hasLayout) */
.clearfix { zoom:1; }

.half, .third, .twothirds, .quarter, .threequarters, .fifth, .twofifths, .threefifths, .fourfifths, .eighth, .threeeighths, .fiveeighths, .seveneighths { padding: 0px 40px 20px 40px; box-sizing:border-box; float: left; }

.last {  }
.right { float: right; padding: 0 0 20px 20px; }
	
.full { width: 100%; }
.half { width: 50%; }
.quarter { width: 25%; }
.threequarters { width: 75%; }
.third { width: 33.33%; }
.twothirds { width: 66.66%; }
.fifth { width: 20%; }
.twofifths { width: 40%; }
.threefifths { width: 60%; }
.fourfifths { width: 80%; }
.eighth { width: 12.5%; }
.threeeighths { width: 37.5%;  }
.fiveeighths { width: 62.5%;  }
.seveneighths { width: 87.5%; }

img { max-width: 100%!important; height: auto!important; }
iframe { max-width: 100%; }

.alignleft { float: left; margin: 0 20px 20px 0; }
.alignright { float: right; margin: 0 0 20px 20px; }
.aligncenter { display: block; margin: 0 auto 20px auto; }

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

.home-header { background-position: top center; background-repeat: no-repeat; }
.home-header #logo { position: absolute; top: 30px; right: 10%; }
.interior-header { padding: 30px 0; }
.interior-header #logo { position: relative; margin: 0 auto; display: block; width: 300px; height: auto; }

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

#nav { position: relative;  background: #222; height: 75px; }
#menu-icon { display: none; width: 32px; height: 32px; background: url(images/menu-white.png) no-repeat; position: absolute; left: 20px; top: 10px; background-size: 32px 32px; }

#nav ul { list-style-type: none; text-align: center; }
#nav ul li { display: inline-block; position: relative; }
#nav ul li a { color: #fff; line-height: 75px; display: block; text-decoration: none; padding: 0 30px; transition: all 0.4s ease-in-out; }
#nav ul li a:hover, #menu-primary li.current_page_item a, #menu-primary li.current-page-parent a { background: #4a4a4a; }
#nav ul li ul { position: absolute; left: -9999px; }
#nav ul li:hover ul { left: 0px; }
#nav ul li ul li { float: none; }
#nav ul li ul li a { white-space: nowrap; }
#nav ul li:hover a {  } /* to make the top link stay hovered when you move down the list */
#nav ul li:hover ul a {  }/* so only the top link stays hovered */
#nav ul li ul li a:hover {  } /* most specific hover */

/* ------------- CONTENT ------------ */

#content { text-align: center; padding: 40px 0; } /* full width content area between header and footer */
#content .container {  } /* inner area between header and footer */
#content ul, #content ol { margin-left: 20px; margin-bottom: 20px; }
#content ul li, #content ol li { margin-bottom: 5px; }
#content ul { list-style-image: url(images/list-icon.png); list-style-position: inside; }
#content #comments ul { list-style-image: none; }
#content ol { list-style-type: decimal; }
#content p { margin-bottom: 20px; }
#content hr { border-top: none; border-bottom: 1px solid #ddd; margin: 50px 0 60px 0; }
#content a { color: #b00808; }

strong { font-weight: bold; }
#content strong { color: #000; }

h1, h2, h3, h4, h5, h6 { font-family: 'Open Sans Condensed', Arial Narrow, sans-serif; line-height: 1.1em; }
h1 { font-size: 60px; color: #b00808; margin-bottom: 30px; }
h2 { font-size: 48px; color: #000; margin-bottom: 30px; }
h3 { font-size: 30px; color: #000; margin-bottom: 20px; }
h3.post-title { margin-bottom: 0; }
h4 { font-size: 30px; color: #b00808; margin-bottom: 20px; }
h5 { font-size: 24px; color: #000; margin-bottom: 20px; }
h6 { font-size: 24px; color: #b00808; margin-bottom: 20px; }

#content h1 a, #content h4 a, #content h6 a { text-decoration: none; }
#content h2 a, #content h3 a, #content h5 a { color: #000; text-decoration: none; }

#content .round img { border-radius: 50%; border: 5px solid #fff; box-shadow: 1px 1px 10px #444; }
#content a img:hover { transition: all 0.4s ease-in-out; opacity: 0.7; }

#content input[type=email], #content input[type=text], #content input[type=tel], #content textarea { width: 100%; padding: 10px; border: 1px solid #ddd; background: #f8f8f8; }
#content textarea { height: 140px; }
#content input[type=submit], #content .button a, #content a.button {  color: #fff; background: #b00808; border: 2px solid #b00808;  padding: 10px 0; width: 100%; text-align: center; transition: all 0.4s ease-in-out; cursor: pointer; text-decoration: none; display: block; }
#content input[type=submit]:hover, #content .button a:hover, #content a.button:hover { color: #b00808; background: none; }

#content .nomargin { margin-bottom: 0; }

#content .postmeta { font-size: 14px; }
#content .blog-post { margin-bottom: 40px; border-bottom: 1px solid #ddd; }

/* ---------------- SIDEBAR ------------ */

#sidebar { padding-right: 0; }
#content #sidebar ul { margin-left: 0; list-style-image: none; }
#content #sidebar ul li ul li { border-bottom: 1px solid #ddd; margin-bottom: 0; padding: 10px 0; }
#content #sidebar ul li ul li:nth-of-type(1) { border-top: 1px solid #ddd; }

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

#footer { background: #222; padding: 30px 0; text-align: center; color: #ccc; font-size: 16px; }
#footer ul { text-align: center; } 
#footer ul li { display: inline-block; padding: 0 10px; }
#footer a { color: #ccc; }

/* ------------------- MEDIA QUERIES -------------------- */

@media only screen and (min-width: 1921px) {
.home-header { height: 700px; background-size: auto 700px; }
}

@media only screen and (max-width: 1920px) {
.home-header { height: 600px; background-size: auto 600px; }
}

@media only screen and (max-width: 1680px) {
.home-header #logo { right: 5%; }
}

@media only screen and (max-width: 1440px) {
.home-header #logo { width: 400px; height: auto; }
.container { width: 1140px; }
.half, .third, .twothirds, .quarter, .threequarters, .fifth, .twofifths, .threefifths, .fourfifths, .eighth, .threeeighths, .fiveeighths, .seveneighths { padding: 0px 40px 30px 40px; } 
}

@media only screen and (max-width: 1280px) {
.home-header { height: 540px; background-size: auto 540px; }
.home-header #logo { width: 350px; height: auto; }
.container { width: 1024px; }
.half, .third, .twothirds, .quarter, .threequarters, .fifth, .twofifths, .threefifths, .fourfifths, .eighth, .threeeighths, .fiveeighths, .seveneighths { padding: 0px 30px 30px 30px; } 
}

@media only screen and (max-width: 1024px) {
.home-header { height: 450px; background-size: auto 450px; }
.home-header #logo { width: 300px; height: auto; }
.container { width: 100%; padding: 0 5%; }
.half, .third, .twothirds, .quarter, .threequarters, .fifth, .twofifths, .threefifths, .fourfifths, .eighth, .threeeighths, .fiveeighths, .seveneighths { padding: 0px 20px 30px 20px; } 

.full, .half, .third, .twothirds, .quarter, .threequarters, .fifth, .twofifths, .threefifths, .fourfifths, .threeeighths, .fiveeighths, .seveneighths { width: 100%; padding: 0 0 2% 0; float: none; }
.eighth { width: 50%; padding: 0 2% 2% 0; }

img.size-thumbnail { width: auto!important; height: auto!important; }
img.attachment-medium, img.size-medium { width: 50%!important; height: auto!important; display: block; margin: 0 auto; }
img.size-large, img.attachment-large, img.attachment-full, img.size-full { width: 100%!important; height: auto!important; }
}

@media only screen and (max-width: 880px) {
.home-header { height: 400px; background-size: auto 400px; }
.home-header #logo { width: 250px; height: auto; }
}

@media only screen and (max-width: 767px) {
	

#nav { height: 52px; }
#menu-icon { display:inline-block; }
#nav #menu-primary { display: none; position: absolute; top: 52px; left: 0px; background: #222; z-index: 9999; width: 70%; }
#nav li { text-align: center; width: 100%; padding: 0; margin: 0; float: none; }
#nav ul li a { font-size: 18px; line-height: 50px; }

.home-header { height: auto!important; background-image: none!important; padding: 30px 0; }
.interior-header #logo, .home-header #logo { width: 200px!important; position: relative; margin: 0 auto; display: block; height: auto; top: inherit!important; right: inherit!important; }
}

@media only screen and (max-width: 767px) and (orientation:landscape) {


}

@media only screen and (max-width: 600px) {

.home-header { height: 300px; background-size: auto 300px; }
.home-header #logo { width: 150px; height: auto; right: 20px; top: 20px; }

}