* {
	outline: none;

}

body{
	margin: 0%;
	padding:0%;
      background-color: #f9fafb;


overflow-x: hidden
}


a:hover{
	text-decoration: none;
}
p{
font-family: 'Didact Gothic', sans-serif;

}

h1, h2 , h3 , h4 , h5 , h6{
	font-family: 'Fredoka One', cursive;

}


/*_____________________________________________*/

/*HEADER*/


.logoday{
    height: 520px;
  margin-top: 5%;
}


.header-intro{
	background-image: url(../img/fondos/fondo4.png);
	background-repeat: repeat;
	height: 770px;
}

.h1-portafolio{
	font-size: 31px;
    color: #252A34;
    letter-spacing: 5px;
}

/*_________________________________*/

/*mediaquery*/


@media only screen and (max-width: 658px) {

.portafolio img{
margin-top: 20%;
}
}


@media only screen and (max-width: 658px) {

.logoday{
  height: 280px;
}
}



@media only screen and (max-width: 508px) {
  .h1-portafolio {
    margin-top: 150px;
  }
}


@media only screen and (max-width: 608px) {

.h1-portafolio{
	font-size: 25px;
	color: #252A34;
	margin-top: 2%;
}
}

.p-portafolio{
		color: #252A34;
    font-size: 40px;

}


/*intro*/
.intro-titulo{
  margin-top: 10%;
}


@media only screen and (max-width: 608px) {

.header-intro {
    background-image: url(../img/fondos/fondo4.png);
    background-repeat: repeat;
    height: 484px;
}
}
/*INTRO*/

/*ABOUT*/

.cv{
     text-decoration: none;
     color:#252a34;
         background: rgba(247, 182, 23, 0.6);
}

.cv:link{
      margin-left: 0%;
    text-decoration: none;
  background: rgba(247, 182, 23, 0.6);
}


.cv:hover{
      margin-left: 0%;
     text-decoration: none;
     color:#337ab7;
}

@media only screen and (max-width: 608px) {

.about{
	    background-color:#f9fafb;
    height: 521px;
    padding-bottom: 5%;
}

}

.about{
	    background-color: #f9fafb;
    height: 540px;
    padding-bottom: 5%;
}



.foto-perfil{
    background-image: url(../img/perfil.png);
    height: 406px;
    margin: 5% 15%;
    width: 100%;
    background-size: contain;
    background-repeat: no-repeat;
}




@media only screen and (max-width: 608px) {

.foto-perfil{
    background-image: url(../img/perfilresponsive.png);
    height: 406px;
    margin: 7% 0% 29% 0%;
    width: 100%;
    background-size: contain;
    background-repeat: no-repeat;
}

}

.dayana{

font-size: 40px;
   color:#252A34;
    margin: 7% 0% 5% 1%;

}


@media only screen and (max-width: 608px) {

.dayana{
font-size: 30px;

    margin: 8% 0% 5% 1%;

}

}



@media only screen and (max-width: 808px) {
	.perfil-texto{
    margin: 3% 0% 16% 0%;
	}
}

.uno{
	background-color: #f9fafb;
}

.p-perfil {
color: #252a34;
    width: 93%;
    font-size: 16px;

}

@media only screen and (max-width: 808px) {
	.dayana{
    max-width: 222px;
    max-height: 34px;
    margin: -35% 0% 14% 1%;
    background-size: cover;
    background-repeat: no-repeat;
        margin-top: -19%;
	}
}

@media only screen and (max-width: 800px) {
	.respon{
 		margin-top: -27%;
  margin-bottom: 10%;

	}
}




@media only screen and (max-width: 808px) {
	.p-perfil {
    color: #252A34;
    margin: -2% 0% 0% -1%;
    padding: 2%;
    font-size: 12px;
    width: 100%;
}
}




/*SKILLS*/






@media only screen and (max-width: 608px) {
#skills {
display: none;
}

}

/*botones carrusel*/
.owl-carousel .owl-nav .owl-next {
    position: absolute;
    left: 0;
    top: 21%;

    font-size: 35px;
}
.owl-carousel .owl-nav .owl-prev {
    position: absolute;
    right: 0;
    top: 21%;
    font-size: 35px;
}



.owl-carousel .owl-nav .owl-next:hover {
    position: absolute;
    left: 0;
    top: 21%;

    font-size: 35px;
}
.owl-carousel .owl-nav .owl-prev;hover {
    position: absolute;
    right: 0;
    top: 21%;
    font-size: 35px;
}


.carousel-item .text-center {
    padding: -10px 50px;
    height: 280px;

}

.owl-theme .owl-nav [class*=owl-]:hover {
    text-decoration: none;
    padding-right: 3px;
    border-radius: 5px;
}


/* fin botones carrusel*/





