@charset "utf-8";


/* --------------------- 0px to 849 px horizontal --------start---------------- */
/* retain ALL RULES from the previous condition + these: */
/* IMPORTANT: keep ALL rules & in THAT order for logical + practical reasons */
/*@media only screen and (min-width: 500px) and (max-width: 780px)*/
/*,only screen and (min-device-width: 500px) and (max-device-width: 780px){*/
@media screen and (max-width: 849px){
    html,body{
        font-size: 14px;
    }

    .top-banner .button-orange{
        display: none;
    }
    .float-right{
        float: none;
    }
    .float-left{
        float: none;
    }

    /* ---- top band ---- */
    .container-logo{
        width: 100%;
        text-align: center;
        padding: 30px 0 20px 0;
    }
    .container-motto{
        display: block;
        margin: 0 0 20px 0;
        text-align: center;
        width: 100%;
        max-width: inherit;
        position: relative;
        right: auto;
        top: auto;
    }
    .container-howto{
        display: block;
        margin: 0 0 20px 0;
        text-align: center;
        width: 100%;
        max-width: inherit;
        position: relative;
        right: auto;
        top: auto;
    }
    .container-sec-menu{
        width: 100%;
        text-align: center;
        font-size: 13px;
        margin: 0 0 25px 0;
        position: relative;
        right: auto;
        top: auto;
    }

    /* ---- menu ---- */
    .container-menu:hover .menuitem{
        display: block;/*this is in addition to the javascript that hide/show the mobile menu, for compatibility*/
    }
    .mobile-menu{
        display: block;
    }
    .mobile-menu:hover{}
    .menu-maxwidth{
        /*max-width: 480px;*/
    }
    .mi-hide{/*only show on mobile extra text in menus*/
        display: inline;
    }
    .menuitem{
        display: none;
        width: 100%;
        margin: 0;
        text-align: left;
        font-size: 18px;
    }
    .menuitem a{
        display: block;
        padding: 15px 22px 15px 20px;
        margin: 0;
        width: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;/*this avoid width:100% being larger then screen with padding */
    }
    .menuitem a:hover{
        background-color: inherit;
        color: #f1f1f1;
    }
    .submenu{
        position: static;
        min-width: inherit;
        width: 100%;
        white-space: normal;
        top: 0;
        left: 0;
        visibility: visible;
        padding: 0 0 0 20px;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;/*this avoid width:100% being larger then screen with padding */
        background-color: #1d31ae;
    }
    .submenu a:link{
        color: #fff;
        background-color: inherit;
    }
    .submenu a:visited{
        color: #fff;
        background-color: inherit;
    }
    .submenu a:hover{
        color: #fff;
        background-color: inherit;
    }
    .menu-cta{
        margin-left: 0;
    }
    .menu-cta a:hover{
        color: #fff;
        background-color: #0c1446;
        text-shadow: none;
    }

    /* --- main text zone --- */
    .container-main-txt{}
    .container-main-txt h1{
        font-size: 22px;
        padding: 30px 0;
    }

    .imgshad{
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
        border: none;
        margin: 20px 0;
    }

    /* --- amazon product table ---  */
    .amzn-cell-img{
        max-width: 300px;
        text-align: center;
    }
    .amzn-cell-txt{
        padding: 30px 0 0 0;
        word-wrap: break-word;
    }
    .amzn-cell-txt a{
        font-size: 16px;
    }

    /* --- small text --- */
    .container-small-txt{
        box-sizing: border-box;
    }
    .container-small-txt h1{
        font-size: 22px;
    }
    /* --- cta top --- */
    .box-cta-top{
        padding: 0;
    }
    .bct-button{
        padding: 50px 0 0 0;
    }
    .bct-button .button-orange{
        white-space: normal;
    }
    .bct-arrow img{
        display: none;
    }

    .cq-form-box{
        max-width: 95%;
        padding: 7px;
    }
    .cq-label{
        max-width: 90%;
        display: block;
        text-align: left;
    }
    .cq-form-box textarea{
        max-width: 90%;
    }
    .cq-note{
        display: block;
        padding: 0;
    }

    /* --- box-social --- */
    .box-social{
        max-width: 700px;
        margin: 30px auto;
    }
    .bxs-fb{
        max-width: 500px;
        width: 100%;
        margin: 0 auto;
    }

    /* ---- table ---- */
    .table{
        display: block;
    }
    .table-row{
        display: block;
    }
    .table-cell{
        display: block;
        width: 100%;
    }

    /* --- box-raisosn --- */
    .box-raisons{}
    .br-table{}
    .br-cell{
        width: 100%;
        box-sizing: border-box;
    }

    /* ---- table top banner ----- */
    .top-cta-table{}
    .top-cta-row{}
    .top-cta-cell{}

    /* ---- cta bands ---- */
    .container-cta{
        padding: 20px;
    }
    .cc-soft-cta, .cc-direct-cta{
        width: auto;
        float: none;
        padding: 0;
        margin: 20px auto;
    }
    .container-cta .button-white, .container-cta .button-orange{
        width: 80%;
    }
    .cc-big-txt{
        font-size: 25px;
        padding: 50px 0;
    }

    /* ---- top banner ---- */
    .tb-txt-img{
        display: none;
    }


    /* ---- bands & cols ---- */
    .fixedbottomband {
        padding: 15px 10px;
    }
    .fixedbottomband .ts12{}
    .fixedbottomband .smallbut{}
    .sidecolright{}

}

