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

	Name: 		Glass Cubes
	Date:		2015/12/15
	Author:		http://psdhtml.me
		   		   
---------------------------------------------  */

/* Layout --------- */
body[style*="40px"] #top-fixed.show { top: 39px; }


/*! Modules --------- */
.heading-b { padding: 8px 0 0;margin-top: 40px; margin-bottom: 130px;}
	.heading-b h1, .heading-b h2, .heading-b h3, .heading-b h4, .heading-b h5, .heading-b h6 { margin: 0 0 8px; font-size: 4em; line-height: 1.1; }
		.heading-b h1 + .size-b, .heading-b h2 + .size-b, .heading-b h3 + .size-b, .heading-b h4 + .size-b, .heading-b h5 + .size-b, .heading-b h6 + .size-b { margin-top: -2px; }
	.heading-b p { font-size: 2em; }
		.heading-b p.size-b { margin-bottom: 31px; }
	
.module-c.d { padding: 113px 0 98px; line-height: 1.5; }
	.module-c.d:before, .lt-ie9 .module-c.d:before { content: ""; display: block; position: absolute; left: -1000em; right: auto; top: 0; bottom: auto; z-index: 9; width: 3000em; height: 10px; background: url(../images/module-d.svg) repeat-x; background-size: auto 4px; }
	.lt-ie9 .module-c.d:before { background: url(../images/module-d.png) repeat-x; background-size: auto 4px; }
	.module-c.d > div { overflow: hidden; padding: 19px 52px 0; background: url(../images/shadow-c.png); }
		.module-c.d p { font-size: 2em; }
		.module-c.d > div h1, .module-c.d > div h2 { margin-bottom: 18px; font-size: 2.9em; line-height: 1.5; text-align: center; }

