
/* Mobile */
@media (max-width: 767px) {

    .body-top-spotlight{
        margin-top: 290px;
    }

    .visible-xs{
        display: block !important;
    }

    .pull-right-xs{
        float: right !important;
    }

    .pull-left-xs{
        float: left !important;
    }

    .hidden-xs{
        display: none ;
    }

    .container {
        margin-left: 20px;
        margin-right: 20px;
        /*position:relative;*/
        /*overflow: hidden;*/
    }

    .row {
        width: 100%;
        /*max-width: 1024px;*/
        /*min-width: 960px;*/
    }

    .onecol-xs, .twocol-xs, .threecol-xs, .fourcol-xs, .fivecol-xs, .sixcol-xs, .sevencol-xs, .eightcol-xs, .ninecol-xs, .tencol-xs, .elevencol-xs {
        margin-right: 3.8%;
        float: left;
        min-height: 1px;
    }

    .row .onecol-xs {
        width: 4.85%;
    }

    .row .twocol-xs {
        width: 13.45%;
    }

    .row .threecol-xs {
        width: 22.05%;
    }

    .row .fourcol-xs {
        width: 30.75%;
    }

    .row .fivecol-xs {
        width: 39.45%;
    }

    .row .sixcol-xs {
        width: 48%;
    }

    .row .sevencol-xs {
        width: 56.75%;
    }

    .row .eightcol-xs {
        width: 65.4%;
    }

    .row .ninecol-xs {
        width: 74.05%;
    }

    .row .tencol-xs {
        width: 82.7%;
    }

    .row .elevencol-xs {
        width: 91.35%;
    }

    .row .twelvecol-xs {
        width: 100%;
        float: left;
    }

    .last-xs {
        margin-right: 0px;
    }
}

@media (max-width: 767px) {
    body{
        -webkit-text-size-adjust: none;
    }


    .hidden-xs{
        display: none;
    }

    .logo img{max-width: 100%; width: auto;}
    .nav{ position: relative;}
    .nav li { display: none; float: none; }
    .top-stats-container{margin: 0 10px 0 10px;}
    #nav li { float: none; overflow: hidden; clear:both;}
    #nav li.mobile-menu { width: 100%; }

    .mobile-menu .subnav { z-index: 6; position: relative; text-indent: 20px; top: 0;}
    #nav li a, #nav .subnav a {display: block; width:100%; float: none; }
    #nav .subnav { width: 100%; }
    ul.spotsnav {width: 100% !important;}
    .spotlight{height: auto;}
    .spotlight h4{margin-top: 10px;}
    .body-top-spotlight { padding-top:0%; }
    .marB-xs{margin-bottom: 60px;}
    #multi-domain{ margin: 15px 0 0 10px; }
    .menu-trigger {clear:none !important;}
    .menu-trigger:hover a { border-top: none !important; border-bottom: none !important; margin-bottom: -1px !important; }

    ol.spots li{ margin: 0 6% 42px 0; width: 40.5% }
    .spot-img { width: 100%; height: auto; }
    .spot-img img{
        max-width: 100% !important;
        min-width: 120%;
        min-height: inherit;
    }

    .top-stats-container{
        min-width: 274px;
        max-width: 290px;
    }

    .logincol{
        width: 100%;
    }

    .logincol .halfcol{
        width: 100%;
        padding: 0 20px 0 20px;
    }

    .keyboard-tip { display: none; }
    .social-detail { height: auto; }

    #footer { margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; }

    ol.spots li{
        width: calc(50% - 30px);
        margin: 0 20px 42px 0;
    }
    #filters, #filters-nav { z-index: 0; }


    .spot-counter{
        margin-top: -50px;
    }

    .news-body p{
        width: 100%;
    }

    ol.comment-list .comment-body {
        margin-left: 10px;
    }
    
    .facebook-page{
        min-height: 24px;
    }

    .spotter-detail{
        display: table;
    }

    .spotter-detail > li{
        display: table-row;
    }

    .spotter-detail > li > span, .spotter-detail > li > label{
        display: table-cell;
        width: auto;
        float: none;
    }

    .spotter-detail > li > label{
        width: 130px;
    }
    .spotter-stats { display : table-row; }
    ul.spotter-stats > li{ display: table-cell;  float: none; }


    /*#filters-nav li.last{*/
    /*margin-right: 1px;*/
    /*width: calc( ( 100% / 3 ) - 2px );*/
    /*}*/
}


