@charset "UTF-8";


@font-face
{
    font-family:AlpinGothic;
    src: url(../../fonts/CgAlpinGothicNo3.ttf);
}

@font-face
{
    font-family:UnitRounded-Bold;
    src: url(../../fonts/UnitRoundedBold.ttf);
}

/*@font-face
{
    font-family:IcoMoon;
    src: url(../../fonts/icomoon-ultimate.ttf);
}*/

/*@font-face
{
    font-family:OpensansBold;
    src: url(../../fonts/OpenSans-Bold.ttf);
}*/

@font-face
{
    font-family:DinMedium;
    src: url(../../fonts/din-medium.ttf);
}

@font-face
{
  font-family:Ubuntu;
  src: url(../../fonts/ubuntu-mono.ttf);
}





h1
{
    font-family:UnitRounded-Bold;
    font-size:30px;
}

h3
{
    /*font-family:DinMedium;*/
    /*font-size:15px;*/
    /*text-indent: 10px;*/
    font-size: 25px;
}

html, body 
{
    margin:0;
    padding:0;
    height:100%;
    background-color: #222;
}

/*
 *	Scrollbar
 */

/* width */
::-webkit-scrollbar {
  width: 15px;
}

/* Track */
::-webkit-scrollbar-track {
  /*background: #f1f1f1; */
  background: #383934;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  /*background: #888; */
  background: #555652;

}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
  
}


input[type=submit] 
{
    background-color: #333436;
    color:#fff;
    border:2px solid #333436;
    padding:10px;
    font-size:14px;
    font-family: Century Gothic;
    cursor:pointer;
    float: left;
}

input[type=submit]:hover
{
    background-color: #1783c7;
    border: 2px solid #1783c7;
    
     /* Firefox */
    -moz-transition: all .2s ease-in;
    /* WebKit */
    -webkit-transition: all .2s ease-in;
    /* Opera */
    -o-transition: all .2s ease-in;
    /* Standard */
    transition: all .2s ease-in;
}



/* The whole thing */
.standard-menu, .favorites-menu {
    display: none;
    z-index: 1000;
    position: absolute;
    overflow: hidden;
    border: 1px solid #7e7e7e;
    white-space: nowrap;
    font-family: sans-serif;
    /*font-family: 'Century Gothic';*/
    background: #2b2b2b;
    /* background: #FFF; */
    color: #d5d5d5;
    /* color: #333; */
    /* border-radius: 5px; */
    padding: 0;
    box-shadow: 0 0 10px #222;
    -webkit-box-shadow: 0 0 7px #222;

    /*padding-left: 25px;*/
}

/* Each of the items in the list */
.standard-menu li, .favorites-menu li {
    /*padding: 8px 12px;*/
    padding: 8px 12px 8px 0px !important;
    cursor: pointer;
    list-style-type: none;
    transition: all .3s ease;
}



.standard-menu li:hover, .favorites-menu li:hover {
    /*background-color: #666666;*/
    background-color: #555;
}

.fa-li{
    position: unset;
}


/*
 *	Top bar
 */

.logo p
{
    color:cornsilk;
    font-size:30px;
    font-family: AlpinGothic;
    line-height: 10px;
    text-indent: 20px;
}



.top-bar 
{
    text-transform: uppercase;
    font-family: AlpinGothic;
    position: fixed;
    width: 100%;
    z-index: 999;
}

.top-bar-open{
    /*position: fixed;*/
/*    top: 0;
    bottom: 0;
    left: 0;
    right: 0;*/
    background: rgba(0, 0, 0, 0.7) !important;
}

.top-bar-section ul li>a
{
    /*   color: cornsilk;*/
    /*    background-color: rgba(37,37,43,0.97);*/
    font-size: 15px;
    font-family: UnitRounded-Bold;
    text-transform: uppercase;
}

.top-bar .name h1 a
{
    width: 100%;
}

@media only screen and (max-width: 700px) {
    #top-bar-title{
        font-size: 12px;
    }
}

.top-bar .name
{
    display: table-cell;
}

.top-bar .search-bar
{
    display: table-cell;
    
}

.nav-user-logged-in{
    background-color: #5cb85c !important;
    border-color: #4F9E4F !important;
    color: #FFF;
}

.top-bar-username{
    text-transform: capitalize;
    padding: 8px 0.9375rem;
    border-bottom: solid 1px #1a1a1a;
    background-color: #5cb85c !important;
    border-color: #4F9E4F !important;
}

