/*
	1. Reset & Basics
	2. Align, Float, Hide
	3. Typography
	4. Buttons
	5. Forms
	6. Images
	7. Width, Height, Margin, Padding, Offset
*/

/*-----------------------------------------------------------------------------------*/
/*	1. Reset & Basics
/*-----------------------------------------------------------------------------------*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
img {
    display: block;
}
body {
    line-height: 1;
}
ol,
ul {
    list-style: none;
}
blockquote,
q {
    quotes: none;
}
blockquote::before,
blockquote::after,
q::before,
q::after {
    content: "";
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/*-----------------------------------------------------------------------------------*/
/*	2. Align, Float, Hide
/*-----------------------------------------------------------------------------------*/

.text-left {
    text-align: left !important;
}
.text-right {
    text-align: right !important;
}
.text-center {
    text-align: center !important;
}

.float-left {
    float: left !important;
}
.float-right {
    float: right !important;
}
.float-none {
    float: none !important;
}

.hidden-xs-up {
    display: none !important;
}

@media (min-width: 768px) {
    .text-sm-left {
        text-align: left !important;
    }
    .text-sm-right {
        text-align: right !important;
    }
    .text-sm-center {
        text-align: center !important;
    }
    .float-sm-left {
        float: left !important;
    }
    .float-sm-right {
        float: right !important;
    }
    .float-sm-none {
        float: none !important;
    }
    .hidden-sm-up {
        display: none !important;
    }
}
@media (min-width: 992px) {
    .text-md-left {
        text-align: left !important;
    }
    .text-md-right {
        text-align: right !important;
    }
    .text-md-center {
        text-align: center !important;
    }
    .float-md-left {
        float: left !important;
    }
    .float-md-right {
        float: right !important;
    }
    .float-md-none {
        float: none !important;
    }
    .hidden-md-up {
        display: none !important;
    }
}
@media (min-width: 1200px) {
    .text-lg-left {
        text-align: left !important;
    }
    .text-lg-right {
        text-align: right !important;
    }
    .text-lg-center {
        text-align: center !important;
    }
    .float-lg-left {
        float: left !important;
    }
    .float-lg-right {
        float: right !important;
    }
    .float-lg-none {
        float: none !important;
    }
    .hidden-lg-up {
        display: none !important;
    }
}
@media (min-width: 1520px) {
    .text-xl-left {
        text-align: left !important;
    }
    .text-xl-right {
        text-align: right !important;
    }
    .text-xl-center {
        text-align: center !important;
    }
    .float-xl-left {
        float: left !important;
    }
    .float-xl-right {
        float: right !important;
    }
    .float-xl-none {
        float: none !important;
    }
}

.align-center {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}

