@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap');

:root {
	--primarybutton-color:#A109FE;
	--primarybutton-hover:#7401bb;
	--secondarybutton-color:#1D67FF;
	--secondarybutton-color-hover:#1d56cb;
	--black-color:#000;
	--white-color:#fff;
	--grey-bg:#F5F6F7;
	--purple-bg:#FFDFF2;
	--bradius:20px;
}
html {
	scroll-behavior: smooth;
}
body {
	font-family: 'Open Sans', sans-serif;
	font-weight:600;
	font-size:1.25rem;
	margin:0;
	padding:0;
	box-sizing: border-box;

	--bigtitle-size:3.875rem;
	--title-size:2.75rem;
	--smalltitle-size:1.75rem;
}

h1, h2, h3, h4, h5, h6 {
	margin-top:0;
}

/*general classes*/
.bradius {
	border-radius:var(--bradius);
}

.grey-bg {
	background:var(--grey-bg);
}

.purple-bg {
	background:var(--purple-bg);
}

.purple-color {
	color:var(--primarybutton-color);
}

.blue-color {
	color:var(--secondarybutton-color);
}

.centeralign {
	text-align:center;
}

.mspace-bottom {
	margin-bottom:calc(2vw + 30px);
} 

.space-bottom {
	margin-bottom:calc(3vw + 30px);
}

.bigspace-bottom {
	margin-bottom:calc(4vw + 50px);
}

/*buttons*/
.primary-button {
	color:#fff;
	font-size:.875rem;
	text-transfrom:uppercase;
	padding:8px 30px 9px 30px;
	background:var(--primarybutton-color);
	border-radius:30px;
	text-decoration:none;
	transition:.2s background linear;
	display:inline-block;
	text-transform:uppercase;
}

.primary-button:hover {
	background:var(--primarybutton-hover);
}

.secondary-button {
	display:inline-block;
	color:var(--secondarybutton-color);
	font-size:.85rem;
	text-transform:uppercase;
	padding:4px 15px 4px 15px;
	transition:.2s background linear;
}
.secondary-button:hover {
		background:var(--secondarybutton-hover);
}

.container {
    max-width: 1320px!important;
    width: 100%;
}

.container.nopad {
	padding-left:0!important;
	padding-right:0!important;
}

.pad-left-right {
	padding-left:calc(3vw + 15px);
	padding-right:calc(3vw + 15px);
}


/*header*/

header {
	padding:30px 0;
}

header nav ul {
	list-style-type:none;
	margin:0;
	padding:0;
	display:flex;
	flex-flow:row;
	justify-content:flex-end;

}

header nav ul li {
margin-left:max(15px,5%);
}

header nav ul li a {
	text-transform:uppercase;
	text-decoration:none;
	font-size:14px;
	color:#000;

}

#hero-section h2 {
	font-size:2.625rem;
}

#hero-section h1 {
	font-size:20rem;
	line-height:.8;
	margin-bottom:0;
}

#hero-section img {
	position:relative;
	margin-top:-80px;
}

#hero-section p {
	max-width:1000px;
	margin: 0 auto;
	font-size:var(--smalltitle-size);
}

#hero-section .secondary-button {
	margin-top:30px;
}
#hero-section .primary-button {
	margin-top:30px;
}

#bg-claim .container {
	max-width:1200px!important;
}
#bg-claim .video-container {
	height: 0;
	overflow: hidden;
	padding-bottom: 56.25%;
	position: relative;
} 

#bg-claim .video-container iframe {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

#bg-claim h2 {
	color:#fff;
	font-size:var(--bigtitle-size);
}

#benefits h2 {
	font-size:var(--bigtitle-size);
	line-height:1.3;
	margin-bottom:20px;
}

#benefits .primary-button {
	margin-top:40px;
}

#benefits .title {
	margin-bottom:calc(3vw + 30px);
}

#benefits .benefits-container > div {
	height:520px;
	margin-bottom:20px;
}
#benefits .benefits-container > div > div {
	padding:50px 30px;
	height:100%;
}
#benefits .bg-water {
	background:url(../assets/img/works-water.jpg) center center no-repeat;
	background-size:cover;
}

#benefits .benefits-container h3 {
	font-size:var(--title-size);
    line-height: 1.2;
    margin-bottom: 25px;
}

#benefits .bg-years {
	background:url(../assets/img/guarantee-v2.png) right bottom no-repeat,#F5F6F7;
	background-size:250px;
}

#benefits .bg-setup {
	background:url(../assets/img/simplified-setup.svg) right bottom no-repeat,#F5F6F7;
	background-size:300px;
}

#benefits .bg-frequencies {
	background:url(../assets/img/one-tag-frequencies.png) right bottom no-repeat,var(--purple-bg);
}

#easy-multisport > .container > .row {
	align-items:flex-end;
}
#easy-multisport .text-left {
	padding-right:40px;
}
#easy-multisport .text-left h2 {
	font-size:var(--title-size);
}

#easy-multisport .text-left .primary-button {
	margin-top:20px;
}

#easy-multisport .image-right img {
	max-width:600px;
	width:100%;
	float:right;
}

#easy-multisport .medidas {
	margin-top:40px;
	position:relative;
}

#easy-multisport .medidas .meters {
    position: absolute;
    top: 60px;
    left: 220px;
}

