/*--------------------------*/
/*           BODY           */
/*--------------------------*/

/*balise universelle qui s'applique à tout le site.Permet de supprimer toutes les Margin et Padding */
*{
	margin:				0px; 
	padding:			0px;
}

body {
    background:         linear-gradient(#89dee4, #0d6066) no-repeat;
}

/*--------------------------*/
/*         CONTENEUR        */
/*--------------------------*/
#ct{
	width:				100%;
    max-width:          1280px;
	height:				auto;
	margin:				auto;
}

h1{
	font-family:		"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:			35px;
	color:				#337e85;
    padding:            0 40px;
}
h1 a:link {
	color:				#337e85;
}
h1 a:hover{
	color:				#29676C;
    text-decoration:    none;
}
h1 a:visited{
	color:				#337e85;
    text-decoration:    none;
}
h2{
	font-family:		Arial, Helvetica, sans-serif;
	font-size:			28px;
	color:				#29676C;
    padding:            0 0 10px 0;
}

h2.titre{
    padding:            0 0 30px 0;
}

h2 img{
	margin-bottom:		-6px;
}

h3{
	font-family:		Arial, Helvetica, sans-serif;
	font-size:			22px;
	color:				#337e85;
    padding-top:        15px;
    margin-bottom:      10px;
}

/* class texte rose et pictos roses*/
h4{
	font-family:		Arial, Helvetica, sans-serif;
	font-size:			18px;
	color:				#337e85;
    padding-bottom:     9px;
}

/*h4 img{
	margin-bottom:		-6px;
}*/

h5{
	font-family:		Arial, Helvetica, sans-serif;
	font-size:			18px;
	color:				#525051;
    font-style:         italic;
    margin-left:        27px;
    padding-bottom:     8px;
}

h6{
	font-family:		Arial, Helvetica, sans-serif;
	font-size:			11px;
	color:				#525051;
    font-style:         italic;
    margin-left:        27px;
}

p{
	font-family:		Arial, Helvetica, sans-serif;
	font-size:			14px;
 	line-height:		19px;
	color:				#525051;
    margin-top:         0px;
}

p.legende{
	font-family:		Arial, Helvetica, sans-serif;
	font-size:			11px;
 	line-height:		16px;
	color:				#525051;
    text-align:         center;
    font-weight:        bold;
    font-style:         italic;
    padding-bottom:     10px;
}

li{
	font-family:		Arial, Helvetica, sans-serif;
	font-size:			14px;
    line-height:		26px;
	/*color:				#525051;
    list-style-type:    square;*/
    margin-left:        26px;
    list-style-image:   url(../decoupe_interieur/Puces/puce_liste.png);
}

a:link {
    color:              #337e85;
	text-decoration:	none;
}

a:hover {
    color:              #C83872;
    text-decoration:    underline;
}

a:visited {
    color:              #337e85;
    text-decoration:    underline;
}

/*--------------------------*/
/*         HEADER           */
/*--------------------------*/
header {
	width:				100%;
    height: 			119px;
    background-color:   #fff;
    z-index:            5;
}

/* Habillage du logo*/
header .logo {	
    width:              50%;
    display:            inline-block;
}

header .logo img{
	border:				none;
    max-width:          100%;
    padding:            30px;
}

/*  Habillage des BT droite*/
header .bouton{
    width:              49%;
    display:            inline-block;
    text-align:         right;
    vertical-align:     top;
}


/*--------------------------*/
/*        BOUTONS           */
/*--------------------------*/

#bouton{
    width:              100%;
    height:             auto;
    text-align:        center;
}

#bouton a{
	color:              #C83872;
    width:              27%;
    box-sizing:         border-box;
}

.btn {
	border:            none;
    font-family:       "Trebuchet MS", Arial, Helvetica, sans-serif;	font-size:         inherit;
	color:             inherit;
	background:        transparent;
	cursor:            pointer;
	padding:           25px 0;
	display:           inline-block;
	margin:            15px 0;
	text-transform:    uppercase;
	letter-spacing:    1px;
	font-weight:       700;
    font-size:         15px;
	outline:           none;
	position:          relative;
	-webkit-transition: all 0.3s;
	-moz-transition:   all 0.3s;
	transition:        all 0.3s;
    position:          inherit;
}

.btn:after {
	content:           '';
	position:          absolute;
	z-index:           -1 ;
	-webkit-transition: all 0.3s;
	-moz-transition:   all 0.3s;
	transition:        all 0.3s;
}

/* Button 1 - Bord rose fond blanc*/
.btn-1 {
	border:            3px solid #C83872;
}

