/*!
 * Title: Boutique carousel (jQuery plugin)
 * Author: Berend de Jong, Frique
 * Author URI: http://frique.me/
 * Version: 1.5.3 (2014-08-28 18:14)
 */

/*
 * FUNCTIONALITY
 * The following block serves to make Boutique function properly. Don't edit or edit carefully.
 */

.boutique{ margin:0; padding:0; position:relative; z-index:1 }
.boutique-frame{ margin:0; padding:0; list-style:none; position:absolute; z-index:1; display:none; border-width:0 }
.boutique-frame-image{ border:0; vertical-align:bottom }
.boutique-frame-title{ cursor:default }
.boutique-frame-text{ display:block; position:absolute; left:0; right:0; bottom:0; text-align:left; cursor:default; margin:0 }
.boutique-frame-link, .boutique-frame-link:hover{ display:block; cursor:default; text-decoration:none; outline:none }
.boutique-frame-image, .boutique-frame, .boutique-frame-link{ -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -o-user-select:none; user-select:none; -webkit-user-drag:none; -moz-user-drag:none; user-drag:none }
.boutique.rtl .boutique-frame-title, .boutique.rtl .boutique-frame-text{ text-align:right }

/*
 * THEMING
 * Edit this section to style the frames, text, alignments etc.
 * If the id of your Boutique instance is different, do a find/replace on #boutique.
 * To overwrite these for a second instance on the same page, copy and prepend the classes with the #id of the other instance, like so: #boutique2 .boutique-frame{}
 */

#boutique,
.boutique{
	display: none; /* Start invisible until the plugin is loaded */
	margin: 0 auto;
}

/* The frames */
.boutique-frame{
	display:none;
}
.boutique-frame a.teasing-1{
	display:none;
	position:absolute;
	top:-46px;
	padding:2px 6px;
	border-radius:0px;
	text-transform:uppercase;
	font-weight:600;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	width:auto;
	cursor:pointer;
}
.boutique-frame a{
	display:block;
	width:135px;
	background-repeat:no-repeat;
	text-align:center;
	background-position:0 55%;
	background-size:inherit;
}
.boutique-frame a img{
	/*width:80% !important;*/
	margin-left: -23px !important;
}
.frame3 a{
	background-position:0 55%;
	width:150px;
	background-size:contain;
	
}
.frame3 a img{
	/*width:100% !important;*/
	margin-left: 0px !important;
}
.frame3 a.teasing-1{
	display:block;
}
.frame3 a.teasing-1 i{
	margin-left:5px;
}
.frame1{
	left:49px !important;
	display:block;
}
.frame2{
	left:230px !important;
	display:block;
}
.frame3{
	left:420px !important;
	display:block;
}
.frame4{
	left:630px !important;
	display:block;
}
.frame5{
	left:814px !important;
	display:block;
}

/* Headers of all frames */
.boutique-frame-title{
	margin: 0;
	line-height: 1.3;
	font-family: sans-serif;
	font-weight: normal;
	color: #222;
}

/* Text area of all frames */
/* Note that this is the complete text layer, including the title header inside */
.boutique-frame-text{
	font-family: Verdana, sans-serif;
	line-height: 1.2;
	color: #444;
	margin: 0;
	padding: 10px 15px 14px;
}

/* The most frontal item (frame 3) */
.boutique .front .boutique-frame-image{
	margin: 6px; /* Determines the gap between image and frame border */
}
.boutique .front .boutique-frame-title{
	font-size: 28px; /* Front frame title header */
}
.boutique .front .boutique-frame-text{
	font-size: 11px; /* Front frame description text */
}

/* The further back items (frame 2 and 4) */
.boutique .behind .boutique-frame-image{ /* Determines the gap between image and frame border */
	margin: 3px;
}
.boutique .behind .boutique-frame-title{ /* Behind frame title headers */
	font-size: 18px;
}
.boutique .behind .boutique-frame-text{ /* Behind frame description text */
	font-size: 9px;
}

/* The furthest back items (frame 1 and 5) */
.boutique .back .boutique-frame-image{ /* Determines the gap between image and frame border */
	margin: 1px;
}
.boutique .back .boutique-frame-title{ /* Back frames title headers */
	font-size: 13px;
}
.boutique .back .boutique-frame-text{ /* Back frame description text */
	font-size: 9px;
}