@charset "UTF-8";
/*! @author Bilal Cinarli */
/** -------------------------------------------
    Project Styles
    ------------------------------------------- **/
/**
 * First Import Settings
 * These settings are defines simple color and sizes for Melange defaults
 * Also some settings such as `$support-for-ie8` etc. are used in Caffeine mixins
 * You are free to extend the settings for system wide use.
 */
/* @author Bilal Cinarli */
/**
 * System wide settings
 *
 * All the imported values are set to "null" if they have a default value.
 * So if you want to use them as default, do not change to null value.
 */
/** -------------------------------------------
    Settings for default overwrites and
    GUI related variables
    ------------------------------------------- **/
/* @author Bilal Cinarli */
/** -------------------------------------------
    System supports
    ------------------------------------------- **/
/* @author Bilal Cinarli */
/** -------------------------------------------
    Default class/definition names
    ------------------------------------------- **/
/**
 * Name space prefix
 * Adds a defined namespace prefix to generated class names
 */
/**
 * Class names for grid
 * @default $row-name: 'row'
 * @default $column-name: 'column'
 * @default $column-name-plural: 'columns'
 */
/**
 * Button names for action
 *
 * @default $action-button: '-action'; // only used for similar class selector
 * @default $primary-button: 'primary-action';
 * @default $secondary-button: 'secondary-action';
 * @default $tertiary-button: 'tertiary-action';
 * @default $cancel-button: 'cancel-action';
 */
/**
 * Folders
 * Not actually a namespace but folder names also have different preferences
 * @default $images: '../images/'; relative to styles folder
 * @default $retina-suffix: '@2x'
 */
/* @author Bilal Cinarli */
/** -------------------------------------------
    Animation Related Variables
    ------------------------------------------- **/
/**
 * Duration
 * 
 * Duration time for transition animations
 * @default .4s
 */
/**
 * Easing
 *
 * Easing style
 * @default ease
 */
/* @author Bilal Cinarli */
/** -------------------------------------------
    Size Definitions
    ------------------------------------------- **/
/**
 * Spacing in element
 *
 * Sets the padding sizes for an element
 * @default $base-spacing 1em
 * @default $base-input-spacing 5px
 */
/**
 * Grid gutter and columns
 *
 * Defines the grid gutter size and column count in a row
 * Grid columns floated by default. But it is optional whether float or not
 * for percentage widths.
 * @default $base-gutter: 20px
 * @default $base-grid-columns: 18
 * @default $base-float-widths: true
 */
/**
 * Border Widths
 *
 * Applied border with for input fields and table borders
 * @default $base-border-width: 1px;
 */
/**
 * Content Sizes
 */
/* @author Bilal Cinarli */
/** -------------------------------------------
    Fonts
    ------------------------------------------- **/
/**
 * Global font definitions
 * @default $base-font-size: 16px
 * @default $base-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
 * @default $base-line-height: 1.5
 * @default $base-font-icon: null
 */
/* @author Bilal Cinarli */
/** -------------------------------------------
    Colors
    ------------------------------------------- **/
/**
 * Named Colors
 *
 * Some named colors for inheriting colors over different variables
 * @default $color-primary    : #009bdc;
 * @default $color-secondary  : #67af00;
 * @default $color-tertiary   : #ffa900;
 * @default $color-cancel     : #e87352;
 * @default $color-error      : $color-cancel;
 * @default $color-text       : #222;
 * @default $color-light-gray : #e5e5e5;
 * @default $color-gray       : #c6c6c6;
 * @default $color-dark-gray  : #a6a6a6;
 * @default $color-white      : #fff;
 * @default $color-black      : #000;
 */
/**
 * Simple colors for general styling
 * @default $base-color: #222
 */
/**
 * Border Colors
 *
 * Colors applied to border in focus, disabled, readonly and stationary state
 * @default $base-border-color: #c6c6c6;
 * @default $base-border-highlight: #a6a6a6;
 * @default $base-border-disabled: #e9e9e9;
 * @default $base-border-readonly: #c6c6c6;
 */
/**
 * Field Background Colors
 *
 * Color applied to field background in focus, disabled, readonly and stationary state
 * @default $base-field-background: #fff;
 * @default $base-field-highlight: #fff;
 * @default $base-field-disabled: #c6c6c6;
 * @default $base-field-readonly: #e5e5e5;
 */
/**
 * Button colors
 */
/**
 * Default Button
 *
 * Unstyled, normal button
 * @default $base-button-color: #e5e5e5;
 * @default $base-button-text-color: #222;
 */
/**
 * Primary Action Button
 *
 * Maybe used for call-to-action button or/and save/submit buttons in forms
 * @default $base-primary-color: #009bdc;
 * @default $base-primary-text-color: #fff;
 */
/**
 * Secondary Action Button
 *
 * Useful for indication secondary action in a form near the primary action button
 * @default $base-secondary-color: #67af00;
 * @default $base-secondary-text-color: #fff;
 */
/**
 * Tertiary Action Button
 *
 * Useful for actions whether they are not fit for primary or secondary
 * @default $base-tertiary-color: #ffa900;
 * @default $base-tertiary-text-color: #fff;
 */
/**
 * Cancel Action Button
 *
 * Simply used for cancel button for a form or call-to-action, confirmation etc.
 * @default $base-cancel-color: #e87352;
 * @default $base-cancel-text-color: #fff;
 */
/**
 * Second Import Caffeine
 * Caffeine is a Sass based mixin/function library (see: https://github.com/bcinarli/caffeine)
 * Mostly Melange is not depended on Caffeine.
 */
/* @author Bilal Cinarli */
/** -------------------------------------------
    Caffeine 
    ------------------------------------------- **/
/* @author Bilal Cinarli */
/** -------------------------------------------
    System Functions for internal usage
    ------------------------------------------- **/
/* @author Bilal Cinarli */
/** -------------------------------------------
    Generic Functions
    ------------------------------------------- **/
/**
  * Remove units
  */
/* @author Bilal Cinarli */
/** -------------------------------------------
    Text Related Functions
    ------------------------------------------- **/
/**
  * Rem to PX
  */
/**
 * REM converter
 * in style's config, we hope to have a base-font-size variable,
 * if not, we define it according to standart html font-size
 */
/* @author Bilal Cinarli */
/** -------------------------------------------
    String Manipulation Functions
    ------------------------------------------- **/
/**
  * String Replacement
  * Mimics the PHP's str_replace function
  * @param {string} $search   The value being searched for, otherwise known as the needle
  * @param {string} $replace  The replacement value that replaces found search values
  * @param {string} $subject  The string being searched and replaced on, otherwise known as the haystack.
  */
/**
  * Case insensitive String Replacement
  * Mimics the PHP's str_ireplace function
  * @param {string} $search   The value being searched for, otherwise known as the needle
  * @param {string} $replace  The replacement value that replaces found search values
  * @param {string} $subject  The string being searched and replaced on, otherwise known as the haystack.
  */
/* @author Bilal Cinarli */
/** -------------------------------------------
    Mixins for Internal Melange Usage
    ------------------------------------------- **/
/* @author Bilal Cinarli */
/** -------------------------------------------
    Generic Mixins
    ------------------------------------------- **/
/**
 * Adds prefixed version of a property according to listed vendors
 */
/**
 * Adds prefixed version of values in a property
 */
/* @author Bilal Cinarli */
/** -------------------------------------------
    Text Related Mixins
    ------------------------------------------- **/
/**
 * Fontface
 *
 * http://caniuse.com/#search=font-face
 * https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face
 * For modern approach, woff and ttf format is supported all major browsers. If you need to support
 * Internet Explorer 8, with setting "$support-for-ie8" variable to "true", the eot file format
 * also added to mixin output. You also need to provide related file formats in your fonts folder.
 *
 * @font-face {
              [ font-family: <family-name>; ]?
           || [ src: [ <uri> [format(<string>#)]? | <font-face-name> ]#; ]?
           || [ unicode-range: <urange>#; ]?
           || [ font-variant: <font-variant>; ]?
           || [ font-feature-settings: normal|<feature-tag-value>#; ]?
           || [ font-stretch: <font-stretch>; ]?
           || [ font-weight: <weight>; ]?
           || [ font-style: <style>; ]?
   }
 */
/**
 * fontface
 * This mixin is a callback support for very early versions of Caffeine
 */
/**
  * Font Icon
  *
  * Outputs an icon font definition with supporting class attribute selectors.
  * For preventing font misuse for the element, the class selector applied to :before pseuode element
  * instead of the element itself.
  */
/**
 * Font-Size callback
 * 
 * For modern usage, converts and output font-size with rem units.
 */
/**
 * Disable Select
 * It is useful for mobil applications
 * Prevents text selection when swipe or double click
 * http://caniuse.com/#search=user-select
 * https://developer.mozilla.org/en-US/docs/Web/CSS/user-select
 * Formal syntax: none | text | all | element
 * Current spec, all vendors need prefixing
 */
/**
 * Selection
 *
 * The ::selection CSS pseudo-element applies rules to the portion of a document 
 * that has been highlighted (e.g., selected with the mouse or another pointing device) by the user.
 * http://caniuse.com/#search=selection
 * https://developer.mozilla.org/en-US/docs/Web/CSS/::selection
 * Formal syntax: content
 * Only a small part of text related properties supports. You can change the following properties in selectionsİ
 * color, background-color, cursor, outline, text-decoration, text-emphasis-color and text-shadow.
 *
 * Notes:
 * text-shadow in ::selection is supported by Chrome, Safari and Firefox 17+.
 *
 * The ::selection CSS pseudo-element was drafted for CSS Selectors Level 3 
 * but removed before it reached the Recommendation status. It was readded as part of the Pseudo-Elements Level 4 draft.
 */
/* @author Bilal Cinarli */
/** -------------------------------------------
    Size Related Mixins
    ------------------------------------------- **/
/**
 * Square or desired width-height for an element
 */
/* @author Bilal Cinarli */
/** -------------------------------------------
    CSS3 Related Mixins
    ------------------------------------------- **/
/* @author Bilal Cinarli */
/** -------------------------------------------
    Background Gradient Mixins
    ------------------------------------------- **/
/**
 * Simple Linear gradient
 * Gets the linear gradient content as a parameter and outputs the prefixed version.
 * For old browsers do not forget to add fallback color/image before mixin
 * Uses new linear gradient version. Not supporting Safari 5 or older and IE9 and older versions
 *
 * @param string $content
 */
/**
 * Simple Radial gradient
 * Gets the radial gradient content as a parameter and outputs the prefixed version.
 * For old browsers do not forget to add fallback color/image before mixin
 * Uses new linear gradient version. Not supporting Safari 5 or older and IE9 and older versions
 *
 * @param $content
 */
/* @author Bilal Cinarli */
/** -------------------------------------------
    Text Gradient
    ------------------------------------------- **/
/**
 * Gradient Text Color
 * Add a gradient color to the text
 */
