@font-face {
  font-family: Icons;
  src: url(/assets/elBeans-Font.otf);
}

html {
   font-size:.53vw;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
}


body {
    font-family: 'Open Sans', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f7f7ff;
    padding: 10px;
    margin: 0;
    padding:0;
    vertical-align:top;
    color:#333;
    overflow-x:hidden;
    font-size:3rem;
}



.main {
    width:100%;
    min-width:100vh;
}

@media only screen and (min-width: 1081px) {



header {
    width:100%;
    height:120px;
    text-align:right;
    padding:1rem 10rem 0 10rem;
}




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

.brand {
    position:relative;
    float:left;
    font-size:40px;
    padding-top:12px;
    margin-left:20px;
    text-transform:uppercase;
    font-weight:bold;
    font-weight:500;
}


.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 {
 float:right;
 width:480px;
 height:60px;
}

header button {
    width: 140px;
    height: 60px;
    padding:10px;
    font-size:22px;
    border-radius:10px;
    border:1px solid #aaa;
    margin:20px 0 0 10px;
    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;
}




.padded-main {
    width:100%;
    min-width:100vh;
    padding:100px;
    overflow:hidden;
    border-top:1px solid #aaa;
}

.l-column {
    width:60%;
    height:auto;
    float:left;
    padding:0 10rem 0 0;
}

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

.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%;
}



h1 {
    font-size:8.4rem;
    font-weight:bold;
    color:black;
}

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

h3 {
    font-size:4.3rem;
    color:#fa7c01;
    font-weight:400;
}


h2 {
    font-size:4rem;
    font-weight:bold;
    color:black;
}

h4 {
    font-size:2.5rem;
    color:black;
}



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

.l-short {
    width:48%;
    float:left;
}
.r-short {
    width:48%;
    float:right;
}

.form-pair label {
    font-size:1.7rem;
    width:100%;
    height:5rem;
}

.form-pair input {
    font-size:1.7rem;
    width:100%;
    height:5rem;
    outline:none;
    border-radius:.7rem;
    border:1px solid #aaa;
    padding:.5rem 1rem .5rem 1rem;
}

.form-pair button {
    font-size:2rem;
    width:70%;
    height:5rem;
    color:white;
    background:black;
    border-radius:1rem;
    margin:auto;
    cursor:pointer;
}

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

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




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

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

.dropdown span:hover {
    background:darkkhaki;
}

.dropdown .current {
    background:darkkhaki;
}


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


.checkbox .checkmark {
    border-left:1.2rem solid green;
    border-bottom:1.2rem solid green;
    z-index:2;
    position:absolute;
    left:-.5rem;
    top:1rem;
    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:1.2rem;height:0; opacity:1;}
  50% { width:1.5rem;height:3rem;opacity:1; } 
  100% { width:5rem;height:3rem;opacity:1;}
}

.form-pair b {
    display:inline-block;
    width:70%;
    font-size:1.7rem;
    margin-left:2rem;
    vertical-align:top;
    padding-top:1rem;
}

.compact {
    height:7rem;
}

.alert {
    margin-top:0;
    margin:auto;
    width:100%;
    height:3rem;
    padding:1.5rem 5rem 1.5rem 5rem;
    font-size:1.7rem;
    text-align:center;
    color:darkred;
    transition:all .5s;
    opacity:0;
    float:left;
}

.msg-ok {
    color:lightgreen;
}    

.drop {
    opacity:1;
}
.privacy-notice {
    padding:5rem 30% 5rem 10%;
}


.privacy-notice p, ul {
    font-size:2.2rem;
}

.back-home-btn {
    width: 50%;
    height: 6rem;
    padding:1rem;
    font-size:2.2rem;
    border-radius:3rem;
    border:1px solid #aaa;
    margin:auto;
    margin-top:10rem;
    margin-bottom:15rem;
    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:50%;
    margin:auto;
}

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


.hero {
    width:100vw;
    height:83.8vw;
    position:relative;
    background:white url(assets/tara.jpg) 0 0 no-repeat;
    background-size:cover;
}


} /* mq-end 1280px */


.socmed:hover {
    opacity:1;
}



.socmed-fb { background-image:url(assets/socmed-fb.png); }
.socmed-li { background-image:url(assets/socmed-li.png); }
.socmed-ig { background-image:url(assets/socmed-ig.png); }


.form-pair .jebra {
    background:yellow url(assets/jebra3.gif) left top no-repeat;
    background-size:cover;
    color:rgba(0,0,0,0);
    
}


.center {
    text-align:center;
}

.hidden { display:none;}