@charset "UTF-8";
/* CSS Document */

html,
body {
margin: 0;
padding: 0;
}


@font-face {
   font-family: Laudable;
   src: url("../fonts/LaudableSans-Regular.woff") format('woff');
font-display: swap;
}

@font-face {
   font-family: Laudable-Bold;
   src: url("../fonts/LaudableSans-Bold.woff") format('woff');
font-display: swap; 
}



#navbar.hide {
	top: -5.5rem;
}

#navbarMB.hide {
	top: -6.5rem;
}


#navbar {
position: fixed;
background-image: linear-gradient(180deg, rgba(255, 255, 255),  rgba(255, 255, 255), rgba(255, 255, 255, 0.85));
top: 0;
padding-top: 2rem;	
padding-bottom: 0rem;	
width: 100%;
height: 3.5rem;
display: block;
transition: top 0.6s;
	z-index: 3;

}

#navbarMB {
position: fixed;
background-image: linear-gradient(180deg, rgba(255, 255, 255),  rgba(255, 255, 255), rgba(255, 255, 255, 0.85));	
top: 0;
padding-top: 0;	
width: 100%;
height: 4rem;
display: block;
transition: top 0.6s;	
	z-index: 3;
}

#navbarWork2 {
position: fixed;
background-image: linear-gradient(180deg, rgba(255, 255, 255),  rgba(255, 255, 255), rgba(255, 255, 255, 0.85));
top: 0;
padding-top: 2rem;	
padding-bottom: 0rem;	
width: 100%;
height: 5.5rem;
display: block;
transition: top 0.6s;
	z-index: 3;
}

.navbarBG{
background-image: linear-gradient(180deg, rgba(255, 255, 255),  rgba(255, 255, 255), rgba(255, 255, 255, 0.85));
margin-top: 1.53rem;
height: 2rem;
	z-index: -2;
	
}


@media (min-width: 600px) {	
#navbarMB {
display: none;
}
.responsive-iframeMB {
display: none;
}		
.responsive-iframeMBB {
display: none;
}	
.responsive-iframeMBB2 {
display: none;
}	
.containerbgMBB, .containerbgMBB2 {
	display: none;}	
}

@media (max-width: 599px) {		
#navbar {
display: none;
}
#navbarWork2 {
display: none;
}	
.responsive-iframe {
display: none;
}
.responsive-iframeV {
display: none;
}	
}


w1 {
	font-family: Laudable-Bold;
	font-size: 16px;
	line-height: 25px;
}

w2 {
	font-family: Laudable;
	font-size: 16px;
	line-height: 25px;
}
w3 {
	line-height: 1px;
	font-size: 1px;	
}

w4 {
	font-family: Laudable;
	font-size: 16px;
	line-height: 25px;
}
w5 {
	font-family: Laudable-Bold;
	font-size: 16px;
	line-height: 25px;
}

w6 {
	font-family: Laudable;
	font-size: 16px;
	line-height: 20px;
}

w7 {
	font-family: Laudable;
	font-size: 11px;
	line-height: 12px;
}


w4 ul {
list-style-image: url("../images/line2.svg");
margin-left: -1.5rem;
margin-top: -1px;
padding-top: 5px;	

}

w4 li  {
padding-left: 0.1rem;	
line-height: 25px;
padding-bottom: 3px;
}





.containerLogo1 {
position: absolute;
top: 2rem;
left: 5%;	
background-size: 35px 35px;

margin: 0;
padding: 0;
border: none;
height: 35px;
width: 35px;
background-image: url("../images/Logo_2.svg");
z-index: 1;

}

.containerLogo2 { 
position: absolute;
top: 2rem;		
left: 5%;
background-size: 100% 100%;
height: 35px;
width: 35px;
background-image: url("../images/logo2.gif");
z-index: 0;
border: none;
}

.containerLogo1:hover {
opacity:0;	
}

.logo1 {
border: none;
width: 35px;
height: 35px;
}


.containerLogo3 {
position: absolute;
top: 1.5rem;
left: 5%;	
background-image: url("../images/Logo_2.svg");
z-index: 2;	
}


.containerLogo4 { 
position: absolute;
top: 1.5rem;
Width: 28px;
height: 28px;	
left: 5%;
z-index: 1;
background-size: 100% 100%;	
background-image: url("../images/logo2.gif");	
}

.containerLogo3:hover {
opacity:0;	
}

.logo3 {
border: none;
width: 28px;
height: 28px;
}


.containerLogo5 {
position: absolute;
background-image: url("../images/Logo_2.svg");
	z-index: 0;
}

.containerLogo6 { 
position: absolute;
z-index: -2;
width: 20px;
height: 20px;	
background-size: 100% 100%;	
background-image: url("../images/logo2.gif");	
}

.containerLogo5:hover {
opacity:0;	
}

.logo5 {
border: none;
width: 20px;
height: 20px;
}

.footerlogo {
float: left;
width: 20px;
height: 20px;
margin-right: 18px;

}
	
.containerbg {
position: fixed;
top: 0;
right: 0%;
left:0%;
width: 90%;
	bottom: 0;

overflow: hidden;
padding-top: 56.25%; /* 16:9 Aspect Ratio */
z-index:-1;
  	top: 50%;
  	left: 50%;
 	-ms-transform: translate(-50%, -50%);
  	transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	border: none;
}