.btn-1a:hover {
	color:             #fff !important;
	background:        #C83872;
    text-decoration:   none;
}

.btn-1a:active {
	color:             #fff ;
	background:        #C83872;
    text-decoration:   none;
}

/*--------------------------*/
/*     BOUTONS BOOKING      */
/*--------------------------*/

#boutonbooking{
    width:              100%;
    height:             auto;
    text-align:        center;
}

#boutonbooking a{
	color:              #18317E;
    width:              27%;
    box-sizing:         border-box;
}

.btn2 {
	border:            none;
    font-family:       "Trebuchet MS", Arial, Helvetica, sans-serif;	font-size: inherit;
	color:             inherit;
	background:        transparent;
	cursor:            pointer;
	padding:           25px 0;
	display:           inline-block;
	margin:            15px 0;
	text-transform:    uppercase;
	letter-spacing:    1px;
	font-weight:       700;
    font-size:         15px;
	outline:           none;
	position:          relative;
	-webkit-transition: all 0.3s;
	-moz-transition:   all 0.3s;
	transition:        all 0.3s;
    position:          inherit;
}

.btn2:after {
	content:           '';
	position:          absolute;
	z-index:           -1 ;
	-webkit-transition: all 0.3s;
	-moz-transition:   all 0.3s;
	transition:        all 0.3s;
}

/* Button 1 - Bord rose fond blanc*/
.btn-2 {
	border:            3px solid #18317E;
}

.btn-2a:hover {
	color:             #fff !important;
	background:        #18317E;
    text-decoration:    none;
}

.btn-2a:active {
	color:             #fff ;
	background:        #18317E;
    text-decoration:   none;
}

/*--------------------------*/
/*          MENU            */
/*--------------------------*/

nav {
   width:               100%;
   max-width:           1280px;
   z-index:             2;
   position:            absolute;
   top:                 119px;
}

/* Menu responsive */
nav #bntMenu{
    display:            none;
}  

/* ul block devient table parent du nav li*/
nav ul{
    display:            table;
    width:              100%;
    table-layout:       fixed;
}

nav li{	
    font-family:        "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size:          14px;
    list-style-type:    none;
    display:            table-cell; /* les cellules se rétrecissent sans retour à la ligne */    
    margin-left:        0;
}

nav li a:link, nav li a:visited{
	text-align: 		center;
	padding:		   	13px;
	display: 			block;
	color:				#FFF; /*Couleur du texte du menu Haut*/
	/*height: 			15px; Hauteur menu Haut*/
	height: 			25px; /*Hauteur menu Haut*/
	margin:				auto;
	text-decoration:	none;
	background-color:  	#337e85;
	border-right: 		thin solid #337e85;
	border-left: 		thin solid #337e85;
    text-transform:     uppercase;
}

nav li a:hover {
	background-color: 	#409ea6; /*Couleur de survol*/
}

nav li a:active { 
	background-color:	#409ea6; /*Couleur Etat cliqué*/
}

nav .sousmenu{
	display: 			none;
	list-style-type:	none;
	margin: 			0; /*permet d'aligner les ssmenu sous les menus*/
	padding:      		0;
	border:            	0;
}

nav .sousmenu li{
   /* float: none; */
   margin:              0;
   padding:             0;
   border:              0;
   width:               100%; /* longeur des colonnes des sous-menu*/
   border-top:          1px solid transparent;
   border-right:        1px solid transparent;
   display:             block;
}

nav .sousmenu li a:link, #menuvertical .sousmenu li a:visited{
	display: 			block;
	color:				#FFF; /*Couleur Texte sous menu*/
	margin:     		0;
	border:            	0;
	text-decoration:	none;
	background-color:	#337e85; /*Couleur fond sous menu ou background: transparent url("../Test_Menu/fondTR.png") repeat;*/
}

nav .sousmenu li a:hover{
	background-color:  	#409ea6; /*Couleur survol sous menu*/
}

nav li:hover .sousmenu { 
	position:			relative;/* remettre le ss menu en avant de la "div corps"*/
	display: 			block; 
}


/*--------------------------*/
/*         CORPS            */
/*--------------------------*/
 
main {
	/*float:				 left;*/
    background-color:    #fff;
	height:				 auto;
	width:				 100%;
    max-width:           1280px;
	/*padding-top:         30px;*/
	padding-top:         50px;
}

/*     DIV CADRE     */
main #contenu #cadre{
	height:				 auto;
	/*width:			1160px;*/
   /* width:			577px;*/
	/*float:			left;*/
	border-radius: 		5px;
    background-color:	#f2f2f2;
    margin:                15px 0 15px 5px;
}

