<div class="Navbar" id="nav">
  <div class="nav-wrapper">
    <div class="Navbar__Link Navbar__Link-brand">
      Brand
    </div>
	<div class="Navbar__Link Navbar__Link-user txt-color1">
      <i class="fas fa-user"></i>
    </div>
    <div class="Navbar__Link Navbar__Link-toggle" id="togglebutton">
	  <a href="javascript:void(0);" onclick="toggle_menu()"> 
	    <div class="bar1 bg-color1"></div>
        <div class="bar2 bg-color1"></div>
        <div class="bar3 bg-color1"></div>
	  </a>
    </div>
    <nav class="Navbar__Items site-navigation">
      <div class="Navbar__Link txt-color0">
        Home
      </div>
      <div class="Navbar__Link txt-color0">
        Services
      </div>
      <div class="Navbar__Link txt-color0">
        About
      </div>
	  <div class="Navbar__Link txt-color0">
        Contact
      </div>
    </nav>
    <nav class="Navbar__Items Navbar__Items--right">
      <div class="Navbar__Link Signup bg-color1">
        <a>
		  <i class="fas fa-user"></i>
		  Try for Free
		</a>
      </div>
      <div class="Navbar__Link buttonstyle2">
	    <i class="fas fa-sign-in-alt"></i>
		 Sign In
      </div>
    </nav>
  </div>
</div>
<!-- overlay -->
<div id="myNav" class="overlay">
  <div class="overlay-content">
    <div class="searchContainer cf">

      <input class="searchBox" type="search" name="search" placeholder="Search the site...">
	  <button type="submit" class="searchButton">Search</button>
    </div>
    <div class="link-container">
      <div class="overlay-link">
	    <a><i class="fas fa-user"></i></a>
   	    Login
	  </div>
      <div class="overlay-link">
	    <a><i class="fas fa-home"></i></a>
   	    Home
	  </div>
	  <div class="overlay-link">
	    <a><i class="fas fa-cogs"></i></a>
   	    Service
	  </div>
      <div class="overlay-link">
	    <a><i class="fas fa-info-circle"></i></a>
   	    About
	  </div>
	    <div class="overlay-link">
	    <a><i class="fas fa-address-book"></i></a>
   	    Contact
	  </div>
	  <div class="overlay-link">
	    <a><i class="fas fa-star"></i></a>
   	    More
	  </div>
    </div>
  </div>
</div>
<p> It would be nice if the menu did not push this paragraph at all
  <script src='https://use.fontawesome.com/releases/v5.0.6/js/all.js'></script>  <!-- User Icon -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
body { 
  margin: 0;
    font-family: 'Lora';
   font-size: 1.1em;
   background: #F7F5E6;
}
a {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  text-decoration: none;
  font-size: 0.9em;

}
a:hoover {
	text-decoration: none;
	color: white;
}
a:hover, a:visited, a:link, a:active
{
    text-decoration: none;
	color: white;
}
/* http://paletton.com/export/index.php */
/* Text Color Classes */

