@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css);
@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@300;400;600;700&family=Barlow:ital,wght@0,300;0,400;0,700;1,400&display=swap");
* {
  box-sizing: border-box; }

html {
  scroll-behavior: smooth; }

::selection {
  color: #fff;
  background-color: #a53266; }

div {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline; }

ol,
ul,
li {
  line-height: 0;
  padding: 0;
  margin: 0;
  list-style: none;
  font-family: "Barlow", sans-serif;
  font-size: 15px; }

a {
  background-color: transparent;
  text-decoration: none;
  cursor: pointer; }

body {
  background-color: #fbf6f1;
  margin: 0 auto;
  font-family: sans-serif; }

h1 {
  font-family: "Barlow", sans-serif;
  font-size: 66px;
  color: #fbf6f1;
  text-transform: uppercase;
  padding: 0 0 16px 0;
  margin: 0;
  line-height: 1;
  font-weight: 700; }

h2 {
  font-family: "Barlow", sans-serif;
  font-size: 34px;
  color: #fbf6f1;
  padding: 0 0 16px 0;
  margin: 0;
  line-height: 1.2;
  font-weight: 300; }

h3 {
  font-family: "Barlow", sans-serif;
  font-size: 14px;
  color: #fbf6f1;
  margin: 0;
  padding: 0 0 8px 0;
  line-height: 1.1;
  font-weight: 600; }

h4 {
  font-family: "Barlow", sans-serif;
  font-size: 13px;
  color: #fbf6f1;
  margin: 0;
  padding: 0;
  line-height: 1.1;
  font-weight: 700; }

p {
  font-family: "Barlow", sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0 0 8px 0;
  line-height: 1.2;
  font-weight: 300; }

#headerselected {
  background-color: #fbf6f1; }
  #headerselected .head-left .logo {
    transition: 0.3s;
    filter: brightness(0%); }
  #headerselected .head-left .logo:hover {
    transition: 0.3s;
    filter: brightness(100%); }
  #headerselected .head-right h3 {
    color: #000;
    transition: 0.3s; }
  #headerselected .head-right h3:hover {
    transition: 0.3s;
    color: #bf7216; }

