/* ------ Section 1 - Global Body, Font and Link Settings ------ */

body {
font-family: "PT Serif",Times,Georgia,serif;
color: #000;
font-size: 18px;
line-height: 1.5;
}
h1, h2, h3, h4, h5, h6 {background-color: transparent;color: #039;clear: both;}


h1 {
color: #000;
font-family: "Source Sans Pro",Helvetica,sans-serif;
font-size: 30px;
font-weight: 700;
text-align:center;
border-top: 1px solid #acacac;
padding:0;
margin:0;
line-height: 1.1;
padding-top:5px;
padding-bottom:3px;
}

h2 {
font-family: "Source Sans Pro",Helvetica,sans-serif;
border-bottom: 1px solid #acacac;
text-transform: none;
font-size: 22px;
text-align:center;
font-weight: 400;
color:#000;
margin:0;
padding:0;
padding-bottom: 5px;
line-height: 1.3;
}

h3 {
font-family: "Source Sans Pro",Helvetica,sans-serif;
font-size: 22px;
font-weight: bold;
text-align: center;
border-bottom: 1px solid #acacac;
border-top: 1px solid #acacac;
padding-top: 5px;
padding-bottom: 5px;
color: #000;
margin: 2em auto 1.5em;
}

h4 {
font-family: "Source Sans Pro",Helvetica,sans-serif;
font-size: 15pt;
font-weight:bold;
text-align: center;
color: #000;
}

h5 {
font-family: "Source Sans Pro",Helvetica,sans-serif;	
font-size: 22pt;
font-weight: bold;
text-align: center;
margin:0;
padding:0;
line-height: 1.5;
color: #000;
}

blockquote {
margin: 12px 56px;
color: #006;
font-size: 100%;
line-height: 20px;
font-family: Georgia, "Times New Roman", Times, serif;
}

img {
border: 0 solid #ddd;
}
img{max-width:99%!important;height:auto!important;-ms-interpolation-mode:bicubic;padding:4px;}

a:link img{opacity:1;transition:opacity .25s ease-in-out;-moz-transition:opacity .25s ease-in-out;-webkit-transition:opacity .25s ease-in-out}
a:hover img{opacity:.5}
a:link img {
border: 0;
}

@media only screen and (max-width: 780px) {
body {
font-size: 16px;
}
#ContentColumn, #ContentColumn .Liner {
padding: 0 2%;
width: 100%;
}
}

/* -- General Link Styling -- */

a:link {
color: #00C; 
font-weight: normal;
text-decoration: underline;
}

a:visited {
color: #00C;
text-decoration: underline;
}

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



/* ------ Section 2 - Global Page Structure ------- */

#PageWrapper {width:100%; max-width:1200px; margin:420px auto 10px auto;  padding:0; background:#fff; border:1px solid #ccc;}

#Header {width:100%;padding:0;margin:0;border:none;min-height:0px; _height:0px;}
#Header .Liner {width:100%;position:relative; padding:0;min-height:0px; _height:0px;background:url()transparent top left no-repeat; }


#ContentWrapper {border:none; margin: auto;width:70%; height:auto;float:left;}
#ContentWrapper {background: url()#fff; background-repeat: repeat-y;background-position: top center;}
#ContentWrapper table {max-width:90% !important; margin:10px auto;}
#ContentColumn {
width:100%;
margin-top:0px;
padding:0 10px;
border:none;
background-image: url();
background-repeat: no-repeat;
background-color: transparent;
float:left;
}
#ContentColumn .Liner{width: 95%; margin:0 auto;}


#NavColumn {display: none;}


#ExtraColumn {
border-left:1px dotted #ccc;
float: right;
width: 29%;
margin-top:0px;
background-image: url();
background-repeat: no-repeat;
background-color: transparent;
font-size: 80%;
float:right;
}
#ExtraColumn .Liner {margin-top:0px;}


#Footer {
border-top:1px solid #c00;
clear: both;
width: 100%;
padding: 8px 0;
margin: 0 auto;
background-image: url();
text-align: center;
font-size: 85%;
}
#Footer .Liner {margin: 0;padding: 0;}





#NavColumn h4 {
font-size: 95%;
color: #000;
margin-top: 0;
}

#ExtraColumn h4 {
font-size: 85%;
color: #000;
margin-top: 0;
}




