@import "css/reset.css";
@import "css/typography.css";
@import "css/layout.css";

@import url('https://fonts.googleapis.com/css?family=Montserrat');

body{
    font-family: 'Montserrat', sans-serif;
    background: url(images/bg.jpg) no-repeat top left;
    background-size: contain;
}

.container{ background: url(images/bottomgraphic.jpg) bottom left no-repeat; background-size: contain; }

header{ padding-bottom: 50px; position: relative; padding: 40px 0; }

header h1{

    font-size: 60px;
    color: #65879c;
    line-height:100%;
    font-weight: bold;
    text-align: left;
    padding: 0 50px ;
    text-transform: uppercase;

}

.cursor {
  font-weight: 100;
  -webkit-animation: 1s blink step-end infinite;
  -moz-animation: 1s blink step-end infinite;
  -ms-animation: 1s blink step-end infinite;
  -o-animation: 1s blink step-end infinite;
  animation: 1s blink step-end infinite;
}

@keyframes "blink" {
  from, to {
    color: transparent;
  }
  50% {
    color: #444444;
  }
}

@-moz-keyframes blink {
  from, to {
    color: transparent;
  }
  50% {
    color: #444444;
  }
}

@-webkit-keyframes "blink" {
  from, to {
    color: transparent;
  }
  50% {
   color: #444444;
  }
}

@-ms-keyframes "blink" {
  from, to {
    color: transparent;
  }
  50% {
    color: #444444;
  }
}

@-o-keyframes "blink" {
  from, to {
    color: transparent;
  }
  50% {
    color: #444444;
  }
}

header h1 .first{  }
header h1 .last{ font-size: 1.5em; color: #444444; }

article{ padding-bottom: 50px; position: relative; z-index:200; }
article .message{ font-size: 24px; color: #848484; text-align: center; padding: 60px 20px ; max-width: 650px; margin: auto; }
article h2{ color: #4f747d; font-size: 45px; position: relative; } 

article h2, article h3, article h4, article h5, article h6, article p{ padding-bottom: 15px; }

article .examples{ text-align: center; max-width: 1094px; margin: auto; }
article .examples li{
    display: inline-block;
    position: relative;

}


article .examples .title{ position: absolute; top: 0px; left: 0px; width: 100%; text-align: center; vertical-align: center; }

article .examples .image img{ 
    width: 353px;

    transition:  0.5s;
    -moz-transition:  0.5s;
    -ms-transition:  0.5s;
    -o-transition:  0.5s;
    -webkit-transition:  0.5s;
 }
 
 article .examples .small .image img{ width: 200px; }

 article .examples li.featured .image img{ width: 500px; }

article .examples li:hover .image img{
    position: relative;
    transform: scale(1.15);
    z-index: 4000;
}

footer{ padding: 0px 0; position: relative; background: #2f5065; padding-top: 150px; margin-top: -200px; }
footer .copyright{ font-size: 12px; color: #ccc; text-align: center; padding: 50px 0; }

header .social{ position: absolute; top: 20px; right: 90px; padding: 0; margin: 0; z-index: 1000; }
	.social li{ float: left; padding: 5px; margin: 0; list-style: none; }
	.social a{ height: 30px; width: 30px; display: block; -o-transition:.25s; -ms-transition:.25s; -moz-transition:.25s; -webkit-transition:.25s;  color: transparent; font-size: 1px; overflow: hidden; }
	.social .facebook a{ background: url(images/socialmedia/lite/Facebook.png) center center no-repeat; background-size: 30px 30px; }
	.social .twitter a{ background: url(images/socialmedia/lite/Twitter.png) center center no-repeat; background-size: 30px 30px; }
	.social .googleplus a{ background: url(images/socialmedia/lite/GooglePlus.png) center center no-repeat; background-size: 30px 30px; }
	
	footer .social{ position: absolute; top: 0px; right: 0px; padding: 0; margin: 0; z-index: 1000; }
	
	footer .social .facebook a{ background: url(images/socialmedia/dark/Facebook.png) center center no-repeat; background-size: 30px 30px; }
	footer .social .twitter a{ background: url(images/socialmedia/dark/Twitter.png) center center no-repeat; background-size: 30px 30px; }
	footer .social .googleplus a{ background: url(images/socialmedia/dark/GooglePlus.png) center center no-repeat; background-size: 30px 30px; }

	.social a:hover{ opacity: 0.5; }
	
#loadgraphics{ display: none; }

header .email{ padding: 0; margin: 0; position: absolute; top: 25px; right: 40px; z-index: 1000; }
	.email a{ -o-transition:.25s; -ms-transition:.25s; -moz-transition:.25s; -webkit-transition:.25s; color: #444444; padding-left: 40px; padding-top: 6px; display: block; height: 28px; background: url(images/socialmedia/lite/Email.png) left top no-repeat; background-size: 30px 30px; font-size: 14px; }
	.email a:hover{ opacity: 0.5; }
	
	footer .email a{ background: url(images/socialmedia/dark/Email.png) left top no-repeat; }