html{
  background:#FFFFFF;
}

body{
  max-width: 1280px;
  box-sizing: border-box;
  margin:0 auto;
  font: 1em/1.5em Rubik, Helvetica;
  color:#252525;
}

h1{
  font:bold 3.75em/1.0666667em Rubik, Helvetica;
  margin:24px 0;
}
h2{font:bold 2.625em/1.095238em Rubik, Helvetica;}
h4{
  font:bold 1.375em/1.181818em Rubik, Helvetica;
}
p{
  font:1.125em/1.5em Rubik, Helvetica;
  font-weight: 300;
  letter-spacing: 0.25px;
  color: #707785;
  margin: 24px 0;
}
img{
  user-drag: none; 
  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
.sImg{
  max-width: 630px !important;
  margin: 0 auto;
}
a{
  color:#EA133F;
  text-decoration: none;
}

a:hover{
  text-decoration: underline;
}

.animate{
  animation: slideup 1s;
}

@keyframes slideup {
  0% {margin-top: 3%; opacity:0;}
  100% {margin-top: 0%; opacity:1;}
}

body, .meta, .logo svg{
  -webkit-transition: ease-in-out 0.2s;
  -moz-transition: ease-in-out 0.2s;
  -ms-transition: ease-in-out 0.2s;
  -o-transition: ease-in-out 0.2s;
  transition: ease-in-out 0.2s;
}
.desk{
  display: block;
}
.mobile{
  display: none;
}

.lighttext{
  color:#707785;
}

.header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 64px;
}

.navigation ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.navigation ul li{
  display:inline;
  padding:8px;
  margin:0 16px;
}
.navigation ul li:nth-last-child(1){
  margin-right: 0px;
}

.navigation ul a{
  font:1em/1.5em Rubik, Helvetica;
  color:#252525;
  padding:8px 0;
  text-decoration: none;
  position: relative;
}

.navigation ul a::before{
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #000;
  visibility: hidden;
  transform: scaleX(0);
  transition: all 0.2s ease-in-out 0s;
}

.navigation ul a:hover::before {
  visibility: visible;
  transform: scaleX(1);
}

.hero{
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 64px;
}

.callout{
  display:flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 32px;
}

.callout .sayhi, .button{
  display: inline-block;
  border: none;
  border-radius: 4px;
  padding: 0.75rem 1.5rem;
  text-decoration: none;
  background: #EA133F;
  color: #ffffff;
  font:1.125em/1.3333333em Rubik, Helvetica;
  cursor: pointer;
  text-align: center;
  transition: background 250ms ease-in-out, 
              transform 150ms ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  margin-right: 20px;
}
.sayhi:hover,
.sayhi:focus,
.button:hover,
.button:focus {
    background: #ce1138;
}

