@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700);

body {
   font-family: 'Open Sans', sans-serif;
   font-weight: 400;
   font-size: 14px;
}

.jumbotron {
   background-image: url('img/phoneSupport.jpg');
   /* fallback for old browsers */
   background-color: #e84958;
   background-color: -webkit-linear-gradient(to left, #e84958, #a7303c);
   /* Chrome 10-25, Safari 5.1-6 */
   background-color: linear-gradient(to left, #e84958, #a7303c);
   /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
   color: #fff;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   font-family: 'Open Sans', sans-serif;
   font-weight: 300;
   background-blend-mode: multiply;
}

.jumbotron p {
   color: rgba(255, 255, 255, 0.5);
}

.panel-default > .panel-heading {
   font-size: 18px;
   color: white;
   background-color: #de4858;
}

.panel-body {
   padding-top: 0;
}

.example {
   font-family: monospace;
}

h4 {
   margin:30px 0px 15px 0px;
}

.group {
   width: 100%;
}

.group .subgroup {
   width: 100%;
}

/* sidebar */
.bs-docs-sidebar {
   padding-left: 20px;
   margin-top: 20px;
   margin-bottom: 20px;
}

/* all links */
.bs-docs-sidebar .nav>li>a {
   color: #999;
   padding: 4px 20px;
   font-size: 13px;
   font-weight: 400;
}

/* nested links */
.bs-docs-sidebar .nav .nav>li>a {
   padding-top: 1px;
   padding-bottom: 1px;
   padding-left: 30px;
   font-size: 12px;
}

.bs-docs-sidebar .nav>.active>a {
   color: #d9230f;
}

/* all links */
.bs-docs-sidebar .nav>li>a {
   /*add trasnparent border */
   border-left: 2px solid transparent;
}

/* active & hover links */
.bs-docs-sidebar .nav>.active>a,
.bs-docs-sidebar .nav>li>a:hover,
.bs-docs-sidebar .nav>li>a:focus {
   color: #d9230f;
   text-decoration: none;
   background-color: transparent;
   border-left: 2px solid #d9230f;
}

/* all active links */
.bs-docs-sidebar .nav>.active>a,
.bs-docs-sidebar .nav>.active:hover>a,
.bs-docs-sidebar .nav>.active:focus>a {
   font-weight: 700;
}

/* nested active links */
.bs-docs-sidebar .nav .nav>.active>a,
.bs-docs-sidebar .nav .nav>.active:hover>a,
.bs-docs-sidebar .nav .nav>.active:focus>a {
   font-weight: 500;
}

/* hide all (inactive) nested list */
.bs-docs-sidebar .nav ul.nav {
   display: none;
}

/* show active nested list */
.bs-docs-sidebar .nav>.active>ul.nav {
   display: block;
}

.affix-top {
   top:inherit;
}

.affix-bottom {
   top:inherit;
}

.affix {
   top: 0px;
}

#responsiveMenu{
   display:none;
}

#fullMenu{
   display:block;
}

@media screen and (max-width: 760px) {
   .jumbotron {
      margin-top:40px;
   }

   #responsiveMenu {
      display:block;
   }

   #fullMenu {
      display:none;
   }

   h2 {
      padding-top:50px;
   }
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus,
.navbar-default .navbar-toggle:active,
.navbar-default .navbar-toggle {
   background-color: transparent;
   border: transparent;
}

.navbar-toggle .icon-bar:nth-of-type(2) {
   top: 1px;
}

.navbar-toggle .icon-bar:nth-of-type(3) {
   top: 2px;
}

.navbar-toggle .icon-bar {
   position: relative;
   transition: all 200ms ease-in-out;
}

.navbar-toggle.active .icon-bar:nth-of-type(1) {
   top: 6px;
   transform: rotate(45deg);
}

.navbar-toggle.active .icon-bar:nth-of-type(2) {
   background-color: transparent;
}

.navbar-toggle.active .icon-bar:nth-of-type(3) {
   top: -6px;
   transform: rotate(-45deg);
}

.navbar-default .navbar-toggle .icon-bar {
   background-color: #d9230f;
}

.navbar-default {
   margin-bottom: 0px;
}

#sidebar .back-to-top {
   color: #999;
   border: 2px solid transparent;
   font-weight: 800;
   border: 2px solid transparent;
   font-size: 8pt;
   margin-top:20px;
   opacity: 0;
   left:20px;
}

#sidebar .back-to-top:hover  {
   color: #666;
   border: 2px solid transparent;
   font-weight: 800;
   border: 2px solid transparent;
   font-size: 8pt;
}

.embed-responsive-16by9 {
   margin: 20px 0px;
}

.searchBox {
   background: #f2f2f2;
}

