@import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,700,300,600,800,400);


a{ color: #888e21;}
a:hover,
a:focus{
	text-decoration: none;
	color: #888e21;
}

.section-title hr{
	border-color: #888e21;
	border-width: 4px;
	width: 60px;
	float: left;
	clear: both;
}
.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }
ul, ol{
	padding: 0;
	webkit-padding: 0;
	moz-padding: 0;
}
/* Navigation */
#tf-menu {
	padding: 20px;
	transition: all 0.8s;
}
#tf-menu.navbar-default {
	background-color: rgba(248, 248, 248, 0);
	border-color: rgba(231, 231, 231, 0);
}
#tf-menu a.navbar-brand {
text-transform: uppercase;
font-size: 22px;
color: #fff;
font-weight: 900;
}

#tf-menu.navbar-default .navbar-nav > li > a {
	text-transform: uppercase;
	color: #FFF;
	font-size: 12px;
	letter-spacing: 1px;
}
.on {
	background-color: #222222 !important;
	padding: 0 !important;
}
.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:hover, 
.navbar-default .navbar-nav > .active > a:focus {
	color: #888e21 !important;
	background-color: transparent;
	font-weight: 700;
}

.navbar-toggle {
	border-radius: 0;
	}
.navbar-default .navbar-toggle:hover, 
.navbar-default .navbar-toggle:focus {
	background-color: #888e21;
	border-color: #888e21;
	}
.navbar-default .navbar-toggle:hover>.icon-bar {
	background-color: #FFF;
	}
/* Home Style */
#tf-home{
	background: url(../img/01.jpg);
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	background-repeat: no-repeat;
	color: #cfcfcf;
}

#tf-home .overlay{
	background: -moz-linear-gradient(top,  rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.73) 17%, rgba(0,0,0,0.66) 35%, rgba(0,0,0,0.55) 62%, rgba(0,0,0,0.4) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.8)), color-stop(17%,rgba(0,0,0,0.73)), color-stop(35%,rgba(0,0,0,0.66)), color-stop(62%,rgba(0,0,0,0.55)), color-stop(100%,rgba(0,0,0,0.4))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.73) 17%,rgba(0,0,0,0.66) 35%,rgba(0,0,0,0.55) 62%,rgba(0,0,0,0.4) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.73) 17%,rgba(0,0,0,0.66) 35%,rgba(0,0,0,0.55) 62%,rgba(0,0,0,0.4) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.73) 17%,rgba(0,0,0,0.66) 35%,rgba(0,0,0,0.55) 62%,rgba(0,0,0,0.4) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.73) 17%,rgba(0,0,0,0.66) 35%,rgba(0,0,0,0.55) 62%,rgba(0,0,0,0.4) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc000000', endColorstr='#66000000',GradientType=0 ); /* IE6-9 */
	height: 750px;
	background-attachment: fixed;
}
#tf-home p.lead{
	color: #e3e3e3;
}

.content{
	position: relative;
	padding: 20% 0 0;
}

.color{
	color: #888e21;
}

a.fa.fa-angle-down {
	padding: 10px 15px;
	color: #fff;
	border: 2px solid #b4b4b4;
	border-radius: 50%;
	font-size: 24px;
	margin-top: 200px;
	transition: all 0.5s;
}
a.fa.fa-angle-down:hover{
	background: #888e21;
	color: #ffffff;
	border: 2px solid #888e21;
}
/* About Section */
#tf-about{
	padding: 80px 0;
}
ul.about-list{ margin: 30px 0 0 ;}
ul.about-list li{
	display: block;
	font-size: 16px;
	line-height: 30px;
	font-family: 'Open Sans', sans-serif;
}
ul.about-list li span{ 
	margin-right: 10px;
}

