/*
.feature::before {
	background-color: #c2a0ce;
}
*/

#productFeatures li {
	cursor: pointer;
}

.tutorial .demos {
	width:100%;
	margin-left: 0;
}

/*
.tutorial h2 {
    letter-spacing: 0.30em;
    text-align: center;
    line-height: 1.5em;
    padding: 5px;
    margin: 0px 0px 25px 0px;
    font-size: 18px;
    font-family: verdana, sans-serif;
    font-weight: normal;
    background: black;
    color: white;
    text-transform: uppercase;
	border-bottom: 4px solid #333;
}
*/


.tutorial h3 {
/*     background: #858585; */
/* background: #333; */
width:100%;
background: black;
    display: table;
    letter-spacing: 0.30em;
    text-align: center;
    line-height: 1.5em;
    padding: 5px;
    padding-left: 20px;
    padding-right: 15px;
     margin: 40px auto 30px auto;
    font-size: 18px;
    font-family: verdana, sans-serif;
    font-weight: normal;
/*     color: #fab000; */
color: #00ce29;
    text-transform: uppercase;
/*     border-bottom: 4px solid #505050; */
}

.tutorial h4 {
  clear: left;
  text-transform: none;
  background: none;
  
/*   color: #333; */
  font-size: 16px;
  font-weight: normal;
  margin-bottom: 30px;
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 5px;
  padding: 0px 0px 0px 0px;
  line-height: 25px;
/*   color: #505050; */
color:white;
  font-family: verdana, sans-serif;
  letter-spacing: 0.35em;
}

hr {
border-bottom: 3px solid #606060;
margin-top: -20px;
}


.tutorial img {
	width: 100%;
}

.tutorial-screenshots img {
	float: right;
}

.tutorial-text {
	float:left;
	width:55% !important;	
	padding-right: 20px;
}


.tutorial-screenshot1, .tutorial-screenshot2, .tutorial-screenshot3, .tutorial-screenshot4, .tutorial-screenshot5 {
	display: none;
}


.tutorial-screenshot6 img{
	margin-bottom: 30px;
}


.tutorial-screenshots1 {
	width: 40%;
	height: 40% !important;
	float:right;
	margin-top: 25px;
}


.tutorial-screenshots2 {
	width: 40%;
	height: 40% !important;
	float:right;
	margin-top: 20px;
} 

.tutorial-screenshots1 img, .tutorial-screenshots2 img {
	width:100%;
	height: 100%;
}


.dot1, .dot2, .dot3, .dot4, .dot5 {
	cursor: pointer;
	height: 15px;
	width: 15px;
	margin: 0 2px;
	background-color: grey;
	border-radius: 50%;
	display: inline-block;
	transition: background-color 0.6s ease;
	text-align: center;
}

.active {
	color: #c2a0ce;
}

.dot1.active, .dot2.active, .dot3.active, .dot4.active, .dot5.active {
	 background-color:#c2a0ce !important;
}

 .dot1:hover, .dot2:hover, .dot3:hover, .dot4:hover, .dot5:hover {
	background-color:#c2a0ce !important; 
 }

.dots {
	padding-top: 20px;
	padding-bottom: 40px;
	float:right;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	text-align:center;
}


.fade {
	-webkit-animation-name: fade;
	-webkit-animation-duration: 1.5s;
	animation-name: fade;
	animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  	from {opacity: .4} 
  	to {opacity: 1}
}

@keyframes fade {
  	from {opacity: .4} 
  	to {opacity: 1}
}

@media (min-width: 100px)and (max-width: 699px){
	
	.tutorial-text {
width:100% !important;	
}
	.tutorial-screenshots img {
	float: left;
}

	.tutorial-screenshots1, .tutorial-screenshots2 {
	width: 100%;
}

}