/* Mobile, removes ability to scroll horizontally */
body {
    overflow: hidden;
    width: 100%;
}

/* Mobile, small screen responsive */
@media screen and (max-width: 780px){
    #brands { display: none; }
    .vertical-breaks { display: none; }
    .mobile-breaks { display:none; }
}

/* Center divs for index */
.content-is-centered {
  display: flex;
  align-items: center
}

/* Vertical pad for three icons */
.vertical-padding {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}

/* Fix the Navbar at the top of the screen */
.is-fixed{ 
  position: fixed !important; 
  top: 0; 
  width: 100%;
  z-index: 100;
}

/* Button in top right, wider */
.is-wider {
	width: 13rem;
}

/* reduces height */
.small-height {
	min-height: 3rem;
}

.margin-right {
	margin-right: 3rem;
}

.margin-left {
 margin-left: 0.6rem; 
}

.margin-sides {
  margin-left: 10%;
  margin-right: 10%;
}

/* Change color of text */
.white-text {
	color: white !important;
}

.black-text {
  color: black;
}

/* Button in top right, transparent */
.is-transparent {
	background-color: transparent !important;
}

/* Footer smaller padding */
.small-bottom-padding {
	padding-bottom: 1rem !important;
}

/* brand images grey */
.grey-scale {
	filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
  filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
}

/* Disable grayscale on hover */
.grey-scale:hover {
  -webkit-filter: grayscale(0);
  filter: none;
}

/* Create horizontal lines */
.centered-hr {
  text-align:center; 
  margin: 0 auto;
  width: 80%;
}


/* Border on bottom */
.bottom-border {
  border-bottom-width: 1px;
  border-bottom-color: #c8cdd0;
  border-bottom-style: solid;
}

/* Margins for the 3 Sections */
.vertical-margins {
  margin-top: 5rem;
  margin-bottom: 5rem;
}

/* Override Lux content strong styles */
.subtitle strong, .title strong {
  font-weight: 700;
}

/* Background color for sections */
.grey-background {
  background-color: #f5f5f5;
}

.dark-background {
  background-color: #272727;
}

/* Background color for sections */
.black-background {
  background: rgba(0,0,0,0.8);
}


.dimmer-image {
  filter: brightness(96%);
}

#contact-image { 
  transform: scale(.87);
}


/* Adds a margin to the top of an element */
.margin-top {
  margin-top: 2rem;
}

/* Move the alt text label on images up */
.margin-top-zeroed {
  margin-top: -0.4rem;
}
.margin-top-small {
  margin-top: 1rem;
}
/* Change color of text */
.text-is-blue {
  color: #3273dc;
}
.text-is-green {
  color: #00d1b2;
}
.text-is-dark {
  color: #363636;
}

/* Change on hover */
a.navbar-item:hover {
  background-color: rgba(10,10,10,0.8);
}

.button.is-danger {
  background-color: red;
}

/* Restyle the navbar burger */
.navbar-burger {
  background: transparent;
  border: none;
}
.navbar-burger span {
  color: white;
}


#hero {
  /*background-color: black;*/
}

.center-image {
  display: block !important;
  margin: auto;
  width: 40% !important;
}


/* TIMELINE
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.timeline ul {
  background: #272727;
  padding: 50px 0;
}

.timeline ul li {
  list-style-type: none;
  position: relative;
  width: 6px;
  margin: 0 auto;
  padding-top: 50px;
  background: #fff;
}

.timeline ul li::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: inherit;
}

.timeline ul li div {
  position: relative;
  bottom: 0;
  width: 400px;
  padding: 15px;
  background: #F45B69;
}

.timeline ul li div::before {
  content: '';
  position: absolute;
  bottom: 7px;
  width: 0;
  height: 0;
  border-style: solid;
}

.timeline ul li:nth-child(odd) div {
  left: 45px;
}

.timeline ul li:nth-child(odd) div::before {
  left: -15px;
  border-width: 8px 16px 8px 0;
  border-color: transparent #F45B69 transparent transparent;
}

.timeline ul li:nth-child(even) div {
  left: -439px;
}

.timeline ul li:nth-child(even) div::before {
  right: -15px;
  border-width: 8px 0 8px 16px;
  border-color: transparent transparent transparent #F45B69;
}

time {
  display: block;
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 8px;
}


/* EFFECTS
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.timeline ul li::after {
  transition: background .5s ease-in-out;
}

.timeline ul li.in-view::after {
  background: #F45B69;
}

.timeline ul li div {
  visibility: hidden;
  opacity: 0;
  transition: all .5s ease-in-out;
}

.timeline ul li:nth-child(odd) div {
  transform: translate3d(200px, 0, 0);
}

.timeline ul li:nth-child(even) div {
  transform: translate3d(-200px, 0, 0);
}

.timeline ul li.in-view div {
  transform: none;
  visibility: visible;
  opacity: 1;
}


/* GENERAL MEDIA QUERIES
–––––––––––––––––––––––––––––––––––––––––––––––––– */

@media screen and (max-width: 900px) {
  .timeline ul li div {
    width: 250px;
  }
  .timeline ul li:nth-child(even) div {
    left: -289px;
    /*250+45-6*/
  }
}

@media screen and (max-width: 600px) {
  .timeline ul li {
    margin-left: 20px;
  }
  .timeline ul li div {
    width: calc(100vw - 91px);
  }
  .timeline ul li:nth-child(even) div {
    left: 45px;
  }
  .timeline ul li:nth-child(even) div::before {
    left: -15px;
    border-width: 8px 16px 8px 0;
    border-color: transparent #F45B69 transparent transparent;
  }
}