/*
font-family: 'Roboto', sans-serif;
font-family: 'Oswald', sans-serif;
font-family: 'Muli', sans-serif;
*/
/* Apply a natural box layout model to all elements: http://paulirish.com/2012/box-sizing-border-box-ftw/ */
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

.chromeframe {position: absolute; top: 0;}

/* Ok, this is where the fun starts.
-------------------------------------------------------------------------------*/
/* A Linux- and Windows-friendly sans-serif font stack: http://prospects.mhurrell.co.uk/post/updating-the-helvetica-font-stack */
body {font: 13px; }

/* Using local fonts? Check out Font Squirrel's webfont generator: http://www.fontsquirrel.com/tools/webfont-generator */

/* We like off-black for text. */
body, select, input, textarea {
	font-family: 'Muli', sans-serif;
	color:#313131;
}

.twitter-share-button{
	margin-bottom:-5px;
}

#mapPanel{
	width:100%;
	height:400px;
}

a:link,a:visited{
	text-decoration:none;
	color:#253678;
}

a:hover{
	text-decoration:underline;
	color:#253678;
}

html, body, #wrapper { height: 100%; }
body > #wrapper { height: auto; min-height: 100%; }

#wrapper{	
    position: relative;
	padding-bottom:70px;
	width:100%;
}
iframe.twitter-share-button{
	position:relative; top:6px;
}

img.pinterest{
	position:relative; top:6px;
}


/* Custom text-selection colors (remove any text shadows: http://twitter.com/miketaylr/status/12228805301) */
::-moz-selection{background: #fcd700; color: #fff; text-shadow: none;}
::selection {background: #fcd700; color: #fff; text-shadow: none;} 

/*	j.mp/webkit-tap-highlight-color */
a:link {-webkit-tap-highlight-color: #fcd700;} 

ins {background-color: #fcd700; color: #000; text-decoration: none;}
mark {background-color: #fcd700; color: #000; font-style: italic; font-weight: bold;}

/* Mozilla dosen't style place holders by default */
input:-moz-placeholder { color:#a9a9a9; }
textarea:-moz-placeholder { color:#a9a9a9; }

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */
*{
	color:#313131;
}

html,
button,
input,
select,
textarea {
    color: #222;
}

#page ul{
	list-style:outside;
	margin-left:20px;
	margin-bottom:20px;
}

#page div,#page p,#page li, #page td{
}

img.inline_right{
	float:right;
	margin-left:35px;
	margin-bottom:10px;
	width:24% !important;
	height:auto !important;
	border-bottom:solid 7px #253678;
}


/* ==========================================================================
   Author's custom styles
   ========================================================================== */
h1,h2,h3,h4,h5,h6{
	font-weight:300;
	font-family: 'Oswald', sans-serif;
}
h1{
	font-size:22px;
	margin-bottom:10px;
	color:#253678;
	line-height:22px;
}

h2{
	font-size:20px;
	color:#253678;
	margin-bottom:10px;
	font-weight:300;
}

h3{
	font-size:16px;
	font-weight:normal;
	color:#253678;
	margin-bottom:10px;
}

h4{
	font-size:13px;
	color:#253678;
	font-weight:bold;
}

p,div,td,li{
	font-size:15px;
	line-height:22px;
}

p{
	margin:0;
	padding:0;
	margin-bottom:10px;
}

p strong:first-child{
	color:#253678;
	font-weight:normal;
}

#copy p{
	margin-bottom:30px;
}

#header_container{
	width:100%;
	height:113px;
}

#header_container.home{
	position:absolute;
	top:0px;
	left:0;
	z-index:99;
}

#header_container.portfolio{
	z-index:100001;
	position:fixed;
	background-color:#FFF;
	top:0px;
}
header{
	height:133px;
	margin:0 auto 0;
	position:relative;
}

#container{
	margin:40px auto 20px;
	padding:0px;
	padding-bottom:-113px;
	overflow:hidden;
}

