/*
Theme Name: Ana Maria Fajardo
Theme URI: https://github.com/netandout
Description: Esta es una descripcion del tema Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, recusandae, officia fuga labore dolor mollitia voluptate beatae magnam aliquam quaerat accusantium harum odit magni ut at aspernatur incidunt possimus obcaecati.
Version: 1.0
Author: NETANDOUT
Author URI:
License:
License URI:
Tags: Lawyer, Family Lawyer
Text Domain:
*/
@font-face {
	font-family: 'Minion';
	src: url('./fonts/Minion/MinionPro-BoldIt.otf');
	font-weight: bold;
	font-style: italic;
}

@font-face {
	font-family: 'Minion';
	src: url('./fonts/Minion/MinionPro-It.otf');
	font-weight: normal;
	font-style: italic;
}


@font-face {
	font-family: 'Neutraface';
	src: url('./fonts/Neutraface/NeutraText-LightItalic.otf');
	font-style: italic;
}

@font-face {
	font-family: 'NeutrafaceDemi';
	src: url('./fonts/Neutraface/NeutraText-Demi.otf');
}


:root{
	--color1: #fceee3;
	--color2: #ede1c8;
	--color3: #b0badf;
	--color4: #303030;
}
/*
	Dopetrope by HTML5 UP
	html5up.net | @ajlkn
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/
body {
	line-height: 1;
	margin: 0;
	overflow-x: hidden;
}


html {
	font-family: Neutraface, sans-serif;
	box-sizing: border-box;
	background-color: var(--color1);
	color: var(--color4);
}

::-webkit-scrollbar {
	width: 8px;     /* Tamaño del scroll en vertical */
	height: 8px;    /* Tamaño del scroll en horizontal */
}

::-webkit-scrollbar-thumb {
	background: #ccc;
	border-radius: 4px;
}

/* Cambiamos el fondo y agregamos una sombra cuando esté en hover */
::-webkit-scrollbar-thumb:hover {
	background: #b3b3b3;
	box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
}

/* Cambiamos el fondo cuando esté en active */
::-webkit-scrollbar-thumb:active {
	background-color: #999999;
}

html a{
	text-decoration: none;
}

*, *:before, *:after {
	box-sizing: inherit;
}

section{
	width: 100vw;
	margin-right: 8px;
}
#header{
	padding: 0 4vw;
	display: flex;
	position: fixed;
	flex-direction: row;
	align-items: center;
	justify-content: space-evenly;
	background-color: var(--color1);
	z-index: 15;
	height: max(6.15vw,40px);
}

#nameContainer{
	display: flex;
	flex-direction: row;
	align-items: center;
	width: 33vw;
}

#nameContainer a{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
}

#nameContainer img{
	width: 60%;
	min-width: 180px;
}

#logoContainer {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	width: 33%;
}


#logoContainer img {
	width: max(18%, 49px);
}

#socialBar{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
	width: 33%;
}

#socialBar img{
	height: max(2vw, 18px);
	width: max(2vw, 18px);
	margin-right: max(2.28vw, 20px);
}

@media (max-width: 540px) {
	#nameContainer {
		display: none;
	}
	#socialBar{
		display: none;
	}
}

#main {
	/*padding-top: max(6.14vw, 40px);*/
	display: flex;
	flex-direction: column;
	align-items: center;
	align-content: space-between;
	justify-content: space-between;
}

#intro {
	height: 66vw;
	color: white;
}

#intro .container{
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: space-between;
	height: 66vw;
}

#intro .backgroundImage{
	position: absolute;
	z-index: 0;
	width: 100vw;
	height: 66vw;
	right: 0;
}

#intro .textContainer {
	margin-top: 15vw;
	display: flex;
	flex-direction: column;
	margin-left: 10%;
	padding-right: 5%;
	width: max(500px, 50%);
	max-width: 90%;
	z-index: 2
}

#intro .quotation{
	position: absolute;
	width: 12vw;
	height: 10vw;
	margin-top: -2vw;
}

#intro a{
	color: white;
}

#intro .contactContainer{
	font-family: Minion, serif;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 15vw 5vw;
	writing-mode: vertical-lr;
	font-size: max(2.28vw, 12px);
	transform: rotate(180deg);
	z-index: 3;
}

#intro .dots{
	margin-left: 1.5vw;
	width: 1.7vw;
	height: 6vw;
}

#intro .mainPhrase {
	font-family: Minion, serif;
	line-height: max(4.24vw, 16px);
	font-size: max(3.9vw, 15px);
	z-index: 2;
}

#intro .subPhrase {
	font-family: Minion, serif;
	line-height: max(3vw, 16px);
	font-size: max(2.28vw, 10px);
	font-weight: normal;
	padding-right: 10%;
	z-index: 2;
}

