@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Rokkitt:ital,wght@0,100..900;1,100..900&display=swap');


html{
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555; 
}

body {
    position: absolute;
    margin: 0;
    padding: 0;
    width: 100%;
    background-image: url(afbeeldingen/Gamecase_Studios_Achtergrond.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    transform:translatez(0);
    -webkit-transform:translatez(0);
    font-family: "Josefin Sans", sans-serif;
    font-style: normal;
    color: #210217;
}


h1 {
    font-family: "Rokkitt", serif;
    font-size: 66pt;
    color: #fff;
    text-align: left;
    padding: 0;
    margin: 0;
    font-weight: 600;
    font-style: italic;
    line-height: 61pt;
}


h2 {
    font-family: "Josefin Sans", sans-serif;
    font-size: 26pt;
    color: #fff;
    text-align: right;
    padding: 5px 30px 0 0;
    margin: 0;
    font-weight: 250;
    font-style: normal;
}


h3 {
    font-family: "Rokkitt", serif;
    font-size: 45pt; 
    text-align: left;
    padding: 0;
    margin: 0 0 30px 0;
    font-weight: 600;
    font-style: italic;
    line-height: 40pt;
    color: #210217;
}



p {
    font-family: "Josefin Sans", sans-serif;
    font-weight: 350;
    font-style: normal;
    font-size: 12pt;
    color: #210217;
    margin: 0;
    line-height: 15pt;
}


#websitewrap {
    position: relative;
    min-height: 100vh;
}

#websitecontent {
    padding-bottom: 300px;
}


.contentwrap {
    text-align: center;
    margin: 0 auto;
    padding: 45px;
    width: 1110px;
}

.contentwrapWit {
    text-align: center;
    margin: 0 auto;
    padding: 45px;
    width: 1110px;
    background-color: #fff;
}

.contentwrapBorder, .contentwrapBorderMini {
    text-align: center;
    margin: 0 auto;
    padding: 0 45px;
    width: 1110px;
    background-color: #fff;
}

.contentwrapBorder {
    display: block;
}

.contentwrapBorderMini {
    display: none;
}



/*Menu*/


nav {
    width: 100%;
    height: 70px;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    margin: 0; 
    background-color: #fff;
    border-bottom: 5px solid #42082c; 
    z-index: 99;      
}

.navwrap, .navwrapMini {
    width: 100%;
    text-align: left;
    margin: 0 auto;
}

.navwrap {
    display: block;
}

.navwrapMini {
    display: none;
}

.menulogo {
    width: 90px;
    margin: 0;
    padding: 0;
    position: absolute;
    left: 20px;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.navKop1 {
    font-family: "Rokkitt", serif;
    font-size: 26pt;
    color: #630f47;
    padding: 0;
    margin: 0;
    position: absolute;
    left: 126px;
    top: 19px;
    font-weight: 600;
    font-style: italic;
}

.navKop2 {
    font-family: "Josefin Sans", sans-serif;
    font-size: 10pt;
    color: #630f47;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 43px;
    left: 228px;
    font-weight: 350;
    font-style: normal;
}

.hamburgermenu {
    padding: 0;
    margin: 0;
    
}

.hamburgermenu span {
    transition: 0.2s;
    position: absolute;
    right: 25px;
    font-size: 35px;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    cursor: pointer;
}

.hamburgermenu span:hover {
    color: #ffb743;
    font-weight: 600;
    font-size: 40px !important;
    right: 23px;
}



.sidenav {
    width: 0;
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    background-color: #42082c;
    overflow-x: hidden;
    transition: 0.5s;
    padding: 70px 0 15px 0;
}


.sidenav a {
    font-family: "Josefin Sans", sans-serif;
    font-weight: 300;
    font-style: normal;
    padding: 12px 12px 12px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #fff;
    display: block;
    transition: 0.3s;
    line-height: 25px;
}


.menuknop a:hover {
    color: #ffb743;
    font-weight: 600;
    font-size: 27px;
    padding: 10px 14px 14px 30px;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 15px;
    font-size: 70px;
    line-height: 48px;
}

.menuclose a:hover {
    color: #ffb743;
    font-weight: 400;
    font-size: 75px;
    padding: 12px 10px 12px 34px;
}

@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
}






