/*Variables*/
:root {
--textColor: #ff0000;/*Default: RED*/
--bgColor: #000;/*Default: BLACK*/
--secondColor: #fff;/*Default: WHITE*/
--borderColor: #ff0000; /*Default: RED*/
--iconColor: #ff0000; /*Default: WHITE*/
--hoverColor: #fff; /*Default: WHITE*/
--onlineColor: green; /*Default: GREEN*/
--offlineColor: #ff0000;/*Default: RED*/
}

*{
margin:0;
padding:0;
}
body{
    @media all and (max-width: 545px) {
            width:100vh;
        }
background-image: url("../../pics/bg-grad.jpg");
background-color:var(--bgColor); 
background-size: cover;
 background-repeat: no-repeat;
 color:var(--secondColor);
 font-family:OCR A Std, monospace;
 margin:0;
padding:0;display: flex;
flex-direction: column;
}
#page-container {
  position: relative;
  min-height: 100vh;
    padding-bottom:140px;
}
#content-wrap {
}
#header{
  @media (min-width: <=300px) and (max-width: 500px) {
       height:40%;
}
@media screen and (max-width: 800px) and (orientation: landscape) {
      height:100%;
  }
	height:60%;
	width:100%;
	display:block;
	background: url("../../pics/header_bg.jpg") no-repeat center;
	background-size:cover;
border-bottom:solid;
border-width:100%;
border-color:var(--borderColor);
position:relative;
}
#header .header-container{    
   @media all and (max-width:760px){
    height:10%;
    text-align:center;
}
	width:100%;	
	background-color:var(--bgColor);
	height:10%;
	border-bottom:solid;
border-width:100%;
border-color:var(--borderColor);
position:relative;
}
#header .content img{
   @media screen and (max-width:480px;){
height:75px;
width:125px;    
}
	height:50%;
	border:solid;
	border-radius:25px;
	background-color: rgba(255,0,0,0.3) ;
}
#header .content{
   @media screen and (min-width:500px;){
height:75px;
    font-size:20px;
}
	margin:auto;
height:250px;
color:var(--textColor);
font-size:25px;
padding-top:5%;
}
#header .content h2{
   @media screen and (max-width:600px;){
    font-size:20px;
}
   @media screen and (max-width:800px;){
    font-size:25px;
}
font-size:25px;
}
#header .title h3{    
   @media all and (max-width:800px){
        font-size:15px;
        text-align:center;    position: absolute;
    left:50%;
    top:0;
    transform: translate(-50%);
}
	float:left;
	margin-top:5px;
	color:var(--textColor);
}
#header .social-bar{
	@media all and (max-width: 760px) {
            display: none;
}

float:right;
width:25%;
}
#header .social-bar .icon-container{
float:right;
height:100%;
width:100%;
}
#header .social-bar .icon-container i{
	margin-top:15px;
}
#header .social-bar .icon-container i:hover{
	color:var(--hoverColor);
	cursor:pointer;	
}

#header .social-bar .icon-container ul{
	margin-left:15px;
}
#header .social-bar .icon-container li{
	display:inline;
	list-style-type:none;
	padding-left:3%;
	padding-right:3%;
}
#header .social-bar .icon-container a{
	color:var(--iconColor);
}
#header button{
	 border-radius:25px;
	 padding:5px 10px;
	 font-size:15px;
	 background-color: rgba(255,0,0,0.7);
	 border:inset;
}
#header button:hover{
	cursor:pointer;
	background-color: rgba(0,0,0,0.5);
	border:outset;
	color:#fff;
}

/* NAV BAR */

#nav-bar {

    width: 100%;
    background: #000;
    border-bottom: 4px solid var(--borderColor);	
    @media all and (max-width: 768px ) {
            display: none;
        }

 nav ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    @media all and (min-width: 545px) {
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
li {
        display: none;
        @media all and (min-width: 545px) {
            display: block;
        }
    }
a {
        display: block;
        text-decoration: none;
        text-transform: uppercase;
        letter-spacing: 5px;
        font-family: Futura, Trebuchet MS, Arial, sans-serif;
        font-size: 15px;
        color: var(--textColor);
        text-align: center;
        padding: 14px 30px;
        transition: background .25s, box-shadow .15s;
        &:hover {
            color: #4A4860;
            background: #ff0000;
            box-shadow: 0px 4px 0px 0px #000;
        }
        @media all and (min-width: 545px) {
            padding: 20px;
        }
    }
}
}
}
}

/*Mobile Nav */
	

.mobile-container {
@media all and (min-width: 768px ) {
            display: none;
        }
  width: 100%;
  margin: auto;
  background-color: #555;
  height: 500px;
  color: white;
  border-radius: 10px;
}
.topnav {
	@media all and (min-width: 768px ) {
            display: none;
        }
  overflow: hidden;
  background-color: var(--bgColor);
  position: relative;
  min-height:75px;
}
#mobile-content{
	@media all and (min-width: 545px) {
            display: none;
        }
}
.topnav #myLinks {
  display: none;
}
.topnav li{
	display:inline;
}
.topnav .title{
padding:20px;
}
#myLinks li{
	padding:10px;
}

.topnav a {
  color: var(--textColor);
  padding: 14px 16px;
  text-decoration: none;
  font-size: 30px;
  display: block;
  border-bottom:solid;
  text-align:center;
}

.topnav a.icon {
  display: block;
  position: absolute;
  right: 0;
  top: 5px;
  height:50px;
  width:125px;
  color:var(--textColor);
}

.topnav a:hover {
  color: var(--textColor);
}
}

/*HOME*/

