body {
    display: flex;
    font-family: var(--font-family-sans-serif);
    font-weight: 300;
    /*min-height:100vh;
    background: transparent linear-gradient(157deg, var(--primary) 25%, var(--primary-2) 100%) no-repeat fixed 0% 0%;
    */  
    background: radial-gradient(50% 100% at 90% 90%, var(--primary-2) 30%, var(--primary) 100%), linear-gradient(127.43deg, var(--primary-2) 10%, var(--primary) 100%);
    background-blend-mode: screen;
    background-attachment: fixed;
    
    /*background: var(--bg-color);*/
    /*background-color: var(--bg-color);    
    background-image: url(var(--bg-image));
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;*/
  }

p { 
    font-size: 1.1em;
    line-height: 1.5em;
    color: var(--textcolor);
}

a {
    color: var(--highlight);
    text-decoration: none;
    transition: all 0.2s;
    font-weight: bold;
}

a:hover,
a:focus {
    color: var(--secondary);
}

h1, h2, h3 {
    color: var(--highlight);
    text-transform: uppercase; 
}

h1 {
    font-size: 1.5em;
}
h2 {
    font-size: 1.3em;
}
h3 {
    font-size: 1.1em;
}

h1, h2, h3, p {
    line-height:24px;
    margin:10px;
}

ul, ol, li {   
    line-height:24px;
}

form{
    border-radius: 8px;
    /*background-color: white;/* #1c1719;*/
    background: transparent linear-gradient(180deg, rgba(0, 0, 0, 0.20) 10%, rgba(0, 0, 0, 0.40) 90%);
    /*box-shadow: 3px 3px 2px #3fded9, -3px -3px 2px #3fded9;*/
    color: var(--light);
}

form h1, h2, h3{
    /*color:#3fded9;*/
    color: var(--highlight);
}

.card {
    background: transparent linear-gradient(180deg, rgba(0, 0, 0, 0.20) 10%, rgba(0, 0, 0, 0.40) 90%);
    color: var(--white);
}

/* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */

header{
    /*background-color: var(--primary);*/
}

.header-wrap {
    display:flex;
    max-width: var(--breakpoint-xl);
}

main{
    /*max-width: var(--breakpoint-xl);*/
}

content {
    color:  var(--textcolor);
}

sidebar {
}

footer {
  color: white;
  background: transparent linear-gradient(180deg, rgba(0, 0, 0, 0.25) 10%, rgba(0, 0, 0, 0.40) 90%);
  /*background: var(--bg-footer);*/
}

.footer-wrap{
    max-width: var(--breakpoint-xl);
}
footer h1, footer h2, footer h3, footer h4{
    color: var(--secondary);
}
footer a{
    color: var(--secondary);
    font-weight: 400;
}
footer a:hover{
    color: var(--highlight);
}

.footer ul{}

.footer-col{}

.footer-foot{
    background-color: var(--bg-footer-foot);   
}
.footer-info{
    color: var(--secondary);
}


/**********------reg form customisations-----------------***********/


#register-form
{
    background: white;
}

#register-top-panel
{
    border-radius:8px;
    background: white;
}

#register-referrer{
    border: 1px solid var(--highlight);
    border-radius: 10px;
}

#register-referrer p {
    color: var(--highlight);
}

#register-form .input, .select{ 
    width:275px;
    height:40px;
    padding-left: 5px; 
    border: 1px solid gray;
    border-radius:8px;
    background: white;
    font-weight:400;
    font-size:1.0em;
    margin:0 0 5px 0;
}

.subheading{
    font-weight:bolder;
    font-size:1.0em;
    margin:10px auto 10px auto;
    border-bottom: 1px solid lightgray;
}

#register a
{
    font-size: 2.0em;
    font-weight:bold;
    color: blue;
}

#register-button
{
    width: 265px;
    height: 65px;
    border-radius:8px;
    background-color: limegreen;
    font-size: 24px;
    font-weight: bold;
    color: white;
}
#register-button:hover
{
    cursor: pointer;
    color: var(--highlight);
    background-color: green;
}


/*-----------custom utility classes-----------------*/


.w-max-1200{
    max-width:1200px;
}
.w-max-1140{
    max-width:1140px;
}
.w-320{
    flex-basis: 320px;
}
.h-240{
    height: 240px;
}
.fb-972 {
    flex:1;
    flex-basis:972px;
}
.fb-1140 {
    flex:1;
    flex-basis:1140px;
}
.fb-1200 {
    flex:1;
    flex-basis:1200px;
}
/*--media queries ------*/

@media (max-width: 576px) {
    
    header{
        width: 100vw;
    }
       
    w-sm{
        width: 100%;
    }
    
    .d-sm-block {
        display: block;
    }
    .d-sm-inline {
        display: inline;
    }

    .d-sm-inline-block {
        display: inline-block;
    }
}

@media (min-width: 576px) {
        
    header{
        width: 100vw;
    }
    
    .d-md-block {
          display: block;
    }
    .d-md-inline {
        display: inline;
    }
  
    .d-md-inline-block {
        display: inline-block;
    }
}
@media only screen and (max-width: 768px) {
    
        #hidenav{
        display: none;
        width: 100vw;
        clear: both;
    }
    
    .navbar-toggler{
        float: right;
        display: flex;
    }
    
    .footer-col{
        border-bottom: 1px solid var(--highlight);
    }
    .footer-col:last-child{
        border-bottom: none;
    }
    
}
@media only screen and (min-width: 768px) {
 
    .navbar-toggler {
        display: none;
    }
    .header-wrap{
        width: 100%;
    }
    
    #hidenav{
        display: block;
        float:right;
        border-top: none;
        margin-top: 10px;
    }
    nav ul{
        display: flex;
        flex-direction: row;
    }
    nav ul li{
        display: inline-block;
        border-bottom: none;
    }
    
    .navbar{
        flex-direction: row; 
    }
    
    footer{
        align-items: center;
    }
    .footer-wrap{
        width:100%;
        flex-direction: row;
        flex-wrap: nowrap;
    }
    
    .footer-col{
        /*text-align: center;*/
        flex: 1 1 300px;
        /*min-width:285px;*/
        border-bottom: none;
    }
}

@media (max-width: 992px) {

    /*
    .toggle-wrap{
        display: block;
    }
        
    .footer-col{
      border-bottom: 1px solid var(--highlight);
    }
    .footer-col:last-child{
        border-bottom: none;
    }*/
}

@media (min-width: 992px) {
    .header-wrap{
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
    }
    

    .d-lg-block {
        display: block;
    }

    .d-lg-inline {
        display: inline;
    }
  
    .d-lg-inline-block {
        display: inline-block;
    }
}