@media (max-width: 767px) {
    .hidden-only-xs {
        display: none !important;
    }
    .align-only-xs-center {
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }
}
@media (max-width: 991px) {
    .hidden-sm-down {
        display: none !important;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .hidden-only-sm {
        display: none !important;
    }
    .align-only-sm-center {
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }
}
@media (max-width: 1199px) {
    .hidden-md-down {
        display: none !important;
    }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .hidden-only-md {
        display: none !important;
    }
    .align-only-md-center {
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }
}
@media (max-width: 1519px) {
    .hidden-lg-down {
        display: none !important;
    }
}
@media (min-width: 1200px) and (max-width: 1519px) {
    .hidden-only-lg {
        display: none !important;
    }
    .align-only-lg-center {
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }
}
@media (min-width: 1520px) {
    .hidden-only-xl {
        display: none !important;
    }
    .align-only-xl-center {
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }
}

[class*="float-"],
[class*="align-"][class*="center"] {
    min-height: 5px;
}

/*-----------------------------------------------------------------------------------*/
/*	3. Typography
/*-----------------------------------------------------------------------------------*/

body {
    font-family: Muli, Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 17px;
    line-height: 1.6;
    font-weight: 300;
    color: #222;
    -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
    -webkit-text-size-adjust: 100%;
    -webkit-overflow-scrolling: auto;
}

@media (max-width: 767px) {
    body {
        font-size: 16px;
    }
}

.text-small {
    font-size: 15px;
}
.text-aside {
    font-size: 16px;
    line-height: 1.75;
}
.lead-text-large {
    font-size: 32px;
    line-height: 1.35;
    font-weight: 400;
}
.lead-text-medium {
    font-family: Lora, "Times New Roman", Times, serif;
    font-size: 26px;
    line-height: 1.5;
    font-weight: 400;
}
.lead-text-basic {
    font-size: 19px;
    font-weight: 400;
}
@media (max-width: 991px) {
    .lead-text-large {
        font-size: 27px;
    }
    .lead-text-medium {
        font-size: 23px;
    }
}
@media (max-width: 570px) {
    .lead-text-large {
        font-size: 24px;
    }
    .lead-text-medium {
        font-size: 21px;
    }
}

/* Headings
--------------------------------------------------- */
h1 {
    font-family: Roboto, Arial, "Helvetica Neue", Helvetica, sans-serif;
}
h2,
h3,
h4,
h5 {
    font-family: Roboto, Arial, "Helvetica Neue", Helvetica, sans-serif;
}
h6 {
    font-family: Muli, Arial, "Helvetica Neue", Helvetica, sans-serif;
}

h1 {
    font-size: 58px;
    line-height: 1.15;
    color: #fff;
    font-weight: 400;
}
.single-post h1 {
    font-size: 50px;
    line-height: 1.2;
}
h2 {
    font-size: 36px;
    line-height: 1.3;
    color: #222;
    font-weight: 500;
}
h3,
#main-content h2:not(.lead-text-large),
.single-post .post-content h2:not(.lead-text-large) {
    font-size: 28px;
    line-height: 1.4;
    color: #222;
    font-weight: 700;
}
h4,
#main-content h3:not(.lead-text-large),
.single-post .post-content h3:not(.lead-text-large) {
    font-size: 24px;
    line-height: 1.45;
    color: #222;
    font-weight: 700;
}
h5,
#main-content h4,
.single-post .post-content h4 {
    font-size: 20px;
    line-height: 1.5;
    color: #222;
    font-weight: 700;
}
h6 {
    font-size: 17px;
    line-height: 1.5;
    color: #222;
    font-weight: 700;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
    font-weight: inherit;
    padding: 5px 0;
}
h1 {
    margin-bottom: 10px;
}
h2,
h3 {
    margin-bottom: 25px;
}
h4 {
    margin-bottom: 20px;
}
h5,
h6 {
    margin-bottom: 15px;
}

h2.lead-text-large,
h3.lead-text-large {
    font-family: inherit;
}

/* Headings in "slogan" style */
.h1-slogan,
.h2-slogan,
.h3-slogan {
    font-family: Lora, "Times New Roman", Times, serif;
    line-height: 1.15;
    font-weight: 400;
    margin-bottom: 10px;
}
.h1-slogan,
.h2-slogan {
    font-size: 48px;
}
.h3-slogan {
    font-size: 42px;
}

@media (min-width: 1520px) {
    h1 {
        font-size: 66px;
    }
    .single-post h1 {
        font-size: 58px;
    }
}
@media (min-width: 992px) and (max-width: 1199px) {
    h1 {
        font-size: 54px;
    }
    .single-post h1 {
        font-size: 45px;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    h1 {
        font-size: 48px;
    }
    .single-post h1 {
        font-size: 40px;
    }
}
@media (max-width: 991px) {
    h2 {
        font-size: 32px;
    }
    h3,
    #main-content h2:not(.lead-text-large),
    .single-post .post-content h2:not(.lead-text-large) {
        font-size: 25px;
    }
    h4,
    #main-content h3:not(.lead-text-large),
    .single-post .post-content h3:not(.lead-text-large) {
        font-size: 22px;
    }
    .h1-slogan,
    .h2-slogan {
        font-size: 42px;
    }
    .h3-slogan {
        font-size: 38px;
    }
}
@media (min-width: 571px) and (max-width: 767px) {
    h1 {
        font-size: 44px;
    }
    .single-post h1 {
        font-size: 36px;
    }
}
@media (max-width: 570px) {
    h1 {
        font-size: 38px;
    }
    .single-post h1 {
        font-size: 30px;
    }
    h2 {
        font-size: 28px;
    }
    h3,
    #main-content h2:not(.lead-text-large),
    .single-post .post-content h2:not(.lead-text-large) {
        font-size: 24px;
    }
    .h1-slogan,
    .h2-slogan {
        font-size: 38px;
    }
    .h3-slogan {
        font-size: 33px;
    }
}
@media (max-width: 360px) {
    h1 {
        font-size: 35px;
    }
    .single-post h1 {
        font-size: 28px;
    }
}

/* Basic Tags & Classes
--------------------------------------------------- */
p {
    margin: 0 0 25px 0;
}
p img {
    margin: 0;
}

em {
    font-style: italic;
}
strong,
b {
    font-weight: bold;
}

.text-lowercase {
    text-transform: lowercase;
}
.text-uppercase {
    text-transform: uppercase;
}
.text-underline {
    text-decoration: underline;
}

.font-weight-bold {
    font-weight: 700;
}
.font-weight-semibold {
    font-weight: 600;
}
.font-weight-normal {
    font-weight: 400;
}
.font-weight-light {
    font-weight: 300;
}
.font-italic {
    font-style: italic;
}

/* Text color */
.text-black {
    color: #222 !important;
}
.text-dark-grey {
    color: #505050 !important;
}
.text-grey {
    color: #666 !important;
}
.text-light-grey {
    color: #909090 !important;
}
.text-white {
    color: #fff !important;
}

.text-primary-color {
    color: #1f5494 !important;
}
.text-primary-color-muted {
    color: #62758c !important;
}
.text-primary-color-pale {
    color: #879ab0 !important;
}
.text-primary-color-light {
    color: #b6c7db !important;
}
.text-primary-color-extralight {
    color: #d4e7ff !important;
}

.text-secondary-color {
    color: #ff8f00 !important;
}
.dark-colored-bg .text-secondary-color {
    color: #ff8f00 !important;
}
.stripe-secondary-color-bg .text-secondary-color {
    color: rgba(0, 0, 0, 0.65) !important;
}

hr {
    border: none;
    border-bottom: 1px solid #dedede;
    clear: none;
    height: 0;
    margin: 0 0 25px;
}

code,
kbd {
    display: inline;
    font-family: "Lucida Console", "Lucida Sans Typewriter", "Andale Mono",
        "Courier New", Courier, monospace;
    font-size: 14px;
    color: #909090;
    white-space: pre-wrap;
}
pre {
    font-family: "Lucida Console", "Lucida Sans Typewriter", "Andale Mono",
        "Courier New", Courier, monospace;
    font-size: 13px;
    background-color: #f5f5f5;
    border-left: 2px solid #d5d5d5;
    margin: 0 0 25px;
    padding: 20px 25px;
    overflow: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
}

address {
    font-style: italic;
    margin: 0 0 25px;
}
abbr[title],
acronym {
    font-variant: none;
    border-bottom: 1px dotted;
}
ins {
    background-color: #fcfbe2;
    padding: 1px 4px 3px;
    text-decoration: none;
}
var {
    font-style: italic;
}

sub,
sup {
    position: relative;
    font-size: 75%;
    line-height: 0;
}
sub {
    bottom: -0.3em;
}
sup {
    top: -0.4em;
}

/* Blockquote
--------------------------------------------------- */
blockquote {
    position: relative;
    font-size: 20px;
    line-height: 1.8;
    font-style: italic;
    letter-spacing: 0.8px;
    border-left: 6px solid rgba(255, 188, 140, 0.5); /* #ff8f00 */
    margin-bottom: 40px;
    padding: 0 0 10px 30px;
}
.info-box blockquote {
    border-left: none;
    margin-bottom: 25px;
    padding: 0;
}
blockquote p {
    font-family: Lora, "Times New Roman", Times, serif;
    color: #62758c;
    margin-bottom: 0;
}
blockquote p.lead-text-basic {
    font-family: inherit;
    font-style: normal;
    letter-spacing: 0;
}
blockquote cite {
    display: block;
    font-family: Muli, Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    font-weight: normal;
    font-style: italic;
    color: #909090;
    letter-spacing: 0;
    margin-top: 15px;
}
blockquote cite strong {
    font-style: normal;
}
blockquote cite::before {
    content: "\2014 \00A0";
}

/* the same style as "blockquote" but without border */
.text-blockquote {
    font: italic 20px/1.8 Lora, "Times New Roman", Times, serif;
    letter-spacing: 0.8px;
    color: #62758c;
}

/* Pullquote
--------------------------------------------------- */
.pullquote {
    display: table;
}
.stripe-bottom .pullquote {
    margin-bottom: 10px;
}
.pullquote .pullquote-stat {
    display: table-cell;
    min-width: 170px;
    vertical-align: middle;
    padding-right: 30px;
}
.pullquote .pullquote-stat .out-of-number {
    font-size: 62px;
    font-weight: normal;
    line-height: 1;
    color: #1b9ad0;
}
.pullquote .pullquote-statement {
    display: table-cell;
    vertical-align: middle;
}
.pullquote blockquote {
    font-size: 28px;
    font-style: normal;
    line-height: inherit;
    letter-spacing: 0.5px;
    border-left: none;
    margin-bottom: 0;
    padding: 0;
}
.pullquote blockquote cite {
    font-size: 18px;
}

/* for dark colored background */
.dark-colored-bg .pullquote .pullquote-stat .out-of-number {
    color: #ff8f00;
}
.dark-colored-bg .pullquote blockquote p {
    color: #eee;
}
.dark-colored-bg .pullquote blockquote cite {
    color: #ccc;
}
.dark-colored-bg .pullquote blockquote cite a {
    color: #d4e7ff;
}
.dark-colored-bg .pullquote blockquote cite a:hover {
    color: inherit;
}

/* for secondary color background */
.stripe-secondary-color-bg .pullquote .pullquote-stat .out-of-number {
    color: rgba(0, 0, 0, 0.6);
}
.stripe-secondary-color-bg .pullquote blockquote p {
    color: inherit;
}
.stripe-secondary-color-bg .pullquote blockquote cite {
    color: #666;
}
.stripe-secondary-color-bg .pullquote blockquote cite a {
    color: rgba(0, 0, 0, 0.6);
}
.stripe-secondary-color-bg .pullquote blockquote cite a:hover {
    color: inherit;
}

/* Quote marks */
.quote-marks {
    position: relative;
}
.pullquote.quote-marks {
    margin-left: 65px;
}
.quote-marks::before {
    position: absolute;
    display: block;
    top: -7px;
    left: -80px;
    font: italic 120px/1 Verdana, Geneva, sans-serif;
    color: rgba(182, 199, 219, 0.6); /* #b6c7db; */
    content: '"';
}
h2.quote-marks::before {
    top: -4px;
}
.stripe-white-bg .quote-marks::before,
#page-content.sidebar-layout .quote-marks::before {
    color: rgba(182, 199, 219, 0.5); /* #b6c7db; */
}
.dark-colored-bg .quote-marks::before {
    color: rgba(255, 255, 255, 0.3);
}
.stripe-secondary-color-bg .quote-marks::before {
    color: rgba(0, 0, 0, 0.2);
}

@media (min-width: 768px) and (max-width: 991px) {
    .pullquote blockquote {
        font-size: 25px;
    }
}
@media (max-width: 767px) {
    blockquote,
    .text-blockquote {
        font-size: 18px;
    }
    .pullquote blockquote {
        font-size: 23px;
    }
    .pullquote blockquote cite {
        font-size: 16px;
    }
}
@media (max-width: 570px) {
    blockquote {
        border-left-width: 4px;
        padding-left: 24px;
    }
    .pullquote,
    .pullquote .pullquote-stat,
    .pullquote .pullquote-statement {
        display: block;
    }
    .pullquote .pullquote-stat {
        min-width: 0;
        margin-bottom: 10px;
        padding-right: 0;
    }
    .pullquote .pullquote-stat .out-of-number {
        font-size: 54px;
    }
}

/* Links
--------------------------------------------------- */
a {
    text-decoration: none;
    outline: 0;
    -webkit-transition-property: color, border-color, background-color, opacity;
    -o-transition-property: color, border-color, background-color, opacity;
    transition-property: color, border-color, background-color, opacity;
    -webkit-transition-duration: 0.2s;
    -o-transition-duration: 0.2s;
    transition-duration: 0.2s;
}

a {
    color: #009cdf;
    background-color: transparent;
    font-weight: 400;
}
a:hover {
    color: #1f5494;
}
p a {
    line-height: inherit;
}
strong a {
    font-weight: inherit;
}

.text-black a,
.text-white a,
.text-primary-color a,
.text-secondary-color a {
    color: inherit;
}
.text-black a:hover {
    color: #1f5494;
}
.text-primary-color a:hover {
    color: #184173;
}
.text-secondary-color a:hover {
    color: #21354d;
}
.text-white a:hover {
    color: #d4e7ff;
}

a.text-secondary-color:hover {
    color: #1b9ad0 !important;
}
a.text-white:hover {
    color: #d4e7ff !important;
}
a.text-black:hover {
    color: #21354d !important;
}

p.text-white a,
ul.text-white a,
ol.text-white a {
    color: #d4e7ff;
}
p.text-white a:hover,
ul.text-white a:hover,
ol.text-white a:hover {
    color: #ff8f00;
}

/* for secondary color background */
.stripe-secondary-color-bg .text-black a:hover {
    color: #21354d;
}

/* Link for block */
a.block-link,
a.block-link:hover {
    color: inherit;
}

/* Read more link*/
a.read-more-link {
    position: relative;
    display: inline-block;
    font: 700 16px/24px Verdana, Geneva, sans-serif;
    padding-bottom: 3px;
}
a.read-more-link::after {
    display: inline-block;
    font-family: Ionicons;
    font-size: 14px;
    line-height: 1;
    color: #009cdf;
    padding-left: 6px;
    vertical-align: -1px;
    content: "\f3d3 \f3d3";
    -webkit-transition: color 0.2s ease;
    -o-transition: color 0.2s ease;
    transition: color 0.2s ease;
}
a.read-more-link.text-uppercase {
    font-size: 14px;
}
a.read-more-link.text-uppercase::after {
    font-size: 12px;
    vertical-align: 0;
}
a.read-more-link:hover,
a.read-more-link:hover::after {
    color: #1f5494;
}
a.read-more-link.text-secondary-color::after {
    color: #ff8f00;
}
a.read-more-link.text-secondary-color:hover::after {
    color: #1b9ad0;
}
.dark-colored-bg a.read-more-link.text-secondary-color::after {
    color: #ff8f00;
}
.dark-colored-bg a.read-more-link.text-secondary-color:hover::after {
    color: #1b9ad0;
}
a.read-more-link.text-white::after {
    color: #fff;
}
a.read-more-link.text-white:hover::after {
    color: #d4e7ff;
}
a.read-more-link.text-black::after {
    color: #222;
}
a.read-more-link.text-black:hover::after {
    color: #21354d;
}

/* File type links */
a[class*="-file"] {
    position: relative;
    display: inline-block;
    font: 17px/23px Verdana, Geneva, sans-serif;
    padding-bottom: 3px;
}
a[class*="-file"]::before {
    display: inline-block;
    font-family: FontAwesome;
    font-size: 19px;
    line-height: 1;
    padding-right: 10px;
}
a.pdf-file::before {
    /* PDF file */
    color: #ea4c3a;
    content: "\f1c1";
}
a.word-file::before {
    /* Word file */
    color: #1c70b8;
    content: "\f1c2";
}
a.excel-file::before {
    /* Excel file */
    color: #4d9a34;
    content: "\f1c3";
}

/* Lists
--------------------------------------------------- */
ul,
ol {
    margin-bottom: 25px;
}
ul {
    list-style: disc outside;
    padding-left: 20px;
}
ol {
    list-style: decimal;
    padding-left: 26px;
    overflow: hidden;
}
ul.disc {
    overflow: hidden;
}
li {
    margin-bottom: 10px;
}
ul li:last-child,
ol li:last-child {
    margin-bottom: 0;
}

ul.tight li,
ol.tight li {
    margin-bottom: 0;
}

ul.list-unstyled {
    list-style: none;
    padding-left: 0;
}
ul.text-small li,
ol.text-small li {
    margin-bottom: 7px;
}

ul ul,
ul ol,
ol ol,
ol ul {
    padding-top: 7px;
    margin-bottom: 0;
}

ol.custom-counter {
    list-style: none;
    padding-left: 0;
    margin-left: -12px;
}
ol.custom-counter > li {
    position: relative;
    counter-increment: step-counter;
    padding-left: 37px;
}
ol.custom-counter > li::before {
    position: absolute;
    left: 0;
    top: 1px;
    width: 30px;
    content: counter(step-counter) ".";
    font-family: Verdana, Geneva, sans-serif;
    font-size: 15px;
    line-height: inherit;
    font-weight: bold;
    color: #879ab0;
    text-align: right;
}

/* Description List */
dt {
    font-weight: bold;
}
dd {
    margin: 0 0 20px;
}

/*-----------------------------------------------------------------------------------*/
/*	4. Buttons
/*-----------------------------------------------------------------------------------*/

.button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
    display: inline-block;
    font: 500 17px/22px Roboto, Arial, "Helvetica Neue", Helvetica, sans-serif;
    color: #fff;
    background: #1f5494;
    border: 2px solid #1f5494;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    padding: 12px 20px;
    outline: none;
    cursor: pointer;
    white-space: nowrap;
    -webkit-appearance: none;
}
.button::after {
    display: inline-block;
    font-family: Ionicons;
    font-size: 15px;
    line-height: 1;
    font-weight: bold;
    padding-left: 6px;
    vertical-align: -1px;
    content: "\f3d3 \f3d3";
    -webkit-transition: margin 0.15s ease;
    -o-transition: margin 0.15s ease;
    transition: margin 0.15s ease;
}