.containerbgN {
position: fixed;
top: 0;
right: 0%;
left:0%;
width: 90%;


overflow: hidden;
padding-top: 56.25%; /* 16:9 Aspect Ratio */
z-index:-2;
  	top: 50%;
  	left: 50%;
 	-ms-transform: translate(-50%, -50%);
  	transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);

	border: none;
}

.containerbg2 {
position: fixed;
top: 0;
right: 0%;
left:0%;
width: 90%;
		bottom: 0;

overflow: hidden;
padding-top: 56.25%; /* 16:9 Aspect Ratio */
z-index:-2;
  	top: 50%;
  	left: 50%;
 	-ms-transform: translate(-50%, -50%);
  	transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	border: none;	
}

.containerbg2N {
position: fixed;
top: 0;
right: 0%;
left:0%;
width: 90%;
		bottom: 0;

overflow: hidden;
padding-top: 56.25%; /* 16:9 Aspect Ratio */
z-index:-2;
  	top: 50%;
  	left: 50%;
 	-ms-transform: translate(-50%, -50%);
  	transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	border: none;	
}

.containerbgMB {
position: absolute;
top: 0;
right: 0%;
left:0%;
width: 90%;
height: 40%;
overflow: hidden;
padding-top: 56.25%; /* 16:9 Aspect Ratio */
z-index:-1;

  	top: 50%;
  	left: 50%;
 	-ms-transform: translate(-50%, -50%);
  	transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	border: none;
}
.containerbgMBN {
position: absolute;
top: 0;
right: 0%;
left:0%;
width: 90%;
height: 40%;

padding-top: 56.25%; /* 16:9 Aspect Ratio */
z-index:-1;

  	top: 50%;
  	left: 50%;
 	-ms-transform: translate(-50%, -50%);
  	transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	border: none;
}

.containerbgMB2 {
position: absolute;
top: 0;
right: 0%;
left:0%;
width: 90%;
height: 40%;
overflow: hidden;
padding-top: 56.25%; /* 16:9 Aspect Ratio */
z-index:-2;

  	top: 50%;
  	left: 50%;
 	-ms-transform: translate(-50%, -50%);
  	transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	border: none;	
}

.containerbgMB2N {
position: absolute;
top: 0;
right: 0%;
left:0%;
width: 90%;
height: 40%;

padding-top: 56.25%; /* 16:9 Aspect Ratio */
z-index:-2;

  	top: 50%;
  	left: 50%;
 	-ms-transform: translate(-50%, -50%);
  	transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	border: none;	
}

.containerbgMBB {
position: fixed;
top: 0;
right: 0%;
left:0%;
width: 145%;
	height: 145%;

overflow: hidden;
padding-top: 56.25%; /* 16:9 Aspect Ratio */
z-index: -1;

  	top: 50%;
  	left: 50%;
 	-ms-transform: translate(-50%, -50%);
  	transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	border: none;
}

.containerbgMBB2 {
position: fixed;
top: 0;
right: 0%;
left:0%;
width: 145%;
	height: 145%;

overflow: hidden;
padding-top: 56.25%; /* 16:9 Aspect Ratio */
z-index: -2;

  	top: 50%;
  	left: 50%;
 	-ms-transform: translate(-50%, -50%);
  	transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	border: none;
}

.responsive-iframeV {
padding-left: 0%;
padding-right: 0%;
padding-top: 0%;
padding-bottom: 0%;
height: auto;
width: 110%;
margin: 0;
position: absolute;
  	top: 50%;
  	left: 50%;
 	-ms-transform: translate(-50%, -50%);
  	transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	border: none;
}


@media (min-width:900px){
.responsive-iframeV {
width: 95%;
}
}


@media (min-width:1300px){
.responsive-iframeV {
width: 85%;
}
}





.responsive-iframe {
padding-left: 0%;
padding-right: 0%;
padding-top: 0%;
padding-bottom: 0%;
height: 170%;
width: 170%;
margin: 0;
position: absolute;
  	top: 50%;
  	left: 50%;
 	-ms-transform: translate(-50%, -50%);
  	transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	border: none;
}

.responsive-iframeJ {
padding-left: 0%;
padding-right: 0%;
padding-top: 0%;
padding-bottom: 0%;
height: 100%;
width: 100%;
margin: 0;
position: absolute;
  	top: 50%;
  	left: 50%;
 	-ms-transform: translate(-50%, -50%);
  	transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	border: none;
}

.responsive-iframeA {
padding-left: 0%;
padding-right: 0%;
padding-top: 0%;
padding-bottom: 0px;
width: 302px;
height: 75px;
margin: 0;
left:0;
	top:0;
}


.responsive-iframeMB {
padding-left: 0%;
padding-right: 0%;
padding-top: 0%;
padding-bottom: 0%;
height: 105%;
width: 105%;

position: absolute;
  	top: 50%;
  	left: 50%;
 	-ms-transform: translate(-50%, -50%);
  	transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	border: none;
}

.responsive-iframeMBB {
padding-left: 0%;
padding-right: 0%;
padding-top: 0%;
padding-bottom: 0%;

width: 100%;

position: absolute;
  	top: 50%;
  	left: 50%;
 	-ms-transform: translate(-50%, -50%);
  	transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	border: none;
}


.responsive-iframeMBB1 {
padding-left: 0%;
padding-right: 0%;
padding-top: 0%;
padding-bottom: 0%;

width: 99%;
height: auto;

position: absolute;
  	top: 50%;
  	left: 50%;
 	-ms-transform: translate(-50%, -50%);
  	transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	border: none;
}

