/* -------------------------------- 

Primary style

-------------------------------- */
*, *::after, *::before {
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
  font-family: "Open Sans", sans-serif;
}
body::before {
  /* never visible - this is used in jQuery to check the current MQ */
  content: 'mobile';
  display: none;
}
@media only screen and (min-width: 1050px) {
  body::before {
    /* never visible - this is used in jQuery to check the current MQ */
    content: 'desktop';
  }
}

a {
	color: #267481;
 	text-decoration: none;
}
#header-main{
	 position:fixed;
	 height:115px;
	 width:100%;	 
}
#header-arrow{
	margin:0 auto;
	 height: 40px;
 	 width: 40px;
 	 bottom: 80px;
	position: relative;
}
#header-arrow a {
  display: block;
  height: 40px;
  width: 40px;
  /* image replace */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
   background: url(../img/arrow-down.svg) no-repeat center center;
   -webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	transform: rotate(180deg);
}
#footer-main{
	 position:fixed;
	 bottom:0;
	 height:80px;
	 width:100%; 
}
#logo-main{
	background-image:url("../img/oranje-black-logo.svg");
	-webkit-transition: background-image 1s ease-in-out;
	transition: background-image 1s ease-in-out;
	background-repeat:no-repeat;
	height:158.54px;
	width:158.54px;
	margin-top:64px;
	margin-left:104px;
	opacity:1; 
}
.white{
	background-image:url("../img/oranje-white-logo.svg") !important;
	-webkit-transition: background-image 1s ease-in-out;
	transition: background-image 1s ease-in-out;
	background-repeat:no-repeat;
	height:59px;
	width:84px;
	margin-top:64px;
	margin-left:104px;
}


/* CHANGES */
#section-1 .block-content {
	font-family: 'Bitter', serif;
  }
  
  #name-slogan {
	padding-left: 28px;
  }
  
  #name-slogan h2 {
	display: block;
	margin: 0;
  }
  
  #slogan-description {
	padding-left: 28px;
  }
  
  #slogan-description h2 {
	display: block;
	margin: 0;
	font-family: 'Bitter', serif;
  }
  
  #name-slogan .dev-highlight {
	font-weight: bold;
  }
  
  #name-slogan .dev-dot {
	font-size: 200px;
  }
/* END OF CHANGES */
/* -------------------------------- 

Main Components 

-------------------------------- */
@media only screen and (min-width: 1050px) {
  body[data-hijacking="on"] {
    overflow: hidden;
  }
}

.cd-section {
	height: 100vh;
}

#section-1 .block {
    position: relative; /* Ensures that the pseudo-element is positioned relative to this block */
    background-color: #EAE7E0; /* Background color */
    height: 100vh;
    width: 100%;
}

#section-1 .block::before { /* REVISIT THIS, DONT FULLY UNDERSTAND */
    content: ""; /* Makes the pseudo-element real */
    position: absolute; /* Position it absolutely inside the .block */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("../img/oranje-bg.svg"); /* Your background image */
    background-repeat: no-repeat;
    background-size: contain; /* Adjust the size of the image */
    background-position: right center; /* Position it centered vertically, to the right */
    opacity: 0.1; /* Set opacity only for the image */
    z-index: -1; /* Keep it behind the content */
    display: block; /* Ensure the pseudo-element is treated like a block-level element */
}

.cd-section .block {
	height: 100vh;  
	text-align: center;
	font-size: 2.4rem;
	display: flex;
	align-items: center;
	justify-content: center;
}
/* START OF CHANGES TO LAYOUT
	Ensuring the block content has no unwanted margins/padding */
