/*
Theme Name: Visualcode theme
Version: 1.0
Requires at least: 4.7
Requires PHP: 7.4.2
Description: This is my default starter theme
Author: Daan Timmers
Author URI: https://www.visualcode.nl/
*/

/* ==========================================================================
Font
========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,500;1,600;1,700;1,800&display=swap');

/* font-family: 'Raleway', sans-serif; */

@font-face {
  font-family: 'Sansation';
  src: local('Sansation Italic'), local('SansationItalic'),
      url('assets/fonts/SansationItalic.woff2') format('woff2'),
      url('assets/fonts/SansationItalic.woff') format('woff'),
      url('assets/fonts/SansationItalic.ttf') format('truetype'),
      url('assets/fonts/SansationItalic.svg#SansationItalic') format('svg');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Sansation';
  src: local('Sansation Bold'), local('SansationBold'),
      url('assets/fonts/SansationBold.woff2') format('woff2'),
      url('assets/fonts/SansationBold.woff') format('woff'),
      url('assets/fonts/SansationBold.ttf') format('truetype'),
      url('assets/fonts/SansationBold.svg#SansationBold') format('svg');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Sansation';
  src: local('Sansation Bold Italic'), local('SansationBoldItalic'),
      url('assets/fonts/SansationBoldItalic.woff2') format('woff2'),
      url('assets/fonts/SansationBoldItalic.woff') format('woff'),
      url('assets/fonts/SansationBoldItalic.ttf') format('truetype'),
      url('assets/fonts/SansationBoldItalic.svg#SansationBoldItalic') format('svg');
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Sansation';
  src: local('Sansation Regular'), local('SansationRegular'),
      url('assets/fonts/SansationRegular.woff2') format('woff2'),
      url('assets/fonts/SansationRegular.woff') format('woff'),
      url('assets/fonts/SansationRegular.ttf') format('truetype'),
      url('assets/fonts/SansationRegular.svg#SansationRegular') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Sansation';
  src: local('Sansation Light'), local('SansationLight'),
      url('assets/fonts/SansationLight.woff2') format('woff2'),
      url('assets/fonts/SansationLight.woff') format('woff'),
      url('assets/fonts/SansationLight.ttf') format('truetype'),
      url('assets/fonts/SansationLight.svg#SansationLight') format('svg');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Sansation';
  src: local('Sansation Light Italic'), local('SansationLightItalic'),
      url('assets/fonts/SansationLightItalic.woff2') format('woff2'),
      url('assets/fonts/SansationLightItalic.woff') format('woff'),
      url('assets/fonts/SansationLightItalic.ttf') format('truetype'),
      url('assets/fonts/SansationLightItalic.svg#SansationLightItalic') format('svg');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

/* 
font-family: 'Sansation';
font-weight: normal;
*/

/* ==========================================================================
Reset
========================================================================== */

/*
Responsive fonts
26px = 1.44em
24px = 1.33em
*/

:root {
	--font-48: 2.66em;
	--font-40: 2.22em;
	--font-38: 2.11em;
	--font-32: 1.77em;
  --font-28: 1.55em;
  --font-26: 1.44em;
  --font-24: 1.33em;
  --font-22: 1.22em;
  --font-20: 1.11em;
  --font-18: 1em;
  --font-16: 0.88em;
  --font-14: 0.77em;
  --font-13: 0.72em;
  --font-12: 0.66em;
  --font-11: 0.61em;
  --font-10: 0.55em;
}

html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%; 
	scroll-behavior: smooth;
}
body {
  margin: 0;
  padding: 0;
  font-size:18px;
  font-family: 'Raleway', sans-serif;
}

@media only screen and (max-width: 1000px) {
  body {
    font-size:16px;
  }
}

@media only screen and (max-width: 768px) {
  body {
    font-size:14px;
  }
}

h1, h2, h3, h4, h5, p, blockquote, figure, ol, ul {
  margin: 0;
  padding: 0; }

h1, h2, h3, h4, h5 {
  font-size: inherit; }

strong {
  font-weight: bold; }

a, button {
  transition: .3s; }

a {
  text-decoration: none; }

::-moz-focus-inner {
  padding: 0;
  border: 0; }

:focus {
  outline: 0; }

img {
  max-width: 100%;
  height: auto;
  border: 0; }


/* ==========================================================================
Default
========================================================================== */
.fluid-container{
  max-width:1460px;
  width:100%;
  padding:30px 60px;
  box-sizing: border-box;
  margin:auto;
}

h2{
  line-height: var(--font-38);
  letter-spacing: 2px;
  font-size: var(--font-32);
  font-family: 'Sansation';
  font-weight: bold;
}

h3{
  line-height: var(--font-28);
  letter-spacing: 1px;
  font-size: var(--font-20);
  font-family: 'Raleway';
  font-weight: bold;
}

p{
  line-height: var(--font-28);
  letter-spacing: 1px;
  font-size: var(--font-20);
}

a.btn{
  font-size:var(--font-14);
  font-weight:600;
  display: inline-flex;
  text-transform: uppercase;
  padding:15px;
  background:#000;
  color:#fff;
  align-items: center;
  letter-spacing: 1px;
}
a.btn i{
  margin-left:30px;
  font-size:10px;
}

.btn{
  font-size:var(--font-14);
  font-weight:600;
  display: inline-flex;
  text-transform: uppercase;
  padding:15px;
  background:#000;
  color:#fff;
  align-items: center;
  letter-spacing: 1px;
}
.btn i{
  margin-left:30px;
  font-size:10px;
}

@media only screen and (max-width: 480px) {
	.fluid-container{
	  padding:30px 30px;
	}
}


/* ==========================================================================
Header
========================================================================== */
header{
  position: relative;
  width: 100%;
  height:calc(100vh - 60px);
}