#intro hr{
	margin: 1.3vw 0;
	border: var(--color3) solid 1px;
	color: var(--color3);
	background-color: var(--color3);
}

#intro .wave{
	z-index: 10;
	height: 20vw;
	position: absolute;
	overflow: hidden;
	width: 100vw;
	fill: var(--color1);
	margin-top: -20vw;
}

#intro .logo{
	position: absolute;
	width: 17vw;
	height: 8vw;
	margin-top: -9%;
	margin-left: 16%;
	z-index: 11;
}



#abilities{
	display: flex;
	flex-flow: row wrap;
	justify-content: space-evenly;
	justify-items: center;
	align-items: flex-start;
	height: fit-content;
	padding: 0 2vw;
	margin-bottom: 4vw;
}

#abilities .container {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	margin: 2vw 1.5vw;
	align-items: center;
	align-content: center;
	width: max(27vw, 180px);
}

#abilities .container hr{
	border: none;
	background-color: var(--color3);
	height: 2px;
}
#abilities a{
	color: var(--color4);
}


#abilities .title {
	margin-top: 10%;
	font-family: Minion, serif;
	letter-spacing: max(0.45vw, 5px);
	font-size: max(1.5vw, 14px);
	font-weight: bold;
	text-align: center;
}

#abilities .description {
	text-align: center;
	font-size: max(1.3vw, 9px);
	line-height: max(1.95vw, 12px);
}


#abilities .button {
	font-family: Minion, sans-serif;
	font-size: 1.59vw;
	text-align: center;
	padding: 2% 5%;
	width: fit-content;
	width: -moz-fit-content;
	background-color: var(--color2);
}

#abilities .image {
	width: max(27vw, 100px);
	height: max(27vw, 100px);
}

#abilities .icon {
	width: max(7vw, 60px);
	background-color: var(--color3);
	border-radius: 50%;
	margin-top: -5vw;
}

#biography {
	width: 100%;
	background-color: var(--color4);
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	color: white;
}

.biographyContainer {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: max(1vw, 15px) max(2vw,30px);
	width: max(50vw, 500px);
	max-width: 100%;
}

#biography p {
	margin: 1vw 0;
}

#biography .title {
	width: 40vw;
	margin-top: 1vw;
	margin-bottom: 4vw;
	min-width: 250px;
}

#biography .textContainer {
	margin: 0 5vw;
}

#biography .subTitle1 {
	font-family: MinionBoldItalic, serif;
	color: var(--color2);
	font-size: max(1.4vw, 9px);
	line-height: max(1.2vw, 13px);
	letter-spacing: max(0.25vw, 2px);
	margin-bottom: 3vw;
}

#biography .subTitle2 {
	font-family: NeutrafaceDemi, sans-serif;
	font-size: max(1.4vw, 9px);
	line-height: max(1.2vw, 13px);
	letter-spacing: max(0.12vw, 2px);
	color: var(--color3);
	margin-bottom: 3vw;
}

#biography .subTitle2 p {
	margin: 1vw 0;
}

#biography .imgContainer {
	width: 50vw;
}

#biography .description {
	font-size: max(1.5vw, 11px);
	line-height: max(1.9vw, 15px);
	letter-spacing: max(0.1vw, 1px);
	color: var(--color1);
}

.mySlides {display: none;}
img {vertical-align: middle;}
.prev, .next {
	cursor: pointer;
	position: absolute;
	top: 50%;
	width: auto;
	margin-top: -8vw;
	padding: 2.8vw;
	color: white;
	font-weight: bold;
	font-size: 3vw;
	transition: 1s ease;
	border-radius: 0 3px 3px 0;
	user-select: none;
}

/* Position the "next button" to the right */
.next {
	right: 0;
}
/* Slideshow container */
.slideshow-container {
	width: 100%;
	position: relative;
	margin: auto;
}

.dotsContainer{
	z-index: 6;
	margin-top: 4vw;
	align-self: center;
	position: absolute;
}

@media screen and (max-width: 510px){
	.dotsContainer {
		margin-top: 0.5vw;
	}
}

/* The dots/bullets/indicators */
.dot {
	height: 2vw;
	width: 2vw;
	margin: 0 0.8vw;
	background-color: #bbb;
	border-radius: 50%;
	display: inline-block;
	transition: background-color 1s ease;
}

.active {
	background-color: #717171;
}

/* Fading animation */
.fade {
	animation-name: fade;
	animation-duration: 2s;
}

@keyframes fade {
	from {opacity: .4}
	to {opacity: 1}
}

#events{
}

