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

@font-face {
    font-family: 'Matrix'; /*a name to be used later*/
    src: url(fonts/Emigre-MatrixIIOT-Reg.otf); /*URL to font*/
	font-weight: 200;
	font-style: normal;
}

@font-face {
    font-family: 'Matrix'; /*a name to be used later*/
    src: url(fonts/Emigre-MatrixIIOT-ExtraBold.otf); /*URL to font*/
	font-weight: 600;
	font-style: bold;
}

@font-face {
    font-family: 'Proxima-Nova'; /*a name to be used later*/
    src: url(fonts/MarkSimonson-ProximaNovaA.otf); /*URL to font*/
	font-weight: 400;
	font-style: thin;
}

@font-face {
    font-family: 'Proxima-Nova'; /*a name to be used later*/
    src: url(fonts/MarkSimonson-ProximaNovaABold.otf); /*URL to font*/
	font-weight: 600;
	font-style: normal;
}

@font-face {
    font-family: 'Proxima-Nova'; /*a name to be used later*/
    src: url(fonts/MarkSimonson-ProximaNovaAExtrabold.otf); /*URL to font*/
	font-weight: 800;
	font-style: bold;
}


* {margin: 0; padding: 0;}

html {height: 100%;}

body {font-family: 'Proxima-Nova', sans-serif; background: url("images/bg-body.jpg") center center fixed no-repeat; background-size: cover;}

#container {text-align: center; width: 1000px; margin: 0 auto;}
#container-inner {position: relative;}

#logo img {width: 200px; margin: 100px 0;}

h1 {font-family: 'Matrix', 'Vollkorn', serif; color: #fdb825; font-size: 50px; margin-bottom: 40px;}
p {color: #fff; font-size: 20px; line-height: 1.4; padding: 0 20% 40px 20%;}


#liste-temps { font-size: 26px; font-weight: bold; margin-bottom: 60px; margin-top: 30px; border-top: 1px solid rgba(255,255,255,0.5);}
#liste-temps a {display: block; width: 100%; position: relative; padding: 20px 0; color: #fff; text-decoration:  none; background: url("images/fleche.png") right 20px center no-repeat; position: relative; overflow: hidden; text-align: left;}
#liste-temps a span {transform: translateY(-50%); top: 50%; left: 130px; padding-right: 50px; position: absolute;}
#liste-temps a:before {content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: rgba(255,255,255,0.5);}
#liste-temps a:hover { background-position: right 5px center;}
#liste-temps a:hover:before {height: 4px;  background-color: rgba(235,185,36,1);}

.lien-image {width: 80px; height: 80px; float: left; border-radius: 50%; overflow: hidden;}
.lien-image img {width: 100%; height: auto;}

#btn-bas { font-size: 16px; text-transform: uppercase; letter-spacing: 3px; color: #003728; font-weight: 200; background-color: #fdb825; display: inline-block; padding: 15px 20px; border-radius: 10px; text-decoration: none; margin-bottom: 60px;}
#btn-bas:hover {background-color: #003728; color: #fff;}


#menu-social {text-align: center; margin-bottom: 60px; position: relative;}
#menu-social a {display: inline-block; width: 50px; height: 50px; margin-right: 10px; border-radius: 50%; border: 1px solid #fdb825; position: relative;}
#menu-social a:last-child {margin-right: 0;}
#menu-social a i {color: #fdb825; position: absolute;  top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 20px;}
#menu-social a:hover {background-color: #fdb825;}
#menu-social a:hover i {color: #000;}


a, #liste-temps a:before, #menu-social a i {
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
-ms-transition: 0.3s;
transition: 0.3s;}


@media all and (max-width: 1200px) {
    #container {width: 90%; margin: 0 5%;}
    #logo img {width: 150px; margin: 40px 0;}
    h1 {font-size: 30px;}
    p {padding: 0 5% 50px 5%; font-size: 18px;}
    #liste-temps {font-size: 20px; margin-top: 0;}
    #liste-temps a {padding: 15px 0; font-size: 20px;}
    
    .lien-image {width: 60px; height: 60px;}
    #liste-temps a span {left: 90px;}
    
    #menu-social a {width: 40px; height: 40px;}
    #menu-social a i {font-size: 16px;}
}

@media all and (max-width: 640px) {
    #liste-temps a {font-size: 16px;}
}