header .header-wrap{
	z-index: 999;
	position:absolute;
	box-sizing:border-box;
	width:100%;
    padding: 60px;
	transition:all .0s;
	pointer-events:none;
}

header .fluid-container{
  position: relative;
  z-index:999;
  overflow:hidden;
  padding:0px;
  display: flex;
  transform: translate(-0%, -0%);
}

header .header-wrap.fixed-navigation{
	position:fixed;
	background: #131723eb;
	transition:all .0s;
	transform: translate(0%,-100%);
}
header .header-wrap.up{
	transition:all .5s;
	transform: translate(0%, 0%);
}
header .header-wrap.fixed-navigation .nav-icon:after, header .header-wrap.fixed-navigation .nav-icon .stripe,
header .header-wrap.fixed-navigation .nav-icon:before{
	background:#fff;
}	
header .header-wrap.fixed-navigation a.logo{
	color:#fff;
}
header.project-header .header-wrap.fixed-navigation a.logo img{
	background:#656565;
}

header .header-wrap.active a.logo{
	color:#fff;
}
header.project-header .header-wrap.active a.logo img{
	background:#656565;
}

header .fluid-container.fixed-navigation nav{
	height:100vh;
}

@media only screen and (max-width: 480px) {
	header .header-wrap{
		padding:40px;
	}
}

.scroll-down-arrow{
	width: 120px;
    position: absolute;
    height: 105px;
	z-index:99;
    bottom: -30px;
    left: 50%;
    margin-left: -60px;
    margin-bottom: -52px;
    transition: all .5s;
	display:flex;
	align-items:center;
	justify-content:center;
	opacity:0;
	background-image:url('./assets/images/pentagon/pentagon.svg');
}

.scroll-down-arrow.active{
	bottom:0px;
	opacity:1;
}
.scroll-down-arrow .mouse{ 
	display:block;
	width:30px;
	margin-top:-24px;
	animation: blinkPulse 5s infinite;
	}
.scroll-down-arrow .touch{ 
	display:none;
	width:26px;
	margin-top:-28px;
	animation: blinkPulse 5s infinite;
	}

.scroll-down-arrow .arrow{ 
	position:absolute;
	width:24px;
	bottom:20px;
	opacity: 1;
	animation: smallMove 1.6s ease-in-out infinite;
}
@keyframes blinkPulse {
  0% {
    transform: scale(1);
  }
  10% {
    transform: scale(1.10);
  }
  20% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes smallMove {
  0% {
    bottom:20px;
  }
  25% {
    bottom:23px;
  }
  50% {
    bottom:20px;
  }
  75% {
	bottom:17px;
}
  100% {
	bottom:20px;
  }
}
.scroll-down-arrow:hover{
	opacity:1;
}
@media only screen and (max-width: 640px) {
	.scroll-down-arrow .mouse{ display:none;}
	.scroll-down-arrow .touch{ display:block;}
}
a.logo{
    font-size: var(--font-32);
    font-family: 'Sansation';
    display: flex;
    align-items: center;
    width: 48px;
    height: 44px;
    text-transform: uppercase;
    font-size: 24px;
    pointer-events: auto;
    margin: 0px;
    margin-right: auto;
    position: absolute;
    color: #000;
}
a.logo img{
    position: relative;
    background-color: #000;
    top: 0px;
    left: 0px;
    width: 48px;
    margin-right: 10px;
	z-index:11;
    height: 44px;
    transition: all .5s;
}
a.logo:hover{
	color:#158acb;
}
a.logo:hover img{
	opacity:1;
	background:#158acb;
}
a.logo span{
	transition:all .4s;
	z-index:10;
	opacity:0;
	position: absolute;
    left: -170px;
}
a.logo:hover span{
	left:60px;
	opacity:1;
}
.nav-icon{
  z-index:999;
  margin-left:auto;
  width:46px;
  height:46px;
  pointer-events:auto;
  position: relative;
  cursor:pointer;
}
.nav-icon:before{
  content:'';
  background:#000;
  width:33px;
  height:5px;
  display: block;
  top:4px;
  transition: all .3s;
  right:0px;
  position: absolute;
}
.nav-icon:after{
  content:'';
  background:#000;
  width:38px;
  float:right;
  height:5px;
  display: block;
  position: absolute;
  bottom:2px;
  transition: all .3s;
  right:0px;
}
.nav-icon .stripe{
  width:46px;
  height:5px;
  transition: all .3s;
  position: absolute;
  top:50%;
  margin-top:-1px;
  background:#000;
}
.nav-icon.active .stripe{
  opacity: 0;
}
.nav-icon.active:before{
  top:20px;
  width:46px;
  transform: rotate(-45deg);
}
.nav-icon.active:after{
  bottom:50%;
  width:46px;
  top:20px;
  transform: rotate(45deg);
}

.nav-icon:hover:after, .nav-icon:hover:before, .nav-icon:hover .stripe,
.nav-icon.active:after, .nav-icon.active:before, .nav-icon.active .stripe{
  background:#158acb;
}{
  background:#158acb;
}

nav{
  width:100%;
  height:100%;
  position: absolute;
  top:0px;
  pointer-events: none;
  left:0px;
  height:100vh;
  background:#1b1f2aec;
  z-index:998;
  display:flex;
  align-items: center;
  opacity: 0;
  justify-content: center;
  transition: all .3s;
  transform: translateY(-25%);
}
nav{
	position:fixed;
}
nav.active{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
nav .main-navigation{

}
nav .main-navigation ul{
  list-style: none;
}
nav .main-navigation ul li{
  text-align: center;
  padding:10px 0px;
}
nav .main-navigation ul li a{
  color:#fff;
  line-height:46px;
  text-align: center;
  display:inline-block;
  position: relative;
  font-size:var(--font-32);
  font-weight:500;
  font-family: 'Raleway', sans-serif;
}
nav .main-navigation ul li a:after{
  content: '';
  display: block;
  background: #fff;
  width: 0;
  opacity: 0;
  margin: auto;
  height: 1px;
  transition: all .2s;
}
nav .main-navigation ul li a:hover:after{
  width:100%;
  opacity: 1;
}
/*nav .main-navigation ul li.current_page_item a:after{
  width:100%;
  opacity: 1;
}*/

/*.parallax {
  position: absolute;
  width: 100%;
  height:100vh;
  overflow: hidden;
  top: 0;
  left: 0;

.parallax div {}*/
  /*enable 3D rendering*/
 /* transform: translateZ(0);
  will-change: transform;
}*/

.parallax {
  position: relative;
  width: 100%;
  height:calc(100vh - 60px); /* or your desired size */
  overflow: hidden;
}

.parallax div {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  will-change: transform;
}

@media only screen and (min-width: 2500px) {
	.source-layer1 {
		top:60%;
	  background-image: url(./assets/images/large/header_visual_1c.png);
	}
	.source-layer2 {
		top:60%;
	  background-image: url(./assets/images/large/header_visual_1b.png);
	}
	.source-layer3 {
	  top:50%;
	  background-image: url(./assets/images/large/header_visual_1a.jpg);
	}	
}
@media only screen and (max-width: 2499px) {
	.source-layer1 {
		top:60%;
	  background-image: url(./assets/images/medium/header_visual_1c.png);
	}
	.source-layer2 {
		top:60%;
	  background-image: url(./assets/images/medium/header_visual_1b.png);
	}
	.source-layer3 {
	  top:50%;
	  background-image: url(./assets/images/medium/header_visual_1a.jpg);
	}	
}

@media only screen and (max-width: 1200px) {
	.source-layer1 {
		top:60%;
	  background-image: url(./assets/images/medium/header_visual_1c.png);
	}
	.source-layer2 {
		top:60%;
	  background-image: url(./assets/images/medium/header_visual_1b.png);
	}
	.source-layer3 {
	  top:50%;
	  background-image: url(./assets/images/medium/header_visual_1a.jpg);
	}	
}

#ePqwj8FL9Hp1{
  z-index: 990;
  position: absolute;
  width: 220px;
  left: 50%;
  pointer-events:none;
  display: none;
  top: calc(50% - 25px);
  transform: translate(-50%, -50%);
}

.layer {
  position: absolute;
  width: 110vw;
  height:110vh;
  /*top: 100px;*/
  opacity: 0;
  pointer-events:none;
  /*margin-left:-5vw;
  margin-top:-5vh;*/
  left: 0;
  background-repeat: no-repeat;
  background-position: 50% 100%;
  background-size:cover;
}

.hexagon_overlay{
	position:absolute;
	width:100%;
	height:100%;
	background:url('./assets/images/hexagon_grid.svg');
	background-size:25%;
	transform:none !important;
	display: none;
	left:0% !important;
	-webkit-mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 100%);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: 400px 400px;
	-webkit-mask-position:50% 50%;
}
@media only screen and (max-width: 1200px) {
	.hexagon_overlay{
		background-size:40%;
	}
}
@media only screen and (max-width: 768px) {
	.hexagon_overlay{
		background-size:60%;
	}
}
@media only screen and (max-width: 560px) {
	.hexagon_overlay{
		display:none !important;
	}
}

