/************************************************
 * Base V1.0
 * Copyright 2016, Erhan UGUR
 * www.rouxweb.com
 * 07/12/2016
 ************************************************/

/* Table of Content
==================================================
	#Reset & Basics
	#Basic Styles
	#Typography
	#Table
	#Text Selection
	#Links
	#Fonts
	#Highlights
	#Lists
	#Forms
	#Buttons
	#Title Divider
	#Divider
	#Images
	#Back To Top
	#Blockquotes
	#Pullquotes
	#Dropcaps
	#Tabs
	#Toggle
    #Sidebar
	#Message Boxes
	#Navigation
	#Subnav
	#Feature Box
    #Latest Content
	#Pre & Code
    #Image Hover Effects
	#Animations
	#Misc */





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

	*, *:after, *:before
	{
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}





/* #Basic Styles
================================================== */
	body
	{
        -webkit-font-smoothing:	antialiased;
        -moz-osx-font-smoothing: grayscale;
        
		-webkit-text-size-adjust: 100%;

		overflow-x: hidden;
	}





/* #Typography
================================================== */
	h1, h2, h3, h4, h5
	{
        margin-bottom: 2em;
        
		color: #ffffff;
		font-weight: normal;
	}

	h1 a, h2 a, h3 a, h4 a, h5 a { font-weight: inherit; }
	h1                 { font-size: 1.714em; }
	h2                 { font-size: 1.571em; }
	h3                 { font-size: 1.428em; }
	h4                 { font-size: 1.285em; }
	h5                 { font-size: 1.142em; }

	.subheader         { color: #aaaaaa; }

	p                  { margin: 0em 0em 2em 0em; }
	p img              { margin: 0em; }

	em, i              { font-style: italic; }
	strong, b          { font-weight: bold; }
	underline, u       { text-decoration: underline; }
	line-through, t    { text-decoration: line-through; }

	small              { font-size: 80%; }
	medium             { font-size: 100%; }
	big                { font-size: 120%; }

	hr                 { border-top: 2px solid #eaeaea; border-width: 2px 0 0; clear: both; margin: 0em 0em 2em 0em; height: 0px; }





/* #Table (ref: materializecss)
================================================== */
    table
    {
        display: table;
        width: 100%;
        margin: 0em 0em 4em 0em;
    }

    table.bordered > thead > tr,
    table.bordered > tbody > tr                 { border-bottom: 1px solid #333843; }

    table.striped > tbody > tr:nth-child(odd)   { background-color: #f5f5f5; }

    table.highlight > tbody > tr                { transition: background-color 0.25s ease; }
    table.highlight > tbody > tr:hover          { background-color: #f0f0f0; color: #282c34; }

    table.centered thead tr th, 
    table.centered tbody tr td                  { text-align: center; }

    thead                                       { border-bottom: 1px solid #f0f0f0; }

    td, th
    {
        display: table-cell;
        padding: 0.5em 1em;
        
        font-size: 1em;
        line-height: 2em;
        text-align: left;
        vertical-align: middle;
    }

    th 
    { 
        color: #f0f0f0; 
    }

	/* clearing */
	table:after
	{
		clear: both; display: block; visibility: hidden; content: ""; font-size: 0; width: 0; height: 0; line-height: 0;
	}





/* #Text Selection
================================================== */
	::selection 			{ background: #eaeaea; color: #000000; }
	::-moz-selection 		{ background: #eaeaea; color: #000000; }





/* #Links
================================================== */
	a, a:visited 			{ color: inherit; text-decoration: underline; outline: 0; }
	a:hover, a:focus 		{ color: #74A8D7; }
	p a, p a:visited 		{ line-height: inherit; }

	a.underline				{ text-decoration: underline; }
	.underline-all	a		{ text-decoration: underline; }

	a
	{
		transition: all 0.25s ease;
	}





/* #Fonts
================================================== */
	/* size settings */
	.font.small				{ font-size: 80%; }
	.font.medium			{ font-size: 100%; }
	.font.big				{ font-size: 120%; }

	/* style settings */
	.font.i					{ font-style: italic; }
	.font.b					{ font-weight: bold; }
	.font.u					{ text-decoration: underline; }
	.font.t					{ text-decoration: line-through; }

	/* align settings */
	.font.left				{ text-align: left; }
	.font.right				{ text-align: right; }
	.font.center			{ text-align: center; }
	.font.justify			{ text-align: justify; }

	/* color settings */
	.font.color 			{ color: #2B2A29; }





/* #Highlights
================================================== */
	.highlights
	{
		padding: 0.2em 0.3em;
	}

	.highlights.dotted 		{ border-bottom: 1px dotted; }
	.highlights.dashed 		{ border-bottom: 1px dashed; }
	.highlights.line 		{ border-bottom: 1px solid; }
	.highlights.double 		{ border-bottom: 3px double; }

	/* color settings */
	.highlights.color 		{ background-color: #2B2A29; color: #ffffff; }
	.highlights.yellow 		{ background-color: #ffff99; }

	/* radius settings */
	.highlights.square		{ border-radius: 0px; }
	.highlights.round		{ border-radius: 3px; }
	.highlights.pill		{ border-radius: 20px; }





/* #Lists
================================================== */
	ul, ol			{ margin: 0em 0em 4em 0em; padding: 0em; }
	ul				{ list-style: disc inside; }
	ol				{ list-style: decimal inside; }

	ul.list-style ul, ul.list-style ol,
	ol.list-style ol, ol.list-style ul	{ margin: 0.5em 1em 0.5em 1em; }

	/* style settings */
	ul.list-style li, ol.list-style li
	{
		transition: padding 0.25s ease;
	}

	ul.list-style 				        li		    { padding: 0em 0em 0em 1em; }
	ol.list-style 				        li		    { padding: 0em 0em 0em 1em; }

	/* right-scroll */
	ul.list-style.right-scroll 			li:hover	{ padding: 0em 0em 0em 1.5em; }

    /* decimal */
	ol.list-style.decimal				{ list-style-type: decimal; }
	ol.list-style.alphabet				{ list-style-type: upper-latin; }
	ol.list-style.roman					{ list-style-type: upper-roman; }
	ol.list-style.lower-alphabet		{ list-style-type: lower-latin; }
	ol.list-style.lower-roman			{ list-style-type: lower-roman; }





/* #Forms
================================================== */
	input[type="text"],
	input[type="password"],
	input[type="email"],
	textarea,
	select
	{
		display: block;
		outline: none;

        width: 33%;
		max-width: 100%;
        height: 3em;

		padding: 0.5em 1em;
		margin: 0em;

		font: 1em 'Roboto', Arial, sans-serif;

		transition: all 0.25s ease;
	}

	select
    {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

	textarea
	{
        padding: 1em 1em;
		min-height: 6em;
	}

	input[type="checkbox"], input[type="radio"]
	{
		display: inline;

        margin: 0em 1em;
	}

	label
	{
		display: block;
		margin-bottom: 0.5em;
	}

	label span
	{
	}

	label span.required
	{
		padding-left: 0.5em;
		font-size: 0.857em;
		font-weight: normal;
	}

	/* sizes, full width */
	input[type="text"].small,
	input[type="password"].small,
	input[type="email"].small,
	textarea.small,
	select.small		{ width: 33% }

	input[type="text"].medium,
	input[type="password"].medium,
	input[type="email"].medium,
	textarea.medium,
	select.medium		{ width: 50% }

	input[type="text"].big,
	input[type="password"].big,
	input[type="email"].big,
	textarea.big,
	select.big		    { width: 75% }

	input[type="text"].block,
	input[type="password"].block,
	input[type="email"].block,
	textarea.block,
	select.block		{ width: 100% }

	/* color settings */
    label               { color: #f0f0f0; }
    label span.required { color: #ff4242; }

	input[type="text"],        input[type="password"],         input[type="email"],        textarea
	{
		background: #f5f5f5;
		color: inherit;
		border: 1px solid #eaeaea;
	}

	input[type="text"]:focus,  input[type="password"]:focus,   input[type="email"]:focus,  textarea:focus
	{
		color: #2B2A29;
		border: 1px solid #2B2A29;
	}

    select 
    {
        background: #f5f5f5;
		color: inherit;
		border: 1px solid #eaeaea;
        
        background-image:
        linear-gradient(45deg, transparent 50%, #000000 50%),
        linear-gradient(135deg, #000000 50%, transparent 50%),
        linear-gradient(to right, #eaeaea, #eaeaea);
        
        background-position:
        calc(100% - 14px) calc(1.25em + 0px),
        calc(100% - 9px) calc(1.25em + 0px),
        calc(100% - 2em) 0.5em;
        
        background-size:
        5px 5px,
        5px 5px,
        1px 2em;
        
        background-repeat: no-repeat;
    }

    select:focus        
    { 
        color: #2B2A29; 
        border: 1px solid #2B2A29; 
        
        background-image:
        linear-gradient(45deg, transparent 50%, #2B2A29 50%),
        linear-gradient(135deg, #2B2A29 50%, transparent 50%),
        linear-gradient(to right, #eaeaea, #eaeaea);
    }

	/* radius settings */
	input.square,
	textarea.square,
	select.square		{ border-radius: 0px; }

	input.round,
	textarea.round,
	select.round		{ border-radius: 3px; }

	input.pill,
	textarea.pill,
	select.pill		    { border-radius: 20px; }





/* #Buttons & Social Button Colors
================================================== */
    .button
    {
        position: relative;
        display: inline-block;
        overflow: hidden;
		cursor: pointer;

        padding: 0.5em 1em;

        font-size: 1em;
        line-height: 2em;
        text-align: center;

        text-decoration: none;
    }

    .button:hover
    {
        -webkit-filter: brightness(120%);
        filter: brightness(120%);
    }

    /* colors */
    .button,         a.button          { color: #282c34; }
    .button:hover,   a.button:hover    { color: #282c34; }

    .button                 { background-color: #2B2A29; }
    .button.orange          { background-color: #F17F00; }
    .button.brown           { background-color: #A97F02; }
    .button.blue            { background-color: #0089C4; }
    .button.green           { background-color: #C4AE74; }
    .button.purple          { background-color: #2B2A29; }
    .button.yellow          { background-color: #ffbd06; }
    .button.red             { background-color: #fc442c; }
    .button.grey            { background-color: #333333; }

	/* block buttons */
	.button.block			{ display: block; }

	/* size settings */
	.button.small 			{ padding: 0.5em 1em;    line-height: 1.5em;    font-size: 0.857em; }
	.button.medium			{ padding: 0.5em 1em;    line-height: 2em;      font-size: 1em;     }
	.button.big 			{ padding: 0.5em 1.5em;  line-height: 2.5em;    font-size: 1.142em; }

	/* radius settings */
	.button.square			{ border-radius: 0px; }
	.button.round		    { border-radius: 3px; }
	.button.pill			{ border-radius: 20px; }





/* #Title Divider
================================================== */
	.title-divider
	{
        width: 100%;
		margin: 0em 0em 2em 0em;
	}

	.title-divider .title
	{
        display: block;

		font-weight: 400;
	}

    .title-divider h1.title,
	.title-divider h2.title,
	.title-divider h3.title,
	.title-divider h4.title,
	.title-divider h5.title         { margin-bottom: 0em; }

	.title-divider .title span
	{
		font-weight: normal;
	}

	.title-divider .subtitle
	{
		position: relative;
		float: left;
		z-index: 1;

		font-size: 0.857em;
		line-height: 2em;
	}

	.title-divider .subtitle.left 	{ float: left; }
	.title-divider .subtitle.right 	{ float: right; }

	.title-divider .line
	{
		position: relative;

		width: 100%;
	}

	/* color settings */
	.title-divider				.title	              { color: #ffffff; }

	.title-divider 				.title 	a             { color: inherit; text-decoration: none; }
	.title-divider 				.title 	a:hover       { color: #2B2A29; }

	.title-divider 				.title	span          { opacity: 0.5; }

	.title-divider				.subtitle             { color: #aaaaaa; }

	.title-divider 				.subtitle 	a         { color: inherit; text-decoration: none; }
	.title-divider 				.subtitle 	a:hover   { color: #2B2A29; }

	.title-divider 				.line                 { border-top: 1px solid #aaaaaa; }

	/* clearing */
	.title-divider:after
	{
		clear: both; display: block; visibility: hidden; content: ""; font-size: 0; width: 0; height: 0; line-height: 0;
	}





/* #Divider
================================================== */
	.divider
	{
        position: relative;
        
		width: 100%;
		margin: 0em 0em 0.357em 0em;
	}

	/* color settings */
	.divider				{ border-top: 1px solid #eaeaea; color: #eaeaea; }
	.divider.double			{ border-top-width: 2px; }
	.divider.space			{ border: 0px; }

	.divider.color			{ border-color: #2B2A29; color: #2B2A29; }
	.divider.orange			{ border-color: #F17F00; color: #F17F00; }
	.divider.brown			{ border-color: #C4AE74; color: #C4AE74; }
	.divider.blue			{ border-color: #0089C4; color: #0089C4; }
	.divider.green			{ border-color: #C4AE74; color: #C4AE74; }
	.divider.purple			{ border-color: #2B2A29; color: #2B2A29; }

	.divider.solid			{ border-style: solid; }
	.divider.dotted			{ border-style: dotted; }
	.divider.dashed			{ border-style: dashed; }

    /* font awesome - <div class="divider color dotted fa fa-angle-double-down style"></div> */
	.divider.style
    {
        top: 0.5em;
        text-align: center;
    }

    .divider.style:before
    {
        position: relative;
        top: -0.5em;
        padding: 0em 1em;
        background-color: #ffffff;
        font: normal 1.142em FontAwesome;
    }

	/* clearing */
	.divider:after
	{
		clear: both; display: block; visibility: hidden; content: ""; font-size: 0; width: 0; height: 0; line-height: 0;
	}





/* #Images
================================================== */
	img.responsive
	{
		max-width: 100%;
		height: auto;
	}

	img.left
	{
		float: left;
		max-width: 100%;
		margin: 0.5em 1.5em 0.5em 0em;
	}

	img.right
	{
		float: right;
		max-width: 100%;
		margin: 0.5em 0em 0.5em 1.5em;
	}

	img.responsive.left
	{
		max-width: 40%;
	}

	img.responsive.right
	{
		max-width: 40%;
	}

	/* radius settings */
	img.square		{ border-radius: 0px; }
	img.round		{ border-radius: 3px; }
	img.pill		{ border-radius: 20px; }





/* #Back To Top
 * (activate in executor.js)
================================================== */
	.back-top
	{
		position: fixed;
		z-index: 1001;
        
		bottom: 1em;
		right: 1em;
	}

	.back-top a
	{
        display: inline-block;
        
		width: 3em;
		height: 3em;

		font-size: 1em;
		line-height: 3em;
		text-align: center;
        text-decoration: none;
	}

	/* color settings */
	.back-top 			a		 	{ background-color: #C4AE74; color: #282c34; }
	.back-top 			a:hover 	
    {
        -webkit-filter: brightness(120%);
        filter: brightness(120%);
    }

	/* radius settings */
	.back-top.square 	a			{ border-radius: 0px; }
	.back-top.round 	a 			{ border-radius: 3px; }
	.back-top.pill 	    a			{ border-radius: 20px; }





/* #Blockquotes
================================================== */
	blockquote
	{
		margin: 0em 0em 4em 0em;
		padding: 0em;
	}

	blockquote, blockquote p
	{
        font-size: 1em;
        line-height: 2em;
        font-style: italic;
	}

	blockquote cite
	{
		display: block;
		margin: 1em 0em 0em 0em;
        
        font-size: 1em;
        line-height: 2em;
		font-weight: bold;
	}

	blockquote cite span
	{
		font-weight: normal;
	}

	blockquote cite:before
	{
		content: "\2014 \0020";
	}

	/* color settings */
	blockquote		 		                    { color: #2B2A29; }

	blockquote				a					{ color: inherit; }
	blockquote 				a:hover				{ color: #000000; }

	blockquote 				cite				{ color: #2B2A29; }

	blockquote 				cite a				{ color: inherit; }
	blockquote 				cite a:hover		{ color: #000000; }

	blockquote 				cite span			{ color: #aaaaaa; }

	blockquote 				cite span a			{ color: inherit; }
	blockquote 				cite span a:hover	{ color: #2B2A29; }

	/* clearing */
	blockquote:after
	{
		clear: both; display: block; visibility: hidden; content: ""; font-size: 0; width: 0; height: 0; line-height: 0;
	}





/* #Pullquotes
================================================== */
	.pullquote
	{
		float: left;
        
		width: 60%;
		margin: 1em 1.5em 1em 0em;
		padding: 1em 1em 1em 0em;
        
        font-size: 1em;
        line-height: 2em;
		font-style: italic;
	}

	/* color settings */
	.pullquote		 			{ color: #2B2A29; border-right: 1px solid #eaeaea; }

	.pullquote		a			{ color: inherit; }
	.pullquote		a:hover		{ color: #000000; }

	/* right settings */
	.pullquote.right
	{
		float: right;
        
		margin: 1em 0em 1em 1.5em;
		padding: 1em 0em 1em 1em;
        
		border-right: none;
	}

	.pullquote.right			{ border-left: 1px solid #eaeaea; }

	/* clearing */
	.pullquote:after
	{
		clear: both; display: block; visibility: hidden; content: ""; font-size: 0; width: 0; height: 0; line-height: 0;
	}





/* #Dropcaps
================================================== */
	.dropcaps
	{
		display: block;
		float: left;

		width: 2em;
		height: 2em;
		margin: 0em 0.5em 0em 0em;
        
        font-size: 1em;
        line-height: 2em;
		text-align: center;
	}

	/* color settings */
	.dropcaps		 	{ background-color: #2B2A29; color: #ffffff; }

	/* radius settings */
	.dropcaps.square 	{ border-radius: 0px; }
	.dropcaps.round 	{ border-radius: 3px; }
	.dropcaps.pill 	    { border-radius: 20px; }





/* #Tabs
 * (activate in executor.js)
================================================== */
	.tabs
	{
		width: 100%;
		margin: 0em 0em 4em 0em;
	}

	.tabs ul.tab-nav
	{
        display: table;
		list-style: none;

		width: 100%;

		padding: 0em;
		margin: 0em;
        
        text-align: left;
	}

	.tabs ul.tab-nav li
	{
		display: inline-block;
        
		margin: 0em 0.357em 1em 0em;
        
        text-align: left;
	}

	.tabs ul.tab-nav li:last-child
	{
		margin: 0em 0em 1em 0em;
	}

	.tabs ul.tab-nav li a
	{
		display: block;
        
		padding: 0.5em 1em;

		font-size: 1em;
		line-height: 2em;
		text-decoration: none;
	}

	.tabs ul.tab-nav li.active { }

	.tabs .tab-container
	{
		width: 100%;
        
        transition: box-shadow 0.25s ease;
	}

    .tabs .tab-container:hover
	{
        box-shadow: 0px 0px 6px 0px rgba(11, 12, 13, 0.12);
	}

	.tabs .tab-content
	{
		padding: 1em;
	}

    /* icon settings */
	.tabs 				ul.tab-nav li a:before
	{
		padding-right: 1em;
        
        font: normal 1em FontAwesome;
	}

    .tabs 				ul.tab-nav li a:before            { content: "\f138"; }
    .tabs 				ul.tab-nav li a:hover:before      { content: "\f138"; }
    .tabs 				ul.tab-nav li.active a:before     { content: "\f13a"; }

	/* color #tabs settings */
	.tabs 				ul.tab-nav li a		        { background: #f5f5f5; 	color: #2B2A29; }
	.tabs 				ul.tab-nav li a:hover, 
    .tabs 			    ul.tab-nav li.active a		{ background: #2B2A29;  color: #ffffff; }

	/* color #container settings */
	.tabs		 		.tab-container		{ border: 1px solid #eaeaea; }

	/* right tabs settings */
	.tabs.right 		ul.tab-nav  		{ text-align: right; }

	/* center tabs settings */
	.tabs.center 		ul.tab-nav			{ text-align: center; }

	/* radius settings */
	.tabs.square 		ul.tab-nav li a		{ border-radius: 0px; }
	.tabs.square 		.tab-container		{ border-radius: 0px; }

	.tabs.round  		ul.tab-nav li a		{ border-radius: 3px; }
	.tabs.round  		.tab-container		{ border-radius: 3px; }

	.tabs.pill   		ul.tab-nav li a		{ border-radius: 20px; }
	.tabs.pill   		.tab-container		{ border-radius: 20px; }

    /* responsive settings */
    @media handheld, only screen and (max-width: 600px)
    {
        .tabs ul.tab-nav li
        {
            display: block;

            margin: 0em 0em 1em 0em;
        }
    }

	/* clearing */
	.tabs:after
	{
		clear: both; display: block; visibility: hidden; content: ""; font-size: 0; width: 0; height: 0; line-height: 0;
	}





/* #Toggle
 * (activate in executor.js)
================================================== */
	.toggle-wrap
	{
		width: 100%;
		margin: 0em 0em 4em 0em;
	}

	.toggle-wrap ul.toggle
	{
		display: block;
		list-style: none;

		padding: 0em;
		margin: 0em;
	}

	.toggle-wrap ul.toggle > li
	{
		margin: 0em 0em 1em 0em;
	}

	.toggle-wrap ul.toggle > li:last-child
	{
		margin: 0em 0em 0em 0em;
	}

	.toggle-wrap ul.toggle > li a.toggle-title
	{
		display: block;
		cursor: pointer;

		padding: 0.5em 1em;

		font-size: 1em;
		line-height: 2em;
		text-decoration: none;
	}

	/* color settings */
	.toggle-wrap	ul.toggle > li a.toggle-title 			{ background-color: #f5f5f5; color: #2B2A29; }
	.toggle-wrap	ul.toggle > li a.toggle-title:hover,
    .toggle-wrap	ul.toggle > li a.toggle-title.active    { background-color: #2B2A29; color: #ffffff; }

    .toggle-wrap .toggle-content                            { border: 1px solid #eaeaea; }

	/* toggle-content */
	.toggle-wrap .toggle-content
	{
        margin: 1em 0em;
		padding: 1em;
        
        transition: box-shadow 0.25s ease;
	}

    .toggle-wrap .toggle-content:hover
	{
        box-shadow: 0px 0px 6px 0px rgba(11, 12, 13, 0.12);
	}

	/* icon settings */
	.toggle-wrap ul.toggle > li a.toggle-title:before
	{
		padding-right: 1em;

        font: normal 1em FontAwesome;
	}

    .toggle-wrap ul.toggle > li a.toggle-title:before               { content: "\f138"; }
    .toggle-wrap ul.toggle > li a.toggle-title:hover:before         { content: "\f138"; }
    .toggle-wrap ul.toggle > li a.toggle-title.active:before        { content: "\f13a"; }

	/* radius settings */
	.toggle-wrap.square		ul.toggle > li a.toggle-title			{ border-radius: 0px; }
	.toggle-wrap.square		.toggle-content				            { border-radius: 0px; }

	.toggle-wrap.round     	ul.toggle > li a.toggle-title			{ border-radius: 3px; }
	.toggle-wrap.round		.toggle-content				            { border-radius: 3px; }

	.toggle-wrap.pill		ul.toggle > li a.toggle-title			{ border-radius: 20px; }
	.toggle-wrap.pill		.toggle-content				            { border-radius: 20px; }

	/* clearing */
	.toggle-wrap:after
	{
		clear: both; display: block; visibility: hidden; content: ""; font-size: 0; width: 0; height: 0; line-height: 0;
	}





/* #Sidebar
================================================== */
	.sidebar
	{
		position: relative;
        
        width: 100%;
        margin: 0em 0em 4em 0em;
	}

	.sidebar ul
	{
		position: relative;
		float: left;
		list-style: none;
        
		width: 100%;

		padding: 0em;
		margin: 0em;
	}

	.sidebar ul li
	{
        position: relative;
		float: left;
        overflow: hidden;
        
        width: 100%;
        
		margin: 0em 0em 0.357em 0em;
	}

	.sidebar ul li:last-child
	{
		margin: 0em 0em 0em 0em;
	}

    .sidebar ul li h2
	{
        margin-bottom: 0em;
        
        font-size: 1em;
		line-height: 2em;
    }

	.sidebar ul li a
	{
		display: block;

		padding: 0.5em 1em;

		font-size: 1em;
		line-height: 2em;
		text-decoration: none;
	}

	/* color settings */
	.sidebar		 		ul li a		        { background: #f5f5f5; color: #2B2A29; }
	.sidebar 				ul li a:hover		{ background: #2B2A29; color: #ffffff; }

    /* icon settings */
	.sidebar 				ul li a:before
	{
		position: relative;
		left: 0em;
        padding-right: 1em;
        font: normal 1em FontAwesome;
	}

    .sidebar 				ul li a:before            { content: "\f10c"; }
    .sidebar 			    ul li a:hover:before      { content: "\f192"; }
    .sidebar 				ul li.active a:before     { content: "\f192"; }

	/* radius settings */
	.sidebar.square 		ul li a		{ border-radius: 0px; }
	.sidebar.round 			ul li a		{ border-radius: 3px; }
	.sidebar.pill 			ul li a		{ border-radius: 20px; }

	/* clearing */
	.sidebar:after
	{
		clear: both; display: block; visibility: hidden; content: ""; font-size: 0; width: 0; height: 0; line-height: 0;
	}





/* #Message Boxes
 * (activate in executor.js)
================================================== */
	.message-box
	{
		position: relative;

        width: 100%;
		padding: 0.5em 2.5em 0.5em 1em;
		margin: 0em 0em 4em 0em;

		font-size: 1em;
        line-height: 2em;
	}

	.message-box strong
	{
		float: left;
        
		padding: 0em 0.5em 0em 0em;
        
		text-transform: uppercase;
	}

	.message-box .closemsg
	{
		position: absolute;
		cursor: pointer;

		right: 1em;
		top: 1em;

        font: normal 1em FontAwesome;

		transition: opacity 0.25s ease;
	}

    .message-box .closemsg:before
	{
		content: "\f00d";
    }

	.message-box .closemsg		   { opacity: 0.3; }
	.message-box .closemsg:hover   { opacity: 1; }

	/* color settings */
	.message-box.info
	{
		background-color: #dff2fa;
		color: #2e7893;
		border: 1px solid #d3edf8;
	}

	.message-box.info		a				{ color: inherit; }
	.message-box.info		a:hover			{ color: #85cfec; }

	.message-box.note
	{
		background-color: #f8f2cb;
		color: #8f5c0b;
		border: 1px solid #f3ebab;
	}

	.message-box.note		a				{ color: inherit; }
	.message-box.note		a:hover			{ color: #edca42; }

	.message-box.confirm
	{
		background-color: #e5f2c0;
		color: #4a630e;
		border: 1px solid #dceda7;
	}

	.message-box.confirm	a				{ color: inherit; }
	.message-box.confirm	a:hover			{ color: #aacf49; }

	.message-box.error
	{
		background-color: #ffd4d4;
		color: #cd0a0a;
		border: 1px solid #ffc6c6;
	}

	.message-box.error		a				{ color: inherit; }
	.message-box.error		a:hover			{ color: #d97676; }

	/* radius settings */
	.message-box.square 	{ border-radius: 0px; }
	.message-box.round  	{ border-radius: 3px; }
	.message-box.pill   	{ border-radius: 20px; }

	/* clearing */
	.message-box:after
	{
		clear: both; display: block; visibility: hidden; content: ""; font-size: 0; width: 0; height: 0; line-height: 0;
	}





/* #Navigation
================================================== */
    #navigation 
    {
        position: relative;
        float: left;
        width: 100%;
        top: 1.5em;
    }

    #navigation a
    {
		transition: all 0s ease;
    }

    #navigation ul 
    {
        position: relative;
        float: left;
        
        margin: 0em;
        padding: 0em;
        
        list-style: none;
    }

    #navigation ul a 
    {
        display: block;
        padding: 0.857em 1em;
        
        font-size: 1.142em;
        font-weight: 400;
        text-decoration: none;
    }

    #navigation ul li 
    {
        position: relative;
        float: left;
        
        margin: 0em 0.5em;
        padding: 0em;
        
		transition: all 0.25s ease;
    }

    #navigation ul li:first-child
    {
        margin-left: 0em;
    }

    #navigation ul li:last-child
    {
        margin-right: 0em;
    }

    #navigation ul li ul 
    {
        position: absolute;
        opacity: 0;
        visibility: hidden;
        
        top: 100%;
        left: 0;
        padding: 0em;
        
        z-index: 99999;
    }

    #navigation ul ul li 
    {
        float: none;
        width: 228px;
        
        margin: 0em;
    }

    #navigation ul ul ul 
    {
        top: 0;
        left: 100%;
        margin: 0em 0em 0em 1em;
    }

    #navigation ul ul 
    {
        margin: 1em 0em 0em 0em;
        
        box-shadow: 0px 0px 6px 0px rgba(11, 12, 13, 0.12);
    }

    #navigation ul ul ul:after 
    {
        position: absolute;
        opacity: 0;
        content: "";
        
        left: -1em;
        top: 0;
        width: 1em;
        height: 100%;
    }

    #navigation ul ul:before 
    {
        position: absolute;
        opacity: 0;
        content: "123";
        
        top: -1em;
        width: 100%;
        height: 1em;
    }

    #navigation ul li:hover > ul 
    {
        opacity: 1;
        visibility: visible;
    }

    #navigation ul li a:after, #navigation ul ul li a:after 
    {
        font-family: "FontAwesome";
        opacity: 0.5;
    }

    #navigation ul li a:after 
    {
        content: '\f107';
        padding-left: 0.5em;
    }

    #navigation ul ul li a:after 
    {
        position: absolute;
        
        content: '\f105';
        right: 1em;
    }

    #navigation ul li a:only-child:after 
    {
        content: '';
        padding: 0;
    }

    #navigation ul ul li a:only-child:after 
    {
        content: '';
    }

    #navigation ul li:hover ul a, #navigation ul ul a 
    {
        padding: 0.857em 2em 0.857em 1em !important;
    }

    #navigation ul ul 
    {
        opacity: 0;
        visibility: hidden;
        
		transition: all 0.25s ease;
        
        transform: translate3d(0, 15px, 0);
    }

    #navigation ul li:hover > ul 
    {
        opacity: 1;
        visibility: visible;
        
        transform: translate3d(0, 0, 0);
    }

    /* color settings */
    #navigation         ul a                    { color: #2B2A29; }
    #navigation         ul ul                   { background-color: #ffffff; }
    #navigation         ul ul li                { border-bottom: 1px solid #eaeaea; }
    #navigation         ul li:hover ul a, 
    #navigation         ul ul a                 { color: #2B2A29 !important; }
    #navigation         ul ul li:hover          { background-color: #f5f5f5 !important; }
    #navigation         ul li:hover             { background-color: #2B2A29; color: #ffffff; }
    #navigation         ul li:hover a           { color: #ffffff; }

    #navigation         ul ul li:last-child 
    {
        border-bottom: none;
    }

    /* radius settings */
    #navigation.square  ul li                   { border-radius: 0px; }
    #navigation.square  ul ul                   { border-radius: 0px; }
    #navigation.square  ul ul li                { border-radius: 0px; }
    #navigation.square  ul ul li:hover          { border-radius: 0px; }
    #navigation.square  ul ul li:first-child    { border-radius: 0px 0px 0px 0px; }
    #navigation.square  ul ul li:last-child     { border-radius: 0px 0px 0px 0px; }

    #navigation.round   ul li                   { border-radius: 3px; }
    #navigation.round   ul ul                   { border-radius: 3px; }
    #navigation.round   ul ul li                { border-radius: 0px; }
    #navigation.round   ul ul li:hover          { border-radius: 0px; }
    #navigation.round   ul ul li:first-child    { border-radius: 3px 3px 0px 0px; }
    #navigation.round   ul ul li:last-child     { border-radius: 0px 0px 3px 3px; }

    #navigation.pill    ul li                   { border-radius: 20px; }
    #navigation.pill    ul ul                   { border-radius: 20px; }
    #navigation.pill    ul ul li                { border-radius: 0px; }
    #navigation.pill    ul ul li:hover          { border-radius: 0px; }
    #navigation.pill    ul ul li:first-child    { border-radius: 20px 20px 0px 0px; }
    #navigation.pill    ul ul li:last-child     { border-radius: 0px 0px 20px 20px; }

	/* clearing */
	#navigation:after
	{
		clear: both; display: block; visibility: hidden; content: ""; font-size: 0; width: 0; height: 0; line-height: 0;
	}





/* #Navigation mobile
================================================== */
    #navigation-mobile 
    {
        position: relative;
        float: left;
        width: 100%;
    }

    #navigation-mobile ul 
    {
        display: block;
        
        margin: 0em;
        padding: 0em;
        
        list-style: none;
    }

    #navigation-mobile ul li 
    {
        margin: 0em;
        padding: 0em;
    }

    #navigation-mobile ul li a
    {
        display: block;
        padding: 0.857em 1em;
        
        font-size: 1.071em;
        text-decoration: none;
        
		transition: all 0.25s ease;
    }

    #navigation-mobile ul li a.border
    {
        padding: 0.785em 1em;
    }

    #navigation-mobile ul li a:before
    {
        font-family: "FontAwesome";
        opacity: 0.5;
        left: 1em;
        padding-right: 1em;
    }

    #navigation-mobile ul li a:before 
    {
        content: '\f0c9';
    }

    /* color settings */
    #navigation-mobile         ul li a              { color: #2B2A29; }
    #navigation-mobile         ul li a.border       { background-color: transparent; border: 1px solid #2B2A29; color: #2B2A29; }
    #navigation-mobile         ul li a:hover,
    #navigation-mobile.active  ul li a              { background-color: #2B2A29; color: #ffffff; }

    /* radius settings */
    #navigation-mobile.square  ul li a              { border-radius: 0px; }
    #navigation-mobile.round   ul li a              { border-radius: 3px; }
    #navigation-mobile.pill    ul li a              { border-radius: 20px; }

	/* clearing */
	#navigation-mobile:after
	{
		clear: both; display: block; visibility: hidden; content: ""; font-size: 0; width: 0; height: 0; line-height: 0;
	}





/* #Navigation mobile content
================================================== */
    /* side nav style */
    #navigation-mobile-content
    {
        display: none;
    }

    #jPanelMenu-menu
    {
        width: 100%;
        height: 100%;
    }

    #jPanelMenu-menu ul 
    {
        margin: 0em;
        padding: 0em;
        
        list-style: none;
        
        background-color: #282c34;
    }

    #jPanelMenu-menu li a
    {
        display: block;
        
        margin: 0em 0em 0.357em 0em;
        padding: 0.5em 1em;
        
        background-color: #20232a;
        
        font-size: 1em;
        line-height: 2em;
        text-decoration: none;
        color: #ffffff;
    }

    #jPanelMenu-menu li li a
    {
        padding-left: 2em;
        background-color: #282c34;
    }

    #jPanelMenu-menu li li li a
    {
        padding-left: 3em;
        background-color: #282c34;
    }

    #jPanelMenu-menu li li li a:before
    {
        font-family: "FontAwesome";
        opacity: 0.5;
        left: 1em;
        padding-right: 1em;
    }

    #jPanelMenu-menu li li li a:before
    {
        content: '\f105';
    }





/* #Subnav
================================================== */
    #subnav 
    {
        position: relative;
        float: left;
        width: 100%;
    }

    #subnav a
    {
		transition: all 0s ease;
    }

    #subnav ul 
    {
        position: relative;
        float: left;
        
        margin: 0em;
        padding: 0em;
        
        list-style: none;
    }

    #subnav ul a 
    {
        display: block;
        padding: 0.5em 1em;
        
        font-size: 0.857em;
        text-decoration: none;
    }

    #subnav ul li 
    {
        position: relative;
        float: left;
        
        margin: 0em 0.1785em;
        padding: 0em;
        
		transition: all 0.25s ease;
    }

    #subnav ul li:first-child
    {
        margin-left: 0em;
    }

    #subnav ul li:last-child
    {
        margin-right: 0em;
    }

    /* text içindeki icon için boşluk */
    #subnav ul li span
    {
        margin-right: 0.5em;
    }

    #subnav ul ul 
    {
        position: absolute;
        opacity: 0;
        visibility: hidden;
        
        z-index: 99999;
        
        top: 100%;
        left: 0;
        padding: 0em;
        margin: 1em 0em 0em 0em;
        
        box-shadow: 0px 0px 6px 0px rgba(11, 12, 13, 0.12);
    }

    #subnav ul ul li 
    {
        float: none;
        min-width: 100%;
        white-space: nowrap;
        
        margin: 0em;
    }

    #subnav ul ul:before 
    {
        position: absolute;
        opacity: 0;
        content: "123";
        
        top: -1em;
        width: 100%;
        height: 1em;
    }

    #subnav ul li:hover > ul 
    {
        opacity: 1;
        visibility: visible;
    }

    #subnav ul li a:after 
    {
        font-family: "FontAwesome";
        opacity: 0.5;
        
        content: '\f107';
        padding-left: 0.5em;
    }

    #subnav ul li a:only-child:after 
    {
        content: '';
        padding: 0;
    }

    #subnav ul ul 
    {
        opacity: 0;
        visibility: hidden;
        
		transition: all 0.25s ease;
        
        transform: translate3d(0, 15px, 0);
    }

    #subnav ul li:hover > ul 
    {
        opacity: 1;
        visibility: visible;
        
        transform: translate3d(0, 0, 0);
    }

    /* color settings */
    #subnav         ul a                    { color: #2B2A29; }
    #subnav         ul ul                   { background-color: #ffffff; }
    #subnav         ul ul li                { border-bottom: 1px solid #eaeaea; }
    #subnav         ul li:hover ul a, 
    #subnav         ul ul a                 { color: #2B2A29 !important; }
    #subnav         ul ul li:hover          { background-color: #f5f5f5 !important; }
    #subnav         ul li:hover             { background-color: #2B2A29; color: #ffffff; }
    #subnav         ul li:hover a           { color: #ffffff; }

    #subnav         ul ul li:last-child 
    {
        border-bottom: none;
    }

    /* radius settings */
    #subnav.square  ul li                   { border-radius: 0px; }
    #subnav.square  ul ul                   { border-radius: 0px; }
    #subnav.square  ul ul li                { border-radius: 0px; }
    #subnav.square  ul ul li:hover          { border-radius: 0px; }
    #subnav.square  ul ul li:first-child    { border-radius: 0px 0px 0px 0px; }
    #subnav.square  ul ul li:last-child     { border-radius: 0px 0px 0px 0px; }

    #subnav.round   ul li                   { border-radius: 3px; }
    #subnav.round   ul ul                   { border-radius: 3px; }
    #subnav.round   ul ul li                { border-radius: 0px; }
    #subnav.round   ul ul li:hover          { border-radius: 0px; }
    #subnav.round   ul ul li:first-child    { border-radius: 3px 3px 0px 0px; }
    #subnav.round   ul ul li:last-child     { border-radius: 0px 0px 3px 3px; }

    #subnav.pill    ul li                   { border-radius: 20px; }
    #subnav.pill    ul ul                   { border-radius: 20px; }
    #subnav.pill    ul ul li                { border-radius: 0px; }
    #subnav.pill    ul ul li:hover          { border-radius: 0px; }
    #subnav.pill    ul ul li:first-child    { border-radius: 20px 20px 0px 0px; }
    #subnav.pill    ul ul li:last-child     { border-radius: 0px 0px 20px 20px; }

    /* navigation ul > ul align settings */
    #subnav ul ul.open-left
    {
        left: auto;
        right: 0;
    }

	/* clearing */
	#subnav:after
	{
		clear: both; display: block; visibility: hidden; content: ""; font-size: 0; width: 0; height: 0; line-height: 0;
	}





/* #Feature box
================================================== */
    .feature-box 
    {
        position: relative;
        margin: 1.5em 0em 4em 0em;
        padding: 1em;
        
        transition: all 0.25s ease;
    }

    .feature-box:hover,
    .feature-box:focus,
    {
        box-shadow: 0px 0px 6px 0px rgba(11, 12, 13, 0.12);
    }

    .feature-box .box-icon
    {
        position: absolute;
        z-index: 100;
        top: -0.5em;
        left: 1em;
        
        width: 4em;
        height: 1em;
        
        line-height: 3em;
        text-align: center;
    }

    .feature-box .box-icon, 
    .feature-box .box-icon i 
    {
        transition: all 0.25s ease;
    }

    .feature-box .box-icon i
    { 
        position: relative;
        top: -1em;
        
        width: 3em;
        height: 3em;
        
        font-size: 1em;
        line-height: 3em;
        text-align: center;
    }

    .feature-box:hover .box-icon i,
    .feature-box:focus .box-icon i,
    {
        transform: rotate(360deg);
    }

    .feature-box .box-image
    {
        position: relative;
        overflow: hidden;
    }

    .feature-box .box-image img
    {
        display: block;
        width: auto;
        /*max-height: 260px;*/
        margin: auto;
        transition: filter 0.25s ease;
    }

    .feature-box:hover .box-image img
    {
        -webkit-filter: brightness(120%);
        filter: brightness(120%);
    }

    .feature-box .box-title 
    {
        display: block; 
        overflow: hidden;
        
        margin: 2em 0em 1em 0em;
        height: 4em;
    }

    .feature-box .box-title h1,
    .feature-box .box-title h2,
    .feature-box .box-title h3,
    .feature-box .box-title h4,
    .feature-box .box-title h5
    {
        margin: 0em;
    }

    .feature-box .box-desc 
    {
        display: block;
        overflow: hidden;
        
        height: 4em;
        margin: 0em 0em 2em 0em;
    }

    .feature-box .box-button
    {
        display: block; 
        margin: 1em 0em 0em 0em;
    }

    /* align settings */
    .feature-box.right           .box-icon           { left: auto; right: 1em; }
    .feature-box.center          .box-icon           { left: 50%; margin-left: -2em; }

    /* color settings */
    .feature-box                                     { border: 1px solid #eaeaea; }
    .feature-box                 .box-icon           { background-color: transparent; }
    .feature-box                 .box-icon i         { background-color: #333843; }

    .feature-box                 .box-icon i         { color: #2B2A29; }
    .feature-box:hover           .box-icon i         { background-color: #2B2A29; color: #ffffff; }

    .feature-box.orange                              { border: 1px solid #F17F00; }
    .feature-box.orange:hover                        { background-color: #F17F00; }

    .feature-box.orange          .box-icon i         { color: #F17F00; }
    .feature-box.orange:hover    .box-icon i         { background-color: #F17F00; color: #ffffff; }

    .feature-box.brown                               { border: 1px solid #A97F02; }
    .feature-box.brown:hover                         { background-color: #A97F02; }

    .feature-box.brown          .box-icon i          { color: #A97F02; }
    .feature-box.brown:hover    .box-icon i          { background-color: #A97F02; color: #ffffff; }

    .feature-box.green                               { border: 1px solid #C4AE74; }
    .feature-box.green:hover                         { background-color: #333843; }

    .feature-box.green          .box-icon i          { color: #C4AE74; }
    .feature-box.green:hover    .box-icon i          { background-color: #C4AE74; color: #333843; }

    .feature-box.blue                                { border: 1px solid #0089C4; }
    .feature-box.blue:hover                          { background-color: #0089C4; }

    .feature-box.blue          .box-icon i           { color: #0089C4; }
    .feature-box.blue:hover    .box-icon i           { background-color: #0089C4; color: #ffffff; }

    .feature-box.purple                              { border: 1px solid #2B2A29; }
    .feature-box.purple:hover                        { background-color: #2B2A29; }

    .feature-box.purple          .box-icon i         { color: #2B2A29; }
    .feature-box.purple:hover    .box-icon i         { background-color: #2B2A29; color: #ffffff; }

    .feature-box:hover .box-button
    {
        -webkit-filter: brightness(120%);
        filter: brightness(120%);
    }

    .feature-box:hover .box-title h3,
    .feature-box:hover .box-desc
    {
        color: #ffffff;
    }

    /* radius settings */
    .feature-box.square                              { border-radius: 0px; }
    .feature-box.square          .box-icon i         { border-radius: 0px; }
    .feature-box.square          .box-image          { border-radius: 0px; }
    .feature-box.square          .box-image img      { border-radius: 0px; }

    .feature-box.round                               { border-radius: 3px; }
    .feature-box.round           .box-icon i         { border-radius: 3px; }
    .feature-box.round           .box-image          { border-radius: 3px; }
    .feature-box.round           .box-image img      { border-radius: 3px; }

    .feature-box.pill                                { border-radius: 20px; }
    .feature-box.pill            .box-icon i         { border-radius: 20px; }
    .feature-box.pill            .box-image          { border-radius: 20px; }
    .feature-box.pill            .box-image img      { border-radius: 20px; }

	/* clearing */
	.feature-box:after
	{
		clear: both; display: block; visibility: hidden; content: ""; font-size: 0; width: 0; height: 0; line-height: 0;
	}





/* #Latest content
================================================== */
    .latest
    {
		position: relative;
		float: left;
        
        margin: 0em 0em 4em 0em;
    }

    .latest ul
    {
		position: relative;
		float: left;
        
		list-style: none;

		padding: 0em;
		margin: 0em;
    }

    .latest ul li
    {
		position: relative;
		float: left;
        
        width: 100%;
        
        margin: 0em 0em 2em 0em;
    }

    .latest li:last-child
    {
        margin: 0em 0em 0em 0em;
    }

    .latest li .latest-image
    {
        position: relative;
        float: left;
        
        width: 7em;
        height: auto;
        
        margin: 0em 1em 0em 0em;
        padding: 0.357em;
        
        transition: all 0.25s ease;
    }

    .latest li:hover .latest-image
    {
        box-shadow: 0px 0px 6px 0px rgba(11, 12, 13, 0.12);
    }

    .latest li .latest-image img
    {
        display: block;
        
        transition: filter 0.25s ease;
    }

    .latest li:hover .latest-image img
    {
        -webkit-filter: brightness(120%);
        filter: brightness(120%);
    }

    .latest li .latest-content
    {
        position: relative;
        display: inherit; 
        overflow: hidden;
    }

    .latest li .latest-content a
    {
        display: block;

		font-size: 1em;
        line-height: 2em;
    }

    /* color settings */
    .latest         li       .latest-image                { border: 1px solid #eaeaea; }
    .latest         li:hover .latest-image                { border: 1px solid #2B2A29; }

    .latest         li       .latest-content a            { color: inherit; }
    .latest         li:hover .latest-content a            { color: #2B2A29; }
    
    /* radius settings */
    .latest.square  li .latest-image        { border-radius: 0px; }
    .latest.square  li .latest-image   img  { border-radius: 0px; }

    .latest.round   li .latest-image        { border-radius: 3px; }
    .latest.round   li .latest-image   img  { border-radius: 3px; }

    .latest.pill    li .latest-image        { border-radius: 20px; }
    .latest.pill    li .latest-image   img  { border-radius: 20px; }

	/* clearing */
	.latest:after
	{
		clear: both; display: block; visibility: hidden; content: ""; font-size: 0; width: 0; height: 0; line-height: 0;
	}





/* #Pre & Code
================================================== */
	pre, code
	{
		overflow: auto;
		display: block;

		padding: 1em;
	    margin: 0em 0em 2em 0em;

	    font-family: monospace;
	    font-size: 0.857em;
        line-height: 2em;
	}

	/* color settings */
	pre, 				code					{ background: #f5f5f5; border: 0px; 	border-left: 2px solid #2B2A29; }

	/* right settings */
	pre.right, 			code.right				{                      border: 0px; 	border-right: 2px solid #2B2A29; }

	/* radius settings */
	pre.square, 		code.square				{ border-radius: 0px; }
	pre.round, 		    code.round    			{ border-radius: 3px; }
	pre.pill, 	    	code.pill				{ border-radius: 20px; }





/* #Image Hover Effects
================================================== */
    /*
	 * hover - 1
	 ----------------------------------------------*/
    .hover-1
    {
        position: absolute;
        overflow: hidden;
        
        top: 0em;
        
        width: 100%;
   		height: 100%;
        
		margin: 0em;
        padding: 0em;
        
        transform: scale(1); /* içinde bulunduğu divin dışına taşmasını engelliyor. border-radius fix */
    }

    .hover-1 .mask
	{
		position: absolute;

		top: -100%;
		left: 0em;

		width: 100%;
   		height: 100%;
        
        margin: 0em;
        padding: 0em;

		transition: top 0.25s ease;
	}

	.hover-1:hover .mask
	{
		top: 0em;
	}

    .hover-1 .mask-button
	{
		position: absolute;

		width: 100%;
   		height: 100%;

		top: -100%;
		left: 0em;
        
        margin-top: -1.5em;
        
        text-align: center;

		transition: top 0.25s ease;
	}

    .hover-1:hover .mask-button
	{
		top: 50%;
	}

	.hover-1 .mask-button a
	{
		display: inline-block;
		cursor: pointer;

		width: 100%;
		height: 3em;
        
        margin: 0em 0em;

		font-size: 1em;
		text-align: center;
        text-decoration: none;
		line-height: 3em;
	}

    /* color settings */
	.hover-1 				    .mask 			          {  }
	.hover-1 					.mask-button a		      { background-color: rgba(11, 12, 13, 0.5); color: #C4AE74; }

	.hover-1 					.mask-button a:hover	  { background-color: #333843; }

	/* radius settings */
	.hover-1.square 		                              { border-radius: 0px; }
	.hover-1.square 		    .mask-button a		      { border-radius: 0px; }

	.hover-1.round 		                                  { border-radius: 3px; }
	.hover-1.round 			    .mask-button a		      { border-radius: 3px; }

	.hover-1.pill 		                                  { border-radius: 20px; }
	.hover-1.pill 			    .mask-button a		      { border-radius: 20px; }





/* #Animations
================================================== */
	/*
	 * ripple -> button ve sidebar da kullaniliyor.
     * ayrica executer.js dosyasinda js mevcut.
	 ----------------------------------------------*/
    .ripple
    {
        position: absolute;
        background: rgba(11,12,13,.25);
        border-radius: 100%;
        transform: scale(0.2);
        opacity:0;
        pointer-events: none;
        -webkit-animation: ripple .75s ease-out;
        -moz-animation: ripple .75s ease-out;
        animation: ripple .75s ease-out;
    }

    @-webkit-keyframes ripple
    {
        from
        {
            opacity:1;
        }
        to
        {
            transform: scale(2);
            opacity: 0;
        }
    }

    @-moz-keyframes ripple
    {
        from
        {
            opacity:1;
        }
        to
        {
            transform: scale(2);
            opacity: 0;
        }
    }

    @keyframes ripple
    {
        from
        {
            opacity:1;
        }
        to
        {
            transform: scale(2);
            opacity: 0;
        }
    }





/* #Misc
================================================== */
    .add-width             { width: 100%; }
	.add-remove-bottom     { margin-bottom: 0 !important; }
	.add-half-bottom       { margin-bottom: 1em !important; }
	.add-bottom            { margin-bottom: 2em !important; } /* standard bottom */
	.add-big-bottom        { margin-bottom: 4em !important; } 
    .add-uppercase         { text-transform: uppercase; }
    .add-right             { float: right; }
    .add-left              { float: left; }
    .add-flex-right        { display: inline-flex; justify-content: flex-end; }
    .add-flex-left         { display: inline-flex; justify-content: flex-start; }
    .add-flex-center       { display: inline-flex; justify-content: center; }