body {line-height:1; overflow-x:hidden; overflow-y:scroll; font-family: sans-serif; font-weight:100;}

@font-face {font-family:"CG-Light"; src: url('../fonts/COCOGOOSE-Light.woff2') format('woff2'), url('../fonts/COCOGOOSE-Light.woff') format('woff'), url('../fonts/COCOGOOSE-Light.ttf') format('truetype');}
@font-face {font-family:"CG-Reg"; src: url('../fonts/COCOGOOSE-Regular.woff2') format('woff2'), url('../fonts/COCOGOOSE-Regular.woff') format('woff'), url('../fonts/COCOGOOSE-Regular.ttf') format('truetype');}
@font-face {font-family:"CG-Bold"; src: url('../fonts/COCOGOOSE-Bold.woff2') format('woff2'), url('../fonts/COCOGOOSE-Bold.woff') format('woff'), url('../fonts/COCOGOOSE-Bold.ttf') format('truetype');}

.arial {font-family: arial,sans-serif;}
.cglight {font-family: "CG-Light", sans-serif; font-weight:100;}
.cgreg {font-family: "CG-Reg", sans-serif; font-weight:100;}
.cgbold {font-family: "CG-Bold", sans-serif; font-weight:100;}


h1, h2, h3, h4 {margin:0;}
p {margin: 0; font-size: 16px; line-height:24px;}
a {outline:0!important;}
.navbar-nav a:hover, .navbar-nav a:focus {background:none!important;}
input, textarea {margin: 4px 0; border: none;}
.btn {border-radius: 18px; padding: 10px 25px; border: none;}



.subheadline {font-size:10px;letter-spacing:0px;}

