/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/

/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Media Queries
	#Font-Face */

/* #Site Styles
================================================== */
*,p{
    font-family: 'Roboto', sans-serif;
    color:#285567;
}
a{
    text-decoration:none;
    font-family: 'Roboto Condensed', sans-serif;
}
a:hover, a:active{
    text-decoration:underline;
}
h1, h2, h3, h4, h5, .topbar .links a{
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    color:#285567;
}
body{
    border-left:4px solid #e0ebed;
    border-right:4px solid #e0ebed;
    background-color:#f3f8fc;
}
ul, ul li{
    font-family: 'Roboto', sans-serif;
    line-height:21px;
    font-size:14px;
    padding:0;
    margin:0;
}
ul li:before{
    content: "\2730 \020";
}
h4, h5{
    font-weight:500;
    font-size:14px;
    line-height:21px;
    margin:0;
}
h4{
    font-size:16px;
    font-family: 'Roboto', sans-serif;
    color:#086762;
    line-height:19px;
}
h5{
    margin-bottom:7px;
    font-family: 'Roboto', serif;
    color: rgb(131, 159, 165);
}

.topbar{
    margin-top:40px;
}
.topbar .links{
    line-height:50px;
    text-align:right;
    float:right;
    padding-right:60px;
}
.topbar .links a{
    margin-left:40px;
}
.topbar hr{
    margin: 0 60px;
}
.contentwrap{
    margin-top:10px;
    padding-top:0px;
    background-color:#f3f8fc
}
.contentwrap p, li{
    color:rgb(86, 117, 124);
}
.contentwrap strong{
    color:#11aea6;
}
.contentwrap .qrbox{
    text-align:right;
}
.contentwrap .qrbox p{
    font-size:80%;
}
.contentwrap a{
    color: #11aea6;
    font-size:14px;
    font-weight:bold;
}
.contentwrap .qrbox img, .contentwrap .qrbox div{
    margin-left:20px;
    vertical-align:middle;
}
.contentwrap .container{
    padding-top:10px;
}
.content{
    -ms-transition:all 1s ease;
    -moz-transition:all 1s ease;
    -webkit-transition:all 1s ease;
    -o-transition:all 1s ease;
    transition:all 1s ease;
    opacity:0;
    -webkit-transform: matrix(0.290,-0.147,0.131,0.036,244.410,-282.579);
    -moz-transform: matrix(0.290,-0.147,0.131,0.036,244.410px,-282.579px);
    -ms-transform: matrix(0.290,-0.147,0.131,0.036,244.410,-282.579);
    -o-transform: matrix(0.290,-0.147,0.131,0.036,244.410,-282.579);
    transform: matrix(0.290,-0.147,0.131,0.036,244.410,-282.579);
}
.content.visible{
    opacity:1;
    -webkit-transform: matrix(1,0,0,1,0,0);
    -moz-transform: matrix(1,0,0,1,0px,0px);
    -ms-transform: matrix(1,0,0,1,0,0);
    -o-transform: matrix(1,0,0,1,0,0);
    transform: matrix(1,0,0,1,0,0);
}
.container{
    padding-bottom:40px;
    background-color:white;
    margin-top:-40px;
    padding-top:40px;
}
.boast{
    padding-right:60px;
}


/* circle zoom thing
-------------------------------------------------- */
.launcher{
   position:relative;
}
.circle_wrapper{
   position:absolute;
   top:0;
   left:0;
}
.circle_wrapper .circle{
   position:absolute;
   top:-2490px;
   left:-2460px;
   display:block;
   height: 5000px;
   width: 5000px;
   background-color: #11aea6;
   border-radius: 50%;
   display:none;
   z-index:1000;
}
.circle_wrapper.shrunk .circle{
   display:block;
   animation: shrinkDown .5s;
   transform: scale(0);
}
.circle_wrapper.expanded .circle{
   display:block;
   animation: growUp 1s;
}
@keyframes growUp {
  0%  { transform: scale(0); }
  100% { transform: scale(1); }
}
@keyframes shrinkDown {
  0%  { transform: scale(1); }
  100% { transform: scale(0); }
}


/* slideshow
-------------------------------------------------- */
.slideshow_scaffold{
    display:none;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index:1001;
}
.slideshow_scaffold.teased{
    display:block;
    opacity:.01;
}
.slideshow_scaffold.visible{
    display:block;
}
.slideshow_shape{
    position: relative;
    top: 50%;
    transform: perspective(1px) translateY(-50%);
}
.slideshow_shape:before{
    display: block;
    content: "";
    width: 100%;
    padding-top: 64.25%;
}
.slideshow_shape .content{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    text-align:center;
}
.slideshow_shape .content button{
    z-index:1500;
    width:40px;
    height:40px;
}
.slideshow_shape .content button.slick-prev:before, .slideshow_shape .content button.slick-next:before{
    font-size:40px;
    box-shadow: 2px 2px 26px 0px rgba(0,0,0,0.60);
    border-radius:20px;
    background-color:rgba(0,0,0,0.4);
}
.slideshow_shape .content button.slick-prev{
    left:5%;
}
.slideshow_shape .content button.slick-next{
    right:5%;
}
.slideshow_shape .content button{
}
.slideshow_shape .close{
    position:absolute;
    top:100%;
    right:5%;
    color:white;
    font-size:30px;
    font-weight:bold;
}
.slideshow_shape .close:hover{
    text-decoration:underline;
}
.slick-dots li button:before{
    color:white;
}
.qrbox{
    position:absolute;
    top:0px;
    right:50px;
}


/* maybe the extras feels like trying too hard
================================================== */
.extras{
    display:none;
}

/* #Page Styles
================================================== */

.summary{
    margin-top: 20px;
}

/* #Media Queries
================================================== */

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {
        .container{
            width:90vw;
        }
        .container .offset-by-one {
            padding-left:2vw;
            padding-right:2vw;
        }
        .topbar hr{
            margin: 0 2vw;
        }
    }

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
        .contentwrap .qrbox{
            display:none;
        }
        .summary{
            margin-top: 10px;
        }
    }

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {
    }

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {
        p{
            color:red;
        }
    }


/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */

/*	@font-face {
	    font-family: 'FontName';
	    src: url('../fonts/FontName.eot');
	    src: url('../fonts/FontName.eot?iefix') format('eot'),
	         url('../fonts/FontName.woff') format('woff'),
	         url('../fonts/FontName.ttf') format('truetype'),
	         url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
	    font-weight: normal;
	    font-style: normal; }
*/