body{
	background:#384d67; 	
	text-align:center;
	font-family: "Open Sans", sans-serif; 
}
#view-code{
  color:#82b4eb;      
  font-size:14px;
  text-transform:uppercase;
  font-weight:700;
  text-decoration:none;
  position:absolute;top:620px;
  left:50%;margin-left:-30px;
  z-index:200;
}
#view-code:hover{color:#fff}
#window{
	margin:45px auto 0;
	border-radius:6px;
	background:#234871;
	width:678px;
	height:549px;	
	overflow:hidden;
	position:relative;
}
#header{
	background:#82b4eb;
	height:33px;
	padding-left:18px;
}
#header .circle{
	background:#689cd4;
	border-radius:50%;
	float:left;
	width:12px;
	height:12px;
	margin-right:6px;
	margin-top:11px;
}

.thumbs{display:none;}
.thumb, .thumb p{  
  width: 226px;
  height: 172px;
  float: left;
  margin:0;  
  background: #e3e5e9;
}
#cloneWrap{
  width: 270px;
  height: 210px;
  position:absolute;
  top:0;
  left:0;
  border:none;
}
#cloneWrap p{position:static; width:100%; height:100%}
.floatingThumb{
  width: 226px;
  height: 172px;
}
.thumb:hover{cursor:pointer;}
.thumb p{
	position:relative;
	top:0;
	left:0;
	-webkit-transition: all 80ms ease-out;
		   -moz-transition: all 80ms ease-out;
		    -ms-transition: all 80ms ease-out;
		     -o-transition: all 80ms ease-out;
		        transition: all 80ms ease-out;
}
.thumb p.expand{
	background:#fff;
	width:270px;
	height:210px;	
	z-index:300;
	-webkit-transition: all 80ms ease-out;
		   -moz-transition: all 80ms ease-out;
		    -ms-transition: all 80ms ease-out;
		     -o-transition: all 80ms ease-out;
		        transition: all 80ms ease-out;
}