/* @author Bilal Cinarli */
/** -------------------------------------------
    Box Shadow
    ------------------------------------------- **/
/**
 * Simple Box shadow
 *
 * @param $content: box-shadow content
 * http://caniuse.com/#search=box-shadow 
 * current spec, only Android browser 2.3 need -webkit prefix
 * You can use standart CSS box shadow definition
 */
/* @author Bilal Cinarli */
/** -------------------------------------------
    Transition Related Mixins
    ------------------------------------------- **/
/**
 * CSS Transition
 *
 * Outputs CSS3 transition code with defined prefixes
 * http://caniuse.com/#search=transition
 * https://developer.mozilla.org/en-US/docs/Web/CSS/transition
 * Formal syntax: [ none | <single-transition-property> ] || <time> || <timing-function> || <time>
 * current spec, older Android browsers and Safari 5.1 need -webkit
 */
/**
 * CSS Transition Delay
 * Outputs CSS3 transition-delay code with defined pferixes
 * https://developer.mozilla.org/en-US/docs/Web/CSS/transition-delay
 * Formal syntax: <time>#
 */
/**
 * CSS Transition Duration
 * Outputs CSS3 transition-duration code with defined pferixes
 * https://developer.mozilla.org/en-US/docs/Web/CSS/transition-duration
 * Formal syntax: <time>#
 */
/**
 * CSS Transition Property
 * Outputs CSS3 transition-property code with defined pferixes
 * https://developer.mozilla.org/en-US/docs/Web/CSS/transition-property
 * Formal syntax: none | <single-transition-property>#  [ ‘,’ <single-transition-property># ]*
 */
/**
 * CSS Transition Timing
 * Outputs CSS3 transition-timing-function code with defined pferixes
 * https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function
 * Formal syntax: <timing-function>#
 */
/**
 * App Transition
 *
 * General transition definition for app
 */
/* @author Bilal Cinarli */
/** -------------------------------------------
    Transform Related Mixins
    ------------------------------------------- **/
/**
 * CSS Transform
 *
 * Outputs CSS3 tranform code with defined prefixes
 * http://caniuse.com/#search=transform
 * https://developer.mozilla.org/en-US/docs/Web/CSS/transform
 * Formal syntax: none | <transform-function>+
 * For transform functions see: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function
 * current spec, Safari, Android browser and IE9 need vendor prefix
 */
/**
 * CSS Transform Origin
 *
 * Outputs CSS3 tranform-origin code with defined prefixes
 * http://caniuse.com/#search=transform
 * https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin
 * Formal syntax: [ <percentage> | <length> | left | center | right | top | bottom] | [ [ <percentage> | <length> | left | center | right ] && [ <percentage> | <length> | top | center | bottom ] ] <length>?
 * current spec, Safari, Android browser and IE9 need vendor prefix
 */
/**
 * CSS Transform Style
 *
 * Outputs CSS3 tranform-style code with defined prefixes
 * http://caniuse.com/#search=transform
 * https://developer.mozilla.org/en-US/docs/Web/CSS/transform-style
 * Formal syntax: flat | preserve-3d | inherit
 * current spec, IE is not supported, webkit browsers need prefixing
 */
/* @author Bilal Cinarli */
/** -------------------------------------------
    Animation Related Mixins
    ------------------------------------------- **/
/**
 * CSS Animation
 *
 * Outputs CSS3 animation code with defined prefixes
 * http://caniuse.com/#search=css3%20animation
 * https://developer.mozilla.org/en-US/docs/Web/CSS/animation
 * Formal syntax: <single-animation-name> || <time> || <timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state>
 * current spec, webkit browsers need prefixing
 */
/**
 * CSS Animation Delay
 *
 * Outputs CSS3 animation-delay code with defined prefixes
 * http://caniuse.com/#search=css3%20animation
 * https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay
 * Formal syntax: <time>#
 * current spec, webkit browsers need prefixing
 */
/**
 * CSS Animation Direction
 *
 * Outputs CSS3 animation-direction code with defined prefixes
 * http://caniuse.com/#search=css3%20animation
 * https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction
 * Formal syntax: <single-animation-direction>#
 * current spec, webkit browsers need prefixing
 */
/**
 * CSS Animation Duration
 *
 * Outputs CSS3 animation-duration code with defined prefixes
 * http://caniuse.com/#search=css3%20animation
 * https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration
 * Formal syntax: <time>#
 * current spec, webkit browsers need prefixing
 */
/**
 * CSS Animation Fill Mode
 *
 * Outputs CSS3 animation-fill-mode code with defined prefixes
 * http://caniuse.com/#search=css3%20animation
 * https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode
 * Formal syntax: <single-animation-fill-mode>#
 * current spec, webkit browsers need prefixing
 */
/**
 * CSS Animation Iteration Count
 *
 * Outputs CSS3 animation-iteration-count code with defined prefixes
 * http://caniuse.com/#search=css3%20animation
 * https://developer.mozilla.org/en-US/docs/Web/CSS/animation-iteration-count
 * Formal syntax: <single-animation-iteration-count>#
 * current spec, webkit browsers need prefixing
 */
/**
 * CSS Animation Name
 *
 * Outputs CSS3 animation-name code with defined prefixes
 * http://caniuse.com/#search=css3%20animation
 * https://developer.mozilla.org/en-US/docs/Web/CSS/animation-name
 * Formal syntax: <single-animation-name>#
 * current spec, webkit browsers need prefixing
 */
/**
 * CSS Animation Play State
 *
 * Outputs CSS3 animation-play-state code with defined prefixes
 * http://caniuse.com/#search=css3%20animation
 * https://developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state
 * Formal syntax: <single-animation-play-state>#
 * current spec, webkit browsers need prefixing
 */
/**
 * CSS Animation Timing Function
 *
 * Outputs CSS3 animation-timing-function code with defined prefixes
 * http://caniuse.com/#search=css3%20animation
 * https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function
 * Formal syntax: <single-animation-timing-function>#
 * current spec, webkit browsers need prefixing
 */
/**
 * CSS Keyframes
 *
 * Outputs CSS3 keyframes code with defined prefixes
 * http://caniuse.com/#search=keyframes
 * https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes
 * @keyframes <identifier> {
 * 	[ [ from | to | <percentage> ] [, from | to | <percentage> ]* block ]*
 * }
 * current spec, webkit browsers need prefixing
 */
/* @author Bilal Cinarli */
/** -------------------------------------------
    Columns Related Mixins
    ------------------------------------------- **/
/**
 * CSS Columns
 *
 * Outputs CSS3 Columns with defined prefixes
 * http://caniuse.com/#search=column
 * https://developer.mozilla.org/en-US/docs/Web/CSS/columns
 * Formal syntax: <'column-width'> || <'column-count'>
 * current spec, except IE, all browsers need vendor prefix either -moz or -webkit
 */
/**
 * CSS Column Count
 *
 * Outputs CSS3 Column Count
 * http://caniuse.com/#search=column
 * https://developer.mozilla.org/en-US/docs/Web/CSS/column-count
 * Formal syntax: <number> | auto
 * current spec, except IE, all browsers need vendor prefix either -moz or -webkit
 */
/**
 * CSS Column Width
 *
 * Outputs CSS3 Column Width
 * http://caniuse.com/#search=column
 * https://developer.mozilla.org/en-US/docs/Web/CSS/column-width
 * Formal syntax: <length> | auto
 * current spec, except IE, all browsers need vendor prefix either -moz or -webkit
 */
/**
 * CSS Column Gap
 *
 * Outputs CSS3 Column Gap
 * http://caniuse.com/#search=column
 * https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap
 * Formal syntax: <length> | normal
 * current spec, except IE, all browsers need vendor prefix either -moz or -webkit
 */
/**
 * CSS Column Rule
 *
 * Outputs CSS3 Column Rule, shorthand definition for column rule styles
 * http://caniuse.com/#search=column
 * https://developer.mozilla.org/en-US/docs/Web/CSS/column-rule
 * Formal syntax: <'column-rule-width'> || <'column-rule-style'> || <'column-rule-color'>
 * current spec, except IE, all browsers need vendor prefix either -moz or -webkit
 */
/**
 * CSS Column Rule Color
 *
 * Outputs CSS3 Column Rule Color
 * http://caniuse.com/#search=column
 * https://developer.mozilla.org/en-US/docs/Web/CSS/column-rule-color
 * Formal syntax: <color>
 * current spec, except IE, all browsers need vendor prefix either -moz or -webkit
 */
/**
 * CSS Column Rule Style
 *
 * Outputs CSS3 Column Rule Style
 * http://caniuse.com/#search=column
 * https://developer.mozilla.org/en-US/docs/Web/CSS/column-rule-style
 * Formal syntax: <style>
 * current spec, except IE, all browsers need vendor prefix either -moz or -webkit
 */
/**
 * CSS Column Rule Width
 *
 * Outputs CSS3 Column Rule Width
 * http://caniuse.com/#search=column
 * https://developer.mozilla.org/en-US/docs/Web/CSS/column-rule-width
 * Formal syntax: <br-width>
 * Available values: thin || medium || thick || number px || number em
 * current spec, except IE, all browsers need vendor prefix either -moz or -webkit
 */
/**
 * CSS Column Span
 *
 * Outputs CSS3 Column Span
 * http://caniuse.com/#search=column
 * https://developer.mozilla.org/en-US/docs/Web/CSS/column-span
 * Formal syntax: none | all
 * Currently, except firefox, all vendors supporting this feature. Webkit browsers need prefix
 */
/**
 * CSS Column Fill
 *
 * Outputs CSS3 Column Fill
 * https://developer.mozilla.org/en-US/docs/Web/CSS/column-fill
 * Formal syntax: auto | balance
 * Currently only firefox supports
 */
/* @author Bilal Cinarli */
/** -------------------------------------------
    Flex Mixins
    ------------------------------------------- **/
/**
 * CSS Flex
 *
 * Outputs Flex code with defined prefixes
 * http://caniuse.com/#search=flex
 * https://developer.mozilla.org/en-US/docs/Web/CSS/flex
 * Formal syntax: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
 * current spec, webkit browsers need prefixing
 */
/**
 * CSS Flex Basis
 *
 * Outputs Flex-Basis code with defined prefixes
 * http://caniuse.com/#search=flex
 * https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis
 * Formal syntax: content | <'width'>
 * Initial Value: auto
 * current spec, webkit browsers need prefixing, however Safari is not supporting this feature
 *
 * Notes
 * When a non-auto flex-basis is specified, Internet Explorer 10-11 (but not 12+) always 
 * uses a content-box box model to calculate the size of a flex item, even if 
 * box-sizing: border-box is applied to the element.
 *
 */
/**
 * CSS Flex Direction
 *
 * Outputs Flex-Direction code with defined prefixes
 * http://caniuse.com/#search=flex
 * https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction
 * Formal syntax: content | [row | row-reverse | column | column-reverse]
 * current spec, webkit browsers need prefixing, however Safari is not supporting this feature
 */
