/*@import "https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700,800,900";*/
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;500;600;700;800;900');

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

:root {
  --blue: #4e73df;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #e74a3b;
  --orange: #fd7e14;
  --yellow: #f6c23e;
  --yellow-light: #f6c23e;
  --green: #00ff00; /*#1cc88a;*/
  --teal: #20c9a6;
  --cyan: #36b9cc;
  --black: #000;
  --white: #fff;
  --gray: #858796;
  --gray-light: #858796;
  --gray-dark: #5a5c69;
  
  --primary: #6d00c6;
  --primary-2: #0039ad;/*#4a00bb; */
  --secondary: #b8b2c6;
  --highlight: #3fded9;
  --text-color: #333;
  --link: #325bd7;/*#17b9b5; #4e73df #4375c4*/
  --nav-color: #a9a1a9;      
  --nav-color-hover: #fff;
  --text-color: #403f42;
  --text-color-light: #b8b2c6;
  --text-color-dark: #b8b2c6;
  --bg-color: #FFF;
  --bg-footer: #232327;
  --bg-footer-foot: #121213;
  
  --info: #d86bff;
  --warning: #f6c23e;
  --danger: #e74a3b;
  --light: #f8f8fb;
  --dark: #121243;

  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  
  --font-family-sans-serif: 'Source Sans Pro', Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

body {
    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-color: var(--bg-color);    
    /*background-image: url(https://cdn.fpages.live/kpad/images/bg-kpad-2.jpg);*/
    /*background-repeat: no-repeat;*/
    background-attachment: fixed;
   /* 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); 
}

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

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);
}


/*------------------------------------------------*/


#wrap, wrap, .wrap {
    display:flex;
    flex-direction: column;
    flex: 1 1;
    width: 100vw;
    min-height: 100vh;
}

#main, main, .main{
  display: flex;
  flex-direction: column;
  flex: 1 1;
  /*flex: auto;
  overflow: scroll;*/
  justify-content: center;
  /*min-height: calc(100vh-550px);*/
}

#content, content {
    display: flex;
    flex-direction: column;
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;  
    color:  var(--textcolor);
}

#sidebar {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

#header-wrap {
    display:flex;
    justify-content: space-around;
    /*background-color: var(--primary);*/
}
header {
    display: block;
    justify-content: space-between;
    width: 100%;
}
#header-logo {
    display: block;
    float: left;
    margin:auto;
    max-width:300px;
}
#header-logo:hover{
    opacity: 0.6;
    filter: alpha(opacity=60);
}

footer {
  display: flex;
  flex-direction: column;
  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-main{
    display: flex;
    flex-direction: column;
}
footer h1, footer h2, footer h3, footer h4{
    color: var(--secondary);
}
footer a{
    color: var(--secondary);
    font-weight: 400;
}
footer a:hover{
    color: var(--light);
}
footer ul{
     list-style: none;
}
.footer-col{
    text-align: center;
    flex: 1;
}
.footer-foot{
    display: flex;
    flex-basis: 60px;
    width: 100%;
    align-items: center;
    justify-content: center;
    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-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;
}
/*--media queries ------*/

@media (max-width: 571px) {
    
    header{
        width: 100vw;
    }
       
    .footer-col{
    border-bottom: 1px solid var(--highlight);
    }
    .footer-col:last-child{
        border-bottom: none;
    }

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

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

@media (min-width: 572px) {
        
    header{
        width: 100vw;
    }
    
    .d-md-block {
          display: block;
    }
    .d-md-inline {
        display: inline;
    }
  
    .d-md-inline-block {
        display: inline-block;
    }
}

@media (max-width: 991px) {
    #hidenav{
        display: none;
        width: 100vw;
        clear: both;
    }
    
    .navbar-toggler{
        float: right;
        display: flex;
    }
    /*
    .toggle-wrap{
        display: block;
    }*/
        
    .footer-col{
    border-bottom: 1px solid var(--highlight);
    }
    .footer-col:last-child{
        border-bottom: none;
    }
}

@media (min-width: 992px) {

    .navbar-toggler {
        display: none;
    }
    
    header{
        display: block;
        max-width: 1140px;
        margin-left: auto;
        margin-right: auto;
    }

    #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;
    }
    
    footer{
        align-items: center;
    }
    #footer-main{
        flex-direction: row;
        flex-wrap: nowrap;
        flex: 1 0;
        min-width: 992px;
        max-width: 1140px;
    }
    
    .footer-col{
        text-align: center;
        flex: 1 1 285px;
        /*min-width:285px;
        border: 1px solid var(--highlight);*/
    }
  
    .d-lg-block {
        display: block;
    }

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