@charset "UTF-8";


body {
  margin-top: 0;
  padding-bottom: 4em;
  min-height: 100vh;
  font-family: proxima-nova, sans-serif !important;
  font-weight: 300;
  color:#333;
  /* line-height: var(--bs-body-line-height);
  color: var(--bs-body-color);
  text-align: var(--bs-body-text-align);
  background-color: var(--bs-body-bg); */
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.statement {
  font-family: proxima-nova, sans-serif !important;
  font-weight: 100;
  font-size: 2.5em;
  letter-spacing: 2;
  line-height: 1.25em;
}

.card {
  height: 450px !important;
  overflow-y: scroll !important;
}

.card2 {
  height: 350px !important;
  overflow-y: scroll !important;
}

.card3 {
  height: 350px !important;
  overflow-y: scroll !important;
  border:#F2F4F4 solid 1px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
  font-size: calc(100% + 1vw + 1vh);
  margin-top: 0;
  font-weight: 300;
  line-height: 1.2;
}

/* h1, .h1 {
  font-size: calc(1.375rem + 1.5vw);
}

@media (min-width: 1200px) {
  h1, .h1 {
    font-size: 2.5rem;
  }
}

h2, .h2 {
  font-size: calc(1.325rem + 0.9vw);
}

@media (min-width: 1200px) {
  h2, .h2 {
    font-size: 2rem;
  }
}

h3, .h3 {
  font-size: calc(1.3rem + 0.6vw);
}

@media (min-width: 1200px) {
  h3, .h3 {
    font-size: 1.75rem;
  }
}

/* mobile */

/* h4, .h4 {
  font-weight: 200 !important;
  line-height: 1.75rem;
}
 */
/* desktop */

/* @media (min-width: 1200px) {
  h4, .h4 {
    font-size: 1.5rem;
    line-height: 2rem;

  }
}
 */

h2, .h2 {

  margin-bottom: 1rem !important;

}

h4, .h4 {
  margin-bottom: 1.05rem !important;
}


h5, .h5 {
  font-size: 1.25rem;
}

h6, .h6 {
  font-size: 1rem;
}

 p {
  font-family: proxima-nova, sans-serif !important;
  font-weight: 300 !important;
  margin-top: 0;
  margin-bottom: .50rem !important;
}
.callout {
  font-size:1.35rem; 
  font-weight: 400; 
  letter-spacing:.02em; 
  word-spacing:-.02em; 
  line-height:1.3em; 
  margin-bottom: 1.5em;
  margin-right: 1.5em;
}

.sidebar {
  margin-bottom: 1.5em;
}


@media (min-width: 1200px) {
  .lead {
    font-size: 1.25rem !important;
    margin-left: 3em;
    margin-right: 3em;
    text-align: center;
    line-height: 1.75rem;
  
  }
  }


@media (max-width: 768px) {
.lead {
  font-size: 1.25rem !important;
  margin-left: 1em;
  margin-right: 1em;
  text-align: center;
  line-height: 1.75rem;

}
}

@media (max-width: 576px) {
  .lead {
    font-size: 1.25rem;
    margin-left: 1em;
    padding-right: 0;
    text-align: left;
    line-height: 1.75rem;

  }
}

/* links */


/* text styling*/

a:link {
  color: #6c757d;
  text-decoration: none;
  font-weight: 300;
  font-size: 15px;
  letter-spacing: .03em;
}

a:visited {
  color: #6c757d;
  text-decoration: none;
  font-weight: 300;
  font-size: 15px;
  letter-spacing: .03em;
}

a:hover {
  text-decoration: none;
  color: coral;
}



/* navigation */


.btn {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}


.btn:focus, a:focus {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;

}

a.navbar-toggler:focus {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

.bg-light {
  background-color: #ffffff !important;

}



.navbar {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.1);
}


.navbar-collapse {
  margin: 10px;
}

.navbar-nav {
  padding-right: 5em;
}

.nav-item {
font-family: proxima-nova, sans-serif!important;
letter-spacing: .02rem;
padding-right: 2em;
font-size: .7rem !important;
font-weight: 600 !important;
text-transform: uppercase !important;
}


.lflogo{
  height:60px; 
  margin-right: .55em;
}


/* mobile */

.navbar-brand {
  font-family: proxima-nova, sans-serif;
  font-size: 1.30rem !important;
  letter-spacing: .025rem;
  font-weight: 300 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 .5em;
  line-height: 1.45rem;
}

/* desktop */

@media (max-width: 768px) {
  .navbar-brand {
    font-size: 1.20rem !important;
    line-height: 2rem;

  }
}

/* removing button outline */


.accordion-button {

  border-color: #ffffff !important;
  border: none !important;
  outline: none !important;

}


a :focus {
  background-color: none !important;
}

.dropdown-item.active, .dropdown-item:active {
  background-color: #fff !important;
}


button:focus, a:focus {
  outline: none !important;
}

.navbar-toggler:focus {
  outline: none !important;
  box-shadow: none !important;
}


.navbar-default, .navbar-default .navbar-toggle {
  border: 0px !important;
}

.navbar-toggler {
  border-color: #ffffff !important;
  border: none !important;
  outline: none !important;
}

.navbar-toggler focus {
  border-color: #ffffff !important;
  border: none !important;
  outline: none !important;
}

.show {
  border-color: #ffffff !important;
  border: none !important;
  outline: none !important;
}

.nav-link
{
  color: #111 !important;
  font-weight: 300 !important;
  font-family: proxima-nova, sans-serif!important;
  letter-spacing: .070rem !important;
  padding-right: 2em;
  font-size: .7rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;

}

/* nav bar dropdown*/



.dropdown-item {
  color: #6c757d !important;
  font-weight: 300 !important;
  font-family: proxima-nova, sans-serif!important;
  letter-spacing: .070rem !important;
  padding-right: 2em;
  font-size: .7rem !important;
  font-weight: 300 !important;
  text-transform: uppercase !important;
}

.dropdown-item:hover {
background-color: #fafafa !important;
}


.dropdown-menu {
  border-color: #ffffff !important;
  border: none !important;
  outline: none !important;


}

.dropdown-menu:hover {
  border-color: #ffffff !important;
  border: none !important;
  outline: none !important;
}

.dropdown-menu:focus {
  border-color: #ffffff !important;
  border: none !important;
  outline: none !important;

}

.dropdown-menu:active {
  border-color: #ffffff !important;
  border: none !important;
  outline: none !important;

}


.bg-white {
  background-color: rgba(fff 5) !important;

}

a:link {
  color: coral;
  text-decoration: none;
}


/* pagination */
.page-link {
border:none !important;
padding-right: 10px !important;
padding-left: 10px !important;
padding-bottom: 0 !important;
margin: 0 !important;
  color: coral !important;
  font-size: .8rem !important;
}

.page-item{
  border:none !important;
  margin-left: -10px !important;
  }


.page-link:hover {
  color: #ccc !important;
  background-color: #fff !important;
}


/* start of grid*/


.overlay-grid {
  position: absolute  !important;
  bottom: 0;
  background: rgb(0, 0, 0) !important;
  background: rgba(0, 0, 0, 0.5) !important;
  /* Black see-through */
  color: #f1f1f1  !important;
  width: 100%;
  transition: .5s ease;
  opacity: 0;
  color: white;
  font-size: 15px;
  padding: 10px;
  text-align: center;
z-index: 999 !important;
}

.container-hover:hover .overlay-grid {
  opacity: 1  !important;
  z-index: 999 !important;

}

.grid-container {
  padding: 5%;

}

.row {
  display: -ms-flexbox;
  /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap;
  /* IE10 */
  flex-wrap: wrap;
  padding: 0;
  margin: 0;

}

/* Create three equal columns that sits next to each other */
.column {
  -ms-flex: 33%;
  /* IE10 */
  flex: 33%;
  padding: 0;
  margin: 0;
}

.column img {
  margin: 0;
  vertical-align: middle;
  width: 100%;
}

@media screen and (max-width: 768px) {
  .column {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }
}


.container-hover {
  position: relative;
  width: 100%;
  margin: 0 0 0 0;
  border-style: solid;
  border-width: 1px;
  border-color: #F2F4F4;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay-grid {
  position: fixed;
  bottom: 0;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5);
  /* Black see-through */
  color: #f1f1f1;
  width: 100%;
  transition: .5s ease;
  opacity: 0;
  color: white;
  font-size: 15px;
  padding: 10px;
  text-align: center;
}

