/*
Theme Name: Fonds
Theme URI:
Description: Custom wordpress theme
Author: Dominic Quévillon
Author URI:
Text Domain: fonds
Version: 1.0
*/
html, body {height: 100%; width: 100%; -webkit-overflow-scrolling: touch;}
body {margin: 0; padding: 0; clear: both; color: #676C66; background: #FFFFFF; font-family: 'Roboto', sans-serif; font-size: 18px; line-height: 1.7rem; font-weight: 300; display: flex; flex-direction: column;}
h2 {font-size: 36px; font-weight: 700; line-height: 1.4em;}
h3 {font-size: 33px; font-weight: 700; line-height: 1.4em;}
h4 {font-size: 30px; font-weight: 700; line-height: 1.4em;}
h5 {font-size: 27px; font-weight: 700; line-height: 1.4em;}
h6 {font-size: 24px; font-weight: 700; line-height: 1.4em;}
p {padding: 0; color: #676C66;}
p:empty {display: none;}
p:last-of-type {margin-bottom: 0;}
p a, ul li a, ol li a {color: #0075A9;}
ul {margin: 0; padding: 0; list-style-position: outside;}
ul li {margin: 0; padding: 0; list-style: disc;}
a {text-decoration: underline;}
a:link, a:visited {text-decoration: none;}
::placeholder {color: rgba(0, 117, 169, 0.75);}
:-webkit-input-placeholder {color: rgba(0, 117, 169, 0.75);}
::-moz-placeholder {color: rgba(0, 117, 169, 0.75);}
:-ms-input-placeholder {color: rgba(0, 117, 169, 0.75);}
::selection {background-color: rgba(0, 117, 169, 0.75); color: #FFFFFF;}
.clr, .spacer {clear: both; margin: 0; padding: 0;}
.spacer-10 {height: 10px; clear: both; margin: 0; padding: 0;}
.spacer-20 {height: 20px; clear: both; margin: 0; padding: 0;}
.spacer-30 {height: 30px; clear: both; margin: 0; padding: 0;}
.alignleft {float: left; margin: 18px 21px 21px 0;}
.alignright {float: right; margin: 18px 0 21px 21px;}
.aligncenter {float: none; margin: 21px auto; display: block;}
.default-btn {border: 1px solid #0075A9; color: #0075A9; border-radius: 50em; -webkit-border-radius: 50em; padding: 6px 21px; text-transform: uppercase; display: inline-block; font-size: 14px;}
.default-btn:hover {color: #FFFFFF; background-color: #0075A9;}
.default-colored-btn {border: 1px solid #FFFFFF; color: #FFFFFF; border-radius: 50em; -webkit-border-radius: 50em; padding: 6px 21px; text-transform: uppercase; display: inline-block; font-size: 14px;}
.default-colored-btn:hover {color: #0075A9; background-color: #FFFFFF;}
/* Header */
.hamburger, .slidemenu {display: none;}
.admin-bar .header {margin-top: 32px;}
.header {background: rgba(255, 255, 255, 0.80); padding: 30px 0 0; box-shadow: 0 5px 7px 0 rgba(0,0,0,0.04);}
.header-top .logo img {max-width: 530px;}
.header-top ul.smedia li {margin-right: 9px; float: left; list-style: none;}
.header-top ul.smedia li.facebook {background: url("img/icon-facebook-blue.svg") no-repeat left bottom; background-size: 8px !important;}
.header-top ul.smedia li.facebook:hover {background: url("img/icon-facebook-hover.svg") no-repeat left bottom;}
.header-top ul.smedia li.linkedin {background: url("img/icon-linkedin-blue.svg") no-repeat left bottom; background-size: 15px !important;}
.header-top ul.smedia li.linkedin:hover {background: url("img/icon-linkedin-hover.svg") no-repeat left bottom;}
.header-top ul.smedia li.instagram {background: url("img/icon-instagram-blue.svg") no-repeat left bottom; background-size: 14px !important;}
.header-top ul.smedia li.instagram:hover {background: url("img/icon-instagram-hover.svg") no-repeat left bottom;}
.header-top ul.smedia li.youtube {background: url("img/icon-youtube-blue.svg") no-repeat left bottom; background-size: 17px !important;}
.header-top ul.smedia li.youtube:hover {background: url("img/icon-youtube-hover.svg") no-repeat left bottom;}
.header-top ul.smedia li a {width: 18px; height: 18px; display: block;}
.header-bottom .navigation ul {display: flex; justify-content: flex-end;}
.header-bottom .navigation ul li {font-size: 12px; font-weight: 600; color: #0075A9; text-transform: uppercase; list-style: none; margin-left: 1px;}
.header-bottom .navigation ul li a {color: #0075A9; padding: 12px 18px 21px; display: inline-block; text-align: center; height: 100%; font-size:14px;}
.header-bottom .navigation ul li:nth-child(4) a:after {content: 'Grâce Au Fonds'; display: block; line-height: 0.8em; text-transform: uppercase;}
.header-bottom .navigation ul li:hover a, .header-bottom .navigation ul li.current-menu-item a {color: #0075A9; background: rgba(0, 117, 169, 0.1); border-top-right-radius: 9px; border-top-left-radius: 9px;}
/* Banner */
.banner {padding: 210px 0 0; background-position: center center; background-size: cover;}
.banner .container {display: flex; align-items: flex-end; justify-content: center;}
.banner h1 {font-family: 'Roboto Condensed', sans-serif; text-transform: uppercase; font-size: 118px; color: #FFFFFF; font-weight: 700; margin: 0 0 -7px 0; line-height: 0.9em; text-align: center;}
/* Default Text Block */
body.home .text-block {margin: 95px 0;}
.text-block {margin: 60px 0;}
.text-block h2 {font-family: 'Roboto Condensed', sans-serif; font-size: 50px; color: #0075A9; line-height: 1em; margin-bottom: 30px;}
.text-block .location {margin-bottom: 30px; display: inline-block; text-align: center;}
.text-block .location h3 {font-family: 'Roboto Condensed', sans-serif; font-size: 30px; font-weight: 400; color: #0075A9; line-height: 2em; background: url('img/icon-pointer.svg') no-repeat left center; background-size: 39px; padding-left: 60px; text-transform: uppercase}
.text-block ul {margin: 1rem 0;}
.text-block ul li {color: #676C66; list-style: none; position: relative; padding-left: 24px; margin: 2px 0;}
.text-block ul li a {color: #0075A9; font-weight: 500;}
.text-block ul li:before {width: 11px; height: 11px; content: ''; background: url(img/icon-plus.svg) no-repeat; background-size: 11px; position: absolute; top: 7px; left: 0;}
.text-block ul li ul {margin: 5px 0 0;}
.text-block ul li ul li:before {width: 7px; height: 7px; background: url(img/icon-circle.svg) no-repeat; background-size: 7px; top: 10px; left: 0;}
.text-block p {display: inline-block; width: 100%;}
.text-block p a {color: #0075A9; font-weight: 500;}
/* Colored Block */
body.home .colored-block{padding: 95px 0;}
.colored-block {padding: 60px 0; background: #0075A9;}
.colored-block h2 {font-family: 'Roboto Condensed', sans-serif; font-size: 45px; font-weight: 700; color: #FFFFFF; line-height: 1.2em; margin-bottom: 30px;}
.colored-block ol {margin: 1rem 0; counter-reset: ol-counter;}
.colored-block ol li {color: #FFFFFF; list-style: none; position: relative; padding-left: 60px; margin: 18px 0;}
.colored-block ol li:before {width: 36px; height: 36px; counter-increment: ol-counter; content: counter(ol-counter); position: absolute; top: -5px; left: 0; border-radius: 50%; border: 2px solid #FFFFFF; font-size: 24px; font-weight: 500; display: flex; justify-content: center; align-items: center;}
.colored-block ol li a {color: #FFFFFF; font-weight: 500;}
.colored-block p {color: #FFFFFF; display: inline-block; width: 100%;}
.colored-block p a {color: #FFFFFF; font-weight: 500;}
/* Form Block */
.form-block {margin: 75px 0;}
.form-block h2 {font-family: 'Roboto Condensed', sans-serif; font-size: 45px; font-weight: 700; color: #0075A9; line-height: 1em; margin-bottom: 30px;}
.form-block p {display: inline-block; width: 100%;}
.form-block p:last-of-type {margin-bottom: 30px;}
.form-block p a {color: #0075A9; font-weight: 500;}
.form-block .con-input {background: #F1F1F1; border-radius: 50em; border: none; color: #0075A9; font-weight: 500; font-size: 14px; padding: 7px 24px; margin-bottom: 15px; width: 100%;}
.form-block .con-textarea {background: #F1F1F1; border-radius: 15px; border: none; color: #0075A9; font-weight: 500; font-size: 14px; height: 120px; padding: 12px 24px; margin-bottom: 30px; width: 100%;}
.form-block .con-input[aria-invalid="true"], .form-block .con-textarea[aria-invalid="true"] {margin-bottom: 0;}
.form-block .con-submit {border: 1px solid #0075A9; color: #0075A9; border-radius: 50em; -webkit-border-radius: 50em; padding: 6px 21px; text-transform: uppercase; display: inline-block; font-size: 14px; background: #FFFFFF; float: right;}
.form-block .con-submit:hover {color: #FFFFFF; background-color: #0075A9;}
.form-block .con-input:focus, .form-block .con-textarea:focus, .form-block .con-submit:focus {outline: none;}
.wpcf7-not-valid-tip {font-size: 15px; text-align: right;}
.slider-block .owl-nav {position: absolute; top: calc(50% - 16px); left: 24px; right: 24px; display: flex; align-items: center; justify-content: space-between; max-width: 1140px; margin: 0 auto;}
.slider-block .owl-nav button:focus {outline: none;}
.slider-block .owl-nav .prev-slide {background: url("img/icon-arrow-left.svg") no-repeat; background-size: 20px 36px; width: 20px; height: 36px;}
.slider-block .owl-nav .next-slide {background: url("img/icon-arrow-right.svg") no-repeat; background-size: 20px 36px; width: 20px; height: 36px; margin-left: 12px;}
/* Project Block */
.project-block {margin: 75px 0;}
.project-block h2 {font-family: 'Roboto Condensed', sans-serif; font-size: 45px; font-weight: 700; color: #0075A9; line-height: 1.2em; margin-bottom: 30px;}
.project-block p a {color: #0075A9; font-weight: 500;}
.projects-loop .row>[class*=col] {margin-bottom: 45px;}
.projects {margin-top: 30px;}
.projects .row>[class*=col] {padding: 0 24px;}
.projects-loop {margin: 0;}
.projects .post {border-bottom-left-radius: 9px; border-bottom-right-radius: 9px; box-shadow: 9px 9px 18px 2px rgba(0,0,0,0.06); margin-bottom: 24px;}
.projects .post-details {padding: 15px 12px;}
.projects .post-details h3 {font-size: 14px; font-weight: 500; margin: 0;}
.projects .post-details h3 a {color: #0075A9;}
/* Contact Block */
.contact_block {margin: 75px 0;}
.contact_block h3 {font-family: 'Roboto Condensed', sans-serif; font-size: 24px; font-weight: 700; color: #0075A9; line-height: 1.2em; margin-bottom: 21px;}
.admin-contact-info {margin-top: 75px;}
.admin-contact-info h6 {font-size: 17px; color: #0075A9; margin-bottom: 9px;}
/* Footer */
.footer-top {background: #A6995F; padding: 45px 0 30px;}
.footer-top h4 {font-size: 18px; color: #FFFFFF; font-weight: 400;}
.footer-top ul.menu {margin: 0; padding: 0;}
.footer-top ul.menu li {font-size: 14px; list-style: none; text-transform: uppercase; margin-bottom: 2px;}
.footer-top ul.menu li:nth-child(4) {margin-bottom: 10px;}
.footer-top ul.menu li a {color: #FFFFFF;}
.footer-top ul.menu li:hover a {text-decoration: underline;}
.footer-top ul.menu li:nth-child(4) a:after {content: 'Grâce Au Fonds'; display: block; line-height: 0.8em; text-transform: uppercase;}
.footer-top ul.contact-info {list-style: none;}
.footer-top ul.contact-info li {padding-left: 27px; text-transform: none !important; font-size: 14px; list-style: none; margin-bottom: 2px;}
.footer-top ul.contact-info li a {color: #FFFFFF;}
.footer-top ul.contact-info li.email {background: url("img/icon-email.svg") no-repeat left center; background-size: 16px !important;}
.footer-top ul.contact-info li.phone {background: url("img/icon-phone.svg") no-repeat left center; background-size: 15px !important;}
.footer-top ul.smedia {margin-top: 9px !important;}
.slidemenu ul.smedia {margin-top: 21px !important;}
.footer-top ul.smedia li, .slidemenu ul.smedia li {margin-right: 5px; float: left; list-style: none;}
.footer-top ul.smedia li.facebook, .slidemenu ul.smedia li.facebook {background: url("img/icon-facebook.svg") no-repeat left bottom; background-size: 8px !important;}
.footer-top ul.smedia li.linkedin, .slidemenu ul.smedia li.linkedin {background: url("img/icon-linkedin.svg") no-repeat left bottom; background-size: 15px !important;}
.footer-top ul.smedia li.instagram, .slidemenu ul.smedia li.instagram {background: url("img/icon-instagram.svg") no-repeat left bottom; background-size: 14px !important;}
.footer-top ul.smedia li.youtube, .slidemenu ul.smedia li.youtube {background: url("img/icon-youtube.svg") no-repeat left bottom; background-size: 17px !important;}
.footer-top ul.smedia li a, .slidemenu ul.smedia li a {width: 18px; height: 18px; display: block;}
.footer-down {background: #0075A9; padding: 12px 0;}
.footer-down p {font-size: 14px; color: #FFFFFF;}
/* Media Query */
@media (max-width : 991px) {
.hamburger {cursor: pointer; display: block; z-index: 100; margin-left: 15px;}
.hamburger .line {width: 30px; height: 2px; margin-bottom: 7px; background: #000000; border-radius: 30px; transition: transform 0.15s ease-out; -webkit-transition: transform 0.15s ease-out;}
.hamburger .line:last-child {margin-bottom: 0; transition: transform 0.15s ease-out; -webkit-transition: transform 0.15s ease-out;}
.hamburger:hover .line {-webkit-transform: scale(1.15); transform: scale(1.15);}
.hamburger-close {position: absolute; right: 15px; margin: 0; padding: 0; cursor: pointer; top: -30px;}
.hamburger-close img {width: 24px; transition: transform 0.15s ease-out; -webkit-transition: transform 0.15s ease-out;}
.hamburger-close:hover img {-webkit-transform: scale(1.15); transform: scale(1.15);}
.slidemenu {display: flex; width: 100%; height: 100%; background: #0075A9; position: fixed; top: 0; right: -100%; transition: right 0.3s; -webkit-transition: right 0.3s; overflow-y: auto; padding: 45px 0; z-index: 10000;}
.admin-bar .slidemenu {padding-top: 90px;}
.slidemenu--open {right: 0;}
.slidemenu .row {width: calc(100% + 30px);}
.slidemenu .menu-main-menu-container {width: 100%;}
.slidemenu .mobile-menu {width: 100%;}
.slidemenu .mobile-menu ul.sub-menu {margin: 9px 0 15px 12px;}
.slidemenu .mobile-menu li {list-style: none; margin-bottom: 5px; text-transform: uppercase;}
.slidemenu .mobile-menu li a {font-size: 14px; font-weight: 500; color: #FFFFFF;}
.slidemenu .mobile-menu li a:hover {color: #EEEEEE; text-decoration: underline;}
.header {padding: 15px 0;}
.header-top .logo img {max-width: 100%;}
.banner h1 {font-size: 75px;}
.text-block h2, .colored-block h2, .project-block h2 {font-size: 36px;}
.contact_block h3, .text-block .location h3 {font-size: 21px;}
.projects .row>[class*=col] {padding: 0 15px;}
.banner h1{
margin: 0 0 -5px 0;
}
.text-block .location h3{
background-size: auto;
}
}
@media (max-width : 782px) {
.admin-bar .header {margin-top: 46px;}
}
@media (max-width : 767px) {
.banner {min-height: auto !important;}
.banner h1 {font-size: 45px;}
.text-block h2, .colored-block h2, .project-block h2 {font-size: 27px;}
.contact_block h3, .text-block .location h3 {font-size: 19px;}
.projects .row>[class*=col] {margin-bottom: 30px;}
.alignleft, .alignright {float: none; margin: 30px auto; display: block;}
}
.grid-item{
float: left;
width: 32%;
}