/* || ===

		= Imkan.com.sa
		= MAIN LAYOUT

=== || */
@import "https://fonts.googleapis.com/css?family=Open+Sans";

.font-light, .font-bold {
    font-family: "Gulf Medium", sans-serif;
    font-weight: 400;
}

.font-bold {
    font-weight: 700;
}

.en {
    font-weight: bold;
    font-family: 'Gotham';
    direction: ltr;
}

    .en span {
        font-weight: bold;
    }

.pace {
    -webkit-pointer-events: none;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background: #fff;
    height: 100%;
    width: 100%;
    z-index: 9999999999;
    position: fixed;
    top: 0px;
    left: 0px;
}

.pace-inactive {
    display: none;
}

.pace .pace-progress {
    background: #1b9ada;
    position: fixed;
    z-index: 2000;
    bottom: 0;
    right: 100%;
    width: 100%;
    height: 6px;
}

.pace::after {
    content: '';
    display: block;
    position: fixed;
    height: 60px;
    z-index: 1000;
    width: 88px;
    background: url(../imgs/footer-logo.png);
    border-radius: 0px;
    top: calc(50% - 30px);
    left: calc(50% - 44px);
}

/* --------------------------------

Transition Layer

-------------------------------- */
.cd-transition-layer {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    overflow: hidden !important;
    z-index: 999;
}

    .cd-transition-layer .bg-layer {
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translateY(-50%) translateX(-2%);
        -moz-transform: translateY(-50%) translateX(-2%);
        -ms-transform: translateY(-50%) translateX(-2%);
        -o-transform: translateY(-50%) translateX(-2%);
        transform: translateY(-50%) translateX(-2%);
        /* its dimentions will be overwritten using jQuery to proportionally fit the viewport */
        height: 100%;
        /* our sprite is composed of 25 frames */
        width: 2500%;
        background: url(../imgs/ink.png) no-repeat 0 0;
        background-size: 100% 100%;
    }

    .cd-transition-layer.visible {
        opacity: 1;
        visibility: visible;
    }

    .cd-transition-layer.opening .bg-layer {
        -webkit-animation: cd-sequence 0.8s steps(24);
        -moz-animation: cd-sequence 0.8s steps(24);
        animation: cd-sequence 0.8s steps(24);
        -webkit-animation-fill-mode: forwards;
        -moz-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
    }

    .cd-transition-layer.closing .bg-layer {
        -webkit-animation: cd-sequence-reverse 0.8s steps(24);
        -moz-animation: cd-sequence-reverse 0.8s steps(24);
        animation: cd-sequence-reverse 0.8s steps(24);
        -webkit-animation-fill-mode: forwards;
        -moz-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
    }

.no-cssanimations .cd-transition-layer {
    display: none;
}

@-webkit-keyframes cd-sequence {
    0% {
        /* translateX(-2%) is used to horizontally center the first frame inside the viewport */
        -webkit-transform: translateY(-50%) translateX(-2%);
    }

    100% {
        /* translateX(-98%) (2% + 96) is used to horizontally center the last frame inside the viewport  */
        -webkit-transform: translateY(-50%) translateX(-98%);
    }
}

@-moz-keyframes cd-sequence {
    0% {
        /* translateX(-2%) is used to horizontally center the first frame inside the viewport */
        -moz-transform: translateY(-50%) translateX(-2%);
    }

    100% {
        /* translateX(-98%) (2% + 96) is used to horizontally center the last frame inside the viewport  */
        -moz-transform: translateY(-50%) translateX(-98%);
    }
}

@keyframes cd-sequence {
    0% {
        /* translateX(-2%) is used to horizontally center the first frame inside the viewport */
        -webkit-transform: translateY(-50%) translateX(-2%);
        -moz-transform: translateY(-50%) translateX(-2%);
        -ms-transform: translateY(-50%) translateX(-2%);
        -o-transform: translateY(-50%) translateX(-2%);
        transform: translateY(-50%) translateX(-2%);
    }

    100% {
        /* translateX(-98%) (2% + 96) is used to horizontally center the last frame inside the viewport  */
        -webkit-transform: translateY(-50%) translateX(-98%);
        -moz-transform: translateY(-50%) translateX(-98%);
        -ms-transform: translateY(-50%) translateX(-98%);
        -o-transform: translateY(-50%) translateX(-98%);
        transform: translateY(-50%) translateX(-98%);
    }
}

@-webkit-keyframes cd-sequence-reverse {
    0% {
        -webkit-transform: translateY(-50%) translateX(-98%);
    }

    100% {
        -webkit-transform: translateY(-50%) translateX(-2%);
    }
}

@-moz-keyframes cd-sequence-reverse {
    0% {
        -moz-transform: translateY(-50%) translateX(-98%);
    }

    100% {
        -moz-transform: translateY(-50%) translateX(-2%);
    }
}

@keyframes cd-sequence-reverse {
    0% {
        -webkit-transform: translateY(-50%) translateX(-98%);
        -moz-transform: translateY(-50%) translateX(-98%);
        -ms-transform: translateY(-50%) translateX(-98%);
        -o-transform: translateY(-50%) translateX(-98%);
        transform: translateY(-50%) translateX(-98%);
    }

    100% {
        -webkit-transform: translateY(-50%) translateX(-2%);
        -moz-transform: translateY(-50%) translateX(-2%);
        -ms-transform: translateY(-50%) translateX(-2%);
        -o-transform: translateY(-50%) translateX(-2%);
        transform: translateY(-50%) translateX(-2%);
    }
}
/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */
/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Prevent adjustments of font size after orientation changes in IE and iOS.
 */
html {
    font-family: sans-serif;
    /* 1 */
    -ms-text-size-adjust: 100%;
    /* 2 */
    -webkit-text-size-adjust: 100%;
    /* 2 */
}

/**
 * Remove the margin in all browsers (opinionated).
 */
body {
    margin: 0;
}

/* HTML5 display definitions
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 * 2. Add the correct display in IE.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
    /* 1 */
    display: block;
}

/**
 * Add the correct display in IE 9-.
 */
audio,
canvas,
progress,
video {
    display: inline-block;
}

    /**
 * Add the correct display in iOS 4-7.
 */
    audio:not([controls]) {
        display: none;
        height: 0;
    }

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
    vertical-align: baseline;
}

/**
 * Add the correct display in IE 10-.
 * 1. Add the correct display in IE.
 */
template,
[hidden] {
    display: none;
}

/* Links
   ========================================================================== */
/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */
a {
    background-color: transparent;
    /* 1 */
    -webkit-text-decoration-skip: objects;
    /* 2 */
}

    /**
 * Remove the outline on focused links when they are also active or hovered
 * in all browsers (opinionated).
 */
    a:active,
    a:hover {
        outline-width: 0;
    }

/* Text-level semantics
   ========================================================================== */
/**
 * 1. Remove the bottom border in Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
    border-bottom: none;
    /* 1 */
    text-decoration: underline;
    /* 2 */
    text-decoration: underline dotted;
    /* 2 */
}

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */
b,
strong {
    font-weight: inherit;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
    font-weight: bolder;
}

/**
 * Add the correct font style in Android 4.3-.
 */
dfn {
    font-style: italic;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

/**
 * Add the correct background and color in IE 9-.
 */
mark {
    background-color: #ff0;
    color: #000;
}

/**
 * Add the correct font size in all browsers.
 */
small {
    font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10-.
 */
img {
    border-style: none;
}

/**
 * Hide the overflow in IE.
 */
svg:not(:root) {
    overflow: hidden;
}

/* Grouping content
   ========================================================================== */
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
pre,
samp {
    font-family: monospace, monospace;
    /* 1 */
    font-size: 1em;
    /* 2 */
}

/**
 * Add the correct margin in IE 8.
 */
figure {
    margin: 1em 40px;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
    box-sizing: content-box;
    /* 1 */
    height: 0;
    /* 1 */
    overflow: visible;
    /* 2 */
}

/* Forms
   ========================================================================== */
/**
 * 1. Change font properties to `inherit` in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
select,
textarea {
    font: inherit;
    /* 1 */
    margin: 0;
    /* 2 */
}

/**
 * Restore the font weight unset by the previous rule.
 */
optgroup {
    font-weight: bold;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
    /* 1 */
    overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
    /* 1 */
    text-transform: none;
}

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */
button,
html [type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
    /* 2 */
}

    /**
 * Remove the inner border and padding in Firefox.
 */
    button::-moz-focus-inner,
    [type="button"]::-moz-focus-inner,
    [type="reset"]::-moz-focus-inner,
    [type="submit"]::-moz-focus-inner {
        border-style: none;
        padding: 0;
    }

    /**
 * Restore the focus styles unset by the previous rule.
 */
    button:-moz-focusring,
    [type="button"]:-moz-focusring,
    [type="reset"]:-moz-focusring,
    [type="submit"]:-moz-focusring {
        outline: 1px dotted ButtonText;
    }

/**
 * Change the border, margin, and padding in all browsers (opinionated).
 */
fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
    box-sizing: border-box;
    /* 1 */
    color: inherit;
    /* 2 */
    display: table;
    /* 1 */
    max-width: 100%;
    /* 1 */
    padding: 0;
    /* 3 */
    white-space: normal;
    /* 1 */
}

/**
 * Remove the default vertical scrollbar in IE.
 */
