*, *::after, *::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
body, html{
	margin: 0;
	padding: 0;
	font-family: 'Raleway', sans-serif;
	/* font-family: 'Montserrat', sans-serif; */
	background: #ffffff;
	scroll-behavior: smooth;
}

/* ---- contenedores ---- */
.conter90{
	display: block;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	overflow: hidden;
}
.conter90a{
	display: block;
	width: 90%;
	float: left;
	overflow: hidden;
}
.conter90b{
	display: block;
	width: 90%;
	float: right;
	overflow: hidden;
}
.conter80a{
	width: 80%;
	display: block;
	overflow: hidden;
	margin: 0px auto;
}
.conter50a{
	width: 50%;
	display: block;
	overflow: hidden;
	margin: 0px auto;
}
.conter60{
	width: 60%;
	display: block;
	float: left;
	overflow: hidden;
}
.conter50{
	width: 50%;
	display: block;
	float: left;
	overflow: hidden;
}
.conter40{
	width: 40%;
	display: block;
	float: left;
	overflow: hidden;
}
.conter25{
	width: 25%;
	display: block;
	float: left;
	overflow: hidden;;
}
.contergeneral{
	width: 90%;
	max-width: 1100px;
	display: block;
	overflow: hidden;
	position: relative;
	margin-left: auto;
	margin-right: auto;
}
.conter{
	display: block;
	width: 100%;
	height: auto;
	overflow: hidden;
	float: left;
}

.tituloseccion{
	font-size: 50px;
	font-family: 'Raleway', sans-serif;
	/* font-family: 'Montserrat', sans-serif; */
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 1px;
	display: block;
}
.titulo2{
	font-size: 20px;
	font-family: 'Raleway', sans-serif;
	/* font-family: 'Montserrat', sans-serif; */
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 1px;
}
.puesto{
	font-size: 18px;
	font-family: 'Raleway', sans-serif;
	font-weight: 700;
	letter-spacing: 1px;
}
.puesto2{
	font-size: 16px;
	font-family: 'Raleway', sans-serif;
	font-weight: 700;
	letter-spacing: 1px;
}
.texto{
	font-size: 15px;
	color: #667d8f;
	font-family: 'Raleway', sans-serif;
	font-weight: 400;
	display: block;
}
.texto2{
	font-size: 12px;
	color: #667d8f;
	font-family: 'Raleway', sans-serif;
	font-weight: 400;
	display: block;
	padding-bottom: 10px;
}
.borderleft90{
	border-left: 2px solid #e1e1e1;
}
.fecha{
	font-size: 35px;
	font-family: 'Raleway', sans-serif;
	font-weight: 700;
	letter-spacing: 1px;
}
.textright{
	text-align: right;
}
.textleft{
	text-align: left;
}
.textcenter{
	text-align: center;
}
/* ---- colores ---- */
.azul1{
	color: #0f283e;
}
.azul2{
	color: #0f283e;
}
.azul3{
	color: #01BAFD;
}
/* ---- section 3 ---- */
.section3{
	display: block;
	width: 100%;
	height: auto;
	position: relative;
	overflow: hidden;
	margin: 50px 0px;
}
hr.hr1{
	display: block;
	border: .2px solid #e1e1e1;
	width: 100%;
	float: left;
}
hr.hr2{
	display: block;
	border: .2px solid #e1e1e1;
	width: 30%;
	float: right;
}
hr.hr3{
	display: block;
	border: .2px solid #e1e1e1;
	width: 100%;
	margin: 30px 0px;
	float: left;
}
.conterhistorial{
	display: block;
	width: 100%;
	height: auto;
	position: relative;
	overflow: hidden;
	float: left;
	margin: 30px 0px;
}

/* ---- section 4 ---- */
.section4{
	display: block;
	width: 100%;
	height: auto;
	position: relative;
	overflow: hidden;
	margin: 50px 0px;
}
/* ---- section 5 ---- */
.section5{
	display: block;
	width: 100%;
	height: auto;
	position: relative;
	overflow: hidden;
	margin: 50px 0px;
}


/* ---- tabs ---- */

