@font-face {
    font-family:'MyriadProRegular';
    src: url('../fonts/myriadpro-regular.eot');
    src: url('../fonts/myriadpro-regular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/myriadpro-regular.woff') format('woff'),
         url('../fonts/myriadpro-regular.ttf') format('truetype'),
         url('../fonts/myriadpro-regular.svg#MyriadProRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
  font-family: 'MyriadPro-Black';
  src: url('../fonts/MyriadPro-Black.eot?#iefix') format('embedded-opentype'),  url('../fonts/MyriadPro-Black.otf')  format('opentype'),
	     url('../fonts/MyriadPro-Black.woff') format('woff'), url('../fonts/MyriadPro-Black.ttf')  format('truetype'), url('../fonts/MyriadPro-Black.svg#MyriadPro-Black') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'TrajanPro-Regular';
  src: url('../fonts/TrajanPro-Regular.eot?#iefix') format('embedded-opentype'),  
       url('../fonts/TrajanPro-Regular.otf')  format('opentype'),
       url('../fonts/TrajanPro-Regular.woff') format('woff'), 
       url('../fonts/TrajanPro-Regular.ttf')  format('truetype'), 
       url('../fonts/TrajanPro-Regular.svg#TrajanPro-Regular') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Stencil';
  src: url('../fonts/Stencil.eot?#iefix') format('embedded-opentype'),  
       url('../fonts/Stencil.woff') format('woff'), 
       url('../fonts/Stencil.ttf')  format('truetype'), 
       url('../fonts/Stencil.svg#Stencil') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'MyriadPro-Light';
  src: url('../fonts/MyriadPro-Light.eot?#iefix') format('embedded-opentype'),
       url('../fonts/MyriadPro-Light.otf')  format('opentype'),
       url('../fonts/MyriadPro-Light.woff') format('woff'),
       url('../fonts/MyriadPro-Light.ttf')  format('truetype'), 
       url('../fonts/MyriadPro-Light.svg#MyriadPro-Light') format('svg');
  font-weight: normal;
  font-style: normal;
}
body{ background-color: #ccc; padding: 0px; margin: 0px;}
h1, h2, h3, p{padding: 0px; margin: 0px; color: #2F2933;}
img{ vertical-align: middle; max-width: 100%; width: auto; height: auto;}
.container{max-width: 612px; width: auto; margin: 0 auto; position: relative; overflow: hidden;}
.bdr-t{width: auto; position: absolute; height: 1px; margin: 0 8px; max-width: 595px; top: 8px;
    left: 0; right: 0; background: rgba(250,250,250,0.8);}
.bdr-r{ position: absolute; height: auto; width: 1px; top: 8px; bottom: 8px; z-index: 1; right: 8px;
    left: auto; background: rgba(250,250,250,0.8);}
.bdr-b{ position: absolute; bottom: 8px; left: 0; width: auto; max-width: 595px; margin: 0 8px;
    height: 1px; left: 0; right: 0; background: rgba(250,250,250,0.8);}
.bdr-l{ position: absolute; top: 8px; width: 1px; left: 8px; bottom: 8px; z-index: 1;
    right: auto; background: rgba(250,250,250,0.8);}
/* main-heading */
.main-heading h1{ font-family: 'TrajanPro-Regular'; font-size: 29px; font-weight: normal; background-color: #231F20; color: #fff; text-align: center; text-transform: uppercase;
margin: 0px; padding: 25px 27px 15px 27px; line-height: 36px; letter-spacing: -2px;}
/* main-text */
.main-text{ display: flex; flex-wrap: wrap; align-content: flex-start;
 border-top: 4px solid #fff; border-bottom: 4px solid #fff;}
.main-text .left-box{ background-color: #2F2933; width: 275px; border-right: 4px solid #fff;}
.main-text .left-box p{ color: #FFD933;  font-family: 'MyriadPro-Light'; font-weight: normal; font-size: 21px; padding-top: 36px; padding-left: 24px;}
.main-text .right-box{ background-color: #FF8000; width: 332px;}
.main-text .right-box p{ color: #fff;  font-family:'MyriadProRegular'; font-weight: normal; font-size: 18px;  padding: 18px 15px 18px 15px; line-height: 1.3;}
/* section-one */
.section-one{ background-color: #ffd833; border-bottom: 4px solid #fff; position: relative;}
.section-one .section-icon{position: absolute; top: 15px; right: 10px;}
.section-one h2{ background-color: #ffeb98; font-family:'MyriadProRegular'; font-size: 20px; font-weight: normal; line-height: 45px; margin: 0px; padding-left: 24px;}
.section-one h2 span{ font-family: 'Stencil'; font-size: 20px; font-weight: normal;}
.section-one-inner{padding: 26px 8px 32px 8px;}
.section-one .first-box{ display: inline-flex; background-color: #ffeb98; border-bottom: 1px dashed #fff;; width: 400px; padding-top: 10px; }
.section-one .icon { padding: 0px 17px 0 28px;}
.section-one .second-box .icon { padding: 0px 17px 0 28px;}
.section-one .content h3{ font-family:'MyriadPro-Black'; font-size: 18px; font-weight: bold; padding-bottom: 5px;}
.section-one .content p{ font-family:'MyriadProRegular'; font-size: 14px; line-height: 20px; padding-bottom: 13px; padding-right: 50px;}
.section-one .second-box{ display: inline-flex; background-color: #ffeb98; width: 400px; padding-top: 18px;}
/* section-two */
.section-two { background-color: #cdcd55; border-bottom: 4px solid #fff; position: relative;}
.section-two .second-box .icon { padding: 0px 17px 0 75px;}
.section-two .section-icon { position: absolute; top: 50px; left: 7px;}
.section-two h2{ background-color: #e7e5aa; font-family:'MyriadProRegular'; font-size: 20px; font-weight: normal; line-height: 45px; margin: 0px; padding-left: 24px;}
.section-two h2 span{ font-family: 'Stencil'; font-size: 20px; font-weight: normal;}
.section-two-inner { padding: 65px 8px 41px 8px;}
.section-two .first-box { display: inline-flex; background-color: #e7e5aa; border-bottom: 1px dashed #2F2933; width: 470px; padding-top: 10px; float: right; padding-right: 20px; box-sizing: border-box; 
}
.section-two .icon { padding: 0px 17px 0 100px;}
 .second-box .icon { padding: 0px 17px 0 70px;}
.section-two .content h3 { font-family: 'MyriadPro-Black'; font-size: 18px; font-weight: bold;
    padding-bottom: 0px;}
.section-two .content p {font-family: 'MyriadProRegular'; font-size: 14px; line-height: 20px;
    padding-bottom: 10px;}
.section-two .second-box { display: inline-flex; background-color: #e7e5aa; width: 475px;
    padding-top: 11px; float: right; padding-right: 15px;}
.section-two-inner:after { content: ""; display: block; clear: both;}
/* section-three */
.section-three {background-color: #8fb35b; border-bottom: 4px solid #fff; position: relative;}
.section-three h2 { background-color: #c8d9ad; font-family: 'MyriadProRegular'; font-size: 20px;
    font-weight: normal; line-height: 45px; margin: 0px; padding-left: 24px;}
.section-three h2 span { font-family: 'Stencil'; font-size: 20px; font-weight: normal;}
.section-three-inner { padding: 26px 8px 32px 8px;}
.section-three .first-box { display: inline-flex; background-color: #c9daae; border-bottom: 1px dashed #2F2933; width: 460px; padding-top: 15px;}
.section-three .icon { padding: 0px 17px 0 28px;}
.section-three .content h3 { font-family: 'MyriadPro-Black'; font-size: 18px; font-weight: bold;
    padding-bottom: 5px; line-height: 18px;}
.section-three .content p { font-family: 'MyriadProRegular'; font-size: 14px; padding-bottom: 11px; line-height: 19px;  padding-right: 120px;}
.section-three .second-box { display: inline-flex; background-color: #c9daae; width: 460px;
    padding-top: 15px;}
.section-three .section-icon { position: absolute; top: 59px; right: 25px;}
/* section-four */
.section-four { background-color: #182b32; border-bottom: 2px solid #fff; position: relative;}
.section-four .section-icon { position: absolute; top: 51px; left: 3px;}
.section-four h2{ background-color: #8c959a; font-family:'MyriadProRegular'; font-size: 20px; font-weight: normal; line-height: 45px; margin: 0px; padding-left: 24px;}
.section-four h2 span{ font-family: 'Stencil'; font-size: 20px; font-weight: normal;}
.section-four-inner { padding: 36px 8px 36px 8px;}
.section-four .first-box { display: inline-flex; background-color: #8e979c; border-bottom: 1px dashed #2F2933; width: 480px; padding-top: 20px; float: right;}
.section-four .icon { padding: 0px 17px 0 210px;}
.section-four .content h3 { font-family: 'MyriadPro-Black'; font-size: 18px; font-weight: bold;    padding-bottom: 0px;}
.section-four .content p {font-family: 'MyriadProRegular'; font-size: 14px; line-height: 20px;
    padding-bottom: 10px;}
.section-four .second-box {display: inline-flex; background-color: #8e979c; width: 480px;
    padding-top: 24px; float: right; padding-bottom: 20px;}
.section-four-inner:after { content: ""; display: block; clear: both;}
/* footer */
footer { background-color: #302833;  display: flex; flex-wrap: wrap; align-items: flex-end;    padding: 15px 25px 20px; justify-content: space-between;}
footer .company-name { color: #fff; font-family:'MyriadProRegular'; font-size: 14px;}
.logo { order: 2;}
.logo img { max-width: 160px; width: auto; height: auto;}
/*responsive*/
@media only screen and (max-width:611px) {
    .main-text .left-box { width: 100%; border-right: none; border-bottom: 4px solid #fff;}
    .main-text .right-box { width: 100%;}
    .main-text .right-box br { display: none;}
    .main-text .left-box br { display: none;}
    .main-text .left-box p {font-size: 21px; padding-top: 0px; padding-left: 0px; text-align: center;
    padding: 20px 0px; padding: 18px 15px 18px 15px;}
    .main-text .right-box p{ text-align: center;}
    /*section-one*/
    .section-one .section-icon { position: static; text-align: center; padding-top: 10px;}
    .section-one .section-icon img{ max-width: 250px; width: auto; height: auto;}
    .section-one-inner { padding: 10px 8px 32px 8px;}
    .section-one .first-box{ width: 100%;}
    .section-one .second-box{ width: 100%;}
    .section-one .second-box { padding-top: 10px;}
    .section-one .icon { width: 20%;  text-align: center; align-self: center; padding: 0px 10px;}
    .section-one .content { box-sizing: border-box; padding: 0 10px; width: 80%;}
    .section-one .content p br{ display: none; }
    .section-one .second-box .icon { padding: 0px 10px;}
    /*section-two*/
    .section-two .section-icon { position: static; text-align: center; padding-top: 10px;}
    .section-two .section-icon img { max-width: 250px; width: auto; height: auto;}
    .section-two-inner { padding: 10px 8px 32px 8px;}
    .section-two .first-box{width: 100%;}
    .section-two .second-box{width: 100%; padding-right: 0px;}
    .section-two .icon { width: 20%; text-align: center; align-self: center; padding: 0px 10px;}   
    .section-two .content { box-sizing: border-box; padding: 0 10px; width: 80%;}
    .section-two .content p br { display: none;}
    .section-two .second-box { padding-top: 10px;}
    .section-two .second-box .icon { padding: 0px 10px;}
    .section-two .first-box{ padding-right: 0px;}
    /*section-three*/
    .section-three .section-icon { position: static; text-align: center; padding-top: 10px;}
    .section-three .section-icon img { max-width: 250px; width: auto; height: auto;}
    .section-three-inner { padding: 10px 8px 32px 8px;}
    .section-three .first-box{width: 100%;}
    .section-three .second-box{width: 100%; padding-right: 0px;}
    .section-three .icon { width: 20%; text-align: center; align-self: center; padding: 0px 10px;}   
    .section-three .content { box-sizing: border-box; padding: 0 10px; width: 80%;}
    .section-three .content p br { display: none;}
    .section-three .second-box { padding-top: 10px;}
    .section-three .second-box .icon { padding: 0px 10px;}
    .section-three .first-box{ padding-right: 0px;}
    /*section-four*/
    .section-four .section-icon { position: static; text-align: center; padding-top: 10px;}
    .section-four .section-icon img { max-width: 250px; width: auto; height: auto;}
    .section-four-inner { padding: 10px 8px 32px 8px;}
    .section-four .first-box{width: 100%;}
    .section-four .second-box{width: 100%; padding-right: 0px;}
    .section-four .icon { width: 20%; text-align: center; align-self: center; padding: 0px 10px;}   
    .section-four .content { box-sizing: border-box; padding: 0 10px; width: 80%;}
    .section-four .content p br { display: none;}
    .section-four .second-box { padding-top: 10px;}
    .section-four .second-box .icon { padding: 0px 10px;}
    .section-four .first-box{ padding-right: 0px;}
}
@media only screen and (max-width:480px) {
    .main-heading h1 {  font-size: 26px;}
    .main-heading h1 br{ display: none;}
    .main-text .left-box p { font-size: 20px;}
    .logo {
    order: 0;
    width: 100%;
    text-align: center;
    margin-bottom: 25px;
}
 footer .company-name {
    color: #fff;
    font-family: 'MyriadProRegular';
    font-size: 14px;
    text-align: center;
    width: 100%;
}   
}
@media only screen and (max-width:320px) {
    .main-heading h1 {font-size: 19px; line-height: 28px;}
    .section-two h2{font-size: 18px;}
    
}