/**********************************/
/*   Volkno - Master CSS Guide    */
/* 
/*1. Typography
/*		- Headings
/*		- Paragraphs
/*		- Span + Line Heights 
/*		
/*2. Color Scheme
/*3. Ghost Buttons 
/**********************************/

body
{   
    background:#262626;
    font-family: 'Droid Sans', sans-serif;
    /*color: #ebebeb;*/
    font-size: 16px; 
    min-width: 100%;
    width:100%;
    height:100%;
    max-width:100% !important;
    
    top:0px;
    margin:0px;
    padding:0px;
    padding-bottom:0px;

    /* TO HANDLE FIX NAVBAR */
    padding-top: 70px;

}

div {

    max-width:100% !important;
}

html {
    min-width: 100%;
    width:100%;
    height:100%;
    max-width:100% !important;
    margin:0px;
    padding:0px;
}

.input {
    border-radius: 0px;
    background:white !important;
}

::-webkit-scrollbar { 
    display: none; 
}

/* NAVBAR */


#logo-img {
    max-width:100%;
    min-width:460px;
}

#navbar {
    padding:10px;
    font-size:11px;
    margin:0px;
    position:fixed;

    vertical-align: center;
    text-align:center;

    top:0px;
    left:0px;
    padding-left:20px;
    
    min-height:40px;
    max-height:75px;


    z-index:99999 !important;
    background: #000;
    box-shadow:0px 0px 10px 4px #222;
    color:#AAA;
}

#navbar-mobile {
    margin:0px;
    padding:0px;
    top:0px;
    font-family: 'Copperplate / Copperplate Gothic Light', sans-serif;
    
    padding-left:20px;
    min-height:40px;
    height:60px;
    max-height:75px;
    z-index:99999 !important;
    background: #000;
    border:none;border-radius: 0px;

    box-shadow:0px 0px 10px 4px #222;
}

#navbar-pages {
    margin:0px;
    padding:0px;
    top:0px;
    background: #000;
    border:none;border-radius: 0px;

    box-shadow:0px 0px 10px 4px #222;

    margin-left:100px;
    text-align:center;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

#brand {
    min-width:120px;
}

#navbar-user {
    float:right;
    right:0px;
    color:white;
    margin:0px;
    padding:0px;
    max-width:20%;
}

#nav-logo {
    padding:0px;
    margin:0px;
    
    margin-top:0px;
    padding-top:0px;
    border:none;
    min-height:40px;
    height:40px;
    max-height:75px;
    top:0px; 
    float:left;
    left:0px;

}

#nav-volkno {
    padding:0px;
    margin:0px;

    margin-top:0px;
    padding-top:0px;
    border:none;
    min-height:40px;
    height:40px;
    max-height:75px;
    float:left;
    top:0px;

}

.container-fluid {
    padding:0px;
    padding-right:15px;

    margin:0px;
}

#navbar-header {
    padding:0px;
    margin:0px;
    top:10px;
}

#navbar-brand {
     padding:0px;
    margin:0px;
}



.dropdown-menu {
    
    background:#111;
    color:white;
    border:none;
}

.nav-consumer {
    background:#010101;

    margin:0px;
    padding:0px;


    margin-top:0px;
    padding-top:0px;
    
    width:100%;
    min-height:40px;
    height:60px;
    max-height:75px;
    padding-left:15px;
    padding-right:15px;
    vertical-align: center;
    color:#DDD;
    top:0px;


    font-size:14px;
    border-right:1px solid #222;
    border-left:1px solid #222;
    border-radius: 0px;
}

.nav-btn {
    background:#010101;

    margin:0px;
    padding:0px;


    margin-top:0px;
    padding-top:0px;
    
    min-height:40px;
    height:60px;
    max-height:75px;
    padding-left:15px;
    padding-right:15px;
    vertical-align: center;
    color:#DDD;
    top:0px;


    font-size:14px;
    border-right:1px solid #222;
    border-left:1px solid #222;
    border-radius: 0px;
}

.nav-btn:hover {
    transition: opacity .45s ease-in-out;
   -moz-transition: opacity .45s ease-in-out;
   -webkit-transition: opacity .45s ease-in-out;

   opacity:1;
}

#nav-signup {
    border:2px solid white;
    margin-top:0px;
    padding-top:0px;
    
    min-height:40px;
    height:60px;
    max-height:75px;
    padding-left:10px;
    padding-right:10px;

}

#nav-signup:hover {
    background:white;
}

#nav-login {
    padding-left:10px;
    padding-right:10px;
}


