/****************************************************************************
Theme Name: Elizabeth Knight Author Website
Theme URI: http://www.eknightbooks.com
Author: Sarah Judge
Description: Official Website of Elizabeth Knight - Children's Book Author
****************************************************************************/

body {
background-image: url(../images/bgmain.png);
background-position: center top;
}

 #my-books, #about-me, #author-visits, #media, #stories, #contact, .medialeft,  .mediaright
{padding-top: 30px;}




/*----------------------------
   Top Navigation
-----------------------------*/

#topnav {
z-index: 100;
position: absolute;
top: 80px;
left: 0;
right: 0;
-webkit-backface-visibility: hidden; /* included due to nav/stories flickering bug */
}

#topnav a {
color: #37ac72;
}

#topnav a:hover {
color: #f0e9d3;
text-decoration: none;
padding-right: 1px;
}

#topnav ul {
position: relative;
width: 960px;
height: 75px;
margin: 0 auto;
padding-top: 25px;
padding-left: 0;
background-image: url(../images/nav-bg.png);
background-repeat: no-repeat;
text-align: center;
list-style-type: none;
}

#topnav li {
display: inline;
margin-bottom: 0;
padding: 0 18px;
background-repeat: no-repeat;
background-position: center right;
font-family: "great vibes", Arial, Helvetica, sans-serif;
font-size: 25px;
}

#topnav li.intro {
overflow: hidden;
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
padding-left: 0;
}

#topnav li.intro a {
display: block;
overflow: hidden;
height: 0;
padding-top: 100px;
background-image: url(../images/nav-logo.png);
background-repeat: no-repeat;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}

#topnav li.my-books, #topnav li.about-me, #topnav li.author-visits, #topnav li.book-tasters, #topnav li.stories, #topnav li.media  {
background-image: url(../images/navspacer.png);
}

#topnav li.contact {
padding-right: 0;
}

#topnav.sticky {
position: fixed;
top: 0;
}

#topnav.sticky li.my-books {
padding-left: 100px;
}

#topnav.sticky li.intro {
width: 190px;
height: 100px;
}

html.my-books #topnav li.my-books a,
html.about-me	   #topnav li.about-me      a,
html.author-visits #topnav li.author-visits a,
html.book-tasters  #topnav li.book-tasters   a,
html.stories       #topnav li.stories  a,
html.media       #topnav li.media  a,
html.contact	   #topnav li.contact     a {
color: #adcd37; 
}



/*----------------------------
   Intro
-----------------------------*/

#intro{
position: ;
height: 560px;
margin: 0 auto;
}
#intro h1 {
padding-top: 120px;
color: #fa5735;
font-family: "great vibes", Arial, Helvetica, sans-serif;
font-size: 125px;
text-align: center;
text-shadow: 0 0 4px #272221;
}

#intro h2 {
padding-top: 35px;
color: #f0e9d3;
font-family: "Bitter", Georgia, "Times New Roman", Times, serif;
font-size: 19px;
text-align: center;
text-shadow: 0 0 4px #272221;
text-transform: uppercase;
letter-spacing: 4px;
}



/*----------------------------
   My Books
-----------------------------*/

#my-books {min-height: 700px; }

#my-books img {margin: 0 auto; display: block; margin-top: 22%; width: 100%;}


.my-books-right ul {list-style-type: none; }
.my-books-right ul li {line-height: 30px;}

#my-books h2 {
padding-left: 5px;
color: #adcd37;
font-family: "great vibes", Arial, Helvetica, sans-serif;
font-size: 50px;
margin-bottom: -10px;
}

#my-books h3 {
padding-top: 20px;
line-height: 45px;
margin-bottom: 2px;
color: #fa5735;
font-family: "Bitter", Georgia, "Times New Roman", Times, serif;
font-size: 20px;
}

#my-books p {
line-height: 23px; 
font-size: 15px;
}

/* Amazon Button */


.buttonwrapper {text-align: center; margin-left: -20px; margin-top: -12px;}

.mybooksbutton, .amazonbutton {
background: #fa5735;
border: 2px solid #fa5735;
border-radius: 3px;
font-family: "Bitter", Georgia, "Times New Roman", Times, serif;
padding: 5px;
text-align: center;
display: block;
width: 200px; 
margin: 0 auto;
color: #f0e9d3;
}

.mybooksbutton {background: #37ac72; border: 2px solid #37ac72; margin-bottom: 15px;}

.mybooksbutton:hover, .amazonbutton:hover {
background: #37ac72;
border: 2px solid #f0e9d3;
color: #f0e9d3;
cursor: pointer;
text-decoration: none;
-webkit-transition: all 0.5s linear;
		-moz-transition: all 0.5s linear;
		-o-transition: all 0.5s linear;
		transition: all 0.5s linear;

}

.amazonbutton:hover {
background: #fa5735;
}


.mybooksbutton:active, .amazonbutton:active {
background: #fa5735;
border: 3px solid #fa5735;
color: #f0e9d3;
}

.mybooksbutton a, .amazonbutton a {
color: #f0e9d3; 
text-decoration: none; 
text-transform: uppercase; 
font-size: 12px; 
letter-spacing: 1px;
}

/* Reviews */

.cbp-qtrotator {
position: relative;
width: 100%;
min-height: 300px;
z-index: 1;
-webkit-backface-visibility: hidden; /* included due to nav/stories flickering bug */
}

.cbp-qtrotator .cbp-qtcontent {
position: absolute;
min-height: 160px;
border-top: 1px solid #f0e9d3;
padding: 1em 0;
top: 0;
z-index: 0;
opacity: 0;
width: 100%;
}

.no-js .cbp-qtrotator .cbp-qtcontent {
border-bottom: none;
}

.cbp-qtrotator .cbp-qtcontent.cbp-qtcurrent,
.no-js .cbp-qtrotator .cbp-qtcontent {
position: relative; 
z-index: 100;
pointer-events: auto;
opacity: 1;
}

.cbp-qtrotator .cbp-qtcontent:before,
.cbp-qtrotator .cbp-qtcontent:after {
content: " ";
display: table;
}

.cbp-qtrotator .cbp-qtcontent:after {
clear: both;
}

.cbp-qtprogress {
position: absolute;
background: #37ac72;
height: 1px;
width: 0%;
top: 0;
z-index: 1000;
}

.cbp-qtrotator blockquote {
margin: 0;
padding: 0;
}

.cbp-qtrotator blockquote p {
font-size: 14px;
color: #f0e9d3;
font-weight: 300;
margin: 0.4em 0 1em;
}

.cbp-qtrotator blockquote span {
font-size: 13px !important;
}

.cbp-qtrotator blockquote footer {
font-size: 13px;
color: #adcd37;
font-style: italic;
line-height: 20px;
}

.cbp-qtrotator blockquote footer:before {
content: '― ';
}





/*----------------------------
   About Me
-----------------------------*/

.aboutimg {
background: url(../images/eknightportrait.png) no-repeat center ;
height: 500px;
padding-top: 30%;
}


#about-me {}

#about-me h2 {
padding-left: 5px;
color: #adcd37;
font-family: "great vibes", Arial, Helvetica, sans-serif;
font-size: 50px;
}

