/* custom styles */

    @font-face {
    font-family: 'Neue Power Medium';
    font-style: normal;
    font-weight: normal;
    src: local('Neue Power Medium'), url('fonts/NeuePower-Medium.woff') format('woff');
    }

    @font-face {
    font-family: 'Neue Power Ultra';
    font-style: normal;
    font-weight: normal;
    src: local('Neue Power Ultra'), url('fonts/NeuePower-Ultra.woff') format('woff');
    }

html {margin: 0; height: 100%;}
body {margin: 0; height: 100%; font-family: 'Rokkitt', 'Neue Power Ultra', sans-serif; background-color:#00182d; color: white;font-size: 1.1em;}
#page {margin: 0; height: 100%; display: grid; grid-gap: 10px; grid-template-columns: 1fr; grid-template-areas: "header" "main" "footer"; grid-template-rows: 500px 1fr 50px;}
header {grid-area: header; display: flex; overflow: hidden;}
main {grid-area: main;}
.site-footer {bottom: 0; font-size: 0.8em; text-align: center; width: 100%; z-index:40; align-items: center; justify-content: center; display: flex; grid-area: footer; color: white;}
h1 {font-size: 4em; text-transform: uppercase; margin:0; font-family:'Neue Power Ultra', sans-serif;}
h2 {font-size: 2em; margin:0 0 30px 0; font-family:'Neue Power Ultra', sans-serif;}
a, a:visited {color: white;}
a:hover {color:#fff792;} /* light yellow */
.mw-1200 {max-width: 1200px; margin:0 auto; width: 100%; padding: 0 50px;}
.mw-1400 {max-width: 1400px; margin:0 auto; width: 100%; padding: 0 50px;}
.w40 {width:40%; position: relative;} .w60 {width:60%;}
.section {margin: 50px auto;}

/* width */
::-webkit-scrollbar {width: 24px; height: 24px;}
/* Track */
::-webkit-scrollbar-track {background: rgba(255, 255, 255, 0.9);}
/* Handle */
::-webkit-scrollbar-thumb {background: #d9bdef;}
::selection {background: #d9bdef; color: #00182d;}

/* HEADER */
.custom-logo-link {display: inline-block; width: 240px;}
.slider {width: 100%; margin-right: auto; background-size: 100%; background-position: center; border-bottom-left-radius: 100px; transform: skew(-7deg,3deg) rotate(-1deg) translateY(-40px) translateX(40px);}
.slideshow {list-style-type: none;}
.slideshow,.slideshow:after {margin:0; position: fixed; width: 100%; height: 100%; left: 0px; z-index: 0;}
.slideshow li span {position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; color: transparent; background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; opacity: 0; z-index: 0; animation: imageAnimation 30s linear infinite 0s; border-bottom-left-radius:100px;}

@keyframes imageAnimation { 
    0% { opacity: 0; animation-timing-function: ease-in; }
    8% { opacity: 1; animation-timing-function: ease-out; }
    30% { opacity: 1 }
    40% { opacity: 0 }
    100% { opacity: 0 }
}

/* MENUS */
#home-menu {list-style: none; margin-left:0; padding-left:0; font-family:'Neue Power Ultra', sans-serif;}
#home-menu li {display: inline; padding: 0 20px 0 0; font-size:2em;}
#home-menu li:after {content:"/"; margin-left:20px; color:#d9bdef;}
#home-menu li:last-child:after {content:"";}

/*-- Hamburger Main Menu  ---------------------*/

.main-navigation {float: right;	width: 20%;}
.main-navigation ul {display: none;	list-style: none;	margin: 0; padding-left: 0;}
.main-navigation ul ul {position: relative;}
.main-navigation .sub-menu li {display: block; padding: 8px 0;}
.main-navigation ul ul li:hover > ul, .main-navigation ul ul li.focus > ul {left: 100%;}
.main-navigation ul li:hover > ul, .main-navigation ul li.focus > ul {left: auto;}
.main-navigation li {margin: 20px 0; position: relative;}
#site-navigation a {display: block;	text-decoration: none; font-size: 18px;	line-height: 24px; color: white; text-transform: uppercase; font-family: 'Neue Power Ultra', sans-serif; letter-spacing: 1px; font-weight: 300;}
#site-navigation .sub-menu a {font-size: 18px; padding-left: 20px; line-height: 21px;}
#site-navigation a:hover {color: #F9F94E;}
#menu-top-menu li, #menu-top-menu-dutch li {position: relative; display: inline-flex;}
#menu-top-menu .sub-menu, #menu-top-menu-dutch .sub-menu {margin: 0; background-image: linear-gradient(to bottom, rgba(21,39,53,0.8) 0%, #152735 100%); padding: 0; flex-direction: column; white-space: nowrap;
transition: all 0.5s ease; visibility: hidden; opacity: 0; display: flex; position: absolute; top: 52px; padding-bottom: 10px;}
#menu-top-menu li:hover > .sub-menu, #menu-top-menu-dutch li:hover > .sub-menu {visibility: visible; opacity: 1;}

.nav{-webkit-transition: right 0.5s ease; -moz-transition: right 0.5s ease; -ms-transition: right 0.5s ease; -o-transition: right 0.5s ease; transition: right 0.5s ease; background-color: rgba(8, 42, 68, 0.95); color: white; cursor: pointer; height: 100vh;
right: -50vw; padding: 6rem 2rem 2rem 2rem; position: fixed; top: 0; width: 40vw; z-index: 1;}
.nav.expanded {right: 0;}
.nav ul {display: block;}
#nav-toggle-wrapper {position: relative;}
.nav-toggle { -webkit-user-select: none; -moz-user-select: none; position: absolute; user-select: none; cursor: pointer; height: 54px; width: 66px; z-index: 2; right: 40px; top: 30px; background: #00182d; padding: 18px; border-radius: 5px;}
.nav-toggle:hover {opacity: 0.8;}
.nav-toggle .nav-toggle-bar,  .nav-toggle .nav-toggle-bar::after,  .nav-toggle .nav-toggle-bar::before {position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; background: #d9bdef; content: ''; height: 2px; width: 30px; border-radius: 2px;}
.nav-toggle .nav-toggle-bar {margin-top: 0;}
.nav-toggle .nav-toggle-bar::after {margin-top: 0.6rem;}
.nav-toggle .nav-toggle-bar::before {margin-top: -0.6rem;}
.nav-toggle.expanded .nav-toggle-bar {background: transparent;}
.nav-toggle.expanded .nav-toggle-bar::after, .nav-toggle.expanded .nav-toggle-bar::before {background: #d9bdef; margin-top: 0;}
.nav-toggle.expanded .nav-toggle-bar::after {-ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg);}
.nav-toggle.expanded .nav-toggle-bar::before  {-ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg);}
.menu-toggle, .main-navigation.toggled ul {display: none;}

/* HOME */
.intro {max-width:900px; font-size: 18px;}
.fastlinks {display: flex; margin: 50px auto 180px; gap: 42px;}
.thumb {width: calc(33.33333% - 28px); height: 0; padding-bottom: 22%; background-size: cover; background-position: center; background-repeat: no-repeat; margin: 0; transition: all 0.3s linear; padding: 10% 0; font-family: 'Neue Power Ultra'; text-decoration: none; font-size: 2em; line-height: 1em; display: flex; align-items: center; color: #00182d; background-color: #00182d; position: relative;}
.thumb:hover {transform: skewY(-1deg) rotate(1deg);}
.thumb::before {content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0); /* transparent by default */ transition: background 0.4s ease; z-index: 1;}
.thumb:hover::before {background: rgba(0, 24, 45, 0.4); /* darkens background */}
.thumb span {position: relative; z-index: 2; padding: 0 20px; opacity:0.4; display: block; width: 100%; text-align: center; transition: all 0.3s linear;}
.thumb:hover span {opacity:1;}
#thumb1 {border-top-right-radius: 70px;}
#thumb2 {border-bottom-right-radius: 70px;}
#thumb3 {border-bottom-left-radius: 70px;}
.service {display: flex; flex-wrap: wrap; margin-top: 20px;}
.service_image {position: relative; border-top-right-radius: 30px; background-size: cover; width: 100%; height: 0; padding-bottom: 80%; top: -50px;}
.service_desc {margin-bottom: 20px;}
.service_pagelink {background-color: #00182d; padding: 14px 26px 18px; font-family: 'Neue Power Ultra', sans-serif; text-decoration: none; border-radius: 5px; display: inline-block;}
.service_pagelink::after {content:'>>'; color: #fff792; font-family: 'Neue Power Ultra', sans-serif; margin-left:15px;}
.service .w60 {padding: 40px 70px 90px;}
#character_design {background-color: #e8e8e8; color: #00182d;}
#character_design .w40::before, #animation .w40::before {content:''; position: absolute; background-color: #fff792; top: -74px; width: 100%; height: 0; padding-bottom: 80%; left: 24px; border-top-right-radius: 50px;}
#illustration .service_image {border-top-right-radius: 0px; border-top-left-radius: 30px;}
#illustration .w40::before {content:''; position: absolute; background-color: #d9bdef; top: -74px; width: 100%; height: 0; padding-bottom: 80%; left: -24px; border-top-left-radius: 50px;}
#illustration .service_pagelink {background-color: #d9bdef; color: #00182d;}
#animation {background-color: #ddeeea; color: #00182d;}

/* PAGES */
.portfolio {display: flex; flex-wrap: wrap; gap: 42px;}
.portfolio .thumb {width: calc(33.33333% - 28px); margin: 0;}
.portfolio .thumb:nth-child(4n) {border-top-right-radius:70px;}
.portfolio .thumb:nth-child(4n+1) {border-bottom-right-radius:70px;}
.portfolio .thumb:nth-child(4n+2) {border-bottom-left-radius:70px;}
.portfolio .thumb:nth-child(4n+3) {border-top-left-radius:70px;}

/* SINGLE PAGE */
.single #page {grid-template-rows: 220px 1fr 50px;}
.single .slider {display: none;}
.single main {padding: 0 50px;}
.single article {width: 100%; max-width: 1000px; margin: 0 auto;}

@media screen and (max-width: 1200px) {
 .service_image {padding-bottom: 100%;}
}

@media screen and (max-width: 992px) {
 .w40 {width: 80%;}
 .w60 {width: 100%;}
 .service .w60 {padding: 0px 30px 130px;}
 .service#illustration .w40 {align-self: flex-end;}
 .service_image {padding-bottom: 80%;}
 .service#illustration {flex-direction: column-reverse;}
 .fastlinks {flex-wrap: wrap;}
 .thumb, .portfolio .thumb {width: calc(50% - 21px); padding: 15% 0;}
 .nav {width: 70vw; right: -80vw;}
}

@media screen and (max-width: 768px) {
 h1 {font-size: 3em; line-height: 1em; margin-bottom: 0.5em;}
 .custom-logo-link {width: 170px;}
 .mw-1400 {padding: 0 20px;}
 .thumb, .portfolio .thumb {width: 100%; padding: 30% 0;}
}

@media screen and (max-width: 576px) {

}