/* ==========================================================================
   Media Queries
   ========================================================================== */
@media only screen and (min-width: 1800px) {
    .main-nav li a {
        padding-right: 37px;
        padding-left: 37px;
    }
}
@media only screen and (max-width: 1800px) {
    .main-nav li a {
        padding-right: 32px;
        padding-left: 32px;
    }
}
@media only screen and (max-width: 1700px) {
    .main-nav li a {
        padding-right: 28px;
        padding-left: 28px;
    }
}

@media only screen and (max-width: 1600px) {
    .main-nav li a {
        padding-right: 20px;
        padding-left: 20px;
    }
    /*.is-sticky .main-nav li a{
        padding-right: 16px;
        padding-left: 16px; 
    }*/
}
@media only screen and (max-width: 1500px) {
    .main-nav li a {
        padding-right: 16px;
        padding-left: 16px;
    }
}
@media only screen and (max-width: 1450px) {
    .main-nav li a {
        padding-right: 12px;
        padding-left: 12px;
    }
}

@media only screen and (max-width: 1400px) {
    .main-nav li a {
        padding-right: 20px;
        padding-left: 20px;
    }

    .search-box .label,
    .quick-menu .label{
        width:40px;
    }
    .search-box .box-wrap:before{
        right: 15px;
    }
    .search-box .label,
    .quick-menu .label{
        padding-left: 0;
        padding-right: 0;
        text-indent: -999em;
    }
    .search-box .label i{
        position: absolute;
        left: 4px;
        top: 3px;
        margin: 0;
        text-indent: 0;
    }
    .quick-menu .label i{
        top: 13px;
        left: 14px;
        text-indent: 0;
        margin: 0;
    }
}
@media only screen and (max-width: 1360px) {
    .main-nav li a {
        padding-left: 17px;
        padding-right: 17px;
    }
}
@media only screen and (max-width: 1330px) {
    .main-nav li a {
        padding-left: 6px;
        padding-right: 6px;
    }
}

