/* Default CSS */
/* Generated by the CoffeeCup HTML Editor - www.coffeecup.com */

@import url(css/bootstrap.css);

body,html { overflow-x: hidden; background:#323232; }

/*.img-responsive { width:30%; }*/

/* Navbar */
.navbar {
/*max-height:100px;*/
background-color:rgba(0, 0, 0, 0);
border:none;
}

.navbar .nav > li > a {
    /*padding: 5px 5px 5px !important;*/
}

.navbar .nav li.dropdown.open > .dropdown-toggle, .navbar .nav li.dropdown.active > .dropdown-toggle, .navbar .nav li.dropdown.open.active > .dropdown-toggle {
background-color: transparent;
color:hotpink;
}
.navbar-inner {
    position:relative;
    padding-top:20px;
}
.navbar .brand {
    position:absolute;
    margin-left:0%;
    padding-top:15px;
}

/* Create a medium height at 100px */
.navbar {min-height:100px}
.navbar .nav > li > a, .navbar .nav > li > a:first-letter,
.navbar .nav > li.current-menu-item > a, 
.navbar .nav > li.current-menu-ancestor > a {
    display:        inline;
    color:          white;                        
    /*font-family:    Garamond;*/
    /*font-size:      1.5em;*/
    /*top:        75px;*/
}
/* Adjust Menu colors - Hover */
.navbar .nav > li > a:hover { 
    color:          orange;                      
    text-shadow:    none;
}
/* Adjust Menu colors - Active */
.navbar .nav > li > a:active, .navbar .nav > li > a:active:first-letter,
.navbar .nav > li.current-menu-item > a, 
.navbar .nav > li.current-menu-ancestor > a,
.navbar .nav > li.current-menu-item > a:first-letter, 
.navbar .nav > li.current-menu-ancestor > a:first-letter {
    color:          orange;
    text-shadow:    none;
}

/* Remove the Hover/Focus Colors  */
.navbar .nav > li.current-menu-item > a, .navbar .nav > li.current-menu-ancestor > a, 
.navbar .nav > li > a:hover, .navbar .nav > li > a:focus, {
    color:          orange;
}


#signUpLogIn:hover
{
  cursor: pointer;
  color: orange;
} 
#signUpHere:hover
{
  cursor: pointer;
  color: orange;
} 
#logInHere:hover
{
  cursor: pointer;
  color: orange;
} 
.dropdown-menu li > a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > a {
    background:transparent;
    color:orange !important;
    background-image:none;
}

.dropdown-menu, .dropdown-menu li > a {
    background:rgba(0,0,0,0.6);
    color:white !important;
    /*background-color:#424242;*/
}

#idnavbar .active a{ 
    background:transparent; 
    color:orange !important;
}

#idnavbarsub .active a{ 
    background:transparent; 
    text-decoration:none;
    border-radius:0px;
    /*border-bottom-width: 4px;*/
    border-bottom:5px;
    border-bottom-style: solid;
    border-bottom-color: #ef4572;
}

/* Video Size */
.videosize {
    width:100%;
    height:100%
}

/*.navbar-default .navbar-nav > .active{
    color: #000;
   background: #d65c14;
 }
 .navbar-default .navbar-nav > .active > a, 
 .navbar-default .navbar-nav > .active > a:hover, 
 .navbar-default .navbar-nav > .active > a:focus {
      color: #000;
      background: #d65c14;
 }*/
 
.containersub {
    text-align:left;
 }
/* Xest Logo */
.xestlogo {
    margin-left: 0;
    height:90px; 
    margin-top: -7px;
    opacity:1;
}


