@charset "UTF-8";
/*
Designed by Jean Loup Couegnas
------------------------------------------

@media screen and (max-width: 600px) {} => Mobile
@media screen and (min-width: 600px) {} => IPAD vertical
@media screen and (min-width: 768px) {} => IPAD horizontal
@media screen and (min-width:1024px) {} => 13"
@media screen and (min-width:1200px) {} => 15"

*/
/* virtual Tour */
.contentLogo {
    display: none;
}
#panocontent, #visite {
    height:50vw !important;
}

#HomeCarousel {
    height: 60vw;
}

/* Le Slider */
#carousel img { min-width:100%; }
#carousel .item {
    background-repeat: no-repeat;
    background-size: cover;
    width: 100vw;  
    height: 70vw; 
}
#carousel .carousel-caption { position:absolute; bottom:0; left:0; right:0; padding:0 0 10px 0;}
#carousel .carousel-caption h3 { padding:16px; margin:0; text-shadow:none; color:#FFF; background-color:rgba(0,0,0,0.6);}
#carousel .carousel-caption div { padding:16px 25px 16px 25px; margin:0; text-shadow:none;color:#333;  background-color:rgba(254,254,254,0.9);}
#carousel .carousel-caption .lien_diapo  { margin:12px 0 4px 0; text-decoration:none;  text-align:center;}
#carousel .carousel-caption .lien_diapo a { background-color:rgba(0,0,0,0.6); color:white; border-radius:16px; display:inline-block;padding:6px 16px 5px 16px; margin:0 auto; text-decoration:none; }
#carousel .carousel-caption .lien_diapo a:hover { background-color:rgba(0,0,0,1); color:white; }
#carousel .carousel-control { width:32px; color:white; opacity:1; background-color:none; top:25%; height:96px }
#carousel .carousel-control:hover.right,.carousel-control.left:hover {background-color:black; }
#carousel .carousel-control.right {background:none; right:0px ; background-color:rgba(0,0,0,0.2);}
#carousel .carousel-control.left {background:none; left:0px ; background-color:rgba(0,0,0,0.2);}

a.more { color:white; text-decoration:none; padding:4px 12px ; border-radius:12px; margin:0px 0; display:inline-block}
a.more:hover { background-color:#333;}
#carousel .carousel-caption.position1 { top:0; bottom:initial}
#carousel .carousel-caption.position2 { top:33%; bottom:23%}
#carousel .carousel-caption.position3 { bottom:0}
#carousel .carousel-caption.position4 { top:16px; bottom:10px; padding:3% 0 0 0}

#carousel .carousel-caption.alignement4 {left:36px; right:36px}
#carousel .carousel-caption.alignement1 { right:50%; left:36px}
#carousel .carousel-caption.alignement2 { right:30%; left:30%;}
#carousel .carousel-caption.alignement3 { right:36px; left:50%;}



.vertical-title {
    transform: rotate(-90deg);
    display: block;
    position: absolute;
    top: 240px;
    left: -140px;
    width:400px;
    text-transform:unset;
    color:rgba(108,96,89,0.25);
    font-size: 3em;
    font-weight:bold;
    text-align: center;
}
.vertical-title-long {
    transform: rotate(-90deg);
    display: block;
    position: absolute;
    top: 290px;
    left: -340px;
    width:800px;
    text-transform:unset;
    color:rgba(108,96,89,0.25);
    font-size: 3em;
    font-weight:bold;
    text-align: center;
}
.date {
    padding:0px 12px;
    color:rgb(108,96,89);
    text-align:center;
    /*background-color:rgba(0,0,0,0.05);*/
}
.jour {
    display:block;
    font-size:2em;
    border-bottom: 3px solid rgb(108,96,89);
    padding-bottom: 0;
    margin:5px;
}
.mois {
    text-transform:uppercase;
    font-size:0.9em;
    font-weight:bold;
}
#actualities {
    background-color:white;

    background-repeat:no-repeat;
    background-size:cover;
    min-height:30vw;
}

#actualities .main {
    position: relative;
}
#actualities .second {
    margin: 0;
    padding:12px 12px 0 12px;
}
#actualities .card {
    border:0;
    border-radius:0;
    margin-bottom:12px;
    padding: 0;
    background-color:rgb(51,76,118,0.1) !important;

}
#actualities .card-body {
    padding:0;
}
#actualities .main .card-text {
    background-color:rgba(108,96,89,0.05);
}
#actualities .card-title {
    width: 100%;
    margin:0;
    padding:8px 16px;
    background-color: rgba(108,96,89,0.25);
    color:rgb(108,96,89);
}
#actualities .card-text {
    color:rgb(51,76,118);
    margin:0;
    padding:8px 16px;
}

