/************************************************************************************************************************
 DEFAULTS
************************************************************************************************************************/
*       { margin: 0px; padding: 0px; font-weight: 100; }
body    { background: #262626; font-family: 'Roboto Condensed'; font-weight: 400; }
ul      { list-style: none; list-style-type: none; }
a       { text-decoration: none; color: silver; }
a:hover { color: white; }
img     { border-style: none; border: none; }
.ajaxBusy { position: fixed; top: 0px; width: 32px; margin-right: auto; margin-left: auto; z-index: 9999; text-align: center; line-height: 50px;}

/******************************************************************************************************************************************************************************
 WEB FONT - BATCH
******************************************************************************************************************************************************************************/
 @font-face         { font-family: Batch; src: url('../images/font/batch-icons-webfont.eot'); src: local('?'), url('../images/font/batch-icons-webfont.woff') format('woff'), url('../images/font/batch-icons-webfont.ttf') format('truetype'), url('../images/font/batch-icons-webfont.svg#batch') format('svg'); font-weight: normal; font-style: normal; }
 @media screen and  (max-device-width: 480px) { @font-face { font-family: Batch; src: url("../images/font/batch-icons.woff") format("woff"), url("../images/font/batch-icons.otf") format("opentype"), url("../images/font/batch-icons.svg#batch") format("svg"); } }
.batch              { font-family: "Batch"; font-size: 16px; line-height: 1; display: inline-block; text-decoration: none; font-style: normal;  }
.batch:hover        { color: #fff; }
.batch:before       { content: attr(data-icon); margin-right: 3px; }
.batch-medium       { font-size: 32px; }
.batch-large        { font-size: 48px; }
.batch-xlarge       { font-size: 64px; }

/******************************************************************************************************************************************************************************
 WEB FONT - ARRROWS
******************************************************************************************************************************************************************************/
@font-face { font-family: 'ArrowsRegular'; src: url('../font/arrrows/arrrows-regular-webfont.eot'); src: url('../font/arrrows/arrrows-regular-webfont.eot?#iefix') format('embedded-opentype'), url('../font/arrrows/arrrows-regular-webfont.woff') format('woff'), url('../font/arrrows/arrrows-regular-webfont.ttf') format('truetype'), url('../font/arrrows/arrrows-regular-webfont.svg#ArrrowsRegular') format('svg'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'ArrowsBoldRegular'; src: url('../font/arrrows/arrrows-bold-webfont.eot'); src: url('../font/arrrows/arrrows-bold-webfont.eot?#iefix') format('embedded-opentype'), url('../font/arrrows/arrrows-bold-webfont.woff') format('woff'), url('../font/arrrows/arrrows-bold-webfont.ttf') format('truetype'), url('../font/arrrows/arrrows-bold-webfont.svg#ArrrowsBoldRegular') format('svg'); font-weight: normal; font-style: normal; }
.arrows { font-family: ArrowsRegular; font-size: 32px; } .arrowsbold { font-family: ArrowsBoldRegular; font-size: 32px; }

/************************************************************************************************************************
 DISPLAY STYLES
************************************************************************************************************************/
.nodisplay          { display: none; }
@media screen and (max-width: 600px) { .hide-on-mobile { display: none !important } 
                                       .show-on-mobile { display: normal !important } }
@media screen and (min-width: 600px) { .hide-on-desktop { display: none !important; } }
.display { display: inline !important; }

/************************************************************************************************************************
 FONT STYLES
************************************************************************************************************************/
.tiny-text { font-size: 0.8em; }.small-text { font-size: 0.9em } .normal-text { font-size: 1em } .large-text { font-size: 1.2em } .extra-large-text { font-size: 1.4em; } .hero-text { font-size: 1.8em; }
.light-text { font-weight: 300 } .medium-text { font-weight: 400 } .heavy-text { font-weight: 700 } 

/************************************************************************************************************************
 MATERIALIZE GOODIES: HTTP://MATERIALIZECSS.COM/ THANKS, ONLY NEEDED SOME OF IT
************************************************************************************************************************/
.z-depth-0 { box-shadow: none !important; } .z-depth-1 { box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); } .z-depth-2 { box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } .z-depth-3 { box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19); } .z-depth-4, .modal { box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rgba(0, 0, 0, 0.21); } .z-depth-5 { box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22); } .hoverable { transition: box-shadow .25s; box-shadow: 0; } .hoverable:hover { transition: box-shadow .25s; box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }

