/**********************
	-	RESET	-
************************/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	
}


/***********************
	-	BASICS 	-
***********************/
html {
	overflow-x:hidden;	
	padding: 0 !important;
	margin:0px !important;
}


ol, ul {  list-style: none; }

a{	text-decoration:none;}



  /*********************************************************************************************
		-	SET THE SCREEN SIZES FOR THE BANNER IF YOU WISH TO MAKE THE BANNER RESOPONSIVE 	-	
  **********************************************************************************************/
  
  /*	-	THE BANNER CONTAINER (Padding, Shadow, Border etc. )	-	*/

  .bannercontainer {	
		padding:5px;		
		background-color:#fff;
		width:890px;	
		position:relative;
		position:relative;	
		margin-left:auto;
		margin-right:auto;	
	
	}
 
  .banner{		
		width:890px;
		height:490px;
		position:relative;
		overflow:hidden;			
   }
   
   
    .bannercontainer-simple {	
		padding:5px;		
		background-color:#fff;
		width:890px;	
		position:relative;
		position:relative;	
		margin-left:auto;
		margin-right:auto;	
	
	}
 
  .banner-simple{		
		width:890px;
		height:490px;
		position:relative;
		overflow:hidden;			
   }

 .fullwidthbanner-container{
	width:100% !important;		
	position:relative;
	padding:0;		
	max-height:450px !important;
	overflow:hidden;
} 

.fullwidthbanner-container .fullwidthabnner	{
	width:100% !important;
	max-height:450px !important;
	position:relative;	
}
   
   

   @media only screen and (min-width: 768px) and (max-width: 959px) {		
		
 		  .banner, .bannercontainer			{	width:750px; height:412px;}	
		
		  
		 
		  
   }
  
   @media only screen and (min-width: 480px) and (max-width: 767px) {
		   .banner, .bannercontainer		{	width:470px; height:258px;	}		   		
		
		    
			
		   
   }
   
   @media only screen and (min-width: 0px) and (max-width: 479px) {
			.banner, .bannercontainer		{	width:310px;height:170px;	}						
			
			 
			 
			 
   }


   
   
   
   
   
   
   
   
   

/**************************************************************
	DEMO STYLES - ONLY FOR THE PREVIEW ON CODECANYON 
****************************************************************/	
.titlecontainer{
	background-color:#444;
	width:100%;
	margin-bottom:50px;
}

.centered{
	width:890px;
	padding:30px 0;
	margin:auto;
}

.buynow {	
	background:url(../images/tiles/buynow.png) no-repeat top;
	width:176px;
	height:50px;	
	float:right;
	margin-top:5px;
	cursor:pointer;
}

.buynow:hover {	background-position:bottom;}

.title_left	{	float:left;}


.subtitle { 			
			color:#999;
			
			font-size:11px;
			padding:0px 0px 0px 0px;
		}

.configurator	{	width:900px;
					margin-left:auto;
					margin-right:auto;
					background-color:#ddd;
					border-radius: 5px;
					-moz-border-radius: 5px;
					-webkit-border-radius: 5px;
					overflow:hidden;
					margin-top:50px;
				}
.configtitle {
				width:860px;
				height:36px;								
				background-color:#aaa;
				padding:20px 20px 10px;				
		}
		
.cti			{	width:388px;
					height:36px;
				}

		
.optiontitle	{
					
					font-size:14px;
					line-height:22px;
					color:#444;
					text-shadow:0px 0px 1px #fff;
					font-weight:bold;
					margin-bottom:20px;
				}
.inside			{	padding:20px;}


