* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Helvetica", Arial, sans-serif;
}
a:link {
color: #fff;
text-decoration: none;
}
a:hover {
color: #000;
text-decoration: underline;
}
.mobile-text h4{
font-weight: 600;
}

.footer a{
color: #333;
}
.main-content{
width: 50%;
border-radius: 20px;
box-shadow: 13px 13px 20px #cbced1, -13px -13px 20px #fff;
margin: 5em auto;
display: flex;
}
.company__info{
background-color: #008080;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
display: flex;
flex-direction: column;
color: #fff;
}
.row > h3{
color:#008080;
}
.login_form{
background-color: #fff;
border-top-right-radius:20px;
border-bottom-right-radius:20px;
border-top:1px solid #ccc;
border-right:1px solid #ccc;
border-left: 1px solid #ccc;
}
form{
padding: 0 2em;
}
.form__input{
width: 100%;
border:0px solid transparent;
border-radius: 0;
border-bottom: 1px solid #aaa;
padding: 1em .5em .5em;
padding-left: 2em;
outline:none;
margin:1.5em auto;
transition: all .5s ease;
}
.form__input:focus{
border-bottom-color: #008080;
box-shadow: 0 0 5px rgba(0,80,80,.4); 
border-radius: 4px;
}
.btn{
transition: all .5s ease;
width: 70%;
border-radius: 30px;
color:#008080;
font-weight: 600;
background-color: #fff;
border: 1px solid #008080;
margin-top: 1.5em;
margin-bottom: 1em;
}
.btn:hover, .btn:focus{
background-color:#008080;
color:#fff;
}
.logo {
width: 150px;
height: 100px;
}
.links {
color: #fff;
font-size: 18px;
padding-top: 5px;
border-radius: 50%;
width: 35px;
cursor: pointer
}
.button{
transition: all .5s ease;
width: 35%;
border-radius: 10px;
color:#008080;
border: 0px solid #008080;
margin-bottom: 1em;
padding: 5px 5px;
}
.button:hover, .button:focus{
background-color:#000;
color:#fff;
}	
@media screen and (min-width: 325px) and (max-width: 640px) {
.main-content{
width: 100%;
display: flex;
flex-direction: column;
}
.company__info{
display: flex;
border-top-right-radius: 20px;
border-bottom-left-radius: 0px;
font-size: small;
}
.img{
text-align: center;
}
.button{
width: 25%;
}
.button:hover, .button:focus{
background-color:#000;
color:#fff;
}
hr{
display:none
}
.mobile-text > h4{
font-size:small;
margin-top: 0px;
margin-bottom: 0px;
}
.mobile-text > h5{
font-size:x-small;
margin-top: 5px;
margin-bottom: 5px;
}
.login_form{
border-bottom-right-radius: 20px;
border-bottom-left-radius:20px;
border-top-right-radius: 0px;
}
}
@media screen and (min-width: 642px) and (max-width:992px){
.main-content{width: 70%;}
.button{
width: 50%;
}
.button:hover, .button:focus{
background-color:#000;
color:#fff;
}
}