.thumb p.eq0, .slide.eq0{background:#4773a3}
.thumb p.expand.eq0{top:0;left:0;}
.thumb p.eq1, .slide.eq1{background:#fff}
.thumb p.expand.eq1{top:0;left:-20px;}
.thumb p.eq2, .slide.eq2{background:#cde9e3}
.thumb p.expand.eq2{top:0;left:-40px;}
.thumb p.eq3, .slide.eq3{background:#2f5885}
.thumb p.expand.eq3{top:-20px;left:0;}
.thumb p.eq4, .slide.eq4{background:#f0f7ff}
.thumb p.expand.eq4{top:-20px;left:-20px;}
.thumb p.eq5, .slide.eq5{background:#f28f8a}
.thumb p.expand.eq5{top:-20px;left:-40px;}
.thumb p.eq6, .slide.eq6{background:#6b9acd}
.thumb p.expand.eq6{top:-38px;left:0;}
.thumb p.eq7, .slide.eq7{background:#4773a3}
.thumb p.expand.eq7{top:-38px;left:-20px;}
.thumb p.eq8, .slide.eq8{background:#6b9acd}
.thumb p.expand.eq8{top:-38px;left:-40px;}



.thumb span{
  width:160px;
  position:absolute;
  bottom:45px;
  left:30px;
  border-radius:2px;
  height:7px;
  background:#fff;
  display:block;
}
.thumb span:nth-of-type(2){bottom:30px; width:150px;}
#bootstrap-carousel{
  display:none;
  width: 778px;
  height: 516px;
  position: absolute;
  top: 33px;
  left: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  
}
.slide.firstSlide{
    width: 576px;
  height: 411px;
  margin: 105px 0 0 50px;
 background:#4773a3; 
  opacity:0;
}
.slide.firstSlide.animate{
  width: 678px;
  height: 516px;
  margin:0; 
  opacity:1;
  -webkit-transition: all 200ms ease-out;
		   -moz-transition: all 200ms ease-out;
		    -ms-transition: all 200ms ease-out;
		     -o-transition: all 200ms ease-out;
		        transition: all 200ms ease-out;
}
.slide{
	width: 678px;
    height: 516px;
}
.slide strong, .slide span{
	height:18px;
	background:#6b9acd;
	border-radius:3px;
	display:block;	
	margin-bottom:30px;
}
.slide span{height:12px;margin-bottom:15px;}
.slide span:nth-of-type(3){width:150px;}
.slide p{float:left; width:280px;margin:190px 0 0 60px;opacity:0;}
.slide path{ fill:#6b9acd;}
.slide svg{opacity:0;}

.slide.eq0 svg{margin:110px 0 0 0; opacity:1;}
.slide.eq0 p{margin:194px 0 0 56px; opacity:1;}


.thumb p.eq0 span{background:#6b9acd;}
.thumb p.eq1 span{background:#d4e2f0;}
.thumb p.eq2 span{background:#7aaec3;}
.thumb p.eq3 span{background:#27496d;}
.thumb p.eq4 span{background:#7aa3d2;}
.thumb p.eq5 span{background:#fff;}
.thumb p.eq6 span{background:#8fb6e3;}

.slide.eq1 path, .slide.eq1 strong, .slide.eq1 span{fill:#d4e2f0; background:#d4e2f0;}
.slide.eq1 p{float:left; width:280px;margin:150px 0 0 60px; opacity:0;}
.slide.eq1 svg{margin:180px 0 0 0; opacity:0;}

.slide.eq2 p{float:right; width:280px;margin:190px 20px 0 0 ; }
.slide.eq2 path, .slide.eq2 strong, .slide.eq2 span{fill:#7aaec3; background:#7aaec3;}
.slide.eq2 svg{float: left; margin-left: 40px;}

.slide.eq3 p{float:left; width:280px;margin:110px 0 0 60px; }
.slide.eq3 path, .slide.eq3 strong, .slide.eq3 span{fill:#27496d; background:#27496d;}

.slide.eq4 path{fill:#7aa3d2;}
.slide.eq4 svg{margin:45px 0 0 13px;float:left;}
.slide.eq4 svg:nth-of-type(1){margin-left:35px;}
.slide.eq4 svg:nth-of-type(2){margin-top:319px;}

.slide.eq5 p{float:left; width:280px;margin:190px 0 0 60px; }
.slide.eq5 path, .slide.eq5 strong, .slide.eq5 span{fill:#fff; background:#fff;}

.slide.eq6 p{float:left; width:280px;margin:190px 0 0 60px; }
.slide.eq6 path, .slide.eq6 strong, .slide.eq6 span{fill:#cde9e3; background:#cde9e3;}

.slide.eq6 p{float:left; width:480px;margin:-100px 0 0 60px; }
.slide.eq6 path, .slide.eq6 strong, .slide.eq6 span{fill:#8fb6e3; background:#8fb6e3;}

#espose{
	position:absolute;
	bottom:20px;
	right:20px;
	width:26px;
	height:26px;	
	cursor:pointer;
	z-index:500;
  display:none;
}
#espose p{
  border: 2px solid #8fb6e3;
	width: 6px;
	height: 6px;
	margin: 0 3px 3px 0;
	float:left;
}

#loader{
  position:absolute;
  width:45px;
  height:30px;
  top:280px;
  left:50%;
  margin-left:-25px;
  display:none;
}
#loader .circle{
  background:#82b4eb;
  border-radius: 50%;  
  width: 12px;
  height: 12px;
  margin-right: 6px;
  position:absolute;
  left:0;
  top:0;
}
#loader .c1{
  top:6px;
  left:6px;
  width:0;
  height:0;
}
#loader.animate .c1{
  top:0;
  left:0;
  width:12px;
  height:12px;
}

#loader.animate .c2{left:15px;}
#loader .circle.c3{left:15px;}
#loader.animate .c3{left:30px;}
#loader .c4{left:30px;}
#loader.animate .c4{
  left:29px;
  top:6px;
  width:0;
  height:0;
}
#loader.animate .circle{
-webkit-transition: all 400ms ease-out;
	   -moz-transition: all 400ms ease-out;
		-ms-transition: all 400ms ease-out;
		 -o-transition: all 400ms ease-out;
			transition: all 400ms ease-out;
}