body
{
	background: #ffffff;
	color: #595a5c;
}

#barra-logo
{
	position: relative;
	float: left;
	width: 100%;
	padding-top: 15.16%; /*image heigth (194) / image width (1280) x 100-*/
	background-color: #5e5e5e;
}

#logo {
	position: absolute;
	top:31%;
    height: 38%; /*prueba y error en base al diseño de 1280px*/
	left: 40%;
	width: 20%;
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
}

#bloque-texto1-hosting
{
	position: relative;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	height: 18.75vw;
	background-color: #ffffff;
	
	font-family: 'karlaregular';
	text-align: center;
    color: #5e5e5e;
    font-size: 1.8vw;
    line-height: 130%;
}

#texto1-hosting-a
{
	position: relative;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	top:60%;
	opacity: 0;
}

#texto1-hosting-b
{
	position: relative;
	margin-left: auto;
	margin-right: auto;
	top:60%;
	opacity: 0;
}

#texto1-hosting-c
{
	position: relative;
	margin-left: auto;
	margin-right: auto;
	top:60%;
	opacity: 0;
}

#imagen1Hosting {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    padding-top: 66.72%; /*image heigth / image width x 100-*/
    overflow: hidden;
}

#BotonAbajoHome
{
	position: absolute;
	top:-4.2%;
    height: 8.4%; /*prueba y error en base al diseño de 1280px*/
    
    left: 47.8%;
    width: 4.7%;
    
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer;
}

.seccionPlan
{
	position: absolute; /*relative*/
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	padding-top: 4%;
	padding-bottom: 1%;
	font-family: 'karlaregular';
}

.NombrePlan
{
	position: absolute;
	left: 32.55%;
	width: 24%;
	margin-top: 2%;
	
	text-align: left;
	letter-spacing: 0.2em;
	font-size: 2.4vw;
}

.PrecioPlan
{
	position: absolute;
	float: left;
	left: 32.55%;
	margin-top: 5%;
	width: 24%;

	text-align: left;
	letter-spacing: 0.05em;
	font-size: 1.7vw;
	font-weight: bold;
}

.DescPlan
{
	position: absolute;
	float: left;
	left: 64%;
	margin-top: -2%;
	width: 27%;
	text-align: left;
	letter-spacing: 0.05em;
	line-height: 1.6em;
	
	font-size: 1.4vw;
}

#DescBasico
{
	padding-top: 1em;
}

#seccionBasico
{
	background-color: #00addb;
	color: #ffffff;
	top: 50%;
	/*margin-top: 10vw;*/
	opacity: 0;
	
	padding-top: 2.5%;
	padding-bottom: 2.5%;
}

#seccionAvanzado
{
	background-color: #d6eef1;
	color: #5d5e5e;
	top: 75%;
	/*margin-top: 10vw;*/
	opacity: 0;
	
	padding-bottom: 3.5%;
}

#seccionProfesional
{
	background-color: #5e5e5e;
	color: #d6eef1;
	top: 100%;
	/*margin-top: 10vw;*/
	opacity: 0;
	
	padding-bottom: 3.5%;
}

#seccionEmpresarial
{
	background-color: #e9e9ea;
	color: #5e5e5e;
	top: 125%;
	/*margin-top: 10vw;*/
	opacity: 0;
	
	padding-bottom: 3.5%;
}

.iconoPlan
{
	position: relative;
	float: left;
	/*margin-top: 2.7%;*/
	margin-left: 15.2%;
	width: 9.9%;
	padding-top: 2%;
	padding-bottom: 2%;
	
	text-align: center;
	font-size: 4.5vw;
    font-weight: bold;
	border-width: 2px;
	border: solid white;
}

#iconoBasico
{
	background-color: #f15b29;
	color: #ffffff;
}

#iconoAvanzado
{
	background-color: #00aeef;
	color: #ffffff;
}

#iconoProfesional
{
	background-color: #d6eef1;
	color: #5e5e5e;
}

#iconoEmpresarial
{
	background-color: #4256a5;
	color: #ffffff;
}

.flechita {
	position: absolute;
	top:47%;
    height: 6.5%; /*prueba y error en base al diseño de 1280px*/
	left: 57%;
	width: 2%;
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
}

@media only screen and (max-width : 480px) /*low res*/
{
#logo {
    background-image: url("../../images/480/LogoHosting.png");
    /*background-image: url("../../images/480/LogoHomeTest.png");*/
	}
