/* RESET*/

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,del, dfn, img, ins, kbd, q, s, samp,small, strike, sub, sup, tt, var,u, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,caption, thead, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
	content: '';
	content: none;
}

*{box-sizing:border-box;}

#menuToggle {
	display: none;
}

#redes {
	width: 50px;
	height: 200px;
	position: fixed;
	top: 40%;
	right: 5%;
	z-index: 10;
	text-align: center;
	border: 1px solid rgba(250,250,250,0.5);
	padding-top: 20px;
	border-radius: 30px;
}

#redes li a img {
	width: 70%;
	margin-bottom: 5px;
}

#redes li a:hover {
	opacity: 0.5;
}


/*ESTILOS GENERALES
****************************************/

body {
	font-family: 'Raleway', sans-serif;
	}
	
::-webkit-scrollbar {
	width: 10px;
	}
	
::-webkit-scrollbar-track { /*fondo-barra-scroll*/
	background-color: #E9E9E9;
	}

::-webkit-scrollbar-thumb { /*barra-scroll*/
	background-color: #FFB09B;
	}
	
::-moz-selection {
	background-color:#E9E9E9;
	}
	
::selection {
	background-color:#00CAD5;
	color: #fff;
	}
	
a {
	text-decoration:none;	
		
	transition: 0.3s ease;
	-webkit-transition: 0.3s ease;
	-o-transition: 0.3s ease;
	-moz-transition: 0.3s ease;
	}


html, body {
  height: 100%;
}

/*menu escritorio*/
.logo {
	width: 200px;
	height: 80px;
	top: 0px;
	left: 100px;	
	position: fixed;
	z-index: 10;
	background-image: url(../img/koi2.png);
  background-position: center center;
  background-repeat: no-repeat;
  
}

#menu-pc {
	width: 100%;
	height: 80px;	
	position: fixed;	
	z-index: 10;
	box-shadow: 9px 8px 24px -16px rgba(0,0,0,0.45);
	color: white;
	font-size: 13px;
	padding-top: 30px;
	padding-right: 100px;
	text-align: right;	
}

#menu-pc li {
	display: inline-block;
	margin: 0 10px;	
}

#menu-pc li a {
	color: white;
	font-weight: 600;
	letter-spacing: 0.5px;
  padding-bottom: 30px;
  border-bottom: 5px solid rgba(255, 255, 255, 0.0);
}

#menu-pc li a:hover {	
  padding-bottom: 30px;
  border-bottom: 5px solid white;
}

#menu-pc li a span {
	font-weight: 900;
  padding-bottom: 30px;
  border-bottom: 5px solid white;  
}

/*Estilos generales de los contenedores*/
.contenedor-slide {
  position: relative;
  width: 100%;
  height: 100%;
}

.contenedor-slide {
  padding-top: 13%;
  color: white;
}

.contenedor-slide section {
  width: 900px;
  height: auto;
  margin: auto;
}

/*Boton animado*/
#boton-koi-contenedor {
  width: 100%;
  height: 50px;
  margin: auto;
  position: relative; 
}

.button {
  position: absolute;
  color: white;
  top: 0;
  left: 0;
  border: 1px solid rgba(255, 255, 255, 0.5);  
  height: 50px;
  width: 100%;
  font-size: 17px;
  line-height: 48px;
  letter-spacing: 2px; 
  font-weight: 500; 
  overflow: hidden;
  text-align: center;  
  z-index: 3;
  background-image: url(../img/go-to.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 0%;  
  box-shadow: 9px 8px 24px -16px rgba(0,0,0,0.3);

  transition: 0.3s ease;
	-webkit-transition: 0.3s ease;
	-o-transition: 0.3s ease;
	-moz-transition: 0.3s ease;
}

.button:hover {
  background-color: #fff;  
  color: rgba(250,250,250,0.0);
  background-size: 3%;
  letter-spacing: 5px;
  background-size: 3%;
  box-shadow: 9px 8px 30px -16px rgba(0,0,0,0.8);
}

.particle-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateZ(0);
  z-index: 1;
}

.particle {
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  background: rgba(255, 255, 255, 0.8); 
  border-radius: 9px;
  display: block;
  position: absolute;
}


/*cierre boton animado*/

