html,body{
  font-family: ubuntu, sans-serif;

  background-color: #000;
  max-width: 100%;
  overflow-x: hidden;





}
section {
  display: block;
}



	
.title-content {
  display:table-cell;
}

.section-title {

  text-align: center;
}



.section-title h3 {
color: #000;
background-color:#D8D9D8 ;
display: inline-block;
text-transform: uppercase;
line-height: 36px;
padding: 10px 20px;
letter-spacing: 2px;
font-size: 24px;
margin: 1rem 0rem;
border-radius: 4px;
}

.background-title.inverted {
  background-color:#fff;
  color:#000;
}

strong {
font-weight: 700;
}

p {
font-size: .8rem;
margin-bottom: 1;
line-height: 1.2;
color: #ffffff;
text-align: center;
margin-left: 10px;
}

.nav-link.tabportfolio{
  width: 20rem;
  border: 1px solid white;
  border-radius: 6px 6px 0px 0px;
  background-color: #000;
  margin: 0rem .5rem 0rem .5rem;
  color: #555;
}
.nav-link.tabportfolio:active {
  position:relative;
  top:1px;
  left:1px;
 
}









/* 6. Portfolio */	
	
    .container.portfolio-title {
      padding-bottom: 0px;
      }	
  
      #portfolio {
      padding-bottom: 0;
     
      }
        
/* Portfolio Filters */	

#filters {
  margin-top: 20px;
  margin-bottom: 60px;
  text-align: center;
  display: block;
  float: none;
  z-index: 2;
  position: relative;
}

#filters ul {
  margin-left:0px;
}

#filters ul li {
  display: inline-block;
  margin:0 5px;
}

#filters ul li a {
  display: block;
  font-style:normal;
  color:rgb(255, 255, 255);
}


#filters ul li:last-child a:after {
  content:"";
  padding-left:0px;
}

	/* Portfolio Items */	

	#portfolio-wrap {
		position: relative;
		padding: 0rem 1rem;
		width: 100%;
		margin: 0 auto;
		display: block;
	}
	
	#portfolio-wrap.boxed {
		width:900px;
	}
.portfolio-header {
   color: #fff;
  font-weight: 900;
  font-size: 1.5rem; 
  text-align: center;
padding: 1rem 0rem 1rem 0rem;
}

.portfolio-item {
height: 20rem;

}
.portfolio-item .portfolio-image-test {
  background-position: center center;
  background-repeat: no-repeat;
  background-size:cover;
  display: block;
  overflow: hidden;
  padding: 0rem;
  padding-bottom: 64%;
  position: relative;
  border:#608FD1 4px solid;
}

.portfolio-item .portfolio-image-video {
  background-position: center center;
  background-repeat: no-repeat;
  background-size:cover;
  display: block;
  overflow: hidden;
  padding-bottom: 64%;
  position: relative;
  border:#608FD1 4px solid;
}
.portfolio-item .portfolio-image-web {
  background-position: center center;
  background-repeat: no-repeat;
  background-size:cover;
  display: block;
  overflow: hidden;
  padding-bottom: 64%;
  position: relative;
  border:#608FD1 4px solid;
}
.portfolio-item .portfolio-image-gfx {
  background-position: center center;
  background-repeat: no-repeat;
  background-size:cover;
  display: block;
  overflow: hidden;
  padding-bottom: 64%;
  position: relative;
  border:#608FD1 4px solid;
}


.list-group-item  {
    border-radius: 0px;
    padding: .5rem;
    width: 90%;
    background-color: cadetblue;
     
}
.list-group-item:hover {
    background-color: rgb(201, 201, 201);
  
}
.card-body {
  margin: 0rem 0rem 0rem 0rem; 
  text-align: left; 
  
}
.card-title {
    color: white;
    text-align: left;
    text-decoration: none;

}

.card-text {
    color: white;
  text-align: left;
  font-size: .8rem;
  text-decoration: none;
  text-align: left;
}

.card-text-b {
    color: black;
  text-align: left;
}

.btn-port {
color: #000 !important;
background-color:#D8D9D8; 
text-align: center;
padding: .25rem;
border-radius: 4px;
margin: 2rem 0rem 0rem 0rem;
width: 10rem;
text-decoration: none;

}

.btn-port:hover {
  color: #fff ;
  background-color: rgb(91, 91, 91);
  font-style: normal;
  }



.btn-vidpopup {
  color: #000 ;
  text-align: center;
  padding: .25rem;
  border-radius: 4px;
  margin: 2rem 0rem 0rem 0rem;
  width: 10rem;
  text-decoration: none;
  background-color:#D8D9D8; 
  border: none;

}
.btn-vidpopup:hover {
  color: #fff;
  background-color: rgb(47, 47, 47); 
  border: none;

}

.project-info {
  position: absolute;
  height: 100px;
  width: 95.5%;
  top: 50%;
  margin-top: -50px;
text-align: center;
}

.project-name {
  color:#fff;
  text-transform:uppercase;
  margin-top:32px;
  margin-bottom:0px;
  opacity:0;
  
  -moz-transition:all 0.2s ease 0s;
    -webkit-transition:all 0.2s ease 0s;
    -ms-transition:all 0.2s ease 0s;
  -o-transition:all 0.2s ease 0s;
  transition:all 0.2s ease 0s;
}

.portfolio-item:hover .project-name { 
  opacity:1;
  -webkit-transition: opacity .2s .3s;
  -moz-transition: opacity .2s .3s;
  -ms-transition: opacity .2s .3s;
  -o-transition: opacity .2s .3s;
  transition: opacity .2s .3s;
}