textarea {
    overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */
[type="checkbox"],
[type="radio"] {
    box-sizing: border-box;
    /* 1 */
    padding: 0;
    /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
    -webkit-appearance: textfield;
    /* 1 */
    outline-offset: -2px;
    /* 2 */
}

    /**
 * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
 */
    [type="search"]::-webkit-search-cancel-button,
    [type="search"]::-webkit-search-decoration {
        -webkit-appearance: none;
    }

/**
 * Correct the text style of placeholders in Chrome, Edge, and Safari.
 */
::-webkit-input-placeholder {
    color: inherit;
    opacity: 0.54;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
    -webkit-appearance: button;
    /* 1 */
    font: inherit;
    /* 2 */
}

@font-face {
    font-family: 'Gulf Medium';
    src: url("../fonts/Gulf-Medium.eot");
    src: url("../fonts/Gulf-Medium.eot?#iefix") format("embedded-opentype"), url("../fonts/Gulf-Medium.woff") format("woff"), url("../fonts/Gulf-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Gotham';
    src: url("../fonts/english/GothamMedium.eot");
    src: url("../fonts/english/GothamMedium.eot?#iefix") format("embedded-opentype"), url("../fonts/english/GothamMedium.woff") format("woff"), url("../fonts/english/GothamMedium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Gulf Semibold';
    src: url("../fonts/Gulf-SemiBold.eot");
    src: url("../fonts/Gulf-SemiBold.eot?#iefix") format("embedded-opentype"), url("../fonts/Gulf-SemiBold.woff") format("woff"), url("../fonts/Gulf-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: "icons";
    src: url("../fonts/icons/fonts/icons.eot");
    src: url("../fonts/icons/fonts/icons.eot?#iefix") format("embedded-opentype"), url("../fonts/icons/fonts/icons.woff") format("woff"), url("../fonts/icons/fonts/icons.ttf") format("truetype"), url("../fonts/icons/fonts/icons.svg#weekend") format("svg");
    font-weight: normal;
    font-style: normal;
}

[data-icon]:before {
    font-family: "icons" !important;
    content: attr(data-icon);
    font-style: normal !important;
    font-weight: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    speak: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

[class^="ic-"]:before,
[class*=" ic-"]:before {
    font-family: "icons" !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    speak: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.ic-icons:before {
    content: "\69";
}

.ic-icons-1:before {
    content: "\6a";
}

.ic-icons-2:before {
    content: "\6b";
}

.ic-icons-3:before {
    content: "\6c";
}

.ic-icons-4:before {
    content: "\6d";
}

.ic-icons-5:before {
    content: "\6e";
}

.ic-icons-6:before {
    content: "\6f";
}

.ic-icons-7:before {
    content: "\70";
}

.ic-icons-8:before {
    content: "\71";
}

.ic-icons-9:before {
    content: "\72";
}

.ic-icons-10:before {
    content: "\73";
}

.ic-icons-11:before {
    content: "\74";
}

.ic-icons-12:before {
    content: "\75";
}

.ic-icons-13:before {
    content: "\76";
}

.ic-icons-14:before {
    content: "\77";
}

.ic-icons-15:before {
    content: "\78";
}

.ic-icons-16:before {
    content: "\79";
}

.ic-icons-17:before {
    content: "\7a";
}

.ic-icons-18:before {
    content: "\41";
}

.ic-icons-19:before {
    content: "\42";
}

.ic-icons-20:before {
    content: "\43";
}

.ic-icons-21:before {
    content: "\44";
}

.ic-icons-22:before {
    content: "\45";
}

.ic-icons-23:before {
    content: "\46";
}

.ic-icons-24:before {
    content: "\47";
}

.ic-icons-25:before {
    content: "\48";
}

.ic-icons-26:before {
    content: "\49";
}

.ic-icons-27:before {
    content: "\4a";
}

.ic-icons-28:before {
    content: "\4b";
}

.ic-icons-29:before {
    content: "\4c";
}

.ic-icons-30:before {
    content: "\4d";
}

.ic-icons-31:before {
    content: "\4e";
}

.ic-icons-32:before {
    content: "\4f";
}

.ic-icons-33:before {
    content: "\50";
}

.ic-icons-34:before {
    content: "\51";
}

.ic-icons-35:before {
    content: "\52";
}

.ic-icons-36:before {
    content: "\53";
}

.ic-icons-37:before {
    content: "\54";
}

.ic-icons-38:before {
    content: "\55";
}

.ic-icons-39:before {
    content: "\56";
}

.ic-icons-40:before {
    content: "\57";
}

.ic-icons-41:before {
    content: "\58";
}

.ic-icons-42:before {
    content: "\59";
}

.ic-icons-43:before {
    content: "\5a";
}

.ic-icons-44:before {
    content: "\30";
}

.ic-icons-45:before {
    content: "\31";
}

.ic-icons-46:before {
    content: "\32";
}

.ic-icons-47:before {
    content: "\33";
}

.ic-icons-48:before {
    content: "\34";
}

.ic-icons-49:before {
    content: "\35";
}

.ic-icons-50:before {
    content: "\36";
}

.ic-icons-51:before {
    content: "\37";
}

.ic-icons-52:before {
    content: "\38";
}

.ic-icons-53:before {
    content: "\39";
}

.ic-icons-54:before {
    content: "\21";
}

.ic-icons-55:before {
    content: "\22";
}

.ic-icons-56:before {
    content: "\23";
}

.ic-icons-57:before {
    content: "\24";
}

.ic-icons-58:before {
    content: "\25";
}

.ic-icons-59:before {
    content: "\26";
}

.ic-icons-60:before {
    content: "\27";
}

.ic-icons-61:before {
    content: "\28";
}

.ic-icons-62:before {
    content: "\29";
}

.ic-icons-63:before {
    content: "\2a";
}

.ic-icons-64:before {
    content: "\2b";
}

.ic-icons-65:before {
    content: "\2c";
}

.ic-icons-66:before {
    content: "\2d";
}

.ic-icons-67:before {
    content: "\2e";
}

.ic-icons-68:before {
    content: "\2f";
}

.ic-icons-69:before {
    content: "\3a";
}

.ic-icons-70:before {
    content: "\3b";
}

.ic-icons-71:before {
    content: "\3c";
}

.ic-icons-72:before {
    content: "\3d";
}

.ic-icons-73:before {
    content: "\3e";
}

.ic-icons-74:before {
    content: "\3f";
}

.ic-icons-75:before {
    content: "\40";
}

.ic-icons-76:before {
    content: "\5b";
}

.ic-icons-77:before {
    content: "\5d";
}

.ic-icons-78:before {
    content: "\5e";
}

.ic-icons-79:before {
    content: "\5f";
}

.ic-icons-80:before {
    content: "\60";
}

.ic-icons-81:before {
    content: "\7b";
}

.ic-icons-82:before {
    content: "\7c";
}

.ic-icons-83:before {
    content: "\7d";
}

.ic-icons-84:before {
    content: "\7e";
}

.ic-icons-85:before {
    content: "\5c";
}

.ic-icons-86:before {
    content: "\e000";
}

.ic-icons-87:before {
    content: "\e001";
}

.ic-icons-88:before {
    content: "\e002";
}

.ic-icons-89:before {
    content: "\e003";
}

.ic-icons-90:before {
    content: "\e004";
}

.ic-icons-91:before {
    content: "\e005";
}

.ic-icons-92:before {
    content: "\e006";
}

.ic-icons-93:before {
    content: "\e007";
}

.ic-icons-94:before {
    content: "\e008";
}

.ic-icons-95:before {
    content: "\e009";
}

.ic-icons-96:before {
    content: "\e00a";
}

.ic-icons-97:before {
    content: "\e00b";
}

.ic-icons-98:before {
    content: "\e00c";
}

.ic-icons-99:before {
    content: "\e00d";
}

.ic-icons-100:before {
    content: "\e00e";
}

.ic-icons-101:before {
    content: "\e00f";
}

.ic-icons-102:before {
    content: "\e010";
}

.ic-icons-103:before {
    content: "\e011";
}

.ic-icons-104:before {
    content: "\e012";
}

.ic-icons-105:before {
    content: "\e013";
}

.ic-icons-106:before {
    content: "\e014";
}

.ic-icons-107:before {
    content: "\e015";
}

.ic-icons-108:before {
    content: "\e016";
}

.ic-icons-109:before {
    content: "\e017";
}

.ic-icons-110:before {
    content: "\e018";
}

.ic-icons-111:before {
    content: "\e019";
}

.ic-icons-112:before {
    content: "\e01a";
}

.ic-icons-113:before {
    content: "\e01b";
}

.ic-icons-114:before {
    content: "\e01c";
}

.ic-icons-115:before {
    content: "\e01d";
}

.ic-icons-116:before {
    content: "\e01e";
}

.ic-icons-117:before {
    content: "\e01f";
}

.ic-icons-118:before {
    content: "\e020";
}

.ic-icons-119:before {
    content: "\e021";
}

.ic-icons-120:before {
    content: "\e022";
}

.ic-icons-121:before {
    content: "\e023";
}

.ic-icons-122:before {
    content: "\e024";
}

.ic-icons-123:before {
    content: "\e025";
}

.ic-icons-124:before {
    content: "\e026";
}

.ic-icons-125:before {
    content: "\e027";
}

.ic-icons-126:before {
    content: "\e028";
}

.ic-icons-127:before {
    content: "\e029";
}

.ic-icons-128:before {
    content: "\e02a";
}

.ic-icons-129:before {
    content: "\e02b";
}

.ic-icons-130:before {
    content: "\e02c";
}

.ic-icons-131:before {
    content: "\e02d";
}

.ic-icons-132:before {
    content: "\e02e";
}

.ic-icons-133:before {
    content: "\e02f";
}

.ic-icons-134:before {
    content: "\e030";
}

.ic-icons-135:before {
    content: "\e031";
}

.ic-icons-136:before {
    content: "\e032";
}

.ic-icons-137:before {
    content: "\e033";
}

.ic-icons-138:before {
    content: "\e034";
}

.ic-icons-139:before {
    content: "\e035";
}

.ic-icons-140:before {
    content: "\e036";
}

.ic-icons-141:before {
    content: "\e037";
}

.ic-icons-142:before {
    content: "\e038";
}

.ic-icons-143:before {
    content: "\e039";
}

.ic-icons-144:before {
    content: "\e03a";
}

.ic-icons-145:before {
    content: "\e03b";
}

.ic-icons-146:before {
    content: "\e03c";
}

.ic-icons-147:before {
    content: "\e03d";
}

.ic-icons-148:before {
    content: "\e03e";
}

.ic-icons-149:before {
    content: "\e03f";
}

.ic-icons-150:before {
    content: "\e040";
}

.ic-icons-151:before {
    content: "\e041";
}

.ic-icons-152:before {
    content: "\e042";
}

.ic-icons-153:before {
    content: "\e043";
}

.ic-icons-154:before {
    content: "\e044";
}

.ic-icons-155:before {
    content: "\e045";
}

.ic-icons-156:before {
    content: "\e046";
}

.ic-icons-157:before {
    content: "\e047";
}

.ic-icons-158:before {
    content: "\e048";
}

.ic-icons-159:before {
    content: "\e049";
}

.ic-icons-160:before {
    content: "\e04a";
}

.ic-icons-161:before {
    content: "\e04b";
}

.ic-icons-162:before {
    content: "\e04c";
}

.ic-icons-163:before {
    content: "\e04d";
}

.ic-icons-164:before {
    content: "\e04e";
}

.ic-icons-165:before {
    content: "\e04f";
}

.ic-icons-166:before {
    content: "\e050";
}

.ic-icons-167:before {
    content: "\e051";
}

.ic-icons-168:before {
    content: "\e052";
}

.ic-icons-169:before {
    content: "\e053";
}

.ic-icons-170:before {
    content: "\e054";
}

.ic-icons-171:before {
    content: "\e055";
}

.ic-icons-172:before {
    content: "\e056";
}

.ic-icons-173:before {
    content: "\e057";
}

.ic-icons-174:before {
    content: "\e058";
}

.ic-icons-175:before {
    content: "\e059";
}

.ic-icons-176:before {
    content: "\e05a";
}

.ic-icons-177:before {
    content: "\e05b";
}

.ic-icons-178:before {
    content: "\e05c";
}

.ic-icons-179:before {
    content: "\e05d";
}

.ic-icons-180:before {
    content: "\e05e";
}

.ic-icons-181:before {
    content: "\e05f";
}

.ic-icons-182:before {
    content: "\e060";
}

.ic-icons-183:before {
    content: "\e061";
}

.ic-icons-184:before {
    content: "\e062";
}

.ic-icons-185:before {
    content: "\e063";
}

.ic-icons-186:before {
    content: "\e064";
}

.ic-icons-187:before {
    content: "\e065";
}

.ic-icons-188:before {
    content: "\e066";
}

.ic-icons-189:before {
    content: "\e067";
}

.ic-icons-190:before {
    content: "\e068";
}

.ic-icons-191:before {
    content: "\e069";
}

.ic-icons-192:before {
    content: "\e06a";
}

.ic-icons-193:before {
    content: "\e06b";
}

.ic-icons-194:before {
    content: "\e06c";
}

.ic-icons-195:before {
    content: "\e06d";
}

.ic-icons-196:before {
    content: "\e06e";
}

.ic-icons-197:before {
    content: "\e06f";
}

.ic-icons-198:before {
    content: "\e070";
}

.ic-icons-199:before {
    content: "\e071";
}

.ic-icons-200:before {
    content: "\e072";
}

.ic-icons-201:before {
    content: "\e073";
}

.ic-icons-202:before {
    content: "\e074";
}

.ic-icons-203:before {
    content: "\e075";
}

.ic-icons-204:before {
    content: "\e076";
}

.ic-icons-205:before {
    content: "\e077";
}

.ic-icons-206:before {
    content: "\e078";
}

.ic-icons-207:before {
    content: "\e079";
}

.ic-icons-208:before {
    content: "\e07a";
}

.ic-icons-209:before {
    content: "\e07b";
}

.ic-icons-210:before {
    content: "\e07c";
}

.ic-icons-211:before {
    content: "\e07d";
}

.ic-icons-212:before {
    content: "\e07e";
}

.ic-icons-213:before {
    content: "\e07f";
}

.ic-icons-214:before {
    content: "\e080";
}

.ic-icons-215:before {
    content: "\e081";
}

.ic-icons-216:before {
    content: "\e082";
}

.ic-icons-217:before {
    content: "\e083";
}

.ic-icons-218:before {
    content: "\e084";
}

.ic-icons-219:before {
    content: "\e085";
}

.ic-icons-220:before {
    content: "\e086";
}

.ic-icons-221:before {
    content: "\e087";
}

.ic-icons-222:before {
    content: "\e088";
}

.ic-icons-223:before {
    content: "\e089";
}

.ic-icons-224:before {
    content: "\e08a";
}

.ic-icons-225:before {
    content: "\e08b";
}

.ic-icons-226:before {
    content: "\e08c";
}

.ic-icons-227:before {
    content: "\e08d";
}

.ic-icons-228:before {
    content: "\e08e";
}

.ic-icons-229:before {
    content: "\e08f";
}

.ic-icons-230:before {
    content: "\e090";
}

.ic-icons-231:before {
    content: "\e091";
}

.ic-icons-232:before {
    content: "\e092";
}

.ic-icons-233:before {
    content: "\e093";
}

.ic-icons-234:before {
    content: "\e094";
}

.ic-icons-235:before {
    content: "\e095";
}

.ic-icons-236:before {
    content: "\e096";
}

.ic-icons-237:before {
    content: "\e097";
}

.ic-icons-238:before {
    content: "\e098";
}

.ic-icons-239:before {
    content: "\e099";
}

.ic-icons-240:before {
    content: "\e09a";
}

.ic-icons-241:before {
    content: "\e09b";
}

.ic-icons-242:before {
    content: "\e09c";
}

.ic-icons-243:before {
    content: "\e09d";
}

.ic-icons-244:before {
    content: "\e09e";
}

.ic-icons-245:before {
    content: "\e09f";
}

.ic-icons-246:before {
    content: "\e0a0";
}

.ic-icons-247:before {
    content: "\e0a1";
}

.ic-icons-248:before {
    content: "\e0a2";
}

.ic-icons-249:before {
    content: "\e0a3";
}

.ic-icons-250:before {
    content: "\e0a4";
}

.ic-icons-251:before {
    content: "\e0a5";
}

.ic-icons-252:before {
    content: "\e0a6";
}

.ic-icons-253:before {
    content: "\e0a7";
}

.ic-icons-254:before {
    content: "\e0a8";
}

.ic-icons-255:before {
    content: "\e0a9";
}

.ic-icons-256:before {
    content: "\e0aa";
}

.ic-icons-257:before {
    content: "\e0ab";
}

.ic-icons-258:before {
    content: "\e0ac";
}

.ic-icons-259:before {
    content: "\e0ad";
}

.ic-icons-260:before {
    content: "\e0ae";
}

.ic-icons-261:before {
    content: "\e0af";
}

.ic-icons-262:before {
    content: "\e0b0";
}

.ic-icons-263:before {
    content: "\e0b1";
}

.ic-icons-264:before {
    content: "\e0b2";
}

.ic-icons-265:before {
    content: "\e0b3";
}

.ic-icons-266:before {
    content: "\e0b4";
}

.ic-icons-267:before {
    content: "\e0b5";
}

.ic-icons-268:before {
    content: "\e0b6";
}

.ic-icons-269:before {
    content: "\e0b7";
}

.ic-icons-270:before {
    content: "\e0b8";
}

.ic-icons-271:before {
    content: "\e0b9";
}

.ic-icons-272:before {
    content: "\e0ba";
}

.ic-icons-273:before {
    content: "\e0bb";
}

.ic-icons-274:before {
    content: "\e0bc";
}

.ic-icons-275:before {
    content: "\e0bd";
}

.ic-icons-276:before {
    content: "\e0be";
}

.ic-icons-277:before {
    content: "\e0bf";
}

.ic-icons-278:before {
    content: "\e0c0";
}

.ic-icons-279:before {
    content: "\e0c1";
}

.ic-icons-280:before {
    content: "\e0c2";
}

.ic-icons-281:before {
    content: "\e0c3";
}

.ic-icons-282:before {
    content: "\e0c4";
}

.ic-icons-283:before {
    content: "\e0c5";
}

.ic-icons-284:before {
    content: "\e0c6";
}

.ic-icons-285:before {
    content: "\e0c7";
}

.ic-icons-286:before {
    content: "\e0c8";
}

.ic-icons-287:before {
    content: "\e0c9";
}

.ic-icons-288:before {
    content: "\e0ca";
}

.ic-icons-289:before {
    content: "\e0cb";
}

.ic-icons-290:before {
    content: "\e0cc";
}

.ic-icons-291:before {
    content: "\e0cd";
}

.ic-icons-292:before {
    content: "\e0ce";
}

.ic-icons-293:before {
    content: "\e0cf";
}

.ic-icons-294:before {
    content: "\e0d0";
}

.ic-icons-295:before {
    content: "\e0d1";
}

.ic-icons-296:before {
    content: "\e0d2";
}

.ic-icons-297:before {
    content: "\e0d3";
}

.ic-icons-298:before {
    content: "\e0d4";
}

.ic-icons-299:before {
    content: "\e0d5";
}

.ic-icons-300:before {
    content: "\e0d6";
}

.ic-icons-301:before {
    content: "\e0d7";
}

.ic-icons-302:before {
    content: "\e0d8";
}

.ic-icons-303:before {
    content: "\e0d9";
}

.ic-icons-304:before {
    content: "\e0da";
}

.ic-icons-305:before {
    content: "\e0db";
}

.ic-icons-306:before {
    content: "\e0dc";
}

.ic-icons-307:before {
    content: "\e0dd";
}

.ic-icons-308:before {
    content: "\e0de";
}

.ic-icons-309:before {
    content: "\e0df";
}

.ic-icons-310:before {
    content: "\e0e0";
}

.ic-icons-311:before {
    content: "\e0e1";
}

.ic-icons-312:before {
    content: "\e0e2";
}

.ic-icons-313:before {
    content: "\e0e3";
}

.ic-icons-314:before {
    content: "\e0e4";
}

.ic-icons-315:before {
    content: "\e0e5";
}

.ic-icons-316:before {
    content: "\e0e6";
}

.ic-icons-317:before {
    content: "\e0e7";
}

.ic-icons-318:before {
    content: "\e0e8";
}

.ic-icons-319:before {
    content: "\e0e9";
}

.ic-icons-320:before {
    content: "\e0ea";
}

.ic-icons-321:before {
    content: "\e0eb";
}

.ic-icons-322:before {
    content: "\e0ec";
}

.ic-icons-323:before {
    content: "\e0ed";
}

.ic-icons-324:before {
    content: "\e0ee";
}

.ic-icons-325:before {
    content: "\e0ef";
}

.ic-icons-326:before {
    content: "\e0f0";
}

.ic-icons-327:before {
    content: "\e0f1";
}

.ic-icons-328:before {
    content: "\e0f2";
}

.ic-icons-329:before {
    content: "\e0f3";
}

.ic-icons-330:before {
    content: "\e0f4";
}

.ic-icons-331:before {
    content: "\e0f5";
}

.ic-icons-332:before {
    content: "\e0f6";
}

.ic-icons-333:before {
    content: "\e0f7";
}

.ic-icons-334:before {
    content: "\e0f8";
}

.ic-icons-335:before {
    content: "\e0f9";
}

.ic-icons-336:before {
    content: "\e0fa";
}

.ic-icons-337:before {
    content: "\e0fb";
}

.ic-icons-338:before {
    content: "\e0fc";
}

.ic-icons-339:before {
    content: "\e0fd";
}

.ic-icons-340:before {
    content: "\e0fe";
}

.ic-icons-341:before {
    content: "\e0ff";
}

.ic-icons-342:before {
    content: "\e100";
}

.ic-icons-343:before {
    content: "\e101";
}

.ic-icons-344:before {
    content: "\e102";
}

.ic-icons-345:before {
    content: "\e103";
}

.ic-icons-346:before {
    content: "\e104";
}

.ic-icons-347:before {
    content: "\e105";
}

.ic-icons-348:before {
    content: "\e106";
}

.ic-icons-349:before {
    content: "\e107";
}

.ic-icons-350:before {
    content: "\e108";
}

.ic-icons-351:before {
    content: "\e109";
}

.ic-icons-352:before {
    content: "\e10a";
}

.ic-icons-353:before {
    content: "\e10b";
}

.ic-icons-354:before {
    content: "\e10c";
}

.ic-icons-355:before {
    content: "\e10d";
}

.ic-icons-356:before {
    content: "\e10e";
}

.ic-icons-357:before {
    content: "\e10f";
}

.ic-icons-358:before {
    content: "\e110";
}

.ic-icons-359:before {
    content: "\e111";
}

.ic-icons-360:before {
    content: "\e112";
}

.ic-icons-361:before {
    content: "\e113";
}

.ic-icons-362:before {
    content: "\e114";
}

.ic-icons-363:before {
    content: "\e115";
}

.ic-icons-364:before {
    content: "\e116";
}

.ic-icons-365:before {
    content: "\e117";
}

.ic-icons-366:before {
    content: "\e118";
}

.ic-icons-367:before {
    content: "\e119";
}

.ic-icons-368:before {
    content: "\e11a";
}

.ic-icons-369:before {
    content: "\e11b";
}

.ic-icons-370:before {
    content: "\e11c";
}

.ic-icons-371:before {
    content: "\e11d";
}

.ic-icons-372:before {
    content: "\e11e";
}

.ic-icons-373:before {
    content: "\e11f";
}

.ic-icons-374:before {
    content: "\e120";
}

.ic-icons-375:before {
    content: "\e121";
}

.ic-icons-376:before {
    content: "\e122";
}

.ic-icons-377:before {
    content: "\e123";
}

.ic-icons-378:before {
    content: "\e124";
}

.ic-icons-379:before {
    content: "\e125";
}

.ic-icons-380:before {
    content: "\e126";
}

.ic-icons-381:before {
    content: "\e127";
}

.ic-icons-382:before {
    content: "\e128";
}

.ic-icons-383:before {
    content: "\e129";
}

.ic-icons-384:before {
    content: "\e12a";
}

.ic-icons-385:before {
    content: "\e12b";
}

.ic-icons-386:before {
    content: "\e12c";
}

.ic-icons-387:before {
    content: "\e12d";
}

.ic-icons-388:before {
    content: "\e12e";
}

.ic-icons-389:before {
    content: "\e12f";
}

.ic-icons-390:before {
    content: "\e130";
}

.ic-icons-391:before {
    content: "\e131";
}

.ic-icons-392:before {
    content: "\e132";
}

.ic-icons-393:before {
    content: "\e133";
}

.ic-icons-394:before {
    content: "\e134";
}

.ic-icons-395:before {
    content: "\e135";
}

.ic-icons-396:before {
    content: "\e136";
}

.ic-icons-397:before {
    content: "\e137";
}

.ic-icons-398:before {
    content: "\e138";
}

.ic-icons-399:before {
    content: "\e139";
}

.ic-icons-400:before {
    content: "\e13a";
}

.ic-icons-401:before {
    content: "\e13b";
}

.ic-icons-402:before {
    content: "\e13c";
}

.ic-icons-403:before {
    content: "\e13d";
}

.ic-icons-404:before {
    content: "\e13e";
}

.ic-icons-405:before {
    content: "\e13f";
}

.ic-icons-406:before {
    content: "\e140";
}

.ic-icons-407:before {
    content: "\e141";
}

.ic-icons-408:before {
    content: "\e142";
}

.ic-icons-409:before {
    content: "\e143";
}

.ic-icons-410:before {
    content: "\e144";
}

.ic-icons-411:before {
    content: "\e145";
}

.ic-icons-412:before {
    content: "\e146";
}

.ic-icons-413:before {
    content: "\e147";
}

.ic-icons-414:before {
    content: "\e148";
}

.ic-icons-415:before {
    content: "\e149";
}

.ic-icons-416:before {
    content: "\e14a";
}

.ic-icons-417:before {
    content: "\e14b";
}

.ic-icons-418:before {
    content: "\e14c";
}

.ic-icons-419:before {
    content: "\e14d";
}

.ic-icons-420:before {
    content: "\e14e";
}

.ic-icons-421:before {
    content: "\e14f";
}

.ic-icons-422:before {
    content: "\e150";
}

.ic-icons-423:before {
    content: "\e151";
}

.ic-icons-424:before {
    content: "\e152";
}

.ic-icons-425:before {
    content: "\e153";
}

.ic-icons-426:before {
    content: "\e154";
}

.ic-icons-427:before {
    content: "\e155";
}

.ic-icons-428:before {
    content: "\e156";
}

.ic-icons-429:before {
    content: "\e157";
}

.ic-icons-430:before {
    content: "\e158";
}

.ic-icons-431:before {
    content: "\e159";
}

.ic-icons-432:before {
    content: "\e15a";
}

.ic-icons-433:before {
    content: "\e15b";
}

.ic-icons-434:before {
    content: "\e15c";
}

.ic-icons-435:before {
    content: "\e15d";
}

.ic-icons-436:before {
    content: "\e15e";
}

.ic-icons-437:before {
    content: "\e15f";
}

.ic-icons-438:before {
    content: "\e160";
}

.ic-icons-439:before {
    content: "\e161";
}

.ic-icons-440:before {
    content: "\e162";
}

.ic-icons-441:before {
    content: "\e163";
}

.ic-icons-442:before {
    content: "\e164";
}

.ic-icons-443:before {
    content: "\e165";
}

.ic-icons-444:before {
    content: "\e166";
}

.ic-icons-445:before {
    content: "\e167";
}

.ic-icons-446:before {
    content: "\e168";
}

.ic-icons-447:before {
    content: "\e169";
}

.ic-icons-448:before {
    content: "\e16a";
}

.ic-icons-449:before {
    content: "\e16b";
}

.ic-icons-450:before {
    content: "\e16c";
}

.ic-icons-451:before {
    content: "\e16d";
}

.ic-icons-452:before {
    content: "\e16e";
}

.ic-icons-453:before {
    content: "\e16f";
}

.ic-icons-454:before {
    content: "\e170";
}

.ic-icons-455:before {
    content: "\e171";
}

.ic-icons-456:before {
    content: "\e172";
}

.ic-icons-457:before {
    content: "\e173";
}

.ic-icons-458:before {
    content: "\e174";
}

.ic-icons-459:before {
    content: "\e175";
}

.ic-icons-460:before {
    content: "\e176";
}

.ic-icons-461:before {
    content: "\e177";
}

.ic-icons-462:before {
    content: "\e178";
}

.ic-icons-463:before {
    content: "\e179";
}

.ic-icons-464:before {
    content: "\e17a";
}

.ic-icons-465:before {
    content: "\e17b";
}

.ic-icons-466:before {
    content: "\e17c";
}

.ic-icons-467:before {
    content: "\e17d";
}

.ic-icons-468:before {
    content: "\e17e";
}

.ic-icons-469:before {
    content: "\e17f";
}

.ic-icons-470:before {
    content: "\e180";
}

.ic-icons-471:before {
    content: "\e181";
}

.ic-icons-472:before {
    content: "\e182";
}

.ic-icons-473:before {
    content: "\e183";
}

.ic-icons-474:before {
    content: "\e184";
}

.ic-icons-475:before {
    content: "\e185";
}

.ic-icons-476:before {
    content: "\e186";
}

.ic-icons-477:before {
    content: "\e187";
}

.ic-icons-478:before {
    content: "\e188";
}

.ic-icons-479:before {
    content: "\e189";
}

.ic-icons-480:before {
    content: "\e18a";
}

.ic-icons-481:before {
    content: "\e18b";
}

.ic-icons-482:before {
    content: "\e18c";
}

.ic-icons-483:before {
    content: "\e18d";
}

.ic-icons-484:before {
    content: "\e18e";
}

.ic-icons-485:before {
    content: "\e18f";
}

.ic-icons-486:before {
    content: "\e190";
}

.ic-icons-487:before {
    content: "\e191";
}

.ic-icons-488:before {
    content: "\e192";
}

.ic-icons-489:before {
    content: "\e193";
}

.ic-icons-490:before {
    content: "\e194";
}

.ic-icons-491:before {
    content: "\e195";
}

.ic-icons-492:before {
    content: "\e196";
}

.ic-icons-493:before {
    content: "\e197";
}

.ic-icons-494:before {
    content: "\e198";
}

.ic-icons-495:before {
    content: "\e199";
}

.ic-icons-496:before {
    content: "\e19a";
}

.ic-icons-497:before {
    content: "\e19b";
}

.ic-icons-498:before {
    content: "\e19c";
}

.ic-icons-499:before {
    content: "\e19d";
}

.ic-icons-500:before {
    content: "\e19e";
}

.ic-icons-501:before {
    content: "\e19f";
}

.ic-icons-502:before {
    content: "\e1a0";
}

.ic-icons-503:before {
    content: "\e1a1";
}

.ic-icons-504:before {
    content: "\e1a2";
}

.ic-icons-505:before {
    content: "\e1a3";
}

.ic-icons-506:before {
    content: "\e1a4";
}

.ic-icons-507:before {
    content: "\e1a5";
}

.ic-icons-508:before {
    content: "\e1a6";
}

.ic-icons-509:before {
    content: "\e1a7";
}

.ic-icons-510:before {
    content: "\e1a8";
}

.ic-icons-511:before {
    content: "\e1a9";
}

.ic-icons-512:before {
    content: "\e1aa";
}

.ic-icons-513:before {
    content: "\e1ab";
}

.ic-icons-514:before {
    content: "\e1ac";
}

.ic-icons-515:before {
    content: "\e1ad";
}

.ic-icons-516:before {
    content: "\e1ae";
}

.ic-icons-517:before {
    content: "\e1af";
}

.ic-icons-518:before {
    content: "\e1b0";
}

.ic-icons-519:before {
    content: "\e1b1";
}

.ic-icons-520:before {
    content: "\e1b2";
}

.ic-icons-521:before {
    content: "\e1b3";
}

.ic-icons-522:before {
    content: "\e1b4";
}

.ic-icons-523:before {
    content: "\e1b5";
}

.ic-icons-524:before {
    content: "\e1b6";
}

.ic-icons-525:before {
    content: "\e1b7";
}

.ic-icons-526:before {
    content: "\e1b8";
}

.ic-icons-527:before {
    content: "\e1b9";
}

.ic-icons-528:before {
    content: "\e1ba";
}

.ic-icons-529:before {
    content: "\e1bb";
}

.ic-icons-530:before {
    content: "\e1bc";
}

.ic-icons-531:before {
    content: "\e1bd";
}

.ic-icons-532:before {
    content: "\e1be";
}

.ic-icons-533:before {
    content: "\e1bf";
}

.ic-icons-534:before {
    content: "\e1c0";
}

.ic-icons-535:before {
    content: "\e1c1";
}

.ic-icons-536:before {
    content: "\e1c2";
}

.ic-icons-537:before {
    content: "\e1c3";
}

.ic-icons-538:before {
    content: "\e1c4";
}

.ic-icons-539:before {
    content: "\e1c5";
}

.ic-icons-540:before {
    content: "\e1c6";
}

.ic-icons-541:before {
    content: "\e1c7";
}

.ic-icons-542:before {
    content: "\e1c8";
}

.ic-icons-543:before {
    content: "\e1c9";
}

.ic-icons-544:before {
    content: "\e1ca";
}

.ic-icons-545:before {
    content: "\e1cb";
}

.ic-icons-546:before {
    content: "\e1cc";
}

.ic-icons-547:before {
    content: "\e1cd";
}

.ic-icons-548:before {
    content: "\e1ce";
}

.ic-icons-549:before {
    content: "\e1cf";
}

.ic-icons-550:before {
    content: "\e1d0";
}

.ic-icons-551:before {
    content: "\e1d1";
}

.ic-icons-552:before {
    content: "\e1d2";
}

.ic-icons-553:before {
    content: "\e1d3";
}

.ic-icons-554:before {
    content: "\e1d4";
}

.ic-icons-555:before {
    content: "\e1d5";
}

.ic-icons-556:before {
    content: "\e1d6";
}

.ic-icons-557:before {
    content: "\e1d7";
}

.ic-icons-558:before {
    content: "\e1d8";
}

.ic-icons-559:before {
    content: "\e1d9";
}

.ic-icons-560:before {
    content: "\e1da";
}

.ic-icons-561:before {
    content: "\e1db";
}

.ic-icons-562:before {
    content: "\e1dc";
}

.ic-icons-563:before {
    content: "\e1dd";
}

.ic-icons-564:before {
    content: "\e1de";
}

.ic-icons-565:before {
    content: "\e1df";
}

.ic-icons-566:before {
    content: "\e1e0";
}

.ic-icons-567:before {
    content: "\e1e1";
}

.ic-icons-568:before {
    content: "\e1e2";
}

.ic-icons-569:before {
    content: "\e1e3";
}

.ic-icons-570:before {
    content: "\e1e4";
}

.ic-icons-571:before {
    content: "\e1e5";
}

.ic-icons-572:before {
    content: "\e1e6";
}

.ic-icons-573:before {
    content: "\e1e7";
}

.ic-icons-574:before {
    content: "\e1e8";
}

.ic-icons-575:before {
    content: "\e1e9";
}

.ic-icons-576:before {
    content: "\e1ea";
}

.ic-icons-577:before {
    content: "\e1eb";
}

.ic-icons-578:before {
    content: "\e1ec";
}

.ic-icons-579:before {
    content: "\e1ed";
}

.ic-icons-580:before {
    content: "\e1ee";
}

.ic-icons-581:before {
    content: "\e1ef";
}

.ic-icons-582:before {
    content: "\e1f0";
}

.ic-icons-583:before {
    content: "\e1f1";
}

.ic-icons-584:before {
    content: "\e1f2";
}

.ic-icons-585:before {
    content: "\e1f3";
}

.ic-icons-586:before {
    content: "\e1f4";
}

.ic-icons-587:before {
    content: "\e1f5";
}

.ic-icons-588:before {
    content: "\e1f6";
}

.ic-icons-589:before {
    content: "\e1f7";
}

.ic-icons-590:before {
    content: "\e1f8";
}

.ic-icons-591:before {
    content: "\e1f9";
}

.ic-icons-592:before {
    content: "\e1fa";
}

.ic-icons-593:before {
    content: "\e1fb";
}

.ic-icons-594:before {
    content: "\e1fc";
}

.ic-icons-595:before {
    content: "\e1fd";
}

.ic-icons-596:before {
    content: "\e1fe";
}

.ic-icons-597:before {
    content: "\e1ff";
}

.ic-icons-598:before {
    content: "\e200";
}

.ic-icons-599:before {
    content: "\e201";
}

.ic-icons-600:before {
    content: "\e202";
}

.ic-icons-601:before {
    content: "\e203";
}

.ic-icons-602:before {
    content: "\e204";
}

.ic-icons-603:before {
    content: "\e205";
}

.ic-icons-604:before {
    content: "\e206";
}

.ic-icons-605:before {
    content: "\e207";
}

.ic-icons-606:before {
    content: "\e208";
}

.ic-icons-607:before {
    content: "\e209";
}

.ic-icons-608:before {
    content: "\e20a";
}

.ic-icons-609:before {
    content: "\e20b";
}

.ic-icons-610:before {
    content: "\e20c";
}

.ic-icons-611:before {
    content: "\e20d";
}

.ic-icons-612:before {
    content: "\e20e";
}

.ic-icons-613:before {
    content: "\e20f";
}

.ic-icons-614:before {
    content: "\e210";
}

.ic-icons-615:before {
    content: "\e211";
}

.ic-icons-616:before {
    content: "\e212";
}

.ic-icons-617:before {
    content: "\e213";
}

.ic-icons-618:before {
    content: "\e214";
}

.ic-icons-619:before {
    content: "\e215";
}

.ic-icons-620:before {
    content: "\e216";
}

.ic-icons-621:before {
    content: "\e217";
}

.ic-icons-622:before {
    content: "\e218";
}

.ic-icons-623:before {
    content: "\e219";
}

.ic-icons-624:before {
    content: "\e21a";
}

.ic-icons-625:before {
    content: "\e21b";
}

.ic-icons-626:before {
    content: "\e21c";
}

.ic-icons-627:before {
    content: "\e21d";
}

.ic-icons-628:before {
    content: "\e21e";
}

.ic-icons-629:before {
    content: "\e21f";
}

.ic-icons-630:before {
    content: "\e220";
}

.ic-icons-631:before {
    content: "\e221";
}

.ic-icons-632:before {
    content: "\e222";
}

.ic-icons-633:before {
    content: "\e223";
}

.ic-icons-634:before {
    content: "\e224";
}

.ic-icons-635:before {
    content: "\e225";
}

.ic-icons-636:before {
    content: "\e226";
}

.ic-icons-637:before {
    content: "\e227";
}

.ic-icons-638:before {
    content: "\e228";
}

.ic-icons-639:before {
    content: "\e229";
}

.ic-icons-640:before {
    content: "\e22a";
}

.ic-icons-641:before {
    content: "\e22b";
}

.ic-icons-642:before {
    content: "\e22c";
}

.ic-icons-643:before {
    content: "\e22d";
}

.ic-icons-644:before {
    content: "\e22e";
}

.ic-icons-645:before {
    content: "\e22f";
}

.ic-icons-646:before {
    content: "\e230";
}

.ic-icons-647:before {
    content: "\e231";
}

.ic-icons-648:before {
    content: "\e232";
}

.ic-icons-649:before {
    content: "\e233";
}

.ic-icons-650:before {
    content: "\e234";
}

.ic-icons-651:before {
    content: "\e235";
}

.ic-icons-652:before {
    content: "\e236";
}

.ic-icons-653:before {
    content: "\e237";
}

.ic-icons-654:before {
    content: "\e238";
}

.ic-icons-655:before {
    content: "\e239";
}

.ic-icons-656:before {
    content: "\e23a";
}

.ic-icons-657:before {
    content: "\e23b";
}

.ic-icons-658:before {
    content: "\e23c";
}

.ic-icons-659:before {
    content: "\e23d";
}

.ic-icons-660:before {
    content: "\e23e";
}

.ic-icons-661:before {
    content: "\e23f";
}

.ic-icons-662:before {
    content: "\e240";
}

.ic-icons-663:before {
    content: "\e241";
}

.ic-icons-664:before {
    content: "\e242";
}

.ic-icons-665:before {
    content: "\e243";
}

.ic-icons-666:before {
    content: "\e244";
}

.ic-icons-667:before {
    content: "\e245";
}

.ic-icons-668:before {
    content: "\e246";
}

.ic-icons-669:before {
    content: "\e247";
}

.ic-icons-670:before {
    content: "\e248";
}

.ic-icons-671:before {
    content: "\e249";
}

.ic-icons-672:before {
    content: "\e24a";
}

.ic-icons-673:before {
    content: "\e24b";
}

.ic-icons-674:before {
    content: "\e24c";
}

.ic-icons-675:before {
    content: "\e24d";
}

.ic-icons-676:before {
    content: "\e24e";
}

.ic-icons-677:before {
    content: "\e24f";
}

.ic-icons-678:before {
    content: "\e250";
}

.ic-icons-679:before {
    content: "\e251";
}

.ic-icons-680:before {
    content: "\e252";
}

.ic-icons-681:before {
    content: "\e253";
}

.ic-icons-682:before {
    content: "\e254";
}

.ic-icons-683:before {
    content: "\e255";
}

.ic-icons-684:before {
    content: "\e256";
}

.ic-icons-685:before {
    content: "\e257";
}

.ic-icons-686:before {
    content: "\e258";
}

.ic-icons-687:before {
    content: "\e259";
}

.ic-icons-688:before {
    content: "\e25a";
}

.ic-icons-689:before {
    content: "\e25b";
}

.ic-icons-690:before {
    content: "\e25c";
}

.ic-icons-691:before {
    content: "\e25d";
}

.ic-icons-692:before {
    content: "\e25e";
}

.ic-icons-693:before {
    content: "\e25f";
}

.ic-icons-694:before {
    content: "\e260";
}

.ic-icons-695:before {
    content: "\e261";
}

.ic-icons-696:before {
    content: "\e262";
}

.ic-icons-697:before {
    content: "\e263";
}

.ic-icons-698:before {
    content: "\e264";
}

.ic-icons-699:before {
    content: "\e265";
}

.ic-icons-700:before {
    content: "\e266";
}

.ic-icons-701:before {
    content: "\e267";
}

.ic-icons-702:before {
    content: "\e268";
}

.ic-icons-703:before {
    content: "\e269";
}

.ic-icons-704:before {
    content: "\e26a";
}

.ic-icons-705:before {
    content: "\e26b";
}

.ic-icons-706:before {
    content: "\e26c";
}

.ic-icons-707:before {
    content: "\e26d";
}

.ic-icons-708:before {
    content: "\e26e";
}

.ic-icons-709:before {
    content: "\e26f";
}

.ic-icons-710:before {
    content: "\e270";
}

.ic-icons-711:before {
    content: "\e271";
}

.ic-icons-712:before {
    content: "\e272";
}

.ic-icons-713:before {
    content: "\e273";
}

.ic-icons-714:before {
    content: "\e274";
}

.ic-icons-715:before {
    content: "\e275";
}

.ic-icons-716:before {
    content: "\e276";
}

.ic-icons-717:before {
    content: "\e277";
}

.ic-icons-718:before {
    content: "\e278";
}

.ic-icons-719:before {
    content: "\e279";
}

.ic-icons-720:before {
    content: "\e27a";
}

.ic-icons-721:before {
    content: "\e27b";
}

.ic-icons-722:before {
    content: "\e27c";
}

.ic-icons-723:before {
    content: "\e27d";
}

.ic-icons-724:before {
    content: "\e27e";
}

.ic-icons-725:before {
    content: "\e27f";
}

.ic-icons-726:before {
    content: "\e280";
}

.ic-icons-727:before {
    content: "\e281";
}

.ic-icons-728:before {
    content: "\e282";
}

.ic-icons-729:before {
    content: "\e283";
}

.ic-icons-730:before {
    content: "\e284";
}

.ic-icons-731:before {
    content: "\e285";
}

.ic-icons-732:before {
    content: "\e286";
}

.ic-icons-733:before {
    content: "\e287";
}

.ic-icons-734:before {
    content: "\e288";
}

.ic-icons-735:before {
    content: "\e289";
}

.ic-icons-736:before {
    content: "\e28a";
}

.ic-icons-737:before {
    content: "\e28b";
}

.ic-icons-738:before {
    content: "\e28c";
}

.ic-icons-739:before {
    content: "\e28d";
}

.ic-icons-740:before {
    content: "\e28e";
}

.ic-icons-741:before {
    content: "\e28f";
}

.ic-icons-742:before {
    content: "\e290";
}

.ic-icons-743:before {
    content: "\e291";
}

.ic-icons-744:before {
    content: "\e292";
}

.ic-icons-745:before {
    content: "\e293";
}

.ic-icons-746:before {
    content: "\e294";
}

.ic-icons-747:before {
    content: "\e295";
}

.ic-icons-748:before {
    content: "\e296";
}

.ic-icons-749:before {
    content: "\e297";
}

.ic-icons-750:before {
    content: "\e298";
}

.ic-icons-751:before {
    content: "\e299";
}

.ic-icons-752:before {
    content: "\e29a";
}

.ic-icons-753:before {
    content: "\e29b";
}

.ic-icons-754:before {
    content: "\e29c";
}

.ic-icons-755:before {
    content: "\e29d";
}

.ic-icons-756:before {
    content: "\e29e";
}

.ic-icons-757:before {
    content: "\e29f";
}

.ic-icons-758:before {
    content: "\e2a0";
}

.ic-icons-759:before {
    content: "\e2a1";
}

.ic-icons-760:before {
    content: "\e2a2";
}

.ic-icons-761:before {
    content: "\e2a3";
}

.ic-icons-762:before {
    content: "\e2a4";
}

.ic-icons-763:before {
    content: "\e2a5";
}

.ic-icons-764:before {
    content: "\e2a6";
}

.ic-icons-765:before {
    content: "\e2a7";
}

.ic-icons-766:before {
    content: "\e2a8";
}

.ic-icons-767:before {
    content: "\e2a9";
}

.ic-icons-768:before {
    content: "\e2aa";
}

.ic-icons-769:before {
    content: "\e2ab";
}

.ic-icons-770:before {
    content: "\e2ac";
}

.ic-icons-771:before {
    content: "\e2ad";
}

.ic-icons-772:before {
    content: "\e2ae";
}

.ic-icons-773:before {
    content: "\e2af";
}

.ic-icons-774:before {
    content: "\e2b0";
}

.ic-icons-775:before {
    content: "\e2b1";
}

.ic-icons-776:before {
    content: "\e2b2";
}

.ic-icons-777:before {
    content: "\e2b3";
}

.ic-icons-778:before {
    content: "\e2b4";
}

.ic-icons-779:before {
    content: "\e2b5";
}

.ic-icons-780:before {
    content: "\e2b6";
}

.ic-icons-781:before {
    content: "\e2b7";
}

.ic-icons-782:before {
    content: "\e2b8";
}

.ic-icons-783:before {
    content: "\e2b9";
}

.ic-icons-784:before {
    content: "\e2ba";
}

.ic-icons-785:before {
    content: "\e2bb";
}

.ic-icons-786:before {
    content: "\e2bc";
}

.ic-icons-787:before {
    content: "\e2bd";
}

.ic-icons-788:before {
    content: "\e2be";
}

.ic-icons-789:before {
    content: "\e2bf";
}

.ic-icons-790:before {
    content: "\e2c0";
}

.ic-icons-791:before {
    content: "\e2c1";
}

.ic-icons-792:before {
    content: "\e2c2";
}

.ic-icons-793:before {
    content: "\e2c3";
}

.ic-icons-794:before {
    content: "\e2c4";
}

.ic-icons-795:before {
    content: "\e2c5";
}

.ic-icons-796:before {
    content: "\e2c6";
}

.ic-icons-797:before {
    content: "\e2c7";
}

.ic-icons-798:before {
    content: "\e2c8";
}

.ic-icons-799:before {
    content: "\e2c9";
}

.ic-icons-800:before {
    content: "\e2ca";
}

.ic-icons-801:before {
    content: "\e2cb";
}

.ic-icons-802:before {
    content: "\e2cc";
}

.ic-icons-803:before {
    content: "\e2cd";
}

.ic-icons-804:before {
    content: "\e2ce";
}

.ic-phone-icon:before {
    content: "\e2cf";
}

.ic-search:before {
    content: "\e2d0";
}

.ic-twitter-icon:before {
    content: "\e2d1";
}

.ic-asset-1:before {
    content: "\61";
}

.ic-asset-2:before {
    content: "\62";
}

.ic-asset-5:before {
    content: "\63";
}

.ic-asset-8:before {
    content: "\64";
}

.ic-asset-17:before {
    content: "\65";
}

.ic-asset-18:before {
    content: "\66";
}

.ic-asset-21:before {
    content: "\67";
}

.ic-asset-19:before {
    content: "\68";
}

.ic-asset-22:before {
    content: "\e2d2";
}

.ic-asset-23:before {
    content: "\e2d3";
}

.ic-search-1:before {
    content: "\e2d4";
}

.ic-phone-icon-1:before {
    content: "\e2d5";
}

.ic-twitter-icon-1:before {
    content: "\e2d6";
}

* {
    text-decoration: none;
    font-weight: 400;
}

html {
    padding: 0px !important;
    margin: 0px !important;
}

body, html {
    font-family: "Gulf Medium", sans-serif;
    background: #f7f8fc;
}

#inside_page {
    direction: rtl;
}

.english #inside_page {
    direction: ltr;
}


body.english, html.english {
    font-family: "Gotham", sans-serif;
    direction: ltr !important;
}

    body.english * {
        direction: ltr !important;
    }


    body.english .headline {
        text-align: left !important;
    }

    body.english .column, body.english .columns {
        float: left !important;
    }

    body.english header#top-header nav ul {
        float: right !important;
    }

    body.english .remove-shadow {
        right: -50px !important;
        left: initial !important;
    }

    body.english .language-selector, .language-selector {
        font-family: "Gulf Medium", sans-serif;
    }

.language-selector {
    border-right: 1px solid rgba(35, 39, 48, 0.05);
    margin-right: 20px;
}

body.english .language-selector {
    border-left: 1px solid rgba(35, 39, 48, 0.02);
    border-right: 0 !important;
    margin-left: 20px;
}

    body .english .language-selector * {
        color: #767d8c !important;
    }

body.english #weekly_newsletter article {
    float: left !important;
}

body.english #bookstore article {
    float: left !important;
}

    body.english #bookstore article .bg header ul {
        text-align: left !important;
    }