@media screen and (min-width: 56em) {
	#container{
		width:980px;
	}
	
	header{
		width:980px;
	}
}

@media screen and (max-width: 56em) {
	#container{
		width:100%;
	}
	
	header{
		width:100%;
	}
}

/** Page Area **/
div#page {
}

div#page #main{
	float:left;
	width:67%;
}

@media screen and (max-width: 56em) {
	div#page #main{
		width:100%;
	}
}

#container.no_sidebar div#page #main{
	width:100%;
}

div#page #main #copy{
}

#header_image{
	width:100%;
	height:333px;
	background-size:cover;
	background-position:50% 50%;
	position:relative;
}

@media screen and (max-width: 56em) {
	#header_image{
		height:200px;
	}
}

#page_title_container{
	width:100%;
	background-color:#3A4A85;	
}

#header_image #page_title_container{
	position:absolute;
	bottom:0;
}




/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}


form td,form td p{
	text-transform:uppercase;
	padding-bottom:10px;
	color:#253678;
}

input[type=text],textarea{
	border:solid 1px #A5AC80;
	background-color:#FFF;
}

#contact_form input[type=text]{
	width:90%;
}

#contact_form textarea{
	width:90%;
}

body{
	padding:0;
	margin:0;
	position:relative;
}

body#popup{
	background:#FFF;
	height:auto;
	padding-top:20px;
	box-sizing:border-box;
	padding-bottom:15px;
}

body#popup form{
	margin-bottom:25px;
}

body#popup h1{
	font-size:32px;
	line-height:40px;
	text-align:left;
}
html{
	background: no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}




#page ul.sidebar_gallery{
	list-style:none;
	margin:0;
	padding:0;
	margin-left:5px;
}

ul.sidebar_gallery li{
	list-style:none;
	margin:0;
	padding:0;
	margin-bottom:15px;
	margin-left:15px;
	float:left;
}

ul.sidebar_gallery li img{
	border:solid 4px #FFF;
}



.product_box{
	width:100%;
	position:relative;
	float:left;
	display:block;
}


.product_box img{
	display:block;
	float:left;
	height:100%;
	width:100%;
}

@media screen and (max-width: 56em) {
	.product_box{
		height:auto;
	}
	.product_box img{
		height:auto;
		max-height:100%;
	}
}


#copy .product_box h2{
	position:absolute;
	bottom:0px;
	background-color:#3A4A85;
	color:#FFF;
	line-height:40px;
	padding:0;
	margin:0;
	padding-left:10px;
	opacity:.9;
	width:100%;
	text-transform:uppercase;
}

#copy .product_box h2 a,#copy .product_box h2 a:hover{
	color:#FFF;
}

.product_body{
	padding:10px;
	margin-bottom:40px;
}

#page .product_body ul{
	list-style:none;
	padding:0;
	margin:0;
}

#page .product_body ul li{
	padding:0;
	margin:0;
	list-style:disc;
	margin-left:13px;
	margin-bottom:3px;
}

#page .product_body td{
	padding-right:10px;
}

.team_box{
	width:100%;
	position:relative;
}

.team_box img{
	display:block;
}

.team_box span.name{
	text-transform:uppercase;
	color:inherit;
	font-weight:bold;
}

.team_box h2{
	position:absolute;
	bottom:0px;
	background-color:#3A4A85;
	color:#FFF;
	line-height:40px;
	padding:0;
	margin:0;
	padding-left:10px;
	opacity:.9;
	width:100%;
	text-transform:uppercase;
}

.team_body{
	padding:10px;
	margin-bottom:40px;
}

ul#slide_list{
	list-style:none;
	margin:0;
	padding:0;
}

#slide_list li{
	list-style:none;
	margin:0;
	padding:0;
	margin-bottom:20px;
}

#slide_list li a:hover{
	text-decoration:none;
}

