.title-bar {
	background: #00b36b;
}

.title-bar-title{
	
}

.top-bar, .top-bar ul{
	background: #00b36b;
}

.menu-text{
	color: #ffffff !important;
	font-size: 1.5em;
	font-family: "Gothic A1", system-ui;
  	font-weight: 100 !important;
  	font-style: normal;
}

.menu a{
	padding: 0;
	color: #ffffff;
}

.top-bar-left{
	font-size: 1.5em;
	font-family: "Gothic A1", system-ui;
  	font-weight: 100;
  	font-style: normal;
}

.iconright{
	margin-left: auto;
	margin-right: 0px;
}

body{
	font-family: "Source Sans 3", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
	font-size: 20px;
	background: #fff;
	color: #eeeeee;
	overflow-x: hidden;
}


.centercontent{
	max-width: 65rem;
	margin:auto;
}

.topsection2{
	padding-left: 5vw;
	padding-right: 5vw;
}

@media only screen and (min-width: 768px) {
  .topsection{
		animation: herobgfadeout linear forwards;
		animation-timeline: view();
		animation-range: exit;
	}
}

.topsection{
	padding: 23vh 10vw;
	/*background-size: cover;

	animation: herobgfadeout linear forwards;
	animation-timeline: view();
	animation-range: exit;*/
}

@keyframes herobgfadeout{
	15% {opactiy:1;}
	50%, 100% {opacity: 0; scale:2; }
}

.topsectionh1{
	font-weight: 300;
}
.topsectionh3{
	font-weight: 300;
}

h1{
	font-family: "Gothic A1", system-ui;
  	font-weight: 100;
  	font-style: normal;
	color: #000;
	font-size: 7vw;
}

h1.light{
	color: #fff;
}


h2{
	font-family: "Gothic A1", system-ui;
    font-weight: 100;
    font-style: normal;
	color: #000;
	font-size: 6vw;
}
h2.light{
	color: #fff;
}

h3{
	font-family: "Gothic A1", system-ui;
    font-weight: 200;
    font-style: normal;
	color: #000;
	font-size: 4vw;
}
h3.light{
	color: #fff;
	font-weight: 100;
}

@media only screen and (min-width: 768px) {
  h2{
		font-size: 4vw;
	}
  h3{
		font-size: 2vw;
	}
}

h4{
	font-family: "Gothic A1", system-ui;
  	font-weight: 200;
  	font-style: normal;
	color: #000;
}
h4.light{
	color: #fff;
}

h5{
	font-family: "Gothic A1", system-ui;
 	font-weight: 200;
	font-style: normal;
	color: #000;
	font-size: 1.5rem;
}
h5.light{
	color: #fff;
}

p{
	color: #000;
	max-width: 950px;
	font-weight: 400;
}
p.light{
	color: #fff;
	font-weight: 100;
}

li {
    color: #000;
}

.feedbackarea{
	margin-top: 7rem;
	margin-bottom: 19rem;
}

.feebacksection{
	scale: .8; 
	opacity: 0;
	animation: fade-in linear forwards;
	animation-timeline: view();
	animation-range: entry;
}

.feedback{
	font-family: "Source Sans 3", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-size: 5vw;
/*    color: #000;*/
}

.myworksection{
	background-color: #111;
	padding-top: 5vh;
	padding-bottom: 5vh;
}

.projectsection{
	padding-top: 10vh;
	padding-bottom: 10vh;
}

.disco{
	background-color: #000000;	
}

.acqresults{
	padding-left: 5vw;
	padding-right: 5vw;
}

.circ{
	background-color: #111111;
}

.circsolution{
	padding: 5vw;
}
.circsolutionimg{
	padding: 2vw;
}

@media print, screen and (min-width: 40em) {
    .grid-container {
        padding-right: 5rem;
        padding-left: 5rem;
    }
}

.grid-container{
	/*max-width: 65rem;*/
	max-width: 100vw;
}


.portrait{
    max-height: 40rem;
    padding-left: 5%;
    padding-right: 5%;
    margin-bottom: 5rem;
    border-radius: 50%;
}

.orbit-previous{
	display: none;
}
.orbit-next{
	display: none;
}
.orbit-slide{
	padding: 1rem auto 0 1rem;

}

.orbit-bullets {
    margin-top: auto;
    margin-bottom: 2rem;
}

.myworkcontainer{
	margin-bottom: 7rem;
}


.maincontent{
	margin-top: 3rem;
	margin-bottom: 7rem;
}

.sgimages{
	margin-top: 3rem;
}

.mocks{
	margin: 2rem 0rem;
/*	border-radius: 1%;*/

	scale: .8; 
	opacity: 0;
	animation: fade-in linear forwards;
	animation-timeline: view();
	animation-range: entry;

}

.mockpadding{
	padding: 10px;
}

.textimagespacer{
	padding-right: 2vw;
}

.centerimg{
	display: block;
 	margin-left: auto;
 	margin-right: auto;
}

.spacing{
	margin-bottom: 3rem;
}

.solutiontop{
	margin-top: 12vh;
}

.solution{
	padding-left: 10vw;
}

.acqsolutiontop{
	margin-top: 26vh;
}

.acqheaders{
	color:#00b36b;
	font-weight: 300;
}

.footer{
	background-color: #00b36b;
}

.footertext{
	max-width: none;
	color: #ffffff;
	margin: 0;
}

.headerimg{
	margin-top: 10vh;
}

.callout{
	background-color: transparent;
	border: none;
}

.shadow{
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.projectimage{
	margin-top: 6vh;
	scale: .8; 
	opacity: 0;
	border-radius: 1%;

	animation: fade-in linear forwards;
	animation-timeline: view();
	animation-range: entry;
}

@keyframes fade-in{
	to {scale: 1; opacity: 1;"}
}

.grid-container.disco{
	background-color: #000000;
}