/* Theme Name:   Ramos Theme
Theme URI:    https://guilhemdelachapelle.com 
Description:  Description de mon thème enfant 
Author:       Guilhem
Author URI:   https://guilhemdelachapelle.com 
Template:     hello-elementor  
Version:      0.1.0 */

body {
	--dark-green: #2D3328;
	--medium-green: #545D4E;
	--medium-brown: #CEC4A5;
	--light-brown: #F2EEE2;
	--grey: #707070;
	--white: #FFFBF0;
	--serif: "EB Garamond", serif;
	--sans-serif: "Montserrat", sans-serif;
	overflow-x: hidden;
}

body h1, body h2, body h3 {
	font-family: var(--serif);
	color: var(--dark-green);
	text-wrap: balance;
}

body h2 {
	font-size: 2em;
	line-height: 1.5em;
	margin-top: .5em;
	margin-bottom: 1em;
}

body h3 {
	font-size: 2em;
	line-height: 1.5em;
	margin-top: .5em;
	margin-bottom: 1em;
}

body p {
	font-family: var(--sans-serif)!important;
	color: var(--dark-green);
	line-height: 1.5em;
	text-wrap: pretty;
}

body span {
	font-family: var(--serif)!important;
	text-wrap: balance;
}

ul li {
	font-family: var(--sans-serif);
	color: var(--dark-green);
	margin-bottom: 1.5em;
}

a {
	color: var(--medium-green);
	-webkit-transition: color 0.3s ease;
	-moz-transition: color 0.3s ease;
	-o-transition: color 0.3s ease;
	transition: color 0.3s ease;
}

a:hover {
	color: var(--medium-brown);
}

body button {
	background-color: var(--dark-green);
	font-size: 18px;
	border: 0px;
	padding: 1em 4em 1em 4em;
	margin-top: 1em;
	color: var(--white);
	font-family: var(--serif);
	white-space: normal;
	-webkit-transition: background-color 0.3s ease;
	-moz-transition: background-color 0.3s ease;
	-o-transition: background-color 0.3s ease;
	transition: background-color 0.3s ease;
	cursor: pointer;
}

body button:hover {
	background-color: var(--medium-green)!important;
}
body button:focus {
	background-color: var(--medium-green)!important;
}

.button-medium-brown {
	background-color: var(--medium-brown);
	color: var(--dark-green);
	border: 0px;
	padding: 1em 4em 1em 4em;
}

.surtitre {
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: 4px;
	margin-block-end: 0px;
}

[class*="-gros-titre"] {
	font-family: var(--serif);
	font-size: 100px;
	text-transform: uppercase;
	font-style: italic;
	letter-spacing: 20px;
	opacity: .3;
	line-break: anywhere;
}

@media (max-width: 1050px) {
	[class*="-gros-titre"] {
		display: none;
	}
}


/* Animation Principale */

/* État initial caché pour les éléments animés en .from() */
.header-container,
.custom-logo-link,
.menu-principal-container,
.hero-h1,
.hero-h2,
.hero-args,
.hero-button {
	opacity: 0;
	visibility: hidden;
}

/* Le conteneur du logo de chargement doit rester visible au début */
.hero-logo-container {
	opacity: 1;
	visibility: visible;
}

/* Hero Section */

.hero-section {
	width: 100vw;
	min-height: 100vh;
	position: relative;
	display: flex;
	display: -webkit-flex; /* Safari */
	display: -ms-flexbox; /* IE10 */
	justify-content: center;
	-webkit-justify-content: center;
	align-items: center;
	-webkit-align-items: center;
	flex-direction: column;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	padding-top: 10em;
	padding-bottom: 5em;
}

.hero-home-video {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: -2;
	object-fit: cover;
	-o-object-fit: cover;
}

.hero-transparent-container {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, .6);
	z-index: -1;
}

.hero-logo-container {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 600px;
	max-width: 90%;
}