body {
    font-size: 14px;
    line-height: 160%;
    overflow-x: hidden;
}

@media screen and (min-width: 75em) {
    body {
        font-size: 16px;
    }
}

@media screen and (min-width: 75em) {
    body {
        font-size: 16px;
    }
}

@keyframes animatedBackground {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 100% 0;
    }
}

*, a {
    color: #333;
}

.hide, .seo {
    display: none;
}

.ajax-link {
    cursor: pointer;
}

.container-padding {
    position: relative;
    display: inline-block;
    width: 100%;
    clear: both;
    padding: 30px;
    height: calc(100% - 60px) !important;
    width: calc(100% - 60px) !important;
}

@media screen and (min-width: 75em) {
    .container-padding {
        padding: 60px;
        height: calc(100% - 120px) !important;
        width: calc(100% - 120px) !important;
    }
}

@media screen and (min-width: 75em) {
    .container-padding {
        padding: 120px;
        height: calc(100% - 240px) !important;
        width: calc(100% - 240px) !important;
    }
}

h1, h2, h3, h4, h5, h6, p, a {
    direction: rtl;
}

.clear {
    clear: both;
}

::selection {
    background: #1698d9;
    /* WebKit/Blink Browsers */
    color: #fff;
}

::-moz-selection {
    background: #1698d9;
    /* Gecko Browsers */
    color: #fff;
}

.row {
    max-width: 1350px;
    padding: 0 15px;
    margin: auto;
}

.simi-title-small, .simi-title-large, .simi-content {
    width: 100%;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    margin: 0px;
    padding: 0px;
    color: #232730;
}

@media screen and (min-width: 75em) {
    .simi-title-small, .simi-title-large, .simi-content {
        font-size: 18px;
    }
}

@media screen and (min-width: 75em) {
    .simi-title-small, .simi-title-large, .simi-content {
        font-size: 18px;
    }
}

.simi-title-small span, .simi-title-large span, .simi-content span {
    font-weight: 700;
    color: #fff;
}

.simi-title-large {
    font-size: 20px;
    line-height: 26px;
}

@media screen and (min-width: 75em) {
    .simi-title-large {
        font-size: 26px;
    }
}

@media screen and (min-width: 75em) {
    .simi-title-large {
        font-size: 20px;
    }
}

.simi-title-large span {
    color: #1698d9;
}

.simi-title-large.second {
    color: #333 !important;
    padding-bottom: 30px;
}

@media screen and (min-width: 75em) {
    .simi-title-large.second {
        padding-bottom: 60px;
    }
}

@media screen and (min-width: 75em) {
    .simi-title-large.second {
        padding-bottom: 120px;
    }
}

.simi-title-large.second span {
    color: #767d8c;
}

.simi-title-large.black {
    position: relative;
    padding: 50px 0;
    font-weight: 400;
    color: #333;
}

    .simi-title-large.black span {
        color: #333;
    }

    .simi-title-large.black:before, .simi-title-large.black:after {
        height: 40px;
        background: #2b2b2b;
        content: "";
        display: block;
        width: 1px;
        margin: auto;
        position: absolute;
        top: 10px;
        left: 50%;
    }

    .simi-title-large.black:after {
        top: inherit;
        bottom: 10px;
    }

@media screen and (min-width: 75em) {
    .simi-title-large.black {
        padding: 100px 0;
    }

        .simi-title-large.black:before, .simi-title-large.black:after {
            top: 15px;
            height: 70px;
        }

        .simi-title-large.black:after {
            top: inherit;
            bottom: 15px;
        }
}

@media screen and (min-width: 75em) {
    .simi-title-large.black {
        padding: 150px 0;
    }

        .simi-title-large.black:before, .simi-title-large.black:after {
            top: 25px;
            height: 100px;
        }

        .simi-title-large.black:after {
            top: inherit;
            bottom: 25px;
        }
}

.simi-content {
    font-size: 14px;
}

@media screen and (min-width: 75em) {
    .simi-content {
        font-size: 16px;
    }
}

@media screen and (min-width: 75em) {
    .simi-content {
        font-size: 16px;
    }
}

@-webkit-keyframes scrollingmove {
    0% {
        top: 4px;
        height: 15px;
    }

    25% {
        top: 17px;
        height: 2px;
    }

    50% {
        top: 4px;
        height: 15px;
    }

    75% {
        top: 4px;
        height: 2px;
    }

    100% {
        top: 4px;
        height: 15px;
    }
}
/* Standard syntax */
@keyframes scrollingmove {
    0% {
        top: 4px;
        height: 15px;
    }

    25% {
        top: 17px;
        height: 2px;
    }

    50% {
        top: 4px;
        height: 15px;
    }

    75% {
        top: 4px;
        height: 2px;
    }

    100% {
        top: 4px;
        height: 15px;
    }
}

#scroll {
    height: 34px;
    display: block;
    position: absolute;
    width: 20px;
    overflow: hidden;
    bottom: 0px;
    border-radius: 2px;
    left: calc(50% - 18.5px);
    cursor: pointer;
}

    #scroll i {
        height: 15px;
        width: 2px;
        display: block;
        border-radius: 2px;
        clear: both;
        background: #fff;
        margin: auto;
    }

        #scroll i:last-child {
            top: 4px;
            position: relative;
            -webkit-animation: scrollingmove 2s infinite;
            animation: scrollingmove 2s infinite;
        }

.gradient {
    background-image: -moz-linear-gradient(90deg, #2ed967 0%, #fffdfc 100%);
    background-image: -webkit-linear-gradient(90deg, #2ed967 0%, #fffdfc 100%);
    background-image: -ms-linear-gradient(90deg, #2ed967 0%, #fffdfc 100%);
}

.bg-gradient {
    background-image: -moz-linear-gradient(-90deg, #b5315f 0%, #d55a4f 100%);
    background-image: -webkit-linear-gradient(-90deg, #b5315f 0%, #d55a4f 100%);
    background-image: -ms-linear-gradient(-90deg, #b5315f 0%, #d55a4f 100%);
}

.main-content {
    max-width: 700px;
    margin: auto;
    margin-top: 30px;
}

@media screen and (min-width: 75em) {
    .main-content {
        margin-top: 60px;
    }
}

@media screen and (min-width: 75em) {
    .main-content {
        margin-top: 120px;
    }
}

.max-width {
    max-width: 700px;
    margin: auto;
    margin-top: 10px;
}

@media screen and (min-width: 75em) {
    .max-width {
        margin-top: 15px;
    }
}

@media screen and (min-width: 75em) {
    .max-width {
        margin-top: 30px;
    }
}

a.more-btn {
    border: 1px solid #1698d9;
    display: inline-block;
    height: 36px;
    line-height: 35px;
    padding: 0 10px;
    position: relative;
    margin-top: 40px;
    cursor: pointer;
}

@media screen and (min-width: 75em) {
    a.more-btn {
        margin-top: 70px;
        border: 1.5px solid #1698d9;
        padding: 0px 15px;
    }
}

@media screen and (min-width: 75em) {
    a.more-btn {
        margin-top: 100px;
        border: 2px solid #1698d9;
        padding: 0px 20px;
    }
}

a.more-btn:after {
    display: block;
    position: absolute;
    width: 1px;
    border-radius: 2px;
    content: "";
    background: #767d8c;
    left: calc(50% - 1px) !important;
    transition: all 0.2s;
    top: -30px;
    height: 22px;
}

@media screen and (min-width: 75em) {
    a.more-btn:after {
        width: 1.5px;
        top: -55px;
        height: 45px;
    }
}

@media screen and (min-width: 75em) {
    a.more-btn:after {
        width: 2px;
        height: 50px;
        top: -70px;
    }
}

a.more-btn:before {
    display: block;
    position: absolute;
    height: 0%;
    width: 100%;
    content: "";
    background: #1698d9;
    left: 0px;
    transition: all 0.2s;
}

a.more-btn * {
    color: #1698d9;
    z-index: 99;
    position: relative;
    transition: all 0.2s;
}

a.more-btn i {
    top: -2px;
    left: 0px;
    display: inline-block;
    color: #767d8c;
    padding-left: 0px;
}

    a.more-btn i:before {
        left: -1px;
        position: relative;
    }

@media screen and (min-width: 75em) {
    a.more-btn i {
        font-size: 16px;
        top: 2px;
        padding-left: 1px;
    }
}

@media screen and (min-width: 75em) {
    a.more-btn i {
        font-size: 21px;
        top: 15px;
        padding-left: 2px;
    }
}

a.more-btn i:after {
    display: block;
    position: absolute;
    width: 1px;
    height: 0px;
    border-radius: 2px;
    content: "";
    background: #1698d9;
    left: calc(50% - 1px) !important;
    top: -10px;
    transition: all 0.2s;
}

@media screen and (min-width: 75em) {
    a.more-btn i:after {
        width: 1.5px;
    }
}

@media screen and (min-width: 75em) {
    a.more-btn i:after {
        width: 2px;
    }
}

a.more-btn span {
    display: block;
    height: 100%;
    width: 100%;
}

    a.more-btn span:after, a.more-btn span:before {
        display: block;
        position: absolute;
        width: 1px;
        border-radius: 2px;
        content: "";
        background: #1698d9;
        left: calc(50% - 1px) !important;
        transition: all 0.2s;
        height: 0px;
        top: -30px;
    }

@media screen and (min-width: 75em) {
    a.more-btn span:after, a.more-btn span:before {
        width: 1.5px;
        top: -55px;
    }
}

@media screen and (min-width: 75em) {
    a.more-btn span:after, a.more-btn span:before {
        width: 2px;
        top: -70px;
    }
}

a.more-btn:hover i {
    top: 20px;
    color: #1698d9;
}

    a.more-btn:hover i:after {
        height: 28px;
    }

@media screen and (min-width: 75em) {
    a.more-btn:hover i {
        top: 32px;
    }

        a.more-btn:hover i:after {
            height: 28px;
        }
}

@media screen and (min-width: 75em) {
    a.more-btn:hover i {
        top: 32px;
    }

        a.more-btn:hover i:after {
            height: 28px;
        }
}

a.more-btn:hover:before {
    height: calc(100% + 1px);
}

a.more-btn:hover span {
    color: #fff;
}

    a.more-btn:hover span:after {
        height: 22px;
    }

@media screen and (min-width: 75em) {
    a.more-btn:hover span:after {
        height: 45px;
    }
}

@media screen and (min-width: 75em) {
    a.more-btn:hover span:after {
        height: 50px;
    }
}

body.scrolled-body .g-nav * {
    color: #767d8c;
}

body.scrolled-body .g-nav:hover * {
    color: #1698d9;
}

.full-width {
    width: 100%;
    display: inline-block;
    padding-bottom: 30px;
}

@media screen and (min-width: 75em) {
    .full-width {
        padding-bottom: 60px;
    }
}

@media screen and (min-width: 75em) {
    .full-width {
        padding-bottom: 120px;
    }
}

/* || ===

		= imkan.com.sa
		= HEADER AND NAVIGATION

=== || */
header#main-header, .contact-page #the-map {
    display: table;
    height: calc(100vh - 90px) !important;
    width: calc(100vw - 60px) !important;
    margin-bottom: 30px;
    padding-top: 30px;
}

    header#main-header .table-cell, header#main-header .content, .contact-page #the-map .table-cell, .contact-page #the-map .content {
        display: table-cell;
        vertical-align: middle;
        width: 100%;
        z-index: 0;
        position: relative;
    }

@media screen and (min-width: 75em) {
    header#main-header, .contact-page #the-map {
        height: calc(100vh - 180px) !important;
        width: calc(100vw - 120px) !important;
        padding-top: 60px;
        margin-bottom: 60px;
    }
}

@media screen and (min-width: 75em) {
    header#main-header, .contact-page #the-map {
        height: calc(100vh - 360px) !important;
        width: calc(100vw - 240px) !important;
        padding-top: 120px;
        margin-bottom: 120px;
    }
}

header#main-header nav, .contact-page #the-map nav {
    position: fixed;
    top: 0px;
    left: 0px;
    width: calc(100% - 30px);
    height: 200px;
    z-index: 999;
    padding: 15px;
    padding-bottom: 0px;
}

@media screen and (min-width: 75em) {
    header#main-header nav, .contact-page #the-map nav {
        padding: 30px;
        padding-bottom: 0px;
        width: calc(100% - 60px);
    }
}

@media screen and (min-width: 75em) {
    header#main-header nav, .contact-page #the-map nav {
        padding: 60px;
        padding-bottom: 0px;
        width: calc(100% - 120px);
    }
}

header#main-header nav #logo, .contact-page #the-map nav #logo {
    height: auto;
    margin: auto;
    display: block;
    width: 120px;
    float: right;
    padding-top: 14px;
    padding-right: 15px;
}

    header#main-header nav #logo .small, .contact-page #the-map nav #logo .small {
        display: block;
    }

    header#main-header nav #logo .large, .contact-page #the-map nav #logo .large {
        display: none;
    }

@media screen and (min-width: 75em) {
    header#main-header nav #logo, .contact-page #the-map nav #logo {
        width: 100px;
        float: inherit;
        padding-top: 0px;
        padding-right: 0px;
    }

        header#main-header nav #logo .small, .contact-page #the-map nav #logo .small {
            display: none;
        }

        header#main-header nav #logo .large, .contact-page #the-map nav #logo .large {
            display: block;
        }
}