.headerbar {
  margin: 0;
  padding: 8px;
  height: 40px;
  width: 100%;
  background-color: #000; }
  .headerbar .head-left {
    width: auto; }
    .headerbar .head-left .logo {
      width: 20px;
      height: auto;
      float: left;
      transition: 0.1s;
      filter: brightness(1200%); }
    .headerbar .head-left .logo:hover {
      transition: 0.1s;
      filter: brightness(100%); }
  .headerbar .head-right {
    display: flex;
    justify-content: right; }
    .headerbar .head-right h3 {
      transition: 0.3s;
      text-transform: uppercase;
      padding: 0 8px; }
    .headerbar .head-right h3:hover {
      transition: 0.3s;
      color: #bf7216; }

.lander {
  width: 100%;
  padding: 8px;
  display: flex;
  height: 96vh;
  width: 100%;
  background-color: #000; }
  .lander .portfolio {
    height: 92vh;
    display: grid;
    grid-template-rows: 55% 35% 10%;
    grid-template-columns: 1fr; }
    .lander .portfolio .portfolio-text {
      grid-row: 1 / 2;
      align-content: end; }
      .lander .portfolio .portfolio-text h1 {
        font-size: 12vw; }
    .lander .portfolio .whatwhere {
      grid-row: 2 / 3; }
    .lander .portfolio .gradbox {
      display: none; }

.projects h1 {
  color: #000;
  font-size: 10.2vw;
  padding: 32px 0; }
.projects h2 {
  color: #000;
  font-size: 14px;
  font-weight: 400;
  padding: 0; }
.projects h3 {
  color: #89501b;
  font-size: 14px;
  font-weight: 300;
  padding: 0 0 4px 0; }
.projects .project {
  padding: 32px 8px;
  display: grid;
  grid-template-columns: 60% 40%;
  grid-template-rows: auto auto auto auto auto auto; }
  .projects .project .projectphoto {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
    padding: 0 0 32px 0; }
    .projects .project .projectphoto img {
      width: 100%; }
  .projects .project .projectname {
    grid-column: 1 / 3;
    grid-row: 2 / 3;
    padding: 0 0 32px 0; }
    .projects .project .projectname img {
      width: 100px;
      height: auto;
      padding: 0 0 16px 0; }
    .projects .project .projectname h2 {
      color: #000; }
  .projects .project .projectnumber {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    text-align: right; }
  .projects .project .button {
    grid-column: 1 / 2;
    grid-row: 6 / 7;
    width: 110px;
    clear: both;
    padding: 0 0 32px 0; }
    .projects .project .button .button-link {
      padding: 5px 0 8px 0;
      border: 1px #000 solid;
      text-align: center;
      transition: ease-out 0.3s;
      box-shadow: inset 0 0 0 0 #bf7216; }
      .projects .project .button .button-link h3 {
        transition: 0.3s;
        padding: 0;
        font-weight: 400;
        color: #000; }
    .projects .project .button .button-link:hover {
      border: 1px #bf7216 solid;
      transition: 0.3s;
      box-shadow: inset 400px 0 0 0 #bf7216; }
      .projects .project .button .button-link:hover h3 {
        transition: 0.3s;
        color: #fff; }
  .projects .project .projectindustry {
    grid-column: 1 / 2;
    grid-row: 4 / 5;
    padding: 0 0 16px 0; }
  .projects .project .projectpublished {
    grid-column: 1 / 2;
    grid-row: 5 / 6;
    padding: 0 0 32px 0; }
  .projects .project .projectskills {
    grid-column: 2 / 3;
    grid-row: 4 / 6;
    padding: 0 0 16px 0; }

.about {
  padding: 0 8px 42px 8px; }
  .about .about-title {
    padding: 0 0 64px 0;
    padding: 0 0 16px 0; }
    .about .about-title h1 {
      font-size: 20.6vw;
      color: #000;
      padding: 64px 0 64px 0; }
    .about .about-title h2 {
      font-size: 16px;
      color: #000; }
  .about .about-content p {
    max-width: 60%;
    margin-left: 20%;
    padding: 0 0 20px 0;
    line-height: 1.2; }

.extras {
  width: 100%;
  padding: 64px 8px; }
  .extras .extra-photos {
    column-gap: 8px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; }
    .extras .extra-photos .border {
      width: 33%; }
      .extras .extra-photos .border img {
        width: 100%;
        height: auto;
        border: 1px solid #c1c0bf; }

.expertise {
  padding: 0 8px 64px 8px; }
  .expertise .expertise-title {
    padding: 64px 0 64px 0; }
    .expertise .expertise-title h1 {
      color: #000;
      font-size: 21.5vw; }
  .expertise .expertise-list .expertise-item {
    display: inline-flex;
    padding: 0 0 16px 0;
    width: 100%;
    justify-content: space-between;
    align-items: center; }
    .expertise .expertise-list .expertise-item h2 {
      color: #000; }
    .expertise .expertise-list .expertise-item h2:nth-child(even) {
      font-weight: 400;
      font-size: 16px; }
    .expertise .expertise-list .expertise-item img {
      display: none; }

.next {
  width: 100%;
  padding: 96px 8px; }
  .next h3 {
    padding: 0 0 16px 0;
    color: #000;
    text-transform: uppercase;
    font-size: 12vw; }
  .next .next-photos {
    display: flex;
    justify-content: center;
    column-gap: 8px; }
    .next .next-photos .border {
      width: 33%; }
      .next .next-photos .border img {
        width: 100%;
        border: 1px solid #c1c0bf; }

.contact {
  padding: 64px 8px;
  background-color: #bf7216;
  width: 100%; }
  .contact .contact-title {
    padding: 0 0 32px 0; }
    .contact .contact-title h1 {
      font-size: 22.5vw;
      color: #fbf6f1; }
  .contact .contact-details {
    padding: 32px 0; }
    .contact .contact-details .contact-section {
      padding: 0 0 16px 0; }
      .contact .contact-details .contact-section h3 {
        color: #fbf6f1;
        font-size: 20px;
        font-weight: 400; }
      .contact .contact-details .contact-section img {
        width: 32px;
        float: left;
        margin: 0 20px 0 0; }

.foot {
  padding: 24px 8px 84px 8px;
  background-color: #000;
  min-height: 300px;
  width: 100%;
  display: flex; }
  .foot .logo {
    width: 49%; }
    .foot .logo img {
      width: 40px;
      filter: brightness(1200%);
      transition: 0.1s; }
    .foot .logo img:hover {
      filter: brightness(100%);
      transition: 0.1s; }
  .foot .foot-links {
    width: 50%;
    padding: 0;
    text-align: right; }
    .foot .foot-links a h3 {
      color: #fbf6f1;
      font-size: 16px;
      font-weight: 600;
      transition: 0.3s;
      text-transform: uppercase;
      line-height: 1.6;
      padding: 8px 0 8px 0; }
    .foot .foot-links a h3:hover {
      transition: 0.3s;
      color: #bf7216; }
    .foot .foot-links a h4 {
      padding: 0 24px 12px 0;
      font-weight: 400;
      text-transform: uppercase; }
    .foot .foot-links a h4:hover {
      transition: 0.3s;
      color: #bf7216; }

footer {
  color: #fbf6f1;
  padding: 8px;
  background-color: #000;
  text-align: center; }

.selected-project {
  padding: 32px 8px;
  display: grid;
  grid-template-columns: 60% 40%;
  grid-template-rows: auto auto auto auto auto auto; }
  .selected-project h1 {
    color: #000;
    font-size: 10.2vw;
    padding: 64px 0 32px 0; }
  .selected-project h2 {
    color: #000;
    font-size: 14px;
    font-weight: 400;
    padding: 0;
    line-height: 1.4; }
  .selected-project h3 {
    color: #89501b;
    font-size: 14px;
    font-weight: 300;
    padding: 0 0 4px 0; }
  .selected-project .projectphoto {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
    padding: 0 0 32px 0; }
    .selected-project .projectphoto img {
      width: 100%; }
  .selected-project .projectname {
    grid-column: 1 / 3;
    grid-row: 2 / 3;
    padding: 0 0 48px 0; }
    .selected-project .projectname img {
      width: 200px;
      height: auto;
      padding: 0 0 16px 0; }
    .selected-project .projectname h2 {
      color: #000; }
  .selected-project .button {
    grid-column: 1 / 2;
    grid-row: 8 / 9;
    width: 110px;
    clear: both;
    padding: 0 0 32px 0; }
    .selected-project .button .button-link {
      padding: 5px 0 8px 0;
      border: 1px #000 solid;
      text-align: center;
      transition: 0.3s; }
      .selected-project .button .button-link h3 {
        transition: 0.3s;
        padding: 0;
        font-weight: 400;
        color: #000; }
  .selected-project .projectindustry {
    grid-column: 1 / 2;
    grid-row: 4 / 5;
    padding: 0 0 16px 0; }
  .selected-project .projectpublished {
    grid-column: 1 / 2;
    grid-row: 5 / 6;
    padding: 0 0 48px 0; }
  .selected-project .projectskills {
    grid-column: 2 / 3;
    grid-row: 4 / 6;
    padding: 0 0 16px 0; }
  .selected-project .projectbrief {
    grid-column: 1 / 3;
    grid-row: 6 / 7;
    padding: 0 0 16px 0; }
  .selected-project .projectsolution {
    grid-column: 1 / 3;
    grid-row: 7 / 8;
    padding: 0 0 48px 0; }

.gallery .photos {
  font-size: 0; }
  .gallery .photos .border {
    padding: 16px 8px; }
    .gallery .photos .border img {
      width: 100%;
      border: 1px solid #c1c0bf; }

/*ipad*/
@media screen and (min-width: 768px) {
  h3 {
    font-size: 16px; }

  p {
    font-size: 18px; }

  .headerbar {
    padding: 12px;
    height: 48px;
    display: flex;
    justify-content: space-between;
    align-items: center; }
    .headerbar .head-left .logo {
      width: 22px; }
    .headerbar .head-right h3 {
      padding: 0 12px; }

  .lander {
    padding: 12px; }
    .lander .portfolio .portfolio-text h1 {
      font-size: 11.7vw; }

  .projects h1 {
    padding: 96px 12px 24px 12px;
    font-size: 9.8vw; }
  .projects h2 {
    font-size: 18px;
    line-height: 1.2; }
  .projects h3 {
    font-size: 18px; }
  .projects .project {
    padding: 48px 12px; }
    .projects .project .projectphoto img {
      width: 100%; }
    .projects .project .projectname img {
      width: 260px; }
    .projects .project .projectpublished {
      padding: 0 0 50px 0; }
    .projects .project .button {
      width: 160px; }
      .projects .project .button .button-link {
        padding: 8px 0 10px 0; }

  .extras {
    padding: 48px 12px; }
    .extras .extra-photos {
      height: 190px; }

  .about {
    padding: 0 12px 48px 12px; }
    .about .about-title {
      padding: 0 0 24px 0; }
      .about .about-title h1 {
        font-size: 20.6vw;
        padding: 48px 0 48px 0; }
      .about .about-title h2 {
        font-size: 20px; }
    .about .about-content p {
      max-width: 80%;
      padding: 0 0 24px 0; }

  .expertise {
    padding: 0 12px 96px 12px; }
    .expertise .expertise-title {
      padding: 48px 0 48px 0; }
      .expertise .expertise-title h1 {
        font-size: 21.5vw; }
    .expertise .expertise-list .expertise-item {
      padding: 0 0 24px 0; }
      .expertise .expertise-list .expertise-item h2:nth-child(even) {
        font-size: 24px; }

  .contact {
    padding: 96px 12px; }
    .contact .contact-title {
      padding: 0 0 48px 0; }
      .contact .contact-title h1 {
        font-size: 22.5vw;
        color: #fbf6f1; }
    .contact .contact-details {
      padding: 48px 0; }
      .contact .contact-details .contact-section {
        padding: 0 0 24px 0; }
        .contact .contact-details .contact-section h3 {
          font-size: 26px; }
        .contact .contact-details .contact-section img {
          width: 34px;
          margin: 0 24px 0 0; }

  .foot {
    padding: 24px 12px 40px 12px;
    min-height: 360px; }
    .foot .logo img {
      width: 60px; }
    .foot .foot-links a h3 {
      font-size: 16px; }
    .foot .foot-links a h4 {
      font-size: 16px; }

  footer {
    padding: 12px; }

  .selected-project {
    padding: 48px 12px;
    grid-template-columns: 50% 50%; }
    .selected-project h2 {
      font-size: 18px;
      padding: 0; }
    .selected-project h3 {
      font-size: 18px;
      padding: 0 0 8px 0; }
    .selected-project .projectname {
      padding: 0 0 48px 0; }
      .selected-project .projectname img {
        width: 240px;
        padding: 0 0 24px 0; }
    .selected-project .button {
      width: 160px;
      padding: 0 0 24px 0; }
      .selected-project .button .button-link {
        padding: 10px 0 12px 0; }
    .selected-project .projectindustry {
      padding: 0 0 24px 0; }
    .selected-project .projectpublished {
      padding: 0 0 48px 0; }
    .selected-project .projectskills {
      padding: 0 0 16px 0; }
      .selected-project .projectskills h2 {
        line-height: 1.4; }
    .selected-project .projectbrief {
      grid-column: 1 / 2;
      grid-row: 6 / 7;
      padding: 0 0 24px 0; }
    .selected-project .projectsolution {
      grid-column: 1 / 2;
      grid-row: 7 / 8;
      padding: 0 0 48px 0; }

  .gallery .photos .border {
    padding: 24px 12px; }

  .next {
    padding: 96px 12px; }
    .next h3 {
      padding: 0 0 12px 0;
      font-size: 16px; }
    .next .next-photos {
      column-gap: 12px; } }
/*desktop small*/
@media screen and (min-width: 1200px) {
  .headerbar {
    padding: 16px 0;
    position: absolute;
    z-index: 9;
    background-color: unset; }
    .headerbar .head-left {
      padding: 12px 0 0 16px; }
      .headerbar .head-left .logo {
        width: 26px;
        filter: brightness(1200%) hue-rotate(0deg);
        transition: 0.1s; }
      .headerbar .head-left .logo:hover {
        filter: brightness(80%) hue-rotate(294deg);
        transition: 0.1s; }
    .headerbar .head-right h3 {
      padding: 0 16px; }
    .headerbar .head-right h3:hover {
      color: #a53266; }

  .lander {
    padding: 0;
    display: block; }
    .lander .portfolio {
      padding: 0;
      height: 100vh;
      grid-template-columns: 1fr 1fr; }
      .lander .portfolio .portfolio-text {
        grid-column: 1 / 3;
        padding: 0 16px; }
        .lander .portfolio .portfolio-text h1 {
          font-size: 12.05vw; }
      .lander .portfolio .whatwhere {
        grid-row: 2 / 3;
        grid-column: 1 / 2;
        padding: 16px; }
      .lander .portfolio .gradbox {
        display: block;
        width: 100%;
        grid-row: 1 / 4;
        grid-column: 1 / 3;
        background: linear-gradient(-60deg, #a53266, #bf7216, #bf7216);
        background-size: 400% 400%;
        -webkit-animation: gradientBG 10s ease infinite;
        animation: gradientBG 10s ease infinite; }

  .projects h1 {
    padding: 96px 16px 24px 16px;
    font-size: 9.9vw; }
  .projects h2 {
    font-size: 18px;
    line-height: 1.2; }
  .projects h3 {
    font-size: 18px; }
  .projects .project {
    padding: 64px 16px;
    grid-template-columns: 50% 25% 25%;
    grid-template-rows: 50% auto auto auto; }
    .projects .project .projectphoto {
      grid-column: 1 / 2;
      grid-row: 1 / 5;
      padding: 0; }
      .projects .project .projectphoto img {
        width: 100%;
        height: 100%; }
    .projects .project .projectname {
      grid-column: 2 / 4;
      grid-row: 1 / 2;
      padding: 0 0 32px 32px; }
      .projects .project .projectname img {
        width: 200px;
        padding: 0 0 16px 0; }
    .projects .project .projectnumber {
      grid-column: 3 / 4;
      grid-row: 1 / 2; }
    .projects .project .projectindustry {
      grid-column: 2 / 3;
      grid-row: 2 / 3;
      padding: 0 0 0 32px; }
    .projects .project .projectpublished {
      padding: 0 0 50px 0;
      grid-column: 2 / 3;
      grid-row: 3 / 4;
      padding: 0 0 0 32px; }
    .projects .project .projectskills {
      grid-column: 3 / 4;
      grid-row: 2 / 4; }
    .projects .project .button {
      width: 200px;
      grid-column: 2 / 3;
      grid-row: 4 / 5;
      padding: 0 0 0 32px;
      align-content: end; }
      .projects .project .button .button-link {
        padding: 8px 0 10px 0; }

  .extras {
    padding: 128px 16px 64px 16px; }
    .extras .extra-photos {
      height: auto;
      column-gap: 24px;
      padding: 0 0 20px 0; }

  .about {
    padding: 0 16px 48px 16px; }
    .about .about-title {
      padding: 0 0 48px 0; }
      .about .about-title h1 {
        font-size: 20.6vw;
        padding: 48px 0 64px 0; }
      .about .about-title h2 {
        font-size: 20px;
        padding: 0 0 0 33%;
        max-width: 66%; }
    .about .about-content {
      padding: 0 0 0 33%;
      width: 66%; }
      .about .about-content p {
        max-width: 100%;
        padding: 0 0 24px 0; }

  .expertise {
    padding: 0 0 196px 0; }
    .expertise .expertise-title {
      padding: 48px 16px 96px 16px; }
      .expertise .expertise-title h1 {
        font-size: 280px; }
    .expertise .expertise-list .expertise-item {
      padding: 24px 50% 24px 16px;
      display: flex;
      background-color: #fbf6f1;
      transition: ease-out 0.3s; }
      .expertise .expertise-list .expertise-item h2 {
        font-size: 21px;
        padding: 0; }
      .expertise .expertise-list .expertise-item h2:nth-child(even) {
        font-size: 22px; }
    .expertise .expertise-list .expertise-item:hover {
      background-color: #bf7216; }
      .expertise .expertise-list .expertise-item:hover h2 {
        color: #fff; }
      .expertise .expertise-list .expertise-item:hover img {
        display: block;
        width: 38vw;
        max-width: 800px;
        height: auto;
        position: absolute;
        right: 6%;
        box-shadow: 4px 4px 10px -4px; }

  .contact {
    padding: 100px 16px;
    display: block; }
    .contact .contact-title {
      padding: 0; }
      .contact .contact-title h1 {
        font-size: 280px;
        color: #fbf6f1; }
    .contact .contact-details {
      padding: 40px 12px 0;
      align-self: center; }
      .contact .contact-details .contact-section {
        padding: 0 0 24px 0;
        display: flex;
        align-items: center; }
        .contact .contact-details .contact-section h3 {
          font-size: 21px; }
        .contact .contact-details .contact-section img {
          width: 50px;
          margin: 0 24px 0 0; }

  .foot {
    padding: 24px 16px 40px 16px;
    min-height: 360px; }
    .foot .logo img {
      width: 60px; }
    .foot .foot-links a h3 {
      font-size: 16px; }
    .foot .foot-links a h4 {
      font-size: 16px; }

  footer {
    padding: 12px; }

  .sticky-test {
    display: flex;
    align-items: flex-start; }
    .sticky-test .selected-project {
      padding: 64px 48px 64px 16px;
      grid-template-columns: 60% 40%;
      position: sticky;
      top: -40px;
      width: 40%; }
      .sticky-test .selected-project h2 {
        font-size: 18px;
        padding: 0; }
      .sticky-test .selected-project h3 {
        font-size: 18px;
        padding: 0 0 8px 0; }
      .sticky-test .selected-project .projectname {
        padding: 0 0 48px 0; }
        .sticky-test .selected-project .projectname img {
          width: 240px;
          padding: 0 0 24px 0; }
      .sticky-test .selected-project .button {
        width: 160px;
        padding: 0 0 24px 0; }
        .sticky-test .selected-project .button .button-link {
          padding: 10px 0 12px 0;
          transition: ease-out 0.3s;
          box-shadow: inset 0 0 0 0 #bf7216; }
        .sticky-test .selected-project .button .button-link:hover {
          box-shadow: inset 400px 0 0 0 #bf7216;
          border: 1px solid #bf7216; }
          .sticky-test .selected-project .button .button-link:hover h3 {
            color: #fff; }
      .sticky-test .selected-project .projectindustry {
        padding: 0 0 24px 0; }
      .sticky-test .selected-project .projectpublished {
        padding: 0 0 48px 0; }
      .sticky-test .selected-project .projectskills {
        padding: 0 0 16px 0; }
        .sticky-test .selected-project .projectskills h2 {
          line-height: 1.4; }
      .sticky-test .selected-project .projectbrief {
        grid-column: 1 / 3;
        grid-row: 6 / 7;
        padding: 0 0 24px 0; }
      .sticky-test .selected-project .projectsolution {
        grid-column: 1 / 3;
        grid-row: 7 / 8;
        padding: 0 0 48px 0; }
    .sticky-test .gallery {
      position: relative;
      width: 60%;
      margin: 0 0 0 auto;
      padding: 32px 0; }
      .sticky-test .gallery .photos .border {
        padding: 32px 16px; }

  .next {
    padding: 146px 16px; }
    .next h3 {
      padding: 0 0 24px 0;
      font-size: 164px; }
    .next .next-photos {
      column-gap: 16px; } }
/*desktop large*/
@media screen and (min-width: 1920px) {
  .projects .project {
    max-width: 1800px;
    margin: 0 auto;
    grid-template-rows: 68% auto auto auto; }
    .projects .project .projectname {
      max-width: 600px; }

  .extras {
    padding: 128px 60px 64px 60px; }
    .extras .extra-photos {
      height: auto;
      gap: 40px;
      padding: 0 0 40px 0; }

  .about .about-title h1 {
    font-size: 280px; }
  .about .about-title h2 {
    font-size: 28px; }

  .contact {
    padding: 100px 40px;
    display: flex; }
    .contact .contact-title {
      width: 60%; }
    .contact .contact-details {
      width: 350px;
      align-content: center;
      margin: 0 auto; }

  .gallery .photos .border {
    text-align-last: end; }
    .gallery .photos .border img {
      max-width: 1200px; } }
@-webkit-keyframes gradientBG {
  0% {
    background-position: 0% 50%; }
  50% {
    background-position: 100% 50%; }
  100% {
    background-position: 0% 50%; } }
@keyframes gradientBG {
  0% {
    background-position: 0% 50%; }
  50% {
    background-position: 100% 50%; }
  100% {
    background-position: 0% 50%; } }
@keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
.fade-in {
  opacity: 0;
  -webkit-animation: fadeIn ease-in 0.8s;
  -moz-animation: fadeIn ease-in 0.8s;
  animation: fadeIn ease-in 0.8s;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-duration: 0.8s;
  -moz-animation-duration: 0.8s;
  animation-duration: 0.8s; }

.fade-in.one {
  -webkit-animation-delay: 0.2s;
  -moz-animation-delay: 0.2s;
  animation-delay: 0.2s; }

.fade-in.two {
  -webkit-animation-delay: 0.5s;
  -moz-animation-delay: 0.5s;
  animation-delay: 0.5s; }

/*# sourceMappingURL=main.css.map */