/* =============================
    General Style
        Created by @Rubycom 2018
    
    1.  General Styles
    2.  Header
    3.  Sections
    4.  Servivans Section
    5.  Footer
    6.  Nosotros
    7.  Servicios
 =============================*/
/*@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,900');*/

html {
    overflow-x: hidden;
}

* {
    font-family: 'arial' !important;
}

li {
    list-style-type: none;
}

.uk-text-italic,
.uk-text-italic>*,
.uk-text-italic>*>* {
    font-style: italic !important;
}

.text-color,
.text-color>*,
.text-color>*>* {
    color: #788693 !important;
}

.uk-button-primary {
    background-color: #ee3342;
}

.uk-button-primary:hover {
    background-color: #de303e;
}

header [uk-icon="icon:instagram"] {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    background-color: #d6249f;
}

header [uk-icon="icon:facebook"] {
    background: #3B5998;
}

/* =============================
    1.  Header - Nav
 =============================*/

header.uk-sticky.uk-navbar-sticky {
    background-color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
    transition: all ease-in-out .3s;
}

ul.uk-navbar-nav>li:not(:first-child) {
    margin-left: 20px;
}

ul.uk-navbar-nav>li:last-child {
    margin-right: 15px;
}

ul.uk-navbar-nav>li a {
    position: relative;
    overflow: hidden;
    transition: all ease-in-out .3s;
}

ul.uk-navbar-nav>li:uk-active a,
ul.uk-navbar-nav>li:hover a {
    color: #09426a !important;
    transition: all ease-in-out .3s;
}

ul.uk-navbar-nav>li a::after {
    content: '';
    position: absolute;
    bottom: 20px;
    left: -100%;
    width: 100%;
    height: 2px;
    background-color: #09426a;
    transition: all ease-in-out .3s;
}

ul.uk-navbar-nav>li.uk-active a::after,
ul.uk-navbar-nav>li:hover a::after {
    left: 0 !important;
    transition: all ease-in-out .3s;
}

ul.social>li:not(:first-child) {
    margin-left: 10px;
}

ul.social>li a {
    border-radius: 5px;
    color: #ffffff;
    padding: 10px;
    transition: all ease-in-out .3s;
}

ul.social>li a:hover {
    transform: scale(1.1);
    transition: all ease-in-out .3s;
}

header {border-bottom: 1px solid #f4f4f4;}
/* =============================
   2.   Hero Banner
 =============================*/

section#hero {
    /* background-image: url('../img/home_img.jpg'); */
}

/* =============================
    3.  Sections
 =============================*/

section#sections .uk-card-default {
    box-shadow: none;
    transition: all ease-in-out .3s;
}

section#sections h3.uk-card-title {
    color: #ffffff;
    font-size: 1.3rem !important;
}

section#sections div[uk-grid]>div>a {
    text-decoration: none !important;
}

/* =============================
   4.   Servivans Section
 =============================*/

section#servivans-section {
    background-image: url('../img/servivans_more_img.jpg');
}

.servivans-section-content *:not(.uk-button) {
    color: #000000;
}

/* =============================
   5.   Footer
 =============================*/

@media screen and (max-width:640px) {
    .footer-nav {
        flex-direction: column;
    }
    .footer-nav>li:not(:last-child) {
        margin-bottom: 15px;
    }
    .copyrights {
        flex-direction: column-reverse;
    }
    .copyrights * {
        text-align: center;
    }
}

.footer-nav>li.uk-active a {
    text-decoration: underline;
}

/* =============================
   6.   Nosotros
 =============================*/

.bg-title-pages h2 {
    color: #ffffff;
}

.contact-header-bg {
    background-image: url('../img/static_map.png');
}

/* =============================
   7.   Servicios
 =============================*/
 
 #sections .uk-text-meta {
    font-size: 16px;
}

#servivans-section p {
    font-size: 18px;
}


/* animacion svg */
.circle {
    fill: none;
    stroke: #ee3342;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-miterlimit: 10;
}

.circle-dash {
    fill: none;
    stroke: #ee3342;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-miterlimit: 10;
}

.check {
    fill: none;
    stroke: #ee3342;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10;
}

.check-dash {
    fill: none;
    stroke: #ee3342;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10;
}