.top-bar-username h5{
    color: #FFF;
    margin: 0;
    font-family: UnitRounded-Bold;
}

.top-bar-section ul {
    background-color: #333;
}

.top-bar-section .dropdown{
    /*overflow-y: scroll !important;*/
    /*overflow-y: auto !important;*/

    /*white-space:nowrap;
    overflow-y: scroll !important;
    -webkit-overflow-scrolling: touch;*/

    max-height: 493px;
}

.top-bar-section .dropdown li{
    display: inline-block;
    border-top: solid 1px #1a1a1a;
    cursor: default;
}

.top-bar-section .dropdown li.title h5 a:hover, .top-bar-section .dropdown li.parent-link a:hover {
    background-color: #222 !important;
}

.search-bar-left{
    overflow: hidden;
    border: 1px solid #111;
    border-right: 1px solid #555;
    /*border: 2px dashed #f0f;*/
}




.search-bar-right{
    float: right;
    width: 210px;
    min-height: 45px;
    /* border: 2px dashed #00f; */
    color: #fff;
    line-height: 43px;
    padding-left: 10px;
    /* background: #111; */
    border: 1px solid #111;
    border-left: none;
    /* display: none; */
}

#foundCount{
    font-size:20px;
    font-family: 'Century Gothic';
}

.search-bar-splitter{
    position: absolute;
    top: 46.5px;
    right: 133.5px;
    /* border-right: #ccc 1px solid; */
    border-right: 1px solid #555;
    height: 44px;
    width: 2px;
}

.search-bar-btn-up{
    position: absolute;
    top: 47px;
    right: 85px;
    color: #fff !important;
    padding: 0 10px;
    /*background-color: #2A80B9;*/
    /*transition: background-color 300ms ease-out;*/
    /*z-index: 99;*/
}

.search-bar-btn-dn{
    position: absolute;
    top: 47px;
    right: 45px;
    color: #fff !important;
    padding: 0 10px;
    /*background-color: #2A80B9;*/
    /*transition: background-color 300ms ease-out;*/
    /*z-index: 99;*/
}

.search-bar-btn-del{
    position: absolute;
    top: 47px;
    right: 5px;
    color: #fff !important;
    padding: 0 10px;
    /*background-color: #2A80B9;*/
}

.search-bar-btn-up:hover, .search-bar-btn-dn:hover, .search-bar-btn-del:hover{
    background: #444;
}

/*
#searchfield
{
    background-color:#222;
    color:#fff;
    font-family:'Raleway';
    font-size:20px;
    width: 250px;
    /*margin-right: 8px;*//*
    vertical-align: middle;
    position: static;
}

#searchfield_small
{
    background-color: #222;
    color: #fff;
    font-family: 'Raleway';
   /* line-height: 12px;*//*
    font-size: 20px;
    margin: 0;
}
*/
#search-bar-search-field
{
    /*background-color: #222;*/
    color: #fff;
    font-family: 'Raleway';
   /* line-height: 12px;*/
    font-size: 20px;
    margin: 0;
    border-right: 1px solid #ccc;
    /*background-color: #111!important;*/
    /*background-color: rgba(34,34,34,0.95) !important;*/
    background: transparent !important;
    /*border: 1px solid #111;*/
    border: none;
    /*border-right: 1px solid #ccc;*/
    /*border-right: 1px solid #555;*/
    padding-left: 13px;
    height: 45px;
}
/*
.search-bar-small
{
    padding-top: 2.8125rem;
    position: fixed;
    z-index: 99;
    width: 100%;
    background: #333;
}
*/
.search-bar
{
    padding-top: 2.8125rem;
    position: fixed;
    z-index: 100;
    width: 100%;
    background-color: rgba(51,51,51,0.95) !important;
    /*background: #333;*/
}


.search-icon-small a:hover
{
    background-color: #222;
}

.menu-icon a:hover
{
    background-color: #222;
}

.search-icon-small{
    display: none;
}

.search-icon-small
{
    position: absolute;
    top: 0;
    right: 98px;
    margin: 0 30px;
}

.search-icon-small a
{
    background: url("../../images/magnify.png") center center no-repeat;
    background-size: cover;
    height: 2.8rem;
    width: 2.8rem;
    position: absolute;
}

.search-icon-large
{
    position: relative;
}


.search-icon-large a
{
    background: url("../../images/magnify.png") center center no-repeat !important;
    background-size: cover !important;
    height: 2.8rem !important;
    width: 2.8rem !important;
    /*position: absolute;*/
} 

