/*Responsive*/
/*Mentel website is desktop first 100% fluid up to 1280px*/

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.ico-serv{top:0;}
    #clients-slider.slide-top .slide-01 {
    margin: -90vh 0 0;
    transition: margin 0.5s ease 0s;
}
    #clients-slider .slide-01 {
    margin: 0vh 0 0;
    transition: margin 0.5s ease 0s;
}
ul.navigation{margin-top:-20px;}
    
  .newsletter-wrapper{height: 60px}
  .newsletter-wrapper.form-visible{height: 120px}
}

@media screen and (max-width: 1450px){
    body, html{font-size:14px;}
    .newsletter-wrapper .input-container{width:85%;}
    .newsletter-wrapper .submit-btn{ font-size: 0.65em; margin-left: -5px;}
}

@media screen and (max-width: 1320px){
    a#serv-software-link, a#serv-system-link, a#serv-marketing-link,a#serv-staff-link {font-size: 1.6em; }
    .services-page .ico-serv {   margin-left: -115px; top: -30px;  width: 230px;}
    .services-page .service-link span, .services-page .service-link span.hidden-mob {padding-top: 10%;}
    .main-content{padding:3% 2% 2% 2%;}
    .services-page .ico-serv{max-width:100%; position: absolute; top:50%; left: 50%; margin-left:-50%;}
    .news-single .news-txt-block {width:75%}
    .news-single.news-section {width:100%}
     .news-txt-block h2 {font-size: 1.4em;}
    .contact-page .main-container { height: 100%}
    .vision-block, .vision-txt-block {   min-height: 50vh;}
    .news-cta {overflow: hidden;}
    .news-cta span{display: block;}
    .newsletter-wrapper{top:70%;}
    .newsletter-wrapper .submit-btn{ margin-top: 11px; padding: 5px 10px;}  
}