.hero-content-container {
	text-align: center;
	width: 60%;
	display: flex;
	display: -webkit-flex;
	flex-direction: column;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	align-items: center;
	-webkit-align-items: center;
}

.hero-content-container button {
	font-size: 20px;
}

.hero-content-container ul {
	list-style-type: none;
	padding-inline-start: 0px;
	display: flex;
	display: -webkit-flex;
	flex-direction: column;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	align-items: center;
	-webkit-align-items: center;
}

.hero-content-container ul li {
	display: flex;
	display: -webkit-flex;
	align-items: center;
	-webkit-align-items: center;
}

.hero-content-container ul li::before {
	content: ' ';
	background-image: url("https://ramos-avocat.com/wp-content/themes/alexandre-ramos-theme/src/img/coche-ramos.png");
	width: 15px;
	height: 15px;
	display: block;
	background-size: contain;
	margin-right: 1em;
}

.hero-sub-arg-container {
	width: 100%;
	background-color: var(--medium-green);
	height: 200px;
	display: flex;
	display: -webkit-flex;
	flex-direction: row;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	justify-content: space-between;
	-webkit-justify-content: space-between;
	align-items: center;
	-webkit-align-items: center;
	color: var(--light-brown);
}

.hero-sub-arg-container > :first-child {
	border-right: 1px solid var(--light-brown);
}
.hero-sub-arg-container > :last-child {
	border-left: 1px solid var(--light-brown);
}

.hero-sub-arg-content-container {
	display: flex;
	display: -webkit-flex;
	flex-direction: column;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	width: 33%;
	height: 100%;
	justify-content: center;
	-webkit-justify-content: center;
	align-items: center;
	-webkit-align-items: center;
}

.sub-arg-title {
	font-size: 40px;
}

@media (max-width: 900px) {
	.hero-sub-arg-container {
		flex-direction: column;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		height: fit-content;
	}
	.hero-sub-arg-content-container {
		width: 100%;
		padding-bottom: 1em;
		padding-top: 1em;
	}
	.hero-sub-arg-container > :first-child {
		border-right: 0px;
		border-top: 1px solid var(--light-brown);
	}
}

@media (max-width: 800px) {
	.hero-content-container {
		width: 90%;
	}
}

/* Section 2 */

.section-2 {
	width: 100vw;
	min-height: 100vh;
	position: relative;
	display: flex;
	display: -webkit-flex;
}

.section-2-left-container {
	width: 50%;
	min-height: 100vh;
	background-color: var(--dark-green);
	padding: 5em;
	display: flex;
	display: -webkit-flex;
	flex-direction: column;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	justify-content: center;
	-webkit-justify-content: center;
}

.section-2-left-container p {
	padding-right: 2em;
}

.section-2-left-container h2, .section-2-left-container h3, .section-2-left-container p {
	color: var(--medium-brown);
}

.section-2-right-container {
	width: 50%;
	min-height: 100vh;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}


@media (max-width: 1050px) {
	.section-2 {
		flex-direction: column;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
	}
	.section-2-right-container, .section-2-left-container {
		width: 100%;
	}
	.section-2-left-container {
		padding: 1em;
	}
	.section-2-right-container {
		order: 3;
	}
}

/* Liste Services */

/* Intro Service */

.section-intro-services {
	background-color: var(--light-brown);
	padding: 5em;
	display: flex;
	display: -webkit-flex;
	flex-direction: column;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	align-items: center;
	-webkit-align-items: center;
}

.intro-service-title-container {
	width: 90%;
	margin-bottom: 5em;
}
.intro-service-content-container {
	width: 80%;
}


/* Service sommaire */


.liste-services-container {
	width: 90%;
	height: 600px;
	background-color: var(--medium-green);
	border: 5px solid var(--dark-green);
	display: flex;
	display: -webkit-flex;
	justify-content: space-between;
	-webkit-justify-content: space-between;
	padding: 1em;
}