main #contenu #cadre p{
	padding:			10px 10px 10px 10px;
}

main #contenu #cadre img{
	padding:			10px 10px 10px 10px;
    float:              left;
}

/*     PHOTO     */
main #photo{
    width:              100%;
    padding-top:        1px;
}
main #photo img{
    max-width:           100%;
    height:             auto;
}


/*--------------------------*/
/*        TABLEAUX          */
/*--------------------------*/


th {
    display:            table-cell;
    vertical-align:     inherit;
    font-weight:        bold;
	font-family:		Arial, Helvetica, sans-serif;
	font-size:			14px;
 	line-height:		19px;
	color:				#525051;
}

container-fluid {
    width:              100%;
    padding-right:      15px;
    padding-left:       15px;
    margin-right:       auto;
    margin-left:        auto;
}
.table {
    width:              100%;
    margin-bottom:      1.25rem;
    background-color:   transparent;
}

thead {
    display:            table-header-group;
    vertical-align:     middle;
    border-color:       inherit;
}

tr {
    display:            table-row;
    vertical-align:     inherit;
    border-color:       inherit;
    vertical-align:     middle;
    font-family:		Arial, Helvetica, sans-serif;
	font-size:			14px;
 	line-height:		25px;
    text-align:         center;
	color:				#337e85;
}

/*--------------------------*/
/*     DIAPORAMA PHOTOS     */
/*--------------------------*/

#carrouselPage{
    width:           	100%;
	padding-bottom: 	20px;
    position:           relative;
}
#carrouselPage a{
    opacity: 			1;
	transition: 		all 0.75s;
}
#carrouselPage a:hover {
    opacity :           0.75;
}
.midphoto{
    width:          	50%;
    height:             auto;
	display: 			inline-block;
	vertical-align: 	top;
}
.midphoto img{
    width:          	99%;
}

.smallphoto{
    height: 			auto;
    width: 				49%;
    display: 			inline-block;
}

.smallphoto img{
    width:          	49%;
}

/*--------------------------*/
/*         TOOGLE           */ 
/*--------------------------*/
/* Style the buttons that are used to open and close the accordion panel */
button.accordion {
    background-color:     #337e85;
	font-family:		  Arial, Helvetica, sans-serif;
	font-size:			  18px;
	color:				  #fff;
    cursor:               pointer;
    padding:              18px;
    width:                100%;
    text-align:           left;
    border:               none;
    outline:              none;
    transition:           0.3s;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
button.accordion.active, button.accordion:hover {
    background-color:     #2b4346;
}

/* Style the accordion panel. Note: hidden by default */
div.panel {
    padding: 0 18px;
    margin-bottom: 10px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

button.accordion:after {
    content: '\002B'; /* Unicode character for "plus" sign (+) */
    font-size: 18px;
    float: right;
    margin-left: 5px;
}

button.accordion.active:after {
    content: "\2212"; /* Unicode character for "minus" sign (-) */
}

div.panel h4 {
    /*padding-top: 17px;*/
    padding-bottom: 0;
}

/*--------------------------*/
/*    ARTICLES VACANCES     */
/*--------------------------*/

/* ajustement général du txt ds le bloc par rapport à l'image*/
main #presentation h1{
	margin: 		     0 20px;
    margin-top:          30px;
}
main #presentation h2{
	margin: 		     0 60px;
}

#centre section article{
    width:               auto;
    height:              auto;
    padding-left:        95px;;
    margin:              10px;
    background:          url(../decoupe_interieur/Vacances/Activites/Aperitif.jpg) no-repeat 0 0;
}
#centre article+#un{
    background:          url(../decoupe_interieur/Vacances/Activites/Aperitif.jpg) no-repeat;
}
#centre article+#deux{
    background:          url(../decoupe_interieur/Vacances/Activites/Karaoke.jpg) no-repeat;
}
#centre article+#trois{
    background:          url(../decoupe_interieur/Vacances/Activites/Barbecue.jpg) no-repeat;
}
#centre article+#quatre{
    background:         url(../decoupe_interieur/Vacances/Activites/Badminton.jpg) no-repeat;
}

