.carousel{
	width: 100%;
	position: relative;
	padding-top: 60%;
	overflow: hidden;
}

.inner{
	width: 100%;
	height: 100%;
	position: absolute;
	top:0;
	left: 0;
}

/**
 * ==========================
 * Animation styles
 * 
 * Notes:
 * 1. We use z-index to position active slides in-front 
 * of non-active slides
 * 2. We set right:0 and left:0 on .slide to provide us with
 * a default positioning on both sides of the slide. This allows 
 * us to trigger JS and CSS3 animations easily
 *
 */
.slide{
	width: 100%;
	height: 100%;
	position: absolute;
	top:0;
	right:0;
	left:0;
	z-index: 1;
	opacity: 0;
}

.slide.active,
.slide.left,
.slide.right{
	z-index: 2;
	opacity: 1;
}

/**
 * ==========================
 * JS animation styles
 * 
 * We use jQuery.animate to control the sliding animations
 * when CSS3 animations are not available. In order for
 * the next slide to slide in from the right, we need
 * to change the left:0 property of the slide to left:auto
 *
 */

.js-reset-left{left:auto}

/**
 * ==========================
 * CSS animation styles
 * 
 * .slide.left and .slide.right set-up
 * the to-be-animated slide so that it can slide
 * into view. For example, a slide that is about 
 * to slide in from the right will:
 * 1. Be positioned to the right of the viewport (right:-100%)
 * 2. Slide in when the style is superseded with a more specific style (right:0%)
 *
 */
.slide.left{
	left:-100%;
	right:0;
}

.slide.right{
	right:-100%;
	left: auto;
}

.transition .slide.left{left:0%}
.transition .slide.right{right:0%}

/**
 * The following classes slide the previously active
 * slide out of view before positioning behind the 
 * currently active slide
 *
 */
.transition .slide.shift-right{right: 100%;left:auto}
.transition .slide.shift-left{left: 100%;right:auto}

/**
 * This sets the CSS properties that will animate. We set the
 * transition-duration property dynamically via JS.
 * We use the browser's default transition-timing-function
 * for simplicity's sake
 * 
 * It is important to note that we are using CodePen's inbuilt
 * CSS3 property prefixer. For your own projects, you will need
 * to prefix the transition and transform properties here to ensure
 * reliable support across browsers
 *
 */
.transition .slide{
	transition-property: right, left, margin;
}

/**
 * ==========================
 * Indicators
 *
 */
.indicators{
  width:100%;
  position: absolute;
  bottom:0;
  z-index: 4;
  padding:0;
  text-align: center;
}

.indicators li{
	width: 13px;
	height: 13px;
	display: inline-block;
	margin: 5px;
	background: #fff;
	list-style-type: none;
	border-radius: 50%;
  cursor:pointer;
  transition:background 0.3s ease-out;
}

