/* Styleguide
--------------------------*/
	.styleguide {
		background: #fff;
		overflow: hidden;
	}

	.styleguide .ui.component .slim.wrapper,
	.styleguide .ui.component .slick-slider.wrapper,
	.styleguide .ui.component .subContent .wrapper {
		border: 0;
	}

	.ui.guides {
		position: fixed;
		height: 100%;
		width: 100%;
		left: 0;
		top: 0;
		pointer-events: none;
		z-index: 10;
	}

	.ui.guides .wrapper {
		position: relative;
		height: 100%;
	}

	.ui.guides .horizontal {
		background: repeating-linear-gradient( 
			180deg, 
			transparent, 
			transparent 5px, 
			rgba(39, 255, 239, 0.5), 
			rgba(39, 255, 239, 0.5) 6px 
		);
		background-size: 6px 6px;
		height: 100%;
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		display: none;
	}

	.ui.guides .verticalColumns {
		background: repeating-linear-gradient( 
			90deg,
			transparent,
			transparent 8px, 
			rgba(184, 0, 0, 0.20) 8px, 
			rgba(184, 0, 0, 0.20) 92px, 
			transparent 92px,
			transparent 100px 
		);
		background-size: 100px;
		height: 100%;
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		display: none;
	}

	.ui.guides .verticalGuides {
		background: repeating-linear-gradient( 
			90deg,
			rgba(39, 255, 239, 1) 0px, 
			rgba(39, 255, 239, 1) 1px,
			transparent 1px,
			transparent 8px, 
			rgba(39, 255, 239, 1) 8px, 
			rgba(39, 255, 239, 1) 9px, 
			transparent 9px,
			transparent 91px,
			rgba(39, 255, 239, 1) 91px, 
			rgba(39, 255, 239, 1) 92px,
			transparent 92px,
			transparent 99px,
			rgba(39, 255, 239, 1) 99px, 
			rgba(39, 255, 239, 1) 100px
		);
		background-size: 100px;
		height: 100%;
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		display: none;
	}

	.ui.guides .verticalColumns.show,
	.ui.guides .verticalGuides.show,
	.ui.guides .horizontal.show {
		display: block;
	}

	.ui.styleguide.navigation {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 35px;
		margin: 0;
		background: #fff;
		border-bottom: 1px solid #eee;
		box-shadow: 0 6px 50px 0 rgba(0,0,0,.19);
		z-index: 100;
	}

	.ui.styleguide.navigation .list {
		padding: 0;
		margin: 0;
		font-size: 0;
	}

	.ui.styleguide.navigation .list.top {
		float: left;
	}

	.ui.styleguide.navigation .list .item {
		list-style-type: none;
		font-family: 'Montserrat', sans-serif;
		text-transform: uppercase;
		font-size: 12px;
		position: relative;
		display: inline-block;
	}

	.ui.styleguide.navigation .list .link {
		display: block;
		text-decoration: none;
		padding: 10px;
		color: #1a1a1a;
		transition: 0.6s all;
	}

	.ui.styleguide.navigation .resizeWindow {
		float: left;
	}

	.ui.styleguide.navigation .columnsAndGrids {
		float: left;
		margin-left: 130px;
	}

	.ui.wrapper.resizable {
		width: 100%;
		margin: 35px 0 0 0 !important;
	}

	.styleguideIframe {
		width: 100%;
		height: calc(100% - 35px);
		border: 0;
		overflow: hidden;
	}

	.ui.styleguide.navigation .dropdownList {
		position: absolute;
		top: 35;
		left: 0;
		background: #ddd;
		width: 250px;
		display: none;
		border: 1px solid #ddd;
		border-top: 0;
	}

	.ui.styleguide.navigation .dropdownList .link {
		color: #1a1a1a;
	}

	.ui.styleguide.navigation .dropdownList .item {
		display: block;
	}

	.styleguide.component .header {
		position: relative;
	}

	.styleguide.component .header .modules-icon {
		float: right;
	}

	.styleguide.component .header .modules-icon .replacement {
		display: block;
		text-transform: uppercase;
		text-align: center;
		height: 20px;
		background: #23566C url('../images/placeholders/module-icon.png') center 15px no-repeat;
		background-size: 20px 20px;
		padding: 45px 20px 5px;
		margin: 0;
		transition: all 0.6s;
		cursor: pointer;
		font-size: 12px;
		font-weight: bold;
		font-family: 'Montserrat', sans-serif;
		outline: 0;
	}

	.styleguide.component .header .modules-icon .list {
		margin: 0;
		padding: 0;
		width: 100%;
		top: 70px;
		right: 0;
		position: absolute;
		z-index: 200;
		cursor: default;
		display: none;
		border-top: 8px solid #D9DBDB;
	}

	.styleguide.component .header .modules-icon .item {
		list-style-type: none;
		border: 1px solid #E4E4E4;
		border-top: 0;
		background: rgba(242, 242, 242, 0.93);
		color: #222;
		font-family: "Georgia";
		font-style: italic;
		transition: all 0.6s;
	}

	.styleguide.component .componentOpen {
		color: #fff;
		display: block;
		background: #000;
		transition: all 0.6s;
	}

	.styleguide.component .componentOpen.active {
		background: rgb(46, 147, 171);
	}

	.styleguide > .header .heading {
		margin: 0 !important;
		font-weight: 100;
		font-size: 20px;
		letter-spacing: 1px;
		font-style: italic;
		font-family: "Georgia";
		padding: 24px 0;
		float: left;
		position: relative;
	}

	.styleguide.component > .header .componentOpen.active .heading:after {
		transform: rotate(180deg);
	}

	.styleguide.component .header .modules-icon a {
		padding: 15px 10px;
		transition: all 0.6s;
	}

	.styleguide.component .header .modules-icon .jira-link {
		color: #197EA9;
		display: inline-block;
		float: right;
		text-indent: -9999px;
		background: url('../images/placeholders/jira-icon.png') center center no-repeat;
		background-size: 30px 30px;
		width: 30px;
		padding: 15px 0px;
		margin-right: 10px;
	}

	.component-1,
	.component-2,
	.component-3,
	.component-4,
	.component-5,
	.component-6 {
		display: none;
	}

	@media (max-width: $tabletBreakpoint){
		.ui.guides .verticalColumns {
			background: repeating-linear-gradient( 
				90deg,
				transparent,
				transparent 8%, 
				rgba(184, 0, 0, 0.20) 8%, 
				rgba(184, 0, 0, 0.20) 92%, 
				transparent 92%,
				transparent 100%
			);
			background-size: 8.33333%;
			height: 100%;
			width: 100%;
			position: absolute;
			top: 0;
			display: none;
		}

		.ui.guides .verticalGuides {
			background: repeating-linear-gradient( 
				90deg,
				rgba(39, 255, 239, 1) 0px, 
				rgba(39, 255, 239, 1) 1%,
				transparent 1%,
				transparent 8%, 
				rgba(39, 255, 239, 1) 8%, 
				rgba(39, 255, 239, 1) 9%, 
				transparent 9%,
				transparent 91%,
				rgba(39, 255, 239, 1) 91%, 
				rgba(39, 255, 239, 1) 92%,
				transparent 92%,
				transparent 99%,
				rgba(39, 255, 239, 1) 99%, 
				rgba(39, 255, 239, 1) 100%
			);
			background-size: 8.33333%;
			height: 100%;
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
			display: none;
		}
	}