#imagen1Hosting {
	background-image: url("../../images/480/FotoHosting1.jpg");
	}
#BotonAbajoHome {
	background-image: url("../../images/480/BotonAbajoHome.png");
	}
#flechitaBlanca {
	background-image: url("../../images/480/flechitaBlanca.png");
	}
#flechitaGris {
	background-image: url("../../images/480/flechitaGris.png");
	}
#flechitaCyan {
	background-image: url("../../images/480/flechitaCyan.png");
	}	
}

@media only screen and (min-width : 480px) and (max-width : 768px) /*high end smarphones & portrait iPads*/
{
#logo {
    background-image: url("../../images/768/LogoHosting.png");
    /*background-image: url("../../images/768/LogoHomeTest.png");*/
	}
#imagen1Hosting {
	background-image: url("../../images/768/FotoHosting1.jpg");
	}
#BotonAbajoHome {
	background-image: url("../../images/768/BotonAbajoHome.png");
	}	
#flechitaBlanca {
	background-image: url("../../images/768/flechitaBlanca.png");
	}
#flechitaGris {
	background-image: url("../../images/768/flechitaGris.png");
	}
#flechitaCyan {
	background-image: url("../../images/768/flechitaCyan.png");
	}
}

@media only screen and (min-width : 768px) and (max-width : 1024px) /*Tablets, landscape iPads*/
{
#logo {
    background-image: url("../../images/1024/LogoHosting.png");
    /*background-image: url("../../images/1024/LogoHomeTest.png");*/
	}
#imagen1Hosting {
	background-image: url("../../images/1024/FotoHosting1.jpg");
	}
#BotonAbajoHome {
	background-image: url("../../images/1024/BotonAbajoHome.png");
	}	
#flechitaBlanca {
	background-image: url("../../images/1024/flechitaBlanca.png");
	}
#flechitaGris {
	background-image: url("../../images/1024/flechitaGris.png");
	}
#flechitaCyan {
	background-image: url("../../images/1024/flechitaCyan.png");
	}
}

@media only screen and (min-width : 1024px) and (max-width : 1280px) /*Desktop*/
{
#logo {
    background-image: url("../../images/1280/LogoHosting.png");
    /*background-image: url("../../images/1280/LogoHomeTest.png");*/
	}
#imagen1Hosting {
	background-image: url("../../images/1280/FotoHosting1.jpg");
	}
#BotonAbajoHome {
	background-image: url("../../images/1280/BotonAbajoHome.png");
	}	
#flechitaBlanca {
	background-image: url("../../images/1280/flechitaBlanca.png");
	}
#flechitaGris {
	background-image: url("../../images/1280/flechitaGris.png");
	}
#flechitaCyan {
	background-image: url("../../images/1280/flechitaCyan.png");
	}
}

@media only screen and (min-width : 1280px) and (max-width : 1920px) /*Desktop Full HD*/
{
#logo {
    background-image: url("../../images/1920/LogoHosting.png");
    /*background-image: url("../../images/1920/LogoHomeTest.png");*/
	}
#imagen1Hosting {
	background-image: url("../../images/1920/FotoHosting1.jpg");
	}
#BotonAbajoHome {
	background-image: url("../../images/1920/BotonAbajoHome.png");
	}	
#flechitaBlanca {
	background-image: url("../../images/1920/flechitaBlanca.png");
	}
#flechitaGris {
	background-image: url("../../images/1920/flechitaGris.png");
	}
#flechitaCyan {
	background-image: url("../../images/1920/flechitaCyan.png");
	}
}

@media only screen and (min-width : 1920px) /*Desktop 4K*/
{
#logo {
    background-image: url("../../images/4096/LogoHosting.png");
    /*background-image: url("../../images/4096/LogoHomeTest.png");*/
	}
#imagen1Hosting {
	background-image: url("../../images/4096/FotoHosting1.jpg");
	}
#BotonAbajoHome {
	background-image: url("../../images/4096/BotonAbajoHome.png");
	}	
#flechitaBlanca {
	background-image: url("../../images/4096/flechitaBlanca.png");
	}
#flechitaGris {
	background-image: url("../../images/4096/flechitaGris.png");
	}
#flechitaCyan {
	background-image: url("../../images/4096/flechitaCyan.png");
	}
}