/*
File: style.css
Author: Gijs de Jong
*/

body {
background-color: #fff;
}

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

#wrapper {
width: 100%;
height: 100vh;
display: none;
overflow: hidden;
font-family: 'Open-Sans', sans-serif;
}

#loading {
width: 0px;
height: 4px;
position: absolute;
background-color: #444;
}

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

#s2slogo {
width: 320px;
height: auto;
position: absolute;
top: -370px; left: 0px; bottom: 0px; right: 0px;
margin: auto;
z-index: 99;
}

#s2slogohigh {
width: 320px;
height: auto;
position: absolute;
left: 0px; right: 0px;
margin-top: 30px; margin-left: auto; margin-right: auto;
z-index: 99;
}

.hr {
width: 500px;
height: 2px;
position: absolute;
left: 0px; right: 0px;
margin-top: 85px; margin-left: auto; margin-right: auto;
border: 0;
background-color: #444;
}

#login {
width: 320px;
height: 400px;
position: absolute;
top: 0px; left: 0px; bottom: 0px; right: 0px;
margin: auto;
display: none;
}

.loginfootertext {
margin-top: 250px;
margin-bottom: 20px;
text-align: center;
font-size: 14pt;
color: #444;
}

.registerfootertext {
margin-top: 364px;
margin-bottom: 20px;
text-align: center;
font-size: 14pt;
color: #444;
}

.forgotpasswordfootertext {
margin-top: 250px;
margin-bottom: 20px;
text-align: center;
font-size: 14pt;
color: #444;
}

.signin, .register, .forgotpassword {
transition: 0.3s;
cursor: pointer;
}

.signin:hover, .register:hover, .forgotpassword:hover {
color: #0080b5;
}

#loginform {
width: 320px;
height: 210px;
position: absolute;
top: 0px; left: 0px; bottom: 0px; right: 0px;
margin: auto;
background-color: #0080b5;
box-shadow: 0px 0px 4px #444;
border-radius: 2px;
}

#register {
width: 675px;
height: 455px;
position: absolute;
top: 55px; left: 0px; bottom: 0px; right: 0px;
margin: auto;
display: none;
}

#registerform {
width: 320px;
height: 322px;
position: absolute;
top: 0px; left: 0px; bottom: 0px; right: 0px;
margin: 95px 0px 0px 0px;
background-color: #0080b5;
box-shadow: 0px 0px 4px #444;
border-radius: 2px;
}

input[name="registerpassword"] {
position: absolute;
top: 196px;
left: 345px;
}

input[name="registerconfirmpassword"] {
position: absolute;
top: 253px;
left: 345px;
}

#passwordrequirements {
width: 320px;
height: 150px;
background-color: #fff;
position: absolute;
top: 0px; left: 0px; bottom: 0px; right: 0px;
margin: 95px 0px 0px 345px; /*179px 0px 0px 345px*/
box-shadow: 0px 0px 3px #444;
border-radius: 2px;
}

.prtext {
color: #444;
font-size: 14pt;
margin-top: 10px;
margin-bottom: 10px;
text-align: center;
}

.passwordrequirementslist {
list-style-type: disc;
margin-bottom: 10px;
margin-left: 28px;
color: #666;
font-size: 12pt;
}

.passwordrequirementslist li {
margin-bottom: -6px;
}

#passworddiv {
width: 320px;
height: 152px;
position: absolute;
background-color: #0080b5;
box-shadow: 0px 0px 4px #444;
top: 0px; left: 0px; bottom: 0px; right: 0px;
margin: 265px 0px 0px 345px;
border-radius: 2px;
z-index: -1;
}

#forgotpassword {
width: 320px;
height: 400px;
position: absolute;
top: 0px; left: 0px; bottom: 0px; right: 0px;
margin: auto;
display: none;
}

#forgotpasswordform {
width: 320px;
height: 210px;
position: absolute;
top: 0px; left: 0px; bottom: 0px; right: 0px;
margin: auto;
background-color: #0080b5;
box-shadow: 0px 0px 4px #444;
border-radius: 2px;
}

.formtext {
color: #444;
font-size: 18pt;
margin-top: 50px;
margin-bottom: 2px;
text-align: center;
}

.input {
width: 252px;
height: 40px;
margin-left: 25px;
margin-bottom: 15px;
padding-left: 8px;
padding-right: 8px;
box-shadow: 0 0 3px #444;
border: 1px solid transparent;
border-radius: 2px;
transition: 0.2s;
color: #444;
font-size: 12pt;
}

