/* COLORS */
/*
BRUN  			#774553
BRUN CLAIR 		#c38596
BLEU_GRIS 		#68adc3
*/

@font-face {
    font-family: Aleo;
    src: url(../fonts/aleo-regular-webfont.ttf);
    font-style: normal;
    font-weight: normal;
}
@font-face {
    font-family: Aleo;
    src: url(../fonts/aleo-italic-webfont.ttf);
    font-style: italic;
}
@font-face {
    font-family: Aleo;
    src: url(../fonts/aleo-bold-webfont.ttf);
    font-weight: bold;
}
@font-face {
    font-family: Aleo;
    src: url(../fonts/aleo-bolditalic-webfont.ttf);
    font-weight: bold;
    font-style: italic;
}
@font-face {
    font-family: Aleo;
    src: url(../fonts/aleo-light-webfont.ttf);
    font-weight: 100;
}
@font-face {
    font-family: Aleo;
    src: url(../fonts/aleo-lightitalic-webfont.ttf);
    font-weight: 100;
    font-style: italic;
}




html, body {
	height: 100%;
	font-family: "Lato";
	font-style: normal;
    font-weight: normal;
}
											/* GAUCHE */
 /* */

header {
	position: fixed;
 	height:100%;
 	width:40%;
 	float: left;
 	display: block;
 	background-image: url("../img/header.jpg");
 	background-size: auto 100%;
 	background-position: center;
 }

.wrap1 {
	width: 80%;
	margin-right: 5%;
	margin-left: 15%;
	margin-top: 2.5%;


}
 .homebutton a {
 	float: right;
 	color: #ffffff;
 	font-size: 1.6em;
 	text-transform: uppercase;
 	font-weight: 700;
 	margin-top: 2%; 
 	text-shadow: 2px 2px 13px #774553;
 }

 .title {
 	font-family: "Aleo";
 	font-weight: bold;
 	font-size: 4.5em;
 	padding-top: 80%;
 }
 .title a {
 	color: #ffffff;
 	text-shadow: 2px 2px 13px #774553;
 }
 .subtitle {
 	font-size: 1.5em;
 	margin-top: 5%;
 }
  .subtitle a {
 	color: #ffffff;
 	text-shadow: 2px 2px 30px #774553; 
 }
 
 /* */

 /* POUR ACTIVER LA VIDEO DANS LA PARTIE GAUCHE + RESPONSIVE EN BAS */

                                    /*VIDEO*/
/*
						header {
						    position: fixed;
						    width: 40%;
						    height: 100%;
						    float: left;
						    display: block;
						}
						.cover {
						    height: 100%;
						    width:100%;
						    overflow: hidden;
						}
						.video {
						    width:  auto;
						    height: 100%;
						    float: left;
						    overflow: hidden;
						    z-index: 0;
						}
*/
									/*DEJA LA*/
/* 
						.homebutton a {
						    z-index: 10;
						    position: fixed;
						    top: 3%;
						    margin-left: 5%;
						    color: #FFFFFF; 

						    font-size: 1.6em;
						    text-transform: uppercase;
						    font-weight: 700;
						    text-align: right;
						    text-shadow: 2px 2px 13px #774553;  
						}
						.title a{
						    z-index: 10;
						    position: fixed;
						    bottom: 30%;
						    margin-left: 5%;
						    margin-right: 60%;
						    color: #FFFFFF; 

						    font-family: "Aleo";
						    font-weight: bold;
						    font-size: 4.5em;
						    text-shadow: 2px 2px 13px #774553;  
						}
						.subtitle a{
						    z-index: 10;
						    position: fixed;
						    bottom: 20%;
						    margin-left: 5%;
						    margin-right: 60%;
						    color: #FFFFFF; 

						    font-size: 1.5em;
						    text-shadow: 2px 2px 30px #774553;  
						}



											/* DROITE */
.col60 {
 	height:100%;
 	width:60%;
 	float: right;
 	}

.wrap {
	width: 85%;
	margin-right: auto;
	margin-left: auto;
	margin-top: 3%;
	color: #774553;
}
									/* MENU */
.menu {
	width: 85%;
	float: left;
	padding-bottom: 10%;
}
.menu ul li {
	float: left;
	margin:0 15px 10px 0;
	border-bottom: 6px solid transparent;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 1.2em;
	padding-bottom: 6px;
	margin-bottom: 15px;
}
.menu ul li a {
	color: #774553;
}
.menu ul li a:hover {
	border-bottom: 6px solid #c38596;
	padding-bottom: 6px;
	color: #68adc3;
}
.menu ul li.on {
	border-bottom: 6px solid #774553;
	color: #c38596;
}

									/* LANGUES */
.lang {
	width: 12%;
	float: right;
	font-size: .8em;
}
.lang .on {
	border-bottom: 6px solid #774553;
	padding-bottom: 6px;
	color:#c38596 ;
}
.lang .off a:hover {
	border-bottom: 6px solid #c38596;
	color: #68adc3;
	padding-bottom: 6px;
}
.lang ul li a {
	color: #774553;
}
.lang ul li {
	float: left;
	border-bottom: 6px solid transparent;
}
.space {
	margin-right: 6px;
}
									/* CONTENU */
