@font-face {
	font-family: 'Roboto-Regular';
	font-style: normal;
	font-weight: normal;
	src: url('Roboto-Regular.ttf') format('truetype');
	font-display: swap;
}

@font-face {
	font-family: 'Repsol-Regular';
	font-style: normal;
	font-weight: normal;
	src: url('Repsol-Regular.woff') format('woff'), url('Repsol-Regular.otf') format('opentype');
	font-display: swap
}

* {
	-webkit-font-smoothing: antialiased;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'titilliumregular';
	list-style: none;
}

body {
	float: left;
	max-width: 1280px;
	width: 100%;
	position: relative;
}

section {
	position: relative;
	float: left;
	width: 1280px;
	height: 720px;
	background-image: url(../img/fondo.png);
	background-repeat: no-repeat;
	background-size: contain;
}
sub{
	font-family: 'Repsol-Regular';
}
article {
	float: left;
	position: absolute;
	width: 100%;
	height: 100%;
}

ul {
	position: relative;
	float: left;
	width: 100%;
	height: 100%;
}

li {
	position: absolute;
}

li span {
	float: left;
}

.salta {
	width: 100%;
}

/* TAMAÑOS */

.tam1 {
	font-size: 14px;
}

.tam2 {
	font-size: 18px;
}

.tam3 {
	font-size: 24px;
}

.tam4 {
	font-size: 28px;
}
.tam5 {
	font-size: 44px;
}

/* FUENTES */

.roboto {
	font-family: 'Roboto-Regular';
}

.repsol {
	font-family: 'Repsol-Regular';
}

/* COLORES */

.blanco {
	color: #fff;
}

.marron {
	color: #757575;
}

.turquesa {
	color: #00809a;
}

.amarillo {
	color: #ffb81c;
}

/* POSICIONES */

#texto1 {
	left: 4%;
	top: 6%;
}
#texto2 {
	left: 28%;
	top: 6.5%;
}
#texto3 {
	left: 47%;
	top: 6%;
}
#texto3b {
	left: 46.8%;
	top: 12%;
}
#texto4 {
	left: 70%;
	top: 6.6%;
}
#texto5 {
	left: 4%;
	top: 46%;
}
#texto6 {
	left: 21.2%;
	top: 45%;
}
#texto7 {
	left: 40%;
	top: 45%;
}
#texto8 {
	left: 65%;
	top: 45%;
}
#texto8a {
	left: 62%;
	top: 51%;
}
#texto8b {
	left: 82%;
	top: 51%;
}
#texto8c {
	left: 72%;
	top: 60%;
}
#texto9 {
	left: 4%;
	top: 69%;
}
#texto10 {
	left: 43%;
	top: 74%;
}
#texto11 {
	left: 63%;
	top: 72%;
}
#texto12 {
	left: 83%;
	top: 74%;
}
.fondor{
	display: none;
}

.titulo, .titulo2, .titulo3{
	display: none;

}
@media (max-width: 1100px) {
	body{
		height: 620px;
	}
}
@media (max-width: 1000px) {
	body{
		height: 570px;
	}
}
@media (max-width: 900px) {
	body{
		height: 510px;
	}
}
@media (max-width: 800px) {
	body{
		height: 460px;
	}
}
@media (max-width: 737px) {
	body{
		height: auto;
	}
	section{
		width: 100%;
		height: auto;
		background: none;
	}
	article{
		position: relative;
	}
	li{
		position: relative;
		float: left;
		top: inherit!important;
		left: inherit!important;
		width: 100%;
		margin-bottom: 10px;
		padding: 0 10px;
	}
	.salta{
		width: auto;
	}
	li span, li span span{
		font-size: 16px!important;
		margin: 0!important;
		position: initial!important;
		color: #757575!important;
		line-height: initial!important;
		font-family: 'Roboto-Regular'!important;
		text-align: left!important;
	}
	br {
		content: " ";
		display: none;
	}
	.res{
		color: #00809a!important;
		font-weight: 800;
	}

	#texto1 .tam5, #texto2 .tam5, #texto3 .tam5, #texto3b .tam5, #texto4 .tam5 {
		color: #E4002B!important;
		font-weight: 400;
	    font-size: 24px!important;
	    font-family: 'Repsol-Regular'!important;
	    line-height: 18px!important;
	}

	 .titulo{
		color: #757575!important;
		font-weight: 100;
	    font-size: 24px!important;
	    font-family: 'Repsol-Regular'!important;
	    margin-left: 10px;
	    margin-bottom: 4px;
	    display: block;
	}
	.titulo2{
		color: #00809a!important;
		font-weight: 100;
	    font-size: 24px!important;
	    font-family: 'Repsol-Regular'!important;
	    margin-left: 10px;
	    margin-bottom: 4px;
	    display: block;
	}
	.titulo3{
		color: #ffb81c!important;
		font-weight: 100;
	    font-size: 24px!important;
	    font-family: 'Repsol-Regular'!important;
	    margin-left: 10px;
	    margin-bottom: 4px;
	    display: block;
	}


	#texto5 .tam5, #texto6 .tam5, #texto7 .tam5 {
		color: #757575!important;
		font-weight: 400;
	    font-size: 24px!important;
	    font-family: 'Repsol-Regular'!important;
	    line-height: 18px!important;
	}
	#texto8a .tam3, #texto8b .tam3, #texto8c .tam3 {
		font-weight: 400;
	    font-size: 24px!important;
	    font-family: 'Repsol-Regular'!important;
	    line-height: 18px!important;
	}

	#texto9 .tam5, #texto10 .tam5, #texto11 .tam5, #texto12 .tam3{
		color: #ffb81c!important;
		font-size: 24px!important;
	    font-family: 'Repsol-Regular'!important;
	    line-height: 18px!important;
	    font-weight: 400;
	}

	.fondor{
		display: inherit;
		width: 100%;
	}
	.trans{
		display: none;
	}
	sub{
		line-height: 30px;
		position: absolute;
	}
}