/*–––––––––––––––––––––––––––––––––
	Fonts
–––––––––––––––––––––––––––––––––*/
@font-face {
  src: url(fonts/ProximaNova-Regular.otf);
  font-family: ProximaNova-Regular;
}

@font-face {
  src: url(fonts/ProximaNova-SemiBold.otf);
  font-family: ProximaNova-SemiBold;
}

@font-face {
  src: url(fonts/ProximaNova-Bold.otf);
  font-family: ProximaNova-Bold;
}
/*–––––––––––––––––––––––––––––––––
	Framework
–––––––––––––––––––––––––––––––––*/
#body .relative {
  position: relative;
}

#body .absolute {
  position: absolute;
}

#body .totop {
  position: absolute;
  top: 0;
}

#body .toright  {
  position: absolute;
  right: 0;
}

#body .tobottom {
  position: absolute;
  bottom: 0;
}

#body .toleft {
  position: absolute;
  left: 0;
}

#body .float-right {
  float: right;
}

#body .float-left {
  float: left;
}

#body .w-100 {
  width: 100%;
}

#body .h-100 {
  height: 100%;
}

#body .mt-l {
	margin-top: 160px;
}

#body .mt-m {
	margin-top: 80px;
}

#body .mt-s {
	margin-top: 40px;
}

#body .mb-l {
	margin-bottom: 160px;
}

#body .mb-m {
	margin-bottom: 80px;
}

#body .mb-s {
	margin-bottom: 40px;
}

#body .pt-l {
	padding-top: 160px;
}

#body .pt-m {
	padding-top: 80px;
}

#body .pt-s {
	padding-top: 40px;
}

#body .pb-l {
	padding-bottom: 160px;
}

#body .pb-m {
	padding-bottom: 80px;
}

#body .pb-s {
	padding-bottom: 40px;
}

#body .flex-center {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

#body .text-center {
  text-align: center;
}

#body .text-right {
  text-align: right;
}

#body .uppercase {
  text-transform: uppercase;
}

#body .lowercase {
  text-transform: lowercase;
}

#body .nowrap {
  white-space: nowrap;
}

#body .white {
	color: white;
}

/*–––––––––––––––––––––––––––––––––
	Structure
–––––––––––––––––––––––––––––––––*/
* {
  margin: 0;
  padding: 0;
  border: none;
  background-color: none;
  outline: none !important;
}

body {
  margin: 0;
  font: 18px/150% ProximaNova-Regular;
	color: #3A3A3A;
}

h2 {
  display: inline-block;
  margin-top: 160px;
  margin-bottom: 80px;
  border-top: 3px solid #F7C90B;
  border-bottom: 3px solid #F7C90B;
  font: 72px/130% ProximaNova-Bold;
  text-transform: uppercase;
}

h3 {
  margin-bottom: 25px;
  font: 23px ProximaNova-Semibold;
  text-transform: uppercase;
}

h3.larger {
  margin-bottom: 40px;
  font: 40px/130% ProximaNova-Regular;
  text-transform: none;
}

b {
  font-family: ProximaNova-Bold;
}

button.main,
a.button {
	display: inline-flex;
  width: 100%;
	max-width: 380px;
	height: 65px;
  margin: 80px 0 160px;
  justify-content: center;
  align-items: center;
	background-color: #F7C90B;
  font: 20px ProximaNova-SemiBold, sans-serif;
  color: initial;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: .2s ease-out;
}
  button.main:hover,
  a.button:hover {
    filter: contrast(1.5);
    transition: .3s ease-in;
  }
/*–––––––––––––––––––––––––––––––––
	Header
–––––––––––––––––––––––––––––––––*/
#header {
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
}

#header .logo {
  position: fixed;
}

#header [src*="logo"],
.modal [src*="logo"] {
  margin-top: 35px;
}

#header .logo,
#navigation .logo {
  width: 140px;
  height: 140px;
  background-color: white;
  transition: .2s ease-out;
}

