/*****************************************/
/*****************************************/
/*****      CSS Document             *****/
/*****                               *****/
/*****      Site KSAR TIMNAY         *****/
/*****                               *****/
/*****      Auteur: Yann CHOINARD    *****/
/*****      Date: Janvier 2023       *****/
/*****                               *****/
/*****************************************/

/***** ARCHIVES
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: center;

	
	background: #202020;
*****/
* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

body{
	margin: 0px;
	padding: 0px;
	font-family: calibri, arial, verdana, serif, sans-serif;
	color: #333;
	font-size: 14px;
	background: #fff;
}

hr{width: 80%;}

.hr-footer{width: 100%;}

.barre-vertical{transform: rotate(90deg);}

.typo-titre-art-00{font-size: 30px; font-weight: 900; background: linear-gradient(-90deg, #333, #fff);}

.typo-titre-art-01{font-size: 24px; font-weight: 900; background: linear-gradient(-90deg, #333, #fff);}

.typo-subtitre-art-01{font-size: 22px; font-weight: 400; text-align: center;}

.typo-text-art-00{padding: 5px 10px; max-width: 320px; font-size: 18px;}

.typo-text-art-00-justify{padding: 5px 10px; max-width: 320px; font-size: 18px; text-align: justify;}

.typo-text-art-02{margin: 5px 0px; font-size: 16px;}

/**********************************************/
.typo-fun-00{font-size: 22px; font-weight: 600; line-height: 10px; color: #666; text-shadow: 2px 2px 2px #333;}

.typo-fun-01{font-size: 16px; font-weight: 600; color: #666; text-align: center;}

.container-typo-fun{margin: 10px auto; text-align: center; max-width: 260px;}

.content-typo-fun{margin: 0px auto; text-align: center; max-width: 220px; overflow: hidden;}

#typoFun01{
	position: relative;
	right: -170px;
	animation-name: typo-fun-01;
	animation-timing-function: ease-in-out;
	animation-duration: 4000ms;
	animation-iteration-count: infinite;
}
@keyframes typo-fun-01{
	0%{right: -170px; color: #666;}
	40%{right: -20px;}
	60%{right: -20px; color: #f00;}
	80%{right: 175px;}
	100%{right: 175px; color: #666;}
}

#typoFun02{
	position: relative;
	right: -170px;
	animation-name: typo-fun-02;
	animation-timing-function: ease-in-out;
	animation-duration: 4200ms;
	animation-iteration-count: infinite;
}
@keyframes typo-fun-02{
	0%{right: -170px; color: #666;}
	10%{right: -170px;}
	50%{right: 10px; color: #0f0;}
	70%{right: -10px; color: #0f0;}
	90%{right: 170px; color: #666;}
	100%{right: 170px; color: #666;}
}

#typoFun03{
	position: relative;
	right: -170px;
	animation-name: typo-fun-03;
	animation-timing-function: ease-in-out;
	animation-duration: 3500ms;
	animation-iteration-count: infinite;
}
@keyframes typo-fun-03{
	0%{right: -170px; color: #666;}
	20%{right: -170px;}
	60%{right: 20px; color: #00f;}
	80%{right: -15px; color: #00f;}
	100%{right: 170px; color: #666;}
}

/********************************/
/*****     OBJETS FIXES     *****/
/********************************/
.btn-up{
	padding: 8px 8px;
	position: fixed;
	bottom: 15px;
	right: 12px;
	border: 1px solid #000;
	border-radius: 50px;
}

.btn-txt-up{
	text-decoration: none;
	font-weight: bold;
}

/********************************/
/*****     MAIN ACCUEIL     *****/
/********************************/
.main{margin: 10px auto; padding: 10px 20px; width: 90%;}

.som-acc-prt{
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	align-items: center;
	border: 1px solid #666;
}

.container-bloc-02{
	padding: 5px 10px;
	max-width: 320px;
	font-size: 16px;
}

.container-anim-text{
	padding: 5px 10px;
	max-width: 320px;
}

.container-img-som-acc{text-align: center;}
/****************************************************/
/*****     SECTION ACCUEIL / INFOS GENERALE     *****/
/****************************************************/
.base-acc-info{margin: 10px auto; padding: 10px 20px; width: 90%;}

.container-acc-info-prt{
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	align-items: flex-start;
	border: 1px solid #666;
}

.container-acc-info-chd-01{margin-top: 10px; padding-right: 10px; border-right: 1px solid #000;}

.container-acc-info-chd-02{margin-top: 10px; padding-right: 10px; border-right: 1px solid #000;}
/**************************************/
/*****     PHOTOS FULL SCREEN     *****/
/**************************************/
.galery{margin: 10px auto; padding: 10px 20px; width: 90%;}

.container-galery-prt{
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	align-items: flex-start;
	border: 1px solid #666;
}

.container-galery-chd{
	margin: 20px 10px;
	padding: 10px 20px;
	max-width: 450px;
	background: #eee;
	box-shadow: 4px 4px 4px #666;
}

.typo-titre-galery{
	padding: 5px 10px;
	font-size: 20px;
	font-weight: 900;
	text-align: center;
	background: linear-gradient(90deg, #eee, #999, #eee);
	box-shadow: 0px 2px 2px #000;
}

.typo-text-galery{
	padding: 5px 10px;
	font-size: 18px;
	text-align: center;
}

.typo-sub-galery-anim{padding: 3px 5px; cursor: pointer;}

.typo-sub-galery-anim{text-align: center; font-size: 16px; font-weight: 900;}

.vig-som-photo-galery-01{text-align: center;}

.vig-som-photo-01{max-width: 100%;}
/********************************************/
/*****     CONDITIONS PARTICULIERES     *****/
/********************************************/
.condition{margin: 10px auto; padding: 10px 20px; width: 90%;}

.container-condition-prt{
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	align-items: flex-start;
	border: 1px solid #666;
}
/**************************/
/*****     FOOTER     *****/
/**************************/
footer{
	margin: 0px auto;
	width: 100%;
	color: #fff;
	background-color: #000;
}

.container-footer{margin: 10px auto; padding: 10px 20px; width: 90%;}

.container-footer-prt{
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: center;
}

.container-footer-chd{
	text-align: left;
}

.btn-legal{
	text-decoration: none;
	color: #fff;
}

.btn-legal:hover{
	color: #0f0;
}

.container-footer-chd-center{
	text-align: center;
	font-size: 16px;
	font-weight: 900;
}

.container-footer-chd-right{
	text-align: center;
	font-size: 16px;
	font-weight: 900;
}

.container-copy{padding-bottom: 10px; text-align: center;}

.btn-copy{
	text-decoration: none;
	color: #fff;
}

/*********************************************************/
/*********************************************************/

/************************************/
/*****     PAGE HEBERGEMENT     *****/
/************************************/

.container-room-chd-01{max-width: 360px;}

.list-room{font-size: 18px;}

/*************************************/
/*****     PAGE RESTAURATION     *****/
/*************************************/

.list-restau{padding: 0px 20px; font-size: 16px;}

.slide-food{
	margin: 50px auto;
	width: 300px;
	height: 200px;
	overflow: hidden;
	box-shadow: 0px 10px 10px #666;
}

        .vig-food-01{
			max-width: 100%;
            position: relative;
            animation-name: im-food-01;
            animation-timing-function: ease-in-out;
            animation-duration: 18s;
            animation-iteration-count: infinite;
        }

        @keyframes im-food-01{
            0%{opacity: 0;}
            1%{opacity: 1;}
            15.66%{opacity: 1;}
            16.66%{opacity: 0;}
            100%{opacity: 0;}
        }

        .vig-food-02{
			max-width: 100%;
            position: relative;
            top: -202px;
            animation-name: im-food-02;
            animation-timing-function: ease-in-out;
            animation-duration: 18s;
            animation-iteration-count: infinite;
        }

        @keyframes im-food-02{
            0%{opacity: 0;}
            15.66%{opacity: 0;}
            16.66%{opacity: 1;}
            33.32%{opacity: 1;}
            34.32%{opacity: 0;}
            100%{opacity: 0;}
        }

        .vig-food-03{
			max-width: 100%;
            position: relative;
            top: -406px;
            animation-name: im-food-03;
            animation-timing-function: ease-in-out;
            animation-duration: 18s;
            animation-iteration-count: infinite;
        }

        @keyframes im-food-03{
            0%{opacity: 0;}
            33.32%{opacity: 0;}
            34.32%{opacity: 1;}
            49.98%{opacity: 1;}
            50.98%{opacity: 0;}
            100%{opacity: 0;}
        }

        .vig-food-04{
			max-width: 100%;
            position: relative;
            top: -610px;
            animation-name: im-food-04;
            animation-timing-function: ease-in-out;
            animation-duration: 18s;
            animation-iteration-count: infinite;
        }

        @keyframes im-food-04{
            0%{opacity: 0;}
            49.98%{opacity: 0;}
            50.98%{opacity: 1;}
            66.64%{opacity: 1;}
            67.64%{opacity: 0;}
            100%{opacity: 0;}
        }

        .vig-food-05{
			max-width: 100%;
            position: relative;
            top: -812px;
            animation-name: im-food-05;
            animation-timing-function: ease-in-out;
            animation-duration: 18s;
            animation-iteration-count: infinite;
        }

        @keyframes im-food-05{
            0%{opacity: 0;}
            66.64%{opacity: 0;}
            67.64%{opacity: 1;}
            83.30%{opacity: 1;}
            84.30%{opacity: 0;}
            100%{opacity: 0;}
        }

        .vig-food-06{
			max-width: 100%;
            position: relative;
            top: -1016px;
            animation-name: im-food-06;
            animation-timing-function: ease-in-out;
            animation-duration: 18s;
            animation-iteration-count: infinite;
        }

        @keyframes im-food-06{
            0%{opacity: 0;}
            83.30%{opacity: 0;}
           84.30%{opacity: 1;}
           99%{opacity: 1;}
            100%{opacity: 0;}
        }

.container-restau-chd-01{
	max-width: 340px;
}

.container-im-amb{
	text-align: center;
}

.im-amb-01{
	animation-name: amb-01;
    animation-timing-function: ease-in-out;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

@keyframes amb-01{
	0%{opacity: 1;}
	60%{opacity: 0.6;}
	100%{opacity: 1;}
}

.im-amb-02{
	animation-name: amb-02;
    animation-timing-function: ease-in-out;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

@keyframes amb-02{
	0%{opacity: 0.6;}
	50%{opacity: 1;}
	100%{opacity: 0.6;}
}

.im-amb-03{
	animation-name: amb-03;
    animation-timing-function: ease-in-out;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

@keyframes amb-03{
	0%{opacity: 1;}
	30%{opacity: 0.7;}
	100%{opacity: 1;}
}

.container-restau-chd-02{
	max-width: 320px;
}

.container-vignette-bar{
	text-align: center;
}

/***************************/
/*****     CAMPING     *****/
/***************************/

.container-vig-camp{text-align: center;}

.vig-com-camp{text-align: center;}

/******************************/
/*****     PARC TARIK     *****/
/******************************/

.som-parc-prt{
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: flex-start;
}

.container-parc-chd-01{
	margin: auto;
	max-width: 240px;
}

.container-parc-chd-02{
	margin: 10px auto;
	max-width: 220px;
}

.doc-tariq{
	margin: 0px 10px;
	padding: 0px 10px 0px 10px;
	max-width: 620px;
	text-align: center;
	background: linear-gradient(90deg, #a9a9a9, #ededed, #a9a9a9);
}

.subcontainer-tarik-prt{
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	align-items: flex-start;
}

.btn-doc-tariq{
	margin: 2px 5px 2px 5px;
	text-decoration: none;
	color: #000;
	font-size: 16px;
	font-weight: 400;
	font-style: italic;
}

.im-vig-tariq{
	margin: 5px 0px 5px 0px;
	box-shadow: 0px 5px 10px #000;
}

.im-vig-tariq:hover{
	opacity: 0.8;
}

.im-tarik-01{
	transform: rotate3d(5, -6, -2, 20deg);
	box-shadow: 4px 4px 6px #000;
}

.im-tarik-02{
	text-align: right;
	transform: rotate3d(5, -6, -2, -20deg);
}

.im-tarik-03{
	text-align: left;
	transform: rotate3d(5, -6, -2, 20deg);
}

.im-tarik-04{
	text-align: right;
	transform: rotate3d(5, -6, -2, -20deg);
}

.container-diap{
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	align-items: flex-start;
}

.im-diap-parc{
	max-width: 100%;
}

.im-diap-parc:hover{
	opacity: 0.5;
}

.pop-diap-parc-01{
	position: relative;
}

.typo-popup-01{
	margin: auto;
	padding: 5px 10px;
	width: 100%;
	position: absolute;
	top: -60px;
	left: 0;
	font-size: 20px;
	color: #333;
	background: #eee;
	border: 1px solid #f00;
	z-index: 100;
}

.pop-diap-parc-02{
	position: relative;
}

.typo-popup-02{
	margin: auto;
	padding: 5px 10px;
	width: 100%;
	position: absolute;
	top: -85px;
	left: 0;
	font-size: 20px;
	color: #333;
	background: #eee;
	border: 1px solid #f00;
	z-index: 100;
}

.pop-diap-parc-03{
	position: relative;
}

.typo-popup-03{
	margin: auto;
	padding: 5px 10px;
	width: 100%;
	position: absolute;
	top: -110px;
	left: 0;
	font-size: 20px;
	color: #333;
	background: #eee;
	border: 1px solid #f00;
	z-index: 100;
}

.pop-diap-parc-04{
	position: relative;
}

.typo-popup-04{
	margin: auto;
	padding: 5px 10px;
	width: 100%;
	position: absolute;
	top: -60px;
	left: 0;
	font-size: 20px;
	color: #333;
	background: #eee;
	border: 1px solid #f00;
	z-index: 100;
}

.pop-diap-parc-05{
	position: relative;
}

.typo-popup-05{
	margin: auto;
	padding: 5px 10px;
	width: 100%;
	position: absolute;
	top: -60px;
	left: 0;
	font-size: 20px;
	color: #333;
	background: #eee;
	border: 1px solid #f00;
	z-index: 100;
}

.txt-popup{
	margin: 0px auto;
	font-size: 18px;
}
/******************************/
/*****     RANDONNEES     *****/
/******************************/

.som-rando-prt{
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	align-items: flex-start;
}

.list-rando{max-width: 280px;}

.base-rando-info{margin: auto;}

.container-diap-rando-prt{
	margin: auto;
	max-width: 80%;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	align-items: flex-start;
}

.im-diap-rando:hover{opacity: 0.8;}

.container-im-diap-rando-01{
	position: relative;
}

.typo-diap-rando-01{
	margin: auto;
	padding: 5px 10px;
	width: 100%;
	position: absolute;
	top: -60px;
	left: 0;
	font-size: 20px;
	color: #333;
	background: #eee;
	border: 1px solid #f00;
	z-index: 100;
}

.container-im-diap-rando-03{
	position: relative;
}

.typo-diap-rando-03{
	margin: auto;
	padding: 5px 10px;
	width: 100%;
	position: absolute;
	top: -35px;
	left: 0;
	font-size: 20px;
	color: #333;
	background: #eee;
	border: 1px solid #f00;
	z-index: 100;
}

.container-im-diap-rando-05{
	position: relative;
}

.typo-diap-rando-05{
	margin: auto;
	padding: 5px 10px;
	width: 100%;
	position: absolute;
	top: -35px;
	left: 0;
	font-size: 20px;
	color: #333;
	background: #eee;
	border: 1px solid #f00;
	z-index: 100;
}

.container-im-diap-rando-06{
	position: relative;
}

.typo-diap-rando-06{
	margin: auto;
	padding: 5px 10px;
	width: 100%;
	position: absolute;
	top: -60px;
	left: 0;
	font-size: 20px;
	color: #333;
	background: #eee;
	border: 1px solid #f00;
	z-index: 100;
}

.container-im-diap-rando-07{
	position: relative;
}

.typo-diap-rando-07{
	margin: auto;
	padding: 5px 10px;
	width: 100%;
	position: absolute;
	top: -35px;
	left: 0;
	font-size: 20px;
	color: #333;
	background: #eee;
	border: 1px solid #f00;
	z-index: 100;
}

.container-im-diap-rando-08{
	position: relative;
}

.typo-diap-rando-08{
	margin: auto;
	padding: 5px 10px;
	width: 100%;
	position: absolute;
	top: -60px;
	left: 0;
	font-size: 20px;
	color: #333;
	background: #eee;
	border: 1px solid #f00;
	z-index: 100;
}

.container-im-diap-rando-10{
	position: relative;
}

.typo-diap-rando-10{
	margin: auto;
	padding: 5px 10px;
	width: 100%;
	position: absolute;
	top: -35px;
	left: 0;
	font-size: 20px;
	color: #333;
	background: #eee;
	border: 1px solid #f00;
	z-index: 100;
}

/***********************************/
/*****     BUSINESS CENTER     *****/
/***********************************/

.container-bus-info-prt{
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	align-items: flex-start;
}

.som-bus-prt{
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	align-items: flex-start;
}

.list-business{max-width: 280px;}

.container-sce-anex-chd{max-width: 320px;}

.container-bandeau{margin: 0px auto; text-align: center;}

.im-bando-bus{max-width: 80%;}