*{
	font-family: 'Open Sans', sans-serif;
	padding: 0;
	margin:0;
}

body{
	background-image: url(img/bg-home.jpg);
	background-size: cover;
	background-attachment: fixed;
	background-color: #313131;
}

@media(max-width: 800px){
	body{
		background-size: 400%;
		background-position: center;
	}
}

.wrap{
	width: 90%;
	max-width: 800px;
	margin:80px auto auto auto;
	box-shadow: 0 0 40px rgba(0,0,0,.5);
	border-radius: 5px;
}

@media(max-width: 800px){
	.wrap{
		margin:20px auto 20px auto;
	}
}

.clear{
	clear: both;
}

/* header */
header{
	padding: 10px;
	background-color: #f9f9f9;
	border-radius: 5px 5px 0 0;
}

header .logo{
	max-width: 200px;
	margin:10px auto;
}

/* content */
.content{
	padding: 20px 5%;
	background-color: #ffffff;
}

.content h2{
	font-weight: 400;
	font-size: 22px;
	margin:0 auto 10px auto;
}

.content h3{
	font-size: 16px;
	font-weight: 300;
	margin:0 0 20px 0;
	color: #777777;
}

.content h3 a, 
.content h3 span{
	display: inline-block;
	color: #0094af;
	font-weight: 600;
}

.content h4{
	font-weight: 500;
	margin:0 0 10px 0;
	background-color: #0094af;
	font-size: 14px;
	padding: 10px;
	color: #ffffff;
	border-radius: 5px;
}

.content a{
	display: inline-block;
}

.content input[type="text"],
.content textarea{
	padding: 18px 2%;
	width: 96%;
	font-size: 14px;
	font-weight: 300;
	border:none;
	outline: none;
	background-color: #f0f0f0;
	margin:0 0 10px 0;
	border-radius: 5px;
	resize: none;
	-webkit-appearance: none;
}

.content p{
	font-size: 16px;
	color: #777777;
	margin:0 0 20px 0;
	font-weight: 300;
}

.content p a{
	color: #313131;
	text-decoration: underline;
}

.btn-1{
	display: block;
	text-decoration: none;
	color: #ffffff;
	background-color: #0094af;
	border-radius: 4px;
	line-height: 55px;
	padding: 0 30px;
	border:none;
	outline: none;
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	cursor: pointer;
}

.btn-2{
	display: block;
	text-decoration: none;
	color: #ffffff;
	background-color: #ED4B4B;
	border-radius: 4px;
	line-height: 55px;
	padding: 0 30px;
	border:none;
	font-weight: 600;
	text-transform: uppercase;
	outline: none;
	font-size: 14px;
	cursor: pointer;
}

.btn-1:hover, .btn-2:hover{
	opacity: .8;
}

/* radio */
.radio input[type="radio"]{
	display: none;
	-webkit-appearance: none;
}

.radio .column{
	width: 48%;
	float: left;
}

.radio label{
	padding: 15px 1%;
	margin: 0 0 10px 0;
	background-color: #f0f0f0;
	display: inline-block;
	font-size: 14px;
	width: 98%;
	border-radius: 5px;
	cursor: pointer;
	line-height: 20px;
	transition:all .4s ease;
}

@media(max-width: 800px){
	.radio label{
		margin:5px 0;
	}
}

.radio label i{
	width: 10px;
	line-height: 10px;
	font-size: 8px;
	border:solid 2px #313131;
	text-align: center;
	border-radius: 5px;
	margin:0 5px 0 0;
	color: transparent;
	transition:all .4s ease;
}

.radio input[type="radio"]:checked + label{
	background-color: #0094af;
	color: #ffffff;
}

.radio input[type="radio"]:checked + label i{
	color: #ffffff;
	border-color: #ffffff;
}

.radio p{
	color: #555555;
	font-size: 14px;
	margin:0 0 3px 0;
	font-weight: 600;
}
#content-dominio1,
#content-dominio2,
#content-hosting1,
#content-hosting2,
#content-corporativo,
#content-corporativo-2,
#content-corporativo-3,
#content-tienda,
#content-tienda-2,
#content-tienda-3{
	margin:5px 0 0 0;
	max-height: 0px;
	overflow: hidden;
}

.radio .radio1:checked ~ #content-dominio1,
.radio .radio2:checked ~ #content-dominio2,
.radio .radio1:checked ~ #content-hosting1,
.radio .radio2:checked ~ #content-hosting2,
.radio .radio1:checked ~ #content-corporativo,
.radio .radio3:checked ~ #content-corporativo-2,
.radio .radio4:checked ~ #content-corporativo-3,
.radio .radio2:checked ~ #content-tienda,
.radio .radio5:checked ~ #content-tienda-2,
.radio .radio6:checked ~ #content-tienda-3{
	max-height: 300px;
}

/* pagination */
.pagination{
	background-color: #ffffff;
}

.pagination li{
	float: left;
	list-style: none;
	width: 9.09%;
	text-align: center;
	line-height: 50px;
	background-color: #f0f0f0;
	font-weight: 600;
	font-size: 14px;
	position: relative;
}

.pagination li.active,
.pagination li.prev{
	background-color: #0094af;
	color: #ffffff;
}

.pagination li.active:after{
	content: "";
	position: absolute;
	border-right: solid 20px #f0f0f0;
	border-bottom:solid 25px transparent;
	right: 0;
	top:0;
}

.pagination li.active:before{
	content: "";
	position: absolute;
	border-right: solid 20px #f0f0f0;
	border-top:solid 25px transparent;
	right: 0;
	bottom:0;
}


/* footer */
footer{
	padding: 20px;
	background-color: #313131;
	border-radius: 0 0 5px 5px;
	font-size: 14px;
	color: #999999;
	font-weight: 400;
	font-size: 12px;
}

footer .copy{
	float: right;
}

footer .contact{
	float: left;
}

footer .contact li{
	list-style: none;
	display: inline-block;
	margin:0 0 0 10px;
}


@media(max-width: 800px){
	footer .copy{
		float: none;
		text-align: center;
	}

	footer .contact{
		text-align: center;
		float: none;
	}

	footer .contact li{
		display: inline-block;
		margin:10px;
	}
}


footer .contact li a{
	display: block;
	text-decoration: none;
	color: #999999;
}