/**
 * CSS Flex Grow
 *
 * Outputs Flex-Grow code with defined prefixes
 * http://caniuse.com/#search=flex
 * https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow
 * Formal syntax: <number>
 * Initial Value: 0
 * Negative values are invalid.
 * current spec, webkit browsers need prefixing, Internet explorer and Safari is 
 * not supporting this feature
 */
/**
 * CSS Flex Shrink
 *
 * Outputs Flex-Shrink code with defined prefixes
 * http://caniuse.com/#search=flex
 * https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink
 * Formal syntax: <number>
 * Initial Value: 1
 * Negative values are invalid.
 * current spec, webkit browsers need prefixing, Internet explorer and Safari is 
 * not supporting this feature
 *
 * Notes:
 * Internet Explorer 10 uses 0 instead of 1 as the initial value for the flex-shrink property. 
 * A workaround is to always set an explicit value for flex-shrink.
 */
/**
 * CSS Flex Wrap
 *
 * Outputs Flex-Wrap code with defined prefixes
 * http://caniuse.com/#search=flex
 * https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap
 * Formal syntax: content | [nowrap | wrap | wrap-reverse]
 * Initial Value: nowrap
 * current spec, webkit browsers need prefixing
 */
/**
 * CSS Flex Align Content
 *
 * Outputs align-content code with defined prefixes
 * http://caniuse.com/#search=flex
 * https://developer.mozilla.org/en-US/docs/Web/CSS/align-content
 * Formal syntax: content | [flex-start | flex-end | center | space-between | space-around | stretch]
 * Initial Value: strecth
 * current spec, webkit browsers need prefixing
 *
 * Notes:
 * Internet Explorer and Safari are not supporting this feature yet even with vendor prefix
 */
/**
 * CSS Flex Align Items
 *
 * Outputs align-items code with defined prefixes
 * http://caniuse.com/#search=flex
 * https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
 * Formal syntax: content | [flex-start | flex-end | center | baseline | stretch]
 * Initial Value: strecth
 * current spec, webkit browsers need prefixing
 */
/**
 * CSS Flex Align Self
 *
 * Outputs align-self code with defined prefixes
 * http://caniuse.com/#search=flex
 * https://developer.mozilla.org/en-US/docs/Web/CSS/align-self
 * Formal syntax: content | [auto | flex-start | flex-end | center | baseline | stretch]
 * Initial Value: auto
 * current spec, webkit browsers need prefixing
 *
 * Notes:
 * Safari is not supporting this feature yet even with vendor prefix
 */
/*
 * CSS Justify Content
 *
 */
/**
 * Order
 *
 */
/* @author Bilal Cinarli */
/** -------------------------------------------
    Media Query Mixins
    ------------------------------------------- **/
/**
 * Retina Image
 */
/**
 * Retina
 */
/* @author Bilal Cinarli */
/** -------------------------------------------
    Arrow
    ------------------------------------------- **/
/* @author Bilal Cinarli */
/** -------------------------------------------
    Placeholder
    ------------------------------------------- **/
/**
  * Styles input elements' placeholder. 
  * @param $self: true, if it is true, styles applied to class itself
  *			if false, styles applied to the child elements
  */
/* @author Bilal Cinarli */
/** -------------------------------------------
    Positions
    ------------------------------------------- **/
/**
  * Center
  * Applied to absolute positioned elements, and sets position to absolute.
  * Element is centered both vertically and horizontally
  * Dimension declarations (width, height) are not necessary
  * If any other transform methods applied, may not work as expected
  */
/**
  * Vertical Center
  * Centers the element vertically. Do not interfere with its horizontal position
  * If any other transform methods applied, may not work as expected
  */
/**
 * Horizontal Center
 * Centers the element horizontally 
 * Uses margin: 0 auto; when $type defined as "static"
 * By default it uses the transform approach
 * If any other transform methods applied, may not work as expected in transform approach
 */
/* @author Bilal Cinarli */
/** -------------------------------------------
    Common Break Points
    ------------------------------------------- **/
/**
 * Mobile phones / smaller screens portrait mode
 *
 */
/**
 * Mobile phones / smaller screens landscape mode
 *
 */
/**
 * Tablets / medium sized screens portrait mode
 *
 */
/**
 * Tablets / medium sized screens landscape mode
 *
 */
/**
 * Common desktop/laptops
 */
/**
 * Widescreens
 *
 */
/* @author Bilal Cinarli */
/** -------------------------------------------
    Appearance Mixin
    ------------------------------------------- **/
/**
 * CSS Appearance
 *
 * Outputs appearance with defined prefixes
 * http://caniuse.com/#search=appearance
 * https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-appearance
 * Formal syntax: value | [ various variable can defined like button, caret, checkbox, progressbar etc. ]
 * All browsers need vendor prefixing
 * 
 * Notes:
 * This is an unofficial feature and not included in the spec. Aside from Internet Explorer, all browsers
 * need their vendor prexing.
 * However for the Internet Explorer, -webkit-appearance with value none is supported on IE11 Mobile 
 * for phones with "Windows Phone 8.1 Update", and in EdgeHTML.dll
 */
/* @author Bilal Cinarli */
/** -------------------------------------------
    Scrollbar Styles
    ------------------------------------------- **/
/**
  * Scrollbar
  * Styles the scrollbars for supported browsers
  * Both vertical and horizontal scrolls styled together
  * The invisible OSX scrolls will be visible when applied
  */
/**
 * Third Import Melange Core
 * Melange Core is a super set of normalize library.
 * It has general definitions of certain elements such as labels, form fields, buttons, media object without
 * any predefined templates. Main purpose of the Melange is never overwrite any framework definitions
 * during coding. Every definition, class names can change via settings and merges itself with your GUI.
 * Also, Melange has two sets for width definitions.
 * One is a simple grid system with gutter added between columns as paddings. Using a padding gutter and box-sizing: border-box
 * definition, adds more control over responsive designs. These columns floated by default and support up to 18-column grids.
 * This grid system is a fluid grid. You need to add breakpoint definitions for responsive designs.
 * Other width types are fragmented widths such as .one-half, .two-thirds, .three-quarters etc. These are defined by percentages and
 * missing the 100% fragment except in .one-whole definitions. Simply, there are no .two-halves, .three-thirds, .four-quarters classes
 * which are equal to .one-whole :)
 */
/*! melange.css | @author Bilal Cinarli | melange.io */
/**
 * Loads the main containers. Each folder has _*.scss container file with the same name.
 * This container files imports all other files in the same folder.
 */
/** -------------------------------------------
    General Settings
    ------------------------------------------- **/
/** -------------------------------------------
    Internal Variables
    ------------------------------------------- **/
/* @author Bilal Cinarli */
/** -------------------------------------------
    Variables Container
    ------------------------------------------- **/
/* @author Bilal Cinarli */
/** -------------------------------------------
    Internal Variables
    ------------------------------------------- **/
/**
  * Here are some internal variables that are not used in styling
  * but for optimization calculations or controlling certain options
  */
/* @author Bilal Cinarli */
/** -------------------------------------------
    System supports
    ------------------------------------------- **/
/* @author Bilal Cinarli */
/** -------------------------------------------
    Default class/definition names
    ------------------------------------------- **/
/**
 * Name space prefix
 * Adds a defined namespace prefix to generated class names
 */
/**
 *  Text field lists
 */
/**
 * Class names for grid
 */
/**
 * Button names for action
 */
/**
 * Folders
 * Not actually a namespace but folder names also have different preferences
 */
/* @author Bilal Cinarli */
/** -------------------------------------------
    Number to Name Conversions
    ------------------------------------------- **/
/* @author Bilal Cinarli */
/** -------------------------------------------
    Animation Related Variables
    ------------------------------------------- **/
/**
 * Duration
 *
 * Duration time for transition animations
 */
/**
 * Easing
 *
 * Easing style
 */
/* @author Bilal Cinarli */
/** -------------------------------------------
    Default size definitions
    ------------------------------------------- **/
/**
 * Spacing in element
 * Sets the padding sizes for an element
 */
/**
 * Grid gutter and columns
 * Defines the grid gutter size and column count in a row
 * Non-grid columns are not floated by default. But it is optional whether float or not
 * for percentage widths.
 */
/**
 * Border Widths
 *
 * Applied border with for input fields and table borders
 */
/* @author Bilal Cinarli */
/** -------------------------------------------
    Breakpoint Variables
    ------------------------------------------- **/
/**
 * Rather then using device specific breakpoints, width breakpoints are more 
 * appropriate for wider range of devices.
 */
/**
 * Wide Screen
 */
/**
 * Desktop / Laptop
 */
/**
 * Tablet
 */
/**
 * Phone
 */
/**
 * Breakpoint Map
 */
/* @author Bilal Cinarli */
/** -------------------------------------------
    Fonts
    ------------------------------------------- **/
/**
 * Default font definitions
 */
/* @author Bilal Cinarli */
/** -------------------------------------------
    Colors
    ------------------------------------------- **/
/**
 * Named Colors
 *
 * Some named colors for inheriting colors over different variables
 */
/**
 * Simple colors for general styling
 */
/**
 * Border Colors
 *
 * Colors applied to border in focus, disabled, readonly and stationary state
 * @default $base-border-color: #ccc;
 */
/**
 * Field Background Colors
 *
 * Color applied to field background in focus, disabled, readonly and stationary state
 */
/**
 * Button colors
 */
/**
 * Default Button
 *
 * Unstyled, normal button
 */
/**
 * Disabled Button
 */
/**
 * Primary Action Button
 *
 * Maybe used for call-to-action button or/and save/submit buttons in forms
 */
/**
 * Secondary Action Button
 *
 * Useful for indication secondary action in a form near the primary action button
 */
/**
 * Tertiary Action Button
 *
 * Useful for actions whether they are not fit for primary or secondary
 */
/**
 * Cancel Action Button
 *
 * Simply used for cancel button for a form or call-to-action, confirmation etc.
 */
/**
 * Color maps
 */
/** -------------------------------------------
    Melange Internal Methods
    ------------------------------------------- **/
/** -------------------------------------------
    Global Styles
    ------------------------------------------- **/
/* @author Bilal Cinarli */
/** -------------------------------------------
    Global Styles Container
    ------------------------------------------- **/
/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
html {
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}

/**
 * Remove default margin.
 */
body {
  margin: 0;
}

/* HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio,
canvas,
progress,
video {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 */
[hidden],
template {
  display: none;
}

/* Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
  background: transparent;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */
a:active,
a:hover {
  outline: 0;
}

/* Text-level semantics
   ========================================================================== */
/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */
b,
strong {
  font-weight: bold;
}

/**
 * Address styling not present in Safari and Chrome.
 */
dfn {
  font-style: italic;
}

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */
h1 {
  font-size: 2rem;
  margin: 0.67em 0;
}