/* Fonts */
h1 {
  font-size: 4vmin;
  font-family: 'Roboto', sans-serif;
}
h2 {
  font-size: 3vmin;
  font-family: 'Roboto', sans-serif;
}
h3 {
  font-size: 2.2vmin;
  font-family: 'Roboto', sans-serif;
}
h4 {
  font-size: 5vmin;
  font-family: 'Roboto', sans-serif;
}
p {
  font-size: 2vmin;
  font-family: 'Roboto', sans-serif;
}
.p1 {
  font-size: 1.5vmin;
  font-family: 'Roboto', sans-serif;
}
p2 {
  font-size: 1vmin;
  font-family: 'Roboto', sans-serif;
}
p.big {
  font-size: 1.5vmin;
  line-height:130%;
  font-family: 'Roboto', sans-serif;
}
p.small {
  font-size: 1vmin;
  line-height:100%;
  font-family: 'Roboto', sans-serif;
}
h5 {
  font-size: 1.7vmin;
  font-family: 'Roboto', sans-serif;
  font-weight:580;
  color: #404040
}
h6 {
  font-size: 2vmin;
  font-family: 'Roboto', sans-serif;
  font-weight:580;
  color: #ef4572
}
c1 {
  font-size: 5vmin;
  font-family: 'Roboto', sans-serif;
}
c2 {
  font-size: 4vmin;
  font-family: 'Roboto', sans-serif;
}

/* Contact Investors */
#contactbackground {
    background-color:#9bc33c;
 }

/* Products */
#productbackground {
    background-color:#9bc33c;
 }

.productstextheader {
    background-color:transparent;
    border:none;
    color:#fff;
    /*font-size:4vmin;*/
    font-family: 'Roboto', sans-serif;
    text-align: center;
    padding-top:20px;
}
 
.productstext1 {
    background-color:transparent;
    border:none;
    color:#fff;
    /*font-size:2vmin;*/
    font-family: 'Roboto', sans-serif;
    text-align: justify;
}

.productstext2 {
    background-color:transparent;
    border:none;
    color:#fff;
    /*font-size:2vmin;*/
    line-height:14px;
    font-family: 'Roboto', sans-serif;
    text-align: justify;
}

.productstext3 {
    background-color:transparent;
    border:none;
    color:#fff;
    /*font-size:2vmin;*/
    font-family: 'Roboto', sans-serif;
    text-align: justify;
    padding-top:20px;
}

.productstext4 {
    background-color:transparent;
    border:none;
    color:#fff;
    /*font-size:2vmin;*/
    font-family: 'Roboto', sans-serif;
    text-align: justify;
} 

 /* Features */
#featuresbackground {
    background-color:#fff;
}

.featurestextheader {
    background-color:transparent;
    border:none;
    color:#989898;
    /*font-size:30px;*/
    font-family: 'Roboto', sans-serif;
    text-align: center;
    padding-top:20px;
}
 
.featurestext1 {
    background-color:transparent;
    border:none;
    color:#989898;
    /*font-size:22px;*/
    font-family: 'Roboto', sans-serif;
    text-align: justify;
}

.featurestext2 {
    background-color:transparent;
    border:none;
    color:#fff;
    /*font-size:1px;*/
    line-height:14px;
    font-family: 'Roboto', sans-serif;
    text-align: justify;
}

.featurestext3 {
    background-color:transparent;
    border:none;
    color:#989898;
    /*font-size:18px;*/
    font-family: 'Roboto', sans-serif;
    text-align: justify;
}

.featurestext4 {
    background-color:transparent;
    border:none;
    color:#989898;
    /*font-size:18px;*/
    font-family: 'Roboto', sans-serif;
    text-align: justify;
} 

.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
    width: 70%;
    margin: auto;
}
  
 /* Integration */
#integrationbackground {
    background-color:#f3ac41;
}

.integrationtextheader {
    background-color:transparent;
    border:none;
    color:#fff;
    /*font-size:30px;*/
    font-family: 'Roboto', sans-serif;
    text-align: center;
    padding-top:20px;
}
 
.integrationtext1 {
    background-color:transparent;
    border:none;
    color:#fff;
    /*font-size:22px;*/
    font-family: 'Roboto', sans-serif;
    text-align: justify;
}

.integrationtext2 {
    background-color:transparent;
    border:none;
    color:#fff;
    /*font-size:1px;*/
    line-height:14px;
    font-family: 'Roboto', sans-serif;
    text-align: justify;
}

