/* CSS Document */

body {font-family: 'Roboto', sans-serif; }
.pink-wrapper { background: #faf0f1}
.green-wrapper { background: #f1faec}
.white-wrapper { background: #ffffff; width: 100% !important}

#frase-home { margin-top: 80px}
#frase-home h1 {font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 200px; color: #f4b5d2;}
#frase-home h2 {font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 65px; line-height: 55px; z-index: 1000; margin-top: -80px}
#frase-home p {font-size: 18px; font-weight: 300; margin-top: 2%}

#servicios { padding: 60px 0}
#servicios h3 { font-size: 24px; font-weight: 600; line-height: 30px}
#servicios p { font-size: 18px; line-height: 50px}
#servicios ul { list-style: none; padding-left: 0 !important}
#servicios li { padding-left: 0}
.icon-size { width: 113px; padding-bottom: 20px}

#quienes-somos { padding: 60px 0} 
#quienes-somos p { font-size: 25px; line-height: 30px; font-weight: 300; width: 65%} 

#portfolio { padding: 60px 0}
#portfolio h1 { font-size: 60px; font-weight: 900; font-family: 'Montserrat', sans-serif; padding-bottom: 30px}

footer { font-size: 16px; padding: 30px 0; margin-bottom: 20px; background: #f2f2f2}
.black-txt { color: #000000}
.black-txt a { text-decoration: none; color: #000000}
.black-txt a:hover { text-decoration: none; color: #7F7F7F}
.gris-txt { color: #7F7F7F}

.bg-white {background-color: #ffffff!important;}
.m-portfolio { margin-bottom: 20px;}
.m-portfolio a { font-size: 14px; text-decoration: none; color: #7F7F7F;}

/* make keyframes that tell the start state and the end state of our object */
 
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
 
.fade-in {
 opacity:0;  /* make things invisible upon start */
 -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
 -moz-animation:fadeIn ease-in 1;
 animation:fadeIn ease-in 1;
 
 -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
 -moz-animation-fill-mode:forwards;
 animation-fill-mode:forwards;
 
 -webkit-animation-duration:1s;
 -moz-animation-duration:1s;
 animation-duration:1s;
}
 
.fade-in.one {
-webkit-animation-delay: 0.7s;
-moz-animation-delay: 0.7s;
animation-delay: 0.7s;
}
 
.fade-in.two {
-webkit-animation-delay: 1.2s;
-moz-animation-delay:1.2s;
animation-delay: 1.2s;
}
 
.fade-in.three {
-webkit-animation-delay: 1.6s;
-moz-animation-delay: 1.6s;
animation-delay: 1.6s;
}

.fade-in.four {
-webkit-animation-delay: 2.0s;
-moz-animation-delay: 2.0s;
animation-delay: 2.0s;
}
 
.fade-in.five {
-webkit-animation-delay: 2.4s;
-moz-animation-delay:2.4s;
animation-delay: 2.4s;
}
 
.fade-in.six {
-webkit-animation-delay: 3.0s;
-moz-animation-delay: 3.0s;
animation-delay: 3.0s;
}

@media (max-width: 575.98px) { 
#frase-home h1 {font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 100px; color: #f4b5d2;}
#frase-home h2 {font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 35px; line-height: 30px; z-index: 1000; margin-top: -50px}
#quienes-somos p { font-size: 22px; line-height: 28px; font-weight: 300;}
.marg-sm { margin-top: 20px}	
}

@media (max-width: 767.98px) {
#frase-home h1 {font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 100px; color: #f4b5d2;}	
#frase-home h2 {font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 35px; line-height: 30px; z-index: 1000; margin-top: -50px}
#quienes-somos p { font-size: 22px; line-height: 28px; font-weight: 300;}	
.marg-sm { margin-top: 20px}
}