body {	
margin: 0px;
position: relative;
}

.background-container{
	position: relative;
	text-align:center;
  background-color: #58667e;
}
.background-tint {
  background-color: white;
  opacity: 0.8;
  width: 100%;
  height: 95vh;
  overflow: hidden;
}
/*
.title{
	position: absolute;
	top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
 /* background-color:black;
  opacity:0.6;
  border-radius: 5px; */
  /*
  animation: textmove 1.3s cubic-bezier(0.42, 0, 0.175, 0.3);
  color: white;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  font-size: 90px;
  font-family: 'Catamaran', sans-serif;
}
*/

/*
.title hr{
  margin: -7px auto 15px auto;
  width: 65%;
}
*/
@keyframes textmove{
    0% {transform: translate(-50%,100%); opacity:0;}
    100% {transform: translate(-50%, -50%); opacity:0.6;}
}

.title{
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 35%;
 
}

/* [New] Figured out a better solution to video size for different aspect ratios */
#myVideo{
  min-width: 100%;
  max-height: 100%;
  object-fit:cover;
}
#backgroundimage{
  min-width: 100%;
  max-height: 100%;
  object-fit:cover;
}

/* [Old] Changing video's width/height based on user's aspect ratio */
/*

@media only screen and (min-aspect-ratio: 16/9) and (max-aspect-ratio:21/9){    

    #myVideo {
        width: 100%;
        height: auto;
    }
}

@media only screen and (min-aspect-ratio: 16/10) and (max-aspect-ratio:16/9){  

    #myVideo {
        height: 100%;
        width: auto;
    }
}


@media only screen and (min-aspect-ratio: 4/3) and (max-aspect-ratio:16/10){  

    #myVideo {
        width: 130%;
        height: auto;
    }
}


@media only screen and (min-aspect-ratio: 5/4) and (max-aspect-ratio: 4/3){   

    #myVideo {
        height: 100%;
        width: auto;
    }
}

*/


.navbar-container{
  width: 100%;
  height: 5%;
  position: relative;
}
.navbar{
	position: absolute;
	width: 100%;
  transition:0.5s;
	background-color: white;
	text-align: center;
  z-index: 10;
  padding: 5px 0px 5px 0px;
  margin: 0px;
  bottom: 0px;
}

.navbar a:hover{
  transition:0.5;
  opacity: 0.6;
}
.navbar li {
  font-family: 'Catamaran', sans-serif;
  font-size: 25px;
  display: inline-block;
  text-align: center;
  bottom: 0px;
  text-transform: uppercase;
  color: #262626;
  padding: 5px 0px 5px 20px;
  letter-spacing: 5px;
  font-weight: 500;
}

.fixed {
  position: fixed;
  top: 0px;
  width: 100%;
  height: 5%;
  transition:0.5s;
  background-color: #262B29;
  box-shadow: 0px 0px 20px 10px #4d454f;
}
.fixed li{
  color: white;
}
.parallax{
  position: relative;
  text-align:center;
}
.parallax-tint {
  background-color: #58667e;
}
.parallax-photo {
    background-image: url(../img/parallax_pic_rsz.jpg);
    min-height: 600px; 
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.3;

}
.parallax2-photo {
    background-image: url(../img/projects2.png);
    min-height: 600px; 
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.3;
}
.parallax3-photo {
    background-image: url(../img/travel.jpg);
    min-height: 600px; 
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.3;
}
.parallax-title{
  position: absolute;
  font-family: 'Oswald', sans-serif;
  padding: 0px 50px 0px 50px;
  border-style: solid;
  border-width: 7px;
  border-color: #FFF;
  font-size: 55px;
  letter-spacing: 6px;
  color: #FFF;
  text-transform: uppercase;
  transform: translateX(-50%)translateY(-50%); 
  top: 50%;
  left: 50%;
  background-color: rgba(51, 51, 51, 0.5);
  box-shadow: 0px 0px 20px 3px black;
}
.parallax-title:hover{
  background-color: rgba(51, 51, 51, 0.75);
  cursor: pointer;
}
#about-title.open{
  background-color: rgba(51, 51, 51, 1);
}
.about-explain{
  position: absolute;
  font-family: 'Montserrat', sans-serif;
  background-color: rgba(51, 51, 51, 0.75);
  border-style: solid;
  border-width: 2px;
  border-color: #FFF;
  font-size: 16px;
  letter-spacing: 3px;
  color: #FFF;
  transform: translateX(-50%)translateY(-50%); 
  top: 70%;
  left: 50%;
  width:380px;
  display:none;
}
.about-container{
  width: 65%;
  margin: 0px auto 0px auto;
  box-shadow: inset 0px 0px 5px black;
  background-color: white;
}
.economics{
  display: inline-block;
  margin: 30px 0 20px 0;
}
.economics-icon{
  position: relative;
  right: 20px;
  width: 160px;
  float: right;
}
.economics-title{
  text-align: center;
  font-size: 27px;
  width: 500px;
  float: right;
  color:#262626;
}
.economics-paragraph{
  color: rgba(51, 51, 51, 0.6);
  padding: 10px 25px;
  font-size: 17px;
}
.product{
  display: inline-block;
  margin: 40px 0px 20px 0px;
}
.product-icon{
  position: relative;
  width: 160px;
  float: left;
}
.product-title{
  text-align: center;
  font-size: 27px;
  width: 500px;
  float: left;
}
.product-paragraph{
  color: rgba(51, 51, 51, 0.6);
  padding: 10px 25px;
  font-size: 17px;
}
.game{
  display: inline-block;
  margin: 30px 0 20px 0;
}
.game-icon{
  position: relative;
  right: -10px;
  top: 30px;
  float: right;
}
.game-icon img{
  width: 150px;
}
.game-title{
  text-align: center;
  font-size: 27px;
  width: 500px;
  float: right;
  color:#262626;
}
.game-paragraph{
  color: rgba(51, 51, 51, 0.6);
  padding: 10px 25px;
  font-size: 17px;
}