.t_mixed		{	background:url(../images/tiles/transition_mixed.png) no-repeat 5px 5px}				
.t_box1		{	background:url(../images/tiles/transition_boxes.png) no-repeat 5px 5px}				
.t_box2		{	background:url(../images/tiles/transition_boxes.png) no-repeat 5px 5px}				
.t_szh		{	background:url(../images/tiles/transition_slotzoomhorizontal.png) no-repeat 5px 5px}				
.t_ssh		{	background:url(../images/tiles/transition_slotslidehorizontal.png) no-repeat 5px 5px}				
.t_sfh		{	background:url(../images/tiles/transition_slotfadehorizontal.png) no-repeat 5px 5px}				
.t_szv		{	background:url(../images/tiles/transition_slotzoomvertical.png) no-repeat 5px 5px}				
.t_ssv		{	background:url(../images/tiles/transition_slotslidevertical.png) no-repeat 5px 5px}				
.t_sfv		{	background:url(../images/tiles/transition_slotfadevertical.png) no-repeat 5px 5px}				
.t_c1		{	background:url(../images/tiles/transition_curtainone.png) no-repeat 5px 5px}				
.t_c2		{	background:url(../images/tiles/transition_curtaintwo.png) no-repeat 5px 5px}				
.t_c3		{	background:url(../images/tiles/transition_curtainthree.png) no-repeat 5px 5px}				
.t_sl		{	background:url(../images/tiles/transition_slideleft.png) no-repeat 5px 5px}				
.t_sr		{	background:url(../images/tiles/transition_slideright.png) no-repeat 5px 5px}				
.t_su		{	background:url(../images/tiles/transition_slideup.png) no-repeat 5px 5px}				
.t_sd		{	background:url(../images/tiles/transition_slidedown.png) no-repeat 5px 5px}				
.t_sf		{	background:url(../images/tiles/transition_fade.png) no-repeat 5px 5px}				


.transition		{	width:320px; 
					height:20px; 
					background-color:#eee;	
					border:1px solid #d0d0d0;			
					border-radius: 5px;
					-moz-border-radius: 5px;
					-webkit-border-radius: 5px;
					
					font-size:14px;
					line-height:22px;
					color:#FF7200;
					text-shadow:0px 0px 1px #fff;
					font-weight:bold;
					padding:10px 0px 10px 90px;
					margin-bottom:5px;
					cursor:pointer;
				}

.transition:hover,
.transition.selected	{
						color:#fff;
						background-color:#aaa;
						text-shadow:0px 0px 0px #000;				
						border:1px solid #aaa;						
				}		
				
.radio					{	background:url(../images/tiles/radio.png) no-repeat top left;
							
							font-size:14px;
							height:19px;
							color:#777;
							text-shadow:0px 0px 1px #fff;
							padding: 0px 0px 0px 27px; 
							margin-right:20px;
							float:left;	
							cursor:pointer;
						}			
.clear					{	clear:both;}						
						
.radio.selected, .radio:hover			{	background-position: bottom left}			

.configurator_left	{	width:410px; float:left;}				
.configurator_right	{	width:410px; float:right;}	


.dragline	{	position:relative; background:url(../images/tiles/dragsliderbg.png) no-repeat; width:410px; height:20px;
				
				font-size:14px;
				height:19px;
				color:#777;
				text-shadow:0px 0px 1px #fff;
			}
.dragger	{	cursor:pointer;position:absolute; left:50%; background:url(../images/tiles/dragnotch.png) no-repeat; width:7px; height:22px; margin-left:-3px;}

.nonclickable	{	opacity:0.5; cursor:default;}
.nonclickable:hover	{	background-position:top left;}


.plugoptions 	{	
					overflow:hidden;
					width:390px; 					
					background-color:#eee;	
					border:1px solid #d0d0d0;			
					border-radius: 5px;
					-moz-border-radius: 5px;
					-webkit-border-radius: 5px;
					
					font-size:12px;
					line-height:22px;
					color:#444;
					text-shadow:0px 0px 1px #fff;
					font-weight:bold;
					padding:10px;
					margin-bottom:40px;					
				}
.accordion			{	cursor:pointer; background:url(../images/tiles/accordionswitch.png) no-repeat top left; width:17px; height:19px;	float:right;}		
.accordion:hover	{ background-position:bottom left;}
.accordion.selected	{ background-position:top right;}
.accordion.selected:hover	{ background-position:bottom right;}
			
			
.previewselector_container	{	 height:42px;width:332px; margin:80px auto 20px;}				
.previewselector	{	float:left; background:url(../images/tiles/selectpreview.png) no-repeat 0px -42px; width:125px; height:42px;}

.previewselector.zweite	{	background-position:-125px 0px; width:110px;}
.previewselector.dritte	{	background-position:-235px 0px; width:96px;}

.previewselector.selected, .previewselector:hover	{	background-position:left top;}

