/* home and nav */

#homeVideosWrap, #homeVideos{height:100%;}


	.homeVideosMenu{       position: absolute;
    right: 0;
    bottom: unset;
    width: 130px;
    text-align: left;
    min-height: 100px;
    z-index:999;
    left: 420px;
    margin: 0 auto;
    bottom: 50px;
	}
	
	
#contact .homeVideosMenu{  left: 300px;	}
	


#homeVideos .box {
  width: 50%;
  height: 50%;
  display: block;
  position: absolute;
  overflow: hidden; }

#homeVideos #about {
  left: 0;
  top: 0; }
#homeVideos #about .header {
    background: #d4d4d4; }

#homeVideos #works {
  right: 0;
  top: 0; }
#homeVideos #works .header {
    background: #f5f5f5; }

#homeVideos #blog {
  left: 0;
  bottom: 0; }
#homeVideos #blog .header {
    background: #f5f5f5; }

#homeVideos #contact {
  right: 0;
  bottom: 0; }
#homeVideos #contact .header {
    background: #eaeaea; }

#homeVideos .header {
  width: 100%;
  height: 100%;
  overflow: hidden; }

#homeVideos .header nav {
  width: 100%;
  height: 100%; }

#homeVideos .header nav h2 {
  width: 100%;
  height: 100%;
  margin: 0; }

#homeVideos .header a {
  display: block;
  width: 100%;
  height: 100%;
  padding: 20px;
  position: relative; }

#homeVideos .header span {
  position: absolute;
  z-index: 400;
  display: inline-block;
  bottom: 30%;
  font-size: 20px;
  color: #000;
  text-transform: uppercase;
  font-weight: 700;
  font-family: montserrat;
  line-height: 1em;
  transition-property: left;
  transition-duration: .3s; }

#homeVideos #about .header span {
  left: 67%; }
  
/*#homeVideos #about .submenu {
    position: relative;
    z-index: 400;
    display: inline-block;
    bottom: unset !important;
    font-size: 20px;
    color: #000;
    text-transform: uppercase;
    font-weight: 700;
    font-family: montserrat;
    line-height: 1em;
   
    display: none;
    left: unset !important;
    opacity: 0;
    width: 95px;
    text-align: left;
	margin-left:32px;
	-webkit-transition: all .6s;
    -moz-transition: all .6s;
    -o-transition: all .6s;
    transition: all .6s;
	    background: url(../../images/home/arrow.png) 55% 73% no-repeat;
}*/

#homeVideos #about .submenu, #homeVideos #works .submenu, #homeVideos #blog .submenu {
    position: relative;
    z-index: 400;
    display: inline-block;
    bottom: unset !important;
    font-size: 20px;
    color: #000;
    text-transform: uppercase;
    font-weight: 700;
    font-family: montserrat;
    line-height: 1em;
    /* display: none; */
    left: unset !important;
    opacity: 0;
    width: 100%;
    text-align: left;
    /* margin-left: 32px; */
    -webkit-transition: all .6s;
    -moz-transition: all .6s;
    -o-transition: all .6s;
    transition: all .6s;
    background: url(../../images/home/arrow.png) 82% 5px no-repeat;
    padding-top: 20px;
	display:block;
	padding-left:25px;
}

/*
#homeVideos #works .submenu {
    position: absolute;
    z-index: 400;
    display: inline-block;
    bottom: 13%;
    font-size: 20px;
    color: #000;
    text-transform: uppercase;
    font-weight: 700;
    font-family: montserrat;
    line-height: 1em;
   
    display: none;
    left: 67%;
    opacity: 0;
    width: 95px;
    text-align: left;
	margin-left:32px;
	-webkit-transition: all .6s;
    -moz-transition: all .6s;
    -o-transition: all .6s;
    transition: all .6s;
	    background: url(../../images/home/arrow.png) 55% 65% no-repeat;
}

#homeVideos #blog .submenu {
    position: absolute;
    z-index: 400;
    display: inline-block;
    bottom: 13%;
    font-size: 20px;
    color: #000;
    text-transform: uppercase;
    font-weight: 700;
    font-family: montserrat;
    line-height: 1em;
   
    display: none;
    left: 67%;
    opacity: 0;
    width: 95px;
    text-align: left;
	margin-left:32px;
	-webkit-transition: all .6s;
    -moz-transition: all .6s;
    -o-transition: all .6s;
    transition: all .6s;
	    background: url(../../images/home/arrow.png) 55% 65% no-repeat;
}*/



#homeVideos #works .header span {
  left: 67%; }