/* PAGE STYLING */

#layer0
{
    position: relative;  text-align:center;margin-top:0px;
}

#layer0Header
{
    position: relative; left:0px; font-size:3em; font-family: 'Montserrat', sans-serif; color:#FFF; letter-spacing: 3px; text-shadow:0px 1px #999;
}

#client-lp-icons {
    height:200px;
    margin-top:200px;
    opacity:0.7;
}

.lp-icon {

}

.lp-icon-img {
    width:100%;
    color:#777;
    font-size:72px;
}

.lp-icon-title {
    margin-top:16px;
    font-size:32px;
    opacity:0.7;
}


/******** TYPOGRAPHY *********/

.p-black-box {
    transition: opacity .15s ease-in-out;
   -moz-transition: opacity .15s ease-in-out;
   -webkit-transition: opacity .15s ease-in-out;
    border:none;
    
    background:#333;
    color: white !important;
    min-width:176px;
    min-height: 100%;
    height:100%;
    white-space: normal;
    text-align: center;

    margin: 30px;
    margin-left:0px;
    margin-top:15px;
    padding:5px;
    font-family: 'Droid Sans', sans-serif;
    font-size: 14px;
    line-height: 20px;
    text-transform: uppercase;  
    font-weight: lighter;


}

.hot {
    color:#F76202; text-shadow:0px .5px #111;
}

label {
    color:#DDD;
}

#footer-section {
    min-height:40px;
    max-height:10%;
    padding-top:15px;
    padding-bottom:15px;
    bottom:0px;
    background:black;
}

.footer-btn {
    background:none;

    border:1px solid #777;
    padding:5px;
    margin:5px;

    border-radius: 0px;
    font-size:14px;
    color:white;
}

#copyright-span {

    position:fixed;
    bottom:0px;
    right:10px;
    font-size:11px;

    height:15px;
    margin:0px;
    padding:0px;
}

.box {
        min-width: 100% !important;
        width: 100% !important;

    max-width: 100% !important;
    border: none;
    border-bottom: inset 1px #DDD;
    margin: 0px;
border-radius: 0px;
    padding: 100px;

    top:0px;

    min-height: 60%;
    height:800px;
    max-height: 80%;
    
}

.box-full {
        min-width: 100% !important;
    border: none;
    
    margin: 0px;
border-radius: 0px;
    padding: 30px;
    padding-top:100px;
    padding-bottom:80px;

    min-height: 60%;
    height:100%;

   
}

.white-box {
    background-color:white;

    color:#3a3532;
    border-bottom: inset 1px #DDD;
}

.grey-box {
    background-color: #EEE;

    color:black;
    border-bottom: inset 1px #DDD;
}

.darkgrey-box {
    background-color: #3a3532;

    color:white;
    border-bottom: inset 1px #999;
}


.dashboard-heat-metrics {
    min-width:350px;
    max-width:30%;
    margin: 0px;
    margin-left:2%;
    min-height: 250px;
    margin-bottom:2%;

    padding:15px;

    text-align:center;
    background:#222;
    color:#DDD;
    

    border:2px inset #ddd;
    font-size:1em;
}