.search-icon-large a:hover
{
    background-color: #222 !important;
}


.top-bar .toggle-topbar.menu-icon {
    top: 0;
    margin-top: 0px; 
    border-left: solid 1px #4e4e4e;
}

.top-bar .toggle-topbar.menu-icon a {
    /*color: #fff;*/
    height: 45px;
    line-height: 45px;
    padding: 0 2.5rem 0 0.9375rem;
    position: relative;
}


/* Previous location Banner css */

/* Previous location popup */



.wrapper {
    /*
    box-shadow: 0 0 75px gold;
    */
    box-shadow: 0 0 75px #2A80B9;
    margin-top: -11px;
    /* margin: 75px 0 0 0; */
    /* background-color: #FFF; */
    /* -moz-box-shadow: 0px -4px 75px 2px #000; */
    /* -webkit-box-shadow: 0px -4px 75px 2px #000; */
    /* box-shadow: 0px -4px 75px 2px #000; */
    
    width:100%;
    /* padding-top: 2.8125rem;*/
    padding-bottom: 35px;
    /*background-color: #ccc;*/
    background-color: #444;
}



.group
{
    background-color: #222;
    /*margin-top: 6px;*/
    margin-top: 4px;
 /*  padding-bottom: 40px;*/
}

.group-under-construction{
    /*background-color: #FF8B06;*/
    background-color: #CF5300;
    padding: 20px;
}

.groupname
{
    font-family:DinMedium;
    font-size:17px;
    color: #fff !important;
    padding-top: 0;
    padding-bottom: 0;
    /*padding-left: 3%;*/
    /*padding-right: 5px;*/
    /*display: inline-block;*/
    /*display: inline-table;*/
    display: block;
    width: 270px;
    height: auto;
    text-transform: uppercase; 
    background-color: #008CBA;
    text-align: center;
    
    /*margin-top: 3px;*/
    /*margin-bottom: 3px;*/
    /*border-color: #007095;*/

    cursor: pointer;
}

.groupname:hover
{
    /*color:  !important;*/
    /*background-color: #007095;*/
}

.closed
{
    width: 100%;
    font-size: 25px;
    text-align:  center;
    padding: 0;
    /*
    // -webkit-transition-property: all;
    -webkit-transition-duration: 0.7s;*/
}

.clips
{
    /*  border: 2px solid green ;*/
    text-align: center;
    padding-bottom: 40px;
    margin: 0 auto;
    left: 5%;
    width: 90%;
  
    padding-top: 10px;
    line-height: 1.0;
}

.section{
    /*text-align: left;*/
    /*margin-bottom: 10px;*/
}

.section-name{
    color: orange;
    font-family: 'UnitRounded-Bold';
    font-size: 20px;
    margin-bottom: 10px;
    display: block;
}

.top-ten-col{
    width: 50%;
    display: inline-block;
}

.top-ten-col a{
    display: table;
    max-width: 400px;
    width: 100%;
    margin-bottom: 15px;
}

.top-ten-col a > span{
    width: 100%;
}

#section_top_10_col_1 > a{
    float: right;
}

.newly-added-index{
    color: orange;
    font-family: 'UnitRounded-Bold';
    font-size: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
    display: block;
}

.filler
{
   height: 100%;
    

    /*
  width:100%;
  background-color: #222;
  margin-top: 6px;
  height: 1000px;
  background: url(../../images/404gif.gif) center center no-repeat;
  background-size: cover;
  text-align: center;
  */
}

.fillerwrapper
{
    min-height: 100%;
}

.overlay
{
    background-color: rgba(0,0,0,0.3);
   /* position: fixed;*/
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 10;
    /*
    background-color: rgba(0,0,0,0.4);
    height: 100%;
        */
}

.outer {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
    /*background: url(../../images/404.webp) no-repeat center center;*/
    background: url(../../images/404gif.gif) no-repeat center center;
    background-size: cover;
}

.middle {
    display: table-cell;
    vertical-align: middle;
}


.fillerContent
{
    
    text-align: left;
    color: #FFF;
    margin-left: auto;
    margin-right: auto; 
    width: 50%;
    /*
    text-align: left;
    margin: 0 auto;
    width: 40%;
    padding-top: 30vh;*/
}

/*.fillerContent h2
{
    color: #fff;
    line-height: 1.2em;
    font-size: 3.0vw;
    font-family: AlpinGothic;
}*/

