/*
Theme Name: JPF
Theme URI: http: //jamesfritzky.com/
Description: Child Theme for Grid.
Author: James Fritzky
Author URI: http: //jamesfritzky.com/
Template: gridthemeresponsive
Version: 0.1
*/

@import url("../gridthemeresponsive/style.css");

h2 {
line-height: 24px;
}

.logo { padding-top: 20px;
float:left;}

#menu_container {
padding-bottom: 25px;
float: right;
list-style-type: none; 
margin: 0px 0 0 0; 
padding: 0;
}

#menu_container li ul {
display: none;
position: absolute;
left: 0;
top: 45px;
list-style-type: none;
margin: 5px 0px 0px 0px;
padding: 0;
z-index: 200;
border: none;
background: white;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}


#menu_container ul li a {
color: #222;
text-decoration: none;
padding: 15px 5px 15px 8px;
display: block;
border-top: none;
border-bottom: none;
background-color: transparent;
margin-right: 5px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
-khtml-border-radius: 0px;
border-radius: 0px;
font-weight: normal; 
font-size: 14px;
}

#menu_container li {
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 2px;
float: left;
margin-left: 15px; 
position: relative; 
moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px;
}


#menu_container ul { list-style-type: none; margin-right: 25px; float: left; }
#menu_container ul li a:hover { background-color: transparent; color: #999; }
#menu_container ul li.current-menu-item a, #menu_container ul li.current_page_item a { background-color: transparent; border-top: none;}
#menu_container li.current-menu-item ul li a, #menu_container li.current_page_item ul li a { border-top: none; }
#menu_container input[type=text] { width: 172px; height: 25px; background-color: #1b1b1b; color: #fff; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; float: right; border: none; padding: 0 5px; }
#menu_container li ul li { float: none; width: 150px; margin-left: 0; }
#menu_container li a { color: #666; text-decoration: none; padding: 15px 5px 15px 8px; display: block; border-top: none; border-bottom: none; }
#menu_container li.current-menu-item a, #menu_container li.current_page_item a { color: #222; }

#menu_container ul li ul {
position: absolute;
top: 28px;
left: 0;
display: none;
z-index: 500;
}

#menu_container ul li ul:hover{
position: absolute;
top: 28px;
left: 0;
display: block;
z-index: 500;
}

#pagetitle {
  -webkit-animation: top 1s ease;
  animation: top 1s ease;
  -webkit-backface-visibility: hidden; }

  @-webkit-keyframes top {
        0% { opacity: 0;
	     -webkit-transform: translate3d(0, -20px,0); 
              } }

@-webkit-keyframes scale {
  0%, 0% {
    opacity: 0;
    -webkit-transform: translateY(1rem); } }

@keyframes scale {
  0%, 0% {
    opacity: 0;
    transform: translateY(1rem); } }

.single_left h1 {
font-size: 30px;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 2px;
font-weight: 100;
color: #343;
margin-top: 0;
}

#content_inside {
clear:both;
margin-top: 20px;
padding-top:40px;
}
#content { margin-top: 30px; clear:both;}

.home_post_cont { float: left; margin-right: 15px; width: 187px; min-height: 187px; margin-bottom: 15px; position: relative; }

.home_post_cont_last { margin-right: 0; }

.home_post_cont img { width: 187px; height: 187px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; }

.home_post_cont h3 { font-size: 14px; }