.source-layer1.active, .source-layer2.active, .source-layer3.active{
  top:50%;
  opacity: 1;
  transition: all .5s; 
}
.source-layer1.active.ready, .source-layer2.active.ready,  .source-layer3.active.ready{
  transition: auto;
}
  
.sliding-words{
  width:100%;
  position: absolute;
  top:calc(50% + 65px);
  text-align: center;
  z-index:996;
  font-size:32px;
  pointer-events:none;
  color:#fff;
  font-weight:300;
  text-transform: uppercase;
  transform: translate(0px, 0px) !important;
  font-family: 'Raleway', sans-serif;
}
.sliding-words .word{
  opacity: 0;
  font-weight:300;
  transform: translateY(-20px);
}

.sliding-words .word span{
  font-family: 'Sansation';
  font-weight: bold;
}

@keyframes wordLoop{
  0%{}
  10%{
    opacity: 1;
    transform: translateY(0px);
  }
  90%{
    opacity: 1;
    transform: translateY(0px);
  }
  100%{
    opacity: 0;
    transform: translateY(20px);
  }
}

.sliding-words .word.animate{
  animation-name: wordLoop;
  animation-duration: 5s;
}
@media only screen and (max-width: 768px) {
	#ePqwj8FL9Hp1{
		width:150px;
		top: calc(50% - 10px);
	}
	.sliding-words{
		font-size:26px;
		top: calc(50% + 55px);
	}
}

.project-header{
	background:url('./assets/images/Visualcode_project_header_visual.jpg');
	background-color:#f6f6f6;
	background-size:100%;
	background-repeat:no-repeat;
	height:100%;
	overflow:hidden;
}

.project-header a.logo{
  font-size: var(--font-32);
  font-family: 'Sansation';
  display: flex;
  align-items:center;
  width:48px;
  height:44px;
  text-transform:uppercase;
  font-size:24px;
  pointer-events:auto;
  margin:0px;
  margin-right:auto;
  position:absolute;
  color:#000;
}
.project-header a.logo img{
  position: relative;
  background-color:#000;
  top:0px;
  left:0px;
  width:48px;
  margin-right:10px;
  height:44px;
  transition: all .5s;
}
.project-header a.logo:hover{
	color:#158acb;
}
.project-header a.logo:hover img{
	opacity:1;
	background:#158acb;
}

