html { scroll-behavior: smooth }
html, body { margin: 0 }
body, button { font-family: 'Muli', sans-serif; }

.btn { text-decoration: none; display: inline-flex; justify-content: center; align-items: center; border-radius: 4px; color: white; font-size: 21px; text-transform: uppercase; font-weight: bold; border: none; cursor: pointer; }
.youtube-w { position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; }
    .youtube-w > iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.form-control { border-radius: 4px; background: linear-gradient(#f0f0f0, #fff); font-size: 17px; padding: 0 10px; border: solid 1px #C6C6C6; width: 100%; box-sizing: border-box; }
    .form-control:not(textarea) { height: 50px; }
.error-msg { color: #da0b0b; }
.dis-none { display: none; }
.dis-none-i { display: none !important; }
.row { display: flex; }
.stepflow-step > .row > .field { padding-bottom: 15px; }
    .stepflow-step > .row > .field:not(:last-child) { margin-right: 15px; }
.field-grid .field { position: relative; }
.field-grid .cover-label { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; justify-content: center; align-items: center; }

.nice-radio { appearance: none; -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50px; vertical-align: -8px; border: solid 1px #BABABC; box-sizing: border-box; }
    .nice-radio:checked { background: #58BE5B; border: none; /* font-family: "fontello"; */ display: inline-flex; justify-content: center; align-items: center; border: none; }
        .nice-radio:checked:before { content: '\2713'; color: white; font-size: 18px; position: absolute; margin-top: 2px; }
.tiptop { position: absolute; z-index: 9999; max-width: 300px; padding: 20px; font-size: 14px; color: #fff; background: #222; border-radius: 3px; }
.dialog { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,.7); display: flex; justify-content: center; align-items: center; }
.maskedPhoneNumber > .show-cc { max-width: 100px; margin-left: 10px; text-align: center; margin-top: 5px; cursor: pointer; }

/*layout*/
#header { height: 120px; display: flex; justify-content: center; color: white; text-transform: uppercase; font-weight: bold; font-size: 19px; align-items: center; }
    #header > .menu { display: flex; align-items: center; }
        #header > .menu > .link { display: flex; align-items: center; margin: 0 40px; padding: 8px 35px; cursor: pointer; text-decoration: none; color: white; }
            #header > .menu > .link.active { background: #FF9D26; border-radius: 50px; }
    #header > .logo-w { display: block; }
        #header > .logo-w > .logo { position: absolute; left: 20px; top: 18px; }
#footer { height: 112px; background: #00B5D5; color: white; display: flex; justify-content: center; align-items: center; }
    #footer > .links > a { color: inherit; text-decoration: none; margin: 0 5px; }

/*tooltips*/
.css-tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; cursor: pointer; }
    .css-tooltip .tooltiptext { visibility: hidden; width: 180px; color: #fff; position: absolute; z-index: 1; }
        .css-tooltip .tooltiptext > span { background-color: black; display: block; padding: 5px; border-radius: 6px; text-align: justify; position: relative; }
            .css-tooltip .tooltiptext > span::after { content: " "; position: absolute; border-width: 5px; border-style: solid; }
    .css-tooltip:hover .tooltiptext { visibility: visible; }
    .css-tooltip.right .tooltiptext { top: -5px; left: 100%; padding-left: 10px; }
        .css-tooltip.right .tooltiptext > span::after { top: 0; right: 100%; margin-top: 12px; border-color: transparent black transparent transparent; }
    .css-tooltip.below .tooltiptext { left: -5px; top: 100%; padding-top: 10px; }
        .css-tooltip.below .tooltiptext > span::after { top: 0; left: 50%; margin-left: -5px; margin-top: -10px; border-color: transparent transparent black transparent; }

/*stepflows*/
#stepflow { font-size: 18px; }
    #stepflow .buttons-wrap { display: flex; justify-content: center; margin-top: 60px; }
        #stepflow .buttons-wrap > .btn { cursor: pointer; width: 170px; height: 50px; font-size: 17px; box-sizing: border-box; }
        #stepflow .buttons-wrap > .back, #stepflow .buttons-wrap > .cancel { background: white; color: #00BBDC; border: solid 2px #00BBDC; margin-right: 30px; }
        #stepflow .buttons-wrap > .next { background: #FF9D26; }
    #stepflow .helper-text { border-bottom: dashed 1px; cursor: pointer; font-size: smaller; }

@media (max-width:1439px) {
    #header { font-size: 13px; height: 52px; }
        #header > .menu > .link { margin: 0 25px; }
    #header { height: 72px !important; }
        #header > .menu { flex: 1; justify-content: center; }
            #header > .menu > .link { margin: 0; padding: 8px 25px; }
        #header > .logo-w > .logo { height: 55px; position: relative; margin: 6px 0 0 10px; top: auto; left: auto; }
}

@media(min-width:768px) {
    #hamburger { display: none; }
    #footer > .links:before { content: '|'; margin-left: 8px; }
}

@media(max-width:767px) {
    #header { height: 50px !important; justify-content: space-between; padding: 0; }
        #header > .menu { display: none; position: absolute; height: 280px; top: 50px; z-index: 100; background: #00B5D5; width: 100%; }
            #header > .menu.open { display: block; }
            #header > .menu > .link { margin: 20px; font-size: 20px; }
        #header > .logo-w > .logo { height: 34px; display: block; margin: 0 0 0 10px; }
    #hamburger { margin: 0 20px; }
    #footer { flex-direction: column; }
    .tooltiptext { width: 200px !important; }
    #stepflow .buttons-wrap > .back { width: 135px; margin-right: 10px; font-size: 14px; }
    #stepflow .buttons-wrap > .next { width: 135px; font-size: 14px; }
}