#sequence {
  position: relative;
  width: 100%;
  height: 285px;
  max-width: 100%;
  overflow: hidden;
  margin: 0 auto;
  padding: 0;
  font-family: sans-serif;
}

/* Reset */
#sequence .seq-canvas,
#sequence .seq-canvas > * {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Make the canvas the same dimensions as the container and prevent lines from
   wrapping so each step can sit side-by-side */
#sequence .seq-canvas {
  position: absolute;
  height: 100%;
  width: 100%;
  white-space: nowrap;
  font-size: 0;
}

/* Make the steps the same size as the container and sit side-by-side */
#sequence .seq-canvas > * {
  display: inline-block;
  vertical-align: top;
  width: 100%;
  height: 100%;
  white-space: normal;
  text-align: center;
  color: white;
}

/* Used to vertically center align the .content element */
#sequence .seq-canvas > li:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

/* Vertically center align the .content element */
#sequence .content {
  display: inline-block;
  vertical-align: middle;
  margin: 0 4%;
  font-size: 16px;
}

#sequence .step2 {
 /* background-color: #279fe5;*/
   background: url("../carrusel-1.jpg");
	background-size: cover;
	background-position: center center;
}

#sequence .step1 {
   background: url("../carrusel-2.jpg");
	background-size: cover;
	background-position: center center;
}

#sequence .step3 {
   background: url("../carrusel-3.jpg");
	background-size: cover;
	background-position: center center;
}

#sequence .step4 {
   background: url("../carrusel-4.jpg");
	background-size: cover;
	background-position: center center;
}

#sequence h2,
#sequence h3 {
  margin: 0;
  display: block;
  line-height: 120%;
}

#sequence h2 {
  margin-bottom: .5em;
  font-family: 'Montserrat', sans-serif;
  font-size: 2.6em;
  text-shadow: 0.07em 0.07em #000;
}

#sequence h3 {
  font-size: 1.4em;
  font-family: 'Open Sans', sans-serif;
  text-shadow: 0.07em 0.07em #000;
}

/* Starting positions */
#sequence h2,
#sequence h3 {
  opacity: 0;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
}

#sequence h2 {
  -webkit-transform: translate(0, -20px);
  transform: translate(0, -20px);
}

#sequence h3 {
  -webkit-transform: translate(0, 20px);
  transform: translate(0, 20px);
}

/* Animate in positions for content */
#sequence .seq-in h2,
#sequence .seq-in h3 {
  opacity: 1;
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
}

/* Animate out positions for content */
#sequence .seq-out h2,
#sequence .seq-out h3 {
  opacity: 1;
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
}

.seq-pagination {

	position: relative;
	left: -50%;
}

/* Common styles and resets */
.dotstyle {
	position: absolute;
	bottom: 15px;
	left: 50%;

}
.dotstyle ul {
	
	padding: 0;
	list-style: none;
	cursor: default;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.dotstyle li {
	position: relative;
	
	float: left;
	margin: 0 16px;
	width: 16px;
	height: 16px;
	cursor: pointer;
}

.dotstyle li a {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	outline: none;
	border-radius: 50%;
	background-color: #fff;
	background-color: rgba(255, 255, 255, 0.3);
	text-indent: -999em; /* make the text accessible to screen readers */
	cursor: pointer;
	position: absolute;
}

.dotstyle li a:focus {
	outline: none;
}

/* Individual styles and effects */


/* Fly in */

.dotstyle-hop li a {
	border: 2px solid #630;
	background: transparent;
}

.dotstyle-hop li a::after {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	border-radius: 50%;
	visibility: hidden;
	background: #fff;
	opacity: 0;
	-webkit-transform: rotate(-100deg);
	transform: rotate(-100deg);
	-webkit-transform-origin: -200% 50%;
	transform-origin: -200% 50%;
	-webkit-transition: -webkit-transform 0.3s ease 0.3s, opacity 0.3s ease, visibility 0s 0.3s ease;
	transition: transform 0.3s ease 0.3s, opacity 0.3s ease, visibility 0s 0.3s ease;
}

.dotstyle-hop li a:focus {
	background: rgba(255, 255, 255, 0.2);
}

.dotstyle-hop li.current-from-right a::after {
	-webkit-transition: none;
	transition: none;
	-webkit-transform: rotate(100deg);
	transform: rotate(100deg);
	-webkit-transform-origin: 300% 50%;
	transform-origin: 300% 50%;
}

.dotstyle-hop li.seq-current a::after {
	visibility: visible;
	opacity: 1;
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: -webkit-transform 0.3s ease, opacity 0.3s ease;
	transition: transform 0.3s ease, opacity 0.3s ease;
}