a {
	color: #667d8f;
	text-decoration: none;
	outline: none;
}


.container > header {
	width: 90%;
	max-width: 69em;
	margin: 0 auto;
	padding: 2.875em 1.875em 1.875em;
}

.container > header h1 {
	font-size: 2.125em;
	line-height: 1.3;
	margin: 0 0 0.6em 0;
	float: left;
	font-weight: 400;
}

.container > header > span {
	display: block;
	position: relative;
	z-index: 9999;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5em;
	padding: 0 0 0.6em 0.1em;
}

.container > header > span span:after {
	width: 30px;
	height: 30px;
	left: -12px;
	font-size: 50%;
	top: -8px;
	font-size: 75%;
	position: relative;
}

.container > header > span span:hover:before {
	content: attr(data-content);
	text-transform: none;
	text-indent: 0;
	letter-spacing: 0;
	font-weight: 300;
	font-size: 110%;
	padding: 0.8em 1em;
	line-height: 1.2;
	text-align: left;
	left: auto;
	margin-left: 4px;
	position: absolute;
	color: #fff;
	background: #47a3da;
}

.container > header nav {
	float: right;
	text-align: center;
}

.container > header nav a {
	display: inline-block;
	position: relative;
	text-align: left;
	width: 2.5em;
	height: 2.5em;
	background: #fff;
	border-radius: 50%;
	margin: 0 0.1em;
	border: 4px solid #47a3da;
}

.container > header nav a > span {
	display: none;
}

.container > header nav a:hover:before {
	content: attr(data-info);
	color: #47a3da;
	position: absolute;
	width: 600%;
	top: 120%;
	text-align: right;
	right: 0;
	pointer-events: none;
}

.container > header nav a:hover {
	background: #47a3da;
}

.bp-icon:after {
	font-family: 'bpicons';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	text-align: center;
	color: #47a3da;
	-webkit-font-smoothing: antialiased;
}

.container > header nav .bp-icon:after {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	line-height: 2;
	text-indent: 0;
}

.container > header nav a:hover:after {
	color: #fff;
}

.bp-icon-next:after {
	content: "\e000";
}
.bp-icon-drop:after {
	content: "\e001";
}
.bp-icon-archive:after {
	content: "\e002";
}
.bp-icon-about:after {
	content: "\e003";
}
.bp-icon-prev:after {
	content: "\e004";
}

p.info {
	text-align: center;
	padding: 20px;
}

@media screen and (max-width: 55em) {

	.container > header h1,
	.container > header nav {
		float: none;
	}

	.container > header > span,
	.container > header h1 {
		text-align: center;
	}

	.container > header nav {
		margin: 0 auto;
	}

	.container > header > span {
		text-indent: 30px;
	}
}
.tabs {
	position: relative;
	width: 100%;
	overflow: hidden;
	margin: 1em 0 2em;
	font-weight: 300;
}

/* Nav */
.tabs nav {
	text-align: center;
}

.tabs nav ul {
	padding: 0;
	margin: 0;
	list-style: none;
	display: inline-block;
}

.tabs nav ul li {
	border: 1px solid #becbd2;
	border-bottom: none;
	margin: 0 0.25em;
	display: block;
	float: left;
	position: relative;
}

.tabs nav li.tab-current {
	border: 1px solid #47a3da;
	box-shadow: inset 0 2px #47a3da;
	border-bottom: none;
	z-index: 100;
}

.tabs nav li.tab-current:before,
.tabs nav li.tab-current:after {
	content: '';
	position: absolute;
	height: 1px;
	right: 100%;
	bottom: 0;
	width: 1000px;
	background: #47a3da;
}

.tabs nav li.tab-current:after {
	right: auto;
	left: 100%;
	width: 4000px;
}

.tabs nav a {
	color: #becbd2;
	display: block;
	font-size: 1.45em;
	line-height: 2.5;
	padding: 0 1.25em;
	white-space: nowrap;
}

.tabs nav a:hover {
	color: #768e9d;
}

.tabs nav li.tab-current a {
	color: #47a3da;
}