.cd-section .block .block-content {
	margin: 0 auto;
	padding: 0; /* Remove any padding that could throw off alignment */
	text-align: center; /* Center the content */
  }
  
  /* Styling for h2 to ensure the layout works properly */
  .cd-section:first-of-type h2 {
	color: #E26C25;
	text-shadow: 0px 5px 8px rgba(0, 0, 0, 0.27);
	font-family: 'Bitter', serif;
	font-size: 200px; /* Keeping the 200px as per the design */
	font-weight: 800;
	line-height: 1.1;  /* Adjust line-height to space the text better */
	letter-spacing: -2px; /* Adjust letter-spacing */
	margin: 0; /* Ensure there's no margin on the h2 */
  }
  
  /* Highlighted dev part of the text */
  .dev-highlight {
	color: rgba(46, 47, 43, 0.85);
	font-family: 'Bitter', serif;
	font-size: 200px;
	font-weight: 800;
	line-height: 1.1; /* Match the line-height of h2 */
	letter-spacing: -2px;
  }
  
  /* The dev dot styling */
  .dev-dot {
	color: #E26C25;
  text-shadow: 0px 5px 8px rgba(0, 0, 0, 0.27);
  font-family: Bitter;
  font-size: 200px;
  font-style: normal;
  font-weight: 800;
  line-height: 24px;
  letter-spacing: -2px;
  }
  
  #slogan-description p {
	color: rgba(74, 75, 70, 0.70);
	font-family: "Open Sans", sans-serif;
	font-size: 32px;
	font-weight: 600;
	font-style: normal;
	line-height: 24px;
	letter-spacing: -0.32px;
	text-align: left;
	margin-top: 60px;
	padding-left: 10px;
  }
  

  /* Adjust the line-height for the span inside h2 (for dev-highlight) */
  .cd-section:first-of-type h2 span {
	font-weight: 600;
  /* END OF CHANGES */
}
 /*
 
.cd-section:first-of-type > div::before {
  alert -> all scrolling effects are not visible on small devices 
  content: 'Effects not visible on mobile!';
  position: absolute;
  width: 100%;
  text-align: center;
  top: 20px;
  z-index: 2;
  font-weight: bold;
  font-size: 1.3rem;
  text-transform: uppercase;
  color: #6a7083;
}
*/
.cd-section:nth-of-type(2) > div {
  background-color: #4A4B46;
}
#section-2 .block{
	background-image: url("../img/oranje-slider.svg");
	background-repeat: no-repeat;
	background-size: initial;
	background-position-y: center;
}
.cd-section:nth-of-type(2) .block .block-content{
	height:700px;
	width:1440px;
}

#portfolio-left{
	height:100%;
	width:80px;
	float:left;	
	display: flex;
	align-items: center;
	justify-content: center;
}
#portfolio-right{
	height:100%;
	width:80px;
	float:left;	
	display: flex;
	align-items: center;
	justify-content: center;
}
#prev{
	width: 20px;
	height: 30px;
	background-image: url("../img/arrow-left.svg");
	background-repeat: no-repeat;
	background-size: contain;
	cursor:pointer;
	border:none;
	background-color:#222222;
}
#next{
	width: 20px;
	height: 30px;
	background-image: url("../img/arrow-right.svg");
	background-repeat: no-repeat;
	background-size: contain;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor:pointer;
	border:none;
	background-color:#1d1d1d;
}
#portfolio-middle{
	position: relative;
	height:700px;
	width:1240px;
	float:left;
	overflow:hidden;
}
#text{
	display:none;
}
#portfolio-middle ul{
	white-space: nowrap;
	position: absolute;
	top: 0;
	left: -1280px;
	margin: 0; 
	padding: 0;
	font-size: 0;
}
#portfolio-middle li.portfolio-item{
	height:700px;
	width:1280px;
	display: inline-block;
	vertical-align: top;
	white-space: normal;
	font-size: 18px;
}

