/*
Blue      #216393
Hover     #
Headings and content padding left and right is 20px
*/

/* Mobile display on/off styles */

.regular {
    font-family: 'BrandonGrotW01-Regular', sans-serif;
}

.light {
    font-family:'Brandon Grot W01 Light', sans-serif;
}

.bold {
    font-family:'Brandon Grot W01 Bold', sans-serif;
}

.mobyo,
.yomob {
    display: block !important;
}

.mobno,
.nomob {
    display: none !important;;
}

/* Table layouts */

.content .table {
    display: block;
    width: 100%;
    position: relative;
}

.content .table-row {
    display: block;
    width: 100%;
    position: relative;
}

.content .table-cell {
    display: block;
    width: 100%;
    position: relative;
}

p, ul, ul li, h2, h3, h4, h5, h6 {
    color: white;
}

/* Masthead */

body {
    background-color: #216393;
}

#masthead {
    display: block;
    margin: 75px auto 0 auto;
    width: 100%;
    text-align: center;
    z-index: 1;
}

#masthead a img {
    width: 90%;
}

.nav {
    width: 100%;
    margin-top: 35px;
    display: block;
    font-family:'Brandon Grot W01 Bold', sans-serif;
    text-align: center;
    text-transform: uppercase;
}

.nav a {
    margin-right: 10px;
    text-decoration: none;
    font-size: 1.230769231em;         /* 16px */
    color: #FFFFFF;
    letter-spacing: 1px;
}

.nav a:last-child {
    margin-right: 0;
}

.nav a.active,
.nav a:hover {
    color: #6dd0f7;
}

.intro {
    width: 100%;
    margin: 75px auto 0 auto;
    padding: 0 20px 0 20px;
    text-align: center;
}

.intro p {
    font-family:'Brandon Grot W01 Light', sans-serif;
    color: #FFFFFF;
    font-size: 1.923076923em;    /* 25px */
}

/* Clouds */

#cloud-container {
    display: none;
    z-index: -1;
}

#plane-container {
    display: none;
    z-index: -1;
}

/* Content */

.content {
    width: 100%;
    margin: 0 auto;
}

.content div.v-plane {
    margin-top: 32px;
    margin-bottom: 0;
    text-align: center;
}

.content h1 {
    margin-top: 30px;
    color: #FFFFFF;
    font-family:'Brandon Grot W01 Bold', sans-serif;
    font-size: 2.2em;    /* 25px */
    text-transform: uppercase;
    text-align: center;
}

#how_it_works .content h1 {
    margin-bottom: 35px;
}

.content h2 {
    color: #FFFFFF;
    font-family:'Brandon Grot W01 Bold', sans-serif;
    font-size: 1.923076923em;    /* 25px */
    text-transform: uppercase;
    text-align: center;
    width: 100%;
    margin: 80px auto 35px auto;
}

#how_it_works .content h2 {
    margin-top: 40px;
    margin-bottom: 20px;
    font-size: 1.538461538em;    /* 20px */
}


.content h2:first-child {
    margin-top: 45px;
}

.content p {
    width: 100%;
    color: #FFFFFF;
    font-family: 'BrandonGrotW01-Regular', sans-serif;
    font-size: 1.692307692em;    /* 22px */
    text-align: center;
    margin: 0 auto 20px auto;
}

.content p a,
.content p a:visited,
.content p a:active {
    color: #6dd0f7;
    text-decoration: none;
}

.content p a:hover {
    opacity: 0.75;
}

.content ul {
    width: 100%;
}

#faqs .content ul li,
#how_it_works .content ul li {
    width: 100%;
    color: #FFFFFF;
    font-family: 'BrandonGrotW01-Regular', sans-serif;
    font-size: 1.692307692em;    /* 22px */
    text-align: center;
    margin: 0 auto 20px auto;
}

#how_it_works .content ul li::before {
    content: " ";
    background-color: #112f47;
    display: block;
    height: 7px;
    width: 60px;
    margin: 10px auto 20px auto;
}

#how_it_works .content ul li strong {
    color: #112f47;
    font-family: 'Brandon Grot W01 Bold', sans-serif;
}

