@import url(/data/global/fuentes/HelveticaNeue.css);
@import url('https://fonts.cdnfonts.com/css/montserrat');

* {
    margin: 0;
    padding: 0;
}

body, html {
    font-family: 'Montserrat', sans-serif;
    color: #34366e;
}
#general {
    width: 100%;
}
#trigger {
    display: none;
}
.nav-top{
  list-style: none;
  display: table;
  padding: 0 10px;
}
.nav-top li {
    float: left;
    margin: 0 5px;
}
.nav-top li img{
    width: 30px;
}
#nav {
    list-style: none;
    display: table;
    
}
    #nav > li:first-child {
        border-left: none;
        padding-left: 0;
    }

    #nav > li {
        float: left;
        padding: 5px 20px;
        text-align: center;
        margin: 10px 0;
    }
        #nav > li a {
            font-size: 18px;
            text-decoration: none;
            color: #34366e;
            text-align: center;
        }

        #nav > li:hover .submenu{
            display: block;
        }
input[name=find] {
    border-radius: 15px;
    border-color: #3d3f74;
    padding: 5px;
}
.col10x, .col-20x, .col-25x, .col-30x, .col-40x, .col-50x, .col-60x, .col-70x, .col-80x, .col-90x, .col-100x {
    display: table;
}
.col-10x {
    width: 10%;
}
.col-20x {
    width: 20%;
}
.col-25x {
    width: 25%;
}
.col-30x {
    width: 30%;
}
.col-40x {
    width: 40%;
}
.col-50x {
    width: 50%;
}
.col-60x {
    width: 60%;
}
.col-70x {
    width: 70%;
}
.col-80x {
    width: 80%;
}
.col-90x {
    width: 90%;
}
.col-100x {
    width: 100%;
}
.middle{
    display: table;
    margin: 0 auto;
}
.padding-top-bottom-10x{
    padding: 10px 0;
}
.right{
    float: right;
}
.left{
    float: left;
}
.slogan {
    background: #db4949;
    color: white;
    text-align: center;
    padding: 20px;
    font-size: 2em;
}
.center-container{
    width: 1200px;
    margin: 0 auto;
}
.mainContainer {
    display: table;
    margin: 0 auto;
}
.description-box {
    background: #f0f3ff;
    color: #34366e;
}

    .description-box h2 {
        font-size: 3em;
        text-transform: uppercase;
    }
    .description-box p{
        margin: 10px 0;
        color: #34366e;
    }
    .description-box .middle {
        padding-top: 10%;
    }
.products-description-box .middle{
    padding: 10% 0;
}
.products-description-box h2 {
    font-size: 1.5em;
    text-transform: uppercase;
    color: #b43245;
    padding-bottom: 10px
}
.button {
    display: table;
    padding: 10px 20px;
    color: white;
    text-decoration: none;
    border-radius: 10px;
}
.bg-red {
    background: #b43245
}
fieldset {
    border: none;    
}
a {
    color: #34366e;
}
.feed-4-pos .col-25x a, .blog-feed .col a {
    padding: 0 10px;
    display: block;
    color: #34366e;
    text-align: center;
    text-decoration: none;
}

.footer {
    background: #34366e;
    padding: 40px 20px;
    color: white;
    text-align: center;
    margin: 30px 0 0;
}
.nav-bottom {
    list-style: none;
    display: table;
    padding: 0 10px;
    margin: 10px auto;
}

    .nav-bottom li {
        float: left;
        margin: 0 5px;
    }
    .nav-bottom li a{
        color:inherit;
        text-decoration: none;
            
    }

.greed-with-three-cols {
    display: grid;
    grid-template-columns: .33fr .33fr .33fr;
}
    .greed-with-three-cols div {
        padding: 0 5%;
    }

.greed-with-four-cols {
    display: grid;
    grid-template-columns: .25fr .25fr .25fr .25fr;
}

    .greed-with-four-cols div {
        padding: 0 15%;
    }
.feed-productos{
    margin-bottom: 30px;
}
.feed-productos div p {
    padding: 0 15%;
    text-align: center;
}

        .feed-productos div span {
            margin-top: 20%;
        }
