/* Variables */

:root {
  --primary-brand-color: #ffc22e;
  --secondary-brand-color: #393e40;
  --primary2-brand-color: #92710d;
  --primary3-brand-color: #e2b224;
    
  --success-color: #42c18a;
  --error-color: #c24848;
    
  --header-mobile-height: 70px;
  --header-desktop-height: 90px;
    
}

body.backdrop {
    overflow: hidden;
}

    body.backdrop:after {
        content: "";
        display: block;
        position: fixed;
        top: var(--header-mobile-height);
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 100%;
        z-index: 5;
        background: rgba(0,0,0,0.4);
    }

body .loading-animation {
    display: none;
}

body.loading {
    overflow: hidden !important;
}

    body.loading:after {
        content: "";
        display: block;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 100%;
        z-index: 999999;
        background: rgba(0,0,0,0.8);
    }

    body.loading .loading-animation {
        position: fixed;
        left: 0;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        text-align: center;
        z-index: 9999999;
        display: block;
    }

.loading-wrapper {
    display: block;
    z-index: 10000;
    position: fixed;
    top: 0px;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffc22e;
    opacity: 0.6;
    text-align: center;
    vertical-align: middle;
}

    .loading-wrapper .loader {
        position: relative;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }




/* Bootstrap Modifications */