input[type="submit"],
input[type="reset"],
input[type="button"] {
    font-size: 15px;
    line-height: 24px;
    padding: 8px 20px;
    border: none;
}

input[type="submit"]::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner {
    padding: 0;
    border: 0;
    margin: 0;
}

.button:hover,
input[type="submit"].button:hover,
input[type="reset"].button:hover,
input[type="button"].button:hover {
    color: #fff;
    background-color: #184173;
    border-color: #184173;
}

.button:hover::after {
    margin-left: 3px;
    margin-right: -3px;
}

.button.button-medium {
    font-size: 15px;
    line-height: 20px;
    font-weight: bold;
    padding: 8px 15px;
}
.button.button-medium::after {
    font-size: 13px;
}

/* secondary color button */
.button.button-colored {
    background-color: #1b9ad0;
    border-color: #1b9ad0;
}
.button.button-colored:hover {
    background-color: #ff8f00;
    border-color: #ff8f00;
}

/* grey button */
.button.button-grey {
    background-color: #727378;
    border-color: #727378;
}
.button.button-grey:hover {
    background-color: #505050;
    border-color: #505050;
}

/* for dark colored background */
.dark-colored-bg .button {
    color: #f5f5f5;
    background-color: rgba(182, 199, 219, 0.6); /* #b6c7db */
    border-color: transparent;
}
.dark-colored-bg .button::after {
    color: #f5f5f5;
}
.dark-colored-bg .button:hover {
    background-color: rgba(182, 199, 219, 0.7); /* #b6c7db */
    border-color: transparent;
}
.dark-colored-bg .button.button-colored {
    color: #fff;
    background-color: rgba(255, 188, 140, 0.7); /* #ff8f00 */
    border-color: transparent;
}
.dark-colored-bg .button.button-colored::after {
    color: #fff;
}
.dark-colored-bg .button.button-colored:hover {
    background-color: rgba(255, 188, 140, 0.8); /* #ff8f00 */
    border-color: transparent;
}