.portfolio-item-left{
	width:744px;
	height:700px;
	float:left;
}
#rotate-block1{
	height:518px;
	width:518px;
	background-image: url("../img/portfolio-2.jpg");
	background-repeat:no-repeat;
	-ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
	position: relative;
	top: 107px;
	left: 99px;
	background-size:contain;
	border-radius:50%;
}
#nr1 .overlay{
	opacity:0;
	 -webkit-transition: opacity 1400ms ease-out;
   -moz-transition: opacity 1400ms ease-out;
   -o-transition: opacity 1400ms ease-out;
   -ms-transition: opacity 1400ms ease-out;
   transition: opacity 1400ms ease-out;
}
#nr1 .preview-wide .overlay{
	background-image: url("../img/portfolio-1-site.jpg") !important;
	background-size:cover;
	height:400px;
	width:500px;
	opacity:1;
	 -webkit-transition: opacity 1400ms ease-out;
   -moz-transition: opacity 1400ms ease-out;
   -o-transition: opacity 1400ms ease-out;
   -ms-transition: opacity 1400ms ease-out;
   transition: opacity 1400ms ease-out;
}
#rotate-block2{
	height:487px;
	width:487px;
	background-image: url("../img/portfolio-2.jpg");
	background-repeat:no-repeat;
	-ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
	position: relative;
	top: 107px;
	left: 99px;
	background-size:contain;
	border-radius:16px;
}
#rotate-block3{
	height:487px;
	width:487px;
	background-image: url("../img/portfolio-3.jpg");
	background-repeat:no-repeat;
	-ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
	position: relative;
	top: 107px;
	left: 99px;
	background-size:contain;
	border-radius:16px;
}
#rotate-block4{
	height:487px;
	width:487px;
	background-image: url("../img/portfolio-4.jpg");
	background-repeat:no-repeat;
	-ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
	position: relative;
	top: 107px;
	left: 99px;
	background-size:contain;
	border-radius:16px;
}
#rotate-block5{
	height:487px;
	width:487px;
	background-image: url("../img/portfolio-5.jpg");
	background-repeat:no-repeat;
	-ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
	position: relative;
	top: 107px;
	left: 99px;
	background-size:contain;
	border-radius:16px;
}
#rotate-block6{
	height:487px;
	width:487px;
	background-image: url("../img/portfolio-6.jpg");
	background-repeat:no-repeat;
	-ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
	position: relative;
	top: 107px;
	left: 99px;
	background-size:contain;
	border-radius:16px;
}
#rotate-block7{
	height:487px;
	width:487px;
	background-image: url("../img/portfolio-7.jpg");
	background-repeat:no-repeat;
	-ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
	position: relative;
	top: 107px;
	left: 99px;
	background-size:contain;
	border-radius:16px;
}
#rotate-block8{
	height:487px;
	width:487px;
	background-image: url("../img/portfolio-8.jpg");
	background-repeat:no-repeat;
	-ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
	position: relative;
	top: 107px;
	left: 99px;
	background-size:contain;
	border-radius:16px;
}
#rotate-block9{
	height:487px;
	width:487px;
	background-image: url("../img/portfolio-9.jpg");
	background-repeat:no-repeat;
	-ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
	position: relative;
	top: 107px;
	left: 99px;
	background-size:contain;
	border-radius:16px;
}
#portfolio-button1 ,#portfolio-button2,#portfolio-button3{
	cursor:pointer;
}

