@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400&display=swap');

*,
*::before,
*::after {
  box-sizing: border-box;
}
html, body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
}
a {
    text-decoration: none;

}
body {
      font-family: "Roboto",sans-serif;
      font-weight: 100;
}
textarea
{
    font: 16px "Helvetica Neue", sans-serif;
}
hr {
    width: 100%;
    color: #fff;
    border: 0px solid #fff;
    border-bottom: 0.7px solid #fff;
}
header {
      width: 100%;
      height: 100vh;
      /*background: url(../images/bg-main.png) no-repeat 50% 50%;*/
}
.head-sub {
    height: 80vh;
}
.cookie-consent {
    position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  text-align: left;
  border: 1px solid #000;
  background-color: #000;
  padding: 15px;
}
.cookie-consent__message {
    color: #fff;
    background: #000;
    text-align: center;
    font-size: 13px;
    font-weight: 300;
}
.cookie-consent__agree {
    width: 90px;
    text-transform: none;
    font-size: 0.8em;
    font-weight: 100;
    background-color: rgb(30,170,231);
    border-radius: 5px;
    color: #fff;
    margin-top: 20px;
    margin-right: 8px;
    margin-bottom: 0px;
    height: 40px;
}
.cookie-consent__agree:hover {
    width: 90px;
    text-transform: none;
    font-size: 0.8em;
    font-weight: 100;
    background-color: rgb(30,170,231);
    border-radius: 5px;
    color: #fff;
    margin-top: 20px;
    margin-right: 8px;
    margin-bottom: 0px;
    height: 40px;
    filter: grayscale(30%);
}
.cookie-consent__policy {
    width: 180px;
    text-transform: none;
    font-size: 0.8em;
    font-weight: 100;
    background-color: #827e7e;
    border-radius: 5px;
    color: #fff;
    margin-top: 20px;
    margin-bottom: 0px;
    height: 40px;
}
.cookie-consent__policy:hover {
    width: 180px;
    text-transform: none;
    font-size: 0.8em;
    font-weight: 100;
    background-color: #827e7e;
    border-radius: 5px;
    color: #fff;
    margin-top: 20px;
    margin-bottom: 0px;
    height: 40px;
    filter: grayscale(30%);
}
.cookie-consent__policy a:hover {
    color: #fff;
    filter: grayscale(30%);
}
.services-main {
    width: 100%;
    height: 80vh;
    overflow: hidden;
    background: url('https://adshjaqftp.cloudimg.io/v7/tervezdvelunk.hu/images/bg-services.png');
    background-size: cover;
}
.services__content_box {
    width: 800px;
    text-align: justify;
    font-weight: 300;
    line-height: 1.6;
    margin-top: 80px;
}
.flex-column-serv {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}
.serv-container {
    background: #fff;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.serv-container h1 {
    font-size: 2.6em;
    text-transform: uppercase;
}
.serv-content__left {
    text-align: justify;
    width: 40em;
    font-weight: 200;
    line-height: 1.5em;
    padding-top: 0px;
}
.serv-content__left h5 {
    font-size: 1em;
    font-weight: 400;
}
.serv-content__left h4 {
    font-weight: 500;
}
.serv-content__left li {
    padding-left: 40px;
    line-height: 0.8em;
}
.serv-content__right {
    width: 40em;
    text-align: center;
}
.serv-content__right img {
    width: 80%;
}
.hero {
    position:absolute;
    top:40%;
    left:50%;
    z-index:3;
    color:#fff;
    text-align:center;

    text-shadow:1px 1px 0 rgba(0,0,0,.75);
    -webkit-transform:translate3d(-50%,-50%,0);
    -moz-transform:translate3d(-50%,-50%,0);
    -ms-transform:translate3d(-50%,-50%,0);
    -o-transform:translate3d(-50%,-50%,0);
    transform:translate3d(-50%,-50%,0)
}
.hero h1 {
    font-size:1.4em;
    font-weight:200;
    text-transform: uppercase;
    margin:0;
    padding:0;
    margin-bottom: 30px;
}
.hero h2 {
    font-size: 2.2em;
    font-weight: 300;
    margin: 0;
    padding: 0;
}

.btn {
    max-width: 150px;
    width: 70px;
    color: #fff;

}
.btns button {
    width: 200px;
    margin-left: 20px;
    margin-right: 20px;
    font-size: 1.2em;
}
.btns button:hover {
    width: 200px;
    background-color: #000;
    color: #fff;
    text-align: center;
    font-weight: 300;
}
.btns {
    margin-top: 4em;
    margin-bottom: 30px;
}
.range {
    text-align: center;
}
.range h3 {
    font-size: 2em;
    font-weight: 200;

}
.range-slider {
    width: 200px;
}
.range-slider input[type=text] {
    text-align: center;
    width: 40px;
    font-size: 15px;
    font-weight: 400;
    border: #fff solid 1px;
    margin-top: 6.9px;
}
.range-slider-label {
    display: block;
    font-size: 1rem;
    color: #ccc;
    margin-bottom: .05rem;
    font-weight: 700;
}
input[type=range] {
    width: 100%;
    background-color: transparent;
    -webkit-appearance: none;
  }
  input[type=range]:focus {
    outline: none;
  }
  input[type=range]::-webkit-slider-runnable-track {
    background: #E3E3E3;
    border: 1px solid #000000;
    width: 100%;
    height: 15.2px;
    cursor: pointer;
  }
  input[type=range]::-webkit-slider-thumb {
    margin-top: -9.2px;
    width: 13px;
    height: 29px;
    background: #E3E3E3;
    border: 1px solid #000000;
    border-radius: 3px;
    cursor: pointer;
    -webkit-appearance: none;
  }
  input[type=range]:focus::-webkit-slider-runnable-track {
    background: #E3E3E3;
  }
  input[type=range]::-moz-range-track {
    background: #E3E3E3;
    border: 2.3px solid #000000;
    width: 100%;
    height: 1px;
    cursor: pointer;
  }
  input[type=range]::-moz-range-thumb {
    width: 13px;
    height: 29px;
    background: #E3E3E3;
    border: 1px solid #000000;
    border-radius: 3px;
    cursor: pointer;
  }
  input[type=range]::-ms-track {
    background: transparent;
    border-color: transparent;
    border-width: 10px 0;
    color: transparent;
    width: 100%;
    height: 15.2px;
    cursor: pointer;
  }
  input[type=range]::-ms-fill-lower {
    background: #E3E3E3;
    border: 1px solid #000000;
  }
  input[type=range]::-ms-fill-upper {
    background: #E3E3E3;
    border: 1px solid #000000;
  }
  input[type=range]::-ms-thumb {
    width: 13px;
    height: 29px;
    background: #E3E3E3;
    border: 1px solid #000000;
    border-radius: 3px;
    cursor: pointer;
    margin-top: 0px;
    /*Needed to keep the Edge thumb centred*/
  }
  input[type=range]:focus::-ms-fill-lower {
    background: #E3E3E3;
  }
  input[type=range]:focus::-ms-fill-upper {
    background: #E3E3E3;
  }

  @supports (-ms-ime-align:auto) {

    input[type=range] {
      margin: 0;
    }
  }
