@import url('http://fonts.googleapis.com/css?family=Open+Sans');
@font-face {
    font-family: myFirstFont;
    src: url(../fonts/OpenSans-ExtraBold.woff);
}
/*General*/
.container{
	font-family: 'Open Sans', sans-serif;
}
.container-fluid{
	font-family: 'Open Sans', sans-serif;
	width: 100%;
	padding: 0;
}
input[type=submit] {
	background: none;
	font-size: 19px;
	padding: 14px 36px;
	color: white;
	border: 2px solid white;
	border-radius: 50px;
	font-weight: lighter;
	margin: 30px auto;
}
input[type=submit]:hover{
	color: white;
	background: rgb(27,206,124);
	border-color: rgb(27,206,124);
	transition: background 0.8s ease;
}
textarea{
	resize:vertical;
}
ul li{
	list-style: none;
	text-decoration: none;
}
/*Estilo general de los botones*/
.btn{
	background: none;
	font-size: 19px;
	padding: 14px 36px;
	color: white;
	border: 2px solid white;
	border-radius: 50px;
	font-weight: lighter;
	margin: 30px auto;
	transition: background .8s, border-color .8s ease;
}
.btn:hover{
	color: white;
	background: rgb(27,206,124);
	border-color: rgb(27,206,124);
	transition: background .8s, border-color .8s ease;
}
/*Barra principal de navegación*/
#bs-example{
	padding: 50px;
}
.navbar-toggle{
	height: 48px;
	background: none;
}
.navbar-brand img{
	margin-top: -15px;
	transition:opacity .6s ease;
}
.navbar-brand img:hover{
	opacity:0.7;
	transition:opacity .6s ease;
}
#navbarCollapse{
	font-size: 15px;
}
.last-enlace{
	margin-right: 70px;
}
#navbarCollapse a{
	font-family: 'Open Sans', sans-serif;
	font-weight: 700;
	color: rgb(250,250,250);
	margin: 15px 15px auto auto;
	transition: color .5s ease;
}
#navbarCollapse a:hover{
	color: rgb(130,197,212);
	transition: color .5s ease;
}	
@media (min-width: 768px) 
{
	.navbar{
		background: none;
		border:none;
	}
	.navbar-brand img{
		margin-top: -5px;
		margin-left: 90px;
	}
}
/*Banner principal*/
#imagen-top{
	margin-top: -130px;
	height: 820px;
	/*background: black url("../img/moby2.png") top center no-repeat;*/
	background: black;
	background-attachment: fixed;
	color: white;
	padding: 150px;
}
#imagen-top h1{
	font-family: 'Open Sans', sans-serif;
	margin: 0 auto;
	margin-top: 130px;
	font-size: 50px;
	font-weight: lighter;
	text-shadow: 1px 1px 2px rgba(100, 100, 100, 1);
}
#imagen-top p{
	margin-top: 30px;
	font-size: 22px;
	font-weight: lighter;
	text-shadow: 1px 1px 2px rgba(100, 100, 100, 1);
}
#imagen-top img{
	margin-top: 10px;
	margin-left: 70px;
}
@media (min-width: 190px) and (max-width: 768px)
{
	#imagen-top{
		margin-top: -20px;
		padding: 0;
	}
	#imagen-top h1{
		margin-top: 250px;
		font-size: 38px;
	}
	#imagen-top p{
		font-size: 22px;
	}
}