.container-hover:hover .overlay-grid {
  opacity: 1;
}


/* page content */



* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

ul.panel-list {
  padding: 10px 0 0 0;
  font-weight: 300;
  color: #333;
  list-style-type: none;
}



/* view prototype */

.button-content {
margin-top: 1em;

}
.btn-outline-dark {
  border:#e7e7e7 solid 1px !important;
  color: coral !important;

}

.btn-outline-dark:hover {
  color: #ccc !important;
  background-color: #fff !important;
}

/* content scroll */

.scrollup{

  font-size: .8rem;
  color: #a7a7a7;
}

.scroll {
  height: 625px;
  border: 1px solid #e7e7e7;
  width: 100%;
  margin: 0 0 20px 0;
  display: flex;
  /* [1] */
  flex-wrap: nowrap;
  /* [1] */
  overflow-x: auto;
  /* [2] */
  -webkit-overflow-scrolling: touch;
  /* [3] */
  -ms-overflow-style: -ms-autohiding-scrollbar;
  /* [4] */
}

.scroll2 {
	height: 300px;
width: auto;
margin:0 0 0 0;
	display: flex; /* [1] */
	flex-wrap: nowrap; /* [1] */
	overflow-x: auto; /* [2] */
	-webkit-overflow-scrolling: touch; /* [3] */
	-ms-overflow-style: -ms-autohiding-scrollbar; /* [4] */
}

