:root {
    --header-height: 100px;
    --menu-url-48: url("./src/icon/menu-48.png");
    --menu-url-96: url("./src/icon/menu-96.png");
    --main-theme-color: #FBF9F0;
    --main-text-color: #41280A;
    --main-text-color-transparent: rgba(5, 40, 10, 0.1);
    --main-highlight-color: #CF5831;

    --industries-icon-width: 140;
    --industries-img-width: 80;
    --functions-icon-width: 160;
    --functions-img-width: 70;
    --main-span-width: 350;
  }

  .content{
    padding: 50px 100px;
    margin-bottom: 0;
	/* text-align: center; */
  }

  .parrallax{
    position: relative;
    overflow: hidden;
    -webkit-background-size: cover;
    background-size: cover;
    background-attachment: fixed;
    background-position: center center;
  }
  .parrallax_layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* z-index: -1; */
  }
  .permanent {
    position: absolute;
    right: 53%;
    top: 150px;
    width: 400px;
    padding: 30px;
  }
  .executive {
    position: absolute;
    left: 58%;
    top: 150px;
    width: 400px;
    padding: 30px;
  }

  .secondtext{
    text-align: center;
    padding-left: 60px;
  }
  .secondtext h3, .secondtext h4, .secondtext p{
    color: #121007;
  }

  .secondtext h4{
    font-size: 20px;
    text-align: center;
  }
  .secondtext p{
    font-weight: normal;
    text-align: center;

  }
  .secondtext .a-icon {
    width: 128px;
    height: 128px;
    margin-left: 136px;
    background-size: contain;
    background-repeat: no-repeat;
  }
  .share-social{
    background-image: url("./src/icon/share-t.gif");
  }
  .search-social{
    background-image: url("./src/icon/search-t.gif");
  }

  .descp {
    position: absolute;
    top: 80px;
    width: 550px;
    height: 300px
  }
  .descp p{
    line-height: 34px;
  }
  .man{
    position: absolute;
    top: 110px;
    right: 60px;
    width: 300px;
    height: 300px;
    background-color: #121007;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url("./src/image/man.jpg");
    image-rendering: crisp-edges;
    image-rendering: -moz-crisp-edges;          /* Firefox */
    image-rendering: -o-crisp-edges;            /* Opera */
    image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming)*/
  }
  .source{
    padding-top: 50px;
  }
  .source h1, .source h2, .source h4, .secondtext h2, .descp h2 {
    text-align: center;
    font-size: 1.7em;
    color: #121007
  }

  .parrallax .imgcover1{
    position: absolute;
    left: 0px;
    top:80vh;
    height:100%;
    width: 100%;
    background-color: #fff;
  }
  .parrallax .imgcover2{
    position: absolute;
    right: 0px;
    top:0px;
    height:100%;
    width: 150px;
    background-color: #fff;
  }
  .parrallax-0{
    background-color: #fff;
    /* background-image: url(./src/image/shanghai2.jpg);  */
    background-position: top right;
    /* box-shadow:inset 0 0 0 2000px rgba(207, 88, 49, 0.2); */
    height: 100vh;
    min-height: 600px;
    background-size: 130%;
    background-repeat: no-repeat;
  }
  .parrallax-1{
    background-image: url(./src/image/light.jpg);
    height: 700px;
  }
  .parrallax-2{
    background-image: url(./src/image/stars.jpg);
    height: 850px;
  }
  .visible-desktop{
    margin: 0 auto;
    position: absolute;
    /* width: 2560px; */
    left: 50%;
    transform: scale(1.4) translate(-35%, 0%);
    /* width: 50%; */
  }
  .about{
    height: 100%;
    width: 100%;
    top: 45vh;
    width: 100%;
    /* transform: translateX(-500px), translateY(-250px); */
  }
  .covertext{
    margin-left: 150px;
    /* color: #1A2A6E; */
    color: var(--main-theme-color);
    white-space: nowrap;
    width: 670px;
    padding: 20px;
    /* background-color: var(--main-theme-color); */
    
  }
  .about .button{
    color: #fff;
    padding: 8px 0 0 0;
    display: inline-block;
    width: 150px;
    height:36px;
    font-size: 26px;
    text-align: center;
    cursor: pointer;
  }
  .about .clients{
    margin-left: 560px;
    background-color: var(--main-highlight-color);
  }
  .about .clients:hover{
    background-color: #DE6644;
    transition: all .3s linear;
  }
  .about .candidates{
    margin-left: -4px;
    background-color: var(--main-text-color)/*#1A2A6E*/;
  }
  .about .candidates:hover{
    background-color: #5E3F1F;
    transition: all .3s linear;
  }
  .about a{
    cursor: pointer;
  }
  .socialmedia{
    position: fixed;
    right: 20px;
    top: 45%;
    height: 100px;
    width: 50px;
    pointer-events: none;
    /* background-color: #000; */
    z-index: 9999;
    transition:opacity 0.5s;
    -moz-transition:opacity 0.5s;
    -webkit-transition:opacity 0.5s;
    -o-transition:opacity 0.5s;
  }
  .socialmedia:hover{
    cursor: crosshair;
  }
  .socialmedialogo{
    background-size: 24px;
    background-size: contain;
    width:24px;
    height:24px;
    cursor: pointer;
  }
  .linkedin{
    background-image: url(./src/icon/linkedinlogo.png);
  }
  .xing{
    margin-top:60px;
    background-image: url(./src/icon/xinglogo.png);
  }

  .about h1 {
    font-size: 5vh;
    /* font-size: 56px; */
    font-weight: normal;
    margin: 16px 0;
  }
  .about h2 {
    font-size: 2.5vh;
    /* font-size: 36px; */
    font-weight: normal;
    margin: 16px 0;
  }
  .about h3 {
    font-weight: normal;
    color: #1A2A6E;
    font-size: 2.5vh;
    margin: 16px 0;
  }
  .about p {
    font-size: 1.5vh;
    margin: 16px 0;
  }



  /* .about .text{
    left:
  } */

  .main1 {
    height: 500px;
  }
  .main1-container{
    text-align: center;
  }

  .main2 {
    height: 500px;
    background-color: white;
  }

  /* contact form */
  .contact-content .contact-form  {
    position: absolute;
    width: 60%;
    height: 550px;
    top: 120px;
    left: 15%;
    /* margin: 20px; */
    background-color: #fff;
    padding: 50px;
  }
  
  .industries{
    position: absolute;
    /* left: 10px; */
    top: 400px;
    /* padding: 30px; */
    width: calc(var(--industries-icon-width) * 1px);
    text-align: center;
  }
  .functions {
    position: absolute;
    /* left: 105px; */
    top: 220px;
    /* padding: 30px; */
    width: calc(var(--functions-icon-width) * 1px);
    text-align: center;
  }
  .icon-set .icon {
    width: 80px;
    height: 80px;
    top: 0px;
    left: 0px;
    margin-left: calc((var(--industries-icon-width) - var(--industries-img-width))/2 * 1px);
    background-position: center;
    border-radius: 50%;
    border: 2px solid  #29A7BA;
    background-size: 45px;
    background-repeat: no-repeat;
  }
  .functions .icon{
    width: 70px;
    height: 70px;
    margin-left: calc((var(--functions-icon-width) - var(--functions-img-width))/2 * 1px);
    border-radius: 20%;
    border: 2px solid  #29A7BA;
    background-size: 60%;
    background-repeat: no-repeat;
  }
  .icon-set h3, .icon-set h4 {
    color: white;
    margin-top: 10px;
    font-size: 20px;
  }
  .automotive {
    left: calc(var(--industries-icon-width) * 0px + 10px);
  }
  .energy {
    left: calc(var(--industries-icon-width) * 1px + 10px);
  }
  .machinery {
    left: calc(var(--industries-icon-width) * 2px + 10px);
  }
  .pharmaceutical {
    left: calc(var(--industries-icon-width) * 3px + 10px);
  }
  .healthcare {
    left: calc(var(--industries-icon-width) * 4px + 10px);
  }
  .electronics {
    left: calc(var(--industries-icon-width) * 5px + 10px);
  }
  .consumer-goods {
    left: calc(var(--industries-icon-width) * 6px + 10px);
  }
  .automotive .icon{
    background-image: url("./src/icon/sets/automative.png");
  }
  .machinery .icon{
    background-image: url("./src/icon/sets/machinery.png");
  }
  .energy .icon{
    background-image: url("./src/icon/sets/energy.png");
  }
  .pharmaceutical .icon{
    background-image: url("./src/icon/sets/pharmaceutical.png");
  }
  .healthcare .icon{
    background-image: url("./src/icon/sets/healthcare.png");
  }
  .electronics .icon{
    background-image: url("./src/icon/sets/electronics.png");
  }
  .consumer-goods .icon{
    background-image: url("./src/icon/sets/consumer-goods.png");
  }

  .finance {
    left: calc(var(--functions-icon-width) * 0px + 105px);
  }
  .it {
    left: calc(var(--functions-icon-width) * 1px + 105px);
  }
  .engineering {
    left: calc(var(--functions-icon-width) * 2px + 105px);
  }
  .sales {
    left: calc(var(--functions-icon-width) * 3px + 105px);
  }
  .hr {
    left: calc(var(--functions-icon-width) * 4px + 105px);
  }
  .it .icon{
    background-image: url("./src/icon/sets/it.png");
  }
  .finance .icon{
    background-image: url("./src/icon/sets/finance.png");
  }
  .engineering .icon{
    background-image: url("./src/icon/sets/engineering.png");
  }
  .sales .icon{
    background-image: url("./src/icon/sets/sales.png");
  }
  .hr .icon{
    background-image: url("./src/icon/sets/hr.png");
  }

  .spanicon{
    position: absolute;
    left: 0px;
    top: 0px;
  }
  #name, #email, #ContactNumber, .contact-form #subject, #message, #submit  {
    position: absolute;
    left: 40px;
    height: 35px;
    width: 290px;
    margin: 40px 40px 0px 0px;
  }
  .aoscontent {
    position: absolute;
    left: 0px;
    top: 0px;
  }
  .welcome{
    color: #fff;
    text-align: center;
  }
  .welcome h1{
    margin-top: 40px;
  }
  .contact-form {
    color: #121007;
    box-sizing: inherit;
    line-height: 1.5;
  }

  .contact-form #name {
    top: 0px;
  }

  .contact-form #email {
    top: 0px;
    left: 360px;
  }

  .contact-form #ContactNumber {
    top: 55px;
  }

  .contact-form #subject {
    top: 55px;
    left: 360px;
  }
  .contact-form #consent {
    position: absolute;
    top: 395px;
    left: 40px;
  }
  #consent-label {
    position: absolute;
    width: 610px;
    top: 390px;
    left: 40px;
  }
  #recaptcha {
    position: absolute;
    width: 610px;
    top: 490px;
    left: 40px;
  }

  .contact-form #message {
    resize: none;
    top: 120px;
    height: 200px;
    width: 610px;
  }

  .contact-form #submit {
    top: 480px;
    width: 610px;
  }

  #result {
    position: absolute;
    left: 40px;
    top: 580px;
  }