@media screen and (min-width: 75em) {
    header#main-header nav #logo, .contact-page #the-map nav #logo {
        width: 100px;
        float: inherit;
        padding-top: 0px;
        padding-right: 0px;
    }

        header#main-header nav #logo .small, .contact-page #the-map nav #logo .small {
            display: none;
        }

        header#main-header nav #logo .large, .contact-page #the-map nav #logo .large {
            display: block;
        }
}

.g-nav {
    position: fixed;
    height: 20px;
    top: calc(50% - 10px);
    left: 30px;
    text-align: left;
    display: none;
    cursor: pointer;
    z-index: 99;
}

    .g-nav i {
        font-size: 20px;
        color: #232730;
        transition: all 0.2s;
    }

@media screen and (min-width: 75em) {
    .g-nav {
        display: block;
        left: 60px;
    }

        .g-nav i {
            font-size: 16px;
        }
}

@media screen and (min-width: 75em) {
    .g-nav {
        display: block;
        left: 120px;
    }

        .g-nav i {
            font-size: 20px;
        }
}

.g-nav span, .g-nav i {
    display: inline-block;
    width: 100%;
    clear: both;
    text-align: left;
}

.g-nav span {
    width: 0px;
    overflow: hidden;
    transition: all 0.2s;
}

.g-nav:hover span {
    width: 100%;
    color: #1698d9;
}

.g-nav:hover i {
    color: #1698d9;
}

.g-nav#g-nex {
    direction: rtl;
    left: inherit;
    text-align: right;
    right: 30px;
}

@media screen and (min-width: 75em) {
    .g-nav#g-nex {
        right: 60px;
    }
}

@media screen and (min-width: 75em) {
    .g-nav#g-nex {
        right: 120px;
    }
}

.g-nav#g-nex span, .g-nav#g-nex i {
    text-align: right;
}

#social {
    padding: 0px;
    margin: 0px;
    list-style: none;
    display: none;
    width: auto;
    position: absolute;
    z-index: 99;
    left: 30px;
    top: 30px;
}

@media screen and (min-width: 75em) {
    #social {
        left: 60px;
        top: 90px;
        display: inline-block;
    }
}

@media screen and (min-width: 75em) {
    #social {
        left: 120px;
        top: 120px;
        display: inline-block;
    }
}

#social li {
    list-style: none;
    padding: 0px;
    margin: 0px;
    display: inline-block;
    float: left;
    padding: 0px 5px;
    font-size: 16px;
}

    #social li:first-child {
        padding-left: 0px;
    }

    #social li.linkedin {
        top: -2px;
        position: relative;
    }

    #social li:hover.linkedin a {
        color: #007bb5;
    }

    #social li:hover.twitter a {
        color: #55acee;
    }

    #social li:hover.instegram a {
        color: #125688;
    }

/* || MENU AREA || */
#menuarea {
    padding: 0px;
    margin: 0px;
    width: auto;
    position: relative;
    z-index: 99;
    height: 20px;
    max-width: 73px;
    padding-left: 20px;
    top: 17px;
}

@media screen and (min-width: 75em) {
    #menuarea {
        right: 60px;
        top: 90px;
        display: inline-block;
        position: absolute;
        padding-left: 0px;
    }
}

@media screen and (min-width: 75em) {
    #menuarea {
        right: 120px;
        top: 120px;
        display: inline-block;
        position: absolute;
        padding-left: 0px;
    }
}

#menuarea .support {
    position: relative;
    font-size: 21px;
    top: 2px;
    right: 12px;
}

    #menuarea .support * {
        color: #333;
    }

    #menuarea .support * {
        transition: all 0.2s;
    }

    #menuarea .support:hover *, #menuarea .support.active * {
        color: #1698d9;
    }

#menuarea .language {
    display: inline-block;
    width: 21px;
    float: right;
    position: relative;
    margin-right: 30px;
    margin-right: 30px;
    top: 2px;
}

    #menuarea .language img {
        width: 21px;
    }

@media screen and (min-width: 75em) {
    #menuarea .language {
        top: 2px;
    }
}

@media screen and (min-width: 75em) {
    #menuarea .language {
        top: 2px;
    }
}

#menuarea .c-hamburger {
    -webkit-transform: scale(0.26);
    -moz-transform: scale(0.26);
    -o-transform: scale(0.26);
    transform: scale(0.26);
    float: right;
    position: absolute;
    top: -38px;
    right: -22px;
    background: none;
}

    #menuarea .c-hamburger span {
        padding-right: 0px;
        height: 6px;
        background: #333;
    }

        #menuarea .c-hamburger span:before, #menuarea .c-hamburger span:after {
            height: 6px;
            background: #333;
        }

    #menuarea .c-hamburger:hover span {
        background: #1698d9;
    }

        #menuarea .c-hamburger:hover span:after, #menuarea .c-hamburger:hover span:before {
            background: #1698d9;
        }

    #menuarea .c-hamburger.is-active span {
        width: 55px;
    }

#main-menu-area {
    position: fixed;
    right: 0px;
    bottom: 0px;
    z-index: 999;
    background: #fff;
    overflow: hidden;
    height: calc(100% - 180px);
    width: 100%;
    left: 0px;
    bottom: -120%;
    transition: all 0.5s;
}

    #main-menu-area .main-menu-content {
        display: table;
        height: 100%;
        width: 100%;
    }

        #main-menu-area .main-menu-content .table-cell, #main-menu-area .main-menu-content .content {
            display: table-cell;
            vertical-align: middle;
            width: 100%;
            z-index: 0;
            position: relative;
        }

        #main-menu-area .main-menu-content .content {
            overflow: scroll;
        }

    #main-menu-area ul {
        padding: 0px;
        margin: 0px;
        list-style: none;
        width: 100%;
        max-width: 900px;
        margin: auto;
        display: inline-block;
    }

        #main-menu-area ul li {
            width: 100%;
            float: left;
            list-style: none;
            padding: 0px;
            margin: 0px;
            text-align: center;
            margin-top: 30px;
        }

@media screen and (min-width: 75em) {
    #main-menu-area ul li {
        width: 33.333%;
    }
}

@media screen and (min-width: 75em) {
    #main-menu-area ul li {
        width: 33.333%;
    }
}

#main-menu-area ul li a {
    height: 100%;
    width: 100%;
    display: block;
    font-size: 20px;
    color: #232730;
    transition: all 0.2s;
}

@media screen and (min-width: 75em) {
    #main-menu-area ul li a {
        font-size: 26px;
    }
}

@media screen and (min-width: 75em) {
    #main-menu-area ul li a {
        font-size: 20px;
    }
}

#main-menu-area ul li a:hover {
    color: #1698d9;
}

#main-menu-area ul li a span {
    font-size: 14px;
    display: block;
    margin-top: 15px;
    color: #333;
}

@media screen and (min-width: 75em) {
    #main-menu-area ul li a span {
        font-size: 16px;
    }
}

@media screen and (min-width: 75em) {
    #main-menu-area ul li a span {
        font-size: 16px;
    }
}

body.active-menu {
    overflow: hidden;
}

    body.active-menu #main-menu-area {
        visibility: visible;
        bottom: 0px;
        transition: all 2s;
    }

header .asc {
    visibility: visible;
}

#support-info {
    background: #fff;
    width: 100%;
    height: auto;
    max-height: 0px;
    padding-top: 0px;
    transition: all 0.2s;
    overflow: hidden;
}

    #support-info.active {
        height: auto;
        padding-bottom: 15px;
        padding-top: 180px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.15);
        max-height: 1000px;
    }

@media screen and (min-width: 75em) {
    #support-info.active {
        padding-bottom: 30px;
    }
}

@media screen and (min-width: 75em) {
    #support-info.active {
        padding-bottom: 30px;
    }
}

#support-info .blocks {
    border-top: 1.5px solid #767d8c;
    padding-top: 10px;
    width: 900px;
    max-width: 90%;
    margin: auto;
}

#support-info .item {
    padding-top: 0px;
    padding-bottom: 0px;
    border: none;
}

    #support-info .item * {
        text-align: left;
    }

    #support-info .item p {
        color: #232730;
    }

        #support-info .item p * {
            color: #232730;
        }

    #support-info .item i {
        float: left;
        font-size: 15px;
        position: relative;
        top: 1px;
        margin-right: 10px;
    }

    #support-info .item:first-child * {
        text-align: right;
    }

    #support-info .item:first-child i {
        float: right;
        font-size: 15px;
        position: relative;
        top: 1px;
        margin-right: 0px;
        margin-left: 10px;
    }

    #support-info .item span {
        display: block;
    }

/* -----------------------------------------------------------------------------

  HAMBURGER ICONS COMPONENT

----------------------------------------------------------------------------- */
/**
 * Toggle Switch Globals
 *
 * All switches should take on the class `c-hamburger` as well as their
 * variant that will give them unique properties. This class is an overview
 * class that acts as a reset for all versions of the icon.
 */
.c-hamburger {
    display: block;
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 0;
    width: 60px;
    height: 96px;
    font-size: 0;
    text-indent: -9999px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-shadow: none;
    border-radius: none;
    border: none;
    cursor: pointer;
    transition: background 0.3s;
}

    .c-hamburger:focus {
        outline: none;
    }

    .c-hamburger span {
        display: block;
        position: absolute;
        top: 44px;
        left: 0px;
        right: 0px;
        height: 8px;
        background: #2b2b2b;
    }

        .c-hamburger span::before,
        .c-hamburger span::after {
            position: absolute;
            display: block;
            left: 0;
            width: 100%;
            height: 8px;
            background-color: #2b2b2b;
            content: "";
        }

        .c-hamburger span::before {
            top: -20px;
        }

        .c-hamburger span::after {
            bottom: -20px;
        }

/**
 * Style 1
 *
 * Rotating hamburger icon (rot), that simply rotates 90 degrees when activated.
 * Nothing too fancy, simple transition.
 */
.c-hamburger--rot {
    background-color: #28aadc;
}

    .c-hamburger--rot span {
        transition: transform 0.3s;
    }

    /* active state, i.e. menu open */
    .c-hamburger--rot.is-active {
        background-color: #166888;
    }

        .c-hamburger--rot.is-active span {
            transform: rotate(90deg);
        }

/**
 * Style 2
 *
 * Hamburger to "x" (htx). Takes on a hamburger shape, bars slide
 * down to center and transform into an "x".
 */
.c-hamburger--htx {
    background-color: #ff3264;
}

    .c-hamburger--htx span {
        transition: background 0s 0.3s;
    }

        .c-hamburger--htx span::before,
        .c-hamburger--htx span::after {
            transition-duration: 0.3s, 0.3s;
            transition-delay: 0.3s, 0s;
        }

        .c-hamburger--htx span::before {
            transition-property: top, transform;
        }

        .c-hamburger--htx span::after {
            transition-property: bottom, transform;
        }

    /* active state, i.e. menu open */
    .c-hamburger--htx.is-active {
        background-color: #cb0032;
    }

        .c-hamburger--htx.is-active span {
            background: none;
        }

            .c-hamburger--htx.is-active span::before {
                top: 0;
                transform: rotate(45deg);
            }

            .c-hamburger--htx.is-active span::after {
                bottom: 0;
                transform: rotate(-45deg);
            }

            .c-hamburger--htx.is-active span::before,
            .c-hamburger--htx.is-active span::after {
                transition-delay: 0s, 0.3s;
            }

/**
 * Style 3
 *
 * Hamburger to left-arrow (htla). Hamburger menu transforms to a left-pointing
 * arrow. Usually indicates an off canvas menu sliding in from left that
 * will be close on re-click of the icon.
 */
.c-hamburger--htla {
    background-color: #32dc64;
}

    .c-hamburger--htla span {
        transition: transform 0.3s;
    }

        .c-hamburger--htla span::before {
            transform-origin: top right;
            transition: transform 0.3s, width 0.3s, top 0.3s;
        }

        .c-hamburger--htla span::after {
            transform-origin: bottom right;
            transition: transform 0.3s, width 0.3s, bottom 0.3s;
        }

    /* active state, i.e. menu open */
    .c-hamburger--htla.is-active {
        background-color: #18903c;
    }

        .c-hamburger--htla.is-active span {
            transform: rotate(180deg);
        }

            .c-hamburger--htla.is-active span::before,
            .c-hamburger--htla.is-active span::after {
                width: 50%;
            }

            .c-hamburger--htla.is-active span::before {
                top: 0;
                transform: translateX(38px) translateY(4px) rotate(45deg);
            }

            .c-hamburger--htla.is-active span::after {
                bottom: 0;
                transform: translateX(38px) translateY(-4px) rotate(-45deg);
            }

/**
 * Style 4
 *
 * Hamburger to right-arrow (htra). Hamburger menu transforms to a
 * right-pointing arrow. Usually indicates an off canvas menu sliding in from
 * right that will be close on re-click of the icon.
 */
.c-hamburger--htra {
    background-color: #ff9650;
}

    .c-hamburger--htra span {
        transition: transform 0.3s;
    }

        .c-hamburger--htra span::before {
            transform-origin: top left;
            transition: transform 0.3s, width 0.3s, top 0.3s;
        }

        .c-hamburger--htra span::after {
            transform-origin: bottom left;
            transition: transform 0.3s, width 0.3s, bottom 0.3s;
        }

    /* active state, i.e. menu open */
    .c-hamburger--htra.is-active {
        background-color: #e95d00;
    }

        .c-hamburger--htra.is-active span {
            transform: rotate(180deg);
        }

            .c-hamburger--htra.is-active span::before,
            .c-hamburger--htra.is-active span::after {
                width: 50%;
            }

            .c-hamburger--htra.is-active span::before {
                top: 0;
                transform: translateX(-8px) translateY(4px) rotate(-45deg);
            }

            .c-hamburger--htra.is-active span::after {
                bottom: 0;
                transform: translateX(-8px) translateY(-4px) rotate(45deg);
            }

#bottom-page {
    width: 100%;
    margin-top: 120px;
    box-shadow: -3.42px -9.397px 15px 0px rgba(35, 39, 48, 0.05);
    background: #fff;
    padding: 40px 0;
    text-align: center;
}

    #bottom-page .logo {
        display: inline-block;
        background: url(../imgs/footer-logo.png);
        width: 79px;
        height: 53px;
        background-size: 100%;
    }

@media screen and (min-width: 75em) {
    #bottom-page .logo {
        float: right;
    }
}

#bottom-page p {
    float: right;
    margin: 16px 0px;
    padding: 0px;
    width: 100%;
    font-size: 17px;
    line-height: 1.5;
    color: #767d8c;
    text-align: center;
}

@media screen and (min-width: 75em) {
    #bottom-page p {
        max-width: 590px;
        padding-right: 20px;
        text-align: right;
    }
}

#bottom-page ul {
    float: left;
    margin-left: 0;
    padding: 0;
    direction: rtl;
    width: 100%;
}

@media screen and (min-width: 75em) {
    #bottom-page ul {
        width: auto;
    }
}

#bottom-page ul li {
    display: block;
    float: right;
    width: 100%;
    text-align: center;
}

@media screen and (min-width: 75em) {
    #bottom-page ul li {
        display: inline-block;
        width: auto;
    }
}

#bottom-page ul li a {
    color: #767d8c;
    font-size: 14px;
    margin: 0 15px;
}

    #bottom-page ul li a:hover {
        color: #1698d9;
    }

/* || ===

		= imkan.com.sa
		= SCROLLING ANIMATION

=== || */
@-webkit-keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.fadeInUp, .asc.showcontent {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}

@-webkit-keyframes fadeOutUp {
    from {
        opacity: 1;
    }

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

@keyframes fadeOutUp {
    from {
        opacity: 1;
    }

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

.fadeOutUp, .asc.showcontent.foutup {
    -webkit-animation-name: fadeOutUp;
    animation-name: fadeOutUp;
}

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

    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.fadeIn, .asc.showcontent.fin {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}

@-webkit-keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.fadeInRight, .asc.showcontent.fright {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
}

@-webkit-keyframes fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.fadeInLeft, .asc.showcontent.fleft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.fadeInDown, .asc.showcontent.fdown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}

@-webkit-keyframes fadeOutDown {
    from {
        opacity: 1;
    }

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

@keyframes fadeOutDown {
    from {
        opacity: 1;
    }

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

.fadeOutDown, .asc.showcontent.foutdown {
    -webkit-animation-name: fadeOutDown;
    animation-name: fadeOutDown;
}

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

    .asc.showcontent {
        visibility: visible;
    }

    .asc.hidecontent {
        visibility: hidden;
    }

/* || ===

		= imkan.com.sa
		= BLOCKS LAYOUT

=== || */
.blocks {
    width: 100%;
    display: block;
    padding: 0px;
    margin: 0px;
    list-style: none;
}

    .blocks .item {
        float: left;
        display: block;
        padding: 0px;
        margin: 0px;
        list-style: none;
        padding: 15px;
        padding-top: 30px;
        border-color: #767d8c;
        border-bottom: 1px solid #767d8c;
        border-right: 1px solid #767d8c;
    }

@media screen and (min-width: 75em) {
    .blocks .item {
        padding: 30px;
    }
}

@media screen and (min-width: 75em) {
    .blocks .item {
        padding: 60px;
    }
}

.blocks .item h2 {
    font-size: 16px;
    padding-bottom: 15px;
    transition: all 0.2s;
}

@media screen and (min-width: 75em) {
    .blocks .item h2 {
        font-size: 18px;
        padding-bottom: 30px;
    }
}

@media screen and (min-width: 75em) {
    .blocks .item h2 {
        font-size: 18px;
        padding-bottom: 60px;
    }
}

.blocks .item svg {
    height: 40px;
}

@media screen and (min-width: 75em) {
    .blocks .item svg {
        height: 50px;
    }
}

@media screen and (min-width: 75em) {
    .blocks .item svg {
        height: 60px;
    }
}

.blocks .item svg path {
    fill: #767d8c;
    transition: all 0.2s;
}

.blocks .item:hover svg path {
    fill: #333;
}

.blocks .item:hover h2 {
    color: #1698d9;
}

.blocks.three .item {
    width: calc(100% - 31px);
    height: 130px;
    border-right: 0px;
}

    .blocks.three .item:last-child {
        border-bottom: 0px;
    }

@media screen and (min-width: 75em) {
    .blocks.three .item {
        border-right: 1px solid #767d8c;
        width: calc(50% - 61px);
        height: 130px;
    }

        .blocks.three .item:nth-child(2n+0) {
            border-right: 0px;
        }

        .blocks.three .item:nth-child(5), .blocks.three .item:nth-child(6) {
            border-bottom: 0px;
        }
}

@media screen and (min-width: 75em) {
    .blocks.three .item {
        border-right: 1px solid #767d8c;
        width: calc(33.33% - 121px);
        height: 150px;
    }

        .blocks.three .item:nth-child(2n+0) {
            border-right: 1px solid #767d8c;
        }

        .blocks.three .item:nth-child(3n+0) {
            border-right: 0px;
        }

        .blocks.three .item:nth-child(4), .blocks.three .item:nth-child(5), .blocks.three .item:nth-child(6) {
            border-bottom: 0px;
        }
}

.blocks.two .item {
    width: calc(100% - 31px);
    height: auto !important;
    border-right: 0px;
}

@media screen and (min-width: 75em) {
    .blocks.two .item {
        width: calc(50% - 61px);
    }

        .blocks.two .item:nth-child(1n+0) {
            border-right: 1px solid #767d8c;
        }
}

@media screen and (min-width: 75em) {
    .blocks.two .item {
        width: calc(50% - 121px);
        height: 150px;
    }

        .blocks.two .item:nth-child(1n+0) {
            border-right: 1px solid #767d8c;
        }
}

.blocks.two.no-borders .item {
    border-color: #fff;
}

/*

  Based Elements & Blocks
  IMKAN.COM.SA

*/
.full_width {
    width: 100%;
}

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

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

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

.right-align {
    float: right;
}

.left-align {
    float: left;
}

.max-width {
    max-width: 550px;
}

.right-position {
    right: 30px;
}

.top-position {
    top: 30px;
}

.left-position {
    left: 30px;
}

.bottom-position {
    bottom: 30px;
}

.box-shadow {
    box-shadow: -3.256px 9.455px 15px 0px rgba(35, 39, 48, 0.05);
}

.red {
    background: #e14848;
    color: #fff;
}

.gray {
    background: #767d8c;
    color: #fff;
}

.blue {
    background: #217bea;
    color: #fff;
}

.green {
    background: #26d146;
    color: #fff;
}

.black {
    background: #232730;
    color: #fff;
}

.orange {
    background: #fbad24;
    color: #fff;
}

.red-text {
    color: #f33030;
}

.gray-text {
    color: #767d8c;
}

.blue-text {
    color: #3075cb;
}

.green-text {
    color: #26ce46;
}

.black-text {
    color: #232730;
}

.orange-text {
    color: #f5a81e;
}

.full-radius {
    border-radius: 50px !important;
}

.deafult-radius {
    border-radius: 4px !important;
}

.left-radius {
    border-radius: 0 0 0 60px !important;
}

.btn {
    color: #fff;
    box-shadow: -3.256px 9.455px 15px 0px rgba(35, 39, 48, 0.05);
    height: 50px;
    margin-top: 15px;
    padding: 0 30px;
    display: inline-block;
    border-radius: 50px;
    line-height: 50px;
    direction: rtl;
    font-size: 14px;
    transition: all 0.2s;
}

    .btn.green:hover, .btn.blue:hover, .btn.orange:hover {
        background: #232730;
    }

    .btn span {
        display: inline-block;
        float: right;
        /*width: calc(100% - 34px);*/
        color: #fff !important;
    }

@media screen and (min-width: 75em) {
    .btn span {
        /*width: 140px;*/
    }
}

@media screen and (min-width: 75em) {
    .btn {
        margin-top: 30px;
        height: 60px;
        font-size: 16px;
        line-height: 60px;
    }

        .btn:hover {
            background: #1698d9;
        }

        .btn i {
            margin-right: 30px;
        }
}

.btn i {
    color: #fff;
    margin-right: 20px;
    position: relative;
    top: 2px;
}

.headline {
    color: #1698d9;
    font-size: 20px;
    margin: 0 0 30px;
}

@media screen and (min-width: 75em) {
    .headline {
        text-align: right;
        font-size: 28px;
    }
}

.description {
    color: #767d8c;
    font-size: 14px;
    line-height: 1.7;
    direction: rtl;
    margin: 0;
}

@media screen and (min-width: 75em) {
    .description {
        font-size: 16px;
    }
}

/* = SLICK SLIDER = */
/* Slider */
.slick-slider {
    position: relative;
    display: block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

    .slick-list:focus {
        outline: none;
    }

    .slick-list.dragging {
        cursor: pointer;
        cursor: hand;
    }

.slick-slider .slick-track,
.slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: block;
}

    .slick-track:before,
    .slick-track:after {
        display: table;
        content: '';
    }

    .slick-track:after {
        clear: both;
    }

.slick-loading .slick-track {
    visibility: hidden;
}

.slick-slide {
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}

[dir='rtl'] .slick-slide {
    float: right;
}

.slick-slide img {
    display: block;
    z-index: 0;
}

.slick-slide.slick-loading img {
    display: none;
}

.slick-slide.dragging img {
    pointer-events: none;
}

.slick-initialized .slick-slide {
    display: block;
}

.slick-loading .slick-slide {
    visibility: hidden;
}

.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
    display: none;
}

/*

  EXAMPLE FROM PAGE INSIDE
  IMKAN.COM.SA

*/
#inside_page #top-header {
    padding-bottom: 30px;
    background: none;
}

#inside_page main {
    /* padding: 30px;*/
}

@media screen and (max-width: 75em) {
    .column, .columns {
        padding: 10px !important;
        margin-bottom: 20px;
        float: initial !important;
    }

    #top-header .row {
        padding: 0 !important;
        margin: 0 !important;
    }

    header#top-header nav {
        border-radius: 0 !important;
    }


    header#top-header .content article.about {
        padding: 10px;
    }
}

@media screen and (min-width: 75em) {
    #inside_page main {
        padding: 30px;
    }
}

.messageBox {
    display: none;
    overflow: hidden;
}