/************************************************************************************************************************
 OPACITY 
************************************************************************************************************************/
.opacity10 { opacity: 0.1 } .opacity20 { opacity: 0.2 } .opacity30 { opacity: 0.3 } .opacity40 { opacity: 0.4 } .opacity50 { opacity: 0.5 } .opacity60 { opacity: 0.6 } .opacity70 { opacity: 0.7 } .opacity80 { opacity: 0.8 } .opacity90 { opacity: 0.9 } .opacity95 { opacity: 0.95 } .opacity98 { opacity: 0.98 }
.opacity10:hover { opacity: 0.6; } .opacity20:hover { opacity: 0.6; } .opacity30:hover { opacity: 0.6; } .opacity40:hover { opacity: 0.8; } .opacity50:hover { opacity: 1; } .opacity60:hover { opacity: 1; } .opacity70:hover { opacity: 1; } .opacity80:hover { opacity: 1; } .opacity90:hover { opacity: 1; } .opacity95:hover { opacity: 1; } .opacity98:hover { opacity: 1; }

/************************************************************************************************************************
 WELLS
************************************************************************************************************************/
.well10 { padding: 10px } .well20 { padding: 20px } .well30 { padding: 30px } .well40 { padding: 40px } .well50 { padding: 50px }

/************************************************************************************************************************
 FLOATS
************************************************************************************************************************/
.clearboth { clear: both; float: left; } .left { float: left } .right { float: right }

/************************************************************************************************************************
 TEXT MANIPULATION
************************************************************************************************************************/
.uppercasefirstletter { text-transform: capitalize; }
 
/************************************************************************************************************************
 MODALS
************************************************************************************************************************/
.modal-close        { position: absolute; right: 5px; top: 10px; color: Silver; font-size: 0.8em; }
.modal-close:hover  { color: white; }