#slide_list li a.open img.up,#slide_list li a img.down{
	display:inline-block;
	margin-left:5px;
}

#slide_list li a.open img.down,#slide_list li a img.up{
	display:none;
	margin-left:5px;
}


#filter_container{
	
}

.portfolioFilter{
	background-color:rgba(255, 255, 255, 0.75);
	width:100%;
	position:fixed;
	top:0px;
	height:30px;
	z-index:100000;
}

.portfolioFilter ul{
	margin:0;
	padding:0;
	text-align:center;
}

.portfolioFilter ul li{
	display:inline-block;
	height:30px;
	line-height:30px;
}

.portfolioFilter ul li a:link{
	text-transform:uppercase;
	line-height:30px;
	display:block;
	padding-left:15px;
	padding-right:15px;
}

#project_viewer{
	width:100%;
	height:100%;
	position:fixed;
	padding-top:113px;
	box-sizing:border-box;
	left:0px;
	z-index:100;
	background-color:#FFF;
	display:none;
	padding-bottom:30px;
}

#project_form{
}

#project_form  input[type=text],#project_form textarea{
	width:100%;
}

#project_details h2{
	font-size:20px;
	margin-bottom:5px;
}

#project_details h3{
	font-size:15px;
	margin-bottom:10px;
	font-family: 'Muli', sans-serif;
}

#prev_arrow{
	position:absolute;
	z-index:10000;
	left:20px;
	top:200px;
	cursor:pointer;
}

#plus_button{
	position:absolute;
	z-index:10000;
	left:430px;
	top:4px;
	cursor:pointer;
	display:block;
	height:25px;
	width:26px;
	overflow:hidden;
}

#plus_button .minus{
}

#next_arrow{
	position:absolute;
	z-index:10000;
	left:20px;
	top:280px;
	cursor:pointer;
}

#project_details{
	position:fixed;
	bottom:-130px;
	width:100%;	
	background-color:#3A4A85;
	opacity:.9;
	height:160px;
	z-index:1000;
}

#project_details iframe{
	float:left;
	margin:0;
	padding:0;
}

iframe.twitter-share-button{
	position:relative;
	top:-1px;
}

#copy p.comment_links{
	margin-bottom:10px;
}

#copy p.author_info{
	margin-bottom:10px;
}

p.comment_links iframe.twitter-share-button{
	position:relative;
	top:5px;
}

#details_content *{
	color:#FFF;
}

#details_content a.project_inquiry{
	background-color:#FFF;
	display:block;
	line-height:26px;
	width:133px;
	height:26px;
	text-transform:uppercase;
	color:#253678;
	font-family: 'Oswald', sans-serif;
	font-size:14px;
	text-align:center;
}

#project_details #inner{
	width:980px;
	margin:0 auto 0;
}

#project_details #inner #detail_controls{
	height:30px;
	position:relative;
}

#prev_next{
	position:absolute;
	right:14px;
	top:4px;
	color:#FFF;
	font-family: 'Oswald', sans-serif;
	font-size:13px;
}

#prev_next a:link,#prev_next a:visited{
	color:#FFF;
}

#project_details a.close{
	color:#b7d332;
	position:absolute;
	right:0px;
	top:4px;
	font-size:13px;
	font-family: 'Oswald', sans-serif;
}

#project_slider{
	height:100%;
	width:100%;
}

#cycle-pager { 
    z-index: 500; position: absolute; left:0px; top:4px; overflow: hidden;
}
#cycle-pager span { 
    font-family: arial; font-size: 50px; width: 14px; height: 14px; 
    display: inline-block; color: #fff; cursor: pointer; margin-right:5px; 
}
#cycle-pager span.cycle-pager-active { color: #B7D332;}
#cycle-pager > * { cursor: pointer;}

#project_slider div.slide{
	height:100%;
	width:100%;
}

.slide{
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center center;
}



