/* Thomsoon.com - OnePage CSS Responsive
-- version 1.0
-- Copyright (c) 2014 Thomsoon.com
-- licensed under the MIT
--
-- http://www.thomsoon.com/
--
*/


/* iPad (portrait) */
@media (min-width: 100px) and (max-width: 600px) {
/* About us */

.about-us h1{
  font-size:42px;
    margin-left:auto;
  margin-right:auto;
    width: 75%;
  max-width: 590px;
  color:black;
  text-align:center;
  letter-spacing: -.03em;
  line-height:1.2em;
  margin-bottom:-.6em;
  font-family:  'proxima-nova-bold', sans-serif;
    -webkit-font-smoothing: subpixel-antialiased!important;
}

.about-us h2{
    margin-left:auto;
  margin-right:auto;
  text-align:center;
  padding-top:11vh;
  width: 75%;
  max-width: 590px;
    font-size:38px;
  color:black;
  text-align:center;
  letter-spacing: -.03em;
  line-height:1.2em;
      margin-bottom:-.6em;
  font-family: 'proxima-nova-bold', sans-serif;
    -webkit-font-smoothing: subpixel-antialiased!important;
}

.about-us p{
  margin-left:auto;
  margin-right:auto;
  text-align:center;
  margin-bottom:11vh;
  font-size:15.8px;
  width: 75%;
  max-width: 586px;
  color: rgba(33,33,33,.87);
  letter-spacing: .037em;
  line-height:1.7em;
  text-wrap: balanced;
  font-family: 'proxima-nova-semibold', sans-serif;
    -webkit-font-smoothing: subpixel-antialiased!important;
    
}

.about-us{
  position:relative;
  width:100%;
  background:#fffbf7;
  z-index:10;
}

.about-us .content{
  position:relative;
  width:100%;
  margin: 0 auto;
}


.animated-underline {
        width: 100px;
      height: 3px;
      background: #fffbf7;
      margin-left: auto;
      opacity:.8;
      margin-right: auto;
      margin-top:38px;
      margin-bottom: -1.35em;
}




.about-me .animated-underline{
  background-color: rgba(33,33,33,.95);
}

.about-me p{
  color: rgba(33,33,33,.87);
}



.graphic-design {
  background-color: #115c63;
  height:98vh;
  }
  /* background: linear-gradient(309deg, #115c63, #0e5151, #1b6d6d, #217573);
  background-size: 800% 800%;
  overflow:hidden;
  animation: GradientAnimation 47s ease infinite; 
  width: 100%;
  overflow: none;
  position: relative;
}
@keyframes GradientAnimation {
  0% {
    background-position: 0% 46%;
  }
  50% {
    background-position: 100% 55%;
  }
  100% {
    background-position: 0% 46%;
  }
}
*/

.graphic-design h2{
  color: #fffbf7;
}

.graphic-design p{
  color: #fffbf7;
}

.web-bg{
  height:98vh;
  margin-top:-35vh;
  background-color: #ffd24a;
}
.web-design {
  height:98vh;
  margin: 0 auto;
  background-color: #ffd24a;
}

.web-design .animated-underline{
  background-color: rgba(33,33,33,.95);
}

.web-design h2{
  color: rgba(33,33,33,.95);
}

.web-design p{
 color: rgba(33,33,33,.9);
}


.ui-design {
  margin-top: -35vh;
  height:98vh;
  background-color: #80a058;
}

.ui-design h2{
  color: #fffbf7;
}

.ui-design p{
 color: #fffbf7;
}

}



@media (min-width: 100px) and (max-width: 750px) {
  
  .text p {
    visibility: hidden;
  }
  
.welcome-to {
      bottom: 40%;
  left: 2%;
  font-size: 14vw;
  letter-spacing: -0.8vw;
  text-align: left;
  color: #89463d;
  line-height: 14vh;
  font-family: Helvetica Neue bold,Helvetica,Arial,sans-serif;
  font-weight: bolder;
  position: absolute;
  z-index: 99999;
  opacity: 0.9;
	      animation-delay: 6s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: welcome-slide1;
      animation-duration: 4s;
                -webkit-transition: all 0.25s ease-in-out;
	-moz-transition: all 0.25s ease-in-out;
	-ms-transition: all 0.25s ease-in-out;
	-o-transition: all 0.25s ease-in-out;
	transition: all 0.25s ease-in-out;
  }
  
  @keyframes welcome-slide1 {
  0% { transform: translateX (20%); opacity:0; }
  100% { transform: translateX(2%); opacity:1; }
}

.mike-brown {
      bottom: 25%;
  left: 2%;
  font-size: 14vw;
  letter-spacing: -0.8vw;
  text-align: left;
  color: #89463d;
  line-height: 14vh;
  font-family: Helvetica Neue bold,Helvetica,Arial,sans-serif;
  font-weight: bolder;
  position: absolute;
  z-index: 99999;
  opacity: 0.9;
	      animation-delay: 6.75s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: welcome-slide1;
      animation-duration: 3.9s;
                -webkit-transition: all 0.25s ease-in-out;
	-moz-transition: all 0.25s ease-in-out;
	-ms-transition: all 0.25s ease-in-out;
	-o-transition: all 0.25s ease-in-out;
	transition: all 0.25s ease-in-out;
  }
  
  @keyframes welcome-slide1 {
  0% { transform: translateX (20%); opacity:0; }
  100% { transform: translateX(2%); opacity:1; }
}

.design {
      bottom: 10%;
  left: 2%;
  font-size: 14vw;
  letter-spacing: -0.8vw;
  text-align: left;
  color: #89463d;
  line-height: 14vh;
  font-family: Helvetica Neue bold,Helvetica,Arial,sans-serif;
  font-weight: bolder;
  position: absolute;
  z-index: 99999;
  opacity: 0.9;
	      animation-delay: 7s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      animation-name: welcome-slide1;
      animation-duration: 3.8s;
                -webkit-transition: all 0.25s ease-in-out;
	-moz-transition: all 0.25s ease-in-out;
	-ms-transition: all 0.25s ease-in-out;
	-o-transition: all 0.25s ease-in-out;
	transition: all 0.25s ease-in-out;
  }
  
  @keyframes welcome-slide1 {
  0% { transform: translateX (20%); opacity:0; }
  100% { transform: translateX(2%); opacity:1; }
}
  
}

