/* -----------------------------------------------------------------
    - Typography
----------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-family: $font-title;
  font-weight: $weight-700;
  line-height: 1.15;
  margin-bottom: 3.4rem;
  
  @media only screen and (max-width: $large-xl) {
    margin-bottom: 3rem;
  }
}

.title {
  transition: all .1s cubic-bezier(.72,.16,.345,.875);

  &--display-1 {
    font-size: 5rem;
	margin-bottom: 2.4rem;
    
	@media only screen and (max-width: $large) {
	  font-size: 4rem;
	  margin-bottom: 2rem;
	}
	
	@media only screen and (max-width: $medium) {
	  font-size: 3.8rem;
	  margin-bottom: 1.8rem;
	}	
	
	@media only screen and (max-width: $small) {
	  font-size: 2.5rem;
	  margin-bottom: 1.8rem;
	}
  }
  
  &--h1 {
    font-size: 4rem;
	margin-bottom: 2.2rem;
	
	@media only screen and (max-width: $large) {
	  font-size: 3rem;
	  margin-bottom: 1.8rem;
	}
	
	@media only screen and (max-width: $medium) {
	  font-size: 2.8rem;
	  margin-bottom: 1.6rem;
	}
	
	@media only screen and (max-width: $small) {
	  font-size: 2.1rem;
	  margin-bottom: 1.2rem;
	}	
  }

  &--h2 {
    font-size: 3rem;
	margin-bottom: 1.8rem;
	
	@media only screen and (max-width: $large) {
	  font-size: 2.5rem;
	}
	
	@media only screen and (max-width: $medium) {
	  font-size: 2.1rem;
	  margin-bottom: 1.4rem;
	}
	
	@media only screen and (max-width: $small) {
      font-size: 1.7rem;
	  margin-bottom: 1rem;
	}
  }

  &--h3 {
    font-size: 2rem;
	margin-bottom: 1.8rem;
	
	@media only screen and (max-width: $large) {
	  font-size: 2rem;
	}	
	
	@media only screen and (max-width: $medium) {
	  font-size: 1.7rem;
	  margin-bottom: 1.3rem;
	}
	
	@media only screen and (max-width: $small) {
	  font-size: 1.3rem;
	  margin-bottom: 1.2rem;
	}
  }

  &--h4 {
    font-size: 1.5rem;
	line-height: 1.25;
	margin-bottom: 1.2rem;
	
	@media only screen and (max-width: $large) {
	  font-size: 1.2rem;
	}
	
	@media only screen and (max-width: $medium) {
	  font-size: 1.18rem;
	  margin-bottom: 1rem;
	}	
	
	@media only screen and (max-width: $small) {
	  font-size: 1.15rem;
	  margin-bottom: .8rem;
	}
  }

  &--h5 {
    font-size: 1.3rem;
	margin-bottom: 1rem;
  }
  
  &--h6 {
    font-size: 1.125rem;
	margin-bottom: 1rem;
  }
  
  &--overhead {
    color: $gray-200-color;
	font-family: $font-body;
	font-size: 1rem;
    font-weight: $weight-400;
	display: block;
	letter-spacing: .18rem;
	margin-bottom: 1rem;
	text-transform: uppercase;
	
	@media only screen and (max-width: $large-xl) {
	  font-size: .875rem;
	  letter-spacing: .13rem;
	  margin-bottom: .5rem;
	}
	
	@media only screen and (max-width: $large) {

	}
	
	@media only screen and (max-width: $small) {
	  font-size: .75rem;
	  letter-spacing: .05rem;
	}
  }
  
  &--overhead-small {
    color: $gray-200-color;
	font-family: $font-body;
	font-size: .875rem;
    font-weight: $weight-400;
	display: block;
	letter-spacing: .1rem;
	margin-bottom: .5rem;
	text-transform: uppercase;

	@media only screen and (max-width: $small) {
	  font-size: .75rem;
	  letter-spacing: .05rem;
	}
  }  
  
  &-description {
    font-family: $font-title;
    font-size: 2rem;
	font-weight: $weight-400;
	line-height: 1.4;
	margin-bottom: 4rem;
	
	@media only screen and (max-width: $medium) {
	  margin-bottom: 3rem;
	}
	
	@media only screen and (max-width: $small) {
	  font-size: 1.25rem;
	  line-height: 1.3;
	  margin-bottom: .8rem;
	}
  }
}

/* Quote */
.block-quote {
  font: {
    family: $font-title;
	size: 1.5rem;
	weight: $weight-400;
  }
  margin: 2.5rem 0;
  padding-left: 2rem;
  position: relative;
  line-height: 1.75;
  
  &::before {
    background-color: $base-color;
    content: '';
    height: 100%;
	@include position(absolute, $top: 0, $left: 0);
    width: 2px;
  }
  
  @media only screen and (max-width: $small) {
    font-size: 1.125rem;
	margin: 1.2rem 0;
	padding-left: 1.2rem;
  }  
  
  cite {
    font: {
	  family: $font-body;
	  size: 1rem;
	  style: normal;
    }
	color: $gray-300-color;
	display: block;
	margin-top: 1.5rem;
	padding-left: 2.5rem;
	position: relative;
	
	&::before {
	  content: '';
	  background-color: $gray-300-color;
	  height: 1px;
	  margin-bottom: auto;
	  margin-top: auto;
	  position: absolute;
	  top: 0;
	  bottom: 0;
	  left: 0;
	  width: 1.5rem;
	}
	
	@media only screen and (max-width: $small) {
	  font-size: .875rem;
	  margin-top: 0;
	  padding-left: 1.6rem;
	  
	  &::before {
	    width: 1rem;
	  }
	}
  }
}

