*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    background-color: #fff;
    color: #404040;
    font-family: 'Lato','Arial',sans-serif;
    font-weight: 400;
    font-size: 16px;
    text-rendering: optimizeLegibility;
    overflow-x: hidden; /* added for responsive */    
    height: 100%;    
}

body {display: flex; flex-direction: column; min-height: 100vh;}

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

@font-face{
    font-family: "Ubuntu";
    src: url('../Ubuntu.woff'),
    url('../Ubuntu.woff');
}

.row {
    margin: 0 auto;    
}
.box {
    padding: 1%;
}
/*
.nav {
	background-color: #404040;
	margin: 0px auto;
}
*/
.f-nav {display: flex; justify-content: space-between; align-items: center; background-color: #404040; color: white;}

.btn:link, 
.btn:visited{
    display: inline-block;
    text-decoration: none;
    padding: 7px 24px;
    margin-top: 7px;
    font-weight: 400;
    border-radius: 200px;
    transition: background-color 0.2s, border 0.2s, color 0.2s; 
}
.btn-full:link, 
.btn-full:visited{
    background-color: #00e600;
    color: #111;
    border: 1px solid #00e600;
}
.btn:hover, .btn:active {
    background-color: #00b300;
    color: #fff;
}
.btn-full:hover, btn-full:active {
    border: 1px solid #00b300;
}



.f-btn:link, 
.f-btn:visited{
    text-decoration: none;
    padding: 7px 24px;
    font-weight: 400;
    border-radius: 200px;
    transition: background-color 0.2s, border 0.2s, color 0.2s; 
}
.f-btn-full:link, 
.f-btn-full:visited{
    background-color: #00e600;
    color: #111;
    border: 1px solid #00e600;
}
.f-btn:hover, .f-btn:active {
    background-color: #00b300;
    color: #fff;
}
.f-btn-full:hover, f-btn-full:active {
    border: 1px solid #00b300;
}



.btgN {
    float:left; 
    background-color: #404040; 
    color: white; 
    width:34%; 
    font-family:ubuntu; 
    min-height: 60px; 
    padding: 10px 0 5px 10px; 
    font-size: 150%;
    word-spacing: -3px;
}
.f-btgN {
    background-color: #404040; 
    color: white; 
    font-family:ubuntu; 
    word-spacing: -3px;
    margin-left: 10px;
}

.playNow {
    float:left;
    width: 33%;
    background-color:#404040; 
    text-align: center;
    min-height: 60px;
}
.f-playNow {
   /* height: 100%;*/
   margin-right:60px;
}
.btgF {
    float:right; 
    background-color: #404040; 
    color: white; 
    width:33%; 
    min-height: 60px;
    text-align: right; 
    padding: 10px 10px 5px 0;
}
.f-btgF, .f-btgM {
    background-color: #404040; 
    color: white;
    text-align: right; 
    margin-right: 10px;
}
.btgN a:link, .btgN a:visited,  
.btgF a:link, .btgF a:visited{
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: border-bottom 0.2s;
    color: white;
}
.btgN a:hover, .btgN a:active,  
.btgF a:hover, .btgF a:active {
    border-bottom: 2px solid #e67322;
}


.f-btgN a:link, .f-btgN a:visited,  
.f-btgF a:link, .f-btgF a:visited{
    text-decoration: none;
    border-bottom: 2px solid transparent;
    /*transition: border-bottom 0.2s;*/
    transition: text-shadow 0.2s ease;
    color: white;
}
.f-btgN a:hover, .f-btgN a:active,  
.f-btgF a:hover, .f-btgF a:active {
    /*border-bottom: 2px solid #e67322;*/
    text-shadow: rgba(251, 255, 0, 0.74) 0px 0px 7px;
}




.btgM {
    float:right; 
    background-color: #404040; 
    color: #fff; 
    width:33%; 
    min-height: 60px;
    text-align: right; 
    padding: 10px 10px 5px 0;
    font-size: 150%;
}
.btgM a:link, .btgM a:visited{
    text-decoration: none;
    color: white;
}
.f-btgM a:link, .f-btgM a:visited{
    text-decoration: none;
    color: white;
}


/* *************************************
FOOTER - same content is in index.css
***************************************/
.fl-foot-row {display: flex; justify-content: space-between; margin-bottom: 24px;}
.fl-foot {text-align: center; width: 100%;}
.fl-c {display: flex;  justify-content: center; font-size: 90%; color: #888;}
.fl-foot a:link, .fl-foot a:visited {
    text-decoration: none;
    border:0;
    color: #bfbfbf;
    transition: color 0.2s;
}
.fl-foot a:hover, .fl-foot a:active {color: #e9e9e9;}



footer {
    background-color: #333;
    padding: 24px 0px;
}

.foot-row {
   margin-left: 17%; width: 66%; padding: 10px 0px; 
}

.foot-l {font-size: 110%; width: 33%; display: inline-block;}
.foot-c {font-size: 110%; width: 32%;  text-align: center; display: inline-block;}
.foot-r {font-size: 110%; width: 32%;  text-align: right; display: inline-block;}

.foot-l a:link, .foot-l a:visited {
    text-decoration: none;
    border:0;
    color: #bfbfbf;
    transition: color 0.2s;
}
.foot-c a:link, .foot-c a:visited {
    text-decoration: none;
    border:0;
    color: #bfbfbf;
    transition: color 0.2s;
}
.foot-r a:link, .foot-r a:visited {
    text-decoration: none;
    border:0;
    color: #bfbfbf;
    transition: color 0.2s;
}

.foot-l a:hover, .foot-l a:active {color: #e9e9e9;}
.foot-c a:hover, .foot-c a:active {color: #e9e9e9;}
.foot-r a:hover, .foot-r a:active {color: #e9e9e9;}
 
footer p {
    color: #888;
    text-align: center;
    font-size: 90%;
    margin-top: 15px;
}