:root {
    --verde: #00b30c;
    --verde-bg-success: #28a745;
    --gris1: #353537;
    --gris2: #eaeaeb;
    --gris3: #777777;
	--azul: rgb(1,56,110);
}

h1, h2, h3, h4, h5 {
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
}

h1 {
    font-size: 3.5rem;
}

h2 {
    font-size: 3rem;
}

h3 {
    font-size: 2rem;
}

h4 {
    font-size: 1.5rem;
}

h5 {
    font-size: 1.2rem;
}

/** Header scroll **/
.header-scroll {
    opacity: 0;
    margin-top: -300px;
    position: fixed;
    width: 100%;
    z-index: 100;
    background-color: white;
    transition: all .5s ease;
    /*-ms-transition: all .5s ease;*/
    border-bottom: 1px solid rgba(0,0,0,.1);
}
.header-scroll.activo {
    margin-top: 0;
    opacity: 1;
}

.header-scroll .nav-link {
    color:#666;
}

.header-scroll .nav-link:hover{
    color:#000;
}

.header-scroll .btn-outline-success {
    color: #00b30c;
}

.header-scroll .btn-outline-success:hover {
    color: white;
}

/* Header */

.header {
    position: relative;
    background-image: url(../images/hero1.jpg);
    background-size: cover;
    /*background-repeat: no-repeat;*/
    background-position: center center;
    /*background-attachment: fixed;*/
    min-height: 30rem;
}

.header::before{
    height: 100%;
    width: 100%;
    position: absolute;
    content:'';
    display: block;
    top: 0;
	background: rgba(1,56,110,.85);
}

a.btn-outline-light:hover {
    color: rgb(1,56,110)!important;
}

.header .nav-link,
.header .nav-link:hover {
    color: white!important;
}

header .texto{
	min-height: 22rem;	
	height: 22rem;	
}

.titulo {
	font-weight: 700;
}

.btn-success {
	/*background-color: #00b30c!important;*/
}

@media (min-width: 992px) {

    .header {
        /*background-image: unset;*/
        /*height: auto;*/
        min-height: 25rem;
        height: 25rem;
    }

    header .texto{
		min-height: 20rem;
		height: 20rem;
	}

}

/*=============================================
SLIDE            
=============================================*/

#slide{
	position: relative;	
    margin: auto;
	margin-bottom:-50px;
	overflow:hidden;
	background:white;
}

/*Photo Slide*/

#slide ul li{
	float: left;
	width: 25%;
	display:none;
}

#slide ul li:first-child{
	display:block;
}

#slide ul li img{
	width: 100%;
}

#slide ul li .slideCaption{
	position:relative;
	width:100%;
	top:-95px;
	text-align:center;
	z-index:1;
	color:white;
	background: rgba(0,0,0,.5);
}

.slideCaption h3{
	padding-top:10px;
}

.slideCaption p{
	padding-bottom:10px;
}

/*Indicadores Slide*/

#indicadores{
	position: relative;
	width: 100%;
	margin:auto;
	height: 0px;
	top: -90px;
	text-align: center;
}

#indicadores li{
	display:inline-block;
	margin:0px 5px;
	cursor: pointer;
	opacity: .5;
	color: white;
	text-shadow: 0px 0px 5px #333;
}

#indicadores li:first-child{
	opacity: 1;
}

/*=====  Fin de SLIDE  ======*/

/*=============================================
TOP           
=============================================*/

#top div img {
	/*border: 1px solid rgba(1,56,110,0.7);*/
	/*-webkit-transition: transform .3s ease;
	-ms-transition: transform .3s ease;
	transition: transform .3s ease;*/
	-webkit-transition: all .3s ease;
	-ms-transition: all .3s ease;
	transition: all .3s ease;
}

#top div img:hover {
	-webkit-box-shadow: 0px 0px 11px 2px rgba(1,56,110,1);
	-moz-box-shadow: 0px 0px 11px 2px rgba(1,56,110,1);
	box-shadow: 0px 0px 11px 2px rgba(1,56,110,1);
	/*-webkit-transform: scale(1.2) rotate(10deg);*/
	/*-ms-transform: scale(1.2) rotate(10deg);*/
	/*transform: scale(1.2) rotate(10deg);*/
	/*transform: scale(1.1);*/
}

/*=====  Fin de TOP  ======*/

/*=============================================
PORTAFOLIO
=============================================*/

.portafolio {
    background-color: #f5f5f5;
}

.portafolio .card-columns {
	column-count: 1;
}

@media (min-width: 768px) {

	.portafolio .card-columns {
		column-count: 2;

	}

}

@media (min-width: 1200px) {

	.portafolio .card-columns {
		column-count: 3;

	}

}