.contactrow {
    width: 100%;
    height: 150px;
    background: transparent;
    text-align: center;
    color: #000;
    padding-top: 50px;
}

.contactrow__button {
    border: 1px solid #000;
    padding: 10px;
    font-size: 25px;
    text-decoration: none;
    color: #000 !important;
}
.contactrow__button:hover {
    color: #fff !important;
    background: #000;
    text-decoration: none;
}
.docs li {
    margin-left: 50px;
}
#loadMore {
    margin-left: 600px;

    padding: 10px 25px 10px 25px;
    font-size: 18px;
    font-weight: 200;
    text-decoration: none;
    border: 1px solid #000;
}
#loadMore:hover {
    background: #000;
    color: #fff;
}
.more_button {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}
.more {
    text-align: center;
    text-transform: uppercase;
    width: 300px;
    padding: 10px;
    font-size: 20px;
    font-weight: 200;
    text-decoration: none;
    border: 1px solid #000;
}
.more:hover {
    color: #fff ;
    background: #000;
}
.more a {
    color: #000;
}
.more a:hover {
    text-decoration: none;
    color: #fff;
    background: #000;
}

/* Language */
.back-to-top {
    position: fixed;
    bottom: 0;
    right: 0;
    display: inline-block;
    padding: 0.5em;
    margin: 1em;
    background: transparent;
    border: 1px solid #000;

  }
  .back-to-top:hover {
    cursor: pointer;
  }
  .back-to-top i {
        font-weight: bold;
  }
/* Float */
.hvr-float {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: 0.8s;
    transition-duration: 0.8s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
  }
  .hvr-float:hover, .hvr-float:focus, .hvr-float:active {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }


/* Grow */
.hvr-grow {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
  }
  .hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  .hvr-fade {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    overflow: hidden;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: color, background-color;
    transition-property: color, background-color;
    width: 60px;
  }
  .hvr-fade:hover, .hvr-fade:focus, .hvr-fade:active {
    background-color: rgba(243,243,243,0.1);
    color: white;
  }
  /* Bob */
@-webkit-keyframes hvr-bob {
    0% {
      -webkit-transform: translateY(-8px);
      transform: translateY(-8px);
    }
    50% {
      -webkit-transform: translateY(-4px);
      transform: translateY(-4px);
    }
    100% {
      -webkit-transform: translateY(-8px);
      transform: translateY(-8px);
    }
  }
  @keyframes hvr-bob {
    0% {
      -webkit-transform: translateY(-8px);
      transform: translateY(-8px);
    }
    50% {
      -webkit-transform: translateY(-4px);
      transform: translateY(-4px);
    }
    100% {
      -webkit-transform: translateY(-8px);
      transform: translateY(-8px);
    }
  }
  @-webkit-keyframes hvr-bob-float {
    100% {
      -webkit-transform: translateY(-8px);
      transform: translateY(-8px);
    }
  }
  @keyframes hvr-bob-float {
    100% {
      -webkit-transform: translateY(-8px);
      transform: translateY(-8px);
    }
  }
  .hvr-bob {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  }
  .hvr-bob:hover, .hvr-bob:focus, .hvr-bob:active {
    -webkit-animation-name: hvr-bob-float, hvr-bob;
    animation-name: hvr-bob-float, hvr-bob;
    -webkit-animation-duration: .8s, 1.5s;
    animation-duration: .8s, 1.5s;
    -webkit-animation-delay: 0s, .8s;
    animation-delay: 0s, .8s;
    -webkit-animation-timing-function: ease-out, ease-in-out;
    animation-timing-function: ease-out, ease-in-out;
    -webkit-animation-iteration-count: 1, infinite;
    animation-iteration-count: 1, infinite;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-direction: normal, alternate;
    animation-direction: normal, alternate;
  }
