/*
THEME NAME: JG 2014
VERSION: 1.0
AUTHOR: Kiddo Design
*/

/* Animation */

a, a:hover {
-moz-transition:color .4s ease-in; -webkit-transition:color .4s ease-in; -o-transition:color .4s ease-in;}

ul.menu li a, .menu ul li a, ul.menu li a:hover, .menu ul li a:hover, ul.menu li.home_nav a, .menu ul li a.home_nav, 
ul.menu li.home_nav a:hover, .menu ul li a:hover.home_nav, ul.menu li.blog_nav a, .menu ul li a.blog_nav, ul.menu li.blog_nav a:hover, .menu ul li a:hover.blog_nav {
-moz-transition:background .4s ease-in; -webkit-transition:background .4s ease-in; -o-transition:background .4s ease-in;}

a.more-link, a:hover.more-link { 
-moz-transition:background .4s ease; -webkit-transition:background .4s ease; -o-transition:background .4s ease;}

h2.entry-title, h3.widget-title {
-moz-transition:font-size .2s ease-in; -webkit-transition:font-size .2s ease-in; -o-transition:font-size .2s ease-in;}


/* CSS reset */

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, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0; 
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-family: inherit;
vertical-align: baseline;
}


/* remember to define focus styles! */
:focus { outline: 0; }


body {line-height: 1.3; color: black; background: white; font-family: arial, helvetica, verdana sans-serif;}


h1 {font-size: 2em;}
h2 {font-size: 1.8em;}
h3 {font-size: 1.1em;}
h4 {font-size: 1em;}

ol, ul, li {list-style: none; }


/* tables still need 'cellspacing="0"' in the markup */

table {border-collapse: separate; border-spacing: 0;}
caption, th, td {text-align: left; font-weight: normal;}
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }


pre {
	white-space: pre;           /* CSS 2.0 */
	white-space: pre-wrap;      /* CSS 2.1 */
	white-space: pre-line;      /* CSS 3.0 */
	white-space: -pre-wrap;     /* Opera 4-6 */
	white-space: -o-pre-wrap;   /* Opera 7 */
	white-space: -moz-pre-wrap; /* Mozilla */
	white-space: -hp-pre-wrap;  /* HP Printers */
	word-wrap: break-word;      /* IE 5+ */
	}



/* GLOBAL STYLES */

body, html{
    padding:0;
    margin:0;
    font-family:"adelle", helvetica, arial, sans-serif;
    line-height:1.5em;
}

em { font-style:italic; }
strong { font-weight:bold;}


h1{ font-family:"brandon-grotesque", helvetica, arial, sans-serif; text-transform:uppercase; color:#d9703c; font-size:2.4em; line-height:1.0em; margin:0 0 1.3em 0; }
h2{ font-family:"brandon-grotesque", helvetica, arial, sans-serif; text-transform:uppercase; color:#89b6c1; font-size:1.5em; line-height:1.2em; margin:0 0 1.3em 0; font-weight:normal;}
h3{ font-family: "adelle", georgia, serif; font-size:1.4em; line-height:1.4em; color:#89b6c1; font-style:italic; margin-bottom:0.95em; font-weight:300; }
h4{ font-family: "brandon-grotesque", helvetica, arial, sans-serif; font-size:1.1em; line-height:1.8em; color:#817e7e; text-transform:uppercase; margin-bottom:0.95em; font-weight:300; }
h5{ font-family: "adelle", georgia, serif; font-size:1.3em; line-height:1.3em; color:#817e7e; font-style:italic; margin-bottom:0.95em; font-weight:100; padding:15px; border-top:1px solid #89b6c1; border-bottom:1px solid #89b6c1; }

p{ font-family:"adelle", georgia, serif; font-size:1.0em; line-height:1.7em; color:#676767; margin-bottom:1.0em; font-weight:100;  }
a{ color:#89b6c1; text-decoration:none; }
a:hover{ color:#d9703c; }


 

#wrapper{
    width:1020px;
    margin:auto;
}

#header{
    width:1020px;
    overflow:hidden;
    margin:auto auto 25px auto;
    border-top:13px solid #626262;
}

#main-nav{
    width:1020px;
}

div.menu-main-menu-container{
    float:right;
    margin:10px;
    overflow:hidden;
}

div.menu-main-menu-container ul li{
    float:left;
}

div.menu-main-menu-container a{
    font-family:"brandon-grotesque", helvetica, arial, sans-serif; text-transform:uppercase; color:#FFF; font-size:0.8em; padding:5px 15px; display:block;
}

div.menu-main-menu-container a:hover{
        background-color:#89b6c1;
}

#content{
    width:720px;
    overflow:hidden;
    margin:auto;
    padding:0 0 80px 0;
}

#blog-header{
    text-align:left;
    padding:1.0em 0 0 0;
}


#main-content, #post-content, #page-content{
    width:720px; 
    float:left;
 
    overflow:hidden;
}

#page-content{
    margin-top:60px;   
}

#sidebar{
    width:250px;
    float:left;
    margin-right:50px; 
    margin-top:-20px;
    z-index:99;
} 