.preview{
	-webkit-transition-duration: 1s !important;
    -moz-transition-duration: 1s !important;
    -o-transition-duration: 1s !important;
    transition-duration: 1s !important;
    -webkit-transition-property: -webkit-transform !important;
    -moz-transition-property: -moz-transform !important;
    -o-transition-property: -o-transform !important;
    transition-property: transform !important;
	transform: rotate(0deg) !important;
	-webkit-transform: rotate(0deg) !important;
	-ms-transform: rotate(0deg) !important;	
	background:white;
}
.preview-wide{
	width: 500px !important;
	transition: width 1s  !important;	
}
.rotate-reset{
	-webkit-transition-duration: 1s !important;
    -moz-transition-duration: 1s !important;
    -o-transition-duration: 1s !important;
    transition-duration: 1s !important;
    -webkit-transition-property: -webkit-transform !important;
    -moz-transition-property: -moz-transform !important;
    -o-transition-property: -o-transform !important;
    transition-property: transform !important;
	transform: rotate(45deg) !important;
	-webkit-transform: rotate(45deg) !important;
	-ms-transform: rotate(45deg) !important;	
}
.preview-wide-back{
	width: 477px !important;
	transition: width 1s  !important;	
}
#portfolio{
    height: 700px;
    width: 1400px;
}
.portfolio-item-right{
	width:478px;
	height:700px;
	float:left;
}  
#portfolio-right{
	height:700px;
	width:80px;
	float:left; 
}
.portfolio-title{
	margin-top:100px;
	text-align:left;
	font-size:42px;
	padding-bottom:22px;
	font-size:bold;
}
.portfolio-title-collaboration{
	text-align:left;
	padding-bottom:14px;
	font-size:11px;
}
.portfolio-divider{
	text-align:left;
	padding-bottom:24px;
	border-bottom:2px solid #919191;
	width:22px;
	margin-bottom:28px;
}
.portfolio-text{
	text-align:left;
	line-height:36px;
	padding-bottom:50px;
}
.portfolio-button{
	text-align:left;	
	border:2px solid red;
	width: 114px;
	padding: 12px;
}
a .portfolio-button{
	color:#fff;	
}

.cd-section:nth-of-type(3) > div {
  background-color: #EAE7E0;
}
.cd-section:nth-of-type(3) h2{
	color:#4A4B46;
}
.cd-section:nth-of-type(4) > div {
  background-color: #4A4B46;
}
.cd-section:nth-of-type(4) h2{
	color:#000;
}
.cd-section:nth-of-type(5) > div {
  background-color: #fff;
}
[data-animation="parallax"] .cd-section > div, [data-animation="fixed"] .cd-section > div, [data-animation="opacity"] .cd-section > div {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
[data-animation="parallax"] .cd-section:first-of-type > div, [data-animation="fixed"] .cd-section:first-of-type > div, [data-animation="opacity"] .cd-section:first-of-type > div {
  background-image: url("../img/img-1.jpg");
}
[data-animation="parallax"] .cd-section:nth-of-type(2) > div, [data-animation="fixed"] .cd-section:nth-of-type(2) > div, [data-animation="opacity"] .cd-section:nth-of-type(2) > div {
  background-image: url("../img/img-2.jpg");
}
[data-animation="parallax"] .cd-section:nth-of-type(3) > div, [data-animation="fixed"] .cd-section:nth-of-type(3) > div, [data-animation="opacity"] .cd-section:nth-of-type(3) > div {
  background-image: url("../img/img-3.jpg");
}
[data-animation="parallax"] .cd-section:nth-of-type(4) > div, [data-animation="fixed"] .cd-section:nth-of-type(4) > div, [data-animation="opacity"] .cd-section:nth-of-type(4) > div {
  background-image: url("../img/img-4.jpg");
}
[data-animation="parallax"] .cd-section:nth-of-type(5) > div, [data-animation="fixed"] .cd-section:nth-of-type(5) > div, [data-animation="opacity"] .cd-section:nth-of-type(5) > div {
  background-image: url("../img/img-5.jpg");
}

.field label[for="name"], .field label[for="email"], .field label[for="message"] {
   color:#000;
}
#price-range{
	color:#000;
}

