* {
    box-sizing: content-box;
    font-family: fatfrank, sans-serif
}
html {
    scroll-behavior: smooth
}
body {
    height: 100%;
    overflow-x: hidden !important;
}
h1 {
    margin: 0
}
a {
    text-decoration: none !important;
    color: inherit !important;
}
button {
    cursor: pointer;
    transition: all 0.1s linear
}
.num,
.tick-img,
button:active {
    transform: translateY(3px)
}
button:focus {
    outline: 0 !important
}
button,
input {
    outline: 0;
    border: none;
    width: inherit;
    background-color: inherit
}
/* ### REMOVE ARROWS BESIDE NUMBER INPUT - MOZILLA FIREFOX BUG FIX ### */
input[type=number] {
    -moz-appearance:textfield;
}
#main-header {
    background-color: #edba00;
    height: 95vh;
    width: 100vw;
}
.logo {
    text-align: center;
    padding: 48px 0
}
.logo .svg
{
	width: 80px;
}
.social-icons {
    position: absolute;
    top: 50px;
    right: 60px;
}
.icon {
    margin: 0 24px;
}
.twitter {
    height: 34px
}
.fb {
    height: 40px;
}
.grid-header {
    display: grid;
    grid-template-columns: 32.5% 35% 32.5%
}
.title-div {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    z-index: 2;
}
.main-title {
	top: 0;
    font-family: fatfrank;
    color: #fff;
    font-size: 62pt;
    position: relative;
    z-index: 1;
}
#yourdinner
{
	margin-top: -8px;
}
.icon-scroll {    
    position: absolute;
    left: 50%;
    bottom: 50px;
    -ms-transform: translateX(-50%) scale(.7);
	transform: translateX(-50%) scale(.7);
    width: 32px;
    height: 54px;
    box-shadow: inset 0 0 0 2px #FFF;
    border-radius: 25px;
}

.icon-scroll:before {
    position: absolute;
    left: 50%;
    content: '';
    width: 8px;
    height: 8px;
    background: #FFF;
    margin-left: -4px;
    top: 8px;
    border-radius: 4px;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-name: scroll;
}

@keyframes scroll {
	0% {
		opacity: 1
	}

	100% {
		opacity: 0;
		transform: translateY(46px)
	}
}

.sub-title {
    display: block;
    margin: 0 auto;
    font-family: bio-sans, sans-serif !important;   
    color: #fff;
    font-size: 11pt !important;
	line-height: 20px !important;
    font-weight: 300 !important;
    z-index: 12 !important;
	max-width: 350px;
}
.burger-img,
.coke-img {
    position: absolute
}
.burger-img {
    height: 600px;
    top: -85px;
    z-index: 0;
}
.mouse-img {
    position: relative;
    height: 200px;
    z-index: 0
}
.scroll-down-link {
    position: relative;
    top: -10px;
    text-decoration: none;
    width: 100vw;
}
.scroll-down-text {
    color: #FFF;
    font-family: bio-sans, sans-serif;
    position: absolute;
    width: 90px;
    top: -110px;
}
.coke-img {
    height: 250px;
	width: auto;
    right: 25px;
    bottom: 20px;
    z-index: 1;
}
#main-section {
    height: 97.5vh;
    width: 100vw;
    display: grid;
    grid-template-columns: 75% 25%;
    padding-bottom: 100px;
    position: relative;
    left: 0px;
    right: 0px;
}
.column-1 {
    background-color: #f7f7f7;
}
.column-2 {
    position: relative;
    left: 0px;
}
.drink-header {
    color: grey;
    text-transform: uppercase;
    font-family: bio-sans, sans-serif;
    margin: 0 80px;
}
.underline {
    margin: 12px 80px 0 80px;
    border-bottom: solid 1px grey;
}
.next-btn {
    position: sticky;
    display: block;
    top: 40%;
    left: 50%;
    text-align: center;
    cursor: pointer;}