#faqs .content h2 {
    width: 95%;
    height: 60px;
    line-height: 60px;
    margin-bottom: 0;
    margin-top: 17px;
    padding-left: 5px;
    color: #216393;
    font-size: 0.9em;
    text-align: left;
    background-color: #6dd0f7;
    border-radius: 10px;
    text-transform: uppercase;
    cursor: pointer;
}

#faqs .content h2:hover {
    opacity: 0.75;
}

#faqs .content h2:first-child {
    margin-top: 45px;
}

#faqs .content div[data-id] {
    display: none;
    margin-top: 20px;
    text-align: left;
}

/* Form */

form {
    width: 100%;
    margin:  90px 0 0 0;
    padding: 0 20px;
}

form input::-ms-clear {
    display: none;
    width: 0;
    height: 0;
    opacity: 0;
}

form .form-group {
    position: relative;
    width: 100%;
    display: block;
    margin-bottom: 20px;
}

img.search-loader {
    position: absolute;
    top: 57px;
    right: 20px;
}

form .form-group.submit {
    text-align: center;
}

label {
    display: block;
    width: 100%;
    margin-bottom: 13px;
    text-transform: uppercase;
    font-family:'Brandon Grot W01 Bold', sans-serif;
    font-size: 1.3em;
    color: #FFFFFF;
}

label.hidden {
    display: none;
}

input {
    width: 100%;
    height: 57px;
    padding: 5px 14px 5px 15px;
    text-transform: uppercase;
    border-radius: 5px;
    outline: none;
    border: none;
    font-size: 1.5em;
    color: grey;
}

input.first {
    float: left;
    width: 49%;
}

input.last {
    float: right;
    width: 49%;
}

input:required:invalid,
input:focus:invalid {
    color: #fb5b72;
}

input.success {
    color: #accf74;
}

input[type="email"]:required:valid,
input[type="email"]:focus:valid,
input[type="date"]:required:valid,
input[type="date"]:focus:valid,
input[type="time"]:required:valid,
input[type="time"]:focus:valid {
    color: #accf74;
}

label.first {
    float: left;
    width: 49%;
}

label.last {
    float: right;
    width: 49%;
}

label[for="bed_at"],
label[for="wake_at"] {
    color: #113145;
}

.NotWin32 input::-webkit-inner-spin-button {
    font-size: 80px;
}

.Win32 input::-webkit-inner-spin-button {
    font-size: 32px; /*For windows on chrome */
}

.unstyled::-webkit-inner-spin-button,
.unstyled::-webkit-calendar-picker-indicator {
    opacity: 0;
    /*cursor: pointer;*/
}

input[type="date"] {
    background: #ffffff url("/static/jet-lag-calculator/images/calendar.png") 178px 14px no-repeat;
}

input[type="time"] {
    background: #ffffff url("/static/jet-lag-calculator/images/arrows.png") 190px 20px no-repeat;
}

input[type="submit"] {
    width: 90%;
    background-color: #00aeef;
    border-radius: 40px;
    color: #FFFFFF;
    font-family:'Brandon Grot W01 Bold', sans-serif;
    font-size: 1.3em;
    padding: 10px 0;
    outline-style:none;
    -webkit-appearance: none;
}

input[type="submit"]:hover {
    cursor: pointer;
    opacity: 0.75;
}
.content ul.live_list {
    position: absolute;
    top: 91px;
    width: 100%;
    padding: 10px 0 10px 0;
    z-index: 1000;
    color: black;
    background-color: #FFFFFF;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top: 1px solid grey;
    border-bottom: 1px solid grey;
    text-align: left;
}

.content ul.live_list li {
    width: 100%;
    margin: 0;
    min-height: 50px;
    padding: 5px 5px 20px 20px;
    text-transform: uppercase;
    font-family:'Brandon Grot W01 Bold', sans-serif;
    font-size: 1.3em;
    color: grey;
    line-height: 20px;
    text-align: left;
    cursor: pointer;
}

.content ul.live_list li:hover {
    opacity: 0.75;
}

.content ul.live_list li.error {
    color: #fb5b72;
}

.content ul.live_list li small {
    font-size: 0.7em;
    margin-top: -4px;
    display: block;
}