.service-sommaire-item {
	width: 15%;
	height: 100%;
	background-size: cover;
	background-position: center;
	position: relative;
	border: 5px solid var(--dark-green);
	/* Prefixes transitions */
	-webkit-transition: 1s;
	-moz-transition: 1s;
	-o-transition: 1s;
	transition: 1s;
}

.service-sommaire-item:hover {
	width: 28%;
	-webkit-transition: .5s!important;
	-moz-transition: .5s!important;
	-o-transition: .5s!important;
	transition: .5s!important;
}

.service-sommaire-item-opacity {
	width: 100%;
	height: 100%;
	position: absolute;
	background-color: rgba(0, 0, 0, .5);
	top: 0px;
	left: 0px;
}

.service-sommaire-item h3 {
	z-index: 2;
	position: absolute;
	color: var(--light-brown);
	bottom: 10px;
	width: 200px;
	/* Prefixes Writing Mode */
	-webkit-writing-mode: vertical-lr;
	-ms-writing-mode: tb-lr;
	writing-mode: vertical-lr;
	font-size: 2.5em;
}

@media (max-width: 1350px) {
	.section-intro-services {
		padding: 2em;
	}
	.intro-service-content-container {
		width: 100%;
	}
	.intro-service-content-container {
		width: 100%;
	}
	.liste-services-container {
		width: 100%;
	}
}


@media (max-width: 1050px) {

	.liste-services-container {
		flex-direction: column;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		height: fit-content;
	}
	.service-sommaire-item {
		width: 100%;
		height: 300px;
		margin-bottom: 2em;
		display: flex;
		display: -webkit-flex;
		align-items: flex-end;
		-webkit-align-items: flex-end;
		padding-left: 1em;
	}
	.service-sommaire-item h3 {
		-webkit-writing-mode: unset;
		-ms-writing-mode: unset;
		writing-mode: unset;
		width: auto;
		left: 0px;
		bottom: 0px;
		position: relative;
		z-index: 2;
	}
	.service-sommaire-item:hover {
		width: auto;
	}
}

@media (max-width: 550px) {
	.section-intro-services {
		padding: 0px;
		padding-top: 2em;
	}
	.liste-services-container {
		padding: 1em;
	}
	.service-sommaire-item {
		padding-left: 1em;
		padding-bottom: 1em;
		padding-right: 1em;
		text-align: center;
		justify-content: center;
		-webkit-justify-content: center;
	}
}

/* Service Container */
.service-main-container {
	display: flex;
	display: -webkit-flex;
	padding-top: 3em;
}

.liste-services-section > :nth-child(even) {
	flex-direction: row-reverse;
	-webkit-flex-direction: row-reverse;
	-ms-flex-direction: row-reverse;
}

.service-left-container {
	width: 50%;
	padding: 5em;
}

.service-right-container {
	width: 50%;
	display: flex;
	display: -webkit-flex;
	align-items: center;
	-webkit-align-items: center;
	justify-content: center;
	-webkit-justify-content: center;
	position: relative;
}

.barre-superieure {
	width: 30%;
	height: 1px;
	background-color:  var(--dark-green);
	margin-bottom: 2em;
}
.service-left-container ul {
	margin-top: 2em;
	padding-inline-start: 0px;
}
.service-left-container li {
	border-top: 1px solid var(--dark-green);
	padding-top: 1em;
	margin-bottom: 1em;
}

.service-right-container img {
	width: 600px;
	height: 90%;
	object-fit: cover;
	-o-object-fit: cover;
	border: 5px solid var(--dark-green);
}

.service-gros-titre {
	position: absolute;
	top: -30px;
	z-index: -1;
}

@media (max-width: 1050px) {
	.service-main-container {
		flex-direction: column;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
	}
	.liste-services-section > :nth-child(even) {
		flex-direction: column;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
	}
	.service-left-container {
		width: 100%;
	}
	.service-right-container {
		width: 100%;
	}
	
	.service-main-container img {
		height: 700px;
	}
}