/* Team Section */
#tf-team2{
	background: url(https://caph.sara.com.co/Sitios_Web/img/Eventos2.png);
	height: 500px;
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	background-repeat: no-repeat;
}
#tf-team3{
	background: url(https://caph.sara.com.co/Sitios_Web/img/Nino_Mapa.png);
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	background-repeat: no-repeat;
}
#tf-team{
	background: url(https://caph.sara.com.co/Sitios_Web/img/Fondo_Docentes2.png);
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	background-repeat: no-repeat;
	color: #ffffff;
}
#tf-team .overlay{
	background: -moz-linear-gradient(top,  rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.73) 17%, rgba(0,0,0,0.66) 35%, rgba(0,0,0,0.55) 62%, rgba(0,0,0,0.4) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.8)), color-stop(17%,rgba(0,0,0,0.73)), color-stop(35%,rgba(0,0,0,0.66)), color-stop(62%,rgba(0,0,0,0.55)), color-stop(100%,rgba(0,0,0,0.4))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.73) 17%,rgba(0,0,0,0.66) 35%,rgba(0,0,0,0.55) 62%,rgba(0,0,0,0.4) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.73) 17%,rgba(0,0,0,0.66) 35%,rgba(0,0,0,0.55) 62%,rgba(0,0,0,0.4) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.73) 17%,rgba(0,0,0,0.66) 35%,rgba(0,0,0,0.55) 62%,rgba(0,0,0,0.4) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.73) 17%,rgba(0,0,0,0.66) 35%,rgba(0,0,0,0.55) 62%,rgba(0,0,0,0.4) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc000000', endColorstr='#66000000',GradientType=0 ); /* IE6-9 */
	height: auto;
	background-attachment: fixed;
	padding: 80px 0;
}
.section-title.center{
	padding: 30px 0;
}
.section-title h2,
.section-title.center h2{
	font-weight: 300;
}
.section-title.center .line{
	border-top: 4px solid #888e21;
	height: 10px;
	width: 60px;
	text-align: center;
	margin: 0 auto;
	margin-top: 20px;
}

.section-title.center hr {
	border-top: 4px solid rgba(252, 172, 69, 0.34);
	width: 40px;
	text-align: center;
	margin-top: 10px;
	position: relative;
	left: 17%;
}
#team{ margin: 0 auto}
#team .item{
    padding: 0;
    margin: 15px;
    color: #FFF;
    text-align: center;
}

img.img-circle.team-img {
	width: 120px;
	height: 120px;
	border: 4px solid transparent;
	transition: all 0.5s;
}

#tf-team .thumbnail {
	background: transparent;
	border: 0;
}

#tf-team .thumbnail .caption {
	padding: 9px;
	color: #F2F2F2;
}

.owl-theme .owl-controls .owl-page span {
	display: block;
	width: 10px;
	height: 10px;
	margin: 5px 7px;
	filter: Alpha(Opacity=1);
	opacity: 1;
	-webkit-border-radius: 0;
	-moz-border-radius: 20px;
	border-radius: 0;
	background: #FFFFFF;
	transition: all 0.5s;
}

.owl-theme .owl-controls .owl-page.active span, 
.owl-theme .owl-controls.clickable .owl-page:hover span {
	filter: Alpha(Opacity=100);
	opacity: 1;
	background: #888e21;
}
.owl-theme .owl-controls .owl-page.active span{
	background: #888e21;
}

/* Services Section */
#tf-services{
	padding: 80px 0;
}

.space{
	margin-top: 40px;
}

#tf-services i.fa {
	font-size: 40px;
	border: 4px solid #888e21;
	width: 100px;
	height: 100px;
	padding: 27px 25px;
	margin-bottom: 10px;
	border-radius: 50%;
	transition: all 0.5s;
}

#tf-services i.fa.fa-mobile{
	font-size: 50px;
	padding: 20px 25px;
}

#tf-services .service:hover>i.fa{
	background: #888e21;
	color: #ffffff;
}

/* Clients Section */
#tf-clients{
	background: url(../img/04.jpg);
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	background-repeat: no-repeat;
	color: #ffffff;
}

#tf-clients .overlay{
	background: -moz-linear-gradient(top,  rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.73) 17%, rgba(0,0,0,0.66) 35%, rgba(0,0,0,0.55) 62%, rgba(0,0,0,0.4) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.8)), color-stop(17%,rgba(0,0,0,0.73)), color-stop(35%,rgba(0,0,0,0.66)), color-stop(62%,rgba(0,0,0,0.55)), color-stop(100%,rgba(0,0,0,0.4))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.73) 17%,rgba(0,0,0,0.66) 35%,rgba(0,0,0,0.55) 62%,rgba(0,0,0,0.4) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.73) 17%,rgba(0,0,0,0.66) 35%,rgba(0,0,0,0.55) 62%,rgba(0,0,0,0.4) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.73) 17%,rgba(0,0,0,0.66) 35%,rgba(0,0,0,0.55) 62%,rgba(0,0,0,0.4) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.73) 17%,rgba(0,0,0,0.66) 35%,rgba(0,0,0,0.55) 62%,rgba(0,0,0,0.4) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc000000', endColorstr='#66000000',GradientType=0 ); /* IE6-9 */
	padding: 80px 0;
	background-attachment: fixed;
}

