@import url("base/normalize.css"); 
@import url("base/userpicks.css"); /* generated by settings */
@import url("base/default.css"); 

/* Small fixes by us */
.head .logo img{ height: 60px;}
nav ul {list-style: none; margin: 0px;} 
nav ul li { display: inline-block; margin: 0px; padding: 0px;line-height: 50px; color: #fff; }
.clickdrop>div {padding: 0px 30px; }
nav ul li a { display: block;  color: #fff; padding: 0px 30px;}
nav ul li ul {background-color: var(--primary);}
.clickdrop>ul { min-width: 150px;}
.roundleft {  border-bottom-left-radius: 40px; }
.roundleft a:hover {  border-bottom-left-radius: 40px; transition: ease-in-out; }

body>main, body>aside { padding: 100px 60px; }
.color1 { background: linear-gradient(147.43deg, var(--primary) -0.25%, var(--secondary) 102.85%); color:#fff;} 
.color1 a:hover {background: linear-gradient(147.43deg, var(--secondary) -0.25%, var(--primary) 102.85%);  }
.student    { width: 100%; min-height: 100vh; background: linear-gradient(147.43deg, var(--primary) -0.25%, var(--secondary) 102.85%); color:#fff;} 
.rectangle  { width: 200px; height: 120px; background: linear-gradient(142.91deg, var(--primary) 4.32%, rgba(11, 49, 182, 0) 96.05%); }

.loginpage form {  padding: 20vh 0px 0px; text-align: center;}
.loginpage form h2 { text-transform: uppercase; padding:0px 0px 20px; }
.loginpage form label { padding: 10px 0px 0px; }
.loginpage form input {    margin:10px 0px;    line-height: 30px;    text-align:center;    border:0px; }
.loginpage form button { margin:10px 0px;  line-height: 30px;width: 100%; background-color: var(--secondary); color:white; text-transform:uppercase; }
.loginpage a { color:white; text-transform: capitalize; font-style: italic;}
.loginpage .terms { font-size: 12px;}

#landing { background: url('../../media/cover/cover01.jpg') no-repeat; background-size: cover; min-height: 100vh; text-align: center; display: grid; grid-template-columns: 400px 400px;  align-content: flex-start;  padding: 30vh 0px 0px 15vw; 
    grid-template-areas:"SH SF"
    "SM SF"
    "SB SF";
}
#landing header         { position:relative; z-index: 1; display: block;}
#landing header h1     { text-transform: uppercase; width:250px; margin:0px auto; z-index: 2; font-size: 40px; }
#landing header span    { position: absolute; z-index: -1; left: 20px; right: 20px; top: 30px; bottom: 25px; background: linear-gradient(147.43deg, var(--primary) -0.25%, var(--secondary) 102.85%); opacity: 0.5;} 
#landing figure img { position:absolute; width: 80px; left: 60px; bottom: 60px;  }
#landing a { background: var(--secondary); color: #fff; line-height: 30px; padding: 0px 20px; display: inline-block; margin: 20px auto; border-radius:3px; text-transform: uppercase; }
#landing a:hover { background: var(--primary); transition: ease-in; }

.section01 { 
    padding: 50px 0px;
    align-items: center;
    grid-template-areas:"SH SF"
						"SM SF"
                        "SB SF";
    }
    .section01 header { align-self: end; text-align: center; text-transform: uppercase; position: relative; z-index: 1;}
    .section01 header h1 { z-index: 1;}
    .section01 header span    { position: absolute; z-index: -1; left: 20vw; right: -20vw; top: 27px; height: 50px; background: linear-gradient(147.43deg, var(--primary) -0.25%, var(--secondary) 82.85%); opacity: 0.5;} 
    .section01.reverse header span { left: -20vw; right: 20vw;}
    .section01 main    { align-self: start; padding: 20px 20px 0px; }
    .section01 footer { align-self: start; text-align: center; }
.section01 figure img  { max-height: 90vh; max-width: 40vw; }
.section01 a {  background: var(--primary); color: #fff; line-height: 30px; padding: 0px 20px; display: inline-block; margin: 20px auto; border-radius:3px; text-transform: uppercase; }
.section01 a:hover { background: var(--secondary);transition: ease-in; }


.section01.reverse {
    grid-template-areas:"SF SH"
						"SF SM"
                        "SF SB";
}

.section01.white {
    background-color: #fff; color: #333;
}

@media screen and (max-width: 768px) {
#landing { grid-template-columns: 90%; background-position: 40%;}
#landing figure img { top: 15vh; left: 0px; right:0px; bottom: auto; margin: auto;}
.head nav   { background: linear-gradient(147.43deg, var(--primary) -0.25%, var(--secondary) 102.85%); }

.section01, .section01.reverse { 
    text-align: center;
    grid-template-areas:"SF SF"
                        "SH SH"
						"SM SM"
                        "SB SB";
    }
.section01 figure { width: 90%; margin: auto; text-align: center;}
.section01 figure img  {  max-width: 90vw; }

}