/*header styles*/
.plectrum{
	/* filter: drop-shadow(4px 4px #eee); */
	background-image: url('../images/logo-backdrop-eee.svg');
}
@media only screen and (min-width: 1200px) {

	header .top-menu-container ul li a{
	 	color: #000;
	}
	.scrolled .top-menu-container ul li a,
	.scrolled
	{
		color: #000;
	}
}
@media only screen and (max-width: 1000px) {

		#nav-dropdown span{
			color: #000;
		}
}
.hero{
	position: relative;
	height: 100vh;
	min-height: 1000px;
	/* max-height: 1200px; */
	background-color: #fff;
	color: #000;
}

.hero .container{
	height: 100%;
}
.hero .container [class*="col-"]{
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.hero .container .content-container,
.hero .container. .image-container{
	padding-top: calc(var(--header-height));
}

.image-container{
	/*
	background-image: linear-gradient(80deg,transparent 0px 70%,#ff0033 70%);
	*/
	height: 100%;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}
.featured-image{
	position: relative;
	padding: 50px;
}
.featured-image img{

	max-height: 550px;
	max-width: 550px;
	width: 100%;
	height: 100%;
}




.content-container{
	position: relative;
	padding-top: 50px;
}
.hero .content-container .title,
.hero .content-container h1
{
	font-size: 32px;
	font-weight: 600;
	margin-bottom: 25px;
}
.hero .content-container .title span{
	display: inline-block;
	margin: 5px 0;
}

.hero .content-container .subtitle p{
	line-height: 1.5;
	margin-bottom: 25px;
}

.promo-container{
	margin-top: 50px
}

.promo-container .sum1,
.promo-container .sum2{
	width: 50%
}
.promo-container .sum1 .heading{
	display: block;
	font-weight: 600;
	margin-bottom: 4px;
}
.promo-container .sum1 ul li{
	list-style-type: none;
	margin-bottom: 4px;
}
.promo-container .sum2{
	border-left: 2px solid #999;
	padding: 10px 0;
	padding-left: 20px;
}
.promo-container .grey-text{
	color: #999;
	font-size: 14px;
	font-weight: 400;
}
.promo-container .sum2 ul{
	margin: 25px 0;
}
.promo-container .sum2 .starts{
	font-size: 22px;
	display: block;
	font-weight: 300;
}
.promo-container .sum2 .price{
	font-size: 32px;
	font-weight: 600;
	display: block;
	margin-bottom: 12px;
}
.promo-container .sum2 ul li{
	list-style-type: none;
	margin-bottom: 4px;
}

.fa-plus-circle{color: #1ED760;}
.fa-minus-circle{color: #777;}
.fa-check{color: #1ED760;}


.hero .button-container{
	margin-top: 100px;
}
.hero .button-container a{
	color: #000;
	text-decoration: none;
	font-size: 20px;
}
.hero .button-container .price-button{
	color: #fff;
	background-color: #1ED760;
	padding: 15px;
}
.hero .button-container .price-button:hover{
	background-color: #000;
}
.hero .button-container .cover-button{
	padding: 15px 0;
	margin-left: 25px;
	border-bottom: 2px solid #000;
	/*  removing some of the padding so the height of the buttons dont have to be set */
	padding-bottom: 13px;
}
.hero .button-container .cover-button:hover{
	border-color: #999;
	color: #999;
}
.hero .button-container .cover-button::after{
	content: " >";
}

@media only screen and (max-width: 1000px) {
	.hero [class*="col-"] {
	  padding: 20px;
	  height: auto;
	}

	.content-container{
		height: 1080px;
		padding-top: 100px;
	}

	.image-container{
		height: 200px;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.featured-image{
		position: relative;
		padding: 50px;
	}
	.featured-image img{
		max-height: 200px;
		max-width: 200px;
		width: 100%;
		height: 100%;
	}








}


/* legacy */
@media only screen and (min-width: 1200px) {
	/*
	.header .top-menu-container ul li a{
	 	color: #fff;
	}
	.scrolled .top-menu-container ul li a,
	.scrolled{
		color: #000;
	}
	*/
}