* {

    margin: 0;

    padding: 0;



}



@font-face {

    font-family: 'Helvetica Now Display';

    src: local('Helvetica Now Display Regular'), local('Helvetica-Now-Display-Regular'),

        url('../fonts/Helvetica/HelveticaNowDisplay-Regular.woff2') format('woff2'),

        url('../fonts/Helvetica/HelveticaNowDisplay-Regular.woff') format('woff'),

        url('../fonts/Helvetica/HelveticaNowDisplay-Regular.ttf') format('truetype');

    font-weight: 400;

    font-style: normal;

  }



  @font-face {

    font-family: 'Helvetica Now Display';

    src: local('Helvetica Now Display Black'), local('Helvetica-Now-Display-Black'),

        url('../fonts/Helvetica/HelveticaNowDisplay-Black.woff2') format('woff2'),

        url('../fonts/Helvetica/HelveticaNowDisplay-Black.woff') format('woff'),

        url('../fonts/Helvetica/HelveticaNowDisplay-Black.ttf') format('truetype');

    font-weight: 900;

    font-style: normal;

  }





  #preloader {

    background-image: url(../img/bg.png);

    background-size: cover;

    height: 100vh;

    width: 100%;

    position: fixed;

    z-index: 100;

    text-align: center;

    -webkit-animation: fadeOut 0.8s;

            animation: fadeOut 0.8s;

    -webkit-animation-delay: 1.5s;

            animation-delay: 1.5s;

    -webkit-animation-fill-mode: forwards;

            animation-fill-mode: forwards;

}



@-webkit-keyframes fadeOut {

    0% {

      visibility: visible;

      opacity: 1;

    }

    100% {

      visibility: hidden;

      opacity: 0;

    }

  }

  @keyframes fadeOut {

    0% {

      visibility: visible;

      opacity: 1;

    }

    100% {

      visibility: hidden;

      opacity: 0;

    }

  }





  .preloaderwrap {

    display: flex;

    justify-content: center;

    align-items: center;

    height: 100vh;

    flex-direction: column;

  }



  .logo_preloader img {

    width: 250px;

  }









  .loaderwrap {

    margin-top: 30px;

    display: flex;

    justify-content: center;

    align-items: center;

  }



  



  :root {

    --color-loader: white;

    --loader-size: 100px;

    --loader-speed: 500ms;

  }

  

/*

* Prefixed by https://autoprefixer.github.io

* PostCSS: v8.4.14,

* Autoprefixer: v10.4.7

* Browsers: last 4 version

*/



.loader {

    --loader-height: calc(var(--loader-size) / 8);

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

        -ms-flex-align: center;

            align-items: center;

    position: relative;

  }





  .loader::before {

    content: '';

    position: absolute;

  }

  .loader::before,

  .loader > span {

    display: block;

    width: var(--loader-height);

    height: var(--loader-height);

    border-radius: 50%;

    background: var(--color-loader);

    

    -webkit-animation-name: to-right;

    

            animation-name: to-right;

    -webkit-animation-duration: var(--loader-speed);

            animation-duration: var(--loader-speed);

    -webkit-animation-iteration-count: infinite;

            animation-iteration-count: infinite;

    -webkit-animation-timing-function: linear;

            animation-timing-function: linear;

  }

  .loader > span:nth-child(even) {

    visibility: hidden;

  }

  .loader > span:first-child {

    -webkit-animation-name: scale-up;

            animation-name: scale-up;

  }

  .loader > span:last-child {

    -webkit-animation-name: scale-up;

            animation-name: scale-up;

    animation-direction: reverse;

  }

  

  @-webkit-keyframes to-right {

    to {

      -webkit-transform: translateX(200%);

              transform: translateX(200%);

    }

  }

  

  @keyframes to-right {

    to {

      -webkit-transform: translateX(200%);

              transform: translateX(200%);

    }

  }

  @-webkit-keyframes scale-up {

    from {

      -webkit-transform: scale(0);

              transform: scale(0);

    }

    to {

      -webkit-transform: scale(1);

              transform: scale(1);

    }

  }

  @keyframes scale-up {

    from {

      -webkit-transform: scale(0);

              transform: scale(0);

    }

    to {

      -webkit-transform: scale(1);

              transform: scale(1);

    }

  }

  

 







body {

    background: url(../img/bg_a.png) no-repeat right fixed;

    background-size: cover;

    min-height: 100vh;

    background-color: black;

}