.hero__scroll .chevron {
  margin-top: 20px;
  display: block;
  -webkit-animation: pulse 1.5s infinite;
  animation: pulse 1.5s infinite;
  color: var(--main-highlight-color);
  z-index: 999999;
  height: 20px;
}
.hero__scroll {
  position: absolute;
  text-align: center;
  bottom: 40px;
  width: 200px;
  margin: auto;
  display: block;
  cursor: pointer;
  padding-bottom: 40px;
  left: 0;
  right: 0;
  text-transform: uppercase;
}
.chevron.bottom:before {
  top: 0;
  -webkit-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  transform: rotate(135deg);
}
.chevron::before {
  border-style: solid;
  border-width: 0.25em 0.25em 0 0;
  content: '';
  display: inline-block;
  height: 20px;
  position: relative;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  vertical-align: top;
  width: 20px;
}
@keyframes pulse {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  50% {
    -webkit-transform: translate(0, 10px);
    transform: translate(0, 10px);
  }

  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}


@media only screen and (max-device-width: 600px){ 
  .covertext{
    width: 350px;
  }
}

@media only screen and (max-device-width: 900px){ 
  :root{    
    --main-span-width: 300;

    --industries-icon-width: 120;
    --industries-img-width: 45;
    --functions-icon-width: 140;
    --functions-img-width: 45;
  }


  .parrallax-0{
    background-size: 450%;
  }
  /* Retina-specific stuff here */
  .main1 {
    height: 850px;
  }
  .imgcover2 {
    display:none;
  }
  .covertext {
    margin-left: 0px;
    width: 550px;
  }

  .socialmedia{
    opacity: 0;
  }
  .about h1 {
    font-size: 28px;
  }
  .about h2 {
    font-size: 2vh;;
  }
  .about h3 {
    font-size: 2vh;;
  }
  .about .clients {
    margin-left: 0px;
  }
  .parrallax .imgcover1{
    top:100vh;
  }

  .secondtext {
    padding-left: 0px;
  }

  .secondtext .a-icon {
    margin-left: 90px;
  }

  .permanent {
    right: 0;
    left: 50%;
    width: calc(var(--main-span-width) * 1px);
    margin-left: calc((var(--main-span-width) * -0.5px));
    padding: 0;
  }
  .executive {
    top:520px;
    right: 0;
    left: 50%;
    width: calc(var(--main-span-width) * 1px);
    margin-left: calc((var(--main-span-width) * -0.5px));
    padding: 0;
  }

  .parrallax-1 {
    height: 850px;
  }

  .icon-set h3 {
    font-size: 19px;
  }

  .functions .icon {
    width: calc(var(--functions-img-width) * 1px );
    height: calc(var(--functions-img-width) * 1px );
    /* margin-left: calc((var(--functions-icon-width) - 50)/2 * 1px); */
  }

  .finance {
    top:250px;
    left: 50%;
    transform: translateX(calc(-120px - var(--functions-icon-width) * 0.5px  ))
    /* left: calc(var(--functions-icon-width) * 0px + 105px); */
  }
  .it {
    top:250px;
    left: 50%;
    transform: translateX(calc( var(--functions-icon-width) * -0.5px  ))
    /* left: calc(var(--functions-icon-width) * 1px + 105px); */
  }
  .engineering {
    top:250px;
    left: 50%;
    transform: translateX(calc(120px - var(--functions-icon-width) * 0.5px  ))
  }
  .sales {
    top:350px;
    left: 50%;
    transform: translateX(calc(-80px - var(--functions-icon-width) * 0.5px  ))
  }
  .hr {
    top:350px;
    left: 50%;
    transform: translateX(calc(80px - var(--functions-icon-width) * 0.5px  ))
  }


  .industries .icon {
    width: calc(var(--industries-img-width) * 1px );
    height: calc(var(--industries-img-width) * 1px );
    background-size: 60%;
    /* margin-left: calc((var(--functions-icon-width) - 50)/2 * 1px); */
  }


  .automotive {
    top: 470px;
    left: 50%;
    transform: translateX(calc(-120px - var(--industries-icon-width) * 0.5px  ))
  }
  .energy {
    top: 470px;
    left: 50%;
    transform: translateX(calc(var(--industries-icon-width) * -0.5px));
  }
  .machinery {
    top: 470px;
    left: 50%;
    transform: translateX(calc(120px - var(--industries-icon-width) * 0.5px  ))
  }
  .pharmaceutical {
    top: 570px;
    left: 50%;
    transform: translateX(calc(-80px - var(--industries-icon-width) * 0.5px  ))
  }
  .healthcare {
    top: 570px;
    left: 50%;
    transform: translateX(calc(80px - var(--industries-icon-width) * 0.5px  ))
  }
  .electronics {
    top: 670px;
    left: 50%;
    transform: translateX(calc(-80px - var(--industries-icon-width) * 0.5px  ))
  }
  .consumer-goods {
    top: 670px;
    left: 50%;
    transform: translateX(calc(80px - var(--industries-icon-width) * 0.5px  ))
  }

  .main2{
    height: 1000px;
  }

  .descp {
    top: 400px;
    width: calc(var(--main-span-width) * 1px);
    left: 50%;
    transform: translateX(calc(var(--main-span-width) * -0.5px));
  }
  .descp p {
    text-align: center;
  }
  .man {
    top: 30px;
    left: 50%;
    transform: translateX(-150px);
    /* border: 1px solid white; */
  }
  .contact-content .contact-form {
    width: unset;
    left: 0;
    right: 0;
    margin: 20px;
    padding: 20px;
    height: 680px;
  }
  .contact-form #name {
    top: 0px;
  }
  .contact-form #email {
    top: 55px;
  }
  .contact-form #ContactNumber {
    top: 110px;
  }
  .contact-form #subject {
    top: 165px;
  }
  .contact-form #message {
    top: 220px;
  }
  .contact-form #consent {
    top: 450px;
  }
  .contact-form #consent-label {
    top: 445px;
    overflow-y: auto;
  }
  .contact-form #submit {
    top: 640px;
  }

  #contact-us .form-content {
    left: 20px;
    right: 0;
    width: unset;
    margin: 20px 20px 0 0;
  }

  .parrallax-2 {
    height: 880px;
  }
}