/**
 * Plugin Name: GF-IT Switchbox
 * Plugin URI: http://gf-it.ch
 * Description: This Plugin Creates a Content Switchbox
 * Author: Michael Ligabue
 */
/**
 * Main container
 ----------------------------
 */
.gfitfw-prod-switchbox-wrapper{
	width: 100%;
	margin: 0 0 50px 0;
}

.gfitfw-prod-switchbox-element{
	display: inline-block;
	width: 155px;
	height: 155px;
	margin: 0 1px 0 0;
	padding: 15px;
	background-color: rgb(225,10,50);
	vertical-align: top;
	text-align: left;
}

.gfitfw-prod-switchbox-element:nth-of-type(6){
	margin: 0 -4px 0 0;
}

.gfitfw-prod-switchbox-element h3{
	margin: 0;
	padding: 0;
	font-size: 22px;
	line-height: 28px;
	color: rgb(255,255,255);
	font-weight: 300;
}

.gfitfw-prod-switchbox-wrapper:hover .gfitfw-prod-switchbox-element{
	opacity: .2;
}

.gfitfw-prod-switchbox-wrapper:hover .gfitfw-prod-switchbox-element:hover{
	opacity: 1;
}

.gfitfw-prod-switchbox-element .gfitfw-prod-switchbox-element-content{
	display: none;
	position: absolute;
	width: 477px;
	margin: 15px 0 0 0;
	left: 0;
	background-color: rgb(255,255,255);
	box-shadow: 0 0 10px rgba(0,0,0,.5);
	-webkit-box-shadow: 0 0 10px rgba(0,0,0,.5);
	-moz-box-shadow: 0 0 10px rgba(0,0,0,.5);
	z-index: 100;
}

.gfitfw-prod-switchbox-element .gfitfw-prod-switchbox-element-content img{
	width: 100%;
	height: auto;
}

.gfitfw-prod-switchbox-element:nth-of-type(4) .gfitfw-prod-switchbox-element-content,
.gfitfw-prod-switchbox-element:nth-of-type(5) .gfitfw-prod-switchbox-element-content,
.gfitfw-prod-switchbox-element:nth-of-type(6) .gfitfw-prod-switchbox-element-content{
	right: 0;
	left: auto;
}

.gfitfw-prod-switchbox-element:hover .gfitfw-prod-switchbox-element-content{
	display: block;
}

.gfitfw-prod-switchbox-element-content-text{
	margin: -6px 0 0 0;
	padding: 10px 10px 30px 10px;
	background-color: rgba(68,73,77,.1);
}

.gfitfw-prod-switchbox-element-content-text p:first-of-type{
	margin-top: 0;
	padding-top: 0;
	
}

@media only screen and (max-width: 960px){
	.gfitfw-prod-switchbox-element{
		width: 114px;
		height: 114px;
	}
	
	.gfitfw-prod-switchbox-element h3{
		font-size: 16px;
		line-height: 20px;
	}

	.gfitfw-prod-switchbox-element .gfitfw-prod-switchbox-element-content{
		width: 377px;
	}
}

@media only screen and (max-width: 767px){
	.gfitfw-prod-switchbox-wrapper{
		margin: 26px 0 50px 0;
	}
	
	.gfitfw-prod-switchbox-element{
		width: 155px;
		height: 155px;
		margin: 0 1px 6px 0;
	}
	
	.gfitfw-prod-switchbox-wrapper:hover .gfitfw-prod-switchbox-element{
		opacity: 1;
	}
	
	.gfitfw-prod-switchbox-element:hover .gfitfw-prod-switchbox-element-content{
		display: none;
	}
}