/* ==============================================
 * Use sane box model
 * ============================================== */

*, 
*:before, 
*:after {
  -webkit-box-sizing : border-box;
  -moz-box-sizing    : border-box;
  box-sizing         : border-box;
}

/* ==============================================
 * Basic style
 * ============================================== */

html, body {
    text-align  : center;
    height      : 100%;
    font-family : Verdana, sans-serif;
    font-size   : 18px;
}

.section {
    position   : relative;
    max-width  : 880px;
    margin     : auto;
    padding    : 120px 40px 15px 40px;
    text-align : left;
}

h1 {
    font-size   : x-large;
    border-top  : 3px solid;
    padding-top : 20px;
    margin      : 0px -20px 30px -20px;
}

h2 {
    font-weight   : bold;
    margin-top    : 50px;
    margin-bottom : 20px;
}

p {
    margin-bottom : 20px;
    line-height   : 1.2;
}

blockquote {
    padding       : 0px 40px;
    margin-bottom : 20px;
    line-height   : 1.2;
}

a {
    text-decoration : none;
}

a:hover {
    text-decoration : underline;
}

ul {
    list-style-type : circle;
}

li {
    margin-bottom : 20px;
    margin-left   : 25px;
    line-height   : 1.2;
}

/* ==============================================
 * Colors
 * ============================================== */

#navigation, #header, #nav-links a, #register a {
    color : white;
}

#navigation, #header, #register:after {
    background-color : rgb(30,157,85);  /* green */
    background-color : rgb(255,62,61);  /* red */
    background-color : rgb(225,184,27); /* yellow */
    background-color : rgb(25,129,166); /* blue */
}

a, h1, #ein span, #register:after {
    color : rgb(30,157,85);  /* green */
    color : rgb(255,62,61);  /* red */
    color : rgb(225,184,27); /* yellow */
    color : rgb(25,129,166); /* blue */
}

h1 {
    border-top-color : rgb(30,157,85);  /* green */
    border-top-color : rgb(255,62,61);  /* red */
    border-top-color : rgb(225,184,27); /* yellow */
    border-top-color : rgb(25,129,166); /* blue */
}

/* ==============================================
 * Title and Navigation bar
 * ============================================== */

#navigation {
    position    : fixed;
    top         : 0;
    left        : 0;
    min-width   : 100%;
    height      : 85px;
    padding     : 15px;
    text-align  : left;
    z-index     : 5;
    white-space : nowrap;
}

.nav-shade {
    box-shadow : 0 4px 2px rgba(0,0,0,0.2);
}

#nav-links {
    display        : inline-block;
    vertical-align : top;
    position       : relative;
    top            : 20px;
    font-size      : 16px;
    z-index        : 6;
}

#nav-links a {
    padding : 0px 5px;
}

#title {
    opacity     : 0;
    font-family : 'Montserrat', sans-serif;
    display     : block;
    overflow    : hidden;
    position    : absolute;
    right       : 330px;
    left        : 330px;
    top         : 15px;
    height      : auto;
    text-align  : center;
    z-index     : 5;
    overflow    : visible;
}

#title1, #title2 {
    display     : block;
    margin      : auto;
    text-align  : center;
    width       : 300px;
    height      : 1.1em;
    line-height : 1.1;
}

#title1 {
    font-size : 30px;
}

#title2 {
    font-size : 16px;
}

/* ==============================================
 * Header Panel
 * ============================================== */

#header {
    width      : 100%;
    height     : 100%;
    display    : table;
    box-shadow : 0 4px 2px rgba(0,0,0,0.2);
}

#inner-header {
    width          : 100%;
    height         : 100%;
    display        : table-cell;
    vertical-align : middle;
    position       : relative;
    padding        : 20px;
    text-align     : center;
}

#header-title {
    font-family : 'Wire One', cursive;
    font-size   : 96px;
}

#local-global {
    display     : block;
    font-size   : 2.3em;
    position    : relative;
}

#local-global span {
    font-size : 0.4363em;
    position  : relative;
    bottom    : .3em;
}

#methods {
    margin-top : -.3em;
    display    : block;
}

#subtitle, #place {
    text-transform : uppercase;
    font-family    : 'Montserrat', sans-serif;
    font-size      : 18px;
}

#place {
    margin-top : .5em;
}

#register {
    display       : block;
    position      : absolute;
    right         : 50px;
    bottom        : 40px;
    border-radius : 10px;
    z-index       : 5;
}

#register a {
    display       : block;
    position      : relative;
    padding       : 15px 25px;
    border-radius : 10px;
    width         : 100%;
    height        : 100%;
    background    : rgba(255,255,255,0.35);
    z-index       : 10;
}