#portfolio
{
	width: 100%; /* 990px */
	overflow: hidden;
	margin-left:0; /* 15px */
	margin-top:113px;
}
.element
{
	width: 20%;/*33.333%; /* 300px */
	float: left;
	margin: 0; /* 15px 30px */
	position:relative;
	overflow:hidden;
}

.double
{
	width: 40%;/*33.333%; /* 300px */
	float: left;
	margin: 0; /* 15px 30px */
	position:relative;
}

.element div.caption{
	position:absolute;
	background-color:#253779;
	color:#FFF;
	opacity:0;
	top:0px;
	left:0px;
	padding:20px;
	padding-top:50px;
	font-size:20px;
	font-weight:bold;
	background-image:URL('/images/template/plus.jpg');
	background-repeat:no-repeat;
	background-position:20px 20px;
}

.element div.caption span{
	font-weight:normal;
	font-size:18px;
}

.element div.caption span *{
	color:#FFF;
}

.element img{
	margin:0;
	padding:0;
	max-width:auto;
	max-height:auto;
}

.element a{
	display:block;
	line-height:0px;
}

#portfolio .element{
	background-size:cover;
	background-position:center center;
	background-repeat:no-repeat;
}

#portfolio .caption{
	height:100%;
	width:100%;
}

@media all and (max-width: 600px) {
  #portfolio .element{
	  width:50%;
  }
  #portfolio .double{
	  width:100%;
  }
}

@media all and (max-width: 900px) and (min-width: 601px) {
  #portfolio .element{
	  width:33.3%;
  }
  #portfolio .double{
	  width:66.6%;
  }
}

@media all and (max-width: 1200px) and (min-width: 901px) {
  #portfolio .element{
	  width:25%;
  }
  #portfolio .double{
	  width:50%;
  }
}

@media all and (max-width: 1500px) and (min-width: 1201px) {
  #portfolio .element{
	  width:20%;
  }
  #portfolio .double{
	  width:40%;
  }
}

@media all and (min-width: 1501px) {
  #portfolio .element{
	  width:12.5%;
  }
  #portfolio .double{
	  width:25%;
  }
}





#hmp_project_slider .title{
	position:absolute;
	z-index:10000;
	bottom:0px;
	width:100%;
	background-color:#3A4A85;
	text-wrap:none;
	color:#FFF;
	line-height:128px;
	font-size:73px;
	text-align:center;
	opacity:.9;
	overflow:hidden;
	white-space:nowrap;
	font-weight:300;
}

#hmp_project_slider{
	width:100%;
	height:636px;
}

#hmp_project_slider div.slide{
	height:636px;
	width:100%;
}

#hmp_project_slider a{
	height:636px;
	width:100%;
	position:absolute;
	top:0px;
	left:0px;
	z-index:1000;
}

@media screen and (max-height: 52em) {
	#hmp_project_slider{
		width:100%;
		height:300px;
	}
	
	#hmp_project_slider div.slide{
		height:300px;
		width:100%;
	}
	
	#hmp_project_slider a{
		height:300px;
		width:100%;
		position:absolute;
		top:0px;
		left:0px;
		z-index:1000;
	}
	
	#hmp_project_slider .title{
		position:absolute;
		z-index:10000;
		bottom:0px;
		width:100%;
		background-color:#3A4A85;
		text-wrap:none;
		color:#FFF;
		line-height:64px;
		font-size:34px;
		text-align:center;
		opacity:.9;
		overflow:hidden;
		white-space:nowrap;
		font-weight:300;
	}
}

@media screen and (max-width: 56em) {
	#hmp_project_slider{
		width:100%;
		height:300px;
	}
	
	#hmp_project_slider div.slide{
		height:300px;
		width:100%;
	}
	
	#hmp_project_slider a{
		height:300px;
		width:100%;
		position:absolute;
		top:0px;
		left:0px;
		z-index:1000;
	}
	
	#hmp_project_slider .title{
		position:absolute;
		z-index:10000;
		bottom:0px;
		width:100%;
		background-color:#3A4A85;
		text-wrap:none;
		color:#FFF;
		line-height:64px;
		font-size:34px;
		text-align:center;
		opacity:.9;
		overflow:hidden;
		white-space:nowrap;
		font-weight:300;
	}
}