.video-banner-container {
    position: relative;
}
.video-banner {
    position: absolute;
    top: 25%;
    padding: 0 40px;
}
    .video-banner .col-50x:first-child {
        padding-right: 10px;
    }
.lista-productos {
    display: flex;
    gap: 0.5px;
    align-items: stretch;
}
    .lista-productos div {
        background-color: #4a92d3;
        padding: 25px;
        text-align: center;
        min-width: 410px;
    }
    .lista-productos div.active {
        background-color: #34366e;
    }
.lista-productos div a{
    color: white;
    text-decoration: none;
}
.submenu {
    list-style: none;
    position: absolute;
    background: white;
    display: none;
    border-radius: 15px;
    margin-left:-30px;
}
    .submenu li {
        padding: 15px 20px;
    }
        .submenu li:hover {
            background: lightgray;
            border-radius: 15px;
        }

    .submenu li a{
        text-align: left !important; 
    }
.carrusel {
    width: calc(100vw - 80px);
    max-width: calc(1350px - 40px - 40px);
    overflow-x: auto;
}
.product-dynamic-container img, .product-dynamic-container iframe {
    width: 100%;
}
@media screen and (max-width: 780px) {
    iframe{
		width: 100%;
	}
    #mp-menu a {
        font-size: 1.4em;
    }

    .mainContainer {
        width:100%;
		padding-top: 0;
    }

        .mainContainer img {
            max-width: 100%;
            height: auto;
        }    

    #trigger {
        display: block;
        padding-top: 5px;
        padding-bottom: 10px;
        margin-left: 3px;
    }

        #trigger img {
            display: table;
            margin: 0 auto;
            width: 30%;
        }

    #mp-pusher {
        z-index: 40000;
        display: block;
    }

    /* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
    .clearfix:before,
    .clearfix:after {
        display: table;
        content: " ";
    }

    .clearfix:after {
        clear: both;
    }

    .codrops-header,
    .codrops-top {
    }

    .codrops-header {
        margin: 0 auto;
        padding: 2em;
        background: rgba(0,0,0,0.01);
        text-align: center;
    }

        .codrops-header h1 {
            margin: 0;
            font-weight: 300;
            font-size: 2.625em;
            line-height: 1.3;
        }

        .codrops-header span {
            display: block;
            padding: 0 0 0.6em 0.1em;
            font-size: 60%;
            opacity: 0.7;
        }

    /* To Navigation Style */
    .codrops-top {
        width: 100%;
        background: #91cfa1;
        background: rgba(255, 255, 255, 0.1);
        text-transform: uppercase;
        font-size: 0.69em;
        line-height: 2.2;
    }

        .codrops-top a {
            display: inline-block;
            padding: 0 1em;
            color: #fff;
            text-decoration: none;
            letter-spacing: 0.1em;
        }

            .codrops-top a:hover {
                background: rgba(255,255,255,0.95);
                color: #333;
            }

        .codrops-top span.right {
            float: right;
        }

            .codrops-top span.right a {
                display: block;
                float: left;
            }

    .codrops-icon:before {
        margin: 0 4px;
        text-transform: none;
        font-weight: normal;
        font-style: normal;
        font-variant: normal;
        line-height: 1;
        speak: none;
        -webkit-font-smoothing: antialiased;
    }

    .codrops-icon-drop:before {
        content: "\e001";
    }

    .codrops-icon-prev:before {
        content: "\e004";
    }

    /* Demo Buttons Style */
    .codrops-demos {
        padding-top: 1em;
        font-size: 1.1em;
    }

        .codrops-demos a {
            display: block;
            float: left;
            clear: both;
            margin: 0.5em 0.5em 0.5em 1.9em;
            padding: 1em 1.1em;
            width: 280px;
            outline: none;
            color: #fff;
            background: #336ca6;
            text-align: center;
            text-decoration: none;
            font-weight: 700;
        }

            .codrops-demos a:hover,
            .codrops-demos a.current-demo,
            .codrops-demos a.current-demo:hover {
                opacity: 0.6;
            }

    #mainLeft {
        width: 100%;
    }

    #mainRight {
        display:none;
    }

    .center-container{
        width: 100%;
    }
}

@media screen and (max-width: 470px) {
    #mainLeft{padding: 10px;}

}