.txt-color0 {
	color:  #333 !important;
}
.primary, .txt-color1 {
	color:  #4E6D9C !important;
}
.Secondary1, .txt-color2 {
	color:  #6155A4 !important;
}
.Secondary2, .txt-color3   {
	color:  #ECD26B !important;
}
.Complement1, .txt-color4  {
	color: #ECBD6B !important;
	
	/* Background Color Classes */
}
.bg-primary0, .bg-color0 {
	background: linear-gradient(to top, #959595, #C0C0C0); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.bg-primary, .bg-color1 {
	background:  #4E6D9C !important;
}
.bg-Secondary1, .bg-color2 {
	background:  #6155A4 !important;
}
.bg-Secondary2, .bg-color3   {
	background:  #ECD26B !important;
}
.bg-Complement1, .bg-color4  {
	background: #ECBD6B !important;
}
/* End */
.Navbar {
  top: 0;
  display: flex;
  padding: 10px;
  z-index: 2;
   position: fixed; /* Stay in place */
  z-index: 2; /* Sit on top */
  width: 100%;
  flex-direction: row;
  
  border-top: 1px solid #a2a2a2;
  background-color: #f4f4f4;
  background: -webkit-linear-gradient(top, rgba(232,232,232,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
  -webkit-box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.75);
  box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.75);
  border-bottom: 1px dashed rgba(160,160,160,0.8);
  box-shadow:  0px 4px 0px 0px rgba(237,237,237,1),
              0px 5px 0px 0px rgba(160,160,160,1),
              5px 0px 0px 0px rgba(160,160,160,1),
			  0px -1px 0px 0px rgba(160,160,160,1),
			  -1px 0px 0px 0px rgba(160,160,160,1),
              0px 0px 0px 1px rgba(160,160,160,1),
			   0px 20px 15px -10px rgba(1,1,1,0.2);
  
}
.nav-wrapper {
  margin: auto;
  text-align: center;
  width: 80%;
  display: flex;
  flex-wrap:wrap; /* Added this to allow wrapping */
  justify-content: space-between;
}
.Navbar__Link-brand {
  font-family: Lato, Helvetica, Arial, sans-serif;
  text-shadow: 3px 3px 0px rgba(0,0,0,0.1), 7px 7px 0px rgba(0,0,0,0.05);
  font-size: 2.2em;
  letter-spacing: 1px;
  color: rgba(78,109,156,1);
  justify-content: center;
  display: flex;
  flex-direction: column;
}
.Navbar__Link {
  padding-right: 10px ;
  padding-left: 10px ;
  letter-spacing: 1px;
  line-height: 40px;
}
.Navbar__Items {
  display: flex;
   margin-left:auto;
}
 /* Overlay Menu */
.Navbar__Items div {
  font-size: 1.0em;
  letter-spacing: 1.2px;
   font-family: 'Oxygen' !important;
  color: #212323;
} 
.overlay {
  height: 100%;
   margin-top: 60px; /* Magic number */
  width: 100%;
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: -100%;
  top: 0;
  background-color: #f1f1f1;
  overflow-x: hidden; /* Disable horizontal scroll */
  transition: left 0.5s; 
}
.overlayopen {
	width: 100%;
	height: 100%;
    left: 0;
}
/* Position the content inside the overlay */
.overlay-content {
   margin-top: 8px; /* Magic number */
   position: relative;
   width: 100%; /* 100% width */
   color: #1E406E;
}
/* Search Container */
.searchContainer {
  display: inline-flex;
  justify-content: Center;
  width: 96%; 
  margin-left: 2%;
  margin-bottom: 20px;
  position: relative;
  flex-direction: row;
  padding: 2px 5px;
  overflow: hidden;
    background:#f4f4f4;
  background:rgba(244,244,244,.79);
  border: 1px solid #d3d3d3;
   box-shadow:0 4px 9px rgba(0,0,0,.37);
  -moz-box-shadow:0 4px 9px rgba(0,0,0,.37);
  -webkit-box-shadow:0 4px 9px rgba(0,0,0,.37);
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px
}
.cf:before,
.cf:after {
    content:"";
    display:table;
}
.cf:after {
    clear:both;
}
.searchContainer input {
	background:#fefefe;
	border: none;
	font:12px/12px 'HelveticaNeue', Helvetica, Arial, sans-serif;
	margin-right: 5px;
	padding: 10px;
	width: 216px;
	box-shadow: 0 0 4px rgba(0,0,0,.4) inset, 1px 1px 1px rgba(255,255,255,.75);
	-moz-box-shadow: 0 0 4px rgba(0,0,0,.4) inset, 1px 1px 1px rgba(255,255,255,.75);
	-webkit-box-shadow: 0 0 4px rgba(0,0,0,.4) inset, 1px 1px 1px rgba(255,255,255,.75);
  border-radius: 9px;
  -moz-border-radius: 9px;
  -webkit-border-radius: 9px
}
.searchContainer input:focus {
		outline: none;
		box-shadow:0 0 4px #0d76be inset;
		-moz-box-shadow:0 0 4px #0d76be inset;
		-webkit-box-shadow:0 0 4px #0d76be inset;
	}
	.searchContainer input::-webkit-input-placeholder {
  	font-style: italic;
  	line-height: 15px
	}

	.searchContainer input:-moz-placeholder {
	  font-style: italic;
  	line-height: 15px
	}
.searchIcon {
padding: 15 15 15 15;
margin-right: 10px;
}

.searchBox {
  border: 0;
  padding: 0.5rem 0.5rem 0.5rem 0;
  flex: 1;
}
.searchButton {
	background: rgb(30,64,110);
	border: none;
	color:#fff;
	cursor: pointer;
	font: 13px/13px 'HelveticaNeue', Helvetica, Arial, sans-serif;
	padding: 10px;
	width:106px;
	box-shadow: 0 0 2px #2692dd inset;
	-moz-box-shadow: 0 0 2px #2692dd inset;
	-webkit-box-shadow: 0 0 2px #2692dd inset;
  border-radius: 9px;
  -moz-border-radius: 9px;
  -webkit-border-radius: 9px;
}
/* END Search Container */
.link-container {
	display: flex; /* or inline-flex */
    flex-wrap: wrap;
    justify-content: Center;
}
.overlay-link {
  border: 1px solid #4E6D9C;
  width: 32%;
  height: 110px;
  font-size: 14px;
   display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  line-height: 30px;
  
}
.overlay-link:hover {
background: #AABDDA;
}
.overlay-link a:hover {
	color: #1E406E;
}
.overlay-link:nth-child(1) { 
	border-bottom: none;
	 border-top-left-radius: 5px;
	}
.overlay-link:nth-child(2) { 
	border-left: none;
	border-bottom: none;
	}
.overlay-link:nth-child(3) { 
	border-left: none;
	border-bottom: none;
	 border-top-right-radius: 5px;
	}
	.overlay-link:nth-child(4) { 
	border-bottom-left-radius: 5px;
	}
.overlay-link:nth-child(5) { 
	border-left: none;
}
.overlay-link:nth-child(6) { 
	border-left: none;
	border-bottom-right-radius: 5px;
}	
/* The navigation links inside the overlay */
.overlay-link a {
  text-decoration: none;
  font-size: 28px !important;
  display: block; /* Display block instead of inline */
  font-size: 1.0em;
  letter-spacing: 1.2px;
  font-family: 'Oxygen' ;
  
}
@media screen and (min-width:767px){
  .overlayopen{display:none;}
}
.Navbar__Link-toggle, .Navbar__Link-user {
  display: none;
}
.Navbar__Items, .Navbar__Items--right, .Navbar__Link-brand {
	cursor: pointer;
}
.bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    margin: 6px 0;
    transition: 0.4s;
	border-radius: 4px;
}
.bar2 {transition: 0.3s; }
.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
    transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {
	 position: relative;
	 width: 0;  
	 opacity: 0;
	}