.project-container{
  width: 65%;
  margin: 0px auto 0px auto;
  box-shadow: inset 0px 0px 5px black;
  background-color: white;
}
.project1{
  display: inline-block;
  margin: 30px 0px 20px 0px;
}
.project1-icon{
  position: relative;
  float: right;
}
.project1-icon img{
  height:175px;
  border-radius: 10px;
}
.project1-title{
  text-align: center;
  font-size: 27px;
  width: 500px;
  float: left;
}
.project1-paragraph{
  color: rgba(51, 51, 51, 0.6);
  padding: 10px 25px;
  font-size: 17px;
}
#gallery{
  margin: 0px auto 0px auto;
  padding: 7px;
  width: 80%;
  background-color: #262B29;
}


.footer2{
  background-color: #fdecda;
}
.social-media2{
  text-align: center;
}
.social-media2 img{
  display: inline-block;
  width: 50px;
  padding: 0px 0px 16px 0px;
}
#facebook-logo{
  width: 42px;
  position: relative;
  top: 2px;
}
#twitter-logo{
  width: 44px;
  position: relative;
  top: 3px;
}

.footer-navigation{
  text-align: center;
  margin: 0px;
  padding:16px 0px 8px 0px;
}

.footer-subtext{
  text-align: center;
  margin: 0px;
  padding:0px 0px 8px 0px;
}
.footer-subtext li{
  display: inline-block;
}
.footer-navigation li{
  display: inline-block;
  font-size: 20px;
  padding: 0px 5px 0px 5px;
  text-transform: uppercase;
  font-family: 'Catamaran', sans-serif;
  color: #262626;
}


.big-text{
  margin: 0px auto 0px auto;
  font-size: 50px;
  text-align: center;
  width: 15%;
}
hr{
  width: 20%;
  text-align: center;
}
.small-text{
  margin: 0px auto 0px auto;
  text-align: center;
  width: 30%;
  padding-bottom: 20px;
  font-size: 18px;
}

.seperator{
  height: 10px;
  background-color: gray;
  box-shadow: inset 0px 0px 5px black;
}


@keyframes stroke {
  from {
      stroke-dasharray: 400px;
      stroke-dashoffset: 400px;
  } to {
       /* stroke-dasharray: 0px; */
      stroke-dashoffset: 0px;
  }
}

#animate{
  stroke-dasharray:400px; 
  stroke-dashoffset:400px; 
  animation-name:stroke;
  animation-duration:3.5s;
  animation-delay:0.75s;
  animation-fill-mode:forwards;
  animation-iteration-count:1; 
}

  #section1 {padding: 50px 0px 50px 0px;color: black; background-color: #fdecda; text-align: center; box-shadow: inset 0px 0px 30px 2px black; font-family: 'Catamaran', sans-serif;}
  #section2 {padding: 50px 0px 50px 0px;color: black; background-color: #f5f5f5; text-align: center; box-shadow: inset 0px 0px 30px 2px black; font-family: 'Catamaran', sans-serif;}
  #section3 {padding: 50px 0px 50px 0px;color: #fff; background-color: white; box-shadow: inset 0px 0px 30px 2px black; }
  #last-section {padding-top:25px;color: black; background-color: #f5f5f5;}