/* Fonts */
@import url("https://use.typekit.net/hsr7unj.css");

/* 
Co Headline light

font-family: co-headline, sans-serif;
font-weight: 300;

Co Headline Bold

font-family: co-headline, sans-serif;
font-weight: 700;


Co Text light

font-family: co-text, sans-serif;
font-weight: 300;


Co Text Bold

font-family: co-text, sans-serif;
font-weight: 700;
*/


* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	outline: none;
	text-rendering: optimizeLegibility !important;
	-webkit-font-smoothing: antialiased !important;
}

body {
	background: none;
}

#stage {
	width: 100%;
	height: 286px;
	position: absolute;
	overflow: hidden;
	background:#F3F3FB;
}


.slick-arrow {
	display: none !important;
}

.header {
	position: absolute;
	top: 0;
	left: 0;
	height: 27px;
	width: 100%;
}

.balk1 {
	position: absolute;
	height: 13px;
	width: 100%;
	top: 0;
	left: 0;
	background-color: #232D3D;
}

.balk2 {
	position: absolute;
	height: 8px;
	width: 100%;
	top: 13px;
	left: 0;
	background-color: #B2DBBF;
}

.head {
	position: absolute;
	top: 30px;
	left: 12px;
	text-transform: uppercase;
	font-family: "co-headline", sans-serif;
	font-weight: 700;
	font-size: .875rem;
	line-height: .875rem;
	color:  #232D3D;
}

.copy {
	position: absolute;
    width: 123px;
    left: 9px;
    bottom: 12px;
    font-family: "co-headline";
	font-weight: 400;
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 15px;
    text-transform: capitalize;
    color: #FFFFFF;
	transition:all .15s ease-in-out;
}

.cardContainer {
	position: absolute;
	width: calc(100% - 5px);
	height: calc(100% - 50px);
	left: 3px;
	top: 50px;
	overflow: hidden;
}
.cardsSlider {
	position: absolute;
	left: 2px;
	transition:all .3s ease-in-out;
	display:flex
}

.card {
    height: 203px;
    width: 139px;
	position: relative;
	transition:all .3s ease-in-out;
    cursor: pointer;
    border-radius: 4px;
    margin: 0 6px;
	display:inline-block;
	filter: drop-shadow(0px 3px 3px rgba(83, 83, 83, 0.2));
}

.topic {
    position: absolute;
    width: 87px;
    height: 9px;
    left: 9px;
    top: 7px;
    font-family: "co-headline";
    font-style: normal;
    font-weight: 700;
    font-size: 7px;
    line-height: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #FFFFFF;
}

.image_container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
}



.bigSlide {
    width: 278px;
}

.nextSlide {
	margin-left: 147px;
}


.bigSlide .copy {
	font-size: 15px;
	line-height: 19px;
	width:258px;
}

.gradient {
	position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: linear-gradient(360deg, rgba(22, 22, 22, 0.34) 16.76%, rgba(196, 196, 196, 0) 50.52%);
}

.slick-list {
	position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
    padding: 0 12px;
	height:100%;
}

.logo {
	position: absolute;
	width: 120px;
	left: 470px;
	top: 261px;
}

.arrowsVert {
	display: none;
	position: absolute;
	left: calc(50% - 10px);
	width: 20px;
	height: 20px;
	cursor: pointer;
}

.arrowUp {
	top: 77px;
}

.arrowDown {
	top: 422px;
}

main {
    position: absolute;
    width: 100%;
    max-width: 600px;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
}



.arrows {
	display: block;
	position: absolute;
	top: 137px;
	width: 20px;
	height: 20px;
}

.arrowLeft {
	left: 0px;
	cursor: pointer;
	
}

.left {
	position: absolute;
	height: 18px;
	top: 1px;
	left: 5px;
}

.arrowRight {
	right: -3px;
	cursor: pointer;
}

.right {
	position: absolute;
	height: 18px;
	top: 1px;
	right: 5px;
}

@media (max-width:599px ) {
	#stage {
		width: 100%;
		height: 492px;
	}
	.card {
		height:100px;
		width:auto;
		margin:6px 12px;
	}
	.bigSlide {
		height:178px;
		width:auto
	}
	.cardsSlider {
		flex-flow: column;
		width: 100%;
		left:-1px;
	}
	.logo {
		right: 12px;
		left:auto;
		top: 466px;
	}
	.cardContainer {
		height:calc(100% - 73px);
		width:100%;
	}
	.copy {
		bottom:7px;
	}
	.arrows{
		display:none;
	}
	.arrowDown {
		top: 457px;
		display: block;
	}
	.topic {
		top:6px;
	}
	.gradient {
		background:linear-gradient(90deg, rgba(22, 22, 22, 0.34) 16.76%, rgba(196, 196, 196, 0) 50.52%);
	}
}