/* 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-Software-Guides-Container {
	background-color: #666666;
	width: 860px;
	height: 667px;
	left: 82px;
	top: 316px;
	/* background-image: url("images/Software Guides 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-Software-Guides-Container {
		/* background-image: url("images/Software Guides Container@2x.svg"); */
		background-size: 860px 765px;
	}
}
@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-Software-Guides-Container {
		/* background-image: url("images/Software Guides Container@3x.svg"); */
		background-size: 860px 765px;
	}
}

.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-Description {
	width: 418px;
	height: 54px;
	left: 82px;
	top: 212px;
	/* 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: 418px 54px;
	}
}
@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: 418px 54px;
	}
}

.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-Header {
	width: 444px;
	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: 444px 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: 444px 50px;
	}
}

<style>
/* Style the element that is used to open and close the accordion class */
p.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
    margin-bottom:10px;
}

/* 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>