@media screen and (max-width: 1270px){
        #home-nav.navbar{left:0;}
        .service-link.col{width:45%; height: 55%;}
        .home-container.col,
        .main-container.col{float: none; width: auto;margin-left:15%; }
        .vision-page .main-container.col{width: 79%;}
        .contact-page .main-container.col{width: 85%;}
        .pad-resp{margin-left:15%;}
        .ico-logo{max-width: 35px;}
        a.logo{font-size: 1.2em; line-height: 36px;}
        .service-link.col{width: 42.5%}
        .navbar{width: 15%;}
        .service-link span{padding-top: 15%;}
        a#serv-software-link, a#serv-system-link, a#serv-marketing-link,a#serv-staff-link {font-size: 1.6em; padding:10%;}
        a#serv-software-link:hover, a#serv-system-link:hover, a#serv-marketing-link:hover,a#serv-staff-link:hover  {font-size: 1.8em;}
        .home-container.col.serv-animate, .main-container.col {width: 80%;float: left;min-height: 100%;  }
        .news-page  .main-container.col{width: 79%; }
        .service-link.col.serv-animate, 
        .services-page .service-link.col, 
        a#serv-staff-link-alt,
        a#serv-marketing-link-alt, 
        a#serv-system-link-alt,
        a#serv-software-link-alt {width:5%; margin: 0; height: 15%}
        #serv-first.service-link.col.serv-animate, 
        .services-page #serv-first.service-link.col{ height: 25%}
        .service-link.col.serv-animate span , .services-page  .service-link.col span{display: none;}
        .service-link.col.serv-animate .ico-serv, .services-page  .service-link.col .ico-serv{ left: 50%; margin-left: -100px;  max-width: 200px;   overflow: hidden;   position: absolute;   
            top: -100px !important; width: 200px;}
        #serv-first.service-link.col.serv-animate .ico-serv, 
        .service-link.col.serv-animate #serv-staff-link-alt .ico-serv, 
        .services-page  #serv-first.service-link.col .ico-serv {  top: -35px !important; }
        .service-link.serv-animate a#serv-system-link span.hidden-mob,
        .service-link.serv-animate a#serv-software-link span.hidden-mob,
        .service-link.serv-animate a#serv-staff-link span.hidden-mob,
        .service-link.serv-animate a#serv-marketing-link span.hidden-mob{display: none;}
        .animated-container{overflow: hidden;}  
        .serv-animate a#serv-software-link, 
        .serv-animate a#serv-system-link, 
        .serv-animate a#serv-marketing-link, 
        .serv-animate a#serv-staff-link ,
        a#serv-software-link-alt, 
        a#serv-system-link-alt, 
        a#serv-marketing-link-alt,
        a#serv-staff-link-alt,         
        .service-link.serv-animate a#serv-software-link, 
        .service-link.serv-animate a#serv-system-link, 
        .service-link.serv-animate a#serv-marketing-link,
        .service-link.serv-animate a#serv-staff-link {background: rgba(68, 157, 202, 0.85);font-size: 1em; transition: background 0.5s; -webkit-transition: background 0.5s; overflow: hidden;}
        .service-link.serv-animate.fixed a#serv-software-link:hover, 
        .service-link.serv-animate.fixed a#serv-system-link:hover, 
        .service-link.serv-animate.fixed a#serv-marketing-link:hover,
        .service-link.serv-animate.fixed a#serv-staff-link:hover , 
        a#serv-software-link-alt:hover, 
        a#serv-system-link-alt:hover, 
        a#serv-marketing-link-alt:hover,
        a#serv-staff-link-alt:hover {background: rgba(68, 157, 202, 1);font-size: 1em; transition: background 0.5s , height 0.5s; -webkit-transition: background 0.5s, height 0.5s; }
        .ico-serv{top:60%}
        .lang-switcher{top:4%;}
        #serv-sidebar.serv-animate.fixed, 
        .services-page #serv-sidebar{position: fixed; top:70%; right:0;height: 30%; width:5%;background: rgba(68, 157, 202, 0.85);}
        .clients-page .sidebar{width: 100%; height:100%; overflow: visible;}
        .clients-page .main-container.col,  .nav-slider{display: none;}
        .clients-block{width: 33.33%; height: 33.33%}
        #clients-slider .slide{height: auto; overflow: auto;}
        #clients-wrapper{ width:85%;border: 0;height: auto;}
        a.back-clients-mob,.back-btn a{   background: none repeat scroll 0 0 rgb(68, 157, 202);    border-bottom-right-radius: 25px;   border-top-right-radius: 25px;    color: #fff;    display: block;   
        margin-left: -25px;    padding: 10px 25px;  text-transform: uppercase; width: 180px; font-weight: 700; margin-top:15px;}
        .back-btn a{margin-left: -60px;   padding: 10px 60px;}
        .back-btn a img{display: none;}
        #service-wrapper {  width: 5%;}
        .newsletter-wrapper .input-container{width:90%;margin-left: -5px;}
        .newsletter-wrapper .submit-btn{padding: 10px; font-size: 0.65em; margin-left: -5px;}
        .news-section.news-single{width: 100%;}
        .news-txt-block h2{font-size: 1.4em;}
        .news-txt-block p.news-date {  bottom: 6%;}
        .vision-block, .vision-txt-block {min-height: 50vh;}
        .client-item-col{height: 45vh;}
        .client-item-col-2{height: 55vh;}
        a.client-link-blank{margin-top: 15px;}
        .client-item h1{margin: 0 0 1em 0;}
        #video-btn{display:  none}
        #video-btn-mobile{display: block;}       
}


