/*
Theme Name: Coopertronic2023
Theme URI: https://coopertronic.co.uk
Author: Matthew Phillip Cooper at Coopertronic
Author URI: https://coopertronic.co.uk
Description: A custom theme created for Coopertronic.
Tags: custom, easy, simple, music
Version: 3.29
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: Coopertronic2023
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

html {
    box-sizing: border-box;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

*,
:after,
:before {
    box-sizing: inherit
}

:root {
    font-size: 115%
}

:root body {
    margin: 0;
    font-size: .87em;
    overflow: hidden;
}

body {
    margin: 0;
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
    background-image: url(img/dragon-circle.coopertronic.black.red.BG.2021.png);
    min-height: 100%;
    overflow: hidden;
}

body,
html {
    font-family: Sunflower, Arial, sans-serif !important;
    font-size: 15px;
    height: 100%;
    line-height: 1.8;
    overflow: hidden;
}

html {
    overflow-x: hidden
}

h1 {
    font-size: 36px
}

h2 {
    font-size: 1.875em
}

h3 {
    font-size: 24px
}

h4 {
    font-size: 20px
}

h5 {
    font-size: 18px
}

h6 {
    font-size: 16px
}

.jumboFont,
.xxlargeFont,
.xxxlargeFont,
h1,
h2,
h3,
h4,
h6 {
    font-family: voyager_grotesqueregular, Arial, sans-serif;
    font-weight: 400;
    margin: 10px 0;
    text-transform: uppercase
}

a {
    color: inherit;
    background-color: transparent;
    text-decoration: none;
}

a:active,
a:hover {
    outline-width: 0
}

#myNavbar,
#myNavbar a span.Header.uniPadding,
body {
    color: #fff !important;
    background-color: transparent;
    background: 0 0;
    text-shadow: 0 0 6px red !important
}

#myNavbar {
    width: 100%;
    overflow: hidden
}

#myNavbar a {
    padding: .5em;
    width: auto;
    float: left;
    border: none;
    display: block;
    outline: 0
}

#myNavbar .overlay a {
    float: none;
}

.Left {
    float: left !important;
}

#myNavbar div a {
    border: none;
    padding: 8px 16px;
    vertical-align: middle;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    text-align: center;
    cursor: pointer;
    white-space: nowrap
}

#myNavbar a,
#myNavbar div a {
    border: 1px solid rgba(153, 205, 50, .01) !important;
    background-color: #b0b336 !important;
    background-color: rgba(176, 179, 54, .01) !important;
    -webkit-transition: all 1.5s ease-out, all .8s ease;
    -moz-transition: all 1.5s ease-out, all .8s ease;
    -ms-transition: all 1.5s ease-out, all .8s ease;
    -o-transition: all 1.5s ease-out, all .8s ease;
    transition: all 1.5s ease-out, all .8s ease
}

#myNavbar a:active,
#myNavbar a:hover,
#myNavbar div a:active,
#myNavbar div a:hover {
    border: 1px solid #99cd32 !important;
    background-color: #b0b336 !important;
    background-color: rgba(176, 179, 54, .21) !important;
    -webkit-box-shadow: inset 0 0 8px 3px rgba(153, 205, 50, .51) !important;
    box-shadow: inset 0 0 8px 3px rgba(153, 205, 50, .51) !important;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px
}

#myNavbar a span.Header.Large i {
    position: relative !important;
    top: .17em !important
}

#myNavbar a span.Header.Medium i {
    position: relative !important;
    top: .17em !important
}

#myNavbar a span.Header.Small i {
    position: relative !important;
    top: .17em !important
}

#myNavbar a span.Header.uniPadding i {
    position: relative !important;
    top: .17em !important
}

#myNavbar div a i.Icon {
    border: 1px solid rgba(153, 205, 50, .01) !important;
    -webkit-text-shadow: 0 0 8px red !important;
    -moz-text-shadow: 0 0 8px red !important;
    text-shadow: 0 0 8px red !important;
    -webkit-transition: all .3s ease-out, all 1.5s ease;
    -moz-transition: all .3s ease-out, all 1.5s ease;
    -ms-transition: all .3s ease-out, all 1.5s ease;
    -o-transition: all .3s ease-out, all 1.5s ease;
    transition: all .3s ease-out, all 1.5s ease
}

#myNavbar a span.Header.uniPadding:active,
#myNavbar a span.Header.uniPadding:hover,
#myNavbar div a i.Icon:active,
#myNavbar div a i.Icon:hover {
    -webkit-text-shadow: 0 0 20px #99cd32 !important;
    -moz-text-shadow: 0 0 20px #99cd32 !important;
    text-shadow: 0 0 20px rgba(255, 0, 0, .85) !important;
    color: #fff !important;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px
}

#myNavbar {
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12)
}

.bgimg-H {
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
    background-image: url('http://rebuild2023.coopertronic.co.uk/wp-content/uploads/2023/05/dragon-circle.coopertronic.black_.red_.BG_.2021.png');
    min-height: 100%
}

#top-bar {
    top: 0;
    position: fixed;
    width: 100%;
    z-index: 1
}

#bottom-bar {
    bottom: 0;
    position: fixed;
    width: 100%;
    z-index: 1
}

#myNavbar a.menuButton {
    border: 0.25em solid rgba(153, 205, 50, .51) !important;
    box-shadow: 0 0 1.25em rgba(153, 205, 50, .51) !important;
    z-index: 3;
    position: fixed;
    top: 1em;
    right: 1em;
    -moz-border-radius: .938em;
    -webkit-border-radius: .938em;
    border-radius: .938em;
    cursor: pointer
}

.Mbar1,
.Mbar2,
.Mbar3 {
    width: 2.188em;
    /* 35px */
    height: 0.313em;
    /* 5px */
    background-color: white;
    box-shadow: 0 0 .5em .188em rgba(153, 205, 50, .51) !important;
    margin: 0.375em 0;
    /* 6px */
    transition: 0.4s;
}

