@font-face {
    font-family: 'courgetteregular';
    src: url('font/courgette-regular-webfont.eot');
    src: url('font/courgette-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/courgette-regular-webfont.woff2') format('woff2'),
         url('font/courgette-regular-webfont.woff') format('woff'),
         url('font/courgette-regular-webfont.ttf') format('truetype'),
         url('font/courgette-regular-webfont.svg#courgetteregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'dynobold';
    src: url('font2/dyno_bold-webfont.eot');
    src: url('font2/dyno_bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('font2/dyno_bold-webfont.woff2') format('woff2'),
         url('font2/dyno_bold-webfont.woff') format('woff'),
         url('font2/dyno_bold-webfont.ttf') format('truetype'),
         url('font2/dyno_bold-webfont.svg#dynobold') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'dynoregular';
    src: url('font2/dyno_regular-webfont.eot');
    src: url('font2/dyno_regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('font2/dyno_regular-webfont.woff2') format('woff2'),
         url('font2/dyno_regular-webfont.woff') format('woff'),
         url('font2/dyno_regular-webfont.ttf') format('truetype'),
         url('font2/dyno_regular-webfont.svg#dynoregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
@import "compass/css3";

body {
    display: block;
	margin:0;
	padding:0;
	font-family: 'dynoregular', sans-serif;
	font-size: 1vw;
}

img{
    image-rendering:auto;
}

a{
	text-decoration: none;
	color: #000;
}

a:focus{
	outline: 0;
}

.fond{
	background-attachment: fixed;
    background-position: center;
	height:100%;
	width: 100%;
	position:fixed;
	background-repeat: no-repeat;
	border-bottom:2px solid white ;
	z-index: 1;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#LVT{
	background-image: url("../images/LVT.jpg");
}
#FBT{
	background-image: url("../images/FBT.jpg");
}
#DBT{
	background-image: url("../images/DBT.jpg");
}
#PP{
	background-image: url("../images/PP.jpg");
}

.colorLVT{
	color: #932A3C;
}
#borderLVT{
	border-color: #932A3C;
}
.colorBackLVT{
	background-color: #932A3C;
}
.colorFBT{
	color: #87764E;
}
#borderFBT{
	border-color: #87764E;
}
.colorBackFBT{
	background-color: #87764E;
}
.colorDBT{
	color: #B21545;
}
#borderDBT{
	border-color: #B21545;
}
.colorBackDBT{
	background-color: #B21545;
}
.colorPP{
	color: #6758A2;
}
#borderPP{
	border-color: #6758A2;
}
.colorBackPP{
	background-color: #6758A2;
}

.logo{
	position: relative;
	left: 45%;
	width: 10%;
}
.imgLogo{
	width: 100%;
}

.contenu{
	position: relative;
	left: 20%;
	width: 60%;
	height: 75%;
	background-color: white;
	text-align: center;
}
.titre{
	font-family: 'courgetteregular', sans-serif;
	font-size: 2.5vw;
	padding-top: 1.5%;
	margin-top: 0;
}

.map{
	position: absolute;
	width: 20%;
	top: -9%;
	right: -9%;
}
.text{
	width: 88%;
	margin-left: 5%;
	border: 1px solid;
	padding: 0px 1%;
}
.imgText{
	width: 90%;
	height: 30%;
	margin-top: 2%;
	display: inline-block;
}
.imgPresentation{
	width: 15%;
}
.dimension{
	background-size: cover;
	width: 32%;
	height: 100%;
	background-position: center;
	position: relative;
	overflow: hidden;
}
.imgG{
	display: inherit;
	float: left;
}
#igLVT{background-image: url("../images/chambord.jpg");}
#igFBT{background-image: url("../images/champagne.jpg");}
#igDBT{background-image: url("../images/vougeot.jpg");}
#igPP{background-image: url("../images/village.jpg");}

.imgC{
	display: inherit;
}
#icLVT{background-image: url("../images/vin.jpg");}
#icFBT{background-image: url("../images/reims.jpg");}
#icDBT{background-image: url("../images/vinrouge.jpg");}
#icPP{background-image: url("../images/raisin.jpg");}

.imgR{
	display: inherit;
	float: right;
}
#irLVT{background-image: url("../images/marché.jpg");}
#irFBT{background-image: url("../images/champagneroute.jpg");}
#irDBT{background-image: url("../images/bourgignon.jpg");}
#irPP{background-image: url("../images/monument.jpg");}

.website{
	margin-top: 2%;
	width: 45%;
	height: 10%;
	margin-left: 25%;
}
.buttonWebsite{
	font-family: 'courgetteregular', sans-serif;
	font-size: 2vw;
	width: 98%;
	height: 90%;
	margin-top: 0.7%;
	border: 1px solid;
	cursor: pointer;
	color: rgb(255,255,255);
}
.pageSuivante{
	font-family: 'courgetteregular', sans-serif;
	position: absolute;
	bottom: 0;
	right: 2%;
	font-size: 1vw;
	cursor: pointer;
}
#inconnu{
	font-size: 3vw;
	vertical-align: middle;
}

.textImg{
	background-color: rgba(255,255,255,0.6);
	width: 100%;
	position: absolute;
	bottom: -50px;
	margin:0;
	padding: 4% 0;

	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
.dimension:hover .textImg{
	bottom: 0;

}
.vide{
	overflow: hidden;
	height: 60%;
}


.home{
	font-family: 'courgetteregular', sans-serif;
	position: absolute;
	bottom: 0%;
	left: 1%;
	font-size: 0.9vw;
}
.imgHome{
	height: 2vw;
	left: 0;
}

.center{
	left: 40%;

}
.pagePrecedente{
	font-family: 'courgetteregular', sans-serif;
	position: absolute;
	bottom: 0;
	left: 2%;
	font-size: 1vw;
	cursor: pointer;
}

#plLVTperso{
	margin-top: 5%;
}