#homeVideos #blog .header span {
  left: 67%; }

#homeVideos #contact .header span {
  left: 67%; }

#homeVideos .header .title span.c {
  letter-spacing: -30px; }

#homeVideos .header .title span.w {
  letter-spacing: -140px; }

#homeVideos .header .title span.b {
  letter-spacing: -45px; }

#homeVideos .color-overlay {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 200;
  opacity: 1;
  transition-property: opacity;
  transition-duration: 0.1s; }

#homeVideos .color-overlay.orange {
  background-color: rgba(245, 104, 35, 0.9); }

#homeVideos .color-overlay.green {
  background-color: rgba(38, 165, 86, 0.9); }

#homeVideos .dark-overlay {
  width: 100%;
  height: 100%;
  display: block;
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 200;
  background-color: rgba(0, 0, 0, 0.85);
  opacity: 1;
  transition-property: opacity;
  transition-duration: 0.1s; }

#homeVideos .header:hover .title {
  opacity: 0.2;
  left: -20%;
  transition-property: all;
  transition-duration: 0.3s;
  transition-timing-function: ease-in; }

#homeVideos .header:hover .dark-overlay, #homeVideos .header:hover .color-overlay {
  opacity: 0;
  transition-property: opacity;
  transition-duration: 0.2s; }

#homeVideos #back {
  position: fixed;
  color: #000;
  z-index: 999;
  top: 10px;
  right: 25px;
  font-size: 36px;
  line-height: 36px;
  padding: 20px;
  -webkit-tap-highlight-color: transparent; }

#homeVideos #back:hover {
  transform: rotate(360deg);
  transition-property: transform;
  transition-duration: 0.6s;
  transition-timing-function: ease; }

#homeVideos svg path, #homeVideos svg polygon {
  transform: scale(0.9);
  transform-origin: center;
  transition-property: transform;
  transition-duration: .3s; }

body.hover-about svg #svg-about path, body.hover-about svg #svg-about polygon,
body.hover-works svg #svg-works path, body.hover-works svg #svg-works polygon,
body.hover-blog svg #svg-blog path, body.hover-blog svg #svg-blog polygon,
body.hover-contact svg #svg-contact path, body.hover-contact svg #svg-contact polygon {
  transform: scale(1.2);
  transform-origin: center;
  transition-property: transform;
  transition-duration: .3s; }

#homeVideos .box:hover .header span {
  bottom: 30%;
  transition-property: left;
  transition-duration: .3s; }

#homeVideos #about:hover .header span {
  left: 70%; }
  

  
  
  #homeVideos #about:hover  .submenu, #homeVideos #works:hover  .submenu, #homeVideos #blog:hover  .submenu {
  display:block;   left: 70%; opacity:1;} 
  
  
    #homeVideos #about:hover  .homeVideosMenu span,  #homeVideos #works:hover  .homeVideosMenu span,  #homeVideos #blog:hover  .homeVideosMenu span, #homeVideos #contact:hover  .homeVideosMenu span{    margin-left: 20px;}
  
  
  .content-inner .submenu ul {
    display: block;
    padding: 0;
    margin: 0;
	margin-top:50px;
}



  .content-inner .homeVideosMenu .submenu ul {
    display: block;
    padding: 0;
    margin: 0;
    margin-top: 0px;
}


#homeVideos .homeVideosMenu span {
    position: relative;
    z-index: 400;
    display: inline-block;
    bottom: 30%;
    font-size: 20px;
    color: #000;
    text-transform: uppercase;
    font-weight: 700;
    font-family: montserrat;
    line-height: 1em;
    transition-property: margin-left;
    transition-duration: .3s;
    font-family: "CeraPRO-Bold", Arial, sans-serif !important;
	
}


  .content-inner .submenu ul li {
padding-left: 0px;
    margin-bottom: 0px;
    color: #777777;
    font-size: 16px;
    font-weight: 400;
    line-height: inherit;
    letter-spacing: 0.3px;
    position: relative;
    margin: 0;
    padding: 0;
    font-family: "CeraPRO", Arial, sans-serif !important;
}

.content-inner .submenu ul li:before {
    position: relative;
    top: 0px;
    left: 0;
    width: 0px;
    height: 0px;
    border: none;
    content: "";
    -webkit-border-radius: 100%;
    border-radius: 100%;
    z-index: 1;
}

.content-inner #homeVideos  .submenu ul li a {
 padding: 0px;
     color: #000;
}

