* {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
}

.topbar1 {
   
   position:relative;
    width: 100%;
   height: 50px;
   
    border-bottom: 1px solid #DDDDDD;
    background: #EEEEEE;
    border-color: #D4D4D4;
}

.topbar2 {
    position: relative;
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #DDDDDD;
    background: #EEEEEE;
    border-color: #D4D4D4;
    display: none;
}

.topbar1div1 {
    position: absolute;
    width: 100%;
    padding: 5px;
    top: 5px;
    text-align: right;
    right: 10%;
    font-size: 15px;
    color: rgba(4,9,30,0.7);
    
}

.logsection {
    /* width: 100%;
    height: 100px;
    position: relative;*/
    /*display: flex;
    align-items: center;
    padding: 20px 20px;*/

    display: flex;
    flex-flow: row nowrap; /* Align on the same line */
    justify-content: space-between; /* Equal margin between the child elements */
    padding: 10px;
    padding-bottom: 0px;
}

.divcolombaleft{

    padding-left:15%;  
    padding-top: 25px;
    
}
.divcolombaright {
    padding-right: 15%;
    padding-top: 25px;
}
.divcolombacenter {
    padding-right: 0%;
    padding-top: 15px;
}

.logo-web {
   /* background-color: #FF9999;*/
    width: 100%;
    text-align: center;
    /*display: none;*/
}
.logo-web-child1 {
    width: 70%;
   /* background-color: #FF99CC;*/
    display: inline-block;
    text-align: center;
}

    .mainlogo {
        padding-top: 0px;
    }
.mainlogo img{

    height:104px;
    width: 390px;
}

.logidiv {
    /* position: absolute;
    width: 100%;
    left: 50%;
    padding: 5px;
    top: 5px;
    text-align: right;
    
    background-color:antiquewhite;*/
}

.logolink {
    position: absolute;
    top: 15px;
    left: 40%;
}

.menusection {
    width: 100%;
   height: 65px;
    position: relative;
   
}


nav {
    display: flex;
    padding: 1% 0%;
    justify-content: space-between;
    align-items: center;
    height: 50px;
   /* background-color: darkblue;*/
   
}
nav ima{

    width: 150px;

}
.nav-links {
    flex: 1;
    text-align: center;
    width: 100%;
    background-color: darkblue;
    padding: 10px;
    /*padding-left: 29%;*/
    /*box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;*/
    box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
}
.nav-links ul li {
    list-style: none;
    display: inline-block;
    padding: 6px 20px;
    position: relative;
}

.nav-links ul li a{
        color: #fff;
        text-decoration: none;
        font-size: 17px;
}
    .nav-links ul li a:hover {
        color: #ffd800;
        text-decoration: none;
        font-size: 17px;
    }
 
   

   


.header {
    
    min-height: 50vh;
    width: 100%;
    background-image: linear-gradient(rgba(4,9,30,0.2),rgba(4,9,30,0.2)),url(imagesfmx/Main.png);
    background-position: center;
    background-size: cover;
   position: relative;
   top: 18px;
}

.text-box{

    width: 90%;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;

}

.text-box h1 {
    font-size: 62px;

}

.text-box p{

    margin: 10px 0 40px;
    font-size: 22px;
    color: #fff;
}

.hero-btn{

    display: inline-block;
    text-decoration: none;
    color: #fff;
    border: 1px solid #fff;
    padding: 12px 34px;
    font-size: 16px;
    background: transparent;
    position: relative;
    cursor: pointer;
}

    .hero-btn:hover {
        border: 1px solid yellow;
        background: darkblue;
        transition: 0.5s;
    }

    nav .fa{

        display: none;
    }


.productsectionmedia {
    display: none;
}
.brandsectionMedia {
    display: none;
}


.productdetaildiv-media {
    display: none;
}

.logo-media1{
    display: none;
}

.logo-media1-699-1000 {
    display: none;
}