/**
 * Address styling not present in IE 8/9.
 */
mark {
  background: #ff0;
  color: #000;
}

/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
  font-size: 80%;
}

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

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9/10.
 */
img {
  border: 0;
}

/**
 * Correct overflow not hidden in IE 9/10/11.
 */
svg:not(:root) {
  overflow: hidden;
}

/* Grouping content
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari.
 */
figure {
  margin: 1em 40px;
}

/**
 * Address differences between Firefox and other browsers.
 */
hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}

/**
 * Contain overflow in all browsers.
 */
pre {
  overflow: auto;
}

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1rem;
}

/* Forms
   ========================================================================== */
/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */
/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  /* 1 */
  font: inherit;
  /* 2 */
  margin: 0;
  /* 3 */
}

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */
button {
  overflow: visible;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */
button,
select {
  text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
input {
  line-height: normal;
}

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
 *    (include `-moz` to future-proof).
 */
input[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  /* 2 */
  box-sizing: content-box;
}

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  /* 2 */
}

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */
textarea {
  overflow: auto;
}

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
optgroup {
  font-weight: bold;
}

/* Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

/* @author Bilal Cinarli */
/** -------------------------------------------
    Generic Styles
    ------------------------------------------- **/
/**
 * More proper width calculation and better grid,
 * all elements' box-sizing set to border-box
 */
html {
  box-sizing: border-box;
}

*, *:after, *:before {
  box-sizing: inherit;
}

/**
  * Overwrite normalize.css's box-sizing definitions
  */
hr,
input[type="search"] {
  box-sizing: inherit;
}

/**
 * Set html and body sizes to 100% for better wrapping
 * Remove margins and padding to use all viewport
 */
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

/**
 * Remove top margin and padding from certain elements
 * generally we never use top margin anyway
 */
h1, h2, h3, h4, h5, h6,
p,
ul, ol, li,
table, th, td {
  margin-top: 0;
  padding: 0;
}

/**
 * And good-ol friend clearfix
 * For a meaningful name our clearfix class named as group
 */
.group:after, .row:after, .media:after {
  content: "";
  display: table;
  clear: both;
}

/* @author Bilal Cinarli */
/**
 * Not real functions of mixins but set of definitions for resetting or reformatting an element
 */
/** -------------------------------------------
    Helper Definitions
    ------------------------------------------- **/
/**
 * Hard reset for an element
 */
fieldset, .form-elements {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  list-style: none;
}

/**
 * Vertical Center
 */
/**
 * Horizontal Center
 */
/**
 * Center Alignment
 */
/**
 * Floats
 */
.column {
  float: left;
}

/* @author Bilal Cinarli */
/**
 * Position related definition
 */
/** -------------------------------------------
    Positions
    ------------------------------------------- **/
/**
 * Floats
 */
.move-to-start,
[dir="rtl"] .move-to-end {
  float: left;
}

.move-to-end,
[dir="rtl"] .move-to-start {
  float: right;
}

/**
 * Aligns
 * start and end values for text-aligns are direction safe.
 * no need to additional definition for rtl/ltr differences.
 */
.align-start {
  text-align: start;
}

.align-end {
  text-align: end;
}

/** -------------------------------------------
    Layout Definitions
    ------------------------------------------- **/
/* @author Bilal Cinarli */
/** -------------------------------------------
    Layouts Container
    ------------------------------------------- **/
/* @author Bilal Cinarli */
/** -------------------------------------------
    Widths for General Usage
    ------------------------------------------- **/
/**
 * Mixin for width calculations
 *
 * @param $fragment: defines how many fragments in one row and calculates the fragment width
 * @param $namespace prefix for classes in order to use different names for different parts
 *
 * @depends $numbers: number-to-name conversion list for human readable class names
 * @depends $ordinals: defines the human reader total chunks
 */
/**
 * Whole
 */
.one-whole {
  width: 100%;
}

/**
 * Half
 */
.one-half, .two-quarters, .four-eighths, .five-tenths, .six-twelfths {
  width: 50%;
}

/**
 * Thirds
 */
.one-thirds, .one-third, .four-twelfths {
  width: 33.33333%;
}

.two-thirds, .eight-twelfths {
  width: 66.66667%;
}

/**
 * Quarters
 */
.one-quarters, .one-quarter, .two-eighths, .three-twelfths {
  width: 25%;
}

.three-quarters, .six-eighths, .nine-twelfths {
  width: 75%;
}

/**
 * Fifths
 */
.one-fifths, .one-fifth, .two-tenths {
  width: 20%;
}

.two-fifths, .four-tenths {
  width: 40%;
}

.three-fifths, .six-tenths {
  width: 60%;
}

.four-fifths, .eight-tenths {
  width: 80%;
}

/**
 * Eights
 */
.one-eighths, .one-eighth {
  width: 12.5%;
}

.three-eighths {
  width: 37.5%;
}

.five-eighths {
  width: 62.5%;
}

.seven-eighths {
  width: 87.5%;
}

/**
 * Tenths
 */
.one-tenths, .one-tenth {
  width: 10%;
}

.three-tenths {
  width: 30%;
}

.seven-tenths {
  width: 70%;
}

.nine-tenths {
  width: 90%;
}

/**
 * Twelfths
 */
.one-twelfths, .one-twelfth {
  width: 8.33333%;
}

.two-twelfths {
  width: 16.66667%;
}

.five-twelfths {
  width: 41.66667%;
}

.seven-twelfths {
  width: 58.33333%;
}

.ten-twelfths {
  width: 83.33333%;
}

.eleven-twelfths {
  width: 91.66667%;
}

/* @author Bilal Cinarli */
/** -------------------------------------------
    Grid Columns
    ------------------------------------------- **/
/**
 * Mixin for grid columns
 *
 * Apart from our generic widths, columns have gutter for spacing and they are floated by default.
 */
/**
 * Offset settings for grid columns
 *
 * When you need much larger spacing between grid columns, you can offset a column by one or more column widths
 */
/**
 * Row
 * Row encapsulation for columns
 */
.pull {
  margin-left: -10px;
}

.push {
  margin-right: -10px;
}

.pull-push {
  margin-left: -10px;
  margin-right: -10px;
}

/**
 * Columns
 * Better controlling the width, gutter defined as right & left padding
 */
[class*="-column"] {
  position: relative;
  float: left;
  padding: 0 10px;
}

[class*="-column"].column-parent {
  padding: 0;
}

[class*="column-reverse"] {
  float: right;
}

/**
 * Grid Columns
 * Sets the grid columns according to column number defined in $base-grid-columns
 * @see melange/variables/_sizes.scss
 * @see settings/_sizes.scss
 */
.one-column,
.one-columns {
  width: 12.5%;
}

.two-column,
.two-columns {
  width: 25%;
}

.three-column,
.three-columns {
  width: 37.5%;
}

.four-column,
.four-columns {
  width: 50%;
}

.five-column,
.five-columns {
  width: 62.5%;
}

.six-column,
.six-columns {
  width: 75%;
}

.seven-column,
.seven-columns {
  width: 87.5%;
}

.eight-column,
.eight-columns {
  width: 100%;
}

/**
 * Offsets
 * Sets the offsets classes according to column number defined in $base-grid-columns
 */
.offset-by-one {
  margin-left: 12.5%;
}

.offset-by-two {
  margin-left: 25%;
}

.offset-by-three {
  margin-left: 37.5%;
}

.offset-by-four {
  margin-left: 50%;
}

.offset-by-five {
  margin-left: 62.5%;
}

.offset-by-six {
  margin-left: 75%;
}

.offset-by-seven {
  margin-left: 87.5%;
}

/** -------------------------------------------
    Base Element Styles
    ------------------------------------------- **/
/* @author Bilal Cinarli */
/** -------------------------------------------
    Elements Container
    ------------------------------------------- **/
/* @author Bilal Cinarli */
/** -------------------------------------------
    Text Styles
    ------------------------------------------- **/
/**
 * Body base font and color definitions
 */
html {
  font-size: 16px;
}

body {
  font: 16px/1.5 "TurkcellSatura", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #4d4d4d;
}

/* @author Bilal Cinarli */
/** -------------------------------------------
    Form Elements Container
    ------------------------------------------- **/
/* @author Bilal Cinarli */
/** -------------------------------------------
    Field Wrappers
    ------------------------------------------- **/
/**
 * Fieldset for field wrappers
 */
/**
 * Form Elements Holder
 * A list or a div for group form elements
 */
.form-elements {
  /**
     * Forms mostly build with unordered list.

        <ul class="form-element group">
            <li class="group">
                <label class="item-field">
                    <span class="item-name">Label</span>
                    <input />
                </label>
            </li>
        </ul>
     */
}

.form-elements li {
  position: relative;
  margin-bottom: 1em;
}

/**
 * Legend
 *
 * Make the legend as a block for better styling and control
 */
legend {
  display: block;
  width: 100%;
  margin-bottom: 1em;
}

/* @author Bilal Cinarli */
/** -------------------------------------------
    Label Styles
    ------------------------------------------- **/
/**
 * Labels
 *
 * Fields should always wrapped with a label.
 * Helper .label class is used for applying label styles for other text elements
 *
    <label class="item-field">
        <span class="item-label"></span>
        <input type="text" />
    </label>
 *
 */
label,
.label {
  position: relative;
  display: inline-block;
}

/**
 * Item positions
 * In most cases, 
 * item-field is for showing label name and field in same line
 * item-stacked is for showing label name and field in rows
 * item-row is however, stacking the label wrappers together
 */
.item-field {
  margin-right: 1em;
}

.item-stacked:not(:only-child) {
  margin-bottom: 1em;
}

.item-row + .item-row {
  margin-top: 1em;
}

.item-error {
  color: #e87352;
}

/**
     * Label texts
     */
.item-label,
.field-label {
  position: relative;
  display: inline-block;
  cursor: pointer;
  /**
         * When item is stacked, label text will be over the label input
         */
  /**
         * Required field has a star at the beginning of label
         */
}

.item-stacked .item-label, .item-stacked
.field-label {
  display: block;
}

.required .item-label:before, .required
.field-label:before {
  content: "*";
  position: absolute;
  left: -10px;
}

/**
 * Field Help
 *
 * Although this is not an actual label, it can be used as helper text for the field
 */
.field-help {
  font-size: .8em;
  font-style: italic;
}

/* @author Bilal Cinarli */
/** -------------------------------------------
    Input Fields
    ------------------------------------------- **/
/**
 * Text based (input[type=text] etc.) field styles
 *
 * .text-field class is added in order to styling other elements like a text field
 */
input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"],
textarea,
.text-field {
  outline: 0;
  padding: 5px;
  border: 1px solid #9d9d9d;
  background: #e5e5e5;
  color: inherit;
  font-size: 1rem;
  font-weight: normal;
}

input[type="text"]:focus, input[type="password"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="color"]:focus,
textarea:focus,
.text-field:focus, input[type="text"]:active, input[type="password"]:active, input[type="datetime"]:active, input[type="datetime-local"]:active, input[type="date"]:active, input[type="month"]:active, input[type="time"]:active, input[type="week"]:active, input[type="number"]:active, input[type="email"]:active, input[type="url"]:active, input[type="search"]:active, input[type="tel"]:active, input[type="color"]:active,
textarea:active,
.text-field:active {
  border-color: #4d4d4d;
  background: #fff;
}

input[readonly][type="text"], input[readonly][type="password"], input[readonly][type="datetime"], input[readonly][type="datetime-local"], input[readonly][type="date"], input[readonly][type="month"], input[readonly][type="time"], input[readonly][type="week"], input[readonly][type="number"], input[readonly][type="email"], input[readonly][type="url"], input[readonly][type="search"], input[readonly][type="tel"], input[readonly][type="color"],
textarea[readonly],
[readonly].text-field, input.readonly[type="text"], input.readonly[type="password"], input.readonly[type="datetime"], input.readonly[type="datetime-local"], input.readonly[type="date"], input.readonly[type="month"], input.readonly[type="time"], input.readonly[type="week"], input.readonly[type="number"], input.readonly[type="email"], input.readonly[type="url"], input.readonly[type="search"], input.readonly[type="tel"], input.readonly[type="color"],
textarea.readonly,
.readonly.text-field {
  cursor: default;
  border-color: #9d9d9d;
  background-color: #e5e5e5;
}

input[disabled][type="text"], input[disabled][type="password"], input[disabled][type="datetime"], input[disabled][type="datetime-local"], input[disabled][type="date"], input[disabled][type="month"], input[disabled][type="time"], input[disabled][type="week"], input[disabled][type="number"], input[disabled][type="email"], input[disabled][type="url"], input[disabled][type="search"], input[disabled][type="tel"], input[disabled][type="color"],
textarea[disabled],
[disabled].text-field, input.disabled[type="text"], input.disabled[type="password"], input.disabled[type="datetime"], input.disabled[type="datetime-local"], input.disabled[type="date"], input.disabled[type="month"], input.disabled[type="time"], input.disabled[type="week"], input.disabled[type="number"], input.disabled[type="email"], input.disabled[type="url"], input.disabled[type="search"], input.disabled[type="tel"], input.disabled[type="color"],
textarea.disabled,
.disabled.text-field {
  cursor: default;
  border-color: #e5e5e5;
  background-color: #9d9d9d;
}

input.item-error[type="text"], input.item-error[type="password"], input.item-error[type="datetime"], input.item-error[type="datetime-local"], input.item-error[type="date"], input.item-error[type="month"], input.item-error[type="time"], input.item-error[type="week"], input.item-error[type="number"], input.item-error[type="email"], input.item-error[type="url"], input.item-error[type="search"], input.item-error[type="tel"], input.item-error[type="color"],
textarea.item-error,
.item-error.text-field {
  border-color: #e87352;
}

input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"],
textarea,
.text-field {
  -webkit-appearance: none;
}

/**
 * Checkable (checkbox, radio) field styles
 */
input[type="checkbox"], input[type="radio"] {
  vertical-align: middle;
  /**
     * Fields and labels together
     *
        <label class="item-field">
            <input type="checkbox" />
            <span class="item-label">Label</span>
        </label>
     */
}

input[type="checkbox"] + .field-label,
input[type="checkbox"] + .item-label, input[type="radio"] + .field-label,
input[type="radio"] + .item-label {
  font-weight: normal;
  margin-left: .25em;
  vertical-align: middle;
}

/**
 * Other input types
 */
/**
 * Textarea
 *
 * Textareas are like input text fields in most cases, but they need additional styling
 * since they are resizable and allows multiple lines
 */
textarea {
  min-height: 3em;
  resize: vertical;
}

/* @author Bilal Cinarli */
/** -------------------------------------------
    Button Styles
    ------------------------------------------- **/
/**
 * Button colors
 */
/**
 * In most cases, using buttons with button tag allows more styling options
 * it is cross browser and meaningful. Also ".button" class is added in order to
 * get button-like elements
 */
button,
input[type="submit"],
input[type="reset"],
input.button, .button, [class*="-action"]:not([class*="-actions"]) {
  -webkit-apperance: none;
  -moz-apperance: none;
  apperance: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  display: inline-block;
  cursor: pointer;
  padding: 5px 15px;
  line-height: normal;
  text-decoration: none;
  background-color: #ffe100;
  color: #4d4d4d;
}

button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover, .button:hover, [class*="-action"]:hover:not([class*="-actions"]) {
  background-color: #d9bf00;
  color: #4d4d4d;
}

button:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled, .button:disabled, [class*="-action"]:disabled:not([class*="-actions"]), button.disabled,
input.disabled[type="submit"],
input.disabled[type="reset"], .disabled.button, .disabled[class*="-action"]:not([class*="-actions"]) {
  cursor: default;
  background-color: #e5e5e5;
  color: #4d4d4d;
}

button:disabled:hover,
input[type="submit"]:disabled:hover,
input[type="reset"]:disabled:hover, .button:disabled:hover, [class*="-action"]:disabled:hover:not([class*="-actions"]), button.disabled:hover,
input.disabled[type="submit"]:hover,
input.disabled[type="reset"]:hover, .disabled.button:hover, .disabled[class*="-action"]:hover:not([class*="-actions"]) {
  background-color: #e5e5e5;
  color: #4d4d4d;
}

button:active,
input[type="submit"]:active,
input[type="reset"]:active, .button:active, [class*="-action"]:active:not([class*="-actions"]) {
  -webkit-box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.3);
}