@media (max-width: 768px) {

  .scroll {
    height: 300px;
    width: 100%;
    margin: 0 0 20px 0;
    display: flex;
    /* [1] */
    flex-wrap: nowrap;
    /* [1] */
    overflow-x: auto;
    /* [2] */
    -webkit-overflow-scrolling: touch;
    /* [3] */
    -ms-overflow-style: -ms-autohiding-scrollbar;
    /* [4] */
  }
/* cards */
        .card {
            overflow-y: scroll;
       
        }
        @media screen and (max-width: 767px) {
          .card {
            overflow-y: scroll;
          }
        }
        @media screen and (min-width: 768px) {
          .card {
            overflow-y: scroll;

          }
        }
        @media screen and (min-width: 800px) {
          .card {
            color: white;
            overflow-y: scroll;

          }
        }



  .page-title-desktop {
    margin-left: 10px;
  }

  .page-subtitle {
    margin-left: 10px;
  }

  .scrollup {
    margin-left: 10px !important;
  }

  .page-item{
    border:none !important;
    margin-left: 0 !important;
  
    }


  /* accordion */



  .accordion-button {
    
    background-color: #fff;
    padding-left: 10px !important;
    border: 0;
    border-radius: 0;
    border-bottom: #e7e7e7 solid 1px !important;
    border-top: #e7e7e7 solid 1px !important;
    transition: none !important;
    margin-top: 1.5em !important;

  }


  .accordion-button:focus {
    z-index: 3;
    border-color: none !important;
    outline: 0!important;
    box-shadow: none !important;
    background-color:none !important;
  }


  .accordion-button:not(.collapsed) {
    background-color: #F2F4F4 !important;
    color: #333 !important;
  }
  
  .accordion-button {
    background-color: #fff !important;
    color: #333 !important;
  }
  
  .accordion-button::after {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23333333'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;
  }


.accordion-body {
  font-size: .85rem;
  line-height: 1.25rem;

}

.sidebar {
  display: none;
}


.page-title-desktop{
  display: none;
}

.text-content{
  display: none;
}

.hr-shownone {
  display: none;
}
}

@media (min-width: 768px) {
  .accordion{
    display: none;
  }


  footer-2 {
    display: none;
    
      }

  .page-title-mobile{
    display:none;
  }
}


.calloutaccordion {
font-size:1.35rem; 
font-weight: 100; 
letter-spacing:.02em; 
word-spacing:-.02em; 
line-height:1.3em; 
margin-bottom: 1.5em;
}

@media (min-width: 768px) {
.calloutaccordion {
display: none;

}
}


/* footer */



footer {
  bottom: 0;
  width: 100%;
  position: fixed;

  background-color: #fafafa !important; 
  height: 70px;
  padding-top: 20px !important; 
}


.footer-text {
  font-size: .875rem;
  text-decoration: none;
  color: #6c757d;
}

a.footer-text {
  font-size: .875rem;
  text-decoration: none;
  color: #6c757d;
}

a.footer-text:hover {
  color: #fff;
}

a.footer-text:focus, a:active, a:focus, a:visited {
  text-decoration: none;
  color: #6c757d;
}

.footer-text-cc {
  font-size: .875rem;
  text-decoration: none;
  color: #6c757d;
}

a.footer-text-cc {
  font-size: .875rem;
  text-decoration: none;
  color: #6c757d;
}