.fillerContent h2
{
    color: #fff;
    line-height: 1.2em;
    font-size: 70px;
    font-family: AlpinGothic;

    text-shadow: 4px 4px 2px rgba(150, 150, 150, 1);
}

.fillerContent p
{
    color: #fff;
    font-family: 'Raleway', sans-serif;
    font-size: 20px;
}

@media only screen and (max-width: 700px) {
    .fillerContent{
        width: 90%;
    }

    .fillerContent h2{
       font-size: 35px;
    }

    .fillerContent p{
        font-size: 16px;
    }
}

#GoToTop{
    background-color: #003F54;
}


.topTenRank{
    color: #FFF;
}




.jinglebutton {
  /*  position: relative;*/
    display: inline-block;
    margin: 10px;
/*
    -webkit-border-radius: 10px;
    
/*
    -webkit-box-shadow: 
        0px 3px rgba(128,128,128,1),  gradient effects 
        0px 4px rgba(118,118,118,1),
        0px 5px rgba(108,108,108,1),
        0px 6px rgba(98,98,98,1),
        0px 7px rgba(88,88,88,1),
        0px 8px rgba(78,78,78,1),
        0px 14px 6px -1px rgba(128,128,128,1); 
*/
    
      -webkit-box-shadow: 
        0px 3px rgba(128,128,128,1), /* gradient effects */
        0px 4px rgba(118,118,118,1),
        0px 5px rgba(108,108,108,1),
        0px 6px rgba(98,98,98,1),
        0px 7px rgba(88,88,88,1),
        0px 8px rgba(78,78,78,1);
      
      box-shadow: 
        0px 3px rgba(128,128,128,1), /* gradient effects */
        0px 4px rgba(118,118,118,1),
        0px 5px rgba(108,108,108,1),
        0px 6px rgba(98,98,98,1),
        0px 7px rgba(88,88,88,1),
        0px 8px rgba(78,78,78,1);
  
    -webkit-transition: -webkit-box-shadow .1s ease-in-out;
    transition: box-shadow .1s ease-in-out;
} 

