/*-----------------------------------------------------------
* Template Name    : Isoate - Personal Portfolio Bootstrap 4 HTML Template
* Version          : 1.0
* File Description : This File Includes all Style CSS
*------------------------------------------------------------*/

/*======================================================================
Table of Content:

01. Google Fonts
02. Basic Styles
03. Main CSS
04. Section
05. Responsive Media CSS
========================================================================*/

/*-----------------------------------------
* 01. Google Fonts
* -----------------------------------------*/
@import url('//fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');

/*-----------------------------------------
* 02. Basic Styles
* -----------------------------------------*/
body { font-size: 14px; padding: 0; color: #555; background-color: #ffffff; font-family: 'Roboto', sans-serif; line-height: 30px; }
p { color: #555; font-size: 14px; line-height: 25px; padding: 0; }
h1, h2, h3, h4, h5, h6 { font-weight: normal; color: #222222; }
a { color: #cd5353; outline: none; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }
a:hover, a:focus { color: #F8959A; outline: none; }
small { font-style: italic; color: #999; }
ul, ol { padding: 0; margin: 15px 15px; }
ul li { margin-bottom: 5px; }
ul li i { margin-right: 5px; }
ul li ul { margin:5px 15px; }
pre { margin: 30px 0; }
p .label { margin-right: 5px; }
.text-white { color: #fff; }
.text-red, .str, .atv { color: #cd5353; }
.com { color: #444444; }
.typ, .atn, .dec, .var { color: green; }
.pln { color: #666; }

/*-----------------------------------------
* 03. Main CSS
* -----------------------------------------*/
#sidebar-fix { width: inherit; min-width: 300px; max-width: 300px; border-right: 1px solid #ededed; background-color: #cd5353; float: left; height: 100%; bottom: 0; left: 0; z-index: 99; position: fixed; top: 0; height: 100%; -webkit-overflow-scrolling: touch; }
#sidebar-fix hr { border: 0; margin-top: 60px; }
#sidebar-fix .header { height: 100%; }
#main { height: 100%; overflow: auto; margin-left: 299px; }
.mobile-menu { z-index: 9999; display: block; position: fixed; top: 0; left: 0; display: none; line-height: 0; background-color: #ffffff; }
.mobile-menu button { background-color: #ffffff !important; border: 0 !important; }
.mobile-menu .fa-bars { border: 0 solid #dddddd; padding: 10px; background-color: #ffffff !important; border-radius: 0 !important; font-size: 14px !important; }

/* Menu Vertical */
.container-fluid { width: 100%; padding-left:60px; padding-right:60px; }
.site-logo { width: 100%; }
.menu-icon { display:none; }
#vertical .searchmenu { border-right: 0; }
#vertical .navbar-brand img { margin: 10px auto; }
#vertical .navbar-default, #vertical .navbar-default .nav, #vertical .navbar-default .collapse, #vertical .navbar-default .dropup, #vertical .navbar-default .dropdown { border: none; position: static; width: 100% !important; left: 0; padding: 0; margin: 0; }
#vertical .dropdown-menu li:hover, #vertical .dropdown-menu li:focus { background-color: #ffffff; }
#vertical .navbar-collapse { padding: 0 }
#vertical .navbar-brand, #vertical .navbar-brand img { display:inline-block; width:auto; height: auto; }
#vertical .navbar-brand { display: inline-block; width: 100%; margin: 0 auto; font-size: 30px; text-transform: uppercase; font-weight: bold; color: #33373d; float: none; padding: 20px 20px; }
#vertical .navbar-default .navbar-nav li .vertical-menu { left: 300px !important; right: 0 !important; top: auto; margin-top: -50px !important; max-width: 300px; padding: 0; }
#vertical .navbar-default .navbar-nav li .vertical-dropdown-menu { opacity: 1; position: relative; left: 300px !important; right: 0 !important; top: auto; margin-top: -65px !important; max-width: 300px; padding: 20px 0; }
#vertical .navbar-default .navbar-nav li, #vertical .navbar-default .navbar-nav li ul { width: 100% !important }

/*-----------------------------------------
* 04. Section
* -----------------------------------------*/
section { padding: 50px 0; position: relative; border-bottom: 1px solid #ddd; }
.heading-title { position: relative; padding: 0 0 20px; margin: 0 0 20px; font-weight: 700; display: inline-block; }
.heading-title:before { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; background: #cd5353; }
.heading-title:after { content: ""; position: absolute; bottom: -9px; left: 0; right: 0; width: 20px; height: 20px; border-radius: 50%; margin: 0 auto; border: 5px solid #fff; transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; background: #333333; }
.prettyprint { padding: 8px; background-color: #f5f5f5; border: 1px solid #e1e1e8; position:relative; z-index:1; }
.prettyprint.linenums { -webkit-box-shadow: inset 40px 0 0 #fbfbfc, inset 40px 0 0 #ececf0; -moz-box-shadow: inset 40px 0 0 #fbfbfc, inset 40px 0 0 #ececf0; box-shadow: inset 40px 0 0 #fbfbfc, inset 40px 0 0 #ececf0 }
ol.linenums { margin: 0 0 0 33px }
ol.linenums li { text-shadow: 0 1px 0 #fff; padding-left: 12px; line-height: 18px; color: #bebec5; }
.intro-banner { position:relative; padding: 4% 0 4%; }
.intro-banner:before { content:''; height:100%; width:100%; position:absolute; top:0; bottom:0; left:0; right:0; background-color:rgba(0,0,0,0.9); }
.intro-banner img { width: 200px; margin-bottom: 60px; }
.intro-banner ul li, .intro-banner ul li a { color: #fff; }
.intro-content h1 { margin: 0 0 20px; letter-spacing: 1px; font-weight: 500; }
.intro-content b a { font-weight:500; border-bottom:1px dotted #fff; color:#fff; letter-spacing:1px; text-decoration:none; }
.intro-content b a:hover { border-bottom-style:solid; border-color:#cd5353; color:#cd5353; text-decoration:none; }
.kwd, .linenums .tag { color: #1e347b }
footer { padding: 20px 0; background: #f2f2f2; }
footer p{ margin:0; }
.navbar-header { background-color: #fff; float: none; }
/* Nav Menu */
#nav-menu{ max-height: 85vh; overflow: auto; }
#nav-menu, #nav-menu ul, #nav-menu li, #nav-menu a { margin: 0; padding: 0; border: 0; list-style: none; font-weight: normal; text-decoration: none; line-height: 1; font-family: 'Roboto', sans-serif; font-size: 14px; position: relative; }
#nav-menu > ul > li > a { font-size: 25px; font-weight: bold; display: block; background: #213140; color: #ffffff; border-bottom: 1px solid #e1e1e1; text-transform: uppercase; position: relative; }
#nav-menu > ul > li > a > span { padding: 15px 15px; display: block; font-size: 14px; font-weight: 500; background: #cd5353; }
#nav-menu > ul > li > a:hover { text-decoration: none; }
#nav-menu > ul > li.active { border-bottom: none; }
#nav-menu > ul > li.active > a { color: #fff; }
#nav-menu > ul > li.has-sub a { padding-right: 40px; }
#nav-menu span.cnt { padding: 0; margin: 0; font-size:0; }
#nav-menu span.cnt:before{ content: "\f107"; font-family:FontAwesome; color:#fff; position: absolute; right: 13px; top: 50%; font-size:20px; margin: -12px 0 0; }
#nav-menu > ul > li.active > a span.cnt:before{ content: "\f106"; }
#nav-menu ul ul { display: none; }
#nav-menu ul ul li { border: 1px solid #e0e0e0; border-top: 0; }
#nav-menu ul ul a { padding: 12px; display: block; color: #213140; font-size: 13px; }
#nav-menu ul ul a:hover, #nav-menu ul ul a.active { color: #cd5353; }
#nav-menu ul ul li.odd { background: #f4f4f4; }
#nav-menu ul ul li.even { background: #fff; }
#basic-included-files .list-items { list-style:inside; }

/* Heading */
.title { font-size: 22px; font-weight: 600; margin: 20px 0; }
.sub-title { font-size: 20px; margin-bottom:18px; }
.sub-sub-title { font-size: 18px; margin: 25px 0 15px; }
.sub-sub-title ~ p { line-height: 20px; }
.img-box img { border: 1px solid #ddd; margin-bottom: 35px; }

/* Back To Top Scroll Arrow */
.back-to-top { display:none; background-color:#222222; border:none; color:#ffffff; cursor:pointer; font-size:24px; line-height:38px; height:40px; width:40px; border-radius:5px; -webkit-border-radius:5px; position:fixed; bottom:40px; right:40px; text-align:center; box-shadow:0 0 2px #f2f2f2; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; z-index:99; }
.back-to-top:hover{ background-color:#cd5353; color:#ffffff; }


/*-----------------------------------------
* 05. Responsive Media CSS
* -----------------------------------------*/
@media only screen and (min-width:768px){
    #nav-menu{ display:block !important }
}

@media only screen and (max-width:1520px){
    .container-fluid { padding-left:30px; padding-right:30px; }
}

@media only screen and (max-width:992px){
    .container-fluid { padding-left:20px; padding-right:20px; }
}

@media only screen and (max-width:767px){
    h2 { font-size: 24px; }
    .title { font-size: 20px; }
    .sub-title { font-size: 18px; }
    section { padding: 30px 0; }

    #sidebar-fix{ display:block; border:none; background-color:transparent; float:none; max-width:100%; min-width:100%; height:58px; width:100%; z-index:99; }
    #vertical .navbar-default{ margin:0; min-height:auto; }
    .navbar-header{ padding: 14px 15px; box-shadow: 0 0 5px #999; }
    #vertical .navbar-brand,
    #vertical .navbar-brand img{ font-size:28px; text-align:left; margin:0; padding:0; }
    #nav-menu{ display:none; max-height: 450px; width:100%; position: absolute; top: 100%; z-index:9; box-shadow:0 10px 6px -6px rgba(0,0,0,0.2); }
	#nav-menu > ul > li:last-child > a { border-bottom:none; }
    #main{ margin-left:0; padding-top:58px; }
    .intro-banner{ padding:7% 0 4%; }
    .intro-content h1 { font-size: 22px; }
    .intro-content { padding: 0; }
    .container-fluid { width: 100%; padding-left:15px; padding-right:15px; }
    .site-logo { float: left; width:50%; }
    .menu-icon { display:block; float: right; font-size: 26px; color: #cd5353; cursor: pointer; width: 50%; text-align: right; }
    .menu-icon.active,.menu-icon:hover { color:#213140; } 
    .menu-icon.active .fa:before { content: "\f00d"; }
    .back-to-top { line-height:34px; height:36px; width:36px; bottom:15px; right:15px; }

}

@media only screen and (max-width:575px){
    .include-html-file-list li { width: 100%; }
}