/*
Theme Name: Child Theme using Twenty Seventeen -by Julien-
Theme URI: https://wordpress.org/themes/twentyseventeen/
Template: twentyseventeen
Author: Julien @SerialHikers
Author URI: https://www.serialhikers.com
Description: custom child style of Twenty Seventeen theme by Julien
Version: 2.5
*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;400;600&display=swap');

/** Gutemberg WIDE and FULL WIDTH support **/
.alignfull {width: 100vw; margin: 2rem calc(49.2% - 50vw)}
.alignwide {width: calc(100% + 18vw); position: relative; left: -9vw;}

/** style of titles **/
.h1, h2, h3, h4, h5 {font-family:"Montserrat",Sans-serif;}
/** style of links **/
.entry-content a {font-weight:600; color:#ab987a; box-shadow: none;	text-decoration:underline;}
.entry-summary a, 
.widget a, .widget a img {box-shadow: none;}
.site-footer .widget-area a, 
.site-info a {box-shadow:none;}
.posts-navigation a, 
.widget_authors a strong,
.entry-content a:hover, 
.entry-summary a:hover, 
.widget a:hover
, 
.site-footer .widget-area a:hover
	, 
.posts-navigation a:hover, 
.widget_authors a strong:hover {box-shadow: none;}
/** style of lists **/
ul {padding-left:25px;}

/** HEADER **/
.site-header {background-color:transparent !important;}
.site-branding {padding:0px !important;	background:none !important;}
body:not(.title-tagline-hidden) .site-branding-text {vertical-align:bottom !important;}
.site-description {color:#FFFF;	font-family:"Montserrat", Sans-serif; font-weight:200; text-shadow:1px 1px 1px rgba(0, 0, 0, 0.5)}
.site-title, .site-title a {color:#FFFF; font-family:"Montserrat", Sans-serif; font-size:35px; font-weight:600; text-transform:uppercase; text-shadow:2px 3px 1px rgba(0, 0, 0, 0.5)}
/** responsive **/
@media(max-width:768px) {.site-title, .site-title a {font-size:20px;}}
/** header & menu : make logo appears left to menu & sticky **/
.custom-header {position:absolute !important;}
.custom-logo-link img, body.home.title-tagline-hidden.has-header-image .custom-logo-link img, body.home.title-tagline-hidden.has-header-video .custom-logo-link img {position:fixed; top:5px; height:60px;}
/** menu main **/
.navigation-top {background: #f3f3f3b3 !important; border: 0 !important; z-index: 2 !important;	position: relative;}
@media screen and (min-width: 48em) {.navigation-top {padding-left: 15%}}
.navigation-top a {color:#333; font-family:"Montserrat", Sans-serif; font-weight:600; text-transform:uppercase;}
/** menu mobile **/
.menu-toggle {font-size:1.3rem;	margin-left: 60%;}

/** POSTS **/
/** put featured image below the header **/
.single-featured-image-header img {margin-top:-120px; width:100%;}
/** put title on featured image and its style **/
.single-post .entry-title {font-weight:400;	text-align:center; font-size:50px; margin-right:-50%; margin-top:-8em; color:#fff; text-shadow:#000 0px 5px 5px;}
.entry-header {margin-bottom:0.5em;}
/** responsive **/
@media(max-width:768px) {.single-post .entry-title {font-size:30px;	margin-right:0px; margin-top:-5em;}}
/** increase the width of the blog and articles and regular pages **/
.wrap {max-width: 95% !important;}
/*For Pages*/
.page.page-one-column:not(.twentyseventeen-front-page) #primary, .archive.page-one-column:not(.has-sidebar) .page-header, .archive.page-one-column:not(.has-sidebar) #primary
{max-width:90%;}
/*For Content*/
.has-sidebar:not(.error404) #primary {width: 65%}
/*For Sidebar*/
.has-sidebar #secondary {width: 30%}
/*Responsive*/
@media(max-width:768px) {
/*For Content*/
.has-sidebar:not(.error404) #primary {width: 100%}
/*For Sidebar*/
.has-sidebar #secondary {width: 100%}}
/*Remove author name*/
.byline {display:none !important}

/* GRID Layout for BLOG Custom CSS */
body.blog article, body.archive article {
width: 32.5%;
display: inline-block;
vertical-align: top;
text-align: left;
margin-bottom: 10px;
position: relative;
padding: 5px;
}
@media only screen and (max-device-width : 1024px) and (orientation : portrait) {
body.blog article, body.archive article {
width: 49%;}}
@media only screen and (max-width : 768px) {
body.blog article, body.archive article {
width: 49%;}}
@media only screen and (max-width : 580px) {
body.blog article, body.archive article {
width: 100%;}}

/** Container and iframe of WEBCAM page for example **/
.resp-container {position: relative; overflow: hidden; margin-top: -90px; padding-top: 56.25%;}
@media (max-width: 960px) {.resp-container {margin-top: -40px;}}
.resp-iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;}
.margin30 {margin:30px; padding:1 !important}

/** Containers and buttons of panneau lateral **/
.lateral-box {box-shadow: rgba(0, 0, 0, 0.5) 10px 10px 20px 0px; background-size: cover !important;	background-position: center center !important; background-repeat: no-repeat !important; background-color:#0003 !important; background-blend-mode:color !important; border-radius: 15px; width: 100%; height: 175px; margin: 10px;}
.lateral-button {text-align: center; width:100%; height:100%; color: #fff; border-radius: 15px; font-size: 24px; font-family: 'Montserrat', sans-serif; background: transparent; padding: 1px; text-shadow: #000000 0px 5px 5px;}
button:hover {background-color: rgba(171, 152, 122, 0.7) !important; transition: all 0.5s ease 0s;}

/** FOOTER **/
.site-footer {background-color:#333; vertical-align: middle !important;}
.site-footer .widget-area {padding-bottom: 0 !important; padding-top: 0 !important;}
/** Make it 1 full width area **/
.site-footer .widget-column.footer-widget-1 {width: 100% !important;}
/** footer menu **/
.footer-menu {color:#fff; margin:10px; text-align: center !important; font-size: 14px; font-family: 'Montserrat', sans-serif;}
/** links style **/
.shadow {position: absolute; width: 100%; height: 100%; box-shadow: inset 3px 3px 10px 0 #000000; border-radius: 20px; top: 0; left: 0;}
.widget {padding-bottom: 0 !important;}
/** Delete Powered by Wordpress **/
.site-info {display:none !important}

/** Center the name and site of testimonials elementor addon **/
.lae-author-credentials, .lae-author-name {text-align:center;}
/** Home Buttons custom CSS to make them smooth **/
#home-button:hover .elementor-column-wrap {padding:15px}
#home-button .elementor-column-wrap {transition: .3s}