.responsive-iframe2 {
border: none;
height: 485px;

horizontal-align: left;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}


.navbar2 {
position: absolute;
display:block;
right: 5%;
top: 2rem;
}


.navbarWork {
position: relative;
margin-right: 4.8rem;
}

.navbarContact {
position: relative;
margin-right: 0rem;
}

.navbarAbout {
position: relative;
margin-right: 10.4rem;
}


.about {
right: 0;
top: 0;
border: none;
position: absolute;
display:block;
height: 11px;
width: 46px;
background-image: url("../images/about1.gif");
background-size: 100% 100%;
}

.about2 {
right: 0;
top: 0;
border: none;
position: absolute;
display:block;
height: 11px;
width: 46px;
background-image: url("../images/about2.gif");
background-size: 100% 100%;
z-index: -1;	
}

.about:hover {
opacity:0;	
}

.aboutfooter {
left: 0;
border: none;
display:block;
height: 9px;
width: 37px;
background-image: url("../images/about1.gif");
background-size: 100% 100%;
}

.aboutfooter2 {
left: 0;
border: none;
display:block;
height: 9px;
width: 37px;
background-image: url("../images/about2.gif");
background-size: 100% 100%;
z-index: -1;	
}

.aboutfooter:hover {
opacity:0;	
}


.work {
right: 0;
top: 0;
border: none;
position: absolute;
display:block;
height: 11px;
width: 44px;
margin-right: 1rem;
margin-left: 1rem;
background-image: url("../images/work.gif");	
background-size: 100% 100%;
}

.work2 {
right: 0;
top: 0;
border: none;
position: absolute;
display:block;
height: 11px;
width: 44px;
margin-right: 1rem;
margin-left: 1rem;
background-image: url("../images/work2.gif");
background-size: 100% 100%;
z-index: -1;	
}

.work:hover {
opacity:0;
}

.workfooter {
border: none;
left: 0;
display:block;
height: 9px;
width: 36px;
background-image: url("../images/work.gif");	
background-size: 100% 100%;
}

.workfooter2 {
border: none;
left: 0;
display:block;
height: 9px;
width: 36px;
background-image: url("../images/work2.gif");
background-size: 100% 100%;
z-index: -1;	
}

.workfooter:hover {
opacity:0;
}


.contact {
right: 0;
top: 0;
border: none;
position: absolute;
display:block;
height: 11px;
width: 64px;
margin-left: 1rem;
background-image: url("../images/contact.gif");
background-size: 100% 100%;
}

.contact2 {
right: 0;
top: 0;
border: none;
position: absolute;
display:block;
height: 11px;
width: 64px;
margin-left: 1rem;
background-image: url("../images/contact2.gif");
background-size: 100% 100%;
z-index: -1;
transition: opacity 0.1s;
}

.contact:hover {
opacity:0;
}


.contactfooter {
border: none;
left: 0;
display:block;
height: 9px;
width: 52px;
background-image: url("../images/contact.gif");
background-size: 100% 100%;
}

.contactfooter2{
border: none;
left: 0;
display:block;
height: 9px;
width: 52px;
background-image: url("../images/contact2.gif");
background-size: 100% 100%;
z-index: -1;
transition: opacity 0.1s;
}

.contactfooter:hover {
opacity:0;
}



.generalfooter {
border: none;
left: 0;
display:block;
height: 9px;
width: 118px;
background-image: url("../images/general1.gif");
background-size: 100% 100%;
}

.generalfooter2{
border: none;
left: 0;
display:block;
height: 9px;
width: 118px;
background-image: url("../images/general2.gif");
background-size: 100% 100%;
z-index: -1;
transition: opacity 0.1s;
}

.generalfooter:hover {
opacity:0;
}


.cookiefooter {
border: none;
left: 0;
display:block;
height: 9px;
width: 173px;

background-image: url("../images/cookie1.gif");
background-size: 100% 100%;
}

.cookiefooter2 {
border: none;
left: 0;
display:block;
height: 9px;
width: 173px;
background-image: url("../images/cookie2.gif");
background-size: 100% 100%;
z-index: -1;
transition: opacity 0.1s;
}

.cookiefooter:hover {
opacity:0;
}

.backcontainer{
height: 9px;
width: 38px;
float: left;
}

.contentback {
margin-right: 5%;
margin-left: 5%;
width: 70%;
margin-top: 2%;
position: relative;
float: left;
}

@media (max-width: 900px) {
.contentback {	
margin-top: 6%;
margin-bottom: 1%;
	}}
	

.back1 {
left: 0;
border: none;
display:block;
height: 9px;
width: 38px;
background-image: url("../images/back_1.gif");
background-size: 100% 100%;
}

.back2 {
left: 0;
border: none;
display:block;
height: 9px;
width: 38px;
background-image: url("../images/back_2.gif");
background-size: 100% 100%;
z-index: -1;	
}

.back1:hover {
opacity:0;	
}
	
.title {
margin-top: 15rem;	
margin-bottom: 1.3rem;
margin-left: 5%;
margin-right: 5%;
border: none;
display:block;
width: 90%;
padding: 0;
transition: opacity 0.5s;
}

.titleAbout {
left: 0;
border: none;
width: 302px;
height: 75px;
margin-bottom: 5px;
}

