@font-face {
    font-family: 'Opificio';
    src: url('../fonts/Opificio.woff2') format('woff2'),
        url('../fonts/Opificio.woff') format('woff'),
        url('../fonts/Opificio.ttf') format('truetype'),
        url('../fonts/Opificio.svg#Opificio') format('svg');
    font-weight: normal;
    font-style: normal;
}

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

body 
{
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    border:0;
    color:#f3f3f3;
    -webkit-font-smoothing:antialiased!important;
    -webkit-text-size-adjust:100%;
    -ms-text-size-adjust:100%;
    line-height:1;
    font-weight:400;
    font-family:'Roboto', sans-serif;
    text-align:left;
    font-size:18px;
    overflow-x:hidden;
    background-color:#fff;
}

img {display: block; width:100%; max-width:100%; position: relative;}
a, a:visited {color:#fff; text-decoration: none; 
    transition:color 200ms ease-in-out;
    -webkit-transition:color 200ms ease-in-out;
    -o-transition:color 200ms ease-in-out;
    -moz-transition:color 200ms ease-in-out;}
a:hover, a:focus {color:#51a4b6; text-decoration: none;}
.menu_selection a:hover, .menu_selection a:focus {color:#230840;}

.hidden {display:none;}

.btn, .btn:visited
{
    background-color:#32b5d0; 
    border:1px solid #32b5d0;
    border-radius:8px;
    padding:10px;
    position: relative;
    float: right;
    transition:all 200ms ease-in-out;
    -webkit-transition:all 200ms ease-in-out;
    -o-transition:all 200ms ease-in-out;
    -moz-transition:all 200ms ease-in-out;

}
.btn:hover {background-color:#ffffff; }

section, footer
{
    width:100%;
    position:relative;
    min-height: 1px;
}

section .container, footer .container {width:70%; margin:0 auto; position: relative; padding-top: 13%;}

h1 {color:#35a7be; text-align: center; position: relative; font-size:48px;font-weight:400; width: 500px; margin: 0 auto 5px auto;}
h2 {color:#333333; text-align: center; position: relative; font-size:28px;font-weight:400;margin-top: 0; width: 500px; margin: 0 auto;}
h3 {font-family:"Opificio"; color:#3b155b; text-align: left; position: relative; font-size:93px;font-weight:normal; display: inline-block; margin-bottom:5px;margin-top: 0;}
h4 {font-family:"Opificio"; color:#3b155b; text-align: inherit; position: relative; font-size:50px;font-weight:normal; display: inline-block; margin-bottom:5px;margin-top: 0;}
p {color:#000000; text-align: inherit; position: relative; font-weight:400; font-size:16px; line-height:26px;}

header {width:100%; height:95vh; position: relative;}
.headerbg{
    background-image:url('../img/top_bg.png');
    background-repeat: no-repeat;
    background-size:100% 100%;
    background-position: top;
    width:100%;
    height:100%;
    position: absolute;
    top:-100vh;
    transition:top 800ms ease-in-out;
    -webkit-transition:top 800ms ease-in-out;
    -moz-transition:top 800ms ease-in-out;
    -o-transition:top 800ms ease-in-out;
}
.headerbg.loaded {top:0vh;}
.smalllogo 
{
    max-width:130px;
    width:7vw;
    position: absolute;
    top:0;
    left:0;

}

.top_right 
{
    max-width:235px;
    width:10vw;
    position: absolute;
    top:0;
    right:0;

}

header .container
{
    display: flex;
    width:80%;
    margin:0vw auto;
    position: relative;

}

nav {width:33%; max-width:480px; position: relative; float:left; margin-top: 15px;}
nav ul  {padding:0; list-style: none; display: flex; width:100%; justify-content: space-between;}
nav ul li {flex:0 0 auto; position: relative;}
nav ul li:after {content:'';border-right:1px solid #51a4b6;width:10px; position:relative;margin-left:15px; top: 8px;}
nav ul li:last-child:after {border:0;}

.menu_selection ul
{
    padding:20px;
    list-style: none;
    width:100%;
    opacity:0;
    -webkit-transition: opacity 500ms ease-in-out; 
    -moz-transition: opacity 500ms  ease-in-out; 
    transition: opacity 500ms  ease-in-out; 
    /* transition-delay: .5s; */
}
body.is-menu-active .menu_selection ul{
    opacity:1; 
}
.menu_selection ul li {padding:10px 0;}
.request_demo {width:73%; position: relative; float:left; text-align:right;    margin-top: 15px;}

.top_header
{
    width:100%;
    position: fixed;
    top:0;
    background-color:rgba(35,8,64, 0.7);
    z-index: 9999;
}

.logo
{
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -90%);
    -webkit-transform:translate(-50%, -90%);
    -moz-transform:translate(-50%, -90%);
    -o-transform:translate(-50%, -90%);

}
.logo img {max-width:539px;}

.scroll_down
{
    position: absolute;
    bottom:25%;
    left:50%;
    transform:translateY(-50%);
    -webkit-transform:translateY(-50%);
    -moz-transform:translateY(-50%);
    -o-transform:translateY(-50%);

    
}
.scroll_down img {max-width:32px;}

.headerElem
{
    opacity:0;
    transition:opacity 300ms ease-in-out;
    -webkit-transition:opacity 300ms ease-in-out;
    -moz-transition:opacity 300ms ease-in-out;
    -o-transition:opacity 300ms ease-in-out;
}
.loadElem {opacity:1 !important;}

/*WHAT WE DO*/
.what_we_do {margin-top: -33vh;}
.wave
{
    position: relative;
    float: right;
    z-index: -1;
    max-width: 541px;
    width: 29%;
}
.wave img {max-width:541px;}

.wedo
{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    width: 100%;
    position: relative;
}
.wedo .item {flex:0 1 33.33%;}
.wedo .item img:nth-child(1) {max-width:276px;width: 100%;}
.wedo .item:nth-child(1) {text-align: right;}
.wedo .item:nth-child(2) {text-align: center;}
.wedo .item:nth-child(3) {text-align: left;}

.wedo .item:nth-child(1) img:nth-child(1) {float:right;}
.wedo .item:nth-child(2) img:nth-child(1) {margin:0 auto;}
.wedo .item:nth-child(3) img:nth-child(1) {float:left;}

.wedo .item .content
{
    width:70%;
    position: relative;
    margin:0 auto;
}
/* .wedo .item:nth-child(1) .content {width: 62%;}
.wedo .item:nth-child(2) .content {width: 100%;} */

.wedo .item .content .top {position:relative; float: left;height:auto;}

.wedo .item .content .top .number_dot
{
    max-width:70px;
    width: 27%;
    position: relative;
    
}
@-webkit-keyframes myOrbit {
    from { -webkit-transform: rotate(0deg) translateX(70px) rotate(0deg); }
    to   { -webkit-transform: rotate(360deg) translateX(70px) rotate(-360deg); }
}

@-moz-keyframes myOrbit {
    from { -moz-transform: rotate(0deg) translateX(70px) rotate(0deg); }
    to   { -moz-transform: rotate(360deg) translateX(70px) rotate(-360deg); }
}

@-o-keyframes myOrbit {
    from { -o-transform: rotate(0deg) translateX(70px) rotate(0deg); }
    to   { -o-transform: rotate(360deg) translateX(70px) rotate(-360deg); }
}

@keyframes myOrbit {
    from { transform: rotate(0deg) translateX(70px) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(70px) rotate(-360deg); }
}

/*Dot animation for 2nd element*/
@-webkit-keyframes myOrbitReverse {
    from { -webkit-transform: rotate(0deg) translateX(-75px) rotate(0deg); }
    to   { transform: rotate(-360deg) translateX(-75px) rotate(360deg); }
}

@-moz-keyframes myOrbitReverse {
    from { -moz-transform: rotate(0deg) translateX(-75px) rotate(0deg); }
    to   { transform: rotate(-360deg) translateX(-75px) rotate(360deg); }
}

@-o-keyframes myOrbitReverse {
    from { -o-transform: rotate(0deg) translateX(-75px) rotate(0deg); }
    to   { transform: rotate(-360deg) translateX(-75px) rotate(360deg); }
}

@keyframes myOrbitReverse {
    from { transform: rotate(0deg) translateX(-75px) rotate(0deg); }
    to   { transform: rotate(-360deg)  translateX(-75px) rotate(360deg); }
}


.animatedot
{
    -webkit-animation: myOrbit 2s linear infinite; /* Chrome, Safari 5 */
    -moz-animation: myOrbit 2s linear infinite; /* Firefox 5-15 */
      -o-animation: myOrbit 2s linear infinite; /* Opera 12+ */
         animation: myOrbit 2s linear infinite; /* Chrome, Firefox 16+, 
                                                   IE 10+, Safari 5 */
}

.animatedotReverse
{
    -webkit-animation: myOrbitReverse 2s linear infinite; /* Chrome, Safari 5 */
    -moz-animation: myOrbitReverse 2s linear infinite; /* Firefox 5-15 */
      -o-animation: myOrbitReverse 2s linear infinite; /* Opera 12+ */
         animation: myOrbitReverse 2s linear infinite; /* Chrome, Firefox 16+, 
                                                   IE 10+, Safari 5 */
}

.wedo .item:nth-child(1) .content .top .number_dot
{
    right: 4vw;
    top: -10vw;
    float: right;
}
.wedo .item:nth-child(1) .content .top .number_dot.animatedot
{
    right: 7vw;
    top: -7.5vw;
}
.wedo .item:nth-child(2) .content .top .number_dot
{
    left:0vw;
    bottom:6vw;
    /* animation-direction: reverse; */
    /* transform-origin:0% 0px; */
}
.wedo .item:nth-child(2) .content .top .number_dot.animatedotReverse

{
    left:4vw;
    bottom:6vw;
}
.wedo .item:nth-child(3) .content .top .number_dot
{
    right: -6vw;
    top: -9vw;
}
.wedo .item:nth-child(3) .content .top .number_dot.animatedot
{
    right: -3vw;
    top: -6.5vw;
}
/*PLATFORM*/
.platform {margin:10% 0 20% 0;}
.platform .wave_left
{
    position: absolute;
    left:0;
    top:10px;
}
.platform .wave_left img {max-width:81px;}

.platform .container {display: flex; flex-direction: row; justify-content: space-evenly; padding-top:0;}
.platform .container .left, .platform .container .right {flex:0 1 50%;}

.platform .container .left p {width:50%;}
.platform .container .left .request_demo .btn {float: left;}

.platform .container .left ul {padding-left:20px;list-style: none;}
.platform .container .left ul li 
{
    color:#000000;
    font-size:16px;
    line-height: 40px;
}

.platform .container .left ul li::before {
    content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
    color: #32b5d0; /* Change the color */
    font-weight: bold; /* If you want it to be bold */
    display: inline-block; /* Needed to add space between the bullet and the text */ 
    width: 40px; /* Also needed for space (tweak if needed) */
    margin-left: -1em; /* Also needed for space (tweak if needed) */
    font-size: 25px;
    top: 3px;
    position: relative;
  }

  .platform .container .right img {max-width:662px; position: relative; float: left;margin-left: -30%;}
  /* .mobile_img, .desktop_img {position: relative;float: left;width:50%;}
  .mobile_img img {max-width:220px; width:70%; position: absolute; bottom:0;}
  .desktop_img img {max-width:472px; width:70%;position: absolute; top:0;} */

  /*ABOUT US*/
  .about_us {background-color:#edeced;}
  .about_header 
  {
      background-image: url('../img/grey_wave.png');
      background-repeat: no-repeat;
      background-size:cover;
      width:100%; 
      height:13vw;
    z-index: 100;
    position: relative;
    float: left;
    margin-top: -13%;
}
  .about_us .container {display: table; float: none; padding-top:0;top: -210px; z-index: 101;}
  .about_us .container .left, .about_us .container .right {display: table-cell; vertical-align: top;}
  .about_us .container .left {width:30%;}
  .about_us .container .right {width:70%;}

  .about_us .container .left img:first-child {max-width:333px; margin: 0 auto;width: 83%;}

@-webkit-keyframes reveal {
    from { transform: rotate(0deg) translateX(-800px) rotate(0deg); }
    to   { transform: rotate(0deg) translateX(0px) rotate(-360deg); }
}

@-moz-keyframes reveal {
    from { transform: rotate(0deg) translateX(-800px) rotate(0deg); }
    to   { transform: rotate(0deg) translateX(0px) rotate(-360deg); }
}

@-o-keyframes reveal {
    from { transform: rotate(0deg) translateX(-800px) rotate(0deg); }
    to   { transform: rotate(0deg) translateX(0px) rotate(-360deg); }
}

@keyframes reveal {
    from { transform: rotate(0deg) translateX(-800px) rotate(0deg); }
    to   { transform: rotate(0deg) translateX(0px) rotate(-360deg); }
}

.reveal
{
    -webkit-animation: reveal 2s ease-in-out; /* Chrome, Safari 5 */
    -moz-animation: reveal 2s ease-in-out; /* Firefox 5-15 */
      -o-animation: reveal 2s ease-in-out; /* Opera 12+ */
         animation: reveal 2s ease-in-out; /* Chrome, Firefox 16+, 
                                                   IE 10+, Safari 5 */
}
  .about_us .container .left img:last-child {max-width:67px; margin: 10% auto;}

  .about_us .container .right h1 {font-family:'Opificio';margin-top:125px; margin-left:30px; color:#3c1557; opacity:0.04; font-weight:normal; font-size:160px;position: absolute;}
  .about_us .container .right h3 {margin-top:180px; margin-left:30px;}
  .about_us .container .right p {margin-left:30px; width:66%;}

  .about_us #contact {margin-top:50px;}
  .about_us #contact .left .txt_block {width: 265px; position: relative; margin: 0 auto;}
  .about_us #contact .left .txt_block h4 {text-align: right;    width: 100%;}
  .about_us #contact p {text-align: right; margin:0;}

  .about_us #contact form {display:table; margin-left: 30px; width: 100%;}
  .about_us #contact form .left, .about_us #contact form .right {width:50%; display: table-cell;}
  .about_us #contact form .right {vertical-align: bottom;}

  input[type="text"], textarea
  {

      display: block;
      outline:none;
      resize:none;
      background-color:#ffffff;
      border:1px solid #ffffff;
      border-radius:8px;
      padding:20px;
      margin-bottom: 13px;
      color:#000000;
      font-family: 'Roboto', sans-serif;
      font-size:18px;
      width: 83%;
  }
  textarea {margin-bottom: 0px; height: 6vw; width: 83%;}
  button{
      outline: none;
      background-color: #7abfe1;
      color:#ffffff;
      border:1px solid #7abfe1;
      border-radius:15px;
      padding:25px 55px;
      float: left;
      margin-left: 20px;
  }
  

/*SUBSCRIBE*/
#subscribe {background-color:#edeced;}
#subscribe .container {max-width:855px;padding-top: 0; padding-bottom: 145px;top:20vw;
    -webkit-transition: top 800ms ease-in-out; 
    -moz-transition: top 800ms ease-in-out;
      -o-transition:  top 800ms ease-in-out; 
      transition:  top 800ms ease-in-out;}
.subscribebg {position: absolute; top:0; }

#subscribe .container.loaded {
    top:0; 
    -webkit-transition: top 800ms ease-in-out; 
    -moz-transition: top 800ms ease-in-out;
      -o-transition:  top 800ms ease-in-out; 
      transition:  top 800ms ease-in-out;}

#subscribe .container .info {text-align: center; padding-top:45px;max-width: 415px;margin: 0 auto;}
#subscribe .container .info h4 {color:#000000; font-family:"Roboto", sans-serif;}
#subscribe .container .info p {margin-top:0; color:#333333; font-size:24px;}
.subscribe_field {position: relative; max-width: 415px; margin: 0 auto;}
.subscribe_field input {padding: 10px;width: 335px;display: inline-block;}
.subscribe_field button{
    padding: 8px;
    display: inline-block;
    margin-left:0;
    float: right;
    border-radius: 10px;
}

/*Privacy policy*/
#privacy_policy .container {padding-top: 0%; padding-bottom: 100px;}
#privacy_policy .container h1 {width:100%;}
#privacy_policy .container h4 {width:100%; text-align: left; font-size:26px; font-family: 'Roboto', sans-serif;}
#privacy_policy .container h2 {width:100%;text-align: left; font-size:22px;}
.xclose {margin-top:-30px; z-index:100;}

/*FOOTER*/
footer {margin-top: -77px; max-height: 692px;}
footer .wrapper {background-color: #210b39; position: relative; width:100%; top: 110px;}

.footer_top
{
    
    background-image: url('../img/footer_top.png');
    background-repeat: no-repeat;
    background-size:cover;
    width:100%; 
    height:6vw;
  z-index: 100;
  position: relative;
  float: left;
}
footer .logo
{
    position: relative;
    margin:0% auto;
    padding:10% 0;
    top:0;
    left:0;
    transform:translate(0,0);
    max-width: 350px;
}
footer .logo img {
    max-width: 350px;
}

footer .container{padding-top: 0%; display: flex; flex-direction: row;justify-content:space-between; border-top: 1px solid rgba(255,255,255,0.3); padding-top: 30px;padding-bottom: 30px;}
footer .container .left, footer .container .right {flex:0 0 auto;}
footer .container .left {font-size:16px; opacity:0.3;}
footer .container .left a {   
     margin-top: 14px;
    position: relative;
    float: left;
opacity:1;}
footer .container .right  .socials {width:auto; float: right; position: relative;}
footer .container .right  .socials .item {width:35px; float: left; position:relative;}
footer .container .right  .socials .item a {opacity:0.3;transition:all 200ms ease-in-out;}
footer .container .right  .socials .item a:hover, footer .container .right  .socials .item a:focus {opacity:1;}

.menubtn {
    display: none;
}

/*MEDIA SCREENS*/
@media screen and (max-width:1700px)
{
    footer .wrapper {top: 5vw;}
    .platform .container .right img {margin-left: -2vw;}
    nav {width:40%;}
}

@media screen and (max-width:1500px)
{
    h3{font-size: 80px;}
    .about_us .container .right h1 {margin-top: 164px; margin-left: -32px;font-size: 100px;}
}

@media screen and (max-width:1366px)
{
    body {font-size:16px;}
    h1 {font-size: 38px;}
    h2 {font-size: 24px;}
    h3{font-size: 70px;}
    h4{font-size: 40px;}
    .about_us .container .right h1 {margin-top: 12.5vw; margin-left: -1vw;font-size: 100px;}
    .platform .container .left p {width: 80%;}

    @-webkit-keyframes myOrbit {
        from { -webkit-transform: rotate(0deg) translateX(60px) rotate(0deg); }
        to   { -webkit-transform: rotate(360deg) translateX(60px) rotate(-360deg); }
    }
    
    @-moz-keyframes myOrbit {
        from { -moz-transform: rotate(0deg) translateX(60px) rotate(0deg); }
        to   { -moz-transform: rotate(360deg) translateX(60px) rotate(-360deg); }
    }
    
    @-o-keyframes myOrbit {
        from { -o-transform: rotate(0deg) translateX(60px) rotate(0deg); }
        to   { -o-transform: rotate(360deg) translateX(60px) rotate(-360deg); }
    }
    
    @keyframes myOrbit {
        from { transform: rotate(0deg) translateX(60px) rotate(0deg); }
        to   { transform: rotate(360deg) translateX(60px) rotate(-360deg); }
    }

    /*Dot animation for 2nd element*/
    @-webkit-keyframes myOrbitReverse {
        from { -webkit-transform: rotate(0deg) translateX(-60px) rotate(0deg); }
        to   { transform: rotate(-360deg) translateX(-60px) rotate(360deg); }
    }

    @-moz-keyframes myOrbitReverse {
        from { -moz-transform: rotate(0deg) translateX(-60px) rotate(0deg); }
        to   { transform: rotate(-360deg) translateX(-60px) rotate(360deg); }
    }

    @-o-keyframes myOrbitReverse {
        from { -o-transform: rotate(0deg) translateX(-60px) rotate(0deg); }
        to   { transform: rotate(-360deg) translateX(-60px) rotate(360deg); }
    }

    @keyframes myOrbitReverse {
        from { transform: rotate(0deg) translateX(-60px) rotate(0deg); }
        to   { transform: rotate(-360deg)  translateX(-60px) rotate(360deg); }
    }
}

@media screen and (max-width:1100px)
{
    .menubtn {display: block;}
    nav {display: none;}
    .about_us .container .left {display: flex; flex-direction: column; width: 100%;}
    .about_us .container .left img:first-child {width: 60%; float: left;}
    .about_us .container {top: -9vw;}

    @-webkit-keyframes myOrbit {
        from { -webkit-transform: rotate(0deg) translateX(45px) rotate(0deg); }
        to   { -webkit-transform: rotate(360deg) translateX(45px) rotate(-360deg); }
    }
    
    @-moz-keyframes myOrbit {
        from { -moz-transform: rotate(0deg) translateX(45px) rotate(0deg); }
        to   { -moz-transform: rotate(360deg) translateX(45px) rotate(-360deg); }
    }
    
    @-o-keyframes myOrbit {
        from { -o-transform: rotate(0deg) translateX(45px) rotate(0deg); }
        to   { -o-transform: rotate(360deg) translateX(45px) rotate(-360deg); }
    }
    
    @keyframes myOrbit {
        from { transform: rotate(0deg) translateX(45px) rotate(0deg); }
        to   { transform: rotate(360deg) translateX(45px) rotate(-360deg); }
    }

    /*Dot animation for 2nd element*/
    @-webkit-keyframes myOrbitReverse {
        from { -webkit-transform: rotate(0deg) translateX(-50px) rotate(0deg); }
        to   { transform: rotate(-360deg) translateX(-50px) rotate(360deg); }
    }

    @-moz-keyframes myOrbitReverse {
        from { -moz-transform: rotate(0deg) translateX(-50px) rotate(0deg); }
        to   { transform: rotate(-360deg) translateX(-50px) rotate(360deg); }
    }

    @-o-keyframes myOrbitReverse {
        from { -o-transform: rotate(0deg) translateX(-50px) rotate(0deg); }
        to   { transform: rotate(-360deg) translateX(-50px) rotate(360deg); }
    }

    @keyframes myOrbitReverse {
        from { transform: rotate(0deg) translateX(-50px) rotate(0deg); }
        to   { transform: rotate(-360deg)  translateX(-50px) rotate(360deg); }
    }

    /* .wedo .item .content .top {height: auto;} */
    .request_demo {margin: 10px 0;}
    body.is-menu-active .mobile-menu {    top: 42px;}
}

@media screen and (max-width:960px)
{
    .wedo {display: block;}
    .wedo .item:nth-child(1), .wedo .item:nth-child(3) {text-align: center;}
    header {height: 60vh;}
    .logo {width: 30%;}
    .what_we_do {margin-top: -21vh;}
    .wedo .item img:nth-child(1) {width:50%; }
    .wedo .item .content .top {float: none; margin:0 auto; height: 20%;}
    .wedo .item:nth-child(1) img:nth-child(1), .wedo .item:nth-child(3) img:nth-child(1) {float: none; margin:0 auto;}
    .platform .container .right {display: none;}
    .platform .container .left {flex: 0 1 100%;}
    .platform .container .left ul {column-count: 2;}
    .platform .container .left ul li::before {width:20px;}
    .platform .container .left ul li {margin-left: 20px;}
    .platform .container .left ul li:nth-child(1),
    .platform .container .left ul li:nth-child(2),
    .platform .container .left ul li:nth-child(3),
    .platform .container .left ul li:nth-child(4) {margin-left: 0px;}
    .about_us .container .right p {width:100%;}
    .about_us #contact .left .txt_block {width: 211px;}
    .about_us #contact form {margin-left: 19px;}
    .wedo .item .content .top .number_dot {width: 10%;}
    .wedo .item:nth-child(1) .content .top .number_dot {right: 21vw; top: -16vw;}
    .wedo .item:nth-child(2) .content .top .number_dot {left: 15vw; bottom: 6vw;}
    .wedo .item:nth-child(3) .content .top .number_dot {right: -23vw; top: -15vw;}
}

@media screen and (max-width:768px)
{
    h1 {font-size: 30px;}
    h2 {font-size: 26px;}
    h3 {font-size: 50px;}
    h4 {font-size: 28px;}
    .what_we_do {margin-top: -202px;}
    section .container {padding-top: 190px;}
    .platform .container .left p {width: 100%;}
    .about_us .container .left {width: 27%;}
    .about_us .container .right {width: 100%; float: left;}
    .about_us .container .right h3 {margin-top: 28px; margin-left: 49px;}
    .about_us .container .right h1 {margin-top: 0;}
    .about_us .container#contact .left {width: 54%;}
    footer {margin-top: -140px;}
    footer .container {width:100%; padding-bottom:50px; background-color: #210b39;}
    footer .container .left {margin-left: 20px;}
    .about_us #contact .left .txt_block {width: 154px; float: left; margin: 0; margin-left: 31px;}
    #subscribe .container .info p {font-size: 18px;}
    .subscribe_field, .subscribe_field input {width:70%;}

    #privacy_policy .container h4 {    font-size: 22px;}
}
@media screen and (max-width:600px)
{
    footer {margin-top: -151px;}
    .platform .container .left ul li {    line-height: 22px;}
    .platform .container .left ul li:nth-child(4) {margin-left: 20px;}
    .what_we_do {margin-top: -155px;}
    section .container {padding-top: 131px;}
    .smalllogo {width: 14vw;}
    .about_us .container .right h1 {margin-top: 21px; margin-left: -15vw; font-size: 60px;}
}
@media screen and (max-width:500px)
{
    body {font-size: 12px;}
    h1 {width:auto;}
    h2 {font-size: 21px;width: auto;}
    section .container {width:90%;}
    header {height: 250px;}
    section .container {padding-top: 115px;}
    .platform .container .left ul {column-count: 1;}
    .platform .container .left ul li {margin-left: 20px !important;}
    .about_us .container .right p {width: auto;}
    .about_us #contact form .left, .about_us #contact form .right {width: 100%;display: block;}
    .about_us .container#contact .left {width: 100%;    padding-bottom: 20px;}
    footer .container {display:block;}
    footer .container .right .socials {margin-left:20px; margin-top:20px; float:left;}
    .what_we_do {margin-top: -85px;}
    .about_us .container .right h1 {margin-left: 17vw;}
    .wedo .item:nth-child(1) .content .top .number_dot {right: 25vw; top: -21vw;}
    .wedo .item:nth-child(2) .content .top .number_dot {left: 20vw; bottom: 7vw;}
    .wedo .item:nth-child(3) .content .top .number_dot {right: -29vw; top: -20vw;}
}

@media screen and (max-width:450px)
{
    #subscribe .container .info {padding-top: 30px;}
    h4 {font-size: 24px;}
    h3 {font-size: 40px;}
    #subscribe .container .info p {font-size: 15px;}
    input[type="text"], textarea {font-size: 15px;}
    button {margin-left: 0px; padding: 16px 55px;}
    .about_us #contact .left .txt_block {margin-left: 0px;}
    .about_us .container .right h1 {font-size: 45px;}
    footer .container .left {font-size: 12px;}
}

@media screen and (max-width:360px)
{
    .subscribe_field, .subscribe_field input {width: 64%;}
    .subscribe_field button {padding:5px;}
    #subscribe .container .info {padding-top: 20px;}
}