@import url('https://fonts.cdnfonts.com/css/myriad-pro');
html,body {
    height: 100%;}
html {height: 100%;}
body {
  color: #717477;
  font-family: 'Myriad Pro Regular', MyriadPro-Regular;
  line-height: 1.8;
  font-size: 16px;
  padding: 0;
  margin: 0; width:100%; height:100%;
  position:relative;
}

@font-face {
    font-family: 'Myriad Pro Regular';
    src: url('../fonts/Myriad Pro Regular.eot');
    src: url('../fonts/Myriad Pro Regular.woff2') format('woff2'), url('../fonts/Myriad Pro Regular.eot?#iefix') format('embedded-opentype');
    font-weight: normal;
    font-style: normal;
}

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







/* Defalut CSS Start */
img {
  max-width: 100%;
}

a {
  -webkit-transition: .5s;
  transition: .5s;
  text-decoration: none;
  display: inline-block;
 
}

a:hover {
  text-decoration: none;
}

a:focus {
  text-decoration: none;
}

button {
  outline: 0 !important;
  -webkit-box-shadow: none;
          box-shadow: none;
  border: none;
  background-color: transparent;
}

h1, h2, h3, h4, h5, h6 {
  color: #0f2137;
}

ul {
  list-style-type: none;
}


/*--MY-style---------------------*/
.systems-page, .innovation-page, .insight-page, .partners-page, .work-page {padding-top: 60px; height:100%; width:100%; float:left;}

.systems-page .nav-bottom, .innovation-page .nav-bottom, .insight-page .nav-bottom, .partners-page .nav-bottom, .work-page .nav-bottom {    position: fixed;
    bottom: 0;
    margin-left: -13%;
    left: 47%;}

.main-nav-top { position:relative; z-index:3;}
.main-nav { position:absolute; right:0;} 

.page-wrapper { height:100%; width:100%;} 

/*--------------------------------------------------------------
# Banner
--------------------------------------------------------------*/
.main-img-banner {
	height: 100%;
	position: relative;
	background-image:url(../images/banner-bg1.png);
    background-position: top right;
    background-repeat: no-repeat;
    background-size: cover;
	background-size: 64%;
	
	
	
	
	
 /*height:615px;background-repeat: no-repeat;
	background-position: center right;
	position: relative;*/  }
	
	