/*Knoppen*/

.MoreBtnGoud, .MoreBtnPaars, .ServiceBtn, .formBtnWrap {
    display: inline-block;
    border-radius: 5px;
    text-align: center;
}


.ServiceBtnLeeg {
    width: 240px;
    height: 225px;
    display: inline-block;
    margin: 0 15px;
}


.MoreBtnGoud, .MoreBtnPaars {
    margin: 30px 0 0 0;
    font-family: "Josefin Sans", sans-serif;
    font-style: normal;
    font-size: 16pt;
    float: right;
} 

.ServiceBtn {
    margin: 10px 15px;
    font-family: "Rokkitt", serif;
    font-style: italic;
    background-color: #42082c;
    border-bottom: 5px solid #42082c;
    border-left: 10px solid #42082c;
    border-right: 10px solid #42082c;
}


.MoreBtnGoud a, .MoreBtnPaars a, .ServiceBtn a, .formBtnWrap button {
    position: relative;
    display: inline-block;
    border-radius: 5px;
    text-decoration: none;
}

.MoreBtnGoud a, .MoreBtnPaars a {
    width: 140px;
}

.MoreBtnGoud a, .MoreBtnPaars a, .formBtnWrap button {
    padding: 10px 0;
    top: -5px;
    font-weight: 350;
    transition: 0.2s;
}

.MoreBtnGoud a:active, .MoreBtnPaars a:active, .ServiceBtn a:active, .formBtnWrap button:active {
    top: 0px;
}


.MoreBtnGoud {
    background-color: #d39340;
    border-bottom: 5px solid #d39340;
    border-left: 5px solid #d39340;
    border-right: 5px solid #d39340;
}

.MoreBtnPaars, .formBtnWrap {
    background-color: #42082c;
    border-bottom: 5px solid #42082c;
    border-left: 5px solid #42082c;
    border-right: 5px solid #42082c;
}

.MoreBtnGoud a {
    background-color: #ffb743;
    color: #210217;
}

.MoreBtnPaars a, .ServiceBtn a, .formBtnWrap button {
    background-color: #630f47;
    color: #fff;
}

.ServiceBtnTekst1r, .ServiceBtnTekst2r {
    height: 60px;
    width: 210px;
    position: absolute;
    top: 155px;
    left: 50%;
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

.ServiceBtnTekst1r {
    line-height: 60px
}

.ServiceBtn a {
    width: 220px;
    height: 220px;
    padding: 0;
    top: -10px;
    font-weight: 600;
    transition: 0.3s;
    font-size: 20pt;
    line-height: 18pt;
    overflow: hidden;
}

.ServiceBtn a img {
    height: 150px;
    padding: 0; 
    transition: 0.3s;
    position: absolute;
    top: 10px;
    left: 50%;
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

.ServiceBtnImgOverlay {
    top: 0;
    opacity: 0;
}

.ServiceBtn a:hover .ServiceBtnImgOverlay {
    opacity: 1.0;
}

.ServiceBtn a:hover img {
    height: 180px;
    padding: 0;
    top: -5px;
}

.MoreBtnGoud a:hover, .MoreBtnPaars a:hover, .formBtnWrap button:hover {
    font-weight: 600;
}

.ServiceBtn a:hover {
    font-size: 24pt;
    line-height: 21pt;
}




/*Home*/

#homeHeaderVanaf300px {
    display: block;
}

#homeHeaderVanaf0px {
    display: none;
}

#home {
    padding: 40px 0 0 0;
    margin: 0;
    text-align: center;
    border-bottom: 5px solid #42082c; 
}

.homeimage {
    display: inline-block;
    width: 630px;
    padding: 0;
    margin: 0;
}

.homeimage img {
    width: 630px;
    position: relative;
    left: -17px;
    top: -55px;
}

.hometekst {
    display: inline-block;
    width: 440px;
    padding: 24px 0 0 25px;
    vertical-align: top;
}