/* Button with "download" icon
--------------------------------------------------- */
.button.download-icon {
    position: relative;
}
.button.download-icon::before {
    display: inline-block;
    font-family: FontAwesome;
    font-size: 19px;
    line-height: 1;
    vertical-align: -10%;
    padding-right: 8px;
    content: "\f019";
}
.button.button-medium.download-icon::before {
    font-family: Ionicons;
    font-size: 17px;
    vertical-align: -5%;
    padding-right: 6px;
    content: "\f35d";
}
.button.download-icon::after {
    display: none;
}

/* Button with "play" icon
--------------------------------------------------- */
.button.play-icon {
    position: relative;
    color: #1f5494;
    border: none;
    background: none !important;
    padding-left: 55px;
}
.button.play-icon::before {
    position: absolute;
    left: 0;
    top: 0;
    width: 44px;
    height: 44px;
    border: 2px solid #1f5494;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    content: "";
}
.button.play-icon::after {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    margin: 13px 0 0 17px;
    border-left: 13px solid #1f5494;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    content: "";
}
.button.play-icon::before,
.button.play-icon::after {
    -webkit-transition: all 0.15s ease;
    -o-transition: all 0.15s ease;
    transition: all 0.15s ease;
}
.button.play-icon:hover {
    color: #1f5494;
}
.button.play-icon:hover::before {
    background-color: #1f5494;
}
.button.play-icon:hover::after {
    border-left-color: #fff !important;
}
.dark-colored-bg .button.play-icon {
    color: #b6c7db;
}
.dark-colored-bg .button.play-icon::before {
    border-color: #b6c7db;
}
.dark-colored-bg .button.play-icon::after {
    border-left-color: #b6c7db;
}
.dark-colored-bg .button.play-icon:hover {
    color: #b6c7db;
}
.dark-colored-bg .button.play-icon:hover::before {
    background-color: #b6c7db;
}

/* colored button */
.button.button-colored.play-icon {
    color: #ff8f00;
}
.button.button-colored.play-icon::before {
    border-color: #1b9ad0;
}
.button.button-colored.play-icon::after {
    border-left-color: #1b9ad0;
}
.button.button-colored.play-icon:hover {
    color: #ff8f00;
}
.button.button-colored.play-icon:hover::before {
    background-color: #1b9ad0;
}
.dark-colored-bg .button.button-colored.play-icon {
    color: #f7f7f7;
}
.dark-colored-bg .button.button-colored.play-icon::before {
    border-color: #ff8f00;
}
.dark-colored-bg .button.button-colored.play-icon::after {
    border-left-color: #ff8f00;
}
.dark-colored-bg .button.button-colored.play-icon:hover {
    color: #f7f7f7;
}
.dark-colored-bg .button.button-colored.play-icon:hover::before {
    background-color: #ff8f00;
}

/* grey button */
.button.button-grey.play-icon::before {
    border-color: #727378;
}
.button.button-grey.play-icon::after {
    border-left-color: #727378;
}
.button.button-grey.play-icon:hover {
    color: #727378;
}
.button.button-grey.play-icon:hover::before {
    background-color: #727378;
}
.dark-colored-bg .button.button-grey.play-icon {
    color: #ccc;
}
.dark-colored-bg .button.button-grey.play-icon::before {
    border-color: #ccc;
}
.dark-colored-bg .button.button-grey.play-icon::after {
    border-left-color: #ccc;
}
.dark-colored-bg .button.button-grey.play-icon:hover::before {
    background-color: #ccc;
}

/*-----------------------------------------------------------------------------------*/
/*	5. Forms
/*-----------------------------------------------------------------------------------*/

input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="search"],
textarea,
select {
    display: block;
    width: 100%;
    font: 15px/25px "Quattrocento Sans", Arial, "Helvetica Neue", Helvetica,
        sans-serif;
    color: #666;
    background-color: #fff;
    border: 1px solid #879ab0;
    -webkit-border-radius: 0;
    border-radius: 0;
    margin: 0 0 17px;
    padding: 3px 12px 4px;
    outline: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-appearance: none;
}
input[type="checkbox"] {
    display: inline;
    -webkit-box-shadow: none;
    box-shadow: none;
}
textarea {
    padding-top: 8px;
    padding-bottom: 8px;
    line-height: 23px;
}
label,
legend {
    display: block;
    font-size: 15px;
}
input,
textarea {
    -webkit-transition-property: color, border-color, background-color,
        box-shadow;
    -o-transition-property: color, border-color, background-color, box-shadow;
    transition-property: color, border-color, background-color, box-shadow;
    -webkit-transition-duration: 0.15s;
    -o-transition-duration: 0.15s;
    transition-duration: 0.15s;
}

/* Disable auto zoom in input/textarea/select fields - Safari on iPhone */
@media (max-width: 767px) and (-webkit-min-device-pixel-ratio: 0) {
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="url"],
    input[type="search"],
    textarea,
    select {
        font-size: 16px;
    }
}