.content {
      width: 96%;
      margin: 10px auto 1em;
      font-size: 16px;
      line-height: 20px;
      text-align: center;
}
.whatwedo {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 40px;
    margin-top: 40px;
}
.whatwedo .cards {
    width: 300px;
    height: 500px;
    /* -webkit-box-shadow: 4px 2px 12px -4px rgba(0,0,0,0.75);
    -moz-box-shadow: 4px 2px 12px -4px rgba(0,0,0,0.75);
    box-shadow: 4px 2px 12px -4px rgba(0,0,0,0.75); */
    color: #000;
    margin-top: 15px;
    margin-bottom: 15px;
    margin-left: 80px;
    margin-right: 80px;
    text-align: center;
}
.whatwedo .cards svg {
    width: 6em;
    height: 6em;
    position: relative;
    left: 28%;
    display: block;
}
.whatwedo .cards h1 {
    font-size: 1.1em;
    font-weight: 200;
    color: #000;
    text-transform: uppercase;
    margin-top: 30px;
}
.whatwedo .cards i {
    font-size: 4em;
    color: rgb(128, 128, 128);
    line-height: 0.5em;

}
.whatwedo .cards .card-text {
    padding: 35px;
}
.whatwedo .cards p {
color: #000;
text-align: justify;
hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
margin-bottom: 30px;
}
.title  h1{
    margin-top: 3em;
    text-transform: uppercase;
    font-weight: 300;
    font-size: 1.9em;
}
.about {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background-color: #fff;
    margin-top: 8em;
}
.about img {
    width: 350px;
    margin-bottom: 50px;
}
.cards-main {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.cards-main figure {
    margin-bottom: 10px;
    margin-top: 10px;
}
.main-text {
    text-align: center;
    width: 100%;
    max-width: 800px
}
.main-text h1 {
    font-size: 2.1em;
    color: #000;
    text-transform: uppercase;
}
/* span {
    padding-bottom: 5px;
    border-bottom: 3px solid #78be20;
    line-height: 48px;
  } */
.main-text p {
    margin-top: 5px;
    line-height: 1.8em;
    padding-bottom: 10px;
}

.referencia {
    margin-top: 80px;
    text-align: center;
}
.referencia h1 {
    font-size: 2.1em;
    color: #000;
    text-transform: uppercase;
}
.referencia .boxes {
    margin-top: 1.5em;
}
.logo {
      line-height: 30px;
      position: fixed;
      float: left;
      margin: 12px 30px;
      color: #fff;
      font-weight: bold;
      font-size: 16px;
      letter-spacing: 2px;
}

nav {
    top: 0;
      position: fixed;
      width: 100%;
      line-height: 42px;
      z-index: 10;
      overflow: hidden;
}

nav ul {
      line-height: 42px;
      list-style: none;
      background: rgba(0, 0, 0, 0);
      overflow: hidden;
      color: #fff;
      padding: 0;
      text-align: right;
      margin: 0;
      padding-right: 10px;
      transition: 1s;
}

nav.black ul {
      background: #000;
}

nav ul li {
      display: inline-block;
      padding: 10px 20px;;
}

nav ul li a {
      text-decoration: none;
      color: #fff;
      font-size: 14px;
      font-weight: 100;
      text-transform: uppercase;
}
nav ul li a:hover {
    text-decoration: none;
    color: #fff;
}

.menu-icon {
      line-height: 60px;
      width: 100%;
      background: #000;
      text-align: right;
      box-sizing: border-box;
      padding: 5px 20px;
      cursor: pointer;
      color: #fff;
      display: none;
}
.menu i {
      margin-right: 5px;
}
.fb-ico {
    padding-top: 13px;
    font-size: 24px;
}
.menu li img {
    width: 29px;
    height: 15px;
    padding-top: 13px;
}
.container {
      width: 94%;
      overflow: hidden;

}
span.lang_button {
    border: 1px solid #fff;
    padding: 2px;
}
.slider {
      width: 100%;
      height: 100vh;
}

.slider div {
      width: 100%;
      height: 100vh
}
.slider .slick-prev,
.slider .slick-next {
  z-index: 8;
  -webkit-box-flex: 0;
          flex-grow: 0;
  flex-shrink: 1;
  flex-basis: 10%;
  align-self: center;
  font-size: 60px;
  color: transparent;
}
.slider .slick-prev:hover,
.slider .slick-next:hover {
  cursor: pointer;
}
.slider .slick-prev {
  /* -webkit-box-ordinal-group: 2;
          order: 1; */
          background: transparent !important;
  margin-left: 40px;
  text-align: right;
}
.slider .slick-prev:before {
    background: url('../images/left.png') no-repeat;
    content: "";
    display: block;
    height: 32px;
    width: 32px;
}
.slider .slick-next:before {
    background: url('../images/right.png') no-repeat;
    content: "";
    display: block;
    height: 32px;
    width: 32px;
}
.slider .slick-next {
  -webkit-box-ordinal-group: 4;
          order: 3;
          margin-right: 40px;
  text-align: left;
}
.slide {
    position: relative;
}
.slide1 {
    background: url(https://adshjaqftp.cloudimg.io/v7/tervezdvelunk.hu/images/63.jpg);
    background-size: cover;
    width: 100%;
    height: 100vh;
}
.slide2 {
    background: url(https://adshjaqftp.cloudimg.io/v7/tervezdvelunk.hu/images/02.png);
    background-size: cover;
    width: 100%;
    height: 100vh;
}
.slide3 {
    background: url(https://adshjaqftp.cloudimg.io/v7/tervezdvelunk.hu/images/03.jpg);
    background-size: cover;
    width: 100%;
    height: 100vh;
}
.slide h1 {
    text-align: center;
    margin-top: 20em;
    color: #fff;
    font-size: 1.3em;
    font-weight: 300;
    text-transform: uppercase;
}
.slide h2 {
   text-align: center;
    margin-top: 2em;
    color: #fff;
    font-size: 2.0em;
    font-weight: 400;
    margin-bottom: 2em;
}
a.slide__button {
    color:#fff;
    background: rgba(227, 231, 232, 0.2);
    border: 1px solid #fff;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
    font-size: 1.2em;
    font-weight: 200;
    text-transform: uppercase;
    margin-left: 46.3em;
    margin-top: 500px;
}
.slide__button:hover {
    color: #000;
    text-decoration: none;
    background-color: #fff;
    -webkit-box-shadow: 3px 2px 7px -3px rgba(0,0,0,0.75);
-moz-box-shadow: 3px 2px 7px -3px rgba(0,0,0,0.75);
box-shadow: 3px 2px 7px -3px rgba(0,0,0,0.75);
}
.arrow,
.arrow:before {
  position: absolute;
  left: 50%;
}
/* -- Loader --*/
.preloader-wrap {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    background: #fff;
    z-index : 55;
  }

  .percentage {
    z-index: 100;
    border: 1px solid #000;
    text-align:center;
    color: #000;
    line-height: 30px;
    font-size : 15px;
  }

  .loader,
  .percentage{
    height: 30px;
    max-width: 500px;
    border: 2px solid #000;
    font-weight: 300;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin : auto;
  }
  .loader:after,
  .percentage:after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }

  .trackbar {
    width: 100%;
    height: 100%;
    color: #fff;
    text-align: center;
    line-height: 30px;
    overflow: hidden;
    position: relative;
    opacity: 0.99;
  }

  .loadbar {
    width: 0%;
    height: 100%;
    background: repeating-linear-gradient(
    45deg,
      #e3e3e3,
      #e3e3e3 10px,
      #d7d8d9 10px,
      #d7d8d9 20px
    ); /* Stripes Background Gradient */
    box-shadow: 0px 0px 1px 1px #000;
    position: absolute;
    top: 0;
    left: 0;
    animation: flicker 5s infinite;
    overflow: hidden;
  }

  .glow {
    width: 0%;
    height: 0%;
    border-radius: 20px;
    box-shadow: 0px 0px 60px 10px #000;
    position: absolute;
    bottom: -5px;
    animation: animation 5s infinite;
  }

  @keyframes animation {
    10% {
      opacity: 0.9;
    }
    30% {
      opacity: 0.86;
    }
    60% {
      opacity: 0.8;
    }
    80% {
      opacity: 0.75;
    }
  }

/* -- Loader End -- */

.card-text .button-cards {
    border: 1px solid #000;
    padding: 8px 25px 8px 25px;
    font-weight: 300;
    font-size: 16px;
    text-decoration: none;
    text-transform: uppercase;
    color: #000;
}
.card-text .button-cards:hover {
    color: #fff;
    background: #000 !important;
    text-decoration: none;

}
.last-card p {
    padding-bottom: 15px;
}
.arrow {
  width: 40px;
  height: 40px;
  top: 65%;
  margin: -20px 0 0 -20px;
  -webkit-transform: rotate(45deg);
  border-left: none;
  border-top: none;
  border-right: 2px #fff solid;
  border-bottom: 2px #fff solid;
}

.arrow:before {
  content: "";
  width: 20px;
  height: 20px;
  top: 50%;
  margin: -10px 0 0 -10px;
  border-left: none;
  border-top: none;
  border-right: 1px #fff solid;
  border-bottom: 1px #fff solid;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-name: arrow;
}

@keyframes arrow {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-10px, -10px);
  }
}

.main-pic {
    width: 100%;
    height: 80vh;
}
.main-pic .imagefent {
    width: 100%;
    height: 80vh;
}
.contact {
    font-weight: 200;
    background-color: #fff;
    /*-webkit-box-shadow: 0px -4px 13px -6px rgba(0,0,0,0.75);
-moz-box-shadow: 0px -4px 13px -6px rgba(0,0,0,0.75);
box-shadow: 0px -4px 13px -6px rgba(0,0,0,0.75);*/
margin-top: 6em;
margin-bottom: 6em;
}
.contact-button {
    margin-top: 40px;
    width: 150px !important;
    border: 1px solid #000;
    text-align: center;
    text-transform: uppercase;
    font-weight: 200;
    font-size: 1.4em;
    color: #000 !important;
    text-decoration: none;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-right: 45px;
    padding-left: 45px;
    transition: 1s;
}
.contact-button:after {
    content: "Érdekel"
}
.contact-button:hover {
    width: 150px !important;
    background-color: #000;
    color: #fff !important;
    text-align: center;
    font-weight: 200;

}
.contact-button:hover:after {
    content: "KEZDJÜK EL";
    letter-spacing: 1px;
}
.flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.flex-nc {
    display: flex;
    flex-wrap: wrap;
}
.b-r {
    border-right: 3px solid #fff;
    text-align: left;
}
.b-r a {
    color: #000;
}
.contact h1 {
    font-size: 1.7em;
    color: #000;
    text-transform: uppercase;
    font-weight: 200;
    margin-bottom: 25px;
}
.contact p {
    font-size: 1.0em;
    font-weight: 200;
    letter-spacing: 2px;
    margin-bottom: 40px;
}
.contact .contact-box {
    margin: 10px;
    width:500px;
    height: auto;
    line-height: 1.5em;
}
.contact .flex .contact-box a {
    text-decoration: none;
    color: #000;
}
.contact-box a:hover {
    text-decoration: none;
    color: #000;
}
.contact-box img {
    width: 250px;
    height: auto;
    padding-top: 40px;
}
/* footer {
    /*-webkit-box-shadow: 0px -4px 13px -6px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px -4px 13px -6px rgba(0,0,0,0.75);
    box-shadow: 0px -4px 13px -6px rgba(0,0,0,0.75);*/
   /* -webkit-box-shadow: 2px 2px 14px 1px rgba(0,0,0,0.75);
-moz-box-shadow: 2px 2px 14px 1px rgba(0,0,0,0.75);
box-shadow: 2px 2px 14px 1px rgba(0,0,0,0.75);
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    width: 100%;
}
.footer-content {
    padding-top: 5px;
    font-weight: 200;
    text-align: center;
    width: 100%;
    max-width: 1200px;
}
.footer-content a {
    text-decoration: none;
    color: #000;
} */
#footer{
    width:100vw;
    height:auto;
    display:flex;
    background-color:grey;
    color:white;
    justify-content:center;
    font-family: Georgia;
    padding-bottom:50px;
  }
  #service,#aboutus,#location,#joinus{
    flex:1 0 100px;
    padding-top:50px;
    padding-left:0px;
  }
  #location>p{
    padding-top:10px;
  }
  #joinus>p{
    padding-top:10px;
  }
  li{
    position:relative;
    left:-40px;
    padding-top:15px;
  }
  a:link{
    text-decoration:none;
    color:white;
  }
  a:hover{
    color:black;
  }
  #copy{
    background-color: black;
    opacity:0.7;
    color: white;
    width: 100vw;
    height: auto;
    text-align: center;
    padding:10px;
  }
  #logo{
    font-size:2vw;
    position: relative;
    color:white;
    align-items:center;
    justify-content:center;
    padding-right:40px;
    padding-left:40px;
  }
  #logo>h1{
    margin-top:50px;
    border:5px solid white;
    padding:10px;
  }
  #section0 {
      background-color: rgba(227, 231, 232, 0.8);
      background: url('../images/section0.png');
      background-size: cover;
  }
  .intro h1 {
      padding-top: 20vh;
      text-align: center;
  }
  .intro p {
      padding-top: 0.2vh;
      text-align: center;
      font-size: 1.6em;
      font-weight: 200;
  }
  .section0 .intro .intro-flex {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      margin-top: 20px;
  }
  .section0 .intro .intro-flex .intro-text {
      text-align: justify;

  }
  .section0 .intro .intro-flex .intro-img {
      align-items: center;
  }
  #section2 {
    background: url('../images/section0.jpg');
    background-size: cover;
  background-repeat: no-repeat;
  }
  .footer {
      margin-top: 30px;
      background: url(https://adshjaqftp.cloudimg.io/v7/tervezdvelunk.hu/images/footer.png);
      width: 100%;
      height: 300px;
      color: #fff;
      text-decoration: none;
      display: flex;
      flex-wrap: wrap;
  }
  .footer-width {
      width: 94%;
    margin-left: 50px;
    margin-right: 50px;
  }
  .footer-flex {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      width: 96%;
  }
  .social-icons {
      text-align: right;
      margin-right: -40px;
      margin-top: 15px;
      font-size: 0.5em;
  }

  span.social_button {
    border: 0.5px solid #fff;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 3px;
    padding-right: 3px;
    margin-left: 10px;
}
span.social_button a:hover {
    color: #fff;
}
  .footer-flex__left {
    width: 50%;
    text-align: left;
    justify-content: center;
  }
  .footer-flex__left img {
      margin-top: 40px;

  }
  .footer-flex__left p {
      text-align: left;
        line-height: 1.8em;
  }
  .footer-flex__right {
      width: 50%;
      text-align: right;
      font-size: 2.5em;
      margin-top: 32px;
  }
  .footer-flex__center {
      width: 0%;
      content: "";
  }
  .footer-content {
      text-align: center;
      font-size: 0.8em;

  }
  .footer-content a {
    text-decoration: none;
    color: #fff;
}
  @media (max-width: 800px) {
    #footer{
      height:700px;
      flex：0 0 100px;
      flex-direction:column;
      flex-wrap:wrap;
      text-align:center;
      align-items:center;
      justify-content:center;
    transform:translate(-20%);
    }
    li{
      position:relative;
      left:-15%;
    }
    #logo{
    visibility:hidden;
    }
    }