.banner-one {
	height: 100%;
	position: relative;
	background-image:url(../images/banner-bg.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
	
}
.spraxis {position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: #1922A7;
	clip-path: polygon(0 0, 63% 0, 40% 100%, 0% 100%); z-index:2; shape-outside: polygon(50%);} 

.firm { float: left; width:100%; text-align:center;}
.hexa-div { width: 68%;
    margin: 0 auto;
    position: relative;
    top: 15px; }
	
.firm-section {    position: relative;padding: 3% 28% 0% 0%;}

.firm-name { font-family: "tachyon",sans-serif; 
    color: #fff;
    font-size: 70px;
    float: right;
    display: block; margin:0; padding:0; line-height:100%; }

.firm-section p {color: #fff;
    font-size: 40px;}

@media(max-width: 991px) {
	.banner-one::before {
		height: 80px;
	}
}

.our-mission-panel { margin:0 auto; width:685px;}
.our-mission { float:left; width:100%; height:990px; position:relative;background-repeat: no-repeat;
	background-size: cover;
	background-position: top center;
	position: relative;}
.mission-contend { background:#fff; opacity:0.8; padding:10px; position:absolute; bottom:30px; width:100%;}

.mission-contend h1 {color: #184171;
    font-size: 36px;
    padding: 0px 40px 5px 40px;
    border-bottom: 2px solid #184171;
    width: 385px;
    margin: 0 auto 20px;}
	
.mission-contend p {    color: #184171;
    font-size: 26px;
    font-weight: normal;
    line-height: 36px; margin-bottom:0;}

.sdvosb {    margin: -85px -15px -15px 0px;  float: right;}


.home-page .nav-bottom {width: 100%;
    float: left;}

.nav-bottom nav { margin: 5px auto;
    padding: 0;
    width: 415px;}
.nav-bottom nav ul {margin: 0;
    padding: 0;}
.nav-bottom nav ul li {float: left;
    display: block;
    margin: 0px 10px 10px 3px;
    padding: 0;
    list-style: none;}
.nav-bottom nav ul li a {
    margin: 0px 0px;
    display: block;
    padding: 0;
    text-transform: uppercase;
    font-size: 14px;
    list-style: none;
    text-decoration: none;
    color: #1922A7;
    padding-top: 60px;
    width: 70px;
    text-align: center;
    
   }
.nav-bottom nav ul li a:hover {color: #184171;}
.nav-bottom nav ul li a.active-link {opacity:0.6;}

.nav-bottom nav ul li a.systems-icon { background: url(../images/system-hm-nav.svg) no-repeat left top;}

.nav-bottom nav ul li a.innovation-icon {background: url(../images/innovation-hm-nav.svg) no-repeat left top;}

.nav-bottom nav ul li a.insight-icon {background: url(../images/insigh-hm-nav.svg) no-repeat left top;}

.nav-bottom nav ul li a.partners-icon {background: url(../images/partners-hm-nav.svg) no-repeat left top;}

.nav-bottom nav ul li a.work-icon {background: url(../images/work-hm-nav.svg) no-repeat left top;}

.nav-bottom nav ul li a.systems-icon, .nav-bottom nav ul li a.innovation-icon, 
.nav-bottom nav ul li a.insight-icon, .nav-bottom nav ul li a.partners-icon,
.nav-bottom nav ul li a.work-icon {background-size: 70px;} 










/* Newsletter Section CSS End */
/* Footer Section CSS Start */
.footer-area { background:#fff; padding:20px; width:100%; float:left;  
}
.sdvosb-img { height:200px;}
.address-footer h6 {color:#1922A7; font-family: "tachyon",sans-serif; font-size:16px; margin:0; padding:0; }
.address-footer p {     color: #707070;
    padding: 0;
    margin: 0;
    line-height: 18px;font-size: 14px;}
.address-footer a { color:#707070; text-decoration:none;font-size: 14px;}
.address-footer a:hover {color:#1922A7;}
.contact-icon-btm { background-image:url(../images/contact-icon-footer.svg); background-repeat:no-repeat; background-size:26px; padding-left:32px; margin-top: 10px;     background-position: left 0px; text-decoration:none;    line-height: 22px!important; color:#707070;}


.hexagon {background-image:url(../images/hexagon.svg); background-repeat: no-repeat;
    background-size: 200px;
    height: 200px;
    text-align: center;
    line-height: 180px;
    width: 200px;
    margin: 0;
    padding: 0;
    float: left; position:absolute; }
	
	.hexagon span { text-transform:uppercase; font-size:18px;color:#fff;}
	
.systems-hexa {
       left: 77px;
    top: 104px;
}

.systems-hexa span {}
	
.innovation-hexa {
	  top: 20px;
    left: 224px;
}

.insight-hexa {
            left: 223px;
    top: 189px;
	}

/*.hexagon {
  position: relative;
  width: 300px; 
  height: 173.21px;
  background-color: #1922A7;
  margin: 86.60px 0;
  border-left: solid 5px #ffffff;
  border-right: solid 5px #ffffff;
}
.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 212.13px;
  height: 212.13px;
  -webkit-transform: scaleY(0.5774) rotate(-45deg);
  -ms-transform: scaleY(0.5774) rotate(-45deg);
  transform: scaleY(0.5774) rotate(-45deg);
  background-color: inherit;
  left: 38.9340px;
}

.hexagon:before {
  top: -106.0660px;
  border-top: solid 7.0711px #ffffff;
  border-right: solid 7.0711px #ffffff;
}

.hexagon:after {
  bottom: -106.0660px;
  border-bottom: solid 7.0711px #ffffff;
  border-left: solid 7.0711px #ffffff;
}
*/







/*---------Inner-Page--------------------*/
.page-middle-panel { float:left; width:100%; padding-bottom: 10%;}
.page-middle-panel h1 {
    font-size: 55px;
    font-weight: bolder;
    color: #1922A7;
    border-bottom: 3px solid #1922a7;
    padding-bottom: 10px;
    margin-bottom: 90px;
    position:relative;
    padding-left: 150px;
    }
.page-middle-panel h1 .polygon-title-sp {
    width: 44px;
    height: 44px;
    float: left;
    position: absolute;
    top:75%;
    margin-right: 20px;
    left: 60px;
	
	background-image:url(../images/title-center-polygon-left.svg); background-repeat:no-repeat; background-size:44px; 
	
	
	
    }
.page-middle-panel h1 .big-polygon-center {
       position: absolute;
    top: 36%;
    left: 40%;
    width: 150px;
    }
	
.page-middle-panel h1 .big-polygon-center img {}

.page-middle-panel h3, .middle-text-left-panel h3 {color:#184171;font-size: 34px;padding-bottom: 20px;font-weight: normal; font-family: 'Myriad Pro', sans-serif;    font-weight: 300;
    font-style: normal;}
.page-middle-panel p, .middle-text-left-panel p {color:#184171;font-size: 24px;line-height:28px;}

.middle-text-column {
    padding: 0px 10%;
}
.learn-more { text-decoration:none; color:#184171; font-size:14px; font-style:italic;}
.learn-more:hover {color: #1922A7; text-decoration:underline;}


/*.middle-text-left-panel h3 { color:#184171; font-size:48px; padding-bottom:30px;}
.middle-text-left-panel p {color:#184171; font-size:32px; line-height:36px; margin-bottom:40px;}*/
.middle-text-left-panel { text-align:right; }
.work-logo-right { text-align:center;}
.mtl-logo {
    height: 150px;
}
.waferwire-logo { margin-bottom:50px;}
.waferwire-logo-img {
    height: 70px;
}	
.mtl-logo-img {
    height: 70px;
}	






/*--------------------*/

.toggle-button {
    position: absolute;
    top: 8px;
    right: 15px;
    padding: 9px 10px;
    margin: 8px 15px 8px 0;
    height: 35px;
    width: 50px;
    cursor: pointer;
    z-index: 3;
}
.relative { position:relative;}
.bar {
    background-color: #535453;
    display: block;
    width: 100%;
    height: 4px;border-radius: 10px;
    border: 0;
    -webkit-transition: all .35s ease;
    transition: all .35s ease;
}
.bar + .bar {
    margin-top: 5px;
}
.middle {
    top: 11px;
}
.bottom {
    top: 22px;
}
.toggle-button:hover {
    opacity: .7;
}
.toggle-active .bar {
    background-color: #707070;
}
.toggle-active .top {
    -webkit-transform: translateY(6px) translateX(0) rotate(45deg);
}
.toggle-active .middle {
   opacity: 0;
}
.toggle-active .bottom {
    -webkit-transform: translateY(-12px) translateX(0) rotate(-45deg);
}
.main-nav ul { width:150px; background:#fff; margin:0 auto;}
.topnav {
   /*position: fixed;*/
    position: absolute;
    background:#fff;
    top: 0;
    right: 40px;
    /*width: 100%;*/
    height: 0;
    visibility: hidden;
    opacity: 0;
    /*-webkit-transition: opacity .35s, visibility .35s, height .35s;*/    transition: top 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
}
.nav-active {
    opacity: 1;
    visibility: visible;
    height: 100%;
/*    max-height: 340px;*/
}
.topnav ul {
    display: block;
    position: relative;
    top: 50px;
    left: 0;
    list-style: none;
    padding: 5px 10px;
    border: 1px solid #e6e6e6;
}
.topnav ul li {
    display: block;
}
.topnav ul li a {
    color: #707070;
    text-decoration: none; text-transform:uppercase; font-size:14px;
	
}
.topnav ul li a:after {}
.topnav ul li a:before {}
.topnav ul li a:hover:after {}
  
.topnav ul li a:hover {color:#1922A7;}
.topnav ul li a.active-nav {color:#1922A7;}


.home-icon { background-image:url(../images/home-nav-icon.svg);}
.systems-icon {background-image:url(../images/system-hm-nav.svg);}
.innovation-icon {background-image:url(../images/innovation-hm-nav.svg);}
.insight-icon {background-image:url(../images/insigh-hm-nav.svg);}
.partners-icon {background-image:url(../images/partners-hm-nav.svg);}
.work-icon {background-image:url(../images/work-hm-nav.svg);}
.contact-icon {background-image:url(../images/contact-nav-icon.svg);}



.home-icon, .systems-icon, .innovation-icon, .insight-icon, .partners-icon, .work-icon, .contact-icon  {background-repeat:no-repeat; background-size:24px; padding-left:30px;}
.back-icon { color:#1922A7; text-decoration:underline;display: block;
    text-align: center;
    font-style: italic;
    font-size: 12px;}
.back-icon:hover { text-decoration:none; opacity:0.8;}