/* --------------------- 0px to 599 px horizontal --------start---------------- */
/* retain ALL RULES from the previous condition + these: */
/* IMPORTANT: keep ALL rules & in THAT order for logical + practical reasons */
/*@media only screen and (min-width: 500px) and (max-width: 780px)*/
/*,only screen and (min-device-width: 500px) and (max-device-width: 780px){*/
@media screen and (max-width: 599px) {

   /* --- table top banner --- */
    .top-cta-table{
        display: block;
    }
    .top-cta-row{
        display: block;
    }
    .top-cta-cell{
        display: block;
        width: 100%;
    }

    /* ---- top band ---- */
    .container-logo{
        font-size: 24px;
        line-height: 115%;
        padding: 20px 0 20px 0;
    }
    .container-motto{
        font-size: 14px;
        line-height: 115%;
    }
    .container-howto{
        font-size: 14px;
        line-height: 115%;
    }

    /* ---- menu ---- */
    .container-menu:hover .menuitem{
        display: block;/*this is in addition to the javascript that hide/show the mobile menu, for compatibility*/
    }
    .mobile-menu{
        display: block;
    }
    .mobile-menu:hover{}
    .menu-builder-mobile{
        margin: 0 !important;
        padding: 0 !important;
    }
    .menu-builder-mobile a{
        padding: 15px 15px !important;
    }
    .menu-maxwidth{
        /*max-width: 480px;*/
    }
    .mi-hide{/*only show on mobile extra text in menus*/
        display: inline;
    }
    .menuitem{
        font-size: 14px;
        margin: 20px 0 0 0;
        padding: 0;
        line-height: 115%;
    }
    .menuitem a{
        padding: 7px 15px;
        font-style: normal;
        font-weight: bold;
    }
    .menuitem a:hover{}
    .submenu{
        padding: 0 0 0 15px;
        font-size: 13px;
        font-weight: normal;
    }
    .submenu a:link{
        font-weight: normal;
        padding: 7px 15px;
        font-size: 13px;
    }
    .submenu a:visited{
        font-weight: normal;
        padding: 7px 15px;
        font-size: 13px;
    }
    .submenu a:hover{
        font-weight: normal;
        padding: 7px 15px;
        font-size: 13px;
    }
    .sm-note{
        padding: 7px 0px;
        color: #000;
        font-style: italic;
    }

    .menu-cta a:hover{}

    .smallbut2{
        padding: 6px 15px;
    }

    .smallrating{
        margin: 5px auto;
    }


    .ybox{
        padding: 15px;
    }

    /* ---- bands & cols ---- */
    .fixedbottomband {}
    .fixedbottomband .ts12{
        display: none;
    }
    .fixedbottomband .smallbut{
        font-size: 14px !important;
        padding: 15px;
    }

    .sidecolright{
        display: none;
    }

}