#features > .container {
	padding-top:calc(3vw + 30px);
	padding-bottom:calc(2vw + 180px);
	background:url(../assets/img/time-triton.png)bottom left no-repeat,var(--grey-bg);
	background-size:700px;
}

#features h2 {
	font-size:var(--title-size);
}

#features .primary-button {
	margin-top:20px;
}

#features .features-container > div {
	padding-right:calc(2vw + 30px);
}

#features .features-container h3 {
	font-size:var(--smalltitle-size);
}

#features .features-container p {
	font-size:16px;
}
#guarantee .container {
	background:#000;
	color:#fff;
}

#guarantee .centeralign {
	padding-top:calc(3vw + 30px);
	padding-bottom:calc(3vw + 30px);
}

#guarantee img {
	width:100%;
    display: block;
}

#guarantee h2 {
	font-size: var(--title-size);
}

#guarantee h2 .megabig {
	font-size:20rem;
	display:block;
	line-height: 1;
}

#guarantee .primary-button {
	margin-top:20px;
}

#compatibilities h2 {
	font-size: var(--title-size);
}

#compatibilities .primary-button {
	margin-top:20px;
}

#compatibilities .image-right {
	text-align: right;
	margin-top:-300px;
}

#compatibilities .image-right img {
	width:100%;
	max-width:500px;
}

#opinions h2 {
	font-size:var(--title-size);
}

#opinions .text-left {
	position: relative;
}

#opinions .text-left:before {
	content:"";
	width:300px;
	height: 300px;
	position: absolute;
	left: calc(-3vw - 15px);
	top:-80px;
	background:url(../assets/img/what-timers-saying.svg) center center no-repeat;
	background-size:contain;
}

#opinions .text-left * {
	position: relative;
	z-index: 2;
}

#opinions .testimonials-container {
	margin-top:50px;
}

#opinions .testimonial {
	padding:50px 30px;
	background:var(--grey-bg);
	height:100%;
}

#opinions .testimonial .testimonial-name {
	color:#9999A9;
}

#opinions .secondary-button {
	margin-top:40px;
}

#contact > .container {
	padding:80px calc(3vw + 30px);
	background: #A109FE;
}

#contact h2 {
	font-size:var(--title-size);
	color:var(--white-color);
}

#contact p {
	color:#fff;
}

.form-row input[type="text"], 
.form-row input[type="tel"],
.form-row input[type="email"] {
	border:none;
	padding:10px 35px;
	border-radius:10px;
	width:100%;
	font-size: 1.125rem;
	margin-bottom:20px;
}

.form-row.validation-checkbox {
	margin-bottom:20px;
}

.form-row.validation-checkbox label {
	position:relative;
	padding-left:35px;
	color:#fff;
	font-size:1rem;
}

.form-row.validation-checkbox input {
	appearance:none;
	width:20px;
	height:20px;
	border-radius:3px;
	background:#fff;
	position:absolute;
	left:0;
	top:-2px;
}

.form-row.validation-checkbox input:checked {
    	box-shadow: inset 3px 3px #fff, inset -3px -3px #fff;
    	background:#009DFF;
}

.button-input input[type="submit"] {
	appearance:none;
	padding:15px 40px;
	background:#009DFF;
	border-radius:100px;
	color:#fff;
	text-transform:uppercase;
	color:#fff;
	border:none;
	margin-top:20px;
}

footer {
	padding:30px 0;
	font-size:1rem;
}

footer .row {
align-items: center;
}

footer .logo {
	text-align:right;
}

@media (max-width:1030px) {
	#hero-section h1 {
		font-size:15rem;
	}

	#hero-section img {
		max-width:500px;
	}

	#benefits .benefits-container h3 {
		font-size:2.2rem;
	}
}


@media (max-width:767px) {
	body {
		--bigtitle-size:2.8rem;
		--title-size:2.2rem;
		--smalltitle-size:1.5rem;
		font-size:1.125rem;
	}
	header img {
		max-width:150px;
	}
	header nav ul li.header-button {
		margin-left:0;
	}
	header nav ul li:not(.header-button) {
			display:none;
	}

	#hero-section h2 {
    		font-size: 2.2rem;
    		line-height:1.2;
	}

	#hero-section h1 {
		font-size:6rem;
	}

	#hero-section img {
		max-width:280px;
		margin-top:-30px;
	}	

	#hero-section p {
		font-size: 1.25rem;
	}

	

	#easy-multisport .medidas {
		display:none;
	}

	#benefits .bg-frequencies {
		background-size: 400px;
	}

	#easy-multisport .image-right {
		margin-top:40px;
	}

	#features .primary-button {
		margin-bottom:40px;
	}

	#features > .container {
	    background: url(../assets/img/time-triton.png) -100px bottom no-repeat,var(--grey-bg);
	    background-size:500px;
	}

	#compatibilities .image-right {
		margin-top:-80px;
		order:1;
		text-align:center;
		margin-bottom:40px;
	}
	#compatibilities .image-right img {
		max-width: 300px;
	}

	#compatibilities .text-left {
		order:2;
	} 

	#opinions {
		margin-top:120px;
	}

	#opinions .testimonials-container {
		margin-top:100px;
	}

	#opinions .testimonial {
		margin-bottom:30px;
	}

	footer {
		text-align:center;
	}

	footer .logo {
		text-align: center;
		margin-top:30px;
	}

	.pad-left-right {
		padding-left:15px;
		padding-right:15px; 
			}




}