@media only screen and (max-width: 1024px) {
    
    .card-slides {padding-left: 10px;}
    .tagline2 {margin-left: 90px;}
    .spotlight .shortdesc {left: 60px;}
    .spotlight .spot-cta {left: 60px;}
    .resp-cta {display: block;}
    .main-wrap, .top-nav-wrap, .main-nav-wrap, .wrap-inner3, .wrap-inner{width: 100%; min-width: 320px;  padding: 0px;}
    .main-nav-out, .main-nav-out, .main-nav-wrap, .main-nav-wrap{min-width: 100%; height: 52px;}
    .main-nav-wrap h1{position: relative; top: 9px; left: 15px;}
    .resp-menu h1 img {margin: 8px 0 0 10px;}
    .main-nav{display: none;}
         .spot-image {/* opacity: 0; */ position:absolute; width:100%; min-width:976px; height:457px;    
         background-color: #414042; background-position: 50% 75px; background-size: cover;}

    .sm-list ul {margin: 0em 26em!important}


}

@media only screen and (max-width: 800px) {
    .sm-list ul {margin: 0em 19em!important;}
}

@media only screen and (max-width: 768px) {
.top-nav li.locale {display: block; margin-left: 84px;}
.sm-list ul{margin: 0em 16em!important;}
.sm-list li {padding: 0px 0; width: 63px;}

{
    /*
    .resp-cta {display: block;}
    .resp-menu h1 img {margin: 8px 0 0 10px;}
    .main-nav{display: none;}*/
}

/* tablet styles */
@media only screen and (max-width: 768px) {
    
    
    .crumb-wrap {display: none;}
    .misc-cta {clear: both; width: 50%;}
    .main-wrap {padding-top: 0px;}

    
    .quicklinks { display: none;}
    .tagline2 {font-size: 26px; margin-left: 55px;}

    .list-index span {width: 10px; height: 10px; border-radius: 3px;}
    .list-index span.active {width: 15px; height: 15px; margin-left: -3px;}

    .promo-list-wrap,
    .plans-list-wrap,
    .device-list-wrap,
    .card-slides-wrap,
    .panel,
    .mini-sitemap-wrap,
    .sm-footer-wrap,
    .quicklinks-wrap,
    .quicklinks-wrap .wrap-inner,
    .spotlight,
    .copyright-wrap,
    .main-wrap,
    .top-nav-wrap,
    .main-nav-wrap,
    .wrap-inner3,
    .wrap-inner{
        width: 100%;
        min-width: 320px;
        max-width: 768px;
    }

    .top-nav-wrap{
        position: relative;
    }
    .top-nav{
        float:right;
        /*position: absolute;
        margin-left: -170px;*/
        left: 100%;
        top: 0;     
        width:!important;/* rami _31-jan-17_10-57AM 122px!important */
        margin-right:0px!important;
    }
    .top-nav li{
        display: none;
    }
    .top-nav li.locale{
        display: block;
    }
    .top-nav2{
        margin-left: 15px;
    }
    .is-sticky .main-nav-out,
    .main-nav-out,
    .is-sticky .main-nav-wrap,
    .main-nav-wrap{
        min-width: 100%;
        height: 52px;
    }
    .main-nav-wrap h1{
        position: relative;
        top: 9px;
        left: 15px;
    }
    .resp-menu h1 img {margin: 8px 0 0 10px;}
    .main-nav{
        display: none;
    }
    .mm-badge{
        float: none;
        position: absolute;
        left: 100%;
        top: 0;
        margin: 0 0 0 -318px ;
    }

    .spotlight .shortdesc,
    .spotlight .spot-cta,
    .spotlight .tagline{
        left: 10%;
    }
    .spotlight .tagline{
        margin-left: -10px;
    }
    .spot-image {
        width: 100%;
        min-width: 320px;
    }
    .spotlight .ornament {
        -webkit-transform: scale(.8);
        -moz-transform:    scale(.8);
        -ms-transform:     scale(.8);
        -o-transform:      scale(.8);
        transform:         scale(.8);
    }

    .list-index{
        right: 15px;
    }
    .quicklinks-wrap{
        /*height: 15px;*/ height: 2px;
    }
    
    }
    .minimap-collapse{
        right: 20px;
    }
    .minimap-expand{
        top: -42px;
    }
    .copyright-wrap .mouse{
        margin-left: 15px;
    }

    .mini-sitemap-wrap .wrap-inner{
        width: 100%;
    }
    .mini-sitemap{
        padding: 45px 0;
        margin: 0 15px;
    }
    .mini-sitemap .col{
        float: none;
        display: block;
        padding: 0;
        width: 100%;
    }

    .mini-sitemap .col h4{
        position: relative;
        padding: 5px 13px;
        margin: 0 0 1px;
        background: #302927;
        font-size: 20px;
        font-weight: 500;
        text-transform: none;
        cursor: pointer;
    }
    .mini-sitemap .col h4:after{
        content: "\e684";
        font-family: 'ooredoo-icon-fonts';
        position: absolute;
        right: 20px;
        top: 7px;
    }
    .mini-sitemap .active h4:after{
        content: "\e682";
    }
    .mini-sitemap ul{
        display: block;
        height: 0;
        opacity: 0;
        padding: 0;
        overflow: hidden;
    }
    .mini-sitemap ul.misc{
        height: 100%;
        margin: 20px 0 20px;
        opacity: 1;
    }
    .mini-sitemap .active ul{
        display: block;
        opacity: 1;
        height: 100%;
        -webkit-transition: all linear .5s;
        -moz-transition: all linear .5s;
        -o-transition: all linear .5s;
        transition: all linear .5s;
    }
    .mini-sitemap li a{
        position: relative;
        display: block;
        padding: 8px 8px 8px 34px;
        background: #484646;
        border-bottom: #403e3e solid 1px;
    }
    .mini-sitemap li a:before{
        font-family: 'ooredoo-icon-fonts';
        content: "\e67e";
        position: absolute;
        left: 10px;
        top: 8px;
        color: #333;
    }
    .mini-sitemap .group-link{
        padding: 15px;
    }
    .mini-sitemap .misc li a{
        color: #bfbab8;
        padding-left: 15px;
    }
    .mini-sitemap .misc li a:before{
        display: none;
    }

    .panel{
        width: auto;
        margin: 0 10px 10px;
    }
    .help-util{
        padding: 35px 15px 20px;
    }
    .help-util li{
        clear: both;
        width: 49%;
        height: auto;
        min-height: 300px;
        margin: 0 0 15px;
        padding-bottom: 20px;
    }
    .help-util li+li{
        margin-left:0;
    }
    .help-util li:nth-child(even){
        float: right;
        clear: none;
    }
    .help-util .summary > p{
        height: auto;
        margin: 0 20% 1.5em;
    }

    .panel-tabs > .tab:first-child{
        padding-left: 60px;
    }
    .panel-tabs3 > .tab:first-child{
        padding-left: 10px;
    }
    .panel-tabs > .tab:first-child i{
        left: 25px;
    }

    .slider-ctrl{
        display: none;
    }

    .pinwall-wrap, .joblist-wrap, .social-wall-wrap{
        width: 100%;
        padding-top: 10px;
    }
    .pinwall-mask, .joblist-mask, .social-wall-mask{
        width: auto;
        margin-left: 15px;
    }
    .carousel{
        width: 100%;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        overflow-scrolling: touch;
    }
    .pinwall-grid{
        padding-right: 50px;
    }
    .pinwall-wrap .foot, .joblist-wrap .foot, .social-wall .foot {
        display: none;
    }
    
    .pane{
        min-height: 545px;
        width: 103%;
    }

    .util-wrap {width: 100%;}
    .banner-small,
    .cta-selfcare{
        float: left;
        position: static;
        width: 49.2%;
        height: 70px;
        border-radius: 5px;
    }
    .banner-small{
        float: right;
        margin: 0 0 10px 0;
        border-radius: 5px;
        overflow: hidden;
    }
    .banner-small a img{
        min-width: 100%;
    }
    .cta-selfcare h3{
        position: relative;
        margin: 0 0 0;
        font-size: 22px;
    }
    .cta-selfcare h3:before{
        top: 9px;
        left: -60px;
    }

    .card-slides{
        width: 100%;
    }
    .banner-small img{
        position: relative;
        margin-top: -40px;
    }
    .card-slides-wrap{
        overflow: visible;
        min-height: 470px;
        padding: 15px 5px;
        border-radius: 10px;
    }
    .card-slides-mask{
        width: 103%;
        height: auto;
        overflow: visible;
    }
    .card-slides-carousel{
        width: 100%;
        height: auto;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        overflow-scrolling: touch;
    }
    .card-slides ul { overflow: auto;padding-right: 50px;}
    .card-slides li{
        width: 320px;
        height: auto;
        padding: 5px 5px 15px;
        margin: 0 5px 0 0;
        border: #c4c4c6 solid 1px;
    }
    .card-slides li .thumb{
        width: 320px;
        margin: 0;
        float: none;
    }
    .card-slides li .thumb img{
        width: 100%;
    }
    .card-slides h3{
        padding-top: 10px;
    }
    .card-slides h4 {
        color: #ed1c24;
    }
    .card-slides .cta{
        position: static;
        margin: 15px 0 0;
    }

    .promo-list-mask,
    .plans-list-mask,
    .device-list-mask{
        width: auto;
        margin-left: 10px;
    }
    .promo-carousel,
    .plans-carousel,
    .device-carousel{
        width: 100%;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        overflow-scrolling: touch;
    }
    .promo-list-wrap, .plans-list-wrap, .device-list-wrap{ padding: 60px 0 60px; }
    .promo-list,
    .plans-list,
    .device-list{
        padding-right: 100px;
    }

    .device-list li{
        width: 260px;
    }


    .plans-list{
        min-height: 490px;
    }
    .plans-list li{
        width: 305px;
        height: 490px;
    }
    .plans-list li .thumb{
        width: 100%;
        height: auto;
        min-height: 150px;
    }
    .plans-list li .thumb img{
        max-width: 100%;
        min-width: 100%;
    }
    
    .pane .find-store, .pane .find-support{
        margin-left: 2%;
    }

    .promo-list li{
        width: 600px;
        background: #fff;
    }
    .promo-list li .thumb{
        width: 100%;
        height: 180px;
        overflow: hidden;
    }
    .promo-list li .thumb img{
        width: 100%;
        height: auto;
    }

    .content-wrap {padding-bottom: 40px; margin: 0 10px;}
    .copy-header { height: 70px; }


/* inner page responsive starts here */
    .overlay-wrap{

    }
    .popup-wrap {
        min-width: 320px;
        max-width: 710px;
    }
    .popup-content,
    .feature-media-wrap{
        width: 100%;
        min-width: 320px;
    }

    #video-popup {width: 80%; max-height: 350px;}

    .popup-wrap .close-wrap {right: 35px; top: 95px;}
    .is-sticky .overlay-wrap .close-wrap {top: 60px;}
    .popup-wrap .close-wrap .close {left: 0;}

    .feature-media-wrap {height: 330px;}
    .feature-mask {height: 100%;}
    .feature-carousel {overflow: auto;}
    .feature-list li {max-width: 730px;}
    .feature-list li .photo,
    .feature-list li .video,
    .feature-list li .video img,
    .feature-list li .photo img{
        width: 100%;
    }
    .feature-list li .video:after{
        font-size: 60px;
        margin: -40px 0 0 -30px;
        color: #fff;
    }

    .block-offers .offer-item {width: 100%;}
    .block-offers .offer-item .keyimage {overflow: hidden; width: 40%; height: 165px; float: left; padding-right: 15px;}
    .block-offers .offer-item .keyimage img {width: 100%;}

    .product-viewer {height: 520px;}
    .product-viewer .thumb-list{position: absolute;left: 5px;top: 130px;width: 110px; 
        -webkit-transform: scale(.6);
        -moz-transform: scale(.6);
        -ms-transform: scale(.6);
        transform: scale(.6);
    }
    .product-viewer .viewer img {max-width: 80%;}
    .product-viewer .find-store {position: absolute; left: 10px; top: 30px;}

    .related-content li h5+p{display: block;}
    .related-content li {padding: 15px 0;}
    .related-content .thumb {top: 15px;}
    .related-content-nothumb li {min-height: 50px;}

    /* none popup styles */
    .behind-wrap .content-pane-wrap {width: 100%; padding: 0 0 30px;}
    .sidebar-wrap {min-height: 400px!important; height: auto!important;}
    .behind-wrap .sidebar-wrap { float:none; width: 100%; margin:0 auto; border-bottom-left-radius: 10px; padding-bottom: 20px;}
    .behind-wrap .sidebar-wrap:before {display: none;}
    .inner-page .behind-wrap .panel {margin: 0 0 10px; border-radius: 0;}
    .inner-page .behind-wrap .panel-tabs {border-radius: 0;}

    .featured-device ul {width: 200%; padding: 20px 0 0;}
    .featured-device li {float: left; width: 48%; padding: 0; border: 0;}
    .featured-device li + li { padding: 0 0 10px;border: 0; float: right;}

    .intro2-centered {width: 100%; padding: 20px 5%;}
    .intro2-centered h3 {width: 80%;}
    .teaser {margin: 0 15px;}
    .teaser .thumb{max-height: 180px;position: relative;}
    .teaser .thumb img{min-height: 180px;}
    .section-plans .Mobile-Broadband .panel .list-wrap {padding-bottom: 30px;}

    .intro-centered blockquote {font-size: 40px;}
    .intro-centered .redtag {padding-left: 15px; padding-right: 15px;}
    .page-copy {max-width: 100%; width: auto; margin-top: 15px;}
    .page-copy .brief {padding: 7px;}
    .our-vision-wrap .briefs-wrap .brief {height: 200px;}
    .our-vision-wrap .attribs h4 {font-size: 20px;}
    .our-vision-wrap .attribs p {font-size: 18px;}
    .featured2 .keyimage{max-height: 200px;}
    .featured2 ul {width: 98%;}
    .featured2 li p, .featured2 li h4 {margin: 0 20px;}
    .featured2 .featured2-noimage ul {top: -20px;}

    .news-search-wrap {width: 60%;padding: 20px;margin: 10px auto 30px;background: #f1f2f2;border-radius: 8px;}
    .news-search-wrap h3 {padding-left: 0; padding-bottom: 5px; border: 0;}
    .news-search-wrap h3 i {display: none;}

    .block-featured-news {margin: 0 20px;}

    .carousel1 .themask {overflow: hidden; width: 110%; margin-left: -5%;}
    .carousel1 .thecarousel {overflow-x: auto; -webkit-overflow-scrolling: touch;}
    .carousel1 .thelist {padding-right: 20px; margin-left: 4.5%;}
    .carousel1 .thelist > li {width: 95%; margin-right: 10px;}

    .block-community-news {margin-left: 3%; margin-right: 3%;}

    .mobile-teaser {display: block;}
    .timeline-wrap { display: none; z-index: 100; position: fixed; top: 0; width: 100%; height: 100%;}
    .timeline-wrap .index {top: 50px;}
    .timeline-wrap .direction .symbol {display: none;}
    .timeline-wrap .direction .symbol-mobile {display: block;}
    .timeline-wrap .direction {padding: 180px 0 0;}
    .timeline-wrap .direction .symbol p {width: 40%;}

    .timeline-wrap .thelist .keyimage{
        -webkit-transform: skewX(0deg);
        -moz-transform: skewX(0deg);
        -ms-transform: skewX(0deg);
        -o-transform: skewX(0deg);
        transform: skewX(0deg);
    }

    .load-more {margin-left: 3.5%;}
    .device-list-cta .load-more {margin-left: 0;}

    .media-corner-wrap {padding-left: 3%; padding-right: 3%;}
    .media-corner-wrap .load-more {margin-left: 0;}
    .block-featured-news .carousel1 .themask,
    .media-corner-wrap .carousel1 .themask {max-height: 400px; height: 400px;}
    .media-item {width: 32.5%;}
    .media-item .thumb {max-height: 126px;}
    .media-item .thumb img{min-height: 126px;}
    .media-item:nth-child(3n) {margin-right: 0;}

    .media-filter .career-search-form-wrapper {text-align: left; width: 100%;}
    .media-filter .career-search-form {max-width: 100%; overflow: visible;}
    .media-filter .career-search-form .field.field-1 {width: 40%;}
    .media-filter .career-search-form .field.field-2 {width: 40%; margin-left: .5%;}
    .media-filter .txt1 {width: 38%;}
    .custom-btn-search input {width: 18.5%;}
    .media-filter .DivSelectyze {overflow: auto;}

    .other-plan-list li {width: 100%; margin: 0 0 1.5%;}
    .other-plan-list li .thumb {float: left; max-height: 126px; max-width: 222px; padding: 0 1.5% 0 0;}

    .advanced-filter .field {width: 33.333%}

    .tinyscroll1 .viewport {height: auto; overflow: visible;}
    .tinyscroll1 .scrollbar {display: none;}

    .cta-support {padding-left: 65px; text-align: left; max-width: 260px; margin: 0 auto;}
    .cta-support strong {padding: 5px 0 10px;}
    .cta-support i {font-size: 60px; right: auto; left: 3px; top: 3px;}


    .billing-plans .carousel-list li .thumb img {min-height: 156px;}

    .social-wall-wrap {max-width: 736px;}
    .panes2-wrap { margin: 20px 0 20px; width: 94%; height: 500px; margin-left: 10px;}
    .social-wall-block {width: 100%; padding: 0 10px;}
    .youtube-block.social-wall-block ul, .youtube-block.social-wall-block ul.even {margin-left: 60px;}

    .block-grey-wrap {padding: 0 3%;}
    .news-list3 .news-item .keyimage {width: 30%;}

    .month-filter .field {width: 32.7%;}

    .endJ {}


/* Louay css start */
    
    .copy-header > h2{ padding: 10px 20px; font-weight:normal; line-height: .8em;}
    #terms-conditions-page{ width: auto; padding:0 20px 80px 20px; }
    #support-block{ width:288px; height:55px; right:auto; left:50px; top:auto; bottom:20px; }
    #terms-conditions-page hr{ display:block; height:auto;  background:#e8e8e9; border-top:1px solid #e8e8e9;   }
    .popup-wrap{ width: auto; min-width: 1px ; max-width: 95%; background:none; margin:0 auto; }
    .popup-content { width: 100%; background:none;  }
    .feature-media-wrap { width: 100%;  }
    .related-info{ display:none; }
    .content-pane-wrap { float: none; width: 100%; background:#fff; padding:5%;   }
    .sidebar-wrap { float:none; width: 100%; margin:0 auto; padding:5%;  }
    .related-info{ display:none; }
    .related-content .thumb+.summary p.desc{ display:block; }
    .related-content h3+p , .featured-device h3+p{ border-bottom:1px solid #4a4a4a; }
    .featured-device h3+p {padding-bottom: 25px; margin-right: 10px;}
    .featured-device{ width:50%; float:left; padding: 10px 0 0; }
    .featured-device .thumb{ width:100%; }
    .featured-device .thumb img{ width:100%; }
    .cta-support-wrap{ width:37%; float:right; border:none; padding: 10px 0 0; margin: 0 0 20px; }
    .page-back-section{ display:block; background:#FFF; height: 80px; }
    .page-back-section .back-to-top{ margin:20px auto; }

    .page-team .page-copy {padding: 10px 3% 20px; margin: 20px auto 0;}
    .team-item h3{ width:auto }


    .page-job-listing .page-copy{ padding:10px 10px 20px; }
    .page-job-listing h1 { color:#ed1c24; }
    
    .job-listing{ width:62%; }
    .page-job-listing .result-text{ padding:0 0 0 38%; }
    .page-job-listing .filter-menu{ width:36%; }

    ul.header-list li{ display:none; }
    ul.header-list li.mobile{ display:block; border:none; }
    ul.list-item{ border-bottom:1px solid #fff; padding:20px; background:url(../img/red_arrow.png) no-repeat 90% 0 #f1f2f2; }
    ul.list-item.open{  background:url(../img/red_arrow.png) no-repeat 90% -106px #f1f2f2; }
    ul.list-item li{  float:none; width: auto;  text-align:left; border:none;  line-height: normal; height:auto; }
    ul.list-item li:first-child{ width: auto; padding:0; text-align:left; border:none; margin:0; }  
    ul.list-item li:last-child{ width: auto;  margin:0; }
    ul.list-item li:first-child a{ font-weight:bold; padding:0;  color:#7f7d79; background:none;   }
    ul.list-item li:first-child a.open{ background:none;  }
    ul.list-item li:last-child{ display:none; }

    .page-faq {margin: 0 2% 2%;}
    .faq-listing { float: none; width: auto; }
    .most-pop-faq{ display:none; }
    .faq-cat-div{ width:41%; float:left; padding:0 6% 0 3%; border-right:1px solid #414042; border-bottom: 0;}
    .faq-cat-div hr{ display:none; }
    .faq-cat-div h2{ text-align:center; }
    .support-div{ float:right; padding:90px 3% 0 6%;  width:39%; }
    .support-div .cta-support-wrap , .support-div .cta-selfcare-wrap{ float:none; width:auto; margin:20px 0; padding:0;  }
    .support-div .cta-support-wrap {margin-bottom: 30px;}
    .support-div .cta-selfcare{ width: auto; float:none; height:auto; position:relative; }
    .faq-listing .cta-load{ margin:5px 0; padding:15px 0; border-bottom:1px solid #e6e7e8;  border-top:1px solid #e6e7e8;  }

    .page-store-locator .page-copy{ padding: 30px 10px 0;  }
    .ctrl-col { width:27.5%; margin:0 0 10px; }
    .ctrl-col > label {font-size: 16px;}
    .ctrl-col + .ctrl-col, .ctrl-col-sumbit {margin-left: 5px;}
    /*.ctrl-col.center { margin:0 10px;  }
    .ctrl-col-sumbit{ float:none; margin:0 auto 10px auto; width:100px;  }*/
    
    #map-canvas{ display:none; }
    .locator-result2 #map-canvas {display: block;}
    
    .search-result{  border-radius:5px; width:auto; float:none;  }
    .search-result h3{  line-height:40px; font-size:1.3em; }
    .search-result .address-block{ padding:20px; position:relative; }
    
    .search-result .address-block a{ position:absolute; right:20px; top:50%; margin:-12px 0 0 0; display:inline-block; color:#01bff0; text-decoration:none; padding:0 10px 0 0; background:url(../img/blue_arrow.png) no-repeat 100% 7px;}
    .search-result .map-window{ display:none; }

    .search-result  .map-window a.view-location {display:inline;}
    /*.map-canvas2-wrap {display: block;}*/

    
/* Louay css end */


/* Hassan css start */
    .desktop{display: none;}
    /*.page-copy {width: auto !important; padding-bottom: 40px; padding-top:15px; margin-top: 0;}*/
    .page-devices .page-copy {padding: 0 2% 20px; margin: 10px 0 0;}
    .page-search .page-copy {padding-top: 0;}
    .page-careers .page-copy {padding-bottom: 0; margin-top: 0;}
    .page-copy-wrapper {padding-top: 10px;}
    .page-support .page-copy {padding: 10px 3% 0;}
    .faq .page-copy {padding: 10px 0 30px;}
    
    .section-plans .page-copy {padding-top: 0;}
    .section-plans .panel.grey .panes-wrap,
    .section-plans .Mobile-Broadband .panel .list-wrap {padding-left: 0; padding-right: 0;} 
        
    .page-devices .device-list li.col-4{}

    .page-devices .device-list li.col-3{}

    
        
    .copy-header > h2 {padding: 10px 20px;}

    .sub-nav2 {padding: 3px 0 0 20px; padding-right: 20px;} 
        

    .page-devices .device-list {
        padding:0;
    }

    .page-devices .device-list li {
        /*width: 32.33%;*/
        width: 236px;
        max-width: 236px;
        margin: 0;
    }
    .page-devices .device-list li + li{
        margin-left: .25%;
    }
    


    /********SUPPORT *********/

    .page-support .contacts .col {width: 50%;}
    .page-support .contacts .col .cta .find-store {position: relative;left: 0;}
    .page-support .contacts .col.col-2 {border-right: 0;}
    .page-support .contacts .col.col-3 {
        border-top: 1px solid #E4E5E5;
        margin-top: 10px;
        min-height: inherit;
        padding: 40px 0 10px;
        width: 100%;}
    .page-support .contacts .col .contact-block {padding: 0 10px; min-height: 0;}   
    .page-support .contacts .social-network {
        width: 19%;
        margin: 0 0.5%;}
    .page-support .contacts .social-network .hint{
        display: none;}
    .form-fields .row .col{width:100%;}
    .contact-form .form .col .row , .form-fields .row .col.col-1 {width:100%;margin-bottom: 10px;}
    .contact-form .form .col .textarea {height: 348px;}


    /************** promotions *****************/

    .page-promotions .side-content{
        display: none;
    }


    .page-promotions .main-content {
        float: none;
        width: 100%;
    }

    .other-promotions {
        padding: 0 20px;
        width: 100%;
    }

    .featured-promotions{
        width: 100%;
    }

    .featured-promotions .inpage-header{
        padding:0 20px;
    }

    .featured-promotions .carousel-mask{
        background: #e7e7e8;
        padding: 30px 0;
    }

    .featured-promotions .carousel-mask .carousel{
        margin-left: 9px;
        padding-left: 18px;
    }

    .featured-promotions .carousel-mask .carousel li{
        margin-right: 10px;
        padding-bottom: 20px;
    }


    .direct-contacts {padding-bottom: 20px;}
    .direct-contacts .carousel {
        margin-left: 0;
    }

    .map-search-wrapper .caption {
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        float: none;
        width: 25%;
        min-width: 180px;
        cursor: pointer;
    }

    .map-search-wrapper .form-wrapper{
        background: #ed1c24;
        -webkit-border-radius:0 0 5px 5px;
        -moz-border-radius:0 0 5px 5px;
        border-radius:0 0 5px 5px;
        width: 96%;
        padding:2%;
        display:none;
    }

    .map-search-wrapper.opened .caption {
        -webkit-border-radius: 5px 5px 0 0;
        -moz-border-radius: 5px 5px 0 0;
        border-radius: 5px 5px 0 0;
        width: 100%;
    }

    .map-search-wrapper.opened .form-wrapper {
        display: block;
    }


    .map-search-wrapper .col {
        float: none;
        height: 45px;
        margin: 0 0 10px !important;
        position: relative;
        width: 100%;
    }

    .map-search-wrapper .col-4 {
        margin: 0 !important;
    }

    /******************** search *********************/

    #search-form .field-wrapper{
        /*width: 70%;*/
    }


    /******************** careers *********************/

    .page-careers .articles .record{
        width: 49%;
        margin: 0.5%;
        min-height: 300px;
    }


    .page-careers .articles-2 .record{
        width: 100%;
        margin: 0 0 8px;
        min-height: auto;
    }

    .page-careers .articles-2 .record .thumb{
        width: 50%;
        float: left;
        max-height: none;
        margin: 0 2% 0 0 ;
    }

    .page-careers .articles .record .info {
        padding: 0;
    }


    .page-careers .articles .record {
        min-height: inherit;
    }

    .career-search-form {
        max-width:500px;
        margin: 0 auto;
    }

    .career-search-form .field.keywords {
        margin: 0 0 10px;
        width: 100%;
    }

    .career-search-form .field.field-1 {
        margin: 0 0 10px;
        width: 100%;
    }

    .career-search-form .field.field-2 {
        margin: 0 0 10px;
        width: 100%;
    }

    .career-search-form input.submit {
        float: none;
        width: 100px;
    }

    .career-search-form-wrapper {
        width: 80%;
        margin:0 auto;
    }

    .career-search-form {
        overflow:hidden;
        height: auto;
        text-align:center;
    }

    .career-search-form.closed {
        height:45px;
    }

    .show-filters-wrapper{
        display: block;
        position: relative;
    }
    .show-filters-wrapper a{ color: #444;}


    /******************** faq *********************/

    .padded{
        padding-left:20px;
        padding-right:20px;
    }

    .page-support.faq .page-copy .panel {
      float:  none;
      min-width: 100%;
      width: 100%;
      margin-bottom: 20px;
      border-radius: 8px;
    }

/* Hassan css end */



    .end2{}

.spot-image {
    /* opacity: 0; */
    position: absolute;
    width: 100%;
    min-width: 768px!important;
    height: 457px;
    background-color: #414042;
    background-position: 61% 28px !important;
    background-size: cover;
}

.resp-cta {display:block; min-height:550px;}

}

@media only screen and (max-width: 736px) {
    .sm-list ul{margin: 0em 15em!important;}
    .sm-list li {padding: 25px 0; width: 63px;}
}
@media only screen and (max-width: 734px) {
    .sm-list ul{margin: 0em 15em!important;}
    .sm-list li {padding: 25px 0; width: 63px;}
}
@media only screen and (max-width: 640px) {

    .top-nav2 {display: none;}
    .mm-badge {display: block; float: left; left: 5%; margin: 0;}

    .misc-cta {width: 100%;}

    .custom-btn-search input {width: 13%; text-indent: -999em;}
    .advanced-filter .field {width: 50%}

    .banner-small, .cta-selfcare {width: 100%;}

    .teaser .thumb {max-height: 140px;}
    .teaser .thumb img{min-height: 140px;}

    .linker2 {display:block; width:230px; margin: 0 auto;}

    #video-popup {width: 86%; max-height: 330px;}
    .month-filter .field {width: 100%;}
    .month-filter .field + .field {margin-left: 0;}

    .cta-support-wrap {width: 47%;}

    .faq-cat-div, .support-div {float: none; padding: 0; width: auto; border: 0;}
    .cta-selfcare2 {max-width: 260px; margin: 0 auto;}
    .ctrl-col {width: 60%;}
    .ctrl-col + .ctrl-col {margin-left: 0;}

    .spot-image {
    /* opacity: 0; */
    position: absolute;
    width: 100%;
    min-width: 700px!important;
    height: 457px;
    background-color: #414042;
    background-position: 54% 22px !important;
    background-size: cover;
}
.sm-list ul{margin: 0em 9.4em!important;}
.sm-list li {padding: 0px 24px; width: 75px;}
}

@media only screen and (max-width: 480px) {
/* jerome start */

    .grid.faq-links .record:hover{opacity: .8;}
    .grid.faq-links .record.mobile-plans .title:before,
    .grid.faq-links .record.devices .title:before,
    .grid.faq-links .record.services .title:before{
        width: 35px;
        height: 30px;
        background-size: 80%;
        opacity: .7;
    }
    .grid.faq-links .record.internet .title:before {font-size: 35px;}

    .locator-intro {margin: 0 2%; display: none;}

    #video-popup {width: 90%; max-height: 300px;}

    .spotlight-wrap, .spotlight, .spotlight .wrap-inner, .spot-image { min-height: 310px; height: 310px;}
    .spotlight .spot-cta, .spotlight .shortdesc {display: none;}

    .sm-list ul {margin: 0em 3.9em!important;}
    .sm-list li {padding: 0px 33px; width: 60px !important;}

    .related-content li h5+p {display: none;}
    .intro2-centered {text-align: center;padding-left: 15px; padding-right: 15px; padding-top: 10px;}
    .intro2-centered h3, .intro2-centered p {width: 100%; margin-left: 0; margin-right: 0;}
    .intro2-centered h3 {font-size: 20px;}
    .intro-centered blockquote {font-size: 30px; margin: 0 15px; text-indent: 25px;}
    .intro-centered blockquote:before {background-size: 18px; margin: -8px 0 0 -25px;}
    .intro-centered h3.redtag {margin: 10px 0 10px 15px;}
    .intro-centered p {margin: 5px 15px;}
    .teaser-2col .box, .teaser-2col .box:nth-child(even) {float: none; width: 100%; padding: 7px;}

    .feature-media-wrap {height: 210px;}
    .feature-list li { max-width: 100%;}

    .our-vision-wrap .briefs-wrap .brief {height: auto;min-height: 180px;}
    .page-copy .brief {width: 95%; float: none; margin: 0 auto 10px; padding: 5px;}
    .our-vision-wrap .attribs {padding-top: 5px; top: -22px;}
    .featured2 .keyimage {width: 90%; max-height: 110px;}
    .featured2 .keyimage img {height: auto; max-height: 100%; width: auto; min-width: 100%; max-width: 100%;}
    .featured2 ul {top: 0;}
    .featured2 li {float: none; width: 90%; text-align: left;}
    .featured2 li h4 { padding-bottom: 5px;}

    .util-wrap {float: none; width: 100%; margin: 0 auto 10px;}
    .cta-selfcare {width: 100%; margin-bottom: 10px; }
    .util-wrap .cta-selfcare {padding-left: 57px}
    .cta-selfcare h3 {margin: 0; font-size: 18px;}
    .cta-selfcare h3:before {font-size: 40px; top: 4px; left: -45px;}
    .banner-small {width: 100%;}
    .banner-small img{position: relative; margin-top: 0;top: -20px;}
           
        .spot-image {
    /* opacity: 0; */
    position: absolute;
    width: 100%;
    min-width: 652px;
    height: 457px;
    background-color: #414042;
    background-position: 50% 6px !important;
    background-size: cover;
    right:-94px !important;
}

    .content-wrap {margin: 0;}
    .panel {margin: 0 5px 10px; min-width: 310px;}
    .panel-tabs > .tab {font-size: 14px; line-height: 1.8em;}

    .sm-footer-wrap h3, .market-country h3 {font-size: 15px;}
    .minimap-collapse {
        top:-5px;
        -webkit-transform: scale(.75);
        -moz-transform:    scale(.75);
        -ms-transform:     scale(.75);
        -o-transform:      scale(.75);
        transform:         scale(.75);
    }
    .minimap-expand {top: -40px;}
    .sm-list li span {font-size: 10px;}
        .socialcounts {
          font-size: 10px!important;
         }


    .news-search-wrap {width: 89%; padding: 10px;}

    .carousel1 .themask {height: 250px;}
    .carousel1 li {padding: 5px;}
    .carousel1 h5 {font-size: 16px;}

    .news-list2 .news-item h4, .news-list2 .news-item .dateline, .news-item .summary, .news-item .detail, 
    .news-list2 .news-item .more, .news-list2 .news-item .social-wrap2 {margin-left: 3%; margin-right: 2%;}
    .news-list2 .news-item .keyimage {padding: 5px;}

    .mobile-teaser .caption {display: block; padding: 40px 0 20px; margin: 0 auto;}
    .mobile-teaser p {display: none;}

    .text-wrap {left: 10px; bottom: 10px; width: 270px;}

    .timeline-wrap .direction .caption {width: 50%; margin: 20px 0 10px;}
    .timeline-wrap .direction p {width: 97%; line-height: 1.1em;}
    .timeline-wrap .direction .symbol p {width: 80%; margin: 20px auto 10px;}

    .timeline-wrap .index {
        width: 140%;
        -webkit-transform: scale(.7);
        -webkit-transform-origin: 0 0;
    }
    .timeline-wrap .close {
        -webkit-transform: scale(.7);
        -webkit-transform-origin: top right;
    }
    .timeline-wrap .direction {padding-top: 110px;}
    .text-wrap .btn-tweet {
        width: 35px;
        height: 35px;
        top:-10px;
        right: -8px;
    }
    .text-wrap .btn-tweet:before {
        font-size: 32px;
    }

    .media-item {width: 49%;}
    .media-item:nth-child(3n) {margin-right: 1%;}
    .media-item:nth-child(2n) {margin-right: 0;}

    .block-featured-news2 .carousel1 .themask,
    .media-corner-wrap .carousel1 .themask {max-height: 340px; height: 340px;}

    .block-media-corner .media-filter {width:99.5%; height: auto; min-height: 130px;padding: 5px;}
    .media-filter .career-search-form .field.field-1,
    .media-filter .career-search-form .field.field-2 {width: 100%; margin: 0 0 5px;}
    .media-filter .custom-search {float: left; width: 85%; margin-right: 3px;}
    .media-filter .custom-search input { width: 100%; margin: 0 0 5px;}
    .media-filter .custom-search:before {top: 8px; left: 5px;}  
    .media-filter .custom-btn-search {float: left; width: 25%;}
    .media-filter .custom-btn-search input {width: 100%; text-indent: 20px;}
    .media-filter .custom-btn-search:before {top: 13px;}

    .product-viewer {height: 600px; padding-top: 40px;}
    .product-viewer .viewer {position: relative;}
    .product-viewer .viewer img {max-width: 250px; position: absolute; bottom: 20px; left: 0; right: 0;}
    .product-viewer .find-store {position: absolute; left: 5px; top: 20px;}
    .product-viewer .thumb-list{
        position: static;
        width: 130%;
        -webkit-transform: scale(.75);
        -moz-transform:    scale(.75);
        -ms-transform:     scale(.75);
        -o-transform:      scale(.75);
        transform:         scale(.75);
        -webkit-transform-origin: 0 0;
        -moz-transform-origin:    0 0;
        -ms-transform-origin:     0 0;
        -o-transform-origin:      0 0;
        transform-origin:         0 0;
    }

    .other-plan-list li { position:relative; min-height: 146px; padding: 5px; padding-left: 130px; line-height: 1em;}
    .other-plan-list li .thumb {max-width: 115px; max-height: 115px; position: absolute; left: 5px; top: 5px;}
    .other-plan-list li .thumb img {width: auto; margin-left: -25%;}

    .page-content-wrapper {padding-left: 3%!important; padding-right: 3%!important;}

    .help-util .summary > p {margin-left: 10%; margin-right: 10%;}

    .billing-plans .carousel-list li .thumb img {min-height: 156px;}

    /*.apply-here {height:240px;}*/

    .check-link {margin-left: 12px;}

    .block-featured-news {margin: 0 3%; padding-top: 0;}
    .carousel1 .summary {margin-top: -50px;}

    .youtube-block.social-wall-block ul, .youtube-block.social-wall-block ul.even {margin-left: 10px;}

    .tabs1-tabs {display: none;}
    .tabs1-panel {position: relative; display: block; overflow: hidden; border-radius: 0; padding-left: 3%; padding-right: 3%;}
    .tabs1-collapse {height: 0; min-height: 0;}
    .tabs1-panel.active {height: auto; min-height: 400px;}
    .tabs1-panel + .tabs1-panel {border-top: #fff solid 1px;}
    .tabs1-panel div[class^="block-"] {padding-top: 20px;}
    .tabs1-panel div[class^="block-"] h4 {display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 10px 20px; background: #414042; color: #fff; cursor: pointer; height: 45px; border-radius: 4px;
        -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing:border-box; ms-box-sizing:border-box;}
    .tabs1-panel div[class^="block-"] h4:hover {background: #555;}
    .tabs1-panel.active div[class^="block-"] {padding-top: 30px;}
    .tabs1-panel.active div[class^="block-"] h4 {background: #555;}
    .tabs1-panel div > h4:after {
        content: "\e63a";
        position: absolute;
        right: 10px;
        top: 10px;
        color: #ccc;
        font-family: 'ooredoo-icon-fonts';
    }
    .tabs1-collapse div > h4:after {
        content: "\e63c";
    }

    .news-list3 .news-item {padding-left: 0;}
    .news-list3 .news-item h4 {padding: 0 0 0;}
    .news-list3 .news-item .dateline {margin: 0;}
    .news-list3 .news-item .keyimage {position: static;float: left;width: 40%;margin: 0 5px 0px 7px;height: auto;}

    .media-center-wrap {padding-top: 15px;}

    .featured-device li .thumb {max-height: 130px;}


/* jerome end */

/* louay start */
    .team-item .img-div{ float:none; width:auto; height:auto;  }
    .team-item .img-div img{ width:100%; }  
    .team-item h3{ width:auto; margin:0 0 15px 0; }
    .team-item .desc{ padding:0 ;}

    .page-job-listing .page-copy{ padding:20px 10px 20px; }
    .page-job-listing h1 { text-align:left; padding:0 20px 10px; font-size:1.5em; line-height: 1.2em; font-weight:normal;text-align: center;}   
    .page-job-listing .result-text{ text-align:center; padding:0; } 
    .page-job-listing hr{ margin:20px 0; }  
        
    .job-listing{ float:none; width:100%; }
    .page-job-listing .filter-menu{ display:block; float:none;z-index: 300; position: fixed; top: 0; left: 100%; width:100%; height: 100%; padding-bottom: 40px;}
    .page-job-listing .filter-menu .inner {height: 100%; overflow: auto;
        -moz-box-sizing:    border-box;
       -webkit-box-sizing: border-box;
        box-sizing:        border-box;
        ms-box-sizing:     border-box;  
    }

    ul.header-list{ border-radius:0; }
    
    .page-team .page-copy{ padding:35px 15px;  }
    .team-item .img-div{ float:none; width:auto; height:auto;  }
    .team-item .img-div img{ width:100%; }  
    .team-item h3{ width:auto; margin:0 0 15px 0; }
    .team-item .desc{ padding:0 ;}

    .desc-row {padding: 10px 4% 30px}

    .page-faq .page-copy{ padding:11px 0 0px 0; margin:0 3% 20px 3%; width:auto; }
    .faq-listing { float: none; width: auto; }
    .most-pop-faq{ display:block; }
    .faq-cat-div{ width:auto; float:none; padding:0 0 20px; border-right:none; border-bottom: #999 solid 1px;}
    .faq-cat-div hr{ display:block; }
    .faq-cat-div h2{ text-align:left; }
    .support-div{ float:none; padding:0;  width:auto; }

    .page-faq h1 {text-align: left; padding-left: 10px; font-weight: 500; line-height: 1.1em; text-align: center;}
    .page-faq .intro-centered {padding: 0 10px 10px;}
    .page-faq .inner .cta-support-wrap {padding-bottom: 30px;}

    .cta-support-wrap{ clear: both; width:100%; float:none; border-top: #444 solid 1px;  padding:18px 0; margin: 0 0 20px; height: 30px;}

    .cta-job-filter, .cta-back {display: block;}

    .page-store-locator .page-copy{ padding: 20px 0 0;  }
    .page-store-locator .intro-centered {margin: 0 20px;}
    .store-filter{ padding:20px; border-radius:0; margin-top: 15px;}
    .ctrl-col{ width:100%; margin:20px 0 0 0; float:none; }
    .ctrl-col.center{ margin:20px 0 0 0; }
    .ctrl-col-sumbit{ margin:0; }
    .search-result{ border-radius:0; }
    .search-result h3{ padding:0 20px; }
    .search-result .address-block a{ position:relative; right:auto; top:0; margin:0; }
    .page-store-locator hr{ display:block;  }


/* louay end */

/* hassan start */
    .tablet{
        display: none;
    }
    .items-list li {
        margin-right:0;
        margin-bottom:10px;
        width: 100%;
    }

    /*.carousel .carousel-list li {
        max-width: 300px !important; 
        height: auto;
        margin: 0 10px 0 0;
    }*/ 


    .page-devices .banner .caption .description{
        display: none;
    }

    .page-devices .selector {padding-bottom: 80px; position: relative;}
    .page-devices .selector .filter {
        position:absolute;
        left: 2%;
        bottom: 10px;
        top: auto;
    }

    .page-devices .banner .caption {
      left: 5%;
      width: 90%;
    }

    .page-devices .device-list li{
        width: 236px;
    }

    .page-devices .device-list {
        -webkit-transform:none;
        -moz-transform:none;
        -ms-transform:none;
        -o-transform:none;
        transform:none;
        overflow: inherit !important;
    }


    /************SUPPORT*******************/

    .page-support .col {
        width: 100% !important;
    }

        
    .form-fields .row .col {
        margin-bottom: 10px;
    }

    .contact-form .form .col .textarea {
        height: 150px;
    }

    .page-support .contacts .social-network {
        float: none;
        margin: 5px auto;
        width: 100%;
    }


    .page-support .contacts .col {
        min-height: inherit;
    }


    .page-support .copy-header {position: absolute;}
    .page-support h1{
        font-size:1.2em;
        border-bottom:solid 1px #E4E5E5;
        width: 100%;
        color: #ed1c24;
        color: #414042; 
        text-align:left;
        height:30px;
        text-indent:20px;
    }
    .faq h1 {color: #ed1c24; border-bottom: 0; margin: 0 0 .5em; text-indent: 0; text-align: center;}

    .block-m{
        width: 100%;
        float: none !important;
        margin: 0 auto 10px;
        display: block !important;
        padding: 15px;
       -moz-box-sizing:    border-box;
       -webkit-box-sizing: border-box;
        box-sizing:        border-box;
        ms-box-sizing:     border-box;  
    }
     
    .block-m-g{
        background: #f1f2f2;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    }

    .page-support .contacts .col.col-2 {
        border-left: 0 none;
    }

    .page-support .contacts .col.col-3 {
        border: 0 none;
        padding:15px;
        margin-bottom: 0;
    }

    .page-support .contacts .col {
        text-align: left;
    }

    .page-support .contacts .col .contact-block {
        padding: 0 5px;
    }

    .page-support .contacts .col .content {
        overflow: hidden;
        padding: 0px 0 0;
    }


    hr {
        margin: 0.5em 0;
    }

    .other-promotions .carousel .carousel-list li {
        margin: 0 0 10px;
        width: 100%;
        max-width: 100% !important;
     }

     .featured-promotions .carousel-mask .carousel li{
        max-width: 278px!important;
     }

     /************ SEARCH *******************/

    #search-form input.submit, #search-form input[type="submit"] {
        position: absolute;
        right: 1%;
        top: 55px;
        width: 20%;
        height: 30px;
        padding: 3px;
        font-size: 18px;
        line-height: 1em;
    }

    #search-form .field-wrapper{
        width: 99%;
    }

    .page-search .search-results .record .thumb{
        clear:both;
        float:none;
        padding-bottom:8px;
    }
    .page-content-wrapper .load-more {margin-left: 0; margin-bottom: 0;}
    /*.page-search .load-more {margin-bottom: 20px;}*/

    .page-support .intro-centered {margin: 0; padding: 0;}
    .faq .intro-centered {padding: 0 0 1.2em;}

    .map-search-wrapper, .map-canvas{
        margin-left: 1.5% ;
        margin-right: 1.5% ;
        width: 97%;
    }

    .map-search-wrapper .caption {
        width: 100%;
    }

    .map-canvas {
        height:200px;
    }

    /************ careers *******************/

    .page-careers .articles .record {width: 100%;}

    .page-careers .articles-2 .record .thumb{
        width: 100%;
        float: none;
        max-height: 200px;
        margin: 0 0 5px 0 ;
    }

    .page-careers .articles .record .info {
        padding: 0 ;
    }

    .page-careers .articles-1 .record .title{
        border-bottom:0;
        margin:0;
    }

    .faq-links {
        background:#f1f2f2;
        padding: 20px;
    }

    .faq-links {
        background:#f1f2f2;
        padding: 20px;
    }

    .grid.faq-links .record {
        background: #FFF;
        border-radius: 5px;
        float: none;
        margin-bottom: 10px;
        margin-right: 0;
        min-height: inherit;
        padding: 10px;
        width: auto;
        border: solid 1px #dddedf;
    }

    .grid.faq-links .record .title {
        border-bottom: 0;
        font-size: 1.2em;
        font-weight: 500;
        padding-bottom: 0;
        text-align: left;
        color: #808285;
        line-height: 30px;
        cursor: pointer;
    }

    .grid.faq-links .record .title:before {
        float: left;
        width: auto;
        font-size: 35px;
        line-height: 30px;
        padding-right: 5px;
        color: #808285;
    }

    .grid.faq-links .record .title:after {
        float: right;
        content: "\e67e";
        font-size: 1.4em;
        line-height:30px;
        font-family: 'ooredoo-icon-fonts';
        color:#ed1c24;
    }

    .grid.faq-links .record .content{
        display: none;
    }

    .block-offers .offer-item {width: 100%;}
    .block-offers .offer-item .keyimage {overflow: hidden; width: 100%; height: auto; float: none; padding-right: 0; padding-bottom: 10px;}
    .block-offers .offer-item .keyimage img {width: 100%;}

}

@media only screen and (max-width: 430px) {

.spot-image{position: absolute; width: 100%; min-width: 652px !important; height: 457px; background-color: #414042; background-position: 500% 6px !important; background-size: cover;}

.sm-list li {padding: 0px 26px; width: 59px !important;}
}


@media only screen and (max-width: 414px) {

.spot-image {
    /* opacity: 0; */
    position: absolute;
    width: 100%;
    min-width: 510px !important;
    height: 457px;
    background-color: #414042;
    background-position: 100% 6px !important;
    background-size: cover;
    right:-96px !important;
}
.sm-list ul{margin: 0em 3.5em!important;}
.sm-list li {padding: 25px 20px; width: 63px;}

.pagination {font-size:11px !important;}
}

@media only screen and (max-width: 376px) {

.spot-image {
    /* opacity: 0; */
    position: absolute;
    width: 100%;
    min-width: 558px!important;
    height: 457px;
    background-color: #414042;
    background-position: 50% 6px !important;
    background-size: cover;}

.sm-list ul {margin: 0em 2.1em !important;}
.sm-list li {padding: 23px 14px; width: 63px !important;}
}

@media only screen and (max-width: 360px) {
    .device-list-cta {margin: 0 10px;}
    .device-list-cta a {margin: 0 10px; float: left; margin-bottom: .5em; margin-left: 0;}
    .main-wrap {padding-top: 0px;}
    .top-nav{display:block;}
    .top-nav2{display: none}
    
    .main-nav-wrap, .main-nav-out, .is-sticky .main-nav-out {height: 45px;}
    .main-nav-wrap {height: 50px;}
    .main-nav-wrap h1 {top: 8px; width: 190px;}
    .main-nav-wrap h1 img, .resp-menu h1 img {width: 190px; height: auto;}
    .resp-menu h1 {height: 45px; }
    .resp-menu h1 img {margin: 8px 0 0 10px;}
    .resp-cta {width: 45px;/* height: 50px;*/}

    .sm-list ul {margin: 0em 1.5em!important;}
    .sm-list li {padding: 23px 13px; width: 63px!important;}

    .advanced-filter .field {width: 100%;}

    .social-wall-wrap {padding: 5px 0 0;}
    .panes2-wrap {margin-top: 5px; width: 92%; height: 460px;}
    .social-wall-block {padding: 0; height: 460px;}
    .social-wall-block h2 {min-height:25px; font-size: 14px;}
    .social-wall-block .scroll {padding: 0;}
    .social-wall-block ul li {margin-left: 40px;}

    .panel-tabs > .tab {padding-left: 58px;}
    .panel-tabs > .tab i {left: 15px;}

    .panel-tabs3 {height: 57px;}
    .panel-tabs3 > .tab { font-size: 12px; padding: 13px 5px 0 5px;}    
    .panel-tabs3 > .tab:first-child {padding-left: 5px;}

    .carousel1 .summary {margin-top: -20px;}

    .page-careers .articles-1 .record  .info .description { display:none; }

    #search-form input.submit, #search-form input[type="submit"] {width: 30%;}

    #video-popup {width: 96%; max-height: 220px;}

    .featured-device{ width:100%; float:none; }
    .featured-device .thumb{ width:100%; }
    .featured-device .thumb img{ width:100%; }
    .featured-device ul {width: 100%;}
    .featured-device li {float: none; width: 100%; padding: 10px 0; line-height: 1.2em; min-height: 50px;}
    .featured-device li + li {width: 100%; border-top: #ccc solid 1px; padding: 10px 0}
    .featured-device li .thumb{width: 115px; float: left; margin: 0 10px 10px 0; max-height: 80px;}
    .featured-device h3+p {border: 0; padding-bottom: .5em;}
    .spot-image { /* opacity: 0; */position: absolute; width: 100%; min-width: 500px; height: 457px; background-color: #414042; background-position:50% 4px!important; background-size: cover; right:-90px !important;}
}

/* mobile styles */
@media only screen and (max-width: 320px) {

    .tagline2 {font-size: 20px; top: 35px; margin-left: 40px;}

    .news-list3 .news-item .keyimage { display: block; width: 97%; float: none; margin: 0 auto 5px;}
    .news-list3 .news-item .dateline {margin:0 3%;}

    .panes2-wrap {width: 92%; height: 410px;}
    .social-wall-block {height: 410px;}

    .promo-list-wrap, .plans-list-wrap, .device-list-wrap, .card-slides-wrap, .panel, .mini-sitemap-wrap, 
    .sm-footer-wrap, .quicklinks-wrap, .quicklinks-wrap .wrap-inner, .spotlight, .copyright-wrap, 
    .main-wrap, .top-nav-wrap, .main-nav-wrap, .wrap-inner3, .wrap-inner {min-width: 310px;}

    .spotlight-wrap, .spotlight, .spotlight .wrap-inner, .spot-image { min-height: 190px; height: 190px;}
    .inner-page .spotlight-wrap, .inner-page .spotlight, .inner-page .spotlight .wrap-inner, .inner-page .spot-image { min-height: 190px; height: 190px;}
    .spotlight .spot-cta, .spotlight .shortdesc {display: none;}
    .spotlight .tagline{
        margin-left: -65px;
        top:30px;
        -webkit-transform: scale(.6);
        -moz-transform:    scale(.6);
        -ms-transform:     scale(.6);
        -o-transform:      scale(.6);
        transform:         scale(.6);
    }
    .spot-image { /* opacity: 0; */position: absolute; width: 100%; min-width: 500px; height: 457px; background-color: #414042; background-position:50% 4px!important; background-size: cover; right:-132px !important;}
    .spotlight .ornament {display: none;}
    .list-index {top: 70px;}
    

    .panel-tabs {top: -40px;}
    .panel-tabs > .tab {font-size: 16px; height: 40px; padding-left:20px;}
    .panel-tabs > .tab i {font-size: 22px; display: none;}
    .panel-tabs > .tab:first-child {padding-left: 45px;}
    .panel-tabs > .tab:first-child i {left: 15px;font-size: 20px; display: block;}

    .pinwall-grid {
        -webkit-transform: scale(.75);
        -moz-transform:    scale(.75);
        -ms-transform:     scale(.75);
        -o-transform:      scale(.75);
        transform:         scale(.75);  
        -webkit-transform-origin: 0 0;
        -moz-transform-origin:    0 0;
        -ms-transform-origin:     0 0;
        -o-transform-origin:      0 0;
        transform-origin:         0 0;  
    }

    .pane {min-height: 415px}
    .pinwall-mask {height: 415px}

    .behind-wrap .panel-service {height: auto; margin-bottom: 50px;}
    .panel-service .wrap-inner3 {min-height: 465px;}

    .card-slides {padding-left: 0;}
    .card-slides h3{text-align: center;}
    .card-slides h3 + p {text-align: center;}
    .card-slides-wrap, .card-slides-mask, .card-slides-carousel {min-height: auto;}
    .card-slides-wrap {padding: 10px; min-height: 440px;}
    .card-slides li {width: 275px;}
    .card-slides li .thumb { float: none; display: block; width: 275px; height: auto; max-height: 180px;}
    .card-slides li .thumb img {margin: 0; max-width: 275px;}
    .card-slides .cta {position: static; margin: 20px 0 15px;}
    .card-slides .cta .share-link {display: none;}

    .help-util{width: 280px; padding: 25px 15px 0px;}
    .help-util li {width: 49.3%; min-height: 175px; margin: 0 0 4px;}
    .help-util li .summary p, .help-util li .summary a {display: none;}
    .help-util h4 {padding: 6px 10px;}

    /*.sm-list ul {margin: 0;}*/
    .sm-list ul {margin: 0em 1.6em!important;}
    .sm-list li {padding: 18px 5px; width: 55px!important;}
    .sm-list li i {width: 40px; height: 40px; font-size: 38px;}
    .sm-list li span {font-size: 10px;}
    .sm-list li span.unit-count {font-size: 12px;}
    

    /*.sm-footer-wrap {min-height: 160px;}*/

    .resp-menu {width: 275px;}

    .panel-tabs3 {height: 57px;}
    .panel-tabs3 > .tab { font-size: 12px; padding: 13px 5px 0 5px;}    
    .panel-tabs3 > .tab:first-child {padding-left: 5px;}

    .promo-list-wrap, .plans-list-wrap{
        padding: 30px 0 45px;
    }
    .promo-list-mask{height: auto; padding-bottom: 30px;}
    .promo-list-wrap {padding-bottom: 0;}
    .promo-list {height: auto;}
    .promo-list li {width: 270px; height: auto; padding-bottom: 20px;}
    .promo-list li .thumb {height: 80px;}
    .device-list-wrap {padding: 15px 0 30px;}
    .device-list-mask {height: 480px;}
    .device-list{
        -webkit-transform: scale(.86);
        -moz-transform:    scale(.86);
        -ms-transform:     scale(.86);
        -o-transform:      scale(.86);
        transform:         scale(.86);
        -webkit-transform-origin: 0 0;
        -moz-transform-origin:    0 0;
        -ms-transform-origin:     0 0;
        -o-transform-origin:      0 0;
        transform-origin:         0 0;
    }
    .pane .find-store, .pane .find-support{
        margin-left: 10px;
    }
    .plans-list li {width: 265px;}

    .back-to-top {top: 5px;}
    .content-wrap {padding-bottom: 20px; margin: 0;}

    .popup-wrap .close-wrap .close {left: 5px; top: 2px;}


/* inner page starts here  */
    .popup-wrap {
        width: 300px;
        min-width: 300px;
        margin: 0 auto;
    }
    .popup-wrap .close-wrap {right: 40px;top: 80px;}
    .is-sticky + .overlay-wrap .close-wrap {top: 50px;}
    .popup-content,
    .feature-media-wrap{
        width: 100%;
        min-width: 300px;
    }

    .feature-media-wrap {height: 140px;}
    .feature-mask {height: 100%;}
    .feature-carousel {overflow: auto;}
    .feature-list li {max-width: 305px;}
    .feature-list li .video:after{font-size: 40px;margin: -30px 0 0 -20px;color: #fff;}
    .block-offers .offer-item {width: 100%;}
    .block-offers .offer-item .keyimage {overflow: hidden; width: 100%; height: auto; float: none; padding-right: 0; padding-bottom: 10px;}
    .block-offers .offer-item .keyimage img {width: 100%;}
    
    .behind-wrap .sidebar-wrap {border-radius: 0;}

    .teaser .thumb{max-height: 160px;}

    .mobile-teaser {min-height: 180px;}
    .mobile-teaser .caption {width: 130px; margin: 0 auto; padding: 10px 0 0;}
    .mobile-teaser p {display: none;}

    .block-featured-news2 .carousel1 .themask,
    .media-corner-wrap .carousel1 .themask {max-height: 360px; height: 360px;}
    .media-item {width: 100%; margin: 0 0 10px;}
    .media-item:nth-child(3n) {margin-right: 0;}
    .media-item:nth-child(2n) {margin-right: 0;}
    .media-filter .custom-search {width: 82%;}
    /*.media-filter .custom-btn-search input {width: 16%;}*/
    .media-filter .custom-btn-search {width: 35%;}
    .media-filter .custom-btn-search:before {left: 10px;cursor: pointer;}

    #search-form input.submit, #search-form input[type="submit"] {right: 0; font-size: 16px;}


/* Louay css Start */
    
    .copy-header{ border-radius:0;}
    /*.panel{ margin:0 0 10px 0; }*/
    #terms-conditions-page{ padding:0 20px 20px; }
    #terms-conditions-page hr{ display:none; }
    #support-block{ left:15px; margin:0 -145px 0 0 ; top:auto; bottom:-80px; background:none; width:290px; height:55px; }

    .popup-wrap{ width: auto; min-width: 1px ; max-width: 95%; background:none; margin:0 auto; }
    .popup-content { width: 100%; background:none;  }
    .feature-media-wrap { width: 100%;  }
    .related-info{ display:none; }
    .content-pane-wrap { float: none; width: 100%; background:#fff; padding:5% 3%;  }

    .social-wrap2 a{padding: 3px 10px;}
    .related-info{ display:none; }
    .related-content .thumb+.summary p.desc{ display:none; }
    .related-content h3+p , .featured-device h3+p{ border-bottom:1px solid #4a4a4a; }
    

    .page-back-section{ display:block; background:#FFF; padding:5%; height: 45px;}
    .page-back-section .back-to-top{ margin:0 auto; }

    .page-team .page-copy {margin-top: 0;}
    .page-team h1 {text-align: left; font-weight: 500; line-height: 1em;}
    
/* Louay css End */

    .page-devices .device-list li{ width: 220px; height: 390px;}
    .page-devices .device-list li .thumb {min-height: 210px;}
    .page-devices .device-list li .thumb img {max-width: 150px;}
    .page-devices .slider-ctrl {display: none!important;}

    .padded {padding-left: 8px; padding-right: 8px;}

    .tabs1-wrap {padding-top: 20px;}


    .end3{}

}


@media only screen and (min-width: 35em) {

}
@charset "utf-8";
/* CSS Document */