.integrationtext3 {
    background-color:transparent;
    border:none;
    color:#fff;
    /*font-size:18px;*/
    font-family: 'Roboto', sans-serif;
    text-align: justify;
}

.integrationtext4 {
    background-color:transparent;
    border:none;
    color:#fff;
    /*font-size:18px;*/
    font-family: 'Roboto', sans-serif;
    text-align: justify;
} 

 /* Team */
.teamjohn {
    background-image: url(../images/team/john1b-compressor.png);
    background-size:cover;
    background-repeat: no-repeat;
    background-position:left;
    width:150px;
    height:250px;
}
.teamjohn:hover{
    background-image: url(../images/team/john2b-compressor.png);
    background-size:cover;
    background-repeat: no-repeat;
    background-position:left;
    width:150px;
    height:250px;
}
.teamdrew {
    background-image: url(../images/team/drew1b-compressor.png);
    background-size:cover;
    background-repeat: no-repeat;
    background-position:left;
    width:150px;
    height:250px;
}
.teamdrew:hover{
    background-image: url(../images/team/drew2b-compressor.png);
    background-size:cover;
    background-repeat: no-repeat;
    background-position:left;
    width:150px;
    height:250px;
}
.teamkevin {
    background-image: url(../images/team/kevin1b-compressor.png);
    background-size:cover;
    background-repeat: no-repeat;
    background-position:left;
    width:150px;
    height:250px;
}
.teamkevin:hover{
    background-image: url(../images/team/kevin2b-compressor.png);
    background-size:cover;
    background-repeat: no-repeat;
    background-position:left;
    width:150px;
    height:250px;
}
.teamcarmen {
    background-image: url(../images/team/carmen1b-compressor.png);
    background-size:cover;
    background-repeat: no-repeat;
    background-position:left;
    width:150px;
    height:250px;
}
.teamcarmen:hover{
    background-image: url(../images/team/carmen2b-compressor.png);
    background-size:cover;
    background-repeat: no-repeat;
    background-position:left;
    width:150px;
    height:250px;
} 
#teambackground.container-fluid {
    /*background-image: url(../images/triangles-overlay.png);
    background-repeat: no-repeat;
    background-position:left;*/
    background-color:#fff;
    width: 100%;
    height: 100%;
}
.teamtext1 {
    background-color:transparent;
    border:none;
    color:#606060;
    /*font-size:2vmin;*/
    font-family: 'Roboto', sans-serif;
    text-align: justify;
}

.teamtext2 {
    background-color:transparent;
    border:none;
    color:#606060;
    /*font-size:2vmin;*/
    line-height:14px;
    font-family: 'Roboto', sans-serif;
    text-align: justify;
}

.teamtext3 {
    background-color:transparent;
    border:none;
    color:#606060;
    /*font-size:2vmin;*/
    font-family: 'Roboto', sans-serif;
    text-align: justify;
    padding-top:20px;
}

.teamtext4 {
    background-color:transparent;
    border:none;
    color:#606060;
    /*font-size:2vmin;*/
    font-family: 'Roboto', sans-serif;
    text-align: justify;
} 
 /* Solution */
#solutionbackground.container-fluid {
    /*background-image: url(../images/investor/solution-backing.png);
    background-repeat: no-repeat;
    background-position:center;*/
    /*(background-color:#fff;(*/
    /*background-size:cover;*/
    background-color:#4d4d57;
    width: 100%;
    height: 100%;
}
 /* Traction */
#tractionbackground.container-fluid {
    /*background-image: url(../images/investor/traction-backing.png);
    background-repeat: no-repeat;
    background-position:center;
    (background-color:#fff;
    background-size:cover;*/
    background-color:#4d4d57;
    width: 100%; 
    height: 100%;
}
 /* Value */
#valuebackground.container-fluid {
    /*background-image: url(../images/investor/value-backing.png);
    background-repeat: no-repeat;
    background-position:center;
    background-color:#fff;
    background-size:cover;*/
    background-color:#eb4370;
    width: 100%;
    height: 100%;
}
 /* Integration */
