@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap');
@font-face {
font-family: "Big John";
src: url("../fonts/bigjohnpro-bold.otf");
}

* {
	font-family: DM Sans, sans-serif;
}

html{scroll-behavior:smooth}

.cookies-eu-banner {
background: rgba(0,0,0,0.44);
    color: #fff;
    padding: 16px;
    line-height: 18px;
    font-size: 13px;
    text-align: center;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 99999;
}

.hiddenCookies {
  display: none;
}

.cookies-eu-banner button {
  text-decoration: none;
  background: #ff643b;
  color: #fff;
  border: none;
  cursor: pointer;
  padding: 4px 7px;
  margin: 2px 0;
  font-size: 13px;
  font-weight: 700;
  transition: background 0.07s, color 0.07s, border-color 0.07s;
}

.cookies-eu-banner button:hover {
  background: white;
  color: #ff643b;
}

#myToTopBtn {
  display: none;
  position: fixed;
  bottom: 10px;
  right: 10px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: #ff8c3e;
  color: white;
  cursor: pointer;
  padding: 8px;
  border-radius: 4px;
  z-index: 997;
 border-radius: 50%;

}

.active{
	margin-bottom:16px;
}

#myToTopBtn:hover {
  background-color: white;
  color: #ff8c3e;
  box-shadow: rgb(0 0 0 / 45%) 0px 5px 15px;

}
#myToTopBtn svg
{
	fill: rgb(255, 255, 255);
	color: #ff8c3e;
	    width: 30px;
}
#myToTopBtn:hover svg{
	fill: #ff8c3e;
}

.language-select{
	display: flex;
	align-items: center;
	  position: absolute;
    right: 16px;
}

.language-select img{
	width:25px;
	cursor: pointer;
	padding: 3px;
	display: block;
}	

.language-select p{
	margin:0 5px;
	color:#ff643b;
}

#lightBoxCards,#lightBoxHighlight,#lightBoxWhy{
box-sizing: border-box;
padding: 20px; 
justify-content: center;
flex-direction: column;
display: none;
width: 100%;
height: 100%;
object-fit: scale-down;
z-index: 999;
position: fixed;
align-items: center;
}

.backgroundLightBox{
 display: block;
 width: 100%;
 height: 100%;
background-color:rgba(0,0,0,0.8);
top: 0;
left: 0;
color: white;
position: absolute;
z-index: 0;
}	

#lightBoxCards div, #lightBoxHighlight div,#lightBoxWhy div{
max-width : calc(100% - 60px);
max-height : calc(100% - 60px);
width: fit-content;
height: fit-content;
z-index: 1;
}

#lightBoxCards img, #lightBoxHighlight img, #lightBoxWhy img{
    display: none;
    width: 100%;
    height: 100%;
    object-fit: scale-down;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

.logo{
	margin-bottom: 18px;
}

.background{
	background :url("../images/SVG/background_3.svg")  no-repeat center center; 
	 -webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;
  	height: 100vh;
	width: 100%;
	top: 0;
	z-index: -9999;
	position:absolute ;
	min-height: 600px;

}

#heroImage img:not(#clouds,#cloudsTop){
	width: 80%;
	height: auto;
	max-width: 400px;
	margin: 0 auto;
	display: block;
	/*box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
	 border-radius: 30px;*/
	 /*box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;*/
	 -webkit-filter: drop-shadow(0px 5px 15px rgba(0, 0, 0, 0.35));
  	filter: drop-shadow(0px 5px 15px rgba(0, 0, 0, 0.35));
}

header {
	padding: 12px;
	display: flex;
	height:135px;
	/*height:193px;*/
	flex-direction: column;
	box-sizing: border-box;
	background-color: #fff;
	z-index: 998;
	/*border-bottom: 0.5px solid rgba(255, 100, 59, 1);*/
}

header > * {
	align-self: center;
}
#downButton a {
    position: absolute;
    color: #f1574d;
    font-size: 20px;
    top : 10px;
    left: calc(30px - 6px);
   
    /* text-shadow: 1px 1px 0 rgba(0,0,0,0.5), 1px -1px 0 rgba(0,0,0,5), -1px 1px 0  rgba(0,0,0,0.5), -1px -1px 0 rgba(0,0,0,0.5), 1px 0px 0 rgba(0,0,0,0.5), 0px 2px 0 rgba(0,0,0,0.5), -1px 0px 0 rgba(0,0,0,0.5), 0px -1px 0 rgba(0,0,0,0.5); */
}