#clients .item{
    padding: 0;
    margin: 35px;
    color: #FFF;
    text-align: center;
}
/* Gallery Section 
==============================*/
#tf-works{
	padding: 80px 0;
}
.categories{ 
	padding: 10px 0;
}
ul.cat li{
	display: inline-block;
}
#tf-works li.pull-right {
	margin-top: 10px;
}
ol.type li{
	display: inline-block;
	margin-left: 20px;
}
ol.type li:after{
	content: ' | ';
	margin-left: 20px;
}
ol.type li:last-child:after { content: ''; }
ol.type li a{ color: #222222}
ol.type li a.active { font-weight: 700; }
.isotope-item { z-index: 2 }
.isotope-hidden.isotope-item { z-index: 1 }
.isotope,
.isotope .isotope-item {
    /* change duration value to whatever you like */
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    transition-duration: 0.8s;
}
.isotope-item {
    margin-right: -1px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.isotope {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition-property: height, width;
    -moz-transition-property: height, width;
    transition-property: height, width;
}
.isotope .isotope-item {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property: -moz-transform, opacity;
    transition-property: transform, opacity;
}
.portfolio-item{
	margin-bottom: 30px;
}
.portfolio-item .hover-bg{
	height: 260px;
	overflow: hidden;
	position: relative;
}

.hover-bg .hover-text {
	position: absolute;
	text-align: center;
	margin: 0 auto;
	color: #ffffff;
	background: rgba(0, 0, 0, 0.66);
	padding: 25% 0;
	height: 100%;
	width: 100%;
	opacity: 0;
    transition: all 0.5s;
}
.hover-bg .hover-text>h4{
	opacity: 0;
	-webkit-transform: translateY(100%);
            transform: translateY(100%);
            transition: all 0.3s;
}
.hover-bg:hover .hover-text>h4{
	opacity: 1;
    -webkit-backface-visibility:hidden;
    -webkit-transform: translateY(0);
            transform: translateY(0);
}
.hover-bg .hover-text>i{
	opacity: 0;
	-webkit-transform: translateY(0);
            transform: translateY(0);
            transition: all 0.3s;
}
.hover-bg:hover .hover-text>i{
	opacity: 1;
    -webkit-backface-visibility:hidden;
   -webkit-transform: translateY(100%);
            transform: translateY(100%);
}
.hover-bg:hover .hover-text{
	opacity: 1;
}
#tf-works i.fa {
	height: 30px;
	width: 30px;
	border: 1px solid #888e21;
	font-size: 20px;
	padding: 5px;
	border-radius: 50%;
	color: #888e21;
}
/* Testimonials Section */
#tf-testimonials{
	background: url(../img/05.jpg);
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	background-repeat: no-repeat;
	color: #ffffff;
}

#tf-testimonials .overlay{
	background: -moz-linear-gradient(top,  rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.73) 17%, rgba(0,0,0,0.66) 35%, rgba(0,0,0,0.55) 62%, rgba(0,0,0,0.4) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.8)), color-stop(17%,rgba(0,0,0,0.73)), color-stop(35%,rgba(0,0,0,0.66)), color-stop(62%,rgba(0,0,0,0.55)), color-stop(100%,rgba(0,0,0,0.4))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.73) 17%,rgba(0,0,0,0.66) 35%,rgba(0,0,0,0.55) 62%,rgba(0,0,0,0.4) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.73) 17%,rgba(0,0,0,0.66) 35%,rgba(0,0,0,0.55) 62%,rgba(0,0,0,0.4) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.73) 17%,rgba(0,0,0,0.66) 35%,rgba(0,0,0,0.55) 62%,rgba(0,0,0,0.4) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.73) 17%,rgba(0,0,0,0.66) 35%,rgba(0,0,0,0.55) 62%,rgba(0,0,0,0.4) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc000000', endColorstr='#66000000',GradientType=0 ); /* IE6-9 */
	padding: 80px 0;
	background-attachment: fixed;
}
#testimonial {
	padding: 30px 0;
}
#testimonial .item{
    display: block;
    width: 100%;
    height: auto;
}