.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-8px, -8px);
}
.site-navigation {
    transition: height 0.3s;
	overflow: hidden;
}
.Navbar__Items--right {
  margin-left:auto;
  padding-left: 15px;
  border-left: 1px dashed rgba(160,160,160,0.8);
}	
  .Signup { 

	
	  box-shadow:  
              3px 3px 0px 0px rgba(78,109,156,1),
			  -3px -3px 0px 0px rgba(78,109,156,1),
			  3px -3px 0px 0px rgba(78,109,156,1),
			   -3px 3px 0px 0px rgba(78,109,156,1);
	border: 1px dashed #7E97BB;
	border-radius: 7px;
	height: 34px;
	margin-top: 3px;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 3px;
    color: white !important;
	height: 36px;
	transition: 0.4s  !important;
}
.Signup a { 
position: relative;
top: -6px;
}
.Signup:hover {
  background-color:  #335485  !important;
  box-shadow:  
              3px 3px 0px 0px #335485,
			  -3px -3px 0px 0px #335485,
			  3px -3px 0px 0px #335485,
			  -3px 3px 0px 0px #335485;
			  
}	
.Signup .fa-user, .fa-sign-in-alt {
	font-size: 15px ;
}
.buttonstyle2 {
	margin-left: 15px;
	background: rgba(78,109,156,0);
	border: 1px solid #7E97BB;
	border-radius: 7px;
	color: rgba(78,109,156,1) !important;
    transition: 0.4s  !important;
}
.buttonstyle2:Hover {
    background-color: rgba(230,230,230,1);
	
}
/* Ipad Pro*/
@media only screen and (max-width: 1024px) {
	  .nav-wrapper {
	  width: 100%;
  }
}
/* mobile/tablet version*/
@media only screen and (max-width: 768px) {
  .Navbar__Items, .Navbar , .nav-wrapper {
    flex-direction: column;
	justify-content: space-between;
	flex-wrap:wrap;
	
	
  }
  .nav-wrapper {
	  width: 100%;
  }
  .mobile-wrap {
  
  }
  .Navbar__Items {
     width:0;/* added*/
	 height:0;/* added*/
	 overflow:hidden;
	 
  }
  .Navbar__Items--right {
    margin-left:0;
  }
  .Navbar__Link-brand {
	margin:auto;
  }
  .Navbar__ToggleShow {
	  width: 100%;
   background-color: rgb(0,0,0);
  }
  .Navbar {
    padding-left: 0px;
	padding-right: 0px;
    background: -webkit-linear-gradient(top, rgba(232,232,232,1) 0%, rgba(246,246,246,1) 100%, rgba(237,237,237,1) 100%);
  }
  .mobilenav {

	   padding-bottom: 0px;
	   
  }
  .Navbar__ToggleShow div{
	  border-top: 1px solid #DBDBDB;
  }
    .Navbar__ToggleShow div:first-child{
	  border-top: 2px solid #DBDBDB;
	  
  }
  	.Modern-Slider .Slick-Navigation {
		height: 0px;
		border: none;
	}
  .Navbar__Link-toggle {
    align-self: flex-start;
    display: initial;
    position: absolute;
    cursor: pointer;
	top: 12px;
	color: rgba(78,109,156,1);
   }
  .Navbar__Link-user {
    align-self: flex-end;
	display: initial;
	 position: absolute;
    cursor: pointer;
	top: 12px;
   } 
   .Navbar__Link-toggle, .Navbar__Link-user {
     font-size: 35px;
   }
	.site-navigation div:after { 
	      content:none;

   }
	.site-navigation div:hover::after { 
	content:none;
	}
	.Modern-Slider .Gallery-Slider .img-fill {
      height: 300px; /* Added */
    }
	.Modern-Slider .slick-dots{
		opacity: 0;

	}
	.Modern-Slider .Gallery-Slider:hover .PrevArrow {
      opacity: 0 !important;
   }
    .Modern-Slider .Gallery-Slider:hover .NextArrow {
    opacity: 0;
	}
}
@media only screen and (min-width: 769px) {
  .Modern-Slider .Gallery-Slider:hover .PrevArrow {
    opacity: 1 !important;
   }
   .Modern-Slider .Gallery-Slider:hover .NextArrow {
    opacity: 1;
  }
}

