@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600&subset=latin,latin-ext);

*
{
 padding: 0;
 margin: 0;
 outline: 0;
 font-family: 'Source Sans Pro', arial, sans-serif;
}

html
{
 overflow-y: scroll;
}

body
{
 background-color: #fff;
}

.clr
{
 clear: both;
}

.center
{
 text-align: center;
}

.blue
{
 color: #8591a9;
}

h1
{
 font-size: 24px;
 font-weight: 600;
 color: #8591a9;
 margin-bottom: 1em;
 text-transform: uppercase;
}

h2
{
 font-size: 20px;
 font-weight: 600;
 color: #000;
}

h2.index
{
 font-size: 24px;
 font-weight: 600;
 color: #8591a9;
 margin-bottom: 0;
 text-transform: uppercase;
}

h1 > a,
h2 > a
{
 color: #000;
 text-decoration: none;
}

h3
{
 font-size: 18px;
 color: #8591a9;
 margin-bottom: .5em;
}

.subtitle
{
 font-size: 18px;
 font-weight: 600;
 color: #8591a9;
 margin: -1em 0 1em 0;
}

p
{
 margin-bottom: .5em;
 line-height: 1.5em;
}

p.index
{
 color: #8591a9;
}

#content ul, ol
{
 padding-left: 1.5em;
 margin-bottom: 1em;
 line-height: 1.5em;
}

header
{
 width: 100%;
}

header > div#header-container
{
 max-width: 1000px;
 height: 195px;
 margin: 0 auto;
 position: relative;
}

header div#header-logo
{
 float: left;
 margin: 20px 10px 20px 0;
 z-index: 1000;
}

header div#header-logo img
{
 display: inline-block;
}

#topmenu
{
 position: absolute;
 right: 0;
 bottom: 20px;
 text-align: right;
 z-index: 100;
 margin-left: 200px;
}

#topmenu ul
{
 list-style: none;
}

#topmenu ul > li
{
 display: inline-block;
 padding-left: 2em;
 padding-bottom: 0px;
 margin-bottom: .5em;
 font-size: 18px;
 font-weight: 600;
 text-transform: uppercase;
}

#topmenu ul > li:first-child
{
 padding-left: 0;
}

#topmenu ul > li > a
{
 text-decoration: none;
 color: #000;
}

#topmenu ul > li:hover > a,
#topmenu ul > li.active > a
{
 color: #8591a9;
}

#topmenu ul ul.submenu
{
 background-color: #fff;
 list-style: none;
 display: none;
 position: absolute;
 margin: 0 0 0 -20px;
 z-index: 100;
}

#topmenu ul ul.submenu li
{
 clear: both;
 text-align: left;
 text-transform: uppercase;
 padding: 10px 20px;
}

#topmenu ul > li:hover > ul.submenu
{
 display: block;
}

#topmenu ul > li:hover > ul.submenu > li > a:hover
{
 color: #8591a9;
}

#topmenu-h
{
 display: none;
}

#headline
{
 height: 450px;
 width: 100%;
 background-size: cover;
 background-position: center;
 transition: background-image 1s linear;
 -webkit-transition: background-image 1s linear;
 -moz-transition: background-image 1s linear;
 -o-transition: background-image 1s linear;
}

#content,
.content
{
 max-width: 1000px;
 margin: 20px auto;
}

.index-date
{
 color: #8591a9;
 font-size: 20px;
}

.more > a
{
 color: #8591a9;
 font-size: 16px;
 text-transform: uppercase;
 text-decoration: none;
}

#sponsors
{
 max-width: 1000px;
 margin: 20px auto 10px auto;
 text-align: center;
 text-transform: uppercase;
 font-size: 9pt;
}

#sponsors-container
{
 margin-top: 5px;
 border-top: 1px solid #000;
 text-align: center;
 padding-top: 10px;
}

footer
{
 width: 100%;
 background-color: #e6e6e6;
}

#footer-container
{
 max-width: 1000px;
 padding: 1em 0;
 margin: 0 auto;
 text-align: center;
}

#footer-container > p
{
 color: #000;
 line-height: 1.5em;
}

#footer-container > p > a
{
 color: #004;
}

.index-box
{
 display: inline-block;
 width: 320px;
 margin-right: 20px;
 margin-bottom: 30px;
 text-align: left;
 font-size: 20px;
}

.index-box:nth-child(3)
{
 margin-right: 0;
}

.index-box button
{
 padding: 5px 20px;
 background-color: #8591a9;
 color: #fff;
 text-transform: uppercase;
 font-size: 12px;
 border: 0;
 cursor: pointer;
}

