/*
Theme Name: YAKA-CREA
Theme URI: http://underscores.me/
Author: Yaka Création
Author URI: https://yaka-creation.business.site
Description: Thème Yaka Création
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: yaka-crea
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

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.

YAKA-CREA is based on Underscores https://underscores.me/, (C) 2012-2017 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.
*/

/* CUSTOM */
	html, body {
		font-family: 'Open Sans', sans-serif !important;
		font-weight: 400 !important;
		background-color: #f5f5f5;
	}
	body.has-navbar-fixed-top, html.has-navbar-fixed-top {
		padding-top: 5rem !important;
	}
	a {
		outline: none;	
		-webkit-transition: all 0.25s linear 0s;
		-moz-transition: all 0.25s linear 0s;
		-ms-transition: all 0.25s linear 0s;
		-o-transition: all 0.25s linear 0s;
		transition: all 0.25s linear 0s;
	}
	#intro, #call-to-action {
	    padding: 3rem 1.5rem !important
	}
	.has-background-vert {
		background-color: #77b224 !important;
		color: #0c102c !important;
	}
	.has-background-marine {
		background-color: #0c102c !important;
		color: #fff !important;
	}
	.button.is-vert {
		background-color: #77b224;
		border-color:transparent;
		color: #fff;
	}
	.button.is-vert:hover, .button.is-vert.is-hovered {
	  background-color: #68a118 ;
	  border-color: transparent;
	  color: #fff;
	}

	.button.is-vert:focus, .button.is-vert.is-focused {
	  border-color: transparent;
	  color: #fff;
	}
	.button.is-marine {
		background-color: #0c102c;
		border-color:transparent;
		color: #fff;
	}
	.button.is-marine:hover, .button.is-marine.is-hovered {
	  background-color: #151B4D ;
	  border-color: transparent;
	  color: #fff;
	}

	.button.is-marine:focus, .button.is-marine.is-focused {
	  border-color: transparent;
	  color: #fff;
	}

	#realisations {
		border-top: solid 1px #eee;
		border-bottom: solid 1px #eee;
	}
	#intro, #call-to-action, #services {
		background: #0c102c;
		background: -moz-linear-gradient(45deg,  #0c102c 10%, #151B4D 50%, #0c102c 90%);
		background: -webkit-linear-gradient(45deg,  #0c102c 10%,#151B4D 50%,#0c102c 90%);
		background: linear-gradient(45deg,  #0c102c 10%,#151B4D 50%,#0c102c 90%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0c102c', endColorstr='#0c102c',GradientType=1 );
	}
	#presentation, #contact {
		background-size: contain;
		background-position: center bottom;
		background-repeat: no-repeat;
	}

/* SELECTED TEXTE */
	.section p::selection, .section p strong::selection, .section img::selection,
	.section h2::selection, .section h3::selection, .section label::selection {
	  background-color: #eee;
	  color: #0c102c;
	}
	/* Firefox */
	.section p::-moz-selection, .section p strong::-moz-selection, .section img::-moz-selection,
	.section h2::-moz-selection, .section h3::-moz-selection, .section label::-moz-selection {
	  background-color: #eee;
	  color: #0c102c;
	}
	.has-background-marine h1::selection, .has-background-marine h1 span::selection, .has-background-marine p::selection,
	.navbar-item::selection, .navbar-item img::selection {
	  background-color: #0c102c;
	  color: #fff;
	}
	/* Firefox */
	.has-background-marine h1::-moz-selection, .has-background-marine h1 span::selection, .has-background-marine p::selection
	.navbar-item::selection, .navbar-item img::selection {
	  background-color: #0c102c;
	  color: #fff;
	}

/* HERO */
	.hero {
		background:#77b224;
		background: -moz-linear-gradient(top,  rgba(119,178,36,1) 45%, rgba(65, 100, 18, 1) 90%);
		background: -webkit-linear-gradient(top,  rgba(119,178,36,1) 45%,rgba(65, 100, 18, 1) 90%);
		background: linear-gradient(to bottom,  rgba(119,178,36,1) 45%,rgba(65, 100, 18, 1) 90%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#77b224', endColorstr='#75b022',GradientType=0 );
		position: relative;
		overflow: hidden;
	}


	.parallax {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		background-size: contain;
		background-position: center bottom;
		background-repeat: no-repeat;
	}
	.hero.is-large .hero-body {
		padding: 1rem 1rem 11.5rem 1rem !important;
	}
	@media screen and (min-width: 769px) {
		.hero.is-large .hero-body {
			padding-bottom: 23rem !important;
			padding-top: 3rem !important;
		}
	}
	@media screen and (min-width: 1024px), print {
		.hero.is-large .hero-body {
			padding-bottom: 31rem !important;
			padding-top: 5rem !important;
		}
	}
	.hero p {
		font-family: 'Roboto Slab', serif;
		font-weight: 900 !important;
		text-transform: uppercase;
		letter-spacing: 0.05rem;
		line-height: 1
	}
	.hero p span {
		font-family: 'Open Sans', sans-serif;
		font-weight: 300 !important;
		text-transform: uppercase;
		letter-spacing: 0.065rem;
	}
	@media screen and (min-width: 769px) {
		.hero p {
			letter-spacing: 0.105rem;
		}
		.hero p span {
			letter-spacing: 0.082rem;
		}
	}
	@media screen and (min-width: 1024px), print {
		.hero p {
			letter-spacing: 0.105rem;
		}
		.hero p span {
			letter-spacing: 0.175rem;
		}
	}

/* TEXTE */
	.has-text-marine {
	  color: #0c102c !important;
	}
	.has-text-vert {
	  color: #77b224 !important;
	}
	h1, h2, h3, h4, p.title {
		font-family: 'Roboto Slab', serif;
		position: relative;
	}
	.section h2::after {
		content: "";
		display: block;
		border-bottom: 0.15rem solid #77b224;
		width: 4rem;
		margin: 0.5rem auto;
	}
	@media screen and (min-width: 769px) {
		.section h2::after {
			width: 6rem;
			border-bottom: 0.25rem solid #77b224;
		}
	}
	h1, h4 {
		font-weight: 900 !important;
		text-transform: uppercase;
		letter-spacing: 0.1rem;
	}
	h1 span, h4 span {
		font-family: 'Open Sans', sans-serif;
		font-weight: 300 !important;
		text-transform: uppercase;
	}
	h4 span {
		letter-spacing: 0.05rem;
	}
	@media screen and (min-width: 769px) {
		h4 span {
			letter-spacing: inherit;
		}
	}
	strong {
	    color: inherit !important;
	    font-weight: 600 !important;
	}
	#presentation p {
		font-weight: 300 !important;
	}
	#presentation p strong {
	    font-weight: 400 !important;
	}