.project-intro{
	margin-top:200px;
	display:inline-flex;
	width:100%;
	min-height:300px;
	padding-bottom: 80px;
}
.project-intro::before {
    content: '';
    position: absolute;
    height: 150px;
    width: 110vw;
    bottom: 0px;
    left: -5vw;
    background: #fff;
    transform: rotate(-2deg) translateY(50px);
}
	
.project-intro .left-content{
	width:50%;
	min-height:100px;
}
.project-intro .left-content .inner-left-content{
	width:calc(100% - 60px);
	max-width:calc(1460px / 2);
	min-height:100px;
	margin-left:auto;
}

.project-intro .left-content .inner-left-content .btn{
	background:#fff;
	color:#000;
}
.project-intro .left-content .inner-left-content .btn i{
	margin-left: 0px;
	margin-right: 20px;
}
.project-intro .left-content .inner-left-content .client-logo{
	margin:80px 0px 40px 0px;
	height:200px;
}
.project-intro .left-content .inner-left-content .client-logo img{
	height:100%;
}
.project-intro .left-content .inner-left-content p{
	margin-bottom:40px;
	font-size:var(--font-20);
}
.project-intro .left-content .inner-left-content .build-with{
	padding-bottom:60px;
}
.project-intro .left-content .inner-left-content .build-with .title{
	font-weight:600;
	font-size:var(--font-24);
	margin-bottom:10px;
}
.project-intro .left-content .inner-left-content .build-with span{
	display:inline-block;
	color:#fff;
	text-transform:uppercase;
	font-weight:300;
	padding:12px;
	font-size:var(--font-16);
	margin-right:10px;
	background:#272c3b;
}
.project-intro .right-content{
	width:50%;
	min-height:100px;
	position:relative;
}
 .browser {
	width: 60vw;
	max-width:1560px;
	transform:translate(200px, 0px);
	/*aspect-ratio: 16 / 9;
	-webkit-aspect-ratio: 16 / 9;*/
	height:70vh;
	border-radius: 8px;
	background: white;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	opacity:0;
	transform:translate(400px, 0px);
	transition:all .8s;
  }
   .browser.animate {
	  	opacity:1;
	transform:translate(200px, 0px);
   }
    .browser-header {
      background: #d1d4d3;
      padding: 14px;
      display: flex;
      align-items: center;
    }

    .circle {
      width: 15px;
      height: 15px;
      border-radius: 50%;
	  margin-right:8px;
    }
	.url-bar{
		height:26px;
		margin-left:12px;
		width:calc(100% - 69px);
		background:#fff;
	}

    .red { background: #ff5f57; margin-left:5px; }
    .yellow { background: #ffbd2e; }
    .green { background: #28c840; }

    .browser-content {
      padding: 1rem;
      overflow: auto;
      flex: 1;
	  background-size:100% !important;
    }

.project-intro .right-content .phone{
	width:300px;
	position:absolute;
	bottom:-30px;
	left:30px;
	opacity:0;
	transform:translate(0px, 100px);
	transition:all .8s;
}
.project-intro .right-content .phone.animate{
	opacity:1;
	transform:translate(0px, 0px);
}
.project-intro .right-content .phone .phone-screen{
    top: 6px;
    left: 6px;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    position: absolute;
	border-radius:6%;
	background-position:center center !important;
	background-size:cover !important;
		box-shadow: 1px 13px 34px -14px rgba(0,0,0,0.34);
	-webkit-box-shadow: 1px 13px 34px -14px rgba(0,0,0,0.34);
	-moz-box-shadow: 1px 13px 34px -14px rgba(0,0,0,0.34);
}
.project-intro .right-content .phone .case{
	z-index:99;
	position:relative;
}

@media only screen and (max-width: 1500px) {
	
	.project-intro .left-content .inner-left-content .client-logo{
		margin:30px 0px 30px 0px;
		height:150px;
	}
	.project-intro .left-content .inner-left-content p{
		margin-bottom:40px;
		font-size:var(--font-18);
		line-height:var(--font-24);
	}
	.project-intro .right-content{
		display:flex;
		align-items:center;
	}
	.browser {
		aspect-ratio: 16 / 14;
		height:auto;
	}
	.project-intro .right-content .phone{
		width:20vw;
		margin-left:40px;
	}
}

@media only screen and (max-width: 1024px) {
	.project-intro{
		flex-wrap:wrap;
	}
	.project-intro .left-content{
		width:100%;
		max-width:100%;
	}
	.project-intro .left-content .inner-left-content{
		max-width:	calc(100% - 120px);
		margin-right:60px;
		width:100%;
	}
	.project-intro .right-content{
		width:100%;
		padding: 0px 60px;
	}
	.project-intro .right-content .phone{
		margin-left:0px;
		left:60px;
	}
	.browser{
		aspect-ratio: 12 / 8;
        width: calc(100% - 60px);
	}
	.browser.animate{
		transform: translate(60px, 0px);
	}
}


/* ==========================================================================
Intro
========================================================================== */

section.intro{
  padding:100px 0px;
  position: relative;
  background:url('./assets/images/VC_pattern.png');
  background-size:auto 90%;
  background-position: right top;
  background-repeat: no-repeat;
  overflow-x: hidden;
}
section.intro .fluid-container{
  display:flex;
  flex-wrap:wrap;
}
section.intro .intro-inner{
  width:50%;
}
section.intro h2{
  text-transform: uppercase;
}
section.intro p{
  letter-spacing: 1px;
}
section.intro .btn{
	background: #158acb;
}
section.intro .divider{
  margin:20px 0px;
  width:100px;
  height:4px;
  transform: translateX(-50%);
  background: rgb(255,255,255);
	background: linear-gradient(90deg, rgba(255,255,255,1) 0%, #158acb 100%);
}
section.intro .intro-right{
	width:50%;
	display:flex;
	align-items:center;
	justify-content:center;
}
section.intro .intro-right .circle{
    width: 360px;
    height: 360px;
    background: #3299d2;
    border: 10px solid #fff;
    z-index: 99;
    position: relative;
	overflow:hidden;
}
section.intro .intro-right .circle .code-editor{
	min-width: 530px;
    left: 70px;
    position: absolute;
    top: 60px;
}
.website-mockups{
	background:red;
	position:absolute;
	width:50%;
	right:0px;
	top:0px;
	height:100%;
	background:url('./assets/images/websites_big_mock-up.jpg');
	background-size: cover;
    background-position: center center;
}

@media only screen and (max-width: 1200px) {
	section.intro{
		padding:60px 0px;
	}
	section.intro .intro-inner{
		width:100%;
	}
}

@media only screen and (max-width: 1024px) {
	section.intro .intro-inner{
		width:100%;
	}
	section.intro .intro-right{
		padding-top:40px;
		width:100%;
	}
	.website-mockups{
	    width: 100%;
		top: 50%;
		height: 50%;
	}
}

/* ==========================================================================
Projects
========================================================================== */

section.projects{
  background:#1b1f2a;
  overflow:hidden;
  padding:80px 0px 100px 0px;
}
section.projects .fluid-container h2{
  color:#fff;
  text-align: right;
}

section.projects .project-slider{
  max-width: 1460px;
  width: 100%;
  box-sizing: border-box;
  margin: auto;
  padding:0px 0px;
  margin-top:40px;
}

.project-slider:after{
  content: '';
  position: absolute;
  background: #1b1f2a;
  height: calc(100% + 30px);
  left: 0px;
  transform: translateX(0%);
  width: 1px;
  display:none;
  top: -15px;
}
@media only screen and (max-width: 768px) {
	.project-slider:after{
		display:block;
	}
}
@media only screen and (max-width: 1200px) {
  .project-slider:after{
    width: 1px;
    left: 0px;
    transform: translateX(0%);
  }
}
section.projects .project-slider .slick-slider {
  /*margin:0 -15px;*/
  height:auto;
}
section.projects .project-slider .slick-list{
    /*max-width: 1460px;*/
	max-width: calc(100% - 90px);
    box-sizing: border-box;
    margin: auto;
    padding:0px 0px !important;
}
@media only screen and (max-width: 1360px) {
  section.projects .project-slider .slick-list{
    /*max-width: 100%;*/
    box-sizing: border-box;
    margin: auto;
  }
}

@media only screen and (max-width: 1260px) {
  section.projects .fluid-container{
    padding:30px 60px;
  }
}

ul.slick-dots{
  top:-60px;
  bottom:auto;
  display:flex;
  max-width: 1460px;
  padding: 0px 60px;
  box-sizing:border-box;
}
ul.slick-dots li{
  width:100%;
  padding:0px;
  margin:0px;
}
ul.slick-dots li button{
  width:100%;
  display: block;
  padding:15px 0px 0px 0px;
  background:transparent;
}
ul.slick-dots li button:before{
  display:none;
}
ul.slick-dots li button:after{
  width:100%;
  transition: all .2s;
  content:'';
  background:transparent;
  display: block;
  height:4px;
  border-bottom:1px solid #4c4c4c;
}
ul.slick-dots li.slick-active button:after{
  background:#158acb;
  border-bottom:1px solid #158acb;
}
ul.slick-dots li button:hover:after{
  background:#068458;
  border-bottom:1px solid #068458;
}

section.projects .project-slider .slick-slide {
  margin-right:15px;
  margin-left:15px;
   height:auto;
}
section.projects .project-slider .slick-list{
  overflow: visible;
}

section.projects .project-slider .slick-arrow{
	width: 60px;
    height: 60px;
    background: #ffffff;
    z-index: 300;
    -webkit-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.08);
    -moz-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.08);
    box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.08);
}
section.projects .project-slider .slick-arrow:before{
	display:none;
}
section.projects .project-slider .slick-arrow i{
	font-size: 24px;
    color: #1b1f2a;
}

@media only screen and (max-width: 1530px) {
	section.projects .project-slider .slick-arrow{
		width:40px;
		height:40px;
	}
	section.projects .project-slider .slick-prev{
		left:0px;
	}
	section.projects .project-slider .slick-next{
		right:0px;
	}
	section.projects .project-slider .slick-arrow i{
		font-size: 20px;
	}
}

section.projects .project-slider .project{
  background:#039f8c;
  padding-bottom:100%;
  -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.15);
  -moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.15);
  box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.15);
  overflow:hidden;
  position:relative;
}
section.projects .project-slider .project .project-image{
  background-size:cover !important;
  background-repeat: no-repeat !important;
  background-position: center center;
  position:absolute;
	width:100%;
transition:all .5s ease-in-out;
height:100%;
}
section.projects .project-slider .project .project-title{
	position:absolute;
	bottom:0px;
	height:80px;
	width:100%;
	left:0px;
	color:#fff;
	font-size:var(--font-24);
	font-family: 'Sansation';
	text-transform:uppercase;
	text-align:center;
	transition:all .3s;
	background:#0000007d;
	display:flex;
	align-items:center;
	justify-content:center;
	flex-wrap:wrap;
}
section.projects .project-slider .project .project-title .project-title-inner p{
	font-size:16px;
	line-height:24px;
	text-transform:none;
	margin:20px 0px 30px 0px;
	opacity:0p;
	display:none;
	max-width:430px;
	font-family: 'Raleway', sans-serif;
}
section.projects .project-slider .project .project-title i{
	display:none;
	opacity:0;
	transition:all .5s;
	width:100%;
	margin-top:20px;
	text-align:center;
}
section.projects .project-slider .project:hover .project-title{
	height:100%;
	background:#000000b0;
}
section.projects .project-slider .project:hover .project-title i, section.projects .project-slider .project:hover .project-title .project-title-inner p{
	display:block;
	opacity:1;
}
section.projects .project-slider .project:hover .project-image{
	transform:scale(1.25);
	transition: all 7s linear;
}

