/* Polices
-------------------------------------------------------------------------------------------------------------------------------*/

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

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

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

/* Début du CSS
-------------------------------------------------------------------------------------------------------------------------------*/

/* TAILLE ORDINATEUR */
@media screen and (min-width: 1200px) {

	html{
		margin: 0;
		height: 100%;
		width:100%;
		overflow: hidden;
	}
	
	body{
		margin: 0;
		height: 100%;
		width:100%;
		min-width: 1000px;
		
		background-size: cover;
		background-position: center center;
	}

}

/* TAILLE TABLETTE */
@media screen and (max-width: 1200px) and (min-width: 480px) { 
	
	html{
		margin: 0;
		height: 100%;
		width:100%;
		overflow: hidden;
	}
	
	body{
		margin: 0;
		height: 100%;
		width:100%;
		background-size: cover;
		background-position: center center;
	}
	
}


/* TAILLE SMARTPHONE */
@media screen and (max-width: 480px) {
	html{
		margin: 0;
		height: 100%;
		width:100%;
		overflow: hidden;
	}
	
	body{
		margin: 0;
		height: 100%;
		width:100%;
		background-size: cover;
		background-position: center center;
	}

}



/* ---------- Arrières-plans ----------*/

#index{
	background-image: url('../images/soula.jpg');
}

#domaines{
	background-image: url('../images/humbrecht.jpg');
}

#degustations{
	background-image: url('../images/bouteilles.jpg');
}

/* ---------- Balises ----------*/




/* TAILLE ORDINATEUR */
@media screen and (min-width: 1200px) {

	h1,h2{
		color: white;
		font-family: 'manksans';
		font-weight: normal;
	}
	
	h1{
		text-align: center;
		font-size: 15vh;
		margin-top: 12%;
		margin-bottom: 3%;
	}
	
	h2{
	font-size: 80px;
	margin-top: 8%;
	margin-bottom: 1%;
	margin-left: 4%;
	}
	
	h4{
		color: white;
		font-family: 'sugarcubes';
		font-size: 16px;
		margin-bottom: 6%;
		margin-left: 4%;
		
	}
	
	a{
		text-decoration: none;
	}
	
	button{
		display: block;
		color: #984806;
		font-size: 2.3vh;
		line-height: 250%;
		background-color: transparent;
		border: none;
		font-family: 'sugarcubes';
		cursor: pointer;
	}
	
	button:hover{
		font-family: 'sugarcubesbd';
	}
	
	p{
		color: rgba(152,72,6,1);
		font-family: 'sugarcubes';
		font-size: 14px;
	}
	
	h3{
		color: rgba(152,72,6,1);
		font-family: 'manksans';
		font-weight: bold;
		font-size: 22px;
		margin-bottom: 0.5rem;
		margin-top: 3rem;
	}


}

/* TAILLE TABLETTE */
@media screen and (max-width: 1200px) and (min-width: 480px) {

	h1{
		text-align: center;
		font-size: 13vh;
		margin-top: 12%;
		margin-bottom: 3%;
	}
	
	h1,h2{
		color: white;
		font-family: 'manksans';
		font-weight: normal;
	}
	
	button{
		display: block;
		color: #984806;
		font-size: 3vh;
		line-height: 250%;
		background-color: transparent;
		border: none;
		font-family: 'sugarcubes';
		cursor: pointer;
		width:100%;
	}
	
	a{
		text-decoration: none;
	}
	
}


/* TAILLE SMARTPHONE */
@media screen and (max-width: 480px) {
	
	h1{
		text-align: center;
		font-size: 10vh;
		margin-top: 12%;
		margin-bottom: 3%;
	}
	
	h1,h2{
		color: white;
		font-family: 'manksans';
		font-weight: normal;
	}
	
	button{
		display: block;
		color: #984806;
		font-size: 3.5vh;
		padding:3%;
		background-color: transparent;
		border: none;
		font-family: 'sugarcubes';
		cursor: pointer;
	}
	
	a{
		text-decoration: none;
	}
	
}


/* ---------- Index ----------*/


/* TAILLE ORDINATEUR */
@media screen and (min-width: 1200px) {
	.btn-right{
		background-image: url('../images/button_right.png');
		background-position: left center;
	}
	
	.btn-left{
		background-image: url('../images/button_left.png');
		background-position: right center;
	}
	
	.btn-default{
		margin-top: 3%;
		width: 65%;
	}
	
	.btn-sm{
		margin-top: 0;
		width: 45%;
	}
	
	.right-default{
		position: relative;
		left: 35%;
	}
	
	.right-sm{
		position: relative;
		left: 55%;
		bottom: 50px;
	}
	
	
	
	#bandeau{
		background-color: rgba(255,255,255,0.7);
		color: #984806;
		font-size: 1.8vh;
		line-height: 300%;
		font-family: 'sugarcubes';
		padding-left: 1%;
	}

}

/* TAILLE TABLETTE */
@media screen and (max-width: 1200px) and (min-width: 480px) {

	#bandeau{
		background-color: rgba(255,255,255,0.7);
		color: #984806;
		font-size: 1.8vh;
		line-height: 300%;
		font-family: 'sugarcubes';
		padding-left: 1%;
		text-align:center;
	}
	
	.btn-right{
		background-image: url('../images/button_right.png');
		background-position: center;
	}
	
	.btn-left{
		background-image: url('../images/button_left.png');
		background-position: center;
	}
	
	.btn-default{
		margin-top: 3%;
		width: 100%;
	}

	.right-default{
		position: relative;
	}


}

/* TAILLE SMARTPHONE */
@media screen and (max-width: 480px) {
	
	#bandeau{
		background-color: rgba(255,255,255,0.7);
		color: #984806;
		font-family: 'sugarcubes';
		padding: 1%;
		text-align:center;
		font-size: 3.5vh;
		line-height: 110%;
	}
	
	.btn-right{
		background-image: url('../images/button_right.png');
		background-position: center;
	}
	
	.btn-left{
		background-image: url('../images/button_left.png');
		background-position: center;
	}
	
	.btn-default{
		margin-top: 3%;
		width: 100%;
	}

	.right-default{
		position: relative;
	}

	
	
	
}