.content {
	margin-bottom: 3%;
}
h1 {
	font-family: "Aleo";
	font-weight: bold;
	font-size: 4em;
	margin-bottom: 3%;

}
.text {
	font-size: 1.4em;
	line-height: 1.2em;
}
strong {
	font-weight: bold;
}
p.accreditation {
	line-height: 30px;

}
p.accreditation img {
	display: block; 
	float: left;
	margin-right: 10px;
}

p.accreditation a {
	color: #68adc3;
}
							/* Reservation */
.large input {
	line-height: 1.4em;
	font-size: 1em;
	font-family: "Aleo";
	color: #774553;
	width: 80%;
}

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    rgba(119,69,83,0.5);
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    rgba(119,69,83,0.5);
}
:-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    rgba(119,69,83,0.5);
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    rgba(119,69,83,0.5);
}
:placeholder-shown { /* Standard (https://drafts.csswg.org/selectors-4/#placeholder) */
  color:    rgba(119,69,83,0.5);
}

.selectform {
	color: rgba(119,69,83,1);
   width: 80%;
   padding: 5px;
   font-size: 1em;
   font-family: "Aleo";
   line-height: 1;
   border: 0;
   border-radius: 500;
   }
.calendrier {
	color: rgba(119,69,83,1);
   width: 80%;
   padding: 5px;
   font-size: 1em;
   font-family: "Aleo";
   line-height: 1;
   border: 1px solid rgba(119,69,83,1);
   border-radius: 500;
}
.comment {
	width:100%;
	margin: auto;
	border: 1px solid rgba(119,69,83,1);
   	border-radius: 540;
   	height: 80px;
}



.submit{
	width: 60%;
	margin: auto;
	font-family: "Aleo";
	font-size: 1.4em;
	font-weight: bold;
	background-color: #774553;
	padding: 15px;
	border-radius: 10px;
	border: 2px solid #774553;
	}
a .submit {
	color: #FFFFFF;
}
.submit:hover {	
	background-color: #ffffff;
 }
a .submit:hover {
	color: #774553;
}



input[type=submit] {
	font-family: "Aleo";
	font-size: 1.5em;
	font-weight: bold;
	background-color: #774553;
	color: #ffffff;
	padding: 25px;
	border-radius: 10px;
	border: 2px solid #774553;
	}

input[type=submit]:hover {	
	border: 2px solid #774553;
	color: #774553;
	background-color: #ffffff;
 }
 
.tableform {
overflow-x:auto
}

.tableform td {
	padding-top: 20px;
}

							/* Tarif */
.tableprice {
	overflow-x:auto
}
.tableprice, th, td {
	border: 0px solid red;
	padding: 5px 10px;
	vertical-align: middle;
}

table {
	font-size: 1.2em;
	text-align: center;
	width: 100%
}
th {
	font-weight: bold;
}


	
							/* Situation */		

							/* Photo */
									/* FOOTER */
footer {
	padding-top: 4%;
	margin-bottom: 3%;
}
hr{
	color: #774553;
	background-color: #774553;
	width: 80%;
	clear:both;
	height: 1px;
	border: 0;
}
.credit {
	float:left;
	margin-top:10px;
}
.proprio {
}
.eco {
	margin-top:30px;
	font-size: .8em;
	padding-bottom: 3%;
	line-height: 1.8em;
}
.label {
	float:right;
}
.credit a {
	color:#68adc3;	
}
.credit a:hover{
	color: #c38596;
}

									/* RESPONSIVE */

@media only screen and (max-width: 1050px) {
   
/*  */  
    header {
        width: 100%;
        height: 200px;
        background-size: 100% auto;
        position: static;
    }
    .title {
    	padding-top: 2%;
    	font-size: 4em;
    }
    .subtitle {
    margin-top: 0;
    }
/* */

    .col60 {
    	width: 100%;
    }
    .menu {
    	padding-bottom: 0;
    }
 /* POUR ACTIVER LA VIDEO DANS LA PARTIE GAUCHE */
 /* 
    header {
        width: 100%;
        height: 200px;
        background-size: 100% auto;
        position: static;
        top: 2%;
        margin-left: auto;
        margin-right: auto;
    }
    .homebutton a { 
        position: absolute;
        top: 20px;
        margin-left: 7.5%;
        font-size: 1em;
    }
    .video {
        width:  100%;
        height: auto;
    }
    .title a {
        padding-top: 2%;
        font-size: 2em;
        position: absolute;
        top: 60px;

        margin-left: 7.5%;
        margin-right: 0;
        font-size: 3.3em;
    }
    .subtitle a{
        margin-top: 0;
        position: absolute;
        top: 175px;

        margin-left: 7.5%;
        margin-right: 0;
        font-size: 1em;
    } 
 */



}

@media only screen and (max-width: 630px) {
	.menu{
		width: 80%;
		margin-left:10%;
		margin-right: 10%;
	}
	.menu ul li{
		float: none;
		text-align: center;
	}
	.lang {
		width: 24%;
		margin-right: 38%;
		margin-left:38%;
		font-size: 1em;
	}
	.lang ul {
		margin: 0 auto;
	}
	.tableform td, .tableform th {
		display: block;
	}

}