@media only screen and (max-width: 480px) {
	section.projects{
		padding:30px 0px 70px 0px;
	}
	section.projects .fluid-container{
		padding:20px 30px 10px 30px;
	}
	ul.slick-dots{
		padding:0px 30px;
	}
	section.projects .project-slider .slick-list{
		max-width: calc(100% - 30px);
	}
}

/* ==========================================================================
Single
========================================================================== */

.solo-header{
	background:url('./assets/images/Visualcode_solo_header_visual.jpg');
	background-color:#fff;
	background-size:100%;
	background-position:top;
	background-repeat:no-repeat;
	height:100%;
	overflow:hidden;
}

.solo-header a.logo{
  font-size: var(--font-32);
  font-family: 'Sansation';
  display: flex;
  align-items:center;
  width:48px;
  height:44px;
  text-transform:uppercase;
  font-size:24px;
  pointer-events:auto;
  margin:0px;
  margin-right:auto;
  position:absolute;
  color:#000;
}
.solo-header a.logo img{
  position: relative;
  background-color:#000;
  top:0px;
  left:0px;
  width:48px;
  margin-right:10px;
  height:44px;
  transition: all .5s;
}
.solo-header a.logo:hover{
	color:#158acb;
}
.solo-header a.logo:hover img{
	opacity:1;
	background:#158acb;
}