#page {

    background: url(../img/bg_cross.png) no-repeat left bottom fixed;

    min-height: 100vh;

    background-attachment: scroll;

    display: grid;

    grid-template-columns: 1fr;

    grid-template-rows: auto 1fr auto;



}



#header {

    display: grid;

    grid-template-columns: 1fr 200px;

    grid-template-rows: 1fr;

}



.logo_header {

    display: grid;

    float: left;

    padding: 40px;

}



.menu {

    float: right;

    display: grid;

}



#section {

    height: 100%;

    display: grid;

    grid-template-columns: 1fr 100px;

    grid-template-rows: 1fr ;

    margin-left: 100px;

}



.wrapper {

    display: grid;

    grid-template-columns: 1fr;

    grid-template-rows: 1fr auto 1fr;

}



.boxes {

display: grid;

grid-template-columns: 1fr 1fr;



}





.title h2 {

    text-align: center;

    font-family: Helvetica Neue,Helvetica,Arial,sans-serif; 

    font-weight: 200;

    font-size: 20px;

    color: white;

}



.title p {

    text-align: center;

    margin-top: 10px;

    color: white;

    font-size: 13px;

    font-weight: 300;

    line-height: 2;

    max-width: 1200px;

    font-family: Helvetica Neue,Helvetica,Arial,sans-serif; 

}



.title {

    margin-top: auto;

    justify-self: center;

    margin-bottom: 20px;

}



.box_left {

    margin-right: 10px;

    border-radius: 10px;

    justify-self: end;



    height: 240px;

    padding: 20px;

    background-image: url(../img/banner4.png);

    background-size: cover;

    

}



.box_left:hover {

box-shadow: 0px 0px 11px 0px rgba(255,255,255,0.25);

-webkit-box-shadow: 0px 0px 11px 0px rgba(255,255,255,0.25);

-moz-box-shadow: 0px 0px 11px 0px rgba(255,255,255,0.25);

}



.box_right:hover {

    box-shadow: 0px 0px 11px 0px rgba(25ß5,255,255,0.25);

    -webkit-box-shadow: 0px 0px 11px 0px rgba(255,255,255,0.25);

    -moz-box-shadow: 0px 0px 11px 0px rgba(255,255,255,0.25);

    }



.box_right {

    margin-left: 10px;

    border-radius: 10px;

    justify-self: start;



    height: 240px;

    background-image: url(../img/banner2.png);

    background-size: cover;

    padding: 20px;

    

}



.boxes h1 {

    color: white;

    font-family: Helvetica Now Display;

    font-size: 10px;

}



.tag {

    background-color: #fc5709;

    border-radius: 5px;

    display: inline-block;

    padding: 3px 10px;

}



.boxes h2 {

    margin-top: 10px;

    font-family: Helvetica Neue,Helvetica,Arial,sans-serif;

    text-transform: uppercase;

    font-weight: 400;

    font-size: 24px;

    color: white;

}



.boxes p {

    font-family: Helvetica Neue,Helvetica,Arial,sans-serif;

    margin-top: 10px;

    color: white;

    font-size: 13px;

    font-weight: 300;

    line-height: 2;

}



.boxes h3 {

    color: black;

    font-family: Helvetica Now Display;

    font-size: 12px;

}



.box_btn {

    margin-top: 50px;

    background-color: white;

    border-radius: 5px;

    display: inline-block;

    padding: 10px 20px;

}







.contact {

    display: grid;

    grid-template-columns: auto 1fr;

    grid-template-rows: 30px;

    margin-top: 20px;

    justify-self: center;

}



.contact h2 {

    color: white;

    font-size: 13px;

    font-weight: 300;

    font-family: Helvetica Now Display;

    margin-left: 10px;

}

.email {

    display: flex;

    align-items:center;



}



.web a {

    text-decoration: none;

}



.email a {

    text-decoration: none;

}



.web {

    display: flex;

    align-items:center;

    margin-left: 40px;

}



.web strong {

    color: #fc5709;

    margin-left: 10px;

    margin-right: 10px;

}







.socials {

    display: grid;

    align-items:center;

    justify-content:center;

    padding-left: auto;

    padding-right: auto;

    

}



.icons {

    width: 20px;

}



.icons svg  {

    margin-top: 10px;

}



.icons svg:hover {

    fill: #fc5709;

}

















#footer {

    position: sticky;

    padding: 40px;

}



footer p {

    font-family: Helvetica Neue,Helvetica,Arial,sans-serif; 

    font-size: 14px;

    color: white;

}



footer p strong {

    color: #fc5709;

}









