/* Medium desktop */
@media (min-width: 980px) and (max-width: 1199px) {

.speech-bubble { position: relative; background-color: white; border-radius: 25px; -webkit-border-radius: 25px; -moz-border-radius: 25px; padding: 0 40px 125px; }
.speech-bubble .speech-arrow, .speech-bubble .bird { position: absolute; right: 100%; top: 0; height: 100%;}
    .speech-bubble .speech-arrow img, .speech-bubble .bird img {height: 100%;}

    /* NAVIGATION */
nav {background-color: rgba(60,60,60,.75);  position: fixed; height: 100%; width: 60px; top: 0px; right: 0; z-index: 9000; display: table; text-align: center;}
nav ul, nav ul li{list-style: none; margin-left: 0; padding: 0; }
nav ul {width: 100%; position: absolute; top: 50%; left: 0; transform: translate(0,-50%);}
nav ul li {height: 60px; margin-bottom: 2px; margin-right: 0; text-align: center; font-size: 30px; color: white; position: relative;}
nav ul li span {position: absolute; top: 27px; left: 50%; transform: translate(-50%,-50%); transform-origin: right bottom;}
nav ul li:hover {font-size: 40px; background-color: rgba(255,255,255,.3);}
nav ul li.no-hover:hover {background-color: transparent;}
nav ul li.active { color: rgb(214,74,83);}
nav ul li.active:before {content: ''; width: 0; height: 0; position: absolute; top: 10px; right:100%; border-top:20px solid transparent; border-bottom: 20px solid transparent; border-right:20px solid rgba(60,60,60,.75);border-left: none; }

    /* TYPOGRAPHY */
        h1.title-text {font-family: 'norwester-reg', sans-serif; font-size: 6em; line-height: 1em; font-weight: 100; text-transform: uppercase; margin-top: 0; margin-bottom: 30px;}
          h1.title-text.half-margin { margin-bottom: 10px;}
        .title-shadow {text-shadow: 4px 3px 0 white; -webkit-text-shadow: 4px 3px 0 white;}
        h1.section-title {font-size: 60px; line-height: 65px; text-transform: uppercase; text-align: center; width: 100%; padding: 100px 0 50px; position: relative;}
        p.body-text {font-family: 'sofia_prolight', sans-serif; font-size: 17pt; line-height: 28pt; font-weight: 400; margin-bottom: 15px;}
          p.body-text.double-margin{margin-bottom: 14px;}
        a.text-link, a.text-link:visited {color:white; background-color: rgb(214,74,83); padding: 0 10px;}
          a.text-link:hover, a.text-link:active {color:white; background-color: rgb(230,90,83); text-decoration: none;}
        span.body-highlight {font-family: 'sofia_prolight', sans-serif; font-weight: 900; background-color:rgb(240,190,0);}
        .project-title {font-size: 40px; text-transform: uppercase; line-height: 48px; margin-bottom: 30px; text-align: center;}
        .client-title {font-size: 30px; text-transform: uppercase; line-height: 38px; margin-bottom: 30px; text-align: center; }

        .icon-portfolio { font-size: 30px; padding: 20px 25px; text-align: center; border-radius:50%; -webkit-border-radius:50%; border: 1px solid rgb(214,74,83); width:80px; height: 80px; line-height: 35px !important; color: rgb(214,74,83); margin-left: 50%; transform: translateX(-50%) scale(1,1); -webkit-transform: translateX(-50%) scale(1,1);}


        .project-links {margin: 30px auto 30px; text-align: center; list-style: none;}
        .project-links li {display: inline-block; margin-right: 40px; width:60px; height: 60px;  text-align: center; }
        .project-links li a, .project-links li a:visited {display: block; height: 100% ; border: 2px solid rgb(214,74,83); color: rgb(214,74,83);}
        .project-links li a:hover { text-decoration: none; border: 2px solid rgb(230,104,103); color: rgb(230,104,103);}
        .project-links li a p{ font-size: 30px; line-height: 52px; transform: translate(2%);}

        form input {height: 60px; background-color: rgba(255,255,255,.65); border: none; padding: 0 20px; outline: none; width: 48%; margin-right: 20px; margin-bottom: 20px; display: inline-block; font-size: 18pt;}
          form input:last-of-type {margin-right: 0; float: right;}
          form input:focus {background-color: rgba(255,255,255,.9);}
        form textarea { font-family: 'eausans_book', sans-serif; font-size: 20pt; height: 280px; width: 100%; background-color: rgba(255,255,255,.65); padding: 20px; outline: none; resize: none; border: none;}
          form textarea:focus {background-color: rgba(255,255,255,.9);}
          .portfolio-thumb { text-align: center;}
          .portfolio-thumb a {width: 100px; height: 100px; background-size: 100px 100px; background-position: center;}
          .portfolio-thumb a:hover {background-size: 150px 150px;}
    }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
