/*--------------------------------------------------------*/
/* GRID FOR LARGE DESKTOP SCREENS from 1200px to 1024px---*/
/*--------------------------------------------------------*/

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

    .row { padding: 0 1%; }
    body { font-size: 18px; }
    header {
        height:90px;
    }
    .logos {
        float:left;
        margin-left:2%;
    }
    .nav {
        float:right;
        margin-right:2%;
    }
    .top-menu {
        float:right;
        font-size:120%;
    }
    .main {padding-right:0;}
    .logo-cameras{
        height:50px;
        line-height: 1.5em;
        float:right;
    }
    .logo-rishon{
        width:auto;
        height:50px;
        float:none;
    }
    .logo-bitachon{
        width:auto;
        height:50px;
        float:none;
    }
    h1 {
        font-size:120%;
    }
    .logo-cameras-nav{
        width:auto;
        height:60px;
        position:static;
        right:20px;
    }
    .logo-rishon-nav{
        width:auto;
        height:60px;
    }
    .logo-bitachon-nav{
        width:auto;
        height:70px;
    }
    .logo-bitachon-toogle{
        display:none;
        /*width:auto;
        height:80px;*/
    }
    

}
/*-------------------------------------------------------------*/
/* GRID FOR LARGE TABLET SCREENS TO SMALL DESKTOP from 1024px to 1152px */
/*-------------------------------------------------------------*/

@media only screen and (max-width: 1151px) {
    
    header {
        height:90px;
    }
    .top-menu {
        font-size:110%;
    }
    .top-menu > li {
        padding: 0 3px;
    }
    .main {padding-right:0;}
    h1 {
        font-size:110%;
    }
    .logo-cameras-nav{
        width:auto;
        height:55px;/**/
        position:static;
        right:20px;
    }
    .logo-rishon-nav{
        width:auto;
        height:50px;/**/
    }
    .logo-bitachon-nav{
        width:auto;
        height:60px;/**/
    }
    .logo-bitachon-toogle{
        display:none;
    }
    

}
/*---------------------------------------------------*/
/* GRID FOR LARGE TABLET SCREENS from 992px to 1024px*/
/*---------------------------------------------------*/
@media only screen and (max-width: 1023px) {
    body { font-size: 18px; }
    section { padding: 0; } 
    .top-menu {
        font-size:100%;
    }
    .top-menu > li {
        padding: 0 1px;
    }
    .footer-nav {
        float:none;
        font-size:90%;
    }
    .logo-cameras {
        display:inline-block;
        width:auto;
        height:50px;
        line-height: 1.5em;
    }
    .logo-rishon{
        width:auto;
        height:50px;
        line-height: 1.5em;
        float:left;
    }
    .logo-bitachon{
        width:auto;
        height:50px;
        line-height: 1.5em;
        float:left;
    }
    .overlay-play-btn {
        top: -15px;
       }
}
/*-------------------------------------------------------------*/
/* GRID FOR LARGE MOBILE TO TABLET SCREENS from 768px to 992px */
/*-------------------------------------------------------------*/