/*Banner de nuestras carateristicas*/
#flat-image-banner{
	background: rgb(0,132,184);
	padding: 40px 10px;
	text-align: center;
	color: white;
}
#flat-image-banner h2{
	font-weight: bolder;
}
#flat-image-banner h4{
	font-weight: lighter;
	margin-top: -10px;
}
/*Porque nosotros*/
#flat-prewhy{
	padding: 15px;	
	background: rgb(247,247,247);	
	border: 1px solid rgb(220,220,220);
	z-index: 9999;
	position: relative;
}
#flat-why{
	padding: 25px 85px 38px;
	border: 1px solid rgb(220,220,220);	
}
#flat-why h2{
	font-size: 36px;
	color: rgb(175,185,185);
}
#flat-why p{
	font-size: 20px;
	color: rgb(110,110,110);
}
@media (min-width: 190px) and (max-width: 768px)
{
	#flat-why{
		padding: 25px 30px 38px;
	}
	#flat-why p{
		font-size: 17px;
	}
}
/*Banner blanco del comentario*/
#flat-comment-right{
	background: white;	
	padding-left: 6%;
	z-index: 9999;
	position: relative;
}
#flat-comment-right .flat-text{
	margin: 80px auto;
	padding-right: 70px;
}
#flat-comment-right img{
	margin-top: -35px;
	margin-right: -15px;	
	padding: 0;
	float:right;
}
#flat-comment-right h2{
	font-size: 36px;
	color: rgb(175,185,185);
}
#flat-comment-right h6{
	color: rgb(220,220,220);
}
#flat-comment-right p{
	font-size: 17px;
	margin-top: 30px;
	color: rgb(50,50,50);
}
#flat-comment-right a{
	color: rgb(70,80,90);
	font-weight: 800;
	font-size: 24px;
	transition:margin-left 0.6s, color 0.6s ease;
}
#flat-comment-right a:hover{
	text-decoration: none;
	margin-left: 12px;
	color: black;
	transition:margin-left 0.6s, color 0.6s ease;
}
/*Banner con imagen a la izquierda*/
#flat-comment-left{
	background: white;
	position: relative;
}
#flat-comment-left .flat-text{
	margin: 65px auto;
}
@media (min-width: 190px) and (max-width: 1200px)
{
	#flat-comment-grey{
		padding-bottom: 35px;
	}
	#flat-comment-left .flat-text{
	margin: 70px auto;
	}
}
#flat-comment-left .flat-image-left{
	position: absolute;
	bottom: 0;
}
#flat-comment-left h2{
	font-size: 36px;
	color: rgb(175,185,185);
	margin: 5px 0px 25px 20px;
}
#flat-comment-left h6{
	color: rgb(220,220,220);
	margin-left: 20px;
}
#flat-comment-left p{
	font-size: 17px;
	color: rgb(60,60,60);
	margin: 5% 45px 25px 20px;
}
#flat-comment-left a{
	color: rgb(70,80,90);
	font-weight: 800;
	font-size: 24px;
	margin: 5% 0px 25px 20px;
	transition:margin-left 0.6s, color 0.6s ease;
}
#flat-comment-left a:hover{
	text-decoration: none;
	margin-left: 32px;
	color: black;
	transition:margin-left 0.6s, color 0.6s ease;
}
/*Footer*/
#moby-footer{
	background-color: rgb(39,49,56);
	color: white;
	border-top: 8px solid rgb(99,109,116);
	padding: auto;
	z-index: 9999;
	position: relative;
}
#moby-footer-text{
	margin: 50px auto 60px;
}
#moby-footer-text h3{
	font-weight: lighter;
	font-size: 20px;
	vertical-align: middle; 
}
#moby-footer-text p{
	margin-left: -2px;
}
#moby-footer-text ul li{
	list-style: none;
	margin-left: -35px;
	margin-top: 3px;
}
#moby-footer-text hr{
	margin-right: 180px;
}
#moby-footer-text a{
	color: white;
	transition: margin-left .5s, color .5s ease;
}
#moby-footer-text a:hover{
	text-decoration: none;
	margin-left: 10px;
	color: rgb(130,197,212);	
	transition: margin-left .5s, color .5s ease;
}
/* ===== Formulario de contacto ====== */
#form-contact{
	background: black url("../img/contact.png") top center no-repeat;
	background-attachment: fixed;
	border:none;
	padding: 20px 175px;
	color: white;
	margin-top: -25px;
}
#form-contact h1{
	font-size: 54px;
	margin-bottom: 60px;
}
#form-contact h4{
	margin-top: 30px;
	border-bottom: 2px solid white;
	padding-bottom: 10px;
	width: 120px;
}
#form-contact .form-control{
	border: none;
	background: none;
	box-shadow: none;
	font-size: 20px;
	color: white;
	border-radius: 0px;
	border-bottom: 2px solid white;
	margin-top: 15px;
	height: 60px;
}
#form-contact button{
	border: 1px solid white;
}
#form-contact button:hover{
	border-color: rgb(27,206,124);
}
@media (min-width: 190px) and (max-width: 699px)
{
	#form-contact{
	padding: 20px 65px;
	}
	#form-contact h1{
		font-size: 44px;
	}
	#flat-prices h2{
		font-size: 20px;
	}
}
/*Cambio de color del placeholder del input*/
.form-control::-webkit-input-placeholder { color: rgb(210,216,210); font-style:italic; font-family:"serif" }
.form-control:-moz-placeholder { color: rgb(210,216,210); font-style:italic; font-family:"serif" }
.form-control::-moz-placeholder { color: rgb(210,216,210); font-style:italic; font-family:"serif" }
.form-control:-ms-input-placeholder { color: rgb(210,216,210); font-style:italic; font-family:"serif" }

/* banner planes y precios*/
#flat-preprices{
	padding: 20px;
	background: rgb(245,245,245);
}
#flat-prices{
	padding: 40px;
	border: 1px solid rgb(220,220,220);
}
#flat-prices h2{
	font-size: 40px;
}
#flat-prices p{
	font-size: 20px;
}
#flat-prices button{
	background: none;
	border: 1px solid black;
	color: black;
	border-radius: 50px;
	font-weight: lighter;
	margin: 30px auto;
}
#flat-prices button:hover{
	color: white;
	background: rgb(39,49,56);
	border-color: rgb(39,49,56);
}	
/*Banner de planes y precios*/
#imagen-top-prices{
	margin-top: -130px;
	background: black url("../img/moby_prices.jpg") top center no-repeat;
	background-attachment: fixed;
	color: white;
	padding: 150px 0;
}
#imagen-top-prices h1{
	border: 3px solid white;
	padding: 20px 10px;
}
#imagen-top-prices h1{
	margin-top: 60px;
	font-size: 54px;
}
@media (min-width: 190px) and (max-width: 568px)
{
	#imagen-top-prices h1{
		font-size: 30px;
	}
}
/*Banner de titulo*/
#flat-inicio{
	color: rgb(150,150,150);
	padding: 35px;
	border-bottom: 1px solid rgb(200,200,200);
}
/*Planes y precios*/
#plans-prices{
	padding: 50px 50px 65px;
	background: rgb(245,245,245);
}
#header-table{
	color: rgb(80,80,80);
	background: rgb(235,235,235);
	border: 1px solid rgb(220,220,220);
	padding: 25px 0;
}
#header-table h1{
	font-size: 68px;
}
#header-table h4{
	color: rgb(150,150,150);
}
#header-table button{
	color: white;
	background: rgb(27,206,124);
	border-color: rgb(27,206,124);
	margin-top: 10px;
	transition: background 0.8s ease;
}
#header-table button:hover{
	background: rgb(0,176,94);
	transition: background 0.8s ease;
}
#plan-descripcion{
	background: white;
	border: 1px solid rgb(220,220,220);
	border-top: none;
	padding: 30px 15px;
}
.bold{
	font-weight: bolder;
}