.previewselector.zweite:hover, .previewselector.zweite.selected 	{	background-position:-125px -42px; width:110px;}
.previewselector.dritte:hover, .previewselector.dritte.selected	{	background-position:-235px -84px; width:96px;}

  @media only screen and (min-width: 768px) and (max-width: 959px) {		
 		 .centered { 	width:750px;}		  	
		 .subtitle	{	clear:both !important; padding:0 !important;}
		 .centered	{	padding:30px 0px;}

		  
   }
  
   @media only screen and (min-width: 480px) and (max-width: 767px) {
		     .centered		 { 	width:480px;}	
			 .subtitle		{	clear:both !important; padding:0 !important;}
			 .centered		{	padding:30px 0px;}
			 .buynow		{	float:left; margin-top:20px;}
			 .configurator, 
			 .configtitle	{	width:480px;}
			 .configurator_right	{	float:left;}
			 .configurator_left		{	}

   }
   
   @media only screen and (min-width: 0px) and (max-width: 479px) {
			 .centered		{ 	width: 320px;}	
			 .cti			{	width: 280px;}
			  .subtitle		{	clear:both !important; padding:0 !important;}			
			  .centered		{	padding:30px 0px;}
			  .buynow		{	float:left; margin-top:20px;}
			  .configurator, 
			  .configtitle	{	width:320px;}
			  .configurator_right	{	float:left; width:300px;}
			  .configurator_left	{	width:280px;}
			  .transition	{	width:190px;}
			  .plugoptions 	{	width:260px; font-size:10px;}
			  .breakmenow	{	clear:both; margin-top:30px;}
			  .dragline		{	width:260px;}
			  .logo			{	width:320px; overflow:hidden; }
			  .select_navigationtype	{	display:none;}
			  .select_bulletstyle	{	display:none;}
			  .select_bhposition		{	display:none;}
			  .select_bvposition		{	display:none;}
			  .select_navarrows		{	display:none;}
			  .select_navshow		{	display:none;}
			  .select_slidetime		{	display:none;}
			  .select_slots		{	display:none;}
			 .previewselector_container	{	width:301px; height:42px; margin:80px auto 20px; overflow:hidden; }	
			 .previewselector			{	width:105px;}
			 .previewselector.zweite	{	width:100px;}
			 .previewselector.zweite:hover,
			 .previewselector.zweite.selected {	width:100px;}
			 .previewselector.dritte	{	width:96px;}
   }
				



				








.view-seventh img {
   -webkit-transition: all 0.5s ease-out;
   -moz-transition: all 0.5s ease-out;
   -o-transition: all 0.5s ease-out;
   -ms-transition: all 0.5s ease-out;
   transition: all 0.5s ease-out;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}