/* Icons */
.tabs nav a:before {
	display: inline-block;
	vertical-align: middle;
	text-transform: none;
	font-weight: normal;
	font-variant: normal;
	font-family: 'icomoon';
	line-height: 1;
	speak: none;
	-webkit-font-smoothing: antialiased;
	margin: -0.25em 0.4em 0 0;
}

.icon-food:before {
	content: "\e600";
}

.icon-lab:before {
	content: "\e601";
}

.icon-cup:before {
	content: "\e602";
}

.icon-truck:before {
	content: "\e603";
}

.icon-shop:before {
	content: "\e604";
}
.fa-code:before {
  content: "\f121"; }

/* Content */
.content section {
	padding: 2em 1em;
	display: none;
	max-width: 1230px;
	margin: 0 auto;
}

.content section:before,
.content section:after {
	content: '';
	display: table;
}

.content section:after {
	clear: both;
}

/* Fallback example */
.no-js .content section {
	display: block;
	padding-bottom: 2em;
	border-bottom: 1px solid #47a3da;
}

.content section.content-current {
	display: block;
}

.mediabox {
	float: left;
	width: 25%;
}

.mediabox img {
	max-width: 100%;
	display: block;
	margin: 0 auto;
}

.mediabox h3 {
	margin: 0.75em 0 0.5em;
}

.mediabox p {
	padding: 0 0 1em 0;
	margin: 0;
	line-height: 1.3;
}

/* Example media queries */

@media screen and (max-width: 52.375em) {
	.tabs nav a span {
		display: none;
	}

	.tabs nav a:before {
		margin-right: 0;
	}

	.mediabox {
		float: none;
		width: auto;
		padding: 0 0 35px 0;
		font-size: 90%;
	}

	.mediabox img {
		float: left;
		margin: 0 25px 10px 0;
		max-width: 40%;
	}

	.mediabox h3 {
		margin-top: 0;
	}

	.mediabox p {
		margin-left: 40%;
		margin-left: calc(40% + 25px);
	}

	.mediabox:before,
	.mediabox:after {
		content: '';
		display: table;
	}

	.mediabox:after {
		clear: both;
	}
}

@media screen and (max-width: 32em) {
	.tabs nav ul,
	.tabs nav ul li a {
		width: 100%;
		padding: 0;
	}

	.tabs nav ul li {
		width: 20%;
		width: calc(20% + 1px);
		margin: 0 0 0 -1px;
	}

	.tabs nav ul li:last-child {
		border-right: none;
	}

	.mediabox {
		text-align: center;
	}

	.mediabox img {
		float: none;
		margin: 0 auto;
		max-width: 100%;
	}

	.mediabox h3 {
		margin: 1.25em 0 1em;
	}

	.mediabox p {
		margin: 0;
	}
}
/* ---- section 6 ---- */
.section6{
	display: block;
	width: 100%;
	height: auto;
	position: relative;
	overflow: hidden;
	margin: 50px 0px;
}

.borderright{
	border-right: 1px solid #e1e1e1
}
/* ---- animacion graficas ---- */