@media (max-width: 750px) {
	.service-left-container {
		padding: 2em;
	}
	.service-gros-titre {
		display: none;
	}
	.service-main-container img {
		display: none;
	}
}

/* Process Section */

.section-process {
	width: 100vw;
	position: relative;
	display: flex;
	display: -webkit-flex;
	align-items: flex-start;
	-webkit-align-items: flex-start;
	justify-content: center;
	-webkit-justify-content: center;
	padding-top: 10em;
	padding-bottom: 10em;
	overflow: visible;
	background-size: cover;
	margin-top: 3em;
}

.process-bg-opacity {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: var(--dark-green);
	opacity: .9;
}

.process-right-section, .process-left-section {
	z-index: 1;
	position: relative;
	min-height: 100%;
}

.process-right-section {
	border-left: 3px solid var(--light-brown);
	width: 60%;
	padding-right: 5em;
}

.process-left-section {
	width: 40%;
	padding: 0px 5em 0px 5em;
}

.process-title-container {
	position: sticky;
	position: -webkit-sticky; /* Safari */
	top: 110px;
	z-index: 100;
	padding: 3em;
	display: flex;
	display: -webkit-flex;
	flex-direction: column;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	align-items: center;
	-webkit-align-items: center;
	justify-content: center;
	-webkit-justify-content: center;
	border: 3px solid var(--light-brown);
	text-align: center;
	margin: 3em;
	width: 40%;
}

.section-process h2, .section-process h3, .section-process p, .section-process span {
	color: var(--light-brown);
}

.process-etape-container {
	margin-bottom: 5em;
	display: flex;
	display: -webkit-flex;
	align-content: center;
	align-items: center;
	-webkit-align-items: center;
	margin-left: -22px;
}

.process-etape-content-container {
	padding: 3em;
	width: 100%;
	border: 3px solid var(--light-brown);
	opacity: 1;
}

.process-etape-content-container span {
	font-size: 20px;
	font-weight: bold;
}

.process-etape-circle {
	width: 40px;
	height: 40px;
	background-color: var(--light-brown);
	border: 3px solid var(--light-brown);
	padding: 1em;
	border-radius: 100%;
}

.process-etape-barre {
	width: 80px;
	height: 3px;
	background-color: var(--light-brown);
}

.section-process .index-process {
	font-size: 1.5em;
	display: flex;
	display: -webkit-flex;
	align-items: center;
	-webkit-align-items: center;
	justify-content: center;
	-webkit-justify-content: center;
	border: 3px solid var(--light-brown);
	padding: 1em;
	margin-bottom: 1em;
	border-radius: 100%;
	width: 50px;
	height: 50px;
}

@media (max-width: 1200px) {
	.process-title-container {
		width: 30%;
	}
	.process-right-section {
		width: 70%;
	}
}

@media (max-width: 1050px) {
	.section-process {
		flex-direction: column;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		padding: 3em;
	}
	.process-title-container {
		width: 100%;
		position: static;
		margin: 0px;
	}
	.process-right-section {
		width: 100%;
		margin-top: 3em;
		padding-right: 0px;
	}
}

@media (max-width: 550px) {
	.section-process {
		padding: 1.5em .5em 1.5em 1.5em;
	}
	.process-etape-content-container {
		padding: 1.5em;
	}
	.process-etape-barre {
		width: 40px;
	}
}

/* Honoraires Section */

.section-honoraires {
	display: flex;
	display: -webkit-flex;
	align-items: center;
	-webkit-align-items: center;
	justify-content: center;
	-webkit-justify-content: center;
	padding-top: 10em;
	padding-bottom: 10em;
	position: relative;
}

.honoraires-content-container {
	width: 50%;
	text-align: center;
}

