html { margin: 0px; padding: 0px; width: 100%; height: 100%; }
body { background-color: transparent; width: 100%; height: 100%; margin: 0px; padding: 0px; font-family: 'Roboto', sans-serif; color: #666666; font-weight: 300; font-size: 14px; }

h1 { font-weight: 500; color: #ff9900; margin-bottom: 30px; }

::selection { background: #ff9900; }
::-moz-selection { background: #ff9900; }

a, a:active, a:link, a:visited { text-decoration: none; color: #ed7900; }
a:hover { text-decoration: none; color: #a48272; }

.row { width: 100%; }

.welcome { position: absolute; color: #ffffff; text-align: center; width: 100%; margin: auto; top: 200px; }
body>.logo { position: fixed; top: 0px; left: 0px; width: 100%; z-index: 1; }
body>.logo>.top { background: #ff9900; height: 40px; position: absolute; width: 100%; top: 0px; z-index: 1; }
body>.logo>.content { position: relative; width: 900px; top: 50px; margin: auto; z-index: 1; }
body>.logo>.content>.vaala-logo { position: absolute; top: 20px; left: 0px; }
body>.logo>.content>.search { position: absolute; right: 50px; top: 50px; z-index: 1; width: 205px; height: 30px; }
body>.logo>.content>.facebook { position: absolute; right: 0px; top: 50px; z-index: 1; }
body>.logo>.content>.issuu { position: absolute; right: 0px; top: 50px; z-index: 1; }

.footer { position: relative; width: 100%; background: #888888; }
.footer>.content { position: relative; width: 900px; margin: auto; color: #ffffff; padding-top: 20px; padding-bottom: 20px; vertical-align: top; }
.footer>.content>div { position: relative; display: inline-block; width: 280px; vertical-align: top; font-size: 14px; }
.footer>.content>.facebook { position: absolute; top: 20px; right: 0px; width: 32px; z-index: 10; }
.footer>.content>.issuu { position: absolute; top: 20px; right: 0px; width: 32px; z-index: 10; }

.btn-issuu, .btn-facebook { cursor: pointer; }
#search { position: absolute; top: 3px; left: 3px; width: 166px; height: 24px; border: 0px; padding-left: 5px; }
#btn-search { position: absolute; top: 0px; right: 0px; width: 30px; height: 30px; border: 0px; cursor: pointer; }

.small-footer { position: relative; width: 100%; background: #f0f0f0; border-radius: 10px; padding: 20px; margin-top: 40px; }

.panel-layer { position: relative; width: 100%; padding-top: 800px; }
.panel-layer>.background { background-position: center; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; height: 100%; position: absolute; width: 100%; top: 0px; }
.panel-layer>.background>img { display: none; }


.text { position: relative; width: 100%; z-index: 2; }
.text>.background { position: absolute; width: 100%; height: 100%; background: #ffffff; z-index: 0; }
.text>.content { position: relative; width: 900px; margin: auto; z-index: 1; padding-top: 40px; padding-bottom: 40px; }

.dash_title { font-size: 16px; width: 100%; color: #493c4c; display: block; clear: both; }

.dash-glob { border-left: 1px solid #CCCCCC; margin-bottom: 20px; }

#countdown_dashboard { text-align: center; }
#countdown_dashboard .dash-glob:first-child { margin-left: 0; border-left: none; }

.digit { color: #493c4c; font-size: 100px; font-weight: 300; display: inline-block; overflow: hidden; text-align: center; height: 110px; line-height: 110px; position: relative; vertical-align: middle; }

.contacts { position: fixed; right: 0px; top: 0px; bottom: 0px; width: 40px; background: #ffffff; z-index: 101; }
.contacts>div.social-media-logo { position: relative; padding: 8px; }
.contacts>div.social-media-logo>img { position: relative; width: 100%; }
.rotate>div { position: absolute; top: -10px; right: 0px; }
.rotate { position: absolute; left: 30px; top: 300px; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); }

.gallery>div { position: relative; display: inline-block; width: 120px; height: 120px; margin: 10px; overflow: hidden; cursor: pointer; }
.gallery>div>img { position: absolute; height: 100%; top: -1000px; left: -1000px; bottom: -1000px; right: -1000px; margin: auto; }

.supporters>div { position: relative; display: inline-block; margin: 10px; }

.theme { position: relative; margin-bottom: 20px; }
.theme>.picture { position: relative; }
.theme>.picture>img { position: relative; width: 100%; }
.theme>.text { position: absolute; height: 100%; width: 100%; display: none; top: 0px; }
.theme:hover>.text { display: block; }
.theme>.text>h1 { position: absolute; top: 20px; width: 100%; z-index: 1; text-align: center; padding-left: 10px; padding-right: 10px; }
.theme>.text>.description { position: absolute; top: 100px; width: 100%; z-index: 1; text-align: center; padding-left: 10px; padding-right: 10px; }
.theme>.text>.background { position: absolute; height: 100%; width: 100%; background: #ffffff; opacity: 0.9; z-index: 0; }

.question { font-weight: 700; cursor: pointer; }
.answer { display: none; }

.overlay { position: fixed; display: none; width: 100%; height: 100%; z-index: 100000; top: 0px; left: 0px; right: 0px; bottom: 0px; text-align: center; }
.overlay>.background { position: absolute; width: 100%; height: 100%; background: #000000; opacity: 0.5; filter: alpha(opacity=50); z-index: 1000; }

.overlay>.picture { position: absolute; width: 100%; height: 100%; z-index: 1001; display: none; }
.overlay>.picture>img { position: absolute; margin: auto; bottom: -10000px; top: -10000px; left: -10000px; right: -10000px; z-index: 2; }
.overlay>.picture>.next { position: absolute; cursor: pointer; top: 50%; margin-top: -25px; right: 20px; z-index: 1003; color: #ffffff; font-size: 40px; }
.overlay>.picture>.previous { position: absolute; cursor: pointer; top: 50%; margin-top: -25px; left: 20px; z-index: 1003; color: #ffffff; font-size: 40px; }
.overlay>.close_btn { position: absolute; cursor: pointer; top: 20px; right: 20px; overflow: hidden; z-index: 1003;  color: #ffffff; font-size: 40px; }

label { font-weight: 100; }

.kauplus { padding-bottom: 20px; padding-right: 20px; }
.kauplus>.text { padding-top: 10px; }

@media all and (max-width: 900px) {
    body { font-size: 14px; }

    body>.logo { top: 0px; margin-left: 0px; width: 100%; }
    body>.logo>.content { margin-left: 0px; width: 100%; }
    body>.logo>.content>.search { top: -45px; }
    body>.logo>.content>.facebook { top: -45px; right: 10px; }


    .text>.content { position: relative; width: 100%; margin: auto; z-index: 1; margin-top: 40px; margin-bottom: 40px; padding: 10px; }
    .contacts { display: none; }

    .digit { font-size: 50px; }

    .panel-layer { display: flex; flex-direction: column; padding-top: 0px; }
    .panel-layer>.background { background-size: contain; background-attachment: inherit; height: auto; position: relative; }
    .panel-layer>.background>img { display: inherit; width: 100%; }

    .text { margin-top: auto; align-self: flex-start; position: relative; }

    .theme>.text>h1 { font-size: 20px; top: 0px; margin-top: 10px; }
    .theme>.text>.description { font-size: 10px; top: 70px; }

    .footer>.content { width: 100%; display: flex; padding: 10px 30px 10px 10px; }
    .footer>.content>div { padding: 5px; }
    .footer>.content>.logo { width: 150px; }
    .footer>.content>.logo>img { width: 100%; height: auto; }
    .footer>.content>.facebook { margin-right: 10px; }
}

@media all and (max-width: 600px) {
    .digit { font-size: 20px; height: 30px; line-height: 30px; }
}