@import url("https://fonts.googleapis.com/css?family=Roboto+Flex:400,500,600,700&display=swap");

* {margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; font-family: "Roboto Flex", sans-serif;}
  
a {-webkit-transition: all 0.8s; transition: all 0.8s; color:#E34D4D;}
a:focus, a:hover {text-decoration: none;}

h1, h2, h3 {font-weight: 600; margin: 0px;}
p {font-size: 18px; font-weight: 400; line-height: 28px; margin: 0px;}

hr.softline {background-color:#333;width:20%;height:1px; line-height:1px;}

.gaps {padding:40px 0;}

@media only screen and (min-width: 480px) and (max-width: 767px) {
  .container {width: 450px;}
}

.logo img {width: 50%;}

.header {position: absolute; top: 40px; left: 0; width: 100%; z-index: 2;}

main.bg {background: #000; overflow: hidden;}

main .header.g1 {position: unset; padding-top: 100px; padding-bottom: 120px;}

@media (max-width: 767px) {
  main .header.g1 {padding-top: 50px; padding-bottom: 50px;}
}

@media (max-width: 767px) {
  main .header.g1 .header-right {display: none;}
}

main .header.g1 .header-right a {color: #fff; font-size: 20px;}

main .main-wrapper.v2 {-webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: auto;}
main .main-wrapper.v2 .hero-area {margin-bottom: 120px;}
main .main-wrapper.v2 .hero-area h1 {font-size: 100px; color: #fff;}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  main .main-wrapper.v2 .hero-area h1 {font-size: 80px;}
}

@media (max-width: 767px) {
  main .main-wrapper.v2 .hero-area h1 {font-size: 40px;}
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
  main .main-wrapper.v2 .hero-area h1 {font-size: 50px;}
}

main .main-wrapper.v2 .hero-area p {font-size: 20px; color: rgba(255, 255, 255, 0.7); line-height: 40px;}

main .main-wrapper.v2 .g2 {margin-bottom: 100px;}

@media (max-width: 767px) {
  main .main-wrapper.v2 .g2 {margin-bottom: 30px;}
}

main .main-wrapper.v2 .g2 .section-title h3 {font-size: 26px; font-weight: 400; color: #fff; padding-bottom: 7px; margin-bottom: 40px; position: relative;}

@media (max-width: 767px) {
  main .main-wrapper.v2 .g2 .section-title h3 {font-size: 20px;}
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
  main .main-wrapper.v2 .g2 .section-title h3 {font-size: 22px;}
}

main .main-wrapper.v2 .g2 .section-title h3::after {content: ''; position: absolute; width: 30px; height: 1px; background: #fff; bottom: 0; left: 0;}

main .main-wrapper.v2 .g2 .section-title h2 {font-size: 48px; font-weight: 600; line-height: 60px; font-weight: 48px; color: #fff; margin-bottom: 50px;}

@media (max-width: 767px) {
  main .main-wrapper.v2 .g2 .section-title h2 {font-size: 32px; line-height: 45px;}
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
  main .main-wrapper.v2 .g2 .section-title h2 {font-size: 34px; line-height: 48px;}
}
main .main-wrapper.v2 .g2 .tw {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-left: -25px; margin-right: -25px;}

main .main-wrapper.v2 .g2 .tw {width: calc(33.33% - 50px); margin: 0px 25px 50px;}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  main .main-wrapper.v2 .g2 .tw {width: calc(33.33% - 30px);margin: 0px 15px 50px;}
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  main .main-wrapper.v2 .g2 .tw {width: calc(50% - 30px); margin: 0px 15px 50px;}
}

@media (max-width: 767px) {
  main .main-wrapper.v2 .g2 .tw {width: calc(100% - 50px); margin: 0px 25px 50px;}
}

main .footer {width: 100%; margin-bottom: 50px;}

main .footer p {color: rgba(255, 255, 255, 0.7);}