.jinglebutton span {
    background-color: #E8E8E8;
    user-select:none;
	-webkit-user-select:none;
	
     background-image:
          /* gloss gradient */
        
        linear-gradient(linear, 
            left bottom, 
            left top, 
            color-stop(50%,rgba(255,255,255,0)), 
            color-stop(50%,rgba(255,255,255,0.3)), 
            color-stop(100%,rgba(255,255,255,0.2))),
        
        /* dark outside gradient */
        
        linear-gradient(
            linear, 
            left top, 
            right top, 
            color-stop(0%,rgba(210,210,210,0.3)), 
            color-stop(20%,rgba(210,210,210,0)), 
            color-stop(80%,rgba(210,210,210,0)), 
            color-stop(100%,rgba(210,210,210,0.3))),
  
        linear-gradient(
            linear, 
            left top, 
            right top, 
            color-stop(0%,rgba(255,255,255,0)), 
            color-stop(20%,rgba(255,255,255,0.5)), 
            color-stop(80%,rgba(255,255,255,0.5)), 
            color-stop(100%,rgba(255,255,255,0))),          
    
        linear-gradient(
            linear, 
            0% 100%, 
            100% 0%, 
            color-stop(0%,rgba(255,255,255,0)), 
            color-stop(40%,rgba(255,255,255,0)), 
            color-stop(40%,#D2D2D1), 
            color-stop(60%,#D2D2D1), 
            color-stop(60%,rgba(255,255,255,0)), 
            color-stop(100%,rgba(255,255,255,0)));
    
    background-image: 
        /* gloss gradient */
        -webkit-gradient(
            linear, 
            left bottom, 
            left top, 
            color-stop(50%,rgba(255,255,255,0)), 
            color-stop(50%,rgba(255,255,255,0.3)), 
            color-stop(100%,rgba(255,255,255,0.2))),
        
        /* dark outside gradient */
        -webkit-gradient(
            linear, 
            left top, 
            right top, 
            color-stop(0%,rgba(210,210,210,0.3)), 
            color-stop(20%,rgba(210,210,210,0)), 
            color-stop(80%,rgba(210,210,210,0)), 
            color-stop(100%,rgba(210,210,210,0.3))),
        
        /* light inner gradient */
        -webkit-gradient(
            linear, 
            left top, 
            right top, 
            color-stop(0%,rgba(255,255,255,0)), 
            color-stop(20%,rgba(255,255,255,0.5)), 
            color-stop(80%,rgba(255,255,255,0.5)), 
            color-stop(100%,rgba(255,255,255,0))),       
        
        /* diagonal line pattern */
        -webkit-gradient(
            linear, 
            0% 100%, 
            100% 0%, 
            color-stop(0%,rgba(255,255,255,0)), 
            color-stop(40%,rgba(255,255,255,0)), 
            color-stop(40%,#D2D2D1), 
            color-stop(60%,#D2D2D1), 
            color-stop(60%,rgba(255,255,255,0)), 
            color-stop(100%,rgba(255,255,255,0)));
    
        -webkit-box-shadow:
            0px -1px #fff, /* top highlight */
            0px 1px 1px #FFFFFF; /* bottom edge */
                                 
       box-shadow:                           
            0px -1px #fff, /* top highlight */
            0px 1px 1px #FFFFFF; /* bottom edge */
                                 
    background-size: 100%, 100%, 100%, 4px 4px;                          
    -webkit-background-size: 100%, 100%, 100%, 4px 4px;
    /*
    -webkit-border-radius: 10px;
	*/
    transition: all .1s ease-in-out; 
    -webkit-transition: all .1s ease-in-out;
    
    display: inline-block;
    padding: 10px 20px 10px 20px;
    
    color: #3A474D;
    text-transform: uppercase;
    font-family: 'TradeGothicLTStd-BdCn20','PT Sans Narrow';
    font-weight: 700;
    line-height: 20px;
/*    font-size: 32px;*/
    font-size: 20px;
    text-shadow: 0px 1px #fff, 0px -1px #262F33;
}

.jinglebutton span:hover {
            color:#007095;
            text-shadow: 0px -1px #a29061;
            cursor: pointer;
        }

.jinglebutton:active {
    box-shadow: 0px 3px rgba(128,128,128,1),
                0px 4px rgba(118,118,118,1),
                0px 5px rgba(108,108,108,1),
                0px 6px rgba(98,98,98,1),
                0px 7px rgba(88,88,88,1),
                0px 8px rgba(78,78,78,1),
                0px 10px 2px 0px rgba(128,128,128,.6); /*shadow */
    
    -webkit-box-shadow: 
        0px 3px rgba(128,128,128,1),
        0px 4px rgba(118,118,118,1),
        0px 5px rgba(108,108,108,1),
        0px 6px rgba(98,98,98,1),
        0px 7px rgba(88,88,88,1),
        0px 8px rgba(78,78,78,1),
        0px 10px 2px 0px rgba(128,128,128,.6); /*shadow */
}

.jinglebutton:active span{
            -webkit-transform: translate(0, 5px); /* depth of button press */
        }

.jinglebutton span:after {
        display: block;
        width: 8px;
        height: 8px;
    
        position: absolute;
        right: 14px;
        top: 12px;    
        
        /*font-family: 'Cabin';*/
        font-weight: 700;
        color: #a29061;
        text-shadow: 0px 1px #fff, 0px -1px #a29061;
        font-size: 10px;
    }

.jinglebutton span.active{
  background-color:chartreuse;
  -webkit-transform: translate(0, 5px); /* depth of button press */
}

.jinglebutton span.found{
  background-color:#FF9900;
}

.jingleTitle{
    border-bottom: grey 1px solid;
    text-align: left;
}

.jingleSectionAdded{
    font-size: 14px;
    text-align: right;
}

.jingleDateAdded{
    font-size: 14px;
    text-align: right;
}

.jingleTopTenRank{
    font-size: 17px;
    text-align: right;
}

/*
#pitchcontrol {
    float: left;
  margin-left: 10px;
 /*  margin-top: 20px;*/
    /*
    font-family: 'Raleway', sans-serif;
    font-weight: normal;
    line-height: normal;
    font-size: 1rem;
    color: #fff;
    
    /*display: table;*/



    /* added 09-06-2020 */
    /*
    display: table-cell;
    height: calc(100% - 8px);
    margin: 4px 4px 4px 0px;
}

#pitchcontrol p{
    display: table-row;
}

#pitchcontrol label{
    font-family: 'Raleway', sans-serif;
    font-weight: normal;
    line-height: 2.8125rem;
    font-size: 1rem;
    color: #fff;
    display: table-cell;
    cursor: default;
    vertical-align: middle;
}

.pitch-select
{
    /* TODO IAN */
    /*
    height: 38.1875px;
    /*margin: 10px;*/
    /*
    display: table-cell;
    cursor: pointer;
    margin: 4px 5px 0px 5px;
}
*/

#pitchcontrol {
    float: left;
    display: table-cell;
    /*margin: 4px 4px 4px 10px;*/
    margin: 4px;
    height: calc(100% - 8px);
}

.pitch-label{
    font-family: 'Raleway', sans-serif;
    font-weight: normal;
    display: table;
    float: left;
    cursor: default;
    height: 100%;
    margin-right: 5px;
}   

.pitch-label span{
    display: table-cell; 
    vertical-align: middle;
    line-height: normal;
    font-size: 15px;
    color: #fff;
}

.pitch-select
{
    /*width: 100px;*/
    width: 145px;
    display: table-cell;
    cursor: pointer;
    margin: 0;
    padding: 8px;
    border-radius: 0;
    height: 100%;
    transition: background-color 300ms ease-out;
}



s{
    color: #fff;
    display: block;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 0.8125rem;
    font-weight: normal;
    padding-left: 0.9375rem;
    text-transform: none;
    width: 100%;
}

input[type="radio"], select {
    margin: 0 0 1rem 8px;
}

#divider{
    border-right: solid 1px #4e4e4e;
    border-bottom: none;
    border-top: none;
    clear: none;
    height:  100%;/*2.8125rem;*/
    width: 0;
    float: left;
    margin-left: 10px;
}

#server-status{
    float: left;
    display: table-cell;
    cursor: pointer;
}

.server-icon{
    float: left;
    display: table-cell;
    vertical-align: middle;
    margin: 4px 4px 0px 0px;
    padding: 0.6rem;
    color:#fff;
    font-size: 25px;
    padding: 0 0.6rem;
}

#server-status-icon{
    color: #03A63C;
}

