@charset "utf-8";

body
{
  overflow-y:scroll;
  background-color:#000;
  margin:0;
  padding:0;
  font-family:Montserrat
}

.navbar_main
{
  width:100%;
  height:100px;
  background-color:#000;
  color:#FFF;
  position:fixed;
  z-index:10; 
}

.navbar_logo_container
{
  float:left;
  width:250px;
  padding-top:10px;
  padding-right:20px;
}

.navbar_links_container
{
  margin-left:270px;
  padding-top:0px;
  font-size:20px;
}

.navbar_link
{
  float:left;
  padding-right:20px 
}

.navbar_link a
{
  text-decoration:none;
  color:#FFF;
}

.container_main
{
  width:100%;
  color:#FFF;
  position:relative;
  top:100px;  /* should be the same as height in .navbar_main */
}

#home_page_container
{
  opacity: 0;
  height:100%;
  background-image:url( '../images/AboutPageBackground.jpg' );
  background-size:100%;
  background-repeat:no-repeat;  

  /* Second parameter is duration, fourth is delay */
  animation: fadeIn 1.5s ease-out 1.0s forwards;
}

#home_page_text
{
  /* Second parameter is duration, fourth is delay */
  animation: fadeInUp 1.0s ease-out 1.5s forwards;

  /* background: linear-gradient( */
  color: linear-gradient(
    90deg,
    red,
    orange,
    yellow,
    green,
    blue,
    indigo,
    violet,
    red
  );

  /*
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: rainbow 3s linear infinite;
  animation-delay: 3s;
  */

  opacity: 0;
}

@keyframes fadeIn
{
  from
  {
    opacity: 0;
  }
  to
  {
    opacity: 1;
  }
}

@keyframes fadeInUp
{
  from
  {
    opacity: 0;
    transform: translateY(150px);
  }

  to
  {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes rainbow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}

.mobile_menu_container
{
  position:fixed;
  top:0px;
  width:100%;
  background-color:#000;
}

.mobile_menu_burger_outer_container
{
  width:100%;
  height:180px;
}

.mobile_menu_burger_inner_container
{
  float:left;
  width:20%;
  height:140px;
}

.mobile_menu_burger
{
  width:60%;
  height:100px;
  border-radius:10px;
  background-color:#000;
  padding:30px;
  padding-top:20px;
}

.mobile_menu_burger hr
{
  height:15px;
  border-width:0px;
  border-radius:7px;
  background-color:#FFF;
  color:#FFF;
}

.mobile_menu_burger div
{
  width:100%;
  height:3px;
}

.mobile_menu_logo
{
  float:left;
  width:80%;
  height:150px;
}

.mobile_menu_logo_image
{
  float:left;
  height:130px;
  padding-top:10px;
}

.mobile_menu_logo_title
{
  float:left;
  padding-left:20px;
  padding-top:40px;
}

#mobileMenu
{
  text-align:center;
  width:100%;
  background-color:#000;
  color:#FFF;
  display:none;
}

#mobileMenuExpanded
{
  text-align:center;
  width:100%;
  background-color:#000;
  color:#FFF;
  display:none;
}

.mobile_menu_items
{
  width:100%;
  padding-bottom:40px;
  font-weight:bold;
  font-size:40pt;
}

.mobile_menu_items div
{
  padding:5px;
}

.mobile_menu_items div a
{
  text-decoration:none;
  color:#FFF;
}

.mobile_content_inner
{
  width:100%;
  /* position:fixed; */
  /* top:200px; */
  padding-top:200px;
  color:#FFF;
}

.mobile_content_inner p
{
  padding-left:20px;
  padding-right:20px;
  font-size:12pt;
}

.mobile_content_inner h1
{
  padding-left:20px;
}

#services_dropdown
{
  width:200px;
  position:fixed;
  top:100px;
  background-color:#000;
  padding:20px;
  padding-top:10px;
  /* border-left: 1px solid #777; */
  /* border-bottom: 1px solid #FFF; */
  /* border-bottom-left-radius: 10px; */
}

#services_dropdown div
{
  width:100%;
  background-color:transparent;
  color:#FFF;
}

#services_dropdown a
{
  text-decoration:none;
  color:#FFF;
}

#myVideo
{
  position: fixed;
  right: 0;
  bottom: 0;
  width: 100%;
  /* min-height: 100%; */
}

.portfolio_previous_link
{
  text-decoration:none;
  float:left;
  font-weight:bold;
  font-size:20px;
  color:#FFF;
  padding-top:5px;
  padding-bottom:5px;
  padding-left:10px;
  padding-right:10px;
  background-color:transparent;
  /* cursor:pointer */
}

.portfolio_next_link
{
  text-decoration:none;
  float:right;
  font-weight:bold;
  font-size:20px;
  color:#FFF;
  padding-top:5px;
  padding-bottom:5px;
  padding-left:10px;
  padding-right:10px;
  background-color:transparent;
  /* cursor:pointer */
}