.project-categories {
  font-size:13px;
  color:#fff;
  opacity:0;
  margin-top:5px;
  
  font-style:italic;
  color:rgba(255,255,255,0.6);
  
  -moz-transition:all 0.2s ease 0s;
    -webkit-transition:all 0.2s ease 0s;
    -ms-transition:all 0.2s ease 0s;
  -o-transition:all 0.2s ease 0s;
  transition:all 0.2s ease 0s;
  
}
/* Portfolio Isotope Transitions */	

.isotope, .isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
  -moz-transition-duration: 0.8s;
  -ms-transition-duration: 0.8s;
  -o-transition-duration: 0.8s;
  transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
  -moz-transition-property: height, width;
  -ms-transition-property: height, width;
  -o-transition-property: height, width;
  transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
  -moz-transition-property: -moz-transform, opacity;
  -ms-transition-property: -ms-transform, opacity;
  -o-transition-property: -o-transform, opacity;
  transition-property: transform, opacity;
}

.isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
  -moz-transition-duration: 0s;
  -ms-transition-duration: 0s;
  -o-transition-duration: 0s;
  transition-duration: 0s;
}





.one_half {
  color: #bababa;
  text-align: center;
  padding: 1rem 2rem 2rem 2rem;
}

.background-title {
  font-size: 1rem;
 font-style: italic;
  display: inline-block;
  padding: .5rem;
  color: #D8D9D8;
border-radius: 8px;
}

.about-section {
background-color: #92AFD8; 
background-size: cover;
height: 100vh;
padding: 4rem 0rem; 
color: white;
margin-bottom: 0rem; 
padding-bottom: 6rem; 
}

.about-text {
  width: 70%;
font-size: 1.5rem; 
margin-top: 4rem;
text-align: center;
}

/*Go to Top*/
#myBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: #585858; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 18px; /* Increase font size */
}

#myBtn:hover {
  background-color: #555; /* Add a dark-grey background on hover */
}

/*---HOME STUFF-------------------------------*/
.home-logo{
  width: 100%;
  text-align: left; 
  margin-left: 4rem;
}
 .home-img{
    width: 36rem;
  }
.home-headline {
  text-align: center; 
  margin-left: 1rem;
  margin-top: 1rem;
  font-size:3.5rem;
  font-weight: 900;
  line-height: 4rem;
  }
  .home-headline-sub { 
    text-align: center; 
    margin-left: 1rem;
    font-size:3rem;
    margin-top: 0rem;
  }
  .home-blurb {
  text-align: center; 
  margin-right: 4rem; 
  margin-top: 2rem;
  font-size: 1.2rem;
  line-height: 1.5rem;
  }

 

 


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

.home-logo{
  width: 100%;
  margin-left: .5rem;
}
.home-img{
  width: 24rem;
}
.home-headline {
text-align: center; 
margin-left: 0rem;
margin-top: 2rem;
font-size:2.2rem;
font-weight: 900;
}
.home-headline-sub { 
  text-align: center; 
  margin-left: .25rem;
  font-size:2rem;
}
.home-blurb {
  text-align: left; 
  margin-left: 0rem; 
  width: 80%;
  margin-top: 2rem;
  font-size: 1rem;
  line-height: 1.5rem;
  }

  .one_half {
    text-align: left;
    padding: 1rem 1rem 2rem .5rem;
    width: 90%;
  }
  .background-title {
    text-align: left;
    font-size: 1rem;
   
    display: inline-block;
    padding: .5rem;
    color: #fefffe;
  border-radius: 8px;
  }


.section-title {
  width: 60%;
  margin-left: 1rem;
  }

  .about-section {
    height: 100%; 
    
    }

  .about-text {
    font-size: 1.2rem; 
    margin: 1rem 1rem;
    text-align: left;
    }

  .navbar-collapse {
      background-color: black;
      color: white;
      padding-left: 1rem;
   }
   .nav {
    z-index:999;
   }
}

#mute {
  width: 50px;
  height: 50px;
/*background-image: url(/images/icons/audio_red.png);
background-size: contain;*/


}


.fa{
  font-size: 2em;
  padding-top: .5rem;
  color:#fff;
  cursor: pointer;
  transition:0.3s;
}




.card {
  width: 14rem;
  aspect-ratio: 16/9;
  margin: 1.2rem;
  border-radius: 16px;
  border: 1px solid  #f7f7fc;
  background: transparent;
  box-shadow: 3px 3px 40px 5px rgba(0, 255, 255, 0);
  transition: box-shadow 1s ease-in-out;
  }
  
  .card:hover {
  box-shadow: 3px 3px 40px 5px rgba(0, 255, 255, 0.30);
  transition: box-shadow 1s ease-in-out;
  }

  .cardLi {
    
   background: #6452A276;
    }
.cardLi:hover {
  background: #6352a2;
}

  .card-title {
  text-shadow: 1px 1px 2px rgb(0, 0, 0), 0 0 1em rgb(11, 11, 11), 0 0 0.2em rgb(12, 12, 12);
  color: rgb(255, 255, 255);
  position: absolute;
  top: 1rem;
  left: 1rem;
  
  }
  
  
  .card img {

  transition: filter .5s ease-in-out;
  transition: opacity .5s ease-in-out;
  opacity: 70%; 
  border-radius: 10px;
  }
  
  .card img:hover {
  -webkit-filter: grayscale(0%); /* Ch 23+, Saf 6.0+, BB 10.0+ */
  filter: grayscale(0%); /* FF 35+ */
  opacity: 100%; 
  transition: filter .5s ease-in-out;
  transition: opacity .5s ease-in-out;
  }