@media screen and (min-width: 75em) {
    .messageBox {
        color: #FFFFFF;
        padding: 10px 20px;
        margin: 15px 0px;
        transition: all 0.2s;
        display: none;
        cursor: default;
        z-index: 9999;
        min-width: 300px;
    }

        .messageBox.flight-message {
            position: fixed;
        }

        .messageBox.notification-message {
            margin-bottom: 15px;
            display: block;
            padding: 20px;
            width: calc(100% - 40px);
        }

            .messageBox.notification-message a {
                float: left;
            }

        .messageBox.active {
            display: block;
            transition: all 0.2s;
        }

        .messageBox a {
            float: right;
            color: #fff;
            transform: rotate(135deg);
            font-size: 20px;
        }

        .messageBox p {
            float: right;
            max-width: calc(100% - 30px);
            padding-right: 15px;
            margin: 0px;
            text-align: right;
            color: #fff;
        }
}

.page-header {
    padding-bottom: 45px;
    margin-bottom: 0;
}

.heading {
    margin: 0 0 30px;
}

@media screen and (min-width: 75em) {
    .heading {
        font-size: 28px;
    }
}

h1.heading {
    font-size: 28px;
}

@media screen and (min-width: 75em) {
    h1.heading {
        font-size: 28px;
    }
}

h2.heading {
    font-size: 20px;
}

@media screen and (min-width: 75em) {
    h2.heading {
        font-size: 20px;
    }
}

h3.heading {
    font-size: 16px;
}

@media screen and (min-width: 75em) {
    h3.heading {
        font-size: 18px;
    }
}

h4.heading {
    font-size: 14px;
}

@media screen and (min-width: 75em) {
    h4.heading {
        font-size: 16px;
    }
}

.list {
    direction: rtl;
    list-style-type: circle;
    margin: 0px;
    margin-bottom: 30px;
    padding-right: 15px;
}

    .list li {
        text-align: right;
        margin-bottom: 5px;
    }

ol.list {
    list-style-type: decimal;
}

.img-list {
    overflow: hidden;
    margin: 30px 0;
}

@media screen and (min-width: 75em) {
    .img-list.five-images span {
        max-width: calc(20% - 30px);
    }

    .img-list.three-images span {
        max-width: calc(33.333% - 30px);
    }

    .img-list.two-images span {
        max-width: calc(50% - 30px);
    }

    .img-list.four-images span {
        max-width: calc(25% - 30px);
    }

    .img-list.one-images span {
        max-width: calc(100% - 30px);
    }
}

.img-list span {
    display: block;
    float: right;
    margin: 5px;
    width: calc(50% - 10px);
}

@media screen and (min-width: 75em) {
    .img-list span {
        margin: 15px;
    }
}

.img-list img {
    width: 100%;
    height: auto;
    float: right;
}

.block-content {
    background: #fff;
    padding: 30px;
    overflow: hidden;
}

    .block-content .btn {
        margin-top: 0;
    }

#one-slides .slick-dots, #two-slides .slick-dots, #three-slides .slick-dots, #four-slides .slick-dots {
    margin-top: 40px;
    position: relative;
    float: right;
    list-style: none;
    padding: 0px;
    width: 100%;
    text-align: center;
    width: 100%;
    margin-bottom: 60px;
}

    #one-slides .slick-dots li, #two-slides .slick-dots li, #three-slides .slick-dots li, #four-slides .slick-dots li {
        margin: 0px;
        display: inline-block;
    }

        #one-slides .slick-dots li.slick-active button, #two-slides .slick-dots li.slick-active button, #three-slides .slick-dots li.slick-active button, #four-slides .slick-dots li.slick-active button {
            background: #1698d9;
            height: 15px;
            width: 15px;
            position: relative;
            top: -2px;
        }

        #one-slides .slick-dots li button, #two-slides .slick-dots li button, #three-slides .slick-dots li button, #four-slides .slick-dots li button {
            text-indent: -999px;
            overflow: hidden;
            background: #767d8c;
            height: 10px;
            width: 10px;
            border: 0px;
            margin-left: 10px;
            border-radius: 50%;
            padding: 0px;
        }

#one-slides p, #two-slides p, #three-slides p, #four-slides p {
    padding: 0 15px;
    overflow: hidden;
    width: calc(100% - 30px);
}

/********************
  = IMKAN.com.sa
  = FORMS ELEMENTS
********************/
* {
    outline: 0;
}

.input-page {
    /*
     ===
     NORMAL RADIO & CHECK LAYOUT
     ===
  */
    /*
     ===
     RADIO & CHECK LAYOUT
     ===
  */
}

    .input-page h2 {
        overflow: hidden;
        margin-top: 60px;
        width: 100%;
        float: right;
        margin-bottom: 0px;
    }

    .input-page .check-list {
        display: block;
        width: 100%;
        float: right;
    }

        .input-page .check-list li {
            width: 100%;
            margin-bottom: 10px;
            display: block;
            float: right;
        }

@media screen and (min-width: 75em) {
    .input-page .check-list li {
        width: 25%;
        margin-bottom: 0;
    }
}

.input-page .input-content {
    background: #fff;
    margin-top: 15px;
    padding: 15px;
    overflow: hidden;
    position: relative;
}

    .input-page .input-content.select i {
        position: absolute;
        left: 15px;
        font-size: 15px;
        top: 13px;
        transform: rotate(180deg);
    }

    .input-page .input-content i {
        float: right;
        margin-top: 3px;
        font-size: 24px;
        color: #767d8c;
    }

    .input-page .input-content textarea {
        min-height: 200px;
    }

    .input-page .input-content input, .input-page .input-content textarea, .input-page .input-content select {
        width: calc(100% - 45px);
        text-align: right;
        padding-right: 15px;
        text-indent: 0px;
        text-align: right;
        color: gray;
        border: 0px;
        float: right;
        display: inline;
        direction: rtl;
        padding-top: 4px;
    }

    .input-page .input-content select {
        -webkit-appearance: none;
        width: 100%;
        height: 32px;
        background: #fff;
        padding: 0px;
    }

.input-page .input-row {
    margin-bottom: 20px;
}

.input-page .input-helper {
    position: relative;
    display: inline-block;
    margin-bottom: 5px;
    line-height: 15px;
    margin-top: 15px;
    cursor: pointer;
}

    .input-page .input-helper:before {
        content: '';
        display: block;
        position: absolute;
    }

.input-page .input-helper--radio {
    padding-right: 18px;
}

    .input-page .input-helper--radio:before {
        top: 3px;
        right: 0;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        border: 2px solid #767d8c;
    }

    .input-page .input-helper--radio.white:before {
        border: 2px solid #fff;
    }

.input-page .input-helper--checkbox {
    padding-right: 20px;
}

    .input-page .input-helper--checkbox:before {
        top: 2px;
        right: 0;
        width: 13px;
        height: 13px;
        border: 2px solid #767d8c;
    }

    .input-page .input-helper--checkbox.white:before {
        border: 2px solid #fff;
    }

.input-page input[type="radio"] {
    display: none;
}

    .input-page input[type="radio"]:checked + label:before {
        background: #767d8c;
    }

    .input-page input[type="radio"].white:checked + label:before {
        background: #fff;
    }

.input-page input[type="checkbox"] {
    display: none;
}

    .input-page input[type="checkbox"]:checked + label:before {
        background: #767d8c;
    }

    .input-page input[type="checkbox"].white:checked + label:before {
        background: #fff;
    }

.input-page .label {
    cursor: pointer;
    transition: all 0.2s;
}

    .input-page .label input[type="radio"]:checked + label:before, .input-page .label input[type="checkbox"]:checked + label:before {
        background: none !important;
    }

    .input-page .label:hover {
        color: #1698d9;
    }

    .input-page .label label {
        cursor: pointer;
        position: relative;
        cursor: pointer;
        position: relative;
        display: block;
        height: 60px;
        line-height: 60px;
        text-align: right;
        padding: 0px 30px;
        box-shadow: -3.256px 9.455px 15px 0px rgba(35, 39, 48, 0.05);
        background: #fff;
    }

@media screen and (min-width: 75em) {
    .input-page .label label {
        width: calc(100% - 80px);
    }
}

