html {
    height:100%;
    scroll-behavior: smooth;
}

body {
    height:100%;
}

#doIT_logo img {
        height:100%;
    }

.page {
    flex: 0 0 100%;
}

#calculator {
    box-shadow: 0 0 0.5em 0.5em #0001;
}

#doIT_logo {
    position: absolute;
    right: 0;
    top: 0;
    width:300px;
    height:186px;
}

#doIT_logo + h1 {
        
    transition: margin-top 1s;
        
}

#calculator .btn-blue {
    background: #AED533;
    border: 1px solid #AED533;
}

#calculator .icon {
    background: #AED533;
}

#calculator label a {
    color: #AED533;
}

#calculator button, #calculator #mktFrmSubmit {
    background: #AED533;
    border: 1px solid #AED533 !important;
}

#calculator button:hover, #mktFrmSubmit:hover, #calculator button.invert {
    color: #AED533;
}

#calculator button.invert:hover, #calculator #mktFrmSubmit:hover {
    background: #AED533;
}

#calculator #numberresults #money h4 {
    background: #AED533;
}

#calculator .button {
    background: #AED533;
}

#calculator a {
    color: #AED533;
}

#calculator div {
    background-color: white;
}

#calculator .switch-field input:checked + label {
    background-color: #AED533;
}

#doIT_logo + h1 {
        
    margin-top: 3em;
    
}

@font-face {
    font-family: 'Myriad Pro Light';
    src: url('../fonts/MyriadPro-Light.woff') format('woff');
}

@font-face {
    font-family: 'Myriad Pro Regular';
    src: url('../fonts/MYRIADPRO-REGULAR.woff') format('woff');
}

#calculator * {
    font-family: "Myriad Pro Regular";
}

#swipe {
    display: none;
}

@media screen and (max-width: 980px) 
{
    #swipe {
        height: calc(100vh - 16px);
        width: calc(100vw - 16px);
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        animation: fadeout 2s 7 forwards;
    }
    
    #swipe img {
        height: 10vh;
    }
    
    #calculator {
        max-height: fit-content;
        width:fit-content;
        display: flex;
        overflow-x: scroll;
        scroll-snap-type: x mandatory;
    }
    
    #calculator .col-12{
        padding-left:2%;
        padding-right:2%;
    }
    
    #doIT_logo {
        position: fixed;
        top:1.5em;
        right:2.5em;
        width: auto;
        height: 6em;
    }
    
    .page {
        height: 100vh;
        padding-top: 10em;
        scroll-snap-align: center;
    }
    
    .page * {
        font-size: 3vw !important;
    }
    
}

@keyframes fadeout {
    to {
        opacity: 0;
    }
}