.next-img {
    height: 100px
}
.next-btn-text {
    font-family: bio-sans, sans-serif;
    color: grey;
    font-weight: 200;
    font-size: 24pt
}
.option-text-div {
    text-align: center
}
#option-text {
    background-color: #f7f7f7;
    color: #a3a2a2;
    font-size: 52pt;
    padding: 60px 0;
}
#key-text {
    text-decoration: underline;
    text-decoration-color: #edba00
}
.option-container {
    text-align: center;
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    margin: 40px 25px;
    justify-content: center;
}
.option {
    position: relative;
    display: inline-block;
    height: 230px;
    width: 150px;
    margin: 0 auto;
    -moz-box-shadow: 0 0 20px #ccc;
    -webkit-box-shadow: 0 0 20px #ccc;
    box-shadow: 0 0 20px #ccc;
    background-color: #fff;
    cursor: pointer
}
.option-pic {
    width: auto;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    z-index: 10
}
.option-name-div {
    position: relative;
    height: 50px;
    padding: 10px 6px;
    z-index: 12;
    background-color: #fff
}
.option-name {
    margin: 0 6px;
    font-family: bio-sans, sans-serif;
    font-weight: 700;
    font-size: 12pt;
    color: #3f3f3f;
    position: relative;
    z-index: 11
}
.clear {
    overflow: auto
}
#cusine-container,
#drink-container,
#option-container,
#snack-container {
    overflow-x: hidden
}
.outer-option {
    position: relative;
    height: 170px;
    background-color: #fff
}
.inner-option-div {
    position: absolute;
    background-color: #edba00;
    height: 150px;
    width: 40px;
    top: 30px;
    padding: 12px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px
}
.arrow {
    height: 20px
}
.arrow-down {
    transform: rotate(180deg)
}
.cusine-check,
.num {
    font-family: itc-avant-garde-gothic-pro, sans-serif;
    font-weight: 700;
    color: #fff;
    font-size: 28pt;
    padding: 8px 4px 8px 8px;
    transition: all 0.1s linear;
    position: relative;
    top: -25px;
}
.btn-cancel {
    position: relative;
    top: -34px;
    left: 26px;
    background-color: transparent
}
.btn-cancel-img {
    height: 40px
}
.arrow-down-btn,
.arrow-up-btn {
    background-color: inherit;
    border: none;
    cursor: pointer;
    position: relative;
    top: -20px;
    margin: 0 auto;
    padding: 0;
}
.tick-img {
    height: 35px;
    position: relative;
    right: 12px;
    transition: all 0.1s linear
}
.container {
    text-align: center;
    margin: 0 auto;
    height: auto;
    background-color: #f7f7f7
}
.cusine-option-text,
.cusine-option-text-ul {
    font-family: bio-sans, sans-serif;
    font-size: 12pt;
    margin-top: -30px;
    margin-bottom: 20px;
    text-transform: uppercase;
    color: grey
}
.cusine-option-text-ul {
    text-decoration: underline;
    text-decoration-color: #edba00
}
.content {
    margin: 0 400px
}
.excercise-outer
{
	max-width: 1000px;
	margin: 0 auto;
}
.exercise {
    display: grid;
    grid-template-columns: 50% 50%;
}
.text-left {
    text-align: center;
}
.text-right {
    text-align: center;
}
.result-text-yellow {
    color: #edba00;
    font-size: 80pt
}
.result-text-normal {
    color: #313131;
    font-size: 54pt;
    font-family: bio-sans, sans-serif;
    font-weight: 600;
    margin-top: -30px
}
.sex-txt {
    font-size: 42pt !important;
}
.start-btn-div {
    margin: 200px 0 100px
}
.start-btn {
    background-color: #edba00;
    color: #fff !important;
    font-size: 22pt;
    padding: 20px;
}
.text-left,
.text-right {
    position: relative;
    padding: none !important;
    top: 30%;
}
.anim {
    width: 400px;
	margin: 0 auto;
}
#loading-animation {
    height: 50vh;
    width: 50vh;
	margin: 30vh auto;
}
#results-section {
    display: none;
    overflow-x: hidden;
}
#totalcal{
	text-decoration: underline;
}
.exit-left {
    animation: right_to_left 2s;
    animation-fill-mode: forwards
}
@keyframes right_to_left {
    from {
        left: 50px
    }
    to {
        left: 0
    }
}
.exit-right {
    animation: leftAni 1s;
    animation-fill-mode: forwards
}
@keyframes leftAni {
    from {
        right: 50px
    }
    to {
        right: 0
    }
}