.dashboard-heat-metrics p {
    font-size:1.6em;
    color:white;
}
.p-red-box-gradient {
    background: linear-gradient( 160deg,#e12d15 ,#8b1725);

     transition: opacity .15s ease-in-out;
   -moz-transition: opacity .15s ease-in-out;
   -webkit-transition: opacity .15s ease-in-out;
    border:none;
    
    color: white !important;
    min-width:176px;
    min-height: 48px;
    white-space: normal;
    text-align: center;

    margin: 30px;
    margin-left:0px;
    margin-top:60px;
    padding:5px;
    font-family: 'Droid Sans', sans-serif;
    font-size: 14px;
    line-height: 20px;
    text-transform: uppercase;  
    font-weight: lighter;

    opacity:0.8;
}

.p-black-box:hover {
    transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
    opacity:1;

}

.flat-button-orange-lite:hover {
    transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
    opacity:1;
} 

.p-title {
    color: white;
    font-size: 42px;
    padding: 70px 0 10px 0;
    line-height: 42px;
    color: #333333;
    font-family: Tahoma, Geneva, sans-serif;
}

.p-subtitle {

}

h1 {

    margin: 2%;
    margin-bottom:0px;
    padding:20px;
    padding-bottom:5px;
    padding-left:0px;
    padding-right:0px;
    font-size:48px;
    font-family: 'Copperplate / Copperplate Gothic Light', sans-serif;
    /* 'Abel', sans-serif;
    display: inline-block;

  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; */
    
}

small {
    padding-left:30px;
}

h2 {
    margin: 3%;
    margin-top:0px;
    vertical-align:center;
    padding:0px;
    font-family: 'Dosis', sans-serif;
    font-size: 32px;
    line-height: 40px;
    -webkit-font-smoothing: subpixel-antialiased;
}

h3 {
    margin: 3%;
    padding:0px;
    font-family: 'Nunito', sans-serif;
    font-size: 18px;
    line-height: 20px;
    
    font-weight: 100; 
    -webkit-font-smoothing: subpixel-antialiased;
}

.2case {
    text-transform: uppercase;
}

h4 {
    color: #c4c4c4;
    font-size: 20px;
    -webkit-font-smoothing: subpixel-antialiased;
}

div {
    margin: 0px;
    padding:0px;
}

span {
    /*color: #ebebeb;*/
    font-size: 16px ; 
    color:#3a3532;

}

.nosp {
    margin:0px;
    padding:0px;
}

/*SECTION HEADERS */


.text-lg {
    color:#e12d15;
    font-size: 42px;
    line-height: 50px;

}

.text-sm {
    color:#AAA;
    font-size: 14px;
    line-height: 10px;
    margin-top:15px;

}

.tiny-text {
    color:#777;
    font-size: 14px;
    line-height: 20px;
    margin-top:10px;
    opacity:0.9;
}

.lite-text {
    font-size: 24px;
    line-height: 36px;
    color: #DDD !important;
}

.text-caption-dark {
    font-size: 24px;
    line-height: 36px;
    color: #333;
    
}


.text-body {
    padding-top: 20px;
    font-size: 16px;
    line-height: 24px;
    color: #333333;

}

/* LANDING PAGE */

#demo {
    height:200px;
}

#services {
    margin:0px;
    padding:0px;

}
#services div.row {
    margin:0px;
    padding:0px;
    
}

#trial {
    border-bottom:none;

}

.img {
    max-width:650px;
    
    background:none;
}

#client-lp-img-trial {
    max-width:45%;
    width:650px;
    height:450px;
    min-width:30%;
    bottom:0px;
    margin:0px;
    padding:0px;

    position:absolute;
    background:none;
    z-index:1;
}

#start-img {
        max-width:45%;
    width:450px;
 
    min-width:30%;

    margin:0px;
    padding:0px;


    background:none;
    z-index:1;
}


#works-img {
     margin:0px;
    padding:0px;
    max-width:45%;
    min-width:350px;
    min-height:350px;
    max-height:600px;
    bottom:0px;
    margin:0px;
    padding:0px;
    position:absolute;


    float:left;

}


#drive-img {
     margin:0px;
    padding:60px;

    width:45%;
    max-width:100%;
    min-width:250px;
    min-height:400px;
    height:100%;


    

    position:absolute;

bottom:-50px;
    left:0px;

}

#features-img {
    margin:0px;
    padding:0px;
   min-width:450px;
    max-width:100%;
    float:right;

}

#custom-img {
margin:0px;
    padding:0px;
    max-width:45%;
    min-width:350px;
    min-height:350px;
    max-height:600px;
    bottom:0px;
    margin:0px;
    padding:0px;
    position:absolute;


    float:left;
}



/*PAGE SECTIONS - aka content boxes max-width: 960px !important;*/

.page-section {
    
    min-width: 100%;

}



.section-third {
    max-width:80% !important;
    float:right;
    right:0px;
    width:80%;
}

.header-metric {

    border:none;
    margin:0px;

    right:0px;
    top:25px;
    height:100%;
    background:#333;
    border-left:5px solid #444;
}

.header-metric-dark {

    border:none;
    margin:0px;

    padding:10px;
    right:0px;
    top:5px;
    height:100%;
    background:#111;
    border-left:5px solid #000;
}

.header-metric-value {
    border:1px outset #000;
    font-size:4em;
    line-height:2em;
    color:white;
    min-width:100px;
    max-width:100px;
    min-height:100px;
    max-height:100px;
    vertical-align:center;
    padding-left:35px;padding-top:5px;text-align:center;
    opacity:0.8;
    background:black;
    border-radius:50%;
}

.box div.text-caption-lite {
    margin-top:30px;
}

.box-sm {
    min-width: 100% !important;
    border: none;
    border-radius: 0px;
    border-bottom: inset 1px #DDD;
    margin: 0px;

    padding: 30px;
    padding-top:60px;

    min-height: 100px;
    height: 20%;

}