.dropdown {
          position: relative;
        }

        .dropdown:hover > .dropdown-menu {
          transform: translateY(0);
          opacity: 1;
          visibility: visible;
        }

          .dropdown-menu {
            position: absolute;
            bottom: 120%;
            width: 180%;
            z-index: 1000;
            text-align: left;
            background-color: #fff;
            background-clip: padding-box;
            border-radius: 4px;
            -webkit-box-shadow: 0px 2px 25px 0px rgba(0, 0, 0, 0.14);
            -moz-box-shadow: 0px 2px 25px 0px rgba(0, 0, 0, 0.14);
            box-shadow: 0px 2px 25px 0px rgba(0, 0, 0, 0.14);
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            transition: all .15s ease-in-out;
            transform: translateY(1rem);
            opacity: 0;
            visibility: hidden;
          }

            .dropdown-item {
              display: block;
                white-space: nowrap;
                background-color: transparent;
                border: 0;
                padding: 23px 20px;
                text-decoration: none;
                color: #111515;
                font-weight: 200;
                font-size: 17px;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
                -webkit-font-smoothing: auto;
            }

              .dropdown-item svg {
                vertical-align: middle;
                margin-right: 10px;
              }

              .dropdown-item:hover, .dropdown-item:focus, .dropdown-divider:hover {
                text-decoration: none;
                background-color: #fafafa;
                cursor: pointer;
              }

            .dropdown-menu.show {
              display: block;
              opacity 1;
            }

            .dropdown-divider {
              border-top: 1px solid #e7e7e7; 
            }

            .button:hover {
              cursor: pointer;
            }

          .animate {
            animation-duration: 0.25s;
            -webkit-animation-duration: 0.25s;
            animation-fill-mode: both;
            -webkit-animation-fill-mode: both;
          }

          @keyframes slideIn {
            0% {
              transform: translateY(1rem);
              opacity: 0;
            }
            100% {
              transform: translateY(0rem);
              opacity: 1;
            }
            0% {
              transform: translateY(1rem);
              opacity: 0;
            }
          }

          @-webkit-keyframes slideIn {
            0% {
              -webkit-transform: transform;
              -webkit-opacity: 0;
            }
            100% {
              -webkit-transform: translateY(0);
              -webkit-opacity: 1;
            }
            0% {
              -webkit-transform: translateY(1rem);
              -webkit-opacity: 0;
            }
          }

          .slideIn {
            -webkit-animation-name: slideIn;
            animation-name: slideIn;
          }
.copy-notification {
  font-family: "Larsseit", Helvetica, sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 15px;
  color: #fff;
  background-color: #111515;
  padding: 17px 18px 15px;
  border-radius: 3px;
  display: none; 
  position: fixed;
  top: 20px;
  right: 20px;
}

.social a{
  padding: 12px;
}

.social a img{transition: all .2s ease-in-out;}

.social a img:hover{
  transform: scale(1.2);
}
.social img{
  max-height: 20px;
}

.show-mobile{
  display: none !important;
}
.hide-mobile{
  display: block !important;
}

.seework{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-left: 32px;
}

.seework a{
  text-decoration: none;
  color: #EA133F;
  font:bold 1em/1.5em Rubik, Helvetica;
  padding: 12px 16px;
  position: relative;
  -webkit-appearance: none;
  -moz-appearance: none;
  border:none;
  background: transparent;
  cursor: pointer;
}

button:focus{
  border: none;
  outline:none;
}

.seework a img{
  position: relative;
  top:3px;
  left:8px;
}


.alton{
  position: relative;
  text-align: right;
}
.alton svg{
  max-width: 450px;
  -webkit-animation: bummer 1s;
  animation: bummer 1s;
  -webkit-transform: scale(0,0); 
  transform: scale(0,0);
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
@-webkit-keyframes bummer {
    100% {
        -webkit-transform: scale(1,1); 
    }
}

@keyframes bummer {
    100% {
        transform: scale(1,1); 
    }
}

.face{
  position: absolute;
  left: 44%;
  top: 72px;
}


.hi{
  position: absolute;
  left:20%;
  top:70px;
  opacity:0;
  animation: mymove 1.5s;
  opacity:1;
}
@keyframes mymove {
  0% {left: 30%; opacity:0;}
  50% {left: 25%; opacity:0;}
  100% {left: 20%; opacity:1;}
}
@-webkit-keyframes mymove {
  0% {left: 30%; opacity:0;}
  50% {left: 25%; opacity:0;}
  100% {left: 20%; opacity:1;}
}

#portfolio{
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: wrap;
  margin-top: 100px;
}

.alton, .intro{
  width:48%;
}

.project{
  flex: 0 48%;
  box-sizing:border-box;
  position: relative;
  border-radius: 4px;
  margin-bottom: 42px;
}
.project:nth-child(odd){
  margin-right: 2em;
}

.project .meta{
  position: absolute;
  top:64px;
  left: 64px;
  max-width: 264px;
}

.project span{
  font: lighter 0.75em/1.5em Rubik, Helvetica;
  letter-spacing: 1px;
  color: #FFFFFF;
  text-transform: uppercase;
}

