@import url('../../css2');

body{ font-family: 'Roboto', sans-serif; -webkit-font-smoothing: antialiased; font-size:16px; color:#656565; line-height:32px;}
a{ color: #232323; outline: 0; }
a:hover{ color: #575757; }
img { -webkit-backface-visibility: hidden; max-width:100%; height:auto; -webkit-box-shadow: 0 0 40px 0 rgba(23,23,23,.1); box-shadow: 0 0 40px 0 rgba(23,23,23,.1); margin: 20px 0}
video { background-size: cover; display: table-cell; vertical-align: middle; width: 100%; }
ul{ margin: 0px; padding:0px; }
input, textarea, select{ border: 1px solid #dfdfdf; letter-spacing: 1px; font-size: 11px;  padding: 8px 15px; width: 100%; margin: 0 0 20px 0; text-transform: uppercase; max-width: 100%; resize: none;}
input[type="submit"] { width: auto}
input[type="button"], input[type="text"], input[type="email"], input[type="search"], input[type="password"], textarea, input[type="submit"] { -webkit-appearance: none;  border-radius: 0; }
input:focus, textarea:focus{ border: 1px solid #989898; }
input[type="submit"]:focus { border:none !important}
iframe { border: 0;}
ul { list-style: none outside none; }
ul, ol, dl {list-style-position: outside;}
::selection { color: #232323; background:#dcdcdc; }
::-moz-selection { color:#232323; background:#dcdcdc; }
::-webkit-input-placeholder { color: #999; text-overflow: ellipsis; }
:-moz-placeholder { color: #999 !important; text-overflow: ellipsis; opacity:1; }
::-moz-placeholder { color: #999 !important; text-overflow: ellipsis; opacity:1; } 
:-ms-input-placeholder { color: #999 !important; text-overflow: ellipsis; opacity:1; }
::-webkit-scrollbar { width:12px }
::-webkit-scrollbar-track { -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3); -moz-box-shadow:inset 0 0 6px rgba(0,0,0,.3); box-shadow:inset 0 0 6px rgba(0,0,0,.3); }
::-webkit-scrollbar-thumb { background:rgba(210,210,210,.8); -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.5); -moz-box-shadow:inset 0 0 6px rgba(0,0,0,.5); box-shadow:inset 0 0 6px rgba(0,0,0,.5); }
::-webkit-scrollbar-thumb:window-inactive { background:rgba(210,210,210,.4) }

.codeblock { position: relative; }
.codeblock .copy-clipboard { opacity: 0; visibility: hidden; position: absolute; top: 15px; right: 15px; box-shadow: 0 10px 20px rgba(0,0,0,0.1); padding: 0 18px; border-radius: 25px; cursor: pointer; background: #232323; color: #fff; transition: 0.2s ease-in-out; }
.codeblock .copy-clipboard:active { transform: scale(0.8); }
.codeblock:hover .copy-clipboard { opacity: 1; visibility: visible; }
textarea.clipboard { opacity: 0; width: 0; height: 0; margin: 0; padding: 0; text-transform: lowercase; }

.new-demo {background: #ff214f; font-size: 10px; font-weight: 600; color: #fff; margin-left: 3px; padding: 2px 8px;}
/* other */
.text-center {text-align: center !important}
.no-padding {padding:0 !important}
.no-padding-left {padding-left:0 !important}
.no-padding-right {padding-right:0 !important}
.no-padding-top {padding-top:0 !important}
.no-margin {margin: 0 !important}
.no-margin-bottom {margin-bottom: 0 !important}
.text-uppercase {text-transform: uppercase !important}
.text-medium {font-size: 12px !important}
.text-small {font-size: 11px !important}
p {margin: 0 0 40px 0}
section {margin: 0 0 100px 0; min-height: 900px}
strong {font-weight: 600;}
.width-100 {width: 100% !important}
.margin-bottom-20 { margin-bottom: 35px !important}


/* letter spacing */
.no-letter-spacing { letter-spacing: 0px !important}
.letter-spacing-1 { letter-spacing:1px !important}
.letter-spacing-2 { letter-spacing:2px !important}
.letter-spacing-3 { letter-spacing:3px !important}
.letter-spacing-4 { letter-spacing:4px !important}
.letter-spacing-5 { letter-spacing:5px !important}
.letter-spacing-6 { letter-spacing:6px !important}

/* heading */
h1 {margin-top: 0; padding: 50px 0 25px 0; font-size: 30px; font-weight: 500}
h2 {font-size: 20px; padding-bottom: 25px; padding-top: 90px; font-weight: 600; margin: 0}
h3 {font-size: 18px; padding-bottom: 20px; padding-top: 50px; font-weight: 600; margin: 0}
h1,h2,h3,h4,h5 {color: #232323}

/* scroll to top */
.scrollToTop, .scrollToTop:focus { display: none; font-weight: bold; height: 30px; padding: 0; position: fixed; right: 45px; text-align: center; text-decoration: none; top: 91%; width: 30px; background-color: #878787; z-index: 555; line-height: 28px; text-decoration: none; top: 91%; border-radius: 100%; }
.scrollToTop i {line-height: 30px; position: relative; color: #fff; }
.scrollToTop:hover { background-color: #232323; text-decoration: none;}

header {background: #232323}
#masthead { padding: 20px;}
#masthead h1 { font-size: 55px; line-height: 1; }
#masthead .well { margin-top:13%; background-color:#111155;  }
.icon-bar { background-color:#fff; }
.nav li ul { display:none }
.nav li.active ul { display:block }
.affix-top,.affix{ position: static;}
.nav a:focus {outline: 0; border: 0; background-color: transparent !important; color: #232323}
#sidebar.affix-top { position: static;  }
#sidebar.affix { position: fixed; top:0; width: 249px;  }
.container-fullwidth {padding: 0 60px}
.docs-navigation { height: 100%; left: 0; position: absolute; width: 270px; border-right: 1px solid #f2f2f2  }
.nav li {border-bottom: 1px solid #f2f2f2; text-transform: uppercase }
.nav-stacked  li + li {margin-top: 0}
.nav li a {color:#4b4b4b; font-weight: 500; padding: 15px; font-size: 15px}
.nav li a:hover { background-color: #f9f9f9}
.nav li.active, .nav li.active a:hover, .sec-link:focus { background-color: #232323 ;  }
.nav li.active a {color: #fff}
.nav li ul li {padding: 15px; background-color: #fff}
.nav li.active ul li a {color:#656565; font-size: 14px; display: block; padding: 10px 35px 10px 40px; text-decoration: none }
.nav li.active ul li a:hover { background-color: #f9f9f9; }
.nav li.active ul li:last-child {border-bottom: none}
.nav li.active ul li.active:focus { background-color: #f9f9f9; }
.nav li ul li.active a:after {  content: "\f105"; font-family:'FontAwesome';  position: absolute; top: 11px; right: 15px; font-size: 14px; font-weight: normal}
.nav li.active ul li.active, .nav li.active ul li.active a:focus { background-color: #f9f9f9}
.nav li.active ul li { padding: 0; position: relative}
.docs-content { position: relative; margin-left: 320px; padding: 2% 15% 5% 2%}
.line { border-top: 1px solid #efefef; clear: both; margin: 50px 0; position: relative; width: 100%; display: inline-block }
.notice { padding: 15px 10px 15px 25px; background: #fde9e5; color: #000; border-left: 4px solid #ee350f; transition-duration: .4s; position: relative; margin: 25px 0; }
pre {padding: 35px; white-space: pre-wrap; background-color: #f9f9f9; border: 1px solid rgba(0,0,0,.07); border-radius: 0; margin: 35px 0; font-size: 14px; line-height: 25px}
.label {border-radius: 0; margin-right: 15px;}
.docs-content ul li, .docs-content ol li {margin-top: 15px;}
.comment{ color: #009900 !important; display: inline-block; margin: 10px 0;}
.comment:last-child {margin: 10px 0 0 0}
.docs-content a {font-weight: 600; text-decoration: underline}
.docs-content a:visited { color: #232323}
.docs-content ul {padding-left: 45px}
.docs-content ul li { list-style: disc;}
.docs-content ul.grid-content { margin-bottom: 25px;}
.docs-content ul.grid-content li { margin-top: 0; }
.columns [class^="col-"], .bootstrap-grid [class^="col-"] { border: 1px solid #e2e2e2; background: #f9f9f9;}
.columns code, .bootstrap-grid code {background: #fff; margin: 10px 0; padding: 0 10px; display: inline-block;}
.last-section {min-height: 850px}
.button {background: #232323; color: #fff !important; padding: 10px 20px; border-radius: 0; text-decoration: none !important; margin: 25px 0; outline: 0; border: 0; text-transform: uppercase; display: inline-block }
.button:hover {background: #797979; color: #fff !important; padding: 10px 20px; border-radius: 0; text-decoration: none !important}
.button:focus {background: #232323 !important; color: #fff !important; border:2px solid #232323; padding: 10px 20px; }
.fa-examples div { border: 1px solid #e5e5e5; font-size: 13px; margin: -1px 0 0 -1px; padding: 15px 0 15px 15px; color: #868686; }
.fa-examples div:hover { background-color: #fafafa}
.fa-examples i {color:#555555; font-size:14px; letter-spacing: 0; margin-right: 5px;}
.fa-examples span {margin-left: 6px;  display: none }
.glyphs .box1 {    border: 1px solid #e5e5e5; display: block; float: left; font-size: 13px; margin: -1px 0 0 -1px; padding: 0; width: 33%; padding: 20px; text-align: left}
.glyphs .box1 span { font-size: 30px; vertical-align: middle; width: 50px;}
.themify-icon-section {clear: both; overflow: hidden; }
.themify-icon-container { width: 240px;  padding: 10px 0; float: left; position: relative; text-align: left; }
.themify-icon-container [class^="ti-"], .themify-icon-container [class*=" ti-"] {display: inline-block; vertical-align: middle; font-size: 18px}
.themify-icon-name {  margin-left: 15px;}
.portfolio-details-page [class^="col-"]{ padding-top: 35px; padding-bottom: 35px}
.credits li {margin-top: 0 !important}
.credits li a {font-size: 13px; font-weight: normal; text-decoration: none}
.demos [class^="col-"]{ padding-top: 15px; padding-bottom: 15px}
.demos img {padding: 5px}
.copyright { padding: 30px 25px; display: block}
.docs-content-inner img { width: 100%; }
.fw-normal {font-size: 14px; font-weight: 400}
.columns p code, .bootstrap-grid p code {margin: 0}

.portfolio {padding: 90px 0; position: relative; }
.portfolio h4 a {text-align: center; font-weight: 600; text-transform: uppercase; font-size: 15px; text-decoration: none}
.portfolio .screenshot {margin-bottom: 55px}
.portfolio .portfolio-bg-top {position: absolute; left: 0; display: inline-block; top: -140px; }
.portfolio .portfolio-bg-bottom {position: absolute; left: 0; display: inline-block; bottom: -42px; right: 0; width: 100%; text-align: center; }
.portfolio .screenshot h4 {margin-top: 30px; font-size: 16px; }
.portfolio .screenshot {padding: 0 20px; text-align: center}
.portfolio .screenshot:nth-child(4n+1) { clear: both; }

.screenshot figure {top: 0; transition: all 0.3s ease 0s; }
.screenshot figure:hover {top: -10px; transition: all 0.3s ease 0s; }
.screenshot img {border: 1px solid #e7e7e7; transition: all 0.3s ease 0s; margin: 0;}
figure { margin: 0; position: relative; overflow: hidden; top: 0; }
figure .gallery-img { opacity: 1; overflow: hidden; transition: all 0.3s ease 0s; }
figure:hover .gallery-img { opacity: 0.8; transition: all 0.3s ease 0s; }
figure:hover figcaption { opacity: 1; transition: all 0.3s ease 0s;}
figcaption {position: absolute; opacity: 0; z-index: 3; text-align: center; background: rgba(18,18,18,0.8); top:0; width: 100%; height: 100%; transition: all 0.3s ease 0s; }
figure figcaption h3 { font-size: 20px; margin: 0; position: relative; top: 50%; transform: translateY(-100%); z-index: 2; color: #000; display: inline-block; background: #fff; height: 50px; width: 50px; border-radius: 100%; padding: 0; line-height: 54px; transition: all 0.3s ease; }
figure:hover figcaption h3 {transform: translateY(-50%);}

.params-table { border: 1px solid rgba(0,0,0,.07); }
.params-table .table th { color: #232323; width: 50%; border: 1px solid rgba(0,0,0,.07); border-left: 0; border-right: 0; }
.params-table .table td { border: 1px solid rgba(0,0,0,.07); border-left: 0; border-right: 0; line-height: 32px; }
.params-table .table tr:last-child td, .params-table .table tr:last-child th { border-bottom: 0; }

.grid-table .table th, .grid-table .table td { width: auto; }


/* ===================================
    Demo page
====================================== */

.buy-theme {transition-timing-function: ease-in-out; -moz-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; transition-duration: .2s; -moz-transition-duration: .2s; -webkit-transition-duration: .2s; -o-transition-duration: .2s; position:fixed; top:130px; right: -80px; background: #fff; z-index: 1000; -moz-box-shadow:0 0 10px rgba(0,0,0,0.2);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.2);box-shadow:0 0 10px rgba(0,0,0,0.2); z-index: 10}
.buy-theme i {font-size: 20px; vertical-align: middle; position: relative; top: -1px; color: #6f6f6f}
.all-demo i {font-size: 20px; vertical-align: middle; position: relative; top: -1px; color: #6f6f6f}
.buy-theme:hover, .all-demo:hover {transition-timing-function: ease-in-out; -moz-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; transition-duration: .2s; -moz-transition-duration: .2s; -webkit-transition-duration: .2s; -o-transition-duration: .2s; right: 0px; background: #232323}
.buy-theme span, .all-demo span {padding:0 9px; position: relative; top:0; opacity: 0}
.buy-theme:hover span, .all-demo:hover span {opacity: 1; color: #fff}
.buy-theme:hover i, .all-demo:hover i {color: #fff}
.buy-theme a, .all-demo a { color: #232323; font-size: 13px; text-transform: uppercase; padding:5px 20px; display: block; text-decoration: none; font-weight: 500 }
.all-demo {transition-timing-function: ease-in-out; -moz-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; transition-duration: .2s; -moz-transition-duration: .2s; -webkit-transition-duration: .2s; -o-transition-duration: .2s; position:fixed; top:190px; right: -133px; background: #fff; z-index: 1000; -moz-box-shadow:0 0 10px rgba(0,0,0,0.2);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.2);box-shadow:0 0 10px rgba(0,0,0,0.2); z-index: 10}