.single-page-spacing{
	height:20vw;
}


@media only screen and (max-width: 1600px) {
	.single-page-spacing{
		height:400px;
	}
}
@media only screen and (max-width: 1200px) {
	.single-page-spacing{
		height:200px;
	}
}

.elementor_page h1{
	line-height: var(--font-30);
	letter-spacing: 2px;
	font-size: var(--font-48);
	font-family: 'Sansation' !important;
	font-weight: bold !important;
	text-transform:uppercase;
}
.elementor_page h2{
	line-height: var(--font-24);
	letter-spacing: 2px;
	font-size: var(--font-32);
	font-family: 'Sansation' !important;
	font-weight: bold !important;
	text-transform:uppercase;
}

/* ==========================================================================
Expertises
========================================================================== */

section#expertises{
	background:#1b1f2a;
	padding:60px 0px;
}
section#expertises h2{
	text-align:center;
	color:#fff;
	line-height:inherit;
}
section#expertises h3{
	text-align:center;
	color:#6d6d6d;
	font-family:Raleway;
	margin-bottom:30px;
}

section#expertises .expertise-header{
	display:flex;
	margin:40px 0px 40px 0px;
	align-items:center;
}
section#expertises .expertise-header .icon{
	margin-right:30px;
	min-width:55px;
}
section#expertises .expertise-header .icon img{
	width:70px;
	height:50px;
}
section#expertises .expertise-header .name{
	font-size:var(--font-24);
	color:#fff;
	font-family:'Raleway';
	font-weight:600;
	white-space:nowrap;
	margin-right:30px;
}
hr{
	background:#30343d;
	height:1px;
	border:0px;
	transition:all .5s;
	width:100%;
}

section#expertises .expertise-header .arrow{
	width:40px;
	opacity:0.5;
	transition:all .5s;
	fill:#fff;
	margin-left:30px;
}
section#expertises .expertise-header:hover{
	cursor:pointer;
} 
section#expertises .expertise-header:hover .arrow{
	opacity:1;
}
section#expertises .expertise-header:hover hr{
	background:#fff;
}
section#expertises .expertise-header.active hr{
	background:#fff;
}
section#expertises .expertise-header.active .arrow{
  -moz-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
    filter: FlipV ;
    -ms-filter: "FlipV";	
	opacity:1;
}
section#expertises ul.expertise-list-items{
	list-style:none;
	margin:0px -10px;
	overflow:hidden;
	transition:all .5s;
	transition-timing-function: ease-out;
	max-height:0px;
}
section#expertises ul.expertise-list-items.open{
	max-height:500px;
	transition-timing-function: ease-in;
}
section#expertises ul.expertise-list-items li{
	background:#272c3b;
	font-size:var(--font-20);
	display:inline-block;
	margin:10px;
	padding:14px 20px;
	transition:all .3s;
	text-transform:uppercase;
	font-weight:300;
	color:#fff;
}
section#expertises ul.expertise-list-items li:hover{
	transform:scale(1.05);
	background:#2d3343;
}

@media only screen and (max-width: 580px) {
	section#expertises{
		padding:30px 0px;
	}
	section#expertises .expertise-header .name{
		white-space:inherit;
	}
	section#expertises .expertise-header .icon{
		display:none;
	}
	section#expertises ul.expertise-list-items li{
		padding:10px 16px;
		margin:5px;
	}
}

/* ==========================================================================
Services
========================================================================== */

section#services{
	padding:60px 60px 80px 60px;
	overflow:hidden;
	max-width:100vw;
}

