@font-face {
    font-family: 'open_sans_light';
    src: url('../asset/OpenSans-Light-webfont.woff');
    font-weight: normal;
    font-style: normal;
	font-display: swap;
}

@font-face {
    font-family: 'open_sans_regular';
    src: url('../asset/OpenSans-Regular-webfont.woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.vidcontainer	{
	background-image: url("../asset/background.jpg");
	height: 100%;
	width: 100%;
}

.backcontainer	{
	background-image: url("../asset/raster2.png");
	width: 100%;
	height: 100vh;
}

body	{
	margin: 0px;
	padding: 0px;
	color: #CCC;
	height:100%;
	background-color: #050000;
	font-family: 'open_sans_regular',sans-serif;
	font-size: 1.4em;
}

h1,h2,h3,h4,h5 {
	font-family: 'open_sans_light',sans-serif;
	font-weight: lighter;
}

h1 span {}

h4 {
	font-size: 2.0rem;
}

section h4 {
	padding: 8px 0px;
	min-height: 48px;
}

a {
	text-decoration: none;
	color: #CCC;
	-webkit-transition: color 0.2s;
	transition: color 0.2s;
}

a:hover {
	color: #FFF;
}


#video-background {
/*  making the video fullscreen  */
  background-size: cover;
  position: fixed;
  object-fit: cover;
  right: 0; 
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
  width: auto; 
  height: auto;
  z-index: -100;
}

.maincontainer	{
	background-image: url("../asset/raster2.png");
	position: absolute;
	width:100%;
	top:0px;
	left:0px;
}

.visible	{
	opacity: 1;
}

.invisible	{
	opacity: 0;
}

.button	{
	margin: 16px auto;
	width: 79%;
	padding: 12px;
	text-align: center;
	border-color: #BBB;
    border-style: solid;
    border-width: 3px;
	-webkit-transition: border-color 0.2s;
	transition: border-color 0.2s;
}

.button:hover	{
	border-color: #FFF;
}

.bottomimp	{
	position: absolute;
	bottom: 16px;
	right: 16px;
	opacity: 0.6;
}

.impcontainer	{
	width: 300px;
	height: 250px;
	padding: 17px 20px;
	position:absolute;
	background-color: #B01;
	margin: 0px -170px;
	top:0px;
	left:50%;
}

.closebtn	{
	float:right;
	width: 24px;
	height: 24px;
	cursor: pointer;
}

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

section.fullscreen {
	min-height:90vh;
}

section.nearfullscreen {
	min-height:82vh;
}

#startpage .container {
	min-height:100vh;
	position:relative;
}


#trustedby, #services {
	background-color: #FFF;
}

#services {
	padding-top: 48px;
}

#trustedby {
	padding-top: 24px;
	margin-bottom: 32px;
}

.sectionspace	{
	height:48px;
}

.mainmenue {
	background-color: rgba(0,0,0,0);
	text-align:center;
	width: 100%;
	height: 24px;
	padding: 12px 0px;
	padding-bottom: 14px;
	margin-top: -48px;
    -moz-transition: background-color 0.1s ease-in;
    -webkit-transition: background-color 0.1s ease-in;
    -o-transition: background-color 0.1s ease-in;
    transition: background-color 0.1s ease-in;
    position:absolute;
    bottom:0px;
}

.mainmenue .menue-wrapper	{
	width: 100%;
}

.mainmenue.scrollout .menue-wrapper	{
	max-width: 960px;
	width: 80%;
	margin: 0px auto;
}

.mainmenue.scrollout	{
	background-color: rgba(0,0,0,0.75);
	position: fixed;
	margin: 0px 0%;
	width: 100%;
	top:0px;
	left:0px;
	z-index: 3000;
    -moz-transition: background-color 0.6s ease-in;
    -webkit-transition: background-color 0.6s ease-in;
    -o-transition: background-color 0.6s ease-in;
    transition: background-color 0.6s ease-in;
}

.service-image	{
	border: 4px solid #CCC;
	height: 160px;
	overflow: hidden;
	text-align: center;
}

.service-image div	{
	height: 100%;
}