#downButton{
	content: '';
	display: block;
	width: 60px;
	height: 60px;
	background-color: white;
	border-radius: 100%;

position: absolute;	
bottom: -25px;
left: 50%;
transform: translateX(-50%);
}

#heroImage {
	height:calc(100vh - 156px);
	position: relative;
	/*border-top: 0.5px solid #fff;*/
	padding-top: 20px;
	min-height: 444px;
}

.heroImage{
	position: absolute;
	top:50%;
	transform: translateY(-50%);
	width:100%;
}

#heroImage h1, #heroImage h2 {
	
	box-sizing: border-box;
	width: 90%;
	max-width: 400px;
	text-align: center;
	color: #819dc6;
	border-radius: 5px;
	letter-spacing: 2px;
	line-height: 20px;
	margin: 0 auto;
}

#heroImage h2 span.subTitle {
	font-size: 16px;
	border-radius: 5px;
	background-color: #fff;
	display: block;
	 padding: 16px;
	 box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
	 margin-top: 10px;
	 color: #ff643b;
}

#heroImage h1 span.title {
	display: block;
	margin-bottom: 10px;
	font-size: 22px;
	color: white;
	font-weight: 600;
    text-transform: uppercase;
	border-radius: 5px;
	line-height: initial;
	border-radius: 5px;
    background-color: #fff;
    display: block;
        padding: 16px 24px;
    box-shadow: rgb(0 0 0 / 35%) 0px 5px 15px;
   	color: #ff643b;
   	letter-spacing: 3px;
}

.cloudsSeperator{
    width: 100%;
    height: auto;
    transform: rotate(180deg);
    display: block;

}




#cloudsTop.clouds{
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0.8;
	top: 0;
	object-fit: cover;
    transform: rotate(180deg);
}	

#clouds.clouds{
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0.8;
	
    object-fit: cover;
}

.navigation a {
    text-decoration: none;
    padding: 6px 18px;
    color: #ff643b;
    border-radius: 5px;
    border: 1px solid #ff643b;
}

#heroImage h1 span.title  {
  /*animation: wiggle 15s infinite ease-in-out alternate;*/
   /* -webkit-animation-name: wiggle;
  -ms-animation-name: wiggle;
  -ms-animation-duration: 40000ms;
  -webkit-animation-duration: 40000ms;
  -webkit-animation-iteration-count: -1;
  -ms-animation-iteration-count: -1;
  -webkit-animation-timing-function: ease-in-out;
  -ms-animation-timing-function: ease-in-out;*/
}

 #heroImage h2 span.subTitle {
  /*animation: wiggle2 18s infinite ease-in-out alternate;*/ 
}

/*#heroImage h1 span.title {
  -webkit-animation-name: wiggle;
  -ms-animation-name: wiggle;
  -ms-animation-duration: 30000ms;
  -webkit-animation-duration: 30000ms;
  -webkit-animation-iteration-count: -1;
  -ms-animation-iteration-count: -1;
  -webkit-animation-timing-function: ease-in-out;
  -ms-animation-timing-function: ease-in-out;
}*/

/*#heroImage h2 span.subTitle {
  -webkit-animation-name: wiggle2;
  -ms-animation-name: wiggle2;
  -ms-animation-duration: 150000ms;
  -webkit-animation-duration: 150000ms;
  -webkit-animation-iteration-count: -1;
  -ms-animation-iteration-count: -1;
  -webkit-animation-timing-function: ease-in-out;
  -ms-animation-timing-function: ease-in-out;
}
*/

@-webkit-keyframes wiggle {
  0% {-webkit-transform: rotate(1.5deg);}
  25% {transform: translateY(5px) rotate(-1.5deg);}
  50% {transform: translateY(0px) rotate(1.5deg);}
  75% {transform: translateY(-5px) rotate(-0.75deg);}
  100% {transform: translateY(0px) rotate(0deg);}
}

@-ms-keyframes wiggle {
  0% {-ms-transform: rotate(1.5deg);}
  25% {transform: translateY(5px) rotate(-1.5deg);}
  50% {transform: translateY(0px) rotate(1.5deg);}
  75% {transform: translateY(-5px) rotate(-0.75deg);}
  100% {transform: translateY(0px) rotate(0deg);}
}

@keyframes wiggle{
  0% {transform: rotate(1.5deg);}
  25% {transform: translateY(5px) rotate(-1.5deg);}
  50% {transform: translateY(0px) rotate(1.5deg);}
  75% {transform: translateY(-5px) rotate(-0.75deg);}
  100% {transform: translateY(0px) rotate(0deg);}
}

