*{
     background: none;
	 
     font-family: 'Merriweather', serif;/* Title */
     font-family: 'Montserrat', sans-serif;/* Body */
	 
}

body{
	background-img:url("imgs/background.jpg") ;
}

/* NavBar */

 .navbar{
     background: #ccc;
}
 .navbar a{
     position: relative;
     font-family: 'Merriweather';
     color: #fff;
     text-decoration: none;
     padding: 10px;
}
 .tab{
     position:absolute;
     top: 47px;
     display: inline;
     float: right;
     background: #333;
	 margin-right: 0;
}
 .navbar ul{
     list-style-type: none;
     margin: 0;
     padding: 0;
     float: right;
}
 .navbar li{
     display: inline;
     text-decoration: none;
}
 .navbar li a {
}
 .navbar li a:hover{
     background: #666;
}
 .activenav{
     background: #666;
}



/* jumbotron */
 .jumbotron{
     background: #666;
     vertical-align: middle;
	 height: 20%px;
}

.jumbo2{
	height: 150px;
}

 .jumbotron h1{
     color: #fff;
     font-family: 'Merriweather';
     text-align: center;
}
 
 
 .about{
     width: 50%;
     position: relative;
     padding: 10px;
     margin:0 auto;
     vertical-align: middle;
}
 .about p{
     font-family: 'Montserrat';
     text-align: justify;
     color: #fff;
}
/* TimeLine */
 .timeline-container{
     margin: 0,auto;
    
     
	width: 100%;
}

.line{
	border: 5.5px solid #333;
	height:3940px;
	border-color: transparent #333 transparent transparent;
	position: absolute;
	margin-left: 49vw;
	top: 0;
	z-index: -10;
}

.line1, .line2, .line3, .line4, .line5, .line6, .line7, .line8 {
	border: 5px solid #333;
	border-color: transparent #333 #333 transparent;
	height: 675px;
	width: 300px;
	
	margin-left: 30%;
	position: absolute;
	border-radius: 0 0 20% 0%;
	margin-top: 150px;
}

.line2, .line4, .line6, .line8{
	transform: scaleX(-1);
	margin-left: 50%;
}

.line2{
	margin-top: 500px;
}

.line3{
	margin-top: 900px;
}

.line4{
	margin-top: 1250px;
}

.line5{
	margin-top: 1650px;
}

.line6{
	margin-top: 2000px;
}

.line7{
	margin-top: 2400px;
}

.line8{
	margin-top: 2750px;
}

/*.background{
	height: 100%;
	position: fixed;
	z-index: -1000;
	top: 0;
	object-fit:cover;
	object-position: bottom;
}*/

 .right-content, .left-content{
    
     display: inline;
    
}
 .left-content{
     width:50vw;
	 
}
 .right-content{
      margin-top: 350px;
	 width:50vw;
	 margin-bottom: 100px;
}
/* FlipCard */
 .card-container{
	 margin: 0 auto;
     perspective: 700px;
     width:300px;
     height:600px;
     margin-top: 150px;
}
 .left-content .card-container{
	 position: relative;
	 margin-right: 50%;
     
}
 .right-content .card-container{
     position: relative;
     margin-left: 50%;
}
 .card-flip, .card-container{
     transform-style: preserve-3d;
     transition: all 0.7s ease;
}
 .card-flip div{
     backface-visibility: hidden;
     transform-style: preserve-3d;
}
 .backcard{
     transform: rotateY(-180deg);
}
 .backcard h1{
     font-family: 'Merriweather';
     color: #666;
     text-align: center;
}
 .backcard p, .backcard a{
     font-family: 'Montserrat';
     text-decoration: none;
     color: #fff;
     margin: auto, 0;
}
 .card-container:hover .card-flip{
     transform: rotateY(180deg);
}
 .card-flip{
     display: grid;
     grid-template: 1fr / 1fr;
     grid-template-areas: "frontAndBack";
     transform-style: preserve-3d;
     transition: all 0.7s ease;
}



 .frontcard{
     grid-area: frontAndBack;
}
 .backcard{
     grid-area: frontAndBack;
     transform: rotateY(180deg);
     padding: 10px;
     margin: 0, auto;
     text-align: justify;
     background: #ccc;
}
/*EaseInSides*/
 .slide-right{
    -webkit-animation:slide-right .7s cubic-bezier(.25,.46,.45,.94) .25s both;
    animation:slide-right .7s cubic-bezier(.25,.46,.45,.94) .25s both
	
}
/* ---------------------------------------------- * Generated by Animista on 2021-5-6 4:17:53 * Licensed under FreeBSD License. * See http://animista.net/license for more info. * w: http://animista.net, t: @cssanimista * ---------------------------------------------- */
 @-webkit-keyframes slide-right{
    0%{
        -webkit-transform:translateX(0);
        transform:translateX(0)
    }
    100%{
        -webkit-transform:translateX(50%);
        transform:translateX(50%)
    }
}
@keyframes slide-right{
    0%{
        -webkit-transform:translateX(0);
        transform:translateX(0)
    }
    100%{
        -webkit-transform:translateX(50%);
        transform:translateX(50%)
    }
}



 .slide-left{
    -webkit-animation:slide-left .7s cubic-bezier(.25,.46,.45,.94) .25s both;
    animation:slide-left .7s cubic-bezier(.25,.46,.45,.94) .25s both
}
/* ---------------------------------------------- * Generated by Animista on 2021-5-6 4:20:22 * Licensed under FreeBSD License. * See http://animista.net/license for more info. * w: http://animista.net, t: @cssanimista * ---------------------------------------------- */
 @-webkit-keyframes slide-left{
    0%{
        -webkit-transform:translateX(0);
        transform:translateX(0)
    }
    100%{
        -webkit-transform:translateX(-50%);
        transform:translateX(-50%)
    }
}
@keyframes slide-left{
    0%{
        -webkit-transform:translateX(0);
        transform:translateX(0)
    }
    100%{
        -webkit-transform:translateX(-50%);
        transform:translateX(-50%)
    }
}

footer{
	 position: inline;
     font-family: 'Montserrat';
     height: 50px;
	 background: #ccc;
	 width: 100vw;
	bottom: 0;
}
 
 /* animate.css */
 
 
 
 .slideInRight.in-view {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}
 
 
 @-webkit-keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}


 
 
 
 
 footer{
	 width: 100vw;
	 margin-top: 20px;
 }
 
 footer img, footer h3{
	 height: 30px;
	 margin-top: 15px;
 }
 
 footer img{
	 margin-left: 10px;
 }
 
 footer h3{
	 font-size: 20px;
	 text-align: right;
	 margin-right: 5px;
	 
 }