/*Now the styles*/


/*Time to apply widths for accordian to work
Width of image = 490px
total images = 3
so width of hovered image = 490px
width of un-hovered image =  px - you can set this to anything
so total container width = 490 + 235*2 = 960px;
default width = 960/3 = 320px;
*/

.accordian {
	width: 960px;
	height: 363px;
	overflow: hidden;
	/*Time for some styling*/
	margin: 100px auto;

}

/*A small hack to prevent flickering on some browsers*/
.accordian ul {
	width: 100%;
	/*This will give ample space to the last item to move
	instead of falling down/flickering during hovers.*/
}

.accordian li {
	border-left:2px solid #fff;
	position: relative;
	/*display: block;*/
	display: flex;
	/*width: 480px;*/
	/*float: left;*/
	box-sizing:border-box;
	/*Transitions to give animation effect*/
	/*transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;*/
	/*If you hover on the images now you should be able to 
	see the basic accordian*/
	justify-content: center;
	width: 100%;
}

/*Reduce with of un-hovered elements*/
/*.accordian ul:hover li {width: 156px;}*/
/*Lets apply hover effects now*/
/*The LI hover style should override the UL hover style*/
/*.accordian ul li:hover {width: 490px;}*/


.accordian li img {
	display: block;
	max-width:none;
	width:490px;
}


@media(max-width:768px){
	.accordian {
		width: 100%;
		height: auto;
		overflow: hidden;
		/*Time for some styling*/
		margin: 20px auto;
	}

	/*A small hack to prevent flickering on some browsers*/
	.accordian ul {
		width: 100%;
		display: block;
		/*This will give ample space to the last item to move
		instead of falling down/flickering during hovers.*/
	}

	.accordian li {
		border-left:2px solid #fff;
		position: relative;
		display: flex;
		width: 100%;
		box-sizing:border-box;
		/*Transitions to give animation effect*/
		transition: all0;
		-webkit-transition: all 0s;
		-moz-transition: all 0s;
		/*If you hover on the images now you should be able to 
		see the basic accordian*/
		justify-content: center;
	}

	/*Reduce with of un-hovered elements*/
	.accordian ul:hover li {width:  100%}
	/*Lets apply hover effects now*/
	/*The LI hover style should override the UL hover style*/
	.accordian ul li:hover {width:  100%}


	.accordian li img {
		display: block;
		max-width:100%;
		width:50%;
		margin: 0 auto;
	}

}


/*Image title styles*/
.image_title {
	width:490px;
	background: #13366f;
	color:#fff;
	position: absolute;
	/*left: 0;*/ 
	bottom: 0;	
}
.image_title a {
	display: block;
	color: #fff !important;
	text-decoration: none;
	padding: 20px;
	font-size: 16px;
}

#slide {
	width:792px;
	margin:0 auto;
	position:relative;
	text-align: center;
	/*border:6px solid #7398c2;*/
	padding: 0 10px;
}

#slide li{
	width:260px;
	text-align: center;
	float:left;
}

#slide li .ta_c{
	width:480px;
	display: inline-block;
}

#slide li.msg{
	text-align: center;
	width:500px;
	padding: 0 16px; 

}

#slide img {
}

@media(max-width:768px){
	.image_title {
		background: #13366f;
		color:#fff;
		position: absolute;
		/*left: 0;*/ 
		bottom: 0px;	
		width: 50%;	
		font-size: 3vmin;
	}

	.image_title br{
		display:none;
	}

	.image_title a {
		display: block;
		color: #fff !important;
		text-decoration: none;
		padding: 5px;
		text-align:center;
		font-size: 2.5vmin;

	}

	#slide {
		width:98%;
		height:auto;
		margin:0 auto;
		position:relative;
		box-sizing:border-box;
	}
	
	#slide li {
		width:100% !important;
		max-width:100% !important;
		margin-bottom: 20px;
		float: none;
	}


	#slide li.msg{
		text-align: center;
		width:100%;
		padding: 0px; 
		overflow-y:auto;
		height:auto;

	}
}

#rainbow {
	width: 260px;
	height: 223px;
}

@media(max-width:768px){
	#rainbow {
		width: 260px;
		height: 290px;
	}
	#slide .msg .spOnly {
		margin:auto;
	}
}