@font-face {
    font-family: 'GothamBold';
    src: url('/fr/polices/Gotham/Gotham-Bold.ttf') format('truetype');
}@font-face {
    font-family: 'GothamMedium';
    src: url('/fr/polices/Gotham/Gotham-Medium.ttf') format('truetype');
}


img {max-width:100%;}
html, body{
  margin: 0;
  padding: 0;
  font-family: 'GothamBold', sans-serif;
  font-weight:300;
  text-align:center;
}


#content {
    background-color: #f8f8f8;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1;
}

#content h1 {
    font-family: 'GothamMedium', sans-serif;
    text-transform: uppercase;
    color: #345080;
}


a {text-decoration:none;}


/*************************************************************************************  LEFT *********************************************************************/


#left {
    width: 20%;
    background:#ffffff;
    position: relative;
    float: left;
    height: 100%;
}

.logo-left {
    max-width: 40%;
    margin: 0 auto;
    height: auto;
    margin: 35px 0;
}

.bas-page {
    position: absolute;
    bottom: 35px;
    left: 0;
    right: 0;
}

#left  hr {
    width: 40%;
    margin: 25px auto;
    color: #e0dedf;
    background-color: #e0dedf;
    display: block;
}

#social, #langues {
    display:flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
}

#partenaires {
    display:flex;
    flex-direction: row;
    justify-content: center;
}

#social > a , #langues > a {
    margin: 0 7.5px;
}

#social > a > img {
    width: 30px;
    height: 30px;
}

#langues > a > img {
    width: 50px;
    height: 50px;
}

#partenaires > a > img {
    max-width: 35%;
}





#right {
    width: 80%;
    background:#0c2d67;
    height:100%;
    position: relative;
    float: right;
}




#rangee-1 {
    width: 100%;
    height: 70%;
    display: flex;
    flex-direction: row;
}

#rangee-1 >a > .entrez {
    text-transform: uppercase;
    font-weight:bold;
    font-size: 30px;
    margin: 0;
    background: white;
    color: #345080;
    display: block;
    position: relative;
    font-family: 'Oswald' , sans-serif;
}



#rangee-2 {
    display: flex;
    flex-direction: row;
    width: 100%;
}

.bloc {
    position: relative;
    display: block;
}

.bloc p {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #ffffffa3;
    margin: 0;
    padding: 10px 0;
    font-family: 'Oswald' , sans-serif;
}




#colonne-2 {
    width: 75%;
    height: 100%;
    float: left;
}


#colonne-3 {
    width: CALC(25% - 2px);
    height: 100%;
    float: right;
    border-left: 2px solid #FFCF21;
}

.container-site {
    width: 100%;
    height: 85%;
    overflow: hidden;
    position: relative;
}

.table2 {
    width: 100%;
    height: 100%;
    display: table;
}



.background3 {
    background-repeat: no-repeat;
    background-size: 60%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1;
    background-position: center;
}

.container-billetterie {
    width: 100%;
    height: CALC(25% - 2px);
    overflow: hidden;
    position: relative;
}

.container-boutique {
    width: 100%;
    height: CALC(25% - 2px);
    overflow: hidden;
    position: relative;
}

.container-calendrier {
    width: 100%;
    height: CALC(25% - 2px);
    overflow: hidden;
    position: relative;
}

.container-partenaires {
    width: 100%;
    height: 25%;
    overflow: hidden;
    position: relative;
}

.container-sponsors {
    width: 100%;
    height: 15%;
    overflow: hidden;
    position: relative;
    display: flex;flex-direction: row;
}

.container-sponsors > a {
    width: 20%;
    height: 100%;
    overflow: hidden;
    position: relative;
}


.table-content {
    width: 100%;
    height: 100%;
    text-align: center;
    vertical-align: bottom;
    display: table-cell;
    z-index: 2;
    position: relative;
}



#colonne-3 h3 {
    color: white;
    position: relative;
    display: block;
    padding: 5px;
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    margin-bottom: 5px;
}

#colonne-3 > div.container-partenaires > div.table2 > div > strong {
    border: none;
}


#colonne-2 h2 {
    color: #0c2d67;
    position: relative;
    display: block;
    padding: 10px;
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    width: 250px;
    margin-left: auto;
    margin-right: auto;
    background: white;
    border-radius: 20px;
    box-shadow: 0 0 10px #00000052;
    transform: scale(1);
    transition: 0.4s all ease;
}

#colonne-2 .container-site:hover  h2{
    transform: scale(0.95);
    transition: 0.4s all ease;
}






#colonne-2 .table-content {
    border-bottom: 2px solid #fed639;
}

#colonne-3 > a > div{
    border-bottom: 2px solid #fed639;

}


#colonne-3 > a:last-child > div {
    border:none;
}




/************************************************ ANIMATION BACKGROUND ****************************************/
.background2 {
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1;
    background-position: center;
    transition: 0.2s all;
}

#colonne-2 .background2:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: -webkit-gradient(linear, left top, left bottom, from(to bottom), color-stop(0%, transparent), to(black));
    background: linear-gradient(to bottom, transparent 50%, #0c2d67 100%);
    transition: 0.2s all ease;
}

#colonne-3 .background2:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: -webkit-gradient(linear, left top, left bottom, from(to bottom), color-stop(0%, transparent), to(black));
    background: linear-gradient(180deg, transparent 0%, #1334786b 70%,  #133478 100%);
    filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr='transparent', endColorstr='#133478');
    background-image: -ms-linear-gradient(180deg, transparent 0%, #1334786b 70%,  #133478 100%);


}

#colonne-3 > a > .container-billetterie:hover .background2 {
    transform: scale(1.05);
    transition: 0.4s all ease;
}

#colonne-3 > a > .container-boutique:hover .background2 {
    transform: scale(1.05);
    transition: 0.4s all ease;
}

#colonne-3 > a > .container-calendrier:hover .background2 {
    transform: scale(1.05);
    transition: 0.4s all ease;
}

#colonne-3 > a > .container-partenaires:hover .background2 {
    transform: scale(1.05);
    transition: 0.4s all ease;
}













@media all and (max-width: 1024px){
	
	#left {
    width: 100%;
    height: auto;
	background: #0c377c;
	border-bottom: 2px solid #fed639;
	}
	
	.bas-page {
    display: none;
	}
	
	
	#right {
    width: 100%;
	}
	
	#colonne-2 {
    width: 100%;
	}
	
	#colonne-3 {
    width: 100%;
	}
	.container-sponsors {
    display: none;
	}
	
	.container-site {
    height: 100%;
	}
	
	#content h1, #left > h2 {
    color: #fff !important;
	}
	.logo-left {
    max-width: 28%;
    margin: 20px 0;
}
	
	
}