/*Theme Name: Le Répit de Notre Dame

Theme URI: http://www.webmaster-freelance.paris
Author: Benjamin Levaux
Author URI: http://www.webmaster-freelance.paris
Description: Le thème du Répit de Notre Dame

Version: 1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

*//* ------------------------------ RESET ------------------------------ */

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	vertical-align: baseline;
	outline:none;
	font-size:100%;
    box-sizing: border-box;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block;}
table {border-collapse: collapse;border-spacing: 0;}

/* ------------------------------ END RESET ------------------------------ */

@font-face {
  font-family: 'Tolyer';
  src:  url('fonts/Tolyer.ttf') format('truetype');
}
/* ------------------------------ GLOBAL ------------------------------ */

body {
    font-family: 'Rubik', sans-serif;
    font-optical-sizing: auto;
    font-weight: normal;
    font-style: normal;
    font-size:1rem;
	line-height:1.3;
	margin:0;
	max-width:100%;
	-webkit-text-size-adjust: none;
	position:relative;
    color:#567760; 
    background-color: #FEF8EA;
}
img {max-width:100%;height:auto;max-height:100%;width:auto;}
a img {border:0;}
.clear {clear:both;}
strong {font-weight:bold;}
a {color:#567760;}

.d_none {display: none;}

/* ------------------------------ CONTENT ------------------------------ */

.container {
    position: relative;
    width:1200px;
    margin:0 auto;
    padding:20px 15px;
    box-sizing: border-box;
    overflow-x: hidden;}

h1, h2, h3, legend, label {
    font-family: 'Tolyer';
    color: #567760 !important;
    font-weight: bold;
}
h2 {font-size: 2rem;	line-height:1.1;}

/* ------------------------------  FORM -----------------------------*/

h3, legend, label { font-size: 1.3rem !important;font-weight: normal;}

.wpforms-one-half label {  font-family: 'Rubik', sans-serif;font-size:1rem !important;}

.wpforms-submit {    background-color: #567760 !important;}


/* ------------------------------ HEADER ------------------------------ */

header {position: fixed;width:100%;z-index: 100;}

header, footer {
    background-color: #567760;
    color: #FEF8EA;
}

header a, footer a {
    color: #FEF8EA;text-decoration: none;
}

#logo img {width:180px;}

#social {position: fixed;top:20px;right:20px;}

header i {font-size: 1.5rem;margin:0 5px;}

#header {display: flex;justify-content: space-between;align-items: center;}

#sous_header {height:150px;}

nav {position: relative;}

nav ul {margin:0;padding:0;list-style-type: none;display: flex;}

nav li {margin:0 10px;}

nav  a {text-decoration: none;text-transform: uppercase;}

nav  a:hover, nav li.current-menu-item a {}

#open_menu {
    display: none;
    position: absolute;
    top:22px;right:20px;
    flex-direction: column;
    height: 40px;
    width:40px;
    justify-content:center;
    cursor: pointer;
}

.trait_haut {top: 0px;}
.trait_milieu {top: 8px;}
.trait_bas {top: 16px;}

.trait {
    width: 40px;
    height: 2px;
    background: #FEF8EA;
    transition: 0.4s ease all;
    position: absolute;
}
.incline_un {transform: rotate(45deg);top:12px;}
.incline_deux {transform: rotate(-45deg);top:12px;}

/* ------------------------------  FOOTER -----------------------------*/

footer {margin-top:50px;}

footer .container {padding:10px 15px;}

.credit {
    display: flex;
    align-items:center;
    justify-content:center;
}

.porte_par {text-transform: uppercase;margin:28px 10px 0 0;font-size: 0.8rem;}
.credit img {height:80px;}

.legal {text-align: center;font-size: 0.8rem;}



/* ------------------------------  RESPONSIVE -----------------------------*/

@media (max-width: 1200px) {
    .container {width:100%;}
}

@media(max-width:1024px) {

    #open_menu {display: flex;}
    #header {display: block;}
    
    #sous_header {height:90px;}
    
    header .container {padding:10px 15px;}
    
    #logo img {width:100px;}

    nav {display: none;margin:0 0 0 50px;}
    
    nav ul {margin:20px 0;padding:0;list-style-type: none;display: block;}

    nav li {margin:20px 0;}
    
    #social {position: relative;right:0;top:0;}
    
    #social i {margin:0 20px 0 0;font-size: 2rem;}

}