/* Wrapper and Toggle Sidebars Styles */
/* 1368-220 = 1118 -200 = 918  */


@sidebar-width : 220px;

#wrapper {
    padding-left: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#wrapper.toggled {
    padding-left: 220px;
}

#sidebar-nav {   /* hides scroll bar */
    overflow-y: hidden;
 } 

#sidebar-wrapper { 
    z-index: 1000;
    position: fixed;
    margin-top: 0px; /* adjust to navbar height */
    left: 220px;
    width: 0; 
    margin-bottom:0px;
    height: 100%;
    margin-left: -220px;
    overflow-y: hidden;
     overflow-x: hidden;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#rightbar-wrapper { 
    position: absolute;
    top: 50px; /* adjust to navbar height */
    right: 0px;    
    width: 220px; 
    margin-bottom:0px;
    height: 100%;
    padding: 0 0;
    background-color:rgba(200, 200, 200, 0.1);
}

#wrapper.toggled #sidebar-wrapper {
    width: 220px;
}

#page-content-wrapper {
    position: relative; 
    max-width: 1085px;   /* 220px + 220px + 960px = 1360px   */    
    margin-left:30px;
    margin-right:220px;    
    /* padding: 120px; */
}


#wrapper.toggled #page-content-wrapper {
    position: absolute;
    margin-left: 30px;
    /* width: calc(100% - 220px); */     
    
}


/* Media queries for 
============================*/

@media(min-width:1080px) {
    #wrapper {
        padding-left: 0px;
    }

    #wrapper.toggled {
        padding-left: 0;
    }

    #sidebar-wrapper {
        width: 220px;
        background-color:rgba(200, 200, 200, 0.3);
    }

    #wrapper.toggled #sidebar-wrapper {
        width: 0px;
    }

    #page-content-wrapper {
        position: relative;
        padding-top: 0px;  /* Main page starts here */
        padding-left: 30px;       
    }

    #wrapper.toggled #page-content-wrapper {  /* side menu IN */
        position: relative;
        margin-right: 0px;
    }
    
    #wrapper #page-content-wrapper {   /* side menu OUT */
        position: relative;
        margin-left: 220px;  
    }    
     
    
}

/* MOBILE BASE CSS */