.f-left {
    float:left;
}
.f-right {
    float: right;
}
button{
    width: 90px;
    border: 0.8px solid #000;
    text-align: center;
    font-weight: 200;
    font-size: 1em;
    color: #000;
    text-decoration: none;
    text-transform: uppercase;
    padding: 5px;
    background-color: #fff;
}
button:hover {
    width: 90px;
    background-color: #000;
    color: #fff;
    text-align: center;
    font-weight: 300;
}
/* Reference */
.button-ref {
    width: 90px;
    border: 1px solid #fff;
    text-align: center;
    font-weight: 300;
    color: #fff;
    text-decoration: none;
    padding: 5px;
}
.button-ref:hover {
    width: 90px;
    background-color: #fff;
    color: #000;
    text-align: center;
    font-weight: 300;
}
.reference {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.ref-text {
    flex-direction: column;
    width: 500px;
    text-align: left;
}
.ref-text h2 {
    text-transform: uppercase;
    font-weight: 300;

}
.szoveg {
    margin-left: 10px;
}
.ref-img {
    margin-top: 65px;
    padding-left: 100px;
    flex-direction: column;
    width: 600px;
}
.ref-img img {
    width: 500px;
    height: auto;
    margin-bottom: 10px;
}
.ref-box {
    background-color: #E3E3E3;
    width: 350px;
    height: 130px;
    margin: 10px 15px 10px 10px;
}
.ref-box h3 {
    text-transform: uppercase;
    padding-top: 35px;
    font-size: 1em;
    font-weight: 200;
    color: #000;
}
.ref-box h3::before {
    display: inline-block;
    margin: 0px 20px 5px 0;
    height: 1px;
    content: " ";
    text-shadow: none;
    background-color: #000;
    width: 30px;
    margin-left: -15px;
}
.ref-box p {
    margin-top: 10px;
    margin-left: 35px;
}
.ref-share {
    font-size: 2em;
    width: 350px;
    height: auto;
    text-align: right;
}
.ref-share p {
    font-size: 0.6em;
    text-align: left;
    margin-left: 10px;
    margin-bottom: -27px;
}
.ref-share a {
    text-decoration:none;
    color: #000;
}
.ref-share a:hover {
    color: rgb(88, 88, 88);

}
/* -- ref Page -- */
.references-main {
    width: 100%;
    height: 100vh;
    background: url(https://adshjaqftp.cloudimg.io/v7/tervezdvelunk.hu/images/references-main.jpg);
    background-size: cover;
}
.references-icon {
    text-align: center;
    margin-top: 60px;
    line-height: 10px;
}
.references-icon i {
    font-size: 6em;
    color: #78be20
}
.references-icon h2 {
    font-size: 2.3em;
    margin-top: 30px;
    text-transform: uppercase;
    font-weight: 300;
}
.mix figure {
    width: 500px;
}
/* -- ref Page End -- */
/* -- Contact -- */
.cont-page {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 40px;
}
.cont-page-main {
        width: 100%;
        height: 80vh;
        overflow: hidden;
        background: url('https://adshjaqftp.cloudimg.io/v7/tervezdvelunk.hu/images/contact-bg.png');
        background-size: cover;
}
.cont-page span {
    padding-bottom: 0px;
    border-bottom: 0px solid;
    line-height: 0px;
}
.cont-page-text {
    flex-direction: column;
    width: 500px;
    text-align: left;
}
.cont-page-text h2 {
    text-align: left;
    padding-left: 10px;
    font-size: 1.2em;
    font-weight: 200;
    text-transform: uppercase;
}
.cont-page-box {
    background-color: #E3E3E3;
    width: 250px;
    height: 200px;
    margin: 10px 15px 10px 10px;
}
.cont-page-box h3 {
    text-transform: uppercase;
    padding-top: 35px;
    font-size: 0.9em;
    line-height: 1.5em;
    font-weight: 400;
    letter-spacing: 2px;
    color: #000;
}
.cont-page-box h3::before {
    display: inline-block;
    margin: 0px 20px 5px 0;
    height: 1px;
    content: " ";
    text-shadow: none;
    background-color: #000;
    width: 30px;
    margin-left: -15px;
}
.cont-page-box p {
    margin-top: 30px;
    margin-left: 35px;
    line-height: 1.5em;
    letter-spacing: 2px;
    font-size: 0.8em;
}
.cont-page-form {
    margin-top: 0px;
    text-align: right;
    flex-direction: column;
    display: flex;
    flex-wrap: wrap;
    width: 800px;
    margin-left: -100px;
}
.cont-page-form form {
    margin-top: -10px;
}
.cont-page-form .form-name {
    display: flex;
    justify-content: left;
    flex-wrap: wrap;

}
.cont-page-form h2 {
    text-align: left;
    padding-left: 15px;
    font-size: 1.2em;
    font-weight: 200;
    text-transform: uppercase;
}
.form-name input {
    border: 1px solid #000;
    width: 380px;
    height: 40px;
    font-size: 0.8em;
    margin: 10px;
}
.form-name input:focus {
    border: 2px solid #000;
    outline: 0;
}
.form-name input.subject {
    border: 1px solid #000;
    width: 780px;
    height: 40px;
    font-size: 0.8em;
    margin: 10px;
}
.form-name input.subject:focus {
    border: 2px solid #000;
    outline: 0;
}
.form-name textarea {
    width: 780px;
    border: 1px solid #000;
    margin: 10px;
    height: 246px;
    font-size: 0.8em;
}
.form-name textarea:focus {
    border: 2px solid #000;
    outline: 0;
}
.form-name input[type="text"]::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    padding-left: 5px;
    color: #000;
    font-weight: 100;
  }
  .form-name input[type="text"]::-moz-placeholder { /* Firefox 19+ */
    padding-left: 5px;
    color: #000;
    font-weight: 100;
  }
  .form-name input[type="email"]::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    padding-left: 5px;
    color: #000;
    font-weight: 100;
  }
  .form-name input[type="email"]::-moz-placeholder { /* Firefox 19+ */
    padding-left: 5px;
    color: #000;
    font-weight: 100;
  }
  .form-name textarea::-webkit-input-placeholder {
    padding-left: 5px;
    padding-top: 5px;
    color: #000;
    font-weight: 100;
  }
  .form-name textarea::-moz-placeholder {
    padding-left: 5px;
    color: #000;
    font-weight: 100;
  }
  .form-check {
      margin-top: 10px;
      text-align: left;
      padding-left: 7px;
  }
  input[type=checkbox] {
      border: 1px solid black;
  }
  input[type=checkbox]:not(:checked) {
      background: #000;
      color: #fff;
  }
  .checkbox label:before {
    border-radius: 3px;
    }
  input[type=checkbox]:checked {
    content: "\2713";
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
    font-size: 15px;
    color: #f3f3f3;
    text-align: center;
    line-height: 15px;
    }
