.container-fluid { padding-left:0; padding-right:0; }
.container-inner { max-width:1400px; margin:0 auto; }

input[type=submit]:active, input[type=submit].active, input[type=submit]:focus, input[type=submit].focus, 
button:active, button.active, button:focus, button.focus, button.btn:active, button.btn.active, button.btn:focus, 
button.btn.focus, label.btn:active, label.btn.active, label.btn:focus, label.btn.focus, 
a.btn:active, a.btn.active, a.btn:focus, a.btn.focus { outline:none; box-shadow:none; }
input, input:active, input:focus { outline:none !important; box-shadow:none !important; }

.btn-dark
{
    background-color: #2E2E2E;
    color: #fff;
    text-transform: uppercase;
}        
.btn-dark:hover
{
    background-color: #575757;
}
.btn-transparent
{
    background-color:transparent;
    background-color:rgba(0,0,0,0);
    color: #fff;
    box-shadow:none;
}        
.btn-transparent:hover
{
    background-color:transparent;
}

h1
{
    color: #B20202;
    font-size: 2rem;
}
h2
{
    color: #B20202;
    font-size: 1.8rem;
}
h3
{
    color: #B20202;
    font-size: 1.6rem;
}
a { color: #B20202; }
a:hover { color: #B20202; text-decoration:underline; }
.field-validation-error { color:red; }

html {
    scroll-behavior: smooth;
}

header
{
    background-color: #B20202;
    background-image: url(/images/head_bg.png);
    /*background-size: 50%;*/
    background-size: contain;
    background-position: center 30%;
    background-repeat: no-repeat;
    color: #fff;
}

    header img
    {
        max-width: 100%;
        width:100%;
        max-width:300px;
    }
    header #Recycling i { font-size:2rem; font-size:28px; }
    /*header #Search input[type=text] { max-width:70% !important; width:auto !important; }*/
    header #Search a.SearchLink { display:none; color:#fff; }
    header #NavToggle { width:2.8rem; }
    header #Recycling.blue i { color:#018bc9; color:#31adfc; text-shadow:0px 0px 1px #000; }
    header #Recycling #BinBagToggle { /*line-height:1.0; padding-top:2px; padding-bottom:2px; padding-top:4px; padding-bottom:4px;*/ }
    header #Recycling #BinBagToggle[aria-expanded="true"] { background-color:#2E2E2E; }
    header #Recycling #BinBagToggle:hover { background-color:#575757; }
    header #Recycling #BinBagInfo { z-index:25; background-color:#fff; color:#212529; top:100%; left:0; box-shadow:0px 0px 2px #333; border-radius:0 0 .25rem .25rem; min-width:120px; }
    @media all and (max-width:767.98px) 
    {
        header .d-table-cell:nth-child(1), header .d-table-cell:nth-child(3) { width:25%; }
        /*header input[type=text] { max-width:50% !important; width:auto !important; min-width:100px; }*/
    }       
    @media all and (max-width:575.98px) 
    {
        header { background-size:cover; }
        /*header input[type=text] { max-width:50% !important; width:auto !important; min-width:100px; }*/
    }       
    @media all and (max-width:440px) 
    {
        /*header input[type=text] { max-width:36% !important; width:auto !important; min-width:50px; }*/
    }
    @media all and (max-width:360px) 
    {
        /*header #Search form { display:none !important; }
        header #Search a.SearchLink { display:inline-block; }*/
    }

nav { display:block; z-index:10; background-color:#fff; }

nav > div > ul
{
    list-style: none;
    display: block;
    margin: 0;
    padding: 0;
}

    nav > div > ul > li
    {
        display: inline-block;
        position: relative;
        margin: 0;
        padding: 0;
        text-align: left; /*border-left:1px solid #aaa;*/
    }

        nav > div > ul > li:before
        { /*position:absolute; left:0; top:0; content:''; width:1px; height:40%; margin-top:0.8em; border-left:1px solid #aaa;*/ /*float:left; border-left:1px solid #aaa; content:''; width:1px; display:inline;*/ /*content:'|'; display:inline; color:#aaa; margin:0; padding:0; position:absolute; left:-4px; top:20%;*/
        }
        /*nav > ul > li:first-child { border-left:none; }*/
        /*nav > ul > li:first-child:before { display:none; }*/
        nav > div > ul > li > a
        {
            position: relative;
            display: inline-block;
            color: #B20202;
            /*padding: 0.5rem 1rem;
            padding: 0.5rem;*/
            font-size: 1.2rem;
        }

            nav > div > ul > li > a:before
            {
                position: absolute;
                left: 0;
                top: 30%;
                content: '';
                width: 1px;
                height: 40%;
                border-left: 1px solid #ccc;
            }

        nav > div > ul > li:first-child > a:before
        {
            display: none;
        }

        nav > div > ul > li:hover
        {
            background: #eee;
        }

            nav > div > ul > li:hover > a
            {
                color: #2e2e2e;
                text-decoration: none;
            }

        nav > div > ul > li > div
        {
            background-color:#fff;
            /*display: none;*/
            /*position: absolute;
            margin: 0;
            padding: 0;*/
            z-index: 2;
            padding-bottom: 1rem;
            min-width: 100%;
        }
        
        nav > div > ul > li > div > ul
        {
            margin: 0;
            padding: 0;
            padding-bottom: 1rem;
            min-width: 100%;
        }

        nav > div > ul > li:hover > div > ul
        {
            /*display: block;*/
            /*display: block;
            background: #eee;*/
        }

        nav > div > ul > li > div > ul > li
        {
            display: block;
            margin: 0;
            padding: 0;
            padding-left: 1em;
            width: 100%;
            box-sizing: border-box;
        }

        nav > div > ul > li > div > ul > li:hover
        {
            background: #eee;
        }

            nav > div > ul > li > div > ul > li > a
            {
                display: block;
                width: 100%;
                color: #2e2e2e;
                margin: 0;
                padding: 0.2rem 2.5rem 0.2rem 0;
                border-top: 1px solid #ccc;
                white-space: nowrap;
                font-size: 0.9em;
            }
            /*nav > ul > li > ul > li > a:before { content:''; display:block; width:100%; margin:0; margin-left:0.1rem; padding:0; border-bottom:1px solid #aaa; }*/
            nav > div > ul > li > div > ul > li:first-child > a
            {
                border-top: none;
            }

            nav > div > ul > li > div > ul > li > a:hover
            {
                color: #B20202;
                text-decoration: none;
            }

nav ul > li > button { background:none; color:#B20202; border:none; transition:transform 0.3s; cursor:pointer; }
nav ul > li > button.open { transform:rotate(90deg); }

@media (max-width:767.98px) {
    nav { border-bottom:1px solid #B20202; }
    nav > div > ul { border-bottom:2px solid #eee; }
    nav > div > ul > li { display:block; border-bottom:1px solid #eee; }
    nav ul > li > button { width:2rem; }
    nav > div > ul > li > a { width:calc(100% - 4rem); }
    nav > div > ul > li > a:before { display:none; }
    nav > div > ul > li > div > ul > li { padding-left:4rem; }
}

@media (min-width:768px) {
    nav > div > ul > li > div { display:none !important; /*box-shadow:0px 0px 1px #333;*/ /*border:1px solid #ccc; width:80%; left:10%;*/ }
    nav > div > ul > li:hover > div { display:block !important; }
}

.image-error {
    background: #EEEEEE;
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: help;
}

    .image-error::before {
        content: "!";
        display: flex;
        width: 1.5em;
        height: 1.5em;
        border-radius: 50000px;
        border: 0.12em solid #B20202;
        color: #B20202;
        text-align: center;
        justify-content: center;
        align-items: center;
        font-weight: 600;
        font-size: 1.7em;
        line-height: 1;
    }

    .image-error p {
        position: absolute;
        width: 320px;
        text-wrap: balance;
        text-align: center;
        top: 60%;
        left: 60%;
        background: #E1E1E1;
        border-radius: 5px;
        pointer-events: none;
        opacity: 0;
        transition: opacity .2s ease-in-out;
    }
    
    .image-error:hover p {
        pointer-events: all;
        opacity: 1;
    }


#Heroes
{
    background-color:#eee;
}

    #Heroes .Hero
    {
        position: relative;
    }

        #Heroes .Hero img {
            max-width: 100%;
            max-height: 382px;
            object-fit: cover;
        }
        #Heroes .Hero > .social-links { position:absolute; top:5%; left:5%; color:#fff; font-size:2rem; }
        #Heroes .Hero a { color:#fff; text-shadow:0px 0px 2px #333; border-radius:.25rem; transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; }
        #Heroes .Hero a:not([class^="carousel-control"]):hover { color:#B20202; text-decoration:none; text-shadow:none; background-color:#fff; box-shadow:0px 0px 2px #333; }
        #Heroes .Hero .carousel { max-height: 382px; }
        #Heroes .Hero .carousel-indicators { margin-bottom:0; align-items: flex-end; bottom: 5%; }

#LatestUpdates { background-color:#eee; font-size:2.0rem; font-weight:bold; }
#LatestUpdates > div > div:before { font-family:icomoon; content:'\e905'; font-size:4.8rem; line-height:3.6rem; display:inline-block; vertical-align:middle; color:#ccc; margin-right:1rem; /*color:#fff; text-shadow:0px 0px 1px #000;*/ }
    @media all and (max-width:575.98px) 
    {
        #LatestUpdates { font-size:1.2rem; }
        #LatestUpdates > div > div:before { font-size:3.6rem; line-height:3.6rem; display:block; margin-right:0; }
    }   

.NewsPreview img { max-width:400px; width:auto; max-height:200px; height:auto; }
        
#ContentContainer { } 

.Gallery { text-align:center; }
.Gallery a { 
    vertical-align:top;
    max-width:200px;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.Gallery a:focus, .Gallery a:active { 
    /*outline-color:transparent !important;
    box-shadow:none !important;*/
}
.Gallery a span { 
    overflow:hidden;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.Gallery a img {
    max-width:200px;
    max-height:150px;
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
    border:1px solid #ccc;
}
.Gallery a:hover span:first-child {
    box-shadow:0px 0px 3px #000;
    box-shadow:0px 0px 3px 1px #333;
}
.Gallery a:hover img {
	-webkit-transform: scale(1.2);
	transform: scale(1.2);
}

.fancybox-caption { text-align:center; font-size:1.4rem; line-height:1.6rem; }

ul.Downloads { list-style:none; margin:0; padding:0; }
ul.Downloads li { display:block; }
ul.Downloads li a i { position:relative; }
ul.Downloads li a i:after { content:attr(data-filetype); font-size:10px; position:absolute; top:12px; left:-20%; color:#333; background:#fff; text-align:center; border:1px solid #aaa; text-transform:uppercase; width:140%; padding:2px; font-family:Arial, Arial, Helvetica, sans-serif; overflow:hidden; }
ul.Downloads li a:hover { background:#eee; }

#Crest { font-size:6rem; color:#999; }

#Sharer { color:#B20202; }

#MainContent img { max-width:100% !important; height:auto !important; }
#Content:empty { display:none; }
#Content p:last-child { margin-bottom:0; }

#Contribute { background:#eee; color:#B20202; }
#Contribute i { font-size:3.5rem; }
#Contribute span { font-size:1.8rem; }
#Contribute i.icon-circles { color:#aaa; }
    @media all and (max-width:575.98px) 
    {
        #Contribute { background-size:cover; }
        #Contribute span { font-size:1.2rem; }
    }   

footer 
{
    background:#aaa; color:#fff;    
    background-image: url(/images/head_bg.png);
    /*background-size: 50%;*/
    background-size: contain;
    background-position: center 30%;
    background-repeat: no-repeat;
}
    @media all and (max-width:575.98px) 
    {
        footer { background-size:cover; }
    }       
footer a { color:#fff; }
footer a:hover { color:#fff; }

footer #FooterLinks {}
footer #FooterLinks a
{
    position: relative;
    display: inline-block;
    color: #fff;
    /*padding: 0.5rem 1rem;
    padding: 0.5rem;*/
    padding: 0.5rem;
}
    footer #FooterLinks a:before
    {
        position: absolute;
        left: 0;
        top: 35%;
        content: '';
        width: 1px;
        height: 40%;
        border-left: 1px solid #ccc;
    }

footer #FooterLinks a:first-child:before
{
    display: none;
}
footer img { width:100%; max-width:300px; }





#TopLink 
{
    /*transition: color 0.3s linear;*/
    display: none;
    position: fixed;
    bottom: 3%;
    right: 3%;
    z-index: 100;
    padding:3px;
    margin:0;
}
    #TopLink i
    {
        transition: color 0.3s linear;
        color: rgba(100,100,100,0.5);
        font-size: 5rem;
        text-align: center;
        background-color:#fff;
        padding:0;
        margin:0;
        border-radius:50%;
        box-shadow:0px 0px 3px 3px #fff;
    }
    #TopLink:hover, #TopLink:hover i
    {
        color: rgba(100,100,100,1);
        text-decoration: none;
        opacity: 1;
        /*text-shadow: 0px 0px 40px #fff;*/
    }
@media (max-width:575.98px) {
    #TopLink { font-size:4rem; }
}