@media(max-width: 700px) {
    .logo-media1 {
        display: block;
    }
    .logo-web{
        display: none;
    }
    .productdetaildiv-web {
        display: none;
    }
    .productdetaildiv-media {
        display: block;
    }

    .logo-media1-699-1000 {
        display: none;
    }
    .header {
        min-height: 50vh;
        width: 100%;
        background-image: linear-gradient(rgba(4,9,30,0.2),rgba(4,9,30,0.2)),url(imagesfmx/Main.png);
        background-position: center;
        background-size: cover;
        position: relative;
        top: 18px;
    }

        .text-box h1 {
            font-size: 28px;
        }

        .text-box p {
            margin: 10px 0 40px;
            font-size: 20px;
            color: #fff;
        }

    .mainpictext{
        display: none;
    }

    /* .nav-links ul li{

            display: block;
        }
        .nav-links{
            position: absolute;
            background: #f44336;
            height: 100vh;
            width: 200px;
            top: 0;
            right: 0px;
            text-align: left;
            z-index: 2;
           
            transition: 1s;
        }

        nav .fa{

            display: block;
            color: #fff;
            margin: 10px;
            font-size: 22px;
            cursor: pointer;
        }

        .nav-links ul{

            padding: 20px;
        }*/
    /**Top Bar**/
    .topbar1 {
        display: none;
    }
    .topbar2 {
        display: none;
    }

    /**Logos*/
    .divcolombaleft {
        display: none;
    }

        .divcolombaright {
            display: none;
        }
        .mainlogo img {
            padding-left: 45%;
            height: 55px;
            width: 225px;
        }

        /**Dark Blue Logo**/

        .menusection {
            width: 100%;
            height: 50px;
            position: relative;
        }

        .nav-links {
            flex: 1;
            text-align: center;
            width: 100%;
            background-color: darkblue;
            padding: 10px;            
            /*padding-left: 29%;*/
            /*box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;*/
            box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
        }

            .nav-links ul li {
                list-style: none;
                display: inline-block;
                padding: 6px 5px;
                position: relative;
            }

                .nav-links ul li a {
                    color: #fff;
                    text-decoration: none;
                    font-size: 13px;
                }

                    .nav-links ul li a:hover {
                        color: #ffd800;
                        text-decoration: none;
                        font-size: 13px;
                    }

                    /***Origans*/

        .origins-col {
            flex-basis: 23%;
            background: #fff8cf;
            border-radius: 10px;
            margin-bottom: 5%;
            margin-right: 5px;
            padding: 10px 5px;
            box-sizing: border-box;
            font-size: 11pt;
        }

        /*Brand*/
    .brandsection {
        display: none;
    }

    .brandsectionMedia {
        display: block;
        width: 95%;
        margin: auto;
        text-align: center;
        padding-top: 5px;
    }
    /*products*/
    .productsection {
        display: none;
    }

    .originssectionForMedia {
        display: block;
    }

    .productsectionmedia {
        display: block;
        width: 98%;
        /*margin: auto;
            text-align: center;*/
        padding: 5px;
        /*background-color: aquamarine;*/
        text-align: center;
    }

        .productsrow {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .products-col {
            /*flex-basis: 23%;*/
            border-radius: 10px;
            margin-bottom: 30px;
            width: auto;
            height: auto;
            overflow: hidden;
        }
    }

@media only screen and (min-width: 699px) and (max-width: 1000px) {

    .topbar1 {
        display: none;
    }

    .topbar2 {
        display: block;
    }

    .logo-web {
        display: none;
    }

    .logo-media1-699-1000 {
        display: block;
    }
    .text-box h1 {
        font-size: 50px;
    }

    .text-box p {
        margin: 10px 0 40px;
        font-size: 18px;
        color: #fff;
    }

    .topbar1 {
        display: none;
    }

    .topbar2 {
        display: none;
    }

    .text-box h1 {
        font-size: 25px;
    }

    .text-box p {
        margin: 10px 0 40px;
        font-size: 18px;
        color: #fff;
    }
}


.originssection {
    width: 100%;
    margin: auto;
    text-align: center;
    padding-top: 40px;
}
h1 {
    font-size: 30px;
    font-weight: 600;
   
}
    p{
        color: #777;
        font-weight: 300;
        line-height: 22px;
        padding:5px;

    }

    .row{

        margin-top: 2%;
        display: flex;
        justify-content: space-between;   
    }
.productsrow {
    margin-top: 2%;
    display: flex;
    justify-content: space-between;
}
.origins-col {
    flex-basis: 23%;
    background: #fff8cf;
    border-radius: 10px;
    margin-bottom: 2%;
    margin:5px;
    
    padding: 20px 12px;
    box-sizing: border-box;
    
    
}

h3{

    text-align: center;
    font-weight: 600;
    margin: 10px 0;

}

.origins-col:hover {
    box-shadow: 0 0 20px 0px rgba(0,0,0,0.2);
    transition: 0.5s;
}

.brandsection {
    width: 80%;
    margin: auto;
    text-align: center;
    padding-top: 5px;
}

.productsection{

    width: 80%;
    margin: auto;
    text-align: center;
    padding-top: 5px;
}

.products-col {

    flex-basis: 23%;
    border-radius: 10px;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
}

.products-col img{
    width: 100%;
    display: block;
}

.layer{

    background: transparent;
    height: 100%;
    width: 100%;
    position: absolute;
    top:0;
    left: 0px;
    transition: 0.5s;

}

    .layer:hover {
        /*background: rgba(226,0,0,0.7);*/
        background: rgba(0,0,111,0.7);
    }

.layer h3{

    width: 100%;
    font-weight: 500;
    color: #fff;
    font-size: 26px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    opacity: 0;
    transition: 0.5s;

}
    .layer:hover h3{
        bottom:49%;
        opacity: 1;


    }