/**
 * Orange #f37520
 * Red #d53430
 * Green #99c24d rgba(153,194,77,1)
 * Blue #314e75 rgba(49,78,117,1)
 * Gray #38474f rgba(56,71,79,1)
 */
 @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
/**
 * Defaults
 */

html, body {
    height: 100%;
    margin: 0;
    background-color: #295273;
}

table,tr,td,div,p,ul,li,div {
    font-family: 'Poppins', Arial, sans-serif;
    font-weight: 400;
    font-size: 1em;
    color: #38474f;
}

/**
 * Headings
 */

h1 {
    font-size: 40px;
    margin-top: 0px;
}

h2 {
    font-size: 34px;
}

h3 {
    margin-top: 1.2em;
    margin-bottom: 0;
    font-size: 22px;
}

h4 {
    font-size: 18px;
}

h1, h2, h3, h4 {
    color: #295273;
    font-weight: 600;
}


/**
 * Tag Defaults
 */

strong {
    font-weight: 600;
}

p {
    margin: 10px 0px 20px 0px;
}

li {
    margin: 0px 0px 10px 0px;
}

td {
    vertical-align: top;
}

a {
    color: #f37520;
    cursor: pointer;
    text-decoration: none;
}

a:hover {
    color: #314e75;
}


/**
 * Container defs
 */

#container {
    width: 100%;
    background-color: #ffffff;
}

#header, #body, #menu_margin, #footer_margin {
    margin: auto;
    max-width: 900px;
}

#menu_container, #footer_container {
    margin: auto;
    width: 100%;
    background-color: #3d8ca6;
}

#footer_container {
    background-color: #295273;
}

@media screen and (max-width: 975px) {
    #header{
        padding: 0px 20px 20px 20px;
    }
}
@media screen and (max-width: 775px) {
    #header{
        padding: 0px 20px 0px 20px;
    }
}

#event_logo  {
    width: 300px;
    height: 150px;
    float: right;
    margin-top: 20px;
}

@media screen and (max-width: 975px) {
    #event_logo{
        width: 200px;
        height: 100px;
        padding-top: 10px;
    }
}
@media screen and (max-width: 775px) {
    #event_logo{
        float: none;
        margin: auto;
        display: block;
        padding: 0px 60px 0px 60px;
        clear: both;
    }
}

#menu_container {
    margin: auto;
    margin-top: 5px;
    height: 45px;
    background-color: #3d8ca6;
}

#body {
    padding-top: 20px;
    padding-bottom: 30px;
}

@media screen and (max-width: 899px) {
    #body {
        padding: 20px 20px 30px 20px;
    }
}

#footer_container {

}

#footer_margin {
    height: 100%;
    padding-top: 20px;
    padding-bottom: 20px;
}

#footer_margin p, #footer_margin strong, #footer_margin a {
    color: #ffffff;
}
@media screen and (max-width: 899px) {
    #footer_margin {
        padding: 20px;
    }
}


/**
 * Header
 */

#header .header_words {
    float: left;
    margin-right: 20px;
}

#header .header_words img {
    max-width: 575px;
}
#header .lead_header {
    font-weight: 700;
    font-size: 40px;
}
#header .tagline {
    font-size: 23px;
    line-height: 30px;
}
#header .poweredby {
    font-size: 15px;
}

@media screen and (max-width: 975px) {
    #header .header_words {
        padding-top: 20px;
    }
    #header .lead_header {
        font-size: 30px;
    }
    #header .tagline {
        font-size: 16px;
        line-height: 22px;
    }
    #header .poweredby {
        font-size: 10px;
    }
}

@media screen and (max-width: 850px) {
    #header .header_words {
        max-width: 65vw;
    }

    #header .header_words img {
        max-width: 100%;
    }
}

@media screen and (max-width: 650px) {
    #header .header_words {
        float: none;
        display: block;
        clear: both;
        padding-right: 80px;
    }
    #header .lead_header {
        font-size: 30px;
    }
    #header .tagline {
        font-size: 16px;
        line-height: 22px;
    }
    #header .poweredby {
        font-size: 10px;
    }

    #header .header_words {
        max-width: 80vw;
    }

    th.grey, td.grey {
        display: none;
    }
}

@media screen and (max-width: 650px) {
    #header .lead_header {
        font-size: 22px;
    }
    #header .tagline {
        font-size: 13px;
        line-height: 18px;
    }
    #header .poweredby {
        font-size: 10px;
    }
}

/**
 * Menu
 */