a.footer-text-cc:hover {
  color: #fff;
}

a.footer-text-cc:focus, a:active, a:focus, a:visited {
  text-decoration: none;
  color: #6c757d;
}

a.footer-btn:hover {
  color: #fff !important;
}

a.footer-btn:focus, a:active, a:focus, a:visited {
  text-decoration: none;
  color: #6c757d;
}

@media screen and (max-width: 768px) {
  .footer-text-cc {
    display: none;
  }


  footer-2 {
    bottom: 0;
    width: 100%;
    position: fixed;
    background-color: #fafafa !important; 
    height: 70px;
    padding-top: 20px !important; 

  }

  footer {
display: none;
   
  }
}

/* up arrow */
#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 50px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: #fafafa !important;
  color: ccc;
  cursor: pointer;
  padding: 10px 15px 10px 15px;
  border-radius: 4px;
}

#myBtn:hover {
  background-color: rgba(255, 255, 255, 0.5);
}

.crateurlimage {
  width:50%;
  height: auto;
}

@media screen and (max-width: 576px) {
  .crateurlimage {
    width:90%;
    height: auto;
  }
}

.cratebrowserimage {
  width:90%;
  height:auto;
  margin:10px 0;
}


@media (min-width: 1200px) {
  .cratebrowserimage {
  width:90%;
  height: auto;
  margin:5px 0;
}
} 

@media (max-width: 768px) {
  .cratebrowserimage {
    width:90%;
    height: auto;
    margin:10px 0;
  }
  }

@media (max-width: 576px) {
  .cratebrowserimage {
    width:100%;
    height: auto;
  }
} 


.appandwatchimage {
  margin:20px 0 0 0;
  width: 35%;
  height:auto;

}


@media (max-width: 1000px) {
  .appandwatchimage {
  width: 50%;
  height:auto;
}
}





.scroll-unicycle {
  height: 450px;
  border: 1px solid #e7e7e7;
  width: 90%;
  margin: 0 0 0 0;
  display: flex;
  /* [1] */
  flex-wrap: nowrap;
  /* [1] */
  overflow-x: auto;
  /* [2] */
  -webkit-overflow-scrolling: touch;
  /* [3] */
  -ms-overflow-style: -ms-autohiding-scrollbar;
  /* [4] */
}



.item {
  @include media-breakpoint-up(md) {
    --bs-aspect-ratio: 50%; // 4x3
  }
}






@media (max-width: 768px) {

  .scroll-unicycle  {
    height: 300px;
    width: 80%;

  }

  footer-2 {
    bottom: 0;
    width: 100%;
    position: fixed;
    background-color: #fafafa !important; 
    height: 70px;
    padding-top: 20px !important; 
    

  }

  footer {
display: none;
   
  }
}

@media (min-width: 350px) {
  .scroll-unicycle  {
    height: 265px !important;
    width: 90%;
} 
} 

@media (min-width: 576px) {
  .scroll-unicycle  {
    height: 250px !important;
    width: 90%;
} 
} 


  @media (min-width: 768px) {
    .scroll-unicycle {
      height: 500px;
      width: 80%;
    }
  } 

  @media (min-width: 1200px) {
    .scroll-unicycle {
      height: ;
      width: 75%;
    }
  } 


  @media (min-width: 1400px) {
    .scroll-unicycle  {
      height: 530px;
      width: 75%;
  }
  } 
  
  
/* carousel */

.carousel-caption {
right:0 !important;
left:0 !important;
bottom:0 !important;
background-color: rgba(0, 0, 0, 0.5)!important;
}

.carousel-text {
font-size: .85rem;
padding-bottom: 1.75rem;

}  

/* logos */

.figure {
  border: #e7e7e7 solid 1px;
}


.figure-caption {
  font-size: .8rem !important;
  font-weight: 300;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
  border-top: #e7e7e7 solid 1px;
}

.card-text {
  font-size: .8rem !important;
  font-weight: 300;
  text-align: center;
  padding-top: 5px;
  padding-bottom: 5px;
}

.card-header{
background-color: #fff !important;
margin-left: -13px!important;
border:none !important;
font-weight: 300;
}



/* .carousel-caption {
  top: -20px;
  bottom: auto;
}

.carousel-indicators {
  top: 0;
  bottom: auto;
}

.carousel-control-prev {
  top: 0;
  bottom: auto;
}

.carousel-control-next {
  top: 0;
  bottom: auto;
} */