.skills {
	    margin-top: -2%;
    text-align: center;
    padding:55px 0px;
 background-image: url(../img/fondos/fondo4.png);
}


.p-skills{
	color: #252A34;
	margin-bottom: 4%;
	font-size: 30px;
font-family: 'Didact Gothic', sans-serif;
font-weight: 900;
}

.p-bajo-img{
	margin-top: 8%;
font-size: 14px;
}

.img-skill{
	max-width: 100px;
	height: 100px;
}

.img-skills{
display: inline-flex;
margin: 5% 0% 0% -4%;
}

.textos-skills{
	font-size: 20px;
}

.destacado{

}


@media only screen and (max-width: 408px) {
	.img-skill  {
		max-width: 30px;
		height: 30px;
	}
}


@media only screen and (max-width: 408px) {
	.edu-1 {

  position: relative;
  width: 100px;
  height: 100px;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 10;
  margin: -ski4% 10% 10% 10%;
}

}


@media only screen and (max-width: 408px) {
	.p-bajo-img{
	margin-top: 4%;
font-size: 13px;
}

}


@media only screen and (max-width: 408px) {

.textos-skills{
	font-size: 14px;
}

}




/*contenedor del div completo*/
.edu-1 {
	display: inline-block;
  position: relative;
  width: 130px;
  height: 130px;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 10;
  margin: 0% 10% 10% 10%;
}
/*contenedor del div de imagen y texto*/

.div-img-edu {
  display: block;
  margin-left: auto;
  margin-right: auto;
margin-top: 5%;
}


.img-edu {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
      border-radius: 100%;

  -webkit-transform: 0px 0px 1;
  -moz-transform: 0px 0px 1;
  -ms-transform: 0px 0px 1;
  -o-transform: 0px 0px 1;
  transform: 0px 0px 1;
  transform: translate(0px, 0px) scale(1);
  -webkit-transform: translate(0px, 0px) scale(1);
  -moz-transform: translate(0px, 0px) scale(1);
  -o-transform: translate(0px, 0px) scale(1);
  -ms-transform: translate(0px, 0px) scale(1);
  -webkit-transition: all 0s ease 0s;
  -moz-transition: all 0s ease 0s;
  -o-transition: all 0s ease 0s;
  transition: all 0s ease 0s;
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -ms-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
}

.div-img-edu:hover .img-edu {
  -webkit-transform: 0px -30px 0.5;
  -moz-transform: 0px -30px 0.5;
  -ms-transform: 0px -30px 0.5;
  -o-transform: 0px -30px 0.5;
  transform: 0px -30px 0.5;
  transform: translate(0px, -30px) scale(0.5);
  -webkit-transform: translate(0px, -30px) scale(0.5);
  -moz-transform: translate(0px, -30px) scale(0.5);
  -o-transform: translate(0px, -30px) scale(0.5);
  -ms-transform: translate(0px, -30px) scale(0.5);
  border-radius: 50%;
}
.div-img-edu:hover .text-edu {
  -webkit-transform: 0px 0px 2;
  -moz-transform: 0px 0px 2;
  -ms-transform: 0px 0px 2;
  -o-transform: 0px 0px 2;
  transform: 0px 0px 2;
  transform: translate(0px, 0px) scale(2);
  -webkit-transform: translate(0px, 0px) scale(2);
  -moz-transform: translate(0px, 0px) scale(2);
  -o-transform: translate(0px, 0px) scale(2);
  -ms-transform: translate(0px, 0px) scale(2);
}



/*DESARROLLO*/











/*DISEÑO DESPLEGABLE */

 .diseño



#diseño{
      margin-top: -1%;
    background-image: url(../img/fondos/fondo4.png);
  background-repeat: repeat;
   width: 100%;
}

.p-diseño{
      margin-top:2%;
    margin-bottom:2%;
}

.p-diseño span{
     color: #286090;
}

  

.titulo-diseño{
  margin-top: 5%;
  font-family: 'Didact Gothic', sans-serif;

}
 


.img-diseño{
     height: 250px;
    width: 285px;
    position: relative;
    border: 1px solid white;
    border-radius: 28px;
        border: 1px solid rgba(37, 42, 52, 0.07);
    padding: 3px;
}


 .mascara-diseño {
 position: absolute;
top: 0%;
    height: 100%;
    width:285px;
    border:150px solid rgba(249, 250, 251, 0.8);
    opacity: 1;
    visibility: visible;
    transition: all 0.4s ease-in-out;
    border-radius: 28px;
  
}

.div-diseño:hover .mascara-diseño {
   opacity: 0;
   border:1px solid rgba(0,0,0,0.7);
   visibility:hidden;

}


    
@media only screen and (max-width: 608px){

.mascara-diseño {
   opacity: 0;
   border:1px solid rgba(0,0,0,0.7);
   visibility:hidden;
    margin-left: 2%;
}
}


