/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    /*border:1px solid black;*/
    border: 0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

/*
---------------------------------------
END OF: html5doctor.com Reset Stylesheet
---------------------------------------
*/

@font-face {
    font-family: DINPro-Bold;
    src: url('/fonts/FF_DIN_Pro_Bold_Italic.otf');
    font-weight: bold;
}

@font-face {
    font-family: DINPro-Black;
    src: url('/fonts/FF_DIN_Pro_Black_Italic.otf');
    font-weight: bolder;
}

@font-face {
    font-family: DINPro;
    src: url('/fonts/FF_DIN_Pro_Medium_Italic.otf');
    font-weight: normal;
}


body {
    font-family: DINPro;
    background-image: url('/images/SIGNAGE_WESTIN_CVIJET_1080.jpg');
    background-repeat: no-repeat;
    /*background-attachment: fixed;*/
    /*background-position: -1900px 1100px;*/
    padding: 0 70px;
}

.croatian {
    font-family: DINPro-Black;
    font-weight: bolder;
}

.english {
    font-family: DINPro-Bold;
    font-weight: bold;
}

#westinLogo {
    display: flex;
    height: 266px;
    justify-content: center;
    align-items: center;
}

#dateTime {
    display: flex;
    height: 78px;
    justify-content: space-between;
    align-items: stretch;
}
    #dateTime span {
        background-color: #D9D6CF;
        color: #87807C;
        width: 465px;
        font-size: 52px;
        font-family: DINPro-Black;
        font-weight: bolder;
        display: flex;
        justify-content: center;
        align-items: center;
    }

#weather {
    display: flex;
    height: 175px;
    justify-content: center;
    align-items: center;
    border-width: 2px 0;
    border-color: #D9D6CF;
    border-style: solid;
    margin: 22px 0;
}
    #weather div {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

    }
        #weather div > span {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        #weather div > span:first-child {
            font-size: 24px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
            #weather div > span:first-child > span:first-child {
                color: #87807C;
            }
            #weather div > span:first-child > span:last-child {
                color: #9a9390;
            }
        #weather div > span:last-child {
            font-size: 28px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
            #weather div > span:last-child > span {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                font-size: 24px;
            }
                #weather div > span:last-child > span > span:first-child {
                    color: #87807C;
                    font-family: DINPro-Black;
                    font-weight: bolder;
                }
                #weather div > span:last-child > span > span:last-child {
                    color: #9A9390;
                }
    #weather hr {
        width: 1px;
        height: 122px;
        background-color: #D9D6CF;
    }

.westinTextSection {
    height: 134px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
}
    .westinTextSection div {
        height: 79px;
        background-color: #D9D6CF;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #897A70;
        margin: 2px 0;
        font-size: 26px;
        white-space: nowrap;
        overflow: hidden;

        /*text-overflow: ellipsis;*/
    }

    .westinTextSection div span {
        width: auto;
        height: auto;
    }

    .marquee {
        /*animation: marquee 60s linear infinite;*/
    }

    /*@keyframes marquee {
        0%   { transform: translate(100%,0); }
        100% { transform: translate(-100%,0); }
    }*/

.color0 {
    color: #007E7A;
}

.color0_light {
    color: #4F908E;
}

.color1 {
    color: #549A40;
}

.color1_light {
    color: #77A85F;
}

.color2 {
    color: #A2AE4C;
}

.color2_light {
    color: #B3BA6C;
}

#events {
    height: 915px;
}
    #events table {
        margin:20px 0;
        width: 100%;
        font-family: DINPro-Bold;
        font-weight: bold;
    }
        #events table thead tr th {
            font-size: 32px;
            text-align: center;
            vertical-align: middle;
            border-width: 0 1px;
            border-color: #D9D6CF;
            border-style: solid;
        }
            #events table thead tr th span:first-child {
                color: #87807C;
            }
            #events table thead tr th span:last-child {
                color: #9A9390;
            }
        #events table thead tr th:first-child {
            border-left-width: 0;
        }
        #events table thead tr th:last-child {
            border-right-width: 0;
        }
        #events table tbody tr td {
            border-width: 5px;
            border-style: solid;
            border-color: transparent;
            background-clip: padding-box;
            text-align: center;
            vertical-align: middle;
            font-size: 20px;
            font-family: DINPro-Bold;
            font-weight: bold;
            color: #9A9390;
            height: 40px;
        }
        #events table tbody tr td:first-child {
            border-left-width: 0;
            text-align: left;
            padding-left: 25px;
            position: relative;
        }
        #events table tbody tr td:first-child:before {
            content: "\25A0";
            position: absolute;
            left: 5px;
            top: 8px;
        }
        #events table tbody tr td:first-child[class="color0"]:before {
            color: #007E7A;
        }
        #events table tbody tr td:first-child[class="color1"]:before {
            color: #549A40;
        }
        #events table tbody tr td:first-child[class="color2"]:before {
            color: #A2AE4C;
        }
        #events table tbody tr td:last-child {
            border-right-width: 0;
        }
        #events table tbody tr:nth-child(odd) td {
            background-color: #E1DED9;
        }
        #events table tbody tr:nth-child(even) td {
            background-color: #F0EEEB;
        }
        #events table tbody tr td[colspan="3"] {
            height: 54px;
            vertical-align: bottom;
            text-align: left;
            font-size: 26px;
            background-color: white;
            color: #009C7A;
            position: relative;
            padding-bottom: 8px;
            padding-left: 0;
        }
        #events table tbody tr td[colspan="3"]:before {
            background: none;
            /*border: 2px solid #f00;*/
            border-style: solid;
            border-width: 1px 0;
            border-color: #D9D6CF;
            content: "";
            display: block;
            position: absolute;
            top: 4px;
            left: 0px;
            right: 0px;
            bottom: 0px;
            pointer-events: none;
        }

#bottomSpace {
    height: 100px;
    width: 100%;
}