@media (min-width: 750px) {
   .text h1 {
    visibility: hidden;
    opacity: 0;
    filter: alpha(opacity=0);
  }
}

@media (min-width: 100px) and (max-width: 1077px) {
  
  .art-content {
  margin: 0 auto;
  width:90vw;
    max-width: 1245px;
    margin-top:130px;
}

.artwork {
      margin-left: auto;
  margin-right: auto;
}

.artwork img {
    display: block;
    margin-left: auto;
  margin-right: auto;
  max-width: 90%;
  margin-bottom: 25px;
  max-height: 750px;
}

.description {
  float: none;
  margin-left: auto;
  margin-right: auto;
      padding-right: 0px;
      width: 60vw;
  min-width:310px;
    margin-bottom:25px;
    
}
.description h2 {
  text-align: center;
  margin-top:0px;
  font-family: 'proxima-nova-bold', sans-serif;
  font-size:23px;
  line-height:1.2;
  color: rgba(33,33,33,.95);
  letter-spacing:.03em;
  position:relative;
}

.description p {
    text-align: center;
    font-size: 15.4px;
    font-family: 'proxima-nova-semibold', sans-serif;
  color: rgba(33,33,33,.74);
  letter-spacing: .037em;
  line-height:1.7em;
    margin-top: 15px;
}

}

@media (min-width: 100px) and (max-width: 560px) {
  
  .next-previous{
  width:70vw;
  position:relative;
  margin:10px auto 0px;
  color:#333333;
  background:none;
}

  .previous{
  width:110px;
}
  
  .next{
  width:110px;
  
}

}

  /* FOOTER 2 Columns */
@media (min-width: 683px) and (max-width: 953px) {
  
#footer-container {
  position: absolute;
  width:100%;
  height: 82px;
  background-color: #666160;
}

.footer-inset {
  margin-top: 25px;
  width:95%;
  max-width:1100px;
  margin-left:auto;
  margin-right: auto;
}

.footer-inset h3{
      text-align: center;
    font-family: 'proxima-nova-bold', sans-serif;
    font-size: 14px;
    color: #fffbf7;
    letter-spacing: .02em;
    margin-bottom: 5px;
}

.footer-inset p {
        text-align: center;
    margin-top: 0px;
    font-family: 'proxima nova', sans-serif;
    font-size: 12px;
    color: #fffbf7;
    letter-spacing: .02em;
}


.footer-email {
  float: left;
  margin-left:5%;
}

.footer-resume {
  margin-left: auto;
  margin-right: auto;
  display: block;
  
}

.footer-backtotop{
  margin-top:8px;
    float: right;
  margin-right:9%;
    display: block;
}
  
}


  /* FOOTER Single Column*/
@media (min-width: 20px) and (max-width: 682px) {
  
#footer-container {
  position: absolute;
  width:100%;
  height: 82px;
  background-color: #666160;
}

.footer-inset {
  margin-top: 25px;
  width:100%;
  max-width:1100px;
  margin-left:auto;
  margin-right: auto;
}

.footer-inset h3{
      text-align: center;
    font-family: 'proxima-nova-bold', sans-serif;
    font-size: 13px;
    color: #fffbf7;
    letter-spacing: .02em;
    margin-bottom: 5px;
}

.footer-inset p {
        text-align: center;
    margin-top: 0px;
    font-family: 'proxima nova', sans-serif;
    font-size: 11px;
    color: #fffbf7;
    letter-spacing: .02em;
}


.footer-email {
  float: left;
  margin-left:3%;
}

.footer-resume {
  margin-left: auto;
  margin-right: auto;
  display: block;
  
}

.footer-backtotop{
  margin-top:8px;
    float: right;
  margin-right:6%;
    display: block;
}
  
}