.hometitle {
    width: 100%;
    display: table;
}

p.home {
    font-family: "Josefin Sans", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 14pt;
    color: #fff;
    width: 100%;
    text-align: left;
    margin: 0 auto;
    padding: 37px 0 0 0;
    line-height: 17pt;
}

.volgtSpoedigPaginaTekst {
    text-align: left;
}

.contentInhoudMinHeight {
    min-height: calc(100vh - 450px);
}


/*About*/


#about, #aboutPagina, #procesPagina, #servicesPagina, #testimonialsPagina, #casesPagina, #contactform {
    padding: 0;
    margin: 0;
    background-color: #e6f9f9;
}


.aboutTekst {
    display: inline-block;
    width: 600px;
    padding: 0 30px 0 0;
    vertical-align: top;
    text-align: left;
}

.aboutImage {
    display: inline-block;
    width: 440px;
    padding: 0 0 0 30px;
    margin: 0;
    vertical-align: top;
}

.aboutImage img {
    width: 100%;
}


/*Process*/

#process {
    padding: 0;
    margin: 0;
    background-color: #e6f9f9;
}


.processTekst {
    display: inline-block;
    width: 600px;
    padding: 0 30px 0 0;
    vertical-align: top;
    text-align: left;
}

.procesPaginaTekst {
    display: inline-block;
    width: 100%;
    padding: 0 30px 0 0;
    vertical-align: top;
    text-align: left;
}

.processImage {
    display: inline-block;
    width: 440px;
    padding: 0 0 0 30px;
    margin: 0;
    vertical-align: top;
}

.processImage img {
    width: 100%;
}




/*Border*/

#border {
    padding: 0;
    margin: 0;
    background-color: #e6f9f9;
}

#border img {
    width: 100%
}



/*Services*/

#services {
    padding: 0;
    margin: 0;
    background-color: #e6f9f9;
}

#servicesSliderVanaf1290px {
    display: block;
}

#servicesSliderVanaf450px, #servicesSliderVanaf300px, #servicesSliderVanaf0px {
    display: none;
}

.servicesTekst {
    display: inline-block;
    width: 1100px;
    text-align: left;
}

.sliderWrap {
    margin-left: auto;
    margin-right: auto;
    width: 1100px;
    position: relative;
    
}

.sliderInhoudWrap {
    width: 1100px;
    height: 260px;
    position: relative;
    overflow: hidden;
}

/*
.hideExtraSlide {
    overflow: hidden;
}
*/

#slide1, #slide2, #slide3, #slide1b, #slide2b, #slide3b, #slide4b, #slide1c, #slide2c {
    -webkit-transition: 1.5s;
    transition: 1.5s;
    position: absolute; 
    padding: 0;
    top: 0px;
    width: 100%;
    text-align: center
}

#slide1, #slide1b, #slide1c {
    margin: 0;
/*    background-color: #ffb743;*/
}

#slide2, #slide2b, #slide2c {
    
    margin: 0 -100% 0 100%;
/*    background-color: #e8a246;*/
}

#slide3, #slide3b {
    margin: 0 -200% 0 200%;
/*    background-color: #d39340;*/
}

#slide4b {
    margin: 0 -300% 0 300%;
}


.sliderNav{
    text-align: center;
    margin: 10px 0 0 0;
    width:100%;
}
    

.sliderNav:after,.sliderNav:before {
    content: "";
    display: table;
    clear: both;
}


.slideNavStip, .slideNavStipB, .slideNavStipC {
    display: inline-block;
    height: 20px;
    width: 20px;
    padding: 0;
    margin: 0 15px;
    text-align: center;
    border-radius: 50%;
    border: 3px solid #d39340;
    background-color: transparent;
    cursor: pointer;
}


.slideNavStipGevuld, .slideNavStipGevuldB, .slideNavStipGevuldC {
    background-color:#e8a246;
}

.slideNavStip:hover, .slideNavStipB:hover, .slideNavStipC:hover {
    background-color:#ffb743;
}




/*Testimonials*/