#work-nav{
    margin-top:15px;   
}

#work-nav li{
    float:left;
    margin-right:10px;
    margin-bottom:10px;
    width:120px;
    height:165px;
}

#work-nav li.no-marg{ margin-right:0; }

#work-nav li a:hover{
    opacity:0.6;
    filter:alpha(opacity=60);   
}







ul.img-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

ul.img-list li {
    text-align: center;
    border:1px solid #b9d7df;
    display: inline-block;
    float:left;
    width:121px;
    height:121px;
    margin: 0.5px;
    position: relative;
    font-family:"brandon-grotesque", helvetica, arial, sans-serif;    
    font-size:14px;
    line-height: 16px;
    font-weight: 200;
}




span.text-content {
 /* background-color: rgba(217,112,60,0.9); */
 background-color: rgba(127,166,178,0.9); 
    color: white;
    cursor: pointer;
    display: table;
    padding:5px;
    height: 114px;
    left: -1px;
    position: absolute;
    top: -1px;
    top: -1px;
    width: 114px;
    opacity: 0;
      -webkit-transition: opacity 250ms;
  -moz-transition: opacity 250ms;
  -o-transition: opacity 250ms;
  transition: opacity 250ms;
}


span.text-content span {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}



ul.img-list li:hover span.text-content {
  opacity: 1;
}







div.featured-post{
    text-align:left; 
    margin:1.2em 0 4.0em 0;
    width:100%;
}

div.featured-post h1{
    margin:0 0 1.0em 0;
    padding-right:4.0em;
}

div.featured-post h3.featured-meta{
    margin:0 0 0.4em 0;
    font-size:1.0em;
    font-size:1.1em;
}

div.featured-image{
    margin:1.0em 0 1.0em 0;  
    height:450px;
    overflow:hidden; 
}

div.featured-image img{
    width: 100%;
    height: auto; 
}


div.featured-post-content{
      
}

a.post-title{
    text-decoration:none;
    color:#626262;
}

a:hover.post-title{
    color:#d9703c;
}


.featured-meta a{
    text-decoration:underline;
    color:#75a6b2;
}

.featured-meta a:hover{
    text-decoration:underline;
    color:#d9703c;
}

.secondary-posts{
    width:230px;
    float:left;
    margin-right:10px;
    overflow:hidden;
    
}

.secondary-posts h2{
    font-family:"adelle-sans", helvetica, arial, sans-serif;
    font-size:0.9em;
    font-weight:300;
    text-transform:uppercase;
    color:#817e7e;
    margin:10px 0 12px 0;
}

.secondary-posts p{ font-family:"adelle", georgia, serif; font-size:0.75em; line-height:1.65em; color:#817e7e; margin-bottom:1.0em; font-weight:300;  }


#container{
	margin-top:50px;
}


#nav-above{
	margin:20px 0 25px 0;
}

#footwrap{
    margin:100px auto auto auto;
    padding:35px 0 100px 0;
    background-color:#89b6c1;
    color:#fff;
}


#footer{
    width:1000px;
    margin:auto;    
}

#footer p{ font-family:"brandon-grotesque"; font-size:0.7em; letter-spacing:1px; text-transform:uppercase; color:#fff; }

