/* CSS Document */
*, html {margin:0; padding:0;}
html { height:100%; margin: 0; padding: 0;}

body { 
    font:18px "Myriad Pro", Arial, Geneva, sans-serif; 
	font:18px HelveticaNeue-Light, sans-serif; 
	font: 100 italic 18px "Georgia Pro", Georgia, serif;
	color: #444;
	background: #FFF;
	height:100%; 
	position: relative; 
	margin: 0; 
}
section, .container, FOOTER { 
	width:100%; 
	clear:both;
}
article, .content {
    max-width:1200px;
    margin:0 auto;
	padding: 100px 20px;
}
section article:nth-child(2) {padding-top: 0;}
div.content {
	max-width: 100%;
	padding-left: calc((100% - 1200px)/2);
	padding-right: calc((100% - 1200px)/2);
}
img, embed, object, video, iframe {max-width: 100%; max-height: -webkit-fill-available; }
img {display: block;}
.clear {clear:both;}
*.none {display: none !important;}
H1 {
	font: 100 italic 54px "Georgia Pro", serif;
	color: cadetblue;
	padding-bottom: 20px;
}
H2 {
    font: 300 italic 45px/1em "Georgia Pro Cond", serif;
	color:var(--H2-color);
	padding:0px 0 15px;
	margin-bottom: 30px;
	position: relative;
}
H2:before {
	content: '';
	display: block;
	width: 2em;
	height: 3px;
	background-color: var(--H3-color);
	position: absolute;
	left: 0;
	bottom: 0;
}
H3 {
	color:var(--H3-color);
    font: 400 italic 27px/1em "Georgia Pro Cond", serif;
	margin: 20px 0;
}
H4 {
	font-size: 1.2em;
	font-weight: 400;
    color:#777;
}
p {}
ul li {
	/*display: -webkit-box;*/
	list-style: none;
	padding: 0 0 15px 25px;
	position: relative;
}
ul li:before {
	/*position: absolute;
	left: 0;
	top: 2px;
	content: '\e18e';
	font: 1em/1em 'Material Design';
    color: inherit;*/
}

strong {font-weight: 400; }
a {color: inherit;}
a:hover {text-decoration: none;}
div.left, div.right {flex-basis: 49%; box-sizing: border-box; }
.flex {
	list-style: none;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.fade {background-color: rgba(0, 0, 0, .4);}

.cta {
	display: flex;
	/*justify-content: flex-end;*/
}
.button {
	display: inline-block;
	width: fit-content;
	border: 1px solid #AAA;
	padding: 12px 30px;
	font:18px HelveticaNeue-Light, sans-serif; 
	text-decoration: none;
	color: white;
	text-transform: uppercase;
	background-color: var(--main-color);
}
.button:after {content: none;}
.button:hover, .button#more:hover {background-color: white; color: var(--main-color); }
.button#more {background-color: #93D5AB; margin-right: 50px; }

.grey {
	/*background: linear-gradient(white, white, white, grey);*/
	background-color: #F4F4F4;
}

:root {
	--main-color: brown;
	--bg-main-color: white;
	--bg1-color: #E2A596;
	--bg2-color: #FFFADA;
	--bg3-color: #F6F6F6;
	--text1-color: #222;
	--text2-color: #777;
	--H2-color: #777;
	--H3-color: #981E00;
}
.grey {
	background-color: var(--bg3-color);
}
.yellow {background-color: var(--bg2-color);}

/******************************************** HEADER **************************************/

HEADER {background-color: var(--main-color);	 }
HEADER article {
	display: flex;
	padding: 50px 20px;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: center;
}
#logo { 
	display: flex;
	align-items: center;
	height: 80px;
	text-decoration: none;
}
#logo span {
	width: 220px;
	padding: 15px 15px;
	margin-left: 15px;
	font: 100 16px "Myriad Pro", Arial, Geneva, sans-serif; 
	color: #DBE8E0;
	border-left: 2px solid #DBE8E0;
}
#logo span strong {display: block; font-size: 120%; }
.tel {
	font: italic 100 34px 'Georgia Pro', serif;
    --link-color: gainsboro;
	color: var(--link-color);
	text-align: right;
}
.tel .zmdi {font-size: 120%; margin-right: 10px; }
.tel a {
	text-decoration: none; 
	display: flex; 
	align-items: flex-start; 
	justify-content: flex-end;
}