.indicators li.active{background:#DA251C}

.indicators li:hover{background-color:#2b2b2b}

/**
 * ==========================
 * Arrows 
 *
 */
.arrow{
  width: 20px;
  height: 20px;
  position:absolute;
  top:50%;
  z-index:5;
  border-top:3px solid #fff;
  border-right:3px solid #fff;
  cursor:pointer;
  transition:border-color 0.3s ease-out;
}

.arrow:hover{border-color:#93278f}

.arrow-left{
  left:20px;
  -webkit-transform:rotate(225deg);
          transform:rotate(225deg);
}

.arrow-right{
  right:20px;
  -webkit-transform:rotate(45deg);
          transform:rotate(45deg);
}


.slide{
	text-align:center;
  padding-top:0%;
  background-size:cover;
}


 
 
 
 
 
 

.first {height: 100%;width: 100%;margin: 0px 00px 50px 0px;}
@media all and (max-width: 1024px) {
.first {margin: 0px 00px 10px 0px;}
}

.first-first-part {
  margin-right: 100px;
  margin-left: 100px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 70vh;
}
.first-container {
  display: flex;
  flex-direction: column;
  margin-left: 100px;
}
.first-title {
  font-size: 36px;
  font-weight: 200;
}
.first-title-bold {
  font-weight: bold;
}
.first-img {
  margin-left: 150px;
}

.main-carousel {
  margin: 0 100px;
}
.main-carousel-desc {
 line-height: 28px;
  display: flex;
  flex-direction: column;
  background-color: #ffffff20;
  margin: -30px 0;
  color: #ffffff;
}

.carousel-cell {
  margin-right: 30px;
 width:380px;
	height:280px;    
 

}

.third {
  background: #22204D;
}

.colorbar {
  width: 200px;
  height: 1px;
  background: #e3147e;
  /* Old browsers */
  background: -moz-linear-gradient(left, #e3147e 0%, #312b81 62%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(left, #e3147e 0%, #312b81 62%);
  /* Chrome10-           25,Safari5.1-6 */
  background: linear-gradient(to right, #e3147e 0%, #312b81 62%);
  /* W3C, IE10+, FF16+,         Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#e3147e", endColorstr="#312b81", GradientType=1 );
  /*    IE6-9 */
}

.none {
  display: none;
}

/* TABLET */
@media all and (max-width: 1024px) {
  .header-link:nth-child(2) {
    display: none;
  }
}
/* MOBILE */
@media all and (max-width: 768px) {
  .header {
    height: 50px;
  }
  .header-container {
    margin: 0 10px;
  }
  .header-right {
    margin: 0 10px;
  }
  .header-right-text {
    margin: 0;
  }

  .desktop {
    display: none;
  }

  .mobile {
    display: block;
  }

  .first-first-part {
    flex-direction: column;
    margin: 0 25px;
    padding-top: 75px;
  }

  .button {
    margin: 0;
    margin-bottom: 50px;
  }
  .button:hover {
    border: none;
  }
  .button-text {
    display: flex;
  }

  .first-img {
    height: 100%;
    margin: 0;
    width: 90%;
  }
  .first-img-container {
    display: flex;
    justify-content: center;
    margin-bottom: 100px;
  }

  .main-carousel {
    margin: 0 25px;
    margin-top: 10px;
  }

  .header-left-arrow {
    width: 25px;
    height: 25px;
  }

  .burgermenu {
    transition: 1s all;
    width: 100vw;
    height: 100vh;
    background: #FFF;
    position: absolute;
    top: -100%;
  }
  .burgermenu-footer {
    position: absolute;
    width: 100vw;
    left: 50%;
    transform: translate(-50%, 0);
    bottom: 0;
  }
  .burgermenu-link {
    font-size: 20px;
    margin-bottom: 10px;
    transition: .5s all;
  }
  .burgermenu-link:hover {
    padding-left: 20px;
  }
  .burgermenu-link:active {
    padding-left: 20px;
  }
  .burgermenu-container {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 50%;
    margin-left: 25px;
    transform: translate(0, -50%);
  }
}


 
.flickity-enabled{position:relative}.flickity-enabled:focus{outline:0}.flickity-viewport{overflow:hidden;position:relative;height:100%}.flickity-slider{position:absolute;width:100%;height:100%}.flickity-enabled.is-draggable{-webkit-tap-highlight-color:transparent;tap-highlight-color:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.flickity-enabled.is-draggable .flickity-viewport{cursor:move;cursor:-webkit-grab;cursor:grab}.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down{cursor:-webkit-grabbing;cursor:grabbing}.flickity-button{position:absolute;background:hsla(0,0%,100%,.75);border:none;color:#333}.flickity-button:hover{background:#fff;cursor:pointer}.flickity-button:focus{outline:0;box-shadow:0 0 0 5px #19f}.flickity-button:active{opacity:.6}.flickity-button:disabled{opacity:.3;cursor:auto;pointer-events:none}.flickity-button-icon{fill:#333}.flickity-prev-next-button{top:50%;width:44px;height:44px;border-radius:50%;transform:translateY(-50%)}.flickity-prev-next-button.previous{left:10px}.flickity-prev-next-button.next{right:10px}.flickity-rtl .flickity-prev-next-button.previous{left:auto;right:10px}.flickity-rtl .flickity-prev-next-button.next{right:auto;left:10px}.flickity-prev-next-button .flickity-button-icon{position:absolute;left:20%;top:20%;width:60%;height:60%}.flickity-page-dots{position:absolute;width:100%;bottom:-25px;padding:0;margin:0;list-style:none;text-align:center;line-height:1}.flickity-rtl .flickity-page-dots{direction:rtl}.flickity-page-dots .dot{display:inline-block;width:10px;height:10px;margin:0 8px;background:#333;border-radius:50%;opacity:.25;cursor:pointer}.flickity-page-dots .dot.is-selected{opacity:1}