#centre section2 article{
    width:              auto;
    height:             auto;
    padding-left:       95px;
    /*margin-left:        2px;*/
    margin-top:         10px;
    margin-bottom:      20px;
    background:         url(../decoupe_interieur/Vacances/Activites/LacSapins.jpg) no-repeat 0 0;
}
#centre section2 article h3{
	padding-top: 		0;
}
#centre article+#cinq{
    background:         url(../decoupe_interieur/Vacances/Activites/LacSapins.jpg) no-repeat;
}
#centre article+#six{
    background:         url(../decoupe_interieur/Vacances/Activites/Ternand.jpg) no-repeat;
}
#centre article+#sept{
    background:         url(../decoupe_interieur/Vacances/Activites/Vignes.jpg)  no-repeat;
}



/*#centre article+#deux{
    background:         url(../decoupe_interieur/Vacances/Activites/Balade.jpg) no-repeat;
}
#centre article+#trois{
    background:         url(../decoupe_interieur/Vacances/Activites/Billard.jpg) no-repeat;
}
#centre article+#quatre{
    background:         url(../decoupe_interieur/Vacances/Activites/Croquet.jpg) no-repeat;
}
#centre article+#six{
    background:         url(../decoupe_interieur/Vacances/Activites/Rando.jpg) no-repeat;
}
#centre article+#douze{
    background:         url(../decoupe_interieur/Vacances/Activites/SoireeTheme.jpg) no-repeat;
}
#centre article+#treize{
    background:         url(../decoupe_interieur/Vacances/Activites/PingPong.jpg) no-repeat;
}*/


/*--------------------------*/
/*         ADD THIS         */
/*--------------------------*/

.addthis_inline_share_toolbox{
    display:            inline-block;
    width:              100%;
    text-align:         right;
    padding-top:        5px;
}

/*--------------------------*/
/*         FOOTER           */
/*--------------------------*/
footer {
	background-color:	#555;
	width:				100%;
    height:             auto;
    padding:            10px 0 10px 0;
    display:            inline-block;
}

footer p{
	font-family:		Arial, Helvetica, sans-serif;
	font-size:			11px;
    color:              #fff;
    text-align:         center;
    margin-top:         5px;
    margin-right:       2px;
}

footer p a{
	color:				#FFF !important; /*Couleur du texte du menu Haut*/
	text-decoration:	none;
}

footer p a{
	text-decoration:	underline;
}

footer p a:hover{
	text-decoration: 	none;
}


/*--------------------------*/
/*      MEDIA QUERIES       */
/*--------------------------*/

@media screen and (min-width:769px) and (max-width:1095px){
    nav li{	
        line-height:        15px;
    }
}

@media screen and (min-width:768px) and (max-width:1155px){
    #bouton a{
        width:              23%;
    }
}


@media screen and (min-width:320px) and (max-width:768px){
    main{
        padding-top:        175px;
    }
     
    header {
        position:           fixed;
    }
    
    header .logo img {
        max-width:          80%;
    }
    
    main #presentation h1 {
        margin:             0 0;
    }
    
    main #presentation h2 {
        margin:             0 38px;
    }
    
     #bouton a {
        width:              90%;
    }
    
    main #photo {
        display:            none;
    }

    header .bouton {
        display:            none;
    }
    
    header .logo {
        width:              100%;
        text-align:         center;
    }
    
    bntMenu{
    }
    
    nav{
        position:           fixed;
    }
    
    nav #bntMenu{
        background-color:   #337e85;
        font-family:		"Trebuchet MS", Arial, Helvetica, sans-serif;
        font-size:			12px;
        font-weight:        700;
        color:				#fff;
        padding:            1px 0 4px 15px;
        display:            block;
        cursor:             pointer;
    }    
    
    nav #bntMenu span{
        display:            block;
        width:              35px;
        height:             2px;
        background:         #fff;
        margin:             7px 0;
    }
    
    nav > ul {
        /*height:             440px;*/
        height:             650px;
        overflow-x:         hidden;
        overflow-y:         auto;
    }
    
    nav ul {
        display:            none;
        width:              100%;
    }
    
    nav .sousmenu {
        display:            inline-block;
        list-style-type:    none;
        margin:             0;
        padding:            0;
        border:             0;
    }
    
    nav li {
        display:            block;
        line-height:        25px;
    }
    
    nav .sousmenu li a {
        background-color: #2D7176;
    }
    
    nav li a:link, nav li a:visited {
        text-align:         left;
    }
    
    nav .sousmenu li{
       border-top:          0;
    }
    
    nav .sousmenu li a:link, #menuvertical .sousmenu li a:visited{
        padding-left:       45px;
        text-transform:     capitalize;
        background-color:   #2D7176;
    }
	
  	.smallphoto {
	  display: 				none;
	}
	
	.midphoto{
		width:          	100%;
	}