/*sharing*/

@media only screen and (min-width:767px) and (max-width: 1018px) {
    .info .shares .showhide {
    }

    .info .shares {
        width: 250px;
    }

    #facebooklike {
        display: none;
    }
     .forecast-hour .row .pressure {
        /*width: 70px;*/
    }
    .forecast-hour .row .precipitation {
        /*width: 75px;*/
    }
      .forecast-hour .row .timecell .hour { font-size: 14px;}
      .forecast-hour .row .timecell .date { font-size: 10px; }
      .forecast-hour .row .temperature { font-size: 14px; line-height: 16px; padding: 0px 0px 0px 15px;}
      .forecast-hour .row .temp-label { font-size: 14px;}
      .forecast-hour .row .icon {width: 20px;}
      .sunrise, .sunset {width: 80px; background-size:20px 40px;   }
     .forecast-hour .row .iconbig img {width:50px; height:auto;}
     .forecast-hour .row.forecast-today-container .forecast-today-col h4 {font-size:14px; font-weight:bold;}
    }
@media only screen and (min-width:501px) and (max-width: 678px) {

    .info .shares .showhide {
    }

    .info .shares {
        width: 250px;
    }

    #facebooklike {
        display: none;
    }
}
@media only screen and (min-width:767px) and (max-width: 1050px) {
    .nav .wide {
        display: none;
    }

    .nav .widemenu {
        display: block;
        border: none;
        padding: 15px 15px 15px 15px;
        background-color: transparent;
    }

    #menusmall {
        position: fixed;
        top: 51px;
        left: 0px;
        background-color: white;
        width: 100%;
        display: none;
    }

    
}
@media only screen and (min-width:1050px), (max-width:767px) {
    .nav .widemenu {
        display: none !important;
    }

    #menusmall {
        display: none !important;
    }
}
/*Mobiele button kleiner dan 1024px*/
@media (max-width:1024px) {


    .navbar-fixed-top, .navbar-fixed-top > * {
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    .info .shares .showhide {
        display: none;
    }

    .info .shares {
        display: none;
    }



    .info .time .logo {
        position: relative;
        width: 100%;
        text-align: left;
        height: 30px;
        padding-left: 0;
        left: -0px;
        top: -4px;
    }

    .info .time {
        padding-right: 25px;
        top: -10px;
        right: 0px;
        color: #fff;
        font-size: 26px;
        width: auto;
    }

    .iabuttons a {
        width: 38px;
        height: 35px;
    }

    .iabuttons .pan {
        display: inline-block;
        width: 35px;
        height: 35px;
        background-image: url(/content/images/small/mylocationbutton.png);
        opacity: 0.7;
        float: left;
    }

        .iabuttons .pan a {
            width: 0px !important;
            height: 0px !important;
            left: -1px !important;
            top: -1px !important;
        }

        .iabuttons .pan .panlocate {
            left: 0px !important;
            top: 0px !important;
            height: 35px !important;
            width: 35px !important;
        }

    .iabuttons #zoom {
        background: url(/content/images/small/zoombuttons.png) no-repeat;
        background-position-x: 1px;
         background-position: 1px 0;
    }

        .iabuttons #zoom.level1 {
            background-position-x: 1px;
             background-position: 1px 0;
        }

        .iabuttons #zoom.level2 {
            background-position-x: -52px;
             background-position: -52px 0;
        }

        .iabuttons #zoom.level3 {
            background-position-x: -104px;
             background-position: -104px 0;
        }

        .iabuttons #zoom.level4 {
            background-position-x: -152px;
             background-position: -152px 0;
        }

    .iabuttons #playpause {
        background: url(/content/images/small/playpausebutton.png) no-repeat;
        background-position-x: 1px;
         background-position: 1px 0;
    }

        .iabuttons #playpause.playing {
            background-position-x: -53px;
             background-position: -53px 0;
        }

        .iabuttons #playpause.pausing {
            background-position-x: 1px;
             background-position: 1px 0;
        }

    .iabuttons #speedindicator {
        background: url(/content/images/small/speedbutton.png) no-repeat;
        background-position-x: 0px;
         background-position: 0px 0;
    }

        .iabuttons #speedindicator.speed1 {
            background-position-x: 0px;
             background-position: 0px 0;
        }

        .iabuttons #speedindicator.speed2 {
            background-position-x: -45px;
             background-position: -45px 0;
        }

        .iabuttons #speedindicator.speed3 {
            background-position-x: -91px;
             background-position: -91px 0;
        }

        .iabuttons #speedindicator.speed4 {
            background-position-x: -136px;
             background-position: -136px 0;
        }
    .control .previous {
    width:38px;}

    .info .time .control {
        display: inline-block;
        width: 5px;
        height: 35px;
        visibility: hidden;
        border: none;
        cursor: pointer;
        text-decoration: none;
        margin: 0 -10px 0px -2px;
        background: url(/content/images/small/backforwardbutton.png) no-repeat;
        opacity: 0.8;
        position: relative;
        top: 10px;
    }

    .info .time .previous {
        background-position: 0px bottom;
    }

    .info .time .next {
        background-position: -45px bottom;
    }

    .info .time .logo {
        position: relative;
        width: 100%;
        text-align: left;
        height: 30px;
        padding-left: 0;
        left: -0px;
    }

        .info .time .logo img {
            top: -10px;
        }

    .box-center {
        padding: 15px;
        top: -30px;
    }

    #imagelabel {
        font-size: 18px;
        top: -25px;
        z-index: 5;
    }

    #imagedescription {
        /*padding: 6px;
        margin-top: -38px;
        margin-left: 0px;*/
        display: none;
    }

    /* socialmedia*/
    #socialmedia {
        /*top:-24px;*/
    }

    /*mobile pan buttons */
    .panMobile a {
        display: block;
        /*background-color: transparent;*/
        position: absolute;
        z-index: 1;
        background-size:30px 30px;
        background-repeat:no-repeat;
        opacity: 0.5; filter: alpha(opacity=20);
    }

    #panUpMob {
        background-image: url("/Content/images/panUp.png") ;
        background-position: center bottom;
    }
     #panDownMob {
        background-image: url("/Content/images/panDown.png") ;
        background-position: center center;
     }
      #panLeftMob {
        background-image: url("/Content/images/panRight.png") ;
        background-position: left center;
    }
    #panRightMob {
        background-image: url("/Content/images/panLeft.png");
        background-position: right center;
    }

   .panMobile a:hover, panhoverActive {
            cursor: pointer;
            border: none;
            border-color: #e8e8e8;
            opacity: 0.6; filter: alpha(opacity=20);
            background-repeat:no-repeat;
            background-position: center center;
          
        }


    #panUpMob:hover, panUphoverActive {
        background-image: url("/Content/images/panUp.png") ;
           background-size:70px 70px;
    }
     #panDownMob:hover, panDownhoverActive {
        background-image: url("/Content/images/panDown.png") ;
           background-size:70px 70px;
    }
      #panLeftMob:hover, panLefthoverActive {
        background-image: url("/Content/images/panRight.png") ;
           background-size:70px 70px;
    }

    #panRightMob:hover, panRighthoverActive {
        background-image: url("/Content/images/panLeft.png");
          background-size:70px 70px;
    }

    #imgreload {
        width:1365px;
        height:991px;

    }

    #controlpanel{
        width:192px;
        margin-top:40px;        
    }

    #controlpanel.cp-collapse{
        width:38px;
        margin-top:40px;        
    }

    #cp-label {
    display:none;
    }
    .cp-collapse {
        font-size:8px;    
    }

  .timelabel-small {
    font-size: 15px;
line-height: 32px;
display: inline-block;
width: 166px;
margin: 10px 10px 10px -10px;
padding: 0px;
    }

  .zoekplaats {
        width: 10em;
    }

}
@media (max-width:767px) {
    .img {
        float: none;
        margin: 0 auto;
        height: 280px;
    }

    .info {
        margin-left: 0px;
    }

    .navbar-collapse .nav > .divider-vertical {
        display: none;
    }

    .navbar-collapse {
        max-height: 540px;
    }

    .navbar .pull-right {
        float: left !important;
        width: 105%;
    }

    .iabuttons {
        margin-top: 10px;
    }

    .adv {
        text-align: center;
    }

    #aside {
        display: none;
    }

    
    .nextRefspotContainer {
       left: 90%; /* 293px;*/
       top: -78px;
       width: 50px;

    }
    
    .nextRefspot {
    padding:45px 5px 45px 5px;
    
}

    .buttonNextLocation {
        height:50px;
    
    }
    h2 {
     background: #e8e8e8;
     border: 1px solid #ddd;
     box-shadow: 0 6px 7px -4px;
     padding-left:5px;
    }

    .forecastChartContainer {
        height:auto;
    }

    .forecastChartYlabel {
        position: relative;
        font-size: 10px;
        top: -64px;
        left: -49px;
        width: 100px;
        /*top: -125px;
        left: -54px;*/
    }

    .wideonly {
        display: none!important;
    }

    #resultset {
        margin-left: -50px;
        width:380px;
    }
     #resultset #map img{
        width:0px;height:0px;
    }

      .zoekplaats {
        width: 9em;
    }
    .zoekplaats .name { 
        width: 105px;
    }
    .zoekplaats .country {
        width: 30px;
        display: inline-block;
    }
    .zoekplaats #locationlist .record, .zoekplaats #locationlist .record span {
        height: 24px;
    }

}
@media (max-width:676px) {

    .table_right > table > thead > tr > th.cityname.hidden-lg.hidden-md.hidden-xs.colMedium,
    .table_right > table > tbody > tr > td.cityname.hidden-lg.hidden-md.hidden-xs.colMedium {
        display: table-cell !important;
        margin-right: -20px;
        height: 57px;
    }

    .table_right > table > thead > tr > th.cityname.hidden-lg.hidden-md.hidden-xs.colMedium {
        vertical-align: bottom;
        /*border-bottom: 2px;*/
    }

    .table_left > table > thead > tr > th.timeleft,
    .table_left > table > tbody > tr > td.timeleft {
        display: table-cell !important;
        /*margin-right: -20px;*/
        /*height: 57px;*/
    }

    .table_left > table > thead > tr > th.timeleft {
        vertical-align: bottom;
        border-bottom: 2px;
    }

    .forecast-hour .row .timecell .hour {
        font-size: 14px;
    }

    .forecast-hour .row .timecell .date {
        font-size: 10px;
    }

    .forecast-hour .row .temperature {
        font-size: 14px;
        line-height: 16px;
       padding: 0px 0px 0px 15px;
    }

    .forecast-hour .row .temp-label {
        font-size: 14px;
    }

    .forecast-hour .row .icon {
        width: 20px;
    }

    .forecast-content {
        padding-right: 0px;
        padding-left: 0px;
    }

    .forecast-topmenu {
        padding: 0px;
        font-size: 10px;
    }
}
    @media (max-width:1160px) {
        .tableSixdays img {
            width: 35px;
            height: 35px;
        }
    }

    @media (max-width:1040px) {
        .tableSixdays img {
            width: 30px;
            height: 30px;
        }
    }

    @media (min-width:1200px) and (max-width: 1400px) {
        .tabletimg {
            height: 100px !important;
        }
    }

    @media (min-width:990px) and (max-width: 1199px) {
        .tabletimg {
            height: 80px !important;
        }

        .mobielimg {
            height: 200px !important;
        }
        /*.forecast-hour .iconbig img { width: 60px;}*/
        .forecast-hour .iconbig {
            height: auto;
        }

        .forecast-today-col {
            /*width: 100px;*/
        }
    }

    @media (min-width:767px) and (max-width: 886px) {
        .tabletimg {
            height: 100px !important;
        }
    }

    @media (max-width:1560px) {

        .weathernow img {
            width: 60px;
            margin-top: -25px;
            margin-left: -30px;
        }

        .forecast-today-col {
            /*width: 170px;*/
        }
    }

    @media(max-width:1200px) {
    #map_gfsforecastnavigation {
        display: none !important;
    }
}