/* NAVIGATION */
    nav {background-color: rgba(60,60,60,.75);  position: fixed; height: 60px; width: 100%; top: 0px; right: 0; z-index: 9000; display: table; text-align: center;}
    nav ul, nav ul li{list-style: none; margin-left: 0; padding: 0; }
    nav ul {width: 100%; position: absolute; top: 0; left: 50%; transform: translate(-50%, 0);}
    nav ul li {height: 60px; width: 60px; margin-bottom: 0px; margin-right: 2px; text-align: center; font-size: 30px; color: white; position: relative; display: inline-block;}
    nav ul li.spacer {height: 15px; width: 15px;}
    nav ul li span {position: absolute; top: 27px; left: 50%; transform: translate(-50%,-50%); transform-origin: right bottom;}
    nav ul li:hover {font-size: 40px; background-color: rgba(255,255,255,0);}
    nav ul li.no-hover:hover {background-color: transparent;}
    nav ul li.active { color: rgb(214,74,83);}
    nav ul li.active:before {content: ''; width: 0; height: 0; position: absolute; top: 100%; right:12px; border-top:20px solid rgba(60,60,60,.75); border-bottom: none; border-left: 20px solid transparent; border-right:20px solid transparent;}

/* TYPOGRAPHY */
    h1.title-text {font-family: 'norwester-reg', sans-serif; font-size: 8em; line-height: 1em; font-weight: 100; text-transform: uppercase; margin-top: 0; margin-bottom: 30px;}
      h1.title-text.half-margin { margin-bottom: 10px;}
    .title-shadow {text-shadow: 4px 3px 0 white; -webkit-text-shadow: 4px 3px 0 white;}
    h1.section-title {font-size: 60px; line-height: 40px; text-transform: uppercase; text-align: center; width: 100%; padding: 100px 0 50px; position: relative;}
    p.body-text {font-family: 'sofia_prolight', sans-serif; font-size: 17pt; line-height: 28pt; font-weight: 400; margin-bottom: 15px;}
      p.body-text.double-margin{margin-bottom: 14px;}
    a.text-link, a.text-link:visited {color:white; background-color: rgb(214,74,83); padding: 0 10px;}
      a.text-link:hover, a.text-link:active {color:white; background-color: rgb(230,90,83); text-decoration: none;}
    span.body-highlight {font-family: 'sofia_prolight', sans-serif; font-weight: 900; background-color:rgb(240,190,0);}
    .project-title {font-size: 40px; text-transform: uppercase; line-height: 48px; margin-bottom: 30px; text-align: center;}
    .client-title {font-size: 30px; text-transform: uppercase; line-height: 38px; margin-bottom: 30px; text-align: center; }

    .icon-portfolio { font-size: 30px; padding: 20px 25px; text-align: center; border-radius:50%; -webkit-border-radius:50%; border: 1px solid rgb(214,74,83); width:80px; height: 80px; line-height: 35px !important; color: rgb(214,74,83); margin-left: 50%; transform: translateX(-50%) scale(1,1); -webkit-transform: translateX(-50%) scale(1,1);}


    .project-links {margin: 30px auto 30px; text-align: center; list-style: none;}
    .project-links li {display: inline-block; margin-right: 40px; width:60px; height: 60px;  text-align: center; }
    .project-links li a, .project-links li a:visited {display: block; height: 100% ; border: 2px solid rgb(214,74,83); color: rgb(214,74,83);}
    .project-links li a:hover { text-decoration: none; border: 2px solid rgb(230,104,103); color: rgb(230,104,103);}
    .project-links li a p{ font-size: 30px; line-height: 52px; transform: translate(2%);}


}