#price-range p{
	color:#000;
}
#form-messages{
	color:#000;
}
#section-3{
	color:#1d1d1d;
}
#what-we-do-blocks{
	width:1200px;
}
.what-we-do-block{
	padding:0 50px;
}
.divider{
	width:22px;
	border-bottom:2px solid #353535;
	margin:44px auto 62px; 
}
.divider-footer{
	width:22px;
	border-bottom:2px solid #353535;
	margin:22px auto 26px; 
}
.what-we-do-block-title{
	font-size: 18px;
	font-weight: 600;
	line-height: 28px;
	text-align: center;
	padding: 32px 0px 15px;
}
.what-we-do-block-text{
	opacity: 0.8;	
	font-size: 15px;
	line-height: 25px;
	text-align: center;
}
.first{
	 width:33%;
	 float:left;
}
.first .icon{
	 background: url(../img/design.svg) no-repeat center center;
	 height:63px;
	 width:63px;
	 margin:0 auto;
}
.second{
	 width:33%;
	 float:left;
}
.second .icon{
	 background: url(../img/coding.svg) no-repeat center center;
	 height:63px;
	 width:63px;
	 margin:0 auto;
}
.third{
 	 width:34%;
	 float:left;
}
.third .icon{
	 background: url(../img/after-care.svg) no-repeat center center;
	 height:63px;
	 width:63px;
	 margin:0 auto;
}
.what-we-do-block-text{
	color:#1d1d1d;
}
#about-us{
	width:1200px;
}
#about-us-left{
	width:50%;
	color:#1d1d1d;
}
#about-us-right{
	width:50%;
}
#about-us-title{
	text-align:left;
	margin-bottom:32px;
	margin-top:250px;
}
#about-us-text{
	opacity: 0.8;	
	color: #000000;	
	font-family: "Open Sans";	
	font-size: 17px;	
	line-height: 32px;
	text-align:left;
}
.cd-vertical-nav {
  /* lateral navigation */
  position: fixed;
  z-index: 1;
  right: 3%;
  top: 50%;
  bottom: auto;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  display: none;
}
.cd-vertical-nav a {
  display: block;
  height: 40px;
  width: 40px;
  /* image replace */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
   background: url(../img/arrow-down.svg) no-repeat center center;
}
#footer-arrow{
	margin:0 auto;
	 height: 40px;
 	 width: 40px;
}
#footer-arrow a {
  display: block;
  height: 40px;
  width: 40px;
  /* image replace */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
   background: url(../img/arrow-down.svg) no-repeat center center;
}
.cd-vertical-nav a.cd-prev {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
  margin-bottom: 10px;
}
a.inactive {
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity 0.2s 0s, visibility 0s 0.2s;
  -moz-transition: opacity 0.2s 0s, visibility 0s 0.2s;
  transition: opacity 0.2s 0s, visibility 0s 0.2s;
}
#section-4 #about-us-wrapper{
	background-image: url("../img/mark_otte.png");
	background-repeat: no-repeat;
	background-size: 745px 544px;
	background-position-y: 117px;
	background-position-x: 450px;
	height:100%;
}
#about-us-footer{
	color:#000;
}
#about-us-social{
	margin-top:40px;
}
#about-us-social-facebook{
	background-image: url("../img/facebook.svg");
	background-repeat: no-repeat;
	height:16px;
	width:16px;
	float:left;
}
#about-us-social-linkedin{
	background-image: url("../img/linked.svg");
	background-repeat: no-repeat;
	height:16px;
	width:16px;
	float:left;
	margin-left:20px;
}
#about-us-social-twitter{
	background-image: url("../img/twitter.svg");
	background-repeat: no-repeat;
	height:16px;
	width:16px;
	float:left;
	margin-left:20px;
	background-position-y: 2px;
}
#about-us-footer-wrapper{
	width:450px;
	height:34px;
	margin:100px auto 0;
}
#about-us-footer-left{
	opacity: 0.6;	
	color: #000000;	
	font-family: "Open Sans";	
	font-size: 13px;	
	line-height: 18px;
	width:33%;
	float:left;
}
#about-us-footer-middle{
	opacity: 0.6;	
	color: #000000;	
	font-family: "Open Sans";	
	font-size: 13px;	
	line-height: 18px;
	width:33%;
	float:left;
}
#about-us-footer-right{
	opacity: 0.6;	
	color: #000000;	
	font-family: "Open Sans";	
	font-size: 13px;	
	line-height: 18px;
	width:34%;
	float:left;
}
#about-us-footer-left-2{
	opacity: 0.6;	
	color: #000000;	
	font-family: "Open Sans";	
	font-size: 13px;	
	line-height: 18px;
	width:33%;
	float:left;
	margin-top:10px;
}
#about-us-footer-middle-2{
	opacity: 0.6;	
	color: #000000;	
	font-family: "Open Sans";	
	font-size: 13px;	
	line-height: 18px;
	width:33%;
	float:left;
	margin-top:10px;
}
#about-us-footer-right-2{
	opacity: 0.6;	
	color: #000000;	
	font-family: "Open Sans";	
	font-size: 13px;	
	line-height: 18px;
	width:34%;
	float:left;
	margin-top:10px;
}
#copyright{
	opacity: 0.3;	
	color: #000000;	
	font-family: "Open Sans";	
	font-size: 13px;
}
#about-us-footer-mobile {
    display: none; 
}
#section-3 h2{
	margin-bottom:44px;
    margin-top: 100px;
}
#section-3 h3{
	color:#a1a1a1;	
	width: 60%;
    margin: 0 auto;
    line-height: 34px;
}
.mobile-item{
	display:none;
	width:80%;
}
.mobile-item .portfolio-title-title{
	margin-top:100px;
    font-size: 36px !important;
    margin-bottom: 5px;
}
.mobile-item .portfolio-title-collaboration {
    text-align: center;
    padding-top:12px;
    padding-bottom: 40px;
    font-size: 11px;
}
.mobile-item #rotate-block1{
	background-image: url("../img/portfolio-1.jpg");
}
.mobile-item #rotate-block2{
	background-image: url("../img/portfolio-2.jpg");
}
.mobile-item #rotate-block3{
	background-image: url("../img/portfolio-3.jpg");
}
.mobile-item #rotate-block4{
	background-image: url("../img/portfolio-4.jpg");
}
.mobile-item #rotate-block5{
	background-image: url("../img/portfolio-5.jpg");
}
.mobile-item #rotate-block6{
	background-image: url("../img/portfolio-6.jpg");
}
.mobile-item #rotate-block7{
	background-image: url("../img/portfolio-7.jpg");
}
.mobile-item #rotate-block1, 
.mobile-item #rotate-block2,
.mobile-item #rotate-block3,
.mobile-item #rotate-block4,
.mobile-item #rotate-block5,
.mobile-item #rotate-block6, 
.mobile-item #rotate-block7,
.mobile-item #rotate-block8,
.mobile-item #rotate-block9 {
    height: 239px;
    width: 239px;    
    background-repeat: no-repeat;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: relative;
    top: 61px;
    left:0;
    background-size: contain;
    border-radius: 16px;
    margin: 0 auto;
}
.mobile-item .portfolio-text {
    padding-top: 130px;	
}
.mobile-item .portfolio-text {
    text-align: center;	
    font-size:14px;
    width:100%;
}
.mobile-item .portfolio-button {
    margin: 0 auto;
}
#portfolio-middle li.portfolio-item .mobile-item {
    width: 80vw;
}
.desktop-item{
	display:block;	
}
#about-us-left{
	display:block;
}
#about-us-right{
	display:none;
}



