/*
Theme Name: Glen Chapron
Author: Samuel Jan et Manu Lechat
Version: 1.0
*/


/* =Structure
----------------------------------------------- */

html, body {
	 width: 100%;
	 height: 100%;
}
body {
	padding: 0;
	margin:0;
	color: #333;
	font-family: 'Open Sans', sans-serif;
	background: #fff;
	font-size:12px;
	font-weight: 300;
	line-height: 1.625;
}

p{
	font-size:12px;
	margin-bottom: 1.625em;
}

strong{
	font-weight: 600;
}


#bandeau {
	background: none repeat scroll 0 0 #666666;
    margin: auto;
    overflow: hidden;
    position: absolute;
    width: 100%;
	height: 600px;
	max-height:100%;
	top:50%;
	margin-top:-300px;
}

#bandeau .swiper-slide  img{
	height: 600px;
	width: auto;
}


#bandeau #header{
	background:#FFFFFF;
    left: 0;
    position: absolute;
    top: 0;
    width: 290px;
    z-index: 100;
	height:100%;
	padding:20px;
	padding-left:40px;
}

.page #bandeau #header{
	padding-top:	0px;
}

#bandeau #header img{
	max-width:290px;
	height:auto;
}




/*home */



/* menu */
#glenchapron{
	width:250px;
	height:150px;
	background:url("img/glenchapron.gif") no-repeat scroll 0 0 rgba(0, 0, 0, 0);




}
#illus{
	width:250px;
	height:40px;
	background:url("img/bouton_bdillu.gif") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
	margin:5px 0;
}

#btbio{
	width:40px;
	height:30px;
	background:url("img/bouton_bio.gif") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
	display:inline-block;
	-webkit-transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    transition: all .3s ease-in;
}
#btbio:hover{
	background-position: bottom;
}


#btblog{
	width:90px;
	height:30px;
	background:url("img/bouton_blog.gif") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
	background-position: top;
	display:inline-block;
	-webkit-transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    transition: all .3s ease-in;
}
#btblog:hover{
	background-position: bottom;
}

#btcontact{
	width:110px;
	height:30px;
	background:url("img/bouton_contact.gif") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
	display:inline-block;
	-webkit-transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    transition: all .3s ease-in;
}

#btcontact:hover{
	background-position: bottom;
}

#btshop{
	width:250px;
	height:31px;
	background:url("img/bouton_shop.gif") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
	display:inline-block;
	-webkit-transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    transition: all .3s ease-in;
}

#btshop:hover{
	background-position: bottom;
}




#vignettes {
	width: 100%;
	margin:40px 0;
}

#vignettes #menu {
	float:left;
	width:250px;
	margin: 0 40px;
}

#vignettes .item {
/*	float:left;
	width:250px;
	margin: 0 40px;*/
}

/* PORTFOLIO */

.swiper-container {
	background: none repeat scroll 0 0 #FFF;
    color: #FFFFFF;
    text-align: center;
	padding-left: 340px;
}
.swiper-wrapper {

	width:auto;
}
.swiper-slide {
  opacity: 1;
  padding:0 20px;
  -webkit-transition: 300ms;
  -moz-transition: 300ms;
  -ms-transition: 300ms;
  -o-transition: 300ms;
  transition: 300ms;
}
.swiper-slide img{
}
.swiper-slide-active {
  opacity: 1;
}
.single-portfolio .pagin {
    bottom: 25px;
    left: 356px;
    position: absolute;
    z-index: 20;

}
.swiper-pagination-switch {
  	background: url("img/site_pagin_jaune.gif") no-repeat 0 0 transparent;
    margin-right: 3px;
    cursor: pointer;
    display: inline-block;
    height: 16px;
    width: 15px;
    overflow: hidden;
}
.swiper-active-switch {
  	background: url("img/site_pagin_noir.gif") no-repeat 0 0 transparent;
}


/* bouton */
.single-portfolio .nav-single {
   bottom: 15px;
    left: 30px;
    position: absolute;
    z-index: 101;
}

.single-portfolio .nav-home a{
	background: url("img/menu.gif") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
	background-size: cover;
    display: inline-block;
    height: 54px;
    width: 94px;
}
.single-portfolio .nav-previous a{
	background: url("img/gauche.gif") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    background-size: cover;
    display: inline-block;
    height: 54px;
    width: 48px;
}


.single-portfolio .nav-next a {
	background: url("img/droite.gif") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    background-size: cover;
    display: inline-block;
    height: 54px;
    width: 48px;
}



/* Manu */