/*CONTACT FORM*/

.form-container {
    width:75%;
    border: #e2ddd2 1px solid;
    padding: 20px;
    border-radius: 2px;
}

.input-row {
    margin-bottom: 20px;
}

.input-row label {
    color: var(--textColor);
}

.input-field {
    width: 100%;
    border-radius: 2px;
    padding: 10px;
    border: #e0dfdf 1px solid;
    box-sizing: border-box;
    margin-top: 2px;
}

.span-field {
    font: Arial;
    font-size: small;
    text-decoration: none;
}

.btn-submit {
    padding: 10px 60px;
    background: #9e9a91;
    border: #8c8880 1px solid;
    color: var(--iconColor);
    font-size: 0.9em;
    border-radius: 2px;
    cursor: pointer;
    text-align:center;
    margin:auto;
}

.errorMessage {
    background-color: #e66262;
    border: #AA4502 1px solid;
    padding: 5px 10px;
    color: var(--textColor);
    border-radius: 3px;
}

.successMessage {
    background-color: #9fd2a1;
    border: #91bf93 1px solid;
    padding: 5px 10px;
    color: #3d503d;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.9em;
}

.info {
    font-size: .8em;
    color: #e66262;
    letter-spacing: 2px;
    padding-left: 5px;
}
/*LIVE PAGE*/

#live-container{
margin:auto;
    padding-top:25px;
}
.live-social{
    position:relative;
    left:40%;
}
.live-social li{
    	display:inline;
	list-style-type:none;
	padding-left:3%;
}
.live-social li i{
    text-align:center;
    margin:auto;
}
.live-social li a{
    color:var(--iconColor);
    text-align:center;
}
.live-social li a.fb:hover{
    color:#0000ff;
    box-shadow: 0px 4px 0px 0px #0000ff;
}
.live-social li a.yt:hover{
        color:#ff0000;
        box-shadow: 0px 4px 0px 0px #ff0000;
}

/*ABOUT PAGE*/

#content{
height:auto;
width:100%;
margin:auto;
padding-top:10px;
}
#content .ls-box{
    @media all and (max-width: 768px ) {
            width:40%;
        }
float:left;
height:auto;
width:50%;
border:double;
text-align:center;
padding:25px;
}
#content .ls-box ul.rig-list{
        @media all and (max-width: 768px ) {
           float:none;
        }
float:right;
}
#content .ls-box ul.rig-list li{
list-style:none;
font-size:15px;
}
#content .ls-box ul.rig-list li strong{
color:var(--textColor);
}

#content .ls-box ul.pic-list{
float:left;
}
#content .ls-box ul.pic-list li{
list-style-type:none;
padding-top:10px;
}
#content .ls-box ul.rig-list label{
color:#ccffdd;
font-size:25px;
font-weight:500;
}
#content .ls-box img{
height:200px;
width:250px;
border-radius:10px;
border:solid;
border-color:var(--borderColor);
}
#content .rs-box{
float:right;
height:auto;
width:40%;
text-align:center;
padding:25px;
}

section#body1{
    margin:auto;
    text-align:center;
}
section#body2{
    margin:auto;
    text-align:center;
}

/*Footer*/

#footer{
background-color: rgba(0, 0, 0);
  color: var(--textColor);
  text-align: center;
  position: absolute;
  bottom: 0;
  width: 100%;
  height:125px;
}
#footer .social{
    margin:auto;
    padding-top:15px;
}
#footer .social ul.footer-social{
    padding:15px;
}
#footer .social ul.footer-social li{
    list-style-type:none;
    display:inline-block;
}
#footer .social ul.footer-social li a{
    color:var(--iconColor);
}
#footer .social ul.footer-social li a:hover{
    color:var(--hoverColor);
}
#footer .lc{
    position:absolute;
    left:25%;
}
#footer .rc{
        position:absolute;
    right:25%;
}
#footer p{
    text-align:center;
    color:var(--textColor);
    padding:5px;
  position: absolute;
bottom:0;
  left: 50%;
  transform: translate(-50%);
}

/*SCHEDULE*/

#sched-container{
    width:75%;
    margin:auto;
}

#sched-container .sched-ls{
    float:left;
    width:45%;
    text-align:center;
}
#sched-container .sched-ls li{
    list-style-type:none;
    font-size:20px;
}
#sched-container .sched-ls hr{
 margin:10px;
}
#sched-container .sched-ls li.offline{
    color:var(--offlineColor);
}
#sched-container .sched-ls li.online{
    color:var(--onlineColor);
}
#sched-container .sched-rs{
    float:right;
    text-align:center;
    width:45%;
}
#sched-container .sched-rs li{
    list-style-type:none;
    font-size:20px;
}
#sched-container .sched-rs hr{
 margin:10px;
}
#sched-container .sched-rs li.offline{
    color:var(--offlineColor);
}
#sched-container .sched-rs li.online{
    color:var(--onlineColor);
}

/*VIDEOS*/

#video-list{
       @media all and (max-width:760px){
           width:100%;
}
    width:75%;
    margin:auto;
}
#video-list iframe{
    border:solid;
    border-color:var(--borderColor);
    border-radius:10px;
    margin:25px;
}
#video-list table tr {
           @media all and (max-width:768px){
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
}

/*MY Work*/

#mc-box{
    height:300px;
    border:solid;
    border-color:#ff0000;
    padding:25px;
    margin:auto;
    width:75%;
}
#mc-box ul{
    padding:25px;
}
#gta-box{
    height:250px;
    border:solid;
    border-color:#ff0000;
    padding:25px;
    margin:auto;
    width:75%;
}