/* ------ Section 5 - Additional Navigation ------ */

/* -- Thumbnail-with-Caption Navigation -- */

.ThumbnailLink {
text-align: center;
}

.ThumbnailLink a:link {
text-decoration: none;
}

.ThumbnailLink a:hover .Caption {
text-decoration: underline;
color: #00C;
}


/* -- Horizontal Text NavBar -- */

.ExtraNav {
background-color: transparent;
}

.ExtraNav ul {
list-style-type: none;
padding: 0;
}

.ExtraNav ul li {
display: inline;
background-color: transparant;
text-align: center;
}

.ExtraNav a:link {
color: #00C;
text-decoration: none;
text-align: center;
padding: 3px 40px 3px 0;
}

.ExtraNav a:visited {
color: #00C;
text-decoration: none;
}

#Footer .ExtraNav a:hover {
text-decoration: underline;
color: #00C;
}

.ExtraNav a:hover {
color: white;
background-color: transparant;
text-decoration: underline;
}

#Header .ExtraNav {
font-size: 110%;
position: absolute;
top: 157px;
right: 12px;
width: 952px;
height: 25px;
}

#Header .ExtraNav ul { 
margin: 0;
}

#Footer .ExtraNav {
margin: 12px auto;
background-color: transparent;
font-weight: normal;
font-family: "PT Serif",Times,Georgia,serif;
text-transform: uppercase;
font-size: 17px;
width:85%;
}



/* ------ Section 6 - Boxes ------ */

.CalloutBox {
background-color: #fff;
width: 85%;
border: 2px dotted #02669B;
margin: 18px auto 24px auto;
padding: 4px;
color: black;
}

div.CalloutBox p {
margin: 13px;
}

p.CalloutBox {
padding: 13px;
}

div.CalloutBox h1,
div.CalloutBox h2,
div.CalloutBox h3,
div.CalloutBox h4,
div.CalloutBox h5,
div.CalloutBox h6 {
margin: 13px 0 0 13px;
}

.ReminderBox {          
background-color: #02669B;
width: 85%;
border: 1px solid #02669B;
margin: 18px auto 24px auto;
padding: 30px;
float: center;             /* adding float enables text to flow around it */
color: #FFFFFF;
}

.ReminderBox h4 {
margin: 0;
padding: 2px;
text-align: center;
background-color: #fff;
}

.ReminderBox p {
font-size: 80%;
padding: 0 4px;
line-height: 120%;
}

.TipsBox {          
background-color: #EFEDEE;
width: 85%;
border: 1px solid #8f8fb3;
margin: 18px auto 24px auto;
color: #006;
}

.TipsBox h4 {
margin: 0;
padding: 2px;
text-align: center;
background-color: #EFEDEE;
}

.TipsBox p {
font-size: 80%;
padding: 0 4px;
line-height: 120%;
}

.AdSenseBoxLeft, .AdSenseBoxRight, .AdSenseBoxCenter468, .AdSenseBoxExtraColumn {
padding: 5px;
background-color: #fff;
border: 0px;
}

.AdSenseBoxLeft {
margin: 0 18px 12px 18px;
float: left;
}

.AdSenseBoxRight {
margin: 0 18px 12px 18px;
float: right;
}

.AdSenseBoxCenter468 {
width: 468px;
margin: 0 auto 12px auto;
clear: both;
}

.AdSenseBoxExtraColumn {
padding: 0;
margin: 0 auto 12px auto;
clear: both;
}

.ReturnToNavBox {
background-color: #fff;
width: 90%;
border-top: 1px solid #bf2c3c;
border-bottom: 1px solid #bf2c3c;
margin: 0 auto 12px auto;
padding: 4px;
}

.connect{float:right;margin-top:70px;margin-right:5px;}

/* -- RSS Box -- */

#RSSbox {
width: 148px;
background-color: #fff;
border: 1px solid #063;
margin: 8px auto 10px 3px;
padding: 2px 2px 10px 2px;
font-size: 100%;
font-weight: bold;
color: #1d487e;
line-height: 120%;
text-align: center;
}



/* ------ Section 7 - Frequently Used Styles ------ */

.Clear {
clear: both;
}

.Caption {
font-size: 60%;
text-align: center;
font-weight: bold;
line-height: 100%;
color: #000;
display: block;
margin-bottom:10px;
}