.honoraires-content-container ul {
	margin-top: 2em;
	padding-inline-start: 0px;
	list-style-type: none;
}
.honoraires-content-container li {
	border-top: 1px solid var(--dark-green);
	padding-top: 1em;
	margin-bottom: 1em;
	font-weight: bold;
}

.honoraires-gros-titre {
	position: absolute;
	z-index: -1;
	right: 0px;
	opacity: .1;
	-webkit-writing-mode: sideways-lr;
	-ms-writing-mode: tb-lr;
	writing-mode: sideways-lr;
	font-size: 60px;
}

@media (max-width: 1000px) {
	.honoraires-content-container {
		width: 80%;
	}
}

/* Avocat Section */

.presentation-avocat-section {
	width: 100vw;
	min-height: 80vh;
	display: flex;
	display: -webkit-flex;
	align-items: center;
	-webkit-align-items: center;
	position: relative;
	background-size: cover;
}

.presentation-avocat-section img {
	width: 50%;
	height: 100vh;
	object-fit: cover;
	-o-object-fit: cover;
	z-index: 1;
	border: 5px solid var(--dark-green);
}

.avocat-content-container {
	width: 50%;
	height: 100%;
	display: flex;
	display: -webkit-flex;
	flex-direction: column;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	justify-content: center;
	-webkit-justify-content: center;
	padding: 5em;
	z-index: 1;
}

.avocat-content-container h2 {
	font-size: 2.5em;
}

.avocat-bg {
	background-color: rgba(255, 255, 255, .5);
	width: 100%;
	height: 100%;
	position: absolute;
	bottom: 0px;
	left: 0px;
}

@media (max-width: 1050px) {

	.avocat-content-container {
		padding: 2.5em;
	}
}

@media (max-width: 800px) {
	.presentation-avocat-section {
		flex-direction: column-reverse;
		-webkit-flex-direction: column-reverse;
		-ms-flex-direction: column-reverse;
		padding-top: 5em;
		padding-bottom: 5em;
	}
	.avocat-content-container {
		height: fit-content;
		width: 100%;
	}
	.presentation-avocat-section img {
		height: 80vw;
		width: 80vw;
	}	
}

@media (max-width: 450px) {
	.presentation-avocat-section img {
		height: 90vw;
		width: 90vw;
	}	
}

/* * FAQ SECTION
*
*
* */

.section-faq {
	display: flex;
	display: -webkit-flex;
	flex-direction: column;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	align-items: center;
	-webkit-align-items: center;
	padding-top: 5em;
	padding-bottom: 5em;
	position: relative;
}

.section-faq h2, .section-faq h3 {
	text-align: center;
}

.faq-container {
	width: 60%;
	margin-top: 2em;
}

.faq-question-answer-container {
	width: 100%;
	cursor: pointer;
	padding: 2em;
	border-bottom: 1px solid var(--dark-green);
}

.faq-question-title-container {
	width: 100%;
	display: flex;
	display: -webkit-flex;
	justify-content: space-between;
	-webkit-justify-content: space-between;
	align-items: center;
	-webkit-align-items: center;
}

.faq-question-title-container img {
	width: 26px;
	height: 26px;
	object-fit: contain;
	-o-object-fit: contain;
	-webkit-transition: transform 0.2s;
	-moz-transition: transform 0.2s;
	-o-transition: transform 0.2s;
	transition: transform 0.2s;
}

.faq-question-title {
	font-weight: 500;
	text-align: left!important;
	font-size: 1.5em;
}

.faq-question-title h3 {
	text-align: left;
}

.faq-answer-container {
	max-height: 0px;
	overflow: hidden;
	-webkit-transition: 0.5s var(--cubic-beziers-va);
	-moz-transition: 0.5s var(--cubic-beziers-va);
	-o-transition: 0.5s var(--cubic-beziers-va);
	transition: 0.5s var(--cubic-beziers-va);
	opacity: 0;
}