/* NAVBAR */
	.navbar {
		min-height: 5rem !important;
		box-shadow: 0 6px 12px rgba(12,16,44,.33);
	}
	.navbar-brand, .navbar-tabs {
		min-height: 5rem !important;
	}
	.navbar-item img {
		max-height: 4rem !important;
	}
	.navbar-brand p {
		margin-left: 1rem;
	}
	.navbar .navbar-brand > .navbar-item,	.navbar .navbar-brand .navbar-link {
		color: #fff;
	}
	.navbar .navbar-end > .navbar-item, .navbar .navbar-end .navbar-link {
		color: #fff;
	}
	.navbar .navbar-end > a.navbar-item.is-active, .navbar .navbar-end .navbar-link.is-active,
	.navbar .navbar-end > a.navbar-item:hover, .navbar .navbar-end .navbar-link:hover,
	.navbar-link.is-active, .navbar-link:hover, a.navbar-item.is-active, a.navbar-item:hover {
		background-color: transparent !important;
		color: #77b224 !important;
	}
	.navbar-link:focus, .navbar-link:focus-within,
	a.navbar-item:focus, a.navbar-item:focus-within {
		background-color: transparent !important;
		color: #fff !important;
	}
	.navbar .navbar-end .navbar-link::after {
		border-color: #fff;
	}
	.navbar-end > .navbar-item, .navbar-end .navbar-link {
		padding: .5rem 2rem !important;
	}
	.navbar-menu {
		text-transform: uppercase;
		font-weight: 400;	   	   
	   padding: .5rem 0;
	}
	.navbar-burger {
		color: #FFF !important;
		height: 5rem !important;
		width: 5rem !important;
	}
	.navbar-burger span {
		background-color: #FFF !important;
	}

/* BACK TOP BT */
	#back-to-top{
		position: absolute;
		top: -1rem;
		left: calc(50% - 21px);
		padding: 0.5rem;
		background: #0c102c;
		color: #fff;
		border : solid 1px #FFF;
		/*display: none;*/
		transition: .5s;
		/*z-index: 1000;*/
	}
	 #back-to-top:focus, #back-to-top:hover {animation: totop 0.5s forwards;}
	@keyframes totop {
		0% {top: -1rem;}
		100% {top: -1.5rem;}
	} 

/* FOOTER */
	#colophon {
		position: relative;
	}
	.footer {
	    padding: 3rem 1.5rem !important;
	}
	.site-info a {
		color: #FFF;
	}