#server-playmode-icon{
    color:#04ADBF;
}

.footerbutton
{
    /* added 09-06-2020 */
    height: calc(100% - 8px); 
    margin: 4px 4px 4px 0px;
    line-height: calc(100% - 8px);




    font-family: 'Raleway', sans-serif;
    font-weight: normal;
    /*line-height: normal;*/
    font-size: 0.9rem;
  
    float: right;
    display: table-cell;
    vertical-align: middle;
    /*margin: 4px 4px 0px 0px;*/
    width: 200px;
    /*padding: 0.6rem;*/
    
/*    position: absolute;*/
/*    text-align: center;*/
    text-decoration: none;
/*    display: table-cell;*/
    text-transform: uppercase;
    

    /*background-color: #2A80B9;*/
    /*border-color: #007095;*/


    background-color: #005C7A;
    border-color: #003F54;

    color: #fff;
    transition: background-color 300ms ease-out;
}




@media screen and (min-width: 900px) {
    
  .footerbutton.active
  {
        background-color: #BA5E00 !important; 
        border-color:#6D3700 !important; 
        transition: background-color 300ms ease-out;
  }
}

@media screen and (max-width:1360px){
    .search-icon-small{
        display: inline-block;
    }
    
    .search-icon-large{
        display: none;
}
}

@media screen and (max-width: 900px) {
  /*
    .top-bar .search-bar
    {
        display: none;
        vertical-align: middle;
    }
*/
    .button-text 
    {
        font-size: 0;
        line-height: 0;
    }
  
    .footerbutton
    {
        /* height: 50px; */
        /*height: 51px;*/
        /*width: 30px;*/
        width: 36.1875px;
        margin: 4px 4px 0px 0px;
    }
  
    #stopMusic.footerbutton
    {
        /*background: url(../../images/stopw.png) -5px -12px no-repeat;*/
        background: url(../../images/stopw.png) center center no-repeat;
        background-size: 3.0rem;
        background-color: #008CBA;
        border-color: #007095;
        color: #fff;
        transition: background-color 300ms ease-out;
    }
  
    #loopMusic.footerbutton
    {
        /*background: url(../../images/repeatw.png) -5px -12px no-repeat;*/
        background: url(../../images/repeatw.png) center center no-repeat;
        background-size: 3.0rem;
        background-color: #008CBA;
        border-color: #007095;
        color: #fff;
        transition: background-color 300ms ease-out;
    }

    #closeTabs.footerbutton
    {
        /*background: url(../../images/collapse-allw.png) -5px -12px no-repeat;*/
        background: url(../../images/collapse-allw.png) center center no-repeat;
        background-size: 3.0rem;
        background-color: #008CBA;
        border-color: #007095;
        color: #fff;
        transition: background-color 300ms ease-out;
    }
  
    .footerbutton.active
    {
        background-color: #BA5E00 !important; 
        border-color:#6D3700 !important;
        transition: background-color 300ms ease-out;
    }
}

