*{
    font-family: 'Raleway', sans-serif; 
    
}

.nav-item a{padding: 10px;    cursor: pointer;    font-size: 16px;}
.nav-item a:after {
    content: '';    display: block;    border-bottom: 2px solid #ffff;
    transform: scaleX(0);    transition: .2s ease-in-out;
}
.nav-item a:hover:after {transform: scaleX(1);}
.navbar {position: fixed;    transition: 1s;    z-index: 1000;}

.bg-image{
    background-image: url(images/pictures/home.jpg);    height: 100vh;
    background-position: center;    background-size: cover;    
    background-repeat: no-repeat;    background-attachment: fixed;
}

h1{
    font-size: 65px; font-weight: bold; color: #ffff; margin-top: 0.75em;
    animation-name: fadeIn; animation-duration: 2s;
}
h2{font-size: 50px; padding: 1.5em 0; color: #ffff;}
h3{font-size: 30px;}
h4{font-size: 25px; color: #00C2CB; font-weight: bold;}
p{font-size: 20px; color: #313E47;}
a{text-decoration: none;}
a{color: #313E47; margin: 0 0.5em;}
a:hover{color: #00C2CB;}
small{color: #ffff;}
.enfasis{
    font-size: 40px; margin-top: 4em; color: #ffff;
    animation-name: fadeIn; animation-duration: 2s;
}

.logo{width: 100px;}
.logo2{width: 50px; margin: 1.5em 0;}
.icon{width: 100px; margin: 2em 0;}
hr.hrz {
    border: 2.5px solid #00C2CB;
    border-radius: 2.5px;
    width:100px;
}

#info{margin-top: 2em;}
.bg-gray{background-color: #313E47;  color: #ffff;   margin-top: 2em;}
.bg-gray p{color: #ffff; margin: 0; text-align: center; padding: 0 10px;}
.cont1{margin: 2em 1em; padding: 0;}

#servicios{background-color: #00a4da; margin-top: 2em;}
.card{
    background-color: #ffff;  margin: 1.5em; padding: 0;
    animation-name: slideInDown; animation-duration: 2s;}
.content{padding: 1em; text-align: center;}

#contacto{margin-top: 2em;}
#contacto h2{color: #313E47;}
#contacto h3{color: #00a4da;}
.pad-top{margin-top: 2em;}
.vl {
    border-left: 6px solid #313e47;
    height: 150px;  margin-right: 1.5em;
}
.pad2{margin: 1em 0;}
.map{animation-name: fadeInRight; animation-duration: 1s;}

footer{background-color: #313E47;   margin-top: 2em;}
footer a{color: #ffff;}

body::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);}
body::-webkit-scrollbar {width: 14px;}
body::-webkit-scrollbar-thumb {-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .5);    background: #00a4da;}

@media screen and (min-width: 320px) and (max-width:424px) {
    .bg-image{
        background-image: url(images/pictures/home.jpg);    height: 90vh;
        background-position: center;    background-size: cover;    
        background-repeat: no-repeat;    background-attachment: fixed;
    }
    h1{font-size: 30px; margin-top: 0.6em;}
    h2{font-size: 30px; padding: 1.5em 0; color: #ffff; margin: 0;}
    h3{font-size: 25px;}
    h4{font-size: 28px; color: #00C2CB; font-weight: bold;}
    p{font-size: 18px; color: #313E47; margin: 0;}
    .enfasis{font-size: 15px; margin-top: 8em;}
    hr.hrz{display: none;}
    #info{text-align: center;}
    #info h3{margin-top: 1em;}
    .icon{width: 70px; margin: 1.5em 0;}
    iframe{padding-top: 10px; width: 200px; height: 148px;}
}  

@media screen and (min-width: 425px) and (max-width:767px) {
    .bg-image{
        background-image: url(images/pictures/home.jpg);    height: 80vh;
        background-position: center;    background-size: cover;    
        background-repeat: no-repeat;    background-attachment: fixed;
    }
    h1{font-size: 34px; margin-top: 0.9em;}
    h2{font-size: 34px; padding: 1.5em 0; color: #ffff; margin: 0;}
    h3{font-size: 26px;}
    h4{font-size: 28px; color: #00C2CB; font-weight: bold;}
    p{font-size: 18px; color: #313E47; margin: 0;}
    .enfasis{font-size: 20px; margin-top: 5em;}
    hr.hrz{display: none;}
    #info{text-align: center;}
    #info h3{margin-top: 1em;}
    .icon{width: 80px; margin: 1.2em 0;}
    iframe{width: 250px; height: 198px;}
}  

@media screen and (min-width: 768px) and (max-width:1023px) {
    .bg-image{
        background-image: url(images/pictures/home.jpg);    height: 90vh;
        background-position: center;    background-size: cover;    
        background-repeat: no-repeat;    background-attachment: fixed;
    }
    h1{font-size: 50px; margin-top: 0.75em;}
    h2{font-size: 38px; padding: 1.2em 0; color: #ffff; margin: 0;}
    h3{font-size: 26px;}
    h4{font-size: 22px; color: #00C2CB; font-weight: bold;}
    p{font-size: 18px; color: #313E47; margin: 0;}
    .enfasis{font-size: 30px; margin-top: 4em;}
    .content h3{font-size: 22px;}
    #info{text-align: center;}
    #info h3{margin-top: 1em;}
    .icon{width: 80px; margin: 1.2em 0;}
    iframe{width: 280px; height: 198px;}
}