.submit {
    margin-top: 40px;
    text-align: left;
    padding-left: 10px;
}
.submit button:disabled {
    color: #4e4e4e;
    background-color: #f3f3f3;
}
.submit button {
    font-size: 1.1em;
    padding: 12px 20px 12px 20px;
    font-weight: 200;
    width: 120px;
    border: 1px solid #000;
}
/* -- Contact End -- */
@media (max-width: 1280px) {
    /* .slide1 {
        background: url(../images/63_1280x.png);
    }
    .slide2 {
        background: url(../images/02_1280x.png);
    }
    .references-main {
        background: url(../images/references-main_1280x.jpg);
    } */
    .slide h1 {
        margin-top: 12em;
    }
    .slide h2 {
        top: 45%;
        left: 32%;
    }
    a.slide__button {
        color:#fff;
        background: rgba(227, 231, 232, 0.2);
        border: 1px solid #fff;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 20px;
        padding-right: 20px;
        font-size: 1.2em;
        font-weight: 200;
        text-transform: uppercase;
        margin-left: 29.5em;
        margin-top: 400px;
    }
    .whatwedo .cards {
        width: 300px;
    }
    .serv-content__left {
        text-align: justify;
        width: 30em;
        font-weight: 200;
        padding-top: 35px;
    }
    .serv-content__right {
        width: 30em;
        text-align: center;
    }
    .whatwedo .cards {
        margin-left: 50px;
        margin-right: 50px;
    }

    .cont-page {
        width: 98%;
    }
    .cont-page-form {
        margin-top: 0px;
        text-align: right;
        flex-direction: column;
        display: flex;
        flex-wrap: wrap;
        width: 65%;
        padding-left: 30px;
    }
    .form-name input {
        width: 370px;
    }
    .cont-page-form .form-name {
        flex-wrap: wrap;
    }
    .form-name textarea {
        width: 760px;
    }
    .form-name input.subject {
        width: 760px;
    }
    .serv-content__left {
        text-align: justify;
        width: 30em;
        font-weight: 200;
        line-height: 1.5em;
        margin-top: -65px;
    }
    .serv-content__right {
        width: 30em;
        text-align: center;
    }
    .serv-content__right img {
        width: 86%;
    }
    .mix figure {
        width: 350px;
    }
}
@media(max-width: 1024px) {
    .whatwedo {
        margin-top: 10px;
    }
    .slide h1 {
        margin-top: 54%;
    }
    .slide1 .slide__button {
        margin-left: 43%;
    }
    .slide2 .slide__button {
      margin-left: 43%;
  }
  .slide3 .slide__button {
      margin-left: 43%;
  }
  .references-main .hero {
    top: 40%;
}
.references-main .hero h2 {
    font-size: 3em;
}
.services-main .hero {
    top: 40%;
}
.services-main .hero h2 {
    font-size: 3em;
}
.cont-page-box {
    width: 96%;
}
.cont-page-form {
    width: 500px;
    margin-left: -30px;
}
.cont-page-form .form-name {
    flex-wrap: wrap;
}
.form-name textarea {
    width: 450px;
}
.form-name input.subject {
    width: 450px;
}
.form-name input {
    width: 450px;
}
}
@media(max-width: 1024px) and (max-height: 1366px) {

}
@media(max-width: 1024px) and (max-height: 768px) {

}
@media(max-width: 812px) {

}
@media(max-width: 786px) {
      .parent-el {
            display: flex;
          }

          .box {
            width: 33%;
          }

      .slider {
            width: 100%;
            top: 60px;
      }
      .main-pic {
        width: 100%;
        top: 60px;
  }
    .hero {
        top: 40%;
    }

      .logo {
            position: fixed;
            top: 0;
            margin-top: 8px;
            width: 50px;
            height: auto;
      }
      .logo img {
            width: 100px;
            height: auto;
      }
      .slide h1 {
          margin-top: 54%;
      }
      .slide1 .slide__button {
          margin-left: 41%;
      }
      .slide2 .slide__button {
        margin-left: 41%;
    }
    .slide3 .slide__button {
        margin-left: 41%;
    }
      nav {
            line-height: 20px;

      }
      nav ul {
            max-height: 0px;
            background: #000;
      }

      nav.black ul {
            background: #000;
      }

      .showing {
            max-height: 34em;
      }

      nav ul li {
            box-sizing: border-box;
            width: 100%;
            padding: 10px;
            text-align: center;
      }

      .menu-icon {
            display: block;
            height: 60px;
            padding: 1px 24px;
            font-size: 30px;
      }
      .content {
            margin-top: -100px;
      }
      .szoveg {
        width: 98%;
        margin-left: 5px;
      }
      /* .reference {
          margin-top: -170px;
      } */
      .ref-box {
          width: 98%;
          margin-left: 5px;
          margin-right: 5px;
      }
      .ref-box h3 {
          margin-left: 35px;
          margin-right: 10px;
      }
      .ref-box p {
          margin-right: 10px;
      }
      .ref-box h3::before {
          display: none;
      }
      .ref-img {
          margin-top: 10px;
          width: 98%;
          padding-left: 5px;
      }
      .ref-img img {
          width: 98%;
      }
      .ref-share {
        width: 98%;
      }
      .whatwedo {
        margin-top: 170px;
    }
      #loadMore {
          margin-left: 0px;
      }
      nav ul li {
        box-sizing: border-box;
        width: 100%;
        padding: 10px;
        margin-left: 100px;
        text-align: center;
}
.slider .slick-prev {
    margin-left: 28px;
}
.about {
    margin-top: 230px;
}
.whatwedo {
    margin-top: 0px;
}
.whatwedo .cards {
    width: 260px !important;
    margin-bottom: 40px;
}
.services__content_box {
    width: 680px;
    margin-top: 130px;
}
.services__content_box ul {
   margin-left: 70px !important;
}
.references-main .hero {
    top: 40%;
}
.references-main .hero h2 {
    font-size: 3em;
}
.btns {
    margin-top: 150px;
}
.cont-page {
    margin-top: 50px;
}
.cont-page-box {
    width: 96%;
}
.cont-page-form {
    width: 500px;
    margin-left: -30px;
}
.cont-page-form .form-name {
    flex-wrap: wrap;
}
.form-name textarea {
    width: 450px;
}
.form-name input.subject {
    width: 450px;
}
.form-name input {
    width: 450px;
}
}
/* @media(max-width: 768px) and (max-height: 1024px) {
    /* .whatwedo {
        margin-top: -230px;
    } */
    /* .reference {
        margin-top: -280px;
    } */