button:hover, button:focus, .button:hover, .button:focus {
    color: #fff;
    background-color: #007095 !important;
}


#footer
{
  position:fixed;
  bottom:0;
  width:100%;
  height: 60px;
  z-index: 999;
  background-color: #333;
  height: 2.8125rem;
/*  background-color: rgba(37,37,43,0.97);*/
/*  transform: translateZ(0);*/ 
}

#footer a {
  position: absolute;
/*  display: table-cell;*/
  color:#fff;
  font-family:DinMedium;
  font-size:100%;
  text-indent: 10px;
  line-height: 40px;
}

#player {
    width: 350px;
    height: 50px;    
/*    position: relative;*/
  float:left;
    margin: 10px auto;
    top: 150px;
    background: url('https://iviewsource.com/exercises/audioslider/images/volume-background.png') no-repeat left top;
}

#volume {
    position: absolute;
    left: 24px;
    margin: 0 auto;
    height:15px;
    width: 300px;
    background: url('https://iviewsource.com/exercises/audioslider/images/volume-empty.png') no-repeat left top;
  border: none;
  outline: none;
}

#volume .ui-slider-range-min {
    height:15px;
    width: 200px;
    position: absolute;
    background: url('https://iviewsource.com/exercises/audioslider/images/volume-full.png') no-repeat left top;
  border: none;
  outline: none;
}

#volume .ui-slider-handle {
    width: 38px;
    height:38px;
    background: url('https://iviewsource.com/exercises/audioslider/images/volume-knob.png') no-repeat left top;
    position: absolute;
    margin-left: -15px;
    margin-top: -7px;
    cursor: pointer;
    outline: none;
    border: none;
}

.yt-videos
{
   

  padding-bottom: 10px;
  margin: 0 auto;
  width: 90%;
  
  
  /* TODO EDITED FOR TESTING
      display: flex;
      */
}

.viral-videos
{
    text-align: left;
}

.group .left-column
{
    width: 50%;
  float: left;
}

.group .right-column
{
    width: 50%;
  display: inline-block;
}

/* YOUTUBE MEUK*/
.outer_iframe
{
    width: 80%;
    /*background-color: #007095;*/
    background-color: #000;
    /*padding: 10px 0 4px;*/
    margin: 0 auto;
}

.h_iframe        {
    position:relative; 
    /*padding-top: 56%; original */
    padding-top: 56%;
}
.h_iframe iframe {
    position:absolute;
    top:0;
    left:0;
    width:100%; 
    height:100%;
    
}

#results .yt-lockup-tile {
    padding: 10px 15px;
}

.yt-lockup.yt-lockup-tile {
    font-size: 12px;
    /* padding: 10px 15px;*/
    /*padding: 20px 0px 5px 0px;*/
    
    
    /* TODO EDITED FOR TESTING
    width:100%;
     */
    /* border: 1px solid; */
    
    width: 370px;
    display: inline-block;
   /* padding: 10px 0px 0px 0px;*/
    margin-right: 5px;
}
.yt-lockup {
    color: #767676;
    line-height: 1.3em;
    position: relative;
}

.clearfix:before {
    content: '.';
    display: block;
    height: 0;
    visibility: hidden;
}

.yt-uix-tile {
    cursor: pointer;
}

.yt-lockup.yt-lockup-tile .yt-lockup-thumbnail {
    float: left;
    margin-right: 10px;
    text-align: right;
    width: 196px;
}
.contains-addto {
    display: block;
    position: relative;
    height: 100%;
    overflow: hidden;
}
.yt-lockup-thumbnail {
    line-height: 0;
    position: relative;
}

a {
    color: #167ac6;
    cursor: pointer;
    text-decoration: none;
}

.video-thumb {
    position: relative;
}

.yt-thumb {
    overflow: hidden;
    background: #f1f1f1;
    font-size: 0;
    vertical-align: middle;
    display: inline-block;
}

.yt-thumb img {
    font-size: 13px;
    outline: none;
    -ms-interpolation-mode: bicubic;
    height: 110px;
}