.view-seventh .mask {
   background-color: #252525;
   -webkit-transform: rotate(0deg) scale(1);
   -moz-transform: rotate(0deg) scale(1);
   -o-transform: rotate(0deg) scale(1);
   -ms-transform: rotate(0deg) scale(1);
   transform: rotate(0deg) scale(1);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.3s ease-out;
   -moz-transition: all 0.3s ease-out;
   -o-transition: all 0.3s ease-out;
   -ms-transition: all 0.3s ease-out;
   transition: all 0.3s ease-out;
}
.view-seventh h2 {
   -webkit-transform: translateY(-200px);
   -moz-transform: translateY(-200px);
   -o-transform: translateY(-200px);
   -ms-transform: translateY(-200px);
   transform: translateY(-200px);
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.view-seventh p {
   -webkit-transform: translateY(-200px);
   -moz-transform: translateY(-200px);
   -o-transform: translateY(-200px);
   -ms-transform: translateY(-200px);
   transform: translateY(-200px);
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.view-seventh a.info {
   -webkit-transform: translateY(-200px);
   -moz-transform: translateY(-200px);
   -o-transform: translateY(-200px);
   -ms-transform: translateY(-200px);
   transform: translateY(-200px);
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.view-seventh:hover img {
   -webkit-transform: rotate(720deg) scale(0);
   -moz-transform: rotate(720deg) scale(0);
   -o-transform: rotate(720deg) scale(0);
   -ms-transform: rotate(720deg) scale(0);
   transform: rotate(720deg) scale(0);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
}
.view-seventh:hover .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: translateY(0px) rotate(0deg);
   -moz-transform: translateY(0px) rotate(0deg);
   -o-transform: translateY(0px) rotate(0deg);
   -ms-transform: translateY(0px) rotate(0deg);
   transform: translateY(0px) rotate(0deg);
   -webkit-transition-delay: 0.4s;
   -moz-transition-delay: 0.4s;
   -o-transition-delay: 0.4s;
   -ms-transition-delay: 0.4s;
   transition-delay: 0.4s;
}
.view-seventh:hover h2 {
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
   -webkit-transition-delay: 0.7s;
   -moz-transition-delay: 0.7s;
   -o-transition-delay: 0.7s;
   -ms-transition-delay: 0.7s;
   transition-delay: 0.7s;
}
.view-seventh:hover p {
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
   -webkit-transition-delay: 0.6s;
   -moz-transition-delay: 0.6s;
   -o-transition-delay: 0.6s;
   -ms-transition-delay: 0.6s;
   transition-delay: 0.6s;
}
.view-seventh:hover a.info {
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
   -webkit-transition-delay: 0.5s;
   -moz-transition-delay: 0.5s;
   -o-transition-delay: 0.5s;
   -ms-transition-delay: 0.5s;
   transition-delay: 0.5s;
}







/* Filterable Portfolio Stylesheet */


/* Simple Reset
------------------------------------------------------------ */
html, body, div, h1, h2, ul, li, dl, dd, dt, p { margin: 0; padding: 0; }
ul { list-style: none; }



/* Custom Classes
------------------------------------------------------------ */
.group:after { visibility: hidden; display: block; content: ""; clear: both; height: 0; }
* html .group { zoom: 1; } /* IE6 */
*:first-child+html .group { zoom: 1; } /* IE7 */




/* Filter */
dl { margin-bottom: 2em;  background:#f1f1f1; border:solid 1px #e5e5e5; margin-top:35px; padding:20px 0 0 0; text-align:center;}
ul.filter{ margin:0 0 0 0;}
.filter li { display:block; margin:0 0 15px 0;float:left;}

.filter a { margin:0 0; color: #545454; font-size:14px; text-decoration: none; padding:5px 25px;}
.filter a:hover, .current a {margin:0 0; color: #fff; background:#C42026; padding:5px 25px; font-size:14px;}

/* Portfolio Items */
.portfolio li { float: left; margin: 0 18px 0 0px; margin-bottom: 2em;   }
.portfolio li item.one-last { margin-right: 0; }
.portfolio li item.two-last{ margin-right: 0; }
.portfolio li item.thr-last{ margin-right: 0; }

.portfolio img { display: block;
height: 222px;
width: 300px;}
.portfolio img.port-three { width: 301px; height: 384px; display: block;  }
.portfolio img.port-four { width: 462px; height: 382px; display: block;  }
.portfolio .text{ background:#ecedee; text-align:center; padding:10px 0;  border-bottom:solid 1px #cccccc;}
.portfolio .text p{ font-size:20px; font-family: 'MuseoSlab300Regular';}
.portfolio .text span{ font-size:12px; color:#404040;}




.view {
   width: 301px;
   height:222px;
   float: left;
   overflow: hidden;
   position: relative;
   text-align: center;
   cursor: default;
}
.view .mask,.view .content {
   width: 301px;
   height:222px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}
.view img {
   display: block;
   position: relative;
}
.view h2 {
   font-family: 'MuseoSlab300Regular';color: #fff;
   text-align: center;
   position: relative;
   font-size: 17px;
   padding: 10px;
   background: rgba(0, 0, 0, 0.8);
   margin: 20px 0 0 0;
   text-transform:uppercase;
}
.view p {
   font-size: 12px;
   position: relative;
   color: #fff;
   padding: 10px 20px 20px;
   text-align: center;
}
.view a.info {
   padding:7px 15px;  
   text-decoration: none;
   font-size:12px;
   background: #000;
   margin:15px 0 0 100px;
   float:left;
   color: #fff;
   text-transform: uppercase;
}
.view a.info:hover {
   background: #f9f9f9;
   color: #000;
}