/* ---reset.css--- */
#landing-html{
    background-color: #000;
}

/** Background Colors **/
.bg-gray-0 {
	background: rgb(250, 250, 250);
}

.bg-gray-1 {
	background: rgb(245, 245, 245);
}

.bg-gray-2 {
	background: rgb(238, 238, 238);
}

.bg-gray-3 {
	background: rgb(224, 224, 224);
}

.bg-gray-4 {
	background: rgb(189, 189, 189);
}

.bg-gray-5 {
	background: rgb(158, 158, 158);
}

.bg-gray-6 {
	background: rgb(117, 117, 117);
}

.bg-gray-7 {
	background: rgb(97, 97, 97);
}

.bg-gray-8 {
	background: rgb(66, 66, 66);
}

.bg-gray-9 {
	background: rgb(33, 33, 33);
}

.bg-black {
	background: rgb(0, 0, 0);
}

.bg-green {
	background: rgb(128, 195, 67);
}

.bg-white {
	background: rgb(255, 255, 255);
}

.bg-red {
	background: rgb(255, 235, 238);
}

/** Text elements **/
/*@font-face {
	font-family: "Acer Foco";
	src: url(https://fonts.acer.com/AcerFoco_Rg.woff),
		url(https://fonts.acer.com/AcerFoco_Rg.ttf);
}

@font-face {
	font-family: "Acer Foco";
	font-weight: bold;
	src: url(https://fonts.acer.com/AcerFoco_SmBd.woff),
		url(https://fonts.acer.com/AcerFoco_SmBd.ttf);
}

@font-face {
	font-family: "Acer Foco";
	font-weight: 300;
	src: url(https://fonts.acer.com/AcerFoco_Lt.woff),
		url(https://fonts.acer.com/AcerFoco_Lt.ttf);
}

@font-face {
	font-family: "Acer Foco";
	font-weight: 900;
	src: url(https://fonts.acer.com/AcerFoco_Blk.woff),
		url(https://fonts.acer.com/AcerFoco_Blk.ttf);
}
*/

/* COLOR TEXTS */
.text-primary-dark {
	color: rgba(0, 0, 0, 0.87);
}

.text-secondary-dark {
	color: rgba(0, 0, 0, 0.7);
}

.text-tertiary-dark {
	color: rgba(0, 0, 0, 0.4);
}

.text-primary-light {
	color: rgba(255, 255, 255, 1.0);
}

.text-secondary-light {
	color: rgba(255, 255, 255, 0.8);
}

.text-secondary-light:hover {
	color: rgba(255, 255, 255, 1.0);
}

.text-tertiary-light {
	color: rgba(255, 255, 255, 0.5);
}

.text-tertiary-light:hover {
	color: rgba(255, 255, 255, 0.8);
}

.text-primary-green {
	color: rgba(133, 187, 35, 1.0);
}

.text-primary-blue {
	color: rgba(71, 162, 218, 1.0);
}

.text-primary-green:hover {
	color: rgba(99, 138, 20, 1.0);
}

.text-primary-red {
	color: rgba(204, 0, 0, 1.0);
}

.text-primary-orange {
	color: #dc582a;
}

a.text-primary-orange:hover {
	color: #bf9474;
}

.light {
	font-weight: 300;
}

.bold {
	font-weight: bold;
}

.italic {
	/*font-weight: italic;*/
	font-style: italic;
}

.normal {
	font-weight: normal;
}

.xbold {
	font-weight: 900;
}

/** Others properties: **/
.label {
	padding: 0.125rem 0.5rem;
}

.round {
	border-radius: 4px;
}

.inline {
	display: inline;
}

.divider {
	clear: both;
}

.capitalize {
	text-transform: capitalize;
}

.uppercase {
	text-transform: uppercase;
}

.centerImage {
	margin: 0 auto;
}

.hidden {
	display: none;
}

.no-underline {
	text-decoration: none;
}

.underline {
	text-decoration: underline;
}

/** Effects: **/
.fadeIn {
	-webkit-animation-duration: .1s;
	animation-duration: .1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn;
	-webkit-backface- visibility: hidden;
}

.fadeOut {
	-webkit-animation-duration: .1s;
	animation-duration: .1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-name: fadeOut;
	animation-name: fadeOut;
	-webkit- backface-visibility: hidden;
}

.overview {
	position: relative;
}

.sa_textbox {
	position: absolute;
	padding-top: 8%;
	left: 6%;
	width: 65%;
	top: 0;
}

.sa_top_div {
	margin: 0 auto;
	right: 0px;
	left: 0px;
	position: relative !important;
}

/** Modal Content **/
.modal-content {
	position: relative;
	/*  background-color: #fefefe;*/
	margin: auto;
	padding: 0;
	width: 90%;
	max-width: 1200px;
}

/* The Close Button */
.close {
	color: black;
	position: absolute;
	top: 10px;
	right: 25px;
	font-size: 35px;
	font-weight: bold;
}

.close:hover, .close:focus {
	color: #999;
	text-decoration: none;
	cursor: pointer;
}

.hs-img {
	margin-bottom: -4px;
}

.hs-img.hover-shadow {
	transition: 0.3s;
}

.hover-shadow:hover {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0
		rgba(0, 0, 0, 0.19);
}

/* comp-hs */

/* The Modal (background) */
.modal {
	display: none;
	position: fixed;
	z-index: 1;
	padding-top: 100px;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	/*  background-color: black;*/
	background-color: white;
}

/* Modal Content */
.modal-content {
	position: relative;
	/*  background-color: #fefefe;*/
	margin: auto;
	padding: 0;
	width: 90%;
	max-width: 1200px;
}

/* The Close Button */
.close {
	color: black;
	position: absolute;
	top: 10px;
	right: 25px;
	font-size: 35px;
	font-weight: bold;
}

.close:hover, .close:focus {
	color: #999;
	text-decoration: none;
	cursor: pointer;
}

.cursor {
	cursor: pointer;
}

.hs-img {
	margin-bottom: -4px;
}

.caption-container {
	text-align: center;
	background-color: white;
	padding: 2px 16px;
}

.hs-img.hover-shadow {
	transition: 0.3s;
}

.hover-shadow:hover {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0
		rgba(0, 0, 0, 0.19);
}

.flex {
	display: flex;
	text-decoration: none;
}


	/*i.icon {
    line-height: 1.5;
}

.playIcon {
    position: absolute;
    top: 30%;
    bottom: 0;
    left: 0;
    right: 0;
    font-size: 90px;
    text-align: center;
    color: #fff;
}*/   

.gallerySectionStyle .cont .col {
	padding: 24px;
	border-left: 1px solid #ddd;
	min-height: 200px;
}

.gallerySectionStyle .cont .col {
	border-bottom: 1px solid #ddd;
	padding: 24px;
	border-left: 1px solid #ddd;
	min-height: 200px;
}

.gallerySectionStyle .cont .border-bottom-0 .col {
	border-bottom: none;
}

.gallerySectionStyle .cont {
	border-right: 1px solid #ddd;
	overflow: hidden;
}

.gallerySectionStyle {
	border-bottom: 1px solid #ddd;
	border-top: 1px solid #ddd;
}

.gallerySectionStyle .centerVideo {
	position: relative;
	width: 100%;
}

.gallerySectionStyle .playIcon {
	position: absolute;
	top: 30%;
	bottom: 0;
	left: 0;
	right: 0;
	font-size: 90px;
	text-align: center;
	color: #fff;
}

.gallerySectionStyle .centerVideo img.video {
	position: absolute;
	margin: auto;
	float: none;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}

.gallerySectionStyle .centerImages {
	position: relative;
	width: 100%;
}

.gallerySectionStyle .centerImages img.image {
	position: absolute;
	margin: auto;
	float: none;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}

.gallerySectionStyle .modalContent .col {
	border: none !important;
	overflow: hidden;
	background: #fff;
}

.gallerySectionStyle .ytbpointer {
	position: absolute;
	pointer-events: none;
	top: 50%;
	transform: translateY(-50%)
}

/********* end of gallery **********/

/********* footnotes **********/
.sa_footnotes {
	position: relative;
	background: rgb(66, 66, 66);
}

.sa_footnotes_description {
	color: rgba(255, 255, 255, 0.5);
	font-size: .75rem;
	padding-left: 5%;
	padding-right: 5%;
	line-height: 1.5;
	padding-bottom: 2.5rem;
	padding-top: 2.5rem;
}
/********* end of footnotes **********/

