html, body {width: 100%; height: 100%;}
body	{color:#555; font-family:'Poppins', sans-serif; font-size:15px; line-height:1.25em; position:relative;
		-webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;
		background-attachment:fixed; background-image:url("../img/bg.jpg"); background-position:top center; background-repeat:no-repeat; background-size:cover;}

h1	{color:#FFF; font-weight:500; font-size:40px; line-height:1.25;}		
h2	{color:#000; font-weight:500; font-size:28px; line-height:26px; margin:0 0 30px 0; text-align:center;}
h3	{color:#000; font-weight:400; font-size:18px; line-height:20px; margin:0 0 20px 0;}
h4	{margin:0 0 20px 0;}
i	{color:#506c96; margin-right:5px;}
	
a	{color:#CCC; text-decoration:none!important}
a:focus, a:hover {color:#FFF;}

p	{margin-bottom:20px}
p:last-child	{margin-bottom:0}

strong	{font-weight:500!important; color:#333;}
.no-gutter {margin-right:0; margin-left:0;}
.no-gutter > [class*="col-"] {padding-right:0; padding-left:0;}
ul 		{margin:0 0 15px 15px; padding:0;}
ul li	{margin-bottom:10px}
ol		{margin:0 0 15px 15px; padding:0;}
ol li	{margin-bottom:10px}

.text-center li {text-align:center}
.img-responsive {width:100%}

#topbar	{background:#283F70; padding:10px; margin:40px 0;}
#topbar, #topbar i	{color:#ccc}

#topbar i	{color:#CCC; border:2px solid #CCC; border-radius:50%; padding:4px 6px}
.navbar	{border-radius:0!important; margin:0!important;}
.navbar	.logo img	{height:70px; width:auto; margin:5px 0}
.navbar-nav > li > a {color:#333!important; font-size:18px; font-weight:600;}
.navbar-nav .active a, .navbar-nav > li > a:hover	{color:#506c96!important; background:transparent!important}
.bord-r {border-right:2px solid #000}

.container-fluid {padding:0%!important}
section				{margin-bottom:120px}
section#contacto	{margin-bottom:0}

.who .container .row	{background:#eee}
.hero	{width:100%; height:70vh; display:flex; justify-content:center; align-items:center; background: url("../img/hero.png") no-repeat right bottom / contain; margin-top:2vh}
.hero h1	{text-align:left; color:rgba(255, 255, 255, 0.85); margin:0; padding:25% 0 0 0}
.title	{width:100%; height:15vh; display:flex; justify-content:center; align-items:center;}
.title h1	{text-align:center; color:rgba(255, 255, 255, 0.70); margin:0; padding:0 }

/* BOX ========== */
.quienes .box	{padding:100px 30px!important; background:#eee}
.who-img	{width:100%; min-height:400px; height:100%; background: url("../img/who.jpg") no-repeat center center / cover;}
.mision-img	{width:100%; min-height:400px; height:100%; background: url("../img/mision.jpg") no-repeat right center / cover;}
.vision-img	{width:100%; min-height:400px; height:100%; background: url("../img/vision.jpg") no-repeat right center / cover;}
.valores-img	{width:100%; min-height:400px; height:100%; background: url("../img/valores.jpg") no-repeat right center / cover;}

.serv .row	{width:100%; min-height:400px; height:100%; background: url("../img/servicios.jpg") no-repeat right center / cover; padding:60px 0}
.serv h1, .serv h2	{color:#506c96!important}

#contacto .row	{width:100%; min-height:400px; height:100%; background: url("../img/contacto.jpg") no-repeat right center / cover;}
#contacto, #contacto h2, #contacto h4	{color:#EEE}
#fbtl	{max-width:100%}

/* FORM ========== */
#contactForm	{max-width:100%!important}
#contactForm label	{color:#CCC; font-weight:normal; margin:0;}
#contactForm input[type], #contactForm textarea {color:#; background:#; box-shadow:none}
#submit-cont	{width:100%; text-align:***}	
#contactForm button[type=submit]	{color:#; background:#; letter-spacing:2px; border:none;}
#contactForm button[type=submit]:hover	{color:#; background:#;}


/* AVISO DE PRIVACIDAD  ========== */
#aviso .box	{padding:100px 5%!important; background:#eee; font-size:16px!important;}
#aviso h2	{font-size:24px; padding:0; margin-bottom:-15px}
#aviso h4	{font-size:16px!important; margin:40px 0 10px!important}
#aviso a	{color:#0055dd!important;}
#aviso a:hover	{font-weight:bold!important;}
#aviso hr	{border-color:#0055dd!important; width:50%; left:25%}
#aviso blockquote	{font-size:inherit!important; padding:0 10%!important; border:none!important}
#aviso ol	{padding-left:15px!important}
#aviso strong	{font-weight:500!important; color:#333!important;}


footer		{background:#283F70; padding:30px 20px; color:#CCC; font-size:14px; line-height:2}
footer h3	{color:#FFF}
footer i	{color:#CCC; border:2px solid #CCC; border-radius:50%; padding:4px 6px}
footer i:hover	{color:#FFF;}
footer .logo img	{height:60px; text-align:right; float:none!Important;}
footer #copy	{padding-top:20px}
footer #repse	{width:100px; height:auto; margin-top:10px}



#top	{position:fixed; display:none; bottom:5px; right:5px; z-index:1000}
#top i	{color:#000!important; font-size:30px; background:#FFF; padding:0 5px; line-height:1; border-radius:9px; opacity:0.5}
#top:hover i	{color:#000!important; font-size:30px; background:#FFF; padding:0 5px; line-height:1; border-radius:9px; opacity:1}



.icono	{padding:0 25% 20px}
.banner .icono	{padding:0 10% 20px}

.img-circle {border:4px solid #506c96; padding:10px; max-width:480px; margin:0 auto!important}

/* RESPONSIVE ==========  border:1px solid red */
@media (min-width:992px) {
	.navbar	.logo	{margin-right:50px!important;}
	
}

@media (min-width:768px) {
	.container {width:100%; padding:0 5%;}
	#topbar span	{margin:0 80px}	
	.navbar {display:flex; align-items:center; justify-content:center;}
	.bord-r {border-right:2px solid #000}
	.navbar-nav > li > a {line-height:1; padding:0 30px}
	.hero	{padding:0 50% 0 5%}
	.row-eq-height {display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex;}
	.cel	{display:none}
	#contacto .box	{padding:100px 10%!important; background:transparent!important}
	.serv .box	{padding:50px 3%!important; background:transparent!important}
	.v-align {display:flex; align-items:center;}
	.banner	{padding:0 15%;}	
}

@media (max-width:767px) {
	body	{font-size:14px;}
	.fa-ul {margin-left:10px}
	.fa-ul li {margin-bottom:10px}
	.box	{padding:40px 10px!important}
	h1	{font-size:28px;}
	h2	{font-size:22px;}
	.flex-switch {display:flex; flex-direction:column-reverse; @include sm-min {flex-direction:row;}}
	footer .m-b	{margin-bottom:100px;}
	.mar-b	{margin-bottom:80px}
	#topbar span	{width:100%; display:block; margin-bottom:15px}	
	#contacto .box	{padding:100px 10px!important; background:transparent!important}
	.serv .box	{padding:50px 10px!important; background:transparent!important}
	.hero	{height:65vh; align-items:end; background: url("../img/hero.png") no-repeat center bottom / cover; margin-top:5vh}
	.hero h1	{padding:10px; font-size:20px; line-height:1; background:rgba(0, 0, 0, 0.25); text-align:center; margin-bottom:5vh}
	.banner .icono	{padding:0 25% 20px}
	.img-circle {margin-bottom:-60px!important}
	#fbtl	{padding:0 10px; text-align:center!important}	
	.quienes .box	{padding:40px 15px!important;}
}