.ninput {
width: 252px;
height: 40px;
margin-left: 25px;
margin-bottom: 15px;
padding-left: 8px;
padding-right: 8px;
box-shadow: 0 0 3px #444;
border: 1px solid transparent;
border-radius: 2px;
transition: 0.2s;
color: #444;
font-size: 12pt;
background-color: #eee;
cursor: default;
}

.submit {
width: 270px;
height: 40px;
margin-left: 25px;
background-color: #fff;
box-shadow: 0 0 3px #444;
border: 1px solid transparent;
border-radius: 2px;
transition: 0.2s;
color: #444;
font-size: 12pt;
cursor: pointer;
}

.input:hover, .submit:hover {
box-shadow: 0 0 5px #444 !important;
}

.input:focus {
border: 1px solid #0080b5;
box-shadow: 0 0 3px #444;
}

.submit:active {
border: 1px solid #0080b5;
box-shadow: 0 0 3px #444;
}

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

#header {
position: fixed;
width: 100%;
height: 90px;
background-color: #444;
z-index: 9;
}

#s2slogoheader {
width: auto;
height: 50px;
margin-top: 20px;
margin-left: 40px;
position: fixed;
transition: 0.2s;
}

#s2slogoheader:hover {
margin-left: 45px;
}

#headernav {
width: auto;
height: 90px;
line-height: 90px;
text-align: center;
text-transform: uppercase;
}

.headernava {
font-family: 'Open-Sans', sans-serif;
color: #999;
margin-left: 25px;
padding-left: 5px; padding-right: 5px;
font-size: 13pt;
font-weight: 700;
transition: 0.4s;
cursor: pointer;
text-decoration: none;
}

.headernava:hover {
color: #fff !important;
}

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

#profile {
width: 320px;
height: 266px;
position: absolute;
top: 0px; left: 0px; bottom: 0px; right: 0px;
margin: auto;
background-color: #0080b5;
box-shadow: 0px 0px 4px #444;
border-radius: 2px;
}

.profiletext {
color: #444;
font-size: 18pt;
margin-top: -35px;
text-align: center;
}

#userinfo {
width: 320px;
height: 266px;
position: absolute;
top: 0px; left: 0px; bottom: 0px; right: 0px;
margin: auto;
font-family: 'Open-Sans', sans-serif;
font-size: 13pt;
}

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

#receive {
margin-top: 120px;
width: 100%;
height: 90vh;
display: none;
}

#steps {
width: 400px;
height: auto;
margin: 110px auto 0px auto;
background-color: red;
font-family: 'Open-Sans', sans-serif;
text-align: center;
font-size: 13pt;
}

.stepstext {
text-align: center;
}

.step1, .step2, .step3 {
margin-left: 8px; margin-right: 8px;
padding-left: 4px; padding-right: 4px;
transition: 0.3s;
cursor: pointer;
}

.step1:hover, .step2:hover, .step3:hover {
color: #0080b5;
}

.step1border, .step2border, .step3border {
padding-left: 4px; padding-right: 4px;
transition: 0.3s;
border-bottom: 3px solid transparent;
}

#subjects {
width: 50vw;
height: auto;
position: absolute;
left: 0px; right: 0px;
margin: 30px auto 0px auto;
display: none;
}

.subject1, .subject2, .subject3 {
width: 270px;
height: 60px;
text-align: center;
line-height: 60px;
margin-bottom: 25px;
background-color: #fff;
box-shadow: 0 0 3px #444;
border: 1px solid transparent;
border-radius: 2px;
transition: 0.2s;
color: #444;
font-size: 12pt;
cursor: pointer;
}

.subject1 {
margin-top: 0px;
margin-left: 0px;
margin-right: auto;
}

.subject2 {
margin-top: 0px;
margin-left: calc((50vw - 270px) / 2);
margin-right: 0px;
}

.subject3 {
margin-top: 0px;
margin-left: auto;
margin-right: 0px;
}

.subject1:hover, .subject2:hover, .subject3:hover {
box-shadow: 0 0 5px #444 !important;
}

.subject1:active, .subject2:active, .subject3:active {
border: 1px solid #0080b5;
box-shadow: 0 0 3px #444;
}

#calendar {
width: 76vw;
height: 56vh;
position: absolute;
left: 0px; right: 0px;
margin: 30px auto 0px auto;
font-family: 'Open-Sans', sans-serif;
text-align: center;
font-size: 13pt;
color: #444;
line-height: 8vh;
background-color: #fff;
box-shadow: 0px 0px 4px #444;
border-radius: 2px;
display: none;
}