.base1b, .base1a, .base1{
	fill: none;
	stroke: #667d8f;
	stroke-width: 2px;
	stroke-dasharray: 405;
	stroke-dashoffset: 405;
}
.base1banimated, .base1aanimated, .base1animated {
	animation: baseanimate 2s forwards;
	animation-delay: 0.3s;
}
.linea1b, .linea1a, .linea1{
	fill: none;
	stroke: #01bafd;
	stroke-width: 4px;
	stroke-dasharray: 405;
	stroke-dashoffset: 405;
}
.linea1banimated, .linea1aanimated, .linea1animated {
	animation: baseanimate 3s forwards;
	animation-delay: 0.6s;
}
.base2b, .base2a, .base2{
	fill: none;
	stroke: #667d8f;
	stroke-width: 2px;
	stroke-dasharray: 405;
	stroke-dashoffset: 405;
}
.base2banimated, .base2aanimated, .base2animated {
	animation: baseanimate 2s forwards;
	animation-delay: 0.4s;
}
.linea2b, .linea2a, .linea2{
	fill: none;
	stroke: #01bafd;
	stroke-width: 4px;
	stroke-dasharray: 405;
	stroke-dashoffset: 405;
}
.linea2banimated, .linea2aanimated, .linea2animated {
	animation: baseanimate 3s forwards;
	animation-delay: 0.7s;
}
.base3b, .base3a, .base3{
	fill: none;
	stroke: #667d8f;
	stroke-width: 2px;
	stroke-dasharray: 405;
	stroke-dashoffset: 405;
}
.base3banimated, .base3aanimated, .base3animated {
	animation: baseanimate 2s forwards;
	animation-delay: 0.5s;
}
.linea3b, .linea3a, .linea3{
	fill: none;
	stroke: #01bafd;
	stroke-width: 4px;
	stroke-dasharray: 405;
	stroke-dashoffset: 405;
}
.linea3banimated, .linea3aanimated, .linea3animated {
	animation: baseanimate 3s forwards;
	animation-delay: 0.8s;
}
.base4b, .base4a, .base4{
	fill: none;
	stroke: #667d8f;
	stroke-width: 2px;
	stroke-dasharray: 405;
	stroke-dashoffset: 405;
}
.base4banimated, .base4aanimated, .base4animated {
	animation: baseanimate 2s forwards;
	animation-delay: 0.6s;
}
.linea4b, .linea4a, .linea4{
	fill: none;
	stroke: #01bafd;
	stroke-width: 4px;
	stroke-dasharray: 405;
	stroke-dashoffset: 405;
}
.linea4banimated, .linea4aanimated, .linea4animated {
	animation: baseanimate 3s forwards;
	animation-delay: 0.9s;
}
.base5b, .base5a, .base5{
	fill: none;
	stroke: #667d8f;
	stroke-width: 2px;
	stroke-dasharray: 405;
	stroke-dashoffset: 405;
}
.base5banimated, .base5aanimated, .base5animated {
	animation: baseanimate 2s forwards;
	animation-delay: 0.7s;
}
.linea5b, .linea5a, .linea5{
	fill: none;
	stroke: #01bafd;
	stroke-width: 4px;
	stroke-dasharray: 405;
	stroke-dashoffset: 405;
}
.linea5banimated, .linea5aanimated, .linea5animated {
	animation: baseanimate 3s forwards;
	animation-delay: 1.0s;
}
.base6b, .base6a, .base6{
	fill: none;
	stroke: #667d8f;
	stroke-width: 2px;
	stroke-dasharray: 405;
	stroke-dashoffset: 405;
}
.base6banimated, .base6aanimated, .base6animated {
	animation: baseanimate 2s forwards;
	animation-delay: 0.8s;
}
.linea6b, .linea6a, .linea6{
	fill: none;
	stroke: #01bafd;
	stroke-width: 4px;
	stroke-dasharray: 405;
	stroke-dashoffset: 405;
}
.linea6banimated, .linea6aanimated, .linea6animated {
	animation: baseanimate 3s forwards;
	animation-delay: 1.1s;
}
.base7b, .base7{
	fill: none;
	stroke: #667d8f;
	stroke-width: 2px;
	stroke-dasharray: 405;
	stroke-dashoffset: 405;
}
.base7banimated, .base7animated {
	animation: baseanimate 2s forwards;
	animation-delay: 0.9s;
}
.linea7b, .linea7{
	fill: none;
	stroke: #01bafd;
	stroke-width: 4px;
	stroke-dasharray: 405;
	stroke-dashoffset: 405;
}
.linea7banimated, .linea7animated {
	animation: baseanimate 3s forwards;
	animation-delay: 1.2s;
}
.base8b, .base8{
	fill: none;
	stroke: #667d8f;
	stroke-width: 2px;
	stroke-dasharray: 405;
	stroke-dashoffset: 405;
}
.base8banimated, .base8animated {
	animation: baseanimate 2s forwards;
	animation-delay: 1.0s;
}
.linea8b, .linea8{
	fill: none;
	stroke: #01bafd;
	stroke-width: 4px;
	stroke-dasharray: 405;
	stroke-dashoffset: 405;
}
.linea8banimated, .linea8animated {
	animation: baseanimate 3s forwards;
	animation-delay: 1.3s;
}
.base9{
	fill: none;
	stroke: #667d8f;
	stroke-width: 2px;
	stroke-dasharray: 405;
	stroke-dashoffset: 405;
}
.base9animated {
	animation: baseanimate 2s forwards;
	animation-delay: 1.1s;
}
.linea9{
	fill: none;
	stroke: #01bafd;
	stroke-width: 4px;
	stroke-dasharray: 405;
	stroke-dashoffset: 405;
}
.linea9animated {
	animation: baseanimate 3s forwards;
	animation-delay: 1.4s;
}
.base10{
	fill: none;
	stroke: #667d8f;
	stroke-width: 2px;
	stroke-dasharray: 405;
	stroke-dashoffset: 405;
}
.base10animated {
	animation: baseanimate 2s forwards;
	animation-delay: 1.2s;
}
.linea10{
	fill: none;
	stroke: #01bafd;
	stroke-width: 4px;
	stroke-dasharray: 405;
	stroke-dashoffset: 405;
}
.linea10animated {
	animation: baseanimate 3s forwards;
	animation-delay: 1.5s;
}
@keyframes baseanimate {
	to {
		stroke-dashoffset: 0;
	}
}
/* ---- portfolio ---- */
.portadaweb{
	width: 100%;
	display: block;
	padding-bottom: 5px;
}
.nombreportfolio{
	font-size: 20px;
	font-weight: 400;
	color: #667d8f;
}
.conterportfolioweb{
	width: 90%;
	display: block;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 15px;
	-webkit-box-shadow: 10px 10px 17px -7px rgba(0,0,0,0.36);
	-moz-box-shadow: 10px 10px 17px -7px rgba(0,0,0,0.36);
	box-shadow: 10px 10px 17px -7px rgba(0,0,0,0.36);
	background-color: #ffffff;
	text-align: center;
}
.padbot20px{
	padding-bottom: 20px;
}

