/* colors magenta#8f277b cyan#278289 text-dark#222731 text-light#bbcccc artboard#f1f6ff*/
html {
  scroll-behavior: smooth;
}
body {
    font: 400 15px/1.8 Lato, sans-serif;
	margin-bottom: 60px;
	background: gray url(patternbg.png) repeat 0 0;
	-webkit-animation: slide 20s linear infinite;
  }
.abs-center-x {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.active{background-color: #D9230F; border-radius:5px; color:rgba(255, 255, 255, 0.9)!important; box-shadow: 0 0 20px 0 #f8897c;}
.redbg{background-color: red;}
.brandname{font-size:12px; letter-spacing:1.6px; font-weight: 600}
.contentpadding {padding: 1vh 3vw;}
.topbg{background-image: url(bodytopgred.png);
	background-repeat: repeat-x;
	background-attachment: fixed;height:180px}
/* navbar styling css */
.topmenu {padding:30px;}
.sidenav {max-width:222px; margin: 20vh 0 0 5vw; padding:1.5rem; max-height:80%,overflow:auto;}
.sidenav h3{letter-spacing:-1px; text-align: center;}
.portfolioimg section {margin-bottom: 170px;}
.portfolioimg h1 {text-align: center; font-weight: 200; border-bottom: dotted 2px #D9230F; margin-bottom:40px;}
.portfolioimg h4 {text-align: center; font-weight: 200; margin-bottom:0;}
.portfolioimg h4::before { content: "View Online"; padding-right: 8px;}
.imgoverlay {background-color: red; width:auto !important;}
.portfolioimg img {max-width:1200px; height: auto; display:block; margin: 30px auto 80px auto; box-shadow:2px 2px 50px 5px #bcbcbc;}
.navbarbg{background-color:rgba(255, 255, 255, 0.8); border:0px solid #eee; box-shadow: 0 0 30px 0 #efefef;}
.dropdown-item, .nav-link {padding:0.05rem 0.5rem}

.hero-bkg-animated {
  background: gray url(https://subtlepatterns.com/patterns/geometry2.png) repeat 0 0;
  width: 100%;
  margin: 0;
  text-align: center;
  height: 300px;
  padding-top: 120px;
  box-sizing: border-box;
  -webkit-animation: slide 20s linear infinite;
}

@-webkit-keyframes slide {
    from { background-position: 0 0; }
    to { background-position: -400px 0; }
}

 @media (max-width: 1400px) {
	.portfolioimg img{max-width: 800px; }
}
@media (max-width: 1024px) {
		.sidenav {
		display: none;
	}
	.portfolioimg img{max-width: 100%; }
} 
@media (max-width: 768px) {
		ul {
		margin-top: 10px;
	}
	
}