#about-me h3 {
padding-left: 10px;
line-height: 55px;
color: #f0e9d3;
font-family: "great vibes", Arial, Helvetica, sans-serif;
font-size: 26px;
}

#about-me p {
float: right; 
line-height: 23px; 
font-size: 15px;
}




/*----------------------------
   Book Tasters
-----------------------------*/

#book-tasters {
position: relative;
min-height:650px;
padding-top: 30px;
-webkit-backface-visibility: hidden; /* included due to nav/stories flickering bug  */
}

#book-tasters h2 {
text-align: center;
color: #adcd37;
font-family: "great vibes", Arial, Helvetica, sans-serif;
font-size: 50px;
margin-bottom: -30px;
}

#book-tasters h3 {
padding-top: 0px;
line-height: 45px;
margin-bottom: 2px;
color: #fa5735;
font-family: "Bitter", Georgia, "Times New Roman", Times, serif;
font-size: 20px;
}

#book-tasters span {
font-size:12px;
font-style: italic;
color: #272727;
line-height: 24px !important;
}



/*----------------------------
   Visits & Events
-----------------------------*/

#author-visits {

}

#author-visits h2 {
padding-left: 5px;
color: #adcd37;
font-family: "great vibes", Arial, Helvetica, sans-serif;
font-size: 50px;
}



#author-visits h3 {
padding-top: 10px;
margin-bottom: -2px;
line-height: 45px;
color: #fa5735;
font-family: "Bitter", Georgia, "Times New Roman", Times, serif;
font-size: 20px;
}

#author-visits p { 
line-height: 23px; 
font-size: 15px;
}

#author-visits span {
line-height: 23px; 
font-size: 14px; 
color: #f0e9d3; 
font-style: italic; 
}

#author-visits .charges {
margin-top: 25px;
margin-bottom: 44px;
border-radius: 3px; 
border: 4px  double #f0e9d3; 
padding: 10px;
padding-left: 15px;
}

.visitsleft {
}

.visitsright {
padding-top: 5%;
}

.events {

}



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



#media {

}



.medialeft {
background: ;
}

.medialeft span {
font-style: italic; 
font-size: smaller;
}

.mediaright {
background: ;
}


#media  h2 {
text-align: center;
color: #adcd37;
font-family: "great vibes", Arial, Helvetica, sans-serif;
font-size: 50px;
margin-bottom: 30px;
}

#media  h3 {
padding-top: 5px;
padding-bottom: 5px;
color: #fa5735;
font-family: "Bitter", Georgia, "Times New Roman", Times, serif;
font-size: 20px;
}

#media  h4 {
padding-top: 30px;
color: #f0e9d3;
font-family: "great vibes", Arial, Helvetica, sans-serif;
font-size: 38px;
}

#media  p { 
line-height: 23px; 
font-size: 15px;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/*----------------------------
   End Media
-----------------------------*/





/*----------------------------
   Short Stories
-----------------------------*/


#stories {

-webkit-backface-visibility: hidden; /* included due to nav/stories flickering bug  */

}

#stories h2 {
text-align: center;
color: #adcd37;
font-family: "great vibes", Arial, Helvetica, sans-serif;
font-size: 50px;
margin-bottom: 30px;

}



.glossarytooltip {
    display: inline;
    position: relative;
}

.glossarytooltip:hover:after {
    background: #272727;
    border-radius: 3px;
    bottom: 26px;
    color: #f0e9d3;
    font-style: italic;
    font-size: 12px;
    line-height: 1.8;
    left: 20%;
    padding: 5px 15px;
    position: absolute;
    z-index: 98;
    width: 220px;
}

.glossarytooltip:hover:after {
    content: attr(tooltip);
}

.glossarytooltip:hover:before {
    border: solid;
    border-color: #272727 transparent;
    border-width: 6px 6px 0 6px;
    bottom: 20px;
    content: "";
    left: 50%;
    position: absolute;
    z-index: 99;
}



/*************************************
Stories Transforms
**************************************/


.stage {
list-style: none;
}

.scene {
	width: 260px;
	height: 400px;
	margin: 0 auto;
	float: left;
	-webkit-perspective: 1000px;
	-moz-perspective: 1000px;
	perspective: 1000px;
}

.shortstory {
	width: 260px;
	height: 400px;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform: translateZ(-130px);
	-moz-transform: translateZ(-130px);
	transform: translateZ(-130px);
	-webkit-transition: -webkit-transform 350ms;
	-moz-transition: -moz-transform 350ms;
	transition: transform 350ms;
}

.shortstory:hover {
	-webkit-transform: rotateY(-78deg) translateZ(20px);
	-moz-transform: rotateY(-78deg) translateZ(20px);
	transform: rotateY(-78deg) translateZ(20px);
}

/*************************************
Transform and style the two planes
**************************************/

.shortstory .poster, 
.shortstory .info {
	position: absolute;
	width: 260px;
	height: 400px;
	background-color: #f0e9d3;
	}

.shortstory .poster  {
	-webkit-transform: translateZ(130px);
	-moz-transform: translateZ(130px);
	transform: translateZ(130px);
	background-size: cover;
	background-repeat: no-repeat;
}