.calendarday {
width: calc(76vw / 5);
font-weight: 700;
background-color: #fff;
border: 3px solid #0080b5;
border-bottom: 4px solid #0080b5;
transition: 0.2s;
}

.calendarhour {
font-weight: 400;
background-color: #fff;
cursor: pointer;
border: 3px solid #0080b5;
transition: 0.2s;
}

.calendarhour:hover {
background-color: #f1f1f1;
}

#match {
width: 600px;
height: 56vh;
position: absolute;
left: 0px; right: 0px;
margin: 30px auto 0px auto;
text-align: center;
font-family: 'Open-Sans', sans-serif;
font-size: 13pt;
color: #444;
}

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

#give {
margin-top: 120px;
width: 100%;
height: 90vh;
display: none;
}

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

#accountloading {
width: 0px;
height: 4px;
position: absolute;
bottom: 52px;
background-color: #444;
}

#footer {
width: 100%;
height: 40px;
position: absolute;
bottom: 0px;
color: #444;
font-size: 14pt;
}

.copy {
margin-left: 25px;
}

.credit {
float: right;
margin-right: 25px;
}

.about, .creditlink {
cursor: pointer;
transition: 0.3s;
}

.logout {
width: 68px;
position: absolute;
left: 0px; right: 0px;
margin-left: auto; margin-right: auto;
text-align: center;
cursor: pointer;
transition: 0.3s;
}

.home {
width: 60px;
position: absolute;
left: 0px; right: 0px;
margin-left: auto; margin-right: auto;
text-align: center;
cursor: pointer;
transition: 0.3s;
}

.about:hover, .logout:hover, .creditlink:hover,  .home:hover {
color: #0080b5;
}

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

#generate {
width: 270px;
height: 60px;
text-align: center;
line-height: 60px;
margin: 50px auto;
background-color: #fff;
box-shadow: 0 0 3px #444;
border: 1px solid transparent;
border-radius: 2px;
transition: 0.2s;
color: #444;
font-size: 12pt;
cursor: pointer;
}

#generate:hover {
box-shadow: 0 0 5px #444 !important;
}

#generate:active {
border: 1px solid #0080b5;
box-shadow: 0 0 3px #444;
}

.gentext {
width: 500px;
font-family: 'Open-Sans', sans-serif;
text-align: center;
font-size: 13pt;
color: #222;
margin: 105px auto 0px auto;
}

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

#about {
}

.abouttitle {
font-family: 'Open-Sans', sans-serif;
text-align: center;
font-size: 16pt;
color: #222;
margin: 115px auto 0px auto;
}

.abouttext {
width: 500px;
font-family: 'Open-Sans', sans-serif;
text-align: left;
font-size: 13pt;
color: #222;
margin: 20px auto 0px auto;
}

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

@media (max-width: 705px) and (max-height: 852px) {

#s2slogo {
margin: 20px auto 0px auto;
top: 0px;
}

#login {
top: 0px;
margin: 30px auto 0px auto;
}

#register {
width: 320px;
height: 820px;
top: 0px;
margin: 30px auto 0px auto;
}

#forgotpassword {
top: 0px;
margin: 30px auto 0px auto;
}

#registerform {
margin: 95px auto 0px auto;
}

#passwordrequirements {
margin: 438px auto 0px auto;
}

#passworddiv {
margin: 609px auto 0px auto;
}

input[name="registerpassword"] {
top: 540px;
left: 0px;
}

input[name="registerconfirmpassword"] {
top: 597px;
left: 0px;
}

.registerfootertext {
margin-top: 705px;
}

}

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

@media (max-width: 705px) and (min-height: 852px)  {

#s2slogo {
margin: 20px auto 0px auto;
top: 0px;
}

#login {
top: 0px;
margin: auto;
}

#register {
width: 320px;
height: 820px;
top: 0px;
margin: auto;
}

#forgotpassword {
top: 0px;
margin: auto;
}

#registerform {
margin: 95px auto 0px auto;
}

#passwordrequirements {
margin: 438px auto 0px auto;
}

#passworddiv {
margin: 609px auto 0px auto;
}

input[name="registerpassword"] {
top: 540px;
left: 0px;
}

input[name="registerconfirmpassword"] {
top: 597px;
left: 0px;
}

.registerfootertext {
margin-top: 705px;
}

}