.input-page .label label:before {
    font-family: "icons" !important;
    font-style: normal !important;
    position: absolute;
    left: 30px;
    top: 22px;
    font-size: 21px;
    font-weight: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    speak: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.input-page .label label:hover:before {
    content: "\e0a2";
}

.input-page .label input[type=checkbox], .input-page .label input[type=radio] {
    visibility: hidden;
    display: none;
}

    .input-page .label input[type=checkbox]:checked + label, .input-page .label input[type=radio]:checked + label {
        transition: all 0.2s;
        color: #fff;
        background: #1698d9;
    }

        .input-page .label input[type=checkbox]:checked + label:before, .input-page .label input[type=radio]:checked + label:before {
            content: "\e0a2";
        }

        .input-page .label input[type=checkbox]:checked + label:hover i, .input-page .label input[type=radio]:checked + label:hover i {
            color: #fff;
        }

        .input-page .label input[type=checkbox]:checked + label:hover:before, .input-page .label input[type=radio]:checked + label:hover:before {
            content: "\e0a2";
        }

    .input-page .label input[type=radio]:hover:before {
        content: "\e0a2" !important;
    }

/*!
 * CSS jQuery.filer
 * Copyright (c) 2015 CreativeDream
 * Version: 1.0.5 (19-Nov-2015)
*/
/*-------------------------
	Basic configurations
-------------------------*/
.jFiler * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.jFiler {
    font-size: 14px;
    color: #494949;
}

    /* Helpers */
    .jFiler ul.list-inline li {
        display: inline-block;
        padding-right: 5px;
        padding-left: 5px;
    }

    .jFiler .pull-left {
        float: left;
    }

    .jFiler .pull-right {
        float: right;
    }

/* File Icons */
span.jFiler-icon-file {
    position: relative;
    width: 57px;
    height: 70px;
    display: inline-block;
    line-height: 70px;
    text-align: center;
    border-radius: 3px;
    color: #fff;
    font-family: sans-serif;
    font-size: 13px;
    font-weight: bold;
    overflow: hidden;
    box-shadow: 42px -55px 0 0 #A4A7AC inset;
}

    span.jFiler-icon-file:after {
        position: absolute;
        top: -1px;
        right: -1px;
        display: inline-block;
        content: '';
        border-style: solid;
        border-width: 16px 0 0 16px;
        border-color: transparent transparent transparent #DADDE1;
    }

    span.jFiler-icon-file i[class*="icon-jfi-"] {
        font-size: 24px;
    }

    span.jFiler-icon-file.f-image {
        box-shadow: 42px -55px 0 0 #e15955 inset;
    }

        span.jFiler-icon-file.f-image:after {
            border-left-color: #c6393f;
        }

    span.jFiler-icon-file.f-video {
        box-shadow: 42px -55px 0 0 #4183d7 inset;
    }

        span.jFiler-icon-file.f-video:after {
            border-left-color: #446cb3;
        }

    span.jFiler-icon-file.f-audio {
        box-shadow: 42px -55px 0 0 #5bab6e inset;
    }

        span.jFiler-icon-file.f-audio:after {
            border-left-color: #448353;
        }

/* Progress Bar */
.jFiler-jProgressBar {
    height: 8px;
    background: #f1f1f1;
    margin-top: 3px;
    margin-bottom: 0;
    overflow: hidden;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

    .jFiler-jProgressBar .bar {
        float: left;
        width: 0;
        height: 100%;
        font-size: 12px;
        color: #ffffff;
        text-align: center;
        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
        background-color: #50A1E9;
        box-sizing: border-box;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        -webkit-transition: width 0.3s ease;
        -moz-transition: width 0.3s ease;
        -o-transition: width 0.3s ease;
        transition: width 0.3s ease;
    }

        .jFiler-jProgressBar .bar.dark {
            background-color: #555;
        }

        .jFiler-jProgressBar .bar.blue {
            background-color: #428bca;
        }

        .jFiler-jProgressBar .bar.green {
            background-color: #5cb85c;
        }

        .jFiler-jProgressBar .bar.orange {
            background-color: #f7a923;
        }

        .jFiler-jProgressBar .bar.red {
            background-color: #d9534f;
        }

/* Thumbs */
.jFiler-row:after,
.jFiler-item:after {
    display: table;
    line-height: 0;
    content: "";
    clear: both;
}

.jFiler-items ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/*-------------------------
	Default Theme
-------------------------*/
.jFiler-theme-default .jFiler-input {
    position: relative;
    display: block;
    width: 400px;
    height: 35px;
    margin: 0 0 15px 0;
    background: #fefefe;
    border: 1px solid #cecece;
    font-size: 12px;
    font-family: sans-serif;
    color: #888;
    border-radius: 4px;
    cursor: pointer;
    overflow: hidden;
    -webkit-box-shadow: rgba(0, 0, 0, 0.25) 0 4px 5px -5px inset;
    -moz-box-shadow: rgba(0, 0, 0, 0.25) 0 4px 5px -5px inset;
    box-shadow: rgba(0, 0, 0, 0.25) 0 4px 5px -5px inset;
}

    .jFiler-theme-default .jFiler-input.focused {
        outline: none;
        -webkit-box-shadow: 0 0 7px rgba(0, 0, 0, 0.1);
        -moz-box-shadow: 0 0 7px rgba(0, 0, 0, 0.1);
        box-shadow: 0 0 7px rgba(0, 0, 0, 0.1);
    }

.jFiler-theme-default .jFiler.dragged .jFiler-input {
    border: 1px dashed #aaaaaa;
    background: #f9f9f9;
}

    .jFiler-theme-default .jFiler.dragged .jFiler-input:hover {
        background: #FFF8D0;
    }

    .jFiler-theme-default .jFiler.dragged .jFiler-input * {
        pointer-events: none;
    }

    .jFiler-theme-default .jFiler.dragged .jFiler-input .jFiler-input-caption {
        width: 100%;
        text-align: center;
    }

    .jFiler-theme-default .jFiler.dragged .jFiler-input .jFiler-input-button {
        display: none;
    }

.jFiler-theme-default .jFiler-input-caption {
    display: block;
    float: left;
    height: 100%;
    padding-top: 8px;
    padding-left: 10px;
    text-overflow: ellipsis;
    overflow: hidden;
}

.jFiler-theme-default .jFiler-input-button {
    display: block;
    float: right;
    height: 100%;
    padding-top: 8px;
    padding-left: 15px;
    padding-right: 15px;
    border-left: 1px solid #ccc;
    color: #666666;
    text-align: center;
    background-color: #fefefe;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fefefe), to(#f1f1f1));
    background-image: -webkit-linear-gradient(top, #fefefe, #f1f1f1);
    background-image: -o-linear-gradient(top, #fefefe, #f1f1f1);
    background-image: linear-gradient(to bottom, #fefefe, #f1f1f1);
    background-image: -moz-linear-gradient(top, #fefefe, #f1f1f1);
    -webkit-transition: all .1s ease-out;
    -moz-transition: all .1s ease-out;
    -o-transition: all .1s ease-out;
    transition: all .1s ease-out;
}

    .jFiler-theme-default .jFiler-input-button:hover {
        -moz-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.07);
        -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.07);
        box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.07);
    }

    .jFiler-theme-default .jFiler-input-button:active {
        background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f1f1f1), to(#fefefe));
        background-image: -webkit-linear-gradient(top, #f1f1f1, #fefefe);
        background-image: -o-linear-gradient(top, #f1f1f1, #fefefe);
        background-image: linear-gradient(to bottom, #f1f1f1, #fefefe);
        background-image: -moz-linear-gradient(top, #f1f1f1, #fefefe);
    }

/*-------------------------
	Thumbnails
-------------------------*/
.jFiler-items-default .jFiler-item {
    position: relative;
    padding: 16px;
    margin-bottom: 16px;
    background: #f7f7f7;
    color: #4d4d4c;
}

    .jFiler-items-default .jFiler-item .jFiler-item-icon {
        font-size: 32px;
        color: #f5871f;
        margin-right: 15px;
        margin-top: -3px;
    }

    .jFiler-items-default .jFiler-item .jFiler-item-title {
        font-weight: bold;
    }

/**
* FileUploader
* Copyright (c) 2017 Innostudio.de
* Website: http://innostudio.de/fileuploader/
* Version: 1.0.0.1 (27-Mar-2017)
* Requires: jQuery v1.7.1 or later
* License: GPLv3 license
*/
/*
    Configuration
*/
.fileuploader,
.fileuploader *,
.fileuploader :before,
.fileuploader :after {
    box-sizing: border-box;
}

/*
    Parent
*/
.fileuploader {
    display: block;
    width: 100%;
    border-radius: 4px;
    line-height: normal;
    text-align: left;
    overflow: hidden;
}

/*
    Input
*/
.fileuploader-input {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    border: 1px solid transparent;
    cursor: pointer;
    overflow: hidden;
}

/* input caption */
.fileuploader-input-caption {
    position: relative;
    display: inline-block;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -ms-flex-item-align: start;
    align-self: flex-start;
    padding: 10px 15px;
    margin-right: 15px;
    background: #fff;
    border: 1px solid #dde4f6;
    border-radius: 4px;
    color: #94a2e8;
    font-weight: bold;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-transition: all .2s ease-out;
    transition: all .2s ease-out;
}

/* input button */
.fileuploader-input-button {
    display: inline-block;
    background: #1698d9;
    border-radius: 4px;
    color: #fff;
    text-align: center;
    font-weight: bold;
    vertical-align: top;
    cursor: pointer;
    -webkit-transition: all .2s ease-out;
    transition: all .2s ease-out;
}

.upload_ico {
    display: block;
    font-size: 38px;
}

/* input focused state */
.fileuploader-focused .fileuploader-input-caption {
    border-color: #b8c2ef;
}

.fileuploader-focused .fileuploader-input-button {
    background: #7b90ef;
    border-color: #7b90ef;
}

/* input disabled state */
.fileuploader-disabled .fileuploader-input {
    opacity: 0.7;
    cursor: default;
    pointer-events: none !important;
}

/* input dragging state */
.fileuploader-theme-default .fileuploader-dragging {
    background: #fff;
    border: 1px dashed #dde4f6;
}

    .fileuploader-theme-default .fileuploader-dragging .fileuploader-input-caption {
        border-color: transparent;
    }

    .fileuploader-theme-default .fileuploader-dragging .fileuploader-input-button {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
        opacity: 0;
    }

/* input uploading state */
.fileuploader.fileuploader-is-uploading .fileuploader-input-caption:after {
    width: 14px;
    height: 14px;
    right: 10px;
    top: 50%;
    margin-top: -10px;
    opacity: 0.8;
}

/* global loader */
.fileuploader.fileuploader-is-uploading .fileuploader-input-caption:after,
.fileuploader-item .fileuploader-item-image.fileuploader-loading:after,
.fileuploader-item.upload-pending .fileuploader-action-remove:after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border-top: 3px solid #dde4f6;
    border-right: 3px solid #dde4f6;
    border-bottom: 3px solid #dde4f6;
    border-left: 3px solid #979fb8;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: fileuploaderSpin 1s infinite linear;
    animation: fileuploaderSpin 1s infinite linear;
}

/*
    Thumbnails
    default theme
*/
/* list */
.fileuploader-items-list {
    display: block;
    margin: 0 -15px;
    padding: 0;
    list-style: none;
}

/* item */
.fileuploader-item {
    position: relative;
    margin: 0;
    padding: 20px 15px;
    border-bottom: 1px solid #e8e8e8;
    -webkit-animation: fileuploaderSlideIn 0.4s ease;
    animation: fileuploaderSlideIn 0.4s ease;
}

    .fileuploader-item:last-child {
        border-bottom: 0;
        margin-bottom: -15px;
    }

    /* item uploading state */
    .fileuploader-item.upload-failed {
        background: rgba(219, 104, 104, 0.08);
    }

    .fileuploader-item.upload-pending .fileuploader-action-remove:after {
        width: 26px;
        height: 26px;
        right: -5px;
        top: 50%;
        margin-top: -13px;
        opacity: 0.2;
    }

    /* item columns */
    .fileuploader-item .columns {
        position: relative;
        z-index: 2;
    }

    /* item column-thumbnail */
    .fileuploader-item .column-thumbnail {
        position: absolute;
        width: 36px;
        height: 36px;
        line-height: 36px;
        left: 0;
        top: 0;
    }

        .fileuploader-item .column-thumbnail .fileuploader-item-image {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

    .fileuploader-item .fileuploader-item-image img,
    .fileuploader-item .fileuploader-item-image canvas {
        border-radius: 4px;
        -webkit-animation: fileuploaderFadeIn .2s ease;
        animation: fileuploaderFadeIn .2s ease;
    }

    /* thumbnail loading state */
    .fileuploader-item .column-thumbnail .fileuploader-item-image.fileuploader-loading:after {
        width: 24px;
        height: 24px;
        left: 50%;
        top: 50%;
        margin-left: -12px;
        margin-top: -12px;
        border-radius: 50%;
        opacity: 0.12;
    }

    /* item icon */
    .fileuploader-item .fileuploader-item-icon {
        position: relative;
        width: 100%;
        height: 100%;
        text-align: center;
        color: #fff;
        font-size: 11px;
        background: #ddd;
        border-radius: 4px;
        -webkit-animation: fileuploaderFadeIn .2s ease;
        animation: fileuploaderFadeIn .2s ease;
    }

        .fileuploader-item .fileuploader-item-icon.is-bright-color {
            color: #888;
        }

        .fileuploader-item .fileuploader-item-icon i {
            display: block;
            width: 90%;
            margin: 0 auto;
            overflow: hidden;
            text-overflow: ellipsis;
            font-style: normal;
            font-weight: bold;
        }

    /* item icon like file */
    /*
.fileuploader-item .fileuploader-item-icon {
    width: 30px;
    margin: 0 auto;
    border-radius: 3px;
}
.fileuploader-item .fileuploader-item-icon i {
    padding-top: 3px;
}
.fileuploader-item .fileuploader-item-icon:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-bottom-left-radius: 2px;
    border-width: 4px;
    border-style: solid;
    border-color: #f5f6fa #f5f6fa rgba(255, 255, 255, .35) rgba(255, 255, 255, .35);
}
.fileuploader-item .fileuploader-item-image img,
.fileuploader-item .fileuploader-item-icon {
    -webkit-animation: fileuploaderFadeIn 0.4s ease;
    animation: fileuploaderFadeIn 0.4s ease;
}
*/
    /* item column-title */
    .fileuploader-item .column-title {
        display: block;
        padding-left: 51px;
        padding-right: 81px;
        color: #74809D;
    }

    .fileuploader-item a {
        color: #74809D;
        text-decoration: none;
    }

    .fileuploader-item .column-title div {
        width: 100%;
        font-weight: bold;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

    .fileuploader-item .column-title span {
        font-size: 12px;
        color: #979fb8;
    }

    /* item actions */
    .fileuploader-item .column-actions {
        position: absolute;
        right: 15px;
        top: 50%;
        margin-top: -9px;
    }

.fileuploader-action {
    display: inline-block;
    position: relative;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    cursor: pointer;
    vertical-align: top;
    -webkit-transform: translateZ(0px);
    transform: translateZ(0px);
    -webkit-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}

.fileuploader-item .column-actions .fileuploader-action + .fileuploader-action {
    margin-left: 10px;
}

.fileuploader-item .column-actions .fileuploader-action-success {
    position: absolute;
    right: 0;
    top: 0;
}

    .fileuploader-item .column-actions .fileuploader-action-success:hover,
    .fileuploader-item .column-actions .fileuploader-action-success:active {
        opacity: 0;
    }

/* icon.remove */
.fileuploader-action-remove {
    background: #fae1e1;
    border: 1px solid #ffcfcf;
}

    .fileuploader-action-remove:hover {
        background: #ffefef;
    }

    .fileuploader-action-remove:active {
        background: #ffcfcf;
    }

    .fileuploader-action-remove i:before,
    .fileuploader-action-remove i:after {
        content: '';
        position: absolute;
        top: 4px;
        left: 7px;
        height: 8px;
        width: 2px;
        background-color: #f59595;
    }

    .fileuploader-action-remove i:before {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .fileuploader-action-remove i:after {
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }

/* icon-start */
.fileuploader-action-start {
    background: #1698d9;
    border-radius: 50%;
}

    .fileuploader-action-start i {
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -2px;
        margin-top: -5px;
        border-radius: 2px;
        width: 0;
        height: 0;
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
        border-left: 5px solid #fff;
    }

    .fileuploader-action-start:hover {
        background: #7b90ef;
    }

    .fileuploader-action-start:active {
        background: #1698d9;
        box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.1);
    }

/* icon.success */
.fileuploader-action-success {
    background: #1698d9;
    border: 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

    .fileuploader-action-success i:before,
    .fileuploader-action-success i:after {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }

    .fileuploader-action-success i:before {
        width: 4px;
        height: 2px;
        left: 6px;
        top: 11px;
        background: #fff;
    }

    .fileuploader-action-success i:after {
        top: 4px;
        left: 9px;
        width: 2px;
        height: 9px;
        background: #fff;
    }

/* icon-download */
.fileuploader-action-download {
    background: #1698d9;
    border-radius: 50%;
}

    .fileuploader-action-download i {
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -1px;
        margin-top: -4px;
        width: 2px;
        height: 5px;
        border-radius: 0;
        background: #fff;
    }

        .fileuploader-action-download i:after {
            content: '';
            position: absolute;
            width: 0;
            height: 0;
            bottom: -4px;
            left: -3px;
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            border-top: 5px solid #fff;
            border-radius: 2px;
        }

    .fileuploader-action-download:hover {
        background: #7b90ef;
    }

    .fileuploader-action-download:active {
        background: #1698d9;
        box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.1);
    }

/* icon-retry */
.fileuploader-action-retry {
    background: #1698d9;
    border-radius: 50%;
}

    .fileuploader-action-retry i:before {
        content: '';
        position: absolute;
        width: 10px;
        height: 10px;
        left: 4px;
        top: 4px;
        border-radius: 50%;
        border: 2px solid #fff;
    }

    .fileuploader-action-retry i:after {
        content: '';
        position: absolute;
        width: 6px;
        height: 3px;
        left: 3px;
        top: 9px;
        background: #1698d9;
    }

    .fileuploader-action-retry:hover,
    .fileuploader-action-retry:hover i:after {
        background: #7b90ef;
    }

    .fileuploader-action-retry:active,
    .fileuploader-action-retry:active i:after {
        background: #1698d9;
        box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.1);
    }

/* item progress bar */
.fileuploader-item .fileuploader-progressbar {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 4px;
    border-radius: 4px;
    overflow: hidden;
}

    .fileuploader-item .fileuploader-progressbar .bar {
        position: absolute;
        left: 0;
        top: 0;
        width: 0%;
        height: 100%;
        border-radius: 4px;
        background: #1698d9;
        -webkit-transition: width 0.3s ease;
        transition: width 0.3s ease;
    }

.fileuploader-item .progress-bar2 .fileuploader-progressbar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .fileuploader-item .progress-bar2 .fileuploader-progressbar .bar {
        position: absolute;
        left: 0;
        top: 0;
        width: 0%;
        height: 100%;
        border-radius: 0;
        background: rgba(104, 125, 219, 0.08);
        -webkit-transition: width 0.3s ease;
        transition: width 0.3s ease;
    }

.fileuploader-item .progress-bar2 span {
    position: absolute;
    top: 50%;
    margin-top: -29px;
    right: 15px;
    color: rgba(151, 159, 184, 0.16);
    font-size: 48px;
}

/* clipboard paste loading */
.fileuploader-input-caption .fileuploader-pending-loader {
    margin-right: 5px;
}

.fileuploader-pending-loader {
    position: relative;
    display: inline-block;
    width: 14px;
    height: 14px;
    overflow: hidden;
    vertical-align: middle;
}

    .fileuploader-pending-loader:after,
    .fileuploader-pending-loader .left-half {
        background: #fff;
    }

    .fileuploader-pending-loader .right-half,
    .fileuploader-pending-loader .spinner {
        background: #94a2e8;
    }

    .fileuploader-pending-loader:after {
        content: '';
        position: absolute;
        top: 3px;
        left: 3px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        z-index: 4;
    }

    .fileuploader-pending-loader .left-half,
    .fileuploader-pending-loader .right-half,
    .fileuploader-pending-loader .spinner {
        position: absolute;
        top: 0;
        width: 50%;
        height: 100%;
    }

    .fileuploader-pending-loader .left-half {
        left: 0;
        opacity: 1;
        border-radius: 100% 0 0 100%/ 50% 0 0 50%;
        -webkit-animation: fileuploaderOpacity 3s steps(1, end) infinite;
        animation: fileuploaderOpacity 3s steps(1, end) infinite;
        z-index: 3;
    }

    .fileuploader-pending-loader .right-half {
        right: 0;
        opacity: 0;
        border-radius: 0 100% 100% 0/ 0 50% 50% 0;
        -webkit-animation: fileuploaderOpacity 3s steps(1, end) reverse infinite;
        animation: fileuploaderOpacity 3s steps(1, end) reverse infinite;
        z-index: 1;
    }

    .fileuploader-pending-loader .spinner {
        left: 0;
        border-radius: 100% 0 0 100%/ 50% 0 0 50%;
        -webkit-animation: fileuploaderSpin 3s linear infinite;
        animation: fileuploaderSpin 3s linear infinite;
        -webkit-transform-origin: center right;
        transform-origin: center right;
        z-index: 2;
    }

/* animations */
@-webkit-keyframes fileuploaderOpacity {
    0% {
        opacity: 1;
    }

    50%, 100% {
        opacity: 0;
    }
}

@keyframes fileuploaderOpacity {
    0% {
        opacity: 1;
    }

    50%, 100% {
        opacity: 0;
    }
}

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

    to {
        opacity: 1;
    }
}

@keyframes fileuploaderFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-webkit-keyframes fileuploaderScaleIn {
    from {
        opacity: 0;
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    to {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes fileuploaderScaleIn {
    from {
        opacity: 0;
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    to {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@-webkit-keyframes fileuploaderSlideIn {
    from {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
        opacity: 0;
    }

    to {
        -webkit-transform: translateY(0%);
        transform: translateY(0%);
        opacity: 1;
    }
}

@keyframes fileuploaderSlideIn {
    from {
        -webkit-transform: translateY(50%);
        transform: translateY(50%);
        opacity: 0;
    }

    to {
        -webkit-transform: translateY(0%);
        transform: translateY(0%);
        opacity: 1;
    }
}

@-webkit-keyframes fileuploaderSlideOut {
    from {
        -webkit-transform: translateY(0%);
        transform: translateY(0%);
        opacity: 1;
    }

    to {
        -webkit-transform: translateY(50%);
        transform: translateY(50%);
        opacity: 0;
    }
}

@keyframes fileuploaderSlideOut {
    from {
        -webkit-transform: translateY(0%);
        transform: translateY(0%);
        opacity: 1;
    }

    to {
        -webkit-transform: translateY(50%);
        transform: translateY(50%);
        opacity: 0;
    }
}

@-webkit-keyframes fileuploaderSpin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes fileuploaderSpin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
/* input */
.fileuploader-theme-dragdrop .fileuploader-input {
    display: block;
    padding: 60px 0;
    background: #fff;
    border: 2px dashed #c2cdda;
    border-radius: 3px;
    text-align: center;
    -webkit-transition: background-color 0.2s ease;
    transition: background-color 0.2s ease;
}

    .fileuploader-theme-dragdrop .fileuploader-input .fileuploader-input-inner {
        -webkit-transition: opacity 0.2s ease;
        transition: opacity 0.2s ease;
    }

    .fileuploader-theme-dragdrop .fileuploader-input.fileuploader-dragging .fileuploader-input-inner {
        opacity: 0.4;
    }

    .fileuploader-theme-dragdrop .fileuploader-input.fileuploader-dragging img {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    .fileuploader-theme-dragdrop .fileuploader-input img {
        display: block;
        max-width: 64px;
        margin: 0 auto;
        margin-bottom: 30px;
        -webkit-transition: all 0.2s ease;
        transition: all 0.2s ease;
    }

    .fileuploader-theme-dragdrop .fileuploader-input h3 {
        margin: 0;
        padding: 0;
        background: none;
        border: none;
        font-size: 18px;
        font-weight: bold;
        color: #555a6b;
        white-space: normal;
    }

    .fileuploader-theme-dragdrop .fileuploader-input p {
        color: #74809d;
    }

.fileuploader-theme-dragdrop.fileuploader-is-uploading .fileuploader-input-caption:after {
    display: none;
}

.fileuploader-theme-dragdrop .fileuploader-pending-loader .right-half,
.fileuploader-theme-dragdrop .fileuploader-pending-loader .spinner {
    background: #1698d9;
}

.fileuploader-theme-dragdrop .fileuploader-input p {
    margin: 10px 0 20px;
}

.upload-box {
    margin-top: 30px;
    float: right;
    width: calc(100% - 60px);
}

.jFiler-items-default .jFiler-item .jFiler-item-others {
    font-size: 12px;
    color: #777;
    margin-left: -5px;
    margin-right: -5px;
}

.submit-button {
    border: 0;
    margin-top: 60px;
}

    .submit-button span {
        float: none;
    }

.jFiler-items-default .jFiler-item .jFiler-item-others span {
    padding-left: 5px;
    padding-right: 5px;
}

.jFiler-items-default .jFiler-item-assets {
    position: absolute;
    display: block;
    right: 16px;
    top: 50%;
    margin-top: -10px;
}

    .jFiler-items-default .jFiler-item-assets a {
        padding: 8px 9px 8px 12px;
        cursor: pointer;
        background: #fafafa;
        color: #777;
        border-radius: 4px;
        border: 1px solid #e3e3e3;
    }

    .jFiler-items-default .jFiler-item-assets .jFiler-item-trash-action:hover,
    .jFiler-items-default .jFiler-item-assets .jFiler-item-trash-action:active {
        color: #d9534f;
    }

    .jFiler-items-default .jFiler-item-assets .jFiler-item-trash-action:active {
        background: transparent;
    }

.jFiler-items-grid .jFiler-item .jFiler-item-container {
    position: relative;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #767d8c;
    width: 100%;
    border-radius: 5px;
    background: #fff;
}

    .jFiler-items-grid .jFiler-item .jFiler-item-container:hover {
        border-color: #767d8c;
        box-shadow: -3.256px 9.455px 15px 0px rgba(35, 39, 48, 0.05);
    }

/* input */
.fileuploader-theme-dragdrop .fileuploader-input {
    display: block;
    padding: 60px 0;
    background: #fff;
    border: 2px dashed #c2cdda;
    border-radius: 3px;
    text-align: center;
    -webkit-transition: background-color 0.2s ease;
    transition: background-color 0.2s ease;
}

    .fileuploader-theme-dragdrop .fileuploader-input .fileuploader-input-inner {
        -webkit-transition: opacity 0.2s ease;
        transition: opacity 0.2s ease;
    }

    .fileuploader-theme-dragdrop .fileuploader-input.fileuploader-dragging .fileuploader-input-inner {
        opacity: 0.4;
    }

    .fileuploader-theme-dragdrop .fileuploader-input.fileuploader-dragging img {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    .fileuploader-theme-dragdrop .fileuploader-input img {
        display: block;
        max-width: 64px;
        margin: 0 auto;
        margin-bottom: 30px;
        -webkit-transition: all 0.2s ease;
        transition: all 0.2s ease;
    }

    .fileuploader-theme-dragdrop .fileuploader-input h3 {
        margin: 0;
        padding: 0;
        background: none;
        border: none;
        font-size: 18px;
        font-weight: bold;
        color: #555a6b;
        white-space: normal;
    }

    .fileuploader-theme-dragdrop .fileuploader-input p {
        color: #74809d;
    }

.fileuploader-theme-dragdrop.fileuploader-is-uploading .fileuploader-input-caption:after {
    display: none;
}

.fileuploader-theme-dragdrop .fileuploader-pending-loader .right-half,
.fileuploader-theme-dragdrop .fileuploader-pending-loader .spinner {
    background: #1698d9;
}

.fileuploader-theme-dragdrop .fileuploader-input p {
    margin: 10px 0;
}

.jFiler-items-grid .jFiler-item .jFiler-item-container .jFiler-item-thumb {
    position: relative;
    width: 100%;
    border-radius: 5px;
    height: 115px;
    min-height: 115px;
    border: 1px solid #767d8c;
    overflow: hidden;
}

    .jFiler-items-grid .jFiler-item .jFiler-item-container .jFiler-item-thumb .jFiler-item-thumb-image {
        width: 100%;
        height: 100%;
        text-align: center;
    }

.jFiler-item .jFiler-item-container .jFiler-item-thumb img {
    max-width: none;
    max-height: 100%;
}

.jFiler-items-grid .jFiler-item .jFiler-item-container .jFiler-item-thumb span.jFiler-icon-file {
    margin-top: 20px;
}

.jFiler-items-grid .jFiler-item-thumb-image.fi-loading {
    background: url("data:image/gif;base64,R0lGODlhIwAjAMQAAP////f39+/v7+bm5t7e3tbW1s7OzsXFxb29vbW1ta2traWlpZycnJSUlIyMjISEhHt7e3Nzc2tra2NjY1paWlJSUkpKSkJCQjo6OjExMSkpKRkZGRAQEAAAAP///wAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFBAAeACwAAAAAIwAjAAAF5CAgjmRpnmiqrmzrvnAsz3Rto4Fwm4EYLIweQHcTKAiAQOPRI0QKRcYiEGA4qI8K9HZoGAIOSOBgCdIGBeLCMUgoBJSJjsBAxAiKRSFAQBCVBwMKGRsNQi8DBwsJhyQVGxMKjTCJk0kPjDI5AlQqBAcICFstBQqmmScFGh0dHBaWKAIEBQQDKQEKDxEQCTMBA5Y/o5oDoZYCHB1PMgIHCQacwCPACRStDTEDBrYABQg5wAgGIg4YYjQCogEGB3wI3J2+oD0G42PfN2Pc7D2JRDb/+In4t8MHwYIIEypcyLChQ4YhAAAh+QQFBAAeACwIAAgAEwATAAAFlqAnjiKSjAFJBscgLos4NIQ6JggAKLHXSDWbp6CoLRgeg0ShGwkIKQ9iITggPJFHaqA4eAYIRK0a9SwK0spl0TQkvEIJJnIlCdDCRk4lEJIGBgcHRn4jBBkciROFKgkNDg51jCJBJJU2ARocD4xNAQsGCBMcGz2FAxwZKQwVDYVwEhwOI02MAxsceJMeOgwaJ7skCX0jIQAh+QQFBAAeACwAAAAAAQABAAAFA6AXAgAh+QQFBAAeACwAAAAAAQABAAAFA6AXAgAh+QQFBAAeACwJAAcAEgAVAAAFjqAnjmJAnihgHChqCACAJKMyoMHBeggSJ40baoC4zTwFB6IlOiwLhkCDMUIYUAUSgiA4RCZLAXPkoDQOsfFosVNjDYaBQiRmWjaaDMTdXDAYbWMJQnwiGBoOBEwmIwVeGhhzKAJ+BBsXIgoSVCcEAxkbAw8enEwAARkaYqluAqliChlLY64aQrNjAT2MKCEAIfkEBQQAHgAsBwAIABQAFAAABZqgJ45jUQBkqorGgQqIsKqteCjyTLbAsBg6UoBA8CgSIoGhGGQNAoXG4zAaNBcPxalJQhS4KwGhUCQgRYHZQGKxVBpgD8CQUCiAYEQTpZpcGFYrBgw5HgkEBg4XFHoqFx10CwMZFCIIDwl8IwscFAQXGR4NGQo6BBocRRUYHgIWGEwqBxoPHgEWoYYXVCsBCTIBqzkHaVwHvCshACH5BAUEAB4ALAAAAAABAAEAAAUDoBcCACH5BAUEAB4ALAcACAAVABQAAAWaoCeOpDECZKqKgRcY7bqanoHI6+EKSIHjCJ2oMPidCgIPQbHwGUkIBoLwJAEM1OpqQBgkC0yjwBGRRBQokfdXOASzo0MjqTrQUwQIpwM/QSYJKQoaHRUKHgtQSgwTEUIeDRcPSRQcHgiBFREiB1IkdAkaEgMUGAILFoE4AxkaRRIVLRIURTIGGQ0iExWcEzQyBzGwI05PV78rIQAh+QQFBAAeACwAAAAAAQABAAAFA6AXAgAh+QQFBAAeACwHAAgAFAAUAAAFlaAnjmRBnmgqCip6kEGbDnJqvmJAsLVIDwgEoTc6JAy0k05VSIoKiSgipgoIaIFKZ8tBVBeNBgORkEwkDt6sYECSBosUwJRybDiqxuOgTmTwCAUKIwAHAwMJDw10CxUNMRIaBQcIAmhPCgYjVAcZDx4REx5lOCoWGCIPER4Bqi0FFwwiEBIxBg9DKpqpEVS5PQUFACohACH5BAUEAB4ALAAAAAABAAEAAAUDoBcCACH5BAUEAB4ALAcACAAUABQAAAWRoCeOpEGeaCoGKmqOQlvKXgId4usR6DA+HA6kQDsxMB0Nr0hSTHxFAgJxIABogpiEI9rgVAiF2ICARCANVovAjsESKoKaNGBkMqrEojA/WDYSHgMIJAVZBwsKSwoSCyIOFx4FJg4LVwQHRCgVDQIOEAEHDi9XJwISFAIADA4iDJ1xEwoiDa2SDFA0rCO5NGwtIQAh+QQFBAAeACwAAAAAAQABAAAFA6AXAgAh+QQFBAAeACwHAAgAEwAUAAAFj6AnisNonqeBLWg7GpwmtAENcc8s6ifyGKJMp1DyIFqNjecxUEiKLpGi4slATcBW4hkdDQ6HbHd048TELtah8XCwxqjAsXXdKSyWuuiAILwmGBBABzUiBDUFCQglCBAJIgsTBAQFAQpzAwZ1BREsCwweBQt+Lg8QNQpvCAqFJwMQc6mGjy6kHrI7cB4DeiIhACH5BAUEAB4ALAAAAAABAAEAAAUDoBcCACH5BAUEAB4ALAcABwASABUAAAWXoCeOI0GQaBpUl5CSRZV4QrYN71hoWBBkGpdISAI4No2BhoNLHRijy8YQmQwOpJMC2BAgIh5fgJZKSDYWYg4FWZMMhkLT7XHYeAW6wrBgLGZ0KQZjgR4IEhFqJIAeBQ8UDQUCeSNzIwcNCCIJDwMDJwgGawSZAQgzBAiWIwELDSIHmh6xOQyiAKciV4oeAHO0IwB0ArweIQAh+QQFBAAeACwAAAAAAQABAAAFA6AXAgAh+QQFBAAeACwHAAcAEAAVAAAFjKAnjuMwkKgnjFJVosSEeMGVrcc1j8TlehVMIIDh7EaMzMKDuTE4k4DHsCiIKJnCI0LYcE6ehMWyPDxGgshyZL5MUqID6uCAowsEwsouWlTGFAR8HgUJCglHgyNWigF0dXYzBAwPCoJgcAUKBnELAgKYcAObHgdyfIYiBQcAdgIJjAanrq0AsoojQyghACH5BAUEAB4ALAAAAAABAAEAAAUDoBcCACH5BAUEAB4ALAcACAAUABQAAAWYoCeKwQhF5aiqA3SIlDVW7yoOlCRKlVhtNZtHYUkIKBfPYoNaFRADUUTWeAwyGYHHAFmIDhIJImBorBIFB6cDSZUnEGEA08k0UiPDQrsSTB58HgEDhEIqAHgIERESVoY2BAcIBwaPlh5Rl04KCnhnKwMJDFCelgMIBAAeT3hBNqoeAggFIgiaX7ZblZoBB5lbqoG3wzbCKyEAIfkEBQQAHgAsBwAHABUAEwAABZygJ46jIJBoSjZPqa6GGEmBZ0zx60Gt90QiSSb3QkgOHskkkMj0UAOkyCEhLBiey2X0SIwMLKRVAPAEHggCY8N5egiKB6OGAmwtC1UhQScFIgt9JAKCKQUICQkxBw2NCycqBhsdlBgBAwUGBgRlKgMPExMSgSSdKmQvBAgIOqwoAgeKkDopBgMiMbOutCgGSLe8IlIeSKbBI1LAKCEAIfkEBQQAHgAsAAAAAAEAAQAABQOgFwIAIfkEBQQAHgAsAAAAAAEAAQAABQOgFwIAIfkECQQAHgAsAAAAACMAIwAABbWgJ45kaZ5oqq5s675wLM90baPBvS6MTgoKgqjxEBEihZuAsRAxHKJHJXk7NAwBB8RzsPRqBYFo4RgkFALKxMhAxAiKBdXtAXgah4Eis2nIBgcLCSgVGxMKNYAoD4MzAgI5KgQHCAhULQUKmgmRJgUaIhwWLwIEBQQDKQEKDxEQCXYxnSUBcjapKAIcHUg+JgkUHRx+YB6zIw4YEMc2QiMBzDB0HgbGvifR19rb3N3e3+Dh4ikhADs=") no-repeat center;
    width: 100%;
    height: 100%;
}

.jFiler-items-grid .jFiler-item .jFiler-item-container .jFiler-item-info {
    position: absolute;
    bottom: -10%;
    left: 0;
    width: 100%;
    color: #fff;
    padding: 6px 10px;
    background: -moz-linear-gradient(bottom, black 0, transparent 100%);
    background: -webkit-linear-gradient(bottom, black 0, transparent 100%);
    background: -o-linear-gradient(bottom, black 0, transparent 100%);
    background: -ms-linear-gradient(bottom, black 0, transparent 100%);
    background: linear-gradient(to top, black 0, transparent 100%);
    z-index: 9;
    opacity: 0;
    -webkit-transition: all 0.12s;
    -moz-transition: all 0.12s;
    transition: all 0.12s;
}

.jFiler-items-grid .jFiler-no-thumbnail.jFiler-item .jFiler-item-container .jFiler-item-info {
    background: rgba(0, 0, 0, 0.55);
}

.jFiler-items-grid .jFiler-item .jFiler-item-container .jFiler-item-thumb:hover .jFiler-item-info {
    bottom: 0;
    opacity: 1;
    filter: aplpha(opacity(100));
}

.jFiler-items-grid .jFiler-item .jFiler-item-container .jFiler-item-info .jFiler-item-title {
    display: block;
    font-weight: bold;
    word-break: break-all;
    line-height: 1;
}

.jFiler-items-grid .jFiler-item .jFiler-item-container .jFiler-item-info .jFiler-item-others {
    display: inline-block;
    font-size: 10px;
}

.jFiler-items-grid .jFiler-item .jFiler-item-container .jFiler-item-assets {
    margin-top: 10px;
    color: #999;
}

    .jFiler-items-grid .jFiler-item .jFiler-item-container .jFiler-item-assets .text-success {
        color: #3C763D;
    }

.jFiler-items-grid .jFiler-items-grid .jFiler-item .jFiler-item-container .jFiler-item-assets .text-error {
    color: #A94442;
}

.jFiler-items-grid .jFiler-item .jFiler-item-container .jFiler-item-assets .jFiler-jProgressBar {
    width: 120px;
    margin-left: -5px;
}

.jFiler-items-grid .jFiler-item .jFiler-item-container .jFiler-item-assets .jFiler-item-others {
    font-size: 12px;
}

.jFiler-items-grid .jFiler-item-trash-action:hover {
    cursor: pointer;
    color: #d9534f;
}

/*!
 * CSS jQuery.filer
 * Theme: DragDropBox
 * Copyright (c) 2015 CreativeDream
 * Version: 1.0.5 (15-Nov-2015)
*/
/*-------------------------
	Input
-------------------------*/
.jFiler.dragged .jFiler-input-dragDrop {
    border-color: #aaa;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.08);
}

    .jFiler.dragged .jFiler-input-dragDrop * {
        pointer-events: none;
    }

.jFiler.dragged .jFiler-input-icon {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

.jFiler.dragged .jFiler-input-text,
.jFiler.dragged .jFiler-input-choose-btn {
    filter: alpha(opacity=30);
    opacity: 0.3;
}

.jFiler-input-dragDrop .jFiler-input-icon {
    font-size: 48px;
    margin-top: -10px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.jFiler-input-text h3 {
    margin: 0;
    font-size: 18px;
}

.jFiler-input-text span {
    font-size: 12px;
}

.jFiler-theme-dragdropbox {
    background: #fff;
    width: 100%;
    padding: 30px;
    box-shadow: -3.256px 9.455px 15px 0px rgba(35, 39, 48, 0.05);
    margin-bottom: 20px;
}

.jFiler-input-dragDrop {
    border: 1px dashed #767d8c;
    border-radius: 2px;
    margin-bottom: 30px;
    padding: 30px;
}

    .jFiler-input-dragDrop .jFiler-input-text, .jFiler-input-dragDrop h3 {
        margin: 0px !important;
    }

    .jFiler-input-dragDrop span {
        margin: 5px 0px;
        display: inline-block;
    }

    .jFiler-input-dragDrop * {
        font-size: 14px !important;
        text-align: center;
    }

.jFiler-input-icon i {
    color: #1698d9;
    font-size: 30px !important;
}

.jFiler-item-others.text-error {
    font-size: 9px !important;
}

/*

  IMKAN.COM.SA
  LANGUAGE FILE DIRECTION

*/
.english {
    direction: ltr !important;
    text-align: left;
}

    .english p {
        direction: ltr;
    }

    .english .btn span {
        float: left;
    }

    .english .btn i {
        float: right;
        top: -3px;
        right: -20px;
        transform: rotate(180deg);
    }

    .english #top-header nav {
        direction: rtl;
    }

        .english #top-header nav .menu-list {
            margin-left: 30px;
            margin-right: 0;
        }

        .english #top-header nav .logo {
            float: right;
            background-image: url(../imgs/logo-en.png) !important;
            margin: 37px 30px 0px 0;
        }

@media screen and (min-width: 75em) {
    .english #top-header h1 {
        float: left !important;
        text-align: left !important;
        width: 100%;
        display: block;
    }

    .english #top-header nav {
        direction: rtl;
    }

        .english #top-header nav .logo {
            background-image: url(../imgs/logo-en.png) !important;
        }
}

@media screen and (min-width: 75em) and (min-width: 64em) {
    .english #top-header nav .logo {
        margin: 37px 30px 0px 0;
    }
}

@media screen and (min-width: 75em) {
    .english #top-header nav .logo-bg {
        float: left;
    }

    .english #top-header nav .shadow-left {
        left: auto;
        right: -40vw;
    }

    .english #top-header nav .remove-shadow {
        left: 0px;
        right: -50px;
    }

    .english #top-header nav .shadow-right {
        left: -50vw;
        right: auto;
    }

    .english #top-header nav .logo-bg {
        border-radius: 0 0 30px 0;
    }

    .english #top-header nav .nav-bg {
        border-radius: 0 0 0 60px;
    }

    .english #top-header nav ul li {
        float: left;
    }

        .english #top-header nav ul li a {
            text-align: left;
        }

            .english #top-header nav ul li a i {
                text-align: left;
            }
}