#header .logo.fixed {
  position: fixed;
  width: 100px;
  height: 100px;
  transition: .3s ease-in;
}

#header .contacts {
  margin-right: 100px;
}

#header .logo.fixed img {
  width: 70px;
  height: 70px;
  transition: .3s ease-in;
}

#header a {
  color: white;
  text-decoration: none;
}
  #header a:hover {
    color: #F7C90B;
  }

#header a[href*="tel"] {
  font: 20px/150% ProximaNova-SemiBold;
}

#header a[href*="mailto"] {
  font-family: ProximaNova-SemiBold;
  margin-left: auto;
}

#header button {
  position: fixed;
  right: 15px;
  top: 0;
  width: 50px;
  height: 50px;
  margin-left: 50px;
  background: url(images/i-sandwich.svg) no-repeat center / 45px;
  transition: .2s ease-out;
}

#header button.fixed {
  position: fixed;
  right: 15px;
  top: 0;
  background-color: #3A3A3A;
  background-size: 20px;
  transition: .3s ease-in;
}
/*–––––––––––––––––––––––––––––––––
  Start
–––––––––––––––––––––––––––––––––*/
#start {
  min-height: 750px;
  height: 100vh;
  background: url(images/bg-start.jpg) no-repeat center / cover fixed,
              url(images/bg-start.jpg) no-repeat center / cover;
}

#start h1 {
  font: 80px/95px ProximaNova-Bold;
  color: white;
}

#start + [src="images/i-wave.svg"] {
  z-index: 2;
  position: absolute;
  right: 120px;
  margin-top: -85px;
}

/*–––––––––––––––––––––––––––––––––
  About
–––––––––––––––––––––––––––––––––*/
#about {
  -webkit-clip-path: polygon(0 100%, 0 0, 100% 0, 100% 85%);
  background: url(images/bg-blue.jpg) repeat center
}

#about [href="#whywe"] {
  background-color: white;
  border: 1px solid #F7C90B;
}

#about h2 {
  border: none;
}

/*–––––––––––––––––––––––––––––––––
  Whywe
–––––––––––––––––––––––––––––––––*/
#whywe h3 small {
  display: block;
  font-size: 23px;
  font-family: ProximaNova-Regular;
  text-transform: lowercase;
}

#whywe .button {
  background-color: white;
  border: 1px solid #F7C90B;
}

#whywe + [src="images/i-wave-horz.svg"] {
  z-index: 2;
  position: absolute;
  left: 40%;
}

/*–––––––––––––––––––––––––––––––––
  About More
–––––––––––––––––––––––––––––––––*/
#about-more {
  background: url(images/bg-purple.jpg) repeat center;
  -webkit-clip-path: polygon(0 100%, 0 0, 100% 10%, 100% 95%);
}

/*–––––––––––––––––––––––––––––––––
  Callback
–––––––––––––––––––––––––––––––––*/
#callback {
  margin-top: -125px;
  padding: 400px 0;
  background: url(images/bg-callback-2.png) no-repeat center,
              url(images/bg-callback.jpg) no-repeat center / cover fixed,
              url(images/bg-callback.jpg) no-repeat center / cover;
  -webkit-clip-path: polygon(0 85%, 0 10%, 100% 0%, 100% 100%);
}

#callback h2 {
  margin-top: 0;
  margin-bottom: 30px;
  line-height: 65px;
  border: none;
}

#callback h2 small {
  display: block;
  font-size: 50px;
}

/*–––––––––––––––––––––––––––––––––
  Project
–––––––––––––––––––––––––––––––––*/
#projects {
  margin-top: -185px;
  background: url(images/bg-gray.jpg) repeat center;
  -webkit-clip-path: polygon(0 90%, 0 0, 100% 10%, 100% 100%);
}