/* Custom select */
.select-wrapper {
    position: relative;
    margin-bottom: 17px;
}
.select-wrapper::after {
    position: absolute;
    top: 50%;
    right: 15px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #879ab0;
    margin-top: -3px;
    content: "";
    z-index: 2;
    /* These hacks make the select behind the arrow clickable in some browsers */
    pointer-events: none;
}
.select-wrapper select {
    /* Remove select styling */
    background: none;
    margin: 0;
    padding-right: 32px;
    text-overflow: ellipsis;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* For IE10 and higher */
@media (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .select-wrapper select::-ms-expand {
        display: none;
    }
    .select-wrapper select:focus::-ms-value {
        background: transparent;
    }
}
@-moz-document url-prefix() {
    .select-wrapper select {
        padding-left: 8px;
    }
}

/*-----------------------------------------------------------------------------------*/
/*	6. Images
/*-----------------------------------------------------------------------------------*/

img {
    max-width: 100%;
    height: auto;
}
.scale-with-grid {
    display: block;
    max-width: 100%;
    height: auto;
}
.frame-scale-with-grid {
    max-width: 100%;
}

/* Round image */
.img-round {
    -webkit-border-radius: 50%;
    border-radius: 50%;
}
.img-round.img-shadow {
    -webkit-box-shadow: -7px -6px 0 5px rgba(182, 199, 219, 0.7);
    box-shadow: -7px -6px 0 5px rgba(182, 199, 219, 0.7); /* #b6c7db */
}

/* Centering an image */
figure[class*="align-"][class*="center"]:not([class*="width-"]) {
    line-height: 0;
}
figure[class*="align-"][class*="center"]:not([class*="width-"]) img {
    display: inline;
}

/* Image caption */
figure figcaption.item-label {
    font-size: 15px;
    text-align: center;
    margin-top: 10px;
}
.mfp-figure figure figcaption {
    font-size: 15px;
}

/* Dashed curve as background element for an image
--------------------------------------------------- */
.img-step {
    position: relative;
}
figure.img-step {
    max-width: 300px;
}
.img-step.img-dashed-curve-left img,
.img-step.img-dashed-curve-right img {
    position: relative;
    z-index: 2;
}
.img-step.img-dashed-curve-left::before,
.img-step.img-dashed-curve-right::before {
    position: absolute;
    background-position: left top;
    background-repeat: no-repeat;
    background-size: 665px 180px;
    opacity: 0.25;
    content: "";
    z-index: 1;
}
.img-step.img-dashed-curve-left::before {
    -webkit-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
}

/* Media queries
--------------------------------------------------- */
@media (min-width: 1520px) {
    #page-content .img-step {
        margin-top: 50px;
        margin-bottom: 90px;
    }
    .img-step.img-dashed-curve-left::before,
    .img-step.img-dashed-curve-right::before {
        top: -210px;
        width: 789px;
        height: 190px;
        background: url(../images/backgrounds/primary-color/royal-blue/dashed-curve-lg.svg)
            no-repeat left top;
        background-size: 789px 190px;
    }
    .img-step.img-dashed-curve-left::before {
        right: 140px;
    }
    .img-step.img-dashed-curve-right::before {
        left: 120px;
    }
    .stripe-box .col-sm-5 .img-step.img-dashed-curve-left::before,
    .stripe-box .col-sm-5 .img-step.img-dashed-curve-right::before,
    .stripe-box .col-sm-6 .img-step.img-dashed-curve-left::before,
    .stripe-box .col-sm-6 .img-step.img-dashed-curve-right::before {
        width: 665px;
        height: 180px;
        background-image: url(../images/backgrounds/primary-color/royal-blue/dashed-curve-md.svg);
        background-size: 665px 180px;
    }
    .stripe-white-bg.stripe-fullwidth
        .col-sm-4
        .img-step.img-dashed-curve-left::before,
    .stripe-white-bg.stripe-fullwidth
        .col-sm-4
        .img-step.img-dashed-curve-right::before,
    .stripe-transparent-bg .col-sm-4 .img-step.img-dashed-curve-left::before,
    .stripe-transparent-bg .col-sm-4 .img-step.img-dashed-curve-right::before {
        top: -200px;
        width: 851px;
        height: 205px;
        background-size: 851px 200px;
    }
    .stripe-white-bg.stripe-fullwidth
        .col-sm-4
        .img-step.img-dashed-curve-left::before,
    .stripe-transparent-bg .col-sm-4 .img-step.img-dashed-curve-left::before {
        right: 220px;
    }
    .stripe-white-bg.stripe-fullwidth
        .col-sm-4
        .img-step.img-dashed-curve-right::before,
    .stripe-transparent-bg .col-sm-4 .img-step.img-dashed-curve-right::before {
        left: 200px;
    }
}
@media (min-width: 1200px) and (max-width: 1519px) {
    #page-content .img-step {
        margin-top: 60px;
        margin-bottom: 90px;
    }
    .img-step.img-dashed-curve-left::before,
    .img-step.img-dashed-curve-right::before {
        top: -220px;
        width: 665px;
        height: 180px;
        background-image: url(../images/backgrounds/primary-color/royal-blue/dashed-curve-md.svg);
        background-size: 665px 180px;
    }
    .img-step.img-dashed-curve-left::before {
        right: 140px;
    }
    .img-step.img-dashed-curve-right::before {
        left: 120px;
    }
    .stripe-box .col-sm-5 .img-step.img-dashed-curve-left::before,
    .stripe-box .col-sm-5 .img-step.img-dashed-curve-right::before,
    .stripe-box .col-sm-6 .img-step.img-dashed-curve-left::before,
    .stripe-box .col-sm-6 .img-step.img-dashed-curve-right::before {
        width: 608px;
        background-image: url(../images/backgrounds/primary-color/royal-blue/dashed-curve-sm.svg);
        background-size: 608px 180px;
    }
    .stripe-white-bg.stripe-fullwidth .img-step.img-dashed-curve-left::before,
    .stripe-white-bg.stripe-fullwidth .img-step.img-dashed-curve-right::before,
    .stripe-transparent-bg .img-step.img-dashed-curve-left::before,
    .stripe-transparent-bg .img-step.img-dashed-curve-right::before {
        top: -210px;
        width: 747px;
        height: 180px;
        background: url(../images/backgrounds/primary-color/royal-blue/dashed-curve-lg.svg)
            no-repeat left top;
        background-size: 747px 180px;
    }
    .stripe-white-bg.stripe-fullwidth
        .col-sm-4
        .img-step.img-dashed-curve-left::before,
    .stripe-white-bg.stripe-fullwidth
        .col-sm-4
        .img-step.img-dashed-curve-right::before,
    .stripe-transparent-bg .col-sm-4 .img-step.img-dashed-curve-left::before,
    .stripe-transparent-bg .col-sm-4 .img-step.img-dashed-curve-right::before {
        width: 789px;
        height: 190px;
        background-size: 789px 190px;
    }
    .stripe-white-bg.stripe-fullwidth
        .col-sm-4
        .img-step.img-dashed-curve-left::before,
    .stripe-transparent-bg .col-sm-4 .img-step.img-dashed-curve-left::before {
        right: 180px;
    }
    .stripe-white-bg.stripe-fullwidth
        .col-sm-4
        .img-step.img-dashed-curve-right::before,
    .stripe-transparent-bg .col-sm-4 .img-step.img-dashed-curve-right::before {
        left: 160px;
    }
}
@media (min-width: 992px) and (max-width: 1199px) {
    #page-content .img-step {
        margin-top: 50px;
        margin-bottom: 90px;
    }
    #page-content figure.img-step {
        max-width: 200px;
    }
    .img-step.img-dashed-curve-left::before,
    .img-step.img-dashed-curve-right::before {
        top: -210px;
        width: 608px;
        height: 180px;
        background-image: url(../images/backgrounds/primary-color/royal-blue/dashed-curve-sm.svg);
        background-size: 608px 180px;
    }
    .img-step.img-dashed-curve-left::before {
        right: 110px;
    }
    .img-step.img-dashed-curve-right::before {
        left: 90px;
    }
    .stripe-box .col-sm-5 .img-step.img-dashed-curve-left::before,
    .stripe-box .col-sm-5 .img-step.img-dashed-curve-right::before,
    .stripe-box .col-sm-6 .img-step.img-dashed-curve-left::before,
    .stripe-box .col-sm-6 .img-step.img-dashed-curve-right::before {
        top: -200px;
        width: 539px;
        height: 160px;
        background-size: 539px 160px;
    }
    .stripe-white-bg.stripe-fullwidth
        .col-sm-4
        .img-step.img-dashed-curve-left::before,
    .stripe-white-bg.stripe-fullwidth
        .col-sm-4
        .img-step.img-dashed-curve-right::before,
    .stripe-transparent-bg .col-sm-4 .img-step.img-dashed-curve-left::before,
    .stripe-transparent-bg .col-sm-4 .img-step.img-dashed-curve-right::before {
        top: -210px;
        width: 665px;
        height: 180px;
        background-image: url(../images/backgrounds/primary-color/royal-blue/dashed-curve-md.svg);
        background-size: 665px 180px;
    }
    .stripe-white-bg.stripe-fullwidth
        .col-sm-4
        .img-step.img-dashed-curve-left::before,
    .stripe-transparent-bg .col-sm-4 .img-step.img-dashed-curve-left::before {
        right: 140px;
    }
    .stripe-white-bg.stripe-fullwidth
        .col-sm-4
        .img-step.img-dashed-curve-right::before,
    .stripe-transparent-bg .col-sm-4 .img-step.img-dashed-curve-right::before {
        left: 120px;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    #page-content .img-step {
        margin-top: 80px;
        margin-bottom: 60px;
    }
    #page-content figure.img-step {
        max-width: 170px;
    }
    .img-step.img-dashed-curve-left::before,
    .img-step.img-dashed-curve-right::before {
        top: -200px;
        width: 505px;
        height: 150px;
        background-image: url(../images/backgrounds/primary-color/royal-blue/dashed-curve-sm.svg);
        background-size: 505px 150px;
    }
    .img-step.img-dashed-curve-left::before {
        right: 90px;
    }
    .img-step.img-dashed-curve-right::before {
        left: 70px;
    }
    .stripe-box .col-sm-5 .img-step.img-dashed-curve-left::before,
    .stripe-box .col-sm-5 .img-step.img-dashed-curve-right::before,
    .stripe-box .col-sm-6 .img-step.img-dashed-curve-left::before,
    .stripe-box .col-sm-6 .img-step.img-dashed-curve-right::before {
        top: -200px;
        width: 471px;
        height: 140px;
        background-size: 471px 140px;
    }
    .stripe-white-bg.stripe-fullwidth .img-step.img-dashed-curve-left::before,
    .stripe-transparent-bg .img-step.img-dashed-curve-left::before {
        right: 100px;
    }
    .stripe-white-bg.stripe-fullwidth .img-step.img-dashed-curve-right::before,
    .stripe-transparent-bg .img-step.img-dashed-curve-right::before {
        left: 80px;
    }
}
@media (max-width: 767px) {
    #page-content figure.img-step {
        max-width: 170px;
    }
    #page-content .img-step.img-dashed-curve-left,
    #page-content .img-step.img-dashed-curve-right {
        margin-top: -40px;
    }
    .img-step.img-dashed-curve-left::before,
    .img-step.img-dashed-curve-right::before {
        display: none;
        background: none;
    }
}
@media (min-width: 571px) and (max-width: 767px) {
    .stripe .container-fluid figure.img-stripe-full-size img {
        max-width: 120%;
        margin-left: -10%;
        margin-right: -10%;
    }
}
@media (min-width: 480px) and (max-width: 570px) {
    .stripe .container-fluid figure.img-stripe-full-size img {
        max-width: 150%;
        margin-left: -25%;
        margin-right: -25%;
    }
}
@media (max-width: 479px) {
    .stripe .container-fluid figure.img-stripe-full-size img {
        max-width: 200%;
        margin-left: -50%;
        margin-right: -50%;
    }
}