@-webkit-keyframes wiggle2 {
  0% {-webkit-transform: rotate(-1.5deg);}
  25% {transform: translateY(-5px) rotate(1.5deg);}
  50% {transform: translateY(0px) rotate(-1.5deg);}
  75% {transform: translateY(5px) rotate(0.75deg);}
  100% {transform: translateY(0px) rotate(0deg);}
}

@-ms-keyframes wiggle2 {
  0% {-ms-transform: rotate(-1.5deg);}
  25% {transform: translateY(-5px) rotate(1.5deg);}
  50% {transform: translateY(0px) rotate(-1.5deg);}
  75% {transform: translateY(5px) rotate(0.75deg);}
  100% {transform: translateY(0px) rotate(0deg);}
}

@keyframes wiggle2{
  0% {transform: rotate(-1.5deg);}
  25% {transform: translateY(-5px) rotate(1.5deg);}
  50% {transform: translateY(0px) rotate(-1.5deg);}
  75% {transform: translateY(5px) rotate(0.75deg);}
  100% {transform: translateY(0px) rotate(0deg);}  
}

.container {
	
	display: flex;
	flex-direction: column;
	padding: 10px;
	align-items: center;
	margin: 0 auto;
}

#examples {
	padding: 16px;
	padding-bottom: 0;
}

#examples h1{
margin-bottom: 12px;
    color: #ff643b;
    text-align: center;
    font-size: 22px;
    font-weight: 200;
    padding: 0 12px;
    line-height: 30px;
    letter-spacing: 2px;

}

#header h1{
	
    color: #ff643b;
    text-align: center;
    font-size: 22px;
    font-weight: 200;
    padding: 0 12px;
    line-height: 30px;
    letter-spacing: 2px;
   } 

#examples h2{
	position: relative;
	color: #ff643b;
    font-weight: 400;
    line-height: 24px;
    margin-top: 36px;
    letter-spacing: 2px;
    font-size: 16px;
   /* box-shadow: rgb(0 0 0 / 45%) 0px 5px 15px;
   	background-color: #ff8e06;*/
    /*color: #ff643b;*/
    padding: 30px;
    background-color: #ff8c3e;
    color: white;
}

.cardText{
	position: relative;
	box-shadow: rgb(0 0 0 / 45%) 0px 5px 15px;
}


.cardText .screw{
	position: absolute;
	z-index: 1;
	width: 15px;
	/*left: 50%;
	transform: translateX(-50%);*/

}	

.cardText .screw:nth-child(1){
	left: 5px;
	top: -9px;

}	
.cardText .screw:nth-child(2){
	top: -9px;
	right: 5px;
	transform: rotate(-100deg);
}

.cardText .screw:nth-child(3){
	bottom: -9px;
	left: 5px;
	transform: rotate(-55deg);
}
.cardText .screw:nth-child(4){
	bottom: -9px;
	right: 5px;
	transform: rotate(45deg);
}


.card{
	position: relative;
    width: 100%;
    max-width: 500px;
    background-color: #fafafa;
    margin-bottom: 20px;
    padding: 36px;
    box-sizing: border-box;
    box-shadow: rgb(0 0 0 / 45%) 0px 5px 15px;
    z-index: 1;
}

.card:nth-child(1) .image{
	animation: wiggle2 8s infinite ease-in-out alternate; 
}

.card:nth-child(2) .image{
	animation: wiggle 9s infinite ease-in-out alternate; 
}	

.card:nth-child(3) .image{
	animation: wiggle2 10s infinite ease-in-out alternate; 
}	

.image {
	overflow: hidden;

}

.image:hover img, .imageContainer:hover img{
transform: scale(1.08);  
 cursor: pointer;
}

.image img, .imageContainer img {
		transition:all .8s;-webkit-transition:all .8s;transition:all .8s;
	width: 100%;
	height: auto;
	 /*box-shadow: rgba(0, 0, 0, 0.45) 0px 5px 15px;*/
}

#useCase{
	position: relative;
	/*margin-bottom: 5px*/;
	    overflow: hidden;

}

.containerWhy{
	position: relative;
	padding: 0 10px;
}

#useCase .line{
	/*border-left: 1px dotted #ff8c3e;
	border-right: 1px dotted #ff8c3e;
	background-color: #949494;*/
	    background-image: linear-gradient(white,#ff643b, white);

    width: 10px;
    height: 800px;
    position: absolute;
    left: 50%;
    transform: translateX(48%);
    
}