/**
 * Native button elements
 * Input button elements
 */
button,
input[type="submit"],
input[type="reset"],
input.button {
  border: transparent;
}

/**
 * Anchor and other elements
 */
.button {
  text-align: center;
}

.button, .button:hover, .button:focus, .button:active {
  text-decoration: none;
}

/** 
 * Action Buttons
 * specificity increased in order to overwrite [class*="-action"]:not([class*="-actions"])
 * without using !important rule. By this, it can easily modified `.some-class .primary-action` selector
 */
.primary-action.primary-action {
  background-color: #3fb0e8;
  color: #4d4d4d;
}

.primary-action.primary-action:hover {
  background-color: #1da2e4;
  color: #4d4d4d;
}

.secondary-action.secondary-action {
  background-color: #ffe100;
  color: #fff;
}

.secondary-action.secondary-action:hover {
  background-color: #d9bf00;
  color: #fff;
}

.tertiary-action.tertiary-action {
  background-color: #ffa900;
  color: #fff;
}

.tertiary-action.tertiary-action:hover {
  background-color: #d99000;
  color: #fff;
}

.cancel-action.cancel-action,
input[type="reset"] {
  background-color: #e87352;
  color: #fff;
}

.cancel-action.cancel-action:hover,
input[type="reset"]:hover {
  background-color: #e45830;
  color: #fff;
}

/* @author Bilal Cinarli */
/** -------------------------------------------
    Table Styles
    ------------------------------------------- **/
/**
 * Table
 */
table {
  width: 100%;
}

/**
 * TFoot
 */
tfoot td:only-child {
  text-align: right;
}

/**
 * Cells
 */
th,
td {
  padding: 0.5em;
  text-align: left;
}

/* @author Bilal Cinarli */
/** -------------------------------------------
    Link & Nav Styles
    ------------------------------------------- **/
/**
 * Links
 *
 * Basic anchor styling
 */
a {
  display: inline-block;
  padding: 2px;
}

nav a {
  text-decoration: none;
}

/**
 * Nav
 *
 * Navigation items
 */
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* @author Bilal Cinarli */
/** -------------------------------------------
    Heading Styles
    ------------------------------------------- **/
/* @author Bilal Cinarli */
/** -------------------------------------------
    Lists
    ------------------------------------------- **/
ol,
ul {
  list-style-position: outside;
  padding-left: 10px;
}

dl {
  padding-left: 10px;
}

dl dt {
  font-weight: bold;
}

/* @author Bilal Cinarli */
/** -------------------------------------------
    Inline elements
    ------------------------------------------- **/
/* @author Bilal Cinarli */
/** -------------------------------------------
    Block Styles
    ------------------------------------------- **/
/** -------------------------------------------
    Default Components
    ------------------------------------------- **/
/* @author Bilal Cinarli */
/** -------------------------------------------
    Components Container
    ------------------------------------------- **/
/**
 * Media Component
 */
/* @author Bilal Cinarli */
/** -------------------------------------------
    Media Component
    ------------------------------------------- **/
/**
 * Media Item
 *
 * A media item indicates a block consists with a media item (image, flash, video etc.) and a text content
 */
.media-visual {
  display: block;
  float: left;
  margin-right: 1em;
}

.media-text + .media-visual {
  float: right;
  margin-right: auto;
  margin-left: 1em;
}

/**
 * GUI Styles
 * Your gui related definitions.
 * Only add the main GUI file in the styles.scss. Other gui styles will be added in gui/gui.scss
 */
/* @author Bilal Cinarli */
/** -------------------------------------------
    GUI Related Styles
    ------------------------------------------- **/
/**
  * GUI Definitions
  * Only import the directories main files. No need the add other partials. In import order, each categorized partial
  * imported in the main file of the category
  */
/**
 * Externals
 */
/* @author Bilal Cinarli */
/** -------------------------------------------
	BOX
------------------------------------------- **/
/* @author Bilal Cinarli */
/** -------------------------------------------
    Accordion
    ------------------------------------------- **/
.uxr-collapsible-header {
  position: relative;
  display: block;
  margin: 0;
  cursor: pointer;
}

.uxr-collapsible-animateCSS > .uxr-collapsible-content {
  height: 0;
  overflow: hidden;
  transition: all .3s;
}

.uxr-collapsible-current.uxr-collapsible-animateCSS > .uxr-collapsible-content {
  overflow: visible;
  height: auto;
  padding: 15px 0;
}

.uxr-collapsible-animateJS > .uxr-collapsible-content {
  display: none;
}

.uxr-collapsible-current.uxr-collapsible-animateJS > .uxr-collapsible-content {
  display: block;
}

/* @author Bilal Cinarli */
/** -------------------------------------------
 
    ------------------------------------------- **/
.collapsible {
  padding: 20px 0;
  border-top: 1px solid #e5e5e5;
}

.collapsible:first-child {
  border-top: 0;
}

.collapsible-header {
  font-size: 1.5rem;
  font-weight: normal;
}

.collapsible-content {
  color: #9d9d9d;
}

/**
 * Swiper 3.3.1
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 *
 * http://www.idangero.us/swiper/
 *
 * Copyright 2016, Vladimir Kharlampidi
 * The iDangero.us
 * http://www.idangero.us/
 *
 * Licensed under MIT
 *
 * Released on: February 7, 2016
 */