a, a:hover {color:#000; text-decoration: none; transition: all .3s;}
button:focus, .btn:focus {box-shadow: none !important; outline: none !important; }
button {border: 0;}
button:hover {transition: all .3s;}

.form-control {border-color: #ddd;}
.form-control:focus, .dropdown-toggle:focus {outline: 0!important; outline: none!important; border-color: #f9f9f9; -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1); -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1); box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);}

/* Browser Modifications */

/* Clears the 'X' from Search Inputs */
input[type=search]::-ms-clear {display: none; width : 0; height: 0;}
input[type=search]::-ms-reveal {display: none; width : 0; height: 0;}

/* Main */

html, body {height: 100%;}
body {font-family: proxima-nova, sans-serif; font-size: 12px; text-shadow: rgba(0, 0, 0, .01) 0 0 1px; background: #f5f5f5;}

/* Header */

header {color:#fff; background: var(--secondary-brand-color); height: 70px;}
header img.logo {width: 120px;}

/* Form Register */

html, body {height: 100%;}
body {font-family: proxima-nova, sans-serif; font-size: 12px; text-shadow: rgba(0, 0, 0, .01) 0 0 1px; background: #f5f5f5;}

form#register-form {background:#fff;}
form#register-form #steps {background: var(--primary3-brand-color);}
form#register-form #steps .logo img {max-width: 120px;}
form#register-form #steps .help a {color:#fff;} 
form#register-form #steps .step {font-size: 12px; text-transform: uppercase; color:#fff; opacity: 0.8;}
form#register-form #steps .step b {font-weight: 500;}
form#register-form #steps .step i {font-style:normal; border-radius: 50%; height: 26px; width: 26px; display: inline-block; padding: 2px; border: 2px solid #fff; color: #fff; text-align: center;}
form#register-form #steps .step.active {opacity: 1; font-weight: 800;}
form#register-form #steps .step.active b {font-weight: 700;}

form#register-form #steps .step.done i {background-image: url("data:image/svg+xml,%3Csvg stroke='%23ffffff' stroke-width='2' width='20' height='20' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.414 11L4 12.414l5.414 5.414L20.828 6.414 19.414 5l-10 10z' fill='%23ffffff' fill-rule='nonzero'/%3E%3C/svg%3E "); background-repeat: no-repeat; background-position: 3px 4px; text-indent: -999999px;}

form#register-form #tabs {background: #fff;}
form#register-form #tabs section:not(:first-of-type) {display: none;}
form#register-form #tabs section h3 {font-size: 24px; font-weight: 600;}
form#register-form #tabs section p {opacity: 0.6;}

/* Form Styling */

form#register-form #tabs section label {color: var(--primary2-brand-color); font-size: 11px; font-weight: 700; text-transform: uppercase;}

form#register-form #tabs section .form-group input {font-size: 12px; height: 45px; font-weight: 600;}
form#register-form #tabs section .form-group input::-webkit-input-placeholder {opacity: 0.7;}
form#register-form #tabs section .form-group input:-ms-input-placeholder {opacity: 0.7;}
form#register-form #tabs section .form-group input::placeholder {opacity: 0.7;}

form#register-form #tabs section .form-group input[type="password"]::-webkit-input-placeholder {letter-spacing: 5px;}
form#register-form #tabs section .form-group input[type="password"]:-ms-input-placeholder {letter-spacing: 5px;}
form#register-form #tabs section .form-group input[type="password"]::placeholder {letter-spacing: 5px;}

/* jQuery Validation Customization */

form#register-form #tabs section .form-group.has-error {}
form#register-form #tabs section .form-group.has-success {}

form#register-form #tabs section .form-group em.help-block {font-size: 12px; font-style: normal; margin-top:2px; display: block; font-weight: 600; color:var(--error-color); position: absolute; top:0; right: 15px;}
form#register-form #tabs section .multi-group .form-group em.help-block {margin-top:-24px;}

form#register-form #tabs section .form-group.has-error input {border:2px solid var(--error-color); background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' fill='%23c24848' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 492 492' style='enable-background:new 0 0 492 492;' xml:space='preserve'%3E%3Cg%3E%3Cg%3E%3Cpath d='M300.188,246L484.14,62.04c5.06-5.064,7.852-11.82,7.86-19.024c0-7.208-2.792-13.972-7.86-19.028L468.02,7.872 c-5.068-5.076-11.824-7.856-19.036-7.856c-7.2,0-13.956,2.78-19.024,7.856L246.008,191.82L62.048,7.872 c-5.06-5.076-11.82-7.856-19.028-7.856c-7.2,0-13.96,2.78-19.02,7.856L7.872,23.988c-10.496,10.496-10.496,27.568,0,38.052 L191.828,246L7.872,429.952c-5.064,5.072-7.852,11.828-7.852,19.032c0,7.204,2.788,13.96,7.852,19.028l16.124,16.116 c5.06,5.072,11.824,7.856,19.02,7.856c7.208,0,13.968-2.784,19.028-7.856l183.96-183.952l183.952,183.952 c5.068,5.072,11.824,7.856,19.024,7.856h0.008c7.204,0,13.96-2.784,19.028-7.856l16.12-16.116 c5.06-5.064,7.852-11.824,7.852-19.028c0-7.204-2.792-13.96-7.852-19.028L300.188,246z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-size: 10px; background-position: right 15px center;}

form#register-form #tabs section .form-group.has-success input,
form#register-form #tabs section .form-group.has-success .bootstrap-select .dropdown-toggle {border:2px solid var(--success-color); background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512;' fill='%2342c18a' xml:space='preserve'%3E%3Cg%3E%3Cg%3E%3Cpath d='M504.502,75.496c-9.997-9.998-26.205-9.998-36.204,0L161.594,382.203L43.702,264.311c-9.997-9.998-26.205-9.997-36.204,0 c-9.998,9.997-9.998,26.205,0,36.203l135.994,135.992c9.994,9.997,26.214,9.99,36.204,0L504.502,111.7 C514.5,101.703,514.499,85.494,504.502,75.496z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-size: 14px; background-position: right 15px center;}

/* Bootstrap Select Customization */

form#register-form #tabs section .bootstrap-select .dropdown-toggle {font-size: 12px; height: 45px; font-weight: 600; border-color: #ddd; background: #fff;}
form#register-form #tabs section .bootstrap-select .dropdown-toggle:focus {outline: 0!important;}


form#register-form #tabs section .form-group.has-error .bootstrap-select .dropdown-toggle {border:2px solid var(--error-color)!important;}
form#register-form #tabs section .form-group.has-error .bootstrap-select .dropdown-toggle::after {border-color: var(--error-color); opacity: 1;}
form#register-form #tabs section .form-group.has-success .bootstrap-select .dropdown-toggle::after {display: none!important;}


form#register-form #tabs section .bootstrap-select.show .dropdown-toggle {border-color: #f9f9f9; -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1); -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1); box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);}

form#register-form #tabs section .bootstrap-select.show .dropdown-menu.show {padding-top:2px; padding-bottom: 2px; border-color: #f9f9f9; -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1); -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1); box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1); margin-top:10px;}
form#register-form #tabs section .bootstrap-select.show .dropdown-menu.show ul li {padding-left: 7px; padding-right: 7px; margin-top: 3px; margin-bottom: 3px;}
form#register-form #tabs section .bootstrap-select.show .dropdown-menu.show ul li a {font-size: 12px; font-weight: 500; padding-top:10px; padding-bottom: 10px; border-radius: 5px; outline: none;}
form#register-form #tabs section .bootstrap-select.show .dropdown-menu.show ul li a:hover,
form#register-form #tabs section .bootstrap-select.show .dropdown-menu.show ul li a.active:not(
.selected):hover {background: rgba(0,0,0,0.1);}
form#register-form #tabs section .bootstrap-select.show .dropdown-menu.show ul li a.selected {background: var(--primary-brand-color); color:#000;}
form#register-form #tabs section .bootstrap-select.show .dropdown-menu.show ul li a.active:not(
.selected) {background:transparent; color:#000;}
form#register-form #tabs section .bootstrap-select.show .dropdown-menu.show ul li.no-results {text-align: center; font-size: 12px; border-radius: 5px; padding: 5px; font-weight: 600;}

form#register-form #tabs section .bootstrap-select.show .bs-searchbox input {background: none!important; border:1px solid #ddd!important;}
form#register-form #tabs section .bootstrap-select.show .bs-searchbox input:focus {outline: none!important; box-shadow: none!important; border-color: #ddd;}
form#register-form #tabs section .bootstrap-select.show .bs-ok-default:after {margin-top:7px; margin-right: 10px; border-width: 0 .20em .20em 0;}

form#register-form #tabs section .bootstrap-select .dropdown-toggle::after {border: solid black; border-width: 0 2px 2px 0; padding: 2.8px; transform: rotate(45deg); -webkit-transform: rotate(45deg); margin-right: 5px; margin-top:-3px; opacity: 0.4;}

/* Custom Checkbox */

form#register-form #tabs section .checkbox-group {position: relative;}
form#register-form #tabs section .checkbox-group label {text-indent: 40px; height: 26px; line-height: 26px; width: 100%; display: block; text-align: left; color: #000!important; cursor: pointer; position: relative; z-index: 2; -webkit-transition: color 200ms ease-in; transition: color 200ms ease-in; overflow: hidden; font-weight: 500!important; text-transform: none!important; font-size: 12px!important;}
form#register-form #tabs section .checkbox-group label a {font-weight: 700; border-bottom: 1px dashed rgba(0,0,0,0.3); padding-bottom: 3px;}

form#register-form #tabs section .checkbox-group label:after {width: 26px; height: 26px; content: ''; border: 2px solid #ddd; background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg width='26' height='26' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.414 11L4 12.414l5.414 5.414L20.828 6.414 19.414 5l-10 10z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E "); background-repeat: no-repeat; background-position: 1px 2px; border-radius: 5px; z-index: 2; position: absolute; left: 0px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); cursor: pointer; -webkit-transition: all 200ms ease-in; transition: all 200ms ease-in;}

form#register-form #tabs section .checkbox-group input:checked ~ label {font-weight: 700!important;}
form#register-form #tabs section .checkbox-group input:checked ~ label:before {-webkit-transform: translate(-50%, -50%) scale3d(56, 56, 1); transform: translate(-50%, -50%) scale3d(56, 56, 1); opacity: 1;}
form#register-form #tabs section .checkbox-group input:checked ~ label:after {background-color: #fff; border: 2px solid var(--success-color)!important; background-image: url("data:image/svg+xml,%3Csvg width='26' height='26' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.414 11L4 12.414l5.414 5.414L20.828 6.414 19.414 5l-10 10z' fill='%2342c18a' fill-rule='nonzero'/%3E%3C/svg%3E "); background-repeat: no-repeat; background-position: 1px 2px;}
form#register-form #tabs section .checkbox-group input {width: 26px; height: 26px; z-index: 2; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); cursor: pointer; visibility: hidden;}

form#register-form #tabs section .form-group.has-error .checkbox-group label::after {border:2px solid var(--error-color)}

/* Custom Radio Box */

form#register-form #tabs section #packages .package .inner {background: #fff; color:#000; border-radius: 5px; cursor: pointer; -webkit-transition: all 200ms ease-in; transition: all 200ms ease-in; border:1px solid #ddd; cursor: pointer
;}

form#register-form #tabs section #packages .package .inner .title {color:var(--primary2-brand-color); text-transform: uppercase; font-weight: 700; font-size: 15px; margin-top: 2px;}
form#register-form #tabs section #packages .package .inner .quota {font-weight: 600; text-transform: uppercase;}
form#register-form #tabs section #packages .package .inner .price {font-weight: 600; opacity: 0.5;}
form#register-form #tabs section #packages .package .inner .checker .radio {width: 22px; height: 22px; content: ''; border: 2px solid #D1D7DC; background-color: #fff; border-radius: 50%; position: relative; margin-left: 1px;}
form#register-form #tabs section #packages .package .inner .checker .radio input[type="radio"] {-moz-appearance: none; -webkit-appearance: none; appearance: none; opacity: 0; position: absolute;}

form#register-form #tabs section #packages .package.selected .inner {background: var(--success-color); color:#fff; border:1px solid var(--success-color);}
form#register-form #tabs section #packages .package.selected .inner .title {color:#fff;}
form#register-form #tabs section #packages .package.selected .inner .price {opacity: 1;}

form#register-form #tabs section #packages .package.selected .inner .checker .radio {border: 0; margin-left: 1px;}
form#register-form #tabs section #packages .package.selected .inner .checker .radio:after {width: 22px; height: 22px; content: ''; background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg stroke='%2342c18a' stroke-width='2' width='20' height='20' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.414 11L4 12.414l5.414 5.414L20.828 6.414 19.414 5l-10 10z' fill='%2342c18a' fill-rule='nonzero'/%3E%3C/svg%3E "); background-repeat: no-repeat; background-position: 3px 4px; border-radius: 50%; z-index: 2; position: absolute;}

form#register-form #tabs section .radio-group em.help-block {font-size: 12px; font-style: normal; margin-top:2px; display: block; font-weight: 600; color:var(--error-color); display: none!important;}

form#register-form #tabs section .radio-group.has-error > div {outline: 0; animation-name: bounce; animation-duration: .5s; animation-delay: 0.25s;}

form#register-form #tabs section .amount {font-size: 14px;}
form#register-form #tabs section .actions button {background: var(--secondary-brand-color); font-weight: 700; text-transform: uppercase; font-size: 12px; color:#fff; border-radius: 5px; height: 50px; opacity: 0.9;} 
form#register-form #tabs section .actions button:hover {opacity: 1;}

form#register-form #tabs section .actions button.previous {background: rgba(0,0,0,0.15); border-radius: 5px;  text-align: center; opacity: 0.8; color:#303030;}
form#register-form #tabs section .actions button.previous:hover {opacity: 1;}

form#register-form #tabs section .actions button.trial-submit,
form#register-form #tabs section .actions button.proposal-submit {display: none;}

form#register-form #tabs .error-messages span {display: block; padding: 15px; font-weight: 600; background: var(--error-color); border-radius: 5px; color:#fff;}

#congrats {display: none;}
#congrats h3 {color:var(--primary2-brand-color); font-weight: 700;}
#congrats p {font-size: 15px; font-weight: 500;}
#congrats a {background: var(--secondary-brand-color); font-weight: 700; text-transform: uppercase; font-size: 12px; color:#fff; border-radius: 5px; padding: 20px; opacity: 0.9;} 
#congrats a:hover {opacity: 1;}

#congrats i.icon svg circle {stroke-dasharray: 100; stroke-dashoffset: 100; stroke-width: 2; stroke-miterlimit: 10; stroke: var(--success-color); fill: none; animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;}
#congrats i.icon svg {width: 100px; height: 100px; border-radius: 50%; display: block; stroke-width: 2; stroke: #fff; stroke-miterlimit: 10; margin: 10% auto; box-shadow: inset 0px 0px 0px var(--success-color); animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;}
#congrats i.icon svg path {transform-origin: 50% 50%; stroke-dasharray: 48; stroke-dashoffset: 48; animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;}

/* Footer */

footer #main {background: #f7f7f7;}
footer #main img.logo {width: 100px;}
footer #main ul.main li a {font-weight: 600; font-size: 12px; opacity: 0.6;}
footer #main ul.main li a:hover {opacity: 1;}

footer #main ul.lang li.nav-item.dropdown {padding: 0;}
footer #main ul.lang li.nav-item.dropdown a {border:1px solid #ccc; padding: 5px 15px; border-radius: 5px; transition: none;}
footer #main ul.lang li.nav-item.dropdown a span {font-weight: 600; margin-left: 5px;}
footer #main ul.lang li.nav-item.dropdown a svg {width: 20px;}

footer #main ul.lang li.nav-item.dropdown a.dropdown-toggle::after {display: none;}

footer #main ul.lang li.nav-item.dropdown.show a {border:1px solid transparent; background: var(--secondary-brand-color); border-radius: 5px; border-top-left-radius: 0; border-top-right-radius: 0;}
footer #main ul.lang li.nav-item.dropdown.show a {color:#fff; border:0;}
footer #main ul.lang li.nav-item.dropdown.show a.dropdown-toggle::after {border-color:#fff;}

footer #main ul.lang li.nav-item .dropdown-menu {background: var(--secondary-brand-color); border: 0; padding: 0; overflow: auto; border-radius: 5px; border-bottom-right-radius: 0; margin-top:-1px;}
footer #main ul.lang li.nav-item .dropdown-menu .dropdown-item {color:#fff; font-size: 12px; font-weight: 500; padding: 15px; border-radius: 0; border: 0;}
footer #main ul.lang li.nav-item .dropdown-menu a.dropdown-item::before {content:'\25CF'; color:transparent; margin-right: 12px;}
footer #main ul.lang li.nav-item .dropdown-menu .dropdown-item:hover {background: transparent;}
footer #main ul.lang li.nav-item .dropdown-menu a.dropdown-item:hover {background: rgba(255,255,255,0.1);}
footer #main ul.lang li.nav-item .dropdown-menu a.dropdown-item.active {background: transparent;}
footer #main ul.lang li.nav-item .dropdown-menu a.dropdown-item.active::before {content:'\25CF'; color:var(--primary-brand-color);; margin-right: 12px;}
footer #main ul.lang li.nav-item .dropdown-menu span.dropdown-item {font-weight: 300; font-size: 12px; text-align: center;}
footer #main ul.lang li.nav-item .dropdown-menu .dropdown-divider {opacity: 0.1; margin: 0;}

footer #bottom {background: var(--secondary-brand-color); color:#fff;}
footer #bottom span.copyright {font-weight: 500;}
footer #bottom ul.social li a {color:#fff; padding: 0 10px; opacity: 0.9;}
footer #bottom ul.social li a i.icon svg {height: 18px; fill:#fff;}

@media (min-width: 768px) {
    
    form#register-form #tabs {min-height: 650px;}

}

/* Animations */

@keyframes stroke {
  100% {stroke-dashoffset: 0;}
}
@keyframes scale {
  0%, 100% {transform: none;}
  50% {transform: scale3d(1.1, 1.1, 1);}
}
@keyframes fill {
  100% {box-shadow: inset 0px 0px 0px 100px var(--success-color)}
}

@keyframes bounce {
  0% {
    transform: translateX(0px);
    timing-function: ease-in;
  }
  37% {
    transform: translateX(8px);
    timing-function: ease-out;
  }
  55% {
    transform: translateX(-8px);
    timing-function: ease-in;
  }
  73% {
    transform: translateX(7px);
    timing-function: ease-out;
  }
  82% {
    transform: translateX(-7px);
    timing-function: ease-in;
  }
  91% {
    transform: translateX(5px);
    timing-function: ease-out;
  }
  96% {
    transform: translateX(-5px);
    timing-function: ease-in;
  }
  100% {
    transform: translateX(0px);
    timing-function: ease-in;
  }
}