#actualities a {
    color:rgb(204,210,221);
    font-size:1.6em;
    font-weight:bold;
    text-decoration:none;
    padding: 4px 12px;
    margin: 0 -12px 0 0;

}
#actualities a i {
    position:relative;
    top:4px;
}
#actualities a:hover {
    background-color:rgb(45,76,121);
    color:white;
}

#discover_campsite  {
    padding: 1px 0 0 0;
    background-image:url(/images/photos/formats/horizontal/grandes/place-camping-abri-de-camargue-gh56375.jpg);
    background-repeat:no-repeat;
    background-size:cover;
    min-height:30vw;
}
#discover_campsite .subopacity{
    padding: 1px 0 0 0;
    background: rgb(45,76,121);
    background: linear-gradient(0deg, rgba(45,76,121,0.1) 0%, rgba(45,76,121,0.9) 10%,rgba(45,76,121,0.9) 75%, rgba(45,76,121,0.1) 100%);
}
#discover_campsite h2{
    color:white;
}
#discover_campsite h2, #discover_region h2, #Cottages h2 {
    font-size:2em;
    text-transform:unset;
    display:block;
    margin:64px auto 32px auto;
    text-align:center;
}
#discoverTabs {
    border-bottom:0;
    padding:4px 4px 0 4px ;
    margin: 0;
}
#discoverTabs li {
    width:100%;
    background-color: rgba(255,255,255,0.4);
    margin: 0 2px;
    border-bottom:1px solid white;
}
#discoverTabs a {
    font-size: 1.4em;
    padding: 0.5em 2em;
    color:white;
}
#discoverTabs a.active {
    color: rgb(45,76,121);
}

#tarif {
    padding:0;
}

#discover_region {
    background-color: rgba(217,153,16,0.3);
    position: relative;
    padding-top: 1px;
    min-height:30vw;
}
#discover_region h2 {
    color: rgb(217,153,16);
}
#menu {
    padding: 0;
    margin: 0;
}
#menu li {

    list-style: none;
    background-color: rgb(102,78,61);
    font-family: 'Lora', serif;
    font-weight: 700;
    font-size: 1.2em;
    padding: 0;
    margin: 0;
}
#menu li a{
    color: white;
    margin-left: 5px;
}
#menu li:first-child { background-color: rgb(217,153,16)}
#menu li:last-child {  background-color: rgba(34,76,125,0.95); margin-left: 0;}
#discover_region img {
    margin-bottom:-1px;
    margin-right:-1px;
}
.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) { 
    #HomeCarousel {
        height: 50vw;
    }
    #carousel .item { height: 50vw; }
    #carousel .carousel-caption.position1 { top:160px; bottom:initial}
    #carousel .carousel-caption.position2 { top:40%; bottom:15%}
    #carousel .carousel-caption.position3 { bottom:16px}
    #carousel .carousel-caption.position4 { top:160px; bottom:10px; padding:3% 0 0 0}
    #carousel .carousel-caption.alignement4 {left:0px; right:0px}
    #carousel .carousel-caption.alignement1 { right:50%; left:0px}
    #carousel .carousel-caption.alignement2 { right:25%; left:25%;}
    #carousel .carousel-caption.alignement3 { right:0px; left:50%;}
    #carousel .carousel-control { top:30%; bottom:40%; height:auto;}
    #main_navigation .container { padding:0; }
    #rubriques article { min-height: 360px;}
    #carouselActus {min-height: 30px;}
    #carouselActus .carousel-item {
        padding: 12px 32px 12px 0;
    }
    #carouselActus .carousel-control-prev, #carouselActus .carousel-control-next {
        top:10px;
    }
    #actualities {
        border-top: 0;
    }
    #actualities .second {
        border:4px solid white;
        border-left:0;
    }
    #actualities .second .aphoto {
        min-width: 200px;
        overflow: hidden;
        text-align: center;
        position: relative;
    }
    #actualities .second .aphoto img {
        position: absolute;
        height: 100%;
        top: 0;
        left: 0;
    }
    #discover_campsite h2, #discover_region h2, #Cottages h2 {
        font-size:3.6em;
    }
    #discoverTabs {
        margin:0 12px;
        border-radius: 5px 5px 0 0;
    }
    #discoverTabs li {
        width:auto;
        border-bottom:0;
        border-radius: 5px 5px 0 0;

    }

}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
   /* #reserver h2 { display:inline-block; background-color:transparent; float:left; padding:0; margin:4px 0 0 0 ;}
    #reserver .container div { margin-left:16px;}*/
        #carousel .carousel-caption.alignement4 {left:0px; right:0px}
    #carousel .carousel-caption.alignement1 { right:70%; left:0px}
    #carousel .carousel-caption.alignement2 { right:40%; left:40%;}
    #carousel .carousel-caption.alignement3 { right:0px; left:60%;}
    #carousel .carousel-control { top:30%; bottom:40%; height:auto;}
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    #carousel .item { height: 40vw; }
}