.shortstory .info {
	-webkit-transform: rotateY(90deg) translateZ(130px);
	-moz-transform: rotateY(90deg) translateZ(130px);
	transform: rotateY(90deg) translateZ(130px);
	border: 1px solid #B8B5B5;
	font-size: 0.75em;
}

/*************************************
Shadow beneath the 3D object
**************************************/

.csstransforms3d .shortstory::after {
	content: '';
	width: 260px;
	height: 260px;
	position: absolute;
	bottom: 0;
	box-shadow: 0 30px 50px rgba(0,0,0,0.3);
	-webkit-transform-origin: 100% 100%;
	-moz-transform-origin: 100% 100%;
	transform-origin: 100% 100%;
	-webkit-transform: rotateX(90deg) translateY(130px);
	-moz-transform: rotateX(90deg) translateY(130px);
	transform: rotateX(90deg) translateY(130px);
	-webkit-transition: box-shadow 350ms;
	-moz-transition: box-shadow 350ms;
	transition: box-shadow 350ms;
	
}

.csstransforms3d .shortstory:hover::after {
	box-shadow: 20px -5px 50px rgba(0,0,0,0.3);
}

/*************************************
Story information
**************************************/

.info h1 {
	margin: 0 0 2px;
	font-size: 26px;
	line-height: 38px;
	color: #fa5735;
	padding: 15px;
	text-align: center;
	font-family: "great vibes", Arial, Helvetica, sans-serif;
	background:transparent url(../images/h1.png) no-repeat bottom left;
}

.info p {
	padding: 1.2em 1.4em;
	margin: 2px 0 0;
	color: #272727;
	line-height: 20px;
	font-size: 12px;
}

.info a {
	padding: 1.2em 1.4em;
	margin: 2px 0 0;
	line-height: 25px;
	font-size: 12px;
}

/*************************************
Generate "lighting" using box shadows
**************************************/

.shortstory .poster,
.shortstory .info {
	-webkit-transition: box-shadow 350ms;
	-moz-transition: box-shadow 350ms;
	transition: box-shadow 350ms;
	-webkit-backface-visibility: hidden; /* included due to stories flickering bug chrome */

}

.csstransforms3d .shortstory .poster {
	box-shadow: inset 0px 0px 40px rgba(255,255,255,0);
}

.csstransforms3d .shortstory:hover .poster {
	box-shadow: inset 300px 0px 40px rgba(255,255,255,0.8);
}

.csstransforms3d .shortstory .info, 
{
	box-shadow: inset -300px 0px 40px rgba(0,0,0,0.5);
}

.csstransforms3d .shortstory:hover .info, 
 {
	box-shadow: inset 0px 0px 40px rgba(0,0,0,0);
}

/*************************************
Posters and still images
**************************************/

.scene:nth-child(1), .scene:nth-child(2) {margin-right:60px ; margin-bottom: 50px;	
}

.scene:nth-child(1) .shortstory .poster {
  background-image: url(../images/poster01.jpg);
  
}

.scene:nth-child(2) .poster {
  background-image: url(../images/poster02.jpg);
}

.scene:nth-child(3) .poster {
  background-image: url(../images/poster03.jpg);
}


    @media only screen and (min-width: 768px) and (max-width: 959px) {
    .scene:nth-child(1), .scene:nth-child(2) {margin-right:30px; margin-left: -20px;}
    .scene, .shortstory  {width: 220px;}
    
}

   @media only screen and (min-width: 480px) and (max-width: 767px) 
   {
	   .scene {margin-left: 50px;}
	  

	   
   }
   
   

/*************************************
Fallback
**************************************/
.no-csstransforms3d .movie .poster, 
.no-csstransforms3d .movie .info {
	position: relative;
}




/*----------------------------
   Contact Form
-----------------------------*/


#contact {

}

#contact h2 {
color: #adcd37;
font-family: "great vibes", Arial, Helvetica, sans-serif;
font-size: 45px;
}

#contact h3 {
color: #f0e9d3;
font-family: "great vibes", Arial, Helvetica, sans-serif;
font-size: 42px;
text-align: center;
padding-bottom: 0px;
}

#contact h4 {
color: #fa5735;
font-family: "Bitter", Georgia, "Times New Roman", Times, serif;
font-size: 18px;
text-align: center;
padding-bottom: 10px;
}

#contact h5 {
font-family: "great vibes", Arial, Helvetica, sans-serif;
font-size: 35px;
text-align: center;
}

#contact p { 
line-height: 23px; 
font-size: 15px;
}

.contactme {
background: ;
}

.authorsnote {
background: ;
}

#contact p.note { 
text-align: center;
}


#contactform {
margin: 0 auto;
padding-top: 30px; 
background: ;
max-width: 400px;
}

#contactform field set legend span {display:block;}

#contactform form label {
display: block;
float: left;
padding-top: 10px;
padding-right: 10px;
width: 70px;
text-align: left;
color: #f0e9d3;
font-family: "Bitter", Georgia, "Times New Roman", Times, serif;
font-size: 15px;
}

#contactform input.inpt, #contactform textarea, #contactform select {
padding:5px;
padding: 6px 10px;
width:275px;
outline: none;
border: 2px solid #f0e9d3;
border-radius: 3px;
background: #f0e9d3;
-webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.5);
-moz-box-shadow:    inset 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.5);
box-shadow:         inset 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.5);
font-size: 14px;
color: #272727;
}

#contactform input.required {
display: block;
padding: 6px 10px;
width: 275px;
height: 24px;
outline: none;
border: 2px solid #f0e9d3;
border-radius: 3px;
background: #f0e9d3;
-webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.5);
-moz-box-shadow:    inset 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.5);
box-shadow:         inset 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.5);
color: #272727;
font-size: 14px;
}

#contactform .select {margin-bottom: 20px;width: 350px;}
#contactform textarea{margin-bottom: 20px;}

#contactform input.required:focus {
border: 2px solid #fa5735;
-webkit-box-shadow: 0px 0px 2px #fa5735;
-moz-box-shadow: 0px 0px 2px #fa5735;
-webkit-transition: all 0.10s ease-in-out;
-moz-transition: all 0.10s ease-in-out;
}

