/*

Read the comments, they tell you what you change when you change ;)
 
*/
/* Reset */
.fps-container, .fps-container * {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	list-style: none;
	list-style-type: none;
	max-width: 100%;
	outline: none;
	line-height: 100%;
}


.fps-container {
	overflow: hidden;
}

.fps-fullscreen-mode {
	width: 100% !important;
	height: 100% !important;
}

.fps-main-wrapper {
	width: 100%;
	height: 300px;
	position: relative;
	overflow: hidden;
	border-top-left-radius:30px;
	border-top-right-radius:30px;
		border-bottom-left-radius:30px;
	border-bottom-right-radius:30px;
}

.fps-project-list {
	position: relative;
	height: 100%;
	cursor: pointer;
	max-width: none !important;
	list-style: none !important;
	list-style-type: none !important;
}

.fps-drag-active {
	cursor: move;
}

.fps-project-list li {
	position: absolute;
	height: 100%;
	max-width: 100%;
	overflow: hidden;
	list-style: none !important;
	list-style-type: none !important;
}

/* The media container that holds the images of a project */
.fps-project-list > li > .fps-media-container {
	position: relative;
	width: 100%;
	height: 100%;
	top: 0;
}

.fps-media-container > img, .fps-media-container > iframe {
	max-width: none;
	height: 100%;
	position: absolute;
}

.fps-project-list li > .fps-list-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.fps-project-list > li > h1 {
	font-family: 'calibri', cursive; /* Set here the font for the project title */
	font-size: 22px; /* The font size for the title */
	color: #fff; /* The text color for the title */
	font-weight: bold;
	position: absolute;
	top: 50%;
	width:100%;
	max-width: 100%;
	text-align: center;
	display: inline-block;
}

.fps-project-list > li > .fps-project-description {
	background-color: #fff; /* The background color for the description element - non-css3 browsers */
	background: rgba(255, 255, 255, 0.8); /* The background color for the description element */
	position: absolute;
	max-width: 100%;
	padding: 20px;
	display: none;
}

.fps-project-list li .fps-preloader {
	background-image: url(../images/fancyPortfolioSlider/preloader.gif);
	width: 32px;
	height: 32px;
	margin-left: -16px;
	margin-top: -16px;
	top: 50%;
	left: 50%;
	position: absolute;
	z-index: 1200;
}

.fps-project-list li .fps-video-play {
	background-color: #fff; /* The background color for the video play element - non-css3 browsers */
	background-color: rgba(255, 255, 255, 0.5); /* The background color for the video play element  */
	background-image: url(../images/fancyPortfolioSlider/play.png);
	background-position: center center;
	background-repeat: no-repeat;
	display: none;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 80px;
	height: 80px;
	margin-left: -40px;
	margin-top: -80px;
	cursor: pointer;
	z-index: 100;
	-webkit-border-radius: 5px;
	border-radius: 5px; 
}


/* The social buttons - facebook share, tweet, pin it */
.fps-social-buttons {
	background-color: #fff; /* The background color for the social buttons - non-css3 browsers */
	background-color: rgba(255, 255, 255, 0.8); /* The background color for the social buttons */
	position: absolute;
	top: 0;
	left: -120px;
	height: 40px;
	z-index: 1000;
}

.fps-social-buttons > a {
	width: 40px;
	height: 100%;
	display: inline-block;
	background-repeat: no-repeat;
}

.fps-social-buttons > a.fps-facebook {
	background-image: url(../images/fancyPortfolioSlider/facebook.png);
	background-position: center center;
}

.fps-social-buttons > a.fps-twitter{
	background-image: url(../images/fancyPortfolioSlider/twitter.png);
	background-position: center center;
}

.fps-social-buttons > a.fps-pinterest {
	background-image: url(../images/fancyPortfolioSlider/pinterest.png);
	background-position: center center;
}


/* The navigation to scroll through the coverflow */
.fps-navigation {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 40px;
	z-index: 1000;
}

.fps-navigation > span {
	background-color: #fff; /* The background color for the navigation to scroll the coverflow - non-css3 browsers */
	background-color: rgba(255, 255, 255, 0.8); /* The background color for the navigation to scroll the coverflow */
	background-repeat: no-repeat;
	display: inline-block;
	width: 40px;
	height: 100%;
	cursor: pointer;
}

.fps-navigation > span.fps-previous-button {
	background-image: url(../images/fancyPortfolioSlider/previous.png);
	background-position: center center;
}

.fps-navigation > span.fps-next-button {
	background-image: url(../images/fancyPortfolioSlider/next.png);
	background-position: center center;
}

.fps-navigation > span.fps-fullscreen {
	background-image: url(../images/fancyPortfolioSlider/fullscreen.png);
	background-position: center center;
}