#description {
	padding: 0 0 50px 0;
	background: url('../images/img01.jpg_') no-repeat right top;
	background-size: contain;
}
#description article {
	width: 100%;
	max-width: 100%;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	overflow: hidden;
	padding: 0 0 20px 0;
}
#description div {}
#description div.left {
	display: flex;
	flex-direction: column;
	padding-left: calc((100% - 1200px)/2);
	justify-content: center;
}
#description div.right {
	display: flex;
    justify-content: flex-end;
}
#description article ul {
	/*width: 45%;*/
	padding: 20px 20px 20px 0; 
}
#description article li {
	font: italic 25px Georgia, serif;
	color: #777;
	margin-bottom: 15px;
	padding-left: 1.5em;
	background: url('../images/bullet.gif') no-repeat left 3px;
	background-size: 1em;
}
#description article li:before {display: none; }

#description ul.content {
	display: flex;
	justify-content: space-between;
}
#description ul.content li a {
	display: block;
	border: 1px solid #CCC;
	padding: 20px;
	text-decoration: none;
	font-size: 1.3em;
	text-align: center;
}
#description ul.content li:first-child a {
	background-color: var(--main-color);
	color: white;
	
}

/******************************************** PROBLEMS **************************************/
#problems {background-color: var(--bg1-color);}
#problems H2 {color: #333;}
#problems ul {
	display: flex;
	justify-content: space-between;
}
#problems li {flex-basis: 30%; padding-left: 0; text-align: justify; }
#problems li:before {display: none; }
#problems strong {
	display: inline-block; 
	width: 100%;
	text-transform: uppercase;
}

/******************************************** SERVISES **************************************/
#services div {
	flex-basis: calc(50% - 75px);
	padding: 30px;
	background-color: var(--bg3-color);
	display: flex;
	flex-flow: column;
	justify-content: space-between;
}
#services div:nth-child(3) {
	flex-basis: 100%;
	padding: 0;
	margin: 30px 0;
	box-sizing: border-box;
}
#services div p {
	font: 300 italic 20px "Georgia Pro", serif;
	margin-bottom: 10px;
}

/******************************************* BENEFITS ***************************************/
#benefits { }
#benefits ul, #benefits ol {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
	margin: 50px auto 20px;
}
#benefits li {
    margin-bottom: 25px;
	color: inherit;
	flex-basis: calc(48% - 70px);
	max-width: 485px;
	padding-left: 70px;
	position: relative;
	list-style: none;
}
/*.benefits li:nth-child(even) {float: right;}*/
#benefits li:before {
	position: absolute;
	left: 0;
	top: -7px;
	content: "✅";
	font: 54px/1em 'wpshop-core';
    color: var(--bg1-color);
}
#benefits ol {counter-reset: li;}
#benefits ol li {
	font-size: 1.15em;
	min-height: 5em;
}
#benefits ol li:before {
    display: block;
	padding: 8px 10px;
	margin-top: 8px;
    font: 100 34px "Georgia Pro Cond", serif;
	background-color: var(--main-color);
	border: 1px solid transparent;
	border-radius: 50%;
    color: white;
    content: counter(li,decimal-leading-zero);
    counter-increment: li;
	}
#benefits p {font-size: 1.1em; }

/****************************************** PROGRESS **************************************/
.progress-bar {
	border: 1px solid #999;
	text-align: left;
	margin: 5px auto 20px;
	overflow: hidden;
}
.progress-bar span {
	display: inline-block;
	padding: 5px 0;
	text-align: center;
	color: white;
	background-color: var(--bg1-color);
}

/****************************************** FEATURES **************************************/
.features {
	padding: 20px 0;
	margin-top: 50px;
}