/* -- floats -- */

.ItemRight {
float: right;
margin: 2px 0 12px 18px;
text-align: center;
}

.ItemCenter {
margin: 2px auto 12px auto;
text-align: center;
clear: both;
}

.ItemLeft {
float: left;
margin: 2px 18px 12px 0;
text-align: center;
}
#PageWrapper #ContentWrapper #ContentColumn .Liner table {
	font-weight: normal;
}

.RightHandText {
	font-size: 90%;
}

a:link { 
text-transform: none; 
color: #00C; 
font-family: "PT Serif",Times,Georgia,serif;
}

#ContentColumn li { list-style-type: disc;}

div #sthoverbuttons.sthoverbuttons-pos-left { left:30px; top:175px;}





#ddmenu{ right:0;width:100%;display:block;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:16px;text-align:center;letter-spacing:normal}
#ddmenu .top-heading{font-size:16px;color:#fff; font-weight:bold;}
#ddmenu ul{margin:0 auto;padding:2px 0 0;text-align:center;width:100%;font-size:0;background:0 0;display:inline-block;list-style:none;position:relative;z-index:999999990;border-radius:8px;}
#ddmenu li{margin:0;padding:0;font-size:14px;display:inline-block;zoom:1;position:relative;color:#000;line-height:44px;transition:background-color .5s;outline:0}
#ddmenu li.full-width{position:static}
#ddmenu li.over{color:#333;background-color:#990000} /* background behind top links*/
#ddmenu li.over.no-sub{color:#fff;background-color:#ff0000;border-radius:3px;}
#ddmenu .top-heading{font-weight:400;white-space:nowrap;margin:0 22px;text-decoration:none;display:inline-block;outline:0;cursor:pointer}
#ddmenu li a,#ddmenu li a:hover,#ddmenu li a:link{color:inherit}
#ddmenu li.no-sub a:visited{color:#000}
#ddmenu li a:hover{text-decoration:underline}
#ddmenu li a:focus{outline:#09F dotted 1px}
#ddmenu i.caret{color:#fff;left:-18px;width:0;height:0;overflow:hidden;vertical-align:middle;margin-bottom:2px;border-top:4px solid;border-right:4px solid transparent;border-left:4px solid transparent;display:inline-block;position:relative}
#ddmenu .dropdown{width:auto;left:0;color:#333;padding:0;margin:0;display:none;position:absolute;top:100%;border:1px solid #ccc;border-top:none;border-radius:0 0 3px 3px;box-shadow:0 6px 6px rgba(0,0,0,.175)}
#ddmenu li.full-width .dropdown{width:100%;padding:0;margin:0 auto;}
#ddmenu .offset300{left:-300px;right:auto}
#ddmenu .right-aligned{left:auto;right:0}
#ddmenu li.over .dropdown{display:block}
#ddmenu .dd-inner{text-align:center;padding:20px;margin:0;background-color:#e4e7ea;white-space:nowrap;font-size:13px;line-height:1.35}
#ddmenu .dropdown a{display:block;color:#444;line-height:22px;text-decoration:none;padding:0}
#ddmenu .dropdown a:focus,#ddmenu .dropdown a:hover{text-decoration:underline;color:#09F}
#ddmenu div.column{text-align:left;vertical-align:top;display:inline-block;white-space:normal;width:auto;min-width:150px;max-width:300px;padding:0 20px;border-right:1px solid #333}
#ddmenu div.dd-inner div:last-child{border-right:none}
#ddmenu div.column h3{font-weight:500;line-height:1.1;margin-top:12px;margin-bottom:8px;font-size:20px}
#ddmenu li{border-radius:3px 3px 0 0}
#ddmenu div.column h3{border-bottom:1px solid #333}