.contenedor-slide section h5 {
  font-size: 150px;
  font-weight: 900;
  line-height: 120px;
  text-align: center;
}
.contenedor-slide section h4 {
  font-weight: 900;
  font-size: 68px;
  margin-bottom: 10px;
  text-align: center;
}

.contenedor-slide section h1 {
  font-weight: 300;
  font-size: 30px;
  line-height: 36px;
  letter-spacing: 1px;
  text-align: center;
  margin-bottom: 40px;
}

.contenedor-slide section h2 {
  font-weight: 800;
  font-size: 30px;
  line-height: 50px;
}

.contenedor-slide section p {
  font-weight: 400;
  font-size: 22px;
  line-height: 44px;  
}


/*botón siguiente diapositiva*/

.contenedor-slide .go-down {
	position: absolute;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
	height: 50px;
	width: 30px;
	bottom: 60px;
	background-color: transparent;
	border: 2px solid white;
	border-radius: 20px;
	cursor: pointer;
	outline: none;
}

.contenedor-slide .go-down:before {
	position: absolute;
	top: 10px;
	left: 50%;
	content: "";
	width: 6px;
	height: 6px;
	margin-left: -3px;
	background-color: #fff;
	border-radius: 100%;
	-webkit-animation: scroll_down_btn-animation 2s infinite;
	animation: scroll_down_btn-animation 2s infinite;
	box-sizing: border-box;
  }

  @keyframes scroll_down_btn-animation {
    0% {
      transform: translate(0, 0);
      opacity: 0;
    }
    40% {
      opacity: 1;
    }
    80% {
      transform: translate(0, 20px);
      opacity: 0;
    }
    100% {
      opacity: 0;
    }
    }
    @-webkit-keyframes scroll_down_btn-animation {
    0% {
      transform: translate(0, 0);
      opacity: 0;
    }
    40% {
      opacity: 1;
    }
    80% {
      transform: translate(0, 20px);
      opacity: 0;
    }
    100% {
      opacity: 0;
    }
    }
/*Cierre botón siguiente diapositiva*/

/*Estilos especificos de cada contenedor*/

/*1*/
#section01 { 
  background-color: #00CAD5;
  padding-top: 300px;
}

#section01 section {
  width: 900px;
}

/*2 nuestra mision*/
#section02 { 
  background-color: #FF1830;
}

#section02 section {
  background-image: url(../img/icono.png);
  background-position: top left;
  background-repeat: no-repeat;
  padding-left: 200px;
}

#section02 section #boton-koi-contenedor {
  margin-top: 40px; 
}

#section02 section #boton-koi-contenedor .boton-koi::before {
  width: 700px;
  height: 700px;  
}
#section02 section #boton-koi-contenedor .boton-koi:hover {
  color: #FF1830;  
}


/*3 nuestra experiencia*/
#section03 { 
  background-color: #FFB09B;
}

#section03 section {
  background-image: url(../img/icono2.png);
  background-position: top left;
  background-repeat: no-repeat;
  padding-left: 200px;
}

#section03 section #boton-koi-contenedor {
  margin-top: 40px; 
}

#section03 section #boton-koi-contenedor .boton-koi::before {
  width: 900px;
  height: 900px;  
}
#section03 section #boton-koi-contenedor .boton-koi:hover {
  color: #FFB09B;  
}

#section03 section #boton-koi-contenedor .boton-koi:hover::before {
  box-shadow: inset 0 0 0 450px #fff;
}

/*4*/
#section04 { 
  background-color: #00CAD5;
  text-align: center;
}

#section04 section ul {
  margin-top: 40px;
}

#section04 section ul li {
  display: inline;
  text-align: center;
}

#section04 section ul li a:hover {
  opacity: 0.7;
}

#section04 section ul li img {
  background-color: ;  
}



/*5 Blog*/
#section05 { 
  background-color: #FF1830; 
  background-image: url(../img/blog.png); 
  background-position: center center; 
  background-repeat: no-repeat;
  padding-top: 15%;
}

#section05 section  {
  width: 760px;
  height: 200px;
  margin-top: 80px; 
  background-image: url(../img/icono3.png);
  background-position: top left;
  background-repeat: no-repeat;
  padding-left: 140px;
}

#section05 section p a {
  color: white;
}

#section05 section p a:hover {
  color: #faccc0;
  text-decoration: underline;
}