.btn {
  color: #252a34;
  cursor: pointer;
  display: block;
  font-size: 18px;
  font-weight: 400;
  line-height: 45px;
  margin: 0 auto 2em;
  max-width: 160px;
  position: relative;
  text-decoration: none;
  vertical-align: middle;
  width: 100%;
      font-family: 'Didact Gothic', sans-serif;
}
@media (min-width: 400px) {
  .btn {
    display: inline-block;
    margin-right: 2.5em;
  }
  .btn:nth-of-type(even) {
    margin-right: 0;
  }
}
@media (min-width: 600px) {
  .btn:nth-of-type(even) {
    margin-right: 2.5em;
  }
  .btn:nth-of-type(5) {
    margin-right: 0;
  }
}
.btn:hover {
  text-decoration: none;
}


.btn-2 {
  letter-spacing: 0;
}

.btn-2:hover,
.btn-2:active {
  letter-spacing: 5px;
}

.btn-2:after,
.btn-2:before {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  border: 1px solid white;
  bottom: 0px;
  content: " ";
  display: block;
  margin: 0 auto;
  position: relative;
  -webkit-transition: all 280ms ease-in-out;
  transition: all 280ms ease-in-out;
  width: 0;
}

.btn-2:hover:after,
.btn-2:hover:before {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  border-color: #08d9d6;
  -webkit-transition: width 350ms ease-in-out;
  transition: width 350ms ease-in-out;
  width: 70%;
}

.btn-2:hover:before {
  bottom: auto;
  top: 0;
  width: 70%;
}








/* MEDIA QUERY */



@media only screen and (max-width: 700px) {

  .div-diseño{
      text-align: center;
     
  }

   .mascara-diseño {
 position: absolute;
top: 0%;
    left: 8%;
    height: 100%;
    width:285px;
    border:150px solid rgba(249, 250, 251, 0.8);
    opacity: 1;
    visibility: visible;
    transition: all 0.4s ease-in-out;
    border-radius: 28px;
    
  
}

}






/*---------------------------------------*/

/*CONTACTO*/

/*MEDIAQUERY*/

@media only screen and (max-width: 408px) {

.iconos-social{
    max-width: 30px;
    max-height: 30px;
 margin-bottom: 4%;
}

}

@media only screen and (max-width: 508px) {
 #contact{
  background-color: #FF2E63;
padding: 0% 0% 3%% 0%;

}

}

/*NORMAL*/

 #contact{
  background-color:#f9fafb;
padding: 0% 0% 0% 0%;
margin-top: 0%;

}

.contacto-iconos{
    display: inline-block;
    margin: 4% 1%;
}

.iconos-social{
 width: 45px;
 height: 45px;
 margin-bottom: 2%;
}


.telefono{
width: 50%;
}



.email .fa-mobile{
  display: inline-block;
   font-size: 30px;
}

.email .fa-envelope{
   font-size: 20px;
}


.email i:hover{
    transform: scale(2);
  color: rgba(37, 42, 52, 0.52);
  transition: all 300ms;
}



/*formulario*/ /*---------------------------------------*/



#hire {
  font-family: 'Didact Gothic', sans-serif;

  margin: 0px auto;
  text-align: center;
  padding: 90px 0 110px;
  width: 80%;

  font-size: 62.5%;
  font-weight: 300;
}
.contacto {
  margin-bottom: 40px;
  font-size: 4em;
  color: #313a3d;

}

form {
  width: 58.33333%;
  margin: 0 auto;
}
form .field {
  width: 100%;
  position: relative;
  margin-bottom: 15px;

}
form .field label {

  position: absolute;
  top: 0;
  left: 0;
  background: #313A3D;
  color: #f9fafb;
  width: 100%;
  padding: 18px 0;
  font-size: 1.45em;
  letter-spacing: 0.075em;
  -webkit-transition: all 333ms ease-in-out;
  -moz-transition: all 333ms ease-in-out;
  -o-transition: all 333ms ease-in-out;
  -ms-transition: all 333ms ease-in-out;
  transition: all 333ms ease-in-out;
}
form .field label + span {
  opacity: 0;
  color:#08D9D6;
  display: block;
  position: absolute;
  top: 12px;
  font-size: 2.5em;
  text-shadow: 1px 2px 0 #08D9D6;
  -webkit-transition: all 333ms ease-in-out;
  -moz-transition: all 333ms ease-in-out;
  -o-transition: all 333ms ease-in-out;
  -ms-transition: all 333ms ease-in-out;
  transition: all 333ms ease-in-out;
}
form .field input[type="text"], form .field textarea {
    border: none;
    background: #E8E9EA;
    width: 99.5%;
    margin: 0;
    padding: 18px 0;
    padding-left: 38%;
    color: ;
    font-size: 1.4em;
    letter-spacing: 0.05em;
}