div.clear{clear:both;background-color:transparent}div.clear10{clear:both;height:10px;background-color:transparent}div.clear20{clear:both;height:20px;background-color:transparent}div.clear30{clear:both;height:30px;background-color:transparent}div.clear40{clear:both;height:40px;background-color:transparent}div.clear50{clear:both;height:50px;background-color:transparent}div.clear60{clear:both;height:60px;background-color:transparent}div.clear70{clear:both;height:70px;background-color:transparent}div.clear80{clear:both;height:80px;background-color:transparent}div.clear90{clear:both;height:90px;background-color:transparent}div.clear100{clear:both;height:100px;background-color:transparent}
.mobile-only{display:none;}
span.mobile-only{display:none;}
.mobileOnly{display:none;}
span.mobileOnly{display:none;}
@media screen and (max-width:780px){
.mobile-only{display:block;width:100%}
span .mobile-only{display:inline;}
div .mobileOnly{display:block;}
span .mobileOnly{display:inline;}
.desktopOnly{display:none;}
.desktop-only{display:none;}
body {background: url() #fff top repeat-x;  font-size:15px;overflow-x:hidden;}

#PageWrapper {width:100%; padding:0;margin:250px auto 25px auto; background:#fff; border:none;}

#Header {width:100%;padding:0;margin:0;}
#Header .Liner {width:100%;position:relative; padding:0;min-height:0px; _height:0px;background:url()#fff top left no-repeat; }


#ContentWrapper {border:none; margin: auto;width:100%; height:auto;float:none; display:block;}
#ContentWrapper {background: url()#fff; background-repeat: repeat-y;background-position: top center;}
#ContentWrapper table {max-width:90% !important; margin:10px auto;}


#ContentColumn {
width:100%;
margin-top:0px;
border:none;
background-image: url();
background-repeat: no-repeat;
background-color: transparent;
float:none;
display:block;
overflow-x:hidden;
}
#ContentColumn .Liner{margin-top:0px;width:90%; padding-right:20px;}


#NavColumn {display: none;}


#ExtraColumn {
border:none;
float: right;
width: 100%;
margin-top:0px;
background-image: url();
background-repeat: no-repeat;
background-color: transparent;
font-size: 80%;
float:none;
display:block
}
#ExtraColumn .Liner {margin-top:0px;}


#Footer {
border-top:1px solid #cc0000;
border-bottom:1px solid #cc0000;
clear: both;
width: 100%;
padding: 8px 0;
margin: 0 auto;
background-image: url(../image-files/content1440.png);
 background-repeat: repeat-y;
 background-position: top center;
text-align: center;
font-size: 85%;
}
#Footer .Liner {margin: 0;padding: 0;}

img{max-width:95%!important;height:auto!important;-ms-interpolation-mode:bicubic;padding:4px;clear:both;display:block; float:none;}
#ExtraColumn a img center  {display:inline !important; float:left !important;}


#wrap{width:100%;position:absolute;top:100px;right:0px;background:#cc0000;border-color:transparent;padding:4px;margin-right:5px;margin-top:8px;margin-bottom:8px;color:#fff;}
#wrap img{border:transparent;}
#wrap a:link{color:#ffffff; font-weight:bold; margin:10px;}
#wrap a:visited{color:#ffffff;}
#wrap a:hover{color:#ffff00;}
#ddmenu {display:none;}
.MobileNav img{border:transparent}
.more{display:none;background:0 0;padding:0}
.news{width:300px !important; margin:10px auto;}
.connect{float:right;margin-top:70px;margin-right:5px;}
}

@media screen and (max-width:479px){
.connect{float:left;margin-top:120px;margin-left:5px;}
}


/* ------ HEADER EDITS - JAN 2018 ------ */

body {
background: #f0f0f0;
}

#PageWrapper {
margin: 90px auto 10px auto;
}

#ContentColumn, #ContentColumn .Liner {
width: 100%;
padding: 0 5%;
box-sizing: border-box;
}

#ContentColumn .Liner {
padding-top: 40px !important;
}

#ddmenu {
top: 0 !important;
width: 100%;
background: #900000;
position: fixed !important;
z-index: 999;
}

#ddmenu ul {
margin: 0;
padding: 12px 5% 10px 180px;
box-sizing: border-box;
text-align: right;
}

.logo {
position: fixed;
top: 4px;
left: 5%;
z-index: 1000;
}

.logo img {
width: 100px;
}

@media only screen and (max-width: 780px) {
.logo img {
width: 80px;
}
}

.mobile-nav #wrap {
width: 100%;
position: fixed;
top: 0px;
right: 0;
background: #900000;
padding: 22px 10px 0px 10px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 2px;
text-align: right;
}

.mobile-nav #wrap a:link {
margin: 0px 10px 10px 10px;
}



