/* Colors
	Yellow : 	#f5d34b
	Blue: 		#3a97b5
	Brown : 	#411f1f
	Orange :	#eb7203
	Red: 		#EB630A
*/

.left, .image-links { float: left; }
.right, .image-rechts { float: right; }
.middle { margin: 0 auto; }

/* Based on 50px gap */
.col { margin-right: 50px; }
.col-last { margin-right: 0 !important; }
.col-2-1 { width: 470px; }
.col-3-1 { width: 296px; }
.col-3-2 { width: 643px; }
.col-4-1 { width: 210px; }
.col-6-1 { width: 123px; }
.col-50 { width: 50%; }

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.small-text { font-size: 12px; line-height: 20px; }
.no-margin { margin: 0 !important; }
.hidden { display: none !important; }
.block { display: block !important; }
.inline { display: inline-block; }

input[type="text"], select, input[type="number"] { line-height: 32px; height: 32px; border: 1px solid #d4d4d4; font-family: 'raleway', arial, sans-serif; padding: 0 5px; font-size: 16px; }
textarea { line-height: 32px; border: 1px solid #d4d4d4; font-family: 'raleway', arial, sans-serif; font-size: 16px; line-height: 24px; }
input[type="text"]:focus,textarea:focus, input[type="number"]:focus {border: 1px solid #3a97b5; color: #111;  }
label.error {  font-size: 12px; color: #EB630A; display: block; }

.button { padding: 0 20px; line-height: 40px; background: #FFF; font-size: 12px; text-transform: uppercase; font-weight: 600; color: #411f1f; border-radius: 10px; display: inline-block;}
.button.button-large { padding: 0 30px; line-height: 55px; font-size: 14px; font-weight: 600; }
.button.button-small { padding: 0 10px; line-height: 32px; font-size: 12px;border-radius: 5px; }
.button.button-blue { background:#189ff5 !important; color: #FFF !important;  }
.button.button-blue:hover { background: #0085d7 !important; }
.button.button-brown { background:#411f1f !important; color: #FFF !important;  }
.button.button-brown:hover { background: #2b0a07 !important; }
.button.button-default { background:#ececec !important; color: #666 !important;  }
.button.button-default:hover { background: #cfcfcf !important; color: #333!important; }
.button.button-orange { background:#EB630A !important; color: #FFF !important;  }
.button.button-orange:hover { background: #f2a307 !important; }
button[type="submit"].button, input[type="submit"] { border: 0; margin: 0; cursor: pointer; }
.button.button-blue[disabled] { background: rgba(0,0,0,.2) !important;  }

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

body { font-family: 'raleway', arial, sans-serif; font-size: 16px; line-height: 24px; font-weight: 500; background: #e22928; }
a { text-decoration: none; }

h2 { font-size: 36px; line-height: 36px; font-weight: 700; }

div.wrapper { width: 990px; margin: 0 auto; }

#loader { display: none; opacity: 0; }
#loader.active { display: block; animation: fade-in .4s forwards;  background-color: rgba(0,0,0,.9); position: fixed; z-index: 2000; left:0; right: 0; top: 0; bottom: 0; display: flex; justify-content: center; align-items: center; color: #FFF; font-size: 12px; font-weight: 700; text-transform: uppercase; }
#loader.active img { margin-right: 10px; }
#loader.deactivate { display: block; animation: fade-out .3s forwards; }

div.header { position: absolute; z-index: 100; min-height: 100px; width: 100%; background: url(/ENGINE/IMAGES/WEEK_NL_BIER/WEBSITE/header_background_seperate.png) no-repeat 50% bottom; text-align: right;  }
div.header .wrapper { font-size: 0; }

div.header div.logo { position: absolute; z-index: 300; width: 170px; /*width: 211px;*/ margin: -40px 0 0 -85px; }
div.header div.logo img { max-width: 100%; }
div.header div.logo span { position: absolute; margin: -40px 0 0 40px; transform: rotate(-6deg); border-radius: 4px; display: block; font-size: 12px; background: #000; color: #fff; padding: 0 5px; font-weight: 700; text-transform: uppercase; font-family: Arial, sans-serif;  }

div.header div.social { position: relative; z-index: 300; margin-top: 0px;  }
div.header div.social a { width: 24px; height: 33px; line-height: 33px; display: inline-block; margin: 0 2px; margin-top: 18px; font-size: 20px; color: #FFF; }
div.header div.social a:hover { margin-top: 14px; color: #EB630A; }
div.header div.social .language { display: inline-block; margin-left: 10px; }

div.header div.navigation-trigger { display: none; width: 32px; height: 32px; background: url(/ENGINE/IMAGES/WEEK_NL_BIER/WEBSITE/icon_menu.png) no-repeat; cursor: pointer;  position: absolute; z-index: 300; left: 20px; top: 20px; opacity: .8; }
div.header div.navigation-trigger:hover { opacity: 1;}

div.header div.navigation { margin-left: 95px; margin-top: 0px;}
div.header div.navigation ul { text-align: center; }
div.header div.navigation ul li { display: inline-block; }
div.header div.navigation ul li a { color: #FFF; display: inline-block; line-height: 60px; font-size: 16px; padding: 0 15px; font-weight: 500; }
div.header div.navigation ul li a:hover,
div.header div.navigation ul li a.active { color: #EB630A; }
div.header div.navigation ul ul { position: absolute; z-index: 200; width: 100%; left: 0; opacity: 0; margin-top: 50px; display: none; background: url(/ENGINE/IMAGES/WEEK_NL_BIER/WEBSITE/subnavigation_background.png) no-repeat 50% bottom;  }
div.header div.navigation ul ul li a { color: #FFF; line-height: 60px; font-size: 16px; padding: 0 15px; }
div.header div.navigation ul ul li a:hover { opacity: 1; }
div.header div.navigation ul li:hover ul { display: block; animation: navigation-submenu-in .5s both;  }
div.header div.navigation ul li a .dot { border-radius: 50%; height: 5px; width: 5px; position: absolute; z-index: 100; background: #fff; margin-top: 58px; z-index: 300; opacity: 0; }
div.header div.navigation ul li:hover .dot { opacity: 1; height: 7px; width: 7px; margin-top: 56px; }
div.header div.navigation ul li a.active .dot { background: #EB630A; opacity: 0; }

div.header div.navigation + div.navigation-close { position: fixed; display: none; }

div.streamer { width: 100%; height: 500px; background: #411f1f url(/ENGINE/IMAGES/WEEK_NL_BIER/WEBSITE/header_2020.jpg) no-repeat 50% 50%; background-size: cover; }
div.streamer.streamer-small { height: 280px; }
div.streamer.streamer-small div.beers { height: 280px; /*background: url(/ENGINE/IMAGES/WEEK_NL_BIER/WEBSITE/beer_white_background.png) repeat-x center 275px;*/ }

div.streamer div.item { opacity: 0; background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; min-height: 500px; text-shadow: 1px 1px 2px #000; }
div.streamer div.item div.beer { /*background: url(/ENGINE/IMAGES/WEEK_NL_BIER/WEBSITE/beer_white_background.png) repeat-x center 525px;*/ min-height: 500px;  }
div.streamer div.item div.wrapper { padding-top: 200px; color: #FFF;  }
div.streamer div.item h2 { margin-bottom: 20px; }
div.streamer div.item div.button-offset { margin-top: 25px; text-shadow: none; }
div.streamer div.owl-controls div.owl-dots { position: absolute; height: 12px; width: 100%; text-align: center; top: 542px; }
div.streamer div.owl-controls div.owl-dots div { display: inline-block; width: 8px; height: 8px; background: #fff; opacity: .5; line-height: 8px; border-radius: 5px; margin: 2px 2px; }
div.streamer div.owl-controls div.owl-dots div:hover { opacity: 1; margin: 0; width: 10px; height: 10px;  }
div.streamer div.owl-controls div.owl-dots div.active { background: #3a97b5; opacity: 1; }
div.streamer div.media iframe { width: 470px; height: 264px;}
div.streamer div.media img { max-width: 100%; }

a.streamer-navigation { position: absolute; z-index: 400; top: 343px; width: 64px; height: 64px; background: url(/ENGINE/IMAGES/WEEK_NL_BIER/WEBSITE/icon_sprite.png) no-repeat; opacity: .5;}
a.streamer-navigation.streamer-next { background-position: -64px -192px; right: 20px;  }
a.streamer-navigation.streamer-next:hover {background-position: 0px -192px; opacity: 1; }
a.streamer-navigation.streamer-previous { background-position: -64px -256px; left: 20px; }
a.streamer-navigation.streamer-previous:hover { background-position: 0px -256px; opacity: 1;  }

div.dashboard { padding: 80px 0 50px 0; background: #FFF; border-bottom: 1px solid #ddd;}
div.dashboard .container { display: flex; justify-content: space-between; align-items: stretch;  }
div.dashboard .section { box-shadow: 0px 0px 6px rgba(0,0,0,.2); text-align: center; opacity: 0; animation: fade-in .5s forwards ease-out 1s; width: calc((100% / 4) - 30px); }
div.dashboard .section:nth-child(2) { animation-delay: 1.4s; }
div.dashboard .section:nth-child(3) { animation-delay: 1.8s; }
div.dashboard .section:nth-child(4) { animation-delay: 2.2s; }
div.dashboard .section .inner { padding: 80px 15px 15px 15px; color: #666; height: 100%; display: flex; justify-content: flex-start; flex-direction: column; align-items: stretch;  }
div.dashboard .section .content { margin-bottom: 24px; }
div.dashboard .section figure { max-width: 100px; height: 100px; display: block; position: absolute; margin-top: -150px; z-index: 100; opacity: 0; animation: dahsboard-image-in .25s forwards ease-out 1.5s; text-align: center; }
div.dashboard .section:nth-child(2) figure { animation-delay: 1.75s }
div.dashboard .section:nth-child(3) figure { animation-delay: 2s }
div.dashboard .section:nth-child(4) figure { animation-delay: 2.25s }
div.dashboard .section figure:after { position: absolute; content: "\f02e"; font-family: 'FontAwesome'; display: block; color: #EB630A; font-size: 30px; width: 100px; text-align: center; margin-top: -8px; z-index:-1; }
div.dashboard .section figure img { border-radius: 50%; max-width: 100px; z-index: 100;}
div.dashboard .section h2 { font-size: 24px; line-height: 24px; font-weight: 500; margin-bottom: 10px; color: #189ff5; min-height: 48px; }
div.dashboard .section .inner .link { margin-top: auto; }

div.main-content { background: #fff; font-size: 18px; line-height: 28px; }
div.main-content div.main-content-inner { padding: 50px 0; color: #666; }
div.main-content div.main-content-inner h1 { font-size: 32px; line-height: 34px; font-weight: 500; margin-bottom: 30px; color: #189ff5; }
div.main-content div.main-content-inner h2 { font-size: 24px; line-height: 26px; font-weight: 600; margin-bottom: 30px;  }
div.main-content div.main-content-inner b,
div.main-content div.main-content-inner strong { color: #333; }
div.main-content div.main-content-inner a { color: #189ff5; }
div.main-content div.main-content-inner a.download { background: url(/ENGINE/IMAGES/WEEK_NL_BIER/WEBSITE/icon_download.png) no-repeat left 50%; display: inline-block; padding-left: 25px; }
div.main-content div.main-content-inner a.download.beer-festival { margin-bottom: 20px; }
div.main-content div.main-content-inner ol { list-style: decimal; margin: 28px 0 0 28px; }
div.main-content div.main-content-inner ol li { margin-bottom: 20px; }
div.main-content div.main-content-inner ul { list-style: disc; margin: 28px 0 28px 28px; }
div.main-content div.main-content-inner ul ul { margin: 10px 0 10px 28px; list-style: circle; }

div.main-content div.side { margin-bottom: 50px; font-size: 16px; line-height: 24px; background: #ececec; }
div.main-content div.side div.side-inner { padding: 20px; }
div.main-content div.side h2 { font-size: 18px; line-height: 20px; font-weight: 700; margin-bottom: 10px; color: #666; }
div.main-content div.side h3 { font-size: 26px; line-height: 28px; font-weight: 500; margin-bottom: 30px; color: #189ff5; }

div.main-content .image-rechts { margin: 0 0 0 50px; }
div.main-content div.image { background: #ececec; width: 210px; height: 210px; overflow: hidden;}
div.main-content div.image a {  width: 210px; height: 210px; display: block; }
div.main-content div.image img {  max-width: 100%; }
div.main-content div.image:hover a{  width: 220px; height: 220px; margin: -5px 0 0 -5px; }

div.main-content video { width: 640px; height: 360px; }

div.main-content .youtube iframe { width: 640px; height: 360px; }

div.main-content div.gallery { margin-top: 30px; }
div.main-content div.gallery div.image { background: #EB630A; }
div.main-content div.gallery div.image,
div.main-content div.gallery div.image a,
div.main-content div.gallery div.image:hover a { width: 214px; height: 214px; overflow: hidden; display: block; margin: 0;}
div.main-content div.gallery div.image img { -webkit-transform: scale(1.1, 1.1); -moz-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1);}
div.main-content div.gallery div.image:hover img { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); transform: scale(1, 1); opacity: .2;}

.fancybox-title-outside-wrap { margin-top: 0 !important }

div.gallery-content { background: #333; opacity: 0; margin-top: -20px;}
div.gallery-content div { padding: 20px;}
div.gallery-content h3 { font-size: 18px; line-height: 20px; font-weight: 500; margin-bottom: 10px; }
div.gallery-content a { display: inline-block; margin-top: 10px; }

div.side div.news-item { margin-bottom: 30px;  }
div.side div.news-item span { font-size: 12px; color: #e22928; margin-bottom: 10px;  }

div.block div.block-inner { padding: 50px 0; }
div.block div.block-content { margin-bottom: 30px; }
div.block h2 { font-size: 26px; line-height: 28px; font-weight: 500; margin-bottom: 10px; }
div.block h3 { font-size: 26px; line-height: 28px; font-weight: 500; margin-bottom: 10px; }
div.block h4 { font-size: 26px; line-height: 28px; font-weight: 500; margin-bottom: 10px; }
div.block div.col { }
div.block div.title-offset { padding-top: 0px; }

div.block-googlemaps { background: #ececec; border-bottom: 1px solid #d4d4d4; color: #666; }
div.block-googlemaps div.col { padding: 50px 0; }
div.block-googlemaps h2 { color: #EB630A; }
div.block-googlemaps .options { display: flex; flex-wrap: wrap; }
div.block-googlemaps .options label { width: 50%; display: flex; align-items: center; cursor: pointer; min-height: 37px; padding-left: 47px;}
div.block-googlemaps .options label:nth-child(n+2) { margin-top: 5px; }
div.block-googlemaps .options label input { display: none; }
div.block-googlemaps .options label img { position: absolute; margin-left: -37px; max-width: 100%; width: 20px; transition: all .1s; }
div.block-googlemaps .options label input:checked + img { width: 32px; margin-left: -42px}
/*
div.block-googlemaps ul.options li { border-bottom: 1px solid #d4d4d4; line-height: 37px; min-height: 45px; margin-top: 10px; padding: 0 10px; cursor: pointer; font-weight: 600; }
div.block-googlemaps ul.options li img { margin-right: 10px; margin-top: 3px; }
div.block-googlemaps ul.options li:hover img { margin-top: 0; }
div.block-googlemaps ul.options li:hover { color: #333; }
div.block-googlemaps ul.options li.active { color: #EB630A; }
*/
div.block-googlemaps div.zipcode { margin-top: 70px; }
div.block-googlemaps div.zipcode .button-small { line-height: 40px; margin: 0; }
div.block-googlemaps div.zipcode .input-box { background: #FFF; border-left: 1px solid #c6c6c6; border-top: 1px solid #c6c6c6; border-bottom: 1px solid #c6c6c6; line-height: 40px; height: 40px; width: 222px;  }
div.block-googlemaps div.zipcode input { border: 0; background: none; margin: 0; line-height: 40px; margin: 0 5px; width: 220px; height: 40px; font-size: 16px;}

div.block-googlemaps .google-notice { position: absolute; text-align: center; width: 100%; margin-top: 50px; z-index: 99; color: #333; }
div.block-googlemaps .google-notice span { display: inline-block; background: #f1f5ad; line-height: 40px; font-size: 12px; padding: 0 20px;  font-weight: 700; box-shadow: 2px 2px 5px rgba(0,0,0,.5)}
div.block-googlemaps .google-notice span a { color: #333; text-decoration: underline; }

div.googlemaps { height: 550px; background: #e1e1e1;  }
div.googlemaps #event-map,
div.googlemaps.pubquiz #map_canvas { height: 550px; }

div.block-googlemaps div.googlemaps-date-filter { margin-top: 20px; display: flex; justify-content: flex-start; align-items: center; line-height: 32px; }
div.block-googlemaps div.googlemaps-date-filter div:first-child { min-width: 332px;  }
div.block-googlemaps div.googlemaps-date-filter a { color: #666; font-weight: bold; line-height: 32px; display: flex; align-items: center; }
div.block-googlemaps div.googlemaps-date-filter a .fa { color: #EB630A; font-size: 18px; }
div.block-googlemaps div.googlemaps-date-filter a:hover { color: #3a97b5;  }

div.googlemaps div.googlemaps-information { display: none; position: absolute; z-index: 100; opacity: 0; }
div.googlemaps div.googlemaps-information[data-active="true"] { display: block; animation: fade-in .2s forwards; }
div.googlemaps div.googlemaps-information a.close { float: right; margin: -20px 0 0px 0; }
div.googlemaps div.googlemaps-information a.close:hover { opacity: .5; }
div.googlemaps div.googlemaps-information div.details { background: #189ff5; height: 550px; font-size: 14px; line-height: 22px;  }
div.googlemaps div.googlemaps-information div.details h2 { font-size: 18px; line-height: 24px; font-weight: 600; }
div.googlemaps div.googlemaps-information div.details div.inner { padding: 50px 20px; color: #FFF; }
div.googlemaps div.googlemaps-information div.details div.inner span { display: block; }
div.googlemaps div.googlemaps-information div.details div.inner span.subtitle { color: #411f1f; }
div.googlemaps div.googlemaps-information div.details div.inner a { color: #411f1f; }

div.googlemaps div.googlemap-message { position: absolute; z-index: 500; width: 100%;  align-items: center; justify-content: center; text-align: center; display: none; }
div.googlemaps div.googlemap-message .inner {background: #189ff5; color: #fff; font-size: 14px; line-height: 24px; padding: 15px; font-weight: 700; margin-top: 60px; opacity: 0; }
div.googlemaps div.googlemap-message.active { display: flex; }
div.googlemaps div.googlemap-message.active .inner { animation : googlemaps-message-in .3s forwards;  }

div.googlemaps div.googlemaps-cluster { border-radius: 50%; text-align: center; line-height: 32px; height: 32px; width: 32px; color: #fff; background: #3998b5; font-weight: 600;}
div.googlemaps .event-count { position: absolute; display: none; line-height: 32px; height: 32px; background: #189ff5 url(/ENGINE/IMAGES/WEEK_NL_BIER/WEBSITE/icon_arrow_down.png) no-repeat 100% 50%; color: #FFF; margin-top: -32px; cursor: pointer; }
div.googlemaps .event-count a { padding: 0 20px; display: block; line-height: 32px; height: 32px; color: #FFF; }
div.googlemaps .event-count span { font-weight: bold; }
div.googlemaps .event-count:hover { background-color: #0085d7; }

div.googlemaps-events { background: #FFF; }
div.googlemaps-events .event { padding: 25px 0; margin-bottom: 25px; border-bottom: 1px solid #e1e1e1; display: none; }
div.googlemaps-events .event.active { display: block;}
div.googlemaps-events .event:last-child,
div.googlemaps-events .event.error { margin-bottom: 0; border-bottom: 0; padding-bottom: 50px; }
div.googlemaps-events .event.error { background: #ffffdb; padding-top: 50px; text-align: center; }
div.googlemaps-events .event h2 { font-size: 18px; line-height: 24px; font-weight: 600; }
div.googlemaps-events .event h2 + span { font-size: 12px; line-height: 24px; display: block; margin-bottom: 10px; color: #189ff5; }
div.googlemaps-events .event .button { margin-top: 10px; }

div.googlemaps-brewery .information,
div.googlemaps.pubquiz .information { display: none; position: absolute; z-index: 100; opacity: 1; background: rgba(255,255,255,.9); padding: 20px; margin: 10px 10px 0 10px;  max-width: 400px; font-size: 14px; line-height: 20px; }
div.main-content div.main-content-inner div.googlemaps.pubquiz .information h2,
div.main-content div.main-content-inner div.googlemaps-brewery .information h2 { margin-bottom: 0; font-size: 16px; }
div.googlemaps-brewery .information p,
div.googlemaps.pubquiz .information p { margin: 10px 0;  }
div.googlemaps.pubquiz .information .close,
div.googlemaps-brewery .information .close { float: right;  }
div.googlemaps-brewery #map_canvas { height: 500px; }
div.googlemaps-brewery .legend { margin-top: 25px; margin-bottom: 25px; border: 1px solid #ccc; padding: 10px 25px;}
div.googlemaps-brewery .legend b { display: block; margin-bottom: 5px;}
div.googlemaps-brewery .legend div { display: inline-block;  text-align: center; margin: 0 25px;}
div.googlemaps-brewery .brewer { margin-top: 25px; }
div.googlemaps-brewery .brewer td { padding: 10px 5px; border-top: 1px solid #ccc; text-align: center; vertical-align: middle; }
div.googlemaps-brewery .brewer .fa-times-circle { color: #ccc; }
div.googlemaps-brewery .brewer .fa-check-circle { color: #00aa0c; }
div.googlemaps-brewery .brewer .content { text-align: left; }
div.googlemaps-brewery .brewer .header { font-weight: bold; font-size: .8em; border-top: 0; }

div.main-content div.main-content-inner div.pubquiz-list ul { margin: 28px 0 0 0;  }
div.pubquiz-list ul li { display: flex; justify-content: space-between; align-items: flex-start; padding-top: 20px; }
div.pubquiz-list ul li + li { margin-top: 20px; border-top: 1px solid #ddd; }
div.pubquiz-list ul li div:first-child { width: calc(60% - 10px); }
div.pubquiz-list ul li div:last-child { font-size: 16px;  }

div.attention h4 { font-size: 26px; line-height: 28px; font-weight: 500; margin-bottom: 10px; }
div.attention.side-offset { margin-top: -50px; margin-bottom: 50px; }
div.attention div.inner { padding: 50px 20px 40px 20px; text-align: center;  }
div.attention div.inner .item + .item { margin-top: 40px;  }
div.attention div.inner .item .button {}
div.attention:hover div.inner { padding-top: 40px; }
div.attention.side-offset:hover div.inner { padding-top: 50px; }
div.attention div.inner .button { margin-top: 10px; }
div.attention.attention-brown { background: url(/ENGINE/IMAGES/WEEK_NL_BIER/WEBSITE/attention_brown_background.png) no-repeat bottom center; color: #FFF;  }
div.attention.attention-dark { background: url(/ENGINE/IMAGES/WEEK_NL_BIER/WEBSITE/attention_dark_background.png) no-repeat bottom center; color: #FFF;  }
div.attention.attention-blue { background: url(/ENGINE/IMAGES/WEEK_NL_BIER/WEBSITE/attention_blue_background.png) no-repeat bottom center; color: #FFF;  }
div.attention.attention-orange { background: url(/ENGINE/IMAGES/WEEK_NL_BIER/WEBSITE/attention_orange_background.png) no-repeat bottom center; color: #FFF;  }

div.block-message { background: #ececec url(/ENGINE/IMAGES/WEEK_NL_BIER/WEBSITE/beer_dark_background.png) repeat-x center bottom; color: #333; }
div.block-message h3 { margin-bottom: 30px; line-height: 34px; }
div.block-message h3.twitter-icon { background: url(/ENGINE/IMAGES/WEEK_NL_BIER/WEBSITE/icon_twitter_orange.png) no-repeat left center; padding-left: 37px;  }
div.block-message h3,
div.block-message a { color: #e22928; }
div.block-message h2 { font-size: 18px; line-height: 20px; font-weight: 600;  }
div.block-message div.news-item { margin-bottom: 30px; margin-right: 50px; }
div.block-message div.news-item span.date { color: #e22928; margin-bottom: 10px; font-size: 14px; }
div.block-message div.news-item:nth-child(3) { margin-right: 0; }

div.block-message div.tweet li { margin-bottom: 10px; }
div.block-message div.tweet li a.profile-image { float: left; width: 64px; }
div.block-message div.tweet li.odd a.profile-image { float: right; text-align: right; }
div.block-message div.tweet li a.profile-image img { border-radius: 50%; }
div.block-message div.tweet li div.tweet-content { width: 390px; float: right; }
div.block-message div.tweet li.odd div.tweet-content { float: left; }
div.block-message div.tweet li div.tweet-content .time,
div.block-message div.tweet li div.tweet-content .user { font-weight: 600; }
div.block-message div.tweet li div.tweet-content .time {color: #666 }

div.activity-latest { background: #f3f3f3; padding: 50px 0;}
div.activity-latest h4 { font-size: 26px; line-height: 28px; font-weight: 500; margin-bottom: 10px; color: #EB630A; }
div.activity-latest a {  color: #EB630A; text-decoration: underline; }
div.activity-latest .container { margin-top: 29px; border-top: 1px solid #e1e1e1;}
div.activity-latest .container.static .col { margin-top: 20px; border-bottom: 1px solid #e1e1e1; padding: 0 0 20px 0; }
div.activity-latest .container div.col:nth-child(3n+3) { margin-right: 0; }
div.activity-latest .container div.col .inner { color: #666; }
div.activity-latest .container span.today { margin-top: 15px; font-weight: bold; text-transform: uppercase; font-size: 12px; color: #EB630A; display: block; }
div.activity-latest .container h3 { line-height: 18px; }
div.activity-latest .container h3.today { padding: 0 0 0 40px; }
div.activity-latest .container h3 span { margin-bottom: 20px; color: #189ff5; display: block; font-size: 12px; font-weight:400;}
div.activity-latest .container a { color: #189ff5; margin-top: 20px; }

div.form, div.form select, div.form input[type="text"], div.form textarea, div.form label { line-height: 30px; }

div.form div.header { position: relative; margin: 50px 0 20px 0; background: none; padding: 0 0 10px 0px; border-bottom: 1px solid #e1e1e1; color: #189ff5; font-size: 20px; z-index: 0; text-align: left; min-height: 0; }
div.form div.header:first-child { margin: 0px 0 10px 0; }
div.form div.row { margin-bottom: 10px;  }
div.form span.required { color: #EB630A; }
div.form div.row.spacer { height: 10px; line-height: 10px; }
div.form div.row.note { font-size: .8em; line-height: 20px; display: inline-block; padding: 10px 20px; background: #ffffe8 }
div.form div.row div.checkboxes { margin-top: 18px; width: 100%; }
div.form div.row div.checkboxes .extended { display: flex; align-items: flex-start; }
div.form div.row div.checkboxes .extended .small { display: inline-block;  }
div.form div.row div.checkboxes .extended .small.not-bold { font-weight: initial; }
div.form div.row div.checkboxes .extended + .extended { margin-top: 20px; border-top: 1px solid #ccc; padding-top: 10px; }
div.form div.row div.checkboxes .extended label { width: 30px;  padding-top: 10px; }
div.form div.row div.checkboxes .extended figure  { width: 100px;  }
div.form div.row div.checkboxes .extended figure img { width: 100px; border-radius: 50%; box-shadow: 0px 0px 5px rgba(0,0,0,.2) }
div.form div.row div.checkboxes .extended div label { width: auto; padding-top: 0px; }

div.form div.row div.checkboxes input[type="checkbox"],
div.form div.row div.checkboxes input[type="radio"] { float: left; margin-right: 10px; margin-top:10px;}
div.form div.row div.checkboxes label { float: left; width: 95%; margin-top: -5px; margin-bottom: 10px; }
div.form div.row div.checkboxes label:after { clear: both; content: " "; font-size: 0; line-height: 0; height: 0; }
div.form div.row div.checkboxes.inline input[type="checkbox"] { float: none; }
div.form div.row div.checkboxes div.clearfix { margin-bottom: 18px; }
div.form div.row input[name="inspector"] { height: 1px; width: 1px; display: block; overflow: hidden; border: 0; }
div.form div.row div.option { margin-right: 20px; }
div.form div.row div.select { margin: 5px 0 20px 0; }
div.form div.row div.select span { display: inline-block; }
div.form div.row div.date label { margin-right: 10px; }
div.form div.row div.date label + input { margin-right: 10px; }
div.form div.row .small { font-size: .8em; display: block; font-weight: bold;}
div.form div.row.row-visible { display: none; }
div.form div.row div.dates { display: flex; justify-content: space-between; }
div.form div.row div.dates div { width: calc(50% - 10px); }
div.form div.row div.dates input[type="checkbox"] { margin-top: 10px; }

div.form div.row div.time { display: flex; justify-content: flex-start; }
div.form div.row div.time span { font-weight: 700; margin-right: 5px; }
div.form div.row div.time span.till { margin-left: 20px; }

div.form form[name="material_form"] input[type="number"] { max-width: 60px; text-align: center; }
div.form form[name="material_form"] .meal { display: flex; justify-content: flex-start; width: 100%;  }
div.form form[name="material_form"] .meal .key { width: 400px; }
div.form form[name="material_form"] .meal .value { min-width: 130px; }
div.form form[name="material_form"] #joint .checkboxes { display: flex; justify-content: flex-start; align-items: center; flex-direction: column;  }
div.form form[name="material_form"] #joint .checkboxes > div { display: flex; justify-content: flex-start; align-items: center; line-height: 32px; width: 100%; }
div.form form[name="material_form"] #joint .checkboxes > div + div { margin-top: 10px; }
div.form form[name="material_form"] #joint .checkboxes > div label { margin-bottom: 0px; width: 300px; }
div.form form[name="material_form"] #joint .checkboxes > div input[type="radio"] { float: none; }
div.form form[name="material_form"] label .note[data-text] { font-size: .8em; line-height: 20px; display: inline-block; padding: 10px 20px; background: #ffffe8 }
div.form form[name="material_form"] label .note[data-text=""] { display: none; }

div.form form[name="beer_form"] .row .removebeers { display: flex; justify-content: flex-start; flex-wrap: wrap; }
div.form form[name="beer_form"] .row .removebeers a { display: inline-block; padding: 0 4px 0 24px; border-radius: 5px; background: #9bfdff; color: #333; font-size: .8em; font-weight: 700; margin-top: 10px; }
div.form form[name="beer_form"] .row .removebeers a:before { display: block; position: absolute; content: "\f057"; font-family: 'FontAwesome'; color: #333; margin-left: -20px; font-size: 18px; }
div.form form[name="beer_form"] .row .removebeers a:hover { background: #189ff5; color: #FFF; }
div.form form[name="beer_form"] .row .removebeers a:hover:before { color: #FFF; }
div.form form[name="beer_form"] .row .removebeers a + a { margin-left: 10px; }

div.form div.standopties .extended + h3 { margin-top: 30px; }
div.form div.standopties h3 { color: #189ff5; margin-bottom: 10px; border-bottom: 1px solid #ccc; }

div.form div.standoptions .header { font-size: 12px; line-height: 18px; align-items: end; }

div.form div.standoptions .row label { font-size: 14px; } 

div.toolkit .container { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: stretch; }
div.toolkit .container .item { width: calc((100% - 50px) / 3); display: flex; flex-direction: column; justify-content: flex-center; align-items: center; text-align: center; padding: 10px; border: 1px solid #d4d4d4; font-size: 14px; border-radius: 10px;  }
div.toolkit .container .item:nth-child(n+4) { margin-top: 50px; }
div.toolkit .container .item figure img { max-width: 100%; border-radius: 50%;}1
div.toolkit .container .item  h4 { font-size: 18px; }
div.toolkit .container .item  h4 + span { display: block; color: #189ff5; font-weight: 700; }
div.toolkit .container .item .download { margin-top: auto; }

div.festival-beers {  }
div.festival-beers .filter { display: flex; justify-content: space-between; align-items: center; background: #f1f1f1; padding: 5px 15px; border-radius: 10px; }
div.festival-beers .filter div { display: flex; justify-content: space-between; align-items: center; }
div.festival-beers .filter div span { font-size: 12px; text-transform: uppercase; font-weight: 700; margin-right: 10px; color: #111; }
div.festival-beers .filter div select { width: 180px; font-size: 14px; }
div.festival-beers .filter div button { cursor: pointer; display: inline-flex; justify-content: center; align-items: center; background: #189ff5; font-weight: 700; font-size: 12px; padding: 0 10px; border-radius: 5px; color: #FFF; border: 0; line-height: 30px; text-transform: uppercase; }
div.festival-beers .filter div button span { color: #fff; }
div.festival-beers .filter div button:hover { background: #EB630A; }

div.festival-beers .container { display: flex; justify-content: center; align-items: center; flex-direction: column; }
div.festival-beers .container .beer { line-height: 24px;  display: flex; justify-content: flex-start; align-items: center; padding: 10px; background: white; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,.1); width: 100%; margin-top: 20px; }
div.festival-beers .container .beer div:nth-child(1) { width: 50% }
div.festival-beers .container .beer div:nth-child(2) { width: 40%; font-size: 14px; text-align: left; font-weight: 700; line-height: 20px; }
div.festival-beers .container .beer div:nth-child(2) span { font-weight: 400; }
div.festival-beers .container .beer div:nth-child(3) { width: 10%; font-weight: 700; color: #111; display: flex; justify-content: flex-end; align-items: center; }
div.festival-beers .container .beer div h3 { color:#EB630A; font-weight: 700; }
div.festival-beers .container .beer div h4 { font-size: 14px; display: flex; justify-content: flex-start; align-items: center;  }
div.festival-beers .container .beer div h4 span {color:#EB630A; margin-right: 5px;  }

div.festival-beers .empty { margin-top: 10px; border-radius: 10px;  text-align: center; width: 100%; color: #333; display: inline-block; background: #f1f5ad; line-height: 20px; font-size: 12px; padding: 10px 20px;  font-weight: 700; box-shadow:0px 0px 10px rgba(0,0,0,.2)}

div.block-partners{ background: #FFF; text-align: center; }
div.block-partners h4 { font-size: 16px; font-weight: 700; margin-bottom: 50px;  }
div.block-partners .collection { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }
div.block-partners .collection a { font-size: 0; line-height: 0; width: calc(100%  /4); border-right: 1px solid #ddd; border-bottom: 0px solid #ddd; }
div.block-partners .collection a img { max-width: 100%; transform: scale(.9); transition: transform .2s; }
div.block-partners .collection a:nth-child(n+5) {border-bottom: 0px solid #ddd;  }
div.block-partners .collection a:last-child,
div.block-partners .collection a:nth-child(4) {border-right: 0px solid #ddd;  }
div.block-partners .collection a:hover img { transform: scale(1) } 

div.main-content div.list {  }
div.main-content div.list div.item { margin-top: 50px; }
div.main-content div.list div.item:first-child { margin-top: 0px; }
div.main-content div.list div.item .image.right, div.main-content div.news-detail .image.right { margin: 0 0 0 20px; }
div.main-content div.list h2 { margin-bottom: 10px; }
div.main-content div.list.news-overview h2 { margin-bottom: 0px; }
div.main-content div.list div.item a.button { margin-top: 10px; }
div.main-content div.list.news-overview div.item span,
div.main-content div.news-detail span.date { font-size: 12px; margin-bottom: 10px; line-height: 18px; }

div.main-content .faq { margin-top: 30px; }
div.main-content .faq .item +.item { margin-top: 10px; }
div.main-content .faq .item .answer { height: 0; overflow: hidden; }
div.main-content .faq .item .title { padding-left: 20px; }
div.main-content .faq .item .title .fa { position: absolute; margin-left: -15px; margin-top: 5px; }
div.main-content .faq .item .answer .inner { opacity: 0; padding-left: 20px;}
div.main-content .faq .item.active .answer { height: initial; }
div.main-content .faq .item.active .answer .inner { animation: fade-in .3s forwards .2s; -webkit-animation: fade-in .3s forwards .2s; -moz-animation: fade-in .3s forwards .2s; }
div.main-content .faq .item:hover .title { color: #e22928; }
div.main-content .faq .item:hover .title .fa { margin-left: -10px; }
div.main-content .faq .item.active .title .fa { margin-left: -15px; transform: rotate(90deg); }

div.activity-detail { display: block; margin: 28px 0 0 0; background: #ececec;  }
div.activity-detail div.inner {  padding:20px;}
div.activity-detail ul { margin: 10px 0 0 28px; list-style: disc; }
div.activity-detail span.key { font-weight: 600; display: inline-block; width: 30px; color: #666; }

div.activity-detail-address { padding: 20px; background: #ececec  }
div.activity-detail-address span { display: inline-block; width: 120px; }

div.main-content div.main-content-inner .masterclasses h3 { border-bottom: 1px solid #ddd; padding-bottom: 5px; color: #e22928; }
div.main-content div.main-content-inner .masterclasses ul { list-style: none; padding: 0; margin: 0; }
div.main-content div.main-content-inner .masterclasses ul + h3 { margin-top: 40px; }
div.main-content div.main-content-inner .masterclasses ul li { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap;  padding: 10px 5px; font-size: 14px; line-height: 24px; }
div.main-content div.main-content-inner .masterclasses ul li div:nth-child(1) { width: 150px; font-weight: 700; }
div.main-content div.main-content-inner .masterclasses ul li div:nth-child(2) { width: 220px; }
div.main-content div.main-content-inner .masterclasses ul li div:nth-child(3) { width: 190px; }
div.main-content div.main-content-inner .masterclasses ul li div span { color: #999; font-weight: 700; }
div.main-content div.main-content-inner .masterclasses ul li + li { border-top: 1px solid #efefef;  }
div.main-content div.main-content-inner .masterclasses ul li[data-full="1"] { color: #999; background: #f4f4f4; }
div.main-content div.main-content-inner .masterclasses ul li[data-full="1"] div:nth-child(3):after { transform: rotate(15deg); box-shadow: 0 0 10px rgba(0,0,0,.2); position: absolute; margin-top: -40px; margin-left: 150px; width: 40px; height: 24px; content: "Vol!"; border-radius: 3px; font-weight: 700; text-transform: uppercase; color: #fff; background: #000; display: inline-flex; align-items: center; justify-content: center;  }

div.page_selector { padding: 20px 0; font-size: 12px; }
div.page_selector a { padding: 0; background: none; text-decoration: none; }
div.page_selector table { width: 100%; }
div.page_selector table td.left { width: 90px; text-align: left; }
div.page_selector table td.right { width: 90px; text-align: right; }
div.page_selector table td.left a,
div.page_selector table td.right a { display: block; line-height:32px; text-decoration: none; color: #666; border-radius: 0; text-transform: uppercase; }
div.page_selector table td.right a:hover, div.page_selector table td.left a:hover { color: #333; background: none;}
div.page_selector table td.middle { text-align: center; }
div.page_selector table td.middle a { display: inline-block; margin: 0 2px; width: 32px; height: 32px; text-align: center; color: #333; text-decoration: none; line-height: 32px; border-radius: 0; }
div.page_selector table td.middle a.active { background: #EB630A; color: #FFF; font-weight: 600; font-size: 18px; width: 32px; height: 32px; line-height: 32px; cursor: default; border-radius: 5px; }
div.page_selector table td.middle a:hover { font-size: 22px; font-weight: 600; color: #EB630A; }
div.page_selector table td.middle a.active:hover { color: #FFF; font-size: 18px; }

div.app { margin-top: 24px; border: 1px solid #ddd; }
div.app .item { display: inline-block; min-width: 49%; text-align: center; padding: 20px 0; font-size: 14px; }

div.newspaper a + a { margin-left: 10px; }

div.footer {  color: #FFF; line-height: 60px; font-size: 12px;  }
div.footer a { font-size: 12px; color: #FFF; display: inline-block;  }
div.footer a + a { margin-left: 10px; }
div.footer a:hover, div.footer a.active { color: #fff  }

div.note { margin-top: 30px; }
div.note div {font-size: .8em; line-height: 20px; display: inline-block; padding: 10px 20px; background: #ffffe8 }
div.note[data-type="success"] div { background: #c1ff9f; }

/* ANIMATION */
div.header div.navigation a,
div.streamer div.owl-controls div.owl-dots *,
.button,
div.block-googlemaps ul.options *,
div.footer a,
div.attention *,
input, textarea,
div.header div.navigation a,
div.page_selector *,
div.main-content div.image *,
div.googlemaps .event-count *,
div.main-content .faq .item .title, div.main-content .faq .item .title .fa,
div.bottom a { transition: all .2s ease; -moz-transition: all .2s ease; -webkit-transition: all .2s ease; -ms-transition: all .2s ease;  }
div.header div.social a { transition: margin-top .2s ease; -moz-transition: margin-top .2s ease; -webkit-transition: margin-top .2s ease; -ms-transition: margin-top .2s ease;  }
div.header div.navigation span { transition: all .3s ease; -moz-transition: all .3s ease; -webkit-transition: all .3s ease; -ms-transition: all .3s ease;  }
div.main-content div.gallery div.image * { transition: all .6s ease; -moz-transition: all .6s ease; -webkit-transition: all .6s ease; -ms-transition: all .6s ease; }

/* KEYFRAMES */
@keyframes fade-in { 0% {opacity: 0; } 100% { opacity: 1; } }
@-webkit-keyframes fade-in { 0% {opacity: 0; } 100% { opacity: 1; } }
@-moz-keyframes fade-in { 0% {opacity: 0; } 100% { opacity: 1; } }

@keyframes fade-out { 0% {opacity: 1; } 100% { opacity: 0; } }
@-webkit-keyframes fade-out { 0% {opacity:1; } 100% { opacity: 0; } }
@-moz-keyframes fade-out { 0% {opacity: 1; } 100% { opacity: 0; } }

@keyframes dahsboard-image-in { 0% {opacity: 0; margin-top: -150px; } 50% { opacity: 0; margin-top: -150px; } 100% { opacity: 1;  margin-top: -130px; } }
@-webkit-keyframes dahsboard-image-in { 0% {opacity: 0; margin-top: -150px; } 50% { opacity: 0; margin-top: -150px; } 100% { opacity: 1;  margin-top: -130px; } }
@-moz-keyframes dahsboard-image-in { 0% {opacity: 0; margin-top: -150px; } 50% { opacity: 0; margin-top: -150px; } 100% { opacity: 1;  margin-top: -130px; } }

@keyframes navigation-submenu-in { 0% {opacity: 0; margin-top: 50px; } 100% { opacity: 1; margin-top: 0px; } }
@-moz-keyframes navigation-submenu-in { 0% {opacity: 0; margin-top: 50px; } 100% { opacity: 1; margin-top: 0px; } }
@-webkit-keyframes navigation-submenu-in { 0% {opacity: 0; margin-top: 50px; } 100% { opacity: 1; margin-top: 0px; } }

@keyframes googlemaps-message-in { 0% {opacity: 0; margin-top: 60px; } 100% { opacity: 1; margin-top: 0px; } }