@media screen and (max-width: 1024px){
        .navbar{width: 10%; z-index: 1500; }
        .home-container.col , .main-container.col{float: none; width: auto;margin-left:10%; height: 60%;}
        .home-container.col.serv-animate, 
        .main-container.col{width: 85%;float: left;min-height: 100%;  }
        .contact-page .main-container.col{height: auto;}
        .pad-resp{margin-left:10%;}    
        #services-anim .main-content{height: auto;  padding-bottom: 30vh;}
        .service-link span{padding-top: 15%;}
        #trigger-menu-tab , 
        #btn-collapse-tab{display: block;  width:45px;margin-top:25px; }
        .vision-page .main-container.col { width: 84%;}
        #nav-tab-wrapper, 
        #nav-mobile-wrapper{position: absolute; top:0; left: -10%; width:20%; height: 100%; background: rgb(97, 179, 132);  border-left: 1px solid rgb(97, 179, 132);transition: width 0.5s;
            -webkit-transition: width 0.5s; z-index:1300;}
        #nav-tab-wrapper{position: fixed}
        #nav-tab-wrapper.hidden , #nav-mobile-wrapper.hidden{width:0;transition: width 0.5s; -webkit-transition: width 0.5s;}
        ul.navigation{list-style: none; padding: 15px;  margin-top:43%;}
        ul.navigation li.social {margin-top:20px;font-size: 2em;}
        ul.navigation li.social img{width: 20px;}
        a#serv-software-link, a#serv-system-link, a#serv-marketing-link,a#serv-staff-link {padding: 5%; }
        h1.site-title, h1.site-title b{margin-top:5%;}
        .ico-since {   margin-top: 0;  max-width: 300px;}
        .ico-serv{max-width:200px; position: absolute; top:50%; left: 50%; margin-left:-100px;}
        .ico-logo{max-width: 45px;}
        .service-link.col{width: 45%}
        #trigger-menu-tab.expanded, #btn-collapse-tab.collapsed, .hidden-mob, .hidden, .display-mob.hidden , .display-tab.hidden , .display-mob{display: none;}
        #trigger-menu-tab.collapsed, #btn-collapse-tab.expanded,.display-tab{display:  block;}
        #serv-first.service-link.col.serv-animate, .services-page #serv-first.service-link.col{ height: 15%}
        #serv-first.service-link.col.serv-animate .ico-serv, .services-page   #serv-first.service-link.col .ico-serv{  top: -100px !important; }
        #clients-wrapper{ width:90%; height: auto; position: static;margin-left: 10%;}
        #clients-slider{height: auto; overflow: auto;}
        .service-nav-w {height: 12%;padding: 50% 0;}
        .nav-ico{width: 32px; height: 32px; transition: height 0.5s , width 0.5s , margin 0.5s;  -webkit-transition: height 0.5s , width 0.5s , margin 0.5s;}
        .nav-ico:hover{width:40px; height:40px; transition: height 0.5s , width 0.5s , margin 0.5s;  -webkit-transition: height 0.5s , width 0.5s , margin 0.5s; margin-top: 1px}
        .contact-page .main-container.col {  width: 90%;}
        .newsletter-wrapper { left: -80%;top:75%; z-index: 1499; border-radius: 0 60px 60px 0; margin-left:1px; width: 18%; padding:20px;}
        .newsletter-wrapper.form-expanded {left: 10%; transition: left 1s; }
        .newsletter-wrapper .input-container {  margin-left: 0; width: 80%;}
        .newsletter-wrapper .submit-btn {font-size: 0.7em;    margin-left: 0;  padding: 5px 15px;}
        .news-single .news-txt-block {width:100%}
        .news-page .main-container.col, .careers-page .main-container.col{width: 84%;}
        .scroll-client{display: block;}
        a.privacy-link {font-size: 1em;  margin: 1em;}
        .services-top-nav {font-size: 1.1em}
}

@media screen and (max-width: 990px){
        .home-container.col{height: 80%;}
        .service-link.col{ height: 50%; float: left;} 
}