/*6*/
#section06 { 
  background-color: #FFB09B;
  padding-top: 200px;
}

#section06 h2 {
	text-align: center;
	color: #fff;
	font-size: 22px;
  font-weight: 500;
	margin-bottom: 100px;
}

#section06 h2 a {
	color: #fff;
  font-weight: 600;
}

#section06 h2 a:hover {
	color: #FF1830;
}

#footer-home {
  width: 300px;
  height: 250px;
  margin: auto; 
  margin-top: 50px; 
  text-align: center;
  font-size: 16px;
  line-height: 40px;
}

#section06 #subir {
  text-align: center;
  width: 100%;
  height: 30px;
  margin: auto;
  position: absolute;
}


/*
#section07 { background-color: #00CAD5;}
#section08 { background-color: #FF1830;}
#section09 { background-color: #FFB09B;}
#section10 { background-color: #00CAD5;}
*/


/* M E D I A _ Q U E R Y
*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/


/*1600*/
@media screen and (max-width:1600px) {

.contenedor-slide {
  padding-top: 15%;
  }

/*1*/
#section01 { 
  padding-top: 13%;
}

}

/*1600*/
@media screen and (max-width:1600px) {

#menu-pc li a,
#menu-pc li a:hover,
#menu-pc li a span  {
  padding-bottom: 20px;
}

.contenedor-slide section {
  width: 800px;
}

.contenedor-slide section h2 {
  font-size: 20px;
  line-height: 40px;
}

.contenedor-slide section p {
  font-size: 18px;
  line-height: 38px;  
}

.contenedor-slide section h5 {
  font-size: 110px;
  line-height: 100px;
}

.contenedor-slide section h4 {
  font-size: 48px;
  margin-bottom: 10px;
}

.contenedor-slide section h1 {
  font-size: 20px;
  margin-bottom: 20px;
}

#section01 section {
  width: 700px;
}

#section04 section ul li a img {
  width: 130px;
}

#section05 section  {
  width: 600px;
  height: 130px;
}

#section06 { 
  padding-top: 120px;
}
#section06 h2 {
	font-size: 16px;
	margin-bottom: 20px;
}

#footer-home {
  height: 150px;  
  font-size: 14px;
  line-height: 28px;
  margin-top: 30px; 
}

.button {
  font-size: 15px;
}
  
}


/*1200*/
@media screen and (max-width:1200px) {

  #redes {
    width: 40px;
    height: 180px;
    top: 70%;
    right: 0;
    z-index: 10;
    text-align: center;
    border: 1px solid rgba(250,250,250,0.5);
    padding-top: 20px;
    border-radius: 25px 0 0 25px;
  }
  
  #redes li a img {
    width: 80%;
    margin-bottom: 5px;	
    margin-left: 3px;
  }
  
  #redes li a:hover {
    opacity: 0.5;
  }
  
  }

/*1024*/
@media screen and (max-width:1200px) {

.contenedor-slide {
  padding-top: 25%;
  }

.contenedor-slide section {
  width: 60%;
}

.contenedor-slide section h2 {
  font-weight: 700;
  font-size: 20px;
  line-height: 40px;
}

.contenedor-slide section p {
  font-size: 16px;
  line-height: 36px;  
}

/*1*/
#section01 { 
  padding-top: 20%;
}


/*2 y 3*/

#section02 section,
#section03 section, {
  padding-left: 130px;
  background-size: 15%;
}

/*4*/

#section04 section ul li img {
  width: 24%;
}

#section04 section ul li:nth-child(5) {
  display: none;
}

/*5 Blog*/
#section05 { 
  background-size: 90%;
  padding-top: 22%;
}

#section05 section {
  width: 500px;
  height: auto;
  background-size: 13%;
  padding-left: 105px;
}

}


/*1000*/
@media screen and (max-width:1000px) {

/*menu responsive*/
#logo-movil {
	width: 90px;
	height: 60px;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 10;
	background-image: url(../img/logo-menu.png);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 70%;
	background-color: rgba(250,250,250,0.95);
	border-bottom: 1px solid #FFB09B;
	box-shadow: 9px 8px 24px -16px rgba(0,0,0,0.75);
} 

#menuToggle {
	display: block;
    position: absolute;
    top: 30px;
    left: 30px;
      
  z-index: 1;
  
  -webkit-user-select: none;
  -moz-user-select: none;
   -ms-user-select: none;
       user-select: none;
}