/*-----------------------------------------------------------------------------------*/
/*	7. Width, Height, Margin, Padding, Offset
/*-----------------------------------------------------------------------------------*/

/* Margin/padding of element/block
--------------------------------------------------- */
.remove-bottom {
    margin-bottom: 0 !important;
}
.margin-bottom-3px {
    margin-bottom: 3px !important;
}
.margin-bottom-5px {
    margin-bottom: 5px !important;
}
.margin-bottom-7px {
    margin-bottom: 7px !important;
}
.margin-bottom-10px {
    margin-bottom: 10px !important;
}
.margin-bottom-12px {
    margin-bottom: 12px !important;
}
.margin-bottom-15px {
    margin-bottom: 15px !important;
}
.margin-bottom-20px {
    margin-bottom: 20px !important;
}
.margin-bottom-25px {
    margin-bottom: 25px !important;
}
.margin-bottom-30px {
    margin-bottom: 30px !important;
}
.margin-bottom-35px {
    margin-bottom: 35px !important;
}
.margin-bottom-40px {
    margin-bottom: 40px !important;
}
.margin-bottom-45px {
    margin-bottom: 45px !important;
}
.margin-bottom-50px {
    margin-bottom: 50px !important;
}
.margin-bottom-55px {
    margin-bottom: 55px !important;
}
.margin-bottom-60px {
    margin-bottom: 60px !important;
}
.margin-bottom-65px {
    margin-bottom: 65px !important;
}
.margin-bottom-70px {
    margin-bottom: 70px !important;
}
.margin-bottom-75px {
    margin-bottom: 75px !important;
}
.margin-bottom-80px {
    margin-bottom: 80px !important;
}
.margin-bottom-85px {
    margin-bottom: 85px !important;
}
.margin-bottom-90px {
    margin-bottom: 90px !important;
}
.margin-bottom-95px {
    margin-bottom: 95px !important;
}
.margin-bottom-100px {
    margin-bottom: 100px !important;
}

.margin-top-5px {
    margin-top: 5px;
}
.margin-top-10px {
    margin-top: 10px;
}
.margin-top-15px {
    margin-top: 15px;
}
.margin-top-20px {
    margin-top: 20px;
}
.margin-top-25px {
    margin-top: 25px;
}
.margin-top-30px {
    margin-top: 30px;
}
.margin-top-35px {
    margin-top: 35px;
}
.margin-top-40px {
    margin-top: 40px;
}
.margin-top-45px {
    margin-top: 45px;
}
.margin-top-50px {
    margin-top: 50px;
}
.margin-top-55px {
    margin-top: 55px;
}
.margin-top-60px {
    margin-top: 60px;
}
.margin-top-65px {
    margin-top: 65px;
}
.margin-top-70px {
    margin-top: 70px;
}
.margin-top-75px {
    margin-top: 75px;
}
.margin-top-80px {
    margin-top: 80px;
}
.margin-top-85px {
    margin-top: 85px;
}
.margin-top-90px {
    margin-top: 90px;
}
.margin-top-95px {
    margin-top: 95px;
}
.margin-top-100px {
    margin-top: 100px;
}

.padding-top-5px {
    padding-top: 5px;
}
.padding-top-10px {
    padding-top: 10px;
}
.padding-top-15px {
    padding-top: 15px;
}
.padding-top-20px {
    padding-top: 20px;
}
.padding-top-25px {
    padding-top: 25px;
}
.padding-top-30px {
    padding-top: 30px;
}
.padding-top-35px {
    padding-top: 35px;
}
.padding-top-40px {
    padding-top: 40px;
}
.padding-top-45px {
    padding-top: 45px;
}
.padding-top-50px {
    padding-top: 50px;
}
.padding-top-55px {
    padding-top: 55px;
}
.padding-top-60px {
    padding-top: 60px;
}
.padding-top-65px {
    padding-top: 65px;
}
.padding-top-70px {
    padding-top: 70px;
}
.padding-top-75px {
    padding-top: 75px;
}
.padding-top-80px {
    padding-top: 80px;
}
.padding-top-85px {
    padding-top: 85px;
}
.padding-top-90px {
    padding-top: 90px;
}
.padding-top-95px {
    padding-top: 95px;
}
.padding-top-100px {
    padding-top: 100px;
}

.gap[class*="margin-bottom-"] {
    height: 1px;
    margin-top: -1px;
}

/* Indentation of element/block
--------------------------------------------------- */
.indent-small {
    padding-left: 10px;
}
.indent-medium {
    padding-left: 20px;
}
.indent-large {
    padding-left: 30px;
}
ul.indent-small,
ol.indent-small {
    padding-left: 30px;
}
ul.indent-medium,
ol.indent-medium {
    padding-left: 40px;
}
ul.indent-large,
ol.indent-large {
    padding-left: 50px;
}
ol.custom-counter.indent-small {
    margin-left: -2px;
    padding-left: 0;
}
ol.custom-counter.indent-medium {
    margin-left: 0;
    padding-left: 8px;
}
ol.custom-counter.indent-large {
    margin-left: 0;
    padding-left: 18px;
}

/* Width of element/block
--------------------------------------------------- */
.width-50px {
    width: 50px;
}
.width-60px {
    width: 60px;
}
.width-70px {
    width: 70px;
}
.width-80px {
    width: 80px;
}
.width-90px {
    width: 90px;
}
.width-100px {
    width: 100px;
}
.width-110px {
    width: 110px;
}
.width-120px {
    width: 120px;
}
.width-130px {
    width: 130px;
}
.width-140px {
    width: 140px;
}
.width-150px {
    width: 150px;
}
.width-160px {
    width: 160px;
}
.width-170px {
    width: 170px;
}
.width-180px {
    width: 180px;
}
.width-190px {
    width: 190px;
}
.width-200px {
    width: 200px;
}
.width-210px {
    width: 210px;
}
.width-220px {
    width: 220px;
}
.width-230px {
    width: 230px;
}
.width-240px {
    width: 240px;
}
.width-250px {
    width: 250px;
}
.width-260px {
    width: 260px;
}
.width-270px {
    width: 270px;
}
.width-280px {
    width: 280px;
}
.width-290px {
    width: 290px;
}
.width-300px {
    width: 300px;
}
.width-310px {
    width: 310px;
}
.width-320px {
    width: 320px;
}
.width-330px {
    width: 330px;
}
.width-340px {
    width: 340px;
}
.width-350px {
    width: 350px;
}
.width-360px {
    width: 360px;
}
.width-370px {
    width: 370px;
}
.width-380px {
    width: 380px;
}
.width-390px {
    width: 390px;
}
.width-400px {
    width: 400px;
}
.width-410px {
    width: 410px;
}
.width-420px {
    width: 420px;
}
.width-430px {
    width: 430px;
}
.width-440px {
    width: 440px;
}
.width-450px {
    width: 450px;
}
.width-460px {
    width: 460px;
}
.width-470px {
    width: 470px;
}
.width-480px {
    width: 480px;
}
.width-490px {
    width: 490px;
}
.width-500px {
    width: 500px;
}
.width-510px {
    width: 510px;
}
.width-520px {
    width: 520px;
}
.width-530px {
    width: 530px;
}
.width-540px {
    width: 540px;
}
.width-550px {
    width: 550px;
}
.width-560px {
    width: 560px;
}
.width-570px {
    width: 570px;
}
.width-580px {
    width: 580px;
}
.width-590px {
    width: 590px;
}
.width-600px {
    width: 600px;
}
.width-610px {
    width: 610px;
}
.width-620px {
    width: 620px;
}
.width-630px {
    width: 630px;
}
.width-640px {
    width: 640px;
}
.width-650px {
    width: 650px;
}
.width-660px {
    width: 660px;
}
.width-670px {
    width: 670px;
}
.width-680px {
    width: 680px;
}
.width-690px {
    width: 690px;
}
.width-700px {
    width: 700px;
}