#usedbybackground {
    background-color:#4e4e58;
    
}

.usedbytextheader {
    background-color:transparent;
    border:none;
    color:#fff;
    /*font-size:30px;*/
    font-family: 'Roboto', sans-serif;
    text-align: center;
    padding-top:20px;
}
 /* Customer Stories */
#customerstoriesbackground {
    background-color:#262433;
}

.customerstoriestextheader {
    background-color:transparent;
    border:none;
    color:#fff;
    /*font-size:30px;*/
    font-family: 'Roboto', sans-serif;
    text-align: center;
    padding-top:20px;
}

.customerstoriestext1 {
    background-color:transparent;
    border:none;
    color:#fff;
    /*font-size:2vmin;*/
    font-family: 'Roboto', sans-serif;
    text-align: justify;
} 

.customerstoriestext2 {
    background-color:transparent;
    border:none;
    color:#909090;
    /*font-size:2vmin;*/
    font-family: 'Roboto', sans-serif;
    text-align: justify;
}
 

#enquirybackground1.container-fluid {
     background-image: url(../images/trial_background.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100%;
}

#downloadbackground.container-fluid {
     background-image: url(../images/download_background1.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100%;
}

 /* Customer Stories */
#enquirybackground {
         background-image: url(.\images\enquiry_background1.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100%; 
}

#enquirybackground.container-fluid {
     background-image: url(../images/enquiry_background.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100%;
}

.enquirytextheader {
    background-color:transparent;
    border:none;
    color:#fff;
    /*font-size:30px;*/
    font-family: 'Roboto', sans-serif;
    text-align: center;
    padding-top:20px;
}

.enquirytext1 {
    background-color:transparent;
    border:none;
    color:#fff;
    /*font-size:2vmin;*/
    font-family: 'Roboto', sans-serif;
    text-align: justify;
} 

.enquirytext2 {
    background-color:transparent;
    border:none;
    color:#fff;
    font-size:1vmin;
    font-family: 'Roboto', sans-serif;
    text-align: justify;
} 

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
/* Header Image for min resize */ 
img.no-resize {
    min-height: 300px;
    min-width: 50px;
    max-height:700px;
}

/* Footer */
.alt2{
   background:#4e4d57;
   min-height:150px;
   color: orange !important;
}

/* centered columns styles */
.row-centered {
    text-align:center;
}

.col-centered {
    display:inline-block;
    float:none;
    /* reset the text-align */
    text-align:left;
    /* inline-block space fix */
    margin: 0 auto;
}

.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

/* Xest Buttons */
.btn {
    background-color: #ef4572;
    border-radius: 0px;
    border:none;
    color: #fff;
}

.btn-invert {
    background-color: #fff;
    border-radius: 0px;
    border:none;
    color: #ef4572;
}

.btn-invert:hover, .btn-invert:focus {
    color:white;
    background-color:#ef4572;
}

.btn-purple {
    background-color: #fff;
    border-radius: 0px;
    border:none;
    color: #8c2686;
}

.btn-purple:hover, .btn-purple:focus {
    color:white;
    background-color:#8c2686;
}

.btn-linker:hover, .btn-linker:focus {
    color:white;
    background-color:#96559a;
}
.btn:focus, .btn:hover {
    /*background-color: #ef4572;
    color:#fff;
    text-decoration:none;*/
}

#top-menu .current a
{
    color: orange !important;
}

/*     ***** Modal Forms *****     */

.modal-content {
  background-color: #626262;
  color:white;
}
.modal-body {
  background-color: #909090;
  border-bottom-left-radius:6px;
  border-bottom-right-radius:6px;
}
 
