/* GENERAL */
* {margin: 0; padding: 0; box-sizing: border-box; color: white; font-family: nimbus-sans-extended, sans-serif; font-weight: 300; text-decoration: none; list-style: none;}
html {scroll-behavior: smooth;}
body {background-color: #02020C;}
a {text-decoration: none;}

.button {padding: 15px 59px; display: inline-block; font-family: oswald, sans-serif; font-weight: 700; font-size: 20px; line-height: 26px; text-transform: uppercase; color: white; background-color: #A041FF; border: #A041FF 1px solid; transition: ease-in-out 200ms;}
.button.outline {color: #A041FF; border: #A041FF 1px solid; background-color: transparent;}
.button:hover {color: #02020C; background-color: white; border: white 1px solid;}

.button:nth-child(2) {margin-left: 8px;}

.button--wrapper {margin-top: 26px;}

@media only screen and (max-width: 504px) {
    .button:nth-child(2) {margin-left: 0px; margin-top: 12px;}
}


/* FLEX */
.container {max-width: 1340px; padding: 0 30px; margin: 0 auto;}

.inner.space--between {display: flex; justify-content: space-between;}
.inner.vertical--center {display: flex; align-items: center;}

@media only screen and (max-width: 1400px) {
    .container {max-width: 1040px; padding: 0 30px; margin: 0 auto;}
}


/* SITE HEADER */
.site__header {padding: 60px 0;}


/* SECTION HEADER */
.section__header .section--hero {padding: 165px 0;}
.section__header h1 {font-family: oswald, sans-serif; font-weight: 700; font-size: 80px; line-height: 90px; text-transform: uppercase; color: transparent; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: white;}
.section__header h1 span {font-family: oswald, sans-serif; font-weight: 700; color: white; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: transparent;}
.section__header p {font-size: 20px; line-height: 28px; max-width: 640px; margin-top: 18px;}

.social {display: flex; align-items: center;}
.social a:first-child {margin-top: 3px;}
.social a:last-child {margin-left: 20px;}
.social a {transition: ease-in-out 200ms; display: inline-block;}
.social a:hover {opacity: 0.8;}

.link a {display: flex; align-items: center;}
.link a .line {content: ''; width: 170px; height: 1px; background-color: white; margin-right: 20px;}

@media only screen and (max-width: 1400px) {
    .section__header .section--hero {padding: 115px 0 135px;}
}
@media only screen and (max-width: 764px) {
    .section__header .section--hero {padding: 30px 0 115px;}
    .section__header h1 {font-size: 64px; line-height: 72px;}
    .link a .line {content: ''; width: 110px; height: 1px; background-color: white; margin-right: 20px;}
}


/* SECTION PORTFOLIO */
.section__portfolio {padding: 100px 0;}
.section__portfolio .grid-1 {display: grid; grid-template-columns: 1fr;}
.section__portfolio .grid-1 .grid-item {padding: 70px 80px; background-color: #02020C; color: white; border: #282830 1px solid; margin-top: -1px; transition: 200ms ease-in-out; cursor: pointer;}
.section__portfolio .grid-1 .grid-item .wrapper {display: flex; align-items: center; justify-content: space-between; }
.section__portfolio .grid-1 .grid-item h3 {font-family: oswald, sans-serif; font-weight: 700; font-size: 32px; line-height: 28px; text-transform: uppercase;}
.section__portfolio .grid-1 .grid-item p {font-size: 20px; line-height: 28px; max-width: 640px; margin-top: 18px;}
.section__portfolio .grid-1 .grid-item:hover {background-color: #A041FF; border: #A041FF 1px solid;}

@media only screen and (max-width: 764px) {
    .section__portfolio .grid-1 .grid-item {padding: 60px 50px;}
    .section__portfolio .grid-1 .grid-item .right {display: none;}
    .section__portfolio {padding: 80px 0;}
}


/* SECTION ERVARING */
.section__ervaring {padding: 100px 0;}
.section__ervaring .grid-3 {display: grid; grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 30px; margin-top: 100px;}
.section__ervaring .grid-3 .grid-item {padding: 70px 0; background-color: #02020C; text-align: center; color: white; border: #282830 1px solid; margin-top: -1px; transition: 200ms ease-in-out; cursor: pointer;}
.section__ervaring .grid-3 .grid-item .wrapper {display: inline-flex; align-items: center; text-align: left;}
.section__ervaring .grid-3 .grid-item h3 {font-family: oswald, sans-serif; font-weight: 700; font-size: 26px; line-height: 28px; text-transform: uppercase;}
.section__ervaring .grid-3 .grid-item p {font-size: 16px; opacity: 0.4; margin-top: 4px;}
.section__ervaring .grid-3 .grid-item .logo {margin-right: 16px;}
.section__ervaring .grid-3 .grid-item:hover {background-color: #A041FF; border: #A041FF 1px solid;}

@media only screen and (max-width: 1400px) {
    .section__ervaring .grid-3 {display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 30px; margin-top: 100px;}
}
@media only screen and (max-width: 764px) {
    .section__ervaring .grid-3 {display: grid; grid-template-columns: 1fr; grid-column-gap: 30px; margin-top: 80px;}
    .section__ervaring {padding: 80px 0;}
}


/* SECTION CONTACT */
.section__contact {padding: 150px 0;}
.section__contact .inner.center {max-width: 640px; margin: 0 auto; text-align: center;}
.section__contact .inner.center p {font-size: 28px; line-height: 36px;}

@media only screen and (max-width: 764px) {
    .section__contact {padding: 100px 0;}
}


/* SITE FOOTER */
.site__footer {padding: 100px 0 60px;}