﻿@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

body { font-family: Roboto; background: #eee; }

img { max-width: 100%; }

/**/
h2 { font-size: 50px; line-height: 1.2em; font-weight: 700; }
p { margin: 0px 0px 30px; font-size: 22px; line-height: 1.4em; }

@media only screen and ( max-width: 500px ) {
	h2 { font-size: 30px; line-height: 1.2em; }
	p { font-size: 20px; line-height: 1.4em; }
}
	
/**/
/*
body.scroll-less { padding-right: 16px; }
*/
.row .container { padding-top: 65px; padding-bottom: 65px; }

.bt:before { background: rgba(0,0,0,0.1); }

.withSplitter { margin: 46px 0px; }
.withSplitter:after { width: 550px; max-width: 100%; margin: 0 auto; }

.hightlight { font-size: 22px; font-weight: 700; line-height: 1.2em; }

.bottom-fixed { background: #263F5D; }

@media only screen and ( max-width: 500px ) {
	.hightlight { font-size: 20px; line-height: 1.2em; }
}

/**/
.stripe_whatsapp { padding: 0px; font-size: 40px; line-height: 1em; }

/**/
.tiles { display: flex; flex-wrap: wrap; justify-content: space-evenly; vertical-align: top; }
.tiles .tile { padding: 0px 0px 40px; font-family: Roboto Condensed; }
.tiles .tile .tile_title { padding: 14px 0px 2px; font-size: 30px; font-weight: 700; line-height: 1em; }
.tiles .tile .tile_title span { display: block; font-size: 40px; line-height: 1.2em; }
.tiles .tile .tile_description { padding: 0px; font-size: 18px; font-weight: 700; line-height: 1em; }

/**/
	#overlay #overlay_container .overlay_closer { background-color: #263F5D; }

/**/
#topbar { display: none; }

/**/
#header { padding: 0px; }
#header .container { padding: 0px 20px 180px; }
#header h1 { display: none; }
#header .logo-wrapper { flex-direction: unset; min-height: calc(100vh - 180px); }
#header .logo-wrapper img#logo { align-self: center; max-width: 100%; margin-top: calc(45px + 20vh); margin-bottom: 45px; }
#header .logo-wrapper img#logo-narrow { align-self: center; max-width: 100%; margin: 0 auto; margin-top: calc(45px + 20vh); margin-bottom: 45px; }

#header .trademark { position: absolute; bottom: 40px; left: calc(50% - 60px); max-width: 80%; }
#header .trademark { opacity: 0.6; filter: grayscale(1); transition: all 0.3s ease-out 0s; }
#header .trademark:hover { opacity: 1; filter: none; }

@media only screen and ( min-width: 520px ) {
	#header .logo-wrapper img.logo#logo-narrow { display: none; }
}
@media only screen and ( max-width: 520px ) {
	#header .logo-wrapper img.logo:not(#logo-narrow) { display: none; }
}

/**/
#bottom-bar .container { padding: 0px 0px 120px; }

/**/
.row.stripe_bidones { color: #00D9A3; }
.row.stripe_bidones .container { padding-top: 0px; padding-bottom: 40px; }
.row.stripe_bidones h2 { display: none; }

.row.stripe_bidones .tiles {  }

@media only screen and ( max-width: 600px ) {
	.row.stripe_bidones .tiles { flex-direction: column; padding-bottom: 30px; }
	.row.stripe_bidones .tiles .tile { padding-bottom: 10px; }
}

/**/
.row.stripe_caracteristicas { color: #fff; background: #00D9A3; }
.row.stripe_caracteristicas .container { padding-top: 80px; }
.row.stripe_caracteristicas h2 { display: none; }

.row.stripe_caracteristicas .tiles { flex-wrap: initial; flex-direction: row; padding-bottom: 20px; }
.row.stripe_caracteristicas .tiles .tile { display: flex; flex-direction: row; max-width: 374px; margin: 0 auto; padding-bottom: 60px; }
	.row.stripe_caracteristicas .tiles .tile_icon { width: 120px; }
	.row.stripe_caracteristicas .tiles .tile_content { width: calc(100% - 120px); text-align: left; }
.row.stripe_caracteristicas .tiles .tile .tile_title { padding-top: 2px; font-size: 22px; line-height: 1.2em; }
.row.stripe_caracteristicas .tiles .tile .tile_description { padding-top: 4px; font-size: 16px; font-weight: 400; line-height: 1.2em; }

.row.stripe_caracteristicas .bt { padding: 14px 34px; font-size: 22px; font-weight: 700; line-height: 1em; border: 1px solid #fff; border-radius: 100px; }

@media only screen and ( max-width: 900px ) {
	.row.stripe_caracteristicas .tiles { flex-direction: column; justify-content: center; }
}
@media only screen and ( max-width: 400px ) {
	.row.stripe_caracteristicas .tiles .tile_icon { width: 94px; text-align: left; }
	.row.stripe_caracteristicas .tiles .tile_content { width: calc(100% - 94px); }
}

/**/
.row.stripe_contacto { color: #333; }
.row.stripe_contacto .container { padding: 80px 20px 0px; }
.row.stripe_contacto h2 { display: none; }
.row.stripe_contacto h3 { margin-bottom: 30px; font-size: 24px; text-align: left; }

.row.stripe_contacto .cols { display: flex; justify-content: space-evenly; }
.row.stripe_contacto .cols .col_1, 
.row.stripe_contacto .cols .col_2 { box-sizing: border-box; width: 50%; max-width: 400px; margin: 0 auto; padding: 0px 30px 40px; background: transparent; }

.row.stripe_contacto form { max-width: 100%; margin: 0 auto; }
.row.stripe_contacto form .form-group { position: relative; padding: 0px 0px 6px; transition: all 0.3s ease-out 0s; }
.row.stripe_contacto form input,
.row.stripe_contacto form textarea { box-sizing: border-box; width: 100%; height: auto; margin: 0px; padding: 12px; color: #666; font-family: inherit; font-size: 16px; font-weight: 400; line-height: 1.2em; background: #fff; border: 0px; border-bottom: 1px solid rgba(0,0,0,0.1); border-radius: 4px; }
.row.stripe_contacto form textarea { height: 102px; margin-bottom: -5px; resize: none; }
.row.stripe_contacto form .submit_wrapper { display: flex; text-align: left; }
.row.stripe_contacto form .bt_submit { margin: 14px 0px 10px; padding: 12px 18px 14px 18px; color: #fff; font-size: 16px; font-weight: 400; line-height: 1em; text-align: center; background-color: #333; border: 0px; border-radius: 4px; transition: all 0.3s ease-out 0s; }
.row.stripe_contacto form .bt_submit:hover { _opacity: 0.7; _background: rgba(255,255,255,0.30) !important; }
.row.stripe_contacto form .bt_submit:not(.disable) { cursor: pointer; }

.row.stripe_contacto form .contact_form_element_validation { display: none; position: absolute; bottom: 9px; right: 3px; color: red; font-family: Arial; font-size: 11px; line-height: 1em; }
.row.stripe_contacto form .contact_form_element_validation:empty { display: none; }
.row.stripe_contacto form.advising .withError + .contact_form_element_validation { display: block; }

.row.stripe_contacto form .legend { margin: 10px 0px 0px 0px; opacity: 0.5; }

.row.stripe_contacto .adviser { display: inline-block; width: 100%; margin: 0px; padding: 10px 0px 0px; color: #666; font-size: 13px; line-height: 1.2em; text-align: left; background: transparent; z-index: 3; }
.row.stripe_contacto .adviser:empty { display: none; }
.row.stripe_contacto .adviser .command { cursor: pointer; }

.row.stripe_contacto .contact_info {  }
.row.stripe_contacto .item { display: flex; align-items: center; padding: 0px 0px 16px; }
.row.stripe_contacto .item .item_icon { display: flex; align-items: center; width: 54px; padding: 2px 20px 0px 0px; }
.row.stripe_contacto .item .item_content { display: flex; align-items: center; font-size: 16px; line-height: 1.2em; text-align: left; }
.row.stripe_contacto .item .item_content a { color: #333; }

@media only screen and ( max-width: 800px ) {
	.row.stripe_contacto .cols { flex-direction: column; }
	.row.stripe_contacto .cols .col_1, 
	.row.stripe_contacto .cols .col_2 { width: 100%; max-width: 340px; padding: 0px 0px 40px; }
}

/**/
.row.stripe_ama .container { max-width: none; padding: 0px; }
.row.stripe_ama .container img { width: 100%; max-width: none; }

/**/
#bottom-bar {  }
#bottom-bar .container { padding: 0px 20px 40px; text-align: right; }
#bottom-bar a { opacity: 1; }
#bottom-bar a:hover { opacity: 0.7; }
#bottom-bar img:hover { transform: none; }

/**/
.floating-icon a { position: fixed; top: 38vh; left: -10px; width: 60px; height: 50px; padding: 8px; text-align: right; background: #65BC54; border-top-right-radius: 100px; border-bottom-right-radius: 100px; transition: all 0.3s ease-out 0s; }
.floating-icon a:hover { left: 0px; }

@media only screen and ( max-width: 800px ) {
	.floating-icon a { top: 12vh; }
}