.english #top-header .about {
    text-align: left !important;
}

@media screen and (min-width: 75em) {
    .english #top-header .about {
        float: left !important;
    }
}

.english #top-header .about .bg-img {
    right: auto;
    left: -50px !important;
}

.english #top-header .about p {
    text-align: left;
}

.english #top-header .about .slick-dots {
    float: left !important;
}

.english #top-header .content .site-list {
    float: left !important;
    text-align: left !important;
}

@media screen and (min-width: 75em) {
    .english #top-header .content .site-list article {
        float: right;
    }

        .english #top-header .content .site-list article:nth-child(4) {
            margin-left: 0;
            margin-right: 30px;
        }
}

.english #top-header .content .site-list header {
    padding-right: 0;
    padding-left: 15px;
}

.english #top-header .content .site-list a i {
    float: left;
}

.english #top-header .content .site-list a h1, .english #top-header .content .site-list a p {
    text-align: left;
    direction: ltr;
}

@media screen and (min-width: 75em) {
    .english #events .events-list {
        float: left;
    }
}

.english #events article.about {
    text-align: left;
}

    .english #events article.about span {
        float: left;
        margin-right: 10px;
    }

@media screen and (min-width: 75em) {
    .english #events article.about {
        padding-right: 0;
        padding-left: 90px;
    }

        .english #events article.about span {
            float: left;
            width: 100%;
            text-align: left;
        }
}

.english #events article.about p {
    text-align: left;
}

.english #events article.about h1 {
    text-align: left;
}

.english #events .events-list h2 {
    text-align: left;
}

.english #events .events-list article header {
    float: left;
    text-align: left;
    padding-right: 0;
    padding-left: 15px;
    padding-top: 20px;
}

@media screen and (min-width: 75em) {
    .english #events .events-list article header {
        padding-left: 30px;
        padding-top: 17px;
    }
}

.english #events .events-list article header h1, .english #events .events-list article header a {
    text-align: left;
    direction: ltr;
}

.english #events .events-list article .more {
    float: right;
    margin: 23px 18px 0 0px;
}

@media screen and (min-width: 75em) {
    .english #events .events-list article .more {
        margin: 18px 18px 18px 0px;
    }
}

.english #events .events-list article .more i {
    transform: rotate(180deg);
    position: relative;
    display: block;
    top: -4px;
    left: -2px;
}

@media screen and (min-width: 75em) {
    .english #events .events-list article .more i {
        top: -6px;
        left: 0;
    }
}

.english #events .events-list article time {
    float: left;
    text-align: left;
}

    .english #events .events-list article time span {
        text-align: center;
    }

.english #weekly_newsletter h2 {
    text-align: left !important;
}

.english #weekly_newsletter article .date {
    float: left !important;
}

.english #weekly_newsletter article time {
    float: right !important;
}

.english #weekly_newsletter article h1 {
    text-align: left !important;
}

.english #weekly_newsletter article p {
    text-align: left !important;
}

.english #books h2 {
    text-align: left;
}

    .english #books h2 .arrow {
        float: right;
    }

.english #contact .social {
    text-align: center;
}

@media screen and (min-width: 75em) {
    .english #contact .social li {
        float: left;
    }
}

.english #contact .contact-list {
    float: left;
}

    .english #contact .contact-list p {
        float: left;
        text-align: left;
    }

    .english #contact .contact-list .info-list li span {
        float: left;
        text-align: left;
        padding-left: 15px;
        padding-right: 0;
    }

@media screen and (min-width: 75em) {
    .english #contact .contact-list .info-list li span {
        padding-left: 30px;
    }
}

.english #contact .contact-list .info-list li i {
    float: left;
}

.english #contact h1 {
    text-align: left;
}

@media screen and (min-width: 75em) {
    .english #bottom-page .logo {
        float: left;
    }

    .english #bottom-page p {
        float: left;
        text-align: left;
        padding-left: 20px;
    }

    .english #bottom-page ul {
        float: right;
    }

        .english #bottom-page ul li {
            float: left;
        }
}

/**
 * Foundation for Sites by ZURB
 * Version 6.3.0
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
#faq-list {
    width: 100%;
}

    #faq-list article {
        display: block;
        float: right;
        width: 100%;
        margin-bottom: 30px;
    }

        #faq-list article.active .bg {
            height: auto;
        }

            #faq-list article.active .bg i {
                transform: rotate(180deg);
                position: relative;
                top: -3px;
            }

            #faq-list article.active .bg h1 a {
                color: #1698d9;
            }

            #faq-list article.active .bg h1 i {
                color: #1698d9;
            }

        #faq-list article .bg {
            background: #fff;
            height: 83px;
            box-shadow: -3.256px 9.455px 15px 0px rgba(35, 39, 48, 0.05);
            border-radius: 0 0 30px 0;
            overflow: hidden;
            float: left;
            width: 100%;
        }

            #faq-list article .bg * {
                transition: all 0.5s;
            }

            #faq-list article .bg:hover .img-cover {
                background: #1698d9;
            }

                #faq-list article .bg:hover .img-cover i {
                    opacity: 1;
                }

            #faq-list article .bg:hover h1 a {
                color: #1698d9;
            }

            #faq-list article .bg header {
                padding: 30px;
                overflow: hidden;
            }

                #faq-list article .bg header h1 {
                    margin: 0;
                    width: 100%;
                    float: right;
                    text-align: right;
                    cursor: pointer;
                    padding-bottom: 15px;
                }

                    #faq-list article .bg header h1 i {
                        font-size: 24px;
                        float: left;
                    }

                    #faq-list article .bg header h1 a {
                        color: #232730;
                        font-size: 20px;
                        width: calc(100% - 30px);
                        float: right;
                    }

@media screen and (min-width: 75em) {
    #faq-list article .bg header h1 a {
        font-size: 20px;
    }
}

#faq-list article .bg header time {
    float: left;
    color: #767d8c;
    margin-top: 5px;
    font-size: 16px;
}

@media screen and (min-width: 75em) {
    #faq-list article .bg header time {
        font-size: 16px;
    }
}

#faq-list article .bg header p {
    float: right;
    color: #767d8c;
    margin-bottom: 0;
    width: 100%;
    margin-top: 5px;
    border-top: 2px solid #f7f8fc;
    margin-top: 10px;
    text-align: right;
    padding-top: 25px;
    font-size: 16px;
}

@media screen and (min-width: 75em) {
    #faq-list article .bg header p {
        font-size: 16px;
    }
}

#faq-list article .bg header .date {
    float: right;
    color: #767d8c;
    margin-bottom: 0;
    margin-top: 5px;
    font-size: 16px;
}

@media screen and (min-width: 75em) {
    #faq-list article .bg header .date {
        font-size: 16px;
    }
}

/* = book store page layout = */
#books-slider {
    overflow: hidden;
}

#bookstore {
    width: 100%;
}

    #bookstore article {
        display: block;
        float: right;
        width: 100%;
        margin-bottom: 30px;
    }

@media screen and (min-width: 75em) {
    #bookstore article {
        padding: 0 15px;
        width: calc(25% - 30px);
    }
}

#bookstore article .bg {
    background: #fff;
    box-shadow: -3.256px 9.455px 15px 0px rgba(35, 39, 48, 0.05);
    border-radius: 10px;
    overflow: hidden;
    float: left;
    width: 100%;
}

    #bookstore article .bg * {
        transition: all 0.5s;
    }

    #bookstore article .bg:hover .img-cover {
        background: #1698d9;
    }

        #bookstore article .bg:hover .img-cover i {
            opacity: 1;
        }

    #bookstore article .bg:hover h1 a {
        color: #1698d9;
    }

    #bookstore article .bg .img-cover {
        background: #767d8c;
        height: auto;
        float: left;
        width: 100%;
        overflow: hidden;
        position: relative;
        border-radius: 0 0 60px 0;
    }

        #bookstore article .bg .img-cover i {
            position: absolute;
            height: 43px;
            width: 43px;
            background: #fff;
            border-radius: 50%;
            text-align: center;
            line-height: 49px;
            bottom: 20px;
            left: 20px;
            color: #1698d9;
            opacity: 0;
        }

@media screen and (min-width: 75em) {
    #bookstore article .bg .img-cover {
        height: auto;
    }
}

#bookstore article .bg .img-cover img {
    width: 100%;
    min-height: 200px;
    opacity: 0.8;
}

@media screen and (min-width: 75em) {
    #bookstore article .bg .img-cover img {
        min-height: 300px;
        height: auto;
    }
}

#bookstore article .bg header {
    padding: 30px 15px;
    overflow: hidden;
}

@media screen and (min-width: 75em) {
    #bookstore article .bg header {
        padding: 30px;
    }
}

#bookstore article .bg header h1 {
    margin: 0;
    float: right;
    overflow: hidden;
    width: 100%;
    height: 100px;
}

    #bookstore article .bg header h1 a {
        color: #232730;
        font-size: 20px;
    }

@media screen and (min-width: 75em) {
    #bookstore article .bg header h1 a {
        font-size: 20px;
    }
}

#bookstore article .bg header ul {
    padding: 0;
    overflow: hidden;
    text-align: right;
    list-style: none;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 2px solid #f7f8fc;
    width: 100%;
    margin-bottom: 0;
    margin-top: 50px;
}

    #bookstore article .bg header ul li {
        float: left;
        color: #767d8c;
        margin-top: 5px;
        width: 100%;
        display: block;
        font-size: 16px;
    }

@media screen and (min-width: 75em) {
    #bookstore article .bg header ul li {
        font-size: 18px;
    }
}

.certificates-list {
    width: 100%;
    margin-top: 60px;
}

@media screen and (min-width: 75em) {
    .certificates-list {
        position: initial;
        width: calc(100% - 10px);
        margin-top: 0;
        margin: auto 0;
        padding: 0;
    }
}

.certificates-list article {
    overflow: hidden;
    padding: 15px;
    background: #fff;
    box-shadow: -3.256px 9.455px 15px 0px rgba(35, 39, 48, 0.05);
    margin-bottom: 15px;
}

@media screen and (min-width: 75em) {
    .certificates-list article {
        border-radius: 30px;
    }
}

.certificates-list article * {
    transition: all 0.5s;
}



.certificates-list article .bg {
    border-radius: 0px;
    width: calc(100% - 60px);
    max-width: 100%;
    float: right;
    background: #1698d9;
    padding: 30px;
    text-align: center;
}

    .certificates-list article .bg img {
        width: auto;
        height: 100px;
        display: inline-block;
    }

@media screen and (min-width: 75em) {
    .certificates-list article .bg {
        width: 160px;
        max-width: 90px;
        border-radius: 50%;
    }

        .certificates-list article .bg img {
            width: 100%;
            height: auto;
        }
}

.certificates-list article:hover h1 {
    color: #1698d9;
}

.certificates-list article:hover i {
    border-color: #1698d9;
    color: #1698d9;
}

@media screen and (min-width: 75em) {
    .certificates-list article {
        margin-bottom: 30px;
        padding: 30px;
        width: calc(100% - 60px);
    }
}

.certificates-list article a {
    cursor: pointer;
    float: right;
    display: block;
    width: 100%;
}

    .certificates-list article a header {
        float: right;
        width: 100%;
        padding-top: 7px;
    }

@media screen and (min-width: 75em) {
    .certificates-list article a header {
        width: calc(100% - 200px);
        padding-right: 30px;
        padding-top: 16px;
    }
}

.certificates-list article a header h1 {
    color: #232730;
    font-size: 20px;
    margin: 0 0 5px;
    text-align: right;
    width: 100%;
    line-height: 1.4;
    text-overflow: ellipsis;
    overflow: hidden;
}

@media screen and (min-width: 75em) {
    .certificates-list article a header h1 {
        text-align: right;
        direction: rtl;
        font-size: 24px;
        margin: 0 0 6px;
    }
}

.certificates-list article a header p {
    color: #767d8c;
    width: 100%;
    margin-top: 5px;
    overflow: hidden;
    font-size: 14px;
    text-align: right;
    line-height: 1.7;
    margin: 0;
}

@media screen and (min-width: 75em) {
    .certificates-list article a header p {
        font-size: 16px;
        direction: rtl;
        margin-top: 10px;
        text-align: right;
        float: right;
    }
}

.certificates-list article a i {
    float: right;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 69px;
    font-size: 24px;
    border-radius: 50%;
    border: 2px solid #b2b6bf;
    color: #b2b6bf;
}

@media screen and (min-width: 75em) {
    .certificates-list article a i {
        width: 80px;
        font-size: 36px;
        border-width: 3px;
        height: 80px;
        text-align: center;
        line-height: 95px;
    }
}


.english .certificates-list article .bg {
    float: left;
    text-align: left;
}

.english .certificates-list article * {
    text-align: left;
}



.training-list {
    width: 100%;
}

@media screen and (min-width: 75em) {
    .training-list {
        width: calc(100% - 80px);
        margin-top: 0;
        margin: 20px;
    }
}

.training-list article {
    overflow: hidden;
    padding: 15px;
    background: #fff;
    box-shadow: 0 2.455px 32px 4px rgba(35, 39, 48, 0.05);
    margin-bottom: 15px;
}

@media screen and (min-width: 75em) {
    .training-list article {
        border-radius: 30px;
    }
}

.training-list article * {
    transition: all 0.5s;
}

.english .training-list article * {
    text-align: left;
    float: left !important;
}

.english .training-list article .bg {
    margin-right: 20px;
}

.training-list article .bg {
    border-radius: 0px;
    width: calc(100% - 30px);
    max-width: 100%;
    float: right;
    background: #1698d9;
    padding: 15px;
    text-align: center;
}


 

@media screen and (min-width: 75em) {
    .training-list article .bg {
        width: calc(100% - 60px);
        padding: 30px;
    }
}

.training-list article .bg img {
    width: auto;
    height: 50px;
    display: inline-block;
}

@media screen and (min-width: 75em) {
    .training-list article .bg {
        width: 160px;
        max-width: 66px;
        border-radius: 100%;
    }

        .training-list article .bg img {
            width: 100%;
            height: auto;
        }
}

.training-list article:hover h1 {
    color: #1698d9;
}

.training-list article:hover i {
    border-color: #1698d9;
    color: #1698d9;
}

@media screen and (min-width: 75em) {
    .training-list article {
        margin-bottom: 30px;
        padding: 30px;
        width: 100%;
    }
}

.training-list article a {
    cursor: pointer;
    float: right;
    display: block;
    width: 100%;
}

    .training-list article a header {
        float: right;
        width: 100%;
        padding-top: 7px;
    }

@media screen and (min-width: 75em) {
    .training-list article a header {
        width: calc(100% - 200px);
        padding-right: 30px;
        padding-top: 16px;
    }
}

.training-list article a header h1 {
    color: #232730;
    font-size: 20px;
    margin: 0 0 5px;
    text-align: right;
    width: 100%;
    line-height: 1.4;
    text-overflow: ellipsis;
    overflow: hidden;
}

@media screen and (min-width: 75em) {
    .training-list article a header h1 {
        text-align: right;
        direction: rtl;
        font-size: 24px;
        margin: 0 0 6px;
    }
}

.training-list article a header p {
    color: #767d8c;
    width: 100%;
    margin-top: 5px;
    overflow: hidden;
    font-size: 14px;
    text-align: right;
    line-height: 1.7;
    margin: 0;
}

@media screen and (min-width: 75em) {
    .training-list article a header p {
        font-size: 16px;
        direction: rtl;
        text-align: right;
        float: right;
    }
}

.training-list article a i {
    float: right;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 69px;
    font-size: 24px;
    border-radius: 50%;
    border: 2px solid #b2b6bf;
    color: #b2b6bf;
}

@media screen and (min-width: 75em) {
    .training-list article a i {
        width: 80px;
        font-size: 36px;
        border-width: 3px;
        height: 80px;
        text-align: center;
        line-height: 95px;
    }
}

/* = Content page = */
.content-table {
    width: 100%;
    max-width: 1170px;
    margin: 30px auto;
    direction: rtl;
}

    .content-table td {
        direction: rtl;
    }

    .content-table thead td {
        background: #1698d9;
        padding-left: 30px;
        /* direction: rtl; */
        border: 0px;
        /* float: right; */
        padding: 0 30px;
        height: 50px;
        color: #fff !important;
    }

    .content-table tbody tr:nth-child(2n+1) td {
        background: #f7f8fc;
    }

    .content-table tbody td {
        padding-left: 30px;
        /* direction: rtl; */
        border: 0px;
        /* float: right; */
        padding: 0 30px;
        height: 50px;
        color: #767d8c;
    }

/* = HEADER layout = */
header#top-header {
    background-size: 150%;
    background-position: -60px 50px;
}

@media screen and (min-width: 75em) {
    header#top-header {
        background-size: auto;
        background-position: 100%;
    }
}

header#top-header nav {
    background: #1698d9;
    box-shadow: 0px 5px 50px 0px rgba(35, 39, 48, 0.1);
    height: 80px;
    border-radius: 0px 0 60px 0px;
    text-align: center;
    position: relative;
}

@media screen and (min-width: 75em) {
    header#top-header nav {
        box-shadow: 0 0 0 0;
        background: none;
        min-height: 130px;
        border-radius: 0;
    }

        header#top-header nav .shadow-left {
            display: block;
            height: 130px;
            background: #ffffff;
            position: absolute;
            left: -40vw;
            z-index: 999;
            width: 50vw;
        }

        header#top-header nav .shadow-right {
            display: block;
            height: 130px;
            background: #1698d9;
            position: absolute;
            right: -50vw;
        }
}

header#top-header nav .logo-bg {
    display: inline-block;
}

@media screen and (min-width: 75em) {
    header#top-header nav .logo-bg {
        width: 30%;
        height: 130px;
        overflow: hidden;
        background: #1698d9 url(/resources/imgs/iia-outline-20.png) 37px;
        background-size: cover;
        float: right;
        border-radius: 0 0 0 30px;
        position: relative;
        z-index: 99999;
    }
}

header#top-header nav .nav-bg {
    display: none;
    position: absolute;
    background: #fff;
    box-shadow: -14px -7px 50px 0px rgba(35, 39, 48, 0.1);
    float: right;
    position: relative;
    border-radius: 0 0 60px 0;
    z-index: 99999;
    width: calc(100% - 30px);
    border-radius: 0 60px 0 0px;
    padding: 15px;
}

    header#top-header nav .nav-bg.active {
        position: absolute;
        display: block;
    }

@media screen and (min-width: 75em) {
    header#top-header nav .nav-bg {
        padding: 0;
        width: 70%;
        display: block;
        border-radius: 0 0 60px 0;
        float: right;
        height: 130px;
    }

        header#top-header nav .nav-bg .remove-shadow {
            position: absolute;
            height: 130px;
            background: #fff;
            width: 50px;
            left: -50px;
        }
}

header#top-header nav .nav-bg .users {
    float: right;
    display: block;
    direction: rtl;
    font-size: 22px;
    margin: 20px 10px 0;
    color: #232730;
}

@media screen and (min-width: 75em) {
    header#top-header nav .nav-bg .users {
        float: left;
        margin: 50px 0 0;
    }
}

header#top-header nav .nav-bg .users span {
    color: #232730;
    font-size: 16px;
    position: relative;
    top: -6px;
    margin-right: 3px;
}

header#top-header nav .nav-bg .search {
    float: left;
    display: block;
    direction: rtl;
    font-size: 22px;
    margin: 20px 10px 0;
    color: #232730;
}

@media screen and (min-width: 75em) {
    header#top-header nav .nav-bg .search {
        margin: 50px 20px 0;
    }
}

header#top-header nav .logo {
    display: inline-block;
    background: url(../imgs/logo.png);
    width: 155px;
    height: 35px;
    background-size: 100%;
    margin: 23px 0;
}

@media screen and (min-width: 75em) {
    header#top-header nav .logo {
        width: 236px;
        height: 54px;
        margin: 37px 0px 0 30px;
        float: left;
    }
}

header#top-header nav .menu-list {
    display: inline-block;
    margin-bottom: 29px;
    margin-right: 30px;
    cursor: pointer;
}

@media screen and (min-width: 75em) {
    header#top-header nav .menu-list {
        display: none;
    }
}

header#top-header nav .menu-list span {
    display: block;
    height: 2px;
    background: #fff;
    border-radius: 4px;
    width: 25px;
    margin-bottom: 4px;
}

header#top-header nav ul {
    display: block;
    float: left;
    padding: 0;
    width: 100%;
    margin-bottom: 0;
    direction: rtl;
}

@media screen and (min-width: 75em) {
    header#top-header nav ul {
        margin: 40px 30px;
        width: auto;
        padding-right: 0;
        float: left;
    }
}

header#top-header nav ul li {
    transition: all 0.2s;
    width: 100%;
    display: block;
    text-align: center;
    margin-bottom: 10px;
}

@media screen and (min-width: 75em) {
    header#top-header nav ul li {
        float: right;
        width: auto;
        margin-bottom: 0;
        display: inline-block;
    }
}

header#top-header nav ul li a {
    color: #232730;
    margin: 0 8px;
    transition: all 0.2s;
    font-size: 20px;
}

    header#top-header nav ul li a i {
        display: none;
    }

@media screen and (min-width: 75em) {
    header#top-header nav ul li a {
        overflow: hidden;
        display: block;
        text-align: right;
        font-size: 14px;
    }

        header#top-header nav ul li a i {
            display: block;
            float: right;
            text-align: right;
            width: 100%;
            font-size: 19px;
            color: inherit;
        }
}

header#top-header nav ul li:hover a, header#top-header nav ul li.active a {
    color: #1698d9;
}

header#top-header .content {
    padding: 100px 0;
}

@media screen and (min-width: 75em) {
    header#top-header .content {
        padding: 100px 0 0;
        overflow: hidden;
    }
}