.video-time {
    margin-top: 0;
    margin-right: 0;
    padding: 0 4px;
    font-weight: 500;
    font-size: 11px;
    background-color: #000;
    color: #fff!important;
    height: 14px;
    line-height: 14px;
    opacity: .75;
    filter: alpha(opacity=75);
    display: -moz-inline-stack;
    vertical-align: top;
    display: inline-block;
}
.video-time {
    position: absolute;
    right: 2px;
    bottom: 2px;
}

.thumb-menu.dark-overflow-action-menu {
    display: none;
    position: absolute;
    top: 2px;
    right: 0;
}
.video-actions {
    display: block;
    right: -60px;
    cursor: pointer;
    cursor: hand;
}
.video-actions {
    position: absolute;
    bottom: 2px;
}

.thumbPointer{
    border-bottom: 15px solid #d8d8d8;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    height: 0;
    position: relative; 
    width: 0;
    bottom: auto; 
}

.yt-lockup .yt-lockup-content {
    
    position: relative;
    text-align: left;
    
    /* moet aanstaan voor afbeelding klik te laten werken*/
     overflow: hidden;
     
    width: 155px;    
}

.yt-lockup-tile .yt-lockup-title {
    font-size: 14px;
    max-width: 499px;
    
    /* ADDED FOR TESTING */
   /* max-width: 300px;*/
    overflow: hidden;
    max-height: 2.6em;
    font-weight: 700;
}
.yt-lockup-title {
    margin-top: 0;
    margin-bottom: 2px;
    text-indent: 0;
}

.yt-title{
    color:#d8d8d8;
    /*font-family: 'Roboto';*/
    font-family: 'Raleway', sans-serif;
}
.yt-title:hover{
    color:#d8d8d8;
}

.yt-title:active{
    color:#d8d8d8;
}

.yt-artist-link{
    color: #676767;
}

.yt-artist-link:hover{
    color: #676767;
}

.yt-artist-link:active{
    color: #676767;
}

.exp-responsive .yt-lockup-tile .yt-lockup-byline {
    white-space: nowrap;
}

.yt-lockup-tile .yt-lockup-meta, .yt-lockup-tile .yt-lockup-description {
    max-width: 499px;
}
.yt-lockup-meta {
    display: block;
}

.webkit .yt-ui-ellipsis-2 {
    -webkit-line-clamp: 2;
}
.webkit .yt-ui-ellipsis {
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

.yt-ui-ellipsis-2 {
    
    /* TODO CHANGED FOR EDITED TESTING
    max-height: 2.6em;
        */
    max-height: 3.8em;
}
.yt-ui-ellipsis {
    /*background-color: #fff;*/
    display: block;
    line-height: 1.3em;
    overflow: hidden;
    position: relative;
    text-overflow: ellipsis;
    white-space: normal;
    word-wrap: break-word;
}
.yt-lockup-description {
    line-height: 1.3em;
    word-wrap: break-word;
}
.yt-lockup-description {
    margin: 2px 0 0;
}


.clearfix:after {
    content: '.';
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}

.yt-lockup-meta-info
{
    margin: 0;
}

.yt-lockup-meta-info>li:last-child {
    margin-right: 0;
}
.yt-lockup-meta-info>li {
    line-height: 1.3em;
    display: inline-block;
}

ul, var {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    background: transparent;
}
menu, ol, ul {
    list-style: none;
}






video{
    object-fit: contain;
    /*width: 400px;*/
    height: 225px;
    background: black;


    width: 100%;
    max-width: 400px;
}

.wtf-videos{
    display: inline-block;
    /*width: 100%;*/
    width: calc(100% - 10px);
    max-width: 400px;
    max-height: 225px;
    margin: 0 5px 10px 5px;
}

.render-bells{
    /*color:#F00;*/
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 20px;
    display: inline-block;
}

.render-bells:hover{
    /*color:#CC0000;*/
}

.confirm-btn{
    font-family: 'Raleway', sans-serif;
    font-weight: normal;
    line-height: normal;
    font-size: 0.9rem;
    float: right;
    display: table-cell;
    vertical-align: middle;
    margin: 4px 4px 0px 0px;
    width: 100px;
    padding: 0.6rem;
    /* position: absolute; */
    /* text-align: center; */
    text-decoration: none;
    /* display: table-cell; */
    text-transform: uppercase;
    background-color: #2A80B9;
    border-color: #007095;
    color: #fff;
    transition: background-color 300ms ease-out;
    cursor: pointer;
}