section#services .moving-services-wrap{
	max-width:1340px;
	width:100%;
	padding:30px 00px;
	box-sizing: border-box;
	margin:auto;
	display:flex;
	transition:all .2s;
	align-items:center;
}
section#services .moving-services-wrap.active{
	transform:translateX(-50%);
}
section#services .moving-services-wrap.active .services-info{
	opacity:0;
}
section#services .moving-services-wrap.active .btn{
	display:none;
}
section#services .moving-services-wrap .btn.btn-left{
	display:none;
}
section#services .moving-services-wrap.active .btn.btn-left{
	display:block;
	left:0px;
}
section#services .moving-services-wrap.active .btn.btn-left i{
	margin-left:0px;
	margin-right:30px;
}
section#services .moving-services-wrap .services-info{
	width:50%;
	transition:all .2s;
	padding-right:60px;
	box-sizing:border-box;
}
section#services .moving-services-wrap .services-info h3{
	color:#158acb;
}
section#services .moving-services-wrap .services-info h2{
	line-height:inherit;
	margin:5px 0px 20px 0px;
}
section#services .moving-services-wrap .services-info p{
	margin-bottom:20px;
}
section#services .moving-services-wrap .services-info .btn{
	background:#158acb;
}
section#services .moving-services-wrap .services-block{
	width:50%;
	position:relative;
}
section#services .moving-services-wrap .services-visual{
	width:60%;
	padding:60px 0px;
	min-height:400px;
	background:url('./assets/images/istockphoto-1476744439-2048x2048_cutout.png');
	background-size:cover;
	background-position:left center;
	position:relative;
}
section#services .moving-services-wrap .services-visual .btn{
	background:transparent;
	color:#000;
	position:absolute;
	z-index:99;
	bottom:-10px;
	cursor:pointer;
	transform:translate(0%, 100%);
	right:-15px;
}
section#services .moving-services-wrap .services-visual .btn:hover span{
	text-decoration:underline;
}
section#services .moving-services-wrap .services-visual .btn i{
	text-decoration:none;
}
section#services .moving-services-wrap .services-slider{
	min-width:calc(1340px - 200px);
	max-width:calc(1340px - 200px);
	min-height:300px;
	position:absolute;
	top:50%;
	left:200px;
	transform:translateY(-50%);
}
section#services .moving-services-wrap .services-slider.flex{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	position: relative;
    transform: translate(0px);
    margin-top: -500px;
}
section#services .moving-services-wrap .services-slider.flex .slide{
	width:calc((100% / 3) - 30px);
	margin-bottom:30px;
}

section#services .moving-services-wrap .services-slider .slick-list{
	padding:30px 0px !important;
	margin: 0 -30px;
}
section#services .moving-services-wrap .services-slider .slick-slide {
    margin: 0 30px;
}
section#services .moving-services-wrap .services-slider .slide{
	background:#fff;
	padding:60px 40px;
	box-sizing:border-box;
	-webkit-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.08);
	-moz-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.08);
	box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.08);
}
section#services .moving-services-wrap .services-slider .slide:hover{
	transform:scale(1.05);
}
section#services .moving-services-wrap .services-slider .slide:hover .service-btn:after{
	background:#000;
	width:100%;
}

section#services .moving-services-wrap .services-slider .slide img{
	width:80px;
}
section#services .moving-services-wrap .services-slider .slide .service-title{
	font-size:var(--font-20);
	line-height:var(--font-26);
	font-weight:700;
	margin:20px 0px;
	text-transform:uppercase;
	color:#000;
}
section#services .moving-services-wrap .services-slider .slide .service-p{
	font-size:var(--font-18);
	line-height:var(--font-24);
	color:#000;
}
section#services .moving-services-wrap .services-slider .slide .service-btn{
	margin-top:20px;
	display:inline-block;
	font-size:var(--font-20);
	line-height:var(--font-26);
	color:#000;
	font-weight:600;
}
section#services .moving-services-wrap .services-slider .slide .service-btn:after{
  content: '';
  display: block;
  background: #6c6c6c;
  width: 0%;
  opacity: 1;
  height: 1px;
  margin-top:0px;
  transition: all .2s;
}

@media only screen and (max-width: 1200px) {
	section#services .moving-services-wrap .services-slider{
		max-width:calc(90vw - 270px);
		min-width:calc(90vw - 270px);
		left:150px;
	}
	section#services .moving-services-wrap .services-visual{
		width:70%;
	}
}
@media only screen and (max-width: 900px) {
	section#services .moving-services-wrap .services-slider{
		max-width:calc(65vw - 270px);
		min-width:calc(65vw - 270px);
		left:100px;
	}
	section#services .moving-services-wrap .services-visual{
		width:80%;
	}
}

@media only screen and (max-width: 768px) {
	section#services{
		padding:30px 0px 50px 0px;
	}
	section#services .moving-services-wrap{
		transform: translateX(0%);
		flex-wrap:wrap;
	}
	section#services .moving-services-wrap.active{
		transform: translateX(0%);
	}
	section#services .moving-services-wrap .services-visual .btn{
		display:none;
	}
	section#services .moving-services-wrap.active{
		opacity:1;
	}
	section#services .moving-services-wrap .services-info{
		padding-right:60px;
		padding-left:60px;
		padding-bottom:20px;
		width:100%;
	}
	section#services .moving-services-wrap.active .services-info{
		opacity:1 !important;
	}
	.move-forward{
		display:none !important;
	}
	section#services .moving-services-wrap .services-block{
		width:100%;
		margin-top:40px;
	}
	section#services .moving-services-wrap .services-slider{
		max-width:60vw;
		min-width:60vw;
		left:inherit;
		right:30px;
	}
	section#services .moving-services-wrap .services-visual{
		width:75%;
	}
	section#services .moving-services-wrap .services-slider .slick-slide{
		margin:0px 60px;
	}
	section#services .moving-services-wrap .services-slider .slide{
		padding:40px 30px;
	}
}

@media only screen and (max-width: 480px) {
	section#services .moving-services-wrap{
		padding:0px;
	}

	section#services .moving-services-wrap .services-info{
		padding:30px 30px;
	}
	section#services .moving-services-wrap .services-slider .slick-slide{
		margin:0px 30px;
		padding:30px;
	}
}