.titleWork {
left: 0;
border: none;
width: 302px;
height: 75px;
margin-bottom: 5px;
}

.titleContact{
left: 0;
border: none;
width: 434px;
height: 75px;
margin-bottom: 5px;
}

.sectionAbout {
height: 100vh;
width: 100%;
position: absolute;
top:0;
}

.jason {
height: 180px;
width: 180px;
border: none;
}
.content1 {
margin-top: 3rem;	
margin-left: 5%;
margin-right: 5%;
font-family: Laudable;
font-size: 30px;
line-height: 35px;
width: 70%;	
letter-spacing: 0.02rem;	
bottom: 0;
position: absolute;
left: 0;
margin-bottom: 5%;
z-index: -1;	
}


.content2 {
margin-top: 100vh;
margin-left: 5%;
margin-right: 5%;
font-family: Laudable;
font-size: 20px;
line-height: 28px;
width: 70%;
	z-index: -1;
}

.content2A {
float: left;
position: relative;
margin-top: 100vh;
margin-left: 5%;
font-family: Laudable;
font-size: 20px;
line-height: 28px;
width: 65%;	
margin-bottom: 16px;
z-index: -1;

}

.content2AA {
float: left;
position: relative;
margin-top: 100vh;
margin-left: 5%;
font-family: Laudable;
font-size: 16px;
line-height: 22px;
width: 70%;	
margin-bottom: 15px;
z-index: -1;
}


.content2B {
float: left;
position: absolute;
margin-top: 100vh;
margin-left: 73%;
margin-right: 5%;
width: 200px;	
height: 200px;	
background-image: url("../images/jason_eyes.gif");
background-size: 200px 200px;
background-repeat: no-repeat;
left: 0;
background-position: left;		

}

.content2G {
float: left;
position: relative;
margin-left: 5%;
margin-right: 15px;
margin-top: -20px;
margin-bottom: 90px;
width: 200px;	
height: 200px;	
background-image: url("../images/jason_eyes.gif");
background-size: 200px 200px;
background-repeat: no-repeat;
left: 0;
background-position: left;			
}


.content2D {
loat: left;
position: absolute;
width: 180px;	
height: 180px;	
background-image: url("../images/jason_eyes.gif");
background-size: 100% 100%;
}

.content2E {
margin-top: 200px;
	z-index: 1;
position: absolute;
float: left;
width: 23px;	
height: 23px;	
background-image: url("../images/LinkedIn_Logo.svg");
background-size: 100% 100%;
}

.content2F {
margin-top: 200px;
position: absolute;
	z-index: 0;

float: left;
width: 23px;	
height: 23px;	
background-image: url("../images/Linkedin2.gif");
background-size: 100% 100%;
}

.content2E:hover {
opacity: 0;	
}


.content2EE {
	margin-left: 30px;
margin-top: 200px;
	z-index: 1;
position: absolute;
float: left;
width: 23px;	
height: 23px;	
background-image: url("../images/Instagram_Logo.svg");
background-size: 100% 100%;
}

.content2FF {
		margin-left: 30px;
margin-top: 200px;
position: absolute;
	z-index: 0;

float: left;
width: 23px;	
height: 23px;	
background-image: url("../images/Instagram.gif");
background-size: 100% 100%;
}

.content2EE:hover {
opacity: 0;	
}



.content2C {
float: left;
position: relative;
margin-left: 5%;
margin-right: 15px;
font-family: Laudable;
font-size: 20px;
line-height: 28px;
width: 65%;	
margin-bottom: 60px;

}
.content3 {
margin-top: 16px;
margin-left: 5%;
margin-right: 5%;
font-family: Laudable;
font-size: 20px;
line-height: 28px;
width: 70%;
}

.content4 {
margin-top: 32px;
margin-left: 5%;
margin-right: 5%;
font-family: Laudable;
font-size: 20px;
line-height: 28px;
width: 70%;
}

.content5 {
margin-top: 52px;
margin-left: 5%;
margin-right: 5%;	
background-image: url("../images/jason_eyes.gif");
background-size: 100% 100%;
height: 180px;
width: 180px;
}


.content6{
margin-top: 100vh;
margin-left: 5%;
margin-right: 3%;
font-family: Laudable;
font-size: 20px;
line-height: 28px;
width: 92%;
	height: 100px;
}