.fps-navigation > span.fps-normalscreen {
	background-image: url(../images/fancyPortfolioSlider/normalscreen.png);
	background-position: center center;
}

/* The navigation to scroll through the the project media */
.fps-project-navigation {
	background-color: #fff; /* The background color for the navigation to scroll between the media in a project - non-css3 browsers */
	background-color: rgba(255, 255, 255, 0.8); /* The background color for the navigation to scroll between the media in a project */
	position: absolute;
	top: -60px;
	right: 0;
	height: 40px;
	z-index: 1000;
}

.fps-project-navigation > span {
	width: 40px;
	line-height: 40px;
	height: 100%;
	display: block;
	float: left;
	text-align: center;
	font-size: 16px;
	cursor: pointer;
}

.fps-project-navigation > span.fps-subproject-counter {
	display: none;
	cursor: auto;
}

.fps-project-navigation .fps-previous-project {
	display: none;
	background: url(../images/fancyPortfolioSlider/previous.png) no-repeat center center;
}

.fps-project-navigation .fps-next-project {
	display: none;
	background: url(../images/fancyPortfolioSlider/next.png) no-repeat center center;
}

.fps-project-navigation .fps-close-project {	
	background: url(../images/fancyPortfolioSlider/close.png) no-repeat center center;
}

/* The hover transition for all buttons */
.fps-navigation > span:hover, .fps-project-navigation > span:hover, .fps-social-buttons > a:hover, span.fps-close-video:hover {
	background-color: #fff;
	-webkit-transition: background 500ms ;
	-moz-transition: background 500ms ;
	-ms-transition: background 500ms ;
	-o-transition: background 500ms ;
	transition: background 500ms ;
}

.fps-main-wrapper .fps-video {
	background: #000;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1100;
	display: none;	
}

.fps-video .fps-video-container {
	width: 100%;
	margin-top: 40px;
}

.fps-video .fps-close-video {
	background-color: #fff; /* The background color for the close video button - non-css3 browsers */
	background-color: rgba(255, 255, 255, 0.8); /* The background color for the close video button */
	background-image: url(../images/fancyPortfolioSlider/close.png);
	background-position: center center;
	background-repeat: no-repeat;
	position: absolute;
	top: 0;
	right: 0;
	width: 40px;
	height: 40px;
	cursor: pointer;
	z-index: 10;
}

/* CSS for the project description */
.fps-project-description {
	line-height: 18px;
	font-family: Helvetica;
}

.fps-project-description h3 {
	font: 1.3em Arial, Tahoma, Verdana;
	margin: 0 0 10px 0;
}


.fps-project-description i {
	font-style: italic;
}

.fps-project-description strong {
	font-weight: bold;
}



/* CSS for an active project */
.fps-project-list > li.fps-active-project {
	cursor: auto;
}

.fps-project-list > li.fps-active-project > .fps-media-container > img {
	min-width: 100%;
}


/* Smartphones (portrait and landscape)  */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {

	.fps-container {
		height: 210px !important;
	}
	
	.fps-project-list > li > h1 {
		font-size: 30px;
		left: 0 !important;
		margin:  0 !important;
		width: 100% !important;
	}
	
	.fps-project-list > li > h1 {
	font-family: 'calibri', cursive; /* Set here the font for the project title */
	font-size: 13px; /* The font size for the title */
	color: #fff; /* The text color for the title */
	font-weight: bold;
	position: absolute;
	top: 50%;
	width:100%;
	max-width: 100%;
	text-align: center;
	display: inline-block;
}
	
	
	.fps-project-list > li > .fps-project-description {
	background-color: #fff; /* The background color for the description element - non-css3 browsers */
	background: rgba(255, 255, 255, 0.8); /* The background color for the description element */
z-index:-500;
	max-width: 100%;
	padding: 20px;
	display: none;
}
	
	
	
	
	
	
}



/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 780px) {

	.fps-container {
		height: 210px !important;
		margin-bottom:40px
		
	}

.fps-project-list > li > h1 {
	font-family: 'calibri', cursive; /* Set here the font for the project title */
	font-size: 15px; /* The font size for the title */
	color: #fff; /* The text color for the title */
	font-weight: bold;
	position: absolute;
	top: 50%;
	width:100%;
	max-width: 100%;
	text-align: center;
	display: inline-block;
}

.fps-project-list > li > .fps-project-description {
	background-color: #fff; /* The background color for the description element - non-css3 browsers */
	background: rgba(255, 255, 255, 0.8); /* The background color for the description element */
z-index:-500;
	max-width: 100%;
	padding: 20px;
	display: none;
}
	
	
}



/* Helper */
.fps-clearfix:before, .fps-clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.fps-clearfix:after { clear: both; }
.fps-clearfix { zoom: 1; }
.fps-clear {clear: both;}
.fps-hidden {display: none;}