@import url(//fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,700,700italic);
@font-face {
  font-family: 'Graphik Web';
  src: url('https://3form.s3.amazonaws.com/fonts/Graphik-MediumItalic-Web.eot');
  src: url('https://3form.s3.amazonaws.com/fonts/Graphik-MediumItalic-Web.eot?#iefix') format('embedded-opentype'), url('https://3form.s3.amazonaws.com/fonts/Graphik-MediumItalic-Web.woff2') format('woff2'), url('https://3form.s3.amazonaws.com/fonts/Graphik-MediumItalic-Web.woff') format('woff');
  font-weight: 500;
  font-style: italic;
  font-stretch: normal;
}
.Graphik-MediumItalic-Web {
  font-family: 'Graphik Web';
  font-weight: 500;
  font-style: italic;
  font-stretch: normal;
}
@font-face {
  font-family: 'Graphik Web';
  src: url('https://3form.s3.amazonaws.com/fonts/Graphik-Medium-Web.eot');
  src: url('https://3form.s3.amazonaws.com/fonts/Graphik-Medium-Web.eot?#iefix') format('embedded-opentype'), url('https://3form.s3.amazonaws.com/fonts/Graphik-Medium-Web.woff2') format('woff2'), url('https://3form.s3.amazonaws.com/fonts/Graphik-Medium-Web.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
}
.Graphik-Medium-Web {
  font-family: 'Graphik Web';
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
}
@font-face {
  font-family: 'Graphik Web';
  src: url('https://3form.s3.amazonaws.com/fonts/Graphik-RegularItalic-Web.eot');
  src: url('https://3form.s3.amazonaws.com/fonts/Graphik-RegularItalic-Web.eot?#iefix') format('embedded-opentype'), url('https://3form.s3.amazonaws.com/fonts/Graphik-RegularItalic-Web.woff2') format('woff2'), url('https://3form.s3.amazonaws.com/fonts/Graphik-RegularItalic-Web.woff') format('woff');
  font-weight: 400;
  font-style: italic;
  font-stretch: normal;
}
.Graphik-RegularItalic-Web {
  font-family: 'Graphik Web';
  font-weight: 400;
  font-style: italic;
  font-stretch: normal;
}
@font-face {
  font-family: 'Graphik Web';
  src: url('https://3form.s3.amazonaws.com/fonts/Graphik-Regular-Web.eot');
  src: url('https://3form.s3.amazonaws.com/fonts/Graphik-Regular-Web.eot?#iefix') format('embedded-opentype'), url('https://3form.s3.amazonaws.com/fonts/Graphik-Regular-Web.woff2') format('woff2'), url('https://3form.s3.amazonaws.com/fonts/Graphik-Regular-Web.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
}
.Graphik-Regular-Web {
  font-family: 'Graphik Web';
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
}
html,
body {
  -webkit-overflow-scrolling: touch;
  height: auto;
  min-height: 100%;
  color: #000;
  font-family: roboto, "Helvetica Neue", helvetica, arial, sans-serif;
}
div.section {
  padding: 100px 0;
  min-height: 75vh;
  will-transform: translate;
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
}
h2 {
  margin: 20px 0 40px 0;
}
.md {
  font-family: roboto, "Helvetica Neue", helvetica, arial, sans-serif;
  font-weight: 300;
  font-size: 18px;
  line-height: 1.66;
}
.white-font {
  color: #fff;
}
.center-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.row-centered {
  text-align: center;
}
.col-centered {
  display: inline-block;
  float: none !important;
  text-align: left;
  margin-right: -4px;
}
.video-container {
  position: relative;
}
.video-container span {
  position: absolute;
  color: #ffffff;
  font-size: 60px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.fullcircle-nav {
  margin-bottom: 0;
}
#nav-wrapper.affix {
  top: 0;
  width: 100%;
  z-index: 9999;
}
div.modal-backdrop.in {
  opacity: 0.8;
}
#fullcircle-video-container {
  padding: 0;
}
@media (max-width: 1200px) {
  #fullcircle-video-container {
    background: radial-gradient(circle at bottom left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)), url(https://images.3-form.com/fullcircle/full_circle_home_page_hero.jpg);
    background-size: cover;
    background-position: center;
  }
}
.fullcircle-circle {
  overflow-y: hidden;
  height: 75vh;
  position: relative;
  background-color: #000000;
  color: #ffffff;
}
.fullcircle-circle .title {
  text-transform: uppercase;
  font-weight: 100;
  font-size: 30px;
  margin-bottom: 0;
  position: absolute;
  top: 50%;
  left: -15%;
}
.fullcircle-circle .subtitle {
  font-weight: 100;
  font-size: 54px;
  position: absolute;
  top: 60%;
  left: -15%;
}
.fullcircle-circle .video-container {
  position: relative;
}
.fullcircle-circle .video-container span {
  position: absolute;
  color: #ffffff;
  font-size: 60px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.fullcircle-circle .video-container.fullcircle {
  position: absolute;
  top: 50%;
  left: 50%;
}
.fullcircle-circle .read-more {
  font-weight: 100;
  text-align: center;
  margin-top: 25px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.fullcircle-circle .read-more span {
  border: 2px solid #ffffff;
  border-radius: 15px;
  padding: 5px;
}
.fullcircle-circle .read-more p {
  padding: 12px;
  margin: 0;
}
.fullcircle-quote,
.closing-remarks,
.mission {
  background-color: #4c1c3c;
  padding: 90px 0 60px 0;
}
.fullcircle-quote p,
.closing-remarks p,
.mission p {
  padding: 20px;
}
.design-connection {
  background: radial-gradient(circle at bottom left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)), url(https://images.3-form.com/fullcircle/earthquake.jpg);
  background-size: cover;
  background-position: center;
}
.design-connection .text-content {
  padding-top: 25%;
}
.story-content {
  padding: 60px;
}
.story-content img,
.story-content p {
  padding-bottom: 40px;
}
.lina-story {
  padding-top: 60px;
}
.kathali-img-5 {
  padding-top: 312px;
}
.closing {
  background: radial-gradient(circle at bottom left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)), url(https://images.3-form.com/fullcircle/full_circle_better_way.jpg);
  background-size: cover;
  background-position: center;
  height: 500px;
  position: relative;
  color: #ffffff;
}
.closing .title {
  text-transform: uppercase;
  font-weight: 100;
  font-size: 30px;
  margin-bottom: 0;
  position: absolute;
  top: 50%;
  left: -15%;
}
.closing .subtitle {
  font-weight: 100;
  font-size: 54px;
  position: absolute;
  top: 60%;
  left: -15%;
}
.see-artisans {
  background: radial-gradient(circle at bottom left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)), url(https://images.3-form.com/fullcircle/meet_our_artisans.jpg);
  background-size: cover;
  height: 400px;
  padding-top: 125px;
}
.see-artisans a.button {
  margin-top: 20px;
}
.see-products {
  background: radial-gradient(circle at bottom left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)), url(https://images.3-form.com/fullcircle/3form_dance.jpg);
  background-size: cover;
  height: 400px;
  padding-top: 125px;
}
.see-products a.button {
  margin-top: 20px;
}
#return-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #000000;
  background: rgba(0, 0, 0, 0.7);
  width: 50px;
  height: 50px;
  display: block;
  text-decoration: none;
  -webkit-border-radius: 35px;
  -moz-border-radius: 35px;
  border-radius: 35px;
  display: none;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  z-index: 1000;
}
#return-to-top i {
  color: #ffffff;
  margin: 0;
  position: relative;
  left: 16px;
  top: 13px;
  font-size: 19px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
#return-to-top:hover {
  background: rgba(0, 0, 0, 0.9);
}
#return-to-top:hover i {
  color: #ffffff;
  top: 5px;
}
#videoModal .modal-header {
  padding: 0;
  border: none;
}
#videoModal .modal-header .close {
  margin-top: -25px;
  margin-right: -25px;
  border-radius: 15px;
  background-color: rgba(0, 0, 0, 0.2);
  color: #ffffff;
  opacity: 1;
  width: 25px;
  height: 25px;
}
#videoModal .modal-body {
  padding: 0;
}
.patterns-hero {
  background: radial-gradient(circle at bottom left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)), url(https://images.3-form.com/fullcircle/patterns_hero.jpg);
  background-size: cover;
  height: 650px;
}
.pattern-thumb {
  padding: 20px 0 20px 0;
}
.pattern-thumb img {
  width: 100%;
}
.product-stories-hero {
  background: radial-gradient(circle at bottom left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)), url(https://images.3-form.com/fullcircle/product_stories_hero.jpg);
  background-size: cover;
  height: 650px;
}
.story-thumb {
  margin: 20px 0 20px 0;
  position: relative;
}
.story-images-container img {
  padding: 15px 0;
}
.materials-container img {
  padding: 15px 0;
}
div.initiative {
  padding: 50px 0;
  will-transform: translate;
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
}