/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
 .row{margin-left: 0; margin-right: 0}
/* NAVIGATION */
nav {background-color: rgba(60,60,60,.75);  position: fixed; height: 100%; width: 60px; top: 0px; right: 0; z-index: 9000; display: table; text-align: center;}
nav ul, nav ul li{list-style: none; margin-left: 0; padding: 0; }
nav ul {width: 100%; position: absolute; top: 50%; left: 0; transform: translate(0,-50%);}
nav ul li {height: 60px; margin-bottom: 2px; margin-right: 0; text-align: center; font-size: 30px; color: white; position: relative;}
    nav ul li.spacer{height: 15px; width: 15px;}
nav ul li span {position: absolute; top: 27px; left: 50%; transform: translate(-50%,-50%); transform-origin: right bottom;}
nav ul li:hover {font-size: 40px; background-color: rgba(255,255,255,.3);}
nav ul li.no-hover:hover {background-color: transparent;}
nav ul li.active { color: rgb(214,74,83);}
nav ul li.active:before {content: ''; width: 0; height: 0; position: absolute; top: 10px; right:100%; border-top:20px solid transparent; border-bottom: 20px solid transparent; border-right:20px solid rgba(60,60,60,.75);border-left: none; }

/* TYPOGRAPHY */
  /*  h1.title-text {font-family: 'norwester-reg', sans-serif; font-size: 6em; line-height: 1em; font-weight: 100; text-transform: uppercase; margin-top: 0; margin-bottom: 30px;}
      h1.title-text.half-margin { margin-bottom: 10px;}
    .title-shadow {text-shadow: 4px 3px 0 white; -webkit-text-shadow: 4px 3px 0 white;}
    h1.section-title {font-size: 60px; line-height: 40px; text-transform: uppercase; text-align: center; width: 100%; padding: 50px 0 25px; position: relative;}
    p.body-text {font-family: 'sofia_prolight', sans-serif; font-size: 17pt; line-height: 28pt; font-weight: 400; margin-bottom: 15px;}
      p.body-text.double-margin{margin-bottom: 14px;}
    a.text-link, a.text-link:visited {color:white; background-color: rgb(214,74,83); padding: 0 10px;}
      a.text-link:hover, a.text-link:active {color:white; background-color: rgb(230,90,83); text-decoration: none;}
    span.body-highlight {font-family: 'sofia_prolight', sans-serif; font-weight: 900; background-color:rgb(240,190,0);}
    .project-title {font-size: 40px; text-transform: uppercase; line-height: 30px; margin-bottom: 30px; text-align: center;}
    .client-title {font-size: 30px; text-transform: uppercase; line-height: 25px; margin-bottom: 30px; text-align: center; }

    .icon-portfolio { font-size: 30px; padding: 20px 25px; text-align: center; border-radius:50%; -webkit-border-radius:50%; border: 1px solid rgb(214,74,83); width:80px; height: 80px; line-height: 35px !important; color: rgb(214,74,83); margin-left: 50%; transform: translateX(-50%) scale(1,1); -webkit-transform: translateX(-50%) scale(1,1);}


    .project-links {margin: 30px auto 30px; text-align: center; list-style: none;}
    .project-links li {display: inline-block; margin-right: 40px; width:60px; height: 60px;  text-align: center; }
    .project-links li a, .project-links li a:visited {display: block; height: 100% ; border: 2px solid rgb(214,74,83); color: rgb(214,74,83);}
    .project-links li a:hover { text-decoration: none; border: 2px solid rgb(230,104,103); color: rgb(230,104,103);}
    .project-links li a p{ font-size: 30px; line-height: 52px; transform: translate(2%);}
        img.portrait {position: absolute; left: -100px; bottom:0 !important; width: 1200px !important;}
    */

        h1.title-text {font-family: 'norwester-reg', sans-serif; font-size: 4em; line-height: 1em; font-weight: 100; text-transform: uppercase; margin-top: 0; margin-bottom: 30px;}
      h1.title-text.half-margin { margin-bottom: 10px;}
    .body-text.size-override { font-size: 22px; line-height: 36px;}
    .title-shadow {text-shadow: 4px 3px 0 white; -webkit-text-shadow: 4px 3px 0 white;}
    h1.section-title {font-size: 45px; line-height: 50px; text-transform: uppercase; text-align: center; width: 100%; padding: 50px 0 25px; position: relative;}
    p.body-text {font-family: 'sofia_prolight', sans-serif; font-size: 15pt; line-height: 21pt; font-weight: 400; margin-bottom: 15px;}
      p.body-text.double-margin{margin-bottom: 14px;}
    a.text-link, a.text-link:visited {color:white; background-color: rgb(214,74,83); padding: 0 10px;}
      a.text-link:hover, a.text-link:active {color:white; background-color: rgb(230,90,83); text-decoration: none;}
    span.body-highlight {font-family: 'sofia_prolight', sans-serif; font-weight: 900; background-color:rgb(240,190,0);}
    .project-title {font-size: 30px; text-transform: uppercase; line-height: 30px; margin-bottom: 30px; text-align: center;}
    .client-title {font-size: 25px; text-transform: uppercase; line-height: 30px; margin-bottom: 30px; text-align: center; }

    .icon-portfolio { font-size: 30px; padding: 20px 25px; text-align: center; border-radius:50%; -webkit-border-radius:50%; border: 1px solid rgb(214,74,83); width:80px; height: 80px; line-height: 35px !important; color: rgb(214,74,83); margin-left: 50%; transform: translateX(-50%) scale(1,1); -webkit-transform: translateX(-50%) scale(1,1);}


    .project-links {margin: 30px auto 30px; text-align: center; list-style: none; padding: 0;}
    .project-links li {display: inline-block; margin-right: 20px; width:60px; height: 60px;  text-align: center; }
    .project-links li:last-child {margin-right: 0; }
    .project-links li a, .project-links li a:visited {display: block; height: 100% ; border: 2px solid rgb(214,74,83); color: rgb(214,74,83);}
    .project-links li a:hover { text-decoration: none; border: 2px solid rgb(230,104,103); color: rgb(230,104,103);}
    .project-links li a p{ font-size: 30px; line-height: 52px; transform: translate(2%);}
        img.portrait {position: absolute; left: -100px; bottom:0 !important; width: 1200px !important;}

    /*END LANDSCAPE PHONE TO TABLET
}

/* Landscape phones and down */
@media (max-width: 480px) {
    .row{margin-left: 0; margin-right: 0}
    .slate.use-padding {padding: 50px 0 100px;}
    .speech-bubble { position: relative; background-color: white; border-radius: 25px; -webkit-border-radius: 25px; -moz-border-radius: 25px; padding: 0 20px 50px; }
/* NAVIGATION */
    nav {background-color: rgba(60,60,60,.75);  position: fixed; height: 60px; width: 100%; top: 0px; right: 0; z-index: 9000; display: table; text-align: center;}
    nav ul, nav ul li{list-style: none; margin-left: 0; padding: 0; }
    nav ul {width: 100%; position: absolute; top: 0; left: 50%; transform: translate(-50%, 0);}
    nav ul li {height: 60px; width: 60px; margin-bottom: 0px; margin-right: 2px; text-align: center; font-size: 30px; color: white; position: relative; display: inline-block;}
    nav ul li.spacer {height: 15px; width: 15px;}
    nav ul li span {position: absolute; top: 27px; left: 50%; transform: translate(-50%,-50%); transform-origin: right bottom;}
    nav ul li:hover {font-size: 40px; background-color: rgba(255,255,255,0);}
    nav ul li.no-hover:hover {background-color: transparent;}
    nav ul li.active { color: rgb(214,74,83);}
    nav ul li.active:before {content: ''; width: 0; height: 0; position: absolute; top: 100%; right:12px; border-top:20px solid rgba(60,60,60,.75); border-bottom: none; border-left: 20px solid transparent; border-right:20px solid transparent;}

/* TYPOGRAPHY */
    h1.title-text {font-family: 'norwester-reg', sans-serif; font-size: 4em; line-height: 1em; font-weight: 100; text-transform: uppercase; margin-top: 0; margin-bottom: 30px;}
      h1.title-text.half-margin { margin-bottom: 10px;}
    .body-text.size-override { font-size: 22px; line-height: 36px;}
    .title-shadow {text-shadow: 4px 3px 0 white; -webkit-text-shadow: 4px 3px 0 white;}
    h1.section-title {font-size: 45px; line-height: 50px; text-transform: uppercase; text-align: center; width: 100%; padding: 50px 0 25px; position: relative;}
    p.body-text {font-family: 'sofia_prolight', sans-serif; font-size: 15pt; line-height: 21pt; font-weight: 400; margin-bottom: 15px;}
      p.body-text.double-margin{margin-bottom: 14px;}
    a.text-link, a.text-link:visited {color:white; background-color: rgb(214,74,83); padding: 0 10px;}
      a.text-link:hover, a.text-link:active {color:white; background-color: rgb(230,90,83); text-decoration: none;}
    span.body-highlight {font-family: 'sofia_prolight', sans-serif; font-weight: 900; background-color:rgb(240,190,0);}
    .project-title {font-size: 30px; text-transform: uppercase; line-height: 30px; margin-bottom: 30px; text-align: center;}
    .client-title {font-size: 25px; text-transform: uppercase; line-height: 30px; margin-bottom: 30px; text-align: center; }

    .icon-portfolio { font-size: 30px; padding: 20px 25px; text-align: center; border-radius:50%; -webkit-border-radius:50%; border: 1px solid rgb(214,74,83); width:80px; height: 80px; line-height: 35px !important; color: rgb(214,74,83); margin-left: 50%; transform: translateX(-50%) scale(1,1); -webkit-transform: translateX(-50%) scale(1,1);}


    .project-links {margin: 30px auto 30px; text-align: center; list-style: none; padding: 0;}
    .project-links li {display: inline-block; margin-right: 20px; width:60px; height: 60px;  text-align: center; }
    .project-links li:last-child {margin-right: 0; }
    .project-links li a, .project-links li a:visited {display: block; height: 100% ; border: 2px solid rgb(214,74,83); color: rgb(214,74,83);}
    .project-links li a:hover { text-decoration: none; border: 2px solid rgb(230,104,103); color: rgb(230,104,103);}
    .project-links li a p{ font-size: 30px; line-height: 52px; transform: translate(2%);}
        img.portrait {position: absolute; left: -100px; bottom:0 !important; width: 1200px !important;}
      .portfolio-thumb { text-align: center; height: 60px; margin-bottom: 25px;}
      .portfolio-thumb a.thumb {width: 60px; height: 60px; background-size: 60px 60px; background-position: center; display: block; border: 2px #333 solid;}
      .portfolio-thumb a.thumb:hover {background-size: 100px 100px; border: 6px rgb(214,74,83) solid;}
      .gallery-start {margin-top: 50px;}

}