/*     ***** Header Stuff *****     */ 
#headerbackground.container-fluid {
    background-image: url(../images/headers/indexheader.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    min-height: 50px;
    min-width: 50px;
    
    z-index=-1;
    border:none;
}
#headerinvestorbackground.container-fluid {
    background-image: url(../images/headers/investor-header.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    min-height: 50px;
    min-width: 50px;
    
    z-index=-1;
    border:none;
}
#headerteacherbackground.container-fluid {
    background-image: url(../images/headers/teacher.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    min-height: 50px;
    min-width: 50px;
    
    z-index=-1;
    border:none;
}
#headerhomebackground.container-fluid {
    background-image: url(../images/headers/indexheader.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    min-height: 50px;
    min-width: 50px;
    
    z-index=-1;
    border:none;
}
#header404background.container-fluid {
    background-image: url(../images/headers/teacher.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    min-height: 50px;
    min-width: 50px;
    max-height:800px;
    z-index=-1;
    border:none;
}

#headertechnologybackground.container-fluid {
    background-image: url(../images/headers/techsm.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    min-height: 50px;
    min-width: 50px;
    
    z-index=-1;
    border:none;
    /*-webkit-filter: brightness(50%) contrast(50%);*/
}

@media (max-width: @screen-xs) {
    body{font-size: 1px;}
}

@media (max-width: @screen-sm) {
    body{font-size: 4px;}
    
}

#img-usedby1 {
    max-height:100px; 
    /*max-width:100%;*/
}
#img-usedby2 {
    max-height:100px; 
    /*max-width:100%;*/
}
#img-usedby3 {
    max-height:100px; 
    /*max-width:100%;*/
}
#img-usedby4 {
    max-height:100px; 
    /*max-width:100%;*/
}
#img-usedby5 {
    max-height:100px; 
    /*max-width:100%;*/
}
@media (max-width: 767px) {
    .navbar-collapse .navbar-nav {
        max-height: 340px;
        padding-right: 15px;
        padding-left: 15px;
        overflow-x: visible;
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
        -webkit-overflow-scrolling: touch;
        line-height:40px;
    }
    #img-usedby {
        /*max-width:90%;
        margin-left:5%;*/
    }
    .modal {
        margin-left: -17px !important;
    }
    .navbar-inner {
        position:relative;
        padding-top:20px;
    }
    .navbar .brand {
        position:absolute;
        margin-left:14.5%;
        padding-top:20px;
    } 
    #headerhome {
        margin-top:-0%;
        margin-left:-20%;
    }
    #headerteacher {
        margin-top:-0%;
        margin-left:-20%;
    }
    #headertechnology {
        margin-top:-0%;
        margin-left:-20%;
    }
    #headerhomebackground {
        margin-top:-10%;
    }
    #headerteacherbackground {
        margin-top:-10%;
    }
    #headertechnologybackground {
        margin-top:-10%;
    }
    #navbacking {
        background:#fff;
        opacity:1;
    }
    .xestlogo {
        margin-left:-30px;
    }
    #phonenumbers.form-control {
        background:#909090;
        margin-left:65px;
        margin-top:30px;
    }
    #poutput.phoneout {
        width:150px;
        margin-left:65px;
    }
    #idnavbar {
        margin-top:0px;
    }
    .row-buttons .playbutton {
        text-align:left;
        border:none;
    }
    h1 {
        font-size:4.4vmax;
    }
    h2 {
        font-size:2.9vmax;
    }
    h3 {
        font-size: 2.6vmax;
    }
    h4 {
        font-size: 5.4vmax;
    }
    p {
        font-size:2.4vmax;
    }
    p.big {
        font-size: 1.9vmax;
        line-height:100%;
    }
    p.small {
        font-size: 0.6vmax;
        line-height:80%;
    }
    .p1 {
        font-size: 1.9vmax;
    }
    p2 {
       font-size: 1.4vmax;
    }
    h5 {
      font-size: 2vmax;
      font-family: 'Roboto', sans-serif;
      font-weight:580;
      color: #404040
    }
    h6 {
        font-size:2.3vmax;
        font-weight:580;
        color:#ef4572;
    }
    c1 {
        font-size: 4vmax;
    }
    c2 {
        font-size: 3vmax;
    }
    #imgphonesupport {
        max-height:130px;
    }
    #imgtechsupport {
        max-height:130px;
    }
    #tech-apps {
        margin-bottom:30px;
    }
    #prodimage.container-fluid {
        margin-top:0;
    }
    .col-faq {
        min-width:100%;
    }
}

