/* Generated by Sketch HTML Export */

/* Boiler plate CSS */

.sk-ab {
	position: relative;
	overflow: hidden;
}

.sk-asset {
	position: absolute;
	background-repeat: no-repeat;
}

/* Specific to Desktop */
.sk-ab.sk-Desktop {
	background-color: #666666;
	width: 1024px;
	height: 1024px;
}

.sk-asset.sk-Product-Videos-Container {
	width: 860px;
	height: 426px;
	left: 82px;
	top: 316px;
	/* background-image: url("images/Product Videos Container.svg"); */
}

@media only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
	.sk-asset.sk-Product-Videos-Container {
		/* background-image: url("images/Product Videos Container@2x.svg"); */
		background-size: 860px 426px;
	}
}
@media only screen and (min--moz-device-pixel-ratio: 3),
only screen and (-o-min-device-pixel-ratio: 3/1),
only screen and (-webkit-min-device-pixel-ratio: 3),
only screen and (min-device-pixel-ratio: 3) {
	.sk-asset.sk-Product-Videos-Container {
		/* background-image: url("images/Product Videos Container@3x.svg"); */
		background-size: 860px 426px;
	}
}
.sk-asset.sk-Description {
	width: 422px;
	height: 58px;
	left: 82px;
	top: 208px;
	background-image: url("images/Description.svg");
}

@media only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
	.sk-asset.sk-Description {
		background-image: url("images/Description@2x.svg");
		background-size: 422px 58px;
	}
}
@media only screen and (min--moz-device-pixel-ratio: 3),
only screen and (-o-min-device-pixel-ratio: 3/1),
only screen and (-webkit-min-device-pixel-ratio: 3),
only screen and (min-device-pixel-ratio: 3) {
	.sk-asset.sk-Description {
		background-image: url("images/Description@3x.svg");
		background-size: 422px 58px;
	}
}
.sk-asset.sk-LinkedIn {
	width: 30px;
	height: 30px;
	left: 912px;
	top: 125px;
	/* background-image: url("images/LinkedIn.svg"); */
}

@media only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
	.sk-asset.sk-LinkedIn {
		/* background-image: url("images/LinkedIn@2x.svg"); */
		background-size: 30px 30px;
	}
}
@media only screen and (min--moz-device-pixel-ratio: 3),
only screen and (-o-min-device-pixel-ratio: 3/1),
only screen and (-webkit-min-device-pixel-ratio: 3),
only screen and (min-device-pixel-ratio: 3) {
	.sk-asset.sk-LinkedIn {
		/* background-image: url("images/LinkedIn@3x.svg"); */
		background-size: 30px 30px;
	}
}
.sk-asset.sk-Email {
	width: 33px;
	height: 25px;
	left: 854px;
	top: 128px;
	/* background-image: url("images/Email.svg"); */
}

@media only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
	.sk-asset.sk-Email {
		/* background-image: url("images/Email@2x.svg"); */
		background-size: 33px 25px;
	}
}
@media only screen and (min--moz-device-pixel-ratio: 3),
only screen and (-o-min-device-pixel-ratio: 3/1),
only screen and (-webkit-min-device-pixel-ratio: 3),
only screen and (min-device-pixel-ratio: 3) {
	.sk-asset.sk-Email {
		/* background-image: url("images/Email@3x.svg"); */
		background-size: 33px 25px;
	}
}
.sk-asset.sk-Home {
	width: 30px;
	height: 30px;
	left: 799px;
	top: 125px;
	/* background-image: url("images/Home.svg"); */
}

@media only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
	.sk-asset.sk-Home {
		/* background-image: url("images/Home@2x.svg"); */
		background-size: 30px 30px;
	}
}
@media only screen and (min--moz-device-pixel-ratio: 3),
only screen and (-o-min-device-pixel-ratio: 3/1),
only screen and (-webkit-min-device-pixel-ratio: 3),
only screen and (min-device-pixel-ratio: 3) {
	.sk-asset.sk-Home {
		/* background-image: url("images/Home@3x.svg"); */
		background-size: 30px 30px;
	}
}
.sk-asset.sk-Header {
	width: 426px;
	height: 50px;
	left: 82px;
	top: 115px;
	background-image: url("images/Header.svg");
}

@media only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
	.sk-asset.sk-Header {
		background-image: url("images/Header@2x.svg");
		background-size: 426px 50px;
	}
}
@media only screen and (min--moz-device-pixel-ratio: 3),
only screen and (-o-min-device-pixel-ratio: 3/1),
only screen and (-webkit-min-device-pixel-ratio: 3),
only screen and (min-device-pixel-ratio: 3) {
	.sk-asset.sk-Header {
		background-image: url("images/Header@3x.svg");
		background-size: 426px 50px;
	}
}

<style>
/* Add a background color to the accordion if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
p.accordion.active, p.accordion:hover {
    background-color: #666666;
}

/* Unicode character for "plus" sign (+) */
p.accordion:after {

		content: '\2795';
		font-size: 14px;
		/* color: #777; */
    float: left;
    margin-left: 5px;
		padding-right: 8px;
}

/* Unicode character for "minus" sign (-) */
p.accordion.active:after {
    content: "\2796";
}

/* Style the element that is used for the panel class */

div.panel {
    /* padding: 0 18px; */
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: 0.4s ease-in-out;
    opacity: 0;
    margin-bottom:10px;
}

div.panel.show {
    opacity: 1;
    max-height: 500px; /* Whatever you like, as long as its more than the height of the content (on all screen sizes) */
}
</style>