/*  @include media-breakpoint-only(lg) {
    column-count: 4;
  }
  @include media-breakpoint-only(xl) {
    column-count: 5;
  }*/


.portafolio .card {margin-bottom: 2rem;}

.portafolio .card-subtitle {
    /*color: #f46669;*/
    color: #28a745;
    /*color: rgb(1,56,110);*/
    font-weight: 600;
}

.portafolio .card-body {
	border-top: 3px solid #28a745;
	border-top: 10px solid rgba(1,56,110,0.85);
}

.portafolio .card-body p{
    font-size: 1rem;
    line-height: 1.5rem;
}

.portafolio .card-body a {
    /*color: #f46767;*/
    color: #28a745;
}

/*=====  Fin de PORTAFOLIO  ======*/

/*=============================================
ARTICULOS          
=============================================*/

#articulos ul li{
	position:relative;
	padding:20px;
}

#articulos ul li button{
	margin-top:30px;
	}

/*=====  Fin de ARTICULOS  ======*/

/*=============================================
VIDEOS            
=============================================*/

#videos div{
	padding:20px;
}

/*=====  Fin de VIDEOS  ======*/

/*=============================================
CONTACTANOS
=============================================*/
.contactanos {
	position: relative;
	background-image: url(../images/contacto.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-attachment: fixed;
	color: #ffffff;
	border-bottom: 4px solid #888;
}

.contactanos::before{
    height: 100%;
    width: 100%;
    position: absolute;
    content:'';
    display: block;
    top: 0;
    left: 0;
	background: rgba(1,56,110,.85);
}

@media (min-width: 992px) {
	.contactanos {
		background-size: cover;
	}
}

.contactanos h3 {
	font-size: 3rem;
	font-family: 'Lato', sans-serif;
}

.contactanos p {
	font-family: 'Lato', sans-serif;
	font-size: 1.2rem;
	line-height: 2.6rem;
}

.contactanos .btn-primary {
	background-color: #28a745;
	border: 0;
	/*border-radius: 0;*/
	font-family: 'Lato', sans-serif;
	font-size: 1.2rem;
}

.contactanos .btn-primary:hover {
	background-color: #00b30c;
}   

/*=====  Fin de CONTACTANOS  ======*/

/*=============================================
FOOTER
=============================================*/

footer h4{
	line-height: 1.0rem;
}

footer a{
	line-height: 0.5rem;
}

footer{
	/*margin-top:20px;*/
	/*border-top:4px solid #888;*/
	/*background: #222;*/
	/*background-color: rgb(1,56,110);*/
	/*padding:20px 0;*/
}

footer .infoContacto{
	padding: 1.5rem;
	padding-bottom: 0;
}

footer .formContacto{
	background-color: rgba(1,56,110,0.85);
	padding: 1.5rem;
	/*padding-bottom: 0;*/
	border-radius: 4px;
}

footer .navegacion a{
	font-family: 'Lato', sans-serif;
	font-weight: 400;
	font-size: 1rem;
	color: #28a745;
}

footer .navegacion a:hover{
	color: #00b30c;
}

.infoContacto {
	font-family: 'Lato', sans-serif;
	color: #444;
}

.formContacto {
	font-family: 'Lato', sans-serif;
	color: #444;
}

.formContacto form input{
	margin: 1rem auto;
}

.formContacto form input[type="submit"]{
	/*margin-bottom: 0px;*/
}

.formContacto .btn-success:hover {
	background-color: #00b30c;
}

.final{
	background-color: black;
}

.final h5{
	font-family: 'Lato', sans-serif;
	font-size: 1rem;
	font-weight: 300;
	color: white;
}

/*=====  Fin de FOOTER  ======*/

/*=============================================
ESCRITORIO GRANDE                    
=============================================*/

@media (min-width:1200px){

	/*Logotipo*/

	#logo img{
		padding:20px 30px;
	}

	/*Botonera*/

	nav#botonera{
		margin-top: 1.2%;
		width: 60%;
	}

	nav#botonera ul{
		width: 100%;

	}

	nav#botonera ul li{
		width: 18%;	
		text-align: center;
		background: #ddd;
		margin: 3% 1%;
	}

	nav#botonera ul li a{
		height: 45px;
		line-height: 12px;
		color: #111;
		background: #deefdc;
		font-weight: 100;
	}

	/*Slide*/

	#slide ul{
		position: relative;
		margin: auto;
		height: auto;
		width:400%;
	}

	#slide div#slideIzq span{
		position: absolute;
		font-size: 30px;
		color: white;
		top: 45%;
		left:50px;
		text-shadow:0px 0px 10px #000;
		cursor: pointer;
	}

	#slide div#slideDer span{
		position: absolute;
		font-size: 30px;
		color: white;
		top: 45%;
		right:50px;
		text-shadow:0px 0px 10px #000;
		cursor: pointer;
	}

	/*Artículos*/

	#articulos ul li img{
		float:left;
		width:30%;
		margin:20px 20px 20px 0 ;
	}
		
}
	