.site-navigation div {
	   /* -webkit-transition: width 2s;  */
    /* transition: 2s; */
}
.site-navigation div:hover {
	color: rgb(28, 121, 184);
}
/* Animated Bottom Line */
.site-navigation div:after {
    content: '';
	position: relative;
    display: block;
    width: 0;
    height: 2px;
	top: 0px;
    background: rgb(28, 121, 184);
    transition: width .5s;
}
.site-navigation div:hover::after {
    width: 100%;
    //transition: width .3s;
}
/* Slick Slider */
/* ==== Main CSS === */
body{padding:0;margin:0;}
.img-fill {
  width: 100%;
  display: block;
  overflow: hidden;
  position: relative;
  text-align: center
}

.img-fill img {
  height: 100%;
  min-width: 100%;
  position: relative;
  display: inline-block;
  max-width: none
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.04);
}

.Grid1k {
  padding: 0 15px;
  max-width: 1200px;
  margin: auto;
}

.blocks-box,
.slick-slider {
  margin: 0 0;
  padding: 0!important;
}

.slick-slide {
  float: left /* If RTL Make This Right */ ;
  padding: 0px;
}



/* ==== Slider Style === */
.Modern-Slider{
  position:relative;
}
.Gallery-Slider {
  position: relative;
  overflow: hidden;
  background: red;
}
.Modern-Slider .Gallery-Slider {
	 background: #000;
}
.Modern-Slider .NextArrow{
  position:absolute;
  top:50%;
  right:0px;
  width:45px;
  height:45px;
  background:rgba(0,0,0,.50);
  background:rgba(78, 109, 156,.20);
  border:0 none;
  margin-top:-22.5px;
  text-align:center;
  font:20px/45px FontAwesome;
  color:#FFF;
  z-index:5;
    transition: all 1s;
	opacity: 0;
}