.black-box-gradient {
    background:linear-gradient(180deg, #000, #111111);
}

.black-box {
    background-color: #000;

}

.white-box {
    background-color:white;
    min-height: 60%;
    height: 60%;
    color:#3a3532;

}

.grey-box {
    background-color: #EEE;
    min-height: 60%;
    height: 60%;
    color:black;

}

.darkgrey-box {
    background-color: #3a3532;
    min-height: 60%;
    height: 60%;

}


.dashboard-heat-metrics {
    min-width:350px;
    max-width:30%;
    margin: 0px;
    margin-left:2%;
    min-height: 250px;
    margin-bottom:2%;

    padding:15px;

    text-align:center;
    background:#222;
    color:#DDD;
    

    border:2px inset #ddd;
    font-size:1em;
}



.dashboard-heat-metrics p {
    font-size:1.6em;
    color:white;
}
/*
.dashboard-heat-metrics .btn-warning {
    max-width:50%;
    float:right;
}
*/
.summary-metrics-details {
    color:#DDD;
    margin:0px;
    padding:0px;
    margin-top:15px;
    margin-bottom:15px;
    font-size:18px;
    min-height:100px;

}

/*Ghost Buttons */

.ghost-button-dark {
    border:1px solid black;
    border-radius: 0px;
    background-color: none;
    color: black;
    width:176px;
    height: 48px;
    line-height: 48px;
    
    text-transform: uppercase;

    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 200; 
    -webkit-font-smoothing: antialiased; 
}

.ghost-button-lite {
    border:1px solid white;
    border-radius: 0px;
    background-color:none;
    color: white;
    width:176px;
    height: 48px;
    line-height: 48px;
    
    text-transform: uppercase;

    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 200; 

}

.ghost-btn {
    border:none;
    border-radius: 0px;
    background-color:none;
    background:none;
    color: #777;
    text-align:center;
    padding:5px;
    min-width:100px;
}

.flat-button-orange {
    border:none;
    border-radius: 0px;
    background-color: #e12d15;
    color: white !important;
    min-width:176px;
    min-height: 48px;
    white-space: normal;
    text-align: center;

    margin: 0px;
    margin-top:60px;
    padding:5px;
    font-family: 'Droid Sans', sans-serif;
    font-size: 14px;
    line-height: 20px;
    text-transform: uppercase;  
    font-weight: lighter;

    z-index:9999999 !important;
}

.flat-button-orange-lite {
    border:none;
    border-radius: 0px;
    background-color:#fe781e;
    color: white !important;
    min-width:176px;
    min-height: 48px;
    white-space: normal;
    text-align: center;

    margin: 0px;
    margin-top:60px;
    padding:5px;
    font-family: 'Droid Sans', sans-serif;
    font-size: 14px;
    line-height: 20px;
    text-transform: uppercas
    e;  
    font-weight: lighter;

    z-index:99;
}

.flat-button-orange-lite:hover {

}


/* COLOR SCHEME 
-webkit-font-smoothing: subpixel-antialiased;
*/

/* hot orange - #e12d15 */ .hot-orange {color:#e12d15 ;}
/* off white - #85847b  */ .off-white {color:#c3c1bc;}
/* vanilla - #e8e6d7   */  .vanilla {color:#e8e6d7;}
/* dark grey - #3a3532 */  .dark-grey {color:#3a3532;}
                            .black-color {color:black;}
                            .white-color {color:white !important;text-shadow:0px 0px 1px #e12d15;}
                            .grey-color {color:grey;}


/* OLD COLORS */

.red-bg {
    border-bottom:6px solid #d43f3a;
    background:#d43f3a;
    color:white;
}

.red-header {
    border-bottom:6px solid #f1461e;
    fill:#f1461e;
    color:#f1461e;
}

.red-color {
    fill:#f1461e;
    color:#f1461e;
    
}

.blue-color {
    border-bottom:6px solid #007fff;
    color:#007fff;
    fill:#007fff;
}
.orange-color {
    border-bottom:6px solid #F76202;
    color:#F76202;
}
.yellow-color {

    border-bottom:6px solid #eea236;
    color:#eea236;
    fill:#eea236;
}
.yellow-bg {
    background:#eea236;
    color:white;
}

/* HELP CSS */

.gauge {
    margin-top:20px;
    margin-bottom: 30px;
}

.flat {
    transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
    opacity:.5;
    border:none;
}

.flat:hover {
    transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
    opacity:1;
    border:none;
}

.well-lg {
    background:black !important;
    border:3px solid#222;
}