body {background-image: url(/assets/img/home-header.png); font-family: 'Gruppo';}
.fondo { position: fixed; left: 0px; top: 0px; opacity: 1; width: 102%; height: 100%; bottom: auto; right: auto; }

.contenido { text-align: center; top: 0;right: 0;position: absolute;width: 100%; }

.logo {
    width: 3%;
    margin: 15px 30px;
    float: right;
    filter: grayscale(100%);
}

.logo:hover {    filter: grayscale(80%);}

.descripcion {font-family: 'Gruppo';color: #666;font-size: 20px;line-height: 25px;font-weight: normal;margin-top: 7px;padding: 0;}

.email { text-decoration: none;font-family:'Gruppo';color:#666;float: left; padding-left: 20px; font-weight: normal; font-size: 20px;}

.email:hover { color:#999;text-shadow: none; }

.pie {left: 0;position: fixed;text-align: center;bottom: 0;width: 100%;height: 40px; }

.copyright { top: 0; position: absolute; padding-left: 10px; font-family: Montserrat; font-size: 12px; color: #f1f1f1; }

.copyright a { font-weight: 900; }

a { color: #fff; text-decoration: none;}

a:hover {color:#ccc;}

svg path, svg ellipse { fill-opacity: 0; stroke: #1476bc; stroke-width: 3; stroke-dasharray: 4000px; stroke-dashoffset: 4000px; animation: draw 10s linear infinite forwards; }

@keyframes draw {

  to { stroke-dashoffset: 0; }

  30%{ fill-opacity: 0; }

  35%, 100%{ fill-opacity: 1; }

}

#xto-box { display: table-cell; vertical-align: middle; }

#xto-container { margin: auto; display: table!important; height: 800px; }

svg path, svg ellipse { fill-opacity: 0.5; stroke: rgb(255, 255, 255); stroke-width: 3;stroke-dasharray: 4000px; stroke-dashoffset: 4000px; animation: draw 10s linear infinite forwards; }

.home-titles {
    position: relative;
    display: inline-block;
    width: 100%;
    padding: 0;
    margin-top: 20px;
}
.home-title {
    display: inline-block;
    width: 13%;
    font-size: 17px;
    text-transform: uppercase;
    color: rgb(132, 132, 132);
}
.home-title::after {
    content: "";
    position: absolute;
    top: 53%;
    display: block;
    width: 1px;
    height: 100%;
    transform: translateY(-50%);
    background-color: #aaa;
}
  .home-title:first-child::after {
    content: none; 
}
p.slogan {    
	font-size: 20px;
    margin: 0;
    color: rgb(132, 132, 132);
	font-weight: bold;
}
p.info{    
	font-size: 18px;
    color: rgb(132, 132, 132);
	margin: 10px 0;
	line-height: 23px;
	font-weight: normal;
}
p.points{
   color: rgb(132, 132, 132);
    line-height: 5px;
    margin: 0;
    padding: 0;
    margin-top: -7px;
}
#video {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
	object-fit: cover;
}
@media only screen and (max-width: 1024px) {
	#video {display: none; }
}
@media only screen and (max-width: 768px) {
	svg.x {width: 105px;}
	svg.t {width: 90px;}
	svg.o {width: 105px;}
    svg.o .oi {fill: rgb(55, 54, 57) !important; }
	.home-title {
		display: list-item;
		width: 100%;
		font-size: 37px;
		text-align: left;
		padding-left: 40px;
	}
	#xto-container { 
		height: auto;
		width: 100%;
	}
	.contenido, .pie, .copyright { 
		position: initial;
	}
  .home-title::after {
		content: none; 
	}
	.email { font-size: 20px; }
	.logo {
		width: 70px;
		margin: -20px 0 0;
	}
	.home-titles {
		margin-top: -55px;
		padding-left: 130px;
		list-style: none;
	}
	p.slogan {
		line-height: 25px;
	}
	.descripcion {
		margin-top: 30px;
	}
	.copyright { 
		margin-bottom: 30px;
	}
}
@media only screen and (max-width: 480px) {
	p.slogan, p.info {display: none; }
	.home-titles { padding: initial; }
}