@import url('https://fonts.googleapis.com/css?family=Lato:400,700');

@charset "UTF-8";
@import url(font-awesome.min.css);
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400|Passion+One:400");


body{
	overflow-x: hidden;
	font-family: 'Lato', sans-serif;
	color:#505962;
}
.letra{
	font-size: .66rem;
}
.color_negro{
	font-weight: bold;
	font-size: 43px;
	color: black;
}

.color_rojo{
	font-weight: bold;
	font-size: 43px;
	color: red;
}

.color_blanco{
	font-weight: bold;
	font-size: 38px;
	color: white;
}
.grow { transition: all .2s ease-in-out; }
.grow:hover { transform: scale(1.1); }

.borders {
	background: #87c0cd;
	/*border-radius: 30px 0px 30px 5px;*/
	border-radius: 5px ;
	/* height: 600px;*/
	height: 92vh;
	width: 300px;
}

#elementoAnimado{
  animation-duration: 2s;
  animation-delay: 1s;
  animation-iteration-count: infinite;	
}

#imagenAnimada{
  animation-duration: 1s;
  animation-delay: 1s;
  /*animation-iteration-count: 4;*/	
}


.img-marca{
	max-width: 100%;
	/*clip-path: inset(0 15% 5% 15%);*/  /* TOP RIGTH BOTTOM LEFT */
	/*clip-path: circle(50% at center);*/  
	clip-path: ellipse(50% 50% at center); 
	/*clip-path:polygon(0 50%, 40% 50%, 60% 100%);*/

}

.offset:before{
	height: 3.9rem;
	margin-top: -3.9rem;
	content: "";
	display: block;
}

/*------------ navbar --------*/
.navbar{
	text-transform: uppercase;
	font-weight: 700;
	font-size: .9rem; /* 1rem equivale a 16px */
	letter-spacing: .1rem;
	background: rgba(0,0,0,0)!important;
}
.navbar-brand img{
	height: 2rem;
}
.navbar-nav li{
	padding-right: .7rem;
}
.navbar-dark .navbar-nav .nav-link{
	color: white;
	padding-top: .8rem;
}
.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .nav-link:hover{
	color:#1ebba3;
}



/*------ Slider ----- */
.carousel-item{
	height: 100vh;
}
.carousel-caption {
	position: absolute;
	top:38%;
	text-transform: uppercase;
	width: 100%;
	right: 0;
	left: 0;
}
.carousel-caption h1{
	font-size: 3.8rem;
	font-weight: 700;
	letter-spacing: .3rem;
	text-shadow: .1rem .1rem .8rem black;
	padding-bottom: 1rem;
}
.carousel-caption h3{
	font-size: 2rem;
	text-shadow: .1rem .1rem .5rem black;
	padding-bottom: 1.6rem;
}
#imagenCarousel{
	height: 100vh;
}

.btn-lg{
	border-width: medium;
	border-radius: 0;	
	font-size: 1.1rem;
}


/* COURSE SECTION */

.narrow{
	width: 75%;
	margin:0 auto;
	padding-top: 2rem;
}
.btn-md{
	border-width: medium;
	border-radius: 0;
	padding: .6rem 1.1rem;
	text-transform: uppercase;
	margin: 1rem;
}

.jumbotron{
	border-radius: 0;
	padding: 3rem 0 2rem;
	margin-bottom: 0;
}
h3.heading{
	font-size: 1.9rem;
	font-weight: 700;
	text-transform: uppercase;
	padding-bottom: 1.9rem;
}
.heading-underline{
	width: 3rem;
	height: .2rem;
	background-color: #1ebba3;
	margin: 0 auto 2rem;
}

/*------------------ Portfolio ---------------- */
#portfolio img{
	max-width: 100%;
	width: 100%;
	transition: transform .5s ease;
}
#portfolio img:hover{
	transform: scale(1.1);
	cursor: zoom-in;
}
#portfolio {
	overflow: hidden;
}

.row.no-padding [class=*=col-]{
	padding: 0;
}
.card{
	margin: 2rem;
}

/*------ Contact ------*/
footer{
	background-color: #40474e;
	color:white;
	padding-bottom: 2rem 0 3rem;
	margin-top: 1rem;
}
footer img{
	height: 3rem;
	margin: 1.5rem 0;
}

footer a{
	color: white;
}
footer svg.svg-inline--fa{
	font-size: 1.6rem;
	margin: 1.2rem .5rem 0 0;
}
footer svg.svg-inline--fa:hover{
	color: #1ebba3;
}
hr.socket{
	border-top: .2rem solid #666b71;
	width: 100%;
}

/*---------------- Media Queries --------------- */
@media (max-width: 760px){
	.carousel-caption h1{
		font-size: 2.3rem;
		letter-spacing: .15rem;
		padding-bottom: .5rem;
	}
	.carousel-caption h3{
		font-size: .22rem;
		padding-bottom: 1.2rem;
	}
	.btn-lg{
		font-size: 1rem;
	}	
	.narrow h1{
		font-size: 1.5rem;
	}
	p.lead{
		font-size: 1rem;
	}
}



Extra small(xs) devices (portrait phones, less than 576px)
No media query since thos is default in bootstrap

Small (sm) devices (landscape phones, 576px and up)
@mediaquery (min-width: 576px { ... })

Medium (sm) devices (tabets, 768px and up)
@mediaquery (min-width: 768px { ... })

Large (lg) devices (desktops, 992px and up)
@mediaquery (min-width: 992px { ... })

Extra (xl) devices (large desktops, 1200px and up)
@mediaquery (min-width: 1200px { ... })