/*=====  Fin de ESCRITORIO GRANDE  ======*/
	
/*=============================================
ESCRITORIO MEDIANO                   
=============================================*/
	
@media (max-width:1199px) and (min-width:992px){
	
	/*Logotipo*/

	#logo img{
		padding:20px 10px;
	}

	/*Botonera*/

	nav#botonera{
		margin-top: 3%;
		width: 60%;
	}
		
	nav#botonera ul{
		width: 100%;
	}
		
	nav#botonera ul li{
		width: 18%;
		text-align: center;
		background: #ddd;
		margin: 3% 1%;
	}

	nav#botonera ul li a{
		height: 35px;
		line-height: 5px;
		color: #111;
		background: #deefdc;
		font-weight: 100;
	}

	/*Slide*/

	#slide ul{
		position: relative;
		margin: auto;
		height: auto;
		width:400%;
	}

	#slide div#slideIzq span{
		position: absolute;
		font-size: 30px;
		color: white;
		top: 40%;
		left:50px;
		text-shadow:0px 0px 10px #000;
		cursor: pointer;
	}

	#slide div#slideDer span{
		position: absolute;
		font-size: 30px;
		color: white;
		top: 40%;
		right:50px;
		text-shadow:0px 0px 10px #000;
		cursor: pointer;
	}

	/*Artículos*/

	#articulos ul li img{
		float:left;
		width:35%;
		margin:30px 20px 20px 0 ;
	}

}
	
/*=====  Fin de ESCRITORIO PEQUEÑO  ======*/
	
/*=============================================
TABLET                 
=============================================*/
	
@media (max-width:991px) and (min-width:768px){
	 
	/*Logotipo*/

	#logo img{
		padding:20px 30%;
	}

	/*Botonera*/

	nav#botonera{
		margin: 2% 0;
		width: 100%;
	}
		
	nav#botonera ul{
		width: 100%;
	}
		
	nav#botonera ul li{
		width: 18%;
		text-align: center;
		background: #ddd;
		margin: 0 1%;
	}

	nav#botonera ul li a{
		height: 35px;
		line-height: 5px;
		color: #111;
		background: #deefdc;
		font-weight: 100;
	}

	/*Slide*/

	#slide ul{
		position: relative;
		margin: auto;
		height: auto;
		width:400%;
	}

	#slide div#slideIzq span{
		position: absolute;
		font-size: 30px;
		color: white;
		top: 35%;
		left:50px;
		text-shadow:0px 0px 10px #000;
		cursor: pointer;
	}

	#slide div#slideDer span{
		position: absolute;
		font-size: 30px;
		color: white;
		top: 35%;
		right:50px;
		text-shadow:0px 0px 10px #000;
		cursor: pointer;
	}

	/*Artículos*/

	#articulos ul li img{
		float:left;
		width:40%;
		margin:25px 20px 20px 0 ;
	}
	
}
	
/*=====  Fin de TABLET  ======*/
	
/*=============================================
PHONES                
=============================================*/
	
@media (max-width:767px){

	/*Logotipo*/

	#logo{
		background: white;
	}

	#logo img{
		padding:20px 20%;
	}

	/*Botonera*/

	#botonera{
		overflow-x:hidden;
	}	

	#botonera ul li a{
		padding: 10px 30px;
		
	}

	/*Slide*/

	#slide ul{
		position: relative;
		margin:auto;
		margin-bottom:20px;
		height: 140px;
		width:400%;
	}

	#slide div#slideIzq span{
		position: absolute;
		font-size: 20px;
		color: white;
		top: 40%;
		left:30px;
		text-shadow:0px 0px 10px #000;
		cursor: pointer;
	}

	#slide div#slideDer span{
		position: absolute;
		font-size: 20px;
		color: white;
		top: 40%;
		right:30px;
		text-shadow:0px 0px 10px #000;
		cursor: pointer;
	}

	.slideCaption{
		display:none;
	}

	#indicadores{
		display:none;
	}

	/*Artículos*/

	#articulos ul li img{
		float:left;
		width:100%;
		margin:10px auto ;
	}

}

/*=====  Fin de PHONES  ======*/

/*=============================================
PLUGIN SCROLL UP               
=============================================*/

#scrollUp {
  	bottom: 20px;
  	right: 20px;
  	width: 50px;
	height: 50px;
	border-radius: 100%;
	background: url(../images/flecha.jpg);
}

/*=====  Fin de PLUGIN SCROLL UP  ======*/