@media only screen and (max-height: 775px), screen and (max-width: 1050px){
	#about-us-footer-mobile {
	    display: block; 
	}
	#about-us-footer-wrapper {
	    width: 450px;
	    height: 34px;
	    margin: 100px auto 0;
	}
	#about-us-footer{
		display:none;	
	}
}
	
}
@media only screen and (max-width: 1050px), screen and (max-height: 700px){
	#section-2 .block {
	    background-image: url(../img/diamond-black.svg);
	    background-repeat: no-repeat;
	    background-size: 526px;
	    background-position-y: center;
	}
	#rotate-block1 {
	    height: 422px;
	    width: 422px;
	    background-image: url(../img/portfolio-1.jpg);
	    background-repeat: no-repeat;
	    -ms-transform: rotate(45deg);
	    -webkit-transform: rotate(45deg);
	    transform: rotate(45deg);
	    position: relative;
	    top: 139px;
	    left: 99px;
	    background-size: contain;
	    border-radius: 16px;
	}
	#rotate-block1 {
	    height: 422px;
	    width: 422px;
   	}
	#rotate-block1 {
	    height: 422px;
	    width: 422px;
   }
	#rotate-block1 {
	    height: 422px;
	    width: 422px;
   }
	#rotate-block1 {
	    height: 422px;
	    width: 422px;
   }
	#rotate-block1 {
	    height: 422px;
	    width: 422px;
   }
	#rotate-block1 {
	    height: 422px;
	    width: 422px;
   }
	.cd-section:nth-of-type(2) .block .block-content {
	    height: 700px;
	    width: 1280px;
	}
	#portfolio {
	    height: 700px;
	    width: 1280px;
	    display: block;
	}
	#portfolio-middle {
	    position: relative;
	    height: 700px;
	    width: 1110px;
	    float: left;
	    overflow: hidden;
	}
	.portfolio-item-right {
   		width: 360px;
   	}
	#about-us-footer-mobile {
	    display: block; 
	}
	#about-us-footer-wrapper {
		display:none;	
	}

}
@media only screen and (min-width: 1050px) and (max-width: 1220px){ 
	#about-us {
	    width: 1200px;
	    padding-left: 170px;
   	}
}
@media only screen and (min-width: 1050px) {
	
  .cd-section h2 {
    font-size: 42px;
    font-weight: 300;
  }
  [data-hijacking="on"] .cd-section {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
  [data-hijacking="on"] .cd-section > div {
    visibility: visible;
  }
  [data-hijacking="off"] .cd-section > div {
    opacity: 0;
  }
  [data-animation="rotate"] .cd-section {
    /* enable a 3D-space for children elements */
    -webkit-perspective: 1800px;
    -moz-perspective: 1800px;
    perspective: 1800px;
  }
  [data-hijacking="on"][data-animation="rotate"] .cd-section:not(:first-of-type) {
    -webkit-perspective-origin: center 0;
    -moz-perspective-origin: center 0;
    perspective-origin: center 0;
  }
  [data-animation="scaleDown"] .cd-section > div, [data-animation="gallery"] .cd-section > div, [data-animation="catch"] .cd-section > div {
    box-shadow: 0 0 0 rgba(25, 30, 46, 0.4);
  }
  [data-animation="opacity"] .cd-section.visible > div {
    z-index: 1;
  }

  .cd-section:first-of-type > div::before {
    display: none;
  }
  .cd-section > div {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    /* Force Hardware Acceleration */
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  [data-hijacking="on"] .cd-section > div {
    position: absolute;
  }
  [data-animation="rotate"] .cd-section > div {
    -webkit-transform-origin: center bottom;
    -moz-transform-origin: center bottom;
    -ms-transform-origin: center bottom;
    -o-transform-origin: center bottom;
    transform-origin: center bottom;
  }
}


@media only screen and (min-width: 1050px) {
  .cd-vertical-nav {
    display: none;
  }
}

@media only screen and (max-width: 1050px) {
	
	.what-we-do-block-text {
    	margin-bottom:40px;
	}
	.what-we-do-block-title {
	    font-size: 18px;
	    font-weight: 600;
	    line-height: 28px;
	    text-align: center;
	    padding: 10px 0px 5px;
	}
	#section-1 .block-content {
	    width: 100%;
	    height: 515px;
	    background-image: url("../img/mw.svg");
	    background-repeat: no-repeat;
	    background-size: contain;
	    background-position: center;
	    display: table;
	}
	.cd-section:nth-of-type(2) .block .block-content {
    	height: 875px;
    }
	.cd-section:nth-of-type(3) .block .block-content {
    	margin-bottom:60px;
    }
	.cd-section:nth-of-type(4) .block .block-content {
    	margin-bottom:60px;
    }
    #portfolio {
    	height: 875px;
    }
    #portfolio-middle {
    	height: 875px;
    }
    #portfolio-right {
		height: 875px;
    }
	#what-we-do-blocks {
    	width: 100%;
	}
	.first{
		 width:100%;
		 float:left;		
	}	
	.second{
		 width:100%;
		 float:left;		
	}	
	.third{
	 	 width:100%;
		 float:left;
	}
	.cd-section {
    	height: 100%;
	}
	.cd-section .block {
    	height: 100%;
   	}
   	#section-4{
   		overflow:hidden;
   	}
   	#about-us {
    	width: 100%;
    	margin-top: 109px;
    }
    #section-4 #about-us-wrapper {
	    background-position-x: 0;
	    background-repeat: no-repeat;
	    background-size: 745px 544px;
	    background-position-y: 117px;
	    background-position-x: -260px;
	    height: 1100px;
   	}
    #about-us-footer {
	    display: none;
	    width: 100%;
	    overflow: hidden;	
	}
	#portfolio{
		width:100%;	
	}
	#portfolio-left{
		width:10%;
	}
	#portfolio-middle{
		width:80%;		
	}
	#portfolio-right{
		width:10%;		
	}
	.mobile-item{
		display:block;
	}
	.desktop-item{
		display:none;	
	}
	#section-2 .block {
    	background-image: none;
   	}
   	#footer-main{
   		display:none;
   	}
   	#about-us-left{
		display:none;
	}
	#about-us-right{
		display:block;
		float:right;
		color: #1d1d1d;
		text-align:left;
	}
	#about-us-right #about-us-title-right h2{		
    	color: #000;
	    font-size: 42px;
	    font-weight: 300;	
	}
	#about-us-title {
	    text-align: left;
	    margin-bottom: 32px;
	    margin-top: 250px;
	}
	#about-us-text-right{
		padding: 20px 40px 0 0px;
		opacity: 0.8;
		color: #000000;
		font-family: "Open Sans";
		font-size: 17px;
		line-height: 32px;
		text-align: left;
	}
	#about-us-footer-mobile {
    	display: block !important;
	}
	#about-us-social-right{
		margin-top:40px;	
	}
	#about-us-footer-wrapper {
	    width: 450px;
	    height: 34px;
	    margin: 100px 0 0;
	}
	.divider-footer {
	    width: 22px;
	    border-bottom: 2px solid #353535;
	    margin: 22px 0 26px;
   	}

}
@media only screen and (max-width: 756px) {
	#about-us-right {
    	width: 60%;
	}
	#about-us-text-right {
	    padding: 20px 40px 0 0px;
	    opacity: 0.8;
	    color: #000000;
	    font-family: "Open Sans";
	    font-size: 17px;
	    line-height: 26px;
   	}
   	#about-us-footer-left {
	    width: 100%;
        height: 22px;
    }
   	#about-us-footer-middle{
	    width: 100%;
        height: 22px;
    }
   	#about-us-footer-right{
	    width: 100%;
        height: 22px;
    }
	#about-us-footer-left-2 {
	    width: 100%;
        height: 22px;
    }
   	#about-us-footer-middle-2{
	    width: 100%;
        height: 22px;
		margin-top: 0px;
    }
   	#about-us-footer-right-2{
	    width: 100%;
        height: 22px;
		margin-top: 0px;
    }
    .divider-footer {
	    float: left;
    }
    #copyright {   
	    float: left;   
	    width: 100%;
    }
}