/* ==========================================================================
Flexible content
========================================================================== */
.automatic-scroll-website{
	min-height:500px;
	padding:60px 0px;
	overflow:hidden;
	position:relative;
	text-align:center;
}
.automatic-scroll-website:before{
	content:'';
	position:absolute;
	height:50%;
	width:110vw;
	bottom:0px;
	left:-5vw;
	background:#394c6e;
	transform:rotate(-2deg) translateY(100px);
}
.automatic-scroll-website .browser {
      width:100%;
	  transform:translate(0px, 0px);
      /*aspect-ratio: 16 / 9;
	  -webkit-aspect-ratio: 16 / 9;*/
	  height:70vh;
      border-radius: 8px;
      background: white;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      display: flex;
      flex-direction: column;
      overflow: hidden;
	  margin-top:60px;
}
.automatic-scroll-website .browser .browser-header{
	z-index:99;
}
.automatic-scroll-website .browser .browser-content{
	padding:0px;
}
.automatic-scroll-website .browser img.browser-visual{
	width:100%;
	left:0px;
	position:absolute;
	/*transition: top 2s linear; */
}
.automatic-scroll-website h2{
	text-align:center;
	margin-bottom:15px;
	line-height:var(--font-24);
	text-transform:uppercase;
}
.automatic-scroll-website h3{
	text-align:center;
}
.automatic-scroll-website p{
	max-width:900px;
	margin:auto;
	margin-top:40px;
	text-align:center;
}
.automatic-scroll-website .btn{
	margin:60px auto 0px auto;
	position:relative;
	background:#fff;
	color:#000;
}
.automatic-scroll-website .btn i{
	margin-right:20px;
	margin-left:0px;
}

/* ==========================================================================
Contact
========================================================================== */

section.contact{
  background:#fafafa;
  text-align: center;
  padding:50px 0px;
}

section.contact h2{
  text-transform: uppercase;
  line-height:inherit;
  display:block;
}

section.contact p{
  margin:20px 0px 30px 0px;
  font-size:var(--font-20);
  line-height:var(--font-28);
  letter-spacing: 1px;
}

section.contact a.btn{
  background:#158acb ;
}
section.contact a.btn:hover{
  background:#000;
}


/* ==========================================================================
footer
========================================================================== */

footer .fluid-container{
  display:flex;
  justify-content: space-between;
  border-bottom: 1px solid #dddddd;
  padding:50px 60px;
  margin:0px auto;
  width: 100%;
}
footer .fluid-container .column.one-fourth{
  width:calc(25% - 40px);
}
footer .fluid-container .column.two-fourth{
  width:calc(50% - 40px);
}
footer .fluid-container p{
  font-size:var(--font-18);
  line-height:var(--font-28);
  padding:20px 0px;
}

footer .fluid-container .widgettitle{
  font-size:var(--font-22);
  text-transform: uppercase;
  padding-bottom:10px;
  border-bottom:1px solid #dddddd;
  margin-bottom:12px;
}
footer .fluid-container ul.menu{
  list-style: none;
}
footer .fluid-container ul.menu li{
  font-size:var(--font-20);
  padding:8px 0px;
}
footer .fluid-container ul.menu li a{
  color:#000;
  display:inline-block;
}
footer .fluid-container ul.menu li a:after{
  content: '';
  display: block;
  background: #000;
  width: 0;
  opacity: 0;
  height: 1px;
  margin-top:5px;
  transition: all .2s;
}
footer .fluid-container ul.menu li a:hover:after{
  width:100%;
  opacity: 1;
}

footer .fluid-container .column.two-fourth ul.menu{
  display:flex;
  flex-wrap:wrap;
}
footer .fluid-container .column.two-fourth ul.menu li{
  width:50%;
}
footer .fluid-container .column.one-fourth .wp-block-social-links{
	list-style:none;
}
footer .fluid-container .column.one-fourth .wp-block-social-links svg{
	width:40px;
	height:40px;
	
}

.disclaimer{
    font-size:var(--font-16);
    text-align: center;
    text-transform: uppercase;
    padding:30px;
    box-sizing: border-box;
}

@media only screen and (max-width: 768px) {
  footer .fluid-container{
    flex-wrap:wrap;
    padding:60px 60px;
  }
  footer .fluid-container .column{
    margin-bottom:40px;
  }
  footer .fluid-container .column:last-child{
    margin-bottom:0px;
  }
  footer .fluid-container .column.one-fourth{
    width:calc(50% - 30px);
  }
  footer .fluid-container .column.two-fourth{
    width:100%;
  }
  footer .fluid-container .widgettitle{
    padding-bottom:10px;
    margin-bottom:18px;
  }
  footer .fluid-container ul.menu li{
    padding:5px 0px;
  }
  footer .fluid-container .column.two-fourth ul.menu{
    justify-content: space-between;
  }
  footer .fluid-container .column.two-fourth ul.menu li{
    width:calc(50% - 30px);
  }
}

@media only screen and (max-width: 480px) {
  footer .fluid-container{
    flex-wrap:wrap;
    padding:60px 30px;
  }
  footer .fluid-container .column{
    margin-bottom:40px;
  }
  footer .fluid-container .column:last-child{
    margin-bottom:0px;
  }
  footer .fluid-container .column.one-fourth{
    width:100%;
  }
  footer .fluid-container .column.one-fourth:first-child{
	text-align:center;
  }
  footer .fluid-container .column.one-fourth .wp-block-social-links{
	  justify-content:center;
  }
  footer .fluid-container .widgettitle{
    padding-bottom:20px;
    margin-bottom:20px;
  }
  footer .fluid-container ul.menu li{
    padding:3px 0px;
  }
  footer .fluid-container .column.two-fourth ul.menu{
    flex-wrap:wrap;
  }
  footer .fluid-container .column.two-fourth ul.menu li{
    width:100%;
  }
}