#testimonial .item p {
	font-weight: 400;
	margin: 30px 0;
	color: #d1d1d1;
}
/* Contact Section */
#tf-contact{
	padding: 80px 0;
}

label {
	float: left;
	font-size: 12px;
	font-weight: 400;
	font-family: 'Open Sans', sans-serif;
}
#tf-contact .form-control {
	display: block;
	width: 100%;
	padding: 6px 12px;
	font-size: 14px;
	line-height: 1.42857143;
	color: #555;
	background-color: #fff;
	background-image: none;
	border: 1px solid #ccc;
	border-radius: 2px;
	-webkit-box-shadow: none;
	box-shadow: none;
	-webkit-transition: none;
	-o-transition: none;
	transition: none;
}

#tf-contact .form-control:focus {
	border-color: inherit;
	outline: 0;
	-webkit-box-shadow: transparent;
	box-shadow: transparent;
}

button.btn.tf-btn.btn-default {
	float: right;
	background: #888e21;
	border: 0;
	border-radius: 0;
	padding: 10px 40px;
	color: #ffffff;
	text-transform: uppercase;
}

.btn:active, .btn.active {
	background-image: none;
	outline: 0;
	-webkit-box-shadow: none;
	box-shadow: none;
}

.btn:focus, 
.btn:active:focus, 
.btn.active:focus, 
.btn.focus, 
.btn:active.focus, 
.btn.active.focus {
	outline: thin dotted;
	outline: none;
	outline-offset: none;
}
/* Footer */
nav#footer{
	background: #222222;
	color: #ffffff;
	padding: 20px 0 15px 0;
}
nav#footer .fnav{ vertical-align: middle;}
ul.footer-social li{
	display: inline-block;
	margin-right: 10px;
}
nav#footer p{
	font-size: 12px;
	margin-top: 10px;
}
#footer i.fa {
	height: 30px;
	width: 30px;
	border: 2px solid #8c8c8c;
	font-size: 20px;
	padding: 4px 5px;
	border-radius: 50%;
	color: #8c8c8c;
	transition: all 0.5s;
}
#footer i.fa:hover{
	background: #888e21;
	border-color: #888e21;
	color: #ffffff;
}

/* Sección Información de interés */

.card {
	position: relative;
	width: 100%;
	min-height: 200px;
	height: 510px;
	border-radius: 14px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff;
	;
  }
  
  .bg {
	position: absolute;
	top: 5px;
	left: 5px;
	width: 98%;
	height: 500px;
	min-height: 190px;
	z-index: 2;
	background: rgba(255, 255, 255, .95);
	backdrop-filter: blur(24px);
	border-radius: 10px;
	overflow: hidden;
	outline: 2px solid white;
  }
  
  .blob {
	position: absolute;
	z-index: 1;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 410px;
	border-radius: 50%;
	opacity: 1;
	filter: blur(12px);
	animation: blob-bounce 5s infinite ease;
  }
  
  @keyframes blob-bounce {
	0% {
	  transform: translate(-100%, -100%) translate3d(0, 0, 0);
	}
  
	25% {
	  transform: translate(-100%, -100%) translate3d(100%, 0, 0);
	}
  
	50% {
	  transform: translate(-100%, -100%) translate3d(100%, 100%, 0);
	}
  
	75% {
	  transform: translate(-100%, -100%) translate3d(0, 100%, 0);
	}
  
	100% {
	  transform: translate(-100%, -100%) translate3d(0, 0, 0);
	}
  }

/* Globo contactenos */

