@font-face{
    font-family: 'Philosopher-Bold';
    src: url('http://www.gravelcreek.com/assets/fonts/Philosopher-Bold.ttf'),
}

@font-face{
    font-family: Philosopher-Regular;
    src: url('./fonts/Philosopher-Regular.ttf'),
}

@font-face{
    font-family: Prosto;
    src: url('Prosto.ttf'),
}

body {
background: #F0F0F0;
margin: 0;
}

.content{
color: white;
width: 100%;
padding-top: 30vh;
text-transform: uppercase;
text-align: center;
}

.logo{
	max-width: 90%;
	width: 550px;
}

.logo-mini{
	max-width: 90%;
	width: 50px;
}

.logo-mini-login{
    max-width: 90%;
    width: 50px;
    padding-top: 8px;
}

header{
height: 35px;
background: white;
padding: 15px;
}

footer{
background: white;
bottom: 0;
position: fixed;
width: 100%;
height: 65px;
}

.tagline-footer{
text-align: center;
padding-top: 25px;
font-family: 'Droid Sans', sans-serif;
font-weight: 300;
font-size: 11px;
}


.contact-header{

color: black;
font-weight: 300;
text-align: right;
font-family: 'Droid Sans', sans-serif;
font-size: 14px;
padding-right: 3%;
padding-top: 1px;
float: right;
width: 160px;
}
.contact-header a{
text-decoration:none;
color:black;
width: 100%;
padding-right: 10px;
float: right;
padding-top: 5px;
  font-size: 16px;∂
}

@media screen and (max-width: 600px){
.content{
	padding-top: 50%;
}
}

.content-login{
width: 100%;
height: 100%
}

.left-content{
float: left;
width: 60%;
height: 100%;
text-align: center;
background: white;
}

.right-content{
    width: 40%;
    height: auto;
    margin: auto;
    padding-bottom: 20px;
    margin-top: 28px;
    background: white;
    border-radius: 25px;
    border: 3px solid #f9f8f8;
}

.left-content .logo{
width: 425px;
padding-top: 20%;
max-width: 90%;
}

.logo-signin{
    width: 40%;
    margin: auto;
    text-align: center;
}

.logo-signin a{
    margin: auto;
    width: 70%;
    text-align: center;
}

.login-form{
    padding-top: 35px;
    padding-left: 30px;
    padding-right: 30px;
    width: 225px;
    margin: 0 auto;
    max-width: 60%;
    font-family: 'Droid Sans', sans-serif;
    font-size: 14px;

    

}

.login-text{
    padding-top: 20px;
    padding-left: 30px;
    padding-right: 30px;
    
}

.forgot-password{
    padding-left: 90px;
    padding-right: 30px;
    line-height: 1;
    font-size: 11px;
    text-decoration: underline;
}

.login-tagline{
    padding-top: 30px;
    padding-left: 30px;
    padding-right: 30px;
}

.login-body{
    background: white;
}

input{
    margin-bottom: 15px;
}

p{
    line-height: 1.4;
    font-family: 'Droid Sans', sans-serif;
    font-size: 14px;
}

@media screen and (max-width: 690px){


.right-content{
width: 70%;
}
.login-tagline{
    padding-top: 25px;
}
.logo-signin{
    width: 60%;
}
.login-text{
    padding-top: 15px;
}
.login-form{
    padding-top: 30px;
}
.forgot-password{
    padding-left: 45px;
}
p{
 line-height: 1.3;
}
input{
    margin-bottom: 10px;
}
}

@media screen and (max-width: 320px){
.login-tagline{
    padding-top: 0px;
}
.login-text{
    padding-top: 0px;
}
.login-form{
    padding-top: 3px;
}

}