@media screen and (max-width: 1420px) {

.box_right {

    max-width: 500px;

}



.box_left {

    max-width: 500px;

}



.title p {

    max-width: 800px;

}

  }



  @media screen and (max-width: 1300px) {

    .box_right {

        max-width: 400px;

        height: 300px;

    }

    

    .box_left {

        max-width: 400px;

        height: 300px;

    }

    

    .title p {

        max-width: 800px;

    }

      }



    @media screen and (max-width: 1100px) {

    .box_right {

        max-width: 350px;

        height: 350px;

    }

    

    .box_left {

        max-width: 350px;

        height: 350px;

    }

    

    .title p {

        max-width: 800px;

    }

        }





  @media screen and (max-width: 1024px) {



    #header {

        display: grid;

        grid-template-columns: 1fr 0px;

        grid-template-rows: 1fr;

    }





    .logo_header {

        justify-content: center;



    }



    #section {

        margin-left: 0px;

    }



    #page {

        background: url(../img/bg_cross.png) no-repeat left bottom fixed;

        min-height: 100vh;

        display: grid;

        grid-template-columns: 1fr;

        grid-template-rows: auto auto ;

    

    }



    #section {

        display: grid;

        grid-template-columns: 1fr;

        grid-template-rows: 1fr auto auto;

    }



    section img {

        margin: 0;

        width: 350px;

        height: auto;

        margin-left: auto;

        margin-right: auto;

        margin-top: auto;

        margin-bottom: 0px;

    }



    .logo{

        padding-left: 0px;

    }



    .socials {

        align-items: unset;

        margin-top: 35px;

    }

    .icons{

        display: flex;

        width: auto;



    }



    .socials svg {

        width: 20px;

        margin-top: 0px;

        margin-left: 10px;

        margin-right: 10px;

    }





    #footer {

        text-align: center;

    }

    



    .textwrap {

        width: 100%;

        text-align: center;

        align-content: center;

        align-items: center;

        margin-bottom: auto;

        margin-top: 40px;

        margin-left: 0px;

    }









    

    .contact {

        display: flex;

        margin-top: 10px;

    }



    .text {

        margin-right: 0px;

        width: 70%;

        margin: auto;

    }



    .email {

        display: flex;

        margin-left: auto;

        align-items:center;

    

    }



    

    .web {

        display: flex;

        margin-right: auto;

        align-items:center;

        margin-left: 20px;

    }



    





  } 



  @media screen and (max-width: 845px) {



    .boxes {

        display: grid;

        grid-template-columns: 1fr;

        grid-template-rows: 1fr 1fr;

    }



    .title p {

        max-width: 100%;

    }



    .box_right {

        justify-self: center;

        max-width: 100%;

        height: 240px;

        margin-left: 0px;

        margin-top: 10px;

        background-size: cover;

    }





    .box_left {

        justify-self: center;

        background-size: cover;

        max-width: 100%;

        height: 240px;

        margin-right: 0px;

    }



#section {

    padding-left: 20px;

    padding-right: 20px;

}



.wrapper {

    grid-template-rows: 1fr auto auto;

}



  }



 









  @media screen and (max-width: 590px) {



    #section {

        display: grid;

        grid-template-columns: 1fr;

        grid-template-rows: auto auto auto;

    }



    section img {

        width: 250px;



    }



    .logo {

        margin-top: 40px;

    }



  

#page {

    margin-top: auto;

    margin-bottom: auto;

    display: grid;

    grid-template-columns: 1fr;

    grid-template-rows: auto auto;



}



.contact {

    display: grid;

    grid-template-columns: 1fr;

    grid-template-rows: 20px 20px;

    margin-top: 20px;

}



.email {

    display: flex;

    margin-left: auto;

    margin-right: auto;



}



.web {

    margin-top: 20px;



    display: flex;

    margin-left: auto;

    margin-right: auto;

}





#footer {

    padding: 30px;



}

footer {

    padding-bottom: auto;

}



.socials {

    align-items: unset;

    margin-top: 35px;

}

.icons{

    display: flex;

    width: auto;

    height: auto;





  }



   }





   @media screen and (max-width: 560px) {



    .box_right {

        height: 85%;



    }



    .box_left {

        height: 85%;

    }



}







   @media screen and (max-width: 425px) {



    .box_right {

        justify-self: center;

        max-width: 100%;

        background-image: url(../img/banner2.png) no-repeat center center fixed;   

        background-attachment: scroll; 

    }





    .box_left {

        justify-self: center;

        max-width: 100%;

        background-image: url(../img/banner4.png) no-repeat center center fixed;   

        background-attachment: scroll; 



    }



  }