.faq-answer-container li {
	padding-left: 2em;
}

.faq-question-answer-container.active .faq-answer-container {
	max-height: fit-content;
	opacity: 1;
	-webkit-transition: 0.5s var(--cubic-beziers-va);
	-moz-transition: 0.5s var(--cubic-beziers-va);
	-o-transition: 0.5s var(--cubic-beziers-va);
	transition: 0.5s var(--cubic-beziers-va);
}

.faq-question-answer-container.active:after {
	bottom: 0;
	right: 0;
	-webkit-transition: 0.2s var(--cubic-beziers-va);
	-moz-transition: 0.2s var(--cubic-beziers-va);
	-o-transition: 0.2s var(--cubic-beziers-va);
	transition: 0.2s var(--cubic-beziers-va);
}

.faq-question-answer-container.active .faq-question-title-container img {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}

@media (max-width: 1199px) {
	.faq-title-description-container {
		width: 95%;
	}
	.faq-container {
		width: 90%;
	}
}
@media (max-width: 600px) {
	.faq-container {
		width: 95%;
		padding: .7em;
	}
	.faq-question-answer-container {
		padding: 0.5em 0.7em 0.5em 0.7em;
	}
	.faq-q-a-bg-rectangles:after {
		bottom: -.5em;
		right: -.5em;
	}
}

.faq-gros-titre {
	opacity: .1;
	right: 0px;
	top: 50%;
	font-size: 60px!important;
	position: absolute;
	-webkit-writing-mode: sideways-lr;
	-ms-writing-mode: tb-lr;
	writing-mode: sideways-lr;
}


/* Footer */

footer {
	background-color: var(--dark-green);
	display: flex;
	display: -webkit-flex;
	flex-direction: column;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	align-items: center;
	-webkit-align-items: center;
	justify-content: center;
	-webkit-justify-content: center;
	padding-right: 5em;
	padding-left: 5em;
}

.footer-form-container {
	width: 90%;
	display: flex;
	display: -webkit-flex;
	flex-direction: column;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	align-items: center;
	-webkit-align-items: center;
	text-align: center;
	padding-top: 5em;
	padding-bottom: 5em;
}

footer h2, footer h3 {
	color: var(--light-brown);
}

.copyright-footer-container {
	width: 100%;
	border-top: 1px solid var(--light-brown);
	padding: 2em;
	display: flex;
	display: -webkit-flex;
	flex-direction: row;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	justify-content: space-between;
	-webkit-justify-content: space-between;
	
}

footer span, footer a, footer li {
	color: var(--light-brown);
}


.logo-footer {
	width: 250px;
}

.mentions-footer-container {
	display: flex;
	display: -webkit-flex;
	justify-content: space-between;
	-webkit-justify-content: space-between;
	width: 100%;
	padding: 2em;
	border-top: 1px solid var(--light-brown);
}

.mentions-footer-container ul {
	padding-inline-start: 0px;
	list-style: none;
	margin-top: 2em;
}

.mentions-legales-container {
	width: 30%;
}

.menus-container {
	width: 70%;
	display: flex;
	display: -webkit-flex;
	justify-content: flex-end;
	-webkit-justify-content: flex-end;
}

.menu-container {
	margin-left: 4em;
}

@media (max-width: 1000px) {
	footer {
		padding-right: 1em;
		padding-left: 1em;
	}
	.mentions-footer-container {
		flex-direction: column;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		align-items: center;
		-webkit-align-items: center;
	}
	.mentions-footer-container li {
		text-align: center;
	}
	.mentions-legales-container {
		width: fit-content;
	}
	.menus-container {
		flex-direction: column;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		margin-top: 2em;
		width: 100%;
	}
	.menus-container::first-child {
		margin-bottom: 2em;
	}
	.menu-container {
		margin-left: 0px;
		text-align: center;
	}
}