.style a, .style h1, .style h2, .style h3, .style h4, .style h5{
	margin-bottom: 1rem;
	margin-top: 1rem;
}
/* --------------- FLUID FONT TYPOGRAPHY -------------- */
.text-xs, .fs--2 {
	font-size: .75rem;
}

.text-s, .fs--1 {
	font-size: .875rem;
	font-size: calc(0.08929vw + 0.79464rem);
}

.text-m, .heading-xs, .fs-0, .inline-centered {
	font-size: 1.00rem;
	font-size: calc(0.17857vw + 0.83929rem);
}

.text-l, .fs-1 {
	font-size: 1.117rem;
	font-size: calc(0.38vw + 0.908rem);
}

.text-xl, .heading-s, .fs-2 {
	font-size: 1.335rem;
	font-size: calc(0.65143vw + 0.97671rem);
}

.heading-m, .fs-3 {
	font-size: 1.5995rem;
	font-size: calc(1.01vw + 1.044rem);
}

.heading-l, .fs-4 {
	font-size: 1.9215rem;
	font-size: calc(1.48429vw + 1.10514rem);
}

.heading-xl, .fs-5 {
	font-size: 2.3145rem;
	font-size: calc(2.10714vw + 1.15557rem);
}

.fs-6 {
	font-size: 2.7945rem;
	font-size: calc(2.91571vw + 1.19086rem);
}

.heading-xxl, .fs-7 {
	font-size: 3.382rem;
	font-size: calc(3.96vw + 1.204rem);
	line-height: 1;
}

.heading-xxxl, .fs-8 {
	font-size: 4.1025rem;
	font-size: calc(5.30714vw + 1.18357rem);
}

@media ( max-width : 20rem) {
	.text-s, .fs--1 {
		font-size: 0.8125rem;
	}
	.text-m, .heading-xs, .fs-0, p, a, input, .inline-centered, h6 {
		font-size: 0.875rem;
	}
	.text-l, .fs-1, h5 {
		font-size: 0.984rem;
	}
	.text-xl, .heading-s, .fs-2, h4 {
		font-size: 1.107rem;
	}
	.heading-m, .fs-3, h3 {
		font-size: 1.246rem;
	}
	.heading-l, .fs-4, h2 {
		font-size: 1.402rem;
	}
	.heading-xl, .fs-5, h1 {
		font-size: 1.577rem;
	}
	.fs-6 {
		font-size: 1.774rem;
	}
	.heading-xxl, .fs-7 {
		font-size: 1.996rem;
	}
	.heading-xxxl, .fs-8 {
		font-size: 2.245rem;
	}
}

@media ( min-width : 90rem) {
	/*.text-s, .fs--1 {
		font-size: 0.875rem;
	}
	.text-m, .heading-xs, .fs-0, p, a, input, .inline-centered, h6 {
		font-size: 1rem;
	}
	.text-l, .fs-1, h5 {
		font-size: 20px;
	}
	.text-xl, .heading-s, .fs-2, h4 {
		font-size: 1.563rem;
	}
	.heading-m, .fs-3, h3 {
		font-size: 31.248px;
	}
	.heading-l, .fs-4, h2 {
		font-size: 2.441rem;
	}
	.heading-xl, .fs-5, h1 {
		font-size: 3.052rem;
	}
	.fs-6 {
		font-size: 3.815rem;
	}
	.heading-xxl, .fs-7 {
		font-size: 4.768rem;
	}
	.heading-xxxl, .fs-8 {
		font-size: 5.96rem;
	}*/
	.style .text-s, .style .fs--1 {
		font-size: 0.875rem;
	}
	.style, .style .text-m, .style .heading-xs, .style .fs-0, .style p,
		.style a, .style input, .inline-centered, .style h6 {
		font-size: 1rem;
	}
	.style .text-l, .style .fs-1, .style h5 {
		font-size: 20px;
	}
	.style .text-xl, .style .heading-s, .style .fs-2, .style h4 {
		font-size: 1.563rem;
	}
	.style .heading-m, .style .fs-3, .style h3 {
		font-size: 31.248px;
	}
	.style .heading-l, .style .fs-4, .style h2 {
		font-size: 2.441rem;
	}
	.style .heading-xl, .style .fs-5, .style h1 {
		font-size: 3.052rem;
	}
	.style .fs-6 {
		font-size: 3.815rem;
	}
	.style .heading-xxl, .style .fs-7 {
		font-size: 4.768rem;
	}
	.style .heading-xxxl, .style .fs-8 {
		font-size: 5.96rem;
	}
}

/** vpt a **/
@media screen and (min-width: 0px) and (max-width: 639px) {
	.contSection .textOver.a-top {
		position: inherit;
	}
	.contSection .textOverKsp {
		position: inherit !important;
	}
	.contSection .textOverKsp .col {
		margin-left: auto;
		width: 100%;
	}
	.contSection .textOverKsp .col h2, .contSection .textOverKsp .col p {
		text-align: center;
	}
	.contSection .textOverKsp .col a {
		float: none;
		display: inline-block;
	}
	.contSection .textOver .col p {
		margin-top: 1rem;
		margin-bottom: 1rem;
	}
	.col.gutter, .row.gutter {
		padding-left: 0.75rem;
		padding-right: 0.75rem;
	}
	.col.gutter-half, .row.gutter-half {
		padding-left: 0.5rem;
		padding-right: 0.5rem;
	}
	.gallerySectionStyle .cont .col:nth-child(-n+6) {
		border-bottom: 1px solid #ddd;
	}
	.style .a-align-left {
		text-align: left;
	}
	.style .a-align-center {
		text-align: center;
	}
	.style .a-align-right {
		text-align: right;
	}
	.style .a-centerImage {
		margin: 0 auto;
	}
	.style .a-float-left {
		float: left;
	}
	.style .a-float-right {
		float: right;
	}
	.style .a-float-none {
		float: none !important;
	}
	.style .a-align-left {
		text-align: left;
	}
	.style .a-align-center {
		text-align: center;
	}
	.style .a-align-right {
		text-align: right;
	}
	.style .a-margin-0 {
		margin: 0;
	}
	.row.resource {
		display: flex !important;
		height: auto !important;
		margin-top: 10px;
	}
	.resource .align-left, .resource .align-right {
		text-align: center !important;
	}
	.resource button {
		width: 80% !important;
	}
	.resource .clear-left {
		padding-left: 20px !important;
	}
	.resource .details {
		overflow-wrap: break-word;
		padding-top: 10px !important;
	}
	.resource .actions {
		padding-top: 10px !important;
	}
}

/** vpt b **/
@media screen and (min-width: 640px) and (max-width: 1023px) {
	.contSection .textOver.b-top {
		position: inherit;
	}
	.contSection .textOverKsp {
		position: inherit !important;
	}
	.contSection .textOverKsp .col {
		margin-left: auto;
		width: 100%;
	}
	.contSection .textOverKsp .col h2, .contSection .textOverKsp .col p {
		text-align: center;
	}
	.contSection .textOverKsp .col a {
		float: none;
		display: inline-block;
	}
	.contSection .textOver .col p {
		margin-top: 1rem;
		margin-bottom: 1rem;
	}
	.col.gutter, .row.gutter {
		padding-left: 1rem;
		padding-right: 1rem;
	}
	.col.gutter-half, .row.gutter-half {
		padding-left: 0.5rem;
		padding-right: 0.5rem;
	}
	.style .b-align-left {
		text-align: left;
	}
	.style .b-align-center {
		text-align: center;
	}
	.style .b-align-right {
		text-align: right;
	}
	.style .b-align-left {
		text-align: left;
	}
	.style .b-centerImage {
		margin: 0 auto;
	}
	.style .b-float-left {
		float: left;
	}
	.style .b-float-right {
		float: right;
	}
	.style .b-float-none {
		float: none !important;
	}
	.row.resource {
		display: flex !important;
		height: auto !important;
		margin-top: 10px;
	}
	.resource button {
		width: 80% !important;
	}
	.resource .clear-left {
		padding-left: 20px !important;
	}
	.resource .details {
		overflow-wrap: break-word;
		padding-top: 10px !important;
	}
	.resource .actions {
		padding-top: 10px !important;
	}
}