.containerWhy .screw{
	position: absolute;
    width: 8px;
    left: 50%;
    transform: translateX(70%);
    z-index: 1;
}

.containerWhy .screw:nth-of-type(1) {
    top: -18px;
}

.containerWhy .screw:nth-of-type(2) {
    top: 123px;
    transform: translateX(70%) rotate(-55deg);
}

.containerWhy .screw:nth-of-type(3) {
    top: 267px;
    transform: translateX(70%) rotate(-95deg);
}

.containerWhy .line:nth-of-type(1){
  /* top: -300px;*/
}


.whyHeader, #easyToUseHeder{
	padding: 0  10px;box-sizing: border-box;
	margin-bottom: 80px;
}

.standardCard{
	padding: 16px;
	box-shadow: rgb(0 0 0 / 45%) 0px 5px 15px;
	margin-bottom: 20px;
}

.whyCard{
	position: relative;
}

.whyCard h2{
	font-family: 'Big John';
	color: #fff;
	font-size: 36px;
	text-transform: capitalize;
	text-align: center;
	text-shadow: 2px 2px 0 #ff8c3e , 2px -2px 0 #ff8c3e , -2px 2px 0 #ff8c3e , -2px -2px 0 #ff8c3e , 2px 0px 0 #ff8c3e , 0px 2px 0 #ff8c3e , -2px 0px 0 #ff8c3e , 0px -2px 0 #ff8c3e ;
	   /* border: 1px dotted #ff643b; */
    max-width: 300px;
    margin: 0 auto;
    z-index: 2;
    padding: 12px;
    background-color: #ff8c3e;
     /*box-shadow: rgba(255, 100, 59, 0.25) 0px 30px 60px -12px inset, rgba(255, 100, 59, 0.3) 0px 18px 36px -18px inset;*/
   box-shadow: 0 8px 6px -6px black;


}

.whyCard:nth-of-type(1) {
	margin-bottom: 80px;
}

.whyCard:nth-of-type(2) {
	margin-bottom: 80px;
}

.whyCard:nth-of-type(1) h2{
	animation: wiggleWhy 4s infinite ease-in-out alternate; 
}

.whyCard:nth-of-type(2) h2{
	animation: wiggleWhy2 4s infinite ease-in-out alternate; 
	}

.whyCard:nth-of-type(3) h2{
	animation: wiggleWhy 4s infinite ease-in-out alternate; 
}

.whyHeader .cardText{
	margin: 0 auto;
	max-width:350px;

}


#useCaseOld{
	display:none;
}



.panelSection {
   max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;

}

.accordion{
	cursor: pointer;
}

.accordion img{
	transition: transform 0.2s ease-out;
}

.active img{
	transform:translateY(-50%) rotate(0deg)!important;
}

.firstSpan{
	display:block;
	color:#ff643b;
	text-align: center;
	background-color: white; 
	margin-bottom:16px;
	font-size:18px;
	font-weight: 600;padding:8px;
	letter-spacing: 2px;
}



.h2_mobileWhyClass{
	position:relative;
	padding: 16px;
	box-sizing: border-box;
	transition: 0.4s;
	display:block;
	color:#ff643b;
	text-align: center;
	background-color: white; 
	font-size:18px;
	font-weight: 600;
	padding:8px;
	letter-spacing: 2px;
}

.img_mobileWhyClass{
	right: 5px; 
	height: 24px; 
	position: 
	absolute;top: 50%;
	transform:  translateY(-50%) rotate(180deg);
	display: block;
}

.img_Desktop{
	display:none;
}

.imageHolderDesktop{
	display:flex;
	justify-content:space-around;
	flex-grow: 1;
	flex-basis: 0;
	padding: 16px;
	box-shadow: rgb(0 0 0 / 45%) 0px 5px 15px;
	animation: wiggle2 10s infinite ease-in-out alternate;
	align-items: center;
}

.imageHolderMobile{
	padding: 16px;
	box-shadow: rgb(0 0 0 / 45%) 0px 5px 15px;
	animation: wiggle2 10s infinite ease-in-out alternate;
	}

	.imgOnDesktop{
		width: 100%;
		height: auto;
		object-fit: contain;
	}

	.imageOnMobile{
		width: 100%;
		height: 100%;
		object-fit: cover
	}