#hmp_project_slider .slide{
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center center;
}



#sec_project_slider{
	width:100%;
	height:275px;
}

#sec_project_slider div.slide{
	height:275px;
	width:100%;
}

#sec_project_slider .slide{
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center center;
}


form td{
	padding-right:10px;
}

form td input[type=text],form td textarea,form td select{
	width:100%;
}

@media only screen and ( max-width: 40em ) /* 640px */
{
    .element
    {
        width: 46.876%; /* 305px */
        margin-bottom: 0.938em; /* 15px */
    }
}
@media only screen and ( max-width: 20em ) /* 640px */
{
    #portfolio
    {
        width: 100%;
        margin-left: 0;
    }
        .element
        {
            width: 100%;
            margin-left: 0;
            margin-right: 0;
        }
}

		
		

.isotope,
.isotope .isotope-item {
  /* change duration value to whatever you like */
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
      -ms-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
      -ms-transition-property:     -ms-transform, opacity;
       -o-transition-property:      -o-transform, opacity;
          transition-property:         transform, opacity;
}



#review_form input[type=text],#review_form textarea{
	width:100%;
}

#email_signup input[type=text]{
	width:100%;
}


img#logo{
	float:left;
	margin-top:15px;
}

input[type=submit] {
	border:none;
	text-decoration: none;
	vertical-align: middle;
	padding:0;
	height:24px;
	margin-top:20px;
	font-size:17px;
	text-transform:uppercase;
	line-height:24px;
	padding-left:5px;
	padding-right:5px;
	color:#FFF;
	background-color:#3A4A85;
}





label.error,fieldset label.error {
	/* remove the next line when you have trouble in IE6 with labels in list */
	color: red;
	font-style: italic;
	clear:both;
	display:block;
}
div.error {
	/* remove the next line when you have trouble in IE6 with labels in list */
	color: red;
	font-style: italic;
}
input.error{ border:1px solid red; }
div.error { display: none; }

span.required{
	font-weight:bold;
	color: red;
}

span.requiredfield{
	font-size:10px;
	font-style:italic;
	color:#03bef3;
}

ul#reviews{
	list-style:none;
	margin:0;
	padding:0;
}

ul#reviews li{
	display:inline-block;
	width:42%;
	margin:0;
	padding:0;
	margin-right:10%;
	margin-bottom:20px;
}

ul#reviews li.right{
	margin-right:0;
}


#page_header{
	width:821px;
	height:237px;
	border:solid 8px #FFF;
	box-shadow: 0 0 6px #888888;
	-moz-box-shadow: 0 0 6px #888888;
	-webkit-box-shadow: 0 0 6px #888888;
	margin-bottom:20px;
}

h1.page_title{
	margin:0 auto 0;
	padding:0;
	color:#FFF;
	font-size:35px;
	line-height:58px;
	text-transform:uppercase;
}

@media screen and (min-width: 56em) {
	h1.page_title{
		width:980px;
	}
}

@media screen and (max-width: 56em) {
	h1.page_title{
		width:100%;
	}
	html{
		-webkit-text-size-adjust: none;
	}
}



a.title_button{
	font-size:20px;
	text-transform:none;
	display:block;
	color:#FFF;
	float:right;
	margin-right:40px;
}

a.title_button:hover{
	text-decoration:none;
}


#sidebar{
	width:29%;
	float:right;
}

@media screen and (max-width: 56em) {
	#sidebar{
		width:100%;
	}
}

.sidebar_item{
	margin-bottom:10px;
}

select.expiry{
	width:40%;
}