/** vpt c **/
@media screen and (min-width: 1024px) and (max-width: 1439px) {
	.col.gutter, .row.gutter {
		padding-left: 1.25rem;
		padding-right: 1.25rem;
	}
	.col.gutter-half, .row.gutter-half {
		padding-left: 0.625rem;
		padding-right: 0.625rem;
	}
	.contSection .textOver.c-top {
		position: inherit;
	}
	.style .c-align-left {
		text-align: left;
	}
	.style .c-align-center {
		text-align: center;
	}
	.style .c-align-right {
		text-align: right;
	}
	.style .c-align-left {
		text-align: left;
	}
	.style .c-centerImage {
		margin: 0 auto;
	}
	.style .c-float-left {
		float: left;
	}
	.style .c-float-right {
		float: right;
	}
	.style .c-float-none {
		float: none;
	}
}

/** vpt d **/
@media screen and (min-width: 1440px) and (max-width: 1919px) {
	.col.gutter, .row.gutter {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
	.col.gutter-half, .row.gutter-half {
		padding-left: 0.75rem;
		padding-right: 0.75rem;
	}
	.style .d-align-center {
		text-align: center;
	}
	.style .d-align-right {
		text-align: right;
	}
	.style .d-align-left {
		text-align: left;
	}
	.style .d-centerImage {
		margin: 0 auto;
	}
	.style .d-float-left {
		float: left;
	}
	.style .d-float-right {
		float: right;
	}
	.style .d-float-none {
		float: none;
	}
}

/** vpt e **/
@media screen and (min-width: 1920px) and (max-width: 2559px) {
	.col.gutter, .row.gutter {
		padding-left: 1 75rem;
		padding-right: 1.75rem;
	}
	.col.gutter-half, .row.gutter-half {
		padding-left: 0.875rem;
		padding-right: 0.875rem;
	}
	.style .e-align-center {
		text-align: center;
	}
	.style .e-align-right {
		text-align: right;
	}
	.style .e-align-left {
		text-align: left;
	}
	.style .e-centerImage {
		margin: 0 auto;
	}
	.style .e-float-left {
		float: left;
	}
	.style .e-float-right {
		float: right;
	}
	.style .e-float-none {
		float: none;
	}
}

/** vpt f **/
@media screen and (min-width: 2560px) {
	.col.gutter, .row.gutter {
		padding-left: 1 5rem;
		padding-right: 1.5rem;
	}
	.col.gutter-half, .row.gutter-half {
		padding-left: 0.75rem;
		padding-right: 0.75rem;
	}
	.style .f-align-center {
		text-align: center;
	}
	.style .f-align-right {
		text-align: right;
	}
	.style .f-align-left {
		text-align: left;
	}
	.style .f-centerImage {
		margin: 0 auto;
	}
	.style .f-float-left {
		float: left;
	}
	.style .f-float-right {
		float: right;
	}
	.style .f-float-none {
		float: none;
	}
}

/** DEFAULT PROPERTIES **/
/* .style html {
	font-size: 100%;
} */

.style {
	color: rgba(0, 0, 0, 0.7);
	font-family: "Acer Foco", "Trebuchet MS", Arial, sans-serif;
	font-size: 1rem;
	font-size: calc(0.17857vw + 0.83929rem);
	line-height: 1.5;
	clear: both;
	text-align: left;
	line-height: 1.5;
	-ms-overflow-style: none !important;
}

.style:lang(zh-TW) {
	font-family: "Acer Foco", "Trebuchet MS", Arial, "?????",
		"Microsoft JhengHei", "PingFang TC";
}

.style .container {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

.style .row {
	padding-bottom: 0;
}

/*
.row {
	width: 100%;
	height: auto;
	text-align: center;
	margin: 0;
	padding: 0 0 20px 0;
	clear: both;
	float: left;
}
*/

/* .style *, .style *:before, .style *:after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.style .container:before, .style .container:after, .style .row:before,
	.style .row:after, .style .clearfix:before, .style .clearfix:after {
	content: " ";
	display: table;
}

.style .container:after, .style .row:after, .style .clearfix:after {
	clear: both;
}

.style {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

.style *>span {
	font-size: inherit;
} */
/* 
.max?width?b {
	width: 40em;
}

.max?width?c {
	width: 64em;
}

.max?width?d {
	width: 90em;
}

.max?width?e {
	width: 120em;
}

.max?width?f {
	width: 160em;
} */

.style .col {
	float: left;
	min-height: 1px;
}

.style .col.centered {
	float: none;
	margin-left: auto;
	margin-right: auto;
}

.style img {
	max-width: 100%;
	display: block;
}

/* OVERVIEW LOGO */
.partnersContainer {
	display: table;
	margin-top: 64px;
}

.partnersContainer .partners {
	display: table-caption;
	caption-side: bottom;
}

.textOverCont .partnersGutter {
	padding-left: 0 !important;
}

.textOverCont .partnersGutter:last-child {
	padding-right: 0 !important;
}

.partnersContainer .partnerJustify {
	display: flex;
	justify-content: center;
}

/********************************* ksp ********************/
.sa_ksp {
	position: relative;
}

.contSection .textOverKsp {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 100%;
}

.contSection .textOverKspCenter {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 100%;
}

.contSection .textOverKspCont {
	height: 100%;
	display: table;
}

.contSection .textOverKspCont .text {
	display: table-cell;
	vertical-align: middle;
	float: none;
}

.hs {
	position: absolute;
	/*cursor: pointer;*/
}

img.left {
	float: right;
	margin: auto 10px;
}

img.right {
	float: left;
	margin: auto 10px;
}

.style .hs .top {
	float: none;
	margin: 10px auto;
}

.style .hs .bottom {
	float: none;
	margin: 10px auto;
}

/*********** button **********/
.style .button {
	background-color: #eeeeee;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    color: rgba(0, 0, 0, 0.7);
    cursor: pointer;
    display: inline-block;
    font-size: 0.875rem;
    font-weight: bold;
    line-height: 1;
    outline: 0;
    padding-bottom: 0.75rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 0.75rem;
    text-align: center;
    text-transform: uppercase;
    vertical-align: middle;
    white-space: nowrap;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
	text-decoration: none;
	height: 42px;
}

/************ flex **************/
.flexBox {
	position: relative;
	overflow: hidden;
}

/* Margin */
.style .margin-0 {
	margin: 0;
}

.style .margin-xxs {
	margin: 0.25rem;
}

.style .margin-xs {
	margin: 0.5rem;
}

.style .margin-s {
	margin: 1rem;
}

.style .margin-m {
	margin: 2rem;
}

.style .margin-l {
	margin: 3rem;
}

.style .margin-xl {
	margin: 4rem;
}

/* Margin Left */
.style .margin-left-0 {
	margin-left: 0;
}

.style .margin-left-xxs {
	margin-left: 0.25rem;
}

.style .margin-left-xs {
	margin-left: 0.5rem;
}

.style .margin-left-s {
	margin-left: 1rem;
}

.style .margin-left-m {
	margin-left: 2rem;
}

.style .margin-left-l {
	margin-left: 3rem;
}

.style .margin-left-xl {
	margin-left: 4rem;
}

/* Margin Right */
.style .margin-right-0 {
	margin-right: 0;
}

.style .margin-right-xxs {
	margin-right: 0.25rem;
}

.style .margin-right-xs {
	margin-right: 0.5rem;
}

.style .margin-right-s {
	margin-right: 1rem;
}

.style .margin-right-m {
	margin-right: 2rem;
}

.style .margin-right-l {
	margin-right: 3rem;
}

.style .margin-right-xl {
	margin-right: 4rem;
}

/* Margin Top */
.style .margin-0 {
	margin: 0;
}

.style .margin-xxs {
	margin: 0.25rem;
}

.style .margin-xs {
	margin: 0.5rem;
}

.style .margin-s {
	margin: 1rem;
}

.style .margin-m {
	margin: 2rem;
}

.style .margin-l {
	margin: 3rem;
}

.style .margin-xl {
	margin: 4rem;
}

/* Margin Left */
.style .margin-left-0 {
	margin-left: 0;
}

.style .margin-left-xxs {
	margin-left: 0.25rem;
}

.style .margin-left-xs {
	margin-left: 0.5rem;
}

.style .margin-left-s {
	margin-left: 1rem;
}

.style .margin-left-m {
	margin-left: 2rem;
}

.style .margin-left-l {
	margin-left: 3rem;
}

.style .margin-left-xl {
	margin-left: 4rem;
}

/* Margin Right */
.style .margin-right-0 {
	margin-right: 0;
}

.style .margin-right-xxs {
	margin-right: 0.25rem;
}

.style .margin-right-xs {
	margin-right: 0.5rem;
}

.style .margin-right-s {
	margin-right: 1rem;
}

.style .margin-right-m {
	margin-right: 2rem;
}

.style .margin-right-l {
	margin-right: 3rem;
}

.style .margin-right-xl {
	margin-right: 4rem;
}

/* Margin Top */
.style .margin-top-0 {
	margin-top: 0;
}

.style .margin-top-xxs {
	margin-top: 0.25rem;
}

.style .margin-top-xs {
	margin-top: 0.5rem;
}

.style .margin-top-s {
	margin-top: 1rem;
}

.style .margin-top-m {
	margin-top: 2rem;
}

.style .margin-top-l {
	margin-top: 3rem;
}

.style .margin-top-xl {
	margin-top: 4rem;
}

/* Margin Bottom */
.style .margin-bottom-0 {
	margin-bottom: 0;
}

.style .margin-bottom-xxs {
	margin-bottom: 0.25rem;
}

.style .margin-bottom-xs {
	margin-bottom: 0.5rem;
}

.style .margin-bottom-s {
	margin-bottom: 1rem;
}

.style .margin-bottom-m {
	margin-bottom: 2rem;
}

.style .margin-bottom-l {
	margin-bottom: 3rem;
}

.style .margin-bottom-xl {
	margin-bottom: 4rem;
}

/* Padding */
.style .padding-0 {
	padding: 0;
}

.style .padding-xxs {
	padding: 0.25rem;
}

.style .padding-xs {
	padding: 0.5rem;
}

.style .padding-s {
	padding: 1rem;
}

.style .padding-m {
	padding: 2rem;
}

.style .padding-l {
	padding: 3rem;
}

.style .padding-xl {
	padding: 4rem;
}

/* Padding Left */
.style .padding-left-0 {
	padding-left: 0;
}

.style .padding-left-xxs {
	padding-left: 0.25rem;
}

.style .padding-left-xs {
	padding-left: 0.5rem;
}

.style .padding-left-s {
	padding-left: 1rem;
}

.style .padding-left-m {
	padding-left: 2rem;
}

.style .padding-left-l {
	padding-left: 3rem;
}

.style .padding-left-xl {
	padding-left: 4rem;
}

/* Padding Right */
.style .padding-right-0 {
	padding-right: 0;
}

.style .padding-right-xxs {
	padding-right: 0.25rem;
}

.style .padding-right-xs {
	padding-right: 0.5rem;
}

.style .padding-right-s {
	padding-right: 1rem;
}

.style .padding-right-m {
	padding-right: 2rem;
}

.style .padding-right-l {
	padding-right: 3rem;
}

.style .padding-right-xl {
	padding-right: 4rem;
}

/* Padding Top */
.style .padding-top-0 {
	padding-top: 0;
}

.style .padding-top-xxs {
	padding-top: 0.25rem;
}

.style .padding-top-xs {
	padding-top: 0.5rem;
}

.style .padding-top-s {
	padding-top: 1rem;
}

.style .padding-top-m {
	padding-top: 2rem;
}

.style .padding-top-l {
	padding-top: 3rem;
}

.style .padding-top-xl {
	padding-top: 4rem;
}

/* Padding Bottom */
.style .padding-bottom-0 {
	padding-bottom: 0;
}

.style .padding-bottom-xxs {
	padding-bottom: 0.25rem;
}

.style .padding-bottom-xs {
	padding-bottom: 0.5rem;
}

.style .padding-bottom-s {
	padding-bottom: 1rem;
}

.style .padding-bottom-m {
	padding-bottom: 2rem;
}

.style .padding-bottom-l {
	padding-bottom: 3rem;
}

.style .padding-bottom-xl {
	padding-bottom: 4rem;
}

.style .padding-left-wtb {
	padding-left: 19px;
}

.style .align-left {
	text-align: left;
}

.style .align-center {
	text-align: center;
}

.style .align-right {
	text-align: right;
}

.max-width-b {
	max-width: 40em;
}

.container.max-width-c {
	max-width: 64em;
}

.container.max-width-d {
	max-width: 90em;
}

.container.max-width-e {
	max-width: 120em;
}

.container.max-width-f {
	max-width: 160em;
}

/*************************************************/
/* 

@font-face {
	font-family: 'Acer Foco';
	src: url('//fonts.acer.com/AcerFoco_Blk.eot');
	src: url('//fonts.acer.com/AcerFoco_Blk.eot?#iefix')
		format('embedded-opentype'), url('//fonts.acer.com/AcerFoco_Blk.woff')
		format('woff'), url('//fonts.acer.com/AcerFoco_Blk.ttf')
		format('truetype'), url('//fonts.acer.com/Acerfoco_Blk.svg#Acer Foco')
		format('svg');
	font-weight: 900;
	font-style: normal;
}

@font-face {
	font-family: 'Acer Foco';
	src: url('//fonts.acer.com/AcerFoco_SmBd.eot');W
	src: url('//fonts.acer.com/AcerFoco_SmBd.eot?#iefix')
		format('embedded-opentype'),
		url('//fonts.acer.com/AcerFoco_SmBd.woff') format('woff'),
		url('//fonts.acer.com/AcerFoco_SmBd.ttf') format('truetype'),
		url('//fonts.acer.com/AcerFoco_SmBd.svg#Acer Foco') format('svg');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'Acer Foco';
	src: url('//fonts.acer.com/AcerFoco_Rg.eot');
	src: url('//fonts.acer.com/AcerFoco_Rg.eot?#iefix')
		format('embedded-opentype'), url('//fonts.acer.com/AcerFoco_Rg.woff')
		format('woff'), url('//fonts.acer.com/AcerFoco_Rg.ttf')
		format('truetype'), url('//fonts.acer.com/AcerFoco_Rg.svg#Acer Foco')
		format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Acer Foco';
	src: url('//fonts.acer.com/AcerFoco_Lt.eot');
	src: url('//fonts.acer.com/AcerFoco_Lt.eot?#iefix')
		format('embedded-opentype'), url('//fonts.acer.com/AcerFoco_Lt.woff')
		format('woff'), url('//fonts.acer.com/AcerFoco_Lt.ttf')
		format('truetype'), url('//fonts.acer.com/AcerFoco_Lt.svg#Acer Foco')
		format('svg');
	font-weight: 300;
	font-style: normal;
}

@font-face {
	font-family: 'Acer Foco';
	src: url('//fonts.acer.com/AcerFoco_Blk_it.eot');
	src: url('//fonts.acer.com/AcerFoco_Blk_it.eot?#iefix')
		format('embedded-opentype'),
		url('//fonts.acer.com/AcerFoco_Blk_it.woff') format('woff'),
		url('//fonts.acer.com/AcerFoco_Blk_it.ttf') format('truetype'),
		url('//fonts.acer.com/Acerfoco_Blk_it.svg#Acer Foco') format('svg');
	font-weight: 900;
	font-style: italic;
}

@font-face {
	font-family: 'Acer Foco';
	src: url('//fonts.acer.com/AcerFoco_SmBd_it.eot');
	src: url('//fonts.acer.com/AcerFoco_SmBd_it.eot?#iefix')
		format('embedded-opentype'),
		url('//fonts.acer.com/AcerFoco_SmBd_it.woff') format('woff'),
		url('//fonts.acer.com/AcerFoco_SmBd_it.ttf') format('truetype'),
		url('//fonts.acer.com/AcerFoco_SmBd_it.svg#Acer Foco') format('svg');
	font-weight: bold;
	font-style: italic;
}

@font-face {
	font-family: 'Acer Foco';
	src: url('//fonts.acer.com/AcerFoco_Rg_it.eot');
	src: url('//fonts.acer.com/AcerFoco_Rg_it.eot?#iefix')
		format('embedded-opentype'),
		url('//fonts.acer.com/AcerFoco_Rg_it.woff') format('woff'),
		url('//fonts.acer.com/AcerFoco_Rg_it.ttf') format('truetype'),
		url('//fonts.acer.com/AcerFoco_Rg_it.svg#Acer Foco') format('svg');
	font-weight: normal;
	font-style: italic;
}

@font-face {
	font-family: 'Acer Foco';
	src: url('//fonts.acer.com/AcerFoco_Lt_it.eot');
	src: url('//fonts.acer.com/AcerFoco_Lt_it.eot?#iefix')
		format('embedded-opentype'),
		url('//fonts.acer.com/AcerFoco_Lt_it.woff') format('woff'),
		url('//fonts.acer.com/AcerFoco_Lt_it.ttf') format('truetype'),
		url('//fonts.acer.com/AcerFoco_Lt_it.svg#Acer Foco') format('svg');
	font-weight: 300;
	font-style: italic;
}

@font-face {
	font-family: TTSquares;
	font-weight: normal;
	src: url('TypeType_TTSquares_Regular_0.eot');
	src: url('TypeType_TTSquares_Regular_0.woff') format('woff'),
		url('TypeType_TTSquares_Regular_0.ttf') format('truetype');
}

@font-face {
	font-family: TTSquares;
	font-weight: bold;
	src: url('TypeType_TTSquares_Bold.eot');
	src: url('TypeType_TTSquares_Bold.woff') format('woff'),
		url('TypeType_TTSquares_Bold.ttf') format('truetype');
}

@font-face {
	font-family: TTSquares;
	font-weight: 300;
	src: url('TypeType_TTSquares_Light.eot');
	src: url('TypeType_TTSquares_Light.woff') format('woff'),
		url('TypeType_TTSquares_Light.ttf') format('truetype');
}

@font-face {
	font-family: "Acer Font Icon";
	src: url("//fonts.acer.com/acer-font-icon-434.eot");
	src: url("//fonts.acer.com/acer-font-icon-434.eot?#iefix")
		format("embedded-opentype"),
		url("//fonts.acer.com/acer-font-icon-434.woff") format("woff"),
		url("//fonts.acer.com/acer-font-icon-434.ttf") format("truetype"),
		url("//fonts.acer.com/acer-font-icon-434.svg#acer") format("svg");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Comfortaa';
	src: url('//fonts.acer.com/comfortaa-Bold.eot');
	src: url('//fonts.acer.com/comfortaa-Bold.eot?#iefix')
		format('embedded-opentype'),
		url('//fonts.acer.com/comfortaa-Bold.woff') format('woff'),
		url('//fonts.acer.com/comfortaa-Bold.ttf') format('truetype'),
		url('//fonts.acer.com/comfortaa-Bold.svg#Comfortaa') format('svg');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'Comfortaa';
	src: url('//fonts.acer.com/comfortaa-Regular.eot');
	src: url('//fonts.acer.com/comfortaa-Regular.eot?#iefix')
		format('embedded-opentype'),
		url('//fonts.acer.com/comfortaa-Regular.woff') format('woff'),
		url('//fonts.acer.com/comfortaa-Regular.ttf') format('truetype'),
		url('//fonts.acer.com/comfortaa-Regular.svg#Comfortaa') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Comfortaa';
	src: url('//fonts.acer.com/comfortaa-Light.eot');
	src: url('//fonts.acer.com/comfortaa-Light.eot?#iefix')
		format('embedded-opentype'),
		url('//fonts.acer.com/comfortaa-Light.woff') format('woff'),
		url('//fonts.acer.com/comfortaa-Light.ttf') format('truetype'),
		url('//fonts.acer.com/comfortaa-Light.svg#Comfortaa') format('svg');
	font-weight: 300;
	font-style: normal;
}

.icon {
	font-family: "Acer Font Icon" !important;
	font-style: normal !important;
	font-weight: normal !important;
	font-variant: normal !important;
	text-transform: none !important;
	speak: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	margin-right: 5px;
	margin-left: 5px;
	vertical-align: middle;
}

.icon-ai-account:before {
	content: "\e000";
}

.icon-ai-cart:before {
	content: "\e001";
}

.icon-ai-close:before {
	content: "\e002";
}

.icon-ai-language:before {
	content: "\e003";
}

.icon-ai-less:before {
	content: "\e004";
}

.icon-ai-menu:before {
	content: "\e005";
}

.icon-ai-more:before {
	content: "\e006";
}

.icon-ai-search:before {
	content: "\e007";
}

.icon-ai-arrow-double-left:before {
	content: "\e008";
}

.icon-ai-arrow-double-right:before {
	content: "\e009";
}

.icon-ai-arrow-down:before {
	content: "\e00a";
}

.icon-ai-arrow-drop-down:before {
	content: "\e00b";
}

.icon-ai-arrow-drop-up:before {
	content: "\e00c";
}

.icon-ai-arrow-left:before {
	content: "\e00d";
}

.icon-ai-arrow-right:before {
	content: "\e00e";
}

.icon-ai-arrow-up:before {
	content: "\e00f";
}

.icon-ai-play:before {
	content: "\e010";
}

.icon-ai-alert:before {
	content: "\e011";
}

.icon-ai-calendar:before {
	content: "\e012";
}

.icon-ai-warning:before {
	content: "\e013";
} */

.iframe-container {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%;
	height: 0;
}

.iframe-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.centered {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.contSection {
	position: relative;
}

.contSection .d-top {
	position: inherit;
}

/* --------------- ICON SECTION -------------- */
.style .sectionIcon {
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
}

.style .sectionIcon .row .col {
	padding: 24px;
}

.style .sectionIcon img {
	height: 100px;
}

/*--------flex module classes --------*/
.flexBox {
	position: relative;
	overflow: hidden;
}

.flexMedia {
	position: relative;
	float: left;
	width: 100%;
	height: 100%;
}

.flexContent .over {
	position: absolute;
	/*top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%); /* Safari & Chrome */
	/*	-moz-transform: translateY(-50%); /* Firefox */
	/*	-ms-transform: translateY(-50%); /* Internet Explorer */
	/*	-o-transform: translateY(-50%);*/
	-webkit-backface-visibility: hidden;
	right: 0;
	left: 0;
}
.button.empty-gray-7{
	background: transparent;
    border: 2px solid #616161;
    color: #616161;
}

.align-left {
	text-align: left;
}

.align-right {
	text-align: right;
}

.align-center {
	text-align: center;
}

.clear-left {
	padding-left : 0px !important;
}
.row.resource {
	margin-top: 10px;
}
.resource-content {
	vertical-align: middle;
	align-content: center;
	text-align: center;
	width: 90%;
}
.resource .details {
	overflow-wrap: break-word;
	padding-top: 25px;
}
.resource .actions {
	padding-right: 10px;
	padding-left: 15px;
	padding-top: 25px;
}
.left-image {
	margin-left: auto;
    margin-right: auto;
    display: block;
    max-height: 100%;
    max-width: 100%;
}
.resource .copy-link {
	margin-top: 15px;
}
.resource .full-width {
	width: 100%;
}
.resource .left-image-container {
	height: 215px;	
}


.deviceDetection {
	height: 30px;
	opacity: 0.2;
	position: fixed;
	width: 27px;
	top: 0;
	z-index: 99999;
}

.deviceDetection:after {
	color: #fff;
	content: 'A';
	display: block;
	font-size: 20px;
	font-weight: bold;
	line-height: 30px;
	padding-left: 5px;
	text-align: left;
}

/* ------------------------------- DEVICE A from 0 to 639px ------------------------------- */
@media ( min-width : 0em) {
	#viewportFixer {
		width: 0em;
	}
	.deviceDetection {
		background: red;
	}
	.col.a-12 {
		width: 100%;
	}
	.col.a-push-12 {
		left: 100%;
		right: auto;
	}
	.col.a-pull-12 {
		right: 100%;
		left: auto;
	}
	.col.a-offset-12 {
		margin-left: 100%;
	}
	.col.a-11 {
		width: 91.66666667%;
	}
	.col.a-push-11 {
		left: 91.66666667%;
		right: auto;
	}
	.col.a-pull-11 {
		right: 91.66666667%;
		left: auto;
	}
	.col.a-offset-11 {
		margin-left: 91.66666667%;
	}
	.col.a-10 {
		width: 83.33333333%;
	}
	.col.a-push-10 {
		left: 83.33333333%;
		right: auto;
	}
	.col.a-pull-10 {
		right: 83.33333333%;
		left: auto;
	}
	.col.a-offset-10 {
		margin-left: 83.33333333%;
	}
	.col.a-9 {
		width: 75%;
	}
	.col.a-push-9 {
		left: 75%;
		right: auto;
	}
	.col.a-pull-9 {
		right: 75%;
		left: auto;
	}
	.col.a-offset-9 {
		margin-left: 75%;
	}
	.col.a-8 {
		width: 66.66666667%;
	}
	.col.a-push-8 {
		left: 66.66666667%;
		right: auto;
	}
	.col.a-pull-8 {
		right: 66.66666667%;
		left: auto;
	}
	.col.a-offset-8 {
		margin-left: 66.66666667%;
	}
	.col.a-7 {
		width: 58.33333333%;
	}
	.col.a-push-7 {
		left: 58.33333333%;
		right: auto;
	}
	.col.a-pull-7 {
		right: 58.33333333%;
		left: auto;
	}
	.col.a-offset-7 {
		margin-left: 58.33333333%;
	}
	.col.a-6 {
		width: 50%;
	}
	.col.a-push-6 {
		left: 50%;
		right: auto;
	}
	.col.a-pull-6 {
		right: 50%;
		left: auto;
	}
	.col.a-offset-6 {
		margin-left: 50%;
	}
	.col.a-5 {
		width: 41.66666667%;
	}
	.col.a-push-5 {
		left: 41.66666667%;
		right: auto;
	}
	.col.a-pull-5 {
		right: 41.66666667%;
		left: auto;
	}
	.col.a-offset-5 {
		margin-left: 41.66666667%;
	}
	.col.a-4 {
		width: 33.33333333%;
	}
	.col.a-push-4 {
		left: 33.33333333%;
		right: auto;
	}
	.col.a-pull-4 {
		right: 33.33333333%;
		left: auto;
	}
	.col.a-offset-4 {
		margin-left: 33.33333333%;
	}
	.col.a-3 {
		width: 25%;
	}
	.col.a-push-3 {
		left: 25%;
		right: auto;
	}
	.col.a-pull-3 {
		right: 25%;
		left: auto;
	}
	.col.a-offset-3 {
		margin-left: 25%;
	}
	.col.a-2 {
		width: 16.66666667%;
	}
	.col.a-push-2 {
		left: 16.66666667%;
		right: auto;
	}
	.col.a-pull-2 {
		right: 16.66666667%;
		left: auto;
	}
	.col.a-offset-2 {
		margin-left: 16.66666667%;
	}
	.col.a-1 {
		width: 8.33333333%;
	}
	.col.a-push-1 {
		left: 8.33333333%;
		right: auto;
	}
	.col.a-pull-1 {
		right: 8.33333333%;
		left: auto;
	}
	.col.a-offset-1 {
		margin-left: 8.33333333%;
	}
	.col.a-push-0 {
		left: auto;
	}
	.col.a-pull-0 {
		right: auto;
	}
	.col.a-offset-0 {
		margin-left: 0;
	}
	.b-up, .c-up, .d-up, .e-up, .f-up
.b-only, .c-only, .d-only, .e-only, .f-only, .hide-a-only, .hide-a-up {
		display: none !important;
	}
	.a-only, .a-up {
		display: inherit !important;
	}
	.col.gutter, .row.gutter, .row.gutter-2x {
		padding-left: 0.75rem;
		padding-right: 0.75rem;
	}
	.col.gutter-half, .row.gutter-half {
		padding-left: 0.5rem;
		padding-right: 0.5rem;
	}
}

/* ------------------------------- DEVICE B from 640px to 1023px ------------------------------- */
@media ( min-width : 40em) {
	#viewportFixer {
		width: 38.75em;
	}
	.deviceDetection {
		background: blue;
	}
	.deviceDetection:after {
		content: 'B';
	}
	.col.b-12 {
		width: 100%;
	}
	.col.b-push-12 {
		left: 100%;
		right: auto;
	}
	.col.b-pull-12 {
		right: 100%;
		left: auto;
	}
	.col.b-offset-12 {
		margin-left: 100%;
	}
	.col.b-11 {
		width: 91.66666667%;
	}
	.col.b-push-11 {
		left: 91.66666667%;
		right: auto;
	}
	.col.b-pull-11 {
		right: 91.66666667%;
		left: auto;
	}
	.col.b-offset-11 {
		margin-left: 91.66666667%;
	}
	.col.b-10 {
		width: 83.33333333%;
	}
	.col.b-push-10 {
		left: 83.33333333%;
		right: auto;
	}
	.col.b-pull-10 {
		right: 83.33333333%;
		left: auto;
	}
	.col.b-offset-10 {
		margin-left: 83.33333333%;
	}
	.col.b-9 {
		width: 75%;
	}
	.col.b-push-9 {
		left: 75%;
		right: auto;
	}
	.col.b-pull-9 {
		right: 75%;
		left: auto;
	}
	.col.b-offset-9 {
		margin-left: 75%;
	}
	.col.b-8 {
		width: 66.66666667%;
	}
	.col.b-push-8 {
		left: 66.66666667%;
		right: auto;
	}
	.col.b-pull-8 {
		right: 66.66666667%;
		left: auto;
	}
	.col.b-offset-8 {
		margin-left: 66.66666667%;
	}
	.col.b-7 {
		width: 58.33333333%;
	}
	.col.b-push-7 {
		left: 58.33333333%;
		right: auto;
	}
	.col.b-pull-7 {
		right: 58.33333333%;
		left: auto;
	}
	.col.b-offset-7 {
		margin-left: 58.33333333%;
	}
	.col.b-6 {
		width: 50%;
	}
	.col.b-push-6 {
		left: 50%;
		right: auto;
	}
	.col.b-pull-6 {
		right: 50%;
		left: auto;
	}
	.col.b-offset-6 {
		margin-left: 50%;
	}
	.col.b-5 {
		width: 41.66666667%;
	}
	.col.b-push-5 {
		left: 41.66666667%;
		right: auto;
	}
	.col.b-pull-5 {
		right: 41.66666667%;
		left: auto;
	}
	.col.b-offset-5 {
		margin-left: 41.66666667%;
	}
	.col.b-4 {
		width: 33.33333333%;
	}
	.col.b-push-4 {
		left: 33.33333333%;
		right: auto;
	}
	.col.b-pull-4 {
		right: 33.33333333%;
		left: auto;
	}
	.col.b-offset-4 {
		margin-left: 33.33333333%;
	}
	.col.b-3 {
		width: 25%;
	}
	.col.b-push-3 {
		left: 25%;
		right: auto;
	}
	.col.b-pull-3 {
		right: 25%;
		left: auto;
	}
	.col.b-offset-3 {
		margin-left: 25%;
	}
	.col.b-2 {
		width: 16.66666667%;
	}
	.col.b-push-2 {
		left: 16.66666667%;
		right: auto;
	}
	.col.b-pull-2 {
		right: 16.66666667%;
		left: auto;
	}
	.col.b-offset-2 {
		margin-left: 16.66666667%;
	}
	.col.b-1 {
		width: 8.33333333%;
	}
	.col.b-push-1 {
		left: 8.33333333%;
		right: auto;
	}
	.col.b-pull-1 {
		right: 8.33333333%;
		left: auto;
	}
	.col.b-offset-1 {
		margin-left: 8.33333333%;
	}
	.col.b-push-0 {
		left: auto;
	}
	.col.b-pull-0 {
		right: auto;
	}
	.col.b-offset-0 {
		margin-left: 0;
	}
	.hide-a-only {
		display: inherit !important;
	}
	.a-only, .hide-b-only, .hide-b-up {
		display: none !important;
	}
	.b-only, .b-up {
		display: inherit !important;
	}
	.col.gutter, .row.gutter {
		padding-left: 1rem;
		padding-right: 1rem;
	}
	.col.gutter-half, .row.gutter-half {
		padding-left: 0.5rem;
		padding-right: 0.5rem;
	}
	.row.gutter-2x {
		padding-left: 2rem;
		padding-right: 2rem;
	}
}

/* ------------------------------- DEVICE C from 1024px to 1439px orange ------------------------------- */
@media ( min-width : 64em) {
	#viewportFixer {
		width: 62.75em;
	}
	.deviceDetection {
		background: orange;
	}
	.deviceDetection:after {
		content: 'C';
	}
	.col.c-12 {
		width: 100%;
	}
	.col.c-push-12 {
		left: 100%;
		right: auto;
	}
	.col.c-pull-12 {
		right: 100%;
		left: auto;
	}
	.col.c-offset-12 {
		margin-left: 100%;
	}
	.col.c-11 {
		width: 91.66666667%;
	}
	.col.c-push-11 {
		left: 91.66666667%;
		right: auto;
	}
	.col.c-pull-11 {
		right: 91.66666667%;
		left: auto;
	}
	.col.c-offset-11 {
		margin-left: 91.66666667%;
	}
	.col.c-10 {
		width: 83.33333333%;
	}
	.col.c-push-10 {
		left: 83.33333333%;
		right: auto;
	}
	.col.c-pull-10 {
		right: 83.33333333%;
		left: auto;
	}
	.col.c-offset-10 {
		margin-left: 83.33333333%;
	}
	.col.c-9 {
		width: 75%;
	}
	.col.c-push-9 {
		left: 75%;
		right: auto;
	}
	.col.c-pull-9 {
		right: 75%;
		left: auto;
	}
	.col.c-offset-9 {
		margin-left: 75%;
	}
	.col.c-8 {
		width: 66.66666667%;
	}
	.col.c-push-8 {
		left: 66.66666667%;
		right: auto;
	}
	.col.c-pull-8 {
		right: 66.66666667%;
		left: auto;
	}
	.col.c-offset-8 {
		margin-left: 66.66666667%;
	}
	.col.c-7 {
		width: 58.33333333%;
	}
	.col.c-push-7 {
		left: 58.33333333%;
		right: auto;
	}
	.col.c-pull-7 {
		right: 58.33333333%;
		left: auto;
	}
	.col.c-offset-7 {
		margin-left: 58.33333333%;
	}
	.col.c-6 {
		width: 50%;
	}
	.col.c-push-6 {
		left: 50%;
		right: auto;
	}
	.col.c-pull-6 {
		right: 50%;
		left: auto;
	}
	.col.c-offset-6 {
		margin-left: 50%;
	}
	.col.c-5 {
		width: 41.66666667%;
	}
	.col.c-push-5 {
		left: 41.66666667%;
		right: auto;
	}
	.col.c-pull-5 {
		right: 41.66666667%;
		left: auto;
	}
	.col.c-offset-5 {
		margin-left: 41.66666667%;
	}
	.col.c-4 {
		width: 33.33333333%;
	}
	.col.c-push-4 {
		left: 33.33333333%;
		right: auto;
	}
	.col.c-pull-4 {
		right: 33.33333333%;
		left: auto;
	}
	.col.c-offset-4 {
		margin-left: 33.33333333%;
	}
	.col.c-3 {
		width: 25%;
	}
	.col.c-push-3 {
		left: 25%;
		right: auto;
	}
	.col.c-pull-3 {
		right: 25%;
		left: auto;
	}
	.col.c-offset-3 {
		margin-left: 25%;
	}
	.col.c-2 {
		width: 16.66666667%;
	}
	.col.c-push-2 {
		left: 16.66666667%;
		right: auto;
	}
	.col.c-pull-2 {
		right: 16.66666667%;
		left: auto;
	}
	.col.c-offset-2 {
		margin-left: 16.66666667%;
	}
	.col.c-1 {
		width: 8.33333333%;
	}
	.col.c-push-1 {
		left: 8.33333333%;
		right: auto;
	}
	.col.c-pull-1 {
		right: 8.33333333%;
		left: auto;
	}
	.col.c-offset-1 {
		margin-left: 8.33333333%;
	}
	.col.c-push-0 {
		left: auto;
	}
	.col.c-pull-0 {
		right: auto;
	}
	.col.c-offset-0 {
		margin-left: 0;
	}
	.c-only, .c-up {
		display: inherit !important;
	}
	.hide-b-only {
		display: inherit !important;
	}
	.b-only, .hide-c-only, .hide-c-up {
		display: none !important;
	}
	.col.gutter, .row.gutter {
		padding-left: 1.25rem;
		padding-right: 1.25rem;
	}
	.col.gutter-half, .row.gutter-half {
		padding-left: 0.625rem;
		padding-right: 0.625rem;
	}
	.row.gutter-2x {
		padding-left: 2rem;
		padding-right: 2rem;
	}
}