/*@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
    .whatwedo {
        margin-top: -220px;
     }
  }
  @media all and (device-width: 736px) and (device-height: 414px) and (orientation:landscape) {
    .whatwedo {
        margin-top: 170px;
     }
}
    @media all and (device-width: 667px) and (device-height: 375px) and (orientation:landscape) {
        .whatwedo {
            margin-top: 170px;
    }*/
@media(max-width: 736px) and (max-height: 414px) {
    /* .whatwedo {
        margin-top: 170px;
    } */
    .reference {
        margin-top: 10px;
    }
    /* .hero {
        margin-top: 55px;
    } */
}
@media(max-width: 700px) {
   /*  .whatwedo {
        margin-top: 170px;
    } */
    .reference {
        margin-top: 20px;
    }
    /* .hero {
        margin-top: 60px;
    } */
}
/* @media(max-width: 450px) and (max-height: 600px) {
    .whatwedo {
        margin-top: -110px;
    }
    /* .reference {
        margin-top: -170px;
    } */

/* @media(max-width: 420px) {
    .whatwedo {
        margin-top: -240px;
    }
    .reference {
        margin-top: -290px;
    }
    .hero {
        margin-top: -45px;
    }
} */
@media(max-width: 420px) {
    .header {
        height: 100vh;
    }
    .hero {
        top: 90%;
    }
    .hero h2 {
        font-size: 3em;
    }
    .slider div {
        height: 100vh;
    }
    .slide {
        width: 100%;
        height: 100vh;
    }
    .slide1 {
        width: 100%;
        height: 100vh;
        background: url(https://adshjaqftp.cloudimg.io/v7/tervezdvelunk.hu/images/s1_420.jpg);
    }
    .slide2 {
        background: url(https://adshjaqftp.cloudimg.io/v7/tervezdvelunk.hu/images/s2_420.jpg);
    }
    .slide3 {
        background: url(https://adshjaqftp.cloudimg.io/v7/tervezdvelunk.hu/images/s3_420.jpg);
    }
    .slide h1 {
        position: absolute;
        top: -10%;
        left: 34%;
        color: #fff;
        font-size: 1em;
        text-align: center;
    }
    .slide h2 {
        position: absolute;
        top: 20%;
        margin-left: -140px;
        text-align: center;
        color: #fff;
        font-size: 2.5em;
        font-weight: 200;
    }
    .slide1 h2 {
        margin-left: -125px;
    }
    .slide2 h2 {
        margin-left: -75px;
    }
   .slide .slide__button {
        margin-left: 34%;
        position: absolute;
        margin-top: 90%;
    }
    .whatwedo {
        margin-top: 30px;
    }
    .cards {
        margin-top: 160px;
    }
    .contact {
        line-height: 2em;
    }
    .footer {
        height: 450px;
    }
    .footer-flex__center {
        display: none;
    }
    .footer-flex__left {
        width: 100%;
        text-align: left;
        justify-content: center;
      }
      .footer-flex__left img {
          margin-top: 40px;

      }
      .footer-flex__left p {
          text-align: left;
            line-height: 1.5em;
      }
      .footer-flex__right {
          width: 100%;
          text-align: left;
          font-size: 2.5em;
          margin-top: 32px;
      }
      .social-icons {
        text-align: left;
        margin-right: -40px;
        margin-top: -10px;
        margin-bottom: 20px;
        font-size: 0.5em;
    }
    .services-main .hero {
        top: 40%;
        font-size: 0.9em;
    }
    .services-main .hero h2 {
        font-size: 3em;
    }
      .serv-container h1 {
          text-align: center;
      }
      .services__content_box {
        width: 400px;
        margin-top: 100px;
    }
    .services__content_box ul {
        margin-left: 30px !important;
     }
     .services__content_box ul li {
        line-height: 1.5em;
     }
    #serv-first-img {
        margin-top: 40px;
        margin-left: -30px;
    }
    #serv-sec-img {
        margin-top: 30px;
        margin-left: -30px;
    }
    #serv-thrd-img {
        margin-top: 30px;
        margin-left: -30px;
    }
    .references-main .hero {
        top: 40%;
    }
    .references-main .hero h2 {
        font-size: 3em;
    }
      .references-icon h2 {
          line-height: 1.5em;
      }
      .btns {
          margin-top: 140px;
      }
      .btns button {
          outline: 0;
      }
      .cards-main figure {
          width: 400px !important;
      }
      .main-pic .imagefent img {
          image-rendering: optimizeQuality;
          height: 80vh !important;
          width: 200% !important;
          margin-left: -50px;
      }
      .cont-page {
          margin-top: 60px;
      }
      .cont-page-main h2 {
          width: 100%;
          font-size: 1.6em;
      }
      .cont-page-box {
          width: 96%;
      }
      .cont-page-form {
          width: 400px;
          margin-left: -25px;
      }
      .cont-page-form .form-name {
          flex-wrap: wrap;
      }
      .form-name textarea {
          width: 350px;
      }
      .form-name input.subject {
          width: 350px;
      }
      .form-name input {
          width: 350px;
      }
      nav {
        line-height: 10px;

            }
            nav ul {
                    max-height: 0px;
                    background: #000;
            }

            nav.black ul {
                    background: #000;
            }

            .showing {
                    max-height: 34em;
            }

            nav ul li {
                    box-sizing: border-box;
                    width: 100%;
                    padding: 10px;
                    margin-left: 60px;
                    text-align: center;
            }
            .logo {
                margin-top: 8px;
            }
                .main-text {
                    margin-top: 100px;
                }
                .main-text img {
                    width: 350px;
                }
    }

