@import url("http://hello.myfonts.net/count/2fcb88");
@import url("http://hello.myfonts.net/count/30f2f6");
@import url("http://hello.myfonts.net/count/31d938");
::-moz-selection,::selection{
    background:#777;
    text-shadow:none
}
hr{
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #ccc;
    margin:1em 0;
    padding:0
}
img{
    vertical-align:middle
}
 /* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 28px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 2px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
} 

fieldset{
    border:0;
    margin:0;
    padding:0
}
textarea{
    resize:vertical
}
.chromeframe{
    margin:0.2em 0;
    background:#fcd123;
    color:#000;
    padding:0.2em 0.8em
}
.ir{
    background-color:transparent;
    border:0;
    overflow:hidden;
    *text-indent:-9999px
}
.ir:before{
    content:"";
    display:block;
    width:0;
    height:150%
}
.hidden{
    display:none !important;
    visibility:hidden
}
.visuallyhidden{
    border:0;
    clip:rect(0 0 0 0);
    height:1px;
    margin:-1px;
    overflow:hidden;
    padding:0;
    position:absolute;
    width:1px
}
.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus{
    clip:auto;
    height:auto;
    margin:0;
    overflow:visible;
    position:static;
    width:auto
}
.invisible{
    visibility:hidden
}
.clearfix{
    *zoom:1
}
.clearfix:before{
    content:" ";
    display:table
}
.clearfix:after{
    content:" ";
    display:table;
    clear:both
}
@media print{
    *{
        background:transparent !important;
        color:#000 !important;
        box-shadow:none !important;
        text-shadow:none !important
    }
    a{
        text-decoration:underline
    }
    a:visited{
        text-decoration:underline
    }
    a[href]:after{
        content:" (" attr(href) ")"
    }
    abbr[title]:after{
        content:" (" attr(title) ")"
    }
    .ir a:after{
        content:""
    }
    a[href^="javascript:"]:after,a[href^="#"]:after{
        content:""
    }
    pre,blockquote{
        border:1px solid #999;
        page-break-inside:avoid
    }
    thead{
        display:table-header-group
    }
    tr{
        page-break-inside:avoid
    }
    img{
        page-break-inside:avoid;
        max-width:100% !important
    }
    @page{
        margin:0.5cm
    }
    p,h2,h3{
        orphans:3;
        widows:3
    }
    h2,h3{
        page-break-after:avoid
    }
}
@-webkit-keyframes bugfix{
    from{
        padding:0
    }
    to{
        padding:0
    }
}
body{
    margin:0;
    -webkit-animation:bugfix infinite 1s
}
.is-hidden{
    opacity:0;
    -webkit-transition:-webkit-all 500ms cubic-bezier(0.6, 0.2, 0.1, 1) 0s;
    transition:all 500ms cubic-bezier(0.6, 0.2, 0.1, 1) 0s
}
.pagination ul li a.active{
    border-color:#FF2929
}
#not-found>.is-centered>h2{
    font-weight:bold;
    font-size:120px;
    color:#fff
}
#not-found p{
    font-size:1.6rem
}
#not-found a{
    color:#FF2929
}
div.overlay ul li span:hover{
    color:#FF2929;
    transition:all 500ms cubic-bezier(0.6, 0.2, 0.1, 1) 0s
}
.facebook{
    position:relative;
    bottom:4px
}
.blog-reddit{
    position:relative;
    bottom:2px
}
.blog-linkedin{
    margin-left:0.4rem !important
}
.imgVersion{
    position:absolute;
    top:60px;
    left:50px
}
#imprint>p{
    line-height:180%
}
@keyframes showNav{
    from{
        opacity:0
    }
    to{
        opacity:1
    }
}
#confirm-model{
    opacity:0
}
.showModel{
    display:block;
    opacity:1;
    animation:showNav 250ms ease-in-out both
}
html{
    font:16px/24px "Helvetica Neue", Helvetica, Arial, sans-serif;
    -ms-text-size-adjust:100%;
    -webkit-text-size-adjust:100%;
    box-sizing:border-box;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale
}
*,*:before,*:after{
    box-sizing:inherit;
    font-smoothing:antialiased;
    margin:0;
    padding:0
}
img{
    max-width:100%;
    border:0
}
li{
    list-style:none
}
a{
    background:transparent
}
a,a:visited{
    outline:0;
    text-decoration:none
}
a:active,a:hover,a:focus{
    text-decoration:none;
    outline:0
}
input:focus{
    border:1px solid #77c100
}
h1{
    font-size:1.5em;
    line-height:1.75em
}
h2{
    font-size:1.25em;
    line-height:1.375em
}
h3{
    font-size:1em;
    line-height:1.25em
}
h4{
    font-size:0.875em;
    line-height:1.125em
}
h5{
    font-size:0.75em;
    line-height:1.125em
}
h6{
    font-size:0.625em;
    line-height:1em
}
h1,h2,h3,h4,h5,h6{
    -moz-font-feature-settings:"liga=1, dlig=1";
    -ms-font-feature-settings:"liga", "dlig";
    -webkit-font-feature-settings:"liga", "dlig";
    -o-font-feature-settings:"liga", "dlig";
    font-feature-settings:"liga", "dlig"
}
abbr,acronym,blockquote,code,dir,kbd,listing,plaintext,q,samp,tt,var,xmp{
    hyphens:none
}
p{
    margin:0 0 1.5em;
    word-break:break-word;
    hyphens:auto
}
p+p{
    margin-top:-1.5em
}
pre code{
    word-wrap:normal;
    white-space:pre-wrap
}
pre{
    white-space:pre
}
code{
    white-space:pre;
    font-family:monospace
}
.drop-cap:first-letter{
    float:left;
    margin:0;
    padding:0.125em 0.125em 0 0;
    font-size:6em;
    line-height:0.5;
    text-indent:0;
    background:transparent;
    color:inherit
}
svg:not(:root){
    overflow:hidden
}
button,input{
    line-height:normal
}
button,select{
    text-transform:none
}
button,html input[type="button"],input[type="reset"],input[type="submit"]{
    -webkit-appearance:button;
    cursor:pointer
}
button[disabled],html input[disabled]{
    cursor:default
}
input[type="search"]{
    -webkit-appearance:textfield;
    box-sizing:content-box
}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{
    -webkit-appearance:none
}
button::-moz-focus-inner,input::-moz-focus-inner{
    border:0;
    padding:0
}
textarea{
    overflow:auto;
    vertical-align:top
}
table{
    border-collapse:collapse;
    border-spacing:0
}
.center{
    text-align:center;
    margin:0 auto
}
.is-hidden{
    opacity:0
}
#not-found{
    text-align:center;
    padding-top:150px;
    color:grey
}
#not-found h2{
    font-size:40px;
    margin-bottom:20px;
    color:grey
}
.row{
    display:flex;
    flex:0 1 auto;
    flex-direction:row;
    flex-wrap:wrap
}
.col{
    flex:0 0 auto;
    padding-right:1rem;
    padding-left:1rem;
    flex-grow:1;
    flex-basis:0;
    max-width:100%
}
@font-face{
    font-family:'DINNextLTPro-Regular';
    src:url("../webfonts/2FCB88_1_0.eot");
    src:url("../webfonts/2FCB88_1_0d41d.eot?#iefix") format("embedded-opentype"),url("../webfonts/2FCB88_1_0.html") format("woff2"),url("../webfonts/2FCB88_1_0.woff") format("woff"),url("../webfonts/2FCB88_1_0.ttf") format("truetype");
    font-weight:normal
}
@font-face{
    font-family:'FFDINWebProBold';
    src:url("../webfonts/30F2F6_0_0.eot");
    src:url("../webfonts/30F2F6_0_0d41d.eot?#iefix") format("embedded-opentype"),url("../webfonts/30F2F6_0_0.html") format("woff2"),url("../webfonts/30F2F6_0_0.woff") format("woff"),url("../webfonts/30F2F6_0_0.ttf") format("truetype")
}
@font-face{
    font-family:'DINNextLTPro-Light';
    src:url("../webfonts/31D938_0_0.eot");
    src:url("../webfonts/31D938_0_0d41d.eot?#iefix") format("embedded-opentype"),url("../webfonts/31D938_0_0.html") format("woff2"),url("../webfonts/31D938_0_0.woff") format("woff"),url("../webfonts/31D938_0_0.ttf") format("truetype")
}
html{
    background-color:black;
    font-size:10px;
    font-feature-settings:"kern" 1, "dlig" 1, "ss01" 1, "opbd" 1
}
body{
    box-sizing:border-box;
    font-family:'DINNextLTPro-Regular', sans-serif;
    font-weight:normal
}
a{
    color:white;
    cursor:pointer;
    font-family:'FFDINWebProBold', sans-serif;
    font-weight:normal
}
p{
    color:white;
    font-size:1.2rem;
    font-weight:normal
}
input{
    -webkit-appearance:none
}
input::-moz-focus-inner{
    border:0;
    padding:0
}
input::-ms-clear{
    display:none
}
input:focus{
    border:none;
    outline:none
}
h1,h2,h3{
    font-family:'DINNextLTPro-Light', sans-serif;
    font-weight:normal;
    line-height:1.2;
    text-transform:uppercase;
    letter-spacing:3px;
    color:white
}
h1{
    font-size:42px;
    letter-spacing:6px
}
@media screen and (max-width: 570px){
    h1{
        font-size:30px
    }
}
h2{
    font-size:32px
}
h3{
    font-size:24px
}
h4{
    font-family:'DINNextLTPro-Regular', sans-serif;
    font-weight:normal;
    letter-spacing:5px;
    text-transform:uppercase;
    font-size:16px;
    color:#63727d
}
h5{
    font-family:'DINNextLTPro-Regular', sans-serif;
    font-weight:normal;
    letter-spacing:5px;
    color:white;
    font-size:12px;
    text-transform:uppercase
}
.injecticons{
    height:0px
}
.icon{
    display:inline-block;
    width:24px;
    height:24px
}
.playicons-png{
    max-height:100%;
    margin-top:-5px;
    margin-left:2px
}
.playicons-media{
    margin-top:0;
    margin-left:4px
}
.bg{
    background-image:url(../../assets/img/hero_bg1.jpg);
    background-size:cover;
    background-position: center;
    background-repeat:no-repeat;
    position:absolute;
    z-index:-1;
    top:0;
    left:0;
    bottom:0px;
    width:100%;
    height:100vh;
    min-height:100%
}
.bg2{
    background-image:url(../../assets/img/hero_bg2.jpg);
    background-position:center bottom
}
.wrapper{
    max-width:1440px;
    padding:0 4rem;
    width:100%;
    margin:0 auto 0 auto
}
@media screen and (max-width: 1140px){
    .wrapper{
        max-width:1140px
    }
}
@media screen and (max-width: 570px){
    .wrapper{
        padding:4rem
    }
}
@media screen and (max-width: 472px){
    .wrapper{
        padding:1rem
    }
}
section.hero{
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
    flex-direction:column
}
section.hero .spacer{
    height:140px
}
section.hero .logo{
    text-indent:-9999px;
    background-image:url(../../assets/img/hero_logo.png);
    background-size:100%;
    background-position:bottom center;
    background-repeat:no-repeat;
    width:80%;
    height:160px;
    margin:0 auto
}
@media screen and (max-width: 570px){
    section.hero .logo{
    width:100%
    }
}
.playbuttons{
    display:flex;
    justify-content:center;
    margin-top:4.2rem
}
@media screen and (max-width: 472px){
.playbuttons{
    flex-direction:column;
    align-items:center;
    margin-bottom:2rem
    }
}
.playbuttons .play{
    text-align:center;
    margin-top:3.6rem;
    width:180px;
    display:flex;
    flex-direction:column;
    align-items:center
}
.playbuttons .play:hover a.playicon::after{
    border-color:#00d5fb;
    box-shadow:0px 0px 5px rgba(0,213,251,0.5),inset 0px 0px 5px rgba(0,213,251,0.5),inset 0px 0px 30px rgba(0,213,251,0.5);
    color:white;
    transform:scale(1.2)
}
.playbuttons .play:hover a.playicon::before{
    border-color:#00d5fb;
    box-shadow:0px 0px 5px rgba(0,213,251,0.5),inset 0px 0px 5px rgba(0,213,251,0.5);
    transform:scale(1.15) translateY(6px) translateX(0px);
    opacity:.15
}
.playbuttons .play a.playlink{
    color:white;
    font-weight:normal;
    text-transform:uppercase;
    font-size:1.2rem;
    margin-top:1.6rem;
    line-height:1.6
}
.playbuttons .play a.playicon{
    width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative
}
.playbuttons .play a.playicon .icon{
    width:18px;
    height:18px;
    margin-left:2px
}
.playbuttons .play a.playicon::after,.playbuttons .play a.playicon::before{
    content:'';
    position:absolute;
    border:2px solid #FF2929;
    border-radius:50%;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
    transition:all 500ms cubic-bezier(0.6, 0.2, 0.1, 1);
    z-index:3
}
.playbuttons .play a.playicon::before{
    transform:translateY(6px);
    opacity:0;
    z-index:2;
    -webkit-filter:blur(0.5px)
}
.playbuttons .play a.playicon:active::after{
    transform:scale(1);
    transition:none
}
.playbuttons .play a.playicon:active::before{
    opacity:0;
    transition:none
}
section.copy{
    text-align:center;
    color:#fff
}
@media screen and (max-width: 570px){
    section.copy{
        margin-top:40px
    }
}
section.copy p{
    font-size:18px;
    line-height:1.6;
    max-width:600px;
    margin:0 auto;
    margin-top:30px;
    color:#63727d;
    text-align:center;
    word-break:normal
}
section.blog{
    margin:80px 1rem
}
section.blog article{
    margin:0rem;
    background-color:#000617;
    overflow:hidden;
    position:relative;
    border-radius:10px;
    width:100%;
    padding:4rem 4rem;
    margin-bottom:2rem;
    box-shadow:inset 0 0 1px rgba(3,156,242,0.2)
}
section.blog article .blog-img{
    content:'';
    background-image:url("../../assets/img/sponsor_bg.jpg");
    background-size:cover;
    background-position:left center;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    opacity:.15;
    border-radius:10px;
    transition:all 500ms cubic-bezier(0.6, 0.2, 0.1, 1)
}
section.blog article .blog-img2{
    background-image:url("../../assets/img/donate_bg.jpg");
    opacity:.25
}
section.blog article .text{
    position:relative;
    z-index:2;
    max-width:980px;
    margin:0 auto
}
section.blog article .text .meta{
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    min-height:40px;
    align-items:center;
    border-bottom:2px solid rgba(99,114,125,0.2)
}
section.blog article .text .meta .tags{
    display:flex;
    margin:1.6rem 0
}
section.blog article .text .meta .tags a{
    margin-right:1.6rem;
    color:rgba(99,114,125,0.5);
    font-size:14px
}
section.blog article .text .meta .tags a:hover{
    color:#FF2929
}
section.blog article .text .meta .social{
    display:flex;
    flex-direction:row;
    margin-top:10px
}
section.blog article .text .meta .social *{
    margin-left:0.1rem;
    margin-top:0;
    margin-bottom:0
}
section.blog article .text .meta .social .twitter{
    margin-bottom:-8px
}
section.blog article .text .meta .social img{
    border-radius:0
}
section.blog article .text h5{
    margin-bottom:4rem;
    position:relative
}
section.blog article .text h2{
    margin:20px 0
}
@media screen and (max-width: 570px){
    section.blog article .text h2{
        font-size:24px
    }
}
section.blog article .text p{
    color:#63727d;
    font-size:18px;
    line-height:1.6;
    margin-bottom:18px;
    font-family:'DINNextLTPro-Regular', sans-serif;
    font-weight:normal
}
section.blog article .text a.readmore{
    color:#FF2929;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:5px
}
section.blog article .text iframe{
    max-width:100%;
    max-height:480px
}
.blog-bg{
    position:relative
}
.blog-bg::after{
    content:'';
    width:100%;
    top:-50%;
    left:0;
    height:5%;
    background-size:contain;
    background-position:center center;
    background-repeat:no-repeat;
    position:absolute;
    z-index:-1
}
.mainpage-blog{
    display:flex;
    flex-direction:row
}
@media screen and (max-width: 1140px){
    .mainpage-blog{
        flex-wrap:wrap;
        margin:80px 0 !important
    }
}
.mainpage-blog article{
    margin:0 1rem !important
}
.mainpage-blog article:hover .blog-img{
    box-shadow:inset 0 0 0px 250px rgba(3,156,242,0.25)
}
.mainpage-blog article:first-child{
    flex-basis:33.33333%
}
@media screen and (max-width: 1140px){
    .mainpage-blog article:first-child{
        flex-basis:100%;
        margin:1rem 0 !important
    }
}
.mainpage-blog article:nth-child(2){
    flex-basis:66.66666%
}
@media screen and (max-width: 1140px){
    .mainpage-blog article:nth-child(2){
        flex-basis:100%;
        margin:1rem 0 !important
    }
}
section.media{
    margin:80px 0;
    perspective:1000px
}
section.media .col{
    padding:0;
    margin:15px;
    transition:all 500ms cubic-bezier(0.6, 0.2, 0.1, 1);
    will-change:transform
}
@media screen and (max-width: 570px){
    section.media .col{
        flex-basis:100%;
        margin:10px 0
    }
}
section.media .col:first-child{
    margin-left:0
}
section.media .col:last-child{
    margin-right:0
}
section.media .col::after{
    content:'';
    position:absolute;
    top:0px;
    left:5%;
    width:90%;
    height:50%;
    opacity:0;
    pointer-events:none;
    z-index:-10;
    box-shadow:0 0px 0px rgba(255,0,0,0)
}
section.media .col:hover{
    transition:all 500ms cubic-bezier(0.6, 0.2, 0.1, 1) !important;
    transform:translateZ(30px) !important;
    z-index:100;
    cursor:pointer
}
section.media .col:hover a.image::after{
    opacity:.75;
    transform:translateY(0)
}
section.media .col:hover a.image span,section.media .col:hover a.image h3,section.media .col:hover a.image .icon{
    opacity:1;
    transform:translateY(0)
}
section.media .col:hover a.image span::after{
    opacity:1
}
section.media .col:hover a.image .playicon{
    opacity:1
}
section.media .col:hover::after{
    opacity:1;
    box-shadow:0 45px 75px rgba(0,0,0,0.5);
    transition:opacity,box-shadow 500ms cubic-bezier(0.6, 0.2, 0.1, 1)
}
section.media .col a.image{
    border-radius:10px;
    overflow:hidden;
    display:block;
    position:relative
}
section.media .col a.image::after{
    content:'';
    width:100%;
    height:30%;
    position:absolute;
    top:0;
    left:0;
    background:linear-gradient(to bottom, rgba(0,0,0,0.75),rgba(0,0,0,0));
    z-index:1;
    opacity:0;
    transform:translateY(-20px);
    transition:all 500ms cubic-bezier(0.6, 0.2, 0.1, 1)
}
section.media .col a.image span{
    position:absolute;
    top:19px;
    left:24px;
    opacity:.4;
    transform:translateY(0px);
    transition:all 500ms cubic-bezier(0.6, 0.2, 0.1, 1);
    z-index:3
}
section.media .col a.image span::after{
    content:'';
    width:25px;
    height:25px;
    top:-1px;
    left:-7px;
    border-radius:50%;
    background:#f1343a;
    position:absolute;
    z-index:-1;
    opacity:0;
    transition:all 500ms cubic-bezier(0.6, 0.2, 0.1, 1)
}
section.media .col a.image h3{
    position:absolute;
    top:18px;
    left:52px;
    max-width:140px;
    opacity:0;
    transform:translateY(-10px);
    transition:all 500ms 200ms cubic-bezier(0.6, 0.2, 0.1, 1);
    z-index:3
}
section.media .col a.image .icon{
    position:absolute;
    top:18px;
    right:20px;
    fill:#FF2929 !important;
    opacity:0;
    transform:translateY(-10px);
    transition:all 500ms 400ms cubic-bezier(0.6, 0.2, 0.1, 1);
    z-index:3
}
section.media .col a.image img{
    border-radius:10px
}
section.media img{
    max-width:100%;
    height:auto;
    display:block;
    position:relative
}
section.media .moremedia{
    display:flex;
    justify-content:center
}
section.media .moremedia:hover{
    cursor:default
}
section.media .moremedia:hover::after{
    box-shadow:none
}
section.media .moremedia:hover a::after{
    border-color:#00d5fb;
    box-shadow:0px 0px 5px rgba(0,213,251,0.5),inset 0px 0px 5px rgba(0,213,251,0.5),inset 0px 0px 30px rgba(0,213,251,0.5);
    color:white;
    transform:scale(1)
}
section.media .moremedia:hover a::before{
    border-color:#00d5fb;
    box-shadow:0px 0px 5px rgba(0,213,251,0.5),inset 0px 0px 5px rgba(0,213,251,0.5);
    transform:scale(1) translateY(-8px) translateX(0px);
    opacity:.15
}
section.media .moremedia a{
    text-align:center;
    padding:1.6rem 3.6rem;
    border-radius:45px;
    font-size:14px;
    text-transform:uppercase;
    font-family:'DINNextLTPro-Regular', sans-serif;
    font-weight:normal;
    letter-spacing:2px;
    position:relative;
    transition:all 500ms cubic-bezier(0.6, 0.2, 0.1, 1)
}
section.media .moremedia a::after,section.media .moremedia a::before{
    content:'';
    position:absolute;
    border:2px solid #FF2929;
    border-radius:45px;
    width:100%;
    height:50%;
    top:0px;
    left:0px;
    transition:all 500ms cubic-bezier(0.6, 0.2, 0.1, 1);
    z-index:3
}
section.media .moremedia a::before{
    transform:translateY(0px);
    opacity:0;
    z-index:2;
    -webkit-filter:blur(0.5px)
}
.blogwrapper{
    max-width:100%;
    padding:0;
    margin:0;
    overflow-x:hidden
}
.blogwrapper::after{
    content:'';
    width:100%;
    left:-50%;
    height:50%;
    bottom:-100%;
    background-size:contain;
    background-position:bottom center;
    background-repeat:no-repeat;
    position:absolute;
    z-index:-1;
    opacity:.5
}
.blogwrapper .blog{
    margin:0
}
.blogwrapper .blog article{
    border-radius:0px;
    background:transparent;
    box-shadow:none;
    padding:40px 60px
}
@media screen and (max-width: 570px){
    .blogwrapper .blog article{
        padding:40px 20px
    }
}
.blogwrapper .blog article .blog-img{
    box-shadow:inset 0 55px 50px rgba(0,0,0,0.5);
    opacity:1;
    height:60vh;
    background:black;
    border-radius:0;
    overflow:hidden
}
@media screen and (max-width: 570px){
    .blogwrapper .blog article .blog-img{
        margin-top:52px;
        height:200px
    }
}
.blogwrapper .blog article .blog-img img{
    position:absolute;
    top:0%;
    left:0;
    right:0;
    bottom:0;
    min-width:100%
}
.blogwrapper .blog article .text{
    padding-bottom:40px;
    border-bottom:2px solid rgba(99,114,125,0.2)
}
.blogwrapper .blog article .text blockquote{
    font-size:24px;
    text-align:center;
    color:#FF2929;
    background:-webkit-linear-gradient(top, #00d5fb, #FF2929);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    line-height:1.6;
    max-width:600px;
    margin:40px auto
}
.blogwrapper .blog article .text blockquote span{
    color:white;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:5px;
    display:block;
    margin:18px 0;
    background:none;
    -webkit-text-fill-color:white
}
.blogwrapper .blog article .text p+p{
    margin-top:24px
}
.blogwrapper .blog article .text a+p{
    margin-top:18px
}
.blogwrapper .blog article .text h4{
    margin-top:60vh
}
@media screen and (max-width: 570px){
    .blogwrapper .blog article .text h4{
        margin-top:220px
    }
}
.blogwrapper .blog article .text .imageGallery{
    margin:1.6rem 0
}
.blogwrapper .blog article .text .imageGallery img{
    border-radius:10px
}
.blogwrapper .blog article .text img{
    border-radius:10px;
    margin:1.6rem 0
}
.blogoverview{
    width:100%;
    position:relative
}
.blogoverview p{
    font-size:18px;
    line-height:1.6;
    margin:0 0 1.6rem
}
.blogoverview p a{
    color:#FF2929
}
.blogoverview .left{
    width:50%;
    min-height:100vh;
    position:fixed;
    will-change:transform;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:6rem 4rem;
    align-items:center;
    text-align:center;
    background-size:cover;
    background-position:center center;
    will-change:transform
}
@media screen and (max-width: 570px){
    .blogoverview .left{
        width:100%;
        position:relative;
        min-height:80vh;
        padding:2rem 4rem
    }
}
.blogoverview .left .logoblog{
    text-indent:-9999px;
    background-image:url(../../assets/img/hero_logo.png);
    background-size:100%;
    background-position:bottom center;
    background-repeat:no-repeat;
    width:80%;
    height:150px;
    margin-bottom:4rem
}
.blogoverview .left p{
    max-width:520px
}
@media screen and (max-width: 570px){
    .blogoverview .left p{
        font-size:12px
    }
}
.blogoverview .left h5{
    margin-bottom:2.5rem
}
.blogoverview .right{
    left:50%;
    position:absolute;
    width:50%;
    padding:6rem 4rem;
    background:white
}
@media screen and (max-width: 570px){
    .blogoverview .right{
        width:100%;
        position:relative;
        left:0;
        padding:4rem 2rem
    }
}
.blogoverview .right .blogpost-preview+.blogpost-preview{
    margin-top:4rem;
    padding-top:4rem;
    border-top:1px solid rgba(99,114,125,0.2)
}
.blogoverview .right .blogpost-preview h3{
    color:black;
    margin:1.6rem auto
}
.blogoverview .right .blogpost-preview h4{
    font-size:14px
}
.blogoverview .right .blogpost-preview p{
    color:#63727d
}
.blogoverview .right .blogpost-preview a{
    color:#FF2929
}
.blogoverview .right .morearticles{
    text-align:center;
    color:rgba(99,114,125,0.5);
    max-width:340px;
    margin:10rem auto;
    line-height:1.6
}
.pagination{
    margin-top:4rem
}
.pagination ul{
    margin:0 auto;
    max-width:300px;
    display:flex;
    flex-direction:row;
    justify-content:center
}
.pagination ul li a{
    color:#63727d;
    border:2px solid rgba(99,114,125,0.2);
    border-radius:3px;
    padding:12px 16px;
    margin:0 .5rem
}
@media screen and (max-width: 570px){
    .pagination ul li a{
        padding:6px 8px
    }
}
.pagination ul li a:hover{
    border-color:#FF2929
}
.youtube{
    position:relative;
    padding-bottom:56.25%;
    height:0;
    overflow:hidden;
    width:100%;
    height:auto;
    margin-bottom:1.6rem
}
.youtube iframe{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%
}
.menu{
    position:fixed;
    will-change:transform;
    z-index:200;
    width:auto;
    height:52px;
    top:0
}
.menu .pagetitle{
    position:absolute;
    height:52px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    left:5.6rem;
    text-shadow:0 1px 1px rgba(0,0,0,0.4);
    font-size:14px;
    font-family:'DINNextLTPro-Regular', sans-serif;
    font-weight:normal;
    text-transform:uppercase;
    letter-spacing:2px;
    transition:all 500ms cubic-bezier(0.6, 0.2, 0.1, 1)
}
@media screen and (max-width: 570px){
.menu .pagetitle{
        width:100%;
        left:0;
        padding-left:5.6rem;
        background:rgba(0,0,0,0.8);
        -webkit-backdrop-filter:blur(10px);
        text-shadow:none;
        align-items:flex-start
    }
}
.menu .goaway{
    transform:translateX(-100vw);
    background:none
}
.menu .navbars{
    width:52px;
    height:52px;
    position:absolute;
    z-index:500;
    top:0;
    left:0
}
.menu .navbars::after{
    background-size:cover;
    content:'';
    width:75%;
    height:75%;
    top:50%;
    left:50%;
    position:absolute;
    transform:translate(-50%, -50%)
}
.menu .navbars .bar{
    width:14px;
    height:2px;
    border-radius:3px;
    background:#FF2929;
    top:50%;
    left:50%;
    position:absolute;
    transform:translate(-50%, -50%);
    transition:all 500ms cubic-bezier(0.6, 0.2, 0.1, 1)
}
.menu .navbars .bar::after,.menu .navbars .bar::before{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    content:'';
    width:14px;
    height:2px;
    border-radius:3px;
    background:#FF2929;
    transition:all 500ms cubic-bezier(0.6, 0.2, 0.1, 1)
}
.menu .navbars .bar::after{
    top:-4px
}
.menu .navbars .bar::before{
    bottom:-4px
}
.menu .navbars:hover{
    cursor:pointer
}
.menu .navbars:hover .bar{
    background:#FF5151;
    box-shadow:0 0px 10px rgba(0,0,0,0.9)
}
.menu .navbars:hover .bar::after{
    background:#FF5151;
    transform:translateX(-50%) translateY(-100%);
    box-shadow:0 0px 10px rgba(0,0,0,0.9)
}
.menu .navbars:hover .bar::before{
    background:#FF5151;
    transform:translateX(-50%) translateY(100%);
    box-shadow:0 0px 10px rgba(0,0,0,0.9)
}
.menu .navbars.active .bar{
    transform:translate(-50%, -50%) rotate(90deg)
}
.menu nav{
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    height:100%;
    align-items:center;
    color:white;
    background:rgba(0,0,0,0.8);
    -webkit-backdrop-filter:blur(10px);
    padding:0 1.6rem 0 6.6rem;
    z-index:200;
    opacity:1;
    transform:translateX(-100%);
    transition:opacity,transform 500ms cubic-bezier(0.6, 0.2, 0.1, 1);
    width:100vw
}
@media screen and (max-width: 570px){
    .menu nav{
        padding:0 1.6rem 0 5.6rem
    }
}
.menu nav ul{
    display:flex;
    flex-direction:row
}
.menu nav ul li{
    opacity:0;
    transition:all 500ms cubic-bezier(0.6, 0.2, 0.1, 1)
}
.menu nav ul li a{
    color:white;
    font-size:14px;
    font-family:'DINNextLTPro-Regular', sans-serif;
    font-weight:normal;
    text-transform:uppercase;
    letter-spacing:2px;
    margin-right:2.2rem;
    cursor:pointer
}
@media screen and (max-width: 570px){
    .menu nav ul li a{
        margin-right:1rem;
        font-size:10px
    }
}
.menu nav ul li a:hover{
    color:#FF2929
}
.menu nav ul li a.active{
    position:relative
}
.menu nav ul li a.active::after{
    content:'';
    width:100%;
    top:-20px;
    height:3px;
    background:#FF2929;
    border-radius:3px;
    left:0;
    position:absolute
}
.mediawrapper{
    margin-top:58vh
}
.mediawrapper .playbuttonsthumb{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -100%);
    margin-top:0;
    opacity:0;
    transition:all 500ms 400ms cubic-bezier(0.6, 0.2, 0.1, 1)
}
.mediawrapper .playbuttonsthumb .play{
    margin-top:0
}
.mediawrapper .col:hover .playbuttonsthumb{
    opacity:1;
    transform:translate(-50%, -50%)
}
.show{
    display:block;
    visibility:visible
}
.shownav{
    display:flex !important;
    opacity:1 !important;
    transform:translateX(0) !important
}
.shownav ul li:nth-child(1){
    animation:menuitem 500ms 100ms cubic-bezier(0.6, 0.2, 0.1, 1) forwards
}
.shownav ul li:nth-child(2){
    animation:menuitem 500ms 200ms cubic-bezier(0.6, 0.2, 0.1, 1) forwards
}
.shownav ul li:nth-child(3){
    animation:menuitem 500ms 300ms cubic-bezier(0.6, 0.2, 0.1, 1) forwards
}
.shownav ul li:nth-child(4){
    animation:menuitem 500ms 400ms cubic-bezier(0.6, 0.2, 0.1, 1) forwards
}
.shownav ul.social li:nth-child(1){
    animation:menuitem 500ms 500ms cubic-bezier(0.6, 0.2, 0.1, 1) forwards
}
.shownav ul.social li:nth-child(2){
    animation:menuitem 500ms 600ms cubic-bezier(0.6, 0.2, 0.1, 1) forwards
}
.shownav ul.social li:nth-child(3){
    animation:menuitem 500ms 700ms cubic-bezier(0.6, 0.2, 0.1, 1) forwards
}
.shownav ul.social li:nth-child(4){
    animation:menuitem 500ms 800ms cubic-bezier(0.6, 0.2, 0.1, 1) forwards
}
.shownav ul.social li:nth-child(5){
    animation:menuitem 500ms 900ms cubic-bezier(0.6, 0.2, 0.1, 1) forwards
}
@keyframes menuitem{
    0%{
        transform:translateX(-100%);
        opacity:0
    }
    100%{
        transform:translateX(0%);
        opacity:1
    }
}
.notsticky{
    width:100% !important;
    overflow:hidden;
    position:absolute
}
.notsticky nav{
    background:linear-gradient(to bottom, rgba(0,0,0,0.25),rgba(0,0,0,0));
    -webkit-backdrop-filter:blur(0px)
}
.sitckyanimation{
    animation:sitckyanimation 500ms cubic-bezier(0.6, 0.2, 0.1, 1) forwards
}
@keyframes sitckyanimation{
    0%{
        transform:translateY(-100%);
        opacity:0
    }
    100%{
        transform:translateX(0%);
        opacity:1
    }
}
.menu nav .guilded-link{
    font-family:'FFDINWebProBold', sans-serif;
    font-weight:normal;
    font-size:10px;
    background:#FF2929;
    border-radius:2px;
    padding:1rem 1.6rem
}
@media screen and (max-width: 680px){
    .menu nav .guilded-link{
        display:none
    }
}
.menu nav .guilded-link:hover{
    background:#FF5151;
    color:white
}
.menu nav .guilded-link-active{
    background:#C10000 !important
}
.game-link{
    display:flex;
    flex-direction:column;
    pointer-events:none;
    position:fixed;
    background:rgba(0,0,0,0.8);
    -webkit-backdrop-filter:blur(10px);
    right:20px;
    top:54px;
    border-radius:20px;
    padding:15px;
    z-index:1000;
    transition:all 500ms cubic-bezier(0.6, 0.2, 0.1, 1);
    transform:translateY(-20px);
    opacity:0
}
.game-link a{
    text-indent:-9999px;
    width:207px;
    height:72px;
    background-repeat:no-repeat;
    background-size:contain;
    margin-top:0px;
    cursor:pointer
}
.game-link a.game1{
    background-image:url(../../assets/img/game1.png);
    margin-bottom:15px
}
.game-link a.game2{
    background-image:url(../../assets/img/game2.png);
    margin-bottom:15px
}
.game-link a.game3{
    background-image:url(../../assets/img/game3.png)
}
.game-link-show{
    opacity:1;
    transform:translateY(0px);
    pointer-events:auto
}
img[src$=".png"]{
    image-rendering:-moz-crisp-edges;
    image-rendering:-o-crisp-edges;
    image-rendering:-webkit-optimize-contrast;
    image-rendering:crisp-edges;
    -ms-interpolation-mode:nearest-neighbor
}