/* ------ EXPANDABLE / COLLAPSIBLE SECTIONS ------ */

.collapsible-section {
margin: 40px 0 40px 0;
}

.collapsible-section #content {
float: left;
margin: 10px;
}

.collapsible,
.page_collapsible {
padding: 20px;
line-height: 20px;
border: 1px solid #aaa;
background: #fff;
text-decoration: none;
color: #333;
cursor: pointer;
border-radius: 4px;
margin: 20px 0;
}

.collapse-open {
background: #900000;
color: #fff;
}

.collapse-open span {
display: block;
float: right;
padding: 10px;
}

.collapse-open span {
background: url('https://www.sftourismtips.com/image-files/collapse-minus.png') center center no-repeat;
}

.collapse-close span {
display: block;
float: right;
background: url('https://www.sftourismtips.com/image-files/collapse-plus.png') center center no-repeat;
padding: 10px;
}

.collapsible-section div.container {
padding: 0;
margin: 0;
}
 
.collapsible-section div.content {
background: #f3efea;
margin: 0;
padding: 10px;
}

.collapsible-section div.content p {
margin: 0;
padding: 15px;
}

#PageWrapper .collapse-close h3,
#PageWrapper  .collapse-open h3 {
text-align: left;
border: 0;
margin: 0;
display: inline;
}

#PageWrapper  .collapse-open h3 {
color: #fff;
}



/* ------ MEDIAVINE CODE - APRIL 2020 ------ */

@media only screen and (min-width: 781px) {
#ContentWrapper {
max-width: calc(100% - 301px);
}
#ExtraColumn {
min-width: 300px;
}
}

@media only screen and (max-width: 399px) {
html body {
margin-left: 0px;
margin-right: 0px;
}
}

@media only screen and (max-width: 359px) {
#ContentColumn .Liner{
padding-left: 0px;
padding-right: 0px;
}
#ContentColumn{
padding-left: 10px;
padding-right: 10px;
}
}



/* ------------------------------------------------- */
/* ------ TEMPLATE UPDATE 2020 - HEADER & NAV ------ */
/* ------------------------------------------------- */

/* ------ SITE STRUCTURE ------ */

body {
margin: 0;
}

#PageWrapper {
margin: 0 auto 10px auto;
border-top: 0;
overflow: visible;
background: #fff;
border: 0;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}

#Header {
width: 100%;
}



/* ------ TOP HEADER - LOGO, SOCIAL ICONS, NAV ------ */

.TopHeader {
background: #fff;
width: 100%;
clear: both;
display: block;
}

#Header .TopHeader .Liner {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 5px 20px 20px;
box-sizing: border-box;
}

.TopHeader .logo {
position: relative;
float: left;
top: initial;
left: initial;
margin-bottom: 10px;
margin-bottom: 0;
}

.TopHeader .logo img {
width: 120px;
}



/* ------ MIDDLE HEADER - PHOTO ------ */

.MiddleHeader {
clear: both;
width: 100%;
min-height: 200px;
background: url('../image-files/header-banner-photo-4.jpg') no-repeat center center #fff;
background-size: cover;
border-bottom: 1px solid #fff;
border: 0;
}


@media only screen and (max-width: 768px) {
.MiddleHeader {
min-height: 150px;
}
}


@media only screen and (max-width: 550px) {
.MiddleHeader {
min-height: 100px;
}
}




/* ------ BOTTOM HEADER - PROMO BAR ------ */