#testimonials {
    padding: 0;
    margin: 0;
    border-top: 5px solid #42082c; 
    border-bottom: 5px solid #42082c; 
}

.testimonialsTekst {
    display: inline-block;
    width: 1100px;
    text-align: left;
}

.testimonialsTekst h3 {
    color: #fff;
}



/*Cases*/

#cases {
    padding: 0;
    margin: 0;
    background-color: #e6f9f9;
}


.casesTekst {
    display: inline-block;
    width: 1100px;
}

.casesTekst h3 {
    margin: 0 0 5px 0;
}

.casesBlokLinks, .casesBlokRechts {
    display: inline-block;
    width: 530px;
    height: 600px;
    vertical-align: top;
    text-align: left;
    background-image: url(afbeeldingen/Gamecase_Studios_Cases.png);
    background-size: cover; 
    text-decoration: none;
}

.casesBlokLinks {
    margin: 0 20px 0 0;
}

.casesBlokRechts {
    margin: 0 0 0 20px;
}

/*
.casesBlokLinks img, .casesBlokRechts img {
    width: 100%;
}
*/

.casesKop {
    position: relative;
    left: 248px;
    bottom: 75px;
    background-color: #fff;
    border-radius: 5px;
    width: 230px;
    padding: 10px 10px 8px 10px;
}

.casesKop p {
    font-size: 22pt;
    line-height: 25px;
    transition: 0.3s;
}

.labellijn {
    position: relative;
    width: 230px;
    top: -3px;
    border-bottom: 1px solid #42082c; 
}


.caseInhoud {
    width: 530px;
    height: 600px;
    position: relative;
    vertical-align: top;
    left: 0;
}


.casesBlokLinks:hover .casesKop p, .casesBlokRechts:hover .casesKop p {
    font-weight: 400;
}




.CaseDemobox1 {
    position: relative;
    left: 120px;
    top: 15px;
    width: 250px;
    transition: 0.3s;
}

.casesBlokLinks:hover .CaseDemobox1 {
    left: 5px;
    top: -120px;
    width: 325px;
}


.CaseDemobox2 {
    position: relative;
    left: 165px;
    top: 195px;
    width: 140px;
    transition: 0.3s;
}

.casesBlokLinks:hover .CaseDemobox2 {
    left: 190px;
    top: 70px;
    width: 170px;
}


.CaseDemobox3 {
    position: relative;
    left: 270px;
    top: 100px;
    width: 130px;
    transition: 0.3s;
}

.casesBlokLinks:hover .CaseDemobox3 {
    left: 275px;
    top: -50px;
    width: 165px;
}



.CaseBauk1 {
    position: relative;
    left: 155px;
    top: 125px;
    width: 285px;
    transition: 0.3s;
}

.casesBlokRechts:hover .CaseBauk1 {
    left: 190px;
    top: -15px;
    width: 330px;
}


.CaseBauk2 {
    position: relative;
    left: 80px;
    top: -200px;
    width: 140px;
    transition: 0.3s;
}

.casesBlokRechts:hover .CaseBauk2 {
    left: 0px;
    top: -380px;
    width: 175px;
}

.CaseBauk3 {
    position: relative;
    left: 115px;
    top: 120px;
    width: 295px;
    transition: 0.3s;
}

.casesBlokRechts:hover .CaseBauk3 {
    left: 5px;
    top: 30px;
    width: 400px;
}

.CaseBauk4 {
    position: relative;
    left: 135px;
    top: -350px;
    width: 170px;
    transition: 0.3s;
}

.casesBlokRechts:hover .CaseBauk4 {
    left: 80px;
    top: -665px;
    width: 240px;
}

.CaseBauk5 {
    position: relative;
    left: 215px;
    top: -480px;
    width: 215px;
    transition: 0.3s;
}

.casesBlokRechts:hover .CaseBauk5 {
    left: 190px;
    top: -790px;
    width: 335px;
}



/*Contact*/

#contact {
    padding: 0;
    margin: 0;
    background-color: #e6f9f9;
    text-align: center;
}

