/* Color Palette
Green: #99CC33;
Teal: #33CCCC;
Charcoal: #333333;
light Grey: #999999;
 */

 /*---------------------------------------Animations  ----------------------------------------------*/

#ray {
	position: absolute;
	top: 385px;
	left: 707.5px;
}

#large-geo, #ray, #contact_geo, #about_inner_cog {
		-webkit-animation: rotation 35s infinite linear;
}

@-webkit-keyframes rotation {
		from {
				-webkit-transform: rotate(0deg);
		}
		to {
				-webkit-transform: rotate(359deg);
		}
}

#med-geo, #green_single, #about_large_geo {
		-webkit-animation: rotation-back 30s infinite linear;
}
#green_single {
	position: absolute;
	left: 1226px;
	top: 290px;
}

#med-geo {
	position: absolute;
		top: 426px;
		left: 957px;

}

@-webkit-keyframes rotation-back {
		from {
				-webkit-transform: rotate(359deg);
		}
		to {
				-webkit-transform: rotate(0deg);
		}
}
.rotate-hovers {
  cursor: pointer;
  transition: 15s;
}

.rotate-hovers:hover {
  transform: rotate(360deg);
}


  @keyframes colorchange {
    from {background-color:  #99CC33;}
    to{background-color: #333333;}
  }

/* ******************************  Element Styles ************************************* */

body {
	background-color: #333333;
	font-family: 'Open Sans','Average', serif !important;
        animation: colorchange 2.5s both;
        width: 100%;
        margin: 0;
        padding: 0;
}

    footer a {text-decoration: none; color: white;}
    footer a:hover, footer a:active, footer a:focus {color: #99CC33;}    
    footer.main-foot {width: 100%; margin-top: 50%;}
    footer.about-footer {padding-top: 18%;}
    footer.about-footer a:hover {color: #33CCCC;}
    footer.contact-footer a:hover {color: #333333;}
    .header, footer p {font-size: 1.5em; text-align: center; color: #fff;}
    .header.main p {color: #0DC4C2;}
    h2, h3, h4, h5, h6 {font-family: 'Fjalla One', sans-serif;}
    img {max-width: 100%;}
    section#landing{ width: 100%; margin: 0 auto;}
    section#about {width: 100%;}
    main {width: 100%;}    
    overflow-y: hidden;

/* ************************* Landing Page Images ************************************ */
    img {max-width: 100%;}
  	.logo_img img:nth-child(1) {position: absolute; top: 205px; left: 330px;}
  	.logo_img img:nth-child(2) {position: absolute; top: 190px; left: 635px;}
  	
    .logo_img img:nth-child(3) {
    position: absolute; 
    top: 205px; 
    left: 1040px; 
  	animation-duration: 0.5s; 
    animation-iteration-count:  infinite;
    animation-timing-function: 	  linear;
}
  
    #landing {
    min-height: 100vh !important;
    }

    div.portrait {
    position: relative;
    left: -11.5%;
    }

  /* ************************** About Page Styles ************************************** */    

    #about h4 {
        text-align: center;
        margin-top: 2em;
      }

    #about {

      min-height: 600px;
      width: 100%;
        }
    
    .padding-4 {
         margin: 5% 20% 5% 20%;
         padding-left: 2%;
      }

  	article.about {
  		min-height: 1000px;
  		width: 50%;
  		background-color: #99CC33;
  		display: inline-block;
  		
  	  	}

  	aside.about {
  		min-height: 1000px;
  		width: 50%;
  		background-color: #ffffff;
  		float: left;
  		color: #333333;
  	  	}
    aside.about h4 {
      margin-bottom: .5em;
    }

  .pure-g.about {
      padding-left: 8%;
      padding-right: 6%;
  }

    aside.about > div { 
      padding: .5em 0 .5em 1em; 
      text-align: left !important;
  }    
  	
  .intro.pure-u-1 p, h3{
    padding-right: 4.5em;
    padding-left: 2.5em;
  }

  .intro.pure-u-1 h3{
    text-align: center;
    padding-top: 2em;
  }


  div.centered {
 	  margin: auto;
 	  padding-top: 12%; 
 	  width: 50%;
    text-align: center;
 } 	

  #work {
    margin-top: 2em;
}
   .work.intro.pure-u-1 p {padding-left: 2em; padding-right: 2em;}
    .work.intro.pure-u-1 h5:first-of-type {margin-top: 4em}
    .work.idol.pure-u-1 h5:first-of-type {margin-top: 4em !important;}
    .patternlab {margin: auto;} 
    .patternlab img {padding-left: 15%;}
    .patternlab p {padding-left: 32%;}
  /* ************************** Contact Page Styles ************************************** */  
    .custimg p {text-align: center; padding-left: 2em;}

    .custimg img {margin-left: 2.75em;}
 
    .custimg a {text-decoration: none;}


    footer.contact-footer { padding-top: 2%;}

 
    
    article.contact {
      min-height: 616px;
      width: 50%;
      background-color: #fff;
      display: inline-block;
      color: #333333;
      font-size: 1.5em;
      
        }

  article.contact a {text-decoration: none; color: #333333;}


  aside.contact {
      min-height: 616px;
      width: 50%;
      background-color: #33CCCC;
      float: left;
      color: #333333;
      text-align: center;
 }

    .pure-g.contact {
      padding-left: 5%;
}

    .contact button {
      background-color: #00d0CB;
      border-radius: 0 10px;
      border: none;
      padding: 10px;
      color: #fff; 
      font-size: .8em;
}

    article.contact p {font-size: .8em;}

    .contact button a {color: #fff;}

    .contact button:hover {background-color: #98CB36; color: #fff;}

/* -------------------------------------Class Styles -----------------------------------*/
      div.clearfix {
        clear: both;
      }


 
 /* ---------------------------------- Scroll CSS -------------------------------------- */
  	
  	aside.about::-webkit-scrollbar {
    width: .85em;
}
 
aside.about::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(13, 196, 194,0.3);
}
 
aside.about::-webkit-scrollbar-thumb {
  background-color: rgba(50, 53, 52,0.3);
  outline: 1px solid slategrey;
}
  	
  	
  	aside.about {

  		overflow-y: auto;
  		height: 940px;

  	}
  	::-webkit-scrollbar { 
    display: block; 
}

  	#about-title {
  		max-width: 100%;
  	}

  	#about_large_geo {
  		max-width: 100%;
    	}

/* ---------------------------- Pure Classes ------------------------------------------- */
  .pure-g [class*=pure-u] {
    font-family: 'Open Sans','Average', serif !important;
}



/* ----------------------------- Media Queries  --------------------- ----------- */


@media only screen and (min-device-width : 320px) and (max-device-width : 760px) {
 
 div.centered {width: 70%; padding-top: 25%;}
 .main-foot p {font-size: 1.5em !important;}
 .logo_img img:nth-child(1){display: none;}
 .logo_img img:nth-child(3){display: none;}
 .logo_img img:nth-child(2){position: inherit;} 
 img#ray {display: none;} 
 img#med-geo {display: none;}
 img.rotate-hover {display: none;}
  #green_single {display: none;}
  article.about {width: 100%;}
  aside.about {width: 100%;}
  article.contact {width: 100%; min-height: 0;}
  aside.contact {width: 100%; min-height: 697px;}
  footer.contact-footer {padding-top: 10%;}
  footer.about-footer {padding-top: 10%;}
  .portrait {display: none;}
  #landing {min-height: 0;}
  .intro.pure-u-1 p {padding: 0 0 0 1em;}
  .intro.pure-u-1 h3 {padding: 0;}
  header {margin-left: -.6em;}
  .pure-g.about {padding-left: 16%;}
  .work.intro.pure-u-1 h5 {text-align: center;}
  main {min-width: 108%;}
  header p {padding: 0 .75em;}
  div.pure-u-1.contact {padding-bottom: 2.5em;}
  #landing {min-height: 100vh !important;}
  #about-title {padding-bottom: 20%;}
    .patternlab img {padding-left: 7%;}
    .patternlab p {padding-left: 28%;}
    }



@media only screen and (min-device-width : 1024px) and (max-device-width : 1366px) {
 footer.main-foot {margin-top: 50%;}
 .logo_img img:nth-child(1){display: none;}
 .logo_img img:nth-child(3){display: none;}
 .logo_img img:nth-child(2){position: inherit; width: 210%;} 
 img#ray {display: none;} 
 img#med-geo {display: none;}
 #green_single {display: none;}
 img.portrait {width: 30%;}
.pure-g {padding: 0 10em;}

}

@media only screen and (min-device-width : 1024px) and (max-device-width : 1100px) {
footer.main-foot p {font-size: 25px !important;}

}


@media only screen and (min-device-width : 1550px) and (max-device-width : 2000px) {

.custimg img {margin-left: 5.5em;}
.custimg p {padding-left: 0;}
div.portrait {left: -9.75%;}
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
 .logo_img img:nth-child(1){display: none;}
 .logo_img img:nth-child(3){display: none;}
  img#ray {display: none;} 
 img#med-geo {display: none;}
 img.rotate-hover {display: none;}
  #green_single {display: none;}
 .logo_img img:nth-child(2){position: inherit; max-width: 110%;}
  article.about { width: 100%; min-height: 0; }
  aside.about {width: 100%;}
  article.contact {width: 100%; min-height: 0;}
  aside.contact {width: 100%; min-height: 0;}
  footer.contact-footer {padding-top: 0}
}