.BottomHeader {
clear: both;
width: 100%;
background: #02669b;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#02669b+24,be1e2d+83 */
background: #02669b; /* Old browsers */
background: -moz-linear-gradient(left,  #02669b 24%, #be1e2d 83%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #02669b 24%,#be1e2d 83%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #02669b 24%,#be1e2d 83%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#02669b', endColorstr='#be1e2d',GradientType=1 ); /* IE6-9 */
}

.BottomHeader p {
margin: 0 auto;
width: 100%;
max-width: 1200px;
padding: 10px 20px;
font-size: 16px;
color: #fff;
text-align: center;
font-family: "Source Sans Pro",Helvetica,sans-serif;
box-sizing: border-box;
letter-spacing: 0.02em;
word-spacing: 0.05em;
text-transform: uppercase;
}

.BottomHeader p a:link,
.BottomHeader p a:visited,
.BottomHeader p a:hover {
color: #fff;
text-decoration: underline;
font-weight: bold;
display: inline-block;
padding: 0 3px;
margin-right: 3px;
border-radius: 4px;
font-family: "Source Sans Pro",Helvetica,sans-serif;
text-transform: uppercase;
}

.BottomHeader p a:hover {
background: #be1e2d;
}

@media only screen and (max-width: 400px) {
.BottomHeader p {
font-size: 14px;
letter-spacing: 0;
word-spacing: 0;
}
}



/* ------ CUSTOM NAVIGATION ------ */

.CustomNav {
clear: both;
width: 100%;
}

.animenu__btn{
display: none;
cursor: pointer;
background-color: #02669b;
border: 0;
padding: 10px;
height: 40px;
width: 48px;
border-radius: 4px;
border: 1px solid #fff;
position: absolute;
top: 20px;
right: 23px;
text-align: center;
}

.animenu__btn: hover{
background-color: #333;
}

.animenu__btn__bar {
display: block;
width: 20px;
height: 2px;
background-color: #fff;
transition: 0.15s cubic-bezier(0.75, -0.55, 0.25, 1.55);
margin-left: 3px;
}

.animenu__btn__bar+.animenu__btn__bar {
margin-top: 4px
}

.animenu__btn--active .animenu__btn__bar {
margin: 0 0 0 3px;
position: absolute;
}

.animenu__btn--active .animenu__btn__bar:nth-child(1) {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}

.animenu__btn--active .animenu__btn__bar:nth-child(2) {
opacity:0;
}

.animenu__btn--active .animenu__btn__bar:nth-child(3) {
-webkit-transform:rotate(-45deg);
transform:rotate(-45deg);
}

.animenu {
display: block;
width: 100%;
max-width: 1200px;
margin: 0 auto;
}

.animenu ul {
padding: 0;
list-style: none;
padding: 0 20px;
box-sizing: border-box;
text-align: center;
}

.animenu li,
.animenu a {
display: inline-block;
font-size: 16px;
}

.animenu a {
color: #fff;
text-decoration: none;
font-family: "Source Sans Pro",Helvetica,sans-serif;
}

.animenu__nav {
background-color: #02669b;
margin: 0;
border-bottom: 1px solid #fff;
border: 0;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#02669b+24,be1e2d+83 */
background: #02669b; /* Old browsers */
background: -moz-linear-gradient(left,  #02669b 24%, #be1e2d 83%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #02669b 24%,#be1e2d 83%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #02669b 24%,#be1e2d 83%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#02669b', endColorstr='#be1e2d',GradientType=1 ); /* IE6-9 */
}

.animenu__nav > li {
position: relative;
}

.animenu__nav > li > a {
padding: 13px 10px;
text-transform: none;
font-weight: bold;
}

.animenu__nav > li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}

.animenu__nav > li:hover > a {
color: #c1e4f3;
}

.animenu__nav > li:focus-within > ul {
opacity: 1;
visibility: visible;
margin: 0;
}

.animenu__nav > li:focus-within > a {
color: #fff;
}

.animenu__nav__hasDropdown::after{
content: " ";
height: 4px;
width: 4px;
border: 3px solid #fff;
display: inline-block;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
margin: 0 0 5px 0px;
margin-left: 5px;
opacity: 0.8;
border-width: 0 1px 1px 0;
}

ul.animenu__nav__dropdown {
padding: 13px 15px 13px 10px;
min-width: 180px;
position: absolute;
top: 100%;
left: -5px;
z-index: 1;
opacity: 0;
visibility: hidden;
margin: 0;
background-color: #373737;
padding: 10px 20px;
border-radius: 0 0 4px 4px;
text-align: left;
}

.animenu__nav__dropdown > li {
width: 100%;
}

.animenu__nav__dropdown > li:last-child {
border: 0;
}

.animenu__nav__dropdown a {
padding: 5px 0;
width: 100%;
border-color: #373737;
line-height: 1.3;
}

.animenu__nav__dropdown a:hover {
color: #7fbad2;
}

.animenu__nav__dropdown a:focus-within {
background-color: #0186ba;
border-color: #0186ba;
color: #fff;
}


@media screen and (max-width: 767px){
.animenu__btn{
display: inline-block;
}
.animenu__nav,.animenu__nav__dropdown{
display: none;
}
.animenu__nav{
margin: 10px 0;
}
.animenu__nav > li {
width: 100%;
border-right: 0;
border-bottom: 1px solid #3b87a5;
}
.animenu__nav>li:last-child{
border: 0;
}
.animenu__nav > li:first-child > a:after {
content: '';
position: absolute;
height: 0;
width: 0;
right: 41px;
top: -6px;
border: 6px solid transparent;
border-top: 0;
border-bottom-color: #04659b;
}
.animenu__nav > li > a {
width: 100%;
padding: 10px;
border-color: #111;
position: relative;
box-sizing: border-box;
}
.animenu__nav a:hover {
background-color: #0186ba;
border-color: #0186ba;
color: #fff;
}
.animenu__nav__dropdown {
position: static;
background-color: #373737;
margin: 0;
transition: none;
visibility: visible;
opacity: 1;
min-width: initial;
}
ul.animenu__nav__dropdown {
left: 0 !important;
padding: 10px 10px;
border-radius: 0;
width: 100%;
}
.animenu__nav__dropdown > li:first-child > a:after {
content: none;
}
.animenu__nav__dropdown a {
padding-left: 20px;
width: 100%;
}
.animenu__nav__dropdown a:hover {
background-color: #0186ba;
border-color: #0186ba;
color: #fff;
}
}

.animenu__nav--active {
display: block !important;
min-height: 100vh;
overflow: scroll;
}

.animenu__nav--active .animenu__nav__dropdown {
display: block;
}



/* ------ SOCIAL ICONS ------ */

.SocialIcons {
text-align: right;
width: 245px;
float: right;
margin: 13px 6px 0 0;
margin: 10px 6px 0 0;
}

.SocialIcons p {
text-align: right;
color: #000;
text-transform: uppercase;
font-size: 11px;
letter-spacing: 0.08em;
margin: 0 1px 6px;
font-family: "Source Sans Pro",Helvetica,sans-serif;
}

.SocialIcons ul {
padding: 0;
margin: 3px 0 0;
line-height: 0;
}

.SocialIcons ul li {
padding: 0;
margin: 0;
display: inline-block;
background: none;
}

.SocialIcons ul li a {
display: block;
width: 30px;
height: 30px;
background-size: 27px;
background-position: center 2px;
background-repeat: no-repeat;
margin: 0 0px 0;
opacity: 0.5;
cursor: default;
background-color: #02669b;
background-color: #eee;
border-radius: 50%;
}

.SocialIcons ul li a[href^="https"] {
opacity: 1;
cursor: pointer;
}

.SocialIcons ul li a[href^="https"]:hover {
opacity: 1;
cursor: pointer;
background-color: #be1e2d;
background-color: #02669b;
background-position: center -25px;
}

.SocialIcons ul li a.SocialIconFacebook {
background-image: url('../image-files/social-icon-facebook.png');
}

.SocialIcons ul li a.SocialIconInstagram {
background-image: url('../image-files/social-icon-instagram.png');
}

.SocialIcons ul li a.SocialIconPinterest {
background-image: url('../image-files/social-icon-pinterest.png');
}

.SocialIcons ul li a.SocialIconTwitter {
background-image: url('../image-files/social-icon-twitter.png');
}

.SocialIcons ul li a.SocialIconYouTube {
background-image: url('../image-files/social-icon-youtube.png');
}

.SocialIcons ul li a.SocialIconRSS {
background-image: url('../image-files/social-icon-rss.png');
background-size: 25px;
}
.SocialIcons ul li a.SocialIconRSS:hover {
background-position: center -23px;
}

#Footer .SocialIcons {
display: none;
}

#Footer .SocialIcons p {
color: #555;
}

#Footer .SocialIcons ul li a {
background-position: top center;
}

#Footer .SocialIcons ul li a {
opacity: 0.3;
}

#Footer .SocialIcons ul li a[href^="https"] {
opacity: 1;
}

#Footer .SocialIcons ul li a[href^="https"]:hover {
opacity: 0.6;
}


@media only screen and (max-width: 768px) {
.SocialIcons {
display: none;
}
#Footer .SocialIcons {
display: block;
float: none;
margin: 25px auto;
background: #eee;
padding: 20px 5%;
border-radius: 5px;
}
}