/*.whyHeader .cardText h1 {
		
	position: relative;
    color: #ff643b;
    font-weight: 600;
    line-height: 24px;
    margin: 36px auto 0 auto;
    letter-spacing: 4px;
    font-size: 32px;
    box-shadow: rgb(0 0 0 / 45%) 0px 5px 15px;
    /* background-color: #ff8e06; */
    /* color: #ff643b; */
/*()    padding: 30px;
    text-align: center;
    background-color: #ff643b;
    color: white;
    max-width: 350px;
    border: 2px dotted white;
} */

.cardText form{
	position: relative;
	color: #ff643b;
    font-weight: 400;
    line-height: 24px;
    margin-top: 36px;
    letter-spacing: 2px;
    font-size: 16px;
    box-shadow: rgb(0 0 0 / 45%) 0px 5px 15px;
   	/*background-color: #ff8e06;*/
    /*color: #ff643b;*/
   padding: 60px 30px 30px 30px;
   padding :30px 15px 16px 15px;
    background-color: #ff8c3e;
    color: white;
}

.cardText .succes{
	  margin-top: 36px;
		position: relative;
		  padding: 60px 30px 30px 30px;
    background-color: #ff8c3e;

}

.whyHeader  .cardText .screw, #easyToUseHeader .screw, #examplesHeader .screw, #highlightHeader .screw, #contactHeader .screw{
	position: absolute;
	z-index: 1;
	width: 12px;
	/*left: 50%;
	transform: translateX(-50%);*/

}	

.whyHeader  .cardText .screw:nth-child(1), #easyToUseHeader .screw:nth-child(1), #examplesHeader .screw:nth-child(1), 
#highlightHeader .screw:nth-child(1), #contactHeader .screw:nth-child(1){
	left: 10px;
	top: -9px;


}	

.whyHeader  .cardText .screw:nth-child(1){
	left: 50%;
	top: -15px;
	transform: translateX(60%);
}

.whyHeader  .cardText .screw:nth-child(2), #easyToUseHeader .screw:nth-child(2), #examplesHeader .screw:nth-child(2),
#highlightHeader .screw:nth-child(2),#contactHeader .screw:nth-child(2){
	top: -9px;
	right: 10px;
	transform: rotate(-100deg);

}



.whyHeader  .cardText .screw:nth-child(3), #easyToUseHeader .screw:nth-child(3), #examplesHeader .screw:nth-child(3),
#highlightHeader .screw:nth-child(3),#contactHeader .screw:nth-child(3){
	bottom: -9px;
	left: 10px;
	transform: rotate(-55deg);
		
}



.whyHeader  .cardText .screw:nth-child(4), #easyToUseHeader .screw:nth-child(4),#examplesHeader .screw:nth-child(4),
#highlightHeader .screw:nth-child(4),#contactHeader .screw:nth-child(4){
	bottom: -9px;
	right: 10px;
	transform: rotate(45deg);
	
}



.whyCardWrapper{
	display:block;
}

#easyToUseHeader,#examplesHeader,#highlightHeader,#contactHeader,#whyHeader {
 position: relative;
 max-width: 900px;
 margin: 30px auto 0 auto;
 z-index: 2;

}

#examplesHeader{
	margin-top: 20px;
	margin-bottom: 30px;
}

.chain_left{
    
	margin-left: 25px;
	margin-top: -10px;
    transform: rotate(45deg);
    transform-origin: top left;
  
    width: 200px;
    position: absolute;
    z-index: 1;
display: none;
}

.chain_right{
   right: 0; 
	margin-right: 25px;
	margin-top: -10px;
    transform: rotate(-60deg);
    transform-origin: top right;
  
    width: 200px;
    position: absolute;
    z-index: 1;
    display:none;

}

.chain_left img, .chain_right img{
	width: 100%;
	
} 

#easyToUse .cardText{
	    margin: 40px auto 30px auto;
}

#easyToUseHeader h1, #examplesHeader h1, #highlightHeader h1,#contactHeader h1, #whyHeader h1{
	max-width: 100%;
			
	    background-color: #ff643b;
    color: white;
      font-weight: 600;
    line-height: 30px;
    padding: 16px;

        letter-spacing: 2px;
    font-size: 22px;
    box-shadow: rgb(0 0 0 / 45%) 0px 5px 15px;
    /* background-color: #ff8e06; */
    /* color: #ff643b; */

    text-align: center;
    background-color: #ff643b;
    color: white;
    
    border: 2px dotted white;
}

#whyHeader h1{
	box-shadow: initial;
}

#highlightHeader, #contactHeader {
	    margin-bottom: 48px;
    margin-top: 16px;
}