.tituloproyecto{
	font-size: 20px;
	font-weight: 600;
	color: #667d8f;
}
.fechainfo{
	font-size: 15px;
	font-weight: 600;
	color: #667d8f;
}
.myButton {
	-moz-box-shadow: 0px 10px 14px -7px #cccccc;
	-webkit-box-shadow: 0px 10px 14px -7px #cccccc;
	box-shadow: 0px 10px 14px -7px #cccccc;
	background-color:#01bafd;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-weight: 
	font-size:15px;
	padding:8px 15px;
	text-decoration:none;
	font-weight: 400;
}
.myButton:hover {
	background-color:#667d8f;
	color: #ffffff;
}
.myButton:active {
	position:relative;
	top:1px;
}

.contertitulosec{
	width: 100%;
	display: block;
	overflow: hidden;
	margin: 0px auto 30px auto;
	text-align: center;
}
.titulosectabs{
	color: #47a3da;
	font-size: 1.45em;
}

/* ---- home ---- */
.section2{
	display: block;
	width: 100%;
	height: auto;
	position: relative;
	overflow: hidden;
	margin: 0px 0px 50px 0px;
	padding-top: 100px;
}
.nombreh1{
	color: #0f283e;
	font-size: 55px;
	font-weight: 400;
}
.nombreh2{
	color: #01BAFD;
	font-size: 55px;
	text-transform: uppercase;
	font-weight: 600;
}

h1,h2,h3,p {
	margin: 0px;
	padding: 0px;
}
.tituloed{
	color: #667d8f;
	font-size: 20px;
	font-weight: 400;
}

.iconoredes{
	display: block;	
	width: 20px;
	float: right;
	color: #667d8f;
	margin: 0px 5px;
}
/* --- slider --*/

.slider {
  width: 100%;
  height: calc(100vh - 160px);
  position: relative;
  overflow:hidden;
}

.slider-image {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  max-width: 100%;
/*   max-height: 100%; */
  width: 100%;
  opacity: 0;
  transition: opacity 1000ms ease-in-out;
  z-index: 0;
}