/************************************************************************************************************************
 EMBED BUTTON AND MODAL
************************************************************************************************************************/
a.embed  { height: 16px; padding: 6px 8px 10px 8px; }
.modal.embed        { position: fixed; width: 40%; border: 5px solid rgb(0,0,0); color: gray; background: #171717; z-index: 99999; }
.modal.embed img    { width: 100%; height: auto; cursor: zoom-in; }
.modal.embed input  { clear:both; width: 97%; }

@media screen and (max-width: 600px) {
    .modal.embed { width: 80%; }
    a.embed { margin-top: -5px; }
}

/************************************************************************************************************************
 BACKGROUND COLOURS
************************************************************************************************************************/
.black { background: #000 } .white { background: #fff } .silver { background: Silver }
.gray { background: #ABABAB } .gray.darken-1 { background: #737373 } .gray.darken-2 { background: #212121 }
.blue { background: #209AE6 } .blue.darken-1 { background: #135985 } .blue.darken-2 { background: #072233 }
.red { background: #BD1539 } .red.darken-1 { background: #850F27 } .red.darken-2 { background: #570A1A }
.yellow { background: #F2B632 } .yellow.darken-1 { background: #C99522 } .yellow.darken-2 { background: #9C731A }

/************************************************************************************************************************
 FORECOLOURS AND ASSOCIATED HYPERLINKS
************************************************************************************************************************/
.black-text, a.black-text { color: #000 } a.black-text:hover { color: #262626 }
.white-text, a.white-text { color: #fff } a.white-text:hover { color: #fff }
.silver-text, a.silver-text { color: #C0C0C0 } a.silver-text:hover { color: #ABABAB }

.gray-text, a.gray-text { color: #ABABAB }
.gray-text.text-darken-1, a.gray-text.text-darken-1, a.gray-text:hover { color: #737373 }
.gray-text.text-darken-2, a.gray-text.text-darken-2, a.gray-text.text-darken-1:hover { color: #212121 }
a.gray-text.text-darken-2:hover { color:#000  } 

.blue-text, a.blue-text { color: #209AE6 }
.blue-text.text-darken-1, a.blue-text.text-darken-2, a.blue-text:hover { color: #135985 }
.blue-text.text-darken-2, a.blue-text.text-darken-2, a.blue-text.text-darken-1:hover { color: #072233 }
a.blue-text.text-darken-2:hover { color: #000; }

.red-text, a.red-text { color: #BD1539 }
.red-text.text-darken-1, a.red-text.text-darken-1, a.red-text:hover { color: #850F27 }
.red-text.text-darken-2, a.red-text.text-darken-2, a.red-text.text-darken-1:hover { color: #570A1A }
a.red-text.text-darken-2:hover { color: #000 }

.yellow-text, a.yellow-text { color: #F2B632 }
.yellow-text.text-darken-1, a.yellow-text.text-darken-1, a.yellow-text:hover { color: #C99522 }
.yellow-text.text-darken-2, a.yellow-text.text-darken-2, a.yellow-text.text-darken-1:hover { color: #9C731A }
a.yellow-text.text-darken-2:hover { color: #000 }

/************************************************************************************************************************
 BUTTONS
************************************************************************************************************************/
.btn                { background: #262626; padding: 5px 10px; text-decoration: none; color: White; border:none; border-radius: 0px; }
.btn:hover          { cursor: pointer; color: white; }
.btn-info           { background-color: #209AE6; }
.btn-info:hover     { background-color: #1B84C4; }
.btn-success        { background-color: #50BA2D; }
.btn-success:hover  { background-color: #409623; }
.btn-danger         { background-color: #BD1539; }
.btn-danger:hover   { background-color: #9C112F; }
.btn-slideshow      { background-color: #E04C1B; }
.btn-slideshow:hover { background-color: #E04C1B; }
.btn-gray           { background-color: rgb(80,80,80); opacity: 0.9; }
.btn-gray:hover     { background-color: #209AE6; }
.btn-silver         { background-color: rgb(220,220,220); color: #072233; }
.btn-silver:hover   { background-color: rgb(240,240,240); color: #135985; }
.btn-small          { font-size: 0.75em; padding: 2px 2px 2px 2px; }
.btn-small img      { width: 16px; height: 16px; margin: 5px 2px 2px 2px; }

/************************************************************************************************************************
 BACKGROUND IMAGES
************************************************************************************************************************/
#wrapper             { margin-top: 0px; padding-top: 0px; display: none; }

@media screen and (max-width: 600px) {
  #wrapper { padding-top: 70px; }
}

/************************************************************************************************************************
 BACKGROUND IMAGES
************************************************************************************************************************/
.background          { position: fixed; left: 0px; top: 0px; z-index: -99; border:none; background: transparent url(../images/patterns/pattern.png) left top repeat; width: 100%; height: 100%; }
.dotmatrix           { opacity: 0.4; z-index: -98; background: transparent url(../images/patterns/pattern.png) left top repeat; position: fixed; left: 0px; top: 0px; height: 100%; width: 100%; }

@media screen and (max-width: 600px) {
  .background.hide-on-mobile { display: none !important; }
}

/************************************************************************************************************************
 NAV BAR
************************************************************************************************************************/
.navbar-background { position: fixed; top: 0; left: 0; height: 50px; width: 100%; z-index: 9000; }
ul.navbar          { position: fixed; top: 0; left: 0; height: 50px; width: 100%; z-index: 9001; }
ul.navbar li       { display: inline; line-height: 50px; }
ul.navbar li.logo  { float: left; margin: 0 15px 0 10px; }
ul.navbar li.left  { float: left; margin-right: 15px; }
ul.navbar li.right { float: right; margin-right: 30px; }
ul.navbar li.right.first { margin-right: 10px; }

/************************************************************************************************************************
 TOP BAR
************************************************************************************************************************/
#topbar               { position: absolute; top: 0px; left: 0px; width: 100%; font-size: 0.9em; background-color: #0A0A0A; opacity: 0.9; padding-bottom: 8px; }
#topbar a             { font-size: 1em; color: Silver; margin: 9px 10px 0px 10px; text-decoration: none; float: left; }
#topbar a:hover       { color: #209AE6; }
#topbar a.menu        { padding-left: 5px; float: right; }
#topbar a.menuhighvis { color: #209AE6; padding-left: 5px; }
#topbar a.logo        { color: White; font-size:0.9em; font-size: 1em; margin-top: 9px; font-weight: lighter; }
#topbar a.logo:hover  { color: silver; cursor: pointer;  }
#topbar a.logo strong { color: #209AE6; margin-left: 3px; font-weight: normal; }
#topbar a.logo span   { color: gray;margin-left: 5px; }
#topbar a.selected    { color: #009DFF; font-family: 'Roboto Condensed'}
#topbar a.bold        { font-weight: bold; }
#topbar span          { font-size: 1em; color: Silver; margin: 9px 10px 0px 10px; text-decoration: none; float: left; }

/************************************************************************************************************************
 PAGE NAVIGATION
************************************************************************************************************************/
.navigation         { padding: 20px 1px 22px 1px; border-radius: 0px; z-index: 9999; }
.navigation:hover   { cursor:pointer; opacity: 1; }
.navigation:hover a  { cursor:pointer; opacity: 1; font-size: 32px; color: white; }
.navigation a       { font-size: 32px; }
.navigation-left    { position: fixed; left: -1px; }
.navigation-right   { position: fixed; right: -1px; }

/************************************************************************************************************************
 INPUTS
************************************************************************************************************************/
fieldset            { border: none; }
input               { padding: 5px; color: #262626; width: 250px; border: 1px solid black; font-family: 'Roboto Condensed'; border-radius: 0px; font-size: 1em;}
textarea            { padding: 5px; color: #262626; width: 250px; border: 1px solid black; font-family: 'Roboto Condensed'; border-radius: 0px; }

/************************************************************************************************************************
 QUOTE AND ASSOCIATED CONTROLS
************************************************************************************************************************/
#footer             { position: fixed; z-index: 1000; bottom: 10%; left: 5%; width: 60%; }
#footertext         { margin-bottom: 5px; width: 100%; border: 1px solid black; border-radius: 2px; }
#footertext h3.date { color:#000; padding: 10px 10px 12px 10px; font-size: 1.4em; text-align: center; opacity: 0.5; font-weight: 100; }
#footertext h1      { position: relative; float: left; margin-bottom: 10px;  }
#footertext a       { position: relative; float: left; margin-bottom: 20px; clear: both; }
#footercontrols a           { position: relative; float: left; text-align: center; font-weight: bold; }
#footercontrols a.gap       { border: none; width: 10px; height: 5px; }
#footercontrols a.like      { width: 70px; margin-left: 10px; text-align: left; }
#footercontrols a.like span { position: absolute; left: 30px; top: 6px; font-weight: bold;}
#footercontrols img         { width: 16px; height: 16px; margin: 8px 8px 5px 8px; position: relative; }
#footercontrols a.original  { font-size: 16px; width: 120px; height: 16px; padding: 8px 8px 9px 8px; }
#footercontrols a.original:hover  { cursor: pointer; }
#footercontrols a.videotime  { width: 50px; height: 16px; padding: 8px 8px 9px 8px; }
#footercontrols a.videotime:hover { cursor:default; }
#footercontrols input { border: none; width: 50%; height: 22px; margin-left: 5px; }

/************************************************************************************************************************
 RELATED CONTENT RESPONSIVE
************************************************************************************************************************/
.relatedcontent { position: absolute; z-index: 1000; right: 0px; top: 0px; width: 290px; padding: 50px 15px 80px 0px; border: 1px solid black; }
.relatedcontentsection { margin-bottom: 20px; position: relative; float: left; }
.relatedcontentsection h2 { position: relative; float: left; font-size: 1em; margin-bottom: 5px; padding: 5px 0 5px 1%; width: 99%; }
.relatedcontentsection p { position: relative; float: left; font-size: 0.9em; width:100%; line-height: 1.6em; }
.relatedcontentsection a.btn { position: relative; float: left; font-size: 0.9em; width: 90%; border-left: 5px solid #135985; background: #262626; margin-bottom: 3px; }
.relatedcontentsection .card-panel.card-panel-related-content-section { position: relative; float: left;  font-size: 0.9em; margin: 10px 0 0px 0; width: 100%; border: none; opacity: 1.0; }
.relatedcontentsection .card-panel.card-panel-related-content-section .related { display: none; }
.relatedcontentsection .card-panel.card-panel-related-content-section .quote { position: absolute; bottom: 0%; left: 0%; width: 90%; color: white; opacity: 0.8; padding: 5%; background: #161616; }

/************************************************************************************************************************
 RESPONSIVE FOR FOOTER AND RELATED CONTENT
************************************************************************************************************************/
@media screen and (max-width: 600px) {
  #footer { display: none; }
  .relatedcontent { position: relative; float: left; top: 0; right: 0; padding: 0; width: 90%; margin-left: 4%; height: 1000px; }
  .relatedcontentsection h2 { font-size: 1.2em; margin-bottom: 0px;  width: 100%; }
  .relatedcontent p { font-size: 1.1em; }
  .relatedcontent a.btn { font-size: 1.1em; }
  .relatedcontentsection .card-panel.card-panel-related-content-section { width: 100%; position: relative; float: left;  margin: 10px 0 10px 0; border: none; opacity: 1.0; border-radius: 5px; font-size: 1em; }
  .relatedcontentsection .card-panel.card-panel-related-content-section .quote { position: relative; width: 94%; background: #161616; color: white; opacity: 0.9; padding: 3% 3% 5% 3% }
}

/************************************************************************************************************************
 QUOTE PAGE - LIKING AND SHARING ON MOBILE
************************************************************************************************************************/
.mobile-item-sharing { position: relative; float: left; margin: 10px 0px 20px 30px; width: 80%; }
.mobile-item-sharing a { position: relative; float: left; }
.mobile-item-sharing a.like      { width: 70px; margin-left: 10px; text-align: left; height: 32px; margin-right: 5px; }
.mobile-item-sharing a.like img  { width: 16px; height: 16px; margin: 8px 8px 4px 8px; position: relative; }
.mobile-item-sharing a.like span { position: absolute; left: 30px; top: 6px; font-weight: bold;}

/******************************************************************************************************************************************************************************
 SEARCH INPUT
******************************************************************************************************************************************************************************/
#search             { position: absolute; left: 0px; top: 50px; height: 50px; padding-top: 8px; width: 100%; z-index: 9999; display: none; }
#search input       { position: relative; float: left; width: 75%; margin-left: 10px; line-height: 30px; }
#search .btn        { position: relative; float: left; width: 15%; margin-left: 10px; line-height: 31px; font-size: 1.2em; padding: 5px; }
#search .btn:hover  { background: #1A7EBD; }
    
/******************************************************************************************************************************************************************************
 SLIDESHOW BULLETS
******************************************************************************************************************************************************************************/
div#slideshowbullets    { font-size: 0.7em; position: absolute; bottom: 25px; right: 0px; z-index: 9999; }
ul#ssbullets            { background: none; vertical-align: middle; list-style-type: none; text-align: center; background: white; }
ul#ssbullets li         { background: rgb(80,80,80); opacity: 0.85; width: 12px; height: 12px; color: silver; margin-right: 3px; float: left; }
ul#ssbullets li:hover   { cursor:pointer; background: white; }
ul#ssbullets li.active  { background: #209AE6; color: #209AE6; }

/******************************************************************************************************************************************************************************
 PAGE FOOTER
******************************************************************************************************************************************************************************/
#pagefooter              { position: fixed; bottom: 0px; left: 0px; width: 100%; font-size: 0.9em; height:32px; z-index: 9998; }
#pagefooter span         { float:left; color:white; line-height: 36px; margin-left: 10px; }
#pagefooter a            { font-size: 0.9em; line-height: 32px; }
#pagefooter a.tag        { margin-left: 10px; float:left; position:relative; }
#pagefooter a.info       { float: right; margin-right: 20px; }
#pagefooter a.info.spacer  { margin-left: 20px; }

/******************************************************************************************************************************************************************************
 ABOUT FORM
******************************************************************************************************************************************************************************/
#about              { font-size: 0.9em; position: fixed; z-index: 9999; border: 1px solid black; bottom: 50px; right: 10px; width: 300px; display: none; }
#about h2           { color: White; margin-top: 5px; margin-bottom: 10px; position: relative; float: left; }
#about p            { clear: both; color: Silver; }
#about img          { width: 32px; height: 32px; }

/******************************************************************************************************************************************************************************
 CONTACT FORM
******************************************************************************************************************************************************************************/
#contact            { font-size: 0.9em; position: fixed; z-index: 9999; border: 1px solid black; bottom: 50px; right: 10px; width: 300px; display: none; }
#contact h2         { color: White; margin-bottom: 10px; position: relative; float: left; margin-top: 5px; }
#contact img        { width: 32px; height: 32px; }
#contact .btn       { width: 60px; }

/******************************************************************************************************************************************************************************
 DONATE FORM
******************************************************************************************************************************************************************************/
#donate             { font-size: 0.9em; position: fixed; z-index: 9999; border: 1px solid black; bottom: 50px; right: 10px; width: 300px; display: none; }
#donate h2          { color: White; margin-top: 5px; margin-bottom: 10px; position: relative; float: left; }
#donate p           { clear: both; color: Silver; }
#donate img         { width: 86px; height: 21px; }
#donate .btn        { width: 60px; margin-left: 1px; }

/******************************************************************************************************************************************************************************
 REGISTER FORM
******************************************************************************************************************************************************************************/
#register           { display:none; z-index: 9999; border: 5px solid rgb(40,40,40); color: gray; position: fixed; left: 200px; top: 200px; background: #171717; width: 400px; -moz-box-shadow: 0 0 5px 20px rgba(0,0,0,0.95); -webkit-box-shadow: 0 0 5px 20px rgba(0,0,0,0.95); box-shadow: 0px 10px 20px rgba(0,0,0,0.95);}
#register img       { width: 24px; height: 24px; position: relative; float: left; margin-right: 5px;  }
#register h3        { color: #209AE6; margin-bottom: 5px; margin-top: 0px; position: relative; float: left; font-size: 1.6em;}
#register p         { color: white; margin-bottom: 20px; position: relative; float: left; }
#register p strong  { color: white; font-weight: normal; }
#register a         { margin-right: 10px; float: left; margin-bottom: 20px; }
#register p.small   { font-size: 0.75em; color: Gray; margin-top: 15px; margin-bottom: 10px; }
#register img.bbc   { width: 140px; height: 80px; opacity: 0.7; border: 2px solid rgb(40,40,40); }
#register img.bbc:hover { opacity: 1; }

/************************************************************************************************************************
 PACKERY RELATED ELEMENTS
/***********************************************************************************************************************/
.stream { margin: 70px 0% 50px 1%; width: auto; }
.packery { margin-bottom: 40px; display: none;}

/* DEFAULT PACKERY SIZING - 5 COLUMNS */
.packerygridsizer   { width: 18%; }
.packeryguttersizer { width: 2%; }
.card-panel         { width: 18%; position: relative; float: left; }
.card-panel-full    { width: 100%; }

/* MEDIUM SCREEN - 3 COLUMNS */
@media screen and (min-width: 601px) and (max-width: 992px) {
  .packerygridsizer { width: 31%; }
  .packeryguttersizer{ width: 2%; }
  .card-panel { width: 31%; }
}

/* SMALL SCREEN - 1 COLUMN */
@media screen and (max-width: 600px) {
  .packerygridsizer { width: 90%; }
  .packeryguttersizer { width: 4%; }
  .card-panel { width: 90%; margin-left: 4%; }
}

.stream.articles .packery .card-panel img { height: 150px; }

.stream.picturequotes .packery .packeryguttersizer { width: 1%; }
.stream.picturequotes .packery .card-panel { width: 24%; height: 240px; }
.stream.picturequotes .packery .card-panel.card-panel-fixed-header { width: 24%; height: 240px !important; }
.stream.picturequotes .packery .card-panel a.tag { font-size: 0.8em; margin: 5px 0px 10px 8px; padding: 2px; float: left; border: 1px solid #363636; border-radius: 3px; }
.stream.picturequotes .packery .card-panel a.tag.cloud { margin-left: 2px; }
.stream.picturequotes .packery .card-panel a.download { position: absolute; right: 93px; top: 11px; height: 16px; padding: 8px; }
.stream.picturequotes .packery .card-panel a.card-panel-like { float: right; bottom: 10px; margin-top: 7px; margin-right: 10px; }
.stream.picturequotes .packery .card-panel input { margin-bottom: 20px; }
.stream.picturequotes .packery .card-panel a.download-link { border-bottom: 1px dotted silver; margin-right: 10px; }

.stream.picturequotes .packery .card-panel.card-panel-w2 { width: 49%; height: 490px; }
.stream.picturequotes .packery .card-panel.card-panel-w3 { width: 74%; height: 490px; }
.stream.picturequotes .packery .card-panel.card-panel-w4 { width: 99%; height: 490px; }
.stream.picturequotes .packery .card-panel img { height: 200px !important; object-fit: fill; }
.stream.picturequotes .packery .card-panel img:hover { cursor: zoom-in; }
.stream.picturequotes .packery .card-panel.card-panel-w2 img { height: 450px !important; object-fit: fill; }
.stream.picturequotes .packery .card-panel.card-panel-w3 img { height: 450px !important; object-fit: fill; }
.stream.picturequotes .packery .card-panel.card-panel-w4 img { height: 450px !important; object-fit: fill; }

@media screen and (max-width: 600px) {
    .stream.picturequotes .packery .packerygridsizer { width: 98%; }
    .stream.picturequotes .packery .packeryguttersizer { width: 1%; }
    .stream.picturequotes .packery .card-panel { width: 98%; margin-left: 1%; height: auto !important; }
    .stream.picturequotes .packery .card-panel.card-panel-fixed-header { width: 98%; margin-left: 1%; }
    .stream.picturequotes .packery .card-panel.card-panel-w2 { width: 98%; margin-left: 1%; height: auto !important; }
    .stream.picturequotes .packery .card-panel.card-panel-w3 { width: 98%; margin-left: 1%; height: auto !important; }
    .stream.picturequotes .packery .card-panel img { width: 100% !important; height: auto !important; }
    .stream.picturequotes .packery .card-panel.card-panel-w2 img { width: 100% !important; height: auto !important; }
    .stream.picturequotes .packery .card-panel.card-panel-w3 img { width: 100% !important; height: auto !important; }
    .stream.picturequotes .packery .card-panel.card-panel-w4 img { width: 100% !important; height: auto !important; }
}

.card-panel .card-panel-header { text-align: center; }
.card-panel .card-panel-header .social .fb-share-button span { top: -4px; }
.card-panel .card-panel-header .social .pw-widget.autohide { display: none; position: absolute; left: 0px; top: -15px; text-align: left; }
/*.card-panel:hover .card-panel-header .social .pw-widget.autohide { display: inline; }*/

.card-panel.button { border: 1px solid silver; text-align: center; font-size: 1.6em; font-weight: 700; }

.card-panel.card-panel-icon-only { text-align: center; vertical-align: middle; }
.card-panel.card-panel-icon-only a { font-size: 2em; vertical-align: middle; }

.card-panel.card-panel-text-only { text-align: center; vertical-align: middle; }

.card-panel img { width: 100%; height: auto; object-fit: cover;  }
.card-panel img:hover { opacity: 0.85; }

.card-panel a.primary-text { font-size: 1.4em; font-weight: 700; }
.card-panel a.secondary-text { font-size: 1em; font-weight: 100; }

.card-panel .related { min-height: 60px; }
.card-panel .related p { width: 80%; }
.card-panel .related a { margin-right: 5px; font-size: 0.9em;  }
.card-panel .related a.card-panel-like { position: absolute; right: 20px; bottom: 20px; }

.card-panel a.embed { position: absolute; right: 10px; top: 11px; height: 16px; padding: 8px; display: none; margin-left: 1px; }
.card-panel:hover a.embed { display: inline; }
.card-panel a.download { position: absolute; right: 46px; top: 11px; height: 16px; padding: 8px; display: none; }
.card-panel:hover a.download { display: inline; }

.card-panel .social-buttons-autohide { position: absolute; left: 10px; top: 11px; display: none; }
.card-panel:hover .social-buttons-autohide { display: inline; }

.card-panel .alpha-letter { width: 30%; position: relative; float: left; text-align: center; }
.card-panel .alpha-letter a.heading { font-size: 5em; }
.card-panel .alpha-letter a.subheading { font-size: 1em; }

.card-panel .alpha-people { width: 70%; position: relative; float: left; }
.card-panel .alpha-people a { font-size: 0.9em; width: 100%; position: relative; float: left;}

.card-panel .alpha-tags { width: 70%; position: relative; float: left; }
.card-panel .alpha-tags a { font-size: 0.9em; width: 100%; position: relative; float: left;}

.card-panel .pw-widget { position: relative; float: left; width: 100%; margin-bottom: 20px; }
.card-panel a.pw-button { text-align: center; }

.card-panel input { width: 150px; margin-top: 5px; padding: 10px; }
.card-panel .btn { width: 170px; margin-top: 20px; padding: 10px; }

/************************************************************************************************************************
 ALPHABETICAL LISTING
************************************************************************************************************************/
ul.alpha-listing { position: relative; float: left; }
ul.alpha-listing li { display: inline; width: 3.5%; }
ul.alpha-listing li a { font-size: 1em; padding: 5px; }
ul.alpha-listing li.active a { font-weight: 700; }

/************************************************************************************************************************
 PAGINATION
************************************************************************************************************************/
ul.pagination { position: relative; text-align: center; margin: 60px 0; }
ul.pagination li { display: inline; margin-right: 3px; }
ul.pagination li a { border: 1px solid #363636; font-size: 1.2em; padding: 5px; }
ul.pagination li.active a { border: 1px solid white; }

/************************************************************************************************************************
 GENERAL UL
************************************************************************************************************************/
ul.general { position: relative; float: left; }
ul.general li { display: inline-block; }
ul.general li a { font-size: 1em; padding: 5px; }
ul.general li.active a { font-weight: 700; }

/************************************************************************************************************************
 ARTICLE
************************************************************************************************************************/
.article-container { margin: 70px 10px 200px 10px; width: 800px; max-width: calc(100% - 340px); color: silver; background: #161616; box-sizing: border-box; padding: 50px; }
.article-container.fullscreen { position: fixed; left: 0; top: 0; width: 100%; max-width: 100%; margin: 0; padding: 80px 20%; height: 100%; overflow: auto; display: block; z-index: 9999; }

.article-container .article-buttons { position: relative; right: -20px; top: -20px; }

.article-container .article-buttons a.article-maximise { float: right; margin-left: 10px; padding: 6px; border: none; width: 28px; height: 28px; border-radius: 28px; background: gray; box-sizing: border-box; opacity: 0.8; }
.article-container .article-buttons a.article-maximise:hover { opacity: 1; }
.article-container .article-buttons a.article-maximise i.batch { color: silver; border: none; display: block; }
.article-container .article-buttons a.article-maximise i.batch:hover { color: silver; }
.article-container .article-buttons a.article-maximise:hover i.batch { display: block; }

.article-container .article-buttons a.article-theme { float: right; margin-left: 10px; width: 28px; height: 28px; border-radius: 28px; box-sizing: border-box; text-decoration: none; opacity: 0.8; }
.article-container .article-buttons a.article-theme:hover { text-decoration: none; border: none; opacity: 1; }
.article-container .article-buttons a.article-theme.black { background: #464646; border: none; }
.article-container .article-buttons a.article-theme.white { background: rgb(240,240,240); border: none; }
.article-container .article-buttons a.article-theme.blue { background: #209AE6; border: none; }
.article-container .article-buttons a.article-theme.active { border: none; }

.article-container h1 { font-size: 3em; font-weight: 700; margin: 0px 0px 20px 0px; padding: 0;}
.article-container h2 { font-size: 2em; font-weight: 700; margin-bottom: 10px; padding: 0;}
.article-container h3 { font-size: 1.8em; font-weight: 700; margin-bottom: 10px; padding: 0;}
.article-container h4 { font-size: 1.6em; font-weight: 700; margin-bottom: 10px; padding: 0;}
.article-container h5 { font-size: 1.4em; font-weight: 700; margin-bottom: 10px; padding: 0;}
.article-container p { font-size: 1.4em; margin-bottom: 40px; line-height: 1.5em; }
.article-container a { color: silver; border-bottom: 1px solid #565656; } 
.article-container b { font-weight: 700; }
.article-container a:hover { color: silver; } 
.article-container blockquote { font-size: 1.8em; border-left: 5px solid silver; padding-left: 50px; margin: 60px 0px 60px 0px; color: gray; font-style: italic; width: 80%; }
.article-container div.medium-insert-images { margin-bottom: 20px; }
.article-container .article-comments { margin-top: 80px; }

.article-container .article-title { margin: 50px 0px 0px 0px; }
.article-container .article-intro { font-weight: 100; color: gray; }
.article-container .article-subtitle{ margin: 35px 0px 8px 0px; color: gray;}
.article-container .article-readingtime { margin: 0px 0px 0px 0px; font-size: 1em; color: gray; opacity: 0.5; }

.article-container a.tag { font-size: 1em; margin: 5px 10px 10px 0px; padding: 5px; border: 1px solid #363636; border-radius: 3px; }

.article-container.theme-white { background: white; color: #161616; }
.article-container.theme-white a { color: black; border-bottom: 1px solid #565656; } 
.article-container.theme-white blockquote { color: black; }

.article-container.theme-blue { background: #072233; color: white; }
.article-container.theme-blue h2 { color: #209AE6; }
.article-container.theme-blue h3 { color: #209AE6; }
.article-container.theme-blue h4 { color: #209AE6; }
.article-container.theme-blue h5 { color: #209AE6; }
.article-container.theme-blue p { color: #209AE6; }
.article-container.theme-blue a { color: #209AE6; border-bottom: 1px solid #135985; }
.article-container.theme-blue blockquote { border-color: #135985; color: #209AE6; }
.article-container.theme-blue .article-title { color: #209AE6; }
.article-container.theme-blue .article-intro { color: #135985 !important; }
.article-container.theme-blue .article-subttitle { color: silver !important; }

.article-container .pw-widget { border: none; }
.article-container a.pw-button { margin-bottom: 40px; text-decoration: none; border: none; }

@media screen and ( max-width: 600px) {
    .article-container { box-sizing: border-box; width: calc(100%-40px); max-width: 100%; padding: 20px; margin: 50px 0px 50px 0px; }
    .article-container.fullscreen { position: fixed; left: 0; top: 0; width: 100%; max-width: 100%; margin: 0; padding: 80px 20px; height: 100%; overflow: auto; display: block; z-index: 9999; }
    .article-container .article-buttons { position: relative; right: 0px; top: 0px; margin-bottom: 20px; }
    .article-container .article-buttons a.article-theme { width: 32px; height: 32px; border-radius: 32px; }
}

/************************************************************************************************************************
 MEDIUM INSERT PLUGIN FRONT END CSS
************************************************************************************************************************/
.medium-insert-images, .mediumInsert { text-align: center; }
.medium-insert-images figure, .mediumInsert figure { margin: 0; display: block; } 
.medium-insert-images figure img, .mediumInsert figure img { max-width: 100%; margin-top: 1em; vertical-align: top; margin-bottom: 20px; }
.medium-insert-images figure:first-child img, .mediumInsert figure:first-child img { margin-top: 0; }
.medium-insert-images.medium-insert-images-left, .medium-insert-images-left.mediumInsert, .mediumInsert.small { max-width: 33.33%; float: left; margin: 0 30px 20px 0; }
.medium-insert-images.medium-insert-images-right, .medium-insert-images-right.mediumInsert { max-width: 33.33%; float: right; margin: 0 0 20px 30px; } 
.medium-insert-images.medium-insert-images-grid, .medium-insert-images-grid.mediumInsert { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; margin: 0.5em -0.5em; }
.medium-insert-images.medium-insert-images-grid figure, .medium-insert-images-grid.mediumInsert figure { width: 33.33%; display: inline-block; } 
.medium-insert-images.medium-insert-images-grid figure img, .medium-insert-images-grid.mediumInsert figure img { max-width: calc(100% - 1em); margin: 0.5em; }
.medium-insert-embeds, .mediumInsert-embeds { text-align: center; margin: 1em 0; position: relative; }
.medium-insert-embeds iframe, .mediumInsert-embeds iframe { margin: 0 auto !important; }
.medium-insert-embeds div, .mediumInsert-embeds div { margin: 0 auto !important; }
.medium-insert-embeds.medium-insert-embeds-left, .medium-insert-embeds-left.mediumInsert-embeds { width: 33.33%; float: left; margin: 0 30px 20px 0; } .medium-insert-embeds.medium-insert-embeds-right, .medium-insert-embeds-right.mediumInsert-embeds { width: 33.33%; float: right; margin: 0 0 20px 30px; }
.medium-insert-images figure, .mediumInsert figure, .medium-insert-embeds figure, .mediumInsert-embeds figure { position: relative; }
.medium-insert-images figure figcaption, .mediumInsert figure figcaption, .medium-insert-embeds figure figcaption, .mediumInsert-embeds figure figcaption { position: relative; z-index: 1; display: block; text-align: center; margin: 10px 0; color: #ccc; font-size: 0.8em; font-style: italic; outline: 0 solid transparent; }
.medium-insert-images figure figcaption:focus, .mediumInsert figure figcaption:focus, .medium-insert-embeds figure figcaption:focus, .mediumInsert-embeds figure figcaption:focus { outline: 0 solid transparent; }

/************************************************************************************************************************
 ADS
************************************************************************************************************************/
.ad.banner { margin-top: 80px; margin-left: 40px;  }

.post-message-container .post-message p { color: white !important; }