.content9 {
margin-top: 145px;
margin-left: 5%;
margin-right: 5%;
margin-bottom: 5px;
font-family: Laudable-Bold;
font-size: 20px;
line-height: 28px;
width: 90%;
height: 30px;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.content10 {
margin-top: 5px;	
margin-left: 5%;
margin-right: 5%;
font-family: Laudable;
font-size: 16px;
line-height: 22px;
width: 70%;

}

.content11 {
margin-top: -1.5rem;	
margin-left: 5%;
margin-right: 5%;
font-family: Laudable;
font-size: 16px;
line-height: 22px;
width: 70%;
float: left;
z-index: -1;	
}

.content11 ol {
margin-left: -1.5rem;	
}

.content11 ol li {
padding-left: 0.5rem;	
}



.content12 {
margin-top: 1rem;	
margin-left: 5%;
margin-right: 5%;
font-family: Laudable;
font-size: 16px;
line-height: 22px;
width: 70%;
	float: left;

}
.content12 ol {
margin-top: -8px;
margin-bottom: -2px;	
margin-left: -1.5rem;	


}

.content12 ol li {
padding-left: 0.5rem;	

}

@media (min-width:1200px){
.content6 {
width: 93%;
margin-right: 2%;
}
}

.contentE{
margin-top: 16px;
margin-left: 5%;
margin-right: 5%;
margin-bottom: 60px;
font-family: Laudable;
font-size: 20px;
line-height: 28px;
width: 70%;
}

.content7 {
margin-top: 100vh;
margin-left: 5%;
margin-right: 5%;
font-family: Laudable-Bold;
width: 60%;
font-size: 19px;	
}

.content8 {
padding-top: 9rem;	
height: 20vh;
font-family: Laudable;
font-size: 25px;
line-height: 30px;
width: 90%;	
letter-spacing: 0.02rem;	
bottom: 0;
margin-left: 5%;
	margin-right: 5%;
left: 0;
margin-bottom: 5%;
	position: relative;
}

.content13 {
padding-top: 9rem;	
width: 90%;	
letter-spacing: 0.02rem;	
margin-left: 5%;
margin-right: 5%;
position: relative;
float: left;
margin-bottom: 15px;	
}

.content14 {
width: 200px;	
letter-spacing: 0.02rem;	
bottom: 0;
margin-left: 5%;
margin-right: 40px;	
margin-bottom: 15px;
position: relative;
float: left;	
}

.content15 {
letter-spacing: 0.02rem;	
bottom: 0;
left: 0;
margin-bottom: 15px;
margin-right: 5%;
position: relative;
float: left;	
}

.content16 {
margin-right: 5%;
margin-left: 5%;
width: 90%;
height: 15px;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
position: relative;
float: left;	
}

.content17 {
margin-right: 5%;
margin-left: 5%;
width: 70%;
margin-top: 15px;
position: relative;
float: left;	
}

.content18 {
margin-right: 5%;
margin-left: 5%;
width: 70%;
margin-top: 1.7%;
position: relative;
float: left;
}

.content19 {
margin-left: 5%;
width: 31%;
margin-top: 15px;
position: relative;
float: left;
margin-right: 20px;
}

.content20 {
margin-right: 5%;
width: 31%;
margin-top: 15px;
position: relative;
float: left;
}

video {
width: 100%;
height: auto;
outline: none;	
}


@media (min-width:1200px) {
.content18 { 
width: 60%;	
}
}

@media (max-width: 900px) {
.content14, .content17, .content18 {	
width: 90%;
}
.content15 {
margin-left: 5%;	
width: 90%;	
}
	

}

.contentEE{
margin-top: 16px;
margin-left: 5%;
margin-right: 5%;
font-family: Laudable;
font-size: 16px;
line-height: 9px;
width: 70%;
}
.contentEE a {
text-decoration: none;
font-size: 13px;
line-height: 20px;

}
.contentEE a:hover {
	text-decoration: underline;
}

@media (max-width:950px){
.content7 {
width: 90%;
}
.content9 {
width: 90%;	
}		
}

.extra {
		width: 100px;
		height: 100px;
		background-color: white;}

@media (min-width: 600px) {	
	.extra {
		display: none;
	}
	}

@media (max-width:760px) {	
.content1 {
width:90%;
}	
.content2B {
display: none;	
}
	
.content2A {
width: 90%;	
}
.content2AA {
width: 90%;	
}	
.content2C {
width: 90%;	
}	
.content11 {
width: 90%;	
}	
.content12 {
width: 90%;	
}
		
.sectionAbout {
height: 100vh;
}	

.formcontainer {
display: flex;
flex-direction: column;
width: 90%
	
	}	
.form {
width: 100%;
	
	}	
}

@media (min-width:760px) {	
.content2G{
display: none;	
	}
.content2H {
display: none;
	}	
.content2HWork {
display: none;
	}	
.content2HWork2 {
display: none;
	}		
.content2HContact {
display: none;
	}		
}


@media (max-width:600px) {	

.titleAbout {
left: 0;
border: none;
height: 58px;
width: 234px;
}	
	
.titleWork {
left: 0;
border: none;
height: 58px;
width: 232px;
}		
	
.titleContact {
left: 0;
border: none;
height: 58px;
width: 336px;
}	
	
.content1 {
margin-top: 3rem;	
margin-left: 5%;
margin-right: 5%;
font-family: Laudable;
font-size: 24px;
line-height:30px;
width: 90%;	
letter-spacing: 0.02rem;	
bottom: 0;
position: absolute;
left: 0;
margin-bottom: 5%;
}

.content2 {
font-family: Laudable;
font-size: 18px;
line-height: 25px;
width: 90%;
}
	
.content3 {
font-family: Laudable;
font-size: 18px;
line-height: 25px;
width: 90%;
}	
	
.contentE {
font-family: Laudable;
font-size: 18px;
line-height: 25px;
width: 90%;
}	
	
.contentEE {

width: 90%;
}		
	
}



@media (max-width:600px) {		
.title {
margin-top: 12rem;	
margin-bottom: 1.5rem;
margin-left: 5%;
margin-right: 5%;
border: none;
display:block;
left:0;
z-index: -1;
padding: 0;
}
	
.tile {
width: 90%;
height: 30vh;
float: left;
transition:all 1s;
margin-bottom: 1.5%;

}
.burger {
display: block;
cursor: pointer;
}	

.burger {
	top: 0;
	position: absolute;
	right: 0;
	margin-top: 1.1rem;
	margin-bottom: 1.2rem;
	margin-right: 1rem;
}
.burger div {
	width: 23px;
	height: 2px;
	background-color: #000000;
	margin: 5px; 
	transition: all 0.1s ease;
}
	

nav {
	display: flex;
	justify-content: space-around;
	align-items: center;
	height: 60px;
}
	
.nav-links {
position: absolute;
top: -1rem;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
background-image: linear-gradient(180deg, rgba(255, 255, 255), rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0));
	transform: translateY(-150%);
	transition: transform 0.7s ease-in;
	z-index: -1;
	height: 100vh;
	}	

		
.navbarMB1 {
position: absolute;
text-align: center;
width: 100%;
height: 90vh;
top:0;
left:0;
right: 0;
padding-top: 5rem;
}


	
.navbarMBabout {
padding-top: 18px;
padding-bottom: 18px;
width: 100%;
background-image: url("../images/about3.gif");
background-size: 58px 14px;
background-repeat: no-repeat;
left: 0;
background-position: center;	
}	
	

.navbarMBabout:hover {
width: 100%;
background-image: url("../images/about4.gif");
background-size: 58px 14px;
background-repeat: no-repeat;
left: 0;
background-position: center;	
}	


.navbarMBwork {
width: 100%;
padding-top: 18px;
padding-bottom: 18px;
background-image: url("../images/work.gif");
background-size: 56px 14px;
background-repeat: no-repeat;
left: 0;
background-position: center;
}	
	

.navbarMBwork:hover {
width: 100%;
background-image: url("../images/work2.gif");
background-size: 56px 14px;
background-repeat: no-repeat;
left: 0;
background-position: center;
}	
	
	
	
.navbarMBcontact {
width: 100%;
padding-top: 18px;
padding-bottom: 18px;
background-image: url("../images/contact1.gif");
background-size: 82px 14px;
background-repeat: no-repeat;
left: 0;
background-position: center;
}	
	

.navbarMBcontact:hover {
width: 100%;
background-image: url("../images/contact2.gif");
background-size: 82px 14px;
background-repeat: no-repeat;
left: 0;
background-position: center;
}
	
.ontainerbg2 {
display: none
	}	
.ontainerbg {
display: none;
	}	
}
	