.features ul, .features ol {
	margin: 0 auto;
	display: flex;
	flex-flow: row nowrap; 
	justify-content: space-between;
	/*padding: 10px 0px 10px;*/
}
.features ol {counter-reset: li; }
.features li {
	flex-basis: 24%;
	box-sizing: border-box;
	padding: 10px 10px 10px 20px;
	font-size: 1.1em;
	border-left: 2px solid var(--bg1-color);
	/*background-color: var(--bg3-color); */
	/*margin: 0 1%;*/
	/*font: 100 22px/1.1em 'roboto_condensedlight', 'Myriad Pro', sans-serif;*/
	list-style: none;
	color: #333;
}

/******************************************** ABOUT **************************************/
#about:after {
	content: '';
	display: block;
	clear: both;
}
#about {
	max-width: 100%;
	padding-right: 0;
	padding-left: calc((100% - 1200px)/2); 
}
#about .flex div.left {flex-basis: 55%; padding-right: 30px; }
#about .flex div.right {flex-basis: 45%; }
#about p {
	font-size: 1.1em;
	margin-bottom: 20px;
}
#about H4, #about strong {
	display: block;
	font-size: 1.4em;
	padding-top: 20px;
}
#about img {
	margin-top: -40px; 
	max-width: 460px;
	float: right;
	mix-blend-mode: darken;
	mix-blend-mode: multiply;
	/*box-shadow: 0px 3px 5px var(--bg3-color);*/
}

/******************************************* REVIEWS ************************************** */
.jMyCarousel, #reviews ul {height: auto !important;}
.jMyCarousel {width:100% !important; }
#reviews {
	position:relative;
	padding-top: 50px;
	padding-bottom: 150px;
	box-sizing: border-box;
}
#reviews ul {
	margin:10px -10px;
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	-ms-overflow-style: -ms-autohiding-scrollbar; 
}
#reviews li {
	list-style:none;
	width: calc((1160px/4) - 20px);
	width: calc((1160px/3) - 20px);
	flex: 0 0 auto; 
	padding: 25px;
	margin: 0 10px;
	/*padding-bottom: 500px;
	margin-bottom: -500px;*/
	font: 300 italic 0.9em 'Georgia Pro';
	color: #777;
	box-sizing: border-box;
	background-color: white;
	border: 1px solid #CCC;
	position: relative;
	/*box-shadow: 0px 3px 5px #444;*/
}
#reviews li:before {display: none;}
#reviews li:after {
	display: block;
	content: '.';
	height: 1px;
	background-color: #CCC;
	position: absolute;
	bottom: 10px;
	z-index: 10;
}
#reviews p {text-align: 	justify; margin-bottom: 10px; }
#reviews p:last-child {
	text-align: right;
	margin-top: 10px;
}
.arrow-L, .arrow-R {
	display:block;
	width:40px;
	height:40px;
	font: 100 25px/1.5em 'FontAwesome';
	text-decoration: none;
	text-align: center;
	position:absolute;
	bottom: 50px;
	border: 1px solid #CCC;
	opacity: 0.6;
}
.arrow-L {left: calc(50% - 50px);}
.arrow-L:before {content: "\f104";}

.arrow-R {right: calc(50% - 50px);}
.arrow-R:before {content: "\f105";}

.arrow-L:hover, .arrow-R:hover {opacity: 1;}



/******************************************* PROCESS ************************************** */
ol.process {
	counter-reset: li;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	padding-top: 20px;
}
ol.process li {
	flex-basis: calc(18% - 0px);
	font: 18px/1em Roboto_condensedlight, sans-serif;
	text-align: center;
	position: relative;
	list-style: none;
}
ol.process li:before {
	content: counter(li,decimal-leading);
	counter-increment: li;
	display: block;
	text-align: 	center;
	font: 120px/1em "HelveticaNeue-CondensedBlack", sans-serif;
	/*font-family: 'HelveticaNeue-Light';*/
	color: #DCF1ED;
	color: #F6D9D2;
	/*border: 2px solid #DCF1ED;
	border-radius: 50%;*/
}

													       /* FOTOGAL */
