@import url('https://fonts.googleapis.com/css?family=Raleway|Work+Sans');
.slider {
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	position: relative;
	background-color: #111;
}
.slider .slider-main {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: -100%;
	opacity: 0;
	transition: 500ms all ease-in-out;
}
.slider .slider-main.active { left: 0 !important; opacity: 1; }
.slider .slider-main .slider-preview {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: absolute;
	background-color: #FFF;
	background-position: center center;
	background-size: cover;
	transition: 500ms all ease-in-out;
}

.slider .slider-item {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0,0,0,0.5);
}
.slider .slider-item .point {
	display: block;
	float: left;
	height: 30%;
	background-color: rgba(0,0,0,0.75);
	background-position: center center;
	background-size: cover;
	position: relative;
	opacity: 1;
	top: 70%;
	left: 0;
	transition: 300ms all ease-in-out;
	cursor: pointer;
	color: #FFF;
}
.slider .slider-item .point.active {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 70% !important;
	opacity: 1;
	background-color: rgba(0,0,0,0);
	cursor: default;
}
.slider .slider-item .slider-footer { display: none; list-style: none; margin: 0; padding: 0; overflow: auto; }
.slider .slider-item .slider-footer .slider-footer-item { display: block; float: left; padding: 5px; text-align: center; line-height: 5px; }