.Modern-Slider .NextArrow:before{content:'\f105';}

.Modern-Slider .PrevArrow{
  position:absolute;
  top:50%;
  left:0px;
  width:45px;
  height:45px;
  background:rgba(0,0,0,.50);
  background:rgba(78, 109, 156,.20);
  border:0 none;
  margin-top:-22.5px;
  text-align:center;
  font:20px/45px FontAwesome;
  color:#FFF;
  z-index:5;
  opacity: 0;
  transition: all 1s;
  
}

.Modern-Slider .PrevArrow:before{content:'\f104';}

.Modern-Slider .Gallery-Slider .img-fill {
  /* height: 50vh; /* Removed */
  background:#000;
  max-height: 340px; /* Added */ 
  display: flex !important; /* Added */
  justify-content: center; /* Added */
}
.Modern-Slider .img-fill:before {
  content: '';
  display: block;
  width:100%;
  height:100%;
  top:0px;
  left:0px;
  z-index:2;
  background:rgba(0,0,0,.50);
  position: absolute;
}

.Modern-Slider .img-fill img{
  filter:blur(5px);
}

.Modern-Slider .img-fill .info {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  z-index:3;
  top:20%;
  padding:0 20px;
}
.Gallery-Slider .Slick-Gallery:hover .NextArrow {
  opacity: 1;
}
.NextArrow:hover, .PrevArrow:hover {
  width: 50px;
}
.NextArrow:focus, .PrevArrow:focus{
  outline:0;

}
.Modern-Slider .img-fill h3{
  font:22px/50px RalewayB;
  color:#FFF;
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
  visibility:hidden;
  text-transform:uppercase;
}

.Modern-Slider .img-fill p{
  max-width:650px;
  margin:auto;
  margin-top:15px;
  font:14px/22px NeoSansR;
  color:#FFF;
  height:66px;
  text-align:justify;
  overflow:hidden;
  visibility:hidden;
  text-transform:capitalize;
}

.Modern-Slider .slick-active h3{
  animation:fadeInDown 1s both 0.5s;
  visibility:visible;
}
.Modern-Slider .slick-active p{
  animation:fadeInUp 1s both 1s;
  visibility:visible;
}
.Modern-Slider .slick-dots{
    position:absolute;
    height:50px;
    top:8px;
    width:100%;
    left:0px;
    padding:0px;
    margin:0px;
    list-style-type:none;
    text-align:center;
}