.footer {
font-family: Laudable;
font-size: 9px;
position: fixed;
z-index: 2;
bottom: 0;
margin-right: 5%;
right: 0;
text-align: right;
padding-bottom: 3%;		
}

.footer2 {
z-index: 0;
float: left;
padding-top: 20px;
width: 90%;
height: 70px;
margin-top: 20px;
margin-left: 5%;
border-top: 1px solid rgba(0, 0, 0, 0.2);



}


.footerWork {
z-index: 0;
float: left;
padding-top: 20px;
width: 98%;
height: 70px;
margin-top: 20px;

border-top: 1px solid rgba(0, 0, 0, 0.2);



}

.footer3 {
z-index: 1;
position: fixed;
padding-top: 20px;
width: 90%;
height: 70px;
margin-top: 20px;
margin-left: 5%;
border-top: 1px solid rgba(0, 0, 0, 0.2);
background-color: #FFFFFF;
bottom: 0;

}




.footerCopy {
font-family: Laudable;
font-size: 9px;
z-index: 2;
padding-right: 0%;
text-align: right;
float: right;
margin-top: -2px;
}
.footerCopyWORK {
font-family: Laudable;
font-size: 9px;
z-index: 2;
padding-right: 0%;
text-align: right;
float: right;
margin-top: -0.7rem;
}
.footerCopy {
margin-bottom: 60px;
}

.footerContent {
margin-left: 0%;
float: left;	
}

.navbarAboutFooter {
float: left;
margin-right: 18px;

}

.navbarWorkFooter {
float: left;
margin-right: 18px;
}

.navbarContactfooter{
float: left;
margin-right: 18px;
}

.navbarGeneralfooter {
float: left;
margin-right: 18px;	
}

.navbarCookiefooter {
float: left;	
}

@media (max-width: 760px) {
.navbarAboutFooter {
width: 100%;
margin-top: 25px;
margin-right: 0px;
	
}

.navbarWorkFooter {
width: 100%;
margin-top: 25px;
margin-right: 0px;
	
}

.navbarContactfooter{
width: 100%;
margin-top: 25px;
margin-right: 0px;
}


.navbarGeneralfooter {
width: 100%;
margin-top: 25px;
margin-right: 0px;
	
}

.navbarCookiefooter {
width: 100%;
margin-top: 25px;
margin-right: 0px;
	
}

.footerCopy	{
width: 70%;
margin-left: 0%;
margin-top: 40px;
margin-right: 0px;
text-align: left;
float: left;
margin-bottom: 25px;

}
	
.footerCopyWORK	{
width: 70%;
margin-left: 0%;
margin-top: 2rem;
margin-right: 0px;
text-align: left;
float: left;
padding-bottom: 16px;

}	

.jason {
height: 210px;
width: 210px;
}	
	
.footer2 {
height: 16.6rem;	
margin-top: 30px;
	}	
	
.footer3 {
height: 16.6rem;
}	
.footer4 {
height: 16.6rem;
}		
}



@media (max-width: 600px) {	

.footer {
	padding-bottom: 5%;		
}
}	





c1 {
	line-height: 1.2rem;
	font-size: 0.8rem;
	font-family: laudable;
	
}

c1 a {
text-decoration: underline;
	
}

