/*  ==========================================================================
    Andy Hau
    Author: Alchemy Digital
    ========================================================================== */


html{
}

body{
    margin: 0;
    padding: 60px 0 0;
    line-height: 1.3;
    color: #222;
    overflow-x: hidden;
	font-family: "brandon-grotesque", Helvetica, Arial ,sans-serif; 
	font-style: normal; 
	font-weight: 300;
	font-size: 16px;
}

::-moz-selection { background:#eee; }
::selection { background:#eee; }

/*  ==========================================================================
    Type
    ========================================================================== */

h1, h2, h3, h4, h5, h6{
	margin: 1.5em 0 .25em;
	font-weight: 700;
	line-height: 1em;
	letter-spacing: .02em
}

h1{
	margin: 0 0 .2em;
	font-size: 2.2em; 
	letter-spacing: .05em;
}
/*
h1:after{
	content: ' ';
	border-bottom: solid 2px #222;
	width: .75em;
	display: block;
	margin: 0 0 .33em;
	padding: 0 0 .33em;
}*/

h2{
	font-size: 1.75em;
	font-weight: 300;
}

h3{
	font-size: 1.5em;
}

h4{
	font-size: .88em;
}

.leader{ font-size: 1.2em; line-height: 1.2; letter-spacing: .015em;  }

p{ margin: 0 0 1em; }
ul{ margin: 0 0 1em; }
ol{ margin: 0 0 1em; }


.sml{ font-size: .75em; }

.bold{ font-weight: 700; }

b,
strong{ font-weight: 700; }
em,
i{ font-style: italic; }

@media only screen and (min-width:400px){
	
}

@media only screen and (min-width:500px){
	h1{ font-size: 2.5em; }
	.leader{ font-size: 1.4em; }
}

@media only screen and (min-width:700px){
	body{ font-size: 17px; padding: 70px 0 0; }
	h1{ font-size: 2.75em; }
	.leader{ font-size: 1.5em; line-height: 1.15; }
}

@media only screen and (min-width:800px){
	body{ font-size: 18px; }
}

@media only screen and (min-width:1000px){
	h1{ font-size: 3.25em; }
	.leader{ font-size: 1.6em; }
}

@media only screen and (min-width:1200px){
	h1{ font-size: 3.5em; }
	.leader{ font-size: 1.75em; }
}

@media only screen and (min-width:1400px){
	body{ font-size: 20px; }
}

/*  ==========================================================================
    general styles
    ========================================================================== */

.bd{
	margin: 0 7.14%;
	position: relative;
}
.bd:after { content: " "; height: 0; visibility: hidden; clear: both; display: block; }

.black{ color: #222; }
.lightgrey{ color: #797979; }
.jade{ color: #2ad2b0; }
.rev { color: #fff; }

a{
	color: #2ad2b0;
	text-decoration: none;
}

a .fa{ 
	padding: 0 .5em 0 0; 
	position: relative;
}

a:hover{ text-decoration: underline; }

a:hover .fa{ 
	-webkit-animation: link-movement .5s infinite ease-in-out; 
       -moz-animation: link-movement .5s infinite ease-in-out; 
            animation: link-movement .5s infinite ease-in-out;  
	
}

.textbtn{
	font-weight: 700;
}

.textbtn:hover{ text-decoration: underline; }

.btn{
	display: inline-block;
	background: #222;
	border: solid 1px #222;
	color: #fff;
	padding: .75em 1.3em;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	font-weight: 700;
	position: relative;
	
}

.paratag{
	margin: 0 0 .25em;
	padding: .3em 1em;
	background: #eee;
	display: inline-block;
}

.para{
	-webkit-transform: skew(-20deg);
	   -moz-transform: skew(-20deg);
	     -o-transform: skew(-20deg);
	
}

.para__inner{
	position: relative;
	display: inline-block;
	-webkit-transform: skew(20deg);
	   -moz-transform: skew(20deg);
	     -o-transform: skew(20deg);
}

.btn:hover{
	background-color: #2ad2b0;
	border-color: #2ad2b0;
	text-decoration: none;
}

.btn--jade{ background-color: #2ad2b0; border-color: #2ad2b0; }
.btn--jade:hover{ color: #2ad2b0; background-color: #fff; }

.margin-notop{
	margin-top: 0;
}

/*  ==========================================================================
    siteheader
    ========================================================================== */

.siteheader{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	line-height: 40px;
	-webkit-transform: translate3d(0, 0, 0); 
	letter-spacing: .03em;
}

.siteheader a{ color:#222; }
.siteheader a:hover{ color:#2ad2b0; text-decoration: none; }

.siteheader__bd{ 
	position: relative;
	z-index: 10;
	padding: 10px 0; 
	height: 40px;
}

.sitename{
	font-size: 1em; 
	text-transform: uppercase;
	display: inline-block;
	margin: 0;
	letter-spacing: 0;
}

.sitename:after{ display: none; }

.sitedescription{
	display: none;
	margin-left: .75em;
}

.sitenavtoggle{
	display: block;
	float: right;
}

.sitenavtoggle .fa{
	margin: 0 0 0 .33em;
	-webkit-transition: transform 200ms ease-in-out 0s;
       -moz-transition: transform 200ms ease-in-out 0s;
			transition: transform 200ms ease-in-out 0s;
}

.sitenavopen .sitenavtoggle .fa{
	-webkit-transform: rotate(180deg);
	   -moz-transform: rotate(180deg);
	    -ms-transform: rotate(180deg);
            transform: rotate(180deg);
}

/*
// Sitelogo
*/

.sitelogo{
	width: 60px;
	position: relative;
	display: block;
	position: absolute;
	left: 50%;
	top: 0;
	margin: 0 0 0 -30px;
	z-index: 20;
	-webkit-transform: translate3d(0, 0, 0); 
	-webkit-transition: background 150ms ease-out 0s;
	   -moz-transition: background 150ms ease-out 0s;
			transition: background 150ms ease-out 0s;
	background: rgba(0,0,0,.1);
}

.no-rgba .sitelogo{ background: #222; }

.sitelogo:hover{ background: rgba(42,210,176, 1); }
.no-rgba .sitelogo:hover{ background: #2ad2b0; }


.sitelogo__img{
	width: 100%;
	display: block;
}

.siteheaderbg{
	position: absolute;
	background: #fff;
	top: 0;
	bottom: 0;
	height: 100%;
	width: 50%;
}

.siteheaderbg--left{ left: -30px; }
.siteheaderbg--right{ right: -30px; }

@media only screen and (min-width: 700px){
	.siteheader{ line-height: 50px; }
	.siteheader__bd{ height: 50px; }
	.sitelogo{ width: 70px; margin-left: -35px; }
	.sitename{ letter-spacing: .1em; }
}

@media only screen and (min-width: 1000px){
	.sitedescription{ display: inline-block; }
	.sitenavtoggle{ display: none; }

}

@media only screen and (min-width: 1400px){
/*	.sitelogo{ width: 80px; margin-left: -40px; }
	.siteheader__bd{ padding: 15px 0; } */
}

/*  ==========================================================================
    sitenav
    ========================================================================== */

.sitenavoverlay{
    background: #000;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
	width: 0px;
    z-index: 2;
    background: #000; /* Old browsers */
    cursor: pointer;
    -webkit-transition: opacity 200ms ease-out 0ms, width 0s linear 201ms;
    -moz-transition: opacity 200ms ease-out 0ms, width 0s linear 201ms;
    transition: opacity 200ms ease-out 0ms, width 0s linear 201ms;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=00)";
    filter: alpha(opacity=00);
}

.sitenavopen .sitenavoverlay{
	-webkit-transition: opacity 200ms ease-out 0ms, width 0s linear 0ms;
    -moz-transition: opacity 200ms ease-out 0ms, width 0s linear 0ms;
    transition: opacity 200ms ease-out 0ms, width 0s linear 0ms;
    opacity: .80;
	width: 100%;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
}
	
.sitenav{
	background: #eee;
	position: relative;
	z-index: 10;
	text-align: center;
}

.sitenav--header{
	height: 0;
	overflow: hidden;
	-webkit-transition: height 200ms ease-in-out 0s;
	   -moz-transition: height 200ms ease-in-out 0s;
			transition: height 200ms ease-in-out 0s;
}

.sitenav__bd{
	padding: 10px 0;
}

.sitenav ul{ margin: 0; padding: 0; list-style: none; }
.sitenav ul:after{ content: " "; height: 0; visibility: hidden; clear: both; display: block; }

.sitenav li{ display: block; border-bottom: solid 1px #ddd; }
.sitenav li.last{ border-bottom: none; }

.sitenav a{ 
	display: block; 
	text-decoration: none;
	
}

@media only screen and (min-width: 400px){
	.sitenav{ text-align: left; }
	
	.sitenav li{ 
		display: block; 
		float: left;
		border-bottom: none; 
		margin: 0 1em 0 0;
	}
	
	.sitenav--header li.last{ float: right; margin: 0; }
	.sitenav--header li.last a{ 
		background: #222; 
		color: #fff;
		-webkit-border-radius: 2px;
		   -moz-border-radius: 2px;
				border-radius: 2px;
		padding: 0 1.3em;
	}
	
	.sitenav--header li.last a:hover{ color: #fff; background: #2ad2b0; }
}

@media only screen and (min-width: 1000px){
	.sitenav--header{
		height: auto;
		overflow: visible;
		position: absolute;
		background: none;
		top: 0;
		right: 7.14%;
		z-index: 200;
	}
	
	.sitenav--header li.last a{ background: #eee; color: #222; }
	.sitenav--header li.last a:hover{ color: #fff; background: #2ad2b0; }
	
	.sitenav__bd{ margin: 0; }
	
	.sitenavopen .sitenavoverlay{
		opacity: 0;
		width: 0px;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
		filter: alpha(opacity=50);
	}
}

/*  ==========================================================================
    toolbar
    ========================================================================== */

.toolbar{
	border-top: solid 1px #eee;
	border-bottom: solid 1px #eee;
	padding: 1em 0;
}

.toolbar a{ color: #222; }
.toolbar a:hover{ color: #2ad2b0; text-decoration: none;  }


/*  ==========================================================================
    sitefooter
    ========================================================================== */
	
.sitefooter{
	line-height: 40px;
	position: relative;
	border-top: solid 1px #eee;
	z-index: 1;
	letter-spacing: .03em;
}

.sitefooter__bd{ padding: 10px 0; }

.sitefooter a{ color: #222; text-decoration: none; }
.sitefooter a:hover{ color: #2ad2b0; }

.sitelogo--footer{ 
	position: relative; 
	left: auto;
	right: auto;
	top: auto;
	margin: -10px auto 0;
	background: #222;
}

.sitenav--footer{ background: none; margin-bottom: .3em; text-align: center; }

/*
// socialnav
*/

.socialnav{
	width: 100%;
	letter-spacing: 0em;
}

.socialnav--footer{ 
	text-align: center;
	float: left;
}

.socialnav--contact{
	width: 75%;
}

.socialnav .fa{ padding: 0; }

.socialnav a:hover .fa{
	-webkit-animation: none; 
       -moz-animation: none; 
            animation: none;
}

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

.socialnav li{ display: inline-block; padding: 0 0em .25em 0; }

.socialnav .socialnavitem{
	display: inline-block;
	width: 2em;
	height: 2em;
	line-height: 2em;
	background: #eee;
	color: #222;
	text-align: center;
	-webkit-border-radius: 50%;
	   -moz-border-radius: 50%;
			border-radius: 50%;
}

.socialnav .socialnavitem:hover{ color: #fff; }

.socialnav .socialnavitem--facebook:hover{ background:#3b5998; }
.socialnav .socialnavitem--twitter:hover{ background:#00aced; }
.socialnav .socialnavitem--linkedin:hover{ background:#007bb6; }
.socialnav .socialnavitem--tumblr:hover{ background:#32506d; }
.socialnav .socialnavitem--dribbble:hover{ background:#ea4c89; }
.socialnav .socialnavitem--googleplus:hover{ background:#dd4b39; }
.socialnav .socialnavitem--pinterest:hover{ background:#cb2027; }
.socialnav .socialnavitem--instagram:hover{ background:#517fa4; }

.footerlegal{ 
	margin: 0 7.14%; 
	line-height: 1.4; 
	padding: 0 0 2em; 
	text-align: center; 
	color: #aaa; 
	font-size: 12px;
}

.footerlegal a{ color: #aaa; }
.footerlegal a:hover{ color: #222; }

@media only screen and (min-width: 400px){
	.sitelogo--footer{ 
		display: block; 
		position: absolute;
		top: 0;
		left: 50%;
		margin: 0 0 0 -30px;
	}
	
	.sitenav--footer li{ 
		display: inline-block; float: none;
	 }
	 
	 .sitenavlink--about{ padding-right: 30px; }
	 .sitenavlink--contact{ padding-left: 30px; }
}

@media only screen and (min-width: 700px){
	.sitefooter{ line-height: 50px; }
	.sitelogo--footer{ margin-left: -35px; }
	.socialnav--contact{ width: 7em; }
}

@media only screen and (min-width: 800px){
	.sitenavlink--about{ padding-right: 0px; }
	.sitenavlink--contact{ padding-left: 0px; }
	.socialnav--footer{ text-align: right; width: auto; float: right; }
	.sitenav--footer{ float: left; margin: 0; }
}
@media only screen and (min-width: 1400px){
}




/*  ==========================================================================
    main
    ========================================================================== */

.main{ }
.main__bd{ padding: 0 0 7.14%; }

/*
// mainheader
*/
.mainheader{ 
	position: relative;
}
.mainheader__bd{
	padding: 7.14% 0 1em;
}

/*
// article
*/

.article{
}


@media only screen and (min-width: 700px){
	.mainheader__bd{ padding: 5% 0 1em; }
	.mainheadercontent{ width: 80%; }
	.article{ width: 80%;}

}

@media only screen and (min-width: 1000px){
	.mainheadercontent{ width: 70%; }
	.article{ width: 66%;}
	.main__bd{ padding: 0 0 5%; }
}

@media only screen and (min-width: 1200px){
	.mainheadercontent{ width: 66%; }
	.article{ width: 50%;}
}


/*  ==========================================================================
    portfolio
    ========================================================================== */

.portfolio{
	padding: 7.14% 0;
}

.portfolioitems{
	margin: 0 -1em 0 0;
}

.portfolioitem{
	margin: 0 1em 2.3em 0;
	text-align: center;
	position: relative;
}

.portfolioitem__buylinkwrapper{
	margin: 12% 12% 0 0;
	height: 0;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 5;
}


.portfolioitem a{ color: #222; }
.portfolioitem a:hover{ color: #2ad2b0; text-decoration: none; }

.portfolioitem__link{ 
	display: block;
	position: relative;
	z-index: 1;
}

.portfolioitem .portfolioitem__buylink{
	background: #2ad2b0;
	color: #fff;
	width: 3em;
	line-height: 3em;
	display: inline-block;
	text-transform: uppercase;
	-webkit-border-radius: 50%;
	   -moz-border-radius: 50%;
			border-radius: 50%;
	border: solid 1px #2ad2b0;
	z-index: 5;
	text-align: center;
	font-weight: bold;
	position: absolute;
	top: -1em;
	right: -1em;
}

.portfolioitem .portfolioitem__buylink:hover{
	background: #fff;
	text-decoration: none;
	color: #2ad2b0;
}

.portfolioitemfigure{
	display: block;
	position: relative;
	margin: 0 0 .6em;
	overflow: hidden;
	-webkit-border-radius: 50%;
	   -moz-border-radius: 50%;
			border-radius: 50%;
	-webkit-transform: translate3d(0, 0, 0);
	position: relative;
	padding: 100% 0 0;
}

.portfolioitemfigure__img{
	display: block;
	min-width: 100%;
	min-height: 100%;
	position: absolute;
	top: 0;
	z-index: 1;
	left: 0;
	right: 2px;
/*	-webkit-border-radius: 50%;
	   -moz-border-radius: 50%;
			border-radius: 50%; */
}

.portfolioitemfigure__mask{
	position: absolute;
	top: 0;
	left: 0;
	min-width: 100%;
	bottom: -2px;
	right: -2px;
	z-index: 2;
}

.portfolioitemfigure__arrow{
	font-size: 2em;
	line-height: 1em;
	color: #fff;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -.5em 0 0 -.5em;
	display: none;
	z-index: 3;
}

.portfolioitemfigure__arrow img{
	width: 1.5em;
	margin-left: -.25em;
}


.portfolioitem__link:hover .portfolioitemfigure__arrow{ display: block; }


.portfolioitemfigure__img{
	-webkit-transition: -webkit-transform .1s ease-out 0s;
	   -moz-transition:    -moz-transform .1s ease-out 0s;
			transition:			transform .1s ease-out 0s;
	-webkit-transform: translate3d(0, 0, 0); 
}
/*
.portfolioitem__link:hover .portfolioitemfigure__img{
	-webkit-transform: scale(1.075,1.075);
	   -moz-transform: scale(1.075,1.075);
			transform: scale(1.075,1.075);
} */

.portfolioitem__title{
	font-size: 1em;
	margin: 0 0 .25em;	
}

.portfoliocategories{ margin-bottom: .33em; letter-spacing: .05em; }

.portfoliocategories--item a{ color: #fff; }
.portfoliocategories--item a:hover{ color: #2ad2b0; text-decoration: none; }

@media only screen and (min-width:1000px){
	.portfolio{ padding-top: 5%; }
	.portfolioitems{ margin-right: -2em; }
	.portfolioitem{ margin-right: 2em; }
}

@media only screen and (min-width:1600px){
	.portfolioitems{ margin-right: -3em; }
	.portfolioitem{ margin-right: 3em; }
}

/*
// portfolioimages
*/

.portfolioimages{
	position: relative;
	display: block;
	margin-top: 2em;
}

.portfolioimage{
	display: block;
	position: relative;
	margin: 0 0 2em;
}

.portfolioimage__img{
	display: block;
	width: 100%;
}

.portfolioimage__caption{
	display: block;
	margin: 1em 0 0;
	text-align: center;
}

.portfolioimage__caption p{
	margin: 0 0 0.25em; }

.relatedportfolio{
	display: block;
}

/*  ==========================================================================
    shoppanel
    ========================================================================== */

.shoppanel{
	margin-top: 7.14%;
}
	
.shoppanel{
	border: dotted 2px #2ad2b0;
	padding: 2px;
}

.shoppanel__content{
	padding: 1em;
	text-align: center;
	max-width: 600px;
	margin: 0 auto;
}

@media only screen and (min-width: 500px){
	.shoppanel,
	.shoppanel__border{
		border: dotted 2px #2ad2b0;
		padding: 2px;
	}
	
	.shoppanel__content{
		padding: 2em;
	}
}

@media only screen and (min-width: 1000px){
	.shoppanel__content{ padding: 3em; }
}


/*  ==========================================================================
    animation classes
    ========================================================================== */
	
@-webkit-keyframes link-movement {
    0%   { left: 0px; } 
    50%  { left: 4px; }
    100% { left: 0px; }
}
@-moz-keyframes link-movement {
     0%   { left: 0px; } 
    50%  { left: 4px; }
    100% { left: 0px; }
}

@keyframes link-movement {
     0%   { left: 0px; } 
    50%  { left: 4px; }
    100% { left: 0px; }
}
	
	
	
/*  ==========================================================================
    shop specific classes
    ========================================================================== */

.page--shop{
}

.mainheader--product h1{ text-transform: none; }

.mainheader--product h1:after{ display: none; }

.mainheader--product .mainheadercontent{
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.primary_image{ margin-bottom: 2em; display: block; width: 100%; }
	
.cartpanel{
	/*background: #f1f1f1; */
	border-top: solid 1px #eee;
	border-bottom: solid 1px #eee; 
	padding: .5em 0;
	text-align: right;
 }
 
 .cartpanel a{
 	color: #222;
 }
 
.cartpanel .btn{ color: #eee; margin: 0 0 0 1em; background: #222; border-color: #222; }
.cartpanel .btn:hover{ color: #fff; background: #2ad2b0; border-color: #2ad2b0; }
 
 .cartpanel a:hover{
	color: #2ad2b0 
}
	

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

.social_links li{ display: inline-block; }

.social_links a{
	display: inline-block;
	width: 2em;
	height: 2em;
	line-height: 2em;
	background: #eee;
	color: #222;
	margin: 0 .25em 0 0;
	text-align: center;
	-webkit-border-radius: 50%;
	   -moz-border-radius: 50%;
			border-radius: 50%;
}
	
.social_links .fa{ padding: 0; }
	

.social_links a.social_linkitem:hover{ color: #fff; }

.social_links a.social_linkitem:hover .fa{
	-webkit-animation: none; 
       -moz-animation: none; 
            animation: none;
}

.social_links a.social_linkitem--facebook:hover{ background:#3b5998; }
.social_links a.social_linkitem--twitter:hover{ background:#00aced; }
.social_links a.social_linkitem--linkedin:hover{ background:#007bb6; }
.social_links a.social_linkitem--tumblr:hover{ background:#32506d; }
.social_links a.social_linkitem--dribbble:hover{ background:#ea4c89; }
.social_links a.social_linkitem--googleplus:hover{ background:#dd4b39; }
.social_links a.social_linkitem--pinterest:hover{ background:#cb2027; }
.social_links a.social_linkitem--instagram:hover{ background:#517fa4; }
	
	
.cart_details a{
	color: #222;
}

.productcategories{
	margin: .5em 0 0;
	padding: 0;
	list-style: none;
	display: none;
}

.productcategories li{
	margin: 0;
	padding: 0;
	display: inline-block;
}

.leadercategories {
	color: #797979;
}

.leadercategories a{
	color: #797979;
}

.leadercategories a:hover{
	color: #2ad2b0;
	text-decoration: none;
}



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

/*
 * Hide visually and from screen readers:
 * http://juicystudio.com/article/screen-readers-display-none.php
 */

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

/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */

.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:
 * https://www.drupal.org/node/897638
 */

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

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

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



/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   http://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important; /* Black prints faster:
                                   http://www.sanbeiji.com/archives/953 */
        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 that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */

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

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

    /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */

    thead {
        display: table-header-group;
    }

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

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

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

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