@media only screen and (max-width: 991px) {
    
    .btn_accessibility {
        top:auto !important;
        bottom:50px !important;
    }
    header {
        height:80px;
    }
    h1{
        font-size:110%;
    }
    .maincopy, .relatedcopy, .sidecopy {
        font-size:110%;
    }
     
    header{
        padding-top:10px;
        border-bottom: 1px solid rgba(0,0,0,0.20);
        height:80px;
        position:relative;
        z-index:999;
        width:100%;
        margin:0 auto;
        max-width:991px;
    }
    .logos {
        float:left;
        margin-left:2%;
    }
    .logo-cameras-mobile{
        width:60px;
    }
    .overlay-play-btn-sm {
        width:80%;
       }
    /*=================================*/
    /* RESPONSIVE MENU STYLES          */
    /*=================================*/
        
    /*Note: change at the max-width ({resizeWidth: "992px" }), must change it in script.js $.fn.TopMenu function and index.html script*/

    @media screen and (max-width: 991px) {
     .icon-toggle {
        font-size:48px;
    }
    .nav {
        float:right;
    }
    
    #menu-btn, .menu-toggle {
        display:block !important;
    }   
    #nav{
       display:block !important;
       position: absolute;
       top: 0;
       /*right: 0;*/
       z-index:999;
       width: 100%;
    }
        
     #menu-btn {
        cursor: pointer;
        margin: 0;
        height: 50px;
        width:auto;
        position: relative;
        z-index: 999;
        top:10px;
        right:2%;
        }
    .top-menu {
        float: right;
        width:60%;
        min-width: 300px;
        position:relative;
        top:9px;
        font-size:100%;
        padding-top: 0;
        display:none;
        -webkit-box-shadow: 0px 6px 20px -4px rgba(0,0,0,0.46);
        -moz-box-shadow: 0px 6px 20px -4px rgba(0,0,0,0.46);
        box-shadow: 0px 6px 20px -4px rgba(0,0,0,0.46);
    }
    li img.logo-cameras-nav {
        display:none;
    }
    .top-menu li ul.sub-menu {
        background: #ffffff;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }  
    /*ul[data-menu-style="vertical"] , ul[data-menu-style="accordion"],
    ul[data-menu-style="vertical"] li ul.sub-menu {
        width: 100% !important;
    } */
    .top-menu > li {
        background: #fff !important;
        border-bottom: 1px solid #cccccc;
        float: none;
    } 
    .top-menu > li > a {
        display: block;
        position: relative;
        margin: 0;
        border: 0px;
        /*padding: 20px 5px 5px 0;*/
        height:50px;
        text-decoration: none;
        font-size: 110%;
        font-weight: 400;
        color: #6D6E71;
        text-align: right;
    }
    .top-menu li a:hover {
         background: #f16623 !important;
         color: #fff !important;
    }
    .top-menu > li:first-child {
        border-top: 2px transparent;
    }    
    .top-menu > li > a i {
        padding-right: 20px;
        color: #f16623;
    }
    .top-menu li ul.sub-menu > li {
        width: 100%;
    }
    .top-menu li ul.sub-menu li ul.sub-menu li a
        {
        padding-left: 30px;
    }  
    .top-menu li ul.sub-menu li ul.sub-menu li ul.sub-menu li a 
       {
        padding-left: 50px;
    }  
    .top-menu > li > ul.sub-menu {
        position: static;
    }
    .top-menu > li > ul.sub-menu > li ul.sub-menu {
        position: static;
    }
    .top-menu > li > ul.sub-menu > li ul.sub-menu > li ul.sub-menu {
        position: static;
    }
    .top-menu li ul.sub-menu li.menu-active > a > .arrow:before {
        content: "\f107" !important;
    }
    .top-menu > li > a > .arrow:after {
        display: inline;
        font-family: FontAwesome;
        height: auto;
        content: "\f107";
        font-weight: 300;
        text-shadow: none;
        display: inline-block;
        float: left;
        padding: 0 0 0 15px;
        margin-top: -4px;
    }
    /* Menu Toggle Btn               */
    /*===============================*/

    .menu-toggle {
        display: block;
        float: left;
        width: 100%;
    }
    .menu-toggle h3 {
        float: left;
        color: #FFF;
        padding: 0px 10px;
        font-weight: 600;
        font-size: 16px;
    }
    .menu-toggle .icon-bar {
        display: none !important;
        width: 18px;
        height: 2px;
        background-color: #000 !important;
        -webkit-border-radius: 1px;
        -moz-border-radius: 1px;
        border-radius: 1px;
        -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
        -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
        margin: 3px;
    }
    .menu-toggle .icon-bar:hover {
        background-color: #000 !important;
    }
    .menu-toggle #menu-btn {
        float: right;
        cursor: pointer;
        margin: 10px;
        height: 50px;
        width:auto;
    }
    .logo-cameras-mobile {
        display:inline-block;
        width:60px;
        height:auto;
    }

    /*.hide-menu {
        display: none;
    }*/

}

    /*body { font-size: 16px; }*/
    .footer-nav {
        float:none;
        font-size:100%;
    }
    .logo-cameras-sm {
        display:inline-block;
        float:none;
        width:auto;
        height:50px;
        line-height: 1.5em;
    }
    .logo-cameras {
        display:none;
    }
    .logo-rishon{
        width:auto;
        height:50px;
        line-height: 1.5em;
        float:none;
    }
    .logo-bitachon{
        width:auto;
        height:50px;
        line-height: 1.5em;
        float:none;
    }
    .overlay-play-btn {
        top: 0px;
       }
    .relatedposter {
        max-width:none;
    }
    .sidemenu {
        padding-top:20px;
        margin-top:10px;
        /*border-top: 2px solid #f16623;*/
    }
    .sideposter {
        padding:1% 0;
        width:100%;
        max-width:250px;
    }

    
    /*===================================*/

}
/* Small phones to small tablets: from 768px to 866px */
@media only screen and (max-width: 866px) {
   .sidemenu {
        padding-top:20px;
        margin-top:10px;
        /*border-top: 2px solid #f16623;*/
    }
    .overlay-play-btn {
        top: 15px;
       }
    .relatedbox img.overlay-play-btn {
       top: -10px;
       left: 15px;
    }
    .sideposter {
        padding:0 0;
        width:100%;
        max-width:330px;
    }

}
/*---------------------------------------------------------------*/
/* GRID FOR MOBILE SCREENS TO SMALL TABLETS from 481px to 768p---*/
/*---------------------------------------------------------------*/
@media only screen and (max-width: 767px) {
    /*body { font-size: 16px; }*/
    section { padding: 0; } /*section { padding: 30px 0; }*/
    ul.footer-nav {
        float:none;
        font-size:100%;
    }
    .logo-cameras-sm {
        display:inline-block;
        width:auto;
        height:40px;
        line-height: 1em;
    }
    .logo-cameras {
        display:none;
    }
    .logo-rishon{
        width:auto;
        height:40px;
        line-height: 1em;
        float:none;
    }
    .logo-bitachon{
        width:auto;
        height:40px;
        line-height: 1em;
        float:none;
    }
    .overlay-play-btn {
        top: -10px;
        width:90%;
       }
    .sideposter {
        padding:0 0;
        width:100%;
        max-width:200px;
    }
    .gmap {
        display:none;
    }
    .row .related {
        display:none;
    }
   .relatedcopy {
        font-size:90%;
    }
    
}