.service-image svg {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

section .service-space	{
	border: 2px solid #CCC;
	width: 0px;
	opacity: 0;
    -moz-transition: width 0.5s ease-in, opacity 0.25s ease-in;
    -webkit-transition: width 0.5s ease-in, opacity 0.25s ease-in;
    -o-transition: width 0.5s ease-in, opacity 0.25s ease-in;
    transition: width 0.5s ease-in, opacity 0.25s ease-in;
}

section.onscroll.active .service-space	{
	width: 32px;
	opacity: 1;
}

.top	{
	margin-bottom: 24px;
}

.bottom	{
	margin-top: 24px;
}

.whitespace {
	height: 48px;
}

.paddingTop {
	margin-top: 48px;
}

.paddingBottom {
	margin-bottom: 48px;
}

.logocontainer	{
	height: 100vh;
	margin-top: -40px;
	text-align: center;
}

.socialbar	{
	height: 32px;
	padding: 4px 0px;
}

.logowrapper	{
	height: 260px;
	padding-top: 50vH;
	margin-top: -130px;
}


.subtitle	{
	text-align: right;
}

.sectiontitle	{
	/* margin-top: 48px; */
	margin-bottom: 48px;
}

.sectiontitle h5	{
	font-weight: bold;
}

.onscroll img.animated, .onscroll div.animated 	{
	opacity: 0;
    -webkit-transition: opacity 0.5s; /* Safari */
    transition: opacity 0.5s;
}

.onscroll.active img.animated, .onscroll.active div.animated	{
	opacity: 1;
}

.contactIcon {

}

.contactIcon p {
	float:left;
	font-size: 2.4rem;
	margin-top:35px;
	margin-left: 24px;
}

.contactIcon svg {
	height: 64px;
	width: 64px;
	margin-left: 24px;
	float:left;
}

.contactIcon a svg {
	float:left;
	font-size: 2.4rem;
	margin-top:24px;
	margin-left: 24px;
}

.anim50 {
	transition-delay: 50ms !important;
}

.anim100 {
	transition-delay: 100ms !important;
}

.anim150 {
	transition-delay: 150ms !important;
}

.anim200 {
	transition-delay: 200ms !important;
}

.anim250 {
	transition-delay: 250ms !important;
}

.footer	{
	background-color: #222;
	height:220px;
	margin-top: 96px;
	padding-top: 32px;
}

.footer h5 {
	font-size: 14px;
}

.footer p {
	font-size: 12px;
	margin-bottom: 1.5rem;
}

.clientRow
{
	min-height: 150px;
	background-color: #FFF;
}

.clientBox 
{
	height: 125px;
}

.clientBox .cimg1, .clientBox .cimg2 {
	cursor: pointer;
	width: 112px;
	height: 112px;
	transition: opacity 0.5s, transform 0.5s;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	position: absolute;
	margin-left: 5%;
}

.clientBox.cv1 .cimg1, .clientBox.cv2 .cimg2 {
	opacity: 1;
/*	-webkit-transform: scaleY(1);
	-moz-transform: scaleY(1); */
}

.clientBox.cv2 .cimg1, .clientBox.cv1 .cimg2 {
	opacity: 0;
	-webkit-transform: skewY(10deg) scaleY(0);
	-moz-transform: skewY(10deg) scaleY(0);
}

.onmobileShow {
	display: none;
}

.cheight {
	height: 256px;
}

/* White Version */
#trustedby, #services {
	color: #666;
}

#trustedby h1, #services h1 {
	font-weight: bold;
}

#trustedby, #services .service-space, #services .service-image {
	border-color: #666;
}

#services svg g.stream path {
	stroke: #666;
}

.disclaimer 
{
    background-color: #222;
    position: fixed;
    width: 100%;
    z-index: 5000;
    padding: 8px 32px 4px;
    text-align: center;
    font-size: 12px;
}

.disclaimer p
{
	margin-bottom: 1.5rem;
	margin-right: 5.0rem;
}

.disclaimer button
{
	height: 28px;
	line-height: 28px;
}

.disclaimer button.accept
{
	background-color: #D3161D;
	color: #FFF;
}

.animatedSubtitle  
{
	width: 420px;
	padding-left: 55px;
	padding-top: 32px;
	position: relative;
	left: 50%;
	margin-left: -200px;
}

.animatedSubtitle div 
{
	float:left;
	font-size: 16px;
	margin-right: 4px;
}