#menuToggle a
{
  text-decoration: none;
  color: #fff;  
  
  transition: color 0.3s ease;
}

#menuToggle a:hover
{
  color: #00CAD5;
}


#menuToggle input
{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  
  cursor: pointer;
  
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
  
  -webkit-touch-callout: none;
}

#menuToggle span
{
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  
  background: #FFF;
  border-radius: 3px;
  
  z-index: 1;
  
  transform-origin: 4px 0px;
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

/*Transforma la hamburguesa en una cruz*/
#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #00CAD5;
}

/*linea de en medio de la hamburguesa*/
#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

/*linea debajo de la hamburguesa*/
#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}

/*
 * Make this absolute positioned
 * at the top left of the screen
 */
#menu-responsive
{
  position: absolute;
  width: 300px;
  margin: -100px 0 0 -50px;
  padding: 50px;
  padding-top: 125px;
  
  background: #FF1830;
  border-bottom: 2px solid #FFF;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */
  
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu-responsive li
{
  padding: 10px 0;
  font-size: 16px;
}

/*
 * And let's slide it in from the left
 */
#menuToggle input:checked ~ ul {
  transform: none; }
/*cierre menu responsive*/

#menu-pc {
    display: none;
  }
  
  .logo {
    width: 50%;
    height: 147px;
    top: 0px;
    left: 25%;
    background-image: url(../img/logo-movil.png);
    background-size: auto;
  }
  
  .btn-blog {
    width: 80px;
    height: 60px;
    line-height: 60px;	
    font-size: 25px;
    font-weight: 900;
    color: white;
    position: fixed;
    top: 25px;
    right: 5%;
    z-index: 10;
    text-align: center;
  }

.contenedor-slide {
  padding-top: 15%;
  }

#boton-koi-contenedor .boton-koi {
  font-size: 15px;
}

/*1 Hola*/ 
  #section01 section {
    width: 280px;
  }

  .contenedor-slide section h5 {
    font-size: 120px;
    font-weight: 900;
    line-height: 100px;
  }

  .contenedor-slide section h4 {
    font-size: 52px;
  }
  
  .contenedor-slide section h1 {
    font-size: 20px;
    line-height: 26px;
    margin-bottom: 30px;
  }

/*2 y 3*/

#section02 section,
#section03 section {
  padding-left: 0px;
  padding-top: 100px;
  background-size: 15%;
  background-position: top center;
  text-align: center;  
}  

}


/*768*/
@media screen and (max-width:780px) {

.contenedor-slide {
  padding-top: 30%;
}

/*1*/
#section01 { 
  padding-top: 40%;
}

/*2 y 3*/

#section02 section,
#section03 section {
  padding-top: 150px;
  background-size: 20%;
}

/*5 Blog*/
#section05 { 
  padding-top: 45%;
}  

}


/*móvil*/
@media screen and (max-width:500px) {

.contenedor-slide {
  padding-top: 40%;
}

.contenedor-slide section {
  width: 80%;
}

/*1 Hola*/
#section01 { 
  padding-top: 60%;
}

/*1 Hola*/ 
#section01 section {
  width: 220px;
}

.contenedor-slide section h5 {
  font-size: 95px;
  line-height: 80px;
}

.contenedor-slide section h4 {
  font-size: 43px;
}

.contenedor-slide section h1 {
  font-size: 17px;
  letter-spacing: normal;
  font-weight: 600;
}

/*2 y 3*/

#section02 section,
#section03 section {
  padding-top: 100px;
  background-size: 25%;
}

.contenedor-slide section h2 {
  font-weight: 700;
  font-size: 20px;
  line-height: 33px;
}

.contenedor-slide section p {
  font-size: 16px;
  line-height: 30px;  
}

/*4*/

#section04 section {
  padding: 0 10px;
}

#section04 section ul li img {
  width: 32%;
}

#section04 section ul li:nth-child(4),
#section04 section ul li:nth-child(5) {
  display: none;
}


/*5 Blog*/
#section05 { 
  background-size: 100%;
  padding-top: 50%;
}

#section05 section {
  width: 240px;
  background-size: 18%;
  padding-left: 0px;
  padding-top: 100px;
  background-position: top left;
}





}