.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; }

}
	
/* ------------------------------- DEVICE B from 640px to 1023px ------------------------------- */
@media (min-width: 40em) {
	
	#viewportFixer {
	width: 40em; }
	
  .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; }

  .b-only,
  .b-up {
    display: inherit !important; }
    
  .hide-a-only {
    display: inherit !important; }

  .a-only,
  .hide-b-only,
  .hide-b-up {
    display: none !important; }

  .col.gutter,
  .row.gutter {
    padding-left: 1rem;
    padding-right: 1rem; }

  .row.gutter-2x {
    padding-left: 2rem;
    padding-right: 2rem; } 
    
}

/* ------------------------------- DEVICE C from 1024px to 1439px orange ------------------------------- */
@media (min-width: 64em) {
	
	#viewportFixer {
	width: 64em; }
	
  .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; }

  .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: 90em; }
	
  .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%; }

  .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; }

  .row.gutter-2x {
    padding-left: 2.5rem;
    padding-right: 2.5rem; } 
}

/* ------------------------------- DEVICE E from 1920px to 2559px ------------------------------- */
@media (min-width: 120em) {
	
	#viewportFixer {
	width: 120em; }
	
  .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; }

  .row.gutter-2x {
    padding-left: 2.5rem;
    padding-right: 2.5rem; } 
}

/* ------------------------------- DEVICE F from 2560px to up ------------------------------- */
@media (min-width: 160em) {
	
	#viewportFixer {
	width: 160em; }
	
  .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.75rem;
    padding-right: 1.75rem; }

  .row.gutter-2x {
    padding-left: 3rem;
    padding-right: 3rem; } }