* {margin: 0; padding: 0px; color:#3E423E;}
body{overflow-x: hidden; position: relative; min-height: 100%; font-size: 18px; font-family:'NeueMachina-Light', sans-serif;}

@font-face {font-family: 'NeueMachina-Light'; src: url('../font/NeueMachina-Light.otf') format('opentype');}
@font-face {font-family: 'NeueMachina-Regular'; src: url('../font/NeueMachina-Regular.otf') format('opentype');}

h3 {font-size: 3.5rem; text-align: center;}
h3:first-child {margin-top: 100px;}
h4 {font-size: 1.6rem; line-height: 1.3;}
h5 {font-size: 1.2rem; line-height: 1.3;}
p {line-height: 1.3; font-size: 1rem;}
a {font-size: 1rem!important;}
.italic {
    font-style: italic; 
    opacity: 60%;
       /* IE 8 */
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";

      /* IE 5-7 */
      filter: alpha(opacity=60);

      /* Netscape */
      -moz-opacity: 0.6;

      /* Safari 1.x */
      -khtml-opacity: 0.6;

      /* Good browsers */
      opacity: 0.6;
}

.mobile {display: none!important;}
.web {display: block;}
.clearfix::after {content: ""; clear: both; display: table;}
.gap {padding: 0 150px;}
.wrap {max-width: 1200px; margin:0 auto;}
.btn {font-size:  1rem;}
.btn::after {content: "\2197";  display: inline-block; position: relative; top:1px; left: 3px; -webkit-appearance:none;}
.iframeBox {position: relative; padding-bottom: 56.25%; 
/* 4:3 75% */ height: 0;}
.iframeBox iframe {position: absolute; top: 0; left: 0;
width: 100%; height: 100%; border:0px!important}


/*****************[ HEADER ]******************/
header {}
header .headerWrap {padding: 20px 0 15px 0;}
header .headerWrap .logo {display: inline-block; position: relative; left: 50%; transform: translateX(-50%);}
header .headerWrap .logo img {width: 360px;}


/******************[ BODY ]*******************/
.section2 {}
.section2 .section2Wrap {background-color: #D2633C; padding: 50px;}
.section2 .section2Wrap .firstBox img {width: 750px; display: block; margin: 0 auto; margin-bottom: 50px;}
.section2 .section2Wrap .secondBox {margin: 0 auto; margin-top: 86px;}
.section2 .section2Wrap .copy h4 {text-align: center; font-family: 'NeueMachina-Regular', sans-serif;}
.section2 .section2Wrap .secondBox img {width: 150px; display: block; margin: 0 auto; position: relative; top: -100px;}
.section2 .section2Wrap .secondBox a {display: block; text-align: center; margin-top: -80px;}

.section3 {}
.section3 .section3Wrap .first {display: flex; margin-bottom: 1rem; margin-top: 50px; justify-content: space-between}
.section3 .section3Wrap .first div:first-child {width: 50%;}
.section3 .section3Wrap .first div:last-child img {width: 100%; margin-top: -100px;}
.section3 .section3Wrap .first div:first-child p:first-child {margin-bottom: 1rem;}
.section3 .section3Wrap .second {display: flex; justify-content: space-between;}
.section3 .section3Wrap .second div {width: 50%;}

.section4 {}
.section4 .bottomTxt {display: flex; justify-content: space-between;}
.section4 .bottomTxt h3 {margin-top: 0px; letter-spacing:2px}
.section4 a {text-align: center; display: block; color: #D2633C;}

.section5 {}
.section5 .title h5 {text-align: center; width: 70%; margin: 1rem auto;}
.section5 .wrap img {position: relative; top: -100px; left: 150px; display: block; width: 15%; -webkit-transform: scaleX(-1);
  transform: scaleX(-1);}
.section5 .wrap .txt {width: 85%; display: flex; margin-top: -85px;}
.section5 .wrap .txt .weDesign {display: block; width: 500px;}
.section5 .wrap .txt div:first-child h5 {display: block;}
.section5 .wrap .txt .right {margin-left: -68px;}
.section5 .wrap .txt .right h5 {margin-bottom: 1rem;}
.section5 .wrap .txt .right div {margin-bottom: 1rem;}
.section5 .wrap .txt .right div p {margin-left: 50px;}

.section6 {background: #3E423E; margin-top: 80px;}
.section6 .wrap {padding: 80px; position: relative; height: 320px;}
.section6 .wrap h3, .section6 .wrap h4 {color: #CCC8BB;}
.section6 .wrap h3 {margin-top: 0px;}
.section6 .wrap h4 {text-align: left; font-size: 2.5rem; z-index: 999; position: absolute; top: 165px;}
.section6 .wrap img {position: absolute; top: 250px; right: 50px; display: inline-block; width: 200px; z-index: 0;}

#ear {width: 100px; display: block;}

.section7 {}
.section7 .wrap .title h3:first-child {margin-top: 50px;}
.section7 .wrap .clients {display: flex; justify-content: space-between; margin-top: 50px;}
.section7 .wrap .clients ul li {line-height: 1.3rem;}


.section8 {}
.section8 .wrap {display: flex; justify-content: space-between; margin-top: 50px; padding: 15px 0;}
.section8 .wrap a,.section8 .wrap p {color: #D2633C}
.section8 .wrap a {text-decoration: underline;}

/*****************[ FOOTER ]******************/
.footer {background: #3E423E;}
.footer .wrap {height: 100%;}
.footer .wrap img {display: block; margin: 0px auto; max-width: 320px; padding-top: 30px;}
.footer .wrap .info {display: flex; justify-content: space-between; margin-top: 86px; padding-bottom: 15px;}
.footer .wrap .info ul li, .footer .wrap .info ul a { color: #D1CCC0; font-size: 1rem!important; line-height: 1.2rem;}


/*****************[ MEDIA QUERY ]*****************/
@media only screen and (min-width : 1600px) {
/* Retina-specific stuff here */
body {font-size: 24px;}
h3 {font-size: 4rem;}
h3:first-child {margin-top: 100px;}
h4 {font-size: 3rem; line-height: 1.3;}
h5 {font-size: 1.6rem; line-height: 1.3;}
p {font-size: 1.4rem; line-height: 1.3;}
a {font-size: 1.4rem!important;}    
.wrap {max-width: 1200px; margin:0 auto;}
header .headerWrap {padding: 30px 0 35px 0;}
header .headerWrap .logo img {width: 500px;}
.section2 .section2Wrap .secondBox img {width: 250px; top: -170px;}
#ear {width: 180px; display: block; margin-top: 0px;}  
.section7 .wrap .clients ul li {line-height: 1.7rem;} 
.footer .wrap img {max-width: 500px;}
.footer .wrap .info ul li, .footer .wrap .info ul a {font-size: 1.1rem!important; line-height: 1.6rem;}
    
}

@media all and (min-width : 320px) and (max-width : 1023px) {
.btn::after {content: "\2197";  display: inline-block; position: relative; top:1px; left: 3px;}
body {font-size: 18px;}
h3 {font-size: 2.8rem;}
h3:first-child {margin-top: 50px;}
h4 {font-size: 1.3rem; line-height: 1.2;}
h5 {font-size: 1.2rem; line-height: 1.3;}
p {font-size: 1.1rem; line-height: 1.3;}
a {font-size: 1.1rem!important;}

.web {display: none!important;}
.mobile {display: block!important;}
.gap {padding: 0 10px;}

header .headerWrap {padding: 20px 0 15px 0;}
header .headerWrap .logo img {width: 300px;}

.section2 .section2Wrap {padding: 30px 10px;}
.section2 .section2Wrap .firstBox img {width: 100%; display: block; margin: 0 auto; margin-bottom: 30px; max-width: 320px;}
.section2 .section2Wrap .secondBox img {width: 150px; top: -120px; opacity: .9;}

.section3 .section3Wrap .first {flex-direction: column; margin-top: 30px;}
.section3 .section3Wrap .first div:first-child {width: 100%;}
.section3 .section3Wrap .first div:last-child img {width: 100%; margin-top: 0px;}
.section3 .section3Wrap .second div:first-child {display: none;}
.section3 .section3Wrap .second div {width: 100%; margin-top: -20px;}

.section4 a {margin-top: 10px;}

.section5 .title h5 {width: 100%; margin:5px auto 10px 0;}
.section5 .wrap img {top: 10px; left: 50%; transform: translateX(-50%); display: block; width: 50%;}
.section5 .wrap .txt {width: 100%; flex-flow: column; margin-top: 25px;}
.section5 .wrap .txt .weDesign {display: block; width: 100%;}
.section5 .wrap .txt .right {margin-left: 0px;}

.section6 {margin-top: 30px;}
.section6 .wrap {padding: 30px 10px; height: 450px;}
.section6 .wrap h3 {margin-top: 5px;}
.section6 .wrap h4 {font-size: 1.8rem; top: 100px; text-align: center;}
.section6 .wrap img {top: 320px; right: 10px;}

#ear {width: 100px; display: block; margin-top: 30px;}

.section7 {}
.section7 .wrap .title h3:first-child {margin-top: 50px;}
.section7 .wrap .clients {margin-top: 30px;}
.section7 .wrap .clients mobile {display: block;}
    .section7 .wrap .mobile ul li {text-align: center; display: inline-block;}
.section7 .wrap .clients ul li {line-height: 1.3rem;}

.section8 .wrap {margin-top: 30px;}    
    
.footer .wrap .info {flex-flow: column;}
.footer .wrap .info ul {margin-bottom: 20px;}
.footer .wrap .info ul li, .footer .wrap .info ul a {font-size: 1rem; text-align: center;}
}