@charset "UTF-8";
/* CSS Document */

html{font-size: 62.5%;}
body, html{height:100%;}

body{
margin: 0 auto;
padding: 0;
overflow-x:hidden;
position: relative;
width:100%;
font-family: 'Urbanist', sans-serif;
background:#fff;
font-weight:400;
color:#242424;
font-weight:400;
letter-spacing:1.3px
}


.container{max-width:1280px;width:100%;display:block;margin:0 auto;position:relative}
.container.demi{max-width:700px;width:100%;padding:80px 60px;position:relative}
.bigPad{padding:80px}

img{max-width:100%;}

a[href^=tel]{color:inherit;text-decoration:none;}	
a{text-decoration:none;color:inherit;cursor:pointer}
a:focus{outline:0;}

hr{border:0;border-bottom:1px solid #ccc;margin:30px 0}


/* TEXT ALIGN */
.center{text-align:center;}
.left{text-align:left;}
.right{text-align:right;}
.justify{text-align:justify;}

.display{display:none;}
.show{display:block;}

.down{margin-bottom:30px;}
.up{margin-top:30px;}

.flt-left{float:left}
.flt-right{float:right}

.clear{clear:both;}

.uppercase{text-transform:uppercase}
.pad{padding:20px 0;}

/* COULEUR */
.blanc{color:#fff;}.bckblanc{background-color:#fff;}
.noir{color:#242424;}.bcknoir{background-color:#242424;}
.rouge{color:#d12027;}.bckrouge{background-color:#d12027;}
.gris{color:#666;}


/* TEXTE */
h1, h2, h3, h4, h5{margin:0;line-height:1.2;}
h1{font-size:80px;font-weight:800;text-transform:uppercase}
h2{font-size:50px;font-weight:800;}		
h3{font-size:36px;font-weight:400;}
h4{font-size:28px;font-weight:400}
h5{font-size:22px;font-weight:800}

.agagner p{font-size:18px;}

p, li{font-size:20px;line-height:1.5;margin:20px 0;font-weight:400}
p:first-child{margin-top:0px}


.sml p, p.sml{font-size:15px;}

strong{font-weight:800}
br{margin:0;display: block;height:10px;}

ul{margin:0}
ul li{vertical-align:top;margin:5px 0 5px 15px;list-style-type: disc;}





header{background:#fff;background-size:cover;padding:100px 0 50px;position:relative}
header .logo{max-width:1200px;padding:5% 0;background:#fff;margin:0 auto;display:block;}
header .cont{display:block;margin:40px auto}
.tag{position:absolute;right:0px;bottom:-150px;z-index:1;max-width:200px;-moz-transition: all 0.1s ease ;-webkit-transition: all 0.1s ease;transition: all 0.1s ease;}
.tag:hover{transform: scale(1.1);-webkit-transform: scale(1.1);-moz-transform: scale(1.1);}

.infosInscrip .container.demi{padding-top:400px}
.date{font-size:70px;font-weight:800}
.bloc{transform:translate(0,60px);position:absolute;display:block;width:100%;padding:0 40px}
.bloc .bckblanc{max-width:1200px;display:block;margin:0 auto;padding:40px 60px}
.bloc .big{font-size:40px;line-height:1.2;margin-bottom: 0;}


.video-wrapper {
	position: relative;
	padding-bottom: 56.25%;
	/* 16:9 Aspect Ratio */
	height: 0;
	overflow: hidden;
}

.responsive-iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.concours{background:url(../img/concours-fond.jpg) no-repeat fixed center top;background-size:cover;padding:100px 0 50px;position:relative}
.expo2018 .concours{background:url(../img/fond-euroccuccina.jpg) no-repeat fixed center top;background-size: cover;}
.concours h1{margin:0 0 -20px 40px;}
.concours .container{margin-top:300px}
.opacity{background:rgba(36,36,36,0.9);padding:80px}


.inscription{padding:60px 0}
.inscription h3{line-height:1.2;}
.inscription .container.demi{padding:40px 60px}
.inscription .bt{margin:20px 0;-moz-transition: all 0.1s ease ;-webkit-transition: all 0.1s ease;transition: all 0.1s ease;}
.inscription .bckrouge .bt:hover{color:#242424;}
.inscription .bckblanc .bt:hover{color:#d12027;}

.tb-commanditaires{color:#888;}
.verti {
-webkit-transform: rotate(-90deg);
   -moz-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	 -o-transform: rotate(-90deg);
		transform: rotate(-90deg);
text-align:center;
padding:40px 0
}

.verti p{color:#888;}
.tb-commanditaires tr:last-child{padding-top:30px}


footer{padding:60px 0}



/* MODAL */

.modal-content{width:80%;max-width: 800px;padding:60px;color:#001b2d;text-align: left;position:relative}
.modal-content .close{position:absolute;top:20px;right:30px;font-size:40px;cursor: pointer;}
.modal {display: none; /* Hidden by default */position: fixed; /* Stay in place */z-index: 99; /* Sit on top */padding-top: 150px; /* Location of the box */padding-bottom:80px;left: 0;top: 0;width: 100%; /* Full width */height: 100%; /* Full height */overflow: auto; /* Enable scroll if needed */background-color: rgb(0,0,0); /* Fallback color */background-color: rgba(0,0,0,0.7); /* Black w/ opacity */}

.modal-content {background-color: #fefefe;margin: auto;padding:75px 50px;width: 60%;max-width: 1000px;z-index:999!important;  }
button.close {color: #aaaaaa;float: right;background:none;font-size: 28px;font-weight: bold;}
button.close:hover,button.close:focus {color: #000;text-decoration: none;cursor: pointer;}

.okModal{min-width:200px;margin:25px auto 0;font-size:18px;display:block;padding:0}
.okModal a{padding:20px 25px;display:block}



@media only screen and (max-width: 1024px) {
	
header{padding:60px 0 30px}	
	
.container{padding:0 35px;}
.container.demi{padding:60px 35px}	

h1{font-size:55px;}
h2, .date{font-size:45px;}		
h3{font-size:30px;}
h4{font-size:24px;}
h5{font-size:20px;}

h3.agagner{font-size:20px;}

p, li{font-size:20px;}
.annotation{font-size:14px}

.expo2018 .concours{background:url(../img/fond-euroccuccina.jpg) no-repeat fixed right top;background-size: cover;}

.tag{right:-20px;bottom:-120px;max-width:150px}
.infosInscrip .container.demi{padding-top:340px}
.bloc .bckblanc{padding:30px 20px}
.bloc .big{font-size:30px}
	
	
.inscription {padding: 40px 10px}
.inscription .container.demi{padding:40px}

}
	
@media only screen and (max-width: 768px) {	

h1{font-size:40px;}
h2, .date{font-size:30px;}		
h3{font-size:24px;}
h4{font-size:20px;}
h5{font-size:16px;}

h3.agagner{font-size:16px;}

p, li{font-size:14px;}.sml p{font-size:12px;}
.annotation{font-size:10px}

.left, .right{text-align:center}

header{padding:40px 0 30px}	
.container{padding:0 35px;}
.container.demi{padding:60px 35px}	

.bloc{padding:0;position:relative;transform:none}
.bloc .bckblanc{padding:40px 30px}
.tag{bottom:-60px;max-width:120px}

.opacity{padding:40px}


.infosInscrip .container.demi {padding:40px 35px}

	
}