#menu_wide_screen {
    display: block;
}
#menu_burger {
    display: none;
}
#burger_image {
    width: 40px;
    padding: 10px 10px;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 20px;
}
#close_x {
    display: none;
}

.flex-menu {
    padding: 0;
    margin: auto;
    max-width: 900px;
    list-style: none;
    height: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
}

.flex-menu-item {
    padding: 10px 40px 10px 40px;
    text-align: center;
    color: #ffffff;
    cursor: pointer;
    text-transform: uppercase;
}

.flex-menu-item:hover, .active_menu_item {
    background-color: #ec992f;
}

@media screen and (max-width: 775px) {
    #menu_wide_screen {
        display: none;
    }
    #menu_burger {
        display: block;
    }
    #menu_container {
        display: none;
        position: absolute;
        background-color: transparent;
    }
    #close_x {
        display: block;
        float: right;
        width: 30px;
        margin-top: -20px;
        cursor: pointer;
        margin-right: 40px;
    }
    .flex-menu {
        display: block;
        background-color: #3d8ca6;
        margin-left: -20px;
        padding-top: 40px;
        height: auto;
    }
    .flex-menu-item {
        background-color: #3d8ca6;
        margin: auto;
        border-top: 1px solid #ffffff;
        font-size: 16px;
    }
    #about_menu {
        border-top: 1px solid #ffffff;
        margin-top: 20px;
    }
}

/**
 *  Order Page Stuff
 */

.order-section {
    display: flex;
    margin-top: 35px;
}

.order-section h3 {
    margin-top: 0.5em;
}
.order-section h4 {
    margin-top: 0.1em;
}

.order-section .desc {
    flex: auto;
}

.order-section .option, .order-section .cost {
    padding: 10px 0 0 40px;
}

.order-section .option {
    width: 60px;
}

.order-section .option select {
    width: 100%;
    font-size: 20px;
}

.order-section .cost {
    width: 100px;
    font-size: 20px;
    text-align: right;
}

#total {
    text-align: right;
    font-size: 26px;
}

#total #total-amount {
    display:inline-block;
    width: 100px;
    padding-right:15px;
}

/**
 * Index Page Flexbox
 */

.flex-container {
    padding: 0;
    margin: 0;
    list-style: none;

    display: flex;

    justify-content: space-around;
}

.flex-item {
    background: #ffffff;
    padding: 0px 0px 20px 0px;
    width: 420px;
    height: 260px;
    text-align: center;
    margin-bottom: 20px;
    border: 1px solid #f37520;
}

.flex-item-header {
    background-color: #f37520;
    color: #ffffff;
    font-size: 20px;
    line-height: 60px;
}

.flex-item p {
    font-size: 16px;
    padding-left: 30px;
    padding-right: 30px;
}


/**
 * Submit button
 */

input[type='submit'], input[type='button'], button {
    font-family: 'Poppins', Arial, sans-serif;
    font-weight: bold;
    font-size: 16px;
    text-transform: uppercase;
    padding: 10px 20px;
    background-color: #ec992f;
    color: #fff;
    border-radius: 7px !important;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    -webkit-appearance: none;
    -webkit-border-radius: 0;
}

input[type='submit']:hover, input[type='button']:hover, button:hover {
    background-color: #be5d30;
}

input[type="text"], input[type="password"], input[type="email"] {
    border: 1px solid #b2b2b2;
    padding: 5px;
    font-size: 1rem;
    height: 43px;
    margin-left: 15px;
    margin: 0;
    -webkit-border-radius: 5px;
    -moz-border-radius: 6px;
    border-radius: 5px;
    box-sizing: border-box;
}

#bio_info input[type='text'],
#bio_info select,
#userEmailsTable input[type='text'] {
    height: 43px;
    font-size: 1rem;
}

input[type='text'], select {
    width: 500px;
}
@media screen and (max-width: 600px){
    input[type='text'], select {
        width: 90%;
    }
}



/**
 * Index callout
 */

.indexCallout {
    font-size: 36px;
    font-weight: bold;
    line-height: 150%;
    color: #38474f;
    text-align: center;
}

/**
 * Index table (front page display)
 */

.indexTable {
    margin: 0px auto;
    position: relative;
}

.indexTable .title {
    font-size: 24px;
    padding: 4px 10px;
    font-weight: bold;
}

.indexTable .picture {
    vertical-align: middle;
    text-align: center;
    width: 200px;
}

.indexTable .picture img {
    border: 0;
}

.indexTable input {
    position: absolute;
    z-index: 5;
    bottom: 0px;
    right: 0px;
}