/* ------------------------------- DEVICE D from 90em to 119.999em - from 1440px to 1919px ------------------------------- */
@media ( min-width : 90em) {
	#viewportFixer {
		width: 88.75em;
	}
	.deviceDetection {
		background: green;
	}
	.deviceDetection:after {
		content: 'D';
	}
	.col.d-12 {
		width: 100%;
	}
	.col.d-push-12 {
		left: 100%;
		right: auto;
	}
	.col.d-pull-12 {
		right: 100%;
		left: auto;
	}
	.col.d-offset-12 {
		margin-left: 100%;
	}
	.col.d-11 {
		width: 91.66666667%;
	}
	.col.d-push-11 {
		left: 91.66666667%;
		right: auto;
	}
	.col.d-pull-11 {
		right: 91.66666667%;
		left: auto;
	}
	.col.d-offset-11 {
		margin-left: 91.66666667%;
	}
	.col.d-10 {
		width: 83.33333333%;
	}
	.col.d-push-10 {
		left: 83.33333333%;
		right: auto;
	}
	.col.d-pull-10 {
		right: 83.33333333%;
		left: auto;
	}
	.col.d-offset-10 {
		margin-left: 83.33333333%;
	}
	.col.d-9 {
		width: 75%;
	}
	.col.d-push-9 {
		left: 75%;
		right: auto;
	}
	.col.d-pull-9 {
		right: 75%;
		left: auto;
	}
	.col.d-offset-9 {
		margin-left: 75%;
	}
	.col.d-8 {
		width: 66.66666667%;
	}
	.col.d-push-8 {
		left: 66.66666667%;
		right: auto;
	}
	.col.d-pull-8 {
		right: 66.66666667%;
		left: auto;
	}
	.col.d-offset-8 {
		margin-left: 66.66666667%;
	}
	.col.d-7 {
		width: 58.33333333%;
	}
	.col.d-push-7 {
		left: 58.33333333%;
		right: auto;
	}
	.col.d-pull-7 {
		right: 58.33333333%;
		left: auto;
	}
	.col.d-offset-7 {
		margin-left: 58.33333333%;
	}
	.col.d-6 {
		width: 50%;
	}
	.col.d-push-6 {
		left: 50%;
		right: auto;
	}
	.col.d-pull-6 {
		right: 50%;
		left: auto;
	}
	.col.d-offset-6 {
		margin-left: 50%;
	}
	.col.d-5 {
		width: 41.66666667%;
	}
	.col.d-push-5 {
		left: 41.66666667%;
		right: auto;
	}
	.col.d-pull-5 {
		right: 41.66666667%;
		left: auto;
	}
	.col.d-offset-5 {
		margin-left: 41.66666667%;
	}
	.col.d-4 {
		width: 33.33333333%;
	}
	.col.d-push-4 {
		left: 33.33333333%;
		right: auto;
	}
	.col.d-pull-4 {
		right: 33.33333333%;
		left: auto;
	}
	.col.d-offset-4 {
		margin-left: 33.33333333%;
	}
	.col.d-3 {
		width: 25%;
	}
	.col.d-push-3 {
		left: 25%;
		right: auto;
	}
	.col.d-pull-3 {
		right: 25%;
		left: auto;
	}
	.col.d-offset-3 {
		margin-left: 25%;
	}
	.col.d-2 {
		width: 16.66666667%;
	}
	.col.d-push-2 {
		left: 16.66666667%;
		right: auto;
	}
	.col.d-pull-2 {
		right: 16.66666667%;
		left: auto;
	}
	.col.d-offset-2 {
		/* margin-left: 16.66666667%; */
        margin-left: 3.666667%;
	}
	.col.d-1 {
		width: 8.33333333%;
	}
	.col.d-push-1 {
		left: 8.33333333%;
		right: auto;
	}
	.col.d-pull-1 {
		right: 8.33333333%;
		left: auto;
	}
	.col.d-offset-1 {
		margin-left: 8.33333333%;
	}
	.col.d-push-0 {
		left: auto;
	}
	.col.d-pull-0 {
		right: auto;
	}
	.col.d-offset-0 {
		margin-left: 0;
	}
	.d-only, .d-up {
		display: inherit !important;
	}
	.hide-c-only {
		display: inherit !important;
	}
	.c-only, .hide-d-only, .hide-d-up {
		display: none !important;
	}
	.col.gutter, .row.gutter {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
	.col.gutter-half, .row.gutter-half {
		padding-left: 0.75rem;
		padding-right: 0.75rem;
	}
	.row.gutter-2x {
		padding-left: 2.5rem;
		padding-right: 2.5rem;
	}
}

