h1 { font-size: 62px; color: #242424; font-weight: 300; }

h2 { font-size: 62px; color: #535353; font-weight: 300; }

@media (max-width: 1920px) { h1, h2 { font-size: 200%; } }
@media (max-width: 1170px) { h1, h2 { font-size: 150%; } }
@media (max-width: 767px) { h1, h2 { font-size: 100%; } }
@-webkit-keyframes bounceIn { 0% { -webkit-transform: scale(0); }
  100% { -webkit-transform: scale(1); } }
@-moz-keyframes bounceIn { 0% { -moz-transform: scale(0); }
  100% { -moz-transform: scale(1); } }
@-ms-keyframes bounceIn { 0% { -ms-transform: scale(0); }
  100% { -ms-transform: scale(1); } }
@keyframes bounceIn { 0% { transform: scale(0); }
  100% { transform: scale(1); } }
@-webkit-keyframes animationBounceOut { 0% { -webkit-transform: scale(1); }
  100% { -webkit-transform: scale(0); } }
@-moz-keyframes animationBounceOut { 0% { -moz-transform: scale(1); }
  100% { -moz-transform: scale(0); } }
@-ms-keyframes animationBounceOut { 0% { -ms-transform: scale(1); }
  100% { -ms-transform: scale(0); } }
@keyframes animationBounceOut { 0% { transform: scale(1); }
  100% { transform: scale(0); } }
@-webkit-keyframes bgNav { 0% { background-color: transparent; }
  100% { background-color: rgba(0, 0, 0, 0.6); } }
@-moz-keyframes bgNav { 0% { background-color: transparent; }
  100% { background-color: rgba(0, 0, 0, 0.6); } }
@-ms-keyframes bgNav { 0% { background-color: transparent; }
  100% { background-color: rgba(0, 0, 0, 0.6); } }
@keyframes bgNav { 0% { background-color: transparent; }
  100% { background-color: rgba(0, 0, 0, 0.6); } }
@media (min-width: 768px) { .container { width: 750px; } }
@media (min-width: 992px) { .container { width: 970px; } }
@media (min-width: 1200px) { .container { width: 1170px; } }
@media (min-width: 1600px) { .container { width: 1280px; } }
@media (min-width: 1920px) { .container { width: 1600px; } }
@media (min-width: 1950px) { .container { width: 1920px; } }

@media (max-width: 991px) { .hide { display: none; } }
body { font-family: 'Open Sans', sans-serif; font-size: 25px; overflow-x: hidden; }

.container { padding: 0 15px; margin: auto; box-sizing: border-box; display: flex; justify-content: space-between; position: relative; }

.img-responsive { width: 100%; }

#header { margin: 45px 0 95px; }
@media (max-width: 1170px) { #header { margin-bottom: 45px; } }
#header #nav a.menuicon { line-height: 0; border-radius: 50%; text-align: center; box-shadow: 0px 1px 15px rgba(0, 0, 0, 0.2); display: inline-block; transition: all 0.3s ease-out; position: absolute; height: 70px; width: 70px; background: #ffffff; z-index: 102; right: 15px; }
#header #nav a.menuicon img { width: 100%; }
#header #nav a.menuicon:hover { height: 76px; width: 76px; }
#header #nav a.active { line-height: 2.5; border-radius: 50%; text-align: center; background: #ffffff; box-shadow: 0px 1px 15px rgba(0, 0, 0, 0.2); display: inline-block; transition: all 0.3s ease-out; position: absolute; height: 70px; width: 70px; display: none; color: #5A5B5D; z-index: 102; right: 15px; }
#header #nav a.active img { width: 100%; }
@media (max-width: 1920px) { #header #logo img { width: 100px; } }
@media (max-width: 1440px) { #header #logo img { width: 80px; }
  #header .menuicon, #header .active { width: 50px !important; height: 50px !important; } }

#hero { position: relative; margin-bottom: 150px; }
#hero h1, #hero h2 { margin: 0; }
#hero h1 strong, #hero h2 strong { font-weight: 600; }
#hero h2 { color: #7e898f; }
#hero .pattern1 { position: absolute; left: 0; top: 0; width: 25%; }
@media (max-width: 1170px) { #hero .pattern1 { display: none; } }
#hero .pattern2 { position: absolute; right: 0; top: 0; width: 25%; }
#hero .pattern2 img { width: 100%; }
#hero .container { align-items: center; }
#hero #description { width: 40%; border-radius: 8px; background: #ffffff; z-index: 9; overflow: hidden; box-shadow: 0px 1px 100px rgba(0, 0, 0, 0.2); }
#hero #description .img { position: relative; }
#hero #description .img img { width: 100%; }
#hero #description .img span { position: absolute; bottom: 15px; left: 15px; z-index: 10; color: #ffffff; }
#hero #description .detail li { display: flex; flex-direction: row; padding: 22px 11px; border-bottom: 1px #ebebeb solid; align-items: center; }
#hero #description .detail li:hover { box-shadow: 0 10px 30px 0 rgba(55, 64, 66, 0.1); }
#hero #description .detail li a { color: #535353; }
#hero #description .detail li span { color: #00b4ff; font-size: 18px; text-align: center; margin: 0 25px 10px; width: 130px; height: 70px; }
#hero #description .detail li span img { display: block; margin-bottom: 10px; width: 100%; }
@media (max-width: 1920px) { #hero #description .detail li { font-size: 20px; }
  #hero #description .detail li span { width: 100px; font-size: 14px; } }
@media (max-width: 1600px) { #hero #description .detail li { font-size: 18px; }
  #hero #description .detail li span { width: 70px; font-size: 14px; height: auto !important; margin-bottom: 0px; } }
@media (max-width: 1440px) { #hero #description .detail li { font-size: 17px; }
  #hero #description .detail li span { font-size: 12px; } }
@media (max-width: 1170px) { #hero #description .detail li { font-size: 15px; } }
#hero #description .detail li:last-child { border: 0px; }
#hero #description .detail li:last-child span { height: 70px !important; }
#hero #description .detail li:last-child:hover { box-shadow: none; }
@media (max-width: 1170px) { #hero { margin-bottom: 100px; }
  #hero .container { flex-direction: column; }
  #hero .container h2 { margin-bottom: 80px; } }
@media (max-width: 1170px) and (max-width: 767px) { #hero .container h2 { margin-bottom: 40px; } }
@media (max-width: 1170px) { #hero .container #description { width: 100%; margin: 0 15px; } }
@media (max-width: 1170px) and (max-width: 767px) { #hero { margin-bottom: 50px; } }

#we-make { background: #ebebeb; padding: 100px 0; margin-bottom: 100px; min-height: 600px; position: relative; }
@media (max-width: 1920px) { #we-make { min-height: 500px; } }
@media (max-width: 1600px) { #we-make { min-height: 400px; } }
@media (max-width: 1440px) { #we-make { min-height: 450px; padding: 80px 0 0; } }
@media (max-width: 1170px) { #we-make { padding: 40px 0 0; min-height: 290px; } }
@media (max-width: 991px) { #we-make { padding: 0px; min-height: inherit; margin: 0 0 10px; } }
#we-make .container { height: 50vh; align-items: center; }
@media (max-width: 1170px) { #we-make .container { height: 45vh; }
  #we-make .container h2 { margin-top: 0px; } }
@media (max-width: 991px) { #we-make .container { height: inherit; }
  #we-make .container h2 { margin-top: 15px; } }
#we-make .wemakeimg { position: absolute; right: 46%; }
#we-make .wemakeimg img { width: 100%; z-index: 2; position: relative; }
@media (max-width: 991px) { #we-make .wemakeimg img { width: 106%; } }
@media (max-width: 767px) { #we-make .wemakeimg img { width: 100%; } }
#we-make .wemakeimg .pattern5 { width: 16%; position: absolute; right: -80px; bottom: -80px; text-align: right; z-index: 1; }
#we-make .wemakeimg .pattern5 img { max-width: 100%; }
@media (max-width: 1920px) { #we-make .wemakeimg .pattern5 { right: -40px; bottom: -40px; } }
@media (max-width: 767px) { #we-make .wemakeimg { position: relative; right: 0; } }
#we-make .wemake { width: 40%; margin-left: 60%; }
@media (max-width: 767px) { #we-make .wemake { margin: 0%; width: 100%; padding: 0 15px; box-sizing: content-box; } }
#we-make .wemake h2 strong { font-weight: 600; color: #ff5a00; }
#we-make .wemake P { line-height: 1.8; }
@media (max-width: 1920px) { #we-make .wemake P { font-size: 18px; } }
@media (max-width: 1170px) { #we-make .wemake P { font-size: 16px; } }
#we-make .pattern3 { width: 20%; position: absolute; left: 0; top: -56px; }
#we-make .pattern3 img { max-width: 100%; }
#we-make .pattern4 { width: 10%; position: absolute; right: 0; bottom: -150px; text-align: right; }
@media (max-width: 1170px) { #we-make .pattern4 { bottom: -100px; } }
#we-make .pattern4 img { max-width: 100%; }

#wearenextbridge { padding: 150px 0; text-align: center; }
#wearenextbridge .wrapper { width: 800px; text-align: center; margin: auto; }
#wearenextbridge .wrapper h2 strong { font-weight: 600; }
#wearenextbridge .wrapper p { line-height: 1.8; opacity: 0.8; }
@media (max-width: 1920px) { #wearenextbridge .wrapper p { font-size: 18px; } }
@media (max-width: 767px) { #wearenextbridge .wrapper p { font-size: 14px; } }
@media (max-width: 1170px) { #wearenextbridge { padding: 25px 15px 50px; }
  #wearenextbridge .wrapper { width: inherit; } }

#lettalk { background: url(../images/lettalk-img.jpg) no-repeat 0 0; padding: 175px 0 300px; font-size: 45px; color: #ffffff; line-height: 1.5; background-size: cover; position: relative; }
@media (max-width: 1920px) { #lettalk { font-size: 35px; } }
@media (max-width: 1440px) { #lettalk { background-size: contain; padding: 133px 0; } }
@media (max-width: 1170px) { #lettalk { background-size: cover; padding: 50px 0; font-size: 25px; } }
@media (max-width: 767px) { #lettalk { font-size: 20px; } }
#lettalk a { color: #ffffff; }
#lettalk .pattern6 { width: 15%; position: absolute; right: -80px; top: -230px; text-align: right; z-index: 1; }
#lettalk .pattern6 img { max-width: 100%; }
@media (max-width: 1170px) { #lettalk .pattern6 { width: 12%; right: -40px; top: -115px; } }

#footer { padding: 25px 0; background: url(../images/header-pattern-07.png) no-repeat right 0; background-size: contain; }
@media (max-width: 1170px) { #footer { padding: 10px 0; background-size: 50%; } }
@media (max-width: 767px) { #footer { background-size: contain; }
  #footer img { width: 45px; } }

.fade { background: rgba(0, 0, 0, 0.6); position: fixed; top: 0; bottom: 0; left: 0; right: 0; display: none; z-index: 100; animation: bgNav 0.2s ease both; }

.circle { width: 1px; height: 1px; position: fixed; transform: translateZ(0); top: 96px; right: 99px; z-index: 101; transform: translateZ(0); transform: translate3d(0, 0, 0); backface-visibility: hidden; perspective: 1000; }
.circle span { width: 2000px; height: 2000px; position: absolute; top: 50%; left: 50%; margin: -1000px 0 0 -1000px; background-color: #FF8214; border-radius: 50%; transform: translateZ(0); transform: translate3d(0, 0, 0); backface-visibility: hidden; perspective: 1000; transform: scale(0); animation: bounceOut 300ms ease-out forwards; }
.circle span.x { animation: bounceIn 300ms ease-out forwards; z-index: 100; }
@media (max-width: 1170px) { .circle span { width: 1500px; height: 1500px; margin: -750px 0 0 -750px; } }

.navigation { width: 800px; position: fixed; -webkit-transform: translateZ(0); transform: translateZ(0); top: 210px; right: 70px; transform: translateZ(0); transform: translate3d(0, 0, 0); backface-visibility: hidden; perspective: 1000; z-index: 103; display: none; color: #ffffff; }
.navigation li a { color: #ffffff; padding: 15px 0; display: block; }
@media (max-width: 1170px) { .navigation { width: 600px; } }
@media (max-width: 1170px) { .navigation { width: 92%; left: 4%; right: 4%; } }

#page { position: relative; margin-bottom: 150px; }
#page .container { flex-flow: row wrap; align-items: center; text-align: center; justify-content: center; }
#page h1 { color: #ff5a00; font-size: 200px; }
@media (max-width: 1920px) { #page h1 { font-size: 180px; } }
@media (max-width: 1170px) { #page h1 { font-size: 100px; } }
@media (max-width: 767px) { #page h1 { font-size: 70px; } }
#page h1, #page h2 { margin: 0; }
#page h1 strong, #page h2 strong { font-weight: 600; }
#page h2 { color: #535353; }
#page h2 span { color: #7e898f; }
#page .pattern1 { position: absolute; left: 0; top: 0; width: 25%; }
@media (max-width: 1170px) { #page .pattern1 { display: none; } }
#page .img { width: 80%; margin-left: 20%; margin-top: 100px; margin-bottom: 100px; }
@media (max-width: 1170px) { #page .img { width: 100%; margin-left: inherit; } }
#page .img img { width: 100%; }
#page .imgtwo { width: 80%; margin: 80px auto 50px; }
#page .imgtwo img { width: 100%; }
@media (max-width: 767px) { #page .imgtwo { width: 100%; } }
#page p { color: #535353; text-align: left; margin-left: 30%; width: 70%; line-height: 1.4; }
@media (max-width: 1170px) { #page p { font-size: 17px; width: 100%; margin: 0px; } }
#page .imgthree { margin: 25px 0; }
#page .imgrow { display: flex; justify-content: space-between; margin: 0 -15px 50px; }
#page .imgrow .imgcol { padding: 0 15px; }
#page .imgrow + p { margin: 0% auto; }