.check {
    stroke-dasharray: 60 100;
    animation: check 1.2s cubic-bezier(0.5, 0, 0.6, 1) forwards 0.15s;
    -webkit-animation: check 1.2s cubic-bezier(0.5, 0, 0.6, 1) forwards 0.15s;
    -moz-animation: check 1.2s cubic-bezier(0.5, 0, 0.6, 1) forwards 0.15s;
    -o-animation: check 1.2s cubic-bezier(0.5, 0, 0.6, 1) forwards 0.15s;
    opacity: 0;
}

@-webkit-keyframes check {
    from {
        stroke-dashoffset: 60;
        opacity: 1;
    }
    to {
        stroke-dashoffset: 00;
        opacity: 1;
    }
}

@-moz-keyframes check {
    from {
        stroke-dashoffset: 60;
        opacity: 1;
    }
    to {
        stroke-dashoffset: 00;
        opacity: 1;
    }
}

@keyframes check {
    from {
        stroke-dashoffset: 60;
        opacity: 1;
    }
    to {
        stroke-dashoffset: 00;
        opacity: 1;
    }
}

.check-dash {
    stroke-dasharray: 10 100;
    animation: check-dash 1.2s cubic-bezier(0.5, 0, 0.6, 1) forwards;
    -webkit-animation: check-dash 1.2s cubic-bezier(0.5, 0, 0.6, 1) forwards;
    -moz-animation: check-dash 1.2s cubic-bezier(0.5, 0, 0.6, 1) forwards;
    -o-animation: check-dash 1.2s cubic-bezier(0.5, 0, 0.6, 1) forwards;
}

@-webkit-keyframes check-dash {
    from {
        stroke-dashoffset: 120;
    }
    to {
        stroke-dashoffset: 45;
    }
}

@-moz-keyframes check-dash {
    from {
        stroke-dashoffset: 120;
    }
    to {
        stroke-dashoffset: 45;
    }
}


@keyframes check-dash {
    from {
        stroke-dashoffset: 120;
    }
    to {
        stroke-dashoffset: 45;
    }
}

.circle {
    stroke-dasharray: 300 300;
    animation: circle 1.5s cubic-bezier(0.5, 0, 0.5, 1) forwards 0.15s;
    -webkit-animation: circle 1.5s cubic-bezier(0.5, 0, 0.5, 1) forwards 0.15s;
    -moz-animation: circle 1.5s cubic-bezier(0.5, 0, 0.5, 1) forwards 0.15s;
    -o-animation: circle 1.5s cubic-bezier(0.5, 0, 0.5, 1) forwards 0.15s;
    opacity: 0;
}


@-webkit-keyframes circle {
    from {
        stroke-dashoffset: 300;
        opacity: 1;
    }
    to {
        stroke-dashoffset: 0;
        opacity: 1;
    }
}

@-moz-keyframes circle {
    from {
        stroke-dashoffset: 300;
        opacity: 1;
    }
    to {
        stroke-dashoffset: 0;
        opacity: 1;
    }
}

@keyframes circle {
    from {
        stroke-dashoffset: 300;
        opacity: 1;
    }
    to {
        stroke-dashoffset: 0;
        opacity: 1;
    }
}

.circle-dash {
    stroke-dasharray: 10 300;
    animation: circledash 1.5s cubic-bezier(0.5, 0, 0.5, 1) forwards 0.05s;
    -webkit-animation: circledash 1.5s cubic-bezier(0.5, 0, 0.5, 1) forwards 0.05s;
    -moz-animation: circledash 1.5s cubic-bezier(0.5, 0, 0.5, 1) forwards 0.05s;
    -o-animation: circledash 1.5s cubic-bezier(0.5, 0, 0.5, 1) forwards 0.05s;
    opacity: 0;
}

@-webkit-keyframes circledash {
    from {
        stroke-dashoffset: 320;
        opacity: 1;
    }
    to {
        stroke-dashoffset: 20;
        opacity: 1;
    }
}

@-moz-keyframes circledash {
    from {
        stroke-dashoffset: 320;
        opacity: 1;
    }
    to {
        stroke-dashoffset: 20;
        opacity: 1;
    }
}

@keyframes circledash {
    from {
        stroke-dashoffset: 320;
        opacity: 1;
    }
    to {
        stroke-dashoffset: 20;
        opacity: 1;
    }
}