.index-box img
{
 margin-bottom: 10px;
}

/* GALLERY */

#gallery-list
{
 text-align: center;
}

.gallery-list-item
{
 display: inline-block;
 width: 320px;
 margin-right: 20px;
 margin-bottom: 20px;
 text-align: center;
 vertical-align: top;
}

.gallery-list-item a
{
 text-decoration: none;
 color: #000;
}

.gallery-image-list-item
{
 display: inline-block;
 width: 320px;
 margin-right: 20px;
 margin-bottom: 20px;
 text-align: center;
 vertical-align: top;
}

.gallery-list-item:nth-child(3n),
.gallery-list-item:last-child,
.gallery-image-list-item:nth-child(3n),
.gallery-image-list-item:last-child
{
 margin-right: 0;
}

#cookie-popup
{
 box-sizing: border-box;
 width: 100%;
 padding: 1.5em;
 text-align: center;
 position: fixed;
 bottom: 0;
 left: 0;
 background: #eaeaea;
 border-top: 1px solid #444a55;
 z-index: 9999;
 font-size: 10pt;
}
#cookie-popup > button
{
 margin-top: 1em;
 padding: 2px 10px;
 cursor: pointer;
 text-transform: uppercase;
}

/* */

@media only screen and (min-width: 716px) and (max-width: 1019px)
{
 p img {max-width: 100%;}
 #header-container, #footer-container {margin: 0 20px !important;}
 #content, .content {margin: 20px !important;}
 .index-box:nth-child(3n) {margin-right: 10px;}
 .gallery-list-item:nth-child(3n), .gallery-image-list-item:nth-child(3n) {margin-right: 20px;}
 .gallery-list-item:nth-child(2n), .gallery-image-list-item:nth-child(2n) {margin-right: 0;}
}

@media only screen and (min-width: 481px) and (max-width: 715px)
{
 p img {max-width: 100%;}
 #header-container, #footer-container {margin: 0 20px !important;}
 #content, .content {margin: 20px !important;}
 .gallery-list-item:nth-child(2n), .gallery-list-item:nth-child(3n), .gallery-image-list-item:nth-child(2n), .gallery-image-list-item:nth-child(3n) {margin-right: auto;}
 .gallery-list-item, .gallery-image-list-item {display: block; margin: 0 auto 20px auto;}
 .gallery-list-item:last-child, .gallery-image-list-item:last-child {margin-right: auto;}
 #topmenu ul > li {padding-left: 1em; margin-bottom: .2em;}
}

@media only screen and (max-width: 480px)
{
 p img {max-width: 100%;}
 #header-container, #footer-container {margin: 0 20px !important;}
 #content, .content {margin: 20px !important;}
 header div#header-logo {margin: 10px 0 0 0;}
 header > div#header-container {height: 170px;}
 #headline {height: 350px;}
 .index-box, .index-box img {width: 100%;}
 .gallery-list-item:nth-child(2n), .gallery-list-item:nth-child(3n), .gallery-image-list-item:nth-child(2n), .gallery-image-list-item:nth-child(3n) {margin-right: auto;}
 .gallery-list-item, .gallery-image-list-item {display: block; margin: 0 auto 20px auto;}
 .gallery-list-item:last-child, .gallery-image-list-item:last-child {margin-right: auto;}

 #topmenu-h {display: block; cursor: pointer; float: right; text-align: right; z-index: 999; margin: 10px 0 0 0;}
 #topmenu {position: static; padding-left: 0;  right: auto; bottom: auto;  text-align: center; font-size: 1.5em; background-color: #fff; margin-left: 0;}
 #topmenu a {font-weight: 400;}
 #topmenu > ul {display: none; padding: 0; clear: both; border-left: 1px solid #333; border-right: 1px solid #333; margin: 0;}
 #topmenu > ul > li {float: none; display: block; padding-left: 1em; margin-bottom: .2em; border-bottom: 1px solid #333;}
# #topmenu > ul > li:hover {background-color: #eee;}
# #topmenu > ul > li:hover > ul.submenu {background-color: #eee;}
 #topmenu > ul > li > a {display: inline-block; width: 100%;}
 #topmenu > ul > li.active > a {font-weight: 600;}
 #topmenu ul ul.submenu {display: block; position: static; margin: 0; background-color: #fff;}
 #topmenu ul ul.submenu > li {padding: .5em 0 0 0; border-top: 1px solid #333; width: 100%; margin-top: .5em; text-align: center;}
}