@font-face {
    font-family: 'djgross';
    src: url('../fonts/djgross-webfont.woff2') format('woff2'),
         url('../fonts/djgross-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'abel';
    src: url('../fonts/abel-regular-webfont.woff2') format('woff2'),
         url('../fonts/abel-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
body {
	background-color: #000;
	font-family: 'abel';
}
.container {
	width: 978px;
	margin-left: auto;
	margin-right: auto;
}

/* GENERAL STYLES */
h1 {
	font-family: 'djgross';
}
h2 {
	color: #fff;
	font-family: 'djgross';
	font-size: 50px;
	text-align: center;
}
h3 {
	font-family: 'djgross';
}
p {
	color: #fff;
}

/* STARTING PAGE */
.title p {
    animation: rotate 10s;
}
@keyframes rotate {
    25% {
        transform: rotateY(0deg);
    }
}
.title .heading-1 {
	transform: translateX(0);
	-webkit-transform: rotate(180deg); 
   -moz-transform: rotate(180deg);
}
.title .heading-2 {
	transform: translateX(0);
	-webkit-transform: rotate(145deg); 
   -moz-transform: rotate(145deg);
}
.title .heading-3 {
	transform: translateX(0);
	-webkit-transform: rotate(90deg); 
   -moz-transform: rotate(90deg);
}
.title .heading-4 {
	transform: translateX(0);
	-webkit-transform: rotate(45deg); 
   -moz-transform: rotate(45deg);
}
.title .heading-5 {
	transform: translateX(0);
	-webkit-transform: rotate(340deg); 
   -moz-transform: rotate(340deg);
}

.btn {
	font-size: 20px;
	width: 200px;
	height: 50px;
	color: #fff;
	background-color: #000;
	padding: 20px;
	margin-top: 400px;
	text-decoration: none;
	float: right;
}
.btn:after {
	content: "";
	background-image: url(../images/arrow.png);
	background-repeat: no-repeat;
	background-position: right;
	width: 182px;
	height: 50px;
	display: block;
	margin-top: -36px;
	-webkit-transition: all 0.4s;
       -moz-transition: all 0.4s;
         -o-transition: all 0.4s;
            transition: all 0.4s;
}
.btn:hover {
	cursor: pointer;
}
.btn:hover:after {
	width: 75px;
	margin-left: 115px;
}
.btn-1 {
	margin-top: 150px;
	text-align: right;
	padding-right: 50px;
}
.btn-1:hover:after {
	width: 42px;
	margin-left: 140px;
}
.btn-5 {
	text-align: right;
	padding-right: 50px;
}
.btn-5:hover:after {
	width: 42px;
	margin-left: 140px;
}
.btn-2,
.btn-3,
.btn-4 {
	margin-top: 0px;
}
.btn-2,
.btn-4 {
	float: left;
	margin-left: 50px;
}
.btn-2:after,
.btn-4:after {
	transform: rotate(180deg);
	margin-left: -72px;
}
.btn-2:hover:after,
.btn-4:hover:after {
	width: 50px;
	margin-left: -72px;
}
.btn-3:hover:after {
	width: 50px;
	margin-left: 132px;
}
.btn-4:after {
	width: 216px;
}
.btn-5 {

}
.starting-content {
	height: 450px;
	margin-top: 100px;
}

/* INTRO SECTION */
.intro {
	float: left;
	width: 778px;
	height: 300px;
}
.intro .content-box {
	background-color: #fff;
	width: 350px;
	height: 300px;
	transition: height 1s ease-out;
	transition: width 1s ease-out;
}
.intro p {
	line-height: 25px;
	color: #000;
	max-width: 450px;
	margin-left: 84px;
	padding-top: 84px;
	position: absolute;
	-webkit-transform: rotate(180deg); 
   -moz-transform: rotate(180deg);
	-webkit-transition: transform 1s;
       -moz-transition: transform 1s;
         -o-transition: transform 1s;
            transition: transform 1s;
}
.intro:hover > p {
	-webkit-transform: rotate(0deg); 
   -moz-transform: rotate(0deg);
}
.intro:hover > .content-box{
	width: 600px;
	height: 380px;
}



/* BANNER */
.banner {
	max-width: 978px;
	height: 490px;
	margin-bottom: 100px;
	background-color: #000;
	margin-top: 50px;
}
.banner h1,
.title h1,
.title p {
	font-family: 'djgross';
	font-size: 100px;
	position: absolute;
	color: #fff;
	opacity: 0.3;
	text-align: center;
	top: 0px;
	left: 16%;
	margin-top: 50px;
}
.title h1 {
	position: initial;
}

.banner h1 span,
.title h1 span,
.title p span {
	font-size: 150px;
}
.grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.banner .grid div {
	display: inline-flex;
	background-size: cover;
	background-repeat: no-repeat;
	opacity: 1;
	z-index: 9;
	-webkit-transition: all 0.4s;
       -moz-transition: all 0.4s;
         -o-transition: all 0.4s;
            transition: all 0.4s;
}
.grid div:hover {
	background-repeat: no-repeat;
	transform: scale(1.2);
	z-index: 999;
	cursor: pointer;
}
.grid div:not(:hover) {
	opacity: 0.3;
}

.banner .box-1 {
	width: 115px;
	height: 115px;
	background-image: url(../images/artworks/before-memory-1.jpg);
}
.banner .box-2 {
	width: 115px;
	height: 115px;
	background-image: url(../images/artworks/smithsonian-2.jpg);
}
.banner .box-3 {
	width: 115px;
	height: 115px;
	background-image: url(../images/artworks/before-memory-2.jpg);
}
.banner .box-4 {
	width: 84px;
	height: 115px;
	background-image: url(../images/artworks/game-over-4.jpg);
}
.banner .box-5 {
	width: 115px;
	height: 115px;
	background-image: url(../images/artist-crouwel.jpg);
}
.banner .box-6 {
	width: 115px;
	height: 115px;
	background-image: url(../images/artworks/maps-demographic-economy-3.jpg);
}
.banner .box-7 {
	width: 115px;
	height: 115px;
	background-image: url(../images/artworks/punk-london-3.jpg);
}
.banner .box-8 {
	width: 84px;
	height: 115px;
	background-image: url(../images/artworks/your-turn-4.jpg);
}
.banner .box-9 {
	width: 84px;
	height: 115px;
	background-image: url(../images/artworks/HorseProjectSpace-3.jpg);
}
.banner .box-10 {
	width: 115px;
	height: 84px;
	background-image: url(../images/artworks/smithsonian-1.jpg);
}
.banner .box-11 {
	width: 84px;
	height: 115px;
	background-image: url(../images/artworks/HorseProjectSpace-4.jpg);
}
.banner .box-12 {
	width: 84px;
	height: 115px;
	background-image: url(../images/artworks/game-over-1.jpg);
}
.banner .box-13 {
	width: 115px;
	height: 115px;
	background-image: url(../images/artworks/maps-demographic-economy-1.jpg);
}
.banner .box-14 {
	width: 84px;
	height: 115px;
	background-image: url(../images/artworks/your-turn-3.jpg);
}
.banner .box-15 {
	width: 84px;
	height: 115px;
	background-image: url(../images/artworks/visuele-communicatie-nederland-1.jpg);
}
.banner .box-16 {
	width: 84px;
	height: 115px;
	background-image: url(../images/artworks/game-over-2.jpg);
}
.banner .box-17 {
	width: 84px;
	height: 115px;
	background-image: url(../images/artworks/visuele-communicatie-nederland-3.jpg);
}
.banner .box-18 {
	width: 115px;
	height: 115px;
	background-image: url(../images/artworks/maps-demographic-economy-4.jpg);
}
.banner .box-19 {
	width: 84px;
	height: 115px;
	background-image: url(../images/artworks/your-turn-2.jpg);
}
.banner .box-20 {
	width: 115px;
	height: 115px;
	background-image: url(../images/artworks/punk-london-4.jpg);
}
.banner .box-21 {
	width: 115px;
	height: 115px;
	background-image: url(../images/artist-greiman.jpg);
}
.banner .box-22 {
	width: 115px;
	height: 115px;
	background-image: url(../images/artworks/punk-london-1.jpg);
}
.banner .box-23 {
	width: 115px;
	height: 115px;
	background-image: url(../images/artworks/smithsonian-3.jpg);
}
.banner .box-24 {
	width: 115px;
	height: 115px;
	background-image: url(../images/artworks/before-memory-2.jpg);
}
.banner .box-25 {
	width: 115px;
	height: 115px;
	background-image: url(../images/artworks/smithsonian-4.jpg);
}
.banner .box-26 {
	width: 115px;
	height: 115px;
	background-image: url(../images/artist-carson.jpg);
}
.banner .box-27 {
	width: 84px;
	height: 115px;
	background-image: url(../images/artworks/HorseProjectSpace-1.jpg);
}
.banner .box-28 {
	width: 84px;
	height: 115px;
	background-image: url(../images/artworks/visuele-communicatie-nederland-2.jpg);
}
.banner .box-29 {
	width: 84px;
	height: 115px;
	background-image: url(../images/artworks/your-turn-1.jpg);
}
.banner .box-30 {
	width: 115px;
	height: 115px;
	background-image: url(../images/artworks/before-memory-4.jpg);
}
.banner .box-31 {
	width: 115px;
	height: 115px;
	background-image: url(../images/artist-bantjes.jpg);
}
.banner .box-32 {
	width: 115px;
	height: 115px;
	background-image: url(../images/artworks/maps-demographic-economy-2.jpg);
}
.banner .box-33 {
	width: 115px;
	height: 115px;
	background-image: url(../images/artworks/punk-london-2.jpg);
}
.banner .box-34 {
	width: 84px;
	height: 115px;
	background-image: url(../images/artworks/HorseProjectSpace-2.jpg);
}
.banner .box-35 {
	width: 84px;
	height: 115px;
	background-image: url(../images/artworks/visuele-communicatie-nederland-4.jpg);
}
.banner .box-36 {
	width: 84px;
	height: 115px;
	background-image: url(../images/artworks/game-over-3.jpg);
}

/* SECTIONS */
.section-title {
	margin-bottom: 200px;
}
.color-box {
 	height: 80px;
 	width: 50%;
 	background-color: rgba(255, 255, 255, 0.85);
 	position: absolute;
 	margin-top: -50px;
 	margin-left: 300px;
 	z-index: -9;
}


/* ARTISTS SECTION */
#famous-artists {
	margin-bottom: 200px;
}
.artist {
	width: 100%;
	height: 500px;
}
.artist img {
	position: relative;
	z-index: 9;
}
.artist h3 {
	color: #fff;
	font-size: 125px;
	margin: 25px;
	position: absolute;
	z-index: 99;
	width: 600px;
	
	opacity: .75;

    -webkit-transition: all 1s;
       -moz-transition: all 1s;
         -o-transition: all 1s;
            transition: all 1s;

}
.artist h3 span {
	margin-left: 90px;
	-webkit-transition: all 1s;
       -moz-transition: all 1s;
         -o-transition: all 1s;
            transition: all 1s;
}
.artist p {
	max-width: 330px;
	margin-left: 252px;
	margin-top: 84px;
	padding: 45px;
	color: #fff;
	position: absolute;

	transform: translateX(0);
	transition: transform .8s 0s;
	-webkit-transform: rotate(180deg); 
   -moz-transform: rotate(180deg);
}
.artist .hover-over {
	width: 800px;
	height: 500px;
	margin: 0 auto;
	position: absolute;
	z-index: 999;
}
.artist .hover-over:hover ~ img {
	-webkit-transform: rotate(0deg);
}
.artist .hover-over:hover ~ h3 {
/*	color: #000;*/
	font-size: 40px;
	transform: rotate(0deg);
    opacity: 1;
}
.artist .hover-over:hover ~ h3 span {
	margin-left: 0px;
}
.artist .hover-over:hover ~ p {
	margin-top: 30px;
	line-height: 25px;
}

/* ARTISTS - LEFT */
.artist.left img {
	float: left;
	-webkit-transform: rotate(-15deg); 
   -moz-transform: rotate(-15deg);
   transition-duration: .8s;
   transition-property: transform;
}
.artist.left h3 {
	transform: rotate(-35deg);
}
.artist.left .hover-over:hover ~ h3 {
	margin: 0 0 75px 474px;
}
.artist.left .hover-over:hover ~ p {
	transform: translateX(200px);
}

/* ARTISTS - RIGHT */
.artist.right img {
	float: right;
	-webkit-transform: rotate(15deg); 
   -moz-transform: rotate(15deg);
   transition-duration: .8s;
   transition-property: transform;
}
.artist.right h3 {
	transform: rotate(35deg);
	margin: 0 200px 0;
	text-align: right;
}
.artist.right .hover-over:hover ~ h3 {
	margin: 0;
	text-align: left;
}
.artist.right .hover-over:hover ~ p {
     margin-left: 54px;
    -webkit-transform: rotate(0deg);
    -webkit-transition: all 1s;
       -moz-transition: all 1s;
         -o-transition: all 1s;
            transition: all 1s;
}

/* ARTWORKS SECTION */
#famous-artworks {

}
.artwork .hover-over {
	width: 800px;
	height: 500px;
	margin: 0 auto;
	position: absolute;
	z-index: 999;
}
.artwork {
	margin: 0 auto;
	width: 750px;
	height: 700px;
}
.artwork h3 {
	color: #fff;
	font-size: 125px;
	margin: 0 auto;
	position: absolute;
	z-index: 99;
	width: 600px;
	text-align: center;
	
	opacity: .75;

    -webkit-transition: all 1s;
       -moz-transition: all 1s;
         -o-transition: all 1s;
}
.artwork h3 .small {
	font-size: 15px;
}
.artwork h4 {
	font-family: "abel";
	line-height: 50px;
	color: #fff;
	font-size: 20px;
	border: 3px solid;
	margin-right: -81px;
	margin-top: 140px;
	min-width: 260px;
	text-align: center;
	float: right;
	-webkit-transform: rotate(180deg); 
   -moz-transform: rotate(180deg);
   transition-duration: .8s;
   transition-property: transform;
}	
.artwork p {
	max-width: 330px;
	margin-left: 200px;
	margin-top: 84px;
	color: #fff;
	padding: 45px;
	position: absolute;
	-webkit-transition: all .25s;
       -moz-transition: all .25s;
         -o-transition: all .25s;
}
.artwork img {
	width: 150px;
	-webkit-transition: all 1s;
       -moz-transition: all 1s;
         -o-transition: all 1s;
}
.artwork-1 {
	margin-top: 250px;
	float: right;
	-webkit-transform: rotate(145deg); 
   -moz-transform: rotate(145deg);
   transition-duration: 1s;
   transition-property: transform;
}
.artwork-2 {
	float: left;
	-webkit-transform: rotate(30deg); 
   -moz-transform: rotate(30deg);
   transition-duration: 1s;
   transition-property: transform;
   z-index: 9;
   margin-top: 200px;
   margin-left: 100px;
}
.artwork-3 {
	float: right;
	-webkit-transform: rotate(-15deg); 
   -moz-transform: rotate(-15deg);
   transition-duration: 1s;
   transition-property: transform;
   z-index: 9;
}
.artwork-4 {
	float: right;
	-webkit-transform: rotate(26deg); 
   -moz-transform: rotate(26deg);
   transition-duration: 1s;
   transition-property: transform;
   margin-right: -200px;
   margin-top: 350px;
}

.artwork .hover-over:hover ~ h3 {
	color: #fff;
	font-size: 40px;
	transform: rotate(0deg);
    opacity: 1;
    margin: 0;
    position: initial;
    width: 300px;
    text-align: left;
    float: right;
    margin-right: 10px;
    margin-top: -10px;

}
.artwork .hover-over:hover ~ h3 .small {
	font-size: 40px;
}
.artwork .hover-over:hover ~ h4 {
	line-height: 18px;
	font-size: 18px;
	margin-right: 0px;
	margin-top: 20px;
	position: absolute;
	right: 100px;
	padding: 20px;
	transform: rotate(0deg);
    opacity: 1;
}
.artwork .hover-over:hover ~ p {
	line-height: 25px;
	float: right;
	margin-top: -504px;
	position: initial;
}
.artwork .hover-over:hover ~ .artwork-images {
	width: 420px;
}
.artwork .hover-over:hover ~ .artwork-images img {
	-webkit-transform: rotate(0deg);
}
.artwork .hover-over:hover ~ .artwork-images .artwork-1,
.artwork .hover-over:hover ~ .artwork-images .artwork-2,
.artwork .hover-over:hover ~ .artwork-images .artwork-3,
.artwork .hover-over:hover ~ .artwork-images .artwork-4 {
	width: 210px;
	float: none;
	margin: 0;
}
.artwork .hover-over:hover ~ .artwork-images .artwork-3,
.artwork .hover-over:hover ~ .artwork-images .artwork-4 {
	position: relative;
	top: -4px;
}


/* INDIVIDUAL ARTISTS */
.windlin h4 {
	border-color: #ff8726;
}
.wim h4 {
	border-color: #ec2c81;
}
.wim .hover-over:hover ~ h4 {
	margin-top: 100px;
}
.wim .hover-over:hover ~ p {
	margin-top: -440px;
}
.marian h4 {
	border-color: #fef666;
}
.marian .hover-over:hover ~ h4 {
	margin-top: 90px;
}
.marian .hover-over:hover ~ p {
	margin-top: -260px;
}
.neville h4 {
	border-color: #ff25aa;
}
.neville .hover-over:hover ~ h4 {
	margin-top: 60px;
}
.neville .hover-over:hover ~ p {
	margin-top: -144px;
}
.david h4 {
	border-color: #60c6e2;
}
.david .hover-over:hover ~ h4 {
	margin-top: 60px;
}
.david .hover-over:hover ~ p {
	margin-top: -154px;
}
.michiel h4 {
	border-color: #cadbf0;
}
.michiel .hover-over:hover ~ h4 {
	margin-top: 140px;
}
.michiel .hover-over:hover ~ p {
	margin-top: -450px;
}
.april h4 {
	border-color: #fe7247;
}
.april .hover-over:hover ~ h4 {
	margin-top: 60px;
}
.april .hover-over:hover ~ p {
	margin-top: -484px;
}
.paula h4 {
	border-color: #e11343;
}
.paula .hover-over:hover ~ h4 {
	margin-top: 100px;
}
.paula .hover-over:hover ~ p {
	margin-top: -114px;
}


/* FEATURED WORK */
.featured {
	height: 630px;
}
.featured .hover-over {
	width: 800px;
	height: 500px;
	margin: 0 auto;
	position: absolute;
	z-index: 999;
}
.featured h3 {
	opacity: 0;
	-webkit-transition: all 1s;
       -moz-transition: all 1s;
         -o-transition: all 1s;
}
.featured h4 {
	font-family: "abel";
	line-height: 50px;
	color: #fff;
	font-size: 20px;
	border: 3px solid;
	border-color: #c6cc0c;
	margin: 0 auto;
	width: 500px;
	text-align: center;
	-webkit-transform: rotate(180deg); 
   -moz-transform: rotate(180deg);
   transition-duration: .8s;
   transition-property: transform;
   opacity: 0;
	-webkit-transition: all 1s;
       -moz-transition: all 1s;
         -o-transition: all 1s;
}
.featured p {
	opacity: 0;
	-webkit-transition: all 1s;
       -moz-transition: all 1s;
         -o-transition: all 1s;
}
.featured .artwork-images {
	width: 500px;
	height: 348px;
	margin: 0 auto 40px;
}
.featured .artwork-images > img {
	width: 400px;/*
	-webkit-transition: all 1s;
       -moz-transition: all 1s;
         -o-transition: all 1s;*/
}
.featured .featured-1,
.featured .featured-2,
.featured .featured-3,
.featured .featured-4 {
	margin: 0;
	float: none;
	transition-duration: 1s;
   transition-property: transform;
}
.featured .featured-1 {
	margin-bottom: 100px;
	-webkit-transform: rotate(145deg); 
   -moz-transform: rotate(145deg);
}
.featured .featured-2 {
	margin-bottom: 100px;
	position: relative;
	top: -200px;
	left: 100px;
	-webkit-transform: rotate(65deg); 
   -moz-transform: rotate(65deg);
}
.featured .featured-3 {
	top: -600px;
	right: 100px;
	position: relative;
	-webkit-transform: rotate(-15deg); 
   -moz-transform: rotate(-15deg);
}
.featured .featured-4 {
	top: -1000px;
	left: 300px;
	position: relative;
	-webkit-transform: rotate(26deg); 
   -moz-transform: rotate(26deg);
}
.featured .hover-over:hover ~ h3 {
	color: #fff;
	font-size: 50px;
	opacity: 1;
	margin: 0;
	text-align: center;
}
.featured .hover-over:hover ~ h4 {
	line-height: 18px;
	font-size: 18px;
	margin: 0 auto 30px;
	padding: 20px;
	transform: rotate(0deg);
    opacity: 1;
}
.featured .hover-over:hover ~ p {
	max-width: 500px;
	margin: 0 auto;
	opacity: 1;
}
.featured .hover-over:hover ~ .artwork-images > img {
	width: 250px;
	-webkit-transform: rotate(0deg);
}
.featured .hover-over:hover ~ .artwork-images .featured-1,
.featured .hover-over:hover ~ .artwork-images .featured-2 {
	margin-bottom: 0px;
	position: initial;
}
.featured .hover-over:hover ~ .artwork-images .featured-3,
.featured .hover-over:hover ~ .artwork-images .featured-4 {
	top: -3px;
	right: auto;
	left: auto;
}

/* LEARN MORE PAGE */
.content {
	width: 100%;
	height: 550px;
	display: flex;
	margin-top: 50px;
}
.content > div {
	flex-basis: 300px;
}
.content >div:nth-child(2) {
	margin: 0 40px;
}
.content h2 {
	font-size: 40px;
	margin-bottom: 30px;
}
.content h3 {
	font-size: 30px;
	color: #fff;
	font-family: 'abel';
	margin-bottom: 20px;
	text-align: center;
}
.content h3:not(:first-of-type) {
	margin-top: 50px;
}
.content a {
	font-size: 16px;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	color: #fff;
	display: block;
	font-weight: bold;
	/*margin: 30px;*/
}
.content a:after {
	content: "";
	height: 0px;
	display: block;
	width: 100%;
	border: 3px solid #fff;
	margin-top: -11px;
	-webkit-transition: height 0.5s;
       -moz-transition: height 0.5s;
         -o-transition: height 0.5s;
            transition: height 0.5s;
}
.content a:hover {
	color: #fff;
	cursor: pointer;
}
.content a:hover:after {
	margin-top: -25px;
	height: 30px;
	border-color: #fff;
}
.spacer {
	height: 30px;
	width: 100%;
	display: block;
}
.artist-web a {
	color: #f44c93;
}
.artist-web a:hover {
	color: #fff;
}
.artist-web a:hover:after {
	border-color: #f44c93;
}
.written-works a {
	color: #ff9a17;
}
.written-works a:hover {
	color: #fff;
}
.written-works a:hover:after {
	border-color: #ff9a17;
}
.explore a {
	color: #c6cc0c;
}
.explore a:hover {
	color: #fff;
}
.explore a:hover:after {
	border-color: #c6cc0c;
}


/* VIDEO POPUP MODAL */

.popup__overlay {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  text-align: center;
  z-index: 100;
}

.popup__overlay:after {
  display: inline-block;
  height: 100%;
  width: 0;
  vertical-align: middle;
  content: "";
}

.popup {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 640px;
  max-height: 480px;
  padding: 20px;
  border: 1px solid black;
  background: black;
  color: white;
  vertical-align: middle;
}

.popup-form__row {
  margin: 1em 0;
}

.popup__close {
  display: block;
  position: absolute;
  top: 1px;
  right: 1px;
  width: 12px;
  height: 12px;
  padding: 8px;
  cursor: pointer;
  text-align: center;
  font-size: 62px;
  line-height: 12px;
  color: rgba(53, 36, 22, 0.95);
  text-decoration: none;
  font-weight: bold;
}
.popup__close {
	margin: 0 !important;
	font-size: 30px !important;
}
.popup__close:after {
	border: none;
	margin: 0px;
	content: none !important;
}

.popup__close:hover {
  color: #eea200;
}

iframe {
  width: 100%;
  height: 100%;
}