.searchBox input[type="text"] {
   display: none;
   border: 0px;
   outline: 0;
   background: transparent;
   pointer-events: auto;
   opacity: 0;
}
.searchBox > a {
   overflow: hidden;
}

@media(min-width:768px) {
   /* All the default sidebar styles */
   /* toggle button settings */
   /* Note: this disables navbar-toggle class hide function. set visibility with the boostrap visible/hidden classes */
   .navbar.navbar-static .navbar-header {
      float: left;
   }

   .navbar .navbar-toggle.toggle-left {
      float: left;
      margin-left: 15px;
   }

   .navbar .navbar-toggle.toggle-right {
      float: right;
      margin-right: 15px;
   }

   .navbar .navbar-toggle.toggle-sidebar, [data-toggle="sidebar"] {
      display: block;
   }

   /* sidebar settings */
   .sidebar {
      position: fixed;
      display: block;
      top: 51px;
      bottom:0;
      z-index: 1000;
      min-height: 100%;
      max-height: none;
      overflow: auto;
      background:#fff;
   }

   .sidebar-left {
      left: 0;
   }

   .sidebar-right {
      right: 0;
   }

   /* css to override hiding the sidebar according to different screen sizes */  
   .row .sidebar.sidebar-left.sidebar-xs-show {
      left: 0;
      -webkit-transform: translate3d(0,0,0);
      transform: translate3d(0,0,0);
      -moz-transform: none;
   }

   /*right sidebar is untested */
   .row .sidebar.sidebar-right.sidebar-xs-show {
      right: 0;
      -webkit-transform: translate3d(0,0,0);
      transform: translate3d(0,0,0);
      -moz-transform: none;
   }  
 
   @media (min-width: 768px) {
      .row .sidebar.sidebar-left.sidebar-sm-show {
         left: 0;
         -webkit-transform: translate3d(0,0,0);
         transform: translate3d(0,0,0);
         -moz-transform: none;
      }

      /*right sidebar is untested */
      .row .sidebar.sidebar-right.sidebar-sm-show {
         right: 0;
         -webkit-transform: translate3d(0,0,0);
         transform: translate3d(0,0,0);
         -moz-transform: none;
      }
   } 

   @media (min-width: 992px) {
      .row .sidebar.sidebar-left.sidebar-md-show {
         left: 0;
         -webkit-transform: translate3d(0,0,0);
         transform: translate3d(0,0,0);
         -moz-transform: none;
      }

      .row .sidebar.sidebar-right.sidebar-md-show {
         right: 0;
         -webkit-transform: translate3d(0,0,0);
         transform: translate3d(0,0,0);
         -moz-transform: none;
      }
   }

   @media (min-width: 1170px) {
      .row .sidebar.sidebar-left.sidebar-lg-show {
         left: 0;
         -webkit-transform: translate3d(0,0,0);
         transform: translate3d(0,0,0);
         -moz-transform: none;
      }

      .row .sidebar.sidebar-right.sidebar-lg-show {
         right: 0;
         -webkit-transform: translate3d(0,0,0);
         transform: translate3d(0,0,0);
         -moz-transform: none;
      }
   }

   /* animation class - optional: without it the sidebar would just pop in and out*/
   .sidebar-animate {
      -webkit-transition: -webkit-transform 300ms ease;
      -moz-transition: -moz-transform 300ms ease;
      transition: transform 300ms ease;
   }

   /* Left panel positioning classes */
   .sidebar.sidebar-left {
      -webkit-transform: translate3d(-100%,0,0);
      -moz-transform: translate3d(-100%,0,0);
      transform: translate3d(-100%,0,0);
   }

   .sidebar.sidebar-left.sidebar-open {
      -webkit-transform: translate3d(0,0,0);
      transform: translate3d(0,0,0);
      -moz-transform: none;
   }

   /* TODO: TEST THIS! Right panel positioning classes*/
   .sidebar.sidebar-right {
      -webkit-transform: translate3d(100%,0,0);
      -moz-transform: translate3d(100%,0,0);
      transform: translate3d(100%,0,0);
   }

   .sidebar.sidebar-right.sidebar-open {
      -webkit-transform: translate3d(0,0,0);
      transform: translate3d(0,0,0);
      -moz-transform: none;
   }
}

#hand {
   background-image: url("img/phoneFrame.png");
   background-repeat: no-repeat;
   height: 595px;
   width: 297px;
   position: relative;
   background-size: contain;
   background-color:#fcfcfc;
   background-blend-mode: multiply;
}

#hand iframe {
   height: 456px;
   width: 261px;
   position: relative;
   top: 72px;
   left: 20px;
}

.embed-responsive{
   width: 276px;
   height: 528px;
}

@media print {
   .dont-print {
      display: none;
   } 
}