/* From Uiverse.io by Shoh2008 */ 
.loader {
	width: 150px;
	height: 150px;
	display: block;
	margin: 20px auto;
	box-sizing: border-box;
	position: relative;
  }
  
  .loader::after {
	content: '';
	width: 150px;
	height: 150px;
	left: 0;
	bottom: 0;
	position: absolute;
	border-radius: 50% 50% 0;
	border: 45px solid red;
	transform: rotate(45deg) translate(0, 0);
	box-sizing: border-box;
	animation: animMarker 0.4s ease-in-out infinite alternate;
  }
  
  .loader::before {
	content: '';
	box-sizing: border-box;
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	top: 150%;
	width: 44px;
	height: 4px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.2);
	animation: animShadow 0.4s ease-in-out infinite alternate;
  }
  
  @keyframes animMarker {
	0% {
	  transform: rotate(45deg) translate(5px, 5px);
	}
  
	100% {
	  transform: rotate(45deg) translate(-5px, -5px);
	}
  }
  
  @keyframes animShadow {
	0% {
	  transform: scale(0.5);
	}
  
	100% {
	  transform: scale(1);
	}
  }
	  
/* Loader de carga */

/* From Uiverse.io by gustavofusco */ 
.pencil {
	display: block;
	width: 10em;
	height: 10em;
  }
  
  .pencil__body1,
  .pencil__body2,
  .pencil__body3,
  .pencil__eraser,
  .pencil__eraser-skew,
  .pencil__point,
  .pencil__rotate,
  .pencil__stroke {
	animation-duration: 3s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
  }
  
  .pencil__body1,
  .pencil__body2,
  .pencil__body3 {
	transform: rotate(-90deg);
  }
  
  .pencil__body1 {
	animation-name: pencilBody1;
  }
  
  .pencil__body2 {
	animation-name: pencilBody2;
  }
  
  .pencil__body3 {
	animation-name: pencilBody3;
  }
  
  .pencil__eraser {
	animation-name: pencilEraser;
	transform: rotate(-90deg) translate(49px,0);
  }
  
  .pencil__eraser-skew {
	animation-name: pencilEraserSkew;
	animation-timing-function: ease-in-out;
  }
  
  .pencil__point {
	animation-name: pencilPoint;
	transform: rotate(-90deg) translate(49px,-30px);
  }
  
  .pencil__rotate {
	animation-name: pencilRotate;
  }
  
  .pencil__stroke {
	animation-name: pencilStroke;
	transform: translate(100px,100px) rotate(-113deg);
  }
  
  /* Animations */
  @keyframes pencilBody1 {
	from,
	  to {
	  stroke-dashoffset: 351.86;
	  transform: rotate(-90deg);
	}
  
	50% {
	  stroke-dashoffset: 150.8;
   /* 3/8 of diameter */
	  transform: rotate(-225deg);
	}
  }
  
  @keyframes pencilBody2 {
	from,
	  to {
	  stroke-dashoffset: 406.84;
	  transform: rotate(-90deg);
	}
  
	50% {
	  stroke-dashoffset: 174.36;
	  transform: rotate(-225deg);
	}
  }
  
  @keyframes pencilBody3 {
	from,
	  to {
	  stroke-dashoffset: 296.88;
	  transform: rotate(-90deg);
	}
  
	50% {
	  stroke-dashoffset: 127.23;
	  transform: rotate(-225deg);
	}
  }
  
  @keyframes pencilEraser {
	from,
	  to {
	  transform: rotate(-45deg) translate(49px,0);
	}
  
	50% {
	  transform: rotate(0deg) translate(49px,0);
	}
  }
  
  @keyframes pencilEraserSkew {
	from,
	  32.5%,
	  67.5%,
	  to {
	  transform: skewX(0);
	}
  
	35%,
	  65% {
	  transform: skewX(-4deg);
	}
  
	37.5%, 
	  62.5% {
	  transform: skewX(8deg);
	}
  
	40%,
	  45%,
	  50%,
	  55%,
	  60% {
	  transform: skewX(-15deg);
	}
  
	42.5%,
	  47.5%,
	  52.5%,
	  57.5% {
	  transform: skewX(15deg);
	}
  }
  
  @keyframes pencilPoint {
	from,
	  to {
	  transform: rotate(-90deg) translate(49px,-30px);
	}
  
	50% {
	  transform: rotate(-225deg) translate(49px,-30px);
	}
  }
  
  @keyframes pencilRotate {
	from {
	  transform: translate(100px,100px) rotate(0);
	}
  
	to {
	  transform: translate(100px,100px) rotate(720deg);
	}
  }
  
  @keyframes pencilStroke {
	from {
	  stroke-dashoffset: 439.82;
	  transform: translate(100px,100px) rotate(-113deg);
	}
  
	50% {
	  stroke-dashoffset: 164.93;
	  transform: translate(100px,100px) rotate(-113deg);
	}
  
	75%,
	  to {
	  stroke-dashoffset: 439.82;
	  transform: translate(100px,100px) rotate(112deg);
	}
  }

  /* Texto carga */

  /* From Uiverse.io by Chriskoziol */ 
