/* Colors:  #009dff */

body {
    font-size: 18px;
    font-family: 'Lato', 'Arial', sans-serif;
    text-rendering: optimizeLegibility;
}
body, select, input, textarea {color: #444;}
*,p,h1,h2,h3,h4,h5,span,a,select {font-weight: 300;}

a {color: #444;}
a:hover {color: #69f;}
::-moz-selection{background: #fcd700; color: #fff; text-shadow: none;}
::selection {background: rgb(168, 149, 0); color: #fff; text-shadow: none;}

a:link {-webkit-tap-highlight-color: #888;}
a {text-decoration: none;}

ins {background-color: #fcd700; color: #000; text-decoration: none;}
mark {background-color: #fcd700; color: #000; font-style: italic; font-weight: bold;}

input:-moz-placeholder { color:#a9a9a9; }
textarea:-moz-placeholder { color:#a9a9a9; }

blockquote {padding: 16px; background: #eee;}
/*                         */
/*    U N I V E R S A L    */
/*                         */
.justified {text-align: justify;}
.centered {text-align: center;}
.uppercase {text-transform: uppercase;}
*,
*:hover,
*:active,
*:link {outline: none;}
select,
input,
textarea,
input[type="submit"] {
    width: 10em;
    font-family: 'Lato', 'Arial', sans-serif;
    font-weight: 300;
}
.row {margin: 0; padding: 0;}
.page-container {
    width: 75%;
    margin: 0 auto;
}
.tile {
    margin: 0;
    padding: 3em 3em 0 3em;
}
.retail-tile {
    margin: 0;
    padding: 3em 1em 0 1em;
    font-size: 85%;
    text-align: left;
    word-spacing: 0.25em;
}
.retail-tile p {
	padding: 0 1em 0 1em;
}
.retail-tile .tile-image img {
    border-radius: 16px;
}
.retail-tile .price {
    text-align: center;
    font-size: 2em;
    font-weight: 400;
	color: #009dff; 
}
.available {
    padding-left: 1em;
	font-size: 1.5em;
	color: #009dff; 
}
.recommended-icon {
    padding-right: 1em;
    font-size: 2em;
	color: #009dff;
}
.recommended-text {
    margin-bottom: 1em;
    text-align: center;
    font-weight: 400;
    color: #009dff;
}
.tile:nth-child(4) {
    clear:left;
}
.tile-intro {
    margin-bottom: 1em;
    text-align: justify;
}
.tile-outro {margin-top: 1em;}
.tile-3d-logo {
    padding-top: 1em;
	max-width: 90%;
    margin: auto;
}
.tile-list {padding:0 2vw;}
.tile i {color: #009dff;}
.tile-image img,
.tile-video video {
    display: block;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid rgba(0, 157, 255, 0.25);
    box-shadow: 1px 1px 10px rgba(0,0,0,.25);
}
.video-description {
	text-align: center;
}
.tile-image img {
    margin-top: .5em;
    margin-bottom: 1em;;
    width: 90%;
    border-radius: 50%;
}
.tile-image {
    overflow: hidden;
    max-width: 400px;
    margin: 0 auto 1em auto;
}
.tile-video {
    margin-top: .25em;
}
.tile-video video {
    width: 96%;
    height: auto;
    border-radius: 16px;
}
.margin-l {padding-left: 1em;}
.margin-l-s {padding-left: 1em;}
.margin-bottom-1em {margin-bottom: 1em;}
.margin-bottom-2em {margin-bottom: 2em;}
.margin-bottom-3em {margin-bottom: 3em;}
.margin-bottom-4em {margin-bottom: 4em;}
.margin-bottom-5em {margin-bottom: 5em;}
.margin-bottom-6em {margin-bottom: 6em;}
.linespace-1em {padding-bottom: 1em;}
.linespace-15em {padding-bottom: 1.5em;}
.linespace-2em {padding-bottom: 2em;}
.linespace-3em {padding-bottom: 3em;}
.linespace-4em {padding-bottom: 4em;}
.linespace-5em {padding-bottom: 4em;}
.linespace-05em {padding-bottom: .5em;}

.ion-checkmark {padding-right: 0.5em;}
hr {
    display: block;
    border: 0px;
    border-bottom: 1px solid #E0E0E0;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
}
section h1 {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .2em;
    word-spacing: .3em;
    font-size: 190%;
}
section h1:after {
    display: block;
    margin: .8em auto;
    margin-bottom: 1.5em;
    height: 3px;
    width: 4em;
    background-color: #009dff;
    content: "";
}
section h2 {
    margin-bottom: 1em;;
    text-align: center;
    text-transform: uppercase;
    font-size: 115%;
    font-weight: normal;
}
.noupper {
    text-transform: none;
}

p {line-height: 1.45em;}

.box-shadow {box-shadow: 1px 1px 10px rgba(0,0,0,.1);}
.text-shadow {
    text-shadow: 0px 0px .5em rgba(0,0,0,.3), 0px 0px 1em rgba(0,0,0,.75);
}
strong {font-weight: normal;}
section {
    padding: 4em 0;
}
.section-intro {
    text-align: justify;
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 2em;
}
.box-info {
    width: 80%;
    margin: 0 auto;
    margin-top: 2.5em;
    padding: .5em 0;
    background-color: rgba(0, 157, 255, 0.16);
    border: 1px solid rgba(0, 157, 255, 0.12);
    font-size: 110%;
    text-align: center;
    color: #444;
    border-radius: 1em;
}
.good-deals .min-cost {
	margin-top: 0;
}

/*    Icons:     ;*/
i {
    display: inline-block;
    text-align: center;
    vertical-align: middle; 
    line-height: 0px;
    margin-top: -0.1em;
}
.icon-big {
    display: block;
    margin-bottom: 1em;
    font-size: 325%;
    color: #009dff;
}
.icon-tile-header,
.icon-tile-header-right{
    display: inline-block;
    font-size: 150%;
    margin-right: .5em;
    color: #009dff;
}
.icon-tile-header-right {
    margin-right: 0;
    margin-left: .5em;    
}
.multi-icons {
    text-align: center;
}
.multi-icons i:first-child {margin-left: 0;}
.multi-icons i:last-child {margin-right: 0;}
.multi-icon {
    margin-left: 0.1em;
    margin-right: 0.1em;
    display: inline-block;
}
.header-bottom {
    display: block;
    width: 100%;
    position: absolute;
    bottom: 1em;
    letter-spacing: .05em;
    font-size: 200%;
}
.header-bottom .systems-container {
	letter-spacing: .15em;
}

/*                   */
/*    H E A D E R    */
/*                   */
header {
    height: 100vh;
    min-height: 500px;
    max-height: 100%;
    background-image: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.45)), url(images/header-01.jpg);
    background-position: center right;
    background-size: cover;
    color: #fff;
    position: relative;
/*    background-attachment: fixed;*/
}
.header-top-panel {
    background-color: rgba(0,0,0,.4);
}
.header-top-light {
    height: .8em;
    background: linear-gradient(to left, rgba(0,0,0,0) 0%, #009dff 35%, #009dff 65%, rgba(0,0,0,0) 100%);
}
.header-top-message {
    background-color: rgba(248, 124, 0, 0.41);
}
.header-top-message p {
    font-weight: bold;
    font-size: 90%;
    text-transform: uppercase;
    text-align: center;
}


/* Logo */
.logo {
    float: left;
    margin-top: 2em;
}
.logo img {width: 100%;}

/*         */
/* M E N U */
/*         */

.header-right {
    display: inline-block;
    float: right;
    margin-top: 2.25em;
}
.header-contact {
    float: right;
    font-size: 90%;
    letter-spacing: .07em;
    clear: both;
}
.header-contact span {font-weight: normal;}
.header-contact a {font-weight: normal;}
.telephone-number i {
    transition: transform 2s;
}
.telephone-number:hover i {
    transform: rotateY(360deg);
}
.header-contact i {
    font-size: 150%;
    margin-right: 0.25em;
}
.header-contact a {
    margin-left: .25em;
    padding: .3em .5em;
    color: #fff;
    border-radius: 200px;
    border: 2px solid rgba(0, 157, 255, 0.25);
    box-sizing: border-box;
    background-color: rgba(0, 157, 255, 0.4);
    transition: border .5s, background-color .5s;
}
.header-contact a:hover {
    border: 2px solid #fff;
    background-color: rgba(0, 157, 255, 0.8);
    border: 2px solid rgb(97, 194, 255);
}
.header-menu {
    float: right;
    margin-top: 1em;
    text-transform: uppercase;
    clear: both;
}

/*   M E N U   I T E M S   */
.menu i {
    display: none;
    font-size: 120%;
    margin-top: -.2em;
    margin-right: 0.2em;
}
.menu a {
    color: #fff;    
    padding-bottom: .2em;
    font-weight: bold;
    letter-spacing: 2px;
    border-bottom: 3px solid transparent;
    transition: border-bottom .5s;
    box-sizing: border-box;
}
.menu a:hover {
    border-bottom: 3px solid #009dff;
}
.menu .main-menu:hover .submenu {
    display: block;
    visibility: visible;
    opacity: 1;
    right: 0;
}
.menu li {
    float:left;
}
.main-menu {
    position: relative;
    margin-left: 1.25em;
}
#menu-home {
    position: absolute;
    visibility: hidden;
    margin-left: 0;
}
.submenu {
    width: 18em;
    float: none;
    display: block;
    position: absolute;
    left: 0;
    top: 146%;
    visibility: hidden;
    opacity: 0;
    font-size: 85%;
    transition: opacity .5s, visibility .5s;
}
.submenu a {
    padding-bottom: 0.025em;
    border-bottom: 2px solid transparent;
}
.submenu a:hover {
   border-bottom: 2px solid #009dff;
}
.submenu li {
    float: none;
    padding: 0;
    margin: .25em 0;
}
.welcome {
    margin-top: 29vh;
}
.welcome .page-container {
    position: relative;
}

.welcome h1 {
    text-transform: uppercase;
    font-size: 300%;
    word-spacing: .2em;
    padding:0;
}
.welcome h2 {
    font-size: 220%;
    word-spacing: .2em;
}
.welcome i {
    font-size: 1.4em;
    padding: 0;
    padding-right: .5em;
}
.welcome a {
 font-weight: normal;
}
.welcome .btn {
    margin-top: 2em;
    padding: .5em .5em;
    border: 2px solid #fff;
    border-radius: 18px;
}
/*   C L O C K   */
#open {display: none;}
#close {display: none;}

#date {opacity: 0; transition: opacity .5s;}
#open-or-close {opacity: 0; transition: opacity 3s;}
/*#open {opacity: 0; transition: opacity 5s;}*/

.header-bottom .open-or-close-container {
    display: inline-block;
    position: absolute;
    top: -.25vh;
    font-size: 50%;
}
.header-bottom .date-container {
    display: inline-block;
    position: absolute;
    bottom: -0.15em;
    font-size: 50%;
}
.header-bottom .systems-container {
    display: inline-block;
    float: right;
    font-size: 100%;
}

.open-or-close-container i {
    font-size: 120%;
    margin-right: .5em;
}
#open i {color: chartreuse;}
#close i {color: crimson;}
/* S E R V I C E S */


/* S A L E S */
.retail {
    background-color: #F3F3F3;
}
.retail #good-deals {
    padding-top: 3em;
}
.retail .box-info {
	margin-top: 3.5em;
}
/* A B O U T   U S */
/*.about_us {
    color: #fff;
    background-image: linear-gradient(rgba(0,0,0,.40), rgba(0,0,0,.40)), url(images/about.jpg);
    background-position: center;
    background-size: 80% 100%;
    background-repeat: no-repeat;
}
*/
#googleMap {
    width: 100%;
    height: 100%;
    border-radius: 8px;
}
.mapBox {
    padding: 12px;
    height: 500px;
    border: 1px solid rgba(0, 157, 255, 0.15);
    border-radius: 12px;
    background-color: #F3F3F3;
}
.about_us .row {
    width: 80%;
    margin: 1em auto 0 auto;
}
.business-motto {
    margin-top: 0;
    padding-top: .25em;
}
@media only screen and (max-width: 992px) {
    .business-motto>h2 {
        margin-top: 3em;
    }
    .tile-3d-logo {
        padding-top: 3em;
    }
}

/*   C O N T A C T   F O R M   */
.contact-form {
    width: 55%;
    margin-left: auto;
    margin-right: auto;
    padding: 2em;
    background-color: #F3F3F3;
    border: 1px solid rgba(0, 157, 255, 0.15);
    border-radius: 8px;
}
.contact-form .row {padding-bottom: 1em}
.contact-form .row:last-child {padding-bottom: 0}

.form-messages {
    margin: 0 auto 1em auto;
    padding: .25em;
    text-align: center;
    border-radius: 6px;
}
.success {background-color: rgb(146, 226, 171)}
.error {background-color: rgb(227, 122, 122)}

input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
    width: 100%;
}
textarea {
    max-width: 100%;
    min-width: 100%;
    height: 10em;
    min-height: 6em;
    max-height: 24em;
}
/* F O O T E R */
footer {
    color: #fff;
    background-color: #444;
}
.tile-footer {
    margin-top: 3em;
    padding: 0 5vw;
}
footer .footer-header {
    margin-bottom: 1em;
    word-spacing: .5em;
    letter-spacing: 2px;
    font-weight: normal;
    font-size: 105%;
    text-transform: uppercase;
}
.copyright p {
    margin-top: 2em;
    margin-bottom: 3em;
    text-align: center;
    font-size: 90%;
}
/* UNIVERSAL */
.btn {
    display: inline-block;
    padding: .15em .5em;
    border-radius: 10px;
    border: 0px;
    color: #fff;
    background-color: rgba(0, 157, 255, 0.71);
    text-shadow: none;
    font-weight: 400;
    transition: all .5s;
}
.btn:hover {
    color: #fff;
    background-color: #009dff;
}
.invisible {
    visibility: hidden;
    opacity: 0;
}
.visible {
    visibility: visible;
    opacity: 1;
}
.bold {
    font-weight: 400;
}
/*                     */
/* F I X E D   M E N U */
/*                     */
.fixed {
/*    display: none;*/
    position: fixed;
    top:0;
    left: 0;
    width: 100%;
    height: 2em;
    padding-bottom: 2.2em;
    font-size: 90%;
    background-color: rgba(68, 68, 68, 0.85);
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.25);
    z-index: 9999;
}
.fixed .menu a {
    width: auto;
}
.fixed .animatedMenu01,
.fixed .animatedMenu02,
.fixed .animatedMenu03,
.fixed .animatedMenu04 {
    animation:none;
}
.fixed .submenu {
    padding: .25em 1em;
    background-color: rgba(68, 68, 68, 0.85);
}
.fixed .header-right{
    margin-top: .5em;
}
.fixed .header-contact {
    display: none;
}
.fixed #menu-home {
    display: inline-block;
    margin-left: 0;
    position: static;
    visibility: visible;
}
.fixed .logo,
.fixed .header-menu {
    margin-top: 0;
}
.fixed .logo img:first-child {
    display: inline-block;
    margin-top: 0.1em;
    height: 1.95em;
    width: auto;
}
.fixed a {text-shadow: none;}
.fixed i {display: inline-block;}

.fixed .logo img {
        display: inline-block;
        width: 60%;
}

/* M O B I L E   M E N U */
.mobile-nav-icon {display: none;}
.fixed .mobile-nav-icon {
    margin: 0;
    padding: 0;
    font-size: 175%;
    float: right;
    color: #fff;
    cursor: pointer;
}

/*-------------------------*/
/*   A N I M A T I O N S   */
/*-------------------------*/
/*!
 * animate.css -http://daneden.me/animate
 * Version - 3.5.1
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2016 Daniel Eden
 */

.js--wp-1,
.js--wp-2,
.js--wp-3,
.js--wp-4,
.js--wp-5,
.js--wp-6,
.js--wp-7,
.js--wp-8,
.js--wp-9,
.js--wp-offer-01,
.js--wp-offer-02,
.js--wp-offer-03,
.js--wp-offer-04,
.js--wp-offer-05,
.js--wp-offer-06,
.js--wp-offer-07,
.js--wp-offer-08,
.js--wp-video1,
.js--wp-video2,
.js--wp-google,
.js--wp-contact-us {
    opacity: 0;
}
.js--wp-1.animated,
.js--wp-2.animated,
.js--wp-3.animated,
.js--wp-4.animated,
.js--wp-5.animated,
.js--wp-6.animated,
.js--wp-7.animated,
.js--wp-8.animated,
.js--wp-9.animated,
.js--wp-offer-01.animated,
.js--wp-offer-02.animated,
.js--wp-offer-03.animated,
.js--wp-offer-04.animated,
.js--wp-offer-05.animated,
.js--wp-offer-06.animated,
.js--wp-offer-07.animated,
.js--wp-offer-08.animated,
.js--wp-video1.animated,
.js--wp-video2.animated,
.js--wp-google.animated,
.js--wp-contact-us.animated {
    opacity: 1;
}

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

.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.animated.flipOutX,
.animated.flipOutY,
.animated.bounceIn,
.animated.bounceOut {
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}

.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}
@-webkit-keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

@keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

.zoomInUp {
  -webkit-animation-name: zoomInUp;
  animation-name: zoomInUp;
}

@keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}

@-webkit-keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

/*   A N I M A T I O N S   */

body {
    opacity: 0;
    -webkit-animation: fadeIn 1s forwards;
            animation: fadeIn 1s forwards;
    -webkit-animation-delay: 0s;
            animation-delay: 0s;
}
.header-top-message {
    opacity: 0;
    -webkit-animation: fadeSlideInFromTop .5s forwards;
            animation: fadeSlideInFromTop .5s forwards;
    -webkit-animation-delay: .85s;
            animation-delay: .85s;
}
/*
#welcome-btn {
    -webkit-animation: colorPulseBlue 2s steps(16, end) infinite;
            animation: colorPulseBlue 2s steps(16, end) infinite;
    -webkit-animation-delay: 1s;
            animation-delay: 1s;
}
*/
.header-top-panel {
    opacity: 0;
    -webkit-animation: fadeIn 2s forwards;
            animation: fadeIn 2s forwards;
    -webkit-animation-delay: 1.25s;
            animation-delay: 1.25s;
}
.logo {
    opacity: 0;
    -webkit-animation: fadeSlideInFromBottom .5s forwards;
            animation: fadeSlideInFromBottom .5s forwards;
    -webkit-animation-delay: .65s;
            animation-delay: .65s;
}
.header-right {
    opacity: 0;
    -webkit-animation: fadeSlideInFromBottom .5s forwards;
            animation: fadeSlideInFromBottom .5s forwards;
    -webkit-animation-delay: .75s;
            animation-delay: .75s;
}
.animatedMenu01,
.animatedMenu02,
.animatedMenu03,
.animatedMenu04 {
    -webkit-animation: colorPulseMenu 3s steps(48, end) infinite;
            animation: colorPulseMenu 3s steps(48, end) infinite;
    -webkit-animation-delay: 1s;
            animation-delay: 1s;   
}
.animatedMenu02 {
    -webkit-animation-delay: 1.2s;
            animation-delay: 1.2s;   
}
.animatedMenu03 {
    -webkit-animation-delay: 1.4s;
            animation-delay: 1.4s;   
}
.animatedMenu04 {
    -webkit-animation-delay: 1.6s;
            animation-delay: 1.6s;   
}
.welcome {
    opacity: 0;
    -webkit-animation: zoomIn 2s forwards;
            animation: zoomIn 2s forwards;
    -webkit-animation-delay: 1s;
            animation-delay: 1s;
}
.header-bottom {
    opacity: 0;
    -webkit-animation: fadeSlideInFromBottom 1s forwards;
            animation: fadeSlideInFromBottom 1s forwards;
    -webkit-animation-delay: 1.5s;
            animation-delay: 1.5s;
}


/*M E N U*/
.menu li:nth-child(1),
.menu li:nth-child(2),
.menu li:nth-child(3),
.menu li:nth-child(4),
.menu li:nth-child(5){
    opacity: 0;
    -webkit-animation: zoomIn .75s forwards;
            animation: zoomIn .75s forwards;
    -webkit-animation-delay: .7;
            animation-delay: .7s;
}
.menu li:nth-child(2) {
    -webkit-animation-delay: .9s;
            animation-delay: .9s;	
}
.menu li:nth-child(3) {
    -webkit-animation-delay: 1.1s;
            animation-delay: 1.1s;	
}
.menu li:nth-child(4) {
    -webkit-animation-delay: 1.3s;
            animation-delay: 1.3s;	
}
.menu li:nth-child(5) {
    -webkit-animation-delay: 1.5s;
            animation-delay: 1.5s;	
}

.welcome i {
    -webkit-animation: animatedArrow 1s steps(16, end) infinite;
            animation: animatedArrow 1s steps(16, end) infinite;
    -webkit-animation-delay: 1s;
            animation-delay: 1s;
}


@-webkit-keyframes animatedArrow {
    0% {
        color: #fff;
    }
    25% {
        color: #fff;
    }
    50% {
        color: #666;
    }
    75% {
        color: #fff;
    }
    100% {
        color: #fff;
    }
}
@keyframes animatedArrow {
    0% {
        color: #fff;
    }
    25% {
        color: #fff;
    }
    50% {
        color: #666;
    }
    75% {
        color: #fff;
    }
    100% {
        color: #fff;
    }
}
@-webkit-keyframes colorPulseBlue {
    0% {
        background-color: rgba(54, 178, 255, 0.6);
    }
    50% {
        background-color: rgba(0, 109, 177, 0.6);
    }
    100% {
        background-color: rgba(41, 173, 255, 0.6);
    }
}
@keyframes colorPulseBlue {
    0% {
        background-color: rgba(54, 178, 255, 0.6);
    }
    50% {
        background-color: rgba(0, 109, 177, 0.6);
    }
    100% {
        background-color: rgba(41, 173, 255, 0.6);
    }
}
@-webkit-keyframes colorPulseMenu {
    0% {
        color: #fff;
    }
    80% {
        color: #fff;
    }
    90% {
        color: #666;
    }
    100% {
        color: #fff;
    }
}
@keyframes colorPulseMenu {
    0% {
        color: #fff;
    }
    90% {
        color: #fff;
    }
    95% {
        color: #666;
    }
    100% {
        color: #fff;
    }
}
@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-webkit-keyframes fadeSlideInFromTop {
    0% {
        opacity: 0;
        -webkit-transform:translatey(-100%);
                transform:translatey(-100%);
    }
    100% {
        opacity:1;
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }
}
@keyframes fadeSlideInFromTop {
    0% {
        opacity: 0;
        -webkit-transform:translatey(-100%);
                transform:translatey(-100%);
    }
    100% {
        opacity:1;
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }
}
@-webkit-keyframes fadeSlideInFromBottom {
    0% {
        opacity: 0;
        -webkit-transform:translateY(50%);
                transform:translateY(50%);
    }
    100% {
        opacity:1;
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }
}
@keyframes fadeSlideInFromBottom {
    0% {
        opacity: 0;
        -webkit-transform:translateY(50%);
                transform:translateY(50%);
    }
    100% {
        opacity:1;
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }
}
@-webkit-keyframes fadeSlideInFromLeft {
    0% {
        opacity: 0;
        -webkit-transform:translateX(-100%);
                transform:translateX(-100%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
                transform: translateX(0);
    }
}
@keyframes fadeSlideInFromLeft {
    0% {
        opacity: 0;
        -webkit-transform:translateX(-100%);
                transform:translateX(-100%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
                transform: translateX(0);
    }
}
@-webkit-keyframes fadeSlideInFromRight {
    0% {
        opacity: 0;
        -webkit-transform:translateX(100%);
                transform:translateX(100%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
                transform: translateX(0);
    }
}
@keyframes fadeSlideInFromRight {
    0% {
        opacity: 0;
        -webkit-transform:translateX(100%);
                transform:translateX(100%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
                transform: translateX(0);
    }
}
@-webkit-keyframes zoomIn {
    0% {
        opacity: 0;
        -webkit-transform: scaleY(0);
                transform: scaleY(0);
    }
    100% {
        opacity: 1;
        -webkit-transform: scaleY(1);
                transform: scaleY(1);
    }
}
@keyframes zoomIn {
    0% {
        opacity: 0;
        -webkit-transform: scaleY(0);
                transform: scaleY(0);
    }
    100% {
        opacity: 1;
        -webkit-transform: scaleY(1);
                transform: scaleY(1);
    }
}
/*   P R E L O A D E R   */
.no-js #loader { display: none;}
.js #loader {display: block; position: absolute; left: 100px; top: 0;}
.preloader {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
}
.preloader img {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -32px;
    margin-left: -32px;
    animation: rotate 2s infinite linear;
}
@keyframes rotate {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}


/*=================  Desktop First Method  =================*/
/* Break Points: 1600px, 1200px, 992px, 768px, 480px, 320px */
/*                (xl)    (lg)   (md)   (sm)   (xs)   (xxs) */
/*                                                          */
/* DoubleClick IT Solutions                                 */
/* 222 Maple Woods, Ballinacurra, Midleton                  */
/*                                                          */
/* Copyright: © 2016 by DoubleClick IT Solutions            */
/*----------------------------------------------------------*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.row:before,
.row:after,
.group:before,
.group:after {
    content: "";
    display: table;
}
.row:after,
.group:after {
    clear: both;
}
.row,
.group {
    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}
.col {
    display: block;
    float: left;
    width: 100%;
    box-sizing: border-box;
}
/* Wide Screens */
.col-1of1 {width: 100%}

.col-2of2 {width: 100%}
.col-1of2 {width: 50%}

.col-3of3 {width: 100%}
.col-2of3 {width: 66.66666%}
.col-1of3 {width: 33.33333%}

.col-4of4 {width: 100%}
.col-3of4 {width: 75%}
.col-2of4 {width: 50%}
.col-1of4 {width: 25%}

.col-5of5 {width: 100%}
.col-4of5 {width: 80%}
.col-3of5 {width: 60%}
.col-2of5 {width: 40%}
.col-1of5 {width: 20%}

.col-6of6 {width: 100%}
.col-5of6 {width: 83.33333%}
.col-4of6 {width: 66.66666%}
.col-3of6 {width: 50%}
.col-2of6 {width: 33.33333%}
.col-1of6 {width: 16.66666%}

.col-7of7 {width: 100%}
.col-6of7 {width: 85.714284%}
.col-5of7 {width: 71.42857%}
.col-4of7 {width: 57.14285%}
.col-3of7 {width: 42.85714%}
.col-2of7 {width: 28.57142%}
.col-1of7 {width: 14.28571%}

.col-8of8 {width: 100%}
.col-7of8 {width: 87.5%}
.col-6of8 {width: 75%}
.col-5of8 {width: 62.5%}
.col-4of8 {width: 50%}
.col-3of8 {width: 37.5%}
.col-2of8 {width: 25%}
.col-1of8 {width: 12.5%}

.col-9of9 {width: 99.99999%}
.col-8of9 {width: 88.88888%}
.col-7of9 {width: 77.77777%}
.col-6of9 {width: 66.66666%}
.col-5of9 {width: 55.55555%}
.col-4of9 {width: 44.44444%}
.col-3of9 {width: 33.33333%}
.col-2of9 {width: 22.22222%}
.col-1of9 {width: 11.11111%}

.col-10of10 {width: 100%}
.col-9of10 {width: 90%}
.col-8of10 {width: 80%}
.col-7of10 {width: 70%}
.col-6of10 {width: 60%}
.col-5of10 {width: 50%}
.col-4of10 {width: 40%}
.col-3of10 {width: 30%}
.col-2of10 {width: 20%}
.col-1of10 {width: 10%}

.col-11of11 {width: 100%}
.col-10of11 {width: 90.90909%}
.col-9of11 {width: 81.81818%}
.col-8of11 {width: 72.72727%}
.col-7of11 {width: 63.63636%}
.col-6of11 {width: 54.54545%}
.col-5of11 {width: 45.45454%}
.col-4of11 {width: 36.36363%}
.col-3of11 {width: 27.27272%}
.col-2of11 {width: 18.18181%}
.col-1of11 {width: 9.09090%}

.col-12of12 {width: 100%}
.col-11of12 {width: 91.66666%}
.col-10of12 {width: 83.33333%}
.col-9of12 {width: 74.99999%}
.col-8of12 {width: 66.66666%}
.col-7of12 {width: 58.33333%}
.col-6of12 {width: 50%}
.col-5of12 {width: 41.66666%}
.col-4of12 {width: 33.33333%}
.col-3of12 {width: 24.99999%}
.col-2of12 {width: 16.66666%}
.col-1of12 {width: 8.33333%}

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1600px) {
    .xl-1of1 {width: 100%}

    .xl-2of2 {width: 100%}
    .xl-1of2 {width: 50%}

    .xl-3of3 {width: 100%}
    .xl-2of3 {width: 66.66666%}
    .xl-1of3 {width: 33.33333%}

    .xl-4of4 {width: 100%}
    .xl-3of4 {width: 75%}
    .xl-2of4 {width: 50%}
    .xl-1of4 {width: 25%}

    .xl-5of5 {width: 100%}
    .xl-4of5 {width: 80%}
    .xl-3of5 {width: 60%}
    .xl-2of5 {width: 40%}
    .xl-1of5 {width: 20%}

    .xl-6of6 {width: 100%}
    .xl-5of6 {width: 83.33333%}
    .xl-4of6 {width: 66.66666%}
    .xl-3of6 {width: 50%}
    .xl-2of6 {width: 33.33333%}
    .xl-1of6 {width: 16.66666%}

    .xl-7of7 {width: 100%}
    .xl-6of7 {width: 85.714284%}
    .xl-5of7 {width: 71.42857%}
    .xl-4of7 {width: 57.14285%}
    .xl-3of7 {width: 42.85714%}
    .xl-2of7 {width: 28.57142%}
    .xl-1of7 {width: 14.28571%}

    .xl-8of8 {width: 100%}
    .xl-7of8 {width: 87.5%}
    .xl-6of8 {width: 75%}
    .xl-5of8 {width: 62.5%}
    .xl-4of8 {width: 50%}
    .xl-3of8 {width: 37.5%}
    .xl-2of8 {width: 25%}
    .xl-1of8 {width: 12.5%}

    .xl-9of9 {width: 99.99999%}
    .xl-8of9 {width: 88.88888%}
    .xl-7of9 {width: 77.77777%}
    .xl-6of9 {width: 66.66666%}
    .xl-5of9 {width: 55.55555%}
    .xl-4of9 {width: 44.44444%}
    .xl-3of9 {width: 33.33333%}
    .xl-2of9 {width: 22.22222%}
    .xl-1of9 {width: 11.11111%}

    .xl-10of10 {width: 100%}
    .xl-9of10 {width: 90%}
    .xl-8of10 {width: 80%}
    .xl-7of10 {width: 70%}
    .xl-6of10 {width: 60%}
    .xl-5of10 {width: 50%}
    .xl-4of10 {width: 40%}
    .xl-3of10 {width: 30%}
    .xl-2of10 {width: 20%}
    .xl-1of10 {width: 10%}

    .xl-11of11 {width: 100%}
    .xl-10of11 {width: 90.90909%}
    .xl-9of11 {width: 81.81818%}
    .xl-8of11 {width: 72.72727%}
    .xl-7of11 {width: 63.63636%}
    .xl-6of11 {width: 54.54545%}
    .xl-5of11 {width: 45.45454%}
    .xl-4of11 {width: 36.36363%}
    .xl-3of11 {width: 27.27272%}
    .xl-2of11 {width: 18.18181%}
    .xl-1of11 {width: 9.09090%}

    .xl-12of12 {width: 100%}
    .xl-11of12 {width: 91.66666%}
    .xl-10of12 {width: 83.33333%}
    .xl-9of12 {width: 74.99999%}
    .xl-8of12 {width: 66.66666%}
    .xl-7of12 {width: 58.33333%}
    .xl-6of12 {width: 50%}
    .xl-5of12 {width: 41.66666%}
    .xl-4of12 {width: 33.33333%}
    .xl-3of12 {width: 24.99999%}
    .xl-2of12 {width: 16.66666%}
    .xl-1of12 {width: 8.33333%}
}

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
    .lg-1of1 {width: 100%}

    .lg-2of2 {width: 100%}
    .lg-1of2 {width: 50%}

    .lg-3of3 {width: 100%}
    .lg-2of3 {width: 66.66666%}
    .lg-1of3 {width: 33.33333%}

    .lg-4of4 {width: 100%}
    .lg-3of4 {width: 75%}
    .lg-2of4 {width: 50%}
    .lg-1of4 {width: 25%}

    .lg-5of5 {width: 100%}
    .lg-4of5 {width: 80%}
    .lg-3of5 {width: 60%}
    .lg-2of5 {width: 40%}
    .lg-1of5 {width: 20%}

    .lg-6of6 {width: 100%}
    .lg-5of6 {width: 83.33333%}
    .lg-4of6 {width: 66.66666%}
    .lg-3of6 {width: 50%}
    .lg-2of6 {width: 33.33333%}
    .lg-1of6 {width: 16.66666%}

    .lg-7of7 {width: 100%}
    .lg-6of7 {width: 85.714284%}
    .lg-5of7 {width: 71.42857%}
    .lg-4of7 {width: 57.14285%}
    .lg-3of7 {width: 42.85714%}
    .lg-2of7 {width: 28.57142%}
    .lg-1of7 {width: 14.28571%}

    .lg-8of8 {width: 100%}
    .lg-7of8 {width: 87.5%}
    .lg-6of8 {width: 75%}
    .lg-5of8 {width: 62.5%}
    .lg-4of8 {width: 50%}
    .lg-3of8 {width: 37.5%}
    .lg-2of8 {width: 25%}
    .lg-1of8 {width: 12.5%}

    .lg-9of9 {width: 99.99999%}
    .lg-8of9 {width: 88.88888%}
    .lg-7of9 {width: 77.77777%}
    .lg-6of9 {width: 66.66666%}
    .lg-5of9 {width: 55.55555%}
    .lg-4of9 {width: 44.44444%}
    .lg-3of9 {width: 33.33333%}
    .lg-2of9 {width: 22.22222%}
    .lg-1of9 {width: 11.11111%}

    .lg-10of10 {width: 100%}
    .lg-9of10 {width: 90%}
    .lg-8of10 {width: 80%}
    .lg-7of10 {width: 70%}
    .lg-6of10 {width: 60%}
    .lg-5of10 {width: 50%}
    .lg-4of10 {width: 40%}
    .lg-3of10 {width: 30%}
    .lg-2of10 {width: 20%}
    .lg-1of10 {width: 10%}

    .lg-11of11 {width: 100%}
    .lg-10of11 {width: 90.90909%}
    .lg-9of11 {width: 81.81818%}
    .lg-8of11 {width: 72.72727%}
    .lg-7of11 {width: 63.63636%}
    .lg-6of11 {width: 54.54545%}
    .lg-5of11 {width: 45.45454%}
    .lg-4of11 {width: 36.36363%}
    .lg-3of11 {width: 27.27272%}
    .lg-2of11 {width: 18.18181%}
    .lg-1of11 {width: 9.09090%}

    .lg-12of12 {width: 100%}
    .lg-11of12 {width: 91.66666%}
    .lg-10of12 {width: 83.33333%}
    .lg-9of12 {width: 74.99999%}
    .lg-8of12 {width: 66.66666%}
    .lg-7of12 {width: 58.33333%}
    .lg-6of12 {width: 50%}
    .lg-5of12 {width: 41.66666%}
    .lg-4of12 {width: 33.33333%}
    .lg-3of12 {width: 24.99999%}
    .lg-2of12 {width: 16.66666%}
    .lg-1of12 {width: 8.33333%}
}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
    .md-1of1 {width: 100%;}

    .md-2of2 {width: 100%;}
    .md-1of2 {width: 50%;}

    .md-3of3 {width: 100%;}
    .md-2of3 {width: 66.66666%;}
    .md-1of3 {width: 33.33333%;}

    .md-4of4 {width: 100%;}
    .md-3of4 {width: 75%;}
    .md-2of4 {width: 50%;}
    .md-1of4 {width: 25%;}

    .md-5of5 {width: 100%;}
    .md-4of5 {width: 80%;}
    .md-3of5 {width: 60%;}
    .md-2of5 {width: 40%;}
    .md-1of5 {width: 20%;}

    .md-6of6 {width: 100%}
    .md-5of6 {width: 83.33333%}
    .md-4of6 {width: 66.66666%}
    .md-3of6 {width: 50%}
    .md-2of6 {width: 33.33333%}
    .md-1of6 {width: 16.66666%}

    .md-7of7 {width: 100%}
    .md-6of7 {width: 85.714284%}
    .md-5of7 {width: 71.42857%}
    .md-4of7 {width: 57.14285%}
    .md-3of7 {width: 42.85714%}
    .md-2of7 {width: 28.57142%}
    .md-1of7 {width: 14.28571%}

    .md-8of8 {width: 100%}
    .md-7of8 {width: 87.5%}
    .md-6of8 {width: 75%}
    .md-5of8 {width: 62.5%}
    .md-4of8 {width: 50%}
    .md-3of8 {width: 37.5%}
    .md-2of8 {width: 25%}
    .md-1of8 {width: 12.5%}

    .md-9of9 {width: 99.99999%}
    .md-8of9 {width: 88.88888%}
    .md-7of9 {width: 77.77777%}
    .md-6of9 {width: 66.66666%}
    .md-5of9 {width: 55.55555%}
    .md-4of9 {width: 44.44444%}
    .md-3of9 {width: 33.33333%}
    .md-2of9 {width: 22.22222%}
    .md-1of9 {width: 11.11111%}

    .md-10of10 {width: 100%}
    .md-9of10 {width: 90%}
    .md-8of10 {width: 80%}
    .md-7of10 {width: 70%}
    .md-6of10 {width: 60%}
    .md-5of10 {width: 50%}
    .md-4of10 {width: 40%}
    .md-3of10 {width: 30%}
    .md-2of10 {width: 20%}
    .md-1of10 {width: 10%}

    .md-11of11 {width: 100%}
    .md-10of11 {width: 90.90909%}
    .md-9of11 {width: 81.81818%}
    .md-8of11 {width: 72.72727%}
    .md-7of11 {width: 63.63636%}
    .md-6of11 {width: 54.54545%}
    .md-5of11 {width: 45.45454%}
    .md-4of11 {width: 36.36363%}
    .md-3of11 {width: 27.27272%}
    .md-2of11 {width: 18.18181%}
    .md-1of11 {width: 9.09090%}

    .md-12of12 {width: 100%}
    .md-11of12 {width: 91.66666%}
    .md-10of12 {width: 83.33333%}
    .md-9of12 {width: 74.99999%}
    .md-8of12 {width: 66.66666%}
    .md-7of12 {width: 58.33333%}
    .md-6of12 {width: 50%}
    .md-5of12 {width: 41.66666%}
    .md-4of12 {width: 33.33333%}
    .md-3of12 {width: 24.99999%}
    .md-2of12 {width: 16.66666%}
    .md-1of12 {width: 8.33333%}
}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
    .sm-1of1 {width: 100%}

    .sm-2of2 {width: 100%}
    .sm-1of2 {width: 50%}

    .sm-3of3 {width: 100%}
    .sm-2of3 {width: 66.66666%}
    .sm-1of3 {width: 33.33333%}

    .sm-4of4 {width: 100%}
    .sm-3of4 {width: 75%}
    .sm-2of4 {width: 50%}
    .sm-1of4 {width: 25%}

    .sm-5of5 {width: 100%}
    .sm-4of5 {width: 80%}
    .sm-3of5 {width: 60%}
    .sm-2of5 {width: 40%}
    .sm-1of5 {width: 20%}

    .sm-6of6 {width: 100%}
    .sm-5of6 {width: 83.33333%}
    .sm-4of6 {width: 66.66666%}
    .sm-3of6 {width: 50%}
    .sm-2of6 {width: 33.33333%}
    .sm-1of6 {width: 16.66666%}

    .sm-7of7 {width: 100%}
    .sm-6of7 {width: 85.714284%}
    .sm-5of7 {width: 71.42857%}
    .sm-4of7 {width: 57.14285%}
    .sm-3of7 {width: 42.85714%}
    .sm-2of7 {width: 28.57142%}
    .sm-1of7 {width: 14.28571%}

    .sm-8of8 {width: 100%}
    .sm-7of8 {width: 87.5%}
    .sm-6of8 {width: 75%}
    .sm-5of8 {width: 62.5%}
    .sm-4of8 {width: 50%}
    .sm-3of8 {width: 37.5%}
    .sm-2of8 {width: 25%}
    .sm-1of8 {width: 12.5%}

    .sm-9of9 {width: 99.99999%}
    .sm-8of9 {width: 88.88888%}
    .sm-7of9 {width: 77.77777%}
    .sm-6of9 {width: 66.66666%}
    .sm-5of9 {width: 55.55555%}
    .sm-4of9 {width: 44.44444%}
    .sm-3of9 {width: 33.33333%}
    .sm-2of9 {width: 22.22222%}
    .sm-1of9 {width: 11.11111%}

    .sm-10of10 {width: 100%}
    .sm-9of10 {width: 90%}
    .sm-8of10 {width: 80%}
    .sm-7of10 {width: 70%}
    .sm-6of10 {width: 60%}
    .sm-5of10 {width: 50%}
    .sm-4of10 {width: 40%}
    .sm-3of10 {width: 30%}
    .sm-2of10 {width: 20%}
    .sm-1of10 {width: 10%}

    .sm-11of11 {width: 100%}
    .sm-10of11 {width: 90.90909%}
    .sm-9of11 {width: 81.81818%}
    .sm-8of11 {width: 72.72727%}
    .sm-7of11 {width: 63.63636%}
    .sm-6of11 {width: 54.54545%}
    .sm-5of11 {width: 45.45454%}
    .sm-4of11 {width: 36.36363%}
    .sm-3of11 {width: 27.27272%}
    .sm-2of11 {width: 18.18181%}
    .sm-1of11 {width: 9.09090%}

    .sm-12of12 {width: 100%}
    .sm-11of12 {width: 91.66666%}
    .sm-10of12 {width: 83.33333%}
    .sm-9of12 {width: 74.99999%}
    .sm-8of12 {width: 66.66666%}
    .sm-7of12 {width: 58.33333%}
    .sm-6of12 {width: 50%}
    .sm-5of12 {width: 41.66666%}
    .sm-4of12 {width: 33.33333%}
    .sm-3of12 {width: 24.99999%}
    .sm-2of12 {width: 16.66666%}
    .sm-1of12 {width: 8.33333%}
}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {
    .xs-1of1 {width: 100%}

    .xs-2of2 {width: 100%}
    .xs-1of2 {width: 50%}

    .xs-3of3 {width: 100%}
    .xs-2of3 {width: 66.66666%}
    .xs-1of3 {width: 33.33333%}

    .xs-4of4 {width: 100%}
    .xs-3of4 {width: 75%}
    .xs-2of4 {width: 50%}
    .xs-1of4 {width: 25%}

    .xs-5of5 {width: 100%}
    .xs-4of5 {width: 80%}
    .xs-3of5 {width: 60%}
    .xs-2of5 {width: 40%}
    .xs-1of5 {width: 20%}

    .xs-6of6 {width: 100%}
    .xs-5of6 {width: 83.33333%}
    .xs-4of6 {width: 66.66666%}
    .xs-3of6 {width: 50%}
    .xs-2of6 {width: 33.33333%}
    .xs-1of6 {width: 16.66666%}

    .xs-7of7 {width: 100%}
    .xs-6of7 {width: 85.714284%}
    .xs-5of7 {width: 71.42857%}
    .xs-4of7 {width: 57.14285%}
    .xs-3of7 {width: 42.85714%}
    .xs-2of7 {width: 28.57142%}
    .xs-1of7 {width: 14.28571%}

    .xs-8of8 {width: 100%}
    .xs-7of8 {width: 87.5%}
    .xs-6of8 {width: 75%}
    .xs-5of8 {width: 62.5%}
    .xs-4of8 {width: 50%}
    .xs-3of8 {width: 37.5%}
    .xs-2of8 {width: 25%}
    .xs-1of8 {width: 12.5%}

    .xs-9of9 {width: 99.99999%}
    .xs-8of9 {width: 88.88888%}
    .xs-7of9 {width: 77.77777%}
    .xs-6of9 {width: 66.66666%}
    .xs-5of9 {width: 55.55555%}
    .xs-4of9 {width: 44.44444%}
    .xs-3of9 {width: 33.33333%}
    .xs-2of9 {width: 22.22222%}
    .xs-1of9 {width: 11.11111%}

    .xs-10of10 {width: 100%}
    .xs-9of10 {width: 90%}
    .xs-8of10 {width: 80%}
    .xs-7of10 {width: 70%}
    .xs-6of10 {width: 60%}
    .xs-5of10 {width: 50%}
    .xs-4of10 {width: 40%}
    .xs-3of10 {width: 30%}
    .xs-2of10 {width: 20%}
    .xs-1of10 {width: 10%}

    .xs-11of11 {width: 100%}
    .xs-10of11 {width: 90.90909%}
    .xs-9of11 {width: 81.81818%}
    .xs-8of11 {width: 72.72727%}
    .xs-7of11 {width: 63.63636%}
    .xs-6of11 {width: 54.54545%}
    .xs-5of11 {width: 45.45454%}
    .xs-4of11 {width: 36.36363%}
    .xs-3of11 {width: 27.27272%}
    .xs-2of11 {width: 18.18181%}
    .xs-1of11 {width: 9.09090%}

    .xs-12of12 {width: 100%}
    .xs-11of12 {width: 91.66666%}
    .xs-10of12 {width: 83.33333%}
    .xs-9of12 {width: 74.99999%}
    .xs-8of12 {width: 66.66666%}
    .xs-7of12 {width: 58.33333%}
    .xs-6of12 {width: 50%}
    .xs-5of12 {width: 41.66666%}
    .xs-4of12 {width: 33.33333%}
    .xs-3of12 {width: 24.99999%}
    .xs-2of12 {width: 16.66666%}
    .xs-1of12 {width: 8.33333%}
}

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {
    .xxs-1of1 {width: 100%}

    .xxs-2of2 {width: 100%}
    .xxs-1of2 {width: 50%}

    .xxs-3of3 {width: 100%}
    .xxs-2of3 {width: 66.66666%}
    .xxs-1of3 {width: 33.33333%}

    .xxs-4of4 {width: 100%}
    .xxs-3of4 {width: 75%}
    .xxs-2of4 {width: 50%}
    .xxs-1of4 {width: 25%}

    .xxs-5of5 {width: 100%}
    .xxs-4of5 {width: 80%}
    .xxs-3of5 {width: 60%}
    .xxs-2of5 {width: 40%}
    .xxs-1of5 {width: 20%}

    .xxs-6of6 {width: 100%}
    .xxs-5of6 {width: 83.33333%}
    .xxs-4of6 {width: 66.66666%}
    .xxs-3of6 {width: 50%}
    .xxs-2of6 {width: 33.33333%}
    .xxs-1of6 {width: 16.66666%}

    .xxs-7of7 {width: 100%}
    .xxs-6of7 {width: 85.714284%}
    .xxs-5of7 {width: 71.42857%}
    .xxs-4of7 {width: 57.14285%}
    .xxs-3of7 {width: 42.85714%}
    .xxs-2of7 {width: 28.57142%}
    .xxs-1of7 {width: 14.28571%}

    .xxs-8of8 {width: 100%}
    .xxs-7of8 {width: 87.5%}
    .xxs-6of8 {width: 75%}
    .xxs-5of8 {width: 62.5%}
    .xxs-4of8 {width: 50%}
    .xxs-3of8 {width: 37.5%}
    .xxs-2of8 {width: 25%}
    .xxs-1of8 {width: 12.5%}

    .xxs-9of9 {width: 99.99999%}
    .xxs-8of9 {width: 88.88888%}
    .xxs-7of9 {width: 77.77777%}
    .xxs-6of9 {width: 66.66666%}
    .xxs-5of9 {width: 55.55555%}
    .xxs-4of9 {width: 44.44444%}
    .xxs-3of9 {width: 33.33333%}
    .xxs-2of9 {width: 22.22222%}
    .xxs-1of9 {width: 11.11111%}

    .xxs-10of10 {width: 100%}
    .xxs-9of10 {width: 90%}
    .xxs-8of10 {width: 80%}
    .xxs-7of10 {width: 70%}
    .xxs-6of10 {width: 60%}
    .xxs-5of10 {width: 50%}
    .xxs-4of10 {width: 40%}
    .xxs-3of10 {width: 30%}
    .xxs-2of10 {width: 20%}
    .xxs-1of10 {width: 10%}

    .xxs-11of11 {width: 100%}
    .xxs-10of11 {width: 90.90909%}
    .xxs-9of11 {width: 81.81818%}
    .xxs-8of11 {width: 72.72727%}
    .xxs-7of11 {width: 63.63636%}
    .xxs-6of11 {width: 54.54545%}
    .xxs-5of11 {width: 45.45454%}
    .xxs-4of11 {width: 36.36363%}
    .xxs-3of11 {width: 27.27272%}
    .xxs-2of11 {width: 18.18181%}
    .xxs-1of11 {width: 9.09090%}

    .xxs-12of12 {width: 100%}
    .xxs-11of12 {width: 91.66666%}
    .xxs-10of12 {width: 83.33333%}
    .xxs-9of12 {width: 74.99999%}
    .xxs-8of12 {width: 66.66666%}
    .xxs-7of12 {width: 58.33333%}
    .xxs-6of12 {width: 50%}
    .xxs-5of12 {width: 41.66666%}
    .xxs-4of12 {width: 33.33333%}
    .xxs-3of12 {width: 24.99999%}
    .xxs-2of12 {width: 16.66666%}
    .xxs-1of12 {width: 8.33333%}
}