.content-inner #homeVideos  .submenu ul li a:hover {
 font-family: "CeraPRO-Medium", Arial, sans-serif !important;
}

  
  
  
  
   
  

#homeVideos #works:hover .header span {
  left: 70%; }

#homeVideos #blog:hover .header span {
  left: 70%; }

#homeVideos #contact:hover .header span {
  left: 70%; }

#homeVideos .header:hover .nav-video {
  filter: none; }

#homeVideos svg #svg-about .path {
  transform-origin: center;
  transition-property: transform;
  transition-duration: .3s; }

#homeVideos .header svg {
  position: static;
  display: block;
  transform: none;
  z-index: 300;
  opacity: 1;
  transition: none;
  transform-origin: center;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0) scale(1.01);
  margin: 0;
  z-index: 2; }

#homeVideos svg#svg-graphic-about > rect {
  -webkit-mask: url(#about-mask);
  mask: url(#about-mask);
  fill: #d4d4d4; }

#homeVideos svg#svg-graphic-about .path {
  transform: scale(1);
  transform-origin: center;
  fill: #000; }

#homeVideos svg#svg-graphic-works > rect {
  -webkit-mask: url(#works-mask);
  mask: url(#works-mask);
  fill: #f5f5f5; }

#homeVideos svg#svg-graphic-works .path {
  transform: scale(1);
  transform-origin: center;
  fill: #000; }

#homeVideos svg#svg-graphic-blog > rect {
  -webkit-mask: url(#blog-mask);
  mask: url(#blog-mask);
  fill: #f5f5f5; }

#homeVideos svg#svg-graphic-blog .path {
  transform: scale(1);
  transform-origin: center;
  fill: #000; }

#homeVideos svg#svg-graphic-contact > rect {
  -webkit-mask: url(#contact-mask);
  mask: url(#contact-mask);
  fill: #eaeaea; }

#homeVideos svg#svg-graphic-contact .path {
  transform: scale(1);
  transform-origin: center;
  fill: #000; }

body > svg {
  display: none; }

/* content */
#homeVideos .invisible {
  visibility: hidden; }

#homeVideos .box {
  transition-duration: .3s;
  transition-timing-function: ease-out;
  -webkit-tap-highlight-color: transparent; }

#homeVideos .box.inactive-w-0 {
  width: 0; }

#homeVideos .box.inactive-h-0 {
  height: 0; }

#homeVideos .box.inactive-h-w-0 {
  width: 0;
  height: 0; }

#homeVideos .nav-video {
  width: 600px;
  height: auto;
  display: block;
  object-fit: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  margin: 0; 
      min-width: unset;
    min-height: unset;
  
  }

#homeVideos html.no-touchevents .nav-video {
  filter: contrast(110%) brightness(103%); }

#homeVideos .box.active {
  transition-timing-function: ease-in;
  width: 100%;
  height: 100%;
  padding: 80px 20px 20px;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch; }
 #homeVideos  .box.active .header-title {
    visibility: visible;
    position: absolute;
    top: 40%;
    left: 10%;
    z-index: 2;
    padding-right: 10%;
    color: #fff; }
  #homeVideos   .box.active .header-title h2 {
      font-size: 60px;
      font-family: montserrat;
      margin-bottom: 40px; }
  #homeVideos   .box.active .header-title p {
      font-size: 24px;
      margin-bottom: 40px;
      line-height: 1.3em; }
 #homeVideos  .box.active .content {
    visibility: visible; }
 #homeVideos  .box.active .dark-overlay {
    display: none; }
 #homeVideos  .box.active .header a {
    cursor: default;
    overflow: hidden; }
 #homeVideos  .box.active .header h2 {
    overflow: hidden; }
 #homeVideos  .box.active .header {
    position: relative;
    width: 100%;
    overflow: visible; }
 #homeVideos  .box.active .header span {
    display: none; }
  #homeVideos .box.active .nav-video {
    transition: none; }

#homeVideos #about.box.active svg, #homeVideos #works.box.active svg, #homeVideos #blog.box.active svg, #homeVideos #contact.box.active svg {
  display: none; }

#homeVideos #about.box.active .nav-video, #homeVideos #works.box.active .nav-video, #homeVideos #blog.box.active .nav-video, #homeVideos #contact.box.active .nav-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  margin: 0;
  filter: none; }

#homeVideos .colored-title {
  color: #ff5242; }

#homeVideos .big-text {
  font-size: 24px;
  line-height: 1.9em; }

@keyframes BackgroundAnimated-l-r {
  from {
    background-position: 0 0; }
  to {
    background-position: 100px 0; } }