.swiper-container-android .swiper-slide, .swiper-wrapper, .swiper-pagination, .swiper-container-vertical > .swiper-pagination-bullets {
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.swiper-container {
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  z-index: 1;
}

.swiper-slide {
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  position: relative;
  width: 100%;
  height: 100%;
}

.swiper-container-no-flexbox .swiper-slide {
  float: left;
}

.swiper-wrapper {
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  position: relative;
  width: 100%;
  height: 100%;
  -webkit-transition-property: transfrom;
  transition-property: transfrom;
  z-index: 1;
  box-sizing: content-box;
}

.swiper-container-vertical > .swiper-wrapper {
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.swiper-container-multirow > .swiper-wrapper {
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.swiper-container-free-mode > .swiper-wrapper {
  margin: 0 auto;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

.swiper-container-coverflow .swiper-wrapper,
.swiper-container-flip .swiper-wrapper {
  -ms-perspective: 1200px;
  perspective: 1200px;
}

.swiper-container-autoheight,
.swiper-container-autoheight .swiper-slide {
  height: auto;
}

.swiper-container-autoheight .swiper-wrapper {
  -ms-flex-align: start;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  -webkit-transition-property: transform, height;
  transition-property: transform, height;
}

/* a11y */
.swiper-container .swiper-notification {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: -1000;
  pointer-events: none;
}

/* IE10 Windows Phone 8 Fixes */
.swiper-wp8-horizontal {
  -ms-touch-action: pan-y;
  touch-action: pan-y;
}

.swiper-wp8-vertical {
  -ms-touch-action: pan-x;
  touch-action: pan-x;
}

/* Arrows */
.swiper-button-prev, .swiper-button-next {
  position: absolute;
  top: 50%;
  width: 27px;
  height: 44px;
  margin-top: -22px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 27px 44px;
  cursor: pointer;
  z-index: 10;
}

.swiper-button-disabled.swiper-button-prev, .swiper-button-disabled.swiper-button-next {
  cursor: auto;
  opacity: .35;
  pointer-events: none;
}

.swiper-button-prev, .swiper-container-rtl .swiper-button-next {
  right: auto;
  left: 10px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
}

.swiper-container-rtl .swiper-button-prev, .swiper-button-next {
  right: 10px;
  left: auto;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
}

.swiper-button-prev.swiper-button-black, .swiper-container-rtl .swiper-button-next.swiper-button-black {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
}

.swiper-container-rtl .swiper-button-prev.swiper-button-black, .swiper-button-next.swiper-button-black {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
}

.swiper-button-prev.swiper-button-white, .swiper-container-rtl .swiper-button-next.swiper-button-white {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
}

.swiper-container-rtl .swiper-button-prev.swiper-button-white, .swiper-button-next.swiper-button-white {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
}

/* Pagination Styles */
.swiper-pagination {
  position: absolute;
  text-align: center;
  -webkit-transition: 300ms;
  transition: 300ms;
  z-index: 10;
}

.swiper-pagination.swiper-pagination-hidden {
  opacity: 0;
}

/* Common Styles */
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-container-horizontal > .swiper-pagination-bullets {
  bottom: 10px;
  left: 0;
  width: 100%;
}

/* Bullets */
.swiper-pagination-bullet {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 100%;
  background: #000;
  opacity: .2;
}

.swiper-pagination-clickable .swiper-pagination-bullet {
  cursor: pointer;
}

.swiper-pagination-white .swiper-pagination-bullet {
  background: #fff;
}

.swiper-pagination-bullet-active {
  background: #007aff;
  opacity: 1;
}

.swiper-pagination-white .swiper-pagination-bullet-active {
  background: #fff;
}

.swiper-pagination-black .swiper-pagination-bullet-active {
  background: #000;
}

button.swiper-pagination-bullet {
  margin: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.swiper-container-vertical > .swiper-pagination-bullets {
  top: 50%;
  right: 10px;
}

.swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
  display: block;
  margin: 5px 0;
}

.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 5px;
}

/* Progress */
.swiper-pagination-progress {
  position: absolute;
  background: rgba(0, 0, 0, 0.25);
}

.swiper-pagination-progress .swiper-pagination-progressbar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #007aff;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-transform-origin: left top;
  -ms-transform-origin: left top;
  transform-origin: left top;
}

.swiper-pagination-progress .swiper-pagination-progressbar .swiper-container-rtl {
  -webkit-transform-origin: right top;
  -ms-transform-origin: right top;
  transform-origin: right top;
}

.swiper-container-horizontal > .swiper-pagination-progress {
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
}

.swiper-container-vertical > .swiper-pagination-progress {
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
}

.swiper-pagination-progress.swiper-pagination-white {
  background: rgba(255, 255, 255, 0.5);
}

.swiper-pagination-progress.swiper-pagination-white .swiper-pagination-progressbar {
  background: #fff;
}

.swiper-pagination-progress.swiper-pagination-black .swiper-pagination-progressbar {
  background: #000;
}

/* 3D Container */
.swiper-container-3d {
  -webkit-perspective: 1200px;
  -moz-perspective: 1200px;
  -o-perspective: 1200px;
  perspective: 1200px;
}

.swiper-container-3d .swiper-wrapper,
.swiper-container-3d .swiper-slide,
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top,
.swiper-container-3d .swiper-slide-shadow-bottom,
.swiper-container-3d .swiper-cube-shadow {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top,
.swiper-container-3d .swiper-slide-shadow-bottom {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  pointer-events: none;
}

.swiper-container-3d .swiper-slide-shadow-left {
  background: -webkit-linear-gradient(right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
  background: linear-gradient(right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
  background: linear-gradient(to left, rgba(0, 0, 0, 0.5), transparent);
}

.swiper-container-3d .swiper-slide-shadow-right {
  background: -webkit-linear-gradient(left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
  background: linear-gradient(left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
  background: linear-gradient(to right, rgba(0, 0, 0, 0.5), transparent);
}

.swiper-container-3d .swiper-slide-shadow-top {
  background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
  background: linear-gradient(bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
  background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
}

.swiper-container-3d .swiper-slide-shadow-bottom {
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
  background: linear-gradient(top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent);
}

/* Cube + Flip */
.swiper-container-cube,
.swiper-container-flip {
  overflow: visible;
}

.swiper-container-cube .swiper-slide,
.swiper-container-flip .swiper-slide {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 1;
  pointer-events: none;
}

.swiper-container-cube .swiper-slide .swiper-slide,
.swiper-container-flip .swiper-slide .swiper-slide {
  pointer-events: none;
}

.swiper-container-cube .swiper-active,
.swiper-container-cube .swiper-active .swiper-active,
.swiper-container-flip .swiper-active,
.swiper-container-flip .swiper-active .swiper-active {
  pointer-events: auto;
}

.swiper-container-cube .swiper-slide-shadow-top,
.swiper-container-cube .swiper-slide-shadow-right,
.swiper-container-cube .swiper-slide-shadow-bottom,
.swiper-container-cube .swiper-slide-shadow-left,
.swiper-container-flip .swiper-slide-shadow-top,
.swiper-container-flip .swiper-slide-shadow-right,
.swiper-container-flip .swiper-slide-shadow-bottom,
.swiper-container-flip .swiper-slide-shadow-left {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 0;
}

/* Cube */
.swiper-container-cube .swiper-slide {
  width: 100%;
  height: 100%;
  visibility: hidden;
  -webkit-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0;
}

.swiper-container-cube.swiper-container-rtl .swiper-slide {
  -webkit-transform-origin: 100% 0;
  -ms-transform-origin: 100% 0;
  transform-origin: 100% 0;
}

.swiper-container-cube .swiper-slide-active,
.swiper-container-cube .swiper-slide-next,
.swiper-container-cube .swiper-slide-prev,
.swiper-container-cube .swiper-slide-next + .swiper-slide {
  visibility: visible;
  pointer-events: auto;
}

.swiper-container-cube .swiper-cube-shadow {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: .6;
  -webkit-filter: 50px;
  -moz-filter: 50px;
  filter: 50px;
  z-index: 0;
}

.swiper-container-fade.swiper-container-free-mode .swiper-slide {
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

.swiper-container-fade .swiper-slide {
  -webkit-transition-property: opacity;
  transition-property: opacity;
  pointer-events: none;
}

.swiper-container-fade .swiper-slide .swiper-slide {
  pointer-events: none;
}

.swiper-container-fade .swiper-slide-active {
  pointer-events: auto;
}

.swiper-container-fade .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}

/* Scrollbar */
.swiper-scrollbar {
  position: relative;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.1);
}

.swiper-container-horizontal > .swiper-scrollbar {
  position: absolute;
  bottom: 3px;
  left: 1%;
  width: 98%;
  height: 5px;
  z-index: 50;
}

.swiper-container-vertical > .swiper-scrollbar {
  position: absolute;
  top: 1%;
  right: 3px;
  width: 5px;
  height: 98%;
  z-index: 50;
}

.swiper-scrollbar-drag {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.5);
}

.swiper-scrollbar-cursor-drag {
  cursor: move;
}

/* Preloader */
.swiper-lazy-preloader {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 42px;
  height: 42px;
  margin-top: -21px;
  margin-left: -21px;
  z-index: 10;
  -webkit-transform-origin: 50%;
  -ms-transform-origin: 50%;
  transform-origin: 50%;
  -webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite;
  animation: swiper-preloader-spin 1s steps(12, end) infinite;
}

.swiper-lazy-preloader::after {
  display: block;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: 100%;
  content: "";
}

.swiper-lazy-preloader-white::after {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

@-webkit-keyframes swiper-preloader-spin {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes swiper-preloader-spin {
  100% {
    transform: rotate(360deg);
  }
}

/* @author Bilal Cinarli */
/** -------------------------------------------
 
    ------------------------------------------- **/
/* @author Bilal Cinarli */
/** -------------------------------------------
 
    ------------------------------------------- **/
@font-face {
  font-family: "TurkcellSatura";
  src:  url("../fonts/turkcell_satura_regular.woff2?#caffeine") format("woff2"), url("../fonts/turkcell_satura_regular.woff?caffeine") format("woff"), url("../fonts/turkcell_satura_regular.ttf?caffeine") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "TurkcellSatura";
  src:  url("../fonts/turkcell_satura_bold.woff2?#caffeine") format("woff2"), url("../fonts/turkcell_satura_bold.woff?caffeine") format("woff"), url("../fonts/turkcell_satura_bold.ttf?caffeine") format("truetype");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "TurkcellSatura";
  src:  url("../fonts/turkcell_satura_italic.woff2?#caffeine") format("woff2"), url("../fonts/turkcell_satura_italic.woff?caffeine") format("woff"), url("../fonts/turkcell_satura_italic.ttf?caffeine") format("truetype");
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: "TurkcellSatura";
  src:  url("../fonts/turkcell_satura_medium.woff2?#caffeine") format("woff2"), url("../fonts/turkcell_satura_medium.woff?caffeine") format("woff"), url("../fonts/turkcell_satura_medium.ttf?caffeine") format("truetype");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "bip.ai";
  src:  url("../fonts/bip.ai.woff2?#caffeine") format("woff2"), url("../fonts/bip.ai.woff?caffeine") format("woff"), url("../fonts/bip.ai.ttf?caffeine") format("truetype");
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"]:before, [class*=" icon-"]:before, .wiki-navigation .menu-item-has-children > a::after {
  font-family: "bip.ai";
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/**
 * Layout
 * In layout component, there lays the general position of the main elements like page-wrap, header, footer, content etc.
 * Keep in mind, the layout components should only contain the position or size of these wrappers
 * the other elements  like logo in the header, menu in the footer should defined in the components or particules or other
 * appropriate folder to their definitions fit in.
 */
/* @author Bilal Cinarli */
/** -------------------------------------------
    Layout
    ------------------------------------------- **/
/**
 * Page
 */
/* @author Bilal Cinarli */
/** -------------------------------------------
    Page
    ------------------------------------------- **/
.page-wrapper {
  position: relative;
  width: 100%;
  min-height: 100%;
  margin-bottom: -475px;
}

.footer-push {
  height: 475px;
  clear: both;
}

.page-container {
  position: relative;
  width: 100%;
  max-width: 960px;
  height: 100%;
  margin: 0 auto;
}

@media screen and (max-width: 768px) {
  .page-container {
    padding: 0 20px;
  }
}

/**
 * Header
 */
/* @author Bilal Cinarli */
/** -------------------------------------------
    Header
    ------------------------------------------- **/
.page-header {
  position: relative;
  height: 70px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  background: #3fb0e8 url("../images/header-bg.jpg") no-repeat;
  z-index: 99;
}

.wiki .page-header {
  background-image: none;
}

.page-branding {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  left: 0;
}

.wiki .page-branding {
  left: 20px;
}

@media screen and (max-width: 768px) {
  .page-branding {
    left: 20px;
  }
}

/**
 * Content
 */
/* @author Bilal Cinarli */
/** -------------------------------------------
    Body
    ------------------------------------------- **/
.page-content {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 40px 0;
}

@media screen and (max-width: 768px) {
  .page-content {
    padding: 40px 20px;
  }
}

.single-documentations .page-content {
  max-width: 100%;
}

@media screen and (min-width: 769px) {
  .single-documentations .main {
    width: calc(100% - 250px);
    max-width: 80%;
    padding-right: 20px;
    float: right;
  }
}

/* @author Bilal Cinarli */
/** -------------------------------------------
 
    ------------------------------------------- **/
@media screen and (min-width: 769px) {
  .single-documentations .sidebar {
    position: absolute;
    top: 0;
    left: 0;
    width: 20%;
    max-width: 250px;
    height: 100%;
    padding: 20px;
    background-color: #e5e5e5;
  }
}

/**
 * Footer
 */
/* @author Bilal Cinarli */
/** -------------------------------------------
    Footer
    ------------------------------------------- **/
.top-footer,
.bottom-footer {
  position: relative;
}

.top-footer {
  padding: 40px 0;
  background-color: #e5e5e5;
}

.bottom-footer {
  padding: 10px 0;
}

.wiki .bottom-footer {
  text-transform: uppercase;
}

/**
 * Elements
 */
/* @author Bilal Cinarli */
/** -------------------------------------------
    Elements
    ------------------------------------------- **/
/* @author Bilal Cinarli */
/** -------------------------------------------
 
    ------------------------------------------- **/
/* @author Bilal Cinarli */
/** -------------------------------------------
    Form
    ------------------------------------------- **/
/* @author Bilal Cinarli */
/** -------------------------------------------
 
    ------------------------------------------- **/
/* @author Bilal Cinarli */
/** -------------------------------------------
 
    ------------------------------------------- **/
/* @author Bilal Cinarli */
/** -------------------------------------------
 
    ------------------------------------------- **/
/* @author Bilal Cinarli */
/** -------------------------------------------
 
    ------------------------------------------- **/
button,
.button, input[type="submit"], input[type="reset"], input.button, [class*="-action"]:not([class*="-actions"]) {
  padding: 10px 22px;
  font-size: 1.25rem;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

/* @author Bilal Cinarli */
/** -------------------------------------------
 
    ------------------------------------------- **/
/* @author Bilal Cinarli */
/** -------------------------------------------
 
    ------------------------------------------- **/
a {
  padding: 0;
}

/* @author Bilal Cinarli */
/** -------------------------------------------
    HEAD
    ------------------------------------------- **/
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

h1.highlighted,
h2.highlighted,
h3.highlighted,
h4.highlighted,
h5.highlighted,
h6.highlighted {
  color: #3fb0e8;
}

h4 {
  font-size: 1.875rem;
  line-height: 32px;
}

h4.general {
  position: relative;
  margin-bottom: 30px;
  padding-bottom: 6px;
  color: #3fb0e8;
  font-weight: normal;
}

h4.general::before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 46px;
  height: 3px;
  background-color: #ffe000;
  content: "";
}

.entry-header {
  margin-bottom: 10px;
}

.entry-title, .homepage-widget-title {
  position: relative;
  margin-bottom: 20px;
  color: #3fb0e8;
  font-weight: normal;
  line-height: 1.1;
}

.entry-title::after, .homepage-widget-title::after {
  display: block;
  width: 100px;
  height: 5px;
  background-color: #ffe100;
  content: "";
}

.entry-title {
  font-size: 3rem;
}

/* @author Bilal Cinarli */
/** -------------------------------------------
 
    ------------------------------------------- **/
.list-wrapper ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.list-wrapper ul li {
  position: relative;
  border-bottom: 1px solid #e5e5e5;
}

.list-wrapper ul a {
  display: block;
  width: 85%;
  padding: 0;
  color: #4d4d4d;
  font-size: 1.5rem;
  line-height: 100%;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.list-wrapper ul a p {
  margin: 0;
  padding-top: 6px;
  color: #9d9d9d;
  font-size: 1.125rem;
}

.list-wrapper ul a.with-date p {
  margin: 0;
  padding: 0 90px 0 0;
}

.list-wrapper ul .date {
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -9px;
  color: #9d9d9d;
  font-size: 1rem;
  line-height: 18px;
}

.list-wrapper.with-date h6,
.list-wrapper.with-date p {
  margin: 0;
  padding: 0 90px 0 0;
}

.list-wrapper .show-all {
  padding-top: 18px;
  text-align: center;
}

.list-wrapper .show-all a {
  color: #909090;
  font-size: 0.875rem;
  line-height: 14px;
}

.feeds li {
  padding: 18px 0;
}

.feeds li:first-child {
  padding-top: 0;
}

.feeds.faq li:last-child {
  padding-bottom: 19px;
}

/* @author Bilal Cinarli */
/** -------------------------------------------
 
    ------------------------------------------- **/
.responsive-img {
  display: block;
  max-width: 100%;
  height: auto;
}

.icon-apple::before, .icon-apple-logo::before {
  content: "\EA01";
}

.icon-chevron-down::before, .wiki-navigation .menu-item-has-children.current-menu-ancestor > a::after {
  content: "\EA02";
}

.icon-chevron-right-alt::before {
  content: "\EA03";
}

.icon-chevron-right::before, .wiki-navigation .menu-item-has-children > a::after {
  content: "\EA04";
}

.icon-play::before, .icon-android-logo::before {
  content: "\EA05";
}

.icon-turkcell::before, .icon-turkcell-logo::before {
  content: "\EA06";
}

.icon-search::before {
  content: "\EA07";
}

.icon-menu::before {
  content: "\EA08";
}

/* @author Bilal Cinarli */
/** -------------------------------------------
    Icons Extend
    ------------------------------------------- **/
[class*="icon-"] {
  display: inline-block;
  font-size: 1em;
  line-height: .6;
  vertical-align: middle;
}

.icon-05x {
  font-size: .5rem;
}

.icon-075x {
  font-size: .75rem;
}

.icon-1--5x {
  font-size: 1.5rem;
}

.icon-2x {
  font-size: 2rem;
}

.icon-3x {
  font-size: 3rem;
}

.icon-4x {
  font-size: 4rem;
}

.icon-5x {
  font-size: 5rem;
}

.icon-6x {
  font-size: 6rem;
}

.icon-7x {
  font-size: 7rem;
}

/**
 * Particules
 */
/* @author Bilal Cinarli */
/** -------------------------------------------
 
    ------------------------------------------- **/
/**
 * Components
 */
/* @author Bilal Cinarli */
/** -------------------------------------------
    Components
    ------------------------------------------- **/
/* @author Bilal Cinarli */
/** -------------------------------------------
 
    ------------------------------------------- **/
/* @author Bilal Cinarli */
/** -------------------------------------------
 
    ------------------------------------------- **/
.main-nav {
  position: absolute;
}

@media screen and (min-width: 769px) {
  .main-nav {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 0;
  }
}

@media screen and (max-width: 768px) {
  .main-nav {
    right: 20px;
  }
}

@media screen and (max-width: 425px) {
  .main-nav {
    top: 70px;
    right: 0;
    width: 100%;
  }
  .main-nav .menu-main-menu-container {
    display: none;
    background-color: #3fb0e8;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
  }
  .main-nav .menu-main-menu-container.toggled {
    display: block;
  }
  .main-nav .menu-main-menu-container .menu-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  }
}

.main-nav .menu-item {
  position: relative;
  color: #fff;
}

@media screen and (min-width: 426px) {
  .main-nav .menu-item {
    padding-left: 30px;
    float: left;
  }
  .main-nav .menu-item::before {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 0;
    width: 30px;
    height: 16px;
    font-size: 0.625rem;
    line-height: 16px;
    text-align: center;
    content: "●";
  }
}

.main-nav .menu-item:first-child {
  padding-left: 0;
}

.main-nav .menu-item:first-child::before {
  display: none;
}

.main-nav a {
  padding: 0;
  font-size: 1rem;
  color: #fff;
}

.main-nav a:hover {
  text-decoration: underline;
}

@media screen and (max-width: 425px) {
  .main-nav a {
    display: block;
    padding: 10px 20px;
  }
}

.main-nav .menu-toggle {
  position: absolute;
  top: -45px;
  right: 20px;
  padding: 0;
}

@media screen and (min-width: 426px) {
  .main-nav .menu-toggle {
    display: none;
  }
}

/* @author Bilal Cinarli */
/** -------------------------------------------
 
    ------------------------------------------- **/
.wiki-navigation {
  margin-bottom: 20px;
  list-style: none;
}

.wiki-navigation > .menu-item {
  border-top: 1px solid #fff;
}

.wiki-navigation > .menu-item:first-child {
  border-top: 0;
}

.wiki-navigation > .menu-item > a {
  font-size: 1.125rem;
  text-transform: uppercase;
}

.wiki-navigation .menu-item-has-children > a::after {
  position: absolute;
  top: 12px;
  right: 0;
}

.wiki-navigation a {
  display: block;
  position: relative;
  padding: 5px 0;
  color: #4d4d4d;
  text-decoration: none;
}

.wiki-navigation .sub-menu {
  display: none;
  margin-bottom: 10px;
  list-style: none;
}

.wiki-navigation .sub-menu .menu-item {
  border: 0;
}

.wiki-navigation .sub-menu .sub-menu {
  margin-left: 20px;
}

.wiki-navigation .current-menu-ancestor > .sub-menu,
.wiki-navigation .current-menu-item > .sub-menu {
  display: block;
}

.wiki-navigation .current-menu-item > a {
  color: #3fb0e8;
}

/* @author Bilal Cinarli */
/** -------------------------------------------
 
    ------------------------------------------- **/
.footer-navigation {
  padding-top: 30px;
  text-align: center;
}

.footer-navigation .menu-item {
  display: inline-block;
  position: relative;
  height: 16px;
  padding: 0 0 0 30px;
  color: #4d4d4d;
}

.footer-navigation .menu-item::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 16px;
  font-size: 0.625rem;
  line-height: 16px;
  text-align: center;
  content: "●";
}

.footer-navigation .menu-item:first-child {
  padding-left: 0;
}

.footer-navigation .menu-item:first-child::before {
  display: none;
}

.footer-navigation .menu-item a {
  padding: 0;
  font-size: 1rem;
  color: #4d4d4d;
}

.footer-navigation .menu-item a:hover {
  text-decoration: underline;
}

/* @author Bilal Cinarli */
/** -------------------------------------------
 
    ------------------------------------------- **/
.store-links {
  display: block;
  padding-top: 15px;
  text-align: center;
}

.store-link {
  margin: 0 5px;
  color: #4d4d4d;
}

/* @author Bilal Cinarli */
/** -------------------------------------------
 
    ------------------------------------------- **/
.logo {
  color: #fff;
  font-size: 1rem;
  font-weight: normal;
  text-decoration: none;
  text-transform: uppercase;
}

.logo .bip-logo {
  display: inline-block;
  width: 55px;
  height: 55px;
  margin-right: 10px;
  background: center no-repeat;
  background-size: 100%;
  background-image: url("../images/logo.png");
  vertical-align: middle;
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 1.5dppx) {
  .logo .bip-logo {
    background-image: url("../images/logo@2x.png");
  }
}

/* @author Bilal Cinarli */
/** -------------------------------------------
 
    ------------------------------------------- **/
.footer-promo {
  display: table-cell;
  height: 220px;
  padding: 0 40px 0 370px;
  background: 60px center no-repeat;
  background-size: 222px 219px;
  font-size: 1.5rem;
  line-height: 1.1;
  vertical-align: middle;
  background-image: url("../images/logo-cogs.png");
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 1.5dppx) {
  .footer-promo {
    background-image: url("../images/logo-cogs@2x.png");
  }
}

@media screen and (max-width: 425px) {
  .footer-promo {
    height: auto;
    padding: 125px 20px 0;
    background-position: center 0;
    background-size: 125px auto;
  }
}

.footer-promo h3 {
  max-width: 324px;
  margin-bottom: 10px;
}

.footer-promo h3 img {
  width: 100%;
}

/* @author Bilal Cinarli */
/** -------------------------------------------
 
    ------------------------------------------- **/
.search-box {
  margin-bottom: 23px;
}

.search-box .item {
  position: relative;
}

.search-box .search {
  width: 100%;
  padding: 10px 35px;
  border-radius: 20px;
  border-color: #9d9d9d;
  background: #fff;
}

.search-box .search::-webkit-input-placeholder {
  color: #9d9d9d;
}

.search-box .search::-moz-placeholder {
  color: #9d9d9d;
}

.search-box .search:-ms-input-placeholder {
  color: #9d9d9d;
}

.search-box .icon-search {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  left: 10px;
}

/* @author Bilal Cinarli */
/** -------------------------------------------
 
    ------------------------------------------- **/
.cvm_single_video_player {
  margin-bottom: 20px;
}

/* @author Bilal Cinarli */
/** -------------------------------------------
 
    ------------------------------------------- **/
.homepage-widgets {
  width: 100%;
  max-width: 960px;
  margin: 20px auto;
  padding: 20px;
}

@media screen and (min-width: 769px) {
  .homepage-widgets {
    display: -ms-flexbox;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -ms-flex-pack: justify;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    padding: 20px 0;
  }
}

.homepage-widget {
  margin-bottom: 20px;
}

@media screen and (min-width: 769px) {
  .homepage-widget {
    width: 48%;
  }
}

.homepage-widget-title {
  font-size: 1.875rem;
}

.homepage-widget-list {
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
}

.homepage-widget-list-item {
  position: relative;
  padding: 10px 0;
  border-bottom: 1px solid #e5e5e5;
  font-size: 1.5rem;
}

.homepage-widget-list-url {
  color: #4d4d4d;
  text-decoration: none;
}

.homepage-widget-list-meta {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 0;
  color: #9d9d9d;
  font-size: 1rem;
}

.homepage-widget-list-excerpt {
  margin: 0 0 2px;
  color: #9d9d9d;
  font-size: 1.125rem;
}

.homepage-widget .view-all {
  font-size: 0.875rem;
  text-align: center;
}

.homepage-widget .view-all-link {
  color: #9d9d9d;
}

/* @author Bilal Cinarli */
/** -------------------------------------------
 
    ------------------------------------------- **/
.latest-stories {
  width: 100%;
  max-width: 960px;
  margin: 20px auto;
  padding: 20px;
}

@media screen and (min-width: 769px) {
  .latest-stories {
    padding: 20px 0;
  }
}

.latest-story-items {
  padding: 0;
  list-style: none;
}

@media screen and (max-width: 959px) {
  .latest-story-items {
    width: 470px;
    margin: 20px auto;
  }
}

@media screen and (max-width: 425px) {
  .latest-story-items {
    width: 100%;
  }
}

@media screen and (min-width: 960px) {
  .latest-story-items {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    height: 503px;
  }
}

.latest-story-item {
  display: inline-block;
  width: 225px;
  height: 150px;
  margin-bottom: 20px;
  vertical-align: middle;
}

@media screen and (max-width: 425px) {
  .latest-story-item {
    width: calc(50% - 10px);
    height: 100px;
  }
  .latest-story-item .latest-story-item-title {
    font-size: 1rem;
  }
}

.latest-story-item:nth-child(2n) {
  margin-right: 16px;
}

.latest-story-item-link {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  background: center no-repeat;
  background-size: cover;
  color: #fff;
  text-decoration: none;
}

.latest-story-item:first-child, .latest-story-item:last-child {
  width: 470px;
  height: 313px;
  margin-right: 0;
}

@media screen and (max-width: 425px) {
  .latest-story-item:first-child, .latest-story-item:last-child {
    width: 100%;
    height: 250px;
  }
}

.latest-story-item:first-child .latest-story-item-title, .latest-story-item:last-child .latest-story-item-title {
  font-size: 1.5rem;
}

.latest-story-item-content {
  position: absolute;
  bottom: 10px;
  left: 20px;
}

.latest-story-item-content p {
  margin: 0;
}

.latest-story-item-title {
  font-size: 1.25rem;
  font-weight: normal;
}

.latest-story-item-title i {
  margin: -2px 0 0 5px;
  color: #ffe100;
}

/* @author Bilal Cinarli */
/** -------------------------------------------
	Slider
------------------------------------------- **/
.section-slider {
  background: url("../images/header-bg.jpg") top center no-repeat;
}

.swiper-container {
  width: 100%;
  max-width: 960px;
  height: 475px;
}

.swiper-pagination-bullet {
  width: 14px;
  height: 14px;
  border: 2px solid #4d4d4d;
  background-color: transparent;
  opacity: 1;
}

.swiper-pagination-bullet-active {
  background-color: #4d4d4d;
}

.slider-content {
  display: table-cell;
  height: 475px;
  padding-right: 40%;
  color: #fff;
  font-size: 1.5rem;
  font-weight: 600;
  vertical-align: middle;
}

@media screen and (max-width: 768px) {
  .slider-content {
    padding-left: 20px;
  }
}

@media screen and (max-width: 425px) {
  .slider-content {
    padding: 20px;
    font-size: 1.25rem;
    vertical-align: top;
  }
}

.slider-content-title {
  font-size: 3rem;
  font-weight: 600;
}

@media screen and (max-width: 425px) {
  .slider-content-title {
    font-size: 2rem;
  }
}

.slider-image {
  position: absolute;
  right: 0;
  bottom: 0;
}

.slider-image img {
  display: block;
  max-width: 100%;
}

@media screen and (max-width: 768px) {
  .slider-image {
    right: 20px;
  }
}

@media screen and (max-width: 425px) {
  .slider-image {
    right: auto;
    left: 25%;
    width: 50%;
  }
}

/* @author Bilal Cinarli */
/** -------------------------------------------
 
    ------------------------------------------- **/
.copyright-text {
  padding-top: 25px;
  padding-bottom: 20px;
  text-align: center;
}

.copyright-text p {
  margin: 0;
  color: #4d4d4d;
  font-size: 1rem;
  line-height: 16px;
}

/**
 * Auxiliary
 */
/* @author Bilal Cinarli */
/** -------------------------------------------
 
    ------------------------------------------- **/
/**
 * Lastly, import Melange Auxiliary
 * For auxiliary usages, the final visibility or behaviour states of the elements, add the auxiliary definitions at last.
 * The auxiliary definitions are such as `.is-hidden`, `.has-action`
 */
/* @author Bilal Cinarli */
/** -------------------------------------------
    Auxiliary Definitions
    ------------------------------------------- **/
/* @author Bilal Cinarli */
/** -------------------------------------------
    Visibility Related
    ------------------------------------------- **/
/*
 * Hide element
 */
.is-hidden,
.hide {
  display: none;
}

/*
 * Sometimes you do not hide the element
 * `for-screenreader-only` the element will not hidden but
 * visually invisible for accessibility 
 */
.for-screenreader-only {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  clip: rect(0 0 0 0);
  clip: rect(0, 0, 0, 0);
}

/**
 * Device visibility
 */
@media screen and (max-width: 1223px) {
  .desktop-visible {
    display: none;
  }
}

@media screen and (min-width: 1224px) {
  .desktop-hidden,
  .tablet-visible {
    display: none;
  }
}

@media screen and (min-width: 421px) and (max-width: 1024px) {
  .tablet-hidden {
    display: none;
  }
}

@media screen and (min-width: 421px) {
  .mobile-visible {
    display: none;
  }
}

@media screen and (max-width: 420px) {
  .mobile-hidden,
  .tablet-visible {
    display: none;
  }
}