@charset "UTF-8";

html, body { width: 100%; height: 100%;}
body { background:url(../imgs/white_carbon.gif) repeat; font-family: 'Titillium Web', sans-serif;  font-weight:400;  font-style:normal; font-size: 1em; line-height: 1.328571429; }
* {	margin:0;	padding:0;}
.animate-motion { -moz-transition: all .3s ease-in-out; -o-transition:all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; -ms-transition:all .3s ease-in-out; }
div,p,span,input,form,button,select,textarea,h1,h2,h3,h4,h5,h6,ul { display:block; }
input,select,textarea,button { outline:none; }
input,select,a img,button { border:0; }
textarea { resize: none; }
ul li {	list-style:none; padding-left:0; margin-left:0; }
p { margin-top: 0; }
.container { width:100%; }
section { width: 100%;}
article {}
div[id*=] {}
a[data-info~=""] {}

/*<input type="text" value="xxx" onblur="if(this.value=='')this.value='xxx';" onfocus="if(this.value=='xxx')this.value='';" id="" >
*/

	
/*****************************************************************
	shared
********************************/
#products, #aboutus, #career, #contactus { padding:2.5em 0;}
.title-box { text-align: center;  padding: 0 0 1.8em; }
.title-icon {  color: #8dc63f; font-size: 2.2em; padding-bottom: .2em;}
h2 { font-weight: 200; text-transform: uppercase; font-size: 3em; padding: 0; color: #2f5464; line-height: 1;}
.white-text { color:white;}
.animated { -webkit-animation-duration: 1s;  animation-duration: 1s;  -webkit-animation-fill-mode: both;  animation-fill-mode: both;}
.animated.infinite {  -webkit-animation-iteration-count: infinite;  animation-iteration-count: infinite;}
a[data-info~="content-link"] { padding:0 1px; color: #8dc63f; text-decoration: underline;}
a[data-info~="content-link"]:hover { background: #8dc63f; color:white; text-decoration: none;}
#to_the_top { display: none; position: fixed; cursor: pointer; width: 60px; height: 60px; bottom: 1em; right: 1em;  background: rgba(52, 82, 113, 0.75); color: white; text-align: center; line-height: 1.5; z-index:6; }
#to_the_top:hover {background: rgba(52, 82, 113, 1); }
.dp-none { display:none;}

/*****************************************************************
	nav
********************************/ 
.fixed-header {
  position: fixed;
  width: 100%;
  margin: 0;
  z-index: 9;
  -webkit-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}
.nav-box {  position: relative;
  height: 72px;}

.hasBg {
  background: rgba(52, 82, 113, 0.8);
}
#trigger-overlay { color:white; text-decoration:none;}

.nav-toggle {
	color:white;
 position: absolute;
  top: 8px;
  right: 26px;
  z-index: 999999;
  padding: 18px 0 12px 0;
  cursor: pointer;
  width:90px;}

.nav-toggle:hover, .nav-toggle.active {}
.nav-toggle:focus {
    outline: none;
}
.nav-toggle span { top: 26px;}

.nav-toggle span, .nav-toggle span:before, .nav-toggle span:after {
    content: '';
    position: absolute;
    display: block;
    width: 35px;
    height: 5px;
    border-radius: 1px;
    background: white;
    cursor: pointer;
	right:0;
}
.nav-toggle span:before {
    top: -10px
}
.nav-toggle span:after {
    bottom: -10px
}
.nav-toggle span, .nav-toggle span:before, .nav-toggle span:after {
    -webkit-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}
.nav-toggle.active span {
    background-color: transparent
}
.nav-toggle.active span:before, .nav-toggle.active span:after {
    top: 0
}
.nav-toggle.active span:before {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.nav-toggle.active span:after {
    top: 10px;
    -webkit-transform: translateY(-10px) rotate(-45deg);
    -ms-transform: translateY(-10px) rotate(-45deg);
    transform: translateY(-10px) rotate(-45deg);
}
.navicon {
    position: relative;
    height: 26px;
}
.navicon p {
    margin: 1px 50px 0 0
}
.navicon-fixed {
    position: fixed;
    top: 59px;
    right: 143px;
}

/* overlay */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(52, 82, 113, 0.95);
}

/* Menu style */
.overlay nav {
    position: relative;
    top: 50%;
    height:100%;
    text-align: center;
	  margin-top: 80px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.overlay ul {
    position: relative;
    display: inline-block;
    margin: 0 auto .8em;
    padding: 0;
    list-style: none;
	  text-align: center;
}
.overlay ul li {
	display:inline-block;
    /*display: block;
    float: left;*/
    margin-right: 10px;
	  width: 150px;
}
.overlay ul li:last-child {
    /*margin-right: 0px*/
}
.overlay ul li i {
    display: block;
    margin-bottom: 5px;
    font-size: 50px;
}
.overlay ul li a {
    display: block;
    padding: 30px 0;
    border: 2px solid #fff;
    background-color: #345271;
    color: #fff;
    text-transform: uppercase;
    font-size: 1.2em;
    -webkit-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}
.overlay ul li a:hover, .overlay ul li a:focus {
    color: #8DC63F;
	text-decoration:none;
	border-color:white;
	background:white;
}

/* Effects */
.overlayer {
    visibility: hidden;
    opacity: 0;
    -webkit-transition: opacity 0.5s, visibility 0s 0.5s;
    transition: opacity 0.5s, visibility 0s 0.5s;
}
.overlayer.open {
    visibility: visible;
    opacity: 1;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
	z-index:8;
}
.overlayer nav ul li {
    opacity: 0;
    -webkit-transform: translate3d(0, -80px, 0);
    transform: translate3d(0, -80px, 0);
    -webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
    transition: transform 0.5s, opacity 0.5s;
}
.overlayer.open nav ul:first-child li:first-child {
    -webkit-transition-delay: 0.05s;
    transition-delay: 0.05s;
}
.overlayer.open nav ul:first-child li:nth-child(2) {
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
}
.overlayer.open nav ul:nth-child(2) li:first-child {
    -webkit-transition-delay: 0.15s;
    transition-delay: 0.15s;
}
.overlayer.open nav ul:nth-child(2) li:nth-child(2) {
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
}
.overlayer.open nav ul:last-child li:first-child {
    -webkit-transition-delay: 0.05s;
    transition-delay: 0.25s;
}
.overlayer.open nav ul:last-child li:nth-child(2) {
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.3s;
}

.overlayer.open nav ul li {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

/*****************************************************************
	header
********************************/
header { height:100%;}
.logo { margin: 1.5em auto 1.5em; }
.header-wrap { position: relative; height: 100%; background:#295e76 url(../imgs/header.jpg) fixed center center; -webkit-background-size: cover; background-size: cover; color: #fff;}
.header-content { display: -webkit-box; display: -moz-box;	display: -ms-flexbox; display: -webkit-flex;	display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center;	-webkit-align-items: center;	align-items: center;	-webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center;	justify-content: center;	margin: 0; height: 80%;	 width: 100%; text-align:center; }
.header-tagline { -webkit-animation-delay: .7s; animation-delay: .7s; color:white; font-weight: 700;font-size: 4.8em; padding-top:.5em;}

.user-panel {  text-align: right;  padding: 1em 0 0;}
.user-panel > a { color:#8dc63f;   padding: 8px;   text-transform: uppercase;}
.user-panel > a:hover { text-decoration:none; color:white;}
.user-panel > a > i {  padding-right: 7px;  font-size: 1.4em;  position: relative;  top: 2px;}

/* floating down arrow */
.down-arrow {  position: absolute;  bottom: 2em;  left: 0;  right: 0;}
@-webkit-keyframes fadeInDown {
  0% { opacity: 0; -webkit-transform: translate3d(0, -60%, 0); transform: translate3d(0, -60%, 0); }
  100% { opacity: 1; -webkit-transform: none; transform: none; }
}
@keyframes fadeInDown {
  0% { opacity: 0; -webkit-transform: translate3d(0, -60%, 0); transform: translate3d(0, -60%, 0); }
  100% { opacity: 1; -webkit-transform: none; transform: none; }
}
.fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; }



/*.floating {	-webkit-animation-name: Floatingx;	-webkit-animation-duration: 1.5s;	-webkit-animation-iteration-count: infinite;	-webkit-animation-timing-function: ease-in-out;	-moz-animation-name: Floating;	-moz-animation-duration: 1.5s;	-moz-animation-iteration-count: infinite; -moz-animation-timing-function: ease-in-out
}
@-webkit-keyframes Floatingx {
	from { -webkit-transform: translate(0, 0) }
	65% { -webkit-transform: translate(0, 15px) }
	to { -webkit-transform: translate(0, 0) }
}
@-moz-keyframes Floating {
	from { -moz-transform: translate(0, 0) }
	65% { -moz-transform: translate(0, 15px) }
	to { -moz-transform: translate(0, 0) }
}
.continue-btn { font-size:110px; color: #fff; -moz-transition: all 150ms ease-in-out; -o-transition: all 150ms ease-in-out; -webkit-transition: all 150ms ease-in-out;	transition: all 150ms ease-in-out; }
.continue-btn:hover,.continue-btn:focus,.continue-btn:active {color: #fff;}
*/

/* logo and tagline*/
@-webkit-keyframes fadeInUp {
  0% { opacity: 0; -webkit-transform: translate3d(0, 20%, 0);  transform: translate3d(0, 20%, 0); }
  100% {  opacity: 1;  -webkit-transform: none;  transform: none;  }
}
@keyframes fadeInUp {
  0% {  opacity: 0; -webkit-transform: translate3d(0, 20%, 0);  transform: translate3d(0, 20%, 0); }
  100% { opacity: 1; -webkit-transform: none;  transform: none;  }
}
.fadeInUp {  -webkit-animation-name: fadeInUp; animation-name: fadeInUp; }


/*****************************************************************
	about us
********************************/
#aboutus { background: #111138 url(../imgs/background-about-us.jpg) fixed center center; background-size:cover; } 
.about-title {  font-size: 1.4em; font-weight: 400; padding-bottom: 0.2em;}
.about-content {}
.about-box { padding: 1.5em 3em;}
.about-text { color: white; overflow: hidden; font-size: 1.1em; line-height: 1.6;}
.about-box .introduction-img, .about-box .philosophy-img {}
.introduction-box { padding-top:0;}
.introduction-img { float:left; margin-right: 1.5em;}
.philosophy-box {}
.philosophy-img { float:right; margin-left: 1.5em;}

@-webkit-keyframes fadeInLeft {
  0% { opacity: 0; -webkit-transform: translate3d(-20%, 0, 0); transform: translate3d(-20%, 0, 0); }
  100% { opacity: 1;  -webkit-transform: none; transform: none; }
}
@keyframes fadeInLeft {
  0% { opacity: 0; -webkit-transform: translate3d(-20%, 0, 0); transform: translate3d(-20%, 0, 0); }
  100% { opacity: 1; -webkit-transform: none;transform: none; }
}
.fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; }


@-webkit-keyframes fadeInRight {
  0% { opacity: 0;  -webkit-transform: translate3d(20%, 0, 0); transform: translate3d(20%, 0, 0); }
  100% { opacity: 1; -webkit-transform: none; transform: none; }
}
@keyframes fadeInRight {
  0% { opacity: 0; -webkit-transform: translate3d(20%, 0, 0); transform: translate3d(20%, 0, 0); }
  100% {  opacity: 1;  -webkit-transform: none; transform: none; }
}
.fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; }


/*****************************************************************
	products
********************************/
[class*=element-item] {   width: 24%; margin: .5%;}
[class*=element-item] img {display: block; width: 100%; height: auto;}
.products-button { text-align: center; padding: 0 2em 1.6em;}
.products-button > button { border:1px solid transparent; display: inline-block; background-color: #8dc63f; padding: .4em 1.3em; -webkit-border-radius: 4px 4px 4px 4px; border-radius: 4px 4px 4px 4px; color: white; margin: 0.3em 0.1em; font-weight: 700;}
.products-button > button:hover { background:#d2e9b3; }
.button.is-checked, .button.is-checked:hover, .products-button > button:active { background: white; border: 1px solid #8dc63f; color: #8dc63f;}
.product-listing {width: 96%; margin: 0 auto;}
.product-listing > div {  }

.trigger { width: 93%; margin:0 auto 2em; display:none; }

div.fancy-select {
	position: relative;
	color: #46565D;
}

div.fancy-select.disabled {
	opacity: 0.5;
}

div.fancy-select select:focus + div.trigger {

}

div.fancy-select select:focus + div.trigger.open {
	box-shadow: none;
}

div.fancy-select div.trigger {
	cursor: pointer;
	padding: 0.5em 1.2em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	position: relative;
	background: #8DC652;
	color: white;
  font-size: 1.2em;
  font-weight: 400;
  
	transition: all 240ms ease-out;
	-webkit-transition: all 240ms ease-out;
	-moz-transition: all 240ms ease-out;
	-ms-transition: all 240ms ease-out;
	-o-transition: all 240ms ease-out;
}

div.fancy-select div.trigger:after {
  content: "\e632";
  display: block;
  position: absolute;
  width: 50px;
  top: -2px;
  right: 8px;
  font-family: 'Pe-icon-7-stroke';  font-size: 2em;  font-weight: 400;
}

div.fancy-select div.trigger.open { background: #6ca531; }

div.fancy-select div.trigger.open:after {  }

div.fancy-select ul.options {
	list-style: none;
	margin: 0;
	position: absolute;
	top: 40px;
	left: 50%;
	margin-left: -47%;
	visibility: hidden;
	opacity: 0;
	z-index: 50;
	max-height: 200px;
	overflow: auto;
	background: #4f7282;
	width: 94%;
	padding: 6px 0;
	color: white;

	transition: opacity 300ms ease-out, top 300ms ease-out, visibility 300ms ease-out;
	-webkit-transition: opacity 300ms ease-out, top 300ms ease-out, visibility 300ms ease-out;
	-moz-transition: opacity 300ms ease-out, top 300ms ease-out, visibility 300ms ease-out;
	-ms-transition: opacity 300ms ease-out, top 300ms ease-out, visibility 300ms ease-out;
	-o-transition: opacity 300ms ease-out, top 300ms ease-out, visibility 300ms ease-out;
}

div.fancy-select ul.options.open {
	visibility: visible;
	top: 50px;
	opacity: 1;

	/* have to use a non-visibility transition to prevent this iOS issue (bug?): */
	/*http://stackoverflow.com/questions/10736478/css-animation-visibility-visible-works-on-chrome-and-safari-but-not-on-ios*/
	transition: opacity 300ms ease-out, top 300ms ease-out;
	-webkit-transition: opacity 300ms ease-out, top 300ms ease-out;
	-moz-transition: opacity 300ms ease-out, top 300ms ease-out;
	-ms-transition: opacity 300ms ease-out, top 300ms ease-out;
	-o-transition: opacity 300ms ease-out, top 300ms ease-out;
}

div.fancy-select ul.options.overflowing {
	bottom: auto;
	top: 50px;

	transition: opacity 300ms ease-out, bottom 300ms ease-out, visibility 300ms ease-out;
	-webkit-transition: opacity 300ms ease-out, bottom 300ms ease-out, visibility 300ms ease-out;
	-moz-transition: opacity 300ms ease-out, bottom 300ms ease-out, visibility 300ms ease-out;
	-ms-transition: opacity 300ms ease-out, bottom 300ms ease-out, visibility 300ms ease-out;
	-o-transition: opacity 300ms ease-out, bottom 300ms ease-out, visibility 300ms ease-out;
}

div.fancy-select ul.options.overflowing.open {
	bottom: auto;
	top: 50px;
	transition: opacity 300ms ease-out, bottom 300ms ease-out;
	-webkit-transition: opacity 300ms ease-out, bottom 300ms ease-out;
	-moz-transition: opacity 300ms ease-out, bottom 300ms ease-out;
	-ms-transition: opacity 300ms ease-out, bottom 300ms ease-out;
	-o-transition: opacity 300ms ease-out, bottom 300ms ease-out;
}

div.fancy-select ul.options li {
	padding: 6px 12px;
	cursor: pointer;
	white-space: nowrap;

	transition: all 150ms ease-out;
	-webkit-transition: all 150ms ease-out;
	-moz-transition: all 150ms ease-out;
	-ms-transition: all 150ms ease-out;
	-o-transition: all 150ms ease-out;
}

div.fancy-select ul.options li.hover {
	color: #fff;
}

/*****************************************************************
	career
********************************/
#career { background:url(../imgs/background-career.jpg) no-repeat center center; background-size:cover; height:598px; }
.career-intro { width: 35%; position: relative; left: 4.5em; line-height: 1.5; color: #2f5464; font-size: 1.1em; margin-bottom:3em; }
.career-intro::before, .career-intro::after { content: ""; position: absolute; }
.career-intro::before { background:url(../imgs/quote-before.png) no-repeat 0 0; width: 40px;  height: 27px;  padding-right: 46px;  left: -42px;  top: -10px; }
.career-intro::after { background:url(../imgs/quote-after.png) no-repeat 0 0; width: 40px;  height: 30px;  bottom: -15px;  margin-left: 0.2em; }

/*****************************************************************
	contact us
********************************/
#contactus { background:#5e7590; color:white;}
.contact-content {}
.map-box, .form-box { width:46%;}
.map-box { float:left;}
.form-box { float:right; }
.embedmap { width:100%; height:220px; }
.address { padding-bottom: 2em; }
.address-text { line-height:1.4;}
.address-text span {  display: inline; font-size: 0.7em; padding-left: 5px; }
.address-text.last-line { margin-bottom:1.2em;}

.input-field {display: block; clear: both; margin-bottom:1em;}
.input-field > input, .input-field > select, .input-field > textarea { width: 75%; color:#999; border:0; outline:none;}
.input-field > label > span { padding-left:3px; color:red; display:inline;}
.input-field > label {float: left; width: 25%; font-weight:400; position: relative; top: 9px;}
.input-field > input { padding: 0.4em .6em; border: 1px solid transparent; }
.input-field > input:hover, .input-field > textarea:hover, .input-field > input:focus, .input-field > textarea:focus { -webkit-box-shadow: 0 0 10px 2px rgba(164,225,81,.6);
box-shadow: 0 0 10px 2px rgba(164,225,81,.6); border-color:#c1f876; color:#333;}
.input-field > select { }
.input-field > textarea { height:100px; border: 1px solid transparent; padding: 0.4em; }
.submit-button { -webkit-border-radius: 30px 30px 30px 30px; border-radius: 30px 30px 30px 30px; background: #8dc63f; float:right; width:60px; height:60px; padding: 0.4em; display: block;}
.submit-button i { font-size: 2.7em; line-height: 1.1; position: relative; top: 1px; left: -2px;}

/*****************************************************************
	footer
********************************/
footer { overflow: visible !important;  background: -webkit-linear-gradient(45deg, #8dc63f 0%, #4f7282 100%);  background: -moz-linear-gradient(45deg, #8dc63f 0%, #4f7282 100%);  background: -ms-linear-gradient(45deg, #8dc63f 0%, #4f7282 100%);  background: -o-linear-gradient(45deg, #8dc63f 0%, #4f7282 100%); background: linear-gradient(45deg, #8dc63f 0%, #4f7282 100%); padding: 1.5em 0; color: white; }
footer small span { display: inline; padding-left:5px; }
  
/*****************************************************************
	web font
********************************/
@font-face {
	font-family: 'Pe-icon-7-stroke';
	src:url('Pe-icon-7-stroke.eot?d7yf1v');
	src:url('Pe-icon-7-stroke.eot?#iefixd7yf1v') format('embedded-opentype'),
		url('Pe-icon-7-stroke.woff?d7yf1v') format('woff'),
		url('Pe-icon-7-stroke.ttf?d7yf1v') format('truetype'),
		url('Pe-icon-7-stroke.svg?d7yf1v#Pe-icon-7-stroke') format('svg'); font-weight: normal;font-style: normal; }
		
[class^="pe-7s-"], [class*=" pe-7s-"] {
	display: inline-block;font-family: 'Pe-icon-7-stroke';speak: none;font-style: normal;font-weight: normal;font-variant: normal;text-transform: none;line-height: 1;
	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; }

.pe-7s-users:before {content: "\e693";}
.pe-7s-id:before {content: "\e68f";}
.pe-7s-angle-down:before {content: "\e688";}
.pe-7s-box2:before {content: "\e673";}
.pe-7s-look:before {content: "\e63e";}
.pe-7s-portfolio:before {content: "\e622";}
.pe-7s-call:before {content: "\e670";}
.pe-7s-paper-plane:before {content: "\e629";}
.pe-7s-angle-up:before { content: "\e682"; }
.pe-7s-angle-down { color:white; font-size: 5em; font-weight: 700; }
.pe-7s-angle-up { font-size:3.6em; font-weight:200; }
.pe-7s-more:before { content: "\e632"; }

/*****************************************************************
	Media Queries
********************************/
@media (min-width: 960px) {
.wrapper { width:960px; margin:0 auto; /*border-left:1px solid grey; border-right:1px solid grey;*/ }
.logo { width: 380px; }

}
@media (max-width: 960px) {
header { min-height: 560px; height: 560px;}
.wrapper { width:100%; padding:0 20px; }
.about-box { width: 46%; padding: 0; margin: 0 1% 0;}
.about-box > figure { float: none; display: block; margin: 0 0 1em 0;}
.introduction-box { float:left;}
.philosophy-box { float:right;}
.career-intro { text-shadow: 0 1px 0 #f0f0ef, 0 1px 0 #f0f0ef; }
}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 959px) {
.logo { width: 330px;}
.header-tagline { font-size: 3.2em;}
#career { height:480px;}
.career-intro { width: 46%; }
}

@media (max-width: 768px) {
.header-wrap, #aboutus { background-attachment: inherit; }

}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
.logo { width: 330px;}
.header-tagline { font-size:3em; line-height:1; }
.products-button { padding: 0 1.2em 1.6em;}	
#career { -moz-transition:all .3s ease-in-out;	-o-transition:all .3s ease-in-out;	-webkit-transition: all .3s ease-in-out;-ms-transition:all .3s ease-in-out; height: 400px;
  background-size: inherit; background-position: 0 0; }
.career-intro {  width: 60%; margin: 0 auto; left: 0; }
.input-field > input, .input-field > label, .input-field > select, .input-field > textarea { float:none; width:100%; }
.input-field > label { top: 0px; }

@media (max-width: 640px) {
body { background-image:url(../imgs/white_carbon_@2X.gif);}
.logo { width:70%; margin-top: 1.5em; }
.header-tagline { font-size:2.6em; line-height: 1; padding:0 30px; }
.trigger { display:block; }
.products-button { display:none;}
h2 { font-size:2.5em;}
[class*=element-item] { width: 32%; }
.about-box {   width: 68%; display: block; margin: 0 auto; float: none;}
.introduction-box { margin-bottom:2em;}
.about-text { line-height:1.4; }
p { font-size:1.2em; }
#career { height:50%;}
.career-intro {width: 70%; text-align:center; font-size:1.4em; }
a[data-info~="content-link"] { color: white; background:#8dc63f; text-decoration:none; position: relative; top: 2px; padding: 0 3px; text-shadow:none; }
.map-box, .form-box { float:none; width:100%; padding:1em; }
.map-box { margin-bottom: 1.3em; border-bottom: 1px solid #afb9c5; }
.submit-button { float:none; margin: 2em auto; border-radius: 40px 40px 40px 40px; width: 80px; height: 80px;}
.submit-button i { font-size:3em;}
.form-box { font-size:1.2em;}

}


/* Landscape phones and down */
@media (max-width: 480px) {
#products, #aboutus, #career, #contactus { padding: 2em 0 3em;}
.header-tagline { padding: 0 25px; }
h2 { font-size:2em;}
[class*=element-item] { width: 49%; }
.about-box { width: 90%; }
.career-intro {width: 80%; line-height:1.4;}

footer small { text-align:center;}
footer small span { display:block;}

.map-box, .form-box { padding: 0;}

}

@media (max-width: 320px) {
.logo { margin-bottom:1em; width: 75%; }
.header-tagline { font-size:2em;}
.about-title {line-height: 1.1; padding-bottom: .5em;}
.title-icon { font-size:1.8em; }
.career-intro { line-height:1.3;}

.overlay ul li { width:110px;}
.overlay ul li a { font-size:1.1em; padding:16px 0;}

}

/*****************************************************************
	firefox hacks
********************************/
@-moz-document url-prefix() {
	/* insert class below */
	
.sample-ff-class {
	width:210px !important;
}
	
	/* end */
}


/*****************************************************************
	IE
********************************/
@media screen and (min-width:0) {
 /* IE9 and IE10 rule sets go here */
}