/* Link */
a {
  color: $base-color;
  text-decoration: none;
  -webkit-text-decoration-skip: objects;
  transition: all .3s cubic-bezier(.72,.16,.345,.875);
  
  &:hover,
  &:focus {
    color: inherit;
	outline: none;
    text-decoration: none;
  }
}

.link-underline {
  color: rgba($black-color,.8);
  text-decoration: underline;
  
  &:hover {
    text-decoration: none;
  }
}

/* List icon */
.list-feature {
  @media only screen and (max-width: $medium) {
	margin-bottom: 0;
  }
	
  &__item {
    margin-top: .4rem;
    margin-bottom: 1.2rem;
	
	@media only screen and (max-width: $small) {
	  border: 1px solid rgba($gray-200-color,.2);
	  border-radius: 6px;
	  padding: .5rem;
	  margin-bottom: 0;
    }
  }
  
  .icon {
    @media only screen and (max-width: $small) {
	  margin-right: .5rem;
	}  
  }
}

.paragraph {
  color: rgba($black-color,.8);
  
  &--large {
    font-size: 1.125rem;
	font-weight: $weight-500;
	
	@media only screen and (max-width: $small) {
	  font-size: 1.031rem;
	}
  }
}

.text-two-column {
  column-count: 2;
  column-gap: 6vw;
  column-fill: balance;
  text-align: justify;
  
  @media only screen and (max-width: $large) {
    column-count: 1;
    column-gap: 0;
    text-align: left;
  }
}

.text-accent {
  color: $base-color;
}

@media (min-width: $small) {
  .text-sm-justify {
    text-align: justify !important;
  }
}

@media (min-width: $medium) {
  .text-md-justify {
    text-align: justify !important;
  }
}

@media (min-width: $large) {
  .text-lg-justify {
    text-align: justify !important;
  }
}

@media (min-width: $large-xl) {
  .text-xl-justify {
    text-align: justify !important;
  }
}

img {
  max-width: 100%;
  -webkit-user-select: none;
	 -moz-user-select: none;
	  -ms-user-select: none;
	      user-select: none;
}

iframe {
  background-color: $black-color;
  border: 0;
  display: block;
  height: 100%;
  width: 100%;  
}

.cover {
  object-fit: cover;
  object-position: center;
  font-family: 'object-fit: cover; object-position: center;';
  height: 100%;
  width: 100%;
}

::-moz-selection {background: transparent; color: $additional-color;}
	 ::selection {background: transparent; color: $additional-color;} 


/* Icon */
.icon {
  margin-right: 1rem;
  object-fit: cover;
  object-position: center;
  font-family: 'object-fit: cover; object-position: center;';
  
  &--24 {
    $size: 1.5rem;
    height: $size;
	width: $size;
	
  }
}