.project h3{
  font: bold 1.625em/1.153846em Rubik, Helvetica;
  color: #FFFFFF;
  margin: 8px 0;
}

.comingsoon{
  cursor:not-allowed;
}

.dark{
  color:#252525 !important;
}

.project img, .project picture{
  display: block;
  width:100%;
  height: 100%;
  max-width: 616px;
  border-radius: 4px;
  -webkit-filter: brightness(100%);
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -o-transition: all .5s ease;
  -ms-transition: all .5s ease;
  transition: all .5s ease;
}

.project img:hover, .project picture:hover {
    -webkit-filter: brightness(70%);
}

.view{
  padding: 20px;
  background: #FFFFFF;
  position: absolute;
  top: 0;
  right: 5%;
}
.project:after{
  content: "View case study";
  padding: 20px;
  background: #FFFFFF;
  position: absolute;
  top: 0;
  right: 5%;
  font: lighter 0.75em/1.5em Rubik, Helvetica;
  letter-spacing: 1px;
  color: #000000;
  text-transform: uppercase;
  text-decoration: none;
  transition: top 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
  overflow: hidden;
}

.extra .meta{
  top:300px;
  left:-380px;
}

.about {
    display: flex;
    justify-content: space-between;
    background-color:#F3F3F1;
    position: relative;
    margin-top: 192px;
}
.about:before {
    content:"";
    background-color:#F3F3F1;
    position: absolute;
    height: 100%;
    width: 3360px;
    left: -2000px;
    z-index: -1;
}

.about h4{
  padding-top: 100px;
}

.about a{
  color: #EA133F;
  text-decoration: none;
  border-bottom: 1px dashed #EA133F;
  padding-top: 3px;
}

.about .myself{
  margin-top: -128px;
}

.fade-in {
animation: fadeIn ease 1s;
-webkit-animation: fadeIn ease 1s;
-moz-animation: fadeIn ease 1s;
-o-animation: fadeIn ease 1s;
-ms-animation: fadeIn ease 1s;
}

@keyframes fadeIn {
0% {opacity:0;}
50%{opacity:0;}
100% {opacity:1;}
}

@-moz-keyframes fadeIn {
0% {opacity:0;}
50%{opacity:0;}
100% {opacity:1;}
}

@-webkit-keyframes fadeIn {
0% {opacity:0;}
50%{opacity:0;}
100% {opacity:1;}
}

@-o-keyframes fadeIn {
0% {opacity:0;}
50%{opacity:0;}
100% {opacity:1;}
}

@-ms-keyframes fadeIn {
0% {opacity:0;}
50%{opacity:0;}
100% {opacity:1;}
}

.projdetail{
  margin-top: 100px;
}
.richtext{
  max-width: 630px;
  margin: 0 auto;
  margin-bottom: 64px;
}

.richtext h2{
  margin-bottom: 24px;
}

.visit a{
  font-size: 1em;
  line-height: 1.25em;
  color:#EA133F;
  font-weight: bold;
  text-decoration: none;
  margin-right: 16px;
}

.visit a:hover{
  text-decoration: underline;
}

.visit::after, .externLink::after{
  display: inline-block;
  content: ' ';
  background-image: url('../img/external_link.svg');
  background-size: 12px 12px;
  height: 12px;
  width: 12px;
}

.externLink::after{
  margin-left: 10px;
}

.projlargeimg img{
  width:100%;
  max-width: 1280px;
  margin-bottom: 48px;
}
.projmedimg img{
  width:100%;
  max-width: 848px;
  margin: 0 auto;
  margin-bottom: 32px;
  margin-top: -24px;
}
.projmedimg img:first-child{
  margin-top: -32px;
}
.projmedimg{
  display:block;
  text-align: center;
}