header#top-header .content article.about {
    position: relative;
}

    header#top-header .content article.about .bg-img {
        display: none;
    }

    header#top-header .content article.about .slick-dots {
        position: relative;
        margin-top: 30px;
        position: relative;
        float: right;
        list-style: none;
        padding: 0px;
    }

        header#top-header .content article.about .slick-dots li {
            margin: 0px;
            float: right;
        }

            header#top-header .content article.about .slick-dots li.slick-active button {
                background: #1698d9;
                height: 15px;
                width: 15px;
                position: relative;
                top: -2px;
            }

            header#top-header .content article.about .slick-dots li button {
                text-indent: -999px;
                overflow: hidden;
                background: #767d8c;
                height: 10px;
                width: 10px;
                border: 0px;
                margin-left: 10px;
                border-radius: 50%;
                padding: 0px;
            }

@media screen and (min-width: 75em) {
    header#top-header .content article.about {
        width: 40%;
        float: right;
        text-align: right;
        margin-top: 100px;
        /* DEMO-SPECIFIC STYLES */
        /* The typing effect */
    }

        header#top-header .content article.about .slick-dots {
            margin-top: 60px;
            padding-right: 0px;
        }

        header#top-header .content article.about .bg-img {
            display: block;
            position: absolute;
            top: -200px;
            right: -50px;
        }

        header#top-header .content article.about .slick-list {
            overflow: visible !important;
        }

        header#top-header .content article.about header, header#top-header .content article.about a {
            position: relative;
        }

        header#top-header .content article.about h1 {
            /* Ensures the content is not revealed until the animation */
            white-space: nowrap;
            /* Keeps the content on a single line */
            width: auto;
            max-width: 327px;
            position: relative;
            float: right;
        }

    @keyframes typing {
        from {
            width: 0;
        }

        to {
            width: 100%;
        }
    }
}

header#top-header .content .site-list {
    width: 100%;
    float: right;
    margin-top: 60px;
    z-index: 2;
    padding: 0 5px;
}

@media screen and (min-width: 75em) {
    header#top-header .content .site-list {
        position: relative;
        width: calc(60% - 10px);
        margin-top: 0;
    }
}

header#top-header .content .site-list article {
    border-radius: 30px;
    height: 60px;
    padding: 15px;
    background: #fff;
    box-shadow: -3.256px 9.455px 15px 0px rgba(35, 39, 48, 0.05);
    margin-bottom: 15px;
}

    header#top-header .content .site-list article * {
        transition: all 0.5s;
    }

    header#top-header .content .site-list article:hover h1 {
        color: #1698d9;
    }

    header#top-header .content .site-list article:hover i {
        border-color: #fff;
        color: #fff;
        background-color: #1698d9;
    }

@media screen and (min-width: 75em) {
    header#top-header .content .site-list article {
        margin-bottom: 30px;
        padding: 30px;
        height: 80px;
        width: 100%;
        float: left;
    }

        header#top-header .content .site-list article:nth-child(1) {
            max-width: calc(40% - 60px);
        }

        header#top-header .content .site-list article:nth-child(2) {
            max-width: 60%;
        }

        header#top-header .content .site-list article:nth-child(3) {
            max-width: calc(40% - 60px);
        }

        header#top-header .content .site-list article:nth-child(4) {
            max-width: calc(60% - 90px);
            margin-left: 30px;
        }
}

header#top-header .content .site-list article a {
    cursor: pointer;
    float: right;
    display: block;
    width: 100%;
}

    header#top-header .content .site-list article a header {
        float: right;
        padding-right: 15px;
        width: calc(100% - 80px);
        padding-top: 7px;
    }

@media screen and (min-width: 75em) {
    header#top-header .content .site-list article a header {
        width: calc(100% - 120px);
        padding-right: 30px;
        padding-top: 16px;
    }
}

header#top-header .content .site-list article a header h1 {
    color: #232730;
    font-size: 20px;
    margin: 0 0 5px;
    text-align: right;
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
}

@media screen and (min-width: 75em) {
    header#top-header .content .site-list article a header h1 {
        text-align: right;
        direction: rtl;
        font-size: 24px;
        margin: 13px 0 6px;
    }
}

header#top-header .content .site-list article a header p {
    color: #767d8c;
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 14px;
    text-align: right;
    line-height: 1.7;
    margin: 0;
}

@media screen and (min-width: 75em) {
    header#top-header .content .site-list article a header p {
        font-size: 16px;
        direction: rtl;
        white-space: nowrap;
        text-align: right;
        max-width: 550px;
        float: right;
    }
}

header#top-header .content .site-list article a i {
    float: right;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 69px;
    font-size: 24px;
    border-radius: 50%;
    border: 2px solid #1698d9;
    color: #1698d9;
}

@media screen and (min-width: 75em) {
    header#top-header .content .site-list article a i {
        width: 80px;
        font-size: 36px;
        border-width: 3px;
        height: 80px;
        text-align: center;
        line-height: 95px;
    }
}

/* = events layout = */
#events {
    position: relative;
}

    #events article.about {
        /*padding-top: 60px;*/
        overflow: hidden;
        float: right;
        width: 100%;
    }

@media screen and (min-width: 75em) {
    #events article.about {
        float: right;
        text-align: right;
        width: calc(60% - 90px);
        padding-right: 90px;
        padding-top: 0;
    }

        #events article.about header {
            width: 100%;
            float: right;
        }
}

#events article.about h1 {
    color: #1698d9;
    font-size: 20px;
    margin: 0 0 15px;
}

@media screen and (min-width: 75em) {
    #events article.about h1 {
        text-align: right;
        font-size: 28px;
        margin: 0 0 30px;
    }
}

#events article.about ul {
    padding: 0;
    margin: 15px 0 0;
    float: right;
    width: 100%;
}

    #events article.about ul li {
        display: inline-block;
        float: right;
        text-align: center;
        margin-bottom: 30px;
        width: 100%;
    }

        #events article.about ul li div {
            padding: 28px 30px 20px;
        }

@media screen and (min-width: 75em) {
    #events article.about ul li {
        text-align: right;
        width: calc(50% - 30px);
        padding: 0 15px;
    }

        #events article.about ul li div {
            padding: 28px 30px 20px;
            overflow: hidden;
            border-radius: 0 0 40px 0;
            padding-right: 30px;
            position: relative;
            top: 0;
            transition: all 0.2s;
            border-bottom: 5px #1698d9 solid;
        }

            #events article.about ul li div:hover {
                top: -10px;
            }
}

#events article.about ul li p {
    text-align: center;
}

@media screen and (min-width: 75em) {
    #events article.about ul li p {
        text-align: right;
    }
}

#events article.about ul li span {
    font-family: 'Gotham';
    font-size: 28px;
    color: #1698d9;
}

@media screen and (min-width: 75em) {
    #events article.about ul li span {
        font-size: 30px;
    }
}

#events article.about .btn {
    margin-top: 15px;
}

@media screen and (min-width: 75em) {
    #events article.about .btn {
        margin-top: 30px;
    }
}

#events .events-list {
    width: 100%;
    float: right;
    margin-top: 55px;
}

@media screen and (min-width: 75em) {
    #events .events-list {
        width: 40%;
        margin-top: 0px;
        /*margin-top: -108px;*/
    }
}

@media screen and (min-width: 75em) {
    #events .events-list h2 {
        margin-bottom: 60px;
    }
}

#events .events-list article {
    border-radius: 30px;
    height: 90px;
    background: #fff;
    box-shadow: -3.256px 9.455px 15px 0px rgba(35, 39, 48, 0.05);
    margin-bottom: 15px;
}

    #events .events-list article:hover * {
        transition: all 0.5s;
    }

    #events .events-list article:hover time {
        background: #1698d9;
        color: #fff;
    }

        #events .events-list article:hover time span {
            color: #fff;
        }

    #events .events-list article:hover h1 a {
        color: #1698d9;
    }

    #events .events-list article:hover .more {
        background: #1698d9;
    }

        #events .events-list article:hover .more i {
            color: #fff;
        }

@media screen and (min-width: 75em) {
    #events .events-list article {
        margin-bottom: 30px;
        padding: 0;
        height: 101px;
        width: 100%;
        float: left;
    }
}

#events .events-list article .more {
    display: block;
    float: left;
    padding: 12px;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    margin: 23px 0 0px 18px;
}

@media screen and (min-width: 75em) {
    #events .events-list article .more {
        margin: 18px 0 18px 18px;
        display: block;
        float: left;
        padding: 20px 24px 20px 14px;
        border-radius: 50%;
        width: 22px;
        height: 22px;
    }
}

#events .events-list article header {
    float: right;
    padding-right: 15px;
    width: calc(100% - 170px);
    padding-top: 7px;
}

@media screen and (min-width: 75em) {
    #events .events-list article header {
        width: calc(100% - 230px);
        padding-right: 30px;
        padding-top: 16px;
    }
}

#events .events-list article header h1 {
    margin: 15px 0 0px;
    text-align: right;
    width: 100%;
    text-overflow: ellipsis;
}

    #events .events-list article header h1 a {
        color: #232730;
        font-size: 14px;
        width: 100%;
        display: block;
        text-overflow: ellipsis;
        height: 42px;
        text-align: right;
    }

@media screen and (min-width: 75em) {
    #events .events-list article header h1 a {
        font-size: 18px;
        color: #767d8c;
    }
}

@media screen and (min-width: 75em) {
    #events .events-list article header h1 {
        text-align: right;
        direction: rtl;
        font-size: 24px;
        margin: 0;
    }
}

#events .events-list article time {
    float: right;
    width: 30px;
    height: 50px;
    text-align: center !important;
    font-size: 16px;
    border-radius: 30px;
    background: #fff;
    box-shadow: -3.256px 9.455px 15px 0px rgba(35, 39, 48, 0.05);
    padding: 20px 0;
    color: #1698d9;
    width: 116px;
}

    #events .events-list article time span {
        display: block;
        color: #1698d9;
        text-align: center;
        font-size: 24px;
        margin-top: 5px;
    }

@media screen and (min-width: 75em) {
    #events .events-list article time {
        font-size: 18px;
        height: 46px;
        text-align: center !important;
        line-height: auto;
        border-radius: 30px;
        padding: 27px 0;
        width: 116px;
    }

        #events .events-list article time span {
            margin-top: 2px;
        }
}

/* = HEADER layout = */
#weekly_newsletter {
    overflow: hidden;
    width: 100%;
}

    #weekly_newsletter h2 {
        padding-top: 120px;
    }

@media screen and (min-width: 75em) {
    #weekly_newsletter h2 {
        margin: 0 0 60px;
    }
}

#weekly_newsletter article {
    display: block;
    float: right;
    width: 100%;
    margin-bottom: 30px;
}

@media screen and (min-width: 75em) {
    #weekly_newsletter article {
        padding: 0 15px;
        width: calc(33.333% - 30px);
    }
}

#weekly_newsletter article .bg {
    background: #fff;
    box-shadow: -3.256px 9.455px 15px 0px rgba(35, 39, 48, 0.05);
    border-radius: 0 0 30px 0;
    overflow: hidden;
    float: left;
    width: 100%;
}

    #weekly_newsletter article .bg * {
        transition: all 0.5s;
    }

    #weekly_newsletter article .bg:hover .img-cover {
        background: #1698d9;
    }

        #weekly_newsletter article .bg:hover .img-cover i {
            opacity: 1;
        }

    #weekly_newsletter article .bg:hover h1 a {
        color: #1698d9;
    }

    #weekly_newsletter article .bg header {
        padding: 30px 15px;
        overflow: hidden;
    }

@media screen and (min-width: 75em) {
    #weekly_newsletter article .bg header {
        padding: 30px;
    }
}

#weekly_newsletter article .bg header h1 {
    margin: 0;
    width: 100%;
    float: right;
    text-align: right;
    padding-bottom: 10px;
    height: 75px;
    overflow: hidden;
}

    #weekly_newsletter article .bg header h1 a {
        color: #232730;
        font-size: 20px;
    }

@media screen and (min-width: 75em) {
    #weekly_newsletter article .bg header h1 a {
        font-size: 20px;
    }
}

#weekly_newsletter article .bg header time {
    float: left;
    color: #767d8c;
    margin-top: 5px;
    font-size: 16px;
}

@media screen and (min-width: 75em) {
    #weekly_newsletter article .bg header time {
        font-size: 16px;
    }
}

#weekly_newsletter article .bg header p {
    float: right;
    color: #767d8c;
    margin-bottom: 0;
    margin-top: 5px;
    border-bottom: 2px solid #f7f8fc;
    margin-bottom: 10px;
    text-align: right;
    padding-bottom: 15px;
    font-size: 16px;
}

@media screen and (min-width: 75em) {
    #weekly_newsletter article .bg header p {
        font-size: 16px;
    }
}

#weekly_newsletter article .bg header .date {
    float: right;
    color: #767d8c;
    margin-bottom: 0;
    margin-top: 5px;
    font-size: 16px;
    direction: rtl;
}

@media screen and (min-width: 75em) {
    #weekly_newsletter article .bg header .date {
        font-size: 16px;
    }
}

/* = books layout = */
#books {
    width: 100%;
    background: url(../imgs/books_bg.png) no-repeat top center;
    padding-top: 150px;
    margin-top: -150px;
    padding-bottom: 90px;
}

@media screen and (min-width: 75em) {
    #books {
        background-size: 100%;
        margin-top: -250px;
        padding-top: 250px;
        padding-bottom: 0;
    }
}

#books h2 {
    margin: 0 0 30px;
    padding-top: 90px;
}

@media screen and (min-width: 75em) {
    #books h2 {
        padding: 90px 15px 0;
        margin: 0 0 60px;
    }
}

#books .arrow {
    float: left;
}

    #books .arrow a {
        color: #232730;
        font-size: 16px;
    }

        #books .arrow a:first-child {
            margin-right: 30px;
        }

        #books .arrow a:hover {
            color: #1698d9;
        }

#books .slick-center img {
    opacity: 1 !important;
}

#books .img-cover {
    display: block;
    background: #767d8c;
    float: left;
    margin: 0 15px;
    overflow: hidden;
    max-width: calc(100% - 30px);
    width: 100%;
    border-radius: 10px;
}

    #books .img-cover img {
        box-shadow: -3.256px 9.455px 15px 0px rgba(35, 39, 48, 0.05);
        width: 100%;
        opacity: 0.7;
    }

@media screen and (min-width: 75em) {
    #books .img-cover img {
    }
}

#books .slick-list {
    overflow: visible !important;
}

/* = contact layout = */
#contact {
    margin-top: 60px;
    overflow: hidden;
}

footer {
    overflow: hidden;
}

@media screen and (max-width: 75em) {
    header#top-header .content article.about header {
        overflow: hidden;
    }
}

@media screen and (min-width: 75em) {
    #contact {
        margin-top: 120px;
    }
}

#contact #gmap_canvas {
    height: 480px;
    width: 100%;
    float: left;
    border-radius: 10px;
    display: block;
    margin-top: 80px;
    box-shadow: -3.256px 9.455px 15px 0px rgba(35, 39, 48, 0.05);
}

@media screen and (min-width: 75em) {
    #contact #gmap_canvas {
        width: 50%;
    }
}

@media screen and (min-width: 75em) {
    #contact .contact-list {
        float: right;
        width: 50%;
        overflow: hidden;
    }
}

#contact h1 {
    color: #1698d9;
    font-size: 20px;
    margin: 0 0 30px;
    width: 100%;
    text-align: right;
}

@media screen and (min-width: 75em) {
    #contact h1 {
        text-align: right;
        font-size: 28px;
        margin: 0 0 60px;
    }
}

#contact p {
    color: #767d8c;
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 14px;
    text-align: right;
    line-height: 1.7;
    margin: 0;
}

@media screen and (min-width: 75em) {
    #contact p {
        font-size: 16px;
        direction: ltr;
        text-align: right;
        margin: 0 0 30px;
        max-width: 550px;
        float: right;
    }
}

#contact ul.info-list {
    float: right;
    padding: 0;
    direction: rtl;
    list-style: none;
}

@media screen and (min-width: 75em) {
    #contact ul.info-list {
        width: 100%;
    }
}

#contact ul.info-list li {
    display: block;
    margin-bottom: 15px;
    float: right;
    width: 100%;
}

@media screen and (min-width: 75em) {
    #contact ul.info-list li {
        margin-bottom: 30px;
    }
}

#contact ul.info-list li i {
    background: #fff;
    height: 40px;
    text-align: center;
    width: 40px;
    color: #1698d9;
    box-shadow: -3.256px 9.455px 15px 0px rgba(35, 39, 48, 0.05);
    display: block;
    float: right;
    line-height: 40px;
    border-radius: 4px;
}

@media screen and (min-width: 75em) {
    #contact ul.info-list li i {
        width: 50px;
        height: 50px;
        line-height: 55px;
    }
}

#contact ul.info-list li span {
    display: block;
    float: right;
    padding-right: 30px;
    padding-top: 13px;
    color: #767d8c;
    width: calc(100% - 70px);
    line-height: 1.5;
    font-size: 16px;
    text-align: right;
}

@media screen and (min-width: 75em) {
    #contact ul.info-list li span {
        width: 354px;
        font-size: 18px;
    }
}

#contact .social {
    float: right;
    width: 100%;
    padding: 0;
}

    #contact .social li {
        display: inline-block;
    }

@media screen and (min-width: 75em) {
    #contact .social li {
        float: right;
    }
}

#contact .social li a {
    float: right;
    background: #fff;
    box-shadow: -3.256px 9.455px 15px 0px rgba(35, 39, 48, 0.05);
    height: 50px;
    line-height: 55px;
    font-size: 20px;
    text-align: center;
    width: 60px;
    display: block;
    margin: 0 15px;
    border-radius: 4px;
}

@media screen and (min-width: 75em) {
    #contact .social li a {
        width: 130px;
    }
}

#contact .social li:hover * {
    transition: all 0.2s;
}

#contact .social li.fb a {
    color: #3b5998;
}

    #contact .social li.fb a:hover {
        background: #3b5998;
        color: #fff;
    }

#contact .social li.tw a {
    color: #55acee;
}

    #contact .social li.tw a:hover {
        background: #55acee;
        color: #fff;
    }

#contact .social li.linkedin a {
    color: rgba(0, 0, 0, 0.08);
}

    #contact .social li.linkedin a img {
        width: 31px;
        margin-top: 7px
    }

    #contact .social li.linkedin a:hover {
        background: rgba(0, 0, 0, 0.08);
        color: #fff;
    }




/************Turki*/

.block-content p {
    color: #767d8c;
    font-size: 16px;
    line-height: 190%;
    direction: rtl;
    margin: 0;
    text-align: justify;
}

.block-content li {
    color: #767d8c;
    font-size: 16px;
    line-height: 190%;
    direction: rtl;
    margin: 0;
    text-align: justify;
}

.block-content h2 {
    color: #1698d9 !important;
    margin-top: 50px !important;
}


    .block-content h2 strong {
        color: #1698d9 !important;
        margin-top: 20px;
    }

.block-content h3, .block-content h3 strong {
    color: #767d8c !important;
}




.nav-pills {
    margin: 0;
    padding: 0;
}

    .nav-pills li {
        margin: 0;
        padding: 0;
        list-style: none;
        margin-bottom: 10px;
    }

        .nav-pills li a {
            padding: 5px 10px;
            background-color: #fff;
            border-right: 3px solid #f1eeee;
            display: block;
            margin-bottom: 5px;
            border-radius: 10px;
        }

            .nav-pills li a:hover, .nav-pills li.active a {
                background: #1698d9;
                color: #fff;
                border-right: 3px solid #1698d9;
            }



li p.sub-item {
    color: #1698d9;
    margin-bottom: 10px;
    font-size: 15px;
}


@media screen and (max-width: 75em) {

    header#top-header nav .menu-list {
        margin: 29px;
        float: left;
    }

    header#top-header nav .logo-bg {
        display: inline-block;
        float: right;
        margin: 0 10px;
    }

    header#top-header nav .nav-bg.active {
        position: absolute;
        display: block;
        top: 81px;
        border-radius: 0;
    }

    header#top-header nav ul li {
        transition: all 0.2s;
        width: 100%;
        display: block;
        text-align: right;
        margin: 20px 0;
        padding: 5px 0;
    }

        header#top-header nav ul li a i {
            display: initial;
            float: right;
        }

    header#top-header nav .logo {
        display: inline-block;
        background: url(../imgs/logo.png) center center;
        width: 229px;
        height: 61px;
        background-size: 100%;
        margin: 7px 0;
        background-size: contain;
        background-repeat: no-repeat;
    }

    .small-12 {
        width: calc(100% - 20px) !important;
    }

    .block-content * {
        text-align: right !important;
    }


    .english .block-content * {
        text-align: left !important;
    }
}


.iia-brand {
    background: url(/resources/imgs/iia-outline-blue-thin-20.png) left bottom;
    display: inline-block;
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 100vh;
    left: 0;
    background-repeat: no-repeat;
    background-position-x: 10%;
    opacity: 0.05;
    z-index: -1;
    background: url(/resources/imgs/iia-outline-gray.png) left top;
    background-repeat: no-repeat;
    background-size: 55%;
    background-position-x: 5%;
}


/*#iia-brand-footer {
    background: url(/resources/imgs/iia-outline.png) left bottom;
    display: inline-block;
    width: 100vw;
    height: 100vh;
    position: absolute;
    bottom: 0;
    right: 0;
    background-repeat: no-repeat;
    background-position-x: 10%;
    opacity: 0.2;
    z-index: 1;
}*/


body {
    background: url(/resources/imgs/iia-outline.png) left bottom;
    background-repeat: no-repeat;
    background-size: 62%;
    background-position-x: 144%;
}

.english .vision-2030 {
    float: right;
    width: 109px;
    display: inline-block;
    padding: 22px;
    padding-left: 0
}

.vision-2030 {
    float: left;
    width: 109px;
    display: inline-block;
    padding: 22px;
    padding-right: 0
}



    .vision-2030 img {
        width: 100%;
    }



@media screen and (min-width: 75em) {
    #home-page #top-header {
        height: 100vh;
    }

    #top-header .top-header-row {
        display: table;
        height: calc(100% - 130px);
    }

    #top-header .top-header-row-content {
        display: table-cell;
        vertical-align: middle;
        padding: 0 !important;
    }
}

.english .right-align {
    float: left;
}


/* All Classes*/
.all-classes {
    margin-top: 30px;
}

    .all-classes article {
        display: block;
        float: right;
        width: 100%;
        margin-bottom: 30px;
    }

@media screen and (min-width: 75em) {
    .all-classes article {
        padding: 0 15px;
        width: calc(100% - 30px);
    }
}

.all-classes article .bg {
    background: #fff;
    box-shadow: 1px 2px 50px 5px rgba(35, 39, 48, 0.05); /* -3.256px 9.455px 15px 0px rgba(35, 39, 48, 0.05);*/
    border-radius: 0 0 30px 0;
    overflow: hidden;
    float: left;
    width: 100%;
}

    .all-classes article .bg * {
        transition: all 0.5s;
    }

    .all-classes article .bg:hover .img-cover {
        background: #1698d9;
    }

        .all-classes article .bg:hover .img-cover i {
            opacity: 1;
        }

    .all-classes article .bg:hover h1 a {
        color: #1698d9;
    }

    .all-classes article .bg header {
        padding: 30px 15px;
        overflow: hidden;
    }

@media screen and (min-width: 75em) {
    .all-classes article .bg header {
        padding: 30px;
    }
}

.all-classes article .bg header h1 {
    margin: 0;
    width: 100%;
    float: right;
    text-align: right;
    padding-bottom: 10px;
    height: 75px;
    overflow: hidden;
    color: #1698d9;
}

    .all-classes article .bg header h1 a {
        color: #232730;
        font-size: 20px;
    }

@media screen and (min-width: 75em) {
    .all-classes article .bg header h1 a {
        font-size: 20px;
    }
}

.all-classes article .bg header time {
    float: left;
    color: #767d8c;
    margin-top: 5px;
    font-size: 16px;
}

@media screen and (min-width: 75em) {
    .all-classes article .bg header time {
        font-size: 16px;
    }
}

.all-classes article .bg header p {
    float: right;
    color: #767d8c;
    margin-bottom: 0;
    margin-top: 5px;
    border-bottom: 2px solid #f7f8fc;
    margin-bottom: 10px;
    text-align: right;
    padding-bottom: 15px;
    font-size: 16px;
}

@media screen and (min-width: 75em) {
    .all-classes article .bg header p {
        font-size: 16px;
    }
}

.all-classes article .bg header .date {
    float: right;
    color: #767d8c;
    margin-bottom: 0;
    margin-top: 5px;
    font-size: 16px;
    direction: rtl;
}

@media screen and (min-width: 75em) {
    .all-classes article .bg header .date {
        font-size: 16px;
    }
}