body {
  padding-top: 50px;
  background-color: #fafafa ;
  font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.container {
  width:100%;
}
.page-bg {
  background-color: #fff ;  
  border: 1px solid;
  border-color: #ddd;
  min-height:1080px;
}

.header {
  padding-top: 0px;
  padding-bottom: 20px;
}

.header-title {
    z-index:100;
    position:absolute; 
    font-size: 2.8em;
    font-family: Roboto,Arial;  
    color: #555; 
    font-weight: 300; 
    top: 25%; 
    left: 250px;
}

var {  /* must be here to remove italic style from var font */
font-style: normal; 
}

.footer {
  border-top: 1px solid #444;
  padding-top: 20px;
  margin-top: 20px;
  color: #999
}

#faqs h6	{ cursor:pointer; font-size:16px }
#faqs h6.active	{ color:#0066ff; }
#faqs div { height:0; overflow:hidden; position:relative; }
#faqs div p	{ padding:0; margin-bottom:10px; }

#read-more h6	{ cursor:pointer; font-size:16px }
#read-more h6.active	{ color:#333; }
#read-more div { height:0; overflow:hidden; position:relative; }
#read-more div p	{ padding:0; margin-bottom:5px; }


/* PAGE TEXT */

.text-position {
  padding: 0px 0px;
  text-align: left;
  max-width:95%;
}

p {font-size: 15px;}

h1 {position:relative;
    top:-10px;
    left:0px;
    color: #555;
    font-size: 36px;
    font-family: Roboto,Arial; 
    font-style: normal;
    font-weight: 300;   
}

h2 {
    color: #555;
    font-size: 30px;
    font-family: Roboto,Arial; 
    font-weight: 300;
}



.fa-text { /* font awesome symbols with text */
  font-family: Arial;
  font-size: 16px;
}

/* CUSTOM BUTTON - USE CLASS BTN FOR LARGER BUTTONS */

.button {     /* https://catalin.red/just-another-awesome-css3-buttons/ */   
    display: inline-block;
    white-space: nowrap;
    background-color: #ddd;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc));
    background-image: -webkit-linear-gradient(top, #eee, #ccc);
    background-image: -moz-linear-gradient(top, #f3f3f3, #ddd);
    background-image: -ms-linear-gradient(top, #eee, #ccc);
    background-image: -o-linear-gradient(top, #eee, #ccc);
     background-image: linear-gradient(top, #f3f3f3, #ddd);
            
    border: 1px solid #777;
    padding-top: 0px;
    padding-right: 8px;
    padding-bottom: 0px;
    padding-left: 8px;
    margin: 0.2em;
    font: Roboto, Arial, Helvetica;
    font-weight:400;
    text-decoration: none;
    color: #222;
    text-shadow: 0 1px 0 rgba(255,255,255,.8);
    border-radius: 2px;
    box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
}

.button:hover {
    background-color: #eee;        
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#ddd));
    background-image: -webkit-linear-gradient(top, #fafafa, #ddd);
    background-image: -moz-linear-gradient(top, #fafafa, #ddd);
    background-image: -ms-linear-gradient(top, #fafafa, #ddd);
    background-image: -o-linear-gradient(top, #fafafa, #ddd);
    background-image: linear-gradient(top, #fafafa, #ddd); 
    text-decoration:none;    
}

.button-top {  /* back to top of page button */
    color: #333;
    background-color: #eee;
    border: 1px;
    border-color: #888;
    font-size: 14px;
    padding: 4 3px;
    margin-bottom:20px;
    float:right;
}

/* LAYOUTS */

.portfolio-item {
    margin-bottom: 20px;
}

/* NAVBAR CUSTOM DARK */


/* top menu logo image */
.navbar-brand {
  padding: 0px; /* firefox bug fix */
}

.navbar-brand {
  padding: 10px 0px 3px 5px; /* top-right-bottom-left */
  height: 50px; /* navbar height */
  line-height: 30px; 
  display: inline-block;
} 

.navbar-brand img {     
  margin-left: 10px; 
  height: 30px;  
  display:inline-block;
  }
  
.navbar-header { /* Match Navbar Brand width to Sidebar width */
    min-width: 180px;
} 

.navbar {       
  margin: auto;
  max-height: 50px; /* navbar height */
  left:0;
  padding-left:0;
}

.navbar-nav {     
  display: inline-block;
  margin: auto;
}

.navbar-nav .li {
  vertical-align: bottom;
}

.navbar-nav > li {border-right: 0px solid #666;}
.navbar-nav {border-left: 0px solid #666;}

.nav .navbar-nav ul li a {  
  padding: 10px 10px 10px 10px; /* top-right-bottom-left */
  text-transform:none; 
  font-style: normal;   
  color:#fff;
}

.nav > li > a {
  position: relative;    /* spacing around text */
  display: block;
  padding: 10px 10px 10px 10px; /* top-right-bottom-left */
  text-transform:none; 
  font-style: normal;   
  color:#fff;
  
}

.navbar-custom .navbar-nav > li > a {
  padding-top:14px;  /* Navbar text position & Font size */
  font-size:16px; 
  font-family: Roboto, "Helvetica Neue", Helvetica, Arial ;  
  font-weight: 300; 
  font-style: normal;   
}



/** CREATE NAVBAR COLOR SCHEMES at http://twitterbootstrap3navbars.w3masters.nl 
======================================================================== **/

.navbar-custom {
  background-color: #333;
  border-color: #222;
  background-image: -webkit-gradient(linear, left 0%, left 100%, from(#4b4d4d), to(#323333));
  background-image: -webkit-linear-gradient(top, #4b4d4d, 0%, #323333, 100%);
  background-image: -moz-linear-gradient(top, #4b4d4d 0%, #323333 100%);
  background-image: linear-gradient(to bottom, #4b4d4d 0%, #323333 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff4b4d4d', endColorstr='#ff323333', GradientType=0);
}

.navbar-custom { /* Use Image as Navbar background */
  background-color: #333;
  background: url('/theme/navbar-dark.png') center center no-repeat scroll;
  height:50px; /* navbar height */
  margin-top:0px;
  margin-bottom:0px;
   -webkit-background-size: cover;
   -moz-background-size: cover;
    background-size: cover;
   -o-background-size: cover;
}

.navbar-custom .navbar-brand {
  color: #ffffff;
}
.navbar-custom .navbar-brand:hover,
.navbar-custom .navbar-brand:focus {
  color: #e6e6e6;
  background: transparent !important;
}
.navbar-custom .navbar-text {
  color: #ffffff;
}

.navbar.navbar-default, .navbar.navbar-custom, .navbar-default .navbar-toggle{
  border:none !important ;
}

.navbar-custom .navbar-nav > li:last-child > a {
  border-right: 0px solid #fff;  
}

.navbar-custom .navbar-nav > li > a {
  color: #ffffff;
  border-left: 0px solid #fff;
  border-right: 0px solid #fff;   
}

.navbar-custom .navbar-nav > li > a:hover,
.navbar-custom .navbar-nav > li > a:focus {
  color: #c0c0c0;
  background: transparent !important;
}

.navbar-custom .navbar-nav > .active > a,
.navbar-custom .navbar-nav > .active > a:hover,
.navbar-custom .navbar-nav > .active > a:focus {
  color: #c0c0c0;
  background: transparent !important;
  background-image: -webkit-gradient(linear, left 0%, left 100%, from(#222222), to(#3b3c3c));
  background-image: -webkit-linear-gradient(top, #222222, 0%, #3b3c3c, 100%);
  background-image: -moz-linear-gradient(top, #222222 0%, #3b3c3c 100%);
  background-image: linear-gradient(to bottom, #222222 0%, #3b3c3c 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff222222', endColorstr='#ff3b3c3c', GradientType=0);
}

.navbar-custom .navbar-nav > .disabled > a,
.navbar-custom .navbar-nav > .disabled > a:hover,
.navbar-custom .navbar-nav > .disabled > a:focus {
  color: #cccccc;
  background: transparent !important;
}
.navbar-custom .navbar-toggle {
  border-color: #dddddd;
}
.navbar-custom .navbar-toggle:hover,
.navbar-custom .navbar-toggle:focus {
  background-color: #dddddd;
}
.navbar-custom .navbar-toggle .icon-bar {
  background-color: #cccccc;
}
.navbar-custom .navbar-collapse,
.navbar-custom .navbar-form {
  border-color: #202121;
}
.navbar-custom .navbar-nav > .dropdown > a:hover .caret,
.navbar-custom .navbar-nav > .dropdown > a:focus .caret {
  border-top-color: #c0c0c0;
  border-bottom-color: #c0c0c0;
}
.navbar-custom .navbar-nav > .open > a,
.navbar-custom .navbar-nav > .open > a:hover,
.navbar-custom .navbar-nav > .open > a:focus {
  background: transparent !important;
  color: #c0c0c0;
}
.navbar-custom .navbar-nav > .open > a .caret,
.navbar-custom .navbar-nav > .open > a:hover .caret,
.navbar-custom .navbar-nav > .open > a:focus .caret {
  border-top-color: #c0c0c0;
  border-bottom-color: #c0c0c0;
}
.navbar-custom .navbar-nav > .dropdown > a .caret {
  border-top-color: #ffffff;
  border-bottom-color: #ffffff;
}


/* navbar 
http://stackoverflow.com/questions/18599778/decreasing-height-of-bootstrap-3-0-navbar

.navbar-primary .navbar { background:#9f58b5; border-bottom:none; }
.navbar-primary .navbar .nav > li > a {color: #501762;}
.navbar-primary .navbar .nav > li > a:hover {color: #fff; background-color: #8e49a3;}
.navbar-primary .navbar .nav .active > a,.navbar .nav .active > a:hover {color: #fff; background-color: #501762;}
.navbar-primary .navbar .nav li > a .caret, .tnav .navbar .nav li > a:hover .caret {border-top-color: #fff;border-bottom-color: #fff;}
.navbar-primary .navbar .nav > li.dropdown.open.active > a:hover {}
.navbar-primary .navbar .nav > li.dropdown.open > a {color: #fff;background-color: #9f58b5;border-color: #fff;}
.navbar-primary .navbar .nav > li.dropdown.open.active > a:hover .caret, .tnav .navbar .nav > li.dropdown.open > a .caret {border-top-color: #fff;}
.navbar-primary .navbar .navbar-brand {color:#fff;}
.navbar-primary .navbar .nav.pull-right {margin-left: 10px; margin-right: 0;}

.navbar-xs .navbar-primary .navbar { min-height:28px; height: 28px; }
.navbar-xs .navbar-primary .navbar .navbar-brand{ padding: 0px 12px;font-size: 16px;line-height: 28px; }
.navbar-xs .navbar-primary .navbar .navbar-nav > li > a {  padding-top: 0px; padding-bottom: 0px; line-height: 28px; }
.navbar-sm .navbar-primary .navbar { min-height:40px; height: 40px; }
.navbar-sm .navbar-primary .navbar .navbar-brand{ padding: 0px 12px;font-size: 16px;line-height: 40px; }
.navbar-sm .navbar-primary .navbar .navbar-nav > li > a {  padding-top: 0px; padding-bottom: 0px; line-height: 40px; }
*/

/* rightbar-custom-light.css */

/* This is a modified the left sidebar CSS. So CSS for sublevels and brand is still here, but not used */ 

#rightbar-wrapper {  /* Overrides CSS in page-wrapper.css */
    position: absolute;
    top: 50px; /* adjust to navbar height */
    right: 0px;    
    width: 220px; 
    margin-bottom:0px;
    height: 100%;
    padding: 0 0;
    background-color:rgba(200, 200, 200, 0.2);  /* rightbar background */
}
/* RIGHT BAR POSITION */

.side-menu { /* right column position */
    position:relative;
    top:15px;
    margin-left:20px;
}

h4.side-menu-title { /* right column titles */
    position:relative;
    top:5px;
    padding-bottom:0px;
    margin-bottom:0px;
    margin-left:10px;
}


/* RIGHT SIDE PAGES BARS STYLING */

.side-pages {
    position: relative;    
    padding: 0px;
    padding-top:10px;
    margin: 0px;      
    margin-left:-5px;
    list-style: none;		
    width: 98%;    		
}

.side-pages ul {
    padding: 0;
    margin: 0 0 0 0px; 
}

.side-pages ul, .side-pages li {
    padding-left:5px;
    list-style: none;
		max-width: 95%;		
}

.side-pages > .sidebar-brand {    
    height: 40px;
    color: #555;   
         
}
.side-pages > .sidebar-brand a {
    font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 18px;
    line-height:35px;
    letter-spacing: 1px;
    padding-left: 15px;
    color: #fff;
    background: rgba(80, 80, 80, 0.8) /*  background with 60% opacity */     
}

.side-pages > .sidebar-sub-brand {
    height: 25px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background: rgba(100, 100, 100, 0.4) /*  background with 60% opacity */        
}

.side-pages > .sidebar-sub-brand a {
    font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 17px;
    line-height:20px;
    padding-left: 10px;
    padding-right: 10px;
    color: #fff;
    letter-spacing: 1px; /* make title easier to read */         
}
 
.side-pages ul {
    padding: 0;
    margin: 0 0 0 0px; 
}

.side-pages > li {
    margin: 4px 0px;
    text-indent: 5px;
    text-transform: none;  
    font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;    
}

.side-pages > li li {
    margin: 3px 0px;
    text-indent: 6px;
}

.side-pages a {
    color: #333;
    display: block;
    outline: none;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    text-decoration: none;
}

.side-pages li > a > span {
    float: right;
    font-size: 16px;
    font-weight: bolder;            
}

.side-pages li > a:hover > span {
    color: #aaa;
}

.side-pages li > a > span:after {
    font-size: 20px;
    content: '\25be';
    margin-right: 5px;
}
.side-pages li.open > a > span:after {
  font-size: 20px;
    content: '\25b4';        
}

.side-pages a:hover, .side-pages li.active > a {
    background-color: #777;
    color: #fff;
}
  
.side-pages > li.active > a  {
    background-color: #aaa;
}

.side-pages li a {   /* sub bar text */
    font-size: 14px;
    line-height: 18px;
    padding: 3px 15px;   /* top-right-bottom-left */
    margin:2px;   /* space between LIs */
    background-color: #eee; 
    background: rgba(100, 100, 100, 0.1) /*  sub page bar background with 90% opacity */   
    
}

.side-pages > li > a {  /* bar text */
    font-size: 15px;
    line-height: 20px;
    padding: 3px 2px 3px 5px; /* top-right-bottom-left */
    background-color: #eee; 
    background: rgba(100, 100, 100, 0.07) /*  page bar background with 90% opacity */      
}

/* Optionnal Font Awesome */

.fa-brand {  /* Upper Left Corner Menu Button */
   margin-right: 0px;
   margin-left: 5px; 
   padding-top:8px;
   font-size:30px;  
}

.fa-title { /* Side Menu Title Icon */
   margin-right: 12px;
   margin-left: -10px; 
   padding-top: 0px;
   padding-bottom: 0px;
  font-size:16px;   
}

.fa-sub-title { /* Side Menu Sub Title Icon */
   margin-right: 8px;
   margin-left: 0px; 
   padding-top: 0px;
   padding-bottom: 0px;
  font-size:14px;   
}

/* MEDIA QUERIES CSS */


.navbar-collapse, .navbar-collapse.collapse {
overflow: visible;
}   
.navbar-toggle {
display: none;
} 

.navbar-collapse.collapse{
  display: block !important;
}

.navbar-right{
  float: right !important;
}



/* RESPONSIVE 1080px WIDTH */
@media (max-width: 1080px) {
.status { /* status text block for page varaibles */
    display:none;
}

.sidebar-nav { /* status text block for page varaibles */
    display:initial;
}

.navbar-nav.navbar-left {
    display:none !important;
    }
    
.navbar-right {
    display:initial !important;  
    } 
    
.navbar-header { /* Match Navbar Brand width to Sidebar width */
    min-width: 220px;
}        

.header-title {
    z-index:100;
    position:absolute; 
    font-size: 2.2em;
    font-family: Roboto,Arial;  
    color: #555; 
    font-weight: 300; 
    top: 25%; 
    left: 20%;
}
}

/* RESPONSIVE 768px WIDTH or less

https://stackoverflow.com/questions/42724884/bootstrap-navbar-collapse-point-768px/42725215#42725215

*/



@media (max-width: 768px) {

.header-title {
    z-index:100;
    position:absolute; 
    font-size: 1.8em;
    font-family: Roboto,Arial;  
    color: #555; 
    font-weight: 300; 
    top: 25%; 
    left: 20%;
}

.navbar-header { /* Match Navbar Brand width to Sidebar width */
    min-width: 220px;
    display:none !important;
} 

.navbar-nav.navbar-left {
    display:none !important;
    }

.navbar-nav.navbar-right {
    display:nono !important;  
    } 
      
}