.cookie-div {
	margin-left: 5%;
	margin-right: 5%;
	margin-bottom: 20px;
	margin-top: 20px;
}

.cookie-container {
	display: flex;
	position: fixed;
	bottom: -100%;
	width: 100%;
	background-color: rgba(255, 255, 255, 0.97);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
	height: 70px;
	z-index: 2;
	left: 0;
}


.cookie-container.active {
	bottom: 0;
}


.cookie-btn-div {
	position: fixed;
	right: 0;
	margin-top: 15px;
	margin-left: 5%;
	margin-right: 5%;
	
}

.cookie-btn {
	float: right;
	margin-top: 0px; 
	background-color: white;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
	color: #000000;
	font-size: 13px;
	padding-top: 3px;
	padding-bottom: 4px;
	padding-left: 15px;
	padding-right: 15px;
	margin-right: 5px;
	cursor: pointer;
	display: inline-block;
	text-decoration: none;
	border: none;
	outline: none;
	font-family: laudable-bold;

}

.cookie-btn a {
	text-decoration: none;
}

.cookie-btn a:hover {
	text-decoration: none;	

}

.cookie-btn:hover {
	text-decoration: none;	
	background-image: url("../images/About_bg.gif");
background-size: 100% 100%;
}



.cookie-btn2 {
float: right;
	margin-top: 0px; 
	background-color: white;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
	color: #000000;
	font-size: 13px;
	padding-top: 3px;
	padding-bottom: 4px;
	padding-left: 15px;
	padding-right: 15px;
	margin-right: 5px;
	cursor: pointer;
	display: inline-block;
	text-decoration: none;
	border: none;
	outline: none;
	font-family: laudable-bold;


}



.cookie-btn2:hover {
	text-decoration: none;	
	background-image: url("../images/About_bg.gif");
background-size: 200% 100%;
}

@media (max-width: 700px) {	
.cookie-div {
	margin-right: 25%;
}
.cookie-btn-div {

	margin-top: 25px;

	
}	
	.cookie-container {

	height: 80px;
	}
}

@media (max-width: 737px) {	

.cookie-btn-div {
margin-top: 25px;
}	

.cookie-container {
height: 80px;
}
}

@media (max-width: 390px) {	

.cookie-btn-div {
margin-top: 25px;
}	
.cookie-container {
height: 100px;
}
}








/* unvisited link */
a:link {
  color: #000000;
}

/* visited link */
a:visited {
  color: #000000;
}

/* mouse over link */
a:hover {
  color: #000000;
}

/* selected link */
a:active {
  color: #000000;
}

.nav-active {
	transform: translateY(0%);
	}	

@keyframes navLinkFade {
	from{
		opacity: 0;
		transform: translateY(50px)
	}
	to{
		opacity: 1;
		transform: translateY(0px)
	}
}

.toggle .line1 {
	transform: rotate(-45deg) translate(-5px,5px);
}

.toggle .line2 {
	opacity: 0;
}

.toggle .line3 {
	transform: rotate(45deg) translate(-5px,-5px);
}	



::-moz-selection { /* Code for Firefox */
  color: #FFFFFF;
  background-color: #000000;
}

::selection {
  color: #FFFFFF;
  background-color: #000000;
}


.fade-in {
animation: fadeIn ease 2;
-webkit-animation: fadeIn ease 2s;
-moz-animation: fadeIn ease 2s;
-o-animation: fadeIn ease 2s;
-ms-animation: fadeIn ease 2s;
}

.fade-in2 {
animation: fadeIn ease 5s;
-webkit-animation: fadeIn ease 5s;
-moz-animation: fadeIn ease 5s;
-o-animation: fadeIn ease 5s;
-ms-animation: fadeIn ease 5s;
}
@keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}

@-moz-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}

@-webkit-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}

@-o-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}

@-ms-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}



#back-to-top-btn {
  display: none;
  position: fixed;
  bottom: 6.7rem;
  right: 5%;
  width: 35px;
  height: 35px;
  background-color: #FFFFFF;
  color: #000000;
  cursor: pointer;
  border: 0px solid #000000;
		  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  border-radius: 0%;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
  transition-property: background-color, color;
	outline: none;
	z-index: 2;
}

#back-to-top-btn:hover, #back-to-top-btn:focus { 
	
outline: none;
background-image: url("../images/About_bg.gif");
background-size: 200% 100%;
background-repeat: no-repeat;
background-position: left;
}


#back-to-top-btn:after {
  	content: '';
  	position: absolute;
  	top: 15px;
  	left: 15px;
  	right: 15px;
  	bottom: 11px;
	margin-left: -4px;
	margin-right: -4px;
	margin-bottom: -4px;
		transform: rotate(-135deg);
  	-webkit-transform: rotate(-135deg);
  	border: solid #000000;
  	border-width: 0 1px 1px 0;
	outline: none;
}

#back-to-top-btn:hover::after, #back-to-top-btn:focus::after { 
 	border: solid #000000;
  	border-width: 0 1px 1px 0;
	outline: none;
}



@media(max-width:760px) {
	
#back-to-top-btn { 
	bottom: 25px; 
	right: 5%;
	}
.btn {
width: 100%;
}
.btnB {
width: 100%;
}
.btnB2 {
width: 100%;
}	
}




.formcontainer {
	width: 100%;
	display: flex;
	margin-top: 0;
	margin-bottom: 0.5rem;
}

