body {background-color:#EEEEEE; color:#000000; font-size:15px; font-family:'Open Sans', arial, helvetica, sans-serif; line-height:25px; margin:auto; text-align:center; letter-spacing:0;}

a:link {color:#223067; text-decoration:none;}
a:visited {color:#223067;}
a:hover {color:#000000; text-decoration:underline;}
a:active {color:#223067;}

.bodyleft {display:inline-block; width:100%;}

.contentarea {display:block; background-color:#FAFAFA; padding:16px 85px 25px 85px; max-width:800px; margin:auto; text-align:left; font-size:16px;}

.menucontainer {display:block; margin-bottom:30px;}
.menubar {text-align:center; background-color:#CCCCCC; padding:5px; border-radius:5px;}
.menubar a:link {background-color:#223067; color:#FFFFFF; padding:5px 16px; text-decoration:none; display:inline-block; font-size:15px; margin-left:5px; margin-right:5px; border-radius:5px;}
.menubar a:visited {background-color:#223067; color:#FFFFFF;}
.menubar a:hover {background-color:#000000; color:#FFFFFF;}
.menubar a:active {background-color:#223067; color:#FFFFFF;}
a.mobilemenu {display:none;}
.menuactive {background-color:#000000 !important;}

.filters {display:block; margin:30px 0 20px 0;}
.filterleft {display:inline-block; width:49%; vertical-align:middle;}
.filterleft select {height:30px; padding-left:5px; font-size:16px; font-family:'Open Sans', arial, helvetica, sans-serif;}
.filterright {display:inline-block; width:49%; text-align:right; vertical-align:middle;}
.filterright a {display:inline-block; vertical-align:middle; width:25px; height:25px; padding:5px; margin:0 3px; background-color:#223067; border-radius:5px;}
.filterright a:hover {background-color:#000000;}
.filterright a img {width:25px; height:25px;}

.header {display:block; background-color:#000000; width:100%;}
.header img {width:100%; max-width:800px;}

.crumbtrail {font-size:11px;}

h1 {font-size:20px; margin:10px 0 10px 0; font-weight:bold; line-height:30px;}

h2 {font-size:20px; margin:10px 0 10px 0; font-weight:bold; line-height:30px;}

.storyitem {display:block; padding-bottom:40px; margin-bottom:30px; border-bottom:1px dashed #AAAAAA;}
.storyitemleft {width:150px; vertical-align:top; padding-top:18px;}
.firstitem {width:316px !important;}
.storyitemright {vertical-align:top; font-size:15px; line-height:25px;}
.storyitemreadmore {display:inline-block; margin-top:10px;}
.storyitemad {display:block; margin-bottom:30px; border-bottom:1px dashed #AAAAAA;}
.storynotes {color:#555555;}
.storynotes a:link {color:#555555; text-decoration:underline;}
.storynotes a:visited {color:#555555;}
.storynotes a:hover {color:#000000;}
.storynotes a:active {color:#555555;}

.articlecontent {display:block;}
.articlecontent a:link {text-decoration:underline;}
.articlefloat {position:fixed; z-index:2; right:10px; top:55px;}
.articleimage {width:100%;}
.articleimage img {width:100%;}
.imagecaption {display:block; padding:3px 0; width:100%; background-color:#CCCCCC; font-size:11px;}
.imagecaptioninner {display:block; padding:0 10px; width:95%;}

.analysis {background-color:#e6ebfe; padding:15px 20px; width:auto; display:block; border-radius:10px;}
.quote {background-color:#ffffff; padding:15px 20px; width:auto; display:block; border-radius:10px; line-height:30px;}

.desktopcontent {display:block;}
.mobilecontent {display:none;}

.ad-desktop {display:block; margin:auto; max-width:800px; border:1px solid #009ad4;}
.ad-mobile {display:none; margin:auto; max-width:350px; border:1px solid #009ad4;}

a.button:link {background-color:#223067; color:#FFFFFF; padding:5px 16px; text-decoration:none; display:inline-block; font-size:15px; border-radius:5px; text-transform:uppercase;}
a.button:visited {background-color:#223067; color:#FFFFFF;}
a.button:hover {background-color:#000000; color:#FFFFFF;}
a.button:active {background-color:#223067; color:#FFFFFF;}

.recommendations {display:block; width:100%; font-size:15px;}
a.rec {display:inline-block; width:27%; padding:2.5%; margin:0.5%; background-color:#EEEEEE; text-decoration:none !important; vertical-align:top;}
.recimage img {width:100%;}
.rectext {padding-top:10px;}

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.mobileimg {
    display:none;
}

.bubblesection {background-color:#cccccc; padding:10px 15px; width:auto; display:block; border-radius:10px; border:1px solid #000000;}

.commentsection {background-color:#eeeeee; padding:10px 15px; width:auto; display:block; border-radius:10px; color:#000000; margin-top:10px;}
.commentsection a {text-decoration:underline;}
a.guestshare {color:#000000; text-decoration:none; padding:4px 6px 3px 6px; position:relative; top:-37px; left:74px; float:left; background-color:#ffffff;}
a.guestshare:hover {background-color:#000000; color:#ffffff;}

.expander {display:block; height:25px; overflow:hidden;}
a.expanderlink {font-weight:bold; display:block; cursor:pointer;}
a.expanderlink:hover {text-decoration:none;}

.smallfont {font-size:10px;}

.tale {font-family:"EB Garamond", serif; font-optical-sizing:auto; font-weight:300; font-style:normal; font-size:22px; line-height:35px; text-align:justify; max-width:600px; margin:auto;}
.tale h1 {font-size:35px; font-weight:500; line-height:50px; text-align:left;}
.tale .storynotes {color:#000000; text-align:left;}
.tale p {margin:2px 0; text-indent:40px;}
.tale p:first-of-type, .tale p:last-of-type {text-indent:0;}
.tale a.nav {display:block; background-color:#223067; color:#FFFFFF; padding:5px; border-radius:5px; width:100%; margin:40px auto 0 auto; text-align:center; text-decoration:none; font-family:'Open Sans', arial, helvetica, sans-serif; font-size:16px;}
.tale a.nav:hover {background-color:#000000;}

 /* Media Queries */

@media screen and (max-width: 1070px) {

.articlefloat {display:none;}

}

@media screen and (max-width: 900px) {

.contentarea {padding:16px 45px 25px 45px;}
.desktopcontent {display:none;}
.mobilecontent {display:block;}
.firstitem {width:150px !important;}
.firstitem img {width:130px !important;}

.menucontainer {margin-bottom:20px;}
.menubar {display:none;}
.menubar a:link {display:block; margin:5px;}
a.mobilemenu:link {display:block; width:100%; background-color:#CCCCCC; color:#000000; padding:5px 0; text-decoration:none; text-align:center; display:inline-block; font-size:15px; font-weight:bold; border-radius:22px;}
a.mobilemenu:visited {background-color:#CCCCCC; color:#000000;}
a.mobilemenu:hover {background-color:#223067; color:#FFFFFF;}
.mobilemenugap {display:block;}

}

@media screen and (max-width: 767px) {

.filters {margin:30px 0 40px 0;}
.filterleft {display:block; width:100%; position:relative; top:40px;}
.filterright {display:block; width:100%; position:relative; top:-40px; text-align:left;}
    
}

@media screen and (max-width: 480px) {

body {width:100%; max-width:100%;}
.contentarea {width:90%; max-width:90%; padding:5%;}
.storyitem{padding-bottom:30px; margin-bottom:20px;}
.storyitemleft {display:none;}
h1,h2 {margin:0 0 10px 0;}
.ad-desktop {display:none;}
.ad-mobile {display:block;}
a.rec {width:44%; padding:2.5%; margin:0.5%;}
.rectext {font-size:13px;}
.tale {line-height:30px; padding:0 17px 0 13px; font-size:21px;}
.tale h1 {font-size:30px; line-height:40px;}
.tale p {text-indent:30px;}

}

@media screen and (max-width: 420px) {
    
.mobileimg {display:block; width:100%; height:150px; margin-bottom:10px; background-position:center center; background-size:100% auto;}

}