#agree_to_terms {
    width: 28px;
    height: 28px;
    vertical-align: middle;
}

#agree_to_terms_label {
    vertical-align: middle;
}

/**
 * Deadlines
 */

.deadlineText {
    color: #d53430;
    font-weight: bold;
}


/**
 * Pricing table (front page)
 */

.priceTable {
    text-align: center;
    border: 0px;
    border-right: 1px solid #ffffff;
    border-bottom: 1px solid #ffffff;
    width: 97%;
    margin: auto;
    box-sizing: border-box;
}

.priceTable th {
    font-weight: 600;
}

.priceTable td, .priceTable th {
    border-top: 1px solid #ffffff;
    border-left: 1px solid #ffffff;
    padding: 16px;
    vertical-align: middle;
}

.priceTable .grey, .priceTable .green {
    text-align: center;
    width: 95px;
}

.priceTable .descr {
    text-align: left;
}

@media screen and (max-width: 775px) {
    .priceTable td {
        padding: 5px;
    }
}


/**
 * Pop up in same window, dim background
 */

.popInfoBG {
    z-index: 1000;
    background-color: rgba(56,71,79,0.7);
    width: 100%;
    height: 100%;
    display: none;
    position: fixed;
    top: 0px;
    left: 0px;
}
.popInfo {
    box-sizing: border-box;
    background-color: #ffffff;
    color: #38474f;
    border: 1px solid #38474f;
    border-radius: 10px;
    width: 90%;
    max-width: 450px;
    height: 90%;
    max-height: 400px;
    margin: auto;
    margin-top: 20%;
    padding: 20px;
}
.popInfoBigger {
    box-sizing: border-box;
    background-color: #ffffff;
    color: #38474f;
    border: 1px solid #38474f;
    border-radius: 10px;
    width: 90%;
    max-width: 500px;
    height: 90%;
    max-height: 600px;
    margin: auto;
    margin-top: 10%;
    padding: 20px;
}
#closePopInfo {
    float: right;
    width: 20px;
}


/**
 * Right-hand full (deadline) callout
 */

.callout {
    text-align: center;
    width: 150px;
    height: 150px;
    background-image: url('../images/callout.png');
    float: right;
}

.callout span {
    font-size: 13px;
    font-weight: bold;
    line-height: 135%;
    color: #fff;
    display: block;
}

.callout span.deadline1 {
    margin: 14px 0 0 0;
}

.callout span.dots {
    margin: 2px 0 0 0;
    color: #38474f;
}

.callout span.deadline2 {
    margin: 0;
}


/**
 * Right-hand half callout
 */

.callout_250 {
    text-align: center;
    width: 225px;
    height: 225px;
    background-image: url('../images/callout_250_1.png');
}

.callout_250 span {
    font-size: 14px;
    line-height: 90%;
    font-weight: bold;
    color: #fff;
    position: relative;
    top: 24px;
}


/**
 *
 */

.extras {
    background-color: #38474f;
    text-align: left;
    color: #fff;
    padding: 5px;
}

.extras_box {
    font-size: 14px;
    background-color: #fff;
    color: #000;
    padding: 5px;
    margin: 25px 0;
}

.extras em {
    font-size: 13px;
}

/**
 * Colors for table headings, html headings and spans
 */

td.red {
    background-color: #d53430 !important;
    color: #fff;
}

td.orange {
    background-color: #f37520 !important;
    color: #fff;
}

td.green {
    background-color: rgba(153,194,77,0.4) !important;
    color: #000;
}

td.grey {
    background-color: rgba(56,71,79,0.3) !important;
    color: #000;
}

.red {
    color: #be5d30;
}

.orange {
    color: #ec992f;
}

.green {
    color: #9cce74;
}

.blue {
    color: #295273;
}

.grey {
    color: #637bba;
}

/***
 * To change columns colors for prices
 */
th.grey {
    background-color: #295273;
    color: #ffffff;
}
th.green {
    background-color: #9cce74;
    color: #ffffff;
}

/**
 *  Spreedly Input Adjustments.
 */

#spreedly-form div {
    height: 55px !important;
}

#spreedly-form input[type='text'] {
    height: 35px !important;
}

/**
 * Errors
 */

#errors, #errors p {
    background-color: #fff;
    color: #ff0000;
    font-weight: bold;
    padding: 0px;
    margin: 10px 0px 40px 0px;
    border: none;
}

#errors ul li {
    text-transform: lowercase;
    color: #ff0000;
}

#errors ul li:first-letter {
    text-transform: capitalize;
}