.Mbar1 {
    margin-top: .1875em !important;
    /* 3px */
}

.Mbar3 {
    margin-bottom: .1875em !important;
    /* 3px */
}

#myNavbar a.menuButton.closeMenu {
    border: 4px solid rgba(255, 0, 0, .51) !important;
    box-shadow: 0 0 15px rgba(255, 0, 0, .51) !important;
}

.closeMenu .Mbar1 {
    transform: translate(0, .688em) rotate(-45deg);
    background-color: white;
}

.closeMenu .Mbar2 {
    opacity: 0;
}

.closeMenu .Mbar3 {
    transform: translate(0, -0.688em) rotate(45deg);
    background-color: white;
}

#mainMenu:target {
    display: inline-block !important;
}

.overlay {
    position: fixed;
    transition: opacity .33s ease-in-out;
    opacity: 0;
    height: .1rem;
    width: 0;
    overflow: hidden;
    z-index: 0
}

.overlay h2 {
    text-align: center;
    text-decoration: underline;
    background-color: rgba(25, 32, 45, .75);

}

.overlay:target {
    background-color: rgba(25, 32, 45, .75);
    backdrop-filter: blur(4px);
    position: fixed;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    opacity: 1;
    z-index: 2
}

.overlay div.content {
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
}

.overlay div.content div.row {
    width: 90%;
    margin: auto;
}

.overlay div.content div.button.menu {
    white-space: nowrap;
    padding-bottom: .7rem;
    width: 90%;
    margin: auto;
}

.overlay div.button.menu a {
    font-size: 2.4rem;
    border: 1px solid #99cd32 !important;
    background-color: #b0b336 !important;
    background-color: rgba(176, 179, 54, .21) !important;
    -webkit-box-shadow: inset 0 0 8px 3px rgba(153, 205, 50, .51) !important;
    box-shadow: inset 0 0 8px 3px rgba(153, 205, 50, .51) !important;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px
}

.overlay div.button.menu a i {
    position: relative;
    top: .1em !important
}

img.Qualie {
    min-height: 100% !important;
    max-width: 100% !important
}

img.qualieQuad {
    min-height: 24% !important;
    max-width: 24% !important
}