.animate {
  transform: translate(0, 0);
  bottom: 0;
}

/*----------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------*/

@media tv, (device-aspect-ratio: 16/10) {
    * {
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
    }


    .titre{
    	padding-top: 4%;
    }

    .website{
    	margin-top: 4%;
    }

    .map{
    	width: 25%;
    }

    
}

/*------------------------------------------------------------------------------------------------------------------*/

@media tv, (device-aspect-ratio: 4/3) {
    * {
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
    }

    .titre{
    	padding-top: 5%;
    }

    .website{
    	margin-top: 7%;
    }

    .map{
    	width: 26%;
    }

    .logo{
    	left: 43.5%;
    	width: 13%;
    }
}

/*------------------------------------------------------------------------------------------------------------------*/

@media tv, (device-aspect-ratio: 3/2) {
    * {
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
    }

    .titre{
    	padding-top: 3%;
    }

    .website{
    	margin-top: 7%;
    }

    .map{
    	width: 24%;
    }

    .logo{
    	left: 43.5%;
    	width: 13%;
    }
}

/*------------------------------------------------------------------------------------------------------------------*/
@media screen and (device-aspect-ratio: 5/4) {
    * {
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
    }
    

    .titre{
    	padding-top: 5%;
    }

    .website{
    	margin-top: 5%;
    }

    .map{
    	width: 28%;
    }

    .logo{
    	left: 43.5%;
    	width: 13%;
    }

    .text{
	margin-top: 7%;
}
}

/*-----------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 1250px) {

}
/*-----------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 1000px) {
	body{
		font-size: 1.15vw;
	}

	.map{
		width: 22.5%;
	}

	.titre{
		padding-top: 3%;
	}
}
/*-----------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 750px){

	body{
		font-size: 1.3vw;
	}

	.titre{
		padding-top: 5%;
	}

	.map{
		top: -6%;
		width: 25%;
	}

	.pageSuivante, .pagePrecedente{
		font-size: 1.3vw;
	}

	.home{
		font-size: 1.2vw;
	}

	.logo{
		left: 42.5%;
		width: 15%;
	}

	.imgText{
		margin-top: 6%;
	}

}

/*Format Portrait tablette*/
@media only screen and (min-device-width:501px) and (max-device-width:999px) and (orientation : portrait) {
	body{
		font-size: 2vw;
	}

	.logo{
		width: 20%;
		left: 40%;
	}

	.titre{
		font-size: 5vw;
	}

	.map{
		width: 30%;
		top: -5.5%;
		right: -15%;
	}

	.text{
		padding: 0;
		border: 2px solid;
	}

	.imgText{
		display: block;
		margin-top: 0;
	}

	.dimension{
		width: 50%;
		height: 50%;
	}

	.imgG, .imgC, .imgR{
		float: initial;
		margin-top: 2%;
		margin-left: 30%;
	}

	.website, #plLVTperso{
		margin-top: 35%;
		margin-left: 27.5%;
		height: 5%;
	}

	.buttonWebsite{
		font-size: 3vw;
	}

	.home{
		font-size: 1.5vw;
	}

	.imgHome{
		height:3.5vw;
	}

	.pageSuivante{
		font-size: 1.5vw;
	}

	.pagePrecedente{
		font-size: 1.5vw;
	}

	#inconnu{
		font-size: 3.5vw;
	}

	.textImg{
		bottom:-100px;
	}

	.titre{
		margin-bottom: 2%;
	}
}

/*Format Paysage tablette*/
@media only screen and (min-device-width:501px) and (max-device-width:1400px) and (orientation : landscape) {
	.map{
		top: -12%;
	}

	.titre{
		margin-bottom: 2%;
	}
}

/*Format Portrait des téléphones*/
@media only screen and (max-device-width: 320px) and (orientation : portrait){
	body{
		font-size: 2vw;
	}

	.contenu{
		height:85%;
	}

	.logo{
		width: 20%;
		left: 40%;
	}

	.titre{
		font-size: 5vw;
	}

	.map{
		width: 30%;
		top: -5.5%;
		right: -15%;
	}

	.text{
		padding: 0;
		border: 2px solid;
	}

	.imgText{
		display: block;
		margin-top: 0;
	}

	.dimension{
		width: 50%;
		height: 50%;
	}

	.imgG, .imgC, .imgR{
		float: initial;
		margin-top: 2%;
		margin-left: 30%;
	}

	.website, #plLVTperso{
		margin-top: 35%;
		margin-left: 22%;
		height: 5%;
		width: 55%;
	}

	.buttonWebsite{
		font-size: 3vw;
	}

	.home{
		font-size: 1.5vw;
	}

	.imgHome{
		height:3.5vw;
	}

	.pageSuivante{
		font-size: 1.5vw;
	}

	.pagePrecedente{
		font-size: 1.5vw;
	}

	#inconnu{
		font-size: 3.5vw;
	}

	.textImg{
		bottom:-100px;
	}

	.titre{
		margin-bottom: 2%;
	}
}


/*Format Paysage des téléphones*/
@media only screen and (min-device-width: 321px) and (max-device-width: 500px) and (orientation : landscape){
	.map{
		top: -12%;
	}

	.titre{
		margin-bottom: 2%;
	}
}