.slider .slider-content { padding: 2% 10%; width: 100%; height: 100%; }
.slider .title,
.slider .text {
	font-family: 'Raleway', sans-serif !important;
	/*font-style: italic;*/
	font-weight: normal;
	display: block;
	padding: 5px;
}
.slider .text { font-family: 'Work Sans', sans-serif !important; font-size: 0.9em; }
.slider .title { font-size: 1.2em; font-weight: bold; }
.slider .point .slider-link {
	display: inline-block;
	clear: both;
	background: #3c8dbc;
	color: #FFF;
	border-color: #367fa9;
	padding: 2px 10px;
	margin: 5px;
	text-decoration: none;
	font-size: 80%;
}
.slider .point .slider-link:hover,
.slider .point .slider-link:active,
.slider .point .slider-link.hover { background: #367fa9; }
.slider .point .slider-link.hidden { display: none; }

.slider .point.active .slider-content { padding: 75px 120px 5px 100px; }
.slider .point.active .text { font-size: 1.4em; }
.slider .point.active .title { font-size: 2.6em; font-style: normal; font-weight: bold; }

.slider .slider-main-link {
	display: block;
	width: 100%;
	position: absolute;
	bottom: 30%;
	font-size: 1em;
	line-height: 1em;
	text-align: center;
	padding: 5px;
	background: rgba(255,255,255,0.5);
	color: #333;
	z-index: 9900;
	font-weight: bold;
	text-transform: uppercase;
}
.slider .slider-main-link:hover { background: #FFF; }
.slider .slider-main-link.hidden { display: none; }

/**
* STYLE 4
*/
.slider .style-4 .point { height: 0; overflow: hidden; top: 100%; }
.slider .style-4 .point.active { height: 100% !important; }
.slider .style-4 .slider-main-link { bottom: 0; height: 32px; }
.slider .style-4 .slider-footer {
	display: block;
	position: absolute;
	bottom: 36px;
	left: 10px;
	height: 32px;
	background: rgba(255,255,255,0.5);
}
.slider .style-4 .slider-footer .slider-footer-item {
	margin: 0;
	padding: 10px;
	height: 100%;
	line-height: 100%;
	color: #333;
	border-top: 1px solid #FFF;
	border-bottom: 1px solid #FFF;
	cursor: pointer;
}
.slider .style-4 .slider-footer .slider-footer-item:hover,
.slider .style-4 .slider-footer .slider-footer-item.active { background-color: rgba(0,0,0,0.75); color: #FFF; }

/**
* STYLE 3
*/
.slider .style-3 .slider-content { background-color: rgba(0,0,0,0.5); }
.slider .style-3 .point:not(.active) { border-top: 10px solid #FFF; }

/**
* STYLE 2
*/
.slider .style-2 .slider-preview { display: none; }
.slider .style-2 .point,
.slider .style-2 .point.active {
	position: absolute;
	top: 0;
	width: 100% !important;
	height: 100% !important;
	opacity: 1;
	cursor: default;
}
.slider .style-2 .point .slider-content {
	width: 30% !important;
	height: 30% !important;
	position: absolute;
	top: 50%;
	left: 100px;
	transform: translate(0,-25%);
	padding: 0;
	background-color: rgba(255,255,255,0.5);
	border-radius: 10px;
}
.slider .style-2 .slider-wrap {
	width: 100%;
	height: 80%;
	background-color: rgba(0,0,0,0.5);
	border-radius: 10px 10px 0 0;
	padding: 15px;
}
.slider .style-2 .point { left: -100%; border: none; }
.slider .style-2 .point.active { left: 0; border: none; }
.slider .style-2 .slider-footer {
	position: absolute;
	bottom: 0;
	left: 0;
	display: block;
	height: 20%;
	width: 100%;
	margin-top: -1px !important;
	padding: 0 10px;
	overflow: hidden;
}
.slider .style-2 .slider-footer .slider-footer-item {
	margin: 0;
	padding: 10px;
	height: 100%;
	line-height: 100%;
	color: #333;
	border-top: 1px solid #FFF;
	border-bottom: 1px solid #FFF;
	cursor: pointer;
}
.slider .style-2 .slider-footer .slider-footer-item:hover,
.slider .style-2 .slider-footer .slider-footer-item.active { background-color: rgba(0,0,0,0.75); color: #FFF; }
.slider .style-2 .title,
.slider .style-2 .text,
.slider .style-2 .point.active .title,
.slider .style-2 .point.active .text {
	font-style: normal;
	font-weight: normal;
	display: block;
	padding: 5px;
}
.slider .style-2 .text,
.slider .style-2 .point.active .text { font-size: 1em; }
.slider .style-2 .title,
.slider .style-2 .point.active .title { font-size: 1.4em; }

.slider .style-2 .slider-footer .slider-main-link {
	display: inline-block;
	width: 100%;
	z-index: 10001;
	position: relative;
	left: 0;
	top: 0;
	bottom: 0;
	float: right;
	font-size: 1em;
	line-height: 1em;
	text-align: center;
	font-weight: bold;
	text-transform: uppercase;
	width: 100px;
	background: #3c8dbc;
	color: #FFF;
	border-color: #367fa9;
	padding: 5px 10px;
	margin: 5px;
	text-decoration: none;
	font-size: 80%;
}
.slider .style-2 .slider-footer .slider-main-link:hover,
.slider .style-2 .slider-footer .slider-main-link:active { background: #367fa9; }

/**
* MAIN NAVIGATION
*/
.slider ul.slider-main-nav {
	position: absolute;
	right: 0;
	top: 45%;
	display: block;
	width: auto;
	transform: translateY(-50%);
	margin: 0;
	padding: 0 25px 0 0;
}
.slider ul.slider-main-nav li,
.slider ul.slider-main-nav li:active {
	list-style-type: none;
	display: block;
	float: right;
	font-size: 1em;
	text-align: right;
	line-height: 1em;
	padding: 10px 0;
	margin: 0;
	cursor: pointer;
	width: 100%;
	font-weight: bold;
	color: #FFF;
}
.slider ul.slider-main-nav li span { font-family: 'Raleway', sans-serif !important; border-bottom: 1px solid transparent; transition: none !important; }
.slider ul.slider-main-nav li:hover span { border-color: #C02026; }
.slider ul.slider-main-nav li:after {
	content: " ";
	display: inline-block;
	width: 10px;
	height: 10px;
	margin: 0 0 0 5px;
	background-color: #FFF;
	border-radius: 50%;
}
.slider ul.slider-main-nav li.active:after {
	background-color: #C02026;
}

/**
* MEDIA QUERY
*/
@media (max-width: 767px) {
	.slider .text { font-size: 0.6em; }
	.slider .title { font-size: 0.8em; }
	.slider .point .slider-link { font-size: 60%; padding: 2px 4px; }
	.slider .point.active .text { font-size: 0.8em; }
	.slider .point.active .title { font-size: 1em; }	
	.slider .point.active .slider-content { padding: 50% 120px 5px 10px; }
		
	/**
	* STYLE 3
	*/
	.slider .style-3 .point:not(.active) .text { display: none; }
	.slider .style-3 .point:not(.active) .title { font-size: 0.8em; }
	
	/**
	* STYLE 2
	*/
	.slider .style-2 .point .slider-content { left: 10px; top: auto; bottom: 10px; padding: 0; border-radius: 2px; width: 80% !important; }
	.slider .style-2 .slider-wrap { padding: 5px;  border-radius: 2px 2px 0 0; }
	.slider .style-2 .slider-footer { padding: -2px 2px 0 2px; }
	.slider .style-2 .slider-footer .slider-footer-item { padding: 2px 10px; }
	.slider .style-2 .title,
	.slider .style-2 .text,
	.slider .style-2 .point.active .title,
	.slider .style-2 .point.active .text { padding: 2px; }
	.slider .style-2 .text,
	.slider .style-2 .point.active .text { font-size: 0.8em; }
	.slider .style-2 .title,
	.slider .style-2 .point.active .title { font-size: 1em; }
	.slider .style-2 .slider-footer .slider-main-link {
		font-size: 0.8em;
		line-height: 0.8em;
		padding: 5px;
		width: 20px;
	}
	
	.slider ul.slider-main-nav { border: 1px solid red; width: 50%; }
	.slider ul.slider-main-nav li { font-size: 0.65em; line-height: 0.65em; }
}