@media screen and (max-width: 768px){
        .lang-switcher{display:block;top:12%;}
        .vision-page .main-container.col ,.careers-page .main-container.col{width:100%;}
        .careers-page .main-container.col {margin-top: 65px;}
        .body, .html{overflow-x:hidden; max-width: 768px; font-size: 12px;}
        .home-container.col{margin:65px 0 0 0; height: 40%;}
        #home-anim{padding: 10px;}
        h1.site-title, .careers-page .news-txt-block h2{font-size:1.6em; }
            h1.site-title b{font-size:2.5em;}
            h1.site-title, h1.site-title b{margin-top:9.5%;margin-bottom: 2%;}
        #trigger-menu.expanded, #btn-collapse.collapsed , #trigger-menu-tab, #btn-collapse-tab,#trigger-menu-tab.collapsed, #btn-collapse-tab.expanded{display: none;}
        #trigger-menu.collapsed, #btn-collapse.expanded,.display-mob{display: block}
        #trigger-menu, #btn-collapse{display: block;  width:45px;margin-top:25px; }
        .col{float: none; width:100%;}
        .pad-resp{margin: 0;}
        .service-link.col{width: 50%; height: 30%; float: left; overflow: hidden;}
        a.logo{width: 45px;  float: left;}
        .ico-logo{margin: 10px;width:45px;}
        #trigger-menu , #btn-collapse{float: right; margin:10px;}
        #nav-mobile-wrapper{position: static ; width: 100%; height: auto; position: fixed; top:-665px; left: 0;}
        .navbar{height: 65px; padding: 10px; top:0; left:0;padding:0;}
        ul.navigation{margin: 0 0;text-align: right;  border-top: 1px solid rgb(97, 179, 132); list-style: none; padding: 10px;}
            ul.navigation li{padding: 5px 10px ;  transition: background 0.5s; -webkit-transition: background 0.5s; margin-bottom:0; }
            ul.navigation li:hover{background: #347697;}
            ul.navigation li.social{border-top: 1px solid rgb(97, 179, 132); display: block; padding: 10px  10px;}
            ul.navigation li.social:hover{background: none;}
            ul.navigation a  , ul.navigation a:hover {transition: none; -webkit-transition: none; color: #fff;}
        .service-link span.txt-mob{display: block; padding-top:15%;}
        .ico-serv.display-mob{   display: block;left: 50%;  margin-left: -35px;   margin-top: 0;   max-width: 1000px;  top: 45%;  width: 75px;}
        .home-container.col.serv-animate, .main-container.col{width: 100%;float: none;min-height: 100%; margin-left:0; height: auto;}
        .careers-page .news-txt-block.col{width:100%; background: #fff;}
        .services-page .service-link.col,.services-page #serv-sidebar, .sidebar,    #serv-sidebar.serv-animate.fixed, 
        .homepage .service-link.col.serv-animate.fixed, .service-link span.hidden-mob,.ico-serv , .display-tab{display: none;}
        .main-content{padding:5%;}
        .sidebar{ transition: width 0.5s, height 0.5s;  -webkit-transition: width 0.5s, height 0.5s;}
        #clients-wrapper{ width:100%; border: 0; margin-left: 0;}
            #clients-wrapper.sidebar{display: block}
            #clients-slider{height: 100%; margin-top:65px;}
        .col.clients-block{width:50%; float: left;}
        .ico-since{margin-top:2%;width:240px;}
        #gback-content{height: auto;}
        #contact-content .container-tablet{background:#fff;padding:25px 5px;}
                .container-tablet .input-field , .container-tablet .input-label , .container-tablet .dropdown-title, .container-tablet .radio-label, .container-tablet .submit-btn{color:#777;}
                .container-tablet .input-field, .container-tablet .dropdown-title, .container-tablet .submit-btn{border-color:#777;}
                .container-tablet .focused-border{background:#444;}
                .container-tablet .dropdown-title{    background-image: url("../images/ico-arrow-d.png");}
                .container-tablet .open .dropdown-title{    background-image: url("../images/ico-arrow-up-d.png");}
            .contact-page .main-container.col{width: 100%; height: auto; margin-top:65px;}
            .contact-page p.subtitle{    padding: 3% 15%;}
            .input-container{width:100%;margin: 5% 0;}
        .navigation .input-label{font-size: 1em }
        .navigation .focused-border { left:0;}
        .navigation .submit-btn {margin: 0; float: left;font-size: 0.6em; width: 175px; padding: 5px 25px;}
        #news-content{margin-top:65px;}
            .news-single .news-txt-block,.news-page .main-container.col {width:100%}
            .news-txt-block{background: rgba(255,255,255,0.75)}
            .news-block, .news-txt-block {  margin: 0}
            .news-section{border: 1px solid rgba(37,37,37, 0.1); border-top:0; border-left:0; width:100%;}
        .news-block.col, .news-txt-block.col { width:50%; float: left;}
        #vision-content h1.page-title { padding: 20% 2% 5%;}
        .vision-txt-block.col , .vision-block.col {width:50%; float: left;}
        p.subtitle{padding:  8% 15%}
        .service-intro-wrapper{height: 25%;}
        #service-intro.main-content{height: 100%;padding: 15% 0;}
        .serv-block p{width: 100%;}
        .vision-block, .vision-txt-block {  min-height: 40vh;}
        .timeline-item{height: 50vh; padding-top:10vh}   
        .testimonial-content { font-size: 1.2em;   padding: 80px 15px 25px 15px;}
        .timeline-item{height: auto}
        .scroll-client{display: none;}
        #footer{display: block; width:100%; background:rgb(97, 179, 132) none repeat scroll 0 0; clear: both; border-top: 3px solid rgb(97, 179, 132) ; height: 200px; padding:20px 0;}
        .newsletter-wrapper { display: none !important;}
        a.privacy-link {font-size: 1em;margin: 5px 0 0; padding: 10px;}
        .vision-quote{padding: 40px;}
        .definition-container{margin-top:0; padding:20px; }
       .hidden-lg{display: block;}
        .serv-top-wrap{background:rgba(68, 157, 202, 0.5);}
        .services-top-nav{height: 200px;  overflow: hidden;   width: 50%;}
    .services-top-nav{background:rgb(97, 179, 132);}
    .services-top-nav.db{background:rgba(37, 37, 37, 0.85);}
    .services-top-nav img.ico-scroll{margin:5px auto; height: 30px; width: 30px;}
    .services-top-nav img{margin:25px auto 5px auto;}
    .services-top-nav:hover img.ico-scroll{opacity:1;margin:25px auto 25px auto; }
        
}



@media screen and (max-width: 480px){
 
    body, html{ max-width: 480px;}
    body, body.homepage{background-position: top center; background-size:initial; background-attachment: fixed; }
     .contact-page p.subtitle{    padding: 5%;}
    .service-link.col{width: 50%; height: 30%; float: left;}
    a#serv-software-link, a#serv-system-link, a#serv-marketing-link,a#serv-staff-link {font-size: 1.2em; }
    a#serv-software-link:hover, a#serv-system-link:hover, a#serv-marketing-link:hover,a#serv-staff-link:hover {font-size: 1.2em;}
    .ico-serv.display-mob{  margin-left: -30px;   top: 40%;width: 60px;}
    .service-link.col{height:25%}
    .service-link span.txt-mob{padding-top:15%;}
    .home-container.col{height: 45%; }
    .timeline-item{ padding: 15%  2%; min-height: 70%;}
    .timeline-item p,  .timeline-item p.right-vision{width: 100%; margin-left: 0; padding:12% 5%; text-align: center;}
    .vision-block {  min-height: 25vh;}
    .vision-txt-block {  min-height:15vh; height: auto;}
    #vision-content h1.page-title { text-align: center;}
    .news-section{width:100%;}
    .news-block.col, .news-txt-block.col{width:70%; float: left;}
    .news-block.col{width:30%}
    .vision-block.col.vision-02.hidden-desk{display: block;}
    .vision-txt-block {min-height:30vh; height: auto; padding-bottom: 5vh ;padding-top: 5vh }
    .vision-block.col.vision-02.hidden-mobile{display: none;}
    #service-intro.main-content , .client-item-col-2.align-right{ padding: 25% 0;}
    .client-item-col-2.align-right{ padding: 5%;}
    p.subtitle {padding: 8%;font-size: 1.1em;   line-height: 1.2em;}
    .client-item-col{height: auto;}
    .client-item-col-2{width: 100%; height: auto;}
    .client-bg-gal{min-height:35vh }
    .client-item{height: auto}
    .timeline-item{height: auto}
    .vision-txt-block.col, .vision-block.col{width: 100%;}
    .vision-cta { padding: 80px 20px;}
    .vision-01{background-size: 100%;}
    .news-cta {   padding: 60px 20px;}
    .phone-number{font-size:1em}
    .fixedrp-content.client-bg-gal,
    .bell-content.client-bg-gal,
    .occasions-content.client-bg-gal,
    .chnl-content.client-bg-gal,
    .tlog-content.client-bg-gal,
    .tfo-content.client-bg-gal,
    .eso-content.client-bg-gal,
    .qunol-content.client-bg-gal,
    .bvd-content.client-bg-gal,
    .desmeules-content.client-bg-gal,
    .dlc-content.client-bg-gal,
    .esri-content.client-bg-gal,
    .geoiq-content.client-bg-gal,
    .himedia-content.client-bg-gal,
    .honest-content.client-bg-gal,
    .pawnp-content.client-bg-gal{background-size:580px;}
    .newsletter-wrapper .submit-btn{margin-top:15px;}
    .contact-page .input-container {
    margin: 16% 0;}
    .gback-page, .news-page{background: url(../images/closeup.jpg) no-repeat top center; background-size: cover; background-attachment: fixed;}
    .input-field.textarea-field,.input-container.textarea-container{height: 150px;}
    .input-label.textarea-label{top:120px;}
    #bgvid{display:none;}
}


@media only screen 
and (min-device-width : 414px) 
and (max-device-width : 736px) 
and (orientation : landscape) { 
    .home-container.col{height: 100%;}
    h1.site-title, h1.site-title b {margin-top: 5%;}
    .service-link.col{height: 70%;}
    .service-link span.txt-mob{padding-top:15%;}
    .ico-serv.display-mob{top:80px; width:50px; margin-left:-25px;}
    .service-link.col{width:25%; height: 50%;}
    .service-link.col.pad-resp{float: right;}
    a#serv-software-link, a#serv-system-link, a#serv-marketing-link, a#serv-staff-link{font-size: 1em}
    .serv-cta{bottom: 45px;}
    .col.clients-block{width: 25%;}
}
    

@media screen and (max-width: 320px){
    a#serv-software-link, a#serv-system-link, a#serv-marketing-link,a#serv-staff-link , 
    a#serv-software-link-alt, a#serv-system-link-alt, a#serv-marketing-link-alt,a#serv-staff-link-alt {font-size: 1em; }
    a#serv-software-link:hover, a#serv-system-link:hover, a#serv-marketing-link:hover,a#serv-staff-link:hover {font-size: 1em;}
}