.lime-street {
    -webkit-text-shadow: 0 0 8px #99cd32 !important;
    -moz-text-shadow: 0 0 8px #99cd32 !important;
    text-shadow: 0 0 8px #99cd32 !important
}

.style-bar {
    width: 100%;
    overflow: hidden
}

.Center .style-bar {
    display: inline-block;
    width: auto
}

.style-bar .styleButton {
    white-space: normal
}

.menuButton,
.styleButton {
    border: none;
    display: inline-block;
    padding: .5em 1em;
    vertical-align: middle;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
    border: 1px solid rgba(153, 205, 50, .01) !important;
    background-color: #b0b336 !important;
    background-color: rgba(176, 179, 54, .01) !important;
    -webkit-transition: all 1.5s ease-out, all .8s ease;
    -moz-transition: all 1.5s ease-out, all .8s ease;
    -ms-transition: all 1.5s ease-out, all .8s ease;
    -o-transition: all 1.5s ease-out, all .8s ease;
    transition: all 1.5s ease-out, all .8s ease
}

.styleButton {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.styleButton:disabled {
    cursor: not-allowed;
    opacity: .3
}

.styleButton:active,
.styleButton:hover {
    border: 1px solid #99cd32 !important;
    background-color: #b0b336 !important;
    background-color: rgba(176, 179, 54, .21) !important;
    -webkit-box-shadow: inset 0 0 8px 3px rgba(153, 205, 50, .51) !important;
    box-shadow: inset 0 0 8px 3px rgba(153, 205, 50, .51) !important;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px
}

/*
    Universal Styling to replace
    WC3 styles.
*/

/*
    Uniform Padding for all elements
*/
.uniPadding {
    padding-left: .7em !important;
    padding-right: .7em !important
}

/*
    Universal font size
*/
.uniFont {
    font-size: 1.75em;
    font-weight: 200
}

.Header.uniPadding {
    font-size: 1.2em;
    font-family: Sunflower, Arial, sans-serif;
    font-weight: 200
}

a.styleButton span.Header.uniPadding i {
    position: relative !important;
    top: .17em !important
}

a.styleButton span.Header.uniPadding {
    border: 1px solid rgba(153, 205, 50, .01) !important;
    -webkit-text-shadow: 0 0 8px red !important;
    -moz-text-shadow: 0 0 8px red !important;
    text-shadow: 0 0 8px red !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    -webkit-transition: all .3s ease-out, all 5s ease;
    -moz-transition: all .3s ease-out, all 5s ease;
    -ms-transition: all .3s ease-out, all 5s ease;
    -o-transition: all .3s ease-out, all 5s ease;
    transition: all .3s ease-out, all 5s ease
}

a.styleButton span.Header.uniPadding:active,
a.styleButton span.Header.uniPadding:hover {
    -webkit-text-shadow: 0 0 8px red !important;
    -moz-text-shadow: 0 0 8px red !important;
    text-shadow: 0 0 8px red !important;
    color: #fff !important;
    border: 1px solid rgba(153, 205, 50, .01);
    background-color: red !important;
    background-color: rgba(255, 0, 0, .21) !important;
    -webkit-box-shadow: 0 0 8px 3px rgba(153, 205, 50, .51) !important;
    box-shadow: 0 0 8px 3px rgba(153, 205, 50, .51) !important;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
}

.small-title {
    margin-bottom: 1px !important
}

.hide {
    display: none !important
}

/*
    Displays on screens that have a width of less than 600px.
    Small Screens, no orientation.
*/
@media (max-width:600px) {
    .bgimg-H {
        background-image: url('http://rebuild2023.coopertronic.co.uk/wp-content/uploads/2023/05/dragon-circle.coopertronic.black_.red_.BG_.2021-768x480.png');
    }

    .hideSmall {
        display: none !important
    }

    .overlay div.button.menu a {
        font-size: 1.3em !important;
    }

    .overlay div.button.menu a i {
        font-size: 1em
    }

    .Container {
        max-height: 80vh !important;
    }

    .containerPadding {
        padding: 1em !important;
    }

    #myNavbar a.menuButton {
        top: .5rem;
        right: .5rem;
        border: 2px solid rgba(153, 205, 50, .51) !important;
        box-shadow: 0 0 15px rgba(153, 205, 50, .51) !important;
    }

    .Mbar1,
    .Mbar2,
    .Mbar3 {
        width: 25px;
        height: 3px;
        margin: 4px 0;
    }

    #myNavbar a.menuButton.closeMenu {
        border: 2px solid rgba(255, 0, 0, .51) !important;
    }

    .closeMenu .Mbar1 {
        transform: translate(0, 7px) rotate(-45deg);
        background-color: white;
    }

    .closeMenu .Mbar3 {
        transform: translate(0, -7px) rotate(45deg);
        background-color: white;
    }

    /*
    Uniform Padding for all elements
    */
    .uniPadding {
        padding-left: .36em !important;
        padding-right: .36em !important
    }

    .Header.uniPadding {
        font-size: 1.9em;
        font-family: Sunflower, Arial, sans-serif;
        font-weight: 300
    }

    /*
    Universal font size
    */
    .uniFont {
        font-size: 1em;
        font-weight: 200
    }

    #myNavbar div a {
        padding: 4px 16px;
    }

    div.button.menu {
        line-height: 1.2;
        margin: auto;
    }

    #myNavbar a {
        float: none;
    }
}

