.view-after {background: rgb(61, 51, 91) !important ;}
.mdi-comment-processing::before { content: ""; }
.mdi-email::before { content: ""; }
.mdi-facebook::before { content: ""; }
.mdi-facebook-messenger::before { content: ""; }
.mdi-github-circle::before { content: ""; }
.mdi-heart::before { content: ""; }
.mdi-json::before { content: ""; }
.mdi-language-css3::before { content: ""; }
.mdi-language-html5::before { content: ""; }
.mdi-language-javascript::before { content: ""; }
.mdi-language-php::before { content: ""; }
.mdi-language-python::before { content: ""; }
.mdi-link::before { content: ""; }
.mdi-linkedin::before { content: ""; }
.mdi-nodejs::before { content: ""; }
.mdi-skype::before { content: ""; }
.mdi-whatsapp::before { content: ""; }
.mdi-xml::before { content: ""; }
.CodeMirror { font-family: monospace; height: 300px; color: black; }
.CodeMirror-lines { padding: 4px 0px; }
.CodeMirror pre { padding: 0px 4px; }
.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler { background-color: white; }
.CodeMirror-gutters { border-right: 1px solid rgb(221, 221, 221); background-color: rgb(247, 247, 247); white-space: nowrap; }
.CodeMirror-cursor { border-left: 1px solid black; border-right: none; width: 0px; }
.CodeMirror div.CodeMirror-secondarycursor { border-left: 1px solid silver; }
.cm-fat-cursor .CodeMirror-cursor { width: auto; background: rgb(119, 238, 119); border: 0px !important; }
.cm-fat-cursor div.CodeMirror-cursors { z-index: 1; }
.CodeMirror-overwrite .CodeMirror-cursor { }
.cm-s-default .cm-string { color: rgb(170, 17, 17); }
.cm-s-default .cm-bracket { color: rgb(153, 153, 119); }
.cm-s-default .cm-tag { color: rgb(17, 119, 0); }
.cm-s-default .cm-attribute { color: rgb(0, 0, 204); }
.cm-s-default .cm-error { color: rgb(255, 0, 0); }
div.CodeMirror span.CodeMirror-matchingbracket { color: rgb(0, 255, 0); }
div.CodeMirror span.CodeMirror-nonmatchingbracket { color: rgb(255, 34, 34); }
.CodeMirror { position: relative; overflow: hidden; background: white; }
.CodeMirror-scroll { margin-bottom: -30px; margin-right: -30px; padding-bottom: 30px; height: 100%; outline: none; position: relative; overflow: scroll !important; }
.CodeMirror-sizer { position: relative; border-right: 30px solid transparent; }
.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler { position: absolute; z-index: 6; display: none; }
.CodeMirror-vscrollbar { right: 0px; top: 0px; overflow-x: hidden; overflow-y: scroll; }
.CodeMirror-hscrollbar { bottom: 0px; left: 0px; overflow-y: hidden; overflow-x: scroll; }
.CodeMirror-scrollbar-filler { right: 0px; bottom: 0px; }
.CodeMirror-gutter-filler { left: 0px; bottom: 0px; }
.CodeMirror-gutters { position: absolute; left: 0px; top: 0px; min-height: 100%; z-index: 3; }
.CodeMirror-lines { cursor: text; min-height: 1px; }
.CodeMirror pre { border-radius: 0px; border-width: 0px; background: transparent; font-family: inherit; font-size: inherit; margin: 0px; white-space: pre; word-wrap: normal; line-height: inherit; color: inherit; z-index: 2; position: relative; overflow: visible; -webkit-tap-highlight-color: transparent; font-variant-ligatures: none; }
.CodeMirror-code { outline: none; }
.CodeMirror-scroll, .CodeMirror-sizer, .CodeMirror-gutter, .CodeMirror-gutters, .CodeMirror-linenumber { box-sizing: content-box; }
.CodeMirror-measure { position: absolute; width: 100%; height: 0px; overflow: hidden; visibility: hidden; }
.CodeMirror-cursor { position: absolute; pointer-events: none; }
.CodeMirror-measure pre { position: static; }
div.CodeMirror-cursors { visibility: hidden; position: relative; z-index: 3; }
.CodeMirror-focused div.CodeMirror-cursors { visibility: visible; }
.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: rgb(215, 212, 240); }
.cm-s-material { background-color: rgb(38, 50, 56); color: rgb(233, 237, 237); }
.cm-s-material .CodeMirror-gutters { background: rgb(38, 50, 56); color: rgb(83, 127, 126); border: none; }
.cm-s-material .CodeMirror-guttermarker, .cm-s-material .CodeMirror-guttermarker-subtle, .cm-s-material .CodeMirror-linenumber { color: rgb(83, 127, 126); }
.cm-s-material .CodeMirror-cursor { border-left: 1px solid rgb(248, 248, 240); }
.cm-s-material div.CodeMirror-selected { background: rgba(255, 255, 255, 0.15); }
.cm-s-material .CodeMirror-line::selection, .cm-s-material .CodeMirror-line > span::selection, .cm-s-material .CodeMirror-line > span > span::selection { background: rgba(255, 255, 255, 0.1); }
.cm-s-material .CodeMirror-activeline-background { background: rgba(0, 0, 0, 0); }
.cm-s-material .cm-keyword { color: rgb(199, 146, 234); }
.cm-s-material .cm-operator { color: rgb(233, 237, 237); }
.cm-s-material .cm-variable-2 { color: rgb(128, 203, 196); }
.cm-s-material .cm-variable-3 { color: rgb(130, 177, 255); }
.cm-s-material .cm-builtin { color: rgb(222, 203, 107); }
.cm-s-material .cm-atom { color: rgb(247, 118, 105); }
.cm-s-material .cm-number { color: rgb(247, 118, 105); }
.cm-s-material .cm-def { color: rgb(233, 237, 237); }
.cm-s-material .cm-string { color: rgb(195, 232, 141); }
.cm-s-material .cm-string-2 { color: rgb(128, 203, 196); }
.cm-s-material .cm-comment { color: rgb(84, 110, 122); }
.cm-s-material .cm-variable { color: rgb(130, 177, 255); }
.cm-s-material .cm-tag { color: rgb(128, 203, 196); }
.cm-s-material .cm-meta { color: rgb(128, 203, 196); }
.cm-s-material .cm-attribute { color: rgb(255, 203, 107); }
.cm-s-material .cm-property { color: rgb(128, 203, 174); }
.cm-s-material .cm-qualifier { color: rgb(222, 203, 107); }
.cm-s-material .cm-variable-3 { color: rgb(222, 203, 107); }
.cm-s-material .cm-tag { color: rgb(255, 83, 112); }
.cm-s-material .cm-error { color: rgb(255, 255, 255); background-color: rgb(236, 95, 103); }
.cm-s-material .CodeMirror-matchingbracket { text-decoration: underline; color: white !important; }
[class*="container"] { margin-right: auto; margin-left: auto; padding-right: 16px; padding-left: 16px; width: 100%; max-width: 1200px; }
[class*="container"][class*="-30"] { padding-right: 32px; padding-left: 32px; }
[class^="row"], .row { box-sizing: border-box; display: flex; -webkit-box-flex: 0; flex: 0 1 auto; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-flow: row wrap; margin-right: -16px; margin-left: -16px; position: relative; }
[class^="row"][class*="space-rem"] { margin-right: -1rem; margin-left: -1rem; }
[class^="row"][class*="space-8"] { margin-right: -8px; margin-left: -8px; }
[class^="row"][class*="space-4"] { margin-right: -4px; margin-left: -4px; }
[class^="row"][class*="no-margin"] { margin-right: 0px; margin-left: 0px; }
[class^="row"][class*="reverse"] { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; flex-direction: row-reverse; }
[class^="col-"][class*="reverse"] { -webkit-box-orient: vertical; -webkit-box-direction: reverse; flex-direction: column-reverse; }
[class*="col-"] { box-sizing: border-box; -webkit-box-flex: 0; flex: 0 0 100%; padding-right: 16px; padding-left: 16px; max-width: 100%; }
[class^="row"][class*="space-rem"] > [class*="col-"] { padding: 1rem; }
[class^="row"][class*="space-8"] > [class*="col-"] { padding: 8px; }
[class^="row"][class*="space-4"] > [class*="col-"] { padding: 4px; }
[class^="row"][class*="no-space"] > [class*="col-"] { padding: 0px; }
[class^="col"][class*="-xs-offset-1"] { margin-left: 8.333%; }
[class^="col"][class*="-xs-offset-2"] { margin-left: 16.667%; }
[class^="col"][class*="-xs-offset-3"] { margin-left: 25%; }
[class^="col"][class*="-xs-offset-4"] { margin-left: 33.333%; }
[class^="col"][class*="-xs-offset-5"] { margin-left: 41.667%; }
[class^="col"][class*="-xs-offset-6"] { margin-left: 50%; }
[class^="col"][class*="-xs-offset-7"] { margin-left: 58.333%; }
[class^="col"][class*="-xs-offset-8"] { margin-left: 66.667%; }
[class^="col"][class*="-xs-offset-9"] { margin-left: 75%; }
[class^="col"][class*="-xs-offset-10"] { margin-left: 83.333%; }
[class^="col"][class*="-xs-offset-11"] { margin-left: 91.667%; }
html:lang(ar) [class^="col"][class*="-xs-offset-1"] { margin-right: 8.333%; }
html:lang(ar) [class^="col"][class*="-xs-offset-2"] { margin-right: 16.667%; }
html:lang(ar) [class^="col"][class*="-xs-offset-3"] { margin-right: 25%; }
html:lang(ar) [class^="col"][class*="-xs-offset-4"] { margin-right: 33.333%; }
html:lang(ar) [class^="col"][class*="-xs-offset-5"] { margin-right: 41.667%; }
html:lang(ar) [class^="col"][class*="-xs-offset-6"] { margin-right: 50%; }
html:lang(ar) [class^="col"][class*="-xs-offset-7"] { margin-right: 58.333%; }
html:lang(ar) [class^="col"][class*="-xs-offset-8"] { margin-right: 66.667%; }
html:lang(ar) [class^="col"][class*="-xs-offset-9"] { margin-right: 75%; }
html:lang(ar) [class^="col"][class*="-xs-offset-10"] { margin-right: 83.333%; }
html:lang(ar) [class^="col"][class*="-xs-offset-11"] { margin-right: 91.667%; }
.center-xs { -webkit-box-pack: center; justify-content: center; text-align: center; }
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, form, label, 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: 0px; padding: 0px; border: 0px; font-size: 100%; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
html, body { height: 100%; }
body { font-size: 14px; font-family: sans-serif; line-height: 1.5; color: rgb(90, 90, 90); background-color: rgb(242, 245, 247); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; position: relative; height: 100%; }
html:lang(ar) { direction: rtl; }
*, ::after, ::before { box-sizing: border-box; }
::-webkit-scrollbar { width: 10px; background-color: transparent; border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
::-webkit-scrollbar:hover { background-color: rgba(0, 0, 0, 0.05); }
::-webkit-scrollbar-thumb:vertical { background: padding-box rgba(0, 0, 0, 0.2); border-radius: 5px; border: 2px solid transparent; min-height: 10px; }
::-webkit-scrollbar-thumb:vertical:active { background: rgba(0, 0, 0, 0.3); border-radius: 5px; }
::selection { color: rgb(245, 247, 250); background: rgb(157, 165, 109); }
svg:not(:root) { overflow: hidden; }
blockquote, q { quotes: none; }
blockquote::before, blockquote::after, q::before, q::after { content: none; }
code, kbd, pre, samp { font-family: monospace, serif; font-size: 1em; }
pre { white-space: pre-wrap; word-wrap: break-word; }
h1, h2, h3, h4, h5, h6 { font-family: Ubuntu, sans-serif; }
html:lang(ar) h1, h2, h3, h4, h5, h6 { font-family: Ubuntu, sans-serif; }
h3{ font-size: 34px !important; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 400; }
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small, .h1 small, .h2 small, .h3 small, .h4 small, .h5 small, .h6 small { line-height: 1.35; letter-spacing: -0.02em; opacity: 0.54; font-size: 0.6em; }
h4, .h4 { font-size: 24px; line-height: 32px; }
p { font-size: 14px; font-weight: 700; letter-spacing: 0px; margin: 0px 0px 16px; }
blockquote { font-family: Ubuntu, sans-serif; position: relative; font-size: 16px; font-weight: 300; font-style: italic; line-height: 1.35; letter-spacing: 0.08em; padding: 20px; width: auto; max-width: 100%; display: table; }
html:lang(ar) blockquote { font-family: Ubuntu, sans-serif; }
blockquote::before { content: "“"; position: absolute; left: -50px; font-size: 120px; line-height: 20px; top: 37px; font-family: serif; }
blockquote::after { content: "”"; font-size: 120px; line-height: 20px; position: relative; right: -50px; float: right; top: 58px; font-family: serif; }
mark { background-color: rgb(244, 255, 129); }
dt { font-weight: 700; }
address { font-size: 12px; line-height: 1; font-style: normal; }
address, ul, ol { font-weight: 400; letter-spacing: 0px; }
ul, ol { font-size: 14px; line-height: 24px; list-style: none; }
i[class^="mdi"], i[class^="ion"] { min-width: 20px; display: inline-block; }
hr { border-right: none; border-bottom: none; border-left: none; border-image: initial; border-top: 1px solid rgba(0, 0, 0, 0.15); margin-top: 15px; margin-bottom: 15px; }
hr[size="+"] { margin-top: 30px; margin-bottom: 30px; }
[class^="mdi-"] { display: inline-block; font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; line-height: 1; font-family: "Material Design Icons"; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; transform: translate(0px, 0px); }
form { display: block; }
label, legend { font-weight: bold; line-height: 30px; font-size: 12px; color: rgba(112, 129, 134, 0.7); }
form label { margin-bottom: 14px; display: block; clear: both; text-transform: uppercase; }
fieldset label { font-weight: normal; }
fieldset { margin-top: 24px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.2); padding: 0px 12px 12px; }
legend { margin-bottom: 5px; }
input[class*="md"], select[class*="md"], textarea[class*="md"] { height: 48px; padding: 15px 12px; line-height: 16px; }
input[class*="round"], select[class*="round"], textarea[class*="round"] { border-radius: 19px; padding-right: 16px; padding-left: 16px; }
input[class*="md"][class*="round"], select[class*="md"][class*="round"], textarea[class*="md"][class*="round"] { border-radius: 23px; }
textarea { height: auto; resize: vertical; }
input[type="color"] { width: 100px; padding: 0px; }
input[type="file"] { padding: 8px 12px; }
input[type="image"] { padding: 0px; width: auto; }
input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; display: inline-block; position: relative; top: 5px; transition: all 0.4s ease; }
input:focus, select:focus, textarea:focus { outline: 0px; color: rgb(157, 165, 109); border: 1px solid rgb(157, 165, 109); }
input[disabled], select[disabled], , fieldset[disabled] input, fieldset[disabled] select, fieldset[disabled] textarea { outline: 0px; background: rgba(0, 0, 0, 0.1); cursor: not-allowed; }
input[readonly], select[readonly], , fieldset[readonly] input, fieldset[readonly] select, fieldset[readonly] textarea { outline: 0px; cursor: not-allowed; }
::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.4); font-weight: normal; }
input:focus::-webkit-input-placeholder,  { font-style: oblique; }
input[type="number"], input[type="date"], input[type="time"] { padding: 0px 0px 0px 12px; }
html:lang(ar) input[type="number"], html:lang(ar) input[type="date"], html:lang(ar) input[type="time"] { padding: 0px 12px 0px 0px; }
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; border-left: 1px solid rgb(220, 220, 220); width: 20px; height: 36px; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAATCAYAAACz13xgAAAAb0lEQVQYle2RsRGCYBhDsw/0zKEriDPAOP/ly2vAqWhYw0Y4PR3B16VIihfpBTABk94BbsAGbFU1SpKSXJLstnvbfZIduCrJans42rYH4KE/XwDLD1fLabe11rXWutOuJFXVePyR5P4xmWROMh/5CfCITXC8//HkAAAAAElFTkSuQmCC") center center no-repeat rgba(0, 0, 0, 0.02); }
html:lang(ar) input[type="number"]::-webkit-inner-spin-button { border-left: 0px; border-right: 1px solid rgba(0, 0, 0, 0.08); }
input[type="date"]::-webkit-inner-spin-button, input[type="time"]::-webkit-inner-spin-button { height: 36px; }
input[type="date"]::-webkit-calendar-picker-indicator { margin: 0px 5px; }
input[type="date"]::-webkit-calendar-picker-indicator:hover { background-color: transparent; cursor: pointer; color: rgb(157, 165, 109); }
.checkbox.box, .radio.box { box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 3px; margin: 8px; }
.checkbox.box input, .radio.box input { display: none; }
.checkbox.box span, .radio.box span { display: block; position: relative; top: 0px; border: 2px solid transparent; margin: 0px !important; }
.checkbox.box span::before, .checkbox.box span::after, .radio.box span::before, .radio.box span::after { position: absolute; top: -5px; left: -8px; margin-top: 0px !important; }
html:lang(ar) .checkbox.box span::before, html:lang(ar) .checkbox.box span::after, html:lang(ar) .radio.box span::before, html:lang(ar) .radio.box span::after { position: absolute; top: -5px; left: inherit; right: -8px; margin-top: 0px !important; }
.checkbox.box span::before, .radio.box span::before { opacity: 0; }
.checkbox.box:hover span::before, .radio.box:hover span::before { opacity: 1; }
.checkbox.box input[type="checkbox"]:checked ~ span, .radio.box input[type="radio"]:checked ~ span { border: 2px solid rgb(157, 165, 109); }
.checkbox.box input[type="checkbox"]:checked ~ span::before { opacity: 1; }
select { -webkit-appearance: none; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAU0lEQVQ4je3NMQqAMAxA0bd11EFw9RIu0h6j3v8oLhkcClWhmw8C5QdSfkNMSI2eYtd1IDd6jl3XihPl1kq09ckBWFCxx9Ror8zx6xnvT7aY30gXjbMEtUUJ0vMAAAAASUVORK5CYII="); background-repeat: no-repeat; background-position: calc(100% - 10px) center; }
html:lang(ar) select { background-position: 10px center; }
select option { font-size: 16px; }
input[type="range"] { -webkit-appearance: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); width: 100%; height: 6px; margin: 0px; border-color: transparent; padding: 0px; border-radius: 14px; background: rgba(0, 0, 0, 0.08); box-shadow: none; outline: none; cursor: pointer; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; background: -webkit-radial-gradient(center, rgb(157, 165, 109) 20%, rgb(255, 255, 255) 35%, rgb(255, 255, 255) 70%) rgb(157, 165, 109); border: 2px solid rgb(255, 255, 255); border-radius: 50%; box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 2px; transition: all 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75); }
input[type="range"]:focus::-webkit-slider-thumb { border: 2px solid rgb(157, 165, 109); }
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.3); }
.valid-msg { float: right; font-style: italic; font-weight: normal; font-size: 11px; }
html:lang(ar) .valid-msg { float: left; }
button, [class*='btn'] { background: rgb(55, 46, 82) !important;}
input[type="button"], input[type="reset"], input[type="submit"], button, [class^="btn"], [class*=" btn"] { position: relative; cursor: pointer; overflow: hidden; white-space: nowrap; touch-action: manipulation; display: inline-block; vertical-align: middle; text-transform: capitalize; letter-spacing: 0.6px; font-weight: 500; font-family: inherit; width: auto; background: rgb(157, 165, 109); color: rgb(255, 255, 255); font-size: 13px; padding: 0px 24px; min-width: 36px; min-height: 36px; line-height: 34px; text-align: center; border: 1px solid transparent; margin: 5.5px 8px 5.5px 0px; border-radius: 4px; transition: all 0.4s ease; }
html:lang(ar) input[type="button"], html:lang(ar) input[type="reset"], html:lang(ar) input[type="submit"], html:lang(ar) button, html:lang(ar) [class^="btn"], html:lang(ar) [class*=" btn"] { margin: 5.5px 0px 5.5px 8px; }
input[type="button"][class*="-shadow"], input[type="reset"][class*="-shadow"], input[type="submit"][class*="-shadow"], button[class*="shadow"], [class*="btn-"][class*="-shadow"] { box-shadow: rgba(0, 0, 0, 0.14) 0px 1px 2px 0px, rgba(0, 0, 0, 0.2) 0px 1px 1px -2px, rgba(0, 0, 0, 0.12) 0px 1px 4px 0px; }
input[type="button"][class*="-shadow"]:hover, input[type="reset"][class*="-shadow"]:hover, input[type="submit"][class*="-shadow"]:hover, button[class*="shadow"]:hover, [class*="btn-"][class*="-shadow"]:hover { box-shadow: rgba(0, 0, 0, 0.18) 0px 2px 4px 0px, rgba(255, 255, 255, 0.24) 0px 2px 2px -2px, rgba(0, 0, 0, 0.16) 0px 2px 8px 0px; }
input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover, button:hover, [class^="btn"]:hover, [class*=" btn"]:hover, button.active, [class^="btn"].active, [class*=" btn"].active { background-color: rgb(36, 28, 60); color: rgb(255, 255, 255); z-index: 2; }
input[type="button"]:active, input[type="reset"]:active, input[type="submit"]:active, button:active, [class^="btn"]:active, [class*=" btn"]:active, input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus, button:focus, [class^="btn"]:focus, [class*=" btn"]:focus { outline: none; box-shadow: rgba(0, 0, 0, 0.2) 0px -3px 8px inset, rgba(0, 0, 0, 0.2) 0px 1px 1px inset; }
input[type="button"][class*="border"], input[type="reset"][class*="border"], input[type="submit"][class*="border"], button[class*="border"], [class*="btn-"][class*="-border"] { background: transparent !important; }
input[type="button"][class*="link"], input[type="reset"][class*="link"], input[type="submit"][class*="link"], button[class*="link"], [class*="btn-"][class*="-link"] { box-shadow: none; background: transparent; }
input[type="button"][class*="plastic"], input[type="reset"][class*="plastic"], input[type="submit"][class*="plastic"], button[class*="plastic"], [class*="btn-"][class*="-plastic"] { border: 1px solid rgba(0, 0, 0, 0.2); box-shadow: rgba(0, 0, 0, 0.15) 0px 1px 2px, rgba(255, 255, 255, 0.3) 0px 1px 0px inset, rgba(255, 255, 255, 0.3) 0px -1px 0px inset, rgba(0, 0, 0, 0.15) 0px 1px 2px; }
input[type="button"][class*="block"], input[type="reset"][class*="block"], input[type="submit"][class*="block"], button[class*="block"], [class*="btn-"][class*="-block"] { display: block; width: 100%; }
input[type="button"][class*="center"], input[type="reset"][class*="center"], input[type="submit"][class*="center"], button[class*="center"], [class*="btn-"][class*="-center"] { display: table; margin-left: auto; margin-right: auto; margin-top: 10px; }
input[type="button"][class*="round"], input[type="reset"][class*="round"], input[type="submit"][class*="round"], button[class*="round"], [class*="btn-"][class*="-round"] { border-radius: 18px; }
input[type="button"][class*="circle"], input[type="reset"][class*="circle"], input[type="submit"][class*="circle"], button[class*="circle"], [class*="btn-"][class*="-circle"] { border-radius: 50%; width: 36px; min-width: auto; font-size: 20px; padding: 0px !important; }
input[type="button"][class*="lg"], input[type="reset"][class*="lg"], input[type="submit"][class*="lg"], button[class*="lg"], [class*="btn-"][class*="-lg"] { line-height: 40px; font-weight: bold; font-size: 16px; }
input[type="button"][class*="lg"][class*="round"], input[type="reset"][class*="lg"][class*="round"], input[type="submit"][class*="lg"][class*="round"], button[class*="lg"][class*="round"], [class*="btn-"][class*="-lg"][class*="-round"] { border-radius: 21px; }
input[type="button"][class*="lg"][class*="circle"], input[type="reset"][class*="lg"][class*="circle"], input[type="submit"][class*="lg"][class*="circle"], button[class*="lg"][class*="circle"], [class*="btn-"][class*="-lg"][class*="-circle"] { width: 42px; }
input[type="button"][class*="xl"], input[type="reset"][class*="xl"], input[type="submit"][class*="xl"], button[class*="xl"], [class*="btn-"][class*="-xl"] { line-height: 46px; font-weight: bolder; height: 48px; font-size: 20px; }
input[type="button"][class*="xl"][class*="round"], input[type="reset"][class*="xl"][class*="round"], input[type="submit"][class*="xl"][class*="round"], button[class*="xl"][class*="round"], [class*="btn-"][class*="-xl"][class*="-round"] { border-radius: 24px; }
input[type="button"][class*="xl"][class*="circle"], input[type="reset"][class*="xl"][class*="circle"], input[type="submit"][class*="xl"][class*="circle"], button[class*="xl"][class*="circle"], [class*="btn-"][class*="-xl"][class*="-circle"] { width: 48px; }
input[type="button"][class*="sm"], input[type="reset"][class*="sm"], input[type="submit"][class*="sm"], button[class*="sm"], [class*="btn-"][class*="-sm"] { line-height: 28px; min-height: 30px; font-weight: 400; padding: 0px 20px; }
input[type="button"][class*="sm"][class*="round"], input[type="reset"][class*="sm"][class*="round"], input[type="submit"][class*="sm"][class*="round"], button[class*="sm"][class*="round"], [class*="btn-"][class*="-sm"][class*="-round"] { border-radius: 15px; }
input[type="button"][class*="sm"][class*="circle"], input[type="reset"][class*="sm"][class*="circle"], input[type="submit"][class*="sm"][class*="circle"], button[class*="sm"][class*="circle"], [class*="btn-"][class*="-sm"][class*="-circle"] { width: 30px; }
input[type="button"][class*="xs"], input[type="reset"][class*="xs"], input[type="submit"][class*="xs"], button[class*="xs"], [class*="btn-"][class*="-xs"] { line-height: 24px; min-height: 26px; font-weight: 300; padding: 0px 15px; }
input[type="button"][class*="xs"][class*="round"], input[type="reset"][class*="xs"][class*="round"], input[type="submit"][class*="xs"][class*="round"], button[class*="xs"][class*="round"], [class*="btn-"][class*="-xs"][class*="-round"] { border-radius: 13px; }
input[type="button"][class*="xs"][class*="circle"], input[type="reset"][class*="xs"][class*="circle"], input[type="submit"][class*="xs"][class*="circle"], button[class*="xs"][class*="circle"], [class*="btn-"][class*="-xs"][class*="-circle"] { width: 26px; }
button:not([class*="circle"]) i, [class*="btn"]:not([class*="circle"]) i { width: 26px; position: relative; text-align: center; margin-left: -14px; font-size: 18px; vertical-align: middle; height: 20px; }
button[class*="xl"]:not([class*="circle"]) i, [class*="btn-"][class*="-xl"]:not([class*="circle"]) i { width: 34px; font-size: 24px; height: 28px; }
button[class*="lg"]:not([class*="circle"]) i, [class*="btn-"][class*="-lg"]:not([class*="circle"]) i { width: 30px; font-size: 22px; height: 26px; }
button[class*="sm"]:not([class*="circle"]) i, [class*="btn-"][class*="-sm"]:not([class*="circle"]) i { width: 24px; font-size: 16px; margin-left: -12px; height: 18px; }
button[class*="xs"]:not([class*="circle"]) i, [class*="btn-"][class*="-xs"]:not([class*="circle"]) i { width: 20px; font-size: 16px; margin-left: -8px; height: 18px; }
button:focus > .ripple, [class^="btn"]:focus > .ripple, button:active > .ripple, [class^="btn"]:active > .ripple, .active .ripple { z-index: 1; animation: ripple-out 0.75s; }
a { text-decoration: none; transition: all 0.4s ease; font-weight: 500; color: rgb(144, 174, 191); }
a:hover { text-decoration: none; outline: 0px; color: rgb(157, 165, 109); }
img { height: auto; display: inline-block; object-fit: cover; object-position: 50% 50%; vertical-align: middle; break-inside: avoid; max-width: 100% !important; }
.images { overflow: hidden; }
[class$="-center"], .txt-center { text-align: center !important; }
[class*="no-padding"] { padding: 0px !important; }
[class*="no-margin"] { margin: 0px !important; }
[class*="shadow"] { box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 3px; }
[class*="margin"][class*="-t"] { margin-top: 8px; }
[class*="margin"][class*="-b"] { margin-bottom: 8px; }
[class*="margin"][class*="-t16"] { margin-top: 16px; }
[class*="margin"][class*="-b16"] { margin-bottom: 16px; }
[class*="margin"][class*="-t30"] { margin-top: 30px; }
[class*="margin"][class*="-b30"] { margin-bottom: 30px; }
section header p { width: 65%; margin: 0px auto 30px; font-size: 15px; }
section header h3 { text-transform: uppercase; }
section header h3 span { color: rgb(157, 165, 109); }
.bg-image { position: relative; background-size: cover; background-attachment: fixed; color: rgb(255, 255, 255); z-index: 1; }
.bg-image::before { content: " "; display: block; margin: auto; position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; background: rgb(62, 52, 92); opacity: 0.95; z-index: -1; }
.modal[role="dialog"] > .modal-dialog { opacity: 0; width: 70%; height: 90vh; max-height: 90vh; display: block; background: rgb(62, 52, 92); position: relative; top: 5vh; left: 15%; box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 4px; border-radius: 4px; transform: translateY(-15%); transition: all 0.5s cubic-bezier(0, 0, 0, 0.67); }
.modal[role="dialog"].open > .modal-dialog { opacity: 1; z-index: 1000; transform: translateY(0px); }
.modal.lg .modal-dialog { width: 80%; left: 10%; }
body { background: rgb(62, 52, 92); font-family: Ubuntu, sans-serif; color: rgb(144, 174, 191); }
header[class*="line"]::after, h1[class*="line"]::after, h2[class*="line"]::after, h3[class*="line"]::after, h4[class*="line"]::after, h5[class*="line"]::after, h6[class*="line"]::after { content: ""; position: relative; display: block; width: 70px; height: 16px; margin-bottom: 24px; border-bottom: 3px solid rgb(144, 174, 191); }
.line-center::after { margin: auto; }
header[class*="line"]::after { border-bottom: 4px solid rgb(144, 174, 191); }
header[class*="line"] p { text-transform: uppercase; font-size: 14px; font-weight: 400; color: rgb(144, 174, 191); line-height: 1.85; margin-top: 6px; margin-bottom: 0px; }
h1, h2, h3, h4, h5, h6 { color: rgb(157, 165, 109); font-weight: bold; }
h2,h3,h1 { font-size: 40px; }
small { font-size: 30px; }
button, [class*="btn"] { background: rgb(157, 165, 109); }
header.site-header-wrap { background: rgba(33, 26, 56, 0.57); }
.site-header-wrap .section-bg { height: 650px; }
.editor-wrapper { position: absolute; width: 100%; top: 90px; left: 0px; }
.code-editor { width: 100%; text-align: left; border-radius: 8px; overflow: hidden; position: relative; z-index: 10; box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 3px; }
.code-editor::before { content: "My Profile"; font-size: 10px; text-transform: uppercase; line-height: 40px; text-align: center; display: block; width: 100%; height: 40px; background-color: rgb(36, 28, 61); border-radius: 8px 8px 0px 0px; }
a.control { display: inline-block; height: 10px; width: 10px; z-index: 2; padding: 6px; border-radius: 50%; background: rgb(68, 42, 130); }
.controls-wrapper { position: absolute; top: 10px; right: 15px; }
.CodeMirror, #profileCode { padding: 10px; min-height: 632px; }
.cm-s-material, #profileCode { background: rgb(62, 52, 92); }
.CodeMirror-scrollbar-filler { display: none !important; }
.code-editor .code { padding-right: 0px; }
.code-editor .preview { padding-left: 0px; }
.profile-wrap { background: rgba(33, 26, 56, 0.57); padding: 30px; height: 632px; min-height: 600px; overflow-x: hidden; overflow-y: scroll; }
.profile-wrap .card { box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 10px 4px; padding-bottom: 30px; border-radius: 8px; overflow: hidden; background: rgb(50, 42, 74); margin: auto; }
.profile-wrap .card .images { position: relative; z-index: 1; margin-top: -100px; display: inline-block; width: 180px; height: 180px; border-radius: 50%; overflow: hidden; background: rgb(36, 28, 61); border: 10px solid rgb(36, 28, 61); }
.profile-wrap .card .images img { width: 100%; height: 100%; }
.profile-wrap .card .details { padding: 0px 45px 16px; }
.profile-wrap .card .details h3 { color: rgb(157, 165, 109); font-size: 24px; }
.profile-wrap .card .details h5 { margin-bottom: 16px; font-size: 16px; }
.social i { color: rgb(144, 174, 191); width: 50px; border-radius: 50%; text-align: center; line-height: 46px; font-size: 32px; transition: all 0.4s ease; }
.social i:hover { color: rgb(157, 165, 109); }
.knowledge { background-color: rgba(33, 26, 56, 0.57); text-align: center; padding-top: 170px; font-weight: bold; }
.knowledge i { font-size: 72px; display: block; margin-top: 30px; margin-bottom: 8px; }
#projects { padding: 70px 20px; }
#projects .box { position: relative; margin-bottom: 120px; }
#projects .box .slider { height: 430px; width: 100%; position: relative; }
#projects .box .slider .screen { cursor: pointer; position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden; transition: all 0.4s ease; border-radius: 8px; box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 3px; }
#projects .box .slider .screen .top { background: rgb(36, 28, 61); position: relative; height: 40px; }
#projects .box .slider .screen .top span { left: 30px; top: 50%; width: 10px; height: 10px; display: block; position: absolute; background: rgb(68, 42, 130); border-radius: 50%; transform: translate(0px, -50%); }
#projects .box .slider .screen .top span::before, #projects .box .slider .screen .top span::after { content: ""; top: 0px; width: 10px; height: 10px; display: block; position: absolute; background: rgb(68, 42, 130); border-radius: 50%; }
#projects .box .slider .screen .top span::before { left: 15px; }
#projects .box .slider .screen .top span::after { right: 15px; }
#projects .box .slider .screen .top a:hover { color: rgb(157, 165, 109); }
#projects .box .slider .screen .top a { left: 70px; top: 8px; bottom: 8px; right: 15px; line-height: 24px; color: rgba(255, 255, 255, 0.5); padding: 0px 10px; background: rgb(62, 52, 92); position: absolute; font-size: 11px; display: block; border-radius: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#projects .box .slider .screen .image { display: block; background-size: cover; background-position: center top; position: absolute; left: 0px; right: 0px; top: 40px; bottom: 0px; }
#projects .box .slider .screen:last-of-type { z-index: 80; top: -20px; left: 30px; right: 30px; bottom: 20px; opacity: 0.5; }
#projects .box .slider .screen:nth-last-of-type(2) { z-index: 90; top: -10px; left: 15px; right: 15px; bottom: 10px; opacity: 1; }
#projects .box .slider .screen:first-of-type { z-index: 100; top: 0px; left: 0px; right: 0px; bottom: 0px; opacity: 1; }
#projects .box .slider .screen.remove { top: 20px; opacity: 0; }
#projects .box .text { position: relative; top: 100px; width: 100%; max-width: 325px; }
#projects .box .text h3 { margin: 0px 0px 25px; font-weight: bold; font-size: 36px; }
#projects .box .text h3 span { font-size: 14px; }
.myworks-polygon { clip-path: polygon(0px 0px, 100% 150px, 100% 100%, 0px 100%); padding: 100px 20px; position: relative; z-index: 1; background: rgb(62, 52, 92); top: -150px; margin-bottom: -250px; }
.myworks { padding-top: 70px; background-color: rgba(33, 26, 56, 0.57); overflow: hidden; padding-bottom: 200px; }
.works { position: relative; border-radius: 8px; overflow: hidden; margin-bottom: 30px; }
.works .images { height: 300px; }
.works .bg-image::before { z-index: 2; opacity: 0.7; transition: 2s ease; }
.works:hover .bg-image::before { opacity: 0; }
.works .images img { border-radius: 8px 8px 0px 0px; transition: 2s ease-out; width: 100%; height: 100%; filter: hue-rotate(200deg) invert(20%); }
.works .details { padding: 16px 60px 6px 16px; background: rgb(62, 52, 92); display: block; position: relative; cursor: pointer; }
.works .details::after { content: ""; font-family: "Material Design Icons"; position: absolute; right: 30px; width: 90px; top: 0px; text-align: center; line-height: 90px; font-size: 48px; color: rgba(33, 26, 56, 0.57); opacity: 0; transition: 0.5s ease-out; }
.works .details:hover::after { right: 0px; color: rgb(157, 165, 109); opacity: 1; }
.works:hover .images img { filter: none; }
.works .details h4 { color: rgb(157, 165, 109); }
.works .details .more { display: none; }
.works .details p { color: rgb(144, 174, 191); font-size: 13px; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#showDetalis .image { float: left; width: calc(100% - 350px); height: 100%; position: relative; }
#showDetalis .image img { width: 100%; height: 100%; }
#showDetalis .images img { width: 100px; height: 80px; display: inline-block; cursor: pointer; border: 3px solid transparent; }
#showDetalis .images img.active { border: 3px solid rgb(157, 165, 109); }
#showDetalis .images { position: absolute; width: 100%; top: 0px; background: rgba(60, 88, 105, 0.9); padding: 16px; transition: all 0.4s ease; opacity: 0; }
#showDetalis .image:hover .images { opacity: 1; }
#showDetalis .details-wrap { float: left; width: 350px; height: 100%; background: rgb(255, 255, 255); }
#showDetalis .details { padding: 16px 24px; }
#showDetalis .details p { margin-bottom: 0px; }
.feedback { padding: 6px 24px; background: rgb(255, 255, 255); font-size: 18px; border-bottom: 1px solid rgb(221, 240, 251); border-top: 1px solid rgb(221, 240, 251); }
.feedback i { margin-right: 8px; }
i::after { font-size: 13px; display: inline-block; margin: 0px 5px; font-family: ubuntu; }
i[data-like]::after { content: attr(data-like); }
i[data-comment]::after { content: attr(data-comment); }
.comments { padding: 24px; }
.ContactUs { position: relative; padding-top: 50px; z-index: 10; }
.ContactUs textarea { height: 200px; }
footer { padding: 70px 20px; background-color: rgba(0, 0, 0, 0.1); }
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: rgb(144, 174, 191); opacity: 0.5; }
input, textarea { background: rgba(0, 0, 0, 0.1); }
footer .images { width: 100px; height: 100px; border-radius: 50%; margin: auto auto 16px; }
p:last-child { margin-bottom: 0px; }
dt { font-weight: bold; }
dd { margin: 0px 1.5em 1.5em; }
b, strong { font-weight: bold; }
dfn, cite, em, i { font-style: italic; }
blockquote { margin: 0px 1.5em; }
address { margin: 0px 0px 1.5em; }
pre { font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 1.5rem; line-height: 1.6; font-family: "Courier 10 Pitch", Courier, monospace; background: rgb(238, 238, 238); margin-bottom: 1.6em; max-width: 100%; overflow: auto; padding: 1.6em; }
code, kbd, tt, var { font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; }
abbr, acronym { border-bottom: 1px dotted rgb(102, 102, 102); cursor: help; }
mark, ins { text-decoration: none; }
sup, sub { font-size: 75%; height: 0px; line-height: 0; position: relative; vertical-align: baseline; }
sup { bottom: 1ex; }
sub { top: 0.5ex; }
small { font-size: 75%; }
big { font-size: 125%; }
figure { margin: 0px; }
table { margin: 0px 0px 1.5em; width: 100%; border-collapse: collapse !important; }
th { font-weight: bold; }
img { height: auto; max-width: 100%; }
button, input, select, textarea { font-size: 100%; margin: 0px; vertical-align: baseline; }
button, input[type="button"], input[type="reset"], input[type="submit"] {  background: rgb(230, 230, 230); color: rgba(0, 0, 0, 0.8); cursor: pointer; -webkit-appearance: button; font-size: 1.2rem; line-height: 1; padding: 0.6em 1em 0.4em; }
input[type="checkbox"], input[type="radio"] { padding: 0px; }
input[type="search"] { -webkit-appearance: textfield; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], textarea { color: rgb(102, 102, 102);  }
input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, textarea:focus { color: rgb(17, 17, 17); }
input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"] {  }
textarea { overflow: auto; padding-left: 3px; vertical-align: top;}
a, a:focus, a:hover { color: rgb(157, 165, 109); text-decoration: none; }
a {font-weight: 600 !important;}
style.css:121

