/* PC18 STYLE */
a, a:hover{text-decoration:none;color:inherit;}
em{font-size:0.6rem;}
body, html{margin:0;padding:0;font-family: 'Heebo', sans-serif;}
body {background: url(../img/fondillus2.jpg) no-repeat right top;background-size: cover;}
button:hover{cursor:pointer;}
fieldset{border:none;}
.nobm{margin-bottom:0;}
.notm{margin-top:0;}
#main{min-height:100vh;position:relative;height: 100vh;overflow: hidden;}

#nav{width:8%;background:white;position:relative;z-index:10;box-shadow: 2px 4px 10px rgba(0,0,0,0.2);}
nav#nav>span.nav-item{padding: 2rem 0;}
nav#nav>*{padding:2rem 0;}
/*#nav a{padding:2rem;display:block;}*/
#nav span.active{background-color:rgba(38, 53, 110,1);color:white;}
a#net2 {
    display: block;
    font-size: 1.4rem;
}

#content{/*width:30%;padding:2rem;*/color:white;position:relative;}
#content .expandable h4{margin-top:2rem;}

a.fb-button {
    padding: 2rem;
    margin: 2rem 0;
    display: inline-block;
    background: #4267B2;
	border-radius: 0rem;
	transition:border-radius linear 1s;
	}
	
a.fb-button:hover {	
    border-radius: 0.4rem;
}

#constant header img.right {
    right: 2.2rem;
    position: absolute;
    height: 4rem;
    top: 6rem;
}

/*animation extension blocs contenu */
.expandable {
height:100vh;
position:absolute;
top:0;
z-index:0;
width:30rem;
padding:2rem;
background-color:rgba(38, 53, 110,1);
left:-100rem;
/*left:5%;*/
transition:left 1s linear;}

.expandable.active /*, .expandable:target*/{
left:5%;
}

#constant{width:65%;color:white;}
#constant>* {flex: 1 1 50vh;}
#constant header h1 {margin: 2.2rem;    font-size: 2rem;   right: 0;    position: absolute;    top: 0;}
#constant footer div#links {    right: 0;    position: absolute;    bottom: 0;}
#constant footer div#links a{margin:0 2rem;padding:0.2rem;font-size:0.8rem;}

.smallcontainer{width: 40%;margin: 1rem auto;}
.center{text-align:center;}
.right{text-align:right;}
.left{text-align:left;}
.valide {
    background-color: green;
    color: white;
}
.msg {
    font-size: 1rem;
    padding: 1rem;
    text-align: center;
    border-radius: 0.2rem;
}
.msg a , .mentions a{
    text-decoration: underline;
}
.erreur {
    background-color:red;
    color: white;
}
.clear{clear:both;height: 2rem;}

/*slider weekend*/
#carousel-container{
background-color:#151d4b;
color:white;
text-align:center;
padding: 1rem;
margin-top: 1rem;
position:relative;
}

div#carousel-weekend-nav button {
    background: transparent;
    border: none;
    color: white;
    opacity: 0.6;
    font-size: 2rem;
	position: absolute;
    top: 50%;
}
div#carousel-weekend-nav button:hover{opacity:1;}


div#carousel-weekend-nav button#carousel-weekend-nav-left {left:5%;}
div#carousel-weekend-nav button#carousel-weekend-nav-right {right:5%;}

.wrapper{
overflow:hidden;
width:300px;
height:300px;
margin:0 auto;}

.wrapper .content {
    position: relative;
    width:900%;
    margin: 0;
    left: 0;
}
.wrapper .content .carousel-weekend-item {
    position: relative;
    display: inline-block;
    float: left;
}

/* GLOBAL LAYOUT */
/* FORM */
input.envoye {
    background: dimgray;
    box-shadow: none;
    font-weight: normal;
}
fieldset input, fieldset select {background: whitesmoke;border: 0;padding: 1rem;}
.required{color:red;}
input [type="submit"]:hover{cursor:pointer;}
input[type="submit"],a#ob-net1, a#net1 {
    background: #F98D22;
    color: white;
    font-weight: bold;
    text-transform: uppercase;
    padding: 1rem 6rem;
    box-shadow: 2px 2px 2px black;
}
fieldset#triplechamps input:first-of-type {
    margin-right: 0.8rem;
	width:10%;
}

fieldset#triplechamps input:last-of-type {
    width:40%;
}
fieldset.doublechamps input {
    width: 60%;
}
fieldset.doublechamps label {
    width: 30%;
}
fieldset label, fieldset input {

    display: inline-block;
}

fieldset.mentions{font-size:0.8rem;}


/* FLEX */
.flex{
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;  
  }


.sb{  
justify-content:space-between;
-webkit-box-pack:space-between;
-webkit-justify-content:space-between;
-ms-flex-pack:space-between;

}

.sa{
justify-content:space-around;
-webkit-box-pack:space-around;
-webkit-justify-content:space-around;
-ms-flex-pack:space-around;
}

.col{
flex-direction:column;
-webkit-box-orient:vertical;
-webkit-box-direction:normal;
-webkit-flex-direction:column;
    -ms-flex-direction:column;
}

.fe{
justify-content:flex-end;
-webkit-box-pack:flex-end;
-webkit-justify-content:flex-end;
-ms-flex-pack:flex-end;
}

.fa{
justify-content:flex-around;
-webkit-box-pack:flex-around;
-webkit-justify-content:flex-around;
-ms-flex-pack:flex-around;
}

/* responsive */  
@media screen and (min-width: 1024px) {
.dtablet.dmobile, .dtablet, .dmobile {
    display: none;
}
}

@media screen  and (min-width: 768px) and (max-width: 1024px) {
.dtablet, .dtablet.dmobile{display:block;}
.dmobile, .ddesktop{display:none;}

.expandable {
    padding: 0rem 2rem;
}
.expandable header h1{margin:0.4rem 0;}

#constant {
    display: none;
}
nav#nav {
    width: 15%;
}

}

@media screen and (max-width: 768px) {
.dmobile,.dtablet.dmobile{display:block;}
.ddesktop,.dtablet{display:none;}


section#main {
    height: auto;
}

.expandable {
width: -webkit-calc(100% - 2rem);
width: expression(100% - 2rem);
width: -moz-calc(100% - 2rem);
width: -o-calc(100% - 2rem);
width: calc(100% - 2rem);
    height: auto;
    left: 0;
    position: relative;
	padding:1rem;
}
.expandable.active {
    left:0;
}
#nav{display:none;}
#constant {
    display: none;
}

footer div#links {
    flex-direction: column;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid white;
}

.wrapper, .wrapper .carousel-weekend-item img {
    width: 260px;
    height: 260px;
}


fieldset.doublechamps label, fieldset.doublechamps input {
    width:89%;
    display: block;
}

fieldset#triplechamps input {
    display: inline-block;
}
fieldset#triplechamps input:first-of-type {
    margin-right: 0.8rem;
    width: 14%;
}
input[type="submit"], a#ob-net1, a#net1 {
    padding: 1rem;}
	
fieldset#triplechamps input:last-of-type {
    width: 60%;
}
fieldset label, fieldset input {
    display: inline;
}
}