.gradientEffect{

    /* background-color: red; */
  
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
   height: 1000px;
    background-image: linear-gradient(to right, white 3%, rgba(255, 255, 255, 0), white 97%);
    z-index: 0;
}




.peoplePointing{
	width: 100%;
	height: auto;
	position: relative;

  	padding: 0 10px;
  	box-sizing: border-box;

  	max-width: 600px;
  	margin: 40px auto 0 auto;
}

.peoplePointing img{
		width: 100%;
	height: auto;

		 -webkit-filter: drop-shadow(0px 5px 15px rgba(0, 0, 0, 0.35));
  	filter: drop-shadow(0px 5px 15px rgba(0, 0, 0, 0.35));

  	box-sizing: border-box;


  

}

#useCase:after{
	/*content: "";
	margin-top: -3px;
	display: block;
	/*border-bottom: 1px solid black;
	width: 100%;
	height: 1px;
	 background-image: linear-gradient(to right, white , #ff643b, white);*/
}



@keyframes wiggleWhy{
  0% {transform: rotate(5deg);}
  25% {transform: rotate(3.5deg);}
  50% {transform: rotate(6.5deg);}
  75% {transform: rotate(1.75deg);}
  100% {transform: rotate(5deg);}
}

@keyframes wiggleWhy2{
  0% {transform: rotate(-5deg);}
  25% {transform: rotate(-3.5deg);}
  50% {transform: rotate(-6.5deg);}
  75% {transform: rotate(-1.75deg);}
  100% {transform: rotate(-5deg);}
}

#easyToUse{
	 /*(background-image: linear-gradient(white , rgba(255, 100, 59, 0.5), white); 
	 	background-image: linear-gradient(white , rgba(0, 0, 0, 0.6), rgba(0,0,0,0.5));
	 	background-image: linear-gradient(rgb(255 100 59 / 50%) ,white 30%);*/

}

#videoGallery{
	    /*transform: rotate(2deg);*/
    transform-origin: center;
}
 .buttonBack{
	transition: all 0.3s;
	border-radius:50%;
	 transform-origin: center;
}

.sliderNavigation{
	cursor: pointer;
	opacity: 0.2;
	   /*height: fit-content!important;*/
	
	border-radius: 50%;
	display: block;
}



.navigationButtonsVideo:hover .sliderNavigation, span.arrow.left:hover .sliderNavigation,span.arrow.right:hover .sliderNavigation{
	opacity: 1;
	/*box-shadow: rgb(0 0 0) 0px 5px 15px;*/


	 -webkit-filter: brightness(0) invert(1);
  filter: brightness(0) invert(1);

	

}
.navigationButtonsVideo:hover .buttonBack,span.arrow.right:hover .buttonBack,span.arrow.left:hover .buttonBack {
	background-color:#ff8c3e;
	
	
}


#videoWrapper{
	box-shadow: rgb(0 0 0 / 100%) 0px 5px 15px;
}

#videoWrapper .videoSlider{
	width: 100%;
	position: absolute;
	left: 50%;
    transform: translateX(-50%);
}

.navigationButtonsVideo{
	display: flex;
	padding: 0 16px;
	align-items: center;
	z-index:9;
	   
}

.video-js .vjs-big-play-button {
	width: 1.63332em!important;
	background-color: #ff643b!important;
}

.vjs-big-play-centered .vjs-big-play-button {
	margin-left: -0.81666em!important;
    border-radius: 100%!important;
    border-color: rgba(0,0,0,0)!important;

}

.vjs-paused.vjs-has-started .vjs-big-play-button {
  display: block;
}

.video-js .vjs-big-play-button {
	line-height: 1.55em!important;
	}

	.video-js .vjs-tech{
		background-color: white!important;
	}

	.bullet{
		width: 20px;
		height: 20px;
		background-color: #eee;
		border-radius: 100%;
		display: block;
		    margin: 0 3px;
		    cursor: pointer;
	}

#audiance {

}

	#audiance img {
		width: 100%;
		max-width: 1000px;
		display: block;
		margin: 0 auto;
	}

	#easyToUse h2 {
	    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    
    color: white;
    position: relative;
    z-index: 2;
    padding: 0 16px;
    letter-spacing: 2px;
    font-weight: 400;

   
    padding: 16px;
    width: 100%;
    font-size: 16px;
    line-height: 24px;
    line-height: 26px;

}