.contactBlok {
    display: inline-block;
    width: 1100px;
    text-align: center;
    background-color: #ffb743;
    padding: 40px 0;
}

.contactBlok h3 {
    text-align: center;
}

.contactBlok .MoreBtnPaars {
    float: none;
}



/*Contactformulier*/

#contactform .contentwrapWit {
    text-align: left;
}


.formInputWrap {
    margin-bottom: 25px;
    text-align: left;
}

.formInput {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: stretch;
    align-items: stretch;
    width: 100%;
}

.formInputTekst {
    display: block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ffb743;
    outline: none;
    border-radius: 5px;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.formInputTekst:focus {
    border: 1px solid #210217;
}

select.formInputTekst[size], select.formInputTekst[multiple] {
    height: auto;
}

textarea.formInputTekst {
    font-family: "Josefin Sans", sans-serif;
    font-weight: 350;
    font-style: normal;
    font-size: 12pt;
    color: #210217;
    margin: 0;
    line-height: 15pt;
    height: auto;
}

label.formLabel {
    display: inline-block;
    margin-bottom: 5px;
    font-family: "Rokkitt", serif;
    font-style: italic;
    font-weight: 600;
    font-size: 18pt;
}

.formBtnWrap {
    margin: 0 0 25px 0;
}

.formBtnWrap button {
    width: 175px;
    cursor: pointer;
}


.formBtn {
    font-family: "Josefin Sans", sans-serif;
    font-style: normal;
    font-size: 16pt;
    border: none;
}

@media (prefers-reduced-motion: reduce) {
    .fcf-btn {
        transition: none;
    }
}


input[type="submit"].formBtn, input[type="reset"].formBtn, input[type="button"].formBtn {
    width: 100%;
}





/*Footer*/
#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 295px; 
    border-top: 5px solid #42082c; 
}

#footer .contentwrap {
    padding: 45px 45px 0 45px;
    text-align: center;
}

.footerwrap {
    width: 100%;
}


.footertekst p {
    padding: 0;
    margin: 0;
    color: #fff;
    font-weight: 300;
}

#footer a {
    text-decoration: none;
    color: #fff;
}

#footer a:hover {
    text-decoration: underline;
}


.footerOnder {
    width: 100%;
    padding: 0;
    color: white;
    display: inline-block;
    font-size: 10pt;
    margin: 3px 0;
    line-height: 20px;
    text-align: center;
}

h4 {
    font-family: "Rokkitt", serif;
    font-size: 18pt; 
    padding: 0;
    margin: 0;
    font-weight: 600;
    font-style: italic;
    color: #ffb743;
}


.footerLinks, .footerRechts {
    width: 300px;
    display: inline-block;
    vertical-align: top;
}

#footer a {
    font-size: 12pt;
    line-height: 14pt;
}


.footerLinks p, .footerRechts p, .footerOnder p, #footer .footerOnder a {
    font-size: 11pt;
    line-height: 13pt;
}


.footerLinks {
    text-align: left;
    float: left;
}


.footerRechts {
    text-align: right;
    float: right;
}

.footerMidden, .footerMiddenKlein {
    text-align: center;
    vertical-align: top;
    margin: 0 auto;
}

.footerMidden a:hover, .footerMiddenKlein a:hover {
    text-decoration: none !important;
}

.footerMidden {
    width: 275px;
    display: inline-block;
}

.footerMiddenKlein {
    width: 240px;
    display: none;
}

.footerMidden img, .footerMiddenKlein img {
    width: 100%;
    position: relative;
    top: -35px;
    text-align: center;
}


.footerKop1 {
    font-family: "Rokkitt", serif;
    font-size: 37pt;
    color: #fff;
    text-align: left;
    left: 27px;
    position: relative;
    top: -31px;
    font-weight: 600!important;
    font-style: italic;
    line-height: 15pt;
}

.footerKop2 {
    font-family: "Josefin Sans", sans-serif;
    font-size: 15pt;
    color: #fff;
    text-align: right;
    font-weight: 250!important;
    font-style: normal;
    position: relative;
    top: -14px;
    right: 16px;
}