@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');

body{ font-family: 'Roboto', sans-serif; -webkit-font-smoothing: antialiased; font-size:16px; color:#4a4a4a; 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; }

.codeblock { position: relative; }
.codeblock .copy-clipboard { opacity: 0; visibility: hidden; position: absolute; font-size: 14px; 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 25px 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: 90px 0 25px 0; font-size: 50px; font-weight: 600}
h2 {font-size: 30px; padding-bottom: 25px; padding-top: 60px; font-weight: 600; margin: 0}
h3 {font-size: 25px; 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: 32px; position: relative; color: #fff; font-size: 11px }
.scrollToTop:hover { background-color: #232323; text-decoration: none;}

header {background: #112e51}
#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;}
.nav-stacked  li + li {margin-top: 0}
.nav li a {color:#232323; font-weight: 600; padding: 13px 15px; font-size: 17px}
.nav li a:hover { background-color: #f9f9f9}
.nav li.active, .nav li.active a:hover, .sec-link:focus { background-color: #1962b5 ;  }
.nav li.active a {color: #fff}
.nav li ul li {padding: 15px; background-color: #fff}
.nav li.active ul li a {color:#232323; font-size: 15px; font-weight: 500; display: block; padding: 8px 25px 8px 30px; 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: 9px; right: 15px; font-size: 18px; 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 {margin-right: 10px; padding: 4px 7px; border-radius: 3px; font-weight: 500;}
.docs-content ul li, .docs-content ol li {margin-top: 10px;}
.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;}
.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-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 .card-wrapper {padding: 15px; background-color: #ffffff; border-radius: 10px; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; transition: all 350ms cubic-bezier(0.37, 0, 0.63, 1);}
.portfolio .card-wrapper:hover {transition: all 350ms cubic-bezier(0.37, 0, 0.63, 1); transform: translate3d(0, -3px, 0); box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;}
.card { position:relative; margin-bottom: 30px}
.card-body .card-contnet {padding: 20px 15px 5px 15px;}
.card-body .demo-link {position: absolute; width: 100%; height: 100%; left: 0; right: 0; z-index: 9;}
.card .card-body img {border-radius: 5px; margin: 0; box-shadow: none;}
.card .card-contnet h4 {margin: 0px 0px 5px 0px;}
.card .card-contnet p { font-size:14px; line-height:20px; margin: 0; color: #7a7a83;}

.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: #232323; z-index: 1000; z-index: 10}
.buy-theme i {font-size: 20px; vertical-align: middle; position: relative; top: -1px; color: #ffffff}
.all-demo i {font-size: 20px; vertical-align: middle; position: relative; top: -1px; color: #ffffff}
.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: #232323; z-index: 1000; z-index: 10}

/* extra class */
.mb-0 {margin-bottom: 0 !important;}
.mt-0 {margin-top: 0 !important;}
.pt-0 {padding-top: 0 !important;}
.pb-0 {padding-bottom: 0 !important;}
.pt-30px {padding-top: 30px !important;}
.py-0 {padding-top: 0 !important; padding-bottom: 0 !important;}
.pb-15px { padding-bottom:15px !important;}
.docs-content-inner ul {
    padding-left: 20px;
}

@media (min-width: 1200px) {
    .card:nth-child(3n+1) { clear: left !important;}
}
@media (max-width: 1199px) {
    .card:nth-child(2n+1) { clear: left !important;}
}