#footer a{ color:#2e2e2e; text-decoration:underline; }
#footer a:hover{ color:#fff; }

h1.page-title{
	text-decoration:underline;
	font-size:1.9em;
	margin-bottom:25px;
}

#page-content h1, #post-content h1{ font-size:3.0em; line-height:1.0em; margin:0 2.0em 0.2em 0; }

#page-content h4{ font-family: "brandon-grotesque", helvetica, arial, sans-serif; font-size:0.9em; line-height:1.0em; color:#585959; text-transform:uppercase; margin-bottom:1.1em; font-weight:100; }

.progress h5{
    margin-top:2.0em;   
}



#menu-header-menu{
    margin-top:10px;
    font-size:0.8em;
    text-transform:uppercase;
    font-family:"brandon-grotesque", helvetica, arial, sans-serif;
    float:right;
}

#menu-header-menu li {
    margin-right:10px;
    float:left;
}


#menu-header-menu li a{
    color:#d9703c;  
    display:block;
    padding-bottom:2px;
        border-bottom:3px solid #fff;
}


#menu-header-menu li a:hover{
    color:#817e7e;
    border-bottom:3px solid #89b6c1;
}

#comments li{
        padding-top:12px;
    padding-bottom:15px;
    margin-bottom:20px;
        border-top:1px solid #89b6c1;

}

#comments .avatar { display:none; }

#callouts{
    margin-top:35px;
    
}


.form-text{
      font-family:"brandon-grotesque", helvetica, arial, sans-serif;
    color:#b1b0b0;
}

div.wpcf7-mail-sent-ok {
border: 2px solid #89b6c1;
}



hr.projhr{
	float:left;
	margin-right:100%;
    border:0;
    width:50px;
    height:6px;
    background-color:#89b6c1;
    margin-bottom:15px;
}


.proj-date, .proj-client{
    border-top:3px solid #333333;
    float:left;
    margin-right:15px; 
    padding-top:5px; 
    margin-bottom:10px;
}


.proj-date p, .proj-client p{
    font-family:"brandon-grotesque", helvetica, arial, sans-serif;
    font-size:12px;
    text-transform:uppercase;
}

.proj-img{
    margin-top:20px; 
    margin-bottom:25px;
    width:100%;
    height:auto;
}

#post-content h1.proj-ttl{
    font-size:4.0em;   
}  

h2.proj-sbttl{
    font-size:2.5em; 
    margin-bottom:1.1em;
}

.blue{
    color:#89b6c1 !important;
}

.entry-content img{
    margin-top:20px;
    margin-bottom:25px;
}

.wp-caption-text{
    padding:10px 0 5px 0;
    font-size: 11px;
    font-style: italic;
    color:#78abb8;
    border-bottom: 1px solid #afb0b0;
    margin-top:-25px;
    margin-bottom:30px;

}

#nav-above{
   font-size: 11px;
    margin-bottom:30px;
    padding-bottom:1px; 
    margin-top:0;
    text-transform: uppercase;
    font-family:"brandon-grotesque", helvetica, arial, sans-serif;
    overflow:hidden;
}


.dwnld-buy{
    float:left;
    margin:20px 2px 20px 0;
    overflow:hidden;
}

.dwnld-buy a{
    display:block;
    padding:15px;
    background-color:#d9703c;
    color:#fff;
}

.dwnld-buy a:hover{
    background-color:#89b6c1;

}

/* media queries 

@media screen and (max-width:400px) { 
	.sidebar ul li {width:100% !important;}
	 h2.entry-title {font-size: 2em !important;}
}

@media screen and (max-width:700px) { 
    body {font-size:0.8em;}
    #wrapper {width:auto; padding:0 2em 0 2em;}
    #post {width:100%; margin-bottom:1em !important;}
    div#container {width:100%;}
    div#content {width:100%;}
    .sidebar {width:100% !important; float:left !important;}
    .sidebar ul li {width:auto !important; margin-right:0px !important; clear:both;}
    div.entry-date {width:auto; left:0em;}
    #first, #second, #third, #fourth {float:left; width:50%; }
}
*/