#easyToUse h2 strong, #examples h2 strong, .rotationText strong, .standardCard strong{
		 color: #ff8c3e;
		 background-color: white;
		 padding-left:8px;
		 padding-right: 8px;
		 display: inline-block;
		   font-weight: 600;
		   border:1px solid #ff8c3e;
		   text-align: center;
	}

	#easyToUse h2 strong:nth-child(1),#examples h2 strong:nth-child(1), .rotationText strong:nth-child(1), .standardCard strong:nth-child(1){
		transform: rotate(1.5deg);

	}

		#easyToUse h2 strong:nth-child(2),#examples h2 strong:nth-child(2),.rotationText strong:nth-child(2), .standardCard strong:nth-child(2){
		transform: rotate(-1.5deg);

	}

		#easyToUse h2 strong:nth-child(3),#examples h2 strong:nth-child(3), .rotationText strong:nth-child(3), .standardCard strong:nth-child(3){
		transform: rotate(1.5deg);

	}



		#easyToUse h2 strong:nth-child(4),#examples h2 strong:nth-child(4), .rotationText strong:nth-child(4), .standardCard strong:nth-child(4){
		transform: rotate(-1.5deg);

	}

			#easyToUse h2 strong:nth-child(5),#examples h2 strong:nth-child(5), .rotationText strong:nth-child(5), .standardCard strong:nth-child(5){
		transform: rotate(1.5deg);

	}

			#easyToUse h2 strong:nth-child(6),#examples h2 strong:nth-child(6), .rotationText strong:nth-child(6), .standardCard strong:nth-child(6){
		transform: rotate(-1.5deg);

	}

			#easyToUse h2 strong:nth-child(7),#examples h2 strong:nth-child(7), .rotationText strong:nth-child(7), .standardCard strong:nth-child(7){
		transform: rotate(1.5deg);

	}




#videoCaption{
	width: 100%;
}

#captionWrapper{
	position: relative;

}

#videoCaption h2{
display: none;
}

#videoCaption h2:nth-child(1){
	display: block;
}

.g-recaptcha iframe{
	width:100%!important;
}

form#contact textarea{
	width: 100%;
	font-size: 16px;
    padding: 8px 12px;
    color: #555555;
    border: none;
    border-radius: 5px;

}



.form-control {
	height: initial;
	border: none;
	padding: 8px 12px;

}

.btn-success:hover{

    /*box-shadow: 0 5px 10px #000!important;*/
    box-shadow: rgb(0 0 0 / 45%) 0px 5px 15px;
    background-color: #ff8c3e!important;
    color: white!important;
}


#containerClock{
  display: block;
  position: relative;
  height: calc(200px / 4);
  width: calc(200px / 4);
     background-color: white;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
      box-shadow: rgb(0 0 0 / 45%) 0px 5px 15px;
      position: fixed;
      bottom: 10px;
      right: 10px;
      z-index: 9999999999999999;
}

.box{
  display: block;
  position: absolute;
  height: calc(70px / 4);
  width: calc(10px / 4);
  background-color: #C80000; 
  border-radius: 10px;
}

.green{
  background: green;
}

.second{
  height: calc(90px / 4);
  width: calc(2px / 4);
  opacity: 0.5;
  background-color: #121232;
}

.minute{
  height: calc(80px / 4);
  width: calc(5px / 4);
  
  background-color: #ff643b;
}

.hour{
  height: calc(70px / 4);
  width: calc(10px / 4);
  
  background-color: #ff643b;
}

@keyframes wiggleContact{
0% {
    transform: rotate(0deg);
}
25% {
    transform: rotate(2deg);
}


50% {
    transform: rotate(-2deg);
}
100% {
    transform: rotate(0deg);
}
}

footer .footerContent{
	display: flex;
flex-direction: column;
align-items: center;
}

footer h2{
	margin-bottom: 10px;
	color: white;
	padding: 16px;
letter-spacing: 2px;
line-height: 24px;
}

#weewaaInfo{
	background-color: white;
}

#weather{
	background-color: white;

	padding: 0 0 0 0;
}

#weather .weatherContainer{

    flex-direction: column;
}


#weather div img{
	width: 110px;
	    margin: 0 auto;
    display: block;
}

#weather div{
height: fit-content;
    margin: 24px;

}

#weather p{
color: white;
font-size: 16px;
line-height: 26px;
text-align: center;
}

#weather p.temp:not(span){
	font-size: 45px;
	font-weight: 600;
	line-height: 45px;
	text-align: center;
	}
.social{
width: 100%;
}

	.social{
	margin-top: 24px;

		box-shadow: rgb(0 0 0 / 45%) 0px 5px 15px;
	}