/* ------------------------------- DEVICE E from 1920px to 2559px ------------------------------- */
@media ( min-width : 120em) {
	#viewportFixer {
		width: 118.75em;
	}
	.deviceDetection {
		background: grey;
	}
	.deviceDetection:after {
		content: 'E';
	}
	.col.e-12 {
		width: 100%;
	}
	.col.e-push-12 {
		left: 100%;
		right: auto;
	}
	.col.e-pull-12 {
		right: 100%;
		left: auto;
	}
	.col.e-offset-12 {
		margin-left: 100%;
	}
	.col.e-11 {
		width: 91.66666667%;
	}
	.col.e-push-11 {
		left: 91.66666667%;
		right: auto;
	}
	.col.e-pull-11 {
		right: 91.66666667%;
		left: auto;
	}
	.col.e-offset-11 {
		margin-left: 91.66666667%;
	}
	.col.e-10 {
		width: 83.33333333%;
	}
	.col.e-push-10 {
		left: 83.33333333%;
		right: auto;
	}
	.col.e-pull-10 {
		right: 83.33333333%;
		left: auto;
	}
	.col.e-offset-10 {
		margin-left: 83.33333333%;
	}
	.col.e-9 {
		width: 75%;
	}
	.col.e-push-9 {
		left: 75%;
		right: auto;
	}
	.col.e-pull-9 {
		right: 75%;
		left: auto;
	}
	.col.e-offset-9 {
		margin-left: 75%;
	}
	.col.e-8 {
		width: 66.66666667%;
	}
	.col.e-push-8 {
		left: 66.66666667%;
		right: auto;
	}
	.col.e-pull-8 {
		right: 66.66666667%;
		left: auto;
	}
	.col.e-offset-8 {
		margin-left: 66.66666667%;
	}
	.col.e-7 {
		width: 58.33333333%;
	}
	.col.e-push-7 {
		left: 58.33333333%;
		right: auto;
	}
	.col.e-pull-7 {
		right: 58.33333333%;
		left: auto;
	}
	.col.e-offset-7 {
		margin-left: 58.33333333%;
	}
	.col.e-6 {
		width: 50%;
	}
	.col.e-push-6 {
		left: 50%;
		right: auto;
	}
	.col.e-pull-6 {
		right: 50%;
		left: auto;
	}
	.col.e-offset-6 {
		margin-left: 50%;
	}
	.col.e-5 {
		width: 41.66666667%;
	}
	.col.e-push-5 {
		left: 41.66666667%;
		right: auto;
	}
	.col.e-pull-5 {
		right: 41.66666667%;
		left: auto;
	}
	.col.e-offset-5 {
		margin-left: 41.66666667%;
	}
	.col.e-4 {
		width: 33.33333333%;
	}
	.col.e-push-4 {
		left: 33.33333333%;
		right: auto;
	}
	.col.e-pull-4 {
		right: 33.33333333%;
		left: auto;
	}
	.col.e-offset-4 {
		margin-left: 33.33333333%;
	}
	.col.e-3 {
		width: 25%;
	}
	.col.e-push-3 {
		left: 25%;
		right: auto;
	}
	.col.e-pull-3 {
		right: 25%;
		left: auto;
	}
	.col.e-offset-3 {
		margin-left: 25%;
	}
	.col.e-2 {
		width: 16.66666667%;
	}
	.col.e-push-2 {
		left: 16.66666667%;
		right: auto;
	}
	.col.e-pull-2 {
		right: 16.66666667%;
		left: auto;
	}
	.col.e-offset-2 {
		margin-left: 16.66666667%;
	}
	.col.e-1 {
		width: 8.33333333%;
	}
	.col.e-push-1 {
		left: 8.33333333%;
		right: auto;
	}
	.col.e-pull-1 {
		right: 8.33333333%;
		left: auto;
	}
	.col.e-offset-1 {
		margin-left: 8.33333333%;
	}
	.col.e-push-0 {
		left: auto;
	}
	.col.e-pull-0 {
		right: auto;
	}
	.col.e-offset-0 {
		margin-left: 0;
	}
	.e-only, .e-up {
		display: inherit !important;
	}
	.hide-d-only {
		display: inherit !important;
	}
	.d-only, .hide-e-only, .hide-e-up {
		display: none !important;
	}
	.col.gutter, .row.gutter {
		padding-left: 1.75rem;
		padding-right: 1.75rem;
	}
	.col.gutter-half, .row.gutter-half {
		padding-left: 0.875rem;
		padding-right: 0.875rem;
	}
	.row.gutter-2x {
		padding-left: 2.5rem;
		padding-right: 2.5rem;
	}
}