#projects article {
  overflow: hidden;
  display: flex;
  height: 400px;
  padding: 30px 20px;
  justify-content: space-between;
  align-items: flex-end;
  background-position: center;
  background-size: cover;
  background-color: rgba(0, 0, 0, 0.4);
  transition: .2s ease-out;
}
  #projects article:hover {
    background-blend-mode: color;
    transition: .3s ease-in;
    background-position: bottom;
  }

#projects article > div {
  transform: translateY(calc(100% - 56px));
  transition: .2s ease-out;
}
  #projects article:hover > div {
    transform: translateY(0);
    transition: .3s linear;
  }

#projects article button {
  color: white;
  border: 1px solid #F7C90B;
  background-color: transparent;
}

#projects article > button {
  color: white;
  transform: translateY(140px);
  transition: .2s ease-out;
}
  #projects article:hover > button {
    transform: translateY(0);
    transition: .3s ease-in;
  }

.project .description p {
  text-align: justify;
}

/*–––––––––––––––––––––––––––––––––
  Build
–––––––––––––––––––––––––––––––––*/
#build .row > div:last-child {
  border-left: 3px solid #f7ca47;
}

#build h3 {
  /* border-bottom: 3px solid #f7ca47; */
  margin-right: -15px;
}

/*–––––––––––––––––––––––––––––––––
  Question
–––––––––––––––––––––––––––––––––*/
#question {
  padding: 400px 0 350px;
  background: url(images/bg-question-item.svg) no-repeat 35% 80px,
              url(images/bg-question-2.png) no-repeat center,
              url(images/bg-question.jpg) no-repeat center / cover fixed,
              url(images/bg-question.jpg) no-repeat center / cover;
  -webkit-clip-path: polygon(0 100%, 0 10%, 100% 0%, 100% 95%)
}

#question h2 {
  border: none;
}

/*–––––––––––––––––––––––––––––––––
  Work
–––––––––––––––––––––––––––––––––*/
#work {
  margin-top: -160px;
  padding-bottom: 300px;
  background: url(images/bg-purple.jpg) repeat center;
  -webkit-clip-path: polygon(0 100%, 0 5%, 100% 0%, 100% 90%)
}

#work article {
  display: flex;
  height: 250px;
  padding-bottom: 40px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  border: 1px solid #F7C90B;
}

#work article img,
#work article p {
  margin-top: auto;
}

#work [src="images/steps-img.png"] {
  max-width: 100%;
}

#work + [src="images/i-wave.svg"] {
  z-index: 2;
  position: absolute;
  right: 5%;
  margin-top: -250px;
}
/*–––––––––––––––––––––––––––––––––
  Earn
–––––––––––––––––––––––––––––––––*/
#earn li {
  position: relative;
  padding-left: 45px;
  list-style: none;
}

#earn ul > li:not(:last-child) {
  margin-bottom: 1em;
}

#earn li::before {
  content: '';
  position: absolute;
  left: 0;
  display: inline-block;
  width: 25px;
  height: 25px;
  background: url(images/i-check.svg) no-repeat center / contain;
}

/*–––––––––––––––––––––––––––––––––
  Ready
–––––––––––––––––––––––––––––––––*/
#ready {
  padding: 250px 0;
  background: url(images/i-wave-horz.svg) no-repeat 60% 130px / auto,
              url(images/ready-bg-flat.png) no-repeat center / auto,
              url(images/ready-bg.jpg) no-repeat center / cover fixed,
              url(images/ready-bg.jpg) no-repeat center / cover;
  -webkit-clip-path: polygon(0 100%, 0 0, 100% 10%, 100% 100%);
}

#ready h2 {
  margin: 0;
  border: none;
}

/*–––––––––––––––––––––––––––––––––
	Footer
–––––––––––––––––––––––––––––––––*/
#footer {
  background-color: #3A3A3A;
}

#footer a,
#navigation a {
  color: white;
}
  #footer a:hover,
  #navigation a:hover {
    color: #F7C90B;
  }