.module-d.i, .module-d.i:before, .module-d.i:after, .module-b.i, .module-b.i:before, #root .link-a a.i { background-color: #005a9d; color: #fff; }
	#root .module-d.i a { color: #fff; }
	.module-d.i.slider-a .bx-pager .bx-pager-item a { border-color: #fff; }
	.module-d.i.slider-a .bx-pager .bx-pager-item a.active { background: #fff; }

.module-g { }
	.module-g > div, .module-g > article { position: relative; top: -40px; min-height: 330px; padding: 104px 0 0 338px; }
		.module-g > div:last-child, .module-g > article:last-child { }
	.module-g h1, .module-g h2, .module-g h3, .module-g h4, .module-g h5, .module-g h6 { margin: 0 0 42px -338px; font-size: 2.397em; }
	.module-g > h1, .module-g > h2, .module-g > h3, .module-g > h4, .module-g > h5, .module-g > h6 { margin: 0 -20px 40px; font-size: 3.995em; text-align: center; }
	.module-g figure { position: absolute; left: 97px; top: 184px; width: 144px; height: 144px; border-radius: 120px; background: url(../images/pattern-a.png); color: #fff; text-align: center; }
		.module-g figure img { position: absolute; left: 50%; top: 50%; }
		.module-g figure img, .list-f .img img { -moz-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }
		.module-g figure i { display: block; font-size: 74px; line-height: 144px; }
			.module-g figure i.icon-cogs, .module-g figure i.icon-remote { font-size: 64px; }
			.module-g figure i.icon-board { font-size: 70px; }
	.module-g + * { margin-top: 87px; }	
	.module-c + .module-g { margin-top: -129px; }
	

/*! Content --------- */
.overlay-a, #root .module-d a.overlay-a { color: #ef4136; }
.overlay-b, #root .module-d a.overlay-b { color: #29aae2; }
.overlay-c, #root .module-d a.overlay-c { color: #ffc200; }
.overlay-d, #root .module-d a.overlay-d { color: #80c342; }
.overlay-e, #root .module-d a.overlay-e { color: #666; }
.overlay-f, #root .module-d a.overlay-f { color: #999; }
.overlay-g, #root .module-d a.overlay-g { color: #333; }
.overlay-h, #root .module-d a.overlay-h { color: #000; }
.overlay-i, #root .module-d a.overlay-i { color: #005a9d; }


/*! Lists --------- */
.list-e { position: relative; z-index: 4; list-style: none; min-height: 283px; margin: 75px 0 57px; padding: 0; line-height: 1.4; }
	.list-e:before { content: ""; display: block; position: absolute; left: 0; top: -38px; width: 844px; height: 396px; background: url(../images/content/g.png) 0 center no-repeat; background-size: contain; }
	.lt-ie9 .list-e:before { background: url(../images/content/g-ie.png) 0 center no-repeat; }
	.list-e li { position: relative; z-index: 2; clear: both; width: 100%; margin: 0; padding: 0 0 8px; font-size: 1.6em; }
	.list-e li:after { content: ""; display: block; overflow: hidden; clear: both; height: 0; }
	.list-e li > * { display: block; position: relative; float: right; width: 348px; padding: 18px 0 18px 23px; border-radius: 4px 0 0 4px; background: #005a9d; color: #fff; text-decoration: none; }
		.list-e li > *:before { content: ""; display: block; position: absolute; left: 100%; top: 0; width: 3000em; height: 100%; margin: 0 0 0 -10px; background: #005a9d; }
		.list-e li:first-child > *, .list-e li:first-child > *:before { background: #003047; }
		.list-e li:last-child > *, .list-e li:last-child > *:before { background: #008cb6; }
	.list-e span { display: block; font-size: 1.25em; font-weight: 700; text-transform: uppercase; }

.list-f, .module-g > nav > .list-f:first-child { overflow: hidden; list-style: none; max-width: 800px; margin: 96px auto 22px; padding: 0; font-size: 0; line-height: 1.5015015015; text-align: center; text-transform: uppercase; vertical-align: top; }
	.list-f li { display: inline-block; overflow: hidden; position: relative; width: 136px; height: 136px; margin: 0 21px 34px; border-radius: 6px; border-left: 0 solid rgba(0,0,0,0); background: url(../images/pattern-a.png); color: #fff; font-size: 16.65px; text-align: center; }
	.list-f li:before { content: ""; display: block; position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: 100%; border-radius: 6px; background: url(../images/pattern-a.png);}
	.lt-ie9 .list-f li:before { left: -3000em; }
	.list-f li a { display: block; position: relative; z-index: 2; padding: 5px 15px 0; color: #fff; text-decoration: none; }
	.list-f .img, .list-f i { display: block; position: relative; height: 53px; margin: 0; line-height: 53px; }
		.list-f .img img { position: absolute; left: 50%; top: 50%; }
	.list-f img { display: block; margin: 0 auto; }
	.list-f i { display: block; font-size: 44px; }
		.list-f i.icon-cogs { font-size: 50px; }
		.list-f i.icon-remote { font-size: 45px; }
		.list-f i.icon-board { font-size: 42px; }
	.list-f + .list-f { margin-top: -22px; }
	#root .list-f.mobile-only { visibility: hidden; }
	
.quote-n {float: right;padding: 20px;font-size: 1.5em;color: #444;text-align: center;}
	.quote-n span {display: block; text-transform: uppercase;color: #000;}
	.quote-n h3 {font-size: 1.4em;font-style: italic;margin-bottom: 50px;margin-top: 80px;}
	.quote-n img {margin-bottom: 10px;}
	.quote-n .q {margin: 0 auto;width: 153px;}
.quote-m {width: 791px;padding-right: 40px;border-right: 1px solid #ccc;}
	.quote-m img {float: left;padding: 15px;}
	
/*! Helpers --------- */
.list-f:first-child, .module-g > navf:first-child > .list-f:first-child, .list-e:first-child { margin-top: 0; }


/*! Animations --------- */
.list-e li { -moz-transform: translateX(100%); -webkit-transform: translateX(100%); -o-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); }
.list-e li { -moz-animation: slideright 1s linear; -webkit-animation: slideright 1s linear; -o-animation: slideright 1s linear; -ms-animation: slideright 1s linear; animation: slideright 1s linear; }
	.list-e li:nth-child(1) { -moz-animation-delay: 1s; -webkit-animation-delay: 1s; -o-animation-delay: 1s; -ms-animation-delay: 1s; animation-delay: 1s; }
	.list-e li:nth-child(2) { -moz-animation-delay: 1.5s; -webkit-animation-delay: 1.5s; -o-animation-delay: 1.5s; -ms-animation-delay: 1.5s; animation-delay: 1.5s; }
	.list-e li:nth-child(3) { -moz-animation-delay: 2s; -webkit-animation-delay: 2s; -o-animation-delay: 2s; -ms-animation-delay: 2s; animation-delay: 2s; }
	
@-moz-keyframes slideright { 0% { -moz-transform: translateX(100%); -webkit-transform: translateX(100%); -o-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); } 100% { -moz-transform: translateX(0); -webkit-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } }
@-webkit-keyframes slideright { 0% { -moz-transform: translateX(100%); -webkit-transform: translateX(100%); -o-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); } 100% { -moz-transform: translateX(0); -webkit-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } }
@-o-keyframes slideright { 0% { -moz-transform: translateX(100%); -webkit-transform: translateX(100%); -o-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); } 100% { -moz-transform: translateX(0); -webkit-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } }
@-ms-keyframes slideright { 0% { -moz-transform: translateX(100%); -webkit-transform: translateX(100%); -o-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); } 100% { -moz-transform: translateX(0); -webkit-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } }
@keyframes slideright { 0% { -moz-transform: translateX(100%); -webkit-transform: translateX(100%); -o-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); } 100% { -moz-transform: translateX(0); -webkit-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } }



/* Responsive --------- */
@media only screen and (max-width: 75em) { /* 1200 */
#top h4, #top-fixed h4, .module-c > * { width: 960px; }

#top { }
	#nav > ul > li { padding-left: 20px; }
.heading-b { margin-top: 20px; margin-bottom: 90px;}
.list-e { min-height: 0; }
	.list-e:before { right: 250px; top: -38px; bottom: -38px; width: auto; height: auto; }
.module-g { }
	.module-g > h1, .module-g > h2, .module-g > h3, .module-g > h4, .module-g > h5, .module-g > h6 { margin: 0; }
	.module-c + .module-g { margin-top: 0; }
.quote-m {width: 600px;padding-right: 30px;}
}
@media only screen and (max-width: 62.5em) { /* 1000 */
#top h4, #top-fixed h4, .module-c > * { width: 720px; }

#top { }
	#top h4, #top-fixed h4 { height: 27px; }
	#nav > ul > li { padding-left: 10px; }

.heading-b { margin-top: 0px; margin-bottom: 0px;}		
	#content > .heading-b:first-child { padding-top: 28px; }
.list-e { }
	.list-e li > * { width: 300px; }
.module-g { }
	.module-g > div, .module-g > article { padding-left: 200px; }
	.module-g h1, .module-g h2, .module-g h3, .module-g h4, .module-g h5, .module-g h6 { margin-left: -200px; }
	.module-g > h1, .module-g > h2, .module-g > h3, .module-g > h4, .module-g > h5, .module-g > h6 { margin: 0; }
	.module-g figure { left: 0; }
.quote-m {width: auto;padding-right:0px;border: 0px;}

}
@media only screen and (max-width: 47.5em) { /* 760 */
#top h4, #top-fixed h4, .module-c > * { width: auto; }

.heading-b { }
	.heading-b h1, .heading-b h2, .heading-b h3, .heading-b h4, .heading-b h5, .heading-b h6, .module-g > h1, .module-g > h2, .module-g > h3, .module-g > h4, .module-g > h5, .module-g > h6 { font-size: 3em; }
		.heading-b h1 + .size-b, .heading-b h2 + .size-b, .heading-b h3 + .size-b, .heading-b h4 + .size-b, .heading-b h5 + .size-b, .heading-b h6 + .size-b { margin-top: 0; }
	.heading-b p, .module-c.d p { font-size: 1.6em; }
		.heading-b p.size-b { margin-bottom: 21px; }
.list-e { }
	.list-e li > * { float: none; width: auto; padding-left: 20px; padding-right: 20px; text-align: center; }
.list-f, .module-g > nav > .list-f:first-child { margin-top: 40px; margin-left: -15px; }
	.list-f li { float: left; width: 33.3333333333333%; margin: 0 auto 15px; border-left-width: 15px; background: none; }
		.list-f li:nth-child(3n) + li { clear: both; }
	.list-f + .list-f { margin-top: 0; }
	#root .list-f.mobile-only { visibility: visible; }
	#root .list-f.mobile-hide { visibility: hidden; }
.module-c.d { padding-bottom: 25px; padding-top: 29px; }
	.module-c.d > div { padding: 14px 20px; }
.module-g { }
	.module-g > div, .module-g > article { padding-left: 0; }
	.module-g figure { position: relative; left: 0; top: 0; margin: 0 auto 20px; }
	.module-g h1, .module-g h2, .module-g h3, .module-g h4, .module-g h5, .module-g h6 { margin: 0 0 20px; }
	.module-g > h1, .module-g > h2, .module-g > h3, .module-g > h4, .module-g > h5, .module-g > h6 { margin: 0 0 30px; }

.list-e li > *:before, .list-e:before { position: absolute; left: -3000em; top: -3000em; bottom: inherit; right: inherit; }
.quote-n {float: none;}
.quote-n img, .quote-m img{display: none;}
.quote-n h3 {margin: 10px;}
}
@media only screen and (max-width: 31.25em) { /* 500 */
.list-f { }
	.list-f li { width: 50%; }
		.list-f li:nth-child(3n) + li { clear: none; }
		.list-f li:nth-child(2n) + li { clear: both; }

}
@media only screen and (max-width: 25em) { /* 400 */
#root .list-f { margin-left: 0; }
	.list-f li { display: block; float: none; width: 136px; margin-left: auto; margin-right: auto; border-left-width: 0; }
}