@-webkit-keyframes BackgroundAnimated-l-r {
  from {
    background-position: 0 0; }
  to {
    background-position: 100px 0; } }

@-ms-keyframes BackgroundAnimated-l-r {
  from {
    background-position: 0 0; }
  to {
    background-position: 100px 0; } }

@-moz-keyframes BackgroundAnimated-l-r {
  from {
    background-position: 0 0; }
  to {
    background-position: 100px 0; } }

@keyframes BackgroundAnimated-t-b {
  from {
    background-position: 0 0; }
  to {
    background-position: 0 100px; } }

@-webkit-keyframes BackgroundAnimated-t-b {
  from {
    background-position: 0 0; }
  to {
    background-position: 0 100px; } }

@-ms-keyframes BackgroundAnimated-t-b {
  from {
    background-position: 0 0; }
  to {
    background-position: 0 100px; } }

@-moz-keyframes BackgroundAnimated-t-b {
  from {
    background-position: 0 0; }
  to {
    background-position: 0 100px; } }

@keyframes BackgroundAnimated-r-l {
  from {
    background-position: 100px 0; }
  to {
    background-position: 0 0; } }

@-webkit-keyframes BackgroundAnimated-r-l {
  from {
    background-position: 100px 0; }
  to {
    background-position: 0 0; } }

@-ms-keyframes BackgroundAnimated-r-l {
  from {
    background-position: 100px 0; }
  to {
    background-position: 0 0; } }

@-moz-keyframes BackgroundAnimated-r-l {
  from {
    background-position: 100px 0; }
  to {
    background-position: 0 0; } }

@keyframes BackgroundAnimated-b-t {
  from {
    background-position: 0 100px; }
  to {
    background-position: 0 0; } }

@-webkit-keyframes BackgroundAnimated-b-t {
  from {
    background-position: 0 100px; }
  to {
    background-position: 0 0; } }

@-ms-keyframes BackgroundAnimated-b-t {
  from {
    background-position: 0 100px; }
  to {
    background-position: 0 0; } }

@-moz-keyframes BackgroundAnimated-b-t {
  from {
    background-position: 0 100px; }
  to {
    background-position: 0 0; } }

#homeVideos .action-hint {
  font-family: montserrat;
  letter-spacing: 0px;
  font-size: 13px; }

#homeVideos .scroll-down i {
  font-size: 16px;
  color: #000;
  display: inline-block;
  line-height: 10px;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-name: scrolldown;
  animation-name: scrolldown; }

@keyframes scrolldown {
  from {
    transform: translateY(-5px); }
  to {
    transform: translateY(5px); } }

@-webkit-keyframes scrolldown {
  from {
    transform: translateY(-5px); }
  to {
    transform: translateY(5px); } }
	
	
		@media (max-width: 1750px) {
	#homeVideos #about:hover .header span {
  left: 73%; }
  
  
  #homeVideos #about:hover  .submenu, #homeVideos #works:hover  .submenu, #homeVideos #blog:hover  .submenu {
  display:block;   left: 73%; opacity:1;} 

#homeVideos #works:hover .header span {
  left: 73%; }

#homeVideos #blog:hover .header span {
  left: 73%; }

#homeVideos #contact:hover .header span {
  left: 73%; }

#homeVideos #about .header span {
  left: 70%; }

#homeVideos #works .header span {
  left: 70%; }

#homeVideos #blog .header span {
  left: 70%; }

#homeVideos #contact .header span {
  left: 70%; }
	
		}
		
		
		
		@media (max-width: 1280px) {
	#homeVideos #about:hover .header span {
  left: 76%; }
  
  
  #homeVideos #about:hover  .submenu, #homeVideos #works:hover .submenu, #homeVideos #blog:hover  .submenu {
  display:block;   left: 76%; opacity:1;} 

#homeVideos #works:hover .header span {
  left: 76%; }

#homeVideos #blog:hover .header span {
  left: 76%; }

#homeVideos #contact:hover .header span {
  left: 76%; }

#homeVideos #about .header span {
  left: 73%; }

#homeVideos #works .header span {
  left: 73%; }

#homeVideos #blog .header span {
  left: 73%; }

#homeVideos #contact .header span {
  left: 73%; }
	
		}
	
	@media (max-width: 1280px) and (max-height:800px) {
		
		#homeVideos #about:hover .submenu {
bottom:13%;
}

	#homeVideos #works:hover  .submenu, #homeVideos #blog:hover  .submenu {
bottom:9%;
}
		
	}