.slider-image.active {
  opacity: 1;
}
/* animacion nombre */

.nombreh1animated{
	animation: fadeIn;
	animation-delay: .3s;
}
.nombreh2animated{
	animation: fadeIn;
	animation-delay: .6s;
}
.tituloedanimated{
	animation: fadeIn;
	animation-delay: .9s;
}
.redesanimated{
	animation: fadeInUp;
	animation-delay: 1.2s;
}
.info1animated{
	animation: fadeInRight;
	animation-delay: 1.5s;
}
.infoanimated{
	animation: fadeInRight;
	animation-delay: 1.8s;
}
.exp1a, .exp1ab, .exp2a, .exp2ab, .exp3a, .exp3ab {
	opacity: 0;
}
.exp1animated{
	animation: fadeInLeft;
	animation-delay: .3s;
}
.exp1aanimated{
	animation: fadeInRight;
	animation-delay: .3s;
}

.edu1a, .edu1ab, .edu2a, .edu2ab, .edu3a, .edu3ab,
.edu4a, .edu4ab, .edu5a, .edu5ab {
	opacity: 0;
}
.edu1animated{
	animation: fadeInLeft;
	animation-delay: .3s;
}
.edu1aanimated{
	animation: fadeInRight;
	animation-delay: .3s;
}
.fotosview{

}
#navbar {
      background: rgba(15, 40, 62, .7);
      position: fixed;
      top: 0;
      width: 100%;
      display: block;
      transition: top 0.8s;
      z-index: 300;
}

#navbar a {
      float: left;
      display: block;
      color: #fff;
      font-weight: 300;
      text-decoration: none;
      margin: 30px 20px;
      font-size: 16px;
}
#navbar a:hover{
	color: #01BAFD !important;
}
.logomenu{
	display: block;
	height: 38px;
	float: right;
	margin: 19px 30px;
}
.section7{
	width: 100%;
	height: auto;
	background-color: #0f283e;
	padding: 100px 0px 50px 0px;
	overflow: hidden;
}
.contactame{
	font-size: 30px;
	text-transform: uppercase;
	color: #ffffff;
	font-weight: 600;
	opacity: 0;
}
span.divider.center {
    margin-right: auto;
    margin-left: auto;
}
span.divider {
    display: block;
    margin: 35px 0px 0px 0px;
        margin-right: 0px;
        margin-left: 0px;
    width: 150px;
    height: 2px;
    background-color: #01bafd;
    opacity: 0;
}
.logocontacto{
	width: 150px;
	display: block;
	margin: 50px auto;
}
.nombrecontacto1{
	color: #ffffff;
	font-size: 45px;
	font-weight: 200;
}
.nombrecontacto2{
	color: #ffffff;
	font-size: 45px;
	text-transform: uppercase;
	font-weight: 600;
}
.tituloed2{
	color: #667d8f;
	font-size: 15px;
	font-weight: 300;
}
span.divider {
    display: block;
    margin: 35px 0px 0px 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        margin-left: 0px;
    width: 150px;
    height: 2px;
    background-color: #01bafd;
}
span.divider.bottom {
    margin-bottom: 20px;
    width: 60px;
    height: 4px;
}
.mail{
	display: block;
	color: #667d8f !important;
	font-size: 15px;
	font-weight: 300;
}
.contacanimated{
	animation: fadeInUp;
	animation-delay: .3s;
}
.cont1acanimated{
	animation: fadeInUp;
	animation-delay: .6s;
}
.cont2acanimated{
	animation: fadeInUp;
	animation-delay: .9s;
}
.cont3acanimated{
	animation: fadeInUp;
	animation-delay: 1.2s;
}
.cont4acanimated{
	animation: fadeInUp;
	animation-delay: 1.5s;
}
.cont5acanimated{
	animation: fadeInUp;
	animation-delay: 1.8s;
}
.cont6acanimated{
	animation: fadeInUp;
	animation-delay: 2.1s;
}
.yo{
	width: 100%;
	display:block;
	float left;
}
.yoanimate{
	animation: fadeIn;
	animation-delay: .3s;
}