.content .errors {
    margin-top: 50px;
}

.content .errors ul {
    margin-bottom: -50px;
    text-align: center;
}

.content .errors ul li {
    color: #fb5b72;
    margin-bottom: 5px;
    text-align: center;
    font-size: 1.692307692em;
    font-family:'Brandon Grot W01 Bold', sans-serif;
}

.content pre {
    color: white;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 1.2em;
}

a.debug {
    color: white;
    position: absolute;
    top: 0;
    left: 0;
}

/* Schedule */

#results .row {
    position: relative;
    width: 100%;
    text-align: center;
}

#results .title_row {
    position: relative;
    width: 100%;
    height: auto;
    margin:  60px auto 0 auto;
    text-align: center;
    background-color: #6dd0f7;
}

#results .day_row {
    position: relative;
    margin-top: 0;
    background-color: #113047;
}

#results .depart_row {
    background: transparent;
    color: white;
    margin: 0;
}

#results .depart_row h2:first-child {
    background-color: #6dd0f7;
}

#results .depart_row h2:last-child {
    background-color: transparent;
    font-family:'Brandon Grot W01 Bold', sans-serif;
    color: #ffffff;
    text-transform: none;
    font-size: 1.8em;
}

#results .day_row.mid {
    margin-top: 20px;
    margin-bottom: 20px;
}

#results .title_row h2 {
    position: relative;
    color: #FFFFFF;
    font-family:'Brandon Grot W01 Bold', sans-serif;
    font-size: 1.523077em;
    line-height: 30px;
    text-transform: uppercase;
}

#results .depart_row.dbl {
    height: auto;
}

#results .depart_row.tpl {
    height: auto;
}

#results .avoid {
    max-width: 80%;
}

#results .row h2 {
    position: relative;
    height: 50px;
    line-height: 50px;
    font-family:'Brandon Grot W01 Bold', sans-serif;
    color: #ffffff;
    font-size: 2.307692308em;    /* 30px */
    text-transform: uppercase;
}

#results .row h2.email {
    margin-top: 60px;
}

#results .row h2.time {
    color: #6dd0f7;
}

#results .row h2 .time_sub_title {
    position: absolute;
    top: 2px;
    height: 50px;
    line-height: 50px;
    padding-left: 30px;
    font-family:'Brandon Grot W01 Bold', sans-serif;
    color: #113047;
    font-size: 0.75em;
    text-transform: uppercase;
}

#results .action_row {
    display: table;
    margin: 0 auto;
    height: 237px;
    width: 100%;
    text-align: center;
}

#results .action_row div {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    height: 100%;
    color: #ffffff;
    font-family:'Brandon Grot W01 Bold', sans-serif;
    font-size: 0.80em;
    text-transform: uppercase;
}

#results .action_row .left {
    width: 50.2%;
    border-right: 4px solid #113047;
}

#results .action_row .right {
    width: 49.8%;
    padding-left: 30px;
    text-align: left;
}

#results .text_sch h3 {
    margin-top: 60px;
    margin-bottom: 30px;
    color: #113047;
    font-family:'Brandon Grot W01 Bold', sans-serif;
    font-size: 1.538461538em;    /* 20px */
    text-transform: uppercase;
}

#results .text_sch h4 {
    margin-bottom: 30px;
    color: #ffffff;
    font-family:'Brandon Grot W01 Bold', sans-serif;
    font-size: 1.538461538em;    /* 20px */
    text-transform: uppercase;
}

#results .text_sch h4 span {
    margin-right: 10px;
    color: #6dd0f7;
}

#results .btn {
    margin-top: 75px;
}

#results .email_me {
    width: 600px;
    margin-top: 30px;
    margin-bottom: 60px;
}

#results .email_me input[type="email"] {
    width: 360px;
    float: left;
    height: 50px;
    line-height: 50px;
    background-color: #ffffff;
    font-family:'Brandon Grot W01 Bold', sans-serif;
    border-radius: 40px 0 0 40px;
}