/*
    For mobile screens in landscape
*/
@media (max-width:900px) and (orientation:landscape) {
    .overlay div.button.menu a {
        font-size: 1.7em
    }

    .overlay div.button.menu a i {
        font-size: 1em
    }

    .Container {
        max-height: 70vh !important;
    }

    .containerPadding {
        padding: 1em !important;
    }

    /*
    Universal font size
    */
    .uniFont {
        font-size: 1em;
        font-weight: 200
    }

    #myNavbar a.menuButton {
        top: .6em;
        right: .6em;
        border: .17em solid rgba(153, 205, 50, .51) !important;
        box-shadow: 0 0 1em rgba(153, 205, 50, .51) !important;
    }

    .Mbar1,
    .Mbar2,
    .Mbar3 {
        width: 1.75em;
        height: .2em;
        margin: .4em 0;
    }

    #myNavbar a.menuButton.closeMenu {
        border: .17em solid rgba(255, 0, 0, .51) !important;
    }

    .closeMenu .Mbar1 {
        transform: translate(0, 0. .5em) rotate(-45deg) !important;
        background-color: white;
    }

    .closeMenu .Mbar3 {
        transform: translate(0, -0.5em) rotate(45deg) !important;
        background-color: white;
    }

    #myNavbar div a {
        padding: 6px 16px;
    }

    div.button.menu {
        line-height: 1.3;
        margin: auto;
    }
}

/*
    Medium sized screens between
    601px and 992px, no orientation.
*/
@media (max-width:992px) and (min-width:601px) {
    .hideMedium {
        display: none !important
    }

    .Header.uniPadding {
        font-size: 3.1em;
        font-family: Sunflower, Arial, sans-serif;
        font-weight: 250
    }
}

/*
    Large screens above 993px,
    no orientation
*/
@media (min-width:993px) {
    .hideLarge {
        display: none !important;
        z-index: 0;
    }

    .staticBtn {
        position: relative !important;
    }

    #myNavbar a span.Header.uniPadding {
        padding-left: 5px !important;
        padding-right: 5px !important;
        padding-top: 2px !important;
        padding-bottom: 2px !important;
        font-size: 2.4em
    }

    #myNavbar a span.Header.uniPadding {
        border: 1px solid rgba(153, 205, 50, .01) !important;
        -webkit-text-shadow: 0 0 8px red !important;
        -moz-text-shadow: 0 0 8px red !important;
        text-shadow: 0 0 8px red !important;
        -webkit-transition: all .3s ease-out, all 1.5s ease;
        -moz-transition: all .3s ease-out, all 1.5s ease;
        -ms-transition: all .3s ease-out, all 1.5s ease;
        -o-transition: all .3s ease-out, all 1.5s ease;
        transition: all .3s ease-out, all 1.5s ease
    }
}