@media (min-width: 1300px) and (max-width: 1400px) {
    .navbar-collapse .navbar-nav {
        max-height: 300px;
        padding-right: 15px;
        padding-left: 15px;
        overflow-x: visible;
        /*border-top: 1px solid transparent;
        box-shadow: inset 0 0px 0 rgba(255, 255, 255, 0.1);*/
        -webkit-overflow-scrolling: touch;
        line-height:0px;
    }
    .navbar-inner {
        position:relative;
        padding-top:20px;
    }
    .navbar .brand {
        position:absolute;
        margin-left:12.5%;
        padding-top:20px;
    }    
    #headerhomebackground {
        margin-top:-4%;
    }
    #headerteacherbackground {
        margin-top:-4%;
    }
    #headertechnologybackground {
        margin-top:-4%;
    }
    #navbacking {
        background:#fff;
        opacity:1;
    }
    .xestlogo {
        margin-left:-5%;
        height:70px;
    }
    #phonenumbers.form-control {
        background:#909090;
        margin-left:65px;
        margin-top:30px;
    }
    #poutput.phoneout {
        width:150px;
        margin-left:65px;
    }
    #idnavbar {
        margin-top:0px;
    }
    .row-buttons .playbutton {
        text-align:left;
        border:none;
    }
    h1 {
        font-size:4vmin;
    }
    h2 {
        font-size:3vmin;
    }
    h3 {
        font-size: 2.7vmin;
    }
    h4 {
        font-size: 5vmin;
    }
    p {
        font-size:2.5vmin;
    }
    p.big {
        font-size: 1.9vmin;
        line-height:100%;
    }
    p.small {
        font-size: 0.6vmin;
        line-height:80%;
    }
    .p1 {
        font-size: 1.8vmin;
    }
    p2 {
       font-size: 1vmin;
    }
    h5 {
      font-size: 2vmin;
      font-family: 'Roboto', sans-serif;
      font-weight:580;
      color: #404040
    }
    h6 {
        font-size:2.3vmin;
        font-weight:580;
        color:#ef4572;
    }
    c1 {
        font-size: 4.3vmin;
    }
    c2 {
        font-size: 3.3vmin;
    }
    #imgphonesupport {
        max-height:130px;
    }
    #imgtechsupport {
        max-height:130px;
    }
    #tech-apps {
        margin-bottom:30px;
    }
    #prodimage.container-fluid {
        margin-top:-0%;
    }
}

#prodimage {
    margin-top:-6%;
}

/*.row [class*="col-"]{
  margin-bottom: -99999px;
  padding-bottom: 99999px;
}

.row{
  overflow: hidden; 
}*/

#tech-apps {
    margin-bottom:400px;
}

.sticky {
    position:fixed;
    top:0;
}

#nav.affix {
    position: fixed;
    top: 0;
    width: 100%
}

#myCarousel {
    /*width:100%; 
    margin-top:-20px*/
}
    
#idnavbar {
    margin-top:70px;
}

@media (min-width: 1600px) {
    #headercontrols {
        margin-top:-100%;
    }
}

#headercontrols {
    margin-top:-90px;
}

#phonenumbers {
    background:#323232; 
    color:#fff;
    border:none;
    margin-left:0px;
}

#poutput {
    color:#fff;
    width:150px;
    margin-left:0px; 
}

#navbacking {
    background:#000;
    opacity:0.5;
 }

.brightness {
         -webkit-filter: brightness(10%) contrast(100%);
}

.mini-submenu .icon-bar {
  border-radius: 1px;
  display: block;
  height: 2px;
  width: 22px;
  margin-top: 3px;
}

.mini-submenu .icon-bar {
  background-color: #000;
}

#slide-submenu{
  background: rgba(0, 0, 0, 0.45);
  display: inline-block;
  padding: 0 8px;
  border-radius: 0px;
  cursor: pointer;
}