@media only screen and (max-width: 639px) {
    /*body { font-size: 16px; }*/
    section { padding: 0; } /*section { padding: 30px 0; }*/
    ul.footer-nav {
        float:none;
        font-size:90%;
    }
    h1 {
        font-size:110%;
    }
   .relatedbox img.overlay-play-btn {
       top: -20px;
       width: 85%;
    }
 
}
/* Small phones: from 0 to 520px */
@media only screen and (max-width : 520px ){
  .relatedbox img.overlay-play-btn {
       top: -20px;
       width: 80%;
      }
 }
/*-------------------------------*/
/* GRID FOR MOBILE SCREENS ---*/
/*-------------------------------*/
    
/* Small phones: from 0 to 480px */
@media only screen and (max-width : 480px ){
    section { padding: 0; } 
    
    h1 {
        font-size:100%;
    }
    
   .overlay-play-btn {
        top: 15px;
        width:100%;
       }
    .sideposter {
        padding:0 0;
        width:100%;
        max-width:300px;
    }
      .relatedbox img.overlay-play-btn {
       top: -10px;
       left:0px;
       width: 90%;
      }
 }
/* Small phones: from 0 to 450px */
@media only screen and (max-width : 450px ){
      .relatedbox img.overlay-play-btn {
       top: -20px;
       left:0px;
       width: 90%;
      }
 }
/* Small phones: from 0 to 360px */
@media only screen and (max-width : 380px ){
      .relatedbox img.overlay-play-btn {
       top: -20px;
       left:0px;
       width: 80%;
      }
 }
/* Small phones: from 0 to 360px */
@media only screen and (max-width : 360px ){
      .relatedbox img.overlay-play-btn {
       top: 0px;
       left:0px;
       width: 100%;
      }
    .overlay-play-btn {
        top: 5px;
        width:100%;
       }
 }