body{
	background: url(../img/bg.png);
    font-family: 'Source Sans Pro', sans-serif;
}
header{
	color: #fff;
    height: 138px;
    border-bottom: 14px solid #90e7ea;
    position: fixed;
    width: 100%;
    background: #fff;
    top: 0;
    z-index: 10;
    transition: all .2s ease-out;
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    -ms-transition: all .2s ease-out;
}
#header, .content{
    width: 960px;
    margin: 0 auto;
    overflow: hidden;
}
header.fixed{
	height: 74px;
}
header.fixed nav{
	padding-top: 0;
}
header.fixed #logo{
	height: 60px;
	margin-top: 10px;
}
::-moz-selection { color: #fff;  background: #d62c72; }
::selection      { color: #fff;  background: #d62c72; text-shadow: none; } 
#logo{
    width: 156px;
    height: 113px;
    float: left;
    margin-top: 20px;
    background: url(../img/logo3.png) center no-repeat;
    background-size: contain;
    text-indent: -9999px;
    transition: all .2s ease-out;
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    -ms-transition: all .2s ease-out;
}
nav{
    float: right;
    width: 65%;
    padding-top: 40px;
    transition: all .2s ease-out;
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    -ms-transition: all .2s ease-out;
}
nav ul li a{
    float: left;
    padding: 30px 20px;
    font-size: 1.2em;
    color: #2c2c2c;
    font-weight: 600;
    transition: all .2s ease-out;
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    -ms-transition: all .2s ease-out;
}
nav ul li a:hover{
    color: #90e7ea;
}
#accueil{
    height: 703px;
    width: 100%;
    background: url(../img/couple-915981.jpg) 0 center no-repeat;
    background-size: cover;
}
#accueil #titre{
    position: relative;
    top: 516px;
    height: 151px;
    background: rgba(144, 231, 234, .7);
    text-align: center;
    color: #fff;
}
h1{
    background-color: #d62c72;
    height: 87px;
    color: #fff;
    font-family: Sail;
    font-size: 44px;
    text-align: center;
    padding-top: 40px;
    border-top: 14px solid #90e7ea;
    border-bottom: 14px solid #90e7ea;
}
#accueil h1{
    font-family: 'Sail', cursive;
    color: #ffffff;
    font-size: 72px;
    padding-top: 20px;
    text-shadow: 3px 5px 24px rgba(0, 0, 0, 0.75);
    background: none;
    border: none;
}
#accueil h2{
    font-size: 36px;
    font-weight: 400;
    text-shadow: 2px 4px 5px rgba(0, 0, 0, 0.75);
}
#prog{
    
}
.col{
    width: 46%;
    float: left;
    margin: 2%;
}
p{
    font: 400 16px / 32px Source Sans Pro;
}
#date{
    text-align: center;
    font-family: Sail;
    font-size: 44px;
    color: #323232;
    padding-top: 120px;
    margin-bottom: 80px;
}
#prog li{
    float: left;
    width: 25%;
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 80px;
    /* padding-top: 120px; */
    text-align: center;
}
#logements li a{
    width: 33%;
    float: left;
    text-align: center;
    font: 400 24px / 32px Sail;
    color: #d62c72;
    margin-bottom: 160px;
    transition: all .1s ease-out;
    -webkit-transition: all .1s ease-out;
    -moz-transition: all .1s ease-out;
    -o-transition: all .1s ease-out;
    -ms-transition: all .1s ease-out;
}
#logements li a:hover{
    color: #9c335e;
}
#logements li a:hover .logth{
    transform: scale(1.1);
}
.logth{
    height: 159px;
    width: 159px;
    margin: 160px auto 20px;
    box-shadow: 2px 2px 80px -20px black;
    border-radius: 90px;
    border: 5px solid #90e7ea;
    transition: all .2s ease-out;
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    -ms-transition: all .2s ease-out;
}
#hot01{
    background: url(../img/chateau-les-crayeres.jpg) center no-repeat;
    background-size: cover;
}
#hot02{
    background: url(../img/piscine-swimming-pool.jpg) center no-repeat;
    background-size: cover;
}
#hot03{
    background: url(../img/suite-novotel-reims-centre.jpg) left no-repeat;
    background-size: cover;
}
#histoire .content{
    padding: 120px 0;
}
#histoire .content .col{
    padding: 30px 0;
}
#contact .input, #submit{
    display: block;
    margin: 30px auto;
}
#input3{
    max-height: 200px;
}
#submit{
    width: 350px;
    background: #d72d74;
    color: #fff;
    padding: 10px;
    border: none;
    cursor: pointer;
    font-weight: 900;
    transition: all .2s ease-out;
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    -ms-transition: all .2s ease-out;
}
#submit:hover{
    background: #9c335e;
}
#contact .content{
    padding: 120px;
}
#map-canvas{
	height: 600px;
	width: 100%;
}
#fl{
	fill: #d72d74;
	transform: rotate(-90deg) scale(.6);
	position: fixed;
	left: 50px;
	bottom: 30px;
	cursor: pointer;
	transition: all .2s ease-out;
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    -ms-transition: all .2s ease-out;
	stroke: #90e7ea;
	stroke-width: 18;
	opacity: 1;
}
#fl:hover{
	transform: rotate(-90deg) scale(.8);
}
.icon{
	fill:  #d72d74;
	margin: 0 auto;
	display: block;
}
#fl.hid{
	opacity: 0;
}
@media screen and (max-width: 1600px) {
   
    
}
@media screen and (max-width: 1200px) {
    
    
}
@media screen and (max-width: 1000px) {
    
    
}