form .field input[type="text"]#msg,
form .field textarea#msg {
  height: 53px;
  resize: none;
  -webkit-transition: all 333ms ease-in-out;
  -moz-transition: all 333ms ease-in-out;
  -o-transition: all 333ms ease-in-out;
  -ms-transition: all 333ms ease-in-out;
  transition: all 333ms ease-in-out;
}
form .field input[type="text"]:focus, form .field input[type="text"].focused,
form .field textarea:focus,
form .field textarea.focused {
  outline: none;
}
form .field input[type="text"]:focus#msg, form .field input[type="text"].focused#msg,
form .field textarea:focus#msg,
form .field textarea.focused#msg {
  padding-bottom: 150px;
}
form .field input[type="text"]:focus + label, form .field input[type="text"].focused + label,
form .field textarea:focus + label,
form .field textarea.focused + label {
  width: 30%;
  background: #08D9D6;
  color: #313A3D;
}
form .field input[type="text"].focused + label,
form .field textarea.focused + label {
  color: #FD9638;
}


form .field:hover label {
    width: 30%;
    background: #313A3D;
    color: #08d9d6;

}


form input[type="submit"] {
  background: #08D9D6;
  color: #252A34;
  -webkit-appearance: none;
  border: none;

  position: relative;
  padding: 13px 50px;
  font-size: 1.4em;
  letter-spacing: 0.1em;
  font-weight: 300;
  -webkit-transition: all 333ms ease-in-out;
  -moz-transition: all 333ms ease-in-out;
  -o-transition: all 333ms ease-in-out;
  -ms-transition: all 333ms ease-in-out;
  transition: all 333ms ease-in-out;
      font-weight: 700;

}



form input[type="submit"]:hover {
  background: #78f3f1;
  color: #252a34;
  font-weight: 700;

}
form input[type="submit"]:focus {
  outline: none;
  background: #78f3f1;
  color: #252a34;
    font-weight: 700;

}


/*MEDIA QUERY*/


@media only screen and (max-width: 608px) {

form .field {
    width: 155%;
    position: relative;
    margin-bottom: 15px;
}

}

@media only screen and (max-width: 608px) {

form {
    width: 60.33333%;
    margin: 10px 0px 0px 16px;
}
}


@media only screen and (max-width: 608px) {

form input[type="submit"]{
    margin: 10px 4px;
}

}

@media only screen and (max-width: 608px){
form input[type="submit"] {
    margin: 11px -3px;
    margin-left: 36%;
}
}

/*---------------------------------------*/

/*FOOTER*/

/*MEDIAQUERY*/

@media only screen and (max-width: 768px) {
    .footer-bottom {
      padding-left: 27px;
  }
}

/*NORMAL*/

.footer{

  padding: 2% 2% 1% 2%;
  font-size: 10px;
  	background-color: #252A34; /*azul*/

}
.p-footer{
  font-size: 13px;
  color: #EAEAEA;
}

.laboratoria{
  text-decoration: none;
  color: #08D9D6; /*celeste*/
}


.laboratoria:hover{
  color: #FF2E63;/*rosa*/
}




.linkss {
  display: inline-block;
      margin-left: 50%;
  -ms-transform:translate(-50%,-50%);
  -webkit-transform:translate(-50%,-50%);
  transform:translate(-50%,-50%);
}



.a-links {
  color:#fff;
  border-radius:4px;
  text-align:center;
  text-decoration:none;
  font-family:fontawesome;
  position: relative;
  display: inline-block;
  width:40px;
  height:28px;
  padding-top:12px;
  margin:0 2px;
  -o-transition:all .5s;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  transition: all .5s;
   -webkit-font-smoothing: antialiased;
}


.iconos-redes{
  font-size: 30px;
}

.a-links:hover {
 color: #08d9d6;
}

/* pop-up text */

.a-links span {
  color:#f9fafb;
  position:absolute;
  font-family:sans-serif;
  bottom:0;
  left:-25px;
  right:-25px;
  padding:5px 7px;
  z-index:-1;
  font-size:14px;
  border-radius:2px;
  background:#252a34;
  visibility:hidden;
  opacity:0;
  -o-transition:all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -webkit-transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -moz-transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* pop-up text arrow */

.a-links span:before {
  content:'';
  width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #fff;
  position:absolute;
  bottom:-5px;
  left:40px;
}

/* text pops up when icon is in hover state */

.a-links:hover span {
  bottom:50px;
  visibility:visible;
  opacity:1;
}


.icons-media{
  width: 10%;
}

@media only screen and (max-width: 768px) {
   .linkss{
      display: inline-flex;
    margin-top: 4%;
   }
}