@media (max-width: 700px) {
	.copyright-footer-container {
		flex-direction: column;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		align-items: center;
		-webkit-align-items: center;
	}
	
	.copyright-footer-container span {
		margin-bottom: 2em;
	}
}


/* Header */

.main-head {
	padding-right: 2em;
	padding-left: 2em;
	height: 100px;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	z-index: 1000;
	background-color: transparent;
	-webkit-transition: background-color 0.4s ease, box-shadow 0.4s ease;
	-moz-transition: background-color 0.4s ease, box-shadow 0.4s ease;
	-o-transition: background-color 0.4s ease, box-shadow 0.4s ease;
	transition: background-color 0.4s ease, box-shadow 0.4s ease;
}

.header-active {
	background-color: #ffffff !important;
	-webkit-box-shadow: 0 4px 20px rgba(0,0,0,0.1);
	-moz-box-shadow: 0 4px 20px rgba(0,0,0,0.1);
	box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.header-active .header-container {
	border-bottom: none;
	-webkit-transition: border-bottom 0.4s ease;
	-moz-transition: border-bottom 0.4s ease;
	-o-transition: border-bottom 0.4s ease;
	transition: border-bottom 0.4s ease;
}

.header-container {
	display: flex;
	display: -webkit-flex;
	justify-content: space-between;
	-webkit-justify-content: space-between;
	align-items: center;
	-webkit-align-items: center;
	border-bottom: 1px solid var(--dark-green);
	width: 100%;
	padding-top: 1em;
	padding-bottom: 1em;
	-webkit-transition: border-bottom 0.4s ease;
	-moz-transition: border-bottom 0.4s ease;
	-o-transition: border-bottom 0.4s ease;
	transition: border-bottom 0.4s ease;
	height: 100%;
}

.custom-logo {
	width: 200px;
	z-index: 10;
	position: relative;
}

#menu-principal {
	display: flex;
	display: -webkit-flex;
	list-style-type: none;
	align-items: center;
	-webkit-align-items: center;
}

.main-head #menu-principal li {
	margin-left: 2em;
	font-family: var(--sans-serif);
	text-transform: uppercase;
	letter-spacing: 4px;
	margin-bottom: 0px;
	font-weight: bold;
	font-size: 13px;
}

.main-head #menu-principal a:hover {
	color: var(--medium-green);
}

.mobile-nav-container {
	display: none;
}

.hamburger-button-container {
	width: 50px;
	height: 50px;
	background-color: var(--medium-green);
	z-index: 10;
	position: relative;
}

.mobile-menu-container {
	display: none;
}

.header-button {
	background-color: var(--dark-green);
	border: 0px;
	padding: 1em 4em 1em 4em;
}

.header-button:hover {
	background-color: var(--medium-green);
}

.header-button a {
	color: var(--white);
}

.header-button a:hover {
	color: var(--white)!important;
}

@media (max-width: 1250px) {
	#menu-principal {
		display: none;
	}
	.mobile-nav-container {
		display: block;
	}
	.mobile-menu-container {
		height: 0px;
		width: 100vw;
		position: fixed;
		display: flex;
		display: -webkit-flex;
		align-items: center;
		-webkit-align-items: center;
		justify-content: center;
		-webkit-justify-content: center;
		visibility: hidden;
		left: 0;
		top: 0px;
		padding: 2em;
	}
	
	.mobile-menu-container-active {
		position: fixed;
		visibility: visible;		
		background-color: var(--dark-green);
		height: 100vh;
		z-index: 1;
		-webkit-transition: .5s;
		-moz-transition: .5s;
		-o-transition: .5s;
		transition: .5s;
	}
	
	.mobile-menu-container-active .header-button {
		background-color: var(--medium-brown);
		border: 0px;
		padding: 1em 4em 1em 4em;
	}
	
	.mobile-menu-container-active .header-button a {
		color: var(--dark-green);
	}
	
	.mobile-menu-container .menu-principal-container #menu-mobile {
		list-style-type: none;
		padding-inline-start: 0px;
	}
	.mobile-menu-container .menu-principal-container a {
		color: var(--light-brown);
	}
	.mobile-menu-container .menu-principal-container li {
		text-align: center;
		font-size: 1.3em;
		font-family: var(--serif);
		letter-spacing: 2px;
		text-transform: uppercase;
	}
}