.animatedSubtitle div.a1 
{
    -webkit-animation: fadeAOne 	8s infinite;
    -moz-animation: fadeAOne  		8s infinite;
    -o-animation: fadeAOne 			8s infinite;
    animation: fadeAOne 			8s infinite;
}

.animatedSubtitle div.a2 
{
	margin-left: -58px;
    -webkit-animation: fadeATwo 	8s infinite;
    -moz-animation: fadeATwo  		8s infinite;
    -o-animation: fadeATwo 			8s infinite;
    animation: fadeATwo 			8s infinite;
}

.animatedSubtitle div.a4 
{
    -webkit-animation: fadeAFour 	8s infinite;
    -moz-animation: fadeAFour  		8s infinite;
    -o-animation: fadeAFour 		8s infinite;
    animation: fadeAFour 			8s infinite;
}

.animatedSubtitle div.a5 
{
	margin-left: -55px;
    -webkit-animation: fadeAFive 	8s infinite;
    -moz-animation: fadeAFive  		8s infinite;
    -o-animation: fadeAFive 		8s infinite;
    animation: fadeAFive 			8s infinite;
}

@-webkit-keyframes fadeAOne {
	0%  {opacity: 1;}
    10% {opacity: 1; transform: scaleY(1) translate(0px,0px);}
    20% {opacity: 0; transform: scaleY(0) translate(0px,32px);}
    60% {opacity: 0; transform: scaleY(0) translate(0px,-32px);}
    70% {opacity: 1; transform: scaleY(1) translate(0px,0px);}
    100% {opacity: 1;}
}

@-webkit-keyframes fadeATwo {
	0%  {opacity: 0; transform: scaleY(0) translate(0px,-32px);}
    10% {opacity: 0; transform: scaleY(0) translate(0px,-32px);}
    20% {opacity: 1; transform: scaleY(1) translate(0px,0px);}
    60% {opacity: 1; transform: scaleY(1) translate(0px,0px);}
    70% {opacity: 0; transform: scaleY(0) translate(0px,32px);}
    100% {opacity: 0; transform: scaleY(0) translate(0px,32px);}
}

@-webkit-keyframes fadeAFour {
	0%  {opacity: 1;}
    40% {opacity: 1; transform: scaleY(1) translate(0px,0px);}
    50% {opacity: 0; transform: scaleY(0) translate(0px,32px);}
    90% {opacity: 0; transform: scaleY(0) translate(0px,-32px);}
    100% {opacity: 1; transform: scaleY(1) translate(0px,0px);}
}

@-webkit-keyframes fadeAFive {
	0%  {opacity: 0; transform: scaleY(0) translate(0px,-32px);}
    40% {opacity: 0; transform: scaleY(0) translate(0px,-32px);}
    50% {opacity: 1; transform: scaleY(1) translate(0px,0px);}
    90% {opacity: 1; transform: scaleY(1) translate(0px,0px);}
    100% {opacity: 0; transform: scaleY(0) translate(0px,32px);}
}



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

	.animatedSubtitle div 
	{
		font-size: 15px;
	}
	.logowrapper img {
		width: 100%;
	}

	.three.columns.clientBox {
		width: 50%;
	}

	#video-background {
		top: 0px;
		height: 100vh !important;
	}
	.cheight {
		height: 128px;
	}
	.onmobileHide {
		display: none;
	}
	.onmobileShow {
		display: block;
	}
	.menue-wrapper .four {
		width:33%;
		font-size: 12px;
	}
	#contactus {
		margin-top: 32px;
	}
	h1 {
		font-size: 5rem;
	}
	h5 {
		font-size: 1.4rem;
		text-align: left;
	}
	section h4 {
		min-height: 24px;
	}
	.contactIcon p {
		font-size: 1.4rem;
		margin-top: 45px;
	}
	.contactIcon a svg {
		margin-left:0px;
	}
	.footer {
		height: auto;
	}
	.footer p {
		margin-bottom: 1rem;
	}
	.mainmenue	{
		background-color: rgba(0,0,0,0.75);
		position: fixed;
		margin: 0px 0%;
		width: 100%;
		top:0px;
		left:0px;
		z-index: 3000;
	}
	.mainmenue .menue-wrapper	{
		max-width: 960px;
		width: 80%;
		margin: 0px auto;
	}
}