@media only screen and (max-height: 700px) {
	header .nav li { margin-bottom: 8px; }
}

@media only screen and (max-height: 659px) {
	header .nav li { margin-bottom: 5px; }
	.go-esd a { right: 135px; bottom: 10px; }
}


@media only screen and (max-width: 1280px) {
	/* Medium desktop 
	.homepage { height: 750px; }*/
	.homepage .caption { width: 50%; font-size: 30px; letter-spacing: 2px; }
	.wecare { height: 600px; }
	.wecare .desc { padding: 30px; }
	.wecare .desc div { padding: 2em; font-size: 15px; }
	.grid .grid-desc { padding: 0 50px; }
	.grid .headline { font-size: 18px; margin-bottom: .5em }
	.grid-icon { font-size: 36px; margin: 0 auto .5em; }
	.grid-icon span { padding-bottom: .5em; }
	.pro-grid figure { padding: 3.5em; }
	.videocol { height: 500px; }
	.video-caption { font-size: 21px; }
	.video-caption span { font-size: 40px; }
	.step-grid , .step-grid .img { height: 500px; }
	.footer-grid figure figcaption a { font-size: 100%; }
	.icon-grid { padding: 5em 0; }
	.icon-grid h3 { font-size: 21px; margin-bottom: 2.5em; }
	.highlight-img-st4-3 { background-size: 400px 400px; }
	.link-esd { width: 80px; height: 43px; }

	.parallax-about { height: 5750px; }
	#parallax-bg-2 div div img { width: 500px; }
	#parallax-bg-3 div div { top: 850px; }
	#parallax-bg-4 div div { top: 1100px; }
	#parallax-bg-5 div div img { width: 500px; }
	#parallax-bg-6 div div { top: 1650px; }
	#parallax-bg-7 div div { top: 2300px; }
	#parallax-bg-7 div div img { width: 700px; }
	#parallax-bg-8 div div { top: 3050px; }
	#parallax-bg-9 div div { top: 3500px;}
}
@media only screen and (max-width: 1024px) {
	/* Small desktop & iPad view */
	body { font-size: 115%; }
	header .nav , header .share , header .bar-left , header .bar-right { display: none; }
	#backtop { bottom: 7px; right: 20px; }
	.go-esd a { right: 60px; bottom: 10px; width: 60px; padding: 0; }
	header .logo a { width: 60px; left: 25px; top: 25px; }
	header .bar-top , nav { display: block; }
	.content { padding: 0; padding-top: 50px; }
	.caption { font-size: 24px; }
	.wecare .desc div { padding: 1em; }
	.wecare .desc .subhead { font-size: 21px; }
	.grid .grid-img { float: inherit; width: 100%; }
	.grid-caption-1 , .grid-caption-2 { background: #fff; width: 100%; position: relative!important; left: inherit!important; top: inherit!important; transform: inherit!important; padding: 50px 0; }
	.grid { border-bottom: #CBCBCB solid 1px; }
	.grid.bordernone { border-bottom: none; }
	.highlight-img-st1-1 { float: inherit; width: 100%; height: 300px; background-size: 300px 300px; }
	.highlight-img-st2-1 { float: inherit; width: 100%; height: 300px; background-size: 65%; }
	.highlight-img-st3-3 { float: inherit; width: 100%; height: 300px; background-size: 75%; }
	.highlight-img-st4-3 { float: inherit; width: 100%; height: 300px; background-size: 55%; }
	.highlight-img-st5-1 { float: inherit; width: 100%; height: 550px; }
	.pro-grid figure { padding: 2em; }
	.videocol { height: 400px; }
	.video-caption { font-size: 18px; }
	.video-caption span { font-size: 30px; }
	.step-grid , .step-grid .img { height: 400px; }
	footer li { margin-right: 1em; }
	.link-esd { width: 60px; height: 32px; }
	.footer-grid figure figcaption a { font-size: 90%; }
	.icon-grid figure figcaption  { padding: 2em; min-height: 360px; }

	#parallax-bg-3 div div { top: 800px; }
}


@media only screen and (max-width: 768px) {
	/* Small desktop & iPad view */
	header .logo a { width: 50px; }
	.caption { font-size: 18px; letter-spacing: 1px; }
	.caption span { font-size: 15px; }
	.wecare { height: 400px; background-image: url('../img/img_bg_index_3.jpg'); }
	.wecare .desc { width: 100%;  }
	.wecare .desc div { background: none; }
	.wecare .img { display: none; }
	.wecare, .grid-caption-3, .grid-caption-4, .grid-caption-6, .icon-grid, .grid-caption-7, .grid-caption-8 { border-bottom: #CBCBCB solid 1px; }
	.highlight-img-st1-1 { height: 200px; background-size: 200px 200px; }
	.highlight-img-st2-1 { background-size: 70%; }
	.highlight-img-st3-3 { height: 200px; }
	.highlight-img-st4-3 { height: 275px; background-size: 65%; }
	.highlight-img-st5-1 { height: 450px; }
	footer { padding: 25px 0; }
	footer li { display: block; margin: 0; margin: 15px 0; }
	.footer-copy { text-align: left; padding-left: 25px; }
	.link-esd { right: 2em; top: 40px; transform: translate(0, 0); }
	.step-grid { height: 500px; text-align: left!important; }
	.step-grid h3 { text-align: left!important; }
	.step-grid-2 { height: inherit!important;}
	.step-grid .img { width: 100%; float: inherit; height: 500px; }
	.grid-caption-3 , .grid-caption-4 { background: rgba(255, 255, 255, .7); width: 100%;  top: inherit!important; bottom: 0; transform: inherit!important; padding: 25px; z-index: 1; text-shadow: 1px 1px 1px #fff; }
	.step-grid .grid-caption-5 , .step-grid .grid-caption-6 { position: static; width: 100%; padding: 25px; left: inherit; right: inherit; top: inherit; bottom: inherit; transform: inherit; }
	.grid-caption-7 , .grid-caption-8 { background: rgba(255, 255, 255, .9); width: 100%;  top: inherit!important; bottom: 0; transform: inherit!important; padding: 25px; z-index: 1; }
	.grid-caption-7 br , .grid-caption-8 br { display: none; }
	.footer-grid figure { display: block; margin-left: 0; width: 100%; }
	.footer-grid figure figcaption a { padding: 2.5em 0; }
	.pro-grid figure { display: block; margin-left: 0; width: 100%; }
	.pro-grid figure figcaption h3.headline { text-align: left; margin-bottom: 1em; }
	.icon-grid-wrapper h3 { padding: 0 25px; }
	.icon-grid figure { margin-left: -5px; width: 50%; }
	.icon-grid .desc { padding: 0 25px; }
	#myVideo { display: none; }

	.parallax-about { height: 5900px; }
	#parallax-bg-1 div div { top: 120px; width: 16px; font-size: 30px; line-height: 1; }
	#parallax-bg-2 div div img { width: 400px; }
	#parallax-bg-3 div div { top: 650px; }
	#parallax-bg-4 div div { top: 1050px; font-size: 30px; line-height: 1; }
	#parallax-bg-5 div div { left: 65%; top: 1300px; }
	#parallax-bg-5 div div img { width: 300px; }
	#parallax-bg-6 div div { top: 1500px; }
	#parallax-bg-7 div div { top: 2350px; }
	#parallax-bg-7 div div img { width: 500px; }
	#parallax-bg-8 div div { top: 3000px; font-size: 30px; }
	#parallax-bg-9 div div { top: 3450px;}
	.event-wrapper { font-size: 120%; }

	.event-wrapper button { font-size: 15px; margin: 2.5em auto 0; padding: 1em; }

	.toggle-btn-visible {
		position: static;
		visibility: visible;
	}
	.toggle-target-hidden { display: none; }
	.toggle-target-expanded { display: block; }
}
@media only screen and (max-width: 560px) {
	/* Phone view */
	.caption { padding-left: 30px; font-weight: 500; }
	.videocol { height: 300px; }
	.video-caption { font-size: 15px; }
	.video-caption span { font-size: 26px; }
	.step-grid , .step-grid .img { height: 400px; }
	.footer-grid figure figcaption a { padding: 1.5em 0; }
	.pro-grid figure { padding: 0; }
	.pro-grid figure figcaption.txt { padding: 0 2em 2em; }
	.icon-grid figure figcaption  { padding: 2em 1em; min-height: 320px; }
	.icon-grid figure { padding: 10px; }
	.icon-grid figure figcaption img { max-width: 100px; }
	.highlight-img-st2-1 { height: 200px; }
	.highlight-img-st4-3 { height: 220px; background-size: 70%; }
	.highlight-img-st5-1 { height: 350px; }

	.parallax-about { height: 5800px; }
	#parallax-bg-1 div div { left: 80%; }
	#parallax-bg-2 div div { left: 40%; }
	#parallax-bg-3 div div { top: 600px; }
	#parallax-bg-4 div div { left: 20%; top: 1150px; }
	#parallax-bg-5 div div { top: 1350px; }
	#parallax-bg-6 div div { top: 1550px; }
	#parallax-bg-7 div div { top: 2500px; }
	#parallax-bg-7 div div img { width: 300px; }
	#parallax-bg-8 div div { top: 3000px; }
	#parallax-bg-9 div div { top: 3400px;}
	#parallax-bg-1 div div , #parallax-bg-4 div div , #parallax-bg-8 div div { font-size: 24px; }

	.mobile img.img2 { display: block; }
	.mobile img.img1 { display: none; }

	#backtop { bottom: 60px; }
	.go-esd a { right: 15px; bottom: 100px; }
}