/* bottom bar */
.contentOverlay {
visibility:hidden;
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
z-index:10000;
transition:background-color 0.2s;
}
.contentOverlay.on {
visibility:visible;
background-color:rgba(0,0,0,0.5);
}

#bottombar {
width:70%;
height:100%;
background-color:#fff;
position:fixed;
bottom:0;
right:-100%;
overflow:hidden;
transition:right 0.2s;
z-index:100001;
border-radius:8px 0 0 8px;
}
#bottombar.on {
right:0;
transition:right 0.3s cubic-bezier(0.000, 0.000, 0.000, 1.000);
}
#bottombar.contact {
width:450px;
right:-450px;
}
#bottombar.contact.on {
right:0;
}

#bottombar .top {
width:100%;
height:80px;
}
#bottombar .top .close { 
height:25px;
padding:13px;
width:25px;
position:absolute;
top:20px;
right:20px;
cursor:pointer; 
}
#bottombar .top .close:hover {
background:#efefef;
border-radius:50%;
}
#bottombar .top .close:before, #bottombar .top .close:after {
position: absolute;
left: 22.5px;
content: ' ';
height: 23px;
width: 3px;
border-radius:1px;
background-color: #000;
}
#bottombar .top .close:before {
transform: rotate(45deg);
}
#bottombar .top .close:after {
transform: rotate(-45deg);
}

#bottombar .bottom {
margin-top:60px;
padding:0 40px;
height:80px;
}
#bottombar .bottom input[type=submit], 
#bottombar .bottom button, 
#bottombar .bottom a {
width:100%;
display:block;
box-sizing: border-box;
padding:20px;
font-size:15px;
font-weight:600;
text-align:center;
border-radius:30px;
background-color:#1b1b1b;
color:#fff;
border:none;
cursor:pointer;
}
#bottombar .bottom input[type=submit].warning,
#bottombar .bottom button.warning,
#bottombar .bottom a.warning {
background-color:#C73052;
}
#bottombar .bottom a i {
margin-right:10px;
font-size:20px;
}
#bottombar .bottom input[type=submit].warning:before,
#bottombar .bottom button.warning:before,
#bottombar .bottom a.warning:before {
margin-right:10px;
font-size:20px;
font-family:"Font Awesome 5 Free";
font-weight:900;
content:"\f071";
}
#bottombar .bottom input[type=submit]:not([disabled]):hover,
#bottombar .bottom button:not([disabled]):hover,
#bottombar .bottom a:not([disabled]):hover{
opacity:0.9;
}
#bottombar .bottom input[type=submit][disabled],
#bottombar .bottom button[disabled],
#bottombar .bottom a[disabled]{
background-color:#eee;
color:#aaa;
cursor:default;
}

#bottombar h3 {
font-weight:600;
font-size:24px;
padding:0 40px 40px;
}
#bottombar .content {
overflow-y:auto;
/*margin-bottom: calc(100% - 80px);
height:600px;
max-height:calc(100%-160px);*/
}
#bottombar .content>p {
padding:0 40px 10px;
font-size:15px;
line-height:24px;
}

#bottombar .form {
padding:0 40px;
}
#bottombar .form input[type=text], #bottombar .form input[type=email], #bottombar .form input[type=password], #bottombar .form select, #bottombar .form textarea {
-webkit-appearance:none;
width:100%;
padding:11px 15px;
font-size:18px;
line-height:22px;
color:#444;
border:1px solid #ccc;
border-radius:5px;
box-sizing:border-box;
position:relative;
z-index:10;
}
#bottombar .form input[type=text]:focus, #bottombar .form input[type=email]:focus, #bottombar .form input[type=password]:focus, #bottombar .form select:focus {
border-color:#aaa;
}
#bottombar .form label {
margin-bottom:4px;
font-size:15px;
}
#bottombar .form label, #bottombar .form p.inline {
margin-top:30px;
}
#bottombar .form .input-wrap .error {
background:#fff;
font-size:13px;
padding:0;
top: calc(100% + 2px);
}
#bottombar .form .input-wrap .error, #bottombar .form .input-wrap .error a {
color:#e52828 !important;
}
#bottombar .form .input-wrap .error:before {
content:"\25cf";
margin-right:5px;
font-size:16px;
}

.form p.inline label {
display:initial;
cursor:pointer;
}




/****************** Mobile site ****************/

@media only screen and (min-height : 300px) and (max-width : 1020px) and (min-device-height : 300px) {

    .noty_bar {
    position:fixed !important;
    left:50% !important;
    width:90% !important;
    margin-left:0 !important;
    transform:translateX(-50%) !important;
    }

    #bottombar {
    width:100%;
    height:70%;
    bottom:-70%;
    right:0;
    transition:bottom 0.2s;
    border-radius:8px 8px 0 0;
    }
    #bottombar.on {
    bottom:0;
    transition: bottom 0.3s cubic-bezier(0.000, 0.000, 0.000, 1.000);
    }
    #bottombar.contact {
    width:100%;
    height:95%;
    bottom:-95%;
    }
    #bottombar.contact.on {
    bottom:0;
    }

    section.contactForm {
    overflow-y: scroll;
    height: calc(100% - 80px);
    }
}