.home_post_cont h3 a { color: #000; text-decoration: none; }

.home_post_cont h3 a:hover {  text-decoration: none; color: #666; }

/*.home_post_content { color: #A0A0A0; font-size: 13px; padding-right: 30px; font-weight: normal; height: 147px; }*/

.home_post_content { color: #A0A0A0; font-size: 13px; padding: 0px; font-weight: normal; height: 147px; }

.home_post_content .in_title p {
font-size: 12px;
width: 170px;
}

 .hover_caption {

      /* If you can count of CSS3 support: */

      background-color: /*rgba(0, 0, 0, 0.5)*/ rgba(0, 0, 0, 0.5); -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px;

  

      /* Or use a transparent image if you need to support bad browsers: */

      /*background-image: url(images/hover_caption_bg.png);*/

  

      /* NOTE: If you're img elements have paddings or margins you'll need to

      match them here to get things lined up properly. */

	  transition: background 0.3s ease 0s, color 0.3s ease 0s; 

    }

/*.home_post_cont.post_box div:first-child { width: 187px !important; height: 187px !important; }*/

/*html body .hover_caption { width: 187px !important; height: 187px !important; }	*/

.hover_box { width: 187px; height: 187px; }

img { border: none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;

}

h1 {
font-size: 30px;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 2px;
font-weight: 100;
color: #343;
margin-top: 0;
}

.alignleft {

    float: left;

    margin: 0px 10px 0px 0;

}

a img.alignleft {

    float: left;

    margin: 10px 10px 0px 0;

}

.single_left h1 {
font-size: 30px;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 2px;
font-weight: 100;
color: #343;
margin-top: 0;
padding-bottom: 15px;
}



.blog_box img { width: 100%; height: inherit; }
.single_left { width: 700px; float: left;  }
#single_left { width: 700px; float: left;  }
#single_left p { color: #888888; }
.blog_box { padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #E5E5E5; }
.blog_box p { color: #3E3E3E; }
.blog_box h3 { font-size: 15px; }
.blog_box h3 a {
color: #333;
font-size: 15px;
text-decoration: none;
}
.blog_box h3 a:hover { color: #C7C7C7; }

.port_box { float: left; width: 306px; margin: 5px 20px 5px 0; }
.port_box_last { margin-right: 0; }
.port_box_divider { border-bottom: 1px solid #c7c7c7; margin: 5px 0 10px; }
.port_box img { width: 306px; height: 387px; }
.port_box h3 a { color: #c7c7c7; text-decoration: none; }
.port_box h3 a:hover { color: #333; }


.side_box {
margin-bottom: 10px;
}

.side_box h3 {
padding: 0px 0px;
font-size: 1.5em;
background-color: transparent;
margin-top: 0px;
border-radius: 0;
font-family: 'Raleway', sans-serif;
color: #333333;
line-height: 17px;
}

.recent {
float: left;
text-align: center;
margin: 0px 17px;
}

	/* Reply */
 .wpcf7{
	
}
	
#reply h2{
border: 0;
}
		
#reply img{
float: left;
max-width: 78px;
border: 1px solid #cfcfcf;
margin-top: 10px;
}
		
#reply form{
float: right;
max-width: 540px;
}
		
#reply form input,
#reply form textarea{
display: block;
background: #f8f8f8;
border: 1px solid #cfcfcf;
padding: 15px;
max-width: 500px;
margin: 10px 0 10px;
}
		
.wpcf7 form input,
.wpcf7 form textarea{
display: block;
background: #f8f8f8;
border: 1px solid #cfcfcf;
padding: 15px;
width: auto;
margin: 10px 0 10px;
}
		
.wpcf7 form input{
width: auto;
}
		
.wpcf7 form textarea{
width: 270px;
}
				
#reply form textarea,
 .wpcf7 form textarea{
max-height: 50px;
font: 12px 'Arial';
}
		
 #reply form .button,
 .wpcf7 form .button,  form .button{
background: #000;
color: #FFF;
padding: 13px;
border:1px solid #cfcfcf;
max-width: auto;
}
		
		/* Contact */
.wpcf7{
margin-top: 10px;
}
		
ul#entries li .entry #contact h2{
font-size: 18px;
font-family: Georgia;
font-style: italic;
color: #222222;
}
				
.cufon-active  ul#entries li .entry #contact h2{ 
 font-size: 18px;
}



/*Tablet */

@media only screen and (min-width: 768px) and (max-width: 959px) {

#content { margin-top: 0px; display: block; float: left; }

#content_inside { margin-top: 0px; padding-top: 0px; }

.home_post_content .in_title p { display: none; height:0px; font-size: 12px; width: 170px; }

#main_container { width: 708px; }

#menu_container {padding-bottom: 25px;float: left;list-style-type: none;margin: 0px 0 0 0;padding: 0;}

.logo { max-width: 500px; height: inherit; }

.header_social_icons_cont { display: none;}

.header_social_icons_cont img { display: none;}

#menu_container input[type=text] { display: none; }

.home_post_cont { float: left; margin-right: 20px; width: 120px; min-height: 120px; margin-bottom: 20px; position: relative; }

.home_post_cont_last { margin-right: 0; }

.home_post_cont img { width: 120px; height: 120px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; }

.home_post_cont h3 { font-size: 14px; }

.home_post_cont h3 a { color: #000; text-decoration: none; }

.home_post_cont h3 a:hover {  text-decoration: none; color: #666; }

.home_post_cont.post_box div:first-child { width: 120px !important; height: 120px !important; }*/

html body .hover_caption { width: 120px !important; height: 120px !important; }*/

.home_post_content .in_title { height: 10px; overflow: hidden; color: #fff; font-size: 14px; margin: 0; font-weight: bold;}

.hover_box { width: 120px; height: 120px; }

.home_post_content { height: 110px; overflow: hidden; }

.home_post_cat { margin-top: -40px; }
	
.single_left { float: left; width: 700px; }

.single_left h1 { font-size: 13px; margin-top: 0; }

#sidebar { display: none; }

.side_box { margin-bottom: 25px; }

.single_inside_content img { max-width: 700px; height: inherit; }

.blog_box img { width: 300px; height: 150px; }
.single_content img { width: 300px; height: inherit; }
#single_left { width: 300px; padding: 0 10px; }

}


/*Mobile Portrait */

@media only screen and (min-width: 320px) and (max-width: 470px) {

#header { padding: 10px 0 0px;}

.logo { max-width: 320px; height: inherit; margin-right: auto; margin-left: auto; display: block; clear: both; float: none;}

#main_container { width: 320px; }

#menu_container { padding-bottom: 15px; max-width: 300px;  }

#menu_container ul { list-style-type: none; margin-right: auto; margin-left: auto; float: none; padding: 10px 10px 10px 10px;}

#menu_container ul li { float: left; margin-left: auto; margin-right: auto; text-align: center; max-width: 275px; }

#menu_container ul li a { color: #fff; text-decoration: none; background-color: #000; padding: 6px 6px; margin-right: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; display: block; }

#menu_container ul li a:hover { background-color: #858585; }

#menu_container ul li.current-menu-item a, #menu_container ul li.current_page_item a { background-color: #858585; }

.header_social_icons_cont { display: none;}

.header_social_icons_cont img { display: none;}

#menu_container input[type=text] { display: none; }

.home_post_cont { margin-right: auto; margin-left: auto; float: none; clear: both; }

.home_post_cont img { width: 100%; height: inherit; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; }

.home_post_cont h3 { font-size: 14px; }

.home_post_cont h3 a { color: #000; text-decoration: none; }

.home_post_cont h3 a:hover {  text-decoration: none; color: #666; }

.hover_caption { width: 100%; height: inherit;}

#footer { display: none; }

#commentform textarea { width: 220px; }

#sidebar { display: none; }

.single_left { float: none; width: 228px; margin-left: auto; margin-right: auto; }

.blog_box img { width: 300px; height: 150px; }
.single_content img { width: 300px; height: inherit; }
#single_left { width: 300px; float: none; padding: 0 10px; }

.hover_caption_caption {display: block !important; max-width: 170px !important;}

.home_post_content .in_title p { display: none; height:0px; font-size: 12px; width: 170px; }

#menu_container ul li ul { position: absolute; top: 28px; left: 0; background: none; display: none; z-index: 500; }

h1 {text-align: center; padding: 10px 0px 10px 0px;}
.wpcf7 form input {width: auto;max-width: 200px;}
#reply form textarea, .wpcf7 form textarea {max-height: 50px;max-width: 200px;font: 12px 'Arial';}

.single_left h1 {font-size: 30px; text-transform: uppercase; line-height: 1; text-decoration: none; letter-spacing: 2px; font-weight: 100; color: #343; margin-top: 0; padding-bottom: 15px;}

}

/*Mobile Landscape */

@media only screen and (min-width: 480px) and (max-width: 760px) {

#header { padding: 10px 0 0px;}

.logo { max-width: 480px; height: inherit; margin-right: auto; margin-left: auto; display: block; clear: both; float: none;}

#main_container { width: 480px; }

#menu_container { padding-bottom: 15px; max-width: 480px;  }

#menu_container ul { list-style-type: none; margin-right: auto; margin-left: auto; float: none; padding: 10px 10px 10px 10px;}

#menu_container ul li { float: left; margin-left: auto; margin-right: auto; text-align: center; max-width: 375px; }

#menu_container ul li a { color: #fff; text-decoration: none; background-color: #000; padding: 6px 6px; margin-right: 2px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; display: block; }

#menu_container ul li a:hover { background-color: #858585; }

#menu_container ul li.current-menu-item a, #menu_container ul li.current_page_item a { background-color: #858585; }

#content_inside {margin-top: 0px; padding-top: 40px; width: 420px; float: none; margin-left: auto; margin-right: auto; }

.header_social_icons_cont { display: none;}

.header_social_icons_cont img { display: none;}

#menu_container input[type=text] { display: none; }

.home_post_cont { margin-right: auto; margin-left: auto; float: left; clear: none; padding-left: 15px;}

.home_post_cont img { width: 100%; height: inherit; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; }

.home_post_cont h3 { font-size: 14px; }

.home_post_cont h3 a { color: #000; text-decoration: none; }

.home_post_cont h3 a:hover {  text-decoration: none; color: #666; }

.hover_caption { width: 100%; height: inherit;}

#footer { display: none; }

#commentform textarea { width: 220px; }

#sidebar { display: none; }

.single_left { float: none; width: 428px; margin-left: auto; margin-right: auto; }

.blog_box img { width: 300px; height: 150px; }
.single_content img { width: 300px; height: inherit; }
#single_left { width: 450px; float: none; padding: 0 10px; }

.hover_caption_caption {display: block !important; max-width: 170px !important;}

.home_post_content .in_title p { display: none; height:0px; font-size: 12px; width: 170px; }

#menu_container ul li ul { position: absolute; top: 28px; left: 0; background: none; display: none; z-index: 500; }

h1 {text-align: center; padding: 10px 0px 10px 0px;}
.wpcf7 form input {width: auto;max-width: 400px;}
#reply form textarea, .wpcf7 form textarea {max-height: 50px;max-width: 400px;font: 12px 'Arial';}

.single_left h1 {font-size: 30px; text-transform: uppercase; line-height: 1; text-decoration: none; letter-spacing: 2px; font-weight: 100; color: #343; margin-top: 0; padding-bottom: 15px;}

.clear {clear: none;}

}