.shape1 {-webkit-clip-path: polygon(5% 9%, 96% 8%, 98% 94%, 2% 97%);clip-path: polygon(5% 9%, 96% 8%, 98% 94%, 2% 97%)}
.shape2 {-webkit-clip-path: polygon(1% 5%, 100% 0, 100% 98%, 0 96%);
clip-path: polygon(1% 5%, 100% 0, 100% 98%, 0 96%);}
.shape3 {-webkit-clip-path: polygon(0 0, 100% 7%, 100% 94%, 0 97%);
clip-path: polygon(0 0, 100% 7%, 100% 94%, 0 97%);}
.shape4 {-webkit-clip-path: polygon(0 0, 99% 3%, 100% 100%, 1% 96%);
clip-path: polygon(0 0, 99% 3%, 100% 100%, 1% 96%);}
.shape5 {-webkit-clip-path: polygon(1% 2%, 99% 2%, 100% 98%, 0 100%);
clip-path: polygon(1% 2%, 99% 2%, 100% 98%, 0 100%);}


    .grid {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			grid-auto-flow: dense;
			grid-gap:2em 0;
		}
		.item img {
			display: block;
			object-fit: cover;
			width: 100%;
			height: 100%;
		}
		.item {grid-row: span 3;}
		.wide3, .wide4, .wide5, .wide6, .wide7, .wide8, .wide12 {grid-column: span 12;}

		@media (min-width: 768px) {
			.grid {
				grid-template-columns: repeat(12, 1fr);
				grid-gap:2.5em;
			}
			.item {
				grid-row: span 3;
			}
			.wide3 {grid-column: span 3;}
			.wide4 {grid-column: span 4;}
			.wide5 {grid-column: span 5;}
			.wide6 {grid-column: span 6;}
			.wide7 {grid-column: span 7;}
			.wide8 {grid-column: span 8;}
			.wide12 {grid-column: span 12;}
		}

		.sort-btn {background:none; padding: 15px 15px; margin: 0 5px; font-size:13px; color:#acacac; border:none;}
		.sort-active {background:#2dc015;font-weight:bold;color: #000; border:none; padding: 30px 40px; margin: -12px 0;}
		.minusmargin {margin: -80px 0;}


.grid figure {
	position: relative;
	overflow: hidden;
}
.grid figure figcaption {
	padding: 2em;
	color: #fff;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.grid figure figcaption::before,
.grid figure figcaption::after {
	pointer-events: none;
}

.grid figure figcaption,
.grid figure figcaption > a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


figure.item figcaption {
	top: auto;
	bottom: 0;
	padding: 2em;
	height: 7em;
	background: #000;
	color: #ebebeb;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(0,100%,0);
	transform: translate3d(0,100%,0);
}


figure.item p {
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(0,200%,0);
	transform: translate3d(0,200%,0);
}

figure.item:hover figcaption,
figure.item:hover p {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.item:hover p {
	-webkit-transition-delay: 0.05s;
	transition-delay: 0.05s;
}

.height100 {height: 100px;}



.gradient {
	position:relative;
	z-index: 10;
	background: rgb(240,240,244);
	background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 31%, rgba(255,255,255,0) 31%);
}
.changemargin {margin:25px 0 350px 0;}


	.bg1 {
		background:#f0f0f4 url('../img/bg1.jpg') no-repeat;
		background-position: bottom right;
		background-size:700px auto;
		width: 100%;
		height: 100%;
		position:absolute;
		right:0;
		bottom:0;
	}

@media (min-width: 768px) {
	.gradient {background:none;}
	.bg1, .bg2, .bg3, .bg4, .bg5 {
		background-size: auto 100%;
	}

}
@media (min-width: 992px) {

	.bg2 {background:#f0f0f4 url('../img/bg2b.jpg') no-repeat;}
	.bg3 {background:#f0f0f4 url('../img/bg3.jpg') no-repeat;}
	.bg4 {background:#f0f0f4 url('../img/bg4.jpg') no-repeat;}
	.bg5 {background:#f0f0f4 url('../img/bg5.jpg') no-repeat;}

	.bg2, .bg3, .bg4, .bg5 {
		background-position: bottom right;
		background-size:700px auto;
		width: 100%;
		height: 100%;
		position:absolute;
		right:0;
		bottom:0;
	}
	.bg2 {
		background-position: bottom left;
	}


	.changemargin {margin:220px 0;}
	.subheadline {font-size:15px;letter-spacing: 5.51px;}
	.active a {
		font-family: "CG-Reg", sans-serif;
		color: #fff!important;
	}
	.active:first-child {background: #2495ff!important;-webkit-clip-path: polygon(0 8%, 100% 0, 96% 98%, 4% 92%);clip-path: polygon(0 8%, 100% 0, 96% 98%, 4% 92%);}
	.active:nth-child(2) {background: #f78e00!important;-webkit-clip-path: polygon(7% 0, 94% 6%, 100% 100%, 0 88%);clip-path: polygon(7% 0, 94% 6%, 100% 100%, 0 88%);}
	.active:nth-child(3) {background: #2dc015!important;-webkit-clip-path: polygon(0 5%, 87% 0, 100% 100%, 7% 90%);clip-path: polygon(0 5%, 87% 0, 100% 100%, 7% 90%);}
	.active:nth-child(4) {background: #7a6eee!important;-webkit-clip-path: polygon(0 0, 97% 11%, 100% 92%, 5% 100%);clip-path: polygon(0 0, 97% 11%, 100% 92%, 5% 100%);}
	.active:nth-child(5) {background: #1ac6cc!important;-webkit-clip-path: polygon(7% 0, 94% 6%, 100% 100%, 0 88%);clip-path: polygon(7% 0, 94% 6%, 100% 100%, 0 88%);}
	.active:nth-child(6) {background: #f75454!important;-webkit-clip-path: polygon(0 8%, 100% 0, 96% 98%, 4% 92%);clip-path: polygon(0 8%, 100% 0, 96% 98%, 4% 92%);}

	.bg1, .bg2, .bg3, .bg4, .bg5  {
		background-size: auto 100%;
		right:-200px;
	}
	
	.bg2 {
		background-size: auto 100%;
		right:-100px;
	}
}
@media (min-width: 1200px) {
	.bg1, .bg2, .bg3, .bg4, .bg5 {right:0px;}
}

.instagram, .imdb {
	background:url('../img/socialmedia.jpg');
	background-size: 100px;
	height: 50px;
	width: 50px;
	margin: 20px 12px 0 0;
}
.instagram {background-position: 0px 0;}
.imdb {background-position: -50px 0;}




.fullwidth {width:100%;}
.fullheight {height:100%;}


/*  Positions  */
.inlineblock {display:inline-block!important;}
.relative {position:relative;}
.absolute {position:absolute;}
.top {top:0;}
.bottom {bottom:0;}
.right {right:0;}
.left {left:0;}
.valigntop {vertical-align:top;}
.valigncenter {top: 50%;-ms-transform: translateY(-50%); transform: translateY(-50%);}

.none {display:none;}
.hidden-xs {display:none;}
.hidden-lg {display: block;}

@media (min-width: 768px) {
	.hidden-xs {display:block;}
	.hidden-lg {display: none;}
}



/*  Fonts & Colors  */
.uppercase {text-transform: uppercase;}
.text-right {text-align:right;}

.font14 {font-size:12px;}
.font16 {font-size:14px;}
.font20 {font-size:15px;}
.font25 {font-size:20px;}
.font30 {font-size:25px;}
.font50 {font-size:25px;}
.font60 {font-size:30px;}
.font70 {font-size:35px;}
.font80 {font-size:40px;}

@media (min-width: 992px) {
	.font14 {font-size:14px;}
	.font16 {font-size:16px;}
	.font20 {font-size:20px;}
	.font20 {font-size:25px;}
	.font30 {font-size:30px;}
	.font50 {font-size:50px;}
	.font60 {font-size:60px;}
	.font70 {font-size:70px;}
	.font80 {font-size:80px;}
}

.colorlightgray {color: #acacac;}
.colorwhite {color: #fff;}
.colorblack {color: #000;}
.colorblue {color: #2495ff;}
.colorteal {color: #1ac6cc;}
.colorgreen {color: #2dc015;}
.colororange {color: #f78e00;}
.colorred {color: #f75454;}
.colorpurple {color: #7a6eee;}

.bgwhite {background:#fff;}
.bgblack {background:#000;}
.bglightgray {background:#f0f0f4;}
.bglightergray {background:#f7f7f7;}
.bgblue {background: #2495ff;}
.bgteal {background: #1ac6cc;}
.bggreen {background: #2dc015;}
.bgred {background: #f75454;}
.bgpurple {background: #7a6eee;}

.blueline {border-top:2px solid #2495ff; padding:10px 0 0 0;}
.tealline {border-top:2px solid #1ac6cc; padding:10px 0 0 0;}
.greenline {border-top:2px solid #2dc015; padding:10px 0 0 0;}
.orangeline {border-top:2px solid #f78e00; padding:10px 0 0 0;}
.redline {border-top:2px solid #f75454; padding:10px 0 0 0;}
.purpleline {border-top:2px solid #7a6eee; padding:10px 0 0 0;}

/*  Margins/Padding  */

.padding0 {padding: 0;}
.paddingchange {padding: 80px;}
.paddingchange2 {padding: 30px;}
.margincentered {margin:0 auto; float:none;}

.margintop5 {margin-top:5px;}
.margintop10 {margin-top:10px;}
.margintop15 {margin-top:15px;}
.margintop20 {margin-top:20px;}
.margintop30 {margin-top:30px;}

.margintop40, .margintop50, .margintop60,
.margintop70, .margintop80, .margintop90,
.margintop100, .margintop110, .margintop120 {margin-top: 40px;}

.marginbottom5 {margin-bottom:5px;}
.marginbottom10 {margin-bottom:10px;}
.marginbottom15 {margin-bottom:15px;}
.marginbottom20 {margin-bottom:20px;}
.marginbottom30 {margin-bottom:30px;}

.marginbottom40, .marginbottom50, .marginbottom60,
.marginbottom70, .marginbottom80, .marginbottom90,
.marginbottom100, .marginbottom110, .marginbottom120 {margin-bottom: 40px;}

@media (min-width: 992px) {
	.paddingchange, .paddingchange2 {padding: 100px;}

	.margintop40 {margin-top:40px;}
	.margintop50 {margin-top:50px;}
	.margintop60 {margin-top:60px;}
	.margintop70 {margin-top:70px;}
	.margintop80 {margin-top:80px;}
	.margintop90 {margin-top:90px;}
	.margintop100 {margin-top:100px;}
	.margintop110 {margin-top:110px;}
	.margintop120 {margin-top:120px;}

	.marginbottom40 {margin-bottom:40px;}
	.marginbottom50 {margin-bottom:50px;}
	.marginbottom60 {margin-bottom:60px;}
	.marginbottom70 {margin-bottom:70px;}
	.marginbottom80 {margin-bottom:80px;}
	.marginbottom90 {margin-bottom:90px;}
	.marginbottom100 {margin-bottom:100px;}
	.marginbottom110 {margin-bottom:110px;}
	.marginbottom120 {margin-bottom:120px;}

}

/*  Navigation  */
.navbar {border-radius:0!important; padding:10px 0;}
.navbar-nav {text-align:center; margin:0!important; position:relative;}
.navbar-nav > li {width:100%; display:inline-block; }
.navbar-nav > li > a {z-index:2; padding:22px 35px!important; color:#000; font-size:15px;}
.navbar-nav > li > a:hover {color:#000!important;font-weight:900;}
.navbar-nav > li.active > a:hover {color:#000!important;font-weight:900;}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {background:transparent!important;}
.navbar-toggle {border:1px solid transparent!important;}
.navbar-collapse.collapse {margin:20px 0; box-shadow:none!important; border:0px!important; background:#fff; width:100%;}
.navbar-header {min-height:38px; float:right;}
.navarrow {display:none;}

@media (min-width: 991px) {
	.navbar-nav > li.active > a:hover {color:#fff!important;}
	.navbar-collapse.collapse {
	    display:block !important;
	    height:auto !important;
	    padding-bottom:0;
	    margin:0;
	    overflow:visible !important;
	    background:transparent;
	    width:auto;
    }
    .navbar-header {display:none;}
	.navbar-nav > li, .navbar-nav > ul > p {
		width: auto;
	}
}



/*  Animate Navigation Expand Button  */
.nav-icon {
  position:absolute;
  right:0;
  width: 25px;
  height: 29px;
  margin: 5px 10px -35px 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
  z-index: 10;
  background: none;
}
.nav-icon span {
  position:absolute;
  width:100%;
  left:0;
  background-color:#000;
  height: 3px;
  border-radius: 3px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}
.nav-icon span:nth-child(1) {top:5px;}
.nav-icon span:nth-child(2),
.nav-icon span:nth-child(3) {top:12px;}
.nav-icon span:nth-child(4) {top:19px;}

.nav-icon.open span:nth-child(1) {
  top: 14px;
  width: 0%;
  left: 50%;
}
.nav-icon.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
.nav-icon.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.nav-icon.open span:nth-child(4) {
  top: 14px;
  width: 0%;
  left: 50%;
}