#register:after {
    content    : '';
    display    : block;
    position   : absolute;
    top        : 0;
    left       : 0;
    width      : 100%;
    height     : 100%;
    box-shadow : 0 0 10px 10px;
    z-index    : 9;
}

#register a:hover {
    text-decoration : none;
    background      : rgba(255,255,255,0.45);
}

#register.sticky {
    position : fixed;
    top      : 20px;
    bottom   : auto;
}

/* ==============================================
 * Ein's section
 * ============================================== */

#ein h1 {
    visibility: hidden;
}

#ein img, .col img {
    float         : left;
    margin-right  : 0px;
    max-width     : 150px;
}

#ein span {
    font-size      : xx-large;
    float          : left;
    vertical-align : top;
    margin-right   : 10px;
}

/* ==============================================
 * Program section
 * ============================================== */

.col-container {
    overflow      : auto;
    margin-bottom : 20px;
}

.col {
    float       : left;
    width       : 33%;
    padding     : 0px 20px 0px 20px;
    line-height : 1.8em;
}

#schedule-table-container {
    display    : block;
    margin     : 0px -40px 0px;
    padding    : 0px 40px 0px;
    overflow-x : auto;
}

#long-schedule-table {
    display     : table;
    white-space : nowrap;
    margin      : 30px 20px 20px;
    border      : 1px solid black;
}

#long-schedule-table td {
    padding        : 5px 15px;
    vertical-align : top;
}

#long-schedule-table .day-row td {
    padding : 13px 10px;
}

#long-schedule-table .last-row td {
    padding-bottom: 13px;
}

#long-schedule-table .time-cell {
    padding-left : 30px;
    text-align   : right;
}

#schedule-table {
    display       : table;
    table-layout  : fixed;
    width         : 680px;
    margin        : 30px 20px 20px;
    border-bottom : 1px solid black;
    border-right  : 1px solid black;
}

#schedule-table td {
    padding        : 10px 15px;
    vertical-align : middle;
}

#schedule-table .first-row td {
    border-bottom : 1px solid black;
    border-top    : 1px solid black;
}

#schedule-table td.first-column {
    border-left  : 1px solid black;
    border-right : 1px solid black;
    text-align   : right;
}

#schedule-table .first-row td.first-column {
    border-left : none;
    border-top  : none;
}

/* ==============================================
 * Footer
 * ============================================== */

#logos {
    text-align : center;
    margin-top : 30px;
}

#logos img {
    vertical-align : middle;
    width          : 60px;
    height         : auto;
    margin         : 0 40px;
}

#footer {
    margin-top : -140px;
    height     : 331px;
    background : url(images/skyline_sears.png) bottom right no-repeat,
                 url(images/skyline_low.png) bottom right 134px no-repeat, 
                 url(images/skyline_low.png) bottom right 816px no-repeat,
                 url(images/skyline_low.png) bottom right 1498px no-repeat; 
}

/* ==============================================
 * Fixes for small screens (phones and tablets)
 * ============================================== */

@media (max-width: 850px) {
    .section {
        padding-top : 50px;
    }
    #navigation {
        position : absolute;
    }
    #inner-header {
        text-align : center;
        position   : relative;
    }
    #register {
        position : relative;
        display  : inline-block;
        right    : auto;
        bottom   : auto;
        top      : 50px;
    }
    .nav-shade {
        box-shadow : none;
    }
    #register.sticky {
        position : relative;
        right    : auto;
        bottom   : auto;
        top      : 50px;
    }
    #title {
        display : none;
    }
}

@media (max-width: 750px) {
    #logos img {
        margin : 0 5px;
    }
    #footer {
        margin-top : -80px;
    }
}

@media (max-width: 690px) {
    #navigation {
        height     : auto;
        width      : 100%;
        padding    : 15px 0;
        text-align : center;
    }
    .long-uic {
        display : none;
    }
    #header-title {
        margin-top : .3em;
        margin-bottom : .3em;
    }
}

@media (max-width: 960px) {
    #header-title {
        font-size: 40px;
        font-size: 10vw;
    }
}

@media (max-width: 525px) {
    #ein {
        text-align : center;
    }
    #ein img {
        display : inline-block;
        margin  : 0 auto 50px;
        float   : none;
    }
    #ein p {
        text-align : left;
    }
}

@media (max-width: 765px) {
    .col {
        float : none;
        width : auto;
    }
    .einphoto {
        display : none;
    }
}
@media (max-height: 500px) {
    #header {
        height : 500px;
    }
}