html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Roboto';
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

section {
    /* min-height: 88vh; */
    width: 100%;
    box-sizing: border-box;
    /* margin-bottom: 5px; */
}

#one {
    background: #fff;
    background-size: cover;
    height: 100vh;
}

#two {
    background: rgb(255, 255, 255);
    background-image: url('/images/8b.jpg');
    background-size: cover;
    padding: 20px;
}

#three {
    background: #ffffff;
    padding: 20px;
    text-align: center;
}

#three h2, #four h2, #five h2 {
    display: block;
    margin: 0 auto;
    margin-top: 20px;
    font-size: 170%;
}

#four {
    background-image: url('images/7.jpg');
    background-size: cover;
    padding: 20px;
    text-align: center;
    color: #fff;
    min-height: 86vh;
}

.logo {
    width: 200px;
    display: block;
    margin: 0 auto;
    position: relative;
    top: 60px;
}

#ban {
    box-sizing: border-box;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 40%;
    padding: 20px;
    background: linear-gradient(338deg, #ff006e, #00dbff, #ccff00);
    background-size: 600% 600%;
    animation: backt 36s ease infinite;
    box-shadow: 0px -4px 15px 0px rgba(116, 116, 116, 0.75);
    /* border-radius: 10% 10% 0px 0px; */
}

@keyframes backt { 
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

#ban img {
    display: block;
    margin: 0 auto;
    width: 390px;
}

#by {
    text-align: center;
    font-size: 200%;
    font-size: 170%;
    color: #fff;
    font-family: 'Kaushan Script', cursive;
}

.next {
    display: block;
    margin: 0 auto;
    width: 190px;
    border-radius: 4px;
    background: #fff;
    text-align: center;
    padding: 7px;
    margin-top: 25px;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
    transition: box-shadow 0.4s;
}

#ban a:hover {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

#grid {
    padding: 30px;
    display: block;
    margin: 0 auto;
    text-align: center;
    overflow-x: auto;
}

.card {
    /* Add shadows to create the "card" effect */
    display: inline-block;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.514);
    transition: 0.3s;
    width: 300px;
    margin: 10px;
    margin-bottom: 40px;
    cursor: pointer;
}
  
.card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
  
  /* Add some padding inside the card container */
.txt {
    text-align: center;
    /* font-weight: bold; */
    font-size: 120%;
    padding: 10px;
}


#about {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    box-sizing: border-box;
    width: 55%;
    display: block;
    margin: 0 auto;
    background: rgb(43, 43, 43);
    color: #fff;
    padding: 20px;
    line-height: 25px;
    z-index: 999999;
}


#overlay {
    position: fixed; /* Sit on top of the page content */
    display: none; /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0; 
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.637); /* Black background with opacity */
    z-index: 9; /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer; /* Add a pointer on hover */
    overflow: auto;
    overscroll-behavior: contain;
}

#overlay img {
    z-index: 10;
    display: block;
    margin: 0 auto;
    margin-top: 60px;
    margin-bottom: 30px;
    float: left;
    width: 40%;
    margin-right: 10px;
}

#overlay div {
    z-index: 10;
    color: rgb(0, 0, 0);
    background: #fff;
    padding: 30px;
    overflow-y: auto;
    white-space: pre-wrap;
    margin: 10px;
}

#overlay p {
    color: #fff;
    font-size: 105%;
    position: relative;
    left: 13%;
    top: 5%;
}


#five p {
    display: block;
    margin: 0 auto;
    text-align: center;
    width: 400px;
    color: rgb(15, 15, 15);
    font-size: 120%;
    position: relative;
    top: 35%;
    margin-top: 30px;
    background: #fff;
    padding: 15px;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.514);

}

#five a {
    display: block;
    margin: 0 auto;
    text-align: center;
    margin-top: 60px;
    width: 180px;
    background: rgb(0, 189, 132);
    padding: 10px;
    color: #fff;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.514);
    font-size: 105%;
    border-radius: 4px;
    text-decoration: none;
    position: relative;
    top: 40%;
    transition: box-shadow 0.4s;
}

#five a:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.material-icons {
    vertical-align:middle;
}

.fd {
    opacity:0;
}

#four a {
    display: block;
    margin: 0 auto;
    margin-top: 40px;
    font-size: 105%;
    text-decoration: none;
    background:#fff;
    color: rgb(51, 51, 51);
    width: 350px;
    padding: 14px;
    text-align: left;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.514);
    transition: box-shadow 0.4s;

}

#four a i {
    font-size: 230%;
}

#four a p {
    display: inline;
    margin-left: 30px;
    font-size: 90%;
}

#four a:hover {
    box-shadow: 0 3px 10px 0 rgba(0,0,0,0.2);

}

footer {
    background: rgb(72, 84, 94);
    color: #b4b4b4;
    padding: 18px;
    text-align: center;
    line-height: 30px;
    font-size: 85%;
}

footer a {
    color: #fff;
    text-decoration: none;
}