.index a:link,
.index a:visited ,
.index a:hover ,
.index a:active  {
		text-decoration: none;
	padding: 8px 0;
color: #ff643b;
color: white;
  letter-spacing: 2px;

	}

.index li {
	    line-height: 22px;
	    display: flex;
     flex-direction: row;
}

.index li:before {
   /*font-style: normal;
    font-size:80%;
    vertical-align:middle;
    line-height: 34.5px;
    color: #ff643b;
    color: white;
*/
    font: normal normal normal 14px/1 FontAwesome;
    content: "\f054";
    margin-right: 7px;
    display: flex;
    align-items: flex-start;

    color:white;
    align-self: center;
    }

}


	.index  li::marker {
  font-size: 2em;
  align-items: center;
}


#weather p{
	text-align: center;
}


@media only screen and (min-height: 630px){
	#heroImage h2 span.subTitle {
		margin-top: 20px;
	}
	#heroImage h1 span.title {
		/*margin-bottom: 20px;*/
		margin-bottom:-10px;
	}	
}

@media screen and (min-width: 400px){
	header{
		flex-direction: row;
		height: 100px;
		position: fixed;
		width: 100%;
		box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
	}

.language-select{
right:100px;
}
	.logo{
		margin-bottom: 0;
	}
	.navigation{
		margin-left: auto;
	}
	#heroImage {
		height:calc(100vh - 121px);
		padding-top: 121px;;
	}
	.heroImage{
		    top: calc(50% + 60px);
	}
}	



@media screen and (min-width: 600px){
	#heroImage{
		min-height:870px;
	}

	.background{
		min-height: 870px;
	}

	#heroImage h1 span.title {
			margin-bottom: 50px;
			font-size: 32px;
	}

	#heroImage h2 {
			max-width: 500px;
	}

	#heroImage h2 span.subTitle {
		margin-top: 50px;
		font-size: 22px;
		line-height: 30px;
	}	
	#examples  h1{
		font-size: 32px;
		line-height: 40px;
		padding-top: 20px ;
		padding-bottom: 20px;
	    letter-spacing: 2px;
	}	

	#easyToUse h1, #examples h1, #higlightedApps h1, #contactUs h1, #whyHeader h1{
		font-size: 32px;
		line-height: 40px;
		 padding: 30px;
	/*	padding-top: 20px ;
		padding-bottom: 20px;
	    letter-spacing: 2px;
	  */}  

	#examples  h2{
	    line-height: 28px;
	    margin-top: 20px;
		/*font-size: 20px;*/
	}
		#useCase{
	margin-top: 30px;
}

#easyToUse h2 {
	/*font-size: 24px;*/
}
#weather p{
text-align: center;
}



}

@media screen and (min-width: 900px) and (max-width: 1250px){

	.footerContent #weewaaInfo{
		
	}

		.footerContent #weewaaInfo, .footerContent .social{
		   flex-grow: 1;
  flex-basis: 0;
  min-width: 0;
    
	}
}

@media screen and (min-width: 900px){

	.whyCardWrapper{
	display:flex;
}

	.footerContent #weewaaInfo{
		margin-right:16px;

	}

		footer .footerContent{

flex-direction: row;
align-items: flex-start;
    justify-content: space-between;}

#weather{
		padding: 32px 16px;
}

#weather .weatherContainer{

    flex-direction: row;
}

#weather div{
height: fit-content;
    margin: 0;
    flex: 1;

}

.social{
	margin-top: 0;

	}

.social .index{
		margin-top: 0;
	}	

.social{
	margin-left:  auto;

}
}


@media screen and (min-width: 1200px){
	.container {
		flex-direction: row;
		justify-content: center;
		padding: 0 36px;
		margin-top: 28px;
	}

	#examples {
		margin-top: 30px;
		/*margin-bottom: 30px;*/
	}

	#whyHeader{
		margin-bottom:34px!important;
	}

	.standardCard{
		margin-bottom: 30px;
	}

	#easyToUseHeader{
		margin-bottom:60px;
	}

	#examplesHeader{
		margin-bottom : 60px;
	}

	#easyToUse .cardText{
		margin-top:60px;
	}

	#highlightHeader{
		margin-bottom:40px!important;
	}

	#rotationExplain{
		margin-top:40px!important;
	}
#contactHeader{
	margin-bottom: 60px!important;
}
	.card{
		 width: 33%;
  		 margin: 0 16px;
   		 min-height: 348.13px;
    		
	}



}