.sidebar_item ul{
	margin:0;
	padding:0;
	list-style:none;
}

.sidebar_item ul li{
	margin:0;
	padding:0;
	list-style:none;
}

.sidebar_item ul li a{
	color:#000;
}

h3.sidebar_title{
	background-image:URL('/images/template/sidebar_title.jpg');
	background-repeat:repeat-y;
	height:50px;
	line-height:50px;
	padding-left:20px;
	font-weight:700;
}

form#sidebar_search{
	margin:0;
	padding:0;
	height:50px;
	line-height:50px;
	font-weight:700;
	margin-bottom:10px;
}

form#sidebar_search label{
	display:inline-block;
	width:55px;
	color:#253678;
	font-weight:300;
	text-transform:uppercase;
	font-size:18px;
	position:relative;
	top:3px;
	font-family: 'Oswald', sans-serif;
}

form#sidebar_search input[type=text]{
	width:140px;
	margin-right:5px;
	line-height:20px;
	height:20px;
	background-color:#F0F0F0;
	border:none;
}

#sidebar_search input[type=image] {
	padding:0;
}

.sidebar_item h2{
	text-transform:uppercase;
}




#home_container{
	width:100%;
	z-index:1000;
}

#home_container #home_inner{
	width:980px;
	margin:0 auto 0;
	margin-top:30px;
	margin-bottom:30px;
}

@media screen and (max-width: 56em) {
	#home_container #home_inner{
		width:100%;
	}
}

#home_captions{
	margin-right:220px;
}

@media screen and (max-width: 56em) {
	#home_captions{
		margin:0;
	}
}

#home_captions a{
	background-image:URL('/images/template/sm_arrow.png');
	background-repeat:no-repeat;
	background-position:right;
	padding-right:8px;
}

#home_captions .caption{
	padding-right:25px;
	font-family: 'Oswald', sans-serif;
	line-height:24px;
	font-weight:normal;
	font-size:12px;
	float:left;
	width:25%;
}

@media screen and (max-width: 56em) {
	#home_captions .caption{
		width:100%;
		margin-bottom:20px;
	}
}

q{
	font-style:italic;
	text-transform:uppercase;
	font-size:24px;
	color:#2B378D;
	line-height:30px;
	font-family: 'Oswald', sans-serif;
	letter-spacing:2px;
}

h2.quote_name{
	text-align:right;
	font-size:20px;
	margin-top:-30px;
	text-transform:uppercase;
	padding-right:30px;
	font-family: 'Muli', sans-serif;
}

q:before, q:after {
    content: '"';
}

#home_captions .caption p{
	line-height:24px;
}

#home_captions .caption a{
	font-size:14px;
}

#home_inner h1{
	color:#4a4949;
	font-size:20px;
	margin-bottom:25px;
	font-weight:300;
}

#home_inner #quick_links{
	float:right;
	width:200px;
}



#quick_links a:link{
	height:25px;
	line-height:25px;
	border-top:solid 2px #253571;
	text-transform:uppercase;
	font-weight:normal;
	font-size:15px;
	display:block;
	width:150px;
	margin-bottom:25px;
	font-family: 'Oswald', sans-serif;
}

@media screen and (max-width: 56em) {
	#home_inner #quick_links{
		float:right;
		width:100%;
		clear:both;
	}
}


footer{
	position:absolute;
	bottom:0px;
	width:100%;
	height:52px;
}

footer #inner{
	width:980px;
	margin:0 auto 0;
	height:52px;
	line-height:20px;
	font-size:11px;
}

@media screen and (max-width: 56em) {
	footer{
		display:none;
	}
}

footer *{
	color:#4a4949;
	font-size:11px;
}

footer a:link,footer a:visited{
	text-transform:uppercase;
	margin-right:8px;
	color:#4a4949;
}



footer img#social{
	display:inline;
	position:relative;
	top:5px;
	margin-left:10px;
}


/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}