.formcontainer2 {
	width: 100%;
	display: block;
	margin-top: 0rem;
	margin-bottom: 0.5rem;
	}

.formcontainer3 {
	width: 95%;
	display: block;
	margin-top: 0.5rem;
	margin-bottom: 0rem;
	}
	
	

.g-recaptcha{
	display: flex;
	margin-top: -0.2rem;
	margin-bottom: 1rem;
	-webkit-filter: grayscale(100%);
}




.form2 {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);

  filter: gray; /* IE 6-9 */
}
.form {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);

  filter: gray; /* IE 6-9 */
}

.form {
	margin-right: 2rem;
	width: 100%;
	outline: none;	
}

.form2 {
	margin-right: 2rem;
	margin-top: 0.4rem;
	width: 100%;
	outline: none;	
}
.form3 {
	margin-right: 2rem;
	margin-top: 0.4rem;
	width: 100%;
	outline: none;	
}


.formSumit {
font-size: 13px;
font-family: Laudable;
letter-spacing: 0.03rem;
}

input[type=text], select {
  	width: 100%;
  	padding: 8px;
  	margin: 8px 0;
  	display: inline-block;
  border: 0px solid #000000;
		  border: 1px solid rgba(0, 0, 0, 0.2);
  	border-radius: 0px;
  	box-sizing: border-box;
	outline: none;
	font-size: 19px;
	font-family: Laudable;
	letter-spacing: 0.03rem;
}


input[type=email], select {
  	width: 100%;
  	padding: 8px;
  	margin: 8px 0;
  	display: inline-block;
  border: 0px solid #000000;
		border: 1px solid rgba(0, 0, 0, 0.2);
  	border-radius: 0px;
  	box-sizing: border-box;
	outline: none;
	font-size: 19px;
	font-family: Laudable;
	letter-spacing: 0.03rem;
}


textarea {
  	width: 100%;
  	padding: 10px;
  	margin: 8px 0;
  	display: inline-block;
  border: 0px solid #000000;
		  border: 1px solid rgba(0, 0, 0, 0.2);
  	border-radius: 0px;
 	box-sizing: border-box;
	outline: none;
	font-size: 19px;
	font-family: Laudable;
	letter-spacing: 0.03rem;
	margin-bottom: -8px;
}

input[type=submit] {
  	background-color: #000000;
  	color: #FFFFFF;
  	padding-top: 8px;
	padding-bottom: 12px;
	padding-left: 60px;
	padding-right: 60px;
 	
 	border-radius: 0px;
  	cursor: pointer;
		font-family: Laudable;
	letter-spacing: 0.03rem;

font-size: 19px;
	margin-bottom: 10rem;
	letter-spacing: 1px;
	outline: none;
	border: 1px solid #000000;
}

input[type=submit]:hover {
	background-color: #FFFFFF;
  	color: #000000;

}


.btn {
  	background-color: #FFFFFF;
  	color: #000000;
  	padding-top: 11px;
	padding-bottom: 13px;
	padding-left: 30px;
	padding-right: 30px;
 	
 	border-radius: 0px;
  	cursor: pointer;
	font-family: Laudable-Bold;

	font-size: 20px;
	margin-top: 6px;
	margin-bottom: 30px;
	letter-spacing: 1px;
	outline: none;
  border: 0px solid #000000;
		  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.btn:hover {

background-image: url("../images/About_bg.gif");
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: left;
  
}


.btnB {
  	background-color: #FFFFFF;
  	color: #000000;
  	padding-top: 11px;
	padding-bottom: 13px;
	padding-left: 30px;
	padding-right: 30px;
 	
 	border-radius: 0px;
  	cursor: pointer;
	font-family: Laudable-Bold;

	font-size: 18px;
	margin-top: 18px;
	margin-bottom: 30px;
	letter-spacing: 1px;
	outline: none;
  border: 0px solid #000000;
		  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.btnB:hover {
background-image: url("../images/About_bg.gif");
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: left;
  
}


.btnB2 {
  	background-color: #FFFFFF;
  	color: #000000;
  	padding-top: 11px;
	padding-bottom: 13px;
	padding-left: 30px;
	padding-right: 30px;
 	
 	border-radius: 0px;
  	cursor: pointer;
	font-family: Laudable-Bold;

	font-size: 13px;
	margin-top: 18px;
	margin-bottom: 30px;
	letter-spacing: 1px;
	outline: none;
  border: 0px solid #000000;
		  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.btnB2:hover {
background-image: url("../images/About_bg.gif");
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: left;
  
}


/* The container */
.container {
  display: block;
  position: relative;
  padding-left: 24px;
	padding-top: 0px;
  margin-bottom: 10px;
	
  cursor: pointer;
 
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  	position: absolute;
  	top: 0;
  	left: 0;
	margin-top: 0px;
  	height: 15px;
  	width: 15px;
  	background-color: #FFFFFF;
		  border: 1px solid rgba(0, 0, 0, 0.2);
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
background-image: url("../images/About_bg.gif");
background-size: 200% 100%;
background-repeat: no-repeat;
background-position: left;
	
	
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #FFFFFFF;

}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
	
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
	
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 5px;
  top: 2px;
  width: 4px;
  height: 9px;
  border: solid #000000;
  border-width: 0 1px 1px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
	
}

input:focus {
    background-color: #EAEAEA;
}

textarea:focus {
    background-color: #EAEAEA;
}