#results .email_me button[type="submit"] {
    outline: none;
    border: none;
    float: right;
    background-color: #00aeef;
    display: inline-block;
    width: 200px;
    height: 50px;
    line-height: 50px;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
    color: #FFFFFF;
    font-family:'Brandon Grot W01 Bold', sans-serif;
    font-size: 1.538461538em;    /* 20px */
    padding: 0;
    text-transform: uppercase;
    text-decoration: none;
}

#results .email_me button[type="submit"]:active,
#results .email_me button[type="submit"]:hover {
    opacity: 0.75;
}

#results .emerging_sun {
    position: relative;
}

#results .emerging_sun.none {
    display: none;
}

#results .av_sun.none {
    display: none;
}

#results .av_full.none {
    display: none;
}

#results .av_cloud.none {
    display: none;
}

#results .emerging_zzz {
    position: relative;
}

#results .emerging_zzz.none {
    display: none;
}

#results .av_sun,
#results .av_full,
#results .av_cloud {
    position: absolute;
    top: 0;
    left: 0;
    width: 141px;
}

#results .av_sun {
    -webkit-transition: opacity 1s; /* Safari */
    transition: opacity 1s;
}

.btn {
    display: inline-block;
    width: 330px;
    height: 50px;
    line-height: 54px;
    background-color: #00aeef;
    border-radius: 40px;
    color: #FFFFFF;
    font-family:'Brandon Grot W01 Bold', sans-serif;
    font-size: 1.538461538em;    /* 20px */
    padding: 0;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
}

.btn:hover {
    color: #FFFFFF;
    opacity: 0.75;
}

/* Share */

.share {
    width: 100%;
    margin: 55px auto 0 auto;
    text-align: center;
}

.share h3 {
    margin-bottom: 20px;
    position: relative;
    float: none;
    top: 6px;
    text-transform: uppercase;
    color: #FFFFFF;
    font-family:'Brandon Grot W01 Bold', sans-serif;
    font-size: 1.3em;
}

.share .icons {
    float: none;
}

/* Text version */

#results .btn.toggle-text {
    margin-top: 0;
}

#results .btn.printer {
    display: inline-block;
    margin-top: 50px;
}

#results .text-wrapper-toggle {
    margin-top: 50px;
    display: none;
}

#results .text-wrapper {
    margin: 50px auto 0 auto;
    text-align: center;
}

#results .text-wrapper .day-wrapper {
    width: 100%;
    margin: 0 auto 50px auto;
    text-align: center;
    text-transform: uppercase;
    font-family: 'Brandon Grot W01 Bold', sans-serif;
}

#results .text-wrapper .day-wrapper p.title {
    margin-bottom: 20px;
    font-size: 1.538461538em;    /* 20px */
    color: #113047;
}

#results .text-wrapper .day-wrapper p.action {
    margin-bottom: 20px;
    font-size: 1.538461538em;    /* 20px */
    color: #ffffff;
}

#results .text-wrapper .day-wrapper p.action .time {
    color: #00aeef;
    margin-right: 10px;
}

/* Footer */

#footer {
    position: relative;
    width: 100%;
    margin-top: 87px;
    min-height: 205px;
    background-color: #2672a9;
    text-align: center;
}

#footer .web-blinds {
    display: block;
    width: 100%;
    padding-top: 70px;
    margin: 0 auto;;
}

#footer .web-blinds img {
    width: 210px;
    margin-right: 40px;
}

#footer .web-blinds p {
    width: 75%;
    font-family: 'BrandonGrotW01-Regular', sans-serif;
    font-size: 1.3em;
    color: #FFFFFF;
    text-align: center;
    margin: 20px auto 0 auto;
}

#footer .web-blinds a {
    color: #00aeef;
    text-decoration: none;
    font-weight: bold;
    font-family: 'Brandon Grot W01 Bold', sans-serif;
}

#footer .web-blinds a:hover {
    color: #fff;
    text-decoration: none;
}

#footer h6 {
    margin-top: 60px;
    padding-bottom: 60px;
    font-family: 'BrandonGrotW01-Regular', sans-serif;
    font-size: 1.3em;
    color: #FFFFFF;
}

#footer h6 a {
    color: #FFFFFF;
    text-decoration: none;
    font-family:'Brandon Grot W01 Bold', sans-serif;
}

#footer h6 a:hover {
    opacity: 0.75;
}