menu a,
.contacts a {
  display: block;
  width: fit-content;
  font: 18px ProximaNova-SemiBold;
  text-decoration: none;
  transition: .2s ease-out;
}
  menu a:hover,
  .contacts a:hover {
    color: #F7C90B;
    transition: .3s ease-in;
  }

menu > a:not(:last-child) {
  margin-bottom: 1em;
}

.social {
  display: flex;
  margin-top: 15px;
}

.social a:not(:last-child) {
  margin-right: 15px;
  transition: .2s ease-out;
}
  .social a:hover {
    opacity: .5;
    transition: .3s ease-in;
  }

/*–––––––––––––––––––––––––––––––––
	Project Item
–––––––––––––––––––––––––––––––––*/
section.project .tabs {
  margin-top: -105px;
}

section.project .tabs img {
  transform: scale(.85);
}

section.project h2 {
  margin: 0 0 20px;
  font: 40px/130% ProximaNova-Bold;
  border: none;
}

section.project h3 small {
  font: 18px ProximaNova-Regular;
}

section.project input {
  border: 1px solid rgba(58, 58, 58, 0.3);
}

/*–––––––––––––––––––––––––––––––––
	Modal
–––––––––––––––––––––––––––––––––*/
section.modal {
  z-index: 5;
  overflow: auto;
  position: fixed;
  top: 0;
  right: 0;
  background-color: #ffffff;
  display: flex;
  width: 100vw;
  height: 100vh;
  align-items: center;

  transform: translateX(100vw);
  opacity: 0;
  transition: .2s ease-in;
}
  section.modal.active {
    transform: translateX(0);
    opacity: 1;
    transition: .3s ease-out;
  }

section.modal .container {
  height: 100%;
}

section.modal > * {
  transform: translateX(300px);
  opacity: 0;
  transition: .2s ease-in;
}
  section.modal.active > * {
    transform: translateX(0) scale(1);
    opacity: 1;
    transition: .35s linear;
  }

button.close {
  z-index: 3;
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 50px;
  color: white;
  background-color: #3a3a3a;
  cursor: pointer;
}
  button.close:hover + * {
    filter: grayscale(.9) opacity(.6);
    transition: .3s ease-in;
  }

/*–––––––––––––––––––––––––––––––––
	Navigation
–––––––––––––––––––––––––––––––––*/
#navigation {
  background: url(images/bg-blue.jpg) repeat center;
}

#navigation a[href="#question"] {
  margin-top: 36px;
  text-decoration: underline;
}

#navigation a[href*="tel"] {
  margin-top: 26px;
  color: #F7C90B;
}


/*–––––––––––––––––––––––––––––––––
	Form
–––––––––––––––––––––––––––––––––*/
form {
  display: flex;
  flex-direction: row;
  width: 100%;
  border: none;
}

label {
  position: relative;
  display: flex;
  height: 60px;
	margin-bottom: 10px;
}

input {
  width: 100%;
  max-width: 350px;
  height: 65px;
  margin-right: 20px;
  padding: 0 20px;
  font-size: 18px;
  border: none;
  border-radius: 0;
	background: white;
}

form a {
  display: inline-block;
  margin-top: 20px;
  font-size: 15px;
  line-height: 22px;
  color: white;
  transition: .2s ease-out;
}
  form a:hover {
    text-decoration-color: #F7C90B;
    transition: .3s ease-in;
  }

.sent-alert {
  display: none;
  z-index: 2;
  position: fixed;
  top: 100px;
  left: calc(50% - 150px);
  width: 300px;
  height: 100px;
  background: white;
  padding: 20px 15px;
  border: 1px solid #F7C90B;
  text-align: center;
  /* visibility: hidden;
  transform: translateY(-50px); */
}

.sent-alert h3 {
  margin-bottom: 10px;

}

.header__logo,
.footer__logo{
  width: 100px;
}