#fotogal {
    clear: both;
	padding-top:20px;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	/*background:#EEE;*/
}
#fotogal H2 {flex-basis: 100%;}
#fotogal li {
    flex-basis: 24%;
	align-self: flex-start;
	text-align:left;
	padding: 0;
	margin-bottom:20px;
    list-style: none;
    overflow: hidden;
}
#fotogal li:before {display: none;}
#fotogal div {
    background-color: black;
    outline:1px solid #AAA;
    outline-offset: -1px;

}
#fotogal img {
	/*padding:5px;
	background:#FFF;*/
    display: block;
    opacity: 0.9;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;

}
#fotogal li:hover img {opacity: 1; transform: scale(1.05);}

/******************************************* FOOTER ************************************** */

FOOTER {
	background-color: var(--main-color);
	padding: 0;
}
FOOTER div.left, FOOTER div.right {flex-basis: 50%; }
FOOTER address {flex-direction: column; padding-top: 0; }
FOOTER address a {max-width: max-content; font-size: 22px; }
FOOTER H2 {width: 100%; color: #FFF;}
FOOTER H3 {font-size: 34px; color: #DDD; margin-top: 0;}
FOOTER H4 {color: #EEE; }
FOOTER p {margin-bottom: 5px; color: #CCC;}
FOOTER a {--link-color: #FFF; color: var(--link-color);}

											/* ADDRESS */
address a {
	padding: 5px 0px;
	display: flex;
	align-items: center;
	text-decoration: none;
	position: relative;
}
address a:after {
    content: '';
    width: 0%;
    height: 1px;
    position: absolute;
	left: 45px; 
    bottom: 4px;
	max-width: calc(100% - 40px);
    background-color: var(--link-color);
	-webkit-transition: all 0.3s ease 0s;
	-moz-transition: all 0.3s ease 0s;
	-ms-transition: all 0.3s ease 0s;
	-o-transition: all 0.3s ease 0s;
	transition: all 0.3s ease 0s;
}
address a:hover:after {width: 100%;}
.fa {
	display: block;
	font-size: 125% !important;
	text-align: center;
	border: 2px solid;
    border-radius: 50%;
    width: 1em;
    padding: 0.15em;
	margin-right: 0.3em;
}
address .fa-whatsapp {border-color: transparent; background-color: green;}
address .fa-youtube  {border-color: transparent; background-color: red; }
address .fa.fa-telegram {border: none; color: deepskyblue; background-color: white; padding: 0; font-size: 180% !important; }




													/* FEEDBACK FORM */
.myform {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}
.myform p {
	width: 100%;
	margin-bottom: 10px;
	font-size: 0.8em;
}
input {width: 100%;}
input, textarea {
	display: block;
	font: 18px "HelveticaNeue-Light", sans-serif;
	/*width: calc(32% - 30px);*/
	padding: 10px 15px;
	margin-bottom: 15px;
	border-width: 0px;
    outline: 1px solid lightgrey; outline-offset: -1px;
}
FOOTER input, FOOTER textarea {
	background: rgba(0, 0, 0, .15);
	color: #EEE;
}
textarea {width: 45%;}

::-webkit-input-placeholder {color:#999;opacity:1;font-family:"HelveticaNeue-Thin";transition: opacity 0.3s ease;}
::-moz-placeholder {color:#999;opacity:1;font-family:"HelveticaNeue-Thin";transition: opacity 0.3s ease;}/* Firefox 19+ */
:-moz-placeholder {color:#999;opacity:1;font-family:"HelveticaNeue-Thin";transition: opacity 0.3s ease;}/* Firefox 18- */
:-ms-input-placeholder {color:#999;opacity:1;font-family:"HelveticaNeue-Thin";transition: opacity 0.3s ease;}

:focus::-webkit-input-placeholder {opacity: 0; transition: opacity 0.3s ease;}
:focus::-moz-placeholder          {color: transparent}
:focus:-moz-placeholder           {color: transparent}
:focus:-ms-input-placeholder      {color: transparent}

#buttn {
	/*width: 32%;*/
	padding:15px 0px;
	border: 1px solid #EEE;
	text-transform: uppercase;
	border: none;
	cursor: pointer;
	color: #222;
	background-color: #F6CE15;
}
.FOOTER #buttn {background: rgba(0, 0, 0, .7);}
#buttn:hover {border-color: #AAA; background:  rgba(255, 255, 255, .7);}