@media (max-width: 800px) {
	.main-head {
		padding-right: 1em;
		padding-left: 1em;
	}
}

/* Animation */

/* Anim OnScroll */

[class*="reveal-"] {
	opacity: 0;
	-webkit-transform: translateY(100px);
	-moz-transform: translateY(100px);
	-ms-transform: translateY(100px);
	-o-transform: translateY(100px);
	transform: translateY(100px);
}

.reveal-visible {
	opacity: 1;
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-ms-transform: translateY(0);
	-o-transform: translateY(0);
	transform: translateY(0);
	-webkit-transition: 1s cubic-bezier(.5, 0, 0, 1);
	-moz-transition: 1s cubic-bezier(.5, 0, 0, 1);
	-o-transition: 1s cubic-bezier(.5, 0, 0, 1);
	transition: 1s cubic-bezier(.5, 0, 0, 1);
}

.reveal-1 { -webkit-transition-delay: .1s; -moz-transition-delay: .1s; -o-transition-delay: .1s; transition-delay: .1s; }
.reveal-2 { -webkit-transition-delay: .2s; -moz-transition-delay: .2s; -o-transition-delay: .2s; transition-delay: .2s; }
.reveal-3 { -webkit-transition-delay: .3s; -moz-transition-delay: .3s; -o-transition-delay: .3s; transition-delay: .3s; }
.reveal-4 { -webkit-transition-delay: .4s; -moz-transition-delay: .4s; -o-transition-delay: .4s; transition-delay: .4s; }
.reveal-5 { -webkit-transition-delay: .5s; -moz-transition-delay: .5s; -o-transition-delay: .5s; transition-delay: .5s; }
.reveal-6 { -webkit-transition-delay: .6s; -moz-transition-delay: .6s; -o-transition-delay: .6s; transition-delay: .6s; }
.reveal-7 { -webkit-transition-delay: .7s; -moz-transition-delay: .7s; -o-transition-delay: .7s; transition-delay: .7s; }

[class*="opacity-"] {
	opacity: 0;
}

.opacity-visible {
	opacity: 1;
	-webkit-transition: 1s cubic-bezier(.5, 0, 0, 1);
	-moz-transition: 1s cubic-bezier(.5, 0, 0, 1);
	-o-transition: 1s cubic-bezier(.5, 0, 0, 1);
	transition: 1s cubic-bezier(.5, 0, 0, 1);
}

.opacity-1 { -webkit-transition-delay: .1s; -moz-transition-delay: .1s; -o-transition-delay: .1s; transition-delay: .1s; }
.opacity-2 { -webkit-transition-delay: .2s; -moz-transition-delay: .2s; -o-transition-delay: .2s; transition-delay: .2s; }
.opacity-3 { -webkit-transition-delay: .3s; -moz-transition-delay: .3s; -o-transition-delay: .3s; transition-delay: .3s; }
.opacity-4 { -webkit-transition-delay: .4s; -moz-transition-delay: .4s; -o-transition-delay: .4s; transition-delay: .4s; }
.opacity-5 { -webkit-transition-delay: .5s; -moz-transition-delay: .5s; -o-transition-delay: .5s; transition-delay: .5s; }
.opacity-6 { -webkit-transition-delay: .6s; -moz-transition-delay: .6s; -o-transition-delay: .6s; transition-delay: .6s; }
.opacity-7 { -webkit-transition-delay: .7s; -moz-transition-delay: .7s; -o-transition-delay: .7s; transition-delay: .7s; }