/*
Responsive Template Name: 
File: Layout CSS
*/

@import url(framework.css);
@import url(navi.css);

html{overflow-y:scroll;}

body{margin:0; padding:0; font-size:100%; font-family: 'Source Sans Pro', 'Ubuntu', sans-serif; color:#000; background-color:#ffffff;border-top: 17px solid #d1d2d4;}

.justify{text-align:justify;}
.bold{font-weight:bold;}
.center{text-align:center;}
.right{text-align:right;}
.nostart{margin:0; padding:0; list-style:none;}
.hidden{display:none;}

.clear{display:block; clear:both;}
.clear:after{display:block; visibility:hidden; height:0; clear:both; font-size:0; content:"";}

a{outline:none; text-decoration:none; /*color:#5C9BD7;*/ color:#04afef;}

.fl_left{float:left;}
.fl_right{float:right;}

img{width:auto; max-width:100%; height:auto; margin:0; padding:0; border:none; line-height:normal; vertical-align:middle;}
.imgholder, .imgl, .imgr{padding:4px; border:1px solid #D6D6D6; text-align:center;}
.imgl{float:left; margin:0 15px 15px 0; clear:left;}
.imgr{float:right; margin:0 0 15px 15px; clear:right;}

/*----------------------------------------------HTML 5 Overrides-------------------------------------*/

address, article, aside, figcaption, figure, footer, header, nav, section{display:block; margin:0; padding:0;}

/*----------------------------------------------Responsive Videos-------------------------------------*/

.video{display:block; position:relative; width:100%; height:0; margin:0; padding:0 0 56.25% 0; /* using a 16:9 aspect ratio, the height is 56.25% of the width (9/16=0.5625) */}
.video iframe{display:block; position:absolute; width:100%; height:100%; margin:0; padding:0;}

/* ----------------------------------------------Wrapper-------------------------------------*/

div.wrapper{display:block; width:100%; margin:0; padding:0; text-align:left;}
/*
.row1, .row1 a{color:#000;}
*/
.row2{ margin-top: 50px !important;}
.row3{color:#000; }
/*.row3 a{color:#000; }
.row4, .row4 a{color:#000}*/

/*----------------------------------------------Generalise-------------------------------------*/

h1, h2, h3, h4, h5, h6{margin:0 0 8px 0; padding:0; font-size:1.6em; font-weight:normal; line-height:normal;}

address{font-style:normal;}

blockquote, q{display:block; padding:8px 10px; color:#979797; background-color:#ECECEC; font-style:italic; line-height:normal;}
blockquote:before, q:before{content:'“ '; font-size:26px;}
blockquote:after, q:after{content:' „'; font-size:26px; line-height:0;}

#header, #topnav, #container, #footer, #copyright{margin:0 auto; /* font-size:.8em;*/}
#header, #container, #footer{ width:960px;}
/*----------------------------------------------Header-------------------------------------*/

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

#header #hgroup{display:block; /*float:left;*/ width:auto; clear:right;}
#header #hgroup h1, #header #hgroup h2{margin:0; font-weight:normal; text-transform:none;}
#header #hgroup h1{font-size:1.2em; color:#231f20; font-weight:bold; margin-top: 4px;}
#header #hgroup h2{font-size:1.100em; color:#a5a5a5; font-weight:bold; display:block; }
#header #hgroup p{font-size:.8em; color:#a5a5a5; margin:0px; padding:0px; font-weight:bold; }

#header div.one_quarter.first { width: 25% !important; }
#header div.three_quarter { margin-left: 2% !important;  width: 72% !important  }

/*----------------------------------------------Content Area-------------------------------------*/

#container{padding:30px 0; clear:both;}

body#guibonsiepe_news hr {
	color: #ccc;
	background-color: #ccc;
	height: 1px;
	border:0px;
	}
/*
#container div.guibonsiepe_div,
#container div.guibonsiepe_news_div {margin-bottom:20px;}
*/
#container div.guibonsiepe_video_div p {margin-bottom:0px;}
#container div.guibonsiepe_div h3,
#container div.guibonsiepe_news_div h3 {font-size:1em; margin:0 0 5px 0; padding:0;}
#container div.guibonsiepe_news_div p,
#container div.guibonsiepe_news_div p {font-size:1em; margin:0; padding:0;}

ul.generic {margin: 0px; padding: 0px; overflow: hidden;}

h2.subtitle {font-size:1.1em; font-weight:bold;}

/* guibonsiepe_about */
body#guibonsiepe_about h3 {font-size:1em;}

/* guibonsiepe_books */
body#guibonsiepe_books h3 {font-size:.9em;}
.one_fifth {margin-bottom:30px;}

div#guibonsiepe_books_content img,
div#guibonsiepe_books_content a img { 
	-moz-box-shadow: 3px 3px 4px #777;
	-webkit-box-shadow: 3px 3px 4px #777;
	box-shadow: 3px 3px 4px #777;
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#777777')";
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#777777');
	}

div#guibonsiepe_books_content a:hover img { 
	-moz-box-shadow: 3px 3px 4px #222;
	-webkit-box-shadow: 3px 3px 4px #222;
	box-shadow: 3px 3px 4px #222;
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#222222')";
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#222222');
	}
div#guibonsiepe_books_content div.one_quarter { 
	margin-bottom:35px;
	}

/**/
div.three_quarter div.one_quarter { width: 23%; margin-left:2%;}
div.three_quarter  div.one_quarter:first-child { margin-left:0%;}

#container.home ul li {color:#888888;}

/* contacto */
div.form form#form1 textarea.wpcf7-form-control,
div.form form#form1 input.wpcf7-form-control { width:80%;}
div.form form#form1 input.wpcf7-form-control.wpcf7-submit { width:auto;}



/*----------------------------------------------Footer-------------------------------------*/

#footer{padding:20px 0;display:block;}
#footer p{margin:0; padding:0;}

/*----------------------------------------------Generic-------------------------------------*/
.displayNone {display:none !important;}
#footer p.guibonsiepe_creativecommons {font-size:.7em; color: #A5A5A5; margin-top:60px;}
body#guibonsiepe_index #footer p.guibonsiepe_creativecommons {margin-top:60px; }



/*
Responsive Template  
*/

@-ms-viewport{width:device-width;} 

/* 240 + 320px */

@media screen and (min-width:240px) and (max-width:360px) {

	#header, #topnav, #container, #footer{max-width:95%; width:95%; margin:0 auto;}
	
	/*#topnav ul{display:none;}*/
	
	.three_quarter,
	.one_half, 
	.one_third, .two_third, 
	.one_quarter, .two_quarter, .three_quarter, 
	.one_fifth, .two_fifth, .three_fifth, .four_fifth, 
	.one_sixth, .two_sixth, .three_sixth, .four_sixth, .five_sixth{display:block; float:none; width:100%; margin:0 0 2% 0; padding:0;}
	
	#header #hgroup{display:block; width:100%; float:none; margin:0 0 15px 0; padding:0;}
	
	#header, #footer{text-align:center;}
	#footer p{float:none; line-height:1.6em;}
	#footer p:first-child{margin-bottom:8px;}
	.one_fifth, .one_sixth, .one_quarter, .one_third, .one_half {width: 100%;}
	div.three_quarter  div.one_quarter:first-child,
	div.three_quarter div.one_quarter { width: 90%; margin:0px 0px 25px 8%;}
	.row2 {margin-top: 20px !important;}
	#header div.one_quarter {text-align:center;}
	.row2 div.one_quarter.first {display:none;}
	iframe.guibonsiepe_iframe_video {width: 90%;}
	#header div.three_quarter,
	#header div.one_quarter.first { width: 90% !important;}
	div#guibonsiepe_books_content div.one_quarter { text-align:center;}	
	/* menu */
	#topnav ul li { float:none; display:block; text-align: center; }
	#topnav ul li a { float:none; display:block; background:#eee;  padding:0px 24px; border-bottom:1px solid white; margin-right: 0px; }
	#topnav ul li a:hover { background:#fff; color:black; }
	#header div.three_quarter { margin-left: 1% !important; width: 98% !important; }
	#topnav ul li a:first-child {padding:10px 0px;}

}

/* 480px */

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

	#header, #topnav, #container, #footer{max-width:95%; width:95%; margin:0 auto;}

	/*
	#header div.one_quarter {text-align:center;}

	#topnav ul{display:none;}
	*/
	
	#footer p{float:none;}
	#footer p:first-child{margin-bottom:8px;}

	.three_quarter,
	.one_half, 
	.one_third, .two_third, 
	.one_quarter, .two_quarter, .three_quarter, 
	.one_fifth, .two_fifth, .three_fifth, .four_fifth, 
	.one_sixth, .two_sixth, .three_sixth, .four_sixth, .five_sixth{ margin:0 0 5% 0%; width: 100%; }

	.one_fifth { text-align:center;}
	div.three_quarter  div.one_quarter:first-child,
	div.three_quarter div.one_quarter { width: 90%; margin:0px 0px 25px 8%;}
	.row2 {margin-top: 20px !important;}
	/*.row2 div.one_quarter.first {display:none;}*/
	iframe.guibonsiepe_iframe_video {width: 90%;}
	#header div.one_quarter.first,
	#header div.one_quarter.first { width: 90% !important;}
	div#guibonsiepe_books_content div.one_quarter { text-align:center;}	
	/* menu */
	#topnav ul li { float:none; display:block; text-align: center; }
	#topnav ul li a { float:none; display:block; background:#eee;  padding:0px 24px; border-bottom:1px solid white; margin-right: 0px; }
	#topnav ul li a:hover { background:#fff; color:black; }
	#header div.three_quarter { margin-left: 1% !important; width: 98% !important; }
	#topnav ul li a:first-child {padding:10px 0px;}
}

/* 768px */

@media screen and (min-width:601px) and (max-width:800px) {

	#header, #topnav, #container, #footer{max-width:95%; width:95%; margin:0 auto;}
	.one_half {width: 70%;}
	.one_fifth {width: 30%;}
}

/* 960px */

@media screen and (min-width:960px) {
	#header, #topnav, #container, #footer{max-width:960px; /*max-width:95%;*/ margin:0 auto;}
	.one_half {width: 47,5%;}
}

/* 1028px 

@media screen and (min-width:1028px) {
	#header, #topnav, #container, #footer{max-width:95%; margin:0 auto;}
}
*/
/* 1200px 

@media screen and (min-width:1200px) {
	#header, #topnav, #container, #footer{max-width:1200px; margin:0 auto;}
}
*/
/* Hide The Jquery Generated Navigation Form from 601px upwards */

@media screen and (min-width:601px) and (max-width:1920px) {
	#topnav form{display:none;}
}