html{ font-size: 16px!important; }
h1{ font-size: 1.4rem!important; } h2{ font-size: 1.2rem!important; } h3{ font-size: 1rem!important; } h4{ font-size: .9rem!important; }

@font-face { font-family:Roboto; src:url(fonts/GothamMedium.ttf); font-style:normal; }
* { transition: all .2s ease-in-out; }
*:not(i) { font-family: 'Gotham Medium', sans-serif!important; }

button:hover{cursor: pointer!important;}

button * { vertical-align: text-top; }

.btn{
    padding: 1rem!important;
    border: none!important;
    background: -webkit-linear-gradient(0deg, #2a456b, #3aceff)!important;
    color: #fff!important;
    border-radius: 2rem!important;
    cursor: pointer!important;
    font-size: 1.2rem!important;
}

body {
	min-height: 100vh;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;

	/* Color Palette Variable Declaration */
	--p-turquoise: #3aceff;
	--p-blue: #2a456b;
	--p-gray: #5f5f5f;
}


/* NEW CLASSES start */

.title-1-light { font-size: 4rem !important; margin-bottom: 2rem; }
.title-1 { font-size: 4rem !important; font-weight: 600; margin-bottom: 4rem; }
.title-2 { font-size: 3rem !important; font-weight: 600; margin-bottom: 3rem; }

.text-white { color: #fff !important; }
.text-gray { color: #5f5f5f !important; }
.text-turquoise { color: #3aceff !important; }

.btn-not-btn { background-color: #fff; border: 2px solid #fff; }

.big-btn {
	font-size: 1.2rem !important;
	font-weight: 600 !important;
	padding: 1.2rem 4rem;
	border: none;
	border-radius: 2rem !important;
}

.medium-btn {
	font-size: 1rem !important;
	padding: .6rem 1rem;
	border: none;
	border-radius: 2rem !important;
}

.white-btn {
    background-color: #fff !important;
	color: var(--p-turquoise)!important;
	transition: all .2s ease-in-out;
} .white-btn:hover {
	filter: drop-shadow(0 0 10px rgba(255, 255, 255, .5))!important;
}

.transparent-btn {
	background: transparent !important;
	border: 2px solid #fff !important;
	color: #fff !important;
	transition: all .2s ease-in-out;
} .transparent-btn:hover {
	background-color: #fff !important;
	color: var(--p-blue) !important;
}

.grad-btn {
	background: linear-gradient(0deg, #2a456b, #3aceff);
	background: -webkit-linear-gradient(0deg, #2a456b, #3aceff);
	background: -moz-linear-gradient(0deg, #2a456b, #3aceff);
	background: -o-linear-gradient(0deg, #2a456b, #3aceff);
	color: #fff !important;
} .grad-btn:hover { filter: drop-shadow(0 0 10px #3aceff); }


.grad-border-wrapper {
	padding: 2px;
	background: linear-gradient(0deg, #2a456b, #3aceff);
	background: -webkit-linear-gradient(0deg, #2a456b, #3aceff);
	background: -moz-linear-gradient(0deg, #2a456b, #3aceff);
	background: -o-linear-gradient(0deg, #2a456b, #3aceff);
	border-radius: 4rem;
}
.grad-border-wrapper:first-child { background-color: #fff !important; }
.grad-border-wrapper button {transition: all .2s ease-in-out !important; }

.grad-border-wrapper button:hover,
.grad-border-wrapper button.active { color: #fff; background: transparent; }

.grad-bg {
	background: linear-gradient(0deg, #2a456b, #3aceff);
	background: -webkit-linear-gradient(0deg, #2a456b, #3aceff);
	background: -moz-linear-gradient(0deg, #2a456b, #3aceff);
	background: -o-linear-gradient(0deg, #2a456b, #3aceff);
}

i.grad-icon, span.grad-icon {
	background: linear-gradient(0deg, #2a456b, #3aceff);
	background: -webkit-linear-gradient(0deg, #2a456b, #3aceff);
	background: -moz-linear-gradient(0deg, #2a456b, #3aceff);
	background: -o-linear-gradient(0deg, #2a456b, #3aceff);
	background-clip: text;
	-webkit-background-clip: text;
	-moz-background-clip: text;
	-webkit-text-fill-color: transparent;
} i.grad-icon:before, span.grad-icon:before { display: inline; }

.btn-invisible { background: transparent!important; border: none !important; }
.btn-with-icon:hover i { filter: drop-shadow(0 0 10px #3aceff); }

.form-card {
	background-color: #fff !important;
	padding: 2rem !important;
	border-radius: 1rem !important;
}

.form-row { margin-bottom: 3rem !important; }

.white-round-input { border: none !important; border-radius: 2rem !important; }

.medium-input {
    font-size: 1rem !important;
	padding: .6rem 1rem;
	border: none;
	border-radius: 2rem !important;
}

.input-ctrl {
	font-size: 1.1rem;
	border: none !important;
	border-bottom: 2px solid #cdcdcd !important;
	padding: .5rem;
	transition: all .2s ease-in-out;
} .input-ctrl:focus {
	border: none !important;
	border-bottom: 2px solid var(--p-turquoise)!important;
}

.label-ctrl { margin-bottom: 1rem !important; }


/* NEW CLASSES end */


.login-bg { background-image: url("../img/login-bg.jpg"); }
.register-bg { background-image: url("../img/register-bg.jpg"); }
.client-register-bg { background-image: url("../img/client-register-bg.jpg"); }
.natural-step-2 { background-image: url("../img/natural-paso-2-fondo.jpg"); }
.natural-step-3 { background-image: url("../img/natural-paso-3-fondo.jpg"); }
.legal-step-2 { background-image: url("../img/juridico-paso-2-fondo.jpg"); }
.legal-step-3 { background-image: url("../img/juridico-paso-3-fondo.jpg"); }

.web-spacing { padding: 1rem !important; }

header .uk-width-1-1 { padding: .2rem; }

#languageSwitchb, #languageSwitchb a {
    text-decoration: none;
	font-weight: 600;
	font-size: 1rem;
	transition: all .15s ease-in-out;
	color: #3895c0!important; 
}
#languageSwitchb a:hover {
    color: #fff!important;
	text-decoration: none;
	filter: drop-shadow(0 0 2px #2a456b);
}

#languageSwitchb a img { height: 20px; }

#languageSwitch, #languageSwitch a {
    text-decoration: none;
	font-weight: 600;
	font-size: 1rem;
	transition: all .15s ease-in-out;
	color: #fff!important; 
}

#languageSwitch a:hover {
    color: #fff!important;
	text-decoration: none;
	filter: drop-shadow(0 0 2px #2a456b);
}

#languageSwitch a img { height: 20px; }

main .uk-grid { margin-top: 4rem; }

.form-side .uk-grid { margin-top: 0; }

.form-box {
	background-color: #fff;
	padding: 3rem 2.8rem;
	filter: drop-shadow(0 0 20px rgba( 0, 0, 0, .15)) !important;
	border-radius: 15px;
}

.form-nav a h2 {
	font-weight: 600;
	border-bottom: 2px solid #fff;
	transition: all .15s ease-in-out;
}

.form-nav a:hover { text-decoration: none; }

.form-nav a h2:hover { border-bottom: 2px solid var(--p-gray); }

.form-nav a h2:has(.form-nav-active):hover { border-bottom: 2px solid var(--p-turquoise); }

.form-nav-active {
	color: var(--p-turquoise);
	border-bottom: 2px solid var(--p-turquoise) !important;
}

#register-form input.uk-width-1-2 {
	margin-left: .5em !important;
	margin right: .5em !important;
}

#login-form .uk-grid div.uk-width-1-1 { margin: 25px 0 !important; }

#register-form .uk-grid div.uk-width-1-1 { margin: 15px 0 !important; }

form .uk-grid div.uk-width-1-1:last-of-type { border: none; }

.form-icon { height: 25px; }

.form-icon img { height: 100%; }

form .uk-grid div.uk-width-1-1 input, form button { height: 3rem; }
	
/* Hide HTML5 Up and Down arrows. */
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
 
input[type="number"] {
    -moz-appearance: textfield;
}

form .uk-grid div.uk-width-1-1 input {
	border: none;
	border-bottom: 2px solid var(--p-gray);
	border-radius: 0;
	font-size: 1.2em;
	transition: all .15s ease-in-out;
}

form .uk-grid div.uk-width-1-1 input:focus { border-bottom: 2px solid var(--p-turquoise); }

/*form button {
	margin-top: 2rem;
	background: linear-gradient(0deg, #2a456b, #3aceff);
	background: -webkit-linear-gradient(0deg, #2a456b, #3aceff);
	background: -moz-linear-gradient(0deg, #2a456b, #3aceff);
	background: -o-linear-gradient(0deg, #2a456b, #3aceff);
	border: none;
	border-radius: 50px;
	color: #fff;
	font-weight: 600;
	font-size: 1.5em;
	transition: all .15s ease-in-out;
}*/

form button:hover { filter: drop-shadow(0 0 2px #3aceff); }


/* LARGE and bigger breakpoint */
@media screen and (min-width: 960px) {
	.form-box { width: 25rem; }
}

/* MEDIUM and smaller breakpoint */
@media screen and (max-width: 959px) {
	.login-bg { background-image: url("../img/login-bg-mobile.jpg"); } .register-bg { background-image: url("../img/register-bg-mobile.jpg"); }
}

/* SMALL and smaller breakpoint */
@media screen and (max-width: 767px){
	body {
		background-position: 0 100%;
	}
	
	.form-box {
		padding: 40px 25px;
	}
}