@media screen and (max-width: 600px) {
    .logo {
        width: 180px;
    }

    #ban img {
        width: 100%;
    }

    #about {
        max-height: 300px;
        width: 100%;
        overflow-y: auto;
    }

    #one {
        height: 80vh;
    }

    
    #overlay p {
        display: block;
        margin: 0 auto;
        margin-top: 5px;
        text-align: center;
        position: static;
        left: auto;
    }

    #overlay img {
        float: none;
        display: block;
        margin: 0 auto;
        width: 95%;
        margin: 10px;
    }

    #overlay div {
        display: block;
        margin: 0 auto;
        margin: 10px;
    }

    #four a {
        width: 80%;
    }

    #four p {
        width: 90%;
    }



}



/* Animations */

.swing-in-top-fwd {
	-webkit-animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
	        animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2019-4-3 17:12:49
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation swing-in-top-fwd
 * ----------------------------------------
 */
 @-webkit-keyframes swing-in-top-fwd {
    0% {
      -webkit-transform: rotateX(-100deg);
              transform: rotateX(-100deg);
      -webkit-transform-origin: top;
              transform-origin: top;
      opacity: 0;
    }
    100% {
      -webkit-transform: rotateX(0deg);
              transform: rotateX(0deg);
      -webkit-transform-origin: top;
              transform-origin: top;
      opacity: 1;
    }
  }
  @keyframes swing-in-top-fwd {
    0% {
      -webkit-transform: rotateX(-100deg);
              transform: rotateX(-100deg);
      -webkit-transform-origin: top;
              transform-origin: top;
      opacity: 0;
    }
    100% {
      -webkit-transform: rotateX(0deg);
              transform: rotateX(0deg);
      -webkit-transform-origin: top;
              transform-origin: top;
      opacity: 1;
    }
  }
  

.bounce-in-top {
	-webkit-animation: bounce-in-top 1.1s both;
	        animation: bounce-in-top 1.1s both;
}

/* ----------------------------------------------
 * Generated by Animista on 2019-4-3 17:14:27
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation bounce-in-top
 * ----------------------------------------
 */
 @-webkit-keyframes bounce-in-top {
    0% {
      -webkit-transform: translateY(-500px);
              transform: translateY(-500px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
      opacity: 0;
    }
    38% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
      opacity: 1;
    }
    55% {
      -webkit-transform: translateY(-65px);
              transform: translateY(-65px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    72% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
    81% {
      -webkit-transform: translateY(-28px);
              transform: translateY(-28px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    90% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
    95% {
      -webkit-transform: translateY(-8px);
              transform: translateY(-8px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    100% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
  }
  @keyframes bounce-in-top {
    0% {
      -webkit-transform: translateY(-500px);
              transform: translateY(-500px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
      opacity: 0;
    }
    38% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
      opacity: 1;
    }
    55% {
      -webkit-transform: translateY(-65px);
              transform: translateY(-65px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    72% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
    81% {
      -webkit-transform: translateY(-28px);
              transform: translateY(-28px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    90% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
    95% {
      -webkit-transform: translateY(-8px);
              transform: translateY(-8px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    100% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
  }
  

.shadow-drop-center {
	-webkit-animation: shadow-drop-center 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: shadow-drop-center 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2019-4-3 18:25:37
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation shadow-drop-center
 * ----------------------------------------
 */
 @-webkit-keyframes shadow-drop-center {
    0% {
      box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }
    100% {
      box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
    }
  }
  @keyframes shadow-drop-center {
    0% {
      box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }
    100% {
      box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
    }
  }

  .ball {
    position: absolute;
    border-radius: 100%;
    opacity: 0.7;
  }
  










  /* cars */

  
.wrapper{
  width: 55%;
  position: relative;
  margin:0 auto;
  margin-top: 60px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);

}


@media screen and (max-width: 600px) {

    .wrapper{
        width: 100%;
        margin-top: 70px;
    }   

}

/**
 * Padding is set relative to the width
 * of the element, so here padding-top:60% is
 * a percentage of the width. This allows us 
 * to set the height as a ratio of the width
 *
 */
.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: rgba(255, 255, 255, 0);
	list-style-type: none;
	border-radius: 50%;
  cursor:pointer;
  transition: background 0.3s ease-out;
}

.indicators li.active{background:#00ffbf00}

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

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

.arrow:hover{border-color:#00ffbf00}

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

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

/**
 * ==========================
 * For demo purposes only
 * 
 * Please note that the styles below are used
 * for the purposes of this demo only. There is no need
 * to use these in any of your own projects
 *
 */
.slide{
	text-align:center;
  padding-top:25%;
  background-size:cover;
}

h1{
	width:100px;
  height:100px;
  background-color:rgba(146, 45, 141,0.7);
	margin:auto;
  line-height:100px;
	color:#fff;
	font-size:2.4em;
  border-radius:50%;
}

.slide:nth-child(1){
	background-image:url('/images/1.jpeg');
 }

.slide:nth-child(2){
	background-image:url('/images/2.jpeg');
}

.slide:nth-child(3){
	background-image:url('/images/3.jpeg');
}

.slide:nth-child(4){
	background-image:url('/images/4.jpeg');
}

.slide:nth-child(5){
	background-image:url('/images/5.jpeg');
}

.slide:nth-child(6){
	background-image:url('/images/6.jpeg');
}

.slide:nth-child(7){
	background-image:url('/images/8.jpeg');
}
 
.slide:nth-child(8){
	background-image:url('/images/9.jpeg');
}