#main-footer {
    position: relative;
    padding: 4px;
    bottom: 0;
    clear: both;
    text-align: center;
    width: 75vw;
}

#main-footer-results {
    padding: 4px;
    text-align: center;
}

.alertr-link {
    font-family: bio-sans, sans-serif;
    color: #3F64FF;
    font-size: 10pt;
    vertical-align: middle;
}

.alertr-logo {
    height: 16px;
    vertical-align: middle;
}

.site-logo-link-home {
    position: relative;
}

.site-logo-link {
    position: absolute;
    top: 10px;
    left: 16px;
    cursor: pointer;
}

.site-logo {
    height: 50px;
}

.fb-share, .twitter-share {
    margin: 0 6px;
    padding: 4px;
    font-family: bio-sans, sans-serif;
    float: right;
    color: #FFF !important;
    border-radius: 4px;
    display: flex;
    font-size: 10pt;
}
.fb-share {
    background-color: #1B77F2;
}
.twitter-share {
    background-color: #1B91DA;
}
.social-share {
    position: relative;
    top: 20px;
    display: inline-block;
}
.social-share-left {
    position: relative;
    top: 20px;
    display: inline-block;
}
#result-text {
    color: #A3A2A2;
    font-size: 42pt;
    margin: 20px 160px;
}
.social-disc-text {
    margin: 10px 60px 70px 60px;
    font-family: bio-sans, sans-serif;
    font-size: 1.4em;
    font-weight: 400;
    color: #A3A2A2;
}
.skip-section {
    color: #FFF;
}

.skip-section-btn {
    background-color: #edba00;
    color: #fff;
    font-size: 12pt;
    text-align: center;
    float: right;
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    width: 25%;
    font-family: bio-sans, sans-serif;
    display: block;
    padding: 10px;
    cursor: pointer;
}

.skip-section-btn-snacks {
    background-color: #edba00;
    color: #fff;
    font-size: 12pt;
    text-align: center;
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    max-width: inherit;
    width: inherit;
    font-family: bio-sans, sans-serif;
    display: block;
    padding: 10px;
    cursor: pointer;
}

.skip-outer {
    text-align: center;
    position: sticky;
    top: 40%;
}

.result-logo {
    height: 100px;
    display: block;
    margin: 40px auto;
}
.or-div {
    margin: 80px 0;
    clear: both;
    font-size: 30pt;
    text-transform: uppercase;
    font-family: bio-sans, sans-serif;   
    color: grey;
}

.start-btn-divider {
    clear: both;
    position: relative;
    width: 100vw;
    display: inline-block;
    margin:0;
}
.modal-title, .modal-body, .error-link, .error-text {
    font-family: bio-sans, sans-serif !important;   
}
.page-btn {
    text-align: center !important;
}
.error-link {
    color: #FFF !important;
}
.error-text {
    margin-bottom: 16px;
    text-align: center;
}
.inner {
    position: absolute;
    top: 0; left: 0; 
    background: rgba(0,0,0,.5);
    width: 100%;
    height: 100%;
    display: none;
}
.btn-chrome {
    margin-top: 12px;
    font-family: bio-sans, sans-serif;
    color: #FFF !important;
}
.ie-error-text {
    font-family: bio-sans, sans-serif;
}
.ie-error-text-chrome {
    font-family: bio-sans, sans-serif;
    text-align: center;
}
.chrome-btn-outer {
    text-align: center;
}

.actve {
    -webkit-animation: slideOut 2s forwards;
    -moz-animation: slideOut 2s forwards;
    animation: slideOut 2s forwards;
}

@-webkit-keyframes slideOut {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-2000px);
    }
}
@-moz-keyframes slideOut {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-2000px);
    }
}
@keyframes slideOut {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-2000px);
    }
}
.social-icons-mobile {
    display: none;
}
.social-icons-mobile .icon 
{
	margin: 0 10px;
}
.btn-social-icon {
    height: 16px;
}