.projinfo{
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: wrap;
  margin-bottom: 64px;
  box-sizing: border-box;
  padding: 32px;
  background: #F7F7F7;
  border-radius: 4px;
}
.projinfo p{
  margin-top: 8px;
}
.projhalf{
  width:48%;
  margin-bottom: 24px;
}
.projtitle{
  font-size: 18px;
  font-weight: bold;
}
.red{
  color:#EA133F;
  margin-right: 16px;
}
ol{padding-left: 20px}
li{
  font-weight: bold;
  padding-left: 10px;
}
ol p{padding-left: 10px}




@media only screen and (max-width: 1280px) {

  body{
    width:100%;
    padding:0 24px;
  }
  .about:before {
    width: 3000px;
  }
  .face{
    left: 41%;
  }

  .hi{
    left:18%;
  }
  .circle svg{
    width:95%;
  }

}









@media only screen and (max-width: 1200px) {

  .project .meta {
    top: 64px;
    left: 32px;
  }
  .meta:after{
    top:-32px;
  }
  .extra .meta {
    top: 230px;
    left: -330px;
  }
  .face{
    left:38%;
  }
  .hi{
    left:12%;
  }
}






@media only screen and (max-width: 1024px) {
  .project{
    flex: 0 47%;
  }
  .project .meta{
    max-width:616px;
  }
  .alton{
    width:40%;
  }
  .face{
    width:60%;
    left: 24%;
    top:13%;
  }
  .hi{
    left:-7%;
    top: 12%;
  }
  @keyframes mymove {
    0% {left: 3%; opacity:0;}
    50% {left: -2%; opacity:0;}
    100% {left: -7%; opacity:1;}
  }
  @-webkit-keyframes mymove {
    0% {left: 3%; opacity:0;}
    50% {left: -2%; opacity:0;}
    100% {left: -7%; opacity:1;}
  }
  
}






@media only screen and (max-width: 768px) {
  .project {
    flex: 0 100%;
  }
  .project:nth-child(odd){
    margin-right: 0;
  }
  .project img, .project picture{
    max-width: 100%;
  }
  .about:before {
    width: 2790px;
  }
  .hero{
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .alton, .intro{
    width:100%;
  }
  .alton{text-align: center;}
  .face{
    width: 40%;
    left: 32%;
    top: 13%;
  }
  .hi{
    left:14%;
  }
  @keyframes mymove {
    0% {left: 24%; opacity:0;}
    50% {left: 19%; opacity:0;}
    100% {left: 14%; opacity:1;}
  }
  @-webkit-keyframes mymove {
    0% {left: 24%; opacity:0;}
    50% {left: 19%; opacity:0;}
    100% {left: 14%; opacity:1;}
  }
  .projhalf{
    width:100%;
  }
}







@media all and (max-width: 600px) {
  .show-mobile{
    display: block !important;
  }
  .hide-mobile{
    display: none !important;
  }
  .project .meta{
    max-width:80%;
    top:48px;
  }
  .header{
    margin-top:32px;
  }
  .navigation ul li{
    display: block;
  }
  .separator{
    display: none;
  }
  .desk{
    display: none;
  }
  .mobile{
    display:block;
  }
  .navigation ul a:hover::before {
    visibility: hidden;
    transform: scaleX(0);
  }
  .logo svg{
    width:80%;
  }
  .alton svg{
    width:90%;
    margin: 32px 0;
  }
  .seework{
    display: none;
  }
  h1{
    font:bold 2.50em/1.0666667em Rubik, Helvetica;
    margin-top: 0;
  }
  .hero{
    margin-top: 0px;
  }
  .face{
    width: 54%;
    left:25%;
    top:20%;
  }
  .hi{
    left:-2%;
    width: 32%;
    top: 18%;
  }
  @keyframes mymove {
    0% {left: 8%; opacity:0;}
    50% {left: 4%; opacity:0;}
    100% {left: -2%; opacity:1;}
  }
  @-webkit-keyframes mymove {
    0% {left: 8%; opacity:0;}
    50% {left: 4%; opacity:0;}
    100% {left: -2%; opacity:1;}
  }
  .project:after{
    padding: 15px;
  }
}