.body {clear: both;   padding: 0;  margin: 0; }
#container{ margin: 80px; }
.item{  width: 250px; margin: 10px 20px   }
.item_home .zone_title{ position: absolute; bottom: 0; left: 0;  width: 100%; font-weight: 300; padding: 0 0; background: #fff; display: inline-block; height: 0; overflow: hidden;
 	-webkit-transition: all .2s ease-in;
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    transition: all .2s ease-in;
    color: #373737;
}
.item_home:hover .zone_title{ height: auto; padding: 2% 0; font-weight: 300}
a{ outline: none; }



/* BLOG */
#pageblog {
	width: 1000px;
	margin: 0 auto;
}

header{
	width:1000px;
	height:330px;

}
header a#bandeaublog{
	display:block;
	width:1000px;
	height:269px;
	background:url("img/banniereglen.gif") no-repeat 0 0 transparent;
}


speed-barre a {
        display:block;
        height:50px;
}

header #retoursite {
        background: url("img/retour_site.gif") no-repeat 0 0 transparent;
        width:105px;
        height:53px;
        display:block;
        float: left;
        margin-left: 30px;
}
header #contact {
        background: url("img/contac.gif") no-repeat 0 0 transparent;
        width:134px;
        height:35px;
        display:block;
        float: right;
}
header #oldblog {
        background: url("img/oldblog.gif") no-repeat 0 0 transparent;
        width:134px;
        height:40px;
        display:block;
        float: right;
         margin-right: 10px;
}
#primary{
	margin-left: 30px;
    width: 940px;
	float:center;
}
#secondary{
	width:0px;
	float:right;
}


h2 a, h2{
	font-style:normal;
    font-weight:lighter;
    font-size: 18px;
	text-decoration:none;
	color:#ffda18;
}
h2 a:hover {
	color:#000;
}
a {
	color:#000;
}

#primary .ligne{
	width: 100%;
	height: 8px;
	background: url("img/lignes/l850_1.gif") no-repeat 0 0 transparent;
}
#primary .ligne.l1{
	background: url("img/lignes/l850_1.gif") no-repeat 0 0 transparent;
}
#primary .ligne.l2{
	background: url("img/lignes/l850_2.gif") no-repeat 0 0 transparent;
}
#primary .ligne.l3{
	background: url("img/lignes/l850_3.gif") no-repeat 0 0 transparent;
}
#primary .ligne.l4{
	background: url("img/lignes/l850_4.gif") no-repeat 0 0 transparent;
}

.blog_nav-single{
	width: 100px;
	margin: 20px auto;
}
.widget h2 {
	font-size:8px
}
.widget p, .widget {
	font-size:8px
}
.widget{
	border-bottom:dotted 2px #5AA;
	padding:20px 0;
}


.postnav{
	font-size:12px;
	text-align:right;
	margin:20px 0;
}

.edit-link {
	margin-top: 15px;
}
a.post-edit-link{
	color: #FFDE26;
}


div.pagination {
		padding: 3px;
		margin: 3px;
		text-align:center;
}

div.pagination a, div.pagination span.pages, div.pagination span.dots, div.pagination span.current {
  margin: 2px 2px 5px;
  width: 36px;
  height: 36px;
  padding-top: 10px
  overflow: hidden;
  display: inline-block;
  text-decoration: none !important;
  color: #000 !important;
  font-size: 13px;
  background: url("img/blog_pagin_jaune.gif") no-repeat 0 0 transparent;
  line-height: 32px;
}

div.pagination a:hover, div.pagination a:focus {

}

div.pagination span.current {
	  background: url("img/blog_pagin_noir.gif") no-repeat 0 0 transparent;
color: #FFF !important;
  }
@media screen and (max-height: 700px) {

	.single-portfolio .pagin {
	    bottom: 5px;
	}


	#bandeau { background: white; position: absolute;		width: 100vw; height: 85vh;   top: 15vh;   margin-top: 0px;	}
	#bandeau .swiper-container{	position: absolute; width: 100vw; top: 0; padding: 0; height: 85vh; 	}
	#bandeau #header { display: none; height: auto;	position: relative;  width: 100vw; }
	#bandeau .swiper-slide { padding: 0; width: 100vw; }
	#bandeau .swiper-slide img{ width: 100vw; height: auto; }
	.single-portfolio .pagin {    top: 10px; bottom: auto; z-index: 111	}
	.single-portfolio .nav-single { top: 3vh;	}
	.swiper-pagination-switch { width: 8px; height: 8px }

}
@media screen  and (max-width: 1300px) {
	#container{ margin: 35px auto; width: 92%; }
}

@media screen  and (max-width: 1100px) {
	#container{ margin: 35px auto; width: 92%; }
}


@media screen  and (max-width: 950px) {
	#container{ margin: 35px auto; width: 580px; }
}


@media screen  and (max-width: 600px) {
	#container{ margin: 35px auto; width: 290px; }
}