[class*="width-"][class*="px"] {
    max-width: 100%;
}

.width-one-fourth {
    width: 25%;
}
.width-one-third {
    width: 33.333333%;
}
.width-one-half {
    width: 50%;
}
.width-two-thirds {
    width: 66.666666%;
}
.width-three-fourths {
    width: 75%;
}

.width-10pct {
    width: 10%;
}
.width-20pct {
    width: 20%;
}
.width-30pct {
    width: 30%;
}
.width-35pct {
    width: 35%;
}
.width-40pct {
    width: 40%;
}
.width-45pct {
    width: 45%;
}
.width-50pct {
    width: 50%;
}
.width-60pct {
    width: 60%;
}
.width-70pct {
    width: 70%;
}
.width-80pct {
    width: 80%;
}
.width-90pct {
    width: 90%;
}
.width-100pct {
    width: 100%;
}

@media (max-width: 767px) {
    .width-auto-only-xs {
        width: auto;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .width-auto-only-sm {
        width: auto;
    }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .width-auto-only-md {
        width: auto;
    }
}
@media (min-width: 1200px) and (max-width: 1519px) {
    .width-auto-only-lg {
        width: auto;
    }
}
@media (min-width: 1520px) {
    .width-auto-only-xl {
        width: auto;
    }
}

/* Centering an element/block with adaptive width
--------------------------------------------------- */
@media (min-width: 1200px) {
    .width-50pct-centered {
        width: 50% !important;
        margin-left: 25%;
        margin-right: 25%;
    }
    .width-60pct-centered {
        width: 60% !important;
        margin-left: 20%;
        margin-right: 20%;
    }
    .width-70pct-centered {
        width: 70% !important;
        margin-left: 15%;
        margin-right: 15%;
    }
    .width-80pct-centered {
        width: 80% !important;
        margin-left: 10%;
        margin-right: 10%;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .width-50pct-centered {
        width: 60% !important;
        margin-left: 20%;
        margin-right: 20%;
    }
    .width-60pct-centered {
        width: 70% !important;
        margin-left: 15%;
        margin-right: 15%;
    }
    .width-70pct-centered {
        width: 80% !important;
        margin-left: 10%;
        margin-right: 10%;
    }
    .width-80pct-centered {
        width: 90% !important;
        margin-left: 5%;
        margin-right: 5%;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .width-50pct-centered {
        width: 74% !important;
        margin-left: 13%;
        margin-right: 13%;
    }
    .width-60pct-centered {
        width: 82% !important;
        margin-left: 9%;
        margin-right: 9%;
    }
    .width-70pct-centered {
        width: 90% !important;
        margin-left: 5%;
        margin-right: 5%;
    }
}

@media (min-width: 480px) and (max-width: 767px) {
    .width-50pct-centered {
        width: 86% !important;
        margin-left: 7%;
        margin-right: 7%;
    }
    .width-60pct-centered {
        width: 92% !important;
        margin-left: 4%;
        margin-right: 4%;
    }
}

/* Offset left/right for element/block
--------------------------------------------------- */
.offset-left-5px {
    margin-left: 5px;
}
.offset-right-5px {
    margin-right: 5px;
}
.offset-left-10px {
    margin-left: 10px;
}
.offset-right-10px {
    margin-right: 10px;
}
.offset-left-15px {
    margin-left: 15px;
}
.offset-right-15px {
    margin-right: 15px;
}
.offset-left-20px {
    margin-left: 20px;
}
.offset-right-20px {
    margin-right: 20px;
}
.offset-left-25px {
    margin-left: 25px;
}
.offset-right-25px {
    margin-right: 25px;
}
.offset-left-30px {
    margin-left: 30px;
}
.offset-right-30px {
    margin-right: 30px;
}
.offset-left-40px {
    margin-left: 40px;
}
.offset-right-40px {
    margin-right: 40px;
}
.offset-left-50px {
    margin-left: 50px;
}
.offset-right-50px {
    margin-right: 50px;
}
.offset-left-60px {
    margin-left: 60px;
}
.offset-right-60px {
    margin-right: 60px;
}
.offset-left-70px {
    margin-left: 70px;
}
.offset-right-70px {
    margin-right: 70px;
}

.offset-left-10pct {
    margin-left: 10%;
}
.offset-right-10pct {
    margin-right: 10%;
}
.offset-left-15pct {
    margin-left: 15%;
}
.offset-right-15pct {
    margin-right: 15%;
}
.offset-left-20pct {
    margin-left: 20%;
}
.offset-right-20pct {
    margin-right: 20%;
}
.offset-left-25pct {
    margin-left: 25%;
}
.offset-right-25pct {
    margin-right: 25%;
}

@media (min-width: 768px) {
    .offset-sm-left-5px {
        margin-left: 5px;
    }
    .offset-sm-right-5px {
        margin-right: 5px;
    }
    .offset-sm-left-10px {
        margin-left: 10px;
    }
    .offset-sm-right-10px {
        margin-right: 10px;
    }
    .offset-sm-left-15px {
        margin-left: 15px;
    }
    .offset-sm-right-15px {
        margin-right: 15px;
    }
    .offset-sm-left-20px {
        margin-left: 20px;
    }
    .offset-sm-right-20px {
        margin-right: 20px;
    }
    .offset-sm-left-25px {
        margin-left: 25px;
    }
    .offset-sm-right-25px {
        margin-right: 25px;
    }
    .offset-sm-left-30px {
        margin-left: 30px;
    }
    .offset-sm-right-30px {
        margin-right: 30px;
    }
    .offset-sm-left-40px {
        margin-left: 40px;
    }
    .offset-sm-right-40px {
        margin-right: 40px;
    }
    .offset-sm-left-50px {
        margin-left: 50px;
    }
    .offset-sm-right-50px {
        margin-right: 50px;
    }
    .offset-sm-left-60px {
        margin-left: 60px;
    }
    .offset-sm-right-60px {
        margin-right: 60px;
    }
    .offset-sm-left-70px {
        margin-left: 70px;
    }
    .offset-sm-right-70px {
        margin-right: 70px;
    }

    .offset-sm-left-10pct {
        margin-left: 10%;
    }
    .offset-sm-right-10pct {
        margin-right: 10%;
    }
    .offset-sm-left-15pct {
        margin-left: 15%;
    }
    .offset-sm-right-15pct {
        margin-right: 15%;
    }
    .offset-sm-left-20pct {
        margin-left: 20%;
    }
    .offset-sm-right-20pct {
        margin-right: 20%;
    }
    .offset-sm-left-25pct {
        margin-left: 25%;
    }
    .offset-sm-right-25pct {
        margin-right: 25%;
    }
}

@media (min-width: 992px) {
    .offset-md-left-5px {
        margin-left: 5px;
    }
    .offset-md-right-5px {
        margin-right: 5px;
    }
    .offset-md-left-10px {
        margin-left: 10px;
    }
    .offset-md-right-10px {
        margin-right: 10px;
    }
    .offset-md-left-15px {
        margin-left: 15px;
    }
    .offset-md-right-15px {
        margin-right: 15px;
    }
    .offset-md-left-20px {
        margin-left: 20px;
    }
    .offset-md-right-20px {
        margin-right: 20px;
    }
    .offset-md-left-25px {
        margin-left: 25px;
    }
    .offset-md-right-25px {
        margin-right: 25px;
    }
    .offset-md-left-30px {
        margin-left: 30px;
    }
    .offset-md-right-30px {
        margin-right: 30px;
    }
    .offset-md-left-40px {
        margin-left: 40px;
    }
    .offset-md-right-40px {
        margin-right: 40px;
    }
    .offset-md-left-50px {
        margin-left: 50px;
    }
    .offset-md-right-50px {
        margin-right: 50px;
    }
    .offset-md-left-60px {
        margin-left: 60px;
    }
    .offset-md-right-60px {
        margin-right: 60px;
    }
    .offset-md-left-70px {
        margin-left: 70px;
    }
    .offset-md-right-70px {
        margin-right: 70px;
    }

    .offset-md-left-10pct {
        margin-left: 10%;
    }
    .offset-md-right-10pct {
        margin-right: 10%;
    }
    .offset-md-left-15pct {
        margin-left: 15%;
    }
    .offset-md-right-15pct {
        margin-right: 15%;
    }
    .offset-md-left-20pct {
        margin-left: 20%;
    }
    .offset-md-right-20pct {
        margin-right: 20%;
    }
    .offset-md-left-25pct {
        margin-left: 25%;
    }
    .offset-md-right-25pct {
        margin-right: 25%;
    }
}

@media (min-width: 1200px) {
    .offset-lg-left-5px {
        margin-left: 5px;
    }
    .offset-lg-right-5px {
        margin-right: 5px;
    }
    .offset-lg-left-10px {
        margin-left: 10px;
    }
    .offset-lg-right-10px {
        margin-right: 10px;
    }
    .offset-lg-left-15px {
        margin-left: 15px;
    }
    .offset-lg-right-15px {
        margin-right: 15px;
    }
    .offset-lg-left-20px {
        margin-left: 20px;
    }
    .offset-lg-right-20px {
        margin-right: 20px;
    }
    .offset-lg-left-25px {
        margin-left: 25px;
    }
    .offset-lg-right-25px {
        margin-right: 25px;
    }
    .offset-lg-left-30px {
        margin-left: 30px;
    }
    .offset-lg-right-30px {
        margin-right: 30px;
    }
    .offset-lg-left-40px {
        margin-left: 40px;
    }
    .offset-lg-right-40px {
        margin-right: 40px;
    }
    .offset-lg-left-50px {
        margin-left: 50px;
    }
    .offset-lg-right-50px {
        margin-right: 50px;
    }
    .offset-lg-left-60px {
        margin-left: 60px;
    }
    .offset-lg-right-60px {
        margin-right: 60px;
    }
    .offset-lg-left-70px {
        margin-left: 70px;
    }
    .offset-lg-right-70px {
        margin-right: 70px;
    }

    .offset-lg-left-10pct {
        margin-left: 10%;
    }
    .offset-lg-right-10pct {
        margin-right: 10%;
    }
    .offset-lg-left-15pct {
        margin-left: 15%;
    }
    .offset-lg-right-15pct {
        margin-right: 15%;
    }
    .offset-lg-left-20pct {
        margin-left: 20%;
    }
    .offset-lg-right-20pct {
        margin-right: 20%;
    }
    .offset-lg-left-25pct {
        margin-left: 25%;
    }
    .offset-lg-right-25pct {
        margin-right: 25%;
    }
}

@media (min-width: 1520px) {
    .offset-xl-left-5px {
        margin-left: 5px;
    }
    .offset-xl-right-5px {
        margin-right: 5px;
    }
    .offset-xl-left-10px {
        margin-left: 10px;
    }
    .offset-xl-right-10px {
        margin-right: 10px;
    }
    .offset-xl-left-15px {
        margin-left: 15px;
    }
    .offset-xl-right-15px {
        margin-right: 15px;
    }
    .offset-xl-left-20px {
        margin-left: 20px;
    }
    .offset-xl-right-20px {
        margin-right: 20px;
    }
    .offset-xl-left-25px {
        margin-left: 25px;
    }
    .offset-xl-right-25px {
        margin-right: 25px;
    }
    .offset-xl-left-30px {
        margin-left: 30px;
    }
    .offset-xl-right-30px {
        margin-right: 30px;
    }
    .offset-xl-left-40px {
        margin-left: 40px;
    }
    .offset-xl-right-40px {
        margin-right: 40px;
    }
    .offset-xl-left-50px {
        margin-left: 50px;
    }
    .offset-xl-right-50px {
        margin-right: 50px;
    }
    .offset-xl-left-60px {
        margin-left: 60px;
    }
    .offset-xl-right-60px {
        margin-right: 60px;
    }
    .offset-xl-left-70px {
        margin-left: 70px;
    }
    .offset-xl-right-70px {
        margin-right: 70px;
    }

    .offset-xl-left-10pct {
        margin-left: 10%;
    }
    .offset-xl-right-10pct {
        margin-right: 10%;
    }
    .offset-xl-left-15pct {
        margin-left: 15%;
    }
    .offset-xl-right-15pct {
        margin-right: 15%;
    }
    .offset-xl-left-20pct {
        margin-left: 20%;
    }
    .offset-xl-right-20pct {
        margin-right: 20%;
    }
    .offset-xl-left-25pct {
        margin-left: 25%;
    }
    .offset-xl-right-25pct {
        margin-right: 25%;
    }
}

/* Height of element/block
--------------------------------------------------- */
.height-15px {
    height: 15px !important;
}
.height-20px {
    height: 20px !important;
}
.height-25px {
    height: 25px !important;
}
.height-30px {
    height: 30px !important;
}
.height-35px {
    height: 35px !important;
}
.height-40px {
    height: 40px !important;
}
.height-45px {
    height: 45px !important;
}
.height-50px {
    height: 50px !important;
}
.height-55px {
    height: 55px !important;
}
.height-60px {
    height: 60px !important;
}
.height-65px {
    height: 65px !important;
}
.height-70px {
    height: 70px !important;
}
.height-75px {
    height: 75px !important;
}
.height-80px {
    height: 80px !important;
}
.height-85px {
    height: 85px !important;
}
.height-90px {
    height: 90px !important;
}
.height-95px {
    height: 95px !important;
}
.height-100px {
    height: 100px !important;
}
.height-110px {
    height: 110px !important;
}
.height-120px {
    height: 120px !important;
}
.height-130px {
    height: 130px !important;
}
.height-140px {
    height: 140px !important;
}
.height-150px {
    height: 150px !important;
}
.height-160px {
    height: 160px !important;
}
.height-170px {
    height: 170px !important;
}
.height-180px {
    height: 180px !important;
}
.height-190px {
    height: 190px !important;
}
.height-200px {
    height: 200px !important;
}
.height-210px {
    height: 210px !important;
}
.height-220px {
    height: 220px !important;
}
.height-230px {
    height: 230px !important;
}
.height-240px {
    height: 240px !important;
}
.height-250px {
    height: 250px !important;
}
.height-260px {
    height: 260px !important;
}
.height-270px {
    height: 270px !important;
}
.height-280px {
    height: 280px !important;
}
.height-290px {
    height: 290px !important;
}
.height-300px {
    height: 300px !important;
}
.height-310px {
    height: 310px !important;
}
.height-320px {
    height: 320px !important;
}
.height-330px {
    height: 330px !important;
}
.height-340px {
    height: 340px !important;
}
.height-350px {
    height: 350px !important;
}
.height-360px {
    height: 360px !important;
}
.height-370px {
    height: 370px !important;
}
.height-380px {
    height: 380px !important;
}
.height-390px {
    height: 390px !important;
}
.height-400px {
    height: 400px !important;
}