.spinnerContainer {
	display: flex;
	flex-direction: column;
	align-items: center;
  }
  .loader_text {
	color: #4a4a4a;
	font-family: "Poppins",sans-serif;
	font-weight: 500;
	font-size: 25px;
	-webkit-box-sizing: content-box;
	box-sizing: content-box;
	height: 40px;
	padding: 10px 10px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	border-radius: 8px;
  }
  
  .words {
	overflow: hidden;
  }
  
  .word {
	display: block;
	height: 100%;
	padding-left: 6px;
	color: #299fff;
	animation: cycle-words 5s infinite;
  }
  
  @keyframes cycle-words {
	10% {
	  -webkit-transform: translateY(-105%);
	  transform: translateY(-105%);
	}
  
	25% {
	  -webkit-transform: translateY(-100%);
	  transform: translateY(-100%);
	}
  
	35% {
	  -webkit-transform: translateY(-205%);
	  transform: translateY(-205%);
	}
  
	50% {
	  -webkit-transform: translateY(-200%);
	  transform: translateY(-200%);
	}
  
	60% {
	  -webkit-transform: translateY(-305%);
	  transform: translateY(-305%);
	}
  
	75% {
	  -webkit-transform: translateY(-300%);
	  transform: translateY(-300%);
	}
  
	85% {
	  -webkit-transform: translateY(-405%);
	  transform: translateY(-405%);
	}
  
	100% {
	  -webkit-transform: translateY(-400%);
	  transform: translateY(-400%);
	}
  }

  /*Visitas */

  /* From Uiverse.io by Nawsome */ 
.pl {
	display: block;
	width: 19.375em;
	height: 19.375em;
	margin-top: 20%;
  }
  
  .pl__arrows,
  .pl__ring-rotate,
  .pl__ring-stroke,
  .pl__tick {
	animation-duration: 2s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
  }
  
  .pl__arrows {
	animation-name: arrows42;
	transform: rotate(45deg);
	transform-origin: 16px 52px;
  }
  
  .pl__ring-rotate,
  .pl__ring-stroke {
	transform-origin: 80px 80px;
  }
  
  .pl__ring-rotate {
	animation-name: ringRotate42;
  }
  
  .pl__ring-stroke {
	animation-name: ringStroke42;
	transform: rotate(-45deg);
  }
  
  .pl__tick {
	animation-name: tick42;
  }
  
  .pl__tick:nth-child(2) {
	animation-delay: -1.75s;
  }
  
  .pl__tick:nth-child(3) {
	animation-delay: -1.5s;
  }
  
  .pl__tick:nth-child(4) {
	animation-delay: -1.25s;
  }
  
  .pl__tick:nth-child(5) {
	animation-delay: -1s;
  }
  
  .pl__tick:nth-child(6) {
	animation-delay: -0.75s;
  }
  
  .pl__tick:nth-child(7) {
	animation-delay: -0.5s;
  }
  
  .pl__tick:nth-child(8) {
	animation-delay: -0.25s;
  }
  
  /* Animations */
  @keyframes arrows42 {
	from {
	  transform: rotate(45deg);
	}
  
	to {
	  transform: rotate(405deg);
	}
  }
  
  @keyframes ringRotate42 {
	from {
	  transform: rotate(0);
	}
  
	to {
	  transform: rotate(720deg);
	}
  }
  
  @keyframes ringStroke42 {
	from,
	  to {
	  stroke-dashoffset: 452;
	  transform: rotate(-45deg);
	}
  
	50% {
	  stroke-dashoffset: 169.5;
	  transform: rotate(-180deg);
	}
  }
  
  @keyframes tick42 {
	from,
	  3%,
	  47%,
	  to {
	  stroke-dashoffset: -12;
	}
  
	14%,
	  36% {
	  stroke-dashoffset: 0;
	}
  }