.Modern-Slider .slick-dots li{
    display:inline-block;
    width:15px;
    height:15px;
    background:Transparent;
    -webkit-transition:all 0.5s;
    transition:all 0.5s;
    -webkit-border-radius:50%;
    border-radius:50%;
    border:2px solid #FFF;
    margin:0 2.5px;
    cursor:pointer;
    position:relative;
}

.Modern-Slider .slick-dots li.slick-active{
    background:#fff;
    -webkit-box-shadow:inset 0 0 0 2px rgba(0,0,0,.28);
    box-shadow:inset 0 0 0 2px rgba(0,0,0,.28);
}

.Modern-Slider .slick-dots li a{
    position:absolute;
    bottom:100%;
    left:50%;
    width:120px;
    height:75px;
    display:block;
    visibility:hidden;
    border:4px solid rgba(0,0,0,.50);
    margin-left:-60px;
    margin-bottom:15px;
    -webkit-transition:visibility 0.5s linear 0.5s;
    transition:visibility 0.5s linear 0.5s;
    -webkit-animation:fadeOut 0.5s both;
    animation:fadeOut 0.5s both;
}

.Modern-Slider .slick-dots li a:after{
    content:'';
    position:absolute;
    left:50%;
    margin-left:-8px;
    top:100%;
    width:0;
    height:0;
    border:8px solid Transparent;
    border-top-color:rgba(0,0,0,.50);
    margin-top:4px;
}

.Modern-Slider .slick-dots li:hover a{
    visibility:visible;
    -webkit-transition-delay:0s;
    transition-delay:0s;
    -webkit-animation:fadeIn 0.5s both;
    animation:fadeIn 0.5s both;
    
}

.Modern-Slider .slick-dots li a img{
    width:100%;
    height:100%;
}
.Slick-Navigation {
	background:rgba(78, 109, 156,.20);
	/*background: linear-gradient(to bottom, #1E406E 0%,#4E6D9C 100%);  W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	border-top: 1px dashed rgba(78, 109, 156,.60);
	position: relative;
    height: 40px;
	top: -70px;
}
/* ==== Slick Slider Css Ruls === */
.slick-slider{position:relative;display:block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.slick-list{position:relative;display:block;overflow:hidden;margin:0;padding:0}
.slick-list:focus{outline:none}.slick-list.dragging{cursor:hand}
.slick-slider .slick-track,.slick-slider .slick-list{-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
.slick-track{position:relative;top:0;left:0;display:block}
.slick-track:before,.slick-track:after{display:table;content:''}.slick-track:after{clear:both}
.slick-loading .slick-track{visibility:hidden}
.slick-slide{display:none;float:left /* If RTL Make This Right */ ;height:100%;min-height:1px}
.slick-slide.dragging img{pointer-events:none}
.slick-initialized .slick-slide{display:block}
.slick-loading .slick-slide{visibility:hidden}
.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}

function toggle_menu() {
  const navs = document.querySelectorAll('.site-navigation')
  var element = document.getElementById("togglebutton");
  $(".site-navigation").toggleClass("mobilenav"); 
  $(".nav-wrapper").toggleClass("mobile-wrap"); 
  $(".overlay").toggleClass("overlayopen"); 
  navs.forEach(nav => nav.classList.toggle('Navbar__ToggleShow'));
  element.classList.toggle('change');

  

}

function toggleanimation(x) {
    x.classList.toggle("change");
}
$(document).ready(function() {
  
  $(".Gallery-Slider").slick({
    autoplay: true,
    autoplaySpeed:9000,
    speed:700,
    mobileFirst: true,
    slidesToShow:1,
    slidesToScroll:1,
    pauseOnHover:false,
	dots:true,
	 appendDots:$(".Slick-Navigation"),
    respondTo:'min',
    cssEase:'linear',
    prevArrow:'<button class="PrevArrow "></button>',
    nextArrow:'<button class="NextArrow"></button>', 
  })
  
})
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.