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


header {
    width:100%;
    height:220px;
    text-align:center;
    padding:1rem 0 0 0;
}

.logo {
    background:#fff url('assets/elbeans-compact.png') no-repeat;
    background-size:cover;
    width:100px;
    height:100px;
    display:inline-block;
    margin-left:auto;
    text-decoration:none;
}

.brand {
    position:relative;
    display:inline-block;
    font-size:40px;
    padding-top:12px;
    margin-left:10px;
    margin-right:auto;
    text-transform:uppercase;
    font-weight:bold;
    font-weight:500;
    margin-top:3px;
    vertical-align:top;
}


.brand em {
    color:#fa7c01;
    font-style:normal;
    font-size:60px;
    font-weight:400;
}
.brand b {
    font-style:normal;
    font-size:60px;
    font-weight:400;
}

.brand i {
    position:absolute;
    font-style:normal;
    font-size:60px;
    font-weight:400;
    color:white;
    left:58.5px;
    top:17px;
}

.button-box {
    display:block;
    margin:auto;
    width:96vw;
    height:60px;
    text-align:center;
    margin-bottom:10px;
    margin-top:20px;
}



header button {
    width: 26vw;
    height: 12.9vw;
    padding:10px;
    font-size:4.7vw;
    border-radius:10px;
    border:1px solid #aaa;
    margin:0 2px 0 2px;
    cursor:pointer;
    transition:all .2s;
}

.get-in-touch {
    background-color:#ddd;
    color:#333;
    width: 160px;
}

.get-in-touch:hover {
    background-color:darkkhaki;
    color:white;
}

.about {
    background-color:#fa7c01;
    color:#fff;
}

.about:hover {
    background-color:darkkhaki;
    color:white;
}


.login {
    background-color:#000;
    color:#fff;
}

.login:hover {
    background-color:darkkhaki;
    color:white;
}

.main {
    font-size:20px;
}

.padded-main {
    width:100%;
    padding:10px;
    overflow:hidden;
    border-top:1px solid #aaa;
    font-size:20px;
}


.l-column {
    width:90%;
    height:auto;
    padding:0;
    margin:auto;
}

.r-column {
    width:39%;
    height:auto;
    float:right;
    display:none;
}

.r-column-slim {
    width:33%;
    height:100rem;
    float:right;
    background:#fff url(assets/reg-page-feature.jpg) center 0 no-repeat;
    background-size:auto 100%;
    display:none;
}



h1 {
    font-size:44px;
    font-weight:bold;
    color:black;
    text-align:center;
}

em {
    color:#fa7c01;
    font-style:normal;
}

h3 {
    font-size:34px;
    color:#fa7c01;
    font-weight:400;
    text-align:center;
}


h2 {
    font-size:30px;
    font-weight:bold;
    color:black;
    margin-top:0;
}

h4 {
    font-size:18px;
    color:black;
}



.form-pair {
    width:100%;
    height:100px;
    display:block;
    float:left;
    position:relative;
}

.l-short {
    width:100%;

}
.r-short {
    width:100%;
}

.form-pair label {
    font-size:18px;
    width:100%;
    height:70px;
    margin-bottom:10px;
}

.form-pair input {
    font-size:20px;
    width:100%;
    height:40px;
    outline:none;
    border-radius:7px;
    border:1px solid #aaa;
    padding:5px 10px 5px 10px;
    margin-top:10px;
}

.form-pair button {
    font-size:24px;
    width:90%;
    height:70px;
    color:white;
    background:black;
    border-radius:10px;
    margin:auto;
    cursor:pointer;
    margin-bottom:10px;
}

.skip-down {
    margin-top:5rem;
}

footer {
    width:100%;
    height:80px;
    padding:20px 50px 0 30px;
}

.socmed {
    width:30px;
    height:30px;
    background-size:cover;
    display:inline-block;
    margin-right:12px;
    cursor:pointer;
    opacity:.5;
    transition:all .2s;
}


.areas {
    position:absolute;
    left:0;
    top:76px;
    width:100%;
    min-height:50px;
    max-height:250px;
    background:white;
    box-shadow:0 1px 3px 1px rgba(0,0,0,.5);
    z-index:2;
    overflow-x:hidden;
    overflow-y:scroll;
}

.dropdown span {
    width:100%;
    font-size:20px;
    padding:5px;
    display:block;
    cursor:pointer;
}

.dropdown span:hover {
    background:darkkhaki;
}

.dropdown .current {
    background:darkkhaki;
}


.checkbox {
    border:2px solid #aaa;
    background:white;
    width:40px;
    height:40px;
    position:relative;
    display:inline-block;
    cursor:pointer;
    border-radius:7px;
    transform-origin:center;
}


.checkbox .checkmark {
    border-left:12px solid green;
    border-bottom:12px solid green;
    z-index:2;
    position:absolute;
    left:-5px;
    top:10px;
    opacity:0;
    width:0rem;
    height:0rem;
    transform: rotate(-45deg) ;
    transform-origin:0 0;
}

.checked {
    animation: throb 1s forwards;
    animation-iteration-count: 1;   
}

.checked .checkmark {
  animation: check 1s forwards;
  animation-iteration-count: 1;    
  transition:all .2s;
}

@keyframes throb {
  0%  { transform:scale(1,1); }
  50% { transform:scale(1.2,1.2); } 
  100% { transform:scale(1,1); }
}


@keyframes check {
  0%  { width:12px;height:0; opacity:1;}
  50% { width:15px;height:30px;opacity:1; } 
  100% { width:50px;height:30px;opacity:1;}
}

.form-pair b {
    display:inline-block;
    width:70%;
    font-size:17px;
    margin-left:20px;
    vertical-align:top;
    padding-top:10px;
}

.compact {
    height:70px;
}

.alert {
    margin-top:0;
    margin:auto;
    width:100%;
    height:80px;
    padding:25px 10px 5px 10px;
    font-size:14px;
    text-align:center;
    color:darkred;
    transition:all .5s;
    opacity:0;
    float:left;
    vertical-align:middle;
}

.msg-ok {
    color:lightgreen;
}    

.drop {
    opacity:1;
}
.privacy-notice {
    padding:5rem 10% 5rem 10%;
    font-size:20px;
}


.privacy-notice p, .privacy-notice ul {
    font-size:22px;
}

.privacy-notice h4 {
   font-size:24px;
}

.back-home-btn {
    width: 50%;
    height: 60px;
    padding:10px;
    font-size:22px;
    border-radius:30px;
    border:1px solid #aaa;
    margin:auto;
    margin-top:60px;
    margin-bottom:120px;
    cursor:pointer;
    transition:all .2s;
    background-color:black;
    color:white;
    text-decoration:none;
    display:block;
}


.back-home-btn:hover {
    background-color:#fa7c01;
}


.half-width {
    width:80%;
    margin:auto;
}



.hero {
    width:98vw;
    height:100vh;
    position:relative;
    background:white url(assets/tara.jpg) center top no-repeat;
    background-size:auto 100%;
}


} /* mq-end 1200px */