/* ------------------------------- DEVICE F from 2560px to up ------------------------------- */
@media ( min-width : 160em) {
	#viewportFixer {
		width: 158.75em;
	}
	.deviceDetection {
		background: black;
	}
	.deviceDetection:after {
		content: 'F';
	}
	.col.f-12 {
		width: 100%;
	}
	.col.f-push-12 {
		left: 100%;
		right: auto;
	}
	.col.f-pull-12 {
		right: 100%;
		left: auto;
	}
	.col.f-offset-12 {
		margin-left: 100%;
	}
	.col.f-11 {
		width: 91.66666667%;
	}
	.col.f-push-11 {
		left: 91.66666667%;
		right: auto;
	}
	.col.f-pull-11 {
		right: 91.66666667%;
		left: auto;
	}
	.col.f-offset-11 {
		margin-left: 91.66666667%;
	}
	.col.f-10 {
		width: 83.33333333%;
	}
	.col.f-push-10 {
		left: 83.33333333%;
		right: auto;
	}
	.col.f-pull-10 {
		right: 83.33333333%;
		left: auto;
	}
	.col.f-offset-10 {
		margin-left: 83.33333333%;
	}
	.col.f-9 {
		width: 75%;
	}
	.col.f-push-9 {
		left: 75%;
		right: auto;
	}
	.col.f-pull-9 {
		right: 75%;
		left: auto;
	}
	.col.f-offset-9 {
		margin-left: 75%;
	}
	.col.f-8 {
		width: 66.66666667%;
	}
	.col.f-push-8 {
		left: 66.66666667%;
		right: auto;
	}
	.col.f-pull-8 {
		right: 66.66666667%;
		left: auto;
	}
	.col.f-offset-8 {
		margin-left: 66.66666667%;
	}
	.col.f-7 {
		width: 58.33333333%;
	}
	.col.f-push-7 {
		left: 58.33333333%;
		right: auto;
	}
	.col.f-pull-7 {
		right: 58.33333333%;
		left: auto;
	}
	.col.f-offset-7 {
		margin-left: 58.33333333%;
	}
	.col.f-6 {
		width: 50%;
	}
	.col.f-push-6 {
		left: 50%;
		right: auto;
	}
	.col.f-pull-6 {
		right: 50%;
		left: auto;
	}
	.col.f-offset-6 {
		margin-left: 50%;
	}
	.col.f-5 {
		width: 41.66666667%;
	}
	.col.f-push-5 {
		left: 41.66666667%;
		right: auto;
	}
	.col.f-pull-5 {
		right: 41.66666667%;
		left: auto;
	}
	.col.f-offset-5 {
		margin-left: 41.66666667%;
	}
	.col.f-4 {
		width: 33.33333333%;
	}
	.col.f-push-4 {
		left: 33.33333333%;
		right: auto;
	}
	.col.f-pull-4 {
		right: 33.33333333%;
		left: auto;
	}
	.col.f-offset-4 {
		margin-left: 33.33333333%;
	}
	.col.f-3 {
		width: 25%;
	}
	.col.f-push-3 {
		left: 25%;
		right: auto;
	}
	.col.f-pull-3 {
		right: 25%;
		left: auto;
	}
	.col.f-offset-3 {
		margin-left: 25%;
	}
	.col.f-2 {
		width: 16.66666667%;
	}
	.col.f-push-2 {
		left: 16.66666667%;
		right: auto;
	}
	.col.f-pull-2 {
		right: 16.66666667%;
		left: auto;
	}
	.col.f-offset-2 {
		margin-left: 16.66666667%;
	}
	.col.f-1 {
		width: 8.33333333%;
	}
	.col.f-push-1 {
		left: 8.33333333%;
		right: auto;
	}
	.col.f-pull-1 {
		right: 8.33333333%;
		left: auto;
	}
	.col.f-offset-1 {
		margin-left: 8.33333333%;
	}
	.col.f-push-0 {
		left: auto;
	}
	.col.f-pull-0 {
		right: auto;
	}
	.col.f-offset-0 {
		margin-left: 0;
	}
	.f-only, .f-up {
		display: inherit !important;
	}
	.hide-e-only {
		display: inherit !important;
	}
	.e-only, .hide-f-only, .hide-f-up {
		display: none !important;
	}
	.col.gutter, .row.gutter {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
	.col.gutter-half, .row.gutter-half {
		padding-left: 0.75rem;
		padding-right: 0.75rem;
	}
	.row.gutter-2x {
		padding-left: 3rem;
		padding-right: 3rem;
	}
}