@charset "UTF-8";

/*
Theme Name: JUOKU
Theme URI: x
Author: L
Author URI: L
Description: ? 
Version: 1

License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyone
*/

/**
 * SETTINGS
 * File-header..........The file header for the themes style.css file.
 * Fonts................Any font files, if the project needs specific fonts.
 * Global...............Project-specific, globally available variables.

 */
 @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;1,200;1,300;1,400;1,600;1,700&display=swap');

 .hidden.menu {
	display: none;
  }
  
  .masthead.segment {
	min-height: 500px; /* 525px */
	padding: 0px;
  }
  
  .masthead .ui.menu .ui.button {
	margin-left: 0.5em;
  }
  .masthead h1.ui.header {
	margin-top: 25%; /* 3em */
	margin-bottom: 0em; margin-left:-3.5em;
	font-size: 3.25em; line-height:1.25em;
	font-weight: normal; letter-spacing: 0.25px;
	text-align:left;
	text-shadow: -2px 2px 11px rgba(38,16,10,0.81);
  }
	#about-vm-banner h1 {
	width:100%;}
  
  .masthead h2 {
	font-size: 1.7em;
	font-weight: normal;
  }
  
  .ui.vertical.stripe {
	padding: 8em 0em;
  }
  .ui.vertical.stripe h3 {
	font-size: 2em;
  }
  .ui.vertical.stripe .button + h3,
  .ui.vertical.stripe p + h3 {
	margin-top: 3em;
  }
  .ui.vertical.stripe .floated.image {
	clear: both;
  }
  .ui.vertical.stripe p {
	font-size: 1.45em;
  }
  .ui.vertical.stripe .horizontal.divider {
	margin: 3em 0em;
  }
  
  .quote.stripe.segment {
	padding: 0em;
  }
  .quote.stripe.segment .grid .column {
	padding-top: 5em;
	padding-bottom: 5em;
  }
  
  .footer.segment {
	padding: 5em 0em;
  }
  
  .secondary.pointing.menu .toc.item {
	display: none;
  }
  .slick-prev, .slick-next {background:#666!important;}
  
  /*animation test*/
  .reveal, .reveal-2, .reveal-3 {
	  animation-name: text;
	  animation-delay: 1.8s;
	  animation-iteration-count: 1;
	  animation-duration: 800ms;
	  animation-fill-mode: both;
	  animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
	background:rgba(000, 000, 000, 0) ; padding:11px 10px 10px;
  }
  .reveal-2 { 
	  animation-delay: 2.2s;
  }
  
  .reveal-3 { 
	  animation-delay: 3.1s;
  }
  
  @keyframes text {
	  from {
		  clip-path: inset(0 100% 0 0);
	  }
	  to {
		  clip-path: inset(0 0 0 0);
	  }
  }
  
  .console-underscore {
	display:inline-block;
	position:relative;
	top:-0.14em;
	left:10px;
  }
  
  /* me  */
  .font-sourceserif, #contact-address a {font-family:'Source Serif Pro', serif;}
	#about-careerbene-list li {font-size:1.45em;}
  h1, .ui.header, a, .footer a, .footer p, .address-category {font-family: 'Source Sans Pro', sans-serif;/*font-family:'Droid Sans', sans-serif;*/}
  h1 {font-weight:100;}
  .ui.header {font-weight: bold!important; color:#333;}
	p, #about-careerbene-list li, #about-careerrec-list li, #about-careerrec-list2 li {font-family:'Source Serif Pro', serif; color:#666;}
	  p {font-size:1.35em; line-height:1.5em;}
	  .footer a, .footer p {font-size:1.15em; color: rgba(255, 255, 255, 0.9);}
	  .footer p {line-height:1.75em; letter-spacing:0.5px;}
	.ui.vertical.stripe h3, #work-awards h3 {font-size: 2em; margin-bottom:5px;}
	 a.ui.huge, .contact-send {color:#B02A30; font-weight:bold; font-size:1.275em;}
	  .contact-send {font-size:1.5em!important; background:none!important; margin: 0; padding:10px 0 10px 5px;}
	 .menu a {font-size:1em; color:#333;}
	 .menu a:hover, #contact-address a, #group-members .header a, .searchresults a {color:#B02A30!important;}
		#group-members .header a:hover {opacity:.85;}  
	 .ui.menu .active.item, .ui.menu .active.item:hover, .active {color:#B02A30!important; background:none;}
  #nav_logo, #footer_logo {height:50px; padding:10px 10px 0 0; position:relative;}
	#nav_logo {top:10px;}
	#footer_logo {top:1px; margin-left:-20px!important;}
	.footer p {padding-top:10px; color: rgba(255, 255, 255, 0.75);}
  .bg-lightgrey {background:#F8F8F8!important;}
  label {font-size:1.25em!important; padding-bottom:2px; padding-left:5px;}
  
  .ui.celled.grid > .column:not(.row), .ui.celled.grid > .row > .column {-webkit-box-shadow:none; box-shadow: none;}
  
  .padded-top {padding-top:100px!important;}
  .ui.secondary.inverted.pointing.menu, .ui.horizontal.segments, .ui.segments, .ui.horizontal.segments > .segment {
	border:none!important; box-shadow: none;
	background:none;}
	.ui.horizontal.segments {position:relative; top:-30px;}
  .ui.inverted.vertical.footer.segment {
	background-image: url('assets/images/bg_footer.png');
  }
  
  /* banner */
  #banner-home {background: url('assets/images/banners/home.gif') #000 no-repeat top right scroll; padding:1px 0;}
	#banner-home h1 {width:100%;}
  #about-contact {background: url('assets/images/banners/about-contact2.png') no-repeat center center scroll; padding:1px 0; 
	-webkit-background-size: cover!important;
	-moz-background-size: cover!important;
	-o-background-size: cover!important;
	background-size: cover!important;}
  #certsandawards {background: url('assets/images/banners/certsandawards.png') no-repeat center center scroll;}
  #work-oemclients {background: url('assets/images/banners/oemclients.png') no-repeat center center scroll;}
  #work-plants {background: url('assets/images/banners/work-plants.png') no-repeat center center scroll;}
  #about-careerbene {background: url('assets/images/banners/about-careerbene3.png') no-repeat top center scroll;}
  #about-careerdev {background: url('assets/images/banners/about-careerdev.png') no-repeat top center scroll;}
  #about-careerrec {background: url('assets/images/banners/about-careerrec.png') no-repeat top center scroll;}
  #about-vm-banner {background: url('assets/images/banners/about-vm.png') no-repeat bottom center fixed;}
	#about-vm-banner h1 {font-size:3em!important;}
	#about-keyvalues h4 {font-size: 1.5em; margin-bottom:10px;}
	#about-policyesh h4 {font-size: 1.5em; margin-bottom:0px; margin-top:-20px;}
	#about-vm h3, #about-keyvalues h3, .contact-address h3, .contact-address h5 {
	  display: table; padding-bottom:10px;
	  white-space: nowrap;}
	  #about-vm h3:after, #contact-address h5:after {
		border-top: 1px solid #CCC;
		content: '';
		display: table-cell;
		position: relative;
		right:-20px;
		top: 0.5em;
		width: 65%;
	  }
	 #about-keyvalues h3:before, #about-keyvalues h3:after, #contact-address h3:before, #contact-address h3:after {
		border-top: 1px solid #CCC;
		content: '';
		display: table-cell;
		position: relative;
		top: 0.75em;
		width: 50%;
	  }
#about-policyesh .column {padding-top:0em;}

  #about-history {background: url('assets/images/banners/about-history.png') no-repeat bottom right scroll;}
	  #about-history h1 {font-size:3em; line-height:1.55em;}
  #about-group {background: url('assets/images/banners/about-group.png') no-repeat bottom right scroll;}
  #services-lighting {background: url('assets/images/banners/services-lighting.png') #000 no-repeat center right scroll;}
	#services-lighting h1 {position:relative; top:50px; left:0px;}
  #services-electronics {background: url('assets/images/banners/services-electronics.png') no-repeat center center scroll;}
  #services-locks {background: url('assets/images/banners/services-locks.png') no-repeat center center scroll;}
  #services-tooling {background: url('assets/images/banners/services-tooling2.png') no-repeat center right scroll;}
  #about-policyesh-banner {background: url('assets/images/banners/about-policyesh.png');}
  #about-policyesh-banner, #banner-home, #about-history, #about-group, #services-lighting, #services-electronics, #services-locks, #services-tooling, #certsandawards, #work-oemclients, #work-plants, #about-careerbene, #about-careerdev, #about-careerrec, #about-vm-banner {
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
  }
  
  #contact-topform, #lighting-manucapa, #electronics-manucapa, #locks-manucapa, #tooling-manucapa, #homeblurb, #work-awards, #plant-facilities {background-image: url(assets/images/bg_effect.png);}
  #banner-null {background: url('assets/images/bg_effect.png') repeat-y center center scroll; -webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;} 
  #search-page {min-height:700px;}
  #searchbar {margin-top:20px;}
  #searchbar input {font-size:1.25em;}
  #searchbar a {position:relative; left:-35px; top:15px; color:#B02A30;}
  
  /* Menu */
  .ui.menu, .ui.item.menu, .ui.item.menu .item {border-radius: 0!important; font-weight:600;}
  .ui.secondary.pointing.menu {border:none; height:75px;}
  .ui.secondary.pointing.menu a {font-weight:600; letter-spacing:0.15px; padding:0 5px;}
	.ui.secondary.pointing.menu a:hover, .ui.secondary.pointing.menu .item:hover {color:#B02A30;}
  .ui.secondary.pointing.menu .item {padding:0 8px; position:relative; top:-30px; border:none;}
  .ui.secondary.pointing.menu .right .item {position:relative; top:0px;}
  .ui.secondary.pointing.menu .active.item {font-weight:600; border-bottom:none; font-size:1em;}
  .ui.menu .item:hover,.ui.menu a:hover {background:none!important;}
  
  .ui[class*="middle aligned"].grid > .row > .column {
	align-self: unset!important;}
  
  .ui.vertical.stripe {
	padding:3.25em 0em;
  }
  .ui.vertical.segment
  {border:none;}
  
  #floating-menu {height:70px;}
  .ui.menu .item:before {content:none!important;}
  .ui.divider {clear:both;}

  /* Footer */
  #copyright p {font-size:1em; text-align:left!important; letter-spacing:1px; 
	margin-top: -33px; color: rgba(255, 255, 255, 0.5)!important;}
  .footer h4 {margin:20px 0 0 20px!important;}
  .footer a {margin-left:20px;}
  
  /* Search */
  #search-page h3 {margin-bottom:20px;}
  .searchresults {padding:10px 0;}
  .searchresults a {font-size: 1.45em;}
  .searchresults p {font-size: 1.25em!important; margin-top:10px; }
  
  .ui.menu .item > i.dropdown.icon {
	  margin:0em;
  }
  /* home */
  #kick-start {margin:auto;}
  	#kick-start a:hover {color:#666;}
  .service-types {width:auto; margin:0 auto;}
  	.service-types a {width: 100%; font-size:1.25em; font-weight:bold; color:#B02A30; display:inline-block; text-align:center!important; margin:0px 30px;}
  #homeblurb {width: 100%; height:auto;}
  	#homeblurb img {margin-bottom:15px;}
  	#homeblurb h3 {font-size:2.5em; text-align:center; margin:auto; padding-bottom: 40px; width:90%;}
  #homeblurb2 {padding-bottom:100px; margin-top:-30px;} 
  	#homeblurb2 img {margin-top:30px;}
  
 /* work */
  #work-clients {padding:80px 0 60px;}
  #work-clients h3, #contact-address h3 {width:100%; display:inline-block; text-align:center!important;}
  #work-clients .coloronhover {height:auto; display: flex; justify-content: center;}
  #work-clients img {width:70%; height:auto; margin: 20px auto; vertical-align: middle!important;}
	#work-clients img, #work-certifications img, #work-conformance img {opacity:0.95}
	#work-clients img:hover, #work-certifications img:hover, #work-conformance img:hover {opacity:0.75;}
  .photo-caption, .rec-process {padding-bottom:40px;}
	.photo-caption img {width:100%; height:auto!important; padding-bottom:10px; margin-left:-5px;}
#plant-facilities {height:100%; padding-bottom:20px;}
#plant-facilities h3 {padding:60px 0 30px;}
#plant-facilities img, #about-careers-photos img {width:106%; height:auto; padding:0px; margin-top:-35px;}
  
/* about */
  #work-certifications img {height: 120px;}
  #work-conformance img {height:90px; max-width:180px;}
	.cert-move-right-tiny img {position:relative; right: 15px; height:100px;}
  
	#about-careers-photos {margin-top:100px;}
	
	#about-careerdev-nav, #about-careerbene-nav, #about-careerrec-nav {height: 100%; margin-top:30px; /*margin-top:-445px;*/}
	.ui.secondary.vertical.pointing.menu .item {font-size: 1.25em; line-height:1.95em; font-weight:600;}
	#about-careerdev-list li, #about-careerbene-list li, #about-careerrec-list li {padding:10px 0;}
	#about-careerdev-list h5, #about-careerrec-process h5, #about-careerrec-apply-button a, #about-careerrec-list li, #about-careerrec-list2 li {font-size:1.35em; position: relative;}
	  #about-careerdev-list h5 {top:-2px;} 
	  #about-careerrec-list li, #about-careerrec-list2 li {margin-top:10px; width:90%;}
	  #about-careerrec-process h5 {left:-5px;}
	  #rec-process-div {padding-top:25px;}
	  #about-careerrec-apply-button a {padding-left:15px;}
	  #about-careerrec-apply-button {float:right;}
	  #about-careerrec-process h5 {text-transform: uppercase; text-align:left;}
	#career-rec-step3 li {line-height:1.75em;}
  #about-careerdev-list p {margin-top:-10px;}
  #about-keyvalues img {margin-bottom:-40px;}
  .rec-process p {width:220px;margin: 0 30px 0 -15px;} 
  .rec-process img {width:90px;}
  .rec-process p {display:inline-block; text-align:center!important;}
  
  #group-members {margin-top:-15px;}
  #group-members h3 {display:block; width: 100%; padding-bottom:10px; border-bottom:1px solid #C5C5C5; margin-bottom:20px;}
  #group-members .header {font-size:1.25em; letter-spacing:0.25px; padding-bottom:2px; margin-top:35px;}
  #group-members p {font-size:1.3em;}
	.group-div-float {float:left; width: 20%; display:block; height:100%;}
	.j-group {width:70%; height: auto; margin-top:25px;}
	.j-group:hover {opacity:0.825;}
	#group-members-sub {margin-top:-35px;}
  
  #about-vm img {width:35px; position:relative; top:-5px;}
  
  #history-title {width: 90%; margin:40px auto;}
	#history-title h3, #history-title p {text-align:center;}
  
	#product-slider {height:auto;}
	.prod-slider img {margin:20px auto;}
  /*
  .awards-slider img {height:270px; width:auto;}
  .awards-slider {
	width: 90%;
	margin: 50px auto 10px;
  }
  .slick-prev, .slick-next {width:100px;}
  .slick-prev:before,
  .slick-next:before {
  color: #333!important;
  }
  .slick-slide {
  transition: all ease-in-out .3s;
  opacity: .95;
  }
  .slick-active {opacity: .95;}
  .slick-current {opacity: 1;}
  */
#work-awards {height:640px;}
  #work-awards h3, #product-slider h3 {padding-top:60px;}
  #work-awards h3, #work-awards p, #product-slider h3, #product-slider p {text-align: center;}
  
  /*carousell test  */
  #container{
	  margin: 10px auto;
	  width: 210px;
	  position: relative;
	  perspective: 1000px;
  }
  #carousel{
	  width: 100%;
	  height: 100%;
	  position: absolute;
	  transform-style: preserve-3d;
	  animation: rotation 20s infinite linear;
  }
  #carousel:hover{
	  animation-play-state: paused;
  }
  #carousel img {height:250px; position:relative; top:20px;}
  #carousel figure{
	  display: block;
	  position: absolute;
	  width: 186px;
	  height: 650px;
	  left: -40px;
	  top: 0px;
	  background: none;
	  overflow: hidden;
	  border: none;
  }
  #carousel figure:nth-child(1){transform: rotateY(0deg) translateZ(288px);}
  #carousel figure:nth-child(2) { transform: rotateY(40deg) translateZ(288px);}
  #carousel figure:nth-child(3) { transform: rotateY(80deg) translateZ(288px);}
  #carousel figure:nth-child(4) { transform: rotateY(120deg) translateZ(288px);}
  #carousel figure:nth-child(5) { transform: rotateY(160deg) translateZ(288px);}
  #carousel figure:nth-child(6) { transform: rotateY(200deg) translateZ(288px);}
  #carousel figure:nth-child(7) { transform: rotateY(240deg) translateZ(288px);}
  #carousel figure:nth-child(8) { transform: rotateY(280deg) translateZ(288px);}
  #carousel figure:nth-child(9) { transform: rotateY(320deg) translateZ(288px);}
  
  #carousel img{
	  -webkit-filter: grayscale(0.95);
	  cursor: pointer;
	  transition: all .5s ease;
  }
  #carousel img:hover{
	  -webkit-filter: grayscale(0);
	transform: scale(1.2,1.2);
  }
  
  @keyframes rotation{
	  from{
		  transform: rotateY(0deg);
	  }
	  to{
		  transform: rotateY(360deg);
	  }
  }
  
  /* timeline */
  .timeline {
	position: relative;
	margin: -50px auto 0;
	width: 100%;
	padding-bottom:80px;
  }
  .timeline img {width:85%; margin-left:30px;}
  .timeline p {clear:both;}
  .timeline ul li {
	margin-bottom: 10px;
	list-style-type: none;
	display: flex;
	flex-direction: row;
	align-items: top;
  }
  
  .point {
	min-width: 20px;
	height: 20px;
	background-color: #B02A30;
	border-radius: 100%;
	z-index: 2;
	border: 3px #333333 solid;
	position: relative;
	left: 1px;
  }
  
  .timeline ul li .content {
	width: 50%;
	padding: 0 30px 0 0;
  }
  
  .timeline ul li:nth-child(odd) .content {
	padding-left: 5%;
  }
  
  .timeline ul li:nth-child(even) .content {
	padding-right: 5%;
  }
  
  .point:nth-child(even) {
	position:relative; left:-10px;}

	.point.odd {position:relative; left:-28px;}
  
  .timeline ul li .content h3 {
	padding: 0 30px 3px;
	margin-bottom: 0;
	text-align: left;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
  }
  
  .timeline ul li .content p {
	padding: 0 30px;
	margin-top: 0;
	text-align: left;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
  }
  
  .timeline ul li:nth-child(even) {
	flex-direction: row-reverse;
  }
  
  .timeline ul li:nth-child(odd) h3, .timeline ul li:nth-child(odd) p {
	text-align: right;
  }
  
  .timeline::before {
	content: "";
	position: absolute;
	height: 140%;
	width: 3px;
	left: 50%;
	background-color: #333333;
  }
  
  /* contact */
  #contact-address h3 {margin: 20px auto 50px;}
  #contact-address h5 {font-size:1.4em; margin-top:20px; margin-bottom:5px;}
  #contact-address a {font-size:0.85em; color:#333!important;}
  #contact-address a:hover {color:#B02A30!important;}
  .address-category {font-size:1.15em!important;}
  #contact-address .row {padding-bottom: 30px;}
  #contact-address img {width:400px;}
  #contact-topform p {margin-bottom:20px;}

  .wpforms-form {
    padding: 20px 15px !important;}
	.wpforms-form input {
		margin: 0em 0em 1.25em!important;
		outline: none!important;
		-webkit-appearance: none!important;
		tap-highlight-color: rgba(255, 255, 255, 0)!important;
		line-height: 1.21428571em!important;
		padding: 0.67857143em 1em!important;
		font-size: 1em!important;
		background: #FFFFFF!important;
		border: 1px solid rgba(34, 36, 38, 0.15)!important;
		color: rgba(0, 0, 0, 0.87)!important;
		border-radius: 0.28571429rem!important;
		-webkit-box-shadow: 0em 0em 0em 0em transparent inset!important;
		box-shadow: 0em 0em 0em 0em transparent inset!important;
		-webkit-transition: color 0.1s ease, border-color 0.1s ease!important;
		transition: color 0.1s ease, border-color 0.1s ease!important;
		width: 100%!important;
		vertical-align: top!important;
		overflow: visible!important;
		}
	.wpforms-form textarea {
		height: 12em!important;
		min-height: 8em!important;
		max-height: 24em!important;
		width: 100%!important;
		vertical-align: top!important;
		margin: 0em!important;
		-webkit-appearance: none!important;
		tap-highlight-color: rgba(255, 255, 255, 0)!important;
		padding: 0.78571429em 1em!important;
		background: #FFFFFF!important;
		border: 1px solid rgba(34, 36, 38, 0.15)!important;
		outline: none!important;
		color: rgba(0, 0, 0, 0.87)!important;
		border-radius: 0.28571429rem!important;
		-webkit-box-shadow: 0em 0em 0em 0em transparent inset!important;
		box-shadow: 0em 0em 0em 0em transparent inset!important;
		-webkit-transition: color 0.1s ease, border-color 0.1s ease!important;
		transition: color 0.1s ease, border-color 0.1s ease!important;
		font-size: 1em!important;
		line-height: 1.2857!important;
		resize: vertical!important;
	}	
	.wpforms-form label { 
		display: block!important;
		margin: 0em 0em 0.3em 0em!important;
		color: rgba(0, 0, 0, 0.87)!important;
		font-weight: bold!important;
		text-transform: none!important;
		font-size: 1.25em!important;
   	 	padding-bottom: 2px!important;
    	padding-left: 5px!important;
	}
	
  #wpforms-submit-72, #wpforms-submit-97, #wpforms-submit-122, #wpforms-submit-164, #wpforms-submit-167, #wpforms-submit-169, #wpforms-submit-158, #wpforms-submit-161 {color:#B02A30!important; font-weight:bold!important; font-size:1.5em!important; background:none!important; margin: 0; padding:10px 0 10px 5px!important; border:none!important;}
  #wpforms-submit-72:hover, #wpforms-submit-97:hover, #wpforms-submit-122:hover, #wpforms-submit-164:hover, #wpforms-submit-167:hover, #wpforms-submit-169:hover, #wpforms-submit-158:hover, #wpforms-submit-161:hover {cursor:pointer!important;}

  /* services - electronics */
  #lighting-manucapa, #locks-manucapa, #electronics-manucapa, #tooling-manucapa {height:auto; padding:70px 0; margin:0 auto;}
  #lighting-manucapa h3, #locks-manucapa h3, #electronics-manucapa h3, #tooling-manucapa h3, #plant-facilities h3 {text-align:center; margin-bottom: 30px; display:inline-block; width:100%;}
  #lighting-main img, #locks-main img {margin-top:40px;}
  	#locks-main img {width:80%;}
	  #tooling-main img {margin-top:-15px; height:90%;}
  #lighting-main p, #locks-main p, #electronics-main p, #tooling-main p {margin-bottom:60px;}
  #lighting-main h3, #electronics-main h3, #tooling-main h3 {margin-top: 20px;}

  #electronics-manucapa, #locks-manucapa, #tooling-manucapa {padding-top:70px; display:block;}
	#electronics-manucapa img {height:300px;}
	#electronics-manucapa p {width:98%;}
  
  /* Steps timeline*/
  .step-title {
  display: block;
  text-align: center;
  }
  
  .step-title{
  font-size: 1.25em;
  font-weight: 200;
  margin-bottom: 10px;
  position:relative; top:-1px;
  }
  
  .steps-timeline .step {
  margin-bottom: 20px;
  }
  
  .step-milestone{
  display: block;
  width: 40px;
  height: 40px;
  background-color: #fff;
  border: 8px solid #B02A30;
  border-radius: 50%;
  margin: 15px auto;
  }
  
  @media only screen and (max-width: 800px) {
	.ui.fixed.menu {
	  display: none!important;
	}
	.secondary.pointing.menu .item,
	.secondary.pointing.menu .menu {
	  display: none!important;
	}

	.secondary.pointing.menu .toc.item {
	  display: block!important;
	  z-index:999;
	  background:white!important;
	}
	.masthead.segment {
	  min-height: 260px;
	}
	.masthead h1.ui.header {
	  font-size: 2em!important;
	  /*margin-top: 2.5em;*/
	}
	#about-vm-banner h1 {font-size: 1.4em!important;}
	.masthead h2 {
	  margin-top: 0.5em;
	  font-size: 1.5em;
	}
	 /*steps*/
	.steps-timeline {
	  border-left: 2px solid #333;
	  margin-left: 25px;
	}
	
	.steps-timeline  .step {
	  margin-left: -25px;
	  display: block;
	  overflow: auto;
	}
	
	.step-milestone {
	  float: left;
	  margin-left: 10px;
	}
	
	.step-title,.step-description {
	  text-align: left;
	  margin-left: 60px;
	}

	/* Footer */
	#copyright p {font-size:0.85em; letter-spacing:1px; 
		margin-top: 0px;}
	#footer_logo, .footer h4, .footer a {margin-left:0!important;}
	#footer_logo {margin-top:-30px!important;}
	.footer a, .footer h4 {font-size:0.9em!important;} 
	.footer h4 {margin-top:-35px!important;}

	/* banners */
	#about-contact h3, #about-history h1 {font-size: 1.75em!important;}
	#contact-topform p {margin-bottom:5px;}

	/* history timeline */
	.timeline ul li:nth-child(odd) .content {padding-left:0%;}
	.timeline ul li:nth-child(even) .content {padding-right:0%; padding-left:0%;}
	.timeline ul li .content p {padding:0 8px;}
	.timeline ul li .content h3 {padding:0 8px 3px;}
	.timeline img {margin-left:10px;}
	#history-title {margin:0px auto 40px;}
	
	/* global footpring */
	#group-members {margin-top:15px;}
	/*#group-members .header {margin-top:0px;}*/
	#group-members p {padding-bottom:20px;}

	/* Careers */
	#about-careerbene-nav, #about-careerdev-nav, #about-careerrec-nav {width:100%; border:none!important;}
		#about-careerbene-nav a, #about-careerdev-nav a, #about-careerrec-nav a {
			font-size:1em;
			display:block!important; float:left; padding:0 10px;}
			#about-careerbene-nav .active.item, #about-careerdev-nav .active.item, #about-careerrec-nav .active.item {border:none!important;}
		#about-careerbene-list h3, #about-careerdev-list h3, #about-careerrec-process h3 {font-size:1.5em; margin-top:-35px;}	
		#about-careerdev-list h5, #about-careerrec-process h5 {font-size:1.125em;}
		#about-careerbene-list li, #about-careerdev-list li {font-size:1em;}
  }
  
  @media screen and (min-width: 678px) {
  
	.steps-timeline {
	  border-top: 2px solid #333;
	  margin-top: 50px;
	  margin-left: 10%;
	  margin-right: 10%;
	  display: -moz-box;
	  display: -ms-flexbox;
	  display: -moz-flex;
	  display: -webkit-flex;
	  display: flex;
	  justify-content: space-between;
	  width: 100%;
	}
	
	.steps-timeline .step {
	  margin-top: -30px;
	  -webkit-flex: 1;  /* Safari 6.1+ */
	  -ms-flex: 1;  /* IE 10 */    
	  flex: 1;
	}
  }
	/* X-Small devices (portrait phones, less than 576px) */
	@media (max-width: 575.98px) { 
		p, #career-rec-step3 li {font-size:1em!important;}
		h2, h3 {font-size:1.25em!important;}
		.ui.secondary.pointing.menu {height:55px;}
		.ui.secondary.pointing.menu .item {top:-17px}
		#nav_logo {height:40px; top:5px;}
		  
		/*home*/
		.service-types {left:0px!important;}
		#banner-home {background-size:contain!important; image-orientation: 0deg!important;}
		#banner-home h1 {font-size: 1.5em!important; top:100px;}
		#about-contact h1 {top:20px; left:0px;}	

		/*services*/

		.steps-timeline {
			margin: 10px auto 40px;
			border-left: 1px solid #333;
		  }
		  
		  .steps-timeline .step {
			margin-top: 30px; 
		  }

		  .step-milestone {
			margin-left:16px;  
			height:10px; width:10px;}

		 .step-title {
			 margin:15px 0 0 45px;}

		/* about */
		.photo-caption, .rec-process {padding-bottom:20px;}
		#rec-process-div {min-width:150px;}
		.rec-process p {width:auto;}
		.rec-process img {margin: 0px auto -8px;}
		.ui.divider {position:relative; top:-18px;}
		#about-careerrec-apply-button {float:none;}

	 }

	/* Small devices (landscape phones, less than 768px)*/
	@media (max-width: 767.98px) { 
		p {font-size:1em!important;}
		h1 {font-size:2em!important; margin-left:0px!important;}
		h2, h3 {font: size 1.2em!important;}

		/* services */
		.prod-slider img {width: 93%!important; margin: 0 auto;}
		#lighting-manucapa {padding:50px 0;}

		#work-certifications img {height:80px;}
		#work-conformance img {height:60px;}



	}

	/* Medium devices (tablets, less than 992px)*/
	@media (max-width: 991.98px) { 
		p {font-size:1em!important;}
		h1 {font-size:2.75em!important; margin-left:2.5%!important;}
	}

	/* Large devices (desktops, less than 1200px)
	@media (max-width: 1199.98px) { 

	 }

	/* X-Large devices (large desktops, less than 1400px)
	@media (max-width: 1399.98px) { 
		
	 }

	/* XX-Large devices (larger desktops)
	 No media query since the xxl breakpoint has no upper bound on its width*/