#events .container{
	display: flex;
	flex-direction: column;
	align-content: center;
}

 .notEventCont{
	font-family: Minion, serif;
	font-weight: bold;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 40vw;
	width: 100vw;
	font-size: 10vw;
	text-align: center;
}

 .notEventCont .label{
	 margin-bottom: 5vw;
 }


.event p {
	margin: 0;
}

.event{
	padding: 0 6vw;
	background-position: top;
	object-fit: cover;
	background-repeat: no-repeat;
	background-size: 100vw 50vw;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	height: 50vw;
}

.event .content{
	width: max(49%, 350px);
	max-width: 100%;
	margin-top: -3vw;
}

#events hr{
	margin: 1vw;
	background-color: var(--color3);
	border: none;
	color: var(--color3);
	height: 0.1vw;
}

#events .title{
	font-family: MinionBoldItalic, serif;
	line-height: max(4.24vw, 15px);
	font-size: max(3.9vw, 12px);
	font-weight: bold;
	color: white;
}

#events .description{
	padding-right: 10%;
	font-family: Minion, serif;
	line-height: max(3vw, 18px);
	font-size: max(2.28vw, 10px);
	color: white;
}

#events .date{
	padding-right: 10%;
	font-family: MinionBoldItalic, serif;
	line-height: max(4.24vw, 18px);
	font-size: max(3.9vw, 16px);
	color: var(--color3);
}

#events .buttonContainer a{
	font-family: Minion, serif;
	text-decoration: none;
	color: white;
	margin-right: 5%;
	margin-bottom: 4vw;
	text-align: center;
	height: fit-content;
}

#events .buttonContainer{
	width: fit-content;
	width: -moz-fit-content;
	margin-top: 2.5vw;
	font-size: max(1.5vw, 8px);
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
}

#events .linkButton {
	padding: 1vw 1.2vw;
	width: fit-content;
	width: -moz-fit-content;
	background-color: var(--color3);
	border: var(--color3) 2px solid;
}

#events .moreEvents {
	padding: 1vw;
	width: max(20vw, 100px);
	background-color: transparent;
	border: var(--color3) 2px solid;
}

#events .wave{
	z-index: 10;
	position: absolute;
	height: 7vw;
	overflow: hidden;
	width: 100vw;
	fill: var(--color2);
	margin-top: -7vw;
}


#contact{
	display: flex;
	flex-direction: row;
	background-color: var(--color2);
	justify-content: center;
	height: fit-content;
	padding: 2vw 6vw 5vw;
}

#contact .dots{
	position: absolute;
	width: 1.6vw;
	height: 5vw;
}

#contact .top{
	z-index: 11;
	left: 0;
	margin-left: 3.5vw;
	margin-top: -2.5vw;
}

#contact .bottom{
	margin-top: 38vw;
	margin-right: 7vw;
	right: 0;
}

#contact .imgContainer{
	width: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
}

#contact .image{
	padding: 0 2vw;
	width: 40vw;
	height: 40vw;
}

#contact .title{
	font-family: MinionBoldItalic, serif;
	line-height: max(4.24vw, 22px);
	font-size: max(3.9vw, 10px);
	color: var(--color4);
	margin-bottom: 2vw;
	padding-right: 10%;
}

#contact p{
	margin: 0;
}


#contact .contactContainer {
	margin-left: 6%;
	padding-right: 4%;
}

#contact .fieldContainer {
	width: 100%;
	display: flex;
	flex-direction: column;
}

#contact .formContainer {
	padding-right: 10%;
	display: flex;
	flex-direction: column;
}

#contact .fields {
	display: flex;
	flex-direction: column;
}

#contact textarea {
	font-family: Minion, serif;
	resize: none;
	box-sizing: border-box;
	height: max(8vw, 50px);
	padding: 1vw 1.3vw;
	font-size: max(1.59vw, 9px);
	background-color: var(--color1);
}

#contact .fields input, textarea::placeholder {
	font-family: Minion, serif;
	border: none;
	background-color: var(--color1);
	padding: 1vw 1.3vw;
	font-size: max(1.59vw, 9px);
	margin-bottom: 1vw;
}

textarea::placeholder {
	padding: 0;
}

#contact .button {
	width: 100%;
	border: none;
	font-family: Minion, serif;
	font-size: 3vw;
	height: 5vw;
	color: white;
	background-color: var(--color3);
	margin-top: 2vw;
}

.wpforms-confirmation-container-full {
	border: none !important; 
	background: none !important;
}

@media screen and (max-width: 650px){
	#biography .imgContainer{
		display: none;
	}
	#biography{
		height: fit-content;
	}

	#contact .imgContainer{
		display: none;
	}
	#contact .contactContainer {
		width: 80%;
	}
}