#contactform textarea:focus {
border: 2px solid #fa5735;
-webkit-box-shadow: 0px 0px 2px #fa5735;
-moz-box-shadow: 0px 0px 2px #fa5735;
-webkit-transition: all 0.10s ease-in-out;
-moz-transition: all 0.10s ease-in-out;
}

#contactform .form-btn {
float: left; 
padding: 10px;
margin-right: 18px; 
border-radius: 3px;
width: 300px; 
border: none;  
background: #fa5735; 
color: #f0e9d4; 
text-shadow: none; 
font-size: 15px; 
letter-spacing: 1px;
font-family: "Bitter", Georgia, "Times New Roman", Times, serif;
}

#contactform .form-btn:hover {background: #37ac72;}


/* Error / Success / Notice 
------------------------------------------------------------- */

#note { margin-top: 30px;  width: 320px;float: right; margin-right: 20px;}

.notes		{border-radius: 3px; background:#f0f0f0;}
.success	{border-radius: 3px; background:#adcd37;}
.error		{border-radius: 3px; background:#fa5735;}
.notice		{ border-radius: 3px; background:#fcf0cc;}

.notes, .notice, .success, .error {
margin-bottom: 15px;
padding:10px;
color:#f0e9d4;
font-size:14px;
line-height: 20px;
font-family: "Bitter", Georgia, "Times New Roman", Times, serif;
}

.notes span,.notice span,.success span,.error span	{
font-weight:bold;
font-size:1.2em;
}

.notes p,.success p,.error p,.notice p {
margin:0px;
padding:0px;
}

/*----------------------------
   End Contact 
-----------------------------*/







/*----------------------------
   Footer 
-----------------------------*/

#footer {
z-index: 99;
position: fixed;
left: 0;
right: 0;
bottom: 0;
padding-top: 20px;
height: 30px;
background-image: url(../images/footer.png);
background-repeat: repeat-x;
-webkit-backface-visibility: hidden; /* included due to stories bug */
}




#footer ul {
margin: 0 auto;
padding-top: 7px;
padding-left: 0;
list-style-type: none;
text-align: center;
}

#footer li {
display: inline;
margin-bottom: 0;
padding: 0 5px;
color: #5f5552;
font-size: 12px;
}


#footer li a {
color: #37ac72
}

#footer li a:hover {
color: #f0e9d3;
text-decoration: none;
}

/* Back To Top */

#top {
z-index: 3;
position: fixed;
right: 15px;
bottom: 45px;
}

#top a {
display: block;
overflow: hidden;
width: 60px;
height: 0;
padding-top: 60px;
background-image: url(../images/top.png);
background-repeat: no-repeat;
}

html.null #top,
html.intro #top {
display: none;
}


/*----------------------------
   End Footer
-----------------------------*/



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





/* Audio Player */


#audiowrapper{
width: 100%;
max-width: 370px;
position: relative;
margin-top: 35px;
margin-bottom: 15px;
height: 50px;


}

#audiowrapper2 {
width: 100%;
max-width: 370px;
position: relative;
margin-top: 35px;
margin-bottom: 15px;
height: 50px;

}