@media(max-width: 380px) {
    .footer-flex__right {
        width: 100%;
        text-align: left;
        font-size: 2.5em;
        margin-top: 32px;
    }
    .footer-flex__center {
        display: none;
    }
    /* .reference {
        margin-top: -260px;
    } */
    .hero {
        top: 40%;
    }
    .hero h2 {
        font-size: 2em;
    }
    .cont-page-main .hero h2 {
        font-size: 1.5em;
    }
    .footer {
        height: 450px;
    }

    .footer-flex__left {
        width: 100%;
        text-align: left;
        justify-content: center;
      }
      .footer-flex__left img {
          margin-top: 40px;

      }
      .footer-flex__left p {
          text-align: left;
            line-height: 1.5em;
      }
      .cards-main figure {
        width: 360px !important;
    }
    .form-name input {
        width: 350px;
    }
    .whatwedo .cards {
        margin-bottom: 60px;
        margin-top: 60px;
    }
    .slide h1 {
        position: absolute;
        top: -10%;
        left: 32%;

    }
    .slide h2 {
        position: absolute;
        top: 20%;
        margin-left: -120px;
    }
    .slide2 h2 {
        margin-left: -80px;
    }
    .slide .slide__button {
        position: absolute;
        margin-top: 120%;
        margin-left: 32%;
    }
    .slider .slick-prev {
        margin-left: 30px;
    }
    .slide1 {
        background: url(https://adshjaqftp.cloudimg.io/v7/tervezdvelunk.hu/images/s1_380.jpg);
    }
    .slide2 {
        background: url(https://adshjaqftp.cloudimg.io/v7/tervezdvelunk.hu/images/s2_380.jpg);
    }
    .slide3 {
        background: url(https://adshjaqftp.cloudimg.io/v7/tervezdvelunk.hu/images/s3_380.jpg);
    }
    .cont-page-box h3 {
        font-size: 1.05em;
    }
    .services__content_box {
        width: 350px;
        margin-top: 100px;
    }
    .services__content_box ul {
        margin-left: 30px !important;
     }
     .services__content_box ul li {
        line-height: 1.5em;
     }
     .services-main .hero {
        top: 40%;
        font-size: 0.9em;
    }
    .services-main .hero h2 {
        font-size: 2.8em;
    }
}
/* @media(max-width: 360) {
    .whatwedo {
        margin-top: -195px;
    }
} */
@media(max-width: 320px) and (max-height: 568px) {
    .whatwedo {
        margin-top: -180px;
    }
    /* .reference {
        margin-top: -230px;
    } */
    .hero {
        margin-top: -35px;
    }
}