article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { display: block; } audio, canvas, video { display: inline-block; } audio:not([controls]) { display: none; height: 0; } [hidden], template { display: none; } html { background: #fff; color: #000; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } html, button, input, select, textarea { font-family: sans-serif; } body { margin: 0; } a { background: transparent; } a:focus { outline: thin dotted; } a:hover, a:active { outline: 0; } h1 { font-size: 2em; margin: 0.67em 0; } h2 { font-size: 1.5em; margin: 0.83em 0; } h3 { font-size: 1.17em; margin: 1em 0; } h4 { font-size: 1em; margin: 1.33em 0; } h5 { font-size: 0.83em; margin: 1.67em 0; } h6 { font-size: 0.75em; margin: 2.33em 0; } abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: bold; } dfn { font-style: italic; } mark { background: #ff0; color: #000; } code, kbd, pre, samp { font-family: monospace, serif; font-size: 1em; } pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } q { quotes: "\201C" "\201D" "\2018" "\2019"; } q:before, q:after { content: ''; content: none; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } img { border: 0; } svg:not(:root) { overflow: hidden; } figure { margin: 0; } fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } legend { border: 0; padding: 0; white-space: normal; } button, input, select, textarea { font-family: inherit; font-size: 100%; margin: 0; vertical-align: baseline; } button, input { line-height: normal; } button, select { text-transform: none; } button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; } button[disabled], input[disabled] { cursor: default; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } textarea { overflow: auto; vertical-align: top; } table { border-collapse: collapse; border-spacing: 0; } input[type="search"] { -webkit-appearance: textfield; box-sizing: content-box; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; } /* COLORS */ /* old #629fd1 */ /* STYLES */ .fl { float: left; } .fr { float: right; } .tr { text-align: right; } .tc { text-align: center; } .vam { vertical-align: middle; } /* * ADDONS */ /* FADE-IN */ @-webkit-keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } /* Currency * * * 45 * * * .price { * @extend %currency; * } * */ /* * @include triangle within a pseudo element and add positioning properties (ie. top, left) * $direction: up, down, left, right */ /* * Vertical Align * http://css-tricks.com/centering-in-the-unknown/ */ /* * Text-align justify For perfectly aligned grids that don't rely on floating elements and difficult calculations - http://www.barrelny.com/blog/text-align-justify-and-rwd/ */ /* * Tooltips */ /* ========================================================================== GRID 12 - 1170 ========================================================================== */ .container { margin-right: auto; margin-left: auto; width: 1170px; } @media only screen and (max-width: 1170px) { .container { width: 768px; padding-left: 10px; padding-right: 10px; } } @media only screen and (max-width: 767px) { .container { width: 100%; max-width: 414px; } } .row, .flex { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-align: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; margin-left: -30px; } @media only screen and (max-width: 1170px) { .row, .flex { margin-left: -17.17566016px; } } @media only screen and (max-width: 767px) { .row, .flex { margin-left: 0; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } } .row.wrap, .wrap.flex { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } @media only screen and (max-width: 767px) { .row.wrap, .wrap.flex { -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .row.wrap > div, .wrap.flex > div { width: auto; } } .row.column, .column.flex { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .row.flex-start, .flex-start.flex { -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; } .row.v-center, .v-center.flex { -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .row.v-top, .v-top.flex { -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; } .row.center, .center.flex { -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .row.no-margin, .no-margin.flex { margin-left: 0; } .row.space-between, .space-between.flex { -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } .row.float, .float.flex { overflow: hidden; display: block; } .row.float .span0, .float.flex .span0 { float: left; } .flex { margin-left: 0; } .flex .ml { margin-left: 30px; } .flex .mr { margin-right: 30px; } .span0 { margin-left: 30px; } .span1 { width: 70px; margin-left: 30px; } .span2 { width: 170px; margin-left: 30px; } .span3 { width: 270px; margin-left: 30px; } .span4 { width: 370px; margin-left: 30px; } .span5 { width: 470px; margin-left: 30px; } .span6 { width: 570px; margin-left: 30px; } .span7 { width: 670px; margin-left: 30px; } .span8 { width: 770px; margin-left: 30px; } .span9 { width: 870px; margin-left: 30px; } .span10 { width: 970px; margin-left: 30px; } .span11 { width: 1070px; margin-left: 30px; } .span12 { width: 1170px; margin-left: 30px; } @media only screen and (max-width: 1170px) { .span1 { width: 67.83385763px; margin-left: 17.17566016px; } } @media only screen and (max-width: 1170px) { .span2 { width: 152.85337543px; margin-left: 17.17566016px; } } @media only screen and (max-width: 1170px) { .span3 { width: 237.87289323px; margin-left: 17.17566016px; } } @media only screen and (max-width: 1170px) { .span4 { width: 322.89241102px; margin-left: 17.17566016px; } } @media only screen and (max-width: 1170px) { .span5 { width: 407.91192882px; margin-left: 17.17566016px; } } @media only screen and (max-width: 1170px) { .span6 { width: 492.93144661px; margin-left: 17.17566016px; } } @media only screen and (max-width: 1170px) { .span7 { width: 577.95096441px; margin-left: 17.17566016px; } } @media only screen and (max-width: 1170px) { .span8 { width: 662.9704822px; margin-left: 17.17566016px; } } @media only screen and (max-width: 1170px) { .span9, .span10, .span11, .span12 { width: 748px; margin-left: 17.17566016px; } } @media only screen and (max-width: 767px) { .span1 { width: 100%; margin-left: 0; } } @media only screen and (max-width: 767px) { .span2 { width: 100%; margin-left: 0; } } @media only screen and (max-width: 767px) { .span3 { width: 100%; margin-left: 0; } } @media only screen and (max-width: 767px) { .span4 { width: 100%; margin-left: 0; } } @media only screen and (max-width: 767px) { .span5 { width: 100%; margin-left: 0; } } @media only screen and (max-width: 767px) { .span6 { width: 100%; margin-left: 0; } } @media only screen and (max-width: 767px) { .span7 { width: 100%; margin-left: 0; } } @media only screen and (max-width: 767px) { .span8 { width: 100%; margin-left: 0; } } @media only screen and (max-width: 767px) { .span9 { width: 100%; margin-left: 0; } } @media only screen and (max-width: 767px) { .span10 { width: 100%; margin-left: 0; } } @media only screen and (max-width: 767px) { .span11 { width: 100%; margin-left: 0; } } @media only screen and (max-width: 767px) { .span12 { width: 100%; margin-left: 0; } }