table { border: 1px solid rgb(224, 224, 224); border-spacing: 0px; margin: 0px 0px 20px; width: 100%; }
table caption { font-weight: bold; margin-bottom: 10px; }
td { text-align: center; border: 1px solid rgb(224, 224, 224); padding: 5px; }
th { background: rgb(255, 255, 255); padding: 5px; text-align: center; }
embed, iframe, object { max-width: 100%; }
.btn-sumary { border-radius: 25px; -webkit-background-clip: padding-box; background-clip: padding-box; transition: all 0.3s ease-in-out; position: relative; }
.btn-sumary-big { color: rgb(255, 255, 255); padding: 12px 40px; font-size: 14px; font-weight: 600; letter-spacing: 1px; }
.btn-header i { color: rgb(235, 81, 85); }
.btn-sumary:hover, .left-position .btn-header i { color: rgb(255, 255, 255); }
.btn-sumary i { font-size: 14px; position: absolute; right: 30px; top: 50%; margin-top: -7px; opacity: 0; transition: all 0.3s ease-in-out; }
.btn-sumary:hover i { opacity: 1; right: 15px; }
.loaded .ip-main h2, .loaded .ip-main .browser, .loaded .ip-main .browser .box, .loaded .codrops-demos { animation: animLoadedContent 1s cubic-bezier(0.7, 0, 0.3, 1) both; }
.loaded .ip-main .browser, .loaded .ip-main .browser .box:first-child { animation-delay: 0.1s; }
.loaded .ip-main .browser .box:nth-child(2) { animation-delay: 0.15s; }
header { position:  relative !important;; width: 100%; z-index: 999; padding: 0px 0px; transition: all 0.3s ease-in-out; }
#before-after { position: relative; width: 100%; height: 100vh; min-height: 650px; z-index: 1; }
#before-after img { max-width: none; }
.view { position: absolute; width: 100%; height: 100%; overflow: hidden; }
.view-before { z-index: 100;  background-color: rgb(242, 245, 247); }
.view-after { z-index: 200; background: rgb(36, 28, 60); }
#dragme { position: absolute; width: 2px; height: 100%; top: 0px; left: 0px; background-color: #372e52; cursor: pointer; z-index: 300; }
#dragme .icon-drag { width: 30px; height: 30px; background: url("./images/drag-icon.png") center center no-repeat; display: block; position: absolute; top: 50%; left: -15px; margin-top: -15px; }
.wrapper-after, .wrapper-before { position: relative; height: 100%; }
.wrapper-after .img-bird-wrapper, .wrapper-before .img-bird-wrapper { position: absolute; left: 0px; right: 0px; margin: -250px auto 0px; top: 50%; z-index: 9; }
.img-bird-wrapper { width: 500px; height: 385px; display: block; }
.img-bird-wrapper img { width: 100%; height: auto; }
.shadown-bird { background: url("https://static.enginethemes.com/main/img/shadow.png") center center no-repeat; width: 240px; height: 25px; display: block; position: absolute; left: 0px; right: 0px; margin: 0px auto; bottom: 25%; }
.tooltip-item { width: 20px; height: 20px; margin: -15px 0px 0px -15px; position: absolute; border-radius: 50%; border: 2px solid; animation: pulse-item 0.6s infinite alternate; cursor: pointer; transition: all 0.3s ease-in-out; }
.wrapper-after .tooltip-item { border-color: rgb(255, 255, 255); }
.wrapper-after .tooltip-item:hover { background: rgb(255, 255, 255); }
.wrapper-before .tooltip-item { border-color: rgb(36, 28, 60); }
.wrapper-before .tooltip-item:hover { background: rgb(36, 28, 60); }
.wrapper-after .tooltip-item.tooltip-item-1 { left: 55px; top: 130px; }
.wrapper-after .tooltip-item.tooltip-item-2 { left: 140px; bottom: 10px; }
.wrapper-after .tooltip-item.tooltip-item-3 { right: 155px; top: 220px; }
.wrapper-after .tooltip-item.tooltip-item-4 { right: 210px; bottom: 70px; }
.wrapper-before .tooltip-item.tooltip-item-1 { left: 55px; top: 130px; }
.wrapper-before .tooltip-item.tooltip-item-2 { left: 140px; bottom: 10px; }
.wrapper-before .tooltip-item.tooltip-item-3 { right: 155px; top: 220px; }
.wrapper-before .tooltip-item.tooltip-item-4 { right: 210px; bottom: 70px; }
.content-before-after { width: 1170px; position: absolute; left: 0px; right: 0px; margin: -70px auto 0px; top: 50%; }
.content-before-after .content-right { width: 285px; float: left; }
.content-before-after .content-right h3 { color: rgb(254, 254, 255); font-size: 24px; margin: 0px 0px 40px; text-align: center; }
.content-before-after.left-position .content-right h3 { color: rgb(68, 89, 99); }
.content-before-after.right-position .btn-header { background: none; border: 2px solid rgb(255, 255, 255); }
.content-before-after.left-position .btn-header { background: none; border: 2px solid rgb(235, 81, 85); color: rgb(235, 81, 85); }
.content-before-after.left-position .btn-header:hover { color: rgb(255, 255, 255); }
.content-before-after.right-position .btn-header:hover { background: rgb(255, 255, 255); }
.content-before-after .content-left { width: 300px; float: right; text-align: center; }
.content-before-after.right-position .content-detail-wrapper h3 { color: rgb(255, 255, 255); }
.content-before-after.right-position .content-detail-wrapper h3 span.color-main { color: rgb(68, 89, 99); }
.content-before-after .content-detail-wrapper .img-position { width: 35px; height: 35px; border: 1px solid rgb(217, 77, 81); border-radius: 50%; -webkit-background-clip: padding-box; background-clip: padding-box; background-color: rgb(255, 255, 255); overflow: hidden; display: block; margin: 0px auto; }
.content-before-after.right-position .content-detail-wrapper .img-position { border-color: rgb(255, 255, 255); }
.content-before-after .content-detail-wrapper .img-position img { width: 100%; height: auto; }
.content-before-after .content-left ul li { display: none; position: absolute; }
.content-before-after .content-left ul li.active { display: block; }