@media (max-width:1280px) and (min-width:1120px) {
    :root body {
        font-size: .77em
    }
}

@media (max-width:1121px) and (min-width:1080px) {
    :root body {
        font-size: .72em
    }
}

@media (max-width:1081px) and (min-width:993px) {
    :root body {
        font-size: .69em
    }
}

.Right {
    float: right !important
}



.fadeAnim {
    animation: opac .8s
}

@keyframes opac {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.leftAnim {
    position: relative;
    animation: animateleft .4s
}

@keyframes animateleft {
    from {
        left: -300px;
        opacity: 0
    }

    to {
        left: 0;
        opacity: 1
    }
}

.rightAnim {
    position: relative;
    animation: animateright .4s
}

@keyframes animateright {
    from {
        right: -300px;
        opacity: 0
    }

    to {
        right: 0;
        opacity: 1
    }
}

.pageHeight {
    min-height: 100%
}

.Container,
.overlayContainer {
    position: relative;
    overflow: hidden;
    max-height: 90vh;
}

.Container div {
    border: 1px solid rgba(153, 205, 50, .01);
}

.Container div:active,
.Container div:hover {
    display: block;
    border: 1px solid rgba(153, 205, 50, .418);
    background-color: #99cd323f !important;
    background-color: rgba(1, 1, 26, .63) !important;
    -webkit-transition: all 1.576s ease-out, all .7s ease;
    -moz-transition: all 1.576s ease-out, all .7s ease;
    -ms-transition: all 1.576s ease-out, all .7s ease;
    -o-transition: all 1.576s ease-out, all .7s ease;
    transition: all 1.576s ease-out, all .7s ease
}

.Grayscale {
    filter: grayscale(50%)
}

.containerCenter {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%)
}

.containerCenterTop {
    position: absolute;
    left: 50%;
    top: 10%;
    transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%)
}

.containerCenterLeft {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
    -ms-transform: translate(0, -50%)
}

.containerBottomCenter {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%)
}

.containerBottomLeft {
    position: absolute;
    left: 0;
    bottom: 0
}

.containerBottomRight {
    position: absolute;
    right: 0;
    bottom: 0
}

.jumboFont {
    font-size: 64px !important;
    font-weight: 250 !important
}

.xxxlargeFont {
    font-size: 48px !important;
    font-weight: 350 !important
}

.xxlargeFont {
    font-size: 36px !important;
    font-weight: 200 !important
}

.xlargeFont {
    font-size: 28px;
    font-weight: 200
}

.largeFont {
    font-size: 18px
}

.White {
    color: #fff !important;
    border: 1px solid rgba(153, 205, 50, .51) !important;
    background-color: #b0b336 !important;
    background-color: rgba(176, 179, 54, .31) !important;
    -webkit-transition: all 1.5s ease-out, all .8s ease;
    -moz-transition: all 1.5s ease-out, all .8s ease;
    -ms-transition: all 1.5s ease-out, all .8s ease;
    -o-transition: all 1.5s ease-out, all .8s ease;
    transition: all 1.5s ease-out, all .8s ease
}

.White:hover {
    -webkit-text-shadow: 0 0 10px red !important;
    -moz-text-shadow: 0 0 10px red !important;
    text-shadow: 0 0 10px red !important;
    color: #f5f5f5 !important;
    border: 1px solid #99cd32 !important;
    background-color: #b0b336 !important;
    background-color: rgba(176, 179, 54, .21) !important;
    -webkit-box-shadow: inset 0 0 8px 3px rgba(153, 205, 50, .51) !important;
    box-shadow: inset 0 0 8px 3px rgba(153, 205, 50, .51) !important
}

.textWhite {
    color: #fff !important
}

.largePadding {
    padding: 12px 24px !important
}

.containerPadding {
    padding: 3em;
    overflow: scroll !important;
}

.socialPadding {
    padding: 24px 48px
}

.socialPaddingTablet {
    padding: 16px 48px
}

.topMargin {
    margin-top: 16px !important
}

.Icon {
    font-size: 2.4em
}

.smallIcon {
    font-size: 1.2em
}