.audioplayer {
height: 2.5em; /* 40 */
color: #f0e9d3;
text-shadow: 1px 1px 0 #000;
border: 1px solid #222;
position: relative;
z-index: 1;
background: #333;
background: -webkit-gradient( linear, left top, left bottom, from( #444 ), to( #222 ) );
background: -webkit-linear-gradient( top, #444, #222 );
background: -moz-linear-gradient( top, #444, #222 );
background: -ms-radial-gradient( top, #444, #222 );
background: -o-linear-gradient( top, #444, #222 );
background: linear-gradient( top, #444, #222 );
-webkit-box-shadow: inset 0 1px 0 rgba( 255, 255, 255, .15 ), 0 0 1.25em rgba( 0, 0, 0, .5 ); /* 20 */
-moz-box-shadow: inset 0 1px 0 rgba( 255, 255, 255, .15 ), 0 0 1.25em rgba( 0, 0, 0, .5 ); /* 20 */
box-shadow: inset 0 1px 0 rgba( 255, 255, 255, .15 ), 0 0 1.25em rgba( 0, 0, 0, .5 ); /* 20 */
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}

.audioplayer-mini {
width: 2.5em; /* 40 */
margin: 0 auto;
}

.audioplayer > div {
position: absolute;
}

.audioplayer-playpause {
width: 2.5em; /* 40 */
height: 100%;
text-align: left;
text-indent: -9999px;
cursor: pointer;
z-index: 2;
top: 0;
left: 0;
}

.audioplayer:not(.audioplayer-mini) .audioplayer-playpause {
border-right: 1px solid #555;
border-right-color: rgba( 255, 255, 255, .1 );
}

.audioplayer-mini .audioplayer-playpause {
width: 100%;
}

.audioplayer-playpause:hover,
.audioplayer-playpause:focus {
background-color: #fa5735;
}

.audioplayer-playpause a {
display: block;
}

.audioplayer:not(.audioplayer-playing) .audioplayer-playpause a {
width: 0;
height: 0;
border: 0.5em solid transparent; /* 8 */
border-right: none;
border-left-color: #f0e9d3;
content: '';
position: absolute;
top: 50%;
left: 50%;
margin: -0.5em 0 0 -0.25em; /* 8 4 */
}

.audioplayer-playing .audioplayer-playpause a {
width: 0.75em; /* 12 */
height: 0.75em; /* 12 */
position: absolute;
top: 50%;
left: 50%;
margin: -0.375em 0 0 -0.375em; /* 6 */
}

.audioplayer-playing .audioplayer-playpause a:before,
.audioplayer-playing .audioplayer-playpause a:after {
width: 40%;
height: 100%;
background-color: #f0e9d3;
content: '';
position: absolute;
top: 0;
}

.audioplayer-playing .audioplayer-playpause a:before {
left: 0;
}

.audioplayer-playing .audioplayer-playpause a:after {
right: 0;
}

.audioplayer-time {
width: 4.375em; /* 70 */
height: 100%;
line-height: 2.375em; /* 38 */
text-align: center;
z-index: 2;
top: 0;
}

.audioplayer-time-current {
border-left: 1px solid #111;
border-left-color: rgba( 0, 0, 0, .25 );
left: 2.5em; /* 40 */
}

.audioplayer-time-duration {
border-right: 1px solid #555;
border-right-color: rgba( 255, 255, 255, .1 );
right: 2.5em; /* 40 */
}

.audioplayer-novolume .audioplayer-time-duration {
border-right: 0;
right: 0;
}

.audioplayer-bar {
height: 0.875em; /* 14 */
background-color: #222;
cursor: pointer;
z-index: 1;
top: 50%;
right: 6.875em; /* 110 */
left: 6.875em; /* 110 */
margin-top: -0.438em; /* 7 */
}

.audioplayer-novolume .audioplayer-bar {
right: 4.375em; /* 70 */
}

.audioplayer-bar div {
width: 0;
height: 100%;
position: absolute;
left: 0;
top: 0;
}

.audioplayer-bar-loaded {
background-color: #333;
z-index: 1;
}

.audioplayer-bar-played {
background: #007fd1;
background: -webkit-gradient( linear, left top, right top, from( #007fd1 ), to( #c600ff ) );
background: -webkit-linear-gradient( left, #007fd1, #c600ff );
background: -moz-linear-gradient( left, #007fd1, #c600ff );
background: -ms-radial-gradient( left, #007fd1, #c600ff );
background: -o-linear-gradient( left, #007fd1, #c600ff );
background: linear-gradient( left, #007fd1, #c600ff );
z-index: 2;
}

.audioplayer-volume {
width: 2.5em; /* 40 */
height: 100%;
border-left: 1px solid #111;
border-left-color: rgba( 0, 0, 0, .25 );
text-align: left;
text-indent: -9999px;
cursor: pointer;
z-index: 2;
top: 0;
right: 0;
}

.audioplayer-volume:hover,
.audioplayer-volume:focus {
background-color: #fa5735;
}

.audioplayer-volume-button {
width: 100%;
height: 100%;
}

.audioplayer-volume-button a {
width: 0.313em; /* 5 */
height: 0.375em; /* 6 */
background-color: #f0e9d3;
display: block;
position: relative;
z-index: 1;
top: 40%;
left: 35%;
}

.audioplayer-volume-button a:before,
.audioplayer-volume-button a:after {
content: '';
position: absolute;
}

.audioplayer-volume-button a:before {
width: 0;
height: 0;
border: 0.5em solid transparent; /* 8 */
border-left: none;
border-right-color: #f0e9d3;
z-index: 2;
top: 50%;
right: -0.25em;
margin-top: -0.5em; /* 8 */
}

.audioplayer:not(.audioplayer-mute) .audioplayer-volume-button a:after {
/* "volume" icon by Nicolas Gallagher, http://nicolasgallagher.com/pure-css-gui-icons */
width: 0.313em; /* 5 */
height: 0.313em; /* 5 */
border: 0.25em double #f0e9d3; /* 4 */
border-width: 0.25em 0.25em 0 0; /* 4 */
left: 0.563em; /* 9 */
top: -0.063em; /* 1 */
-webkit-border-radius: 0 0.938em 0 0; /* 15 */
-moz-border-radius: 0 0.938em 0 0; /* 15 */
border-radius: 0 0.938em 0 0; /* 15 */
-webkit-transform: rotate( 45deg );
-moz-transform: rotate( 45deg );
-ms-transform: rotate( 45deg );
-o-transform: rotate( 45deg );
transform: rotate( 45deg );
}

.audioplayer-volume-adjust {
height: 6.25em; /* 100 */
cursor: default;
position: absolute;
left: 0;
right: -1px;
top: -9999px;
background: #222;
background: -webkit-gradient( linear, left top, left bottom, from( #444 ), to( #222 ) );
background: -webkit-linear-gradient( top, #444, #222 );
background: -moz-linear-gradient( top, #444, #222 );
background: -ms-radial-gradient( top, #444, #222 );
background: -o-linear-gradient( top, #444, #222 );
background: linear-gradient( top, #444, #222 );
-webkit-border-top-left-radius: 2px;
-webkit-border-top-right-radius: 2px;
-moz-border-radius-topleft: 2px;
-moz-border-radius-topright: 2px;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
}

.audioplayer-volume:not(:hover) .audioplayer-volume-adjust {
opacity: 0;
}

.audioplayer-volume:hover .audioplayer-volume-adjust {
top: auto;
bottom: 100%;
}

.audioplayer-volume-adjust > div {
width: 40%;
height: 80%;
background-color: #222;
cursor: pointer;
position: relative;
z-index: 1;
margin: 30% auto 0;
}

.audioplayer-volume-adjust div div {
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
left: 0;
background: #007fd1;
background: -webkit-gradient( linear, left bottom, left top, from( #007fd1 ), to( #c600ff ) );
background: -webkit-linear-gradient( bottom, #007fd1, #c600ff );
background: -moz-linear-gradient( bottom, #007fd1, #c600ff );
background: -ms-radial-gradient( bottom, #007fd1, #c600ff );
background: -o-linear-gradient( bottom, #007fd1, #c600ff );
background: linear-gradient( bottom, #007fd1, #c600ff );
}

.audioplayer-novolume .audioplayer-volume {
display: none;
}

.audioplayer-play,
.audioplayer-pause,
.audioplayer-volume a {
-webkit-filter: drop-shadow( 1px 1px 0 #000 );
-moz-filter: drop-shadow( 1px 1px 0 #000 );
-ms-filter: drop-shadow( 1px 1px 0 #000 );
-o-filter: drop-shadow( 1px 1px 0 #000 );
filter: drop-shadow( 1px 1px 0 #000 );
}

.audioplayer-bar,
.audioplayer-bar div,
.audioplayer-volume-adjust div {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}

.audioplayer-bar,
.audioplayer-volume-adjust > div {
-webkit-box-shadow: -1px -1px 0 rgba( 0, 0, 0, .5 ), 1px 1px 0 rgba( 255, 255, 255, .1 );
-moz-box-shadow: -1px -1px 0 rgba( 0, 0, 0, .5 ), 1px 1px 0 rgba( 255, 255, 255, .1 );
box-shadow: -1px -1px 0 rgba( 0, 0, 0, .5 ), 1px 1px 0 rgba( 255, 255, 255, .1 );
}

.audioplayer-volume-adjust div div,
.audioplayer-bar-played {
-webkit-box-shadow: inset 0 0 5px rgba( 255, 255, 255, .5 );
-moz-box-shadow: inset 0 0 5px rgba( 255, 255, 255, .5 );
box-shadow: inset 0 0 5px rgba( 255, 255, 255, .5 );
}

.audioplayer-volume-adjust {
-webkit-box-shadow: -2px -2px 2px rgba( 0, 0, 0, .15 ), 2px -2px 2px rgba( 0, 0, 0, .15 );
-moz-box-shadow: -2px -2px 2px rgba( 0, 0, 0, .15 ), 2px -2px 2px rgba( 0, 0, 0, .15 );
box-shadow: -2px -2px 2px rgba( 0, 0, 0, .15 ), 2px -2px 2px rgba( 0, 0, 0, .15 );
}

.audioplayer *,
.audioplayer *:before,
.audioplayer *:after {
-webkit-transition: color .25s ease, background-color .25s ease, opacity .5s ease;
-moz-transition: color .25s ease, background-color .25s ease, opacity .5s ease;
-ms-transition: color .25s ease, background-color .25s ease, opacity .5s ease;
-o-transition: color .25s ease, background-color .25s ease, opacity .5s ease;
transition: color .25s ease, background-color .25s ease, opacity .5s ease;
}






/* Styles for dialog window Short Stories */
#small-dialog, #small-dialog1, #small-dialog2, #small-dialog3 {
background: #f0e9d3;
padding: 20px 30px;
text-align: left;
max-width: 880px;
margin: 40px auto;
position: relative;
}

#small-dialog p, #small-dialog1 p, #small-dialog2 p, #small-dialog3 p{
color: #272727;
line-height: 27px;
font-size: 15px;
margin-bottom: 0px;
}

#small-dialog .firstcharacter, #small-dialog1 .firstcharacter, #small-dialog2 .firstcharacter, #small-dialog3 .firstcharacter  { 
float: left; 
color: #272727; 
font-size: 58px; line-height: 45px; 
padding-top: 4px; 
padding-right: 8px; 
padding-left: 3px; 
font-family: "Bitter", Georgia, "Times New Roman", Times, serif;
 }


#small-dialog p.indent, #small-dialog1 p.indent, #small-dialog2 p.indent, #small-dialog3 p.indent{
color: #272727;
line-height: 27px;
font-size: 15px;
margin-bottom: 0px;
text-indent: 2em;
}

#small-dialog h1, #small-dialog1 h1, #small-dialog2 h1, #small-dialog3 h1{
padding-top: 30px;
color: #fa5735;
font-family: "great vibes", Arial, Helvetica, sans-serif;
font-size: 43px;
text-align: center;
}

#small-dialog h2, #small-dialog1 h2, #small-dialog2 h2, #small-dialog3 h2 {
color: #272727;
letter-spacing: 3px;
font-size: 10px;
padding-bottom: 30px;
text-transform: uppercase;
text-align: center;
}

#small-dialog2 h5, #small-dialog3 h5 {
padding-top: 5px;
color: #fa5735;
font-size: 17px;
text-align: center;
padding-bottom: 15px;
}


#small-dialog h3, #small-dialog1 h3, #small-dialog2 h3, #small-dialog3 h3 {
padding-top: 30px;
color: #272727;
font-family: "great vibes", Arial, Helvetica, sans-serif;
font-size: 35px;
text-align: center;
}

#small-dialog h4, #small-dialog1 h4, #small-dialog2 h4, #small-dialog3 h4 { 
padding-top: 5px;
color: #272727;
line-height: 26px;
font-size: 12px;
font-style: italic;
text-align: center;}


/**
 * Fade-zoom animation for first dialog
 */

/* start state */
.my-mfp-zoom-in .zoom-anim-dialog {
	opacity: 0;

	-webkit-transition: all 0.2s ease-in-out; 
	-moz-transition: all 0.2s ease-in-out; 
	-o-transition: all 0.2s ease-in-out; 
	transition: all 0.2s ease-in-out; 
	-webkit-transform: scale(0.8); 
	-moz-transform: scale(0.8); 
	-ms-transform: scale(0.8); 
	-o-transform: scale(0.8); 
	transform: scale(0.8); 
}

/* animate in */
.my-mfp-zoom-in.mfp-ready .zoom-anim-dialog {
	opacity: 1;

	-webkit-transform: scale(1); 
	-moz-transform: scale(1); 
	-ms-transform: scale(1); 
	-o-transform: scale(1); 
	transform: scale(1); 
}

/* animate out */
.my-mfp-zoom-in.mfp-removing .zoom-anim-dialog {
	-webkit-transform: scale(0.8); 
	-moz-transform: scale(0.8); 
	-ms-transform: scale(0.8); 
	-o-transform: scale(0.8); 
	transform: scale(0.8); 

	opacity: 0;
}

/* Dark overlay, start state */
.my-mfp-zoom-in.mfp-bg {
	opacity: 0;
	-webkit-transition: opacity 0.3s ease-out; 
	-moz-transition: opacity 0.3s ease-out; 
	-o-transition: opacity 0.3s ease-out; 
	transition: opacity 0.3s ease-out;
}
/* animate in */
.my-mfp-zoom-in.mfp-ready.mfp-bg {
	opacity: 0.8;
}
/* animate out */
.my-mfp-zoom-in.mfp-removing.mfp-bg {
	opacity: 0;
}


/* padding-bottom and top for image */
.mfp-no-margins img.mfp-img {
	padding: 0;
}
/* position of shadow behind the image */
.mfp-no-margins .mfp-figure:after {
	top: 0;
	bottom: 0;
}
/* padding for main container */
.mfp-no-margins .mfp-container {
	padding: 0;
}



/* TWITTER FEED */


 
#loading-container {
    text-align:center;  
}
  
#twitter-feed {
    max-width:400px;
    margin-top:20px;
    margin-bottom: 40px;
    padding:8px 10px 5px 10px;
    border-radius:3px;
    background-color:#f0e9d3;
    color:#272727;
    overflow:auto;
}
  
#twitter-feed h1 {
    color:#272727;
    margin:0px;
    padding:9px 0px 9px 0px;
    font-size:18px;
    font-weight:lighter;    
}
  
.twitter-article, #loading-container {
    width:100%;
    border-top:1px solid #272727;
    float:left; 
    padding:8px 0px 8px 0px;
    position:relative;
} 
.twitter-pic {
    position:absolute;
    top: 30px;
}
  
.twitter-pic img {
    float:left;
    border-radius:7px;  
    border:none;
      
}
  
/* -------- TEXT STYLING ------*/
.twitter-text {
    width:100%;
    float:left;
    font-size:11px;
    padding-left:52px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.twitter-text p {
    margin:0px;
    line-height:15px;   
    color: #272727;
    font-size: 15px;
}
.twitter-text a,  h1 a {
    color: #fa5735;
    text-decoration: none;
}
.twitter-text a:hover,  h1 a:hover {
    text-decoration: underline;
    color: #fa5735;
}
  
.tweet-time {
    font-size:10px;
    color:#272727;
    float:right;
}
.tweet-time a, .tweet-time a:hover {
    color:#272727;
}
  
.tweetprofilelink a {
    color:#272727;
}
.tweetprofilelink a:hover {
    color:#272727;
}
  
/* -------- FEED  ACTIONS ------*/
#twitter-actions {
    width:75px;
    float:right;
    margin-right:5px;   
    margin-top:3px;
        display:none;
}
.intent {
    width:25px;
    height:16px;
    float:left; 
}
.intent a{
    width:25px;
    height:16px;
    display:block;
    background-image:url(../images/tweet-actions.png);
    float:left; 
} 
.intent a:hover{
    background-position:-25px 0px;
} 
  
#intent-retweet a{
    background-position:0px -17px;
} 
#intent-retweet a:hover{
    background-position:-25px -17px;
} 
#intent-fave a{
    background-position:0px -36px;
} 
#intent-fave a:hover{
    background-position:-25px -36px;
} 
  
/* -------- RETWEET INDICATOR ------*/
#retweet-indicator {
    width:14px;
    height:10px;
    background-image:url(../images/tweet-actions.png);
    background-position:-5px -54px;
    margin-top:3px;
    float:left;
}




/* -------- Photo Gallery (Elastislide) ------*/

.elastislide-list {
	list-style-type: none;
	display: none;
}

.no-js .elastislide-list {
	display: block;
}

.elastislide-carousel ul li {
	min-width: 20px; /* minimum width of the image (min width + border) */
}

.elastislide-wrapper {
	position: relative;
	background-color: #f0e9d3;
	margin: 0 auto;
	min-height: 180px;
	float: left;
	max-width: 860px;
}

.elastislide-wrapper.elastislide-loading {
	background-image: url(../images/loading.gif);
	background-repeat: no-repeat;
	background-position: center center;
}

.elastislide-horizontal {
	padding: 25px 40px;
}

.elastislide-vertical {
	padding: 15px 25px;
}

.elastislide-carousel {
	overflow: hidden;
	position: relative;
}

.elastislide-carousel ul {
	position: relative;
	display: block;
	list-style-type: none;
	padding: 0;
	margin: 0;
	-webkit-backface-visibility: hidden;
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
	-ms-transform: translateX(0px);
	-o-transform: translateX(0px);
	transform: translateX(0px);
}

.elastislide-horizontal ul {
	white-space: nowrap;
}

.elastislide-carousel ul li {
	margin: 0;
	-webkit-backface-visibility: hidden;
}

.elastislide-horizontal ul li {
	height: 100%;
	display: inline-block;
}

.elastislide-vertical ul li {
	display: block;
}

.elastislide-carousel ul li a {
	display: inline-block;
	width: 100%;
}

.elastislide-carousel ul li a img {
	display: block;
	border: 4px solid #f0e9d4;
	max-width: 100%;
}

/* Navigation Arrows */

.elastislide-wrapper nav span {
	position: absolute;
	background: #f6543b url(../images/nav.png) no-repeat 4px 3px;
	width: 23px;
	height: 23px;
	border-radius: 50%;
	text-indent: -9000px;
	cursor: pointer;
	opacity: 0.8;
}

.elastislide-wrapper nav span:hover {
	opacity: 1.0
}

.elastislide-horizontal nav span {
	top: 50%;
	left: 10px;
	margin-top: -11px;
}

.elastislide-vertical nav span {
	top: 10px;
	left: 50%;
	margin-left: -11px;
	background-position: -17px 5px;
}

.elastislide-horizontal nav span.elastislide-next {
	right: 10px;
	left: auto;
	background-position: 4px -17px;
}

.elastislide-vertical nav span.elastislide-next {
	bottom: 10px;
	top: auto;
	background-position: -17px -18px;
}


/* -------- MAGNIFIC POPUP ------*/

/* Magnific Popup CSS */
.mfp-bg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1042;
  overflow: hidden;
  position: fixed;
  background: #0b0b0b;
  opacity: 0.8;
  filter: alpha(opacity=80); }

.mfp-wrap {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1043;
  position: fixed;
  outline: none !important;
  -webkit-backface-visibility: hidden; }

.mfp-container {
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  padding: 0 8px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.mfp-container:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle; }

.mfp-align-top .mfp-container:before {
  display: none; }

.mfp-content {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 0 auto;
  text-align: left;
  z-index: 1045; }

.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
  width: 100%;
  cursor: auto; }

.mfp-ajax-cur {
  cursor: progress; }

.mfp-zoom-out-cur,
.mfp-zoom-out-cur .mfp-image-holder .mfp-close {
  cursor: -moz-zoom-out;
  cursor: -webkit-zoom-out;
  cursor: zoom-out; }

.mfp-zoom {
  cursor: pointer;
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in; }

.mfp-auto-cursor .mfp-content {
  cursor: auto; }

.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none; }

.mfp-loading.mfp-figure {
  display: none; }

.mfp-hide {
  display: none !important; }

.mfp-preloader {
  color: #cccccc;
  position: absolute;
  top: 50%;
  width: auto;
  text-align: center;
  margin-top: -0.8em;
  left: 8px;
  right: 8px;
  z-index: 1044; }

.mfp-preloader a {
  color: #cccccc; }

.mfp-preloader a:hover {
  color: white; }

.mfp-s-ready .mfp-preloader {
  display: none; }

.mfp-s-error .mfp-content {
  display: none; }

button.mfp-close,
button.mfp-arrow {
  overflow: visible;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
  display: block;
  padding: 0;
  z-index: 1046;
  -webkit-box-shadow: none;
  box-shadow: none; }
  

button::-moz-focus-inner {
  padding: 0;
  border: 0; }

.mfp-close {
  width: 44px;
  height: 44px;
  line-height: 44px;
  position: absolute;
  right: 0;
  top: 0;
  text-decoration: none;
  text-align: center;
  padding: 0 0 18px 10px;
  color: #f0e9d5;
  font-style: normal;
  font-size: 28px;
  font-family: Arial, Baskerville, monospace; }
  .mfp-close:hover, .mfp-close:focus {
    opacity: 1; }
  .mfp-close:active {
    top: 1px; }

.mfp-close-btn-in .mfp-close {
  color: #333333; }

.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
  color: #f0e9d5;
  right: -6px;
  text-align: right;
  padding-right: 6px;
  width: 100%; }

.mfp-counter {
  position: absolute;
  top: 0;
  right: 0;
  color: #cccccc;
  font-size: 12px;
  line-height: 18px; }

.mfp-arrow {
  position: absolute;
  margin: 0;
  top: 50%;
  margin-top: -55px;
  padding: 0;
  width: 90px;
  height: 110px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

.mfp-arrow:active {
  margin-top: -54px; }

.mfp-arrow:hover,
.mfp-arrow:focus {
  opacity: 1; }

.mfp-arrow:before, .mfp-arrow:after,
.mfp-arrow .mfp-b,
.mfp-arrow .mfp-a {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 0;
  top: 0;
  margin-top: 35px;
  margin-left: 35px;
  border: medium inset transparent; }
.mfp-arrow:after,
.mfp-arrow .mfp-a {
  border-top-width: 13px;
  border-bottom-width: 13px;
  top: 8px; }
.mfp-arrow:before,
.mfp-arrow .mfp-b {
  border-top-width: 21px;
  border-bottom-width: 21px; }

.mfp-arrow-left {
  left: 0; }
  .mfp-arrow-left:after,
  .mfp-arrow-left .mfp-a {
    border-right: 17px solid #f0e9d5;
    margin-left: 31px; }
  .mfp-arrow-left:before,
  .mfp-arrow-left .mfp-b {
    margin-left: 25px;
    border-right: 27px solid #fa5735; }

.mfp-arrow-right {
  right: 0; }
  .mfp-arrow-right:after,
  .mfp-arrow-right .mfp-a {
    border-left: 17px solid #f0e9d5;
    margin-left: 39px; }
  .mfp-arrow-right:before,
  .mfp-arrow-right .mfp-b {
    border-left: 27px solid #fa5735; }

.mfp-iframe-holder {
  padding-top: 40px;
  padding-bottom: 40px; }

.mfp-iframe-holder .mfp-content {
  line-height: 0;
  width: 100%;
  max-width: 900px; }

.mfp-iframe-scaler {
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-top: 56.25%; }

.mfp-iframe-scaler iframe {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: black; }

.mfp-iframe-holder .mfp-close {
  top: -40px; }

/* Main image in popup */
img.mfp-img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  line-height: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 40px 0 40px;
  margin: 0 auto; }

/* The shadow behind the image */
.mfp-figure:after {
  content: '';
  position: absolute;
  left: 0;
  top: 40px;
  bottom: 40px;
  display: block;
  right: 0;
  width: auto;
  height: auto;
  z-index: -1;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #444444; }

.mfp-figure {
  line-height: 0; }

.mfp-bottom-bar {
  margin-top: -36px;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  cursor: auto; }

.mfp-title {
  text-align: center;
  line-height: 22px;
  color: #f0e9d3;
  font-size: 12px;
  word-wrap: break-word;
  padding-right: 36px; }

.mfp-figure small {
  color: #bdbdbd;
  display: block;
  font-size: 12px;
  line-height: 14px; }

.mfp-image-holder .mfp-content {
  max-width: 100%; }

.mfp-gallery .mfp-image-holder .mfp-figure {
  cursor: pointer; }

@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
  /**
   * Remove all paddings around the image on small screen
   */
  .mfp-img-mobile .mfp-image-holder {
    padding-left: 0;
    padding-right: 0; }

  .mfp-img-mobile img.mfp-img {
    padding: 0; }

  /* The shadow behind the image */
  .mfp-img-mobile .mfp-figure:after {
    top: 0;
    bottom: 0; }

  .mfp-img-mobile .mfp-bottom-bar {
    background: rgba(0, 0, 0, 0.6);
    bottom: 0;
    margin: 0;
    top: auto;
    padding: 3px 5px;
    position: fixed;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; }

  .mfp-img-mobile .mfp-bottom-bar:empty {
    padding: 0; }

  .mfp-img-mobile .mfp-counter {
    right: 5px;
    top: 3px; }

  .mfp-img-mobile .mfp-close {
    top: 0;
    right: 0;
    width: 35px;
    height: 35px;
    line-height: 35px;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    text-align: center;
    padding: 0; }

  .mfp-img-mobile .mfp-figure small {
    display: inline;
    margin-left: 5px; } }
@media all and (max-width: 900px) {
  .mfp-arrow {
    -webkit-transform: scale(0.75);
    transform: scale(0.75); }

  .mfp-arrow-left {
    -webkit-transform-origin: 0;
    transform-origin: 0; }

  .mfp-arrow-right {
    -webkit-transform-origin: 100%;
    transform-origin: 100%; }

  .mfp-container {
    padding-left: 6px;
    padding-right: 6px; } }
.mfp-ie7 .mfp-img {
  padding: 0; }
.mfp-ie7 .mfp-bottom-bar {
  width: 600px;
  left: 50%;
  margin-left: -300px;
  margin-top: 5px;
  padding-bottom: 5px; }
.mfp-ie7 .mfp-container {
  padding: 0; }
.mfp-ie7 .mfp-content {
  padding-top: 44px; }
.mfp-ie7 .mfp-close {
  top: 0;
  right: 0;
  padding-top: 0; }