#guidebacking {
    background-image: url(../images/userguidesbacking.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    min-height: 50px;
    min-width: 50px;
    
    z-index=-1;
    border:none;
}

.hideme {
    opacity:0;
}

.visible {
    opacity:1;
}
/*.os-animation{
            opacity: 0;
        }  
        .os-animation.animated{
            opacity: 1;
		}*/
		
$red: #E91E63;
$blue: #3F51B5;
$grey: #EAE8E9;
$grey2: #f3f3f3;
$white: #FFF;

*,
*:before,
*:after {
  box-sizing: inherit;
}

#cardForm {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}


/*--------------------
PANEL FORM
--------------------*/

.panel {
  background-color: $white;
  width: 80%;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
}

.panel__header {
  background-color: #3F51B5;
  color: $white;
}

.panel__header,
.panel__footer {
  padding: 1em 2em;
}

.panel__footer {
  background-color: $grey2;
}

.panel__content {
  padding: 1em 2em;
  overflow: hidden;
}

.textfield--float-label {
  width: 50%;
  float: left;
  display: inline-block;
  padding-right: 5px;
}

.hosted-field--label {
  transform: translateY(0.4em);
  font-size: 1.125em;
  line-height: 32px;
  transition: all .15s ease-out;
  display: block;
  width: 100%;
  font-weight: 400;
  overflow: hidden;
  margin-bottom: 0.5em;
  color: #2196F3;
  &.label-float {
    text-overflow: ellipsis;
    color: #2196F3;
    transition: all .15s ease-out
  }
  &.filled {
    @extend .label-float;
    color: rgba(0, 0, 0, .54);
  }
  &.invalid {
    @extend .label-float;
    color: #F44336;
  }
}

span.icon {
  position: relative;
  top: 0.2em;
  margin-right: 0.2em;
}

svg {
  fill: #333;
}

.hosted-field {
  height: 32px;
  margin-bottom: 1em;
  display: block;
  background-color: transparent;
  color: rgba(0, 0, 0, .87);
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, .26);
  outline: 0;
  width: 100%;
  font-size: 16px;
  padding: 0;
  box-shadow: none;
  border-radius: 0;
  position: relative;
}

.pay-button {
  background-color: #E91E63;
  color: #fff;
  margin: 0 auto;
  border: 0;
  border-radius: 3px;
  padding: 1em 3em;
  font-size: 1em;
  text-transform: uppercase;
  box-shadow: 0 0 2px rgba(0, 0, 0, .12), 0 2px 2px rgba(0, 0, 0, .2);
}


/*--------------------
BT HOSTED FIELDS SPECIFIC 
--------------------*/

.braintree-hosted-fields-focused {
  border-bottom: 2px solid $blue;
  transition: all 200ms ease;
}

.braintree-hosted-fields-invalid {
  border-bottom: 2px solid $red;
  transition: all 200ms ease;
}


/*---------------------
Media Queries
----------------------*/

@media (max-width: 600px) {
  html {
    overflow: auto;
  }
  #cardForm {
    height: auto;
    margin: 2em;
    font-size: 13px;
  }
  .panel {
    width: 100%;
  }
  .textfield--float-label {
    width: 100%;
    float: none;
    display: inline-block;
  }
  .pay-button {
    width: 100%;
  }
}		

/**
 * The CSS shown here will not be introduced in the Quickstart guide, but shows
 * how you can use CSS to style your Element's container.
 */
.StripeElement {
  box-sizing: border-box;

  height: 40px;

  padding: 10px 12px;

  border: 1px solid transparent;
  border-radius: 4px;
  background-color: white;

  box-shadow: 0 1px 3px 0 #e6ebf1;
  -webkit-transition: box-shadow 150ms ease;
  transition: box-shadow 150ms ease;
}

.StripeElement--focus {
  box-shadow: 0 1px 3px 0 #cfd7df;
}

.StripeElement--invalid {
  border-color: #fa755a;
}

.StripeElement--webkit-autofill {
  background-color: #fefde5 !important;
}