/* FORM */
	#contact_form textarea, #contact_form input {
	   width: 100%;
	}
	#contact_form textarea {
	   resize: vertical;
	}
	#contact_form input[type=submit] {
		width: auto;
	}
	.screen-reader-response {display: none;}
	.group {background-color: #f5f5f5!important;margin-bottom: .75rem;}
	#contact_form .wpcf7-response-output {
		padding: 1.25rem 2.5rem 1.25rem 1.5rem;
		margin: 0 0 1.5rem 0;
		border: none;
	}
	#contact_form .wpcf7-not-valid-tip {
		font-size: .75rem;
	}

/* SERVICES */
	
	.section.is-long {
	    padding-bottom: 16rem;
	}

	#services_content {
	    margin-top: -12rem;
	}

	#services_content .column {
	    margin-bottom: 4rem;
	    position: relative;
	}
	#services_content .column:last-child {
	    margin-bottom: 0;
	}
	@media screen and (min-width: 1024px) {	
		#services_content .column:nth-child(3), #services_content .column:nth-child(4) {
		    margin-bottom: 0;
		}
	}

	#services_content .column .box {
	    position: relative;
	    z-index: 20;
	}

	.services_icon {
		background: #0c102c;
		background: -moz-linear-gradient(45deg,  #0c102c 20%, #151B4D 100%);
		background: -webkit-linear-gradient(45deg,  #0c102c 20%,#151B4D 100%);
		background: linear-gradient(45deg,  #0c102c 20%,#151B4D 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0c102c', endColorstr='#0c102c',GradientType=1 );
		border-radius: 50%;
		padding: 1.5rem; 
		margin: -4.75rem 0 1rem 0;
		display: inline-block;
		border: solid 0.5rem #FFF;
	}
	.services_icon svg {width: 3rem; height: 3rem;display: block;}
	.services_icon_background {
		width: 7rem;
		height: 7rem;
		display: inline-block;
		background-color: white;
		z-index: 10;
		box-shadow: 0 .5em 1em -.125em rgba(10,10,10,.1),0 0 0 1px rgba(10,10,10,.02);
		border-radius: 50%;
		position: absolute;
		top: -2.75rem;
		left: calc(50% - 3.5rem);

	}


/* REALISATION */
	#realisations_slide {
		position: relative;
	}
	.realisation_slide {
		padding: 1rem 0 !important;
	}
	.realisations_box {
		position: relative;
		overflow: hidden;
		border: solid 1px #FFF;
		margin: 0 1rem;
		padding: 0 !important;
	}
	.realisations_box:hover {		
		box-shadow: 0 .5em 1em -.125em rgba(10,10,10,.33);
	}
	.realisations_box:hover .info {		
		opacity: 1;
	}
	.realisations_box .info {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 1.25rem;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: rgba(256, 256, 256, 0.9);
		opacity: 0;
		-webkit-transition: all 0.25s linear 0s;
		-moz-transition: all 0.25s linear 0s;
		-ms-transition: all 0.25s linear 0s;
		-o-transition: all 0.25s linear 0s;
		transition: all 0.25s linear 0s;
	}
	/*#realisations section:last-child .columns .column:last-child figure {
		background: rgb(119,178,36);
		background: -moz-linear-gradient(top,  rgba(119,178,36,1) 45%, rgba(65, 100, 18, 1) 90%);
		background: -webkit-linear-gradient(top,  rgba(119,178,36,1) 45%,rgba(65, 100, 18, 1) 90%);
		background: linear-gradient(to bottom,  rgba(119,178,36,1) 45%,rgba(65, 100, 18, 1) 90%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#77b224', endColorstr='#75b022',GradientType=0 );
	}*/
	.realisations_box .tag {
		background-color:#77b224;
		color:#FFF;
	}
	.swiper-button-next, .swiper-button-prev {
		background-image: none !important;
		color: #FFF;
		background-color: #0c102c;
		margin-top: -1.25rem !important;
		width: 2.5rem !important;
		height: 2.5rem !important;
		align-items: center;
		display: inline-flex;
		justify-content: center;
	}
	.swiper-button-prev {left: 0 !important;}
	.swiper-button-prev:hover {animation: prev 0.5s forwards;}
	.swiper-button-next {right: 0 !important;}
	.swiper-button-next:hover {animation: next 0.5s forwards;}
	@keyframes prev {
		0% {margin-left: 0;}
		100% {margin-left: -0.5rem;}
	}
	@keyframes next {
		0% {margin-right: 0;}
		100% {margin-right: -0.5rem;}
	}

/* CONTACT */
	#contact figure img {border:solid 0.125rem #77b224;}

/* MENTIONS */
	.message.is-marine .message-header {
	    background-color: #0c102c;
	    color: #fff;
	}
	.message.is-marine .message-body {
	    border-color: #0c102c;
	    color: #0c102c;
	}



	#space {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0.75;
	}