.colour-bg-dark{
    background-color: #202020;
}
.colour-white{
    color: #dfdfdf;
}
.colour-bg-match{
    background-color: #161c1f !important;
}
.colour-match{
    color: #161c1f;
}
body{
    background-image: /*url('/img/wave-haikei.svg'),*/
                        url('/img/low-poly-bg.png');
    background-size: cover;
    background-repeat: repeat;
    background-color: #e8e5e5;
}
.gb-a{
    text-decoration: none;
    display: flow-root;
    color: inherit;
}
.gb-a{
    text-decoration: none;
    transition: color ease-in-out 200ms;
}
a:hover{
    text-decoration: none;
}
.gb-a:hover{
    text-decoration: none;
    /*color: #ffdf6c;*/
    color: #ff4540;
    transition: ease-in-out 200ms;
}

.navbar {
    padding: 0.3rem 11%;
    border-bottom: 2px solid #fd4540;
}
.navbar-brand {
    padding-top: 0;
    padding-bottom: 0;
}
.gb-logo-path{
    /*fill: rgb(253, 253, 253);*/
    fill: #dfdfdf;
    transition: .25s fill ease-in-out;
}
.gb-logo-text{
    stroke-width: 11px;
}
.nav-logo{
    overflow:hidden;
    height: 72px;
    width:100%;
}
.nav-logo > img{
    width: 12rem;
}
.nav-logo > svg{
    width: 12rem;
    transition: .25s fill ease-in-out;
}

.nav-logo > svg:hover > .gb-logo-path{
    transition: .25s fill ease-in-out;
    fill: #fd4540;
}
.nav-logo img.nav-img{
    height: 2.5rem;
    margin-right: 0rem;
}
.nav-logo:hover img.nav-img{
    display: none;
}
.nav-logo img.hover{
    display: none;
}
.nav-logo:hover img.hover{
    display: inline;
}
.nav{
    padding: 0 3rem;
}
.nav-ul ul {
    list-style: none;
    text-align: center;

}
.nav > ul {
    flex: 1;
    justify-content: flex-end;
}

.nav-ul ul li {
    display: inline-block;
}
.nav-item{
    color: #dfdfdf;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    font-style: inherit;
    font-weight: bold;
    font-size: 1.5rem;
    padding: 0 3rem;
    /*margin-right: 1rem;*/
    border-right: #fd4540 solid 1px;
}

.tab-content {
    color: white;
    display: none;
    padding: 50px;
    /*text-align: center;*/
    width: 80%;
    /*background-color: #202020;*/
    background-color: #161c1f;
    margin: auto;
    z-index: 1;
    opacity: 0;
    transition: all 0.25s ease-in-out;
}
.tab-content-active{
    display: block;
    z-index: 2;
    opacity: 1;
    box-shadow: 0 15px 35px rgba(0,0,0,9);
    transition: all 0.25s ease-in-out;
}
.mid-card{
    /*max-width: min(800px, 80%);*/
    margin: auto;
}
.share-controls{
    /*margin-top: 150px;*/
    margin-left: auto;
    /*padding: 10px;*/
    width: 80%;
    margin-right: auto;

}
.center-auto{
    /*margin-left: auto;*/
    /*margin-right: auto;*/
    text-align: center;
    margin-top: 3rem;
}
.center-auto > img{
    width: 80%;
}
.share-controls>a{
    /*box-shadow: 0 0 16px 0 #2f2f2f;*/
    color: #fdfdfd;
    /*background: #202020;*/
    background: #161c1f;
}

.share-controls>a:hover{
    /*background: #ffdf6c;*/
    background: #fd4540;
    /*color: #202020;*/
    cursor: pointer;

}

#myListBtn{
/*    border-radius: 0 24px 24px 0;*/
    padding: 5px;
    text-wrap: nowrap;
    font-family: inherit;
    font-weight: bold;
    /*box-shadow: inset 20px -6px 8px -10px #fd4540;*/
    color: #fdfdfd;
    border-left: 1px solid #fd4540;
    position: relative;
}
#godbudListBtn{
    /*border-radius: 24px 0 0 24px;*/
    border-right: 1px solid #fd4540;
    padding: 5px;
    text-wrap: nowrap;
    font-family: inherit;
    font-weight: bold;
    /*box-shadow: inset -20px 0px 8px -10px #fd4540;*/
    color: #fdfdfd;
    position: relative;
}
.tab-link {
    float: left;
    font-size: 17px;
    width: 50%;
    background: #707070;;
    text-align: center;
    outline: none;
    color: white;
    top: 0;
    transition: .10s all;

}
.tab-link:hover{
    transition: all .10s;
}
.tab-link:not(.share-active){
    /*background: #3f3f3f;*/
    /*border: 2px solid #3f3f3f;*/
    /*background: #fd4540;*/
    background: #707070;
    border-bottom: 4px solid #fd4540;
    /*box-shadow: inset 0px 8px 8px -4px #202020;*/
    /*-webkit-box-shadow: inset 0px 0px 30px 9px #202020;*/
    /*-moz-box-shadow: inset 0px 0px 30px 9px #202020;*/
    /*box-shadow: inset 0px 0px 30px 9px #202020;*/
}
.tab-link:not(.share-active):hover{
    box-shadow: none;
    border-bottom: 9px solid #fd4540;
    top: -5px;
    transition: all .10s;
}
.share-active{
    box-shadow: none;
    border-top: 4px solid #fd4540;
    border-bottom: 0;
}
.tab-link > p{
    margin: auto;
}
.gb-button{
    margin: 0;
    padding: 0;
    border: none;
    cursor: pointer;
    appearance: none;
    background-color: inherit;

}
.gb-button > img:hover{
    border: #fdfdfd 2px solid;
    transition: border 0.25s ease-in-out;
}

.gb-button > img {
    width: 30px;
    height: 20px;
}
.project-details{
    margin-bottom: 40px;
}
.project-split-line{
    border: 1px solid #fd4540;
}
.bg-card{
    position: relative;
    width: 80%;
    vertical-align: middle;
    margin: auto;
    overflow: hidden;
}
.bg-card > img {
    display: inline-block;
    /*position: absolute;*/
    /*top: 0;*/
    /*left: 0;*/
    width: 100%;
}
.gb-body{
    margin-top: 3rem;
    margin-bottom: 3rem;
}
.gb-welcome{
    font-size: larger;
    font-weight: bold;
    text-align: justify;
    /*display: grid;*/
    /*grid-template-columns: repeat(5, 1fr);*/
    /*grid-template-rows: 1fr;*/
    /*grid-column-gap: 0px;*/
    /*grid-row-gap: 0px;*/
    color: #fdfdfd;
    margin-bottom: 15px;
    padding: 0 1rem;
}
.gb-contact{
    padding: 0 2rem;
}
.gb-welcome-text {
    grid-area: 1 / 1 / 3 / 5;
    margin-right: 25px;
}
.gb-welcome-img {
    /*grid-area: 1 / 5 / 3 / 6;*/
    /*position: relative;*/

    position: relative;
    float: right;
    padding: 0rem 1rem 0 2rem;
}
.gb-welcome-buttons{
    display: block;
    margin-top: 1rem;
    padding-top: 1rem;
    bottom: 0;
    position: relative;
}
.gb-product{
    display: inline-block;
    min-width: 30%;
    width: 100%;
}
.gb-group-mail{
    display: inline-flex;
    width: auto;

}
.gb-group-text{
    padding: 0.1rem 1rem;
}

.card-details{
    background-color: #161c1f;
    margin: auto;
    width: 100%;
    /*height: 500px;*/

    padding: 50px;
}
.card-light{
    color: #fdfdfd;
}
.card-buttons{
    display: grid;
    grid-template-columns: auto 3fr 3fr auto;
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}
.gb-btn{
    font-family: Roboto, sans-serif;
    font-weight: bold;
    font-size: 16px;
    color: #fdfdfd;;
    background-color: #fd4540;
    padding: 10px 30px;
    border: solid #c21d1a 0px;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
    transition : 200ms;
    transform: translateY(0);
    display: flex;
    flex-direction:row;
    align-items: center;
    justify-content: center;
    cursor: pointer;

}
.gb-btn:hover{
    transition : 200ms;
    /*padding: 10px 43px;*/
    /*transform : translateY(-0px);*/
    background-color: #fff;
    color: #202020;
    /*border: solid 2px #707070;*/
}
.gb-btn-1{
    grid-area: 1 / 2 / 2 / 3;
    margin: 10px;
}
.gb-btn-2{
    grid-area: 1 / 3 / 2 / 4;
    margin: 10px;
}
.gb-btn-svg{
    margin-right: 10px;
}

.project-card{
    margin-top: 20px;
}
.project-card-section{
    display: inline-block;
    margin-bottom: 20px;
}
.project-img{
    padding: 20px;
    /*box-shadow: 0 3px 12px #000;*/
    box-shadow: 0px 0px 15px 5px #000;
    box-sizing: border-box;
    background-color: white;
    float: left;
    margin-right: 45px;
}

.project-img-vertical{
    /*width: max(35%, 400px);*/
    height: 35rem;
}
.project-img-horizontal{
    width: min(50%, 900px);

}
.project-message{
    background-color: #202020;
    padding: 1rem 2rem;
    border: 1px solid #fdfdfd;
    box-shadow: inset 4px 4px 25px -2px rgba(0, 0, 0, 0.3);
    /*text-align: center;*/
    margin-bottom: 2rem;
    color: #fdfdfd;
}
.project-message p{
    margin-top: 0;
    margin-bottom: 0;
}
.project-message-2{
    background-color: inherit;
    padding: 2rem 0 0 0;
    margin-bottom: 2rem;
    color: #fdfdfd;
    border-bottom: 1px solid #fd4540;
    margin-left: 2rem;


}
.credits-message{
    margin-left: 0;
}
.gb-flags{
    /*flex: content;*/
    text-align: right;
}
.nav-nav{
    position: fixed;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    width: 100%;
    top: 0;
    z-index: 1000;
}
.nav-responsive {
    height: 65px;
    width: 100%;
    /*position: relative;*/
    position: sticky;
    flex-flow: row nowrap;
}

.nav-responsive > .nav-header {
    display: inline;
}

.nav-responsive > .nav-header > .nav-title {
    display: inline-block;
    font-size: 22px;
    color: #fff;
    padding: 10px 10px 10px 10px;
}

.nav-responsive > .nav-btn {
    display: none;
}

.nav-responsive > .nav-links {
    display: inline;
    float: right;
    font-size: 18px;
}

.nav-responsive > .nav-links > a {
    display: inline-block;
    padding: 13px 10px 13px 10px;
    text-decoration: none;
    color: #efefef;
}

.nav-responsive > .nav-links > a:hover {
    background-color: rgba(0, 0, 0, 0.3);
}

.nav-responsive > #nav-check {
    display: none;
}
.styled-table{
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
    font-family: sans-serif;
    /*min-width: 400px;*/
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
    color: #ffffff;

}
.styled-table thead tr {
    background-color: #191919;
    color: #ffffff;
    text-align: center;
}
.styled-table th{
    padding: 12px 15px;
    background: #191919;
    position: sticky;
    top: 0;
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
    border: 2px solid;
}
.styled-table td {
    padding: 12px 15px;
    color: #ffffff;
}
.styled-table td > img{
    width:  7rem;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.styled-table tbody tr {
    border-bottom: 1px solid #dddddd;
}

.styled-table tbody tr:nth-of-type(odd) {
    background-color: #262626;
}
.styled-table tbody tr:nth-of-type(even) {
    background-color: #3e3e3e;
}
.styled-table tbody tr:last-of-type {
    border-bottom: 2px solid #fd4540;
}
.credits-table{
    color: #fdfdfd;
    border-collapse: separate;
}
.credits-table-img{
    width: 7rem;
}
.credits-table th:last-child {
    width: 80%;
}
.credits-table th:first-child {
    width: 20%;
}

.credits-table td{
    border: 1px solid #161c1f;
    overflow-wrap: anywhere;
}
.credits-table th{
    border: 0;
}

.bookmark-credits{
    /*position: absolute;*/
    position: relative;
    right: 0;
    background-color: #161c1f;
    padding: 15px;
    bottom: 30px;
    text-align: center;
    border-radius: 10px 0 0 10px;
    color: #fdfdfd;
    border: 2px solid #fdfdfd;
    border-right: 0;
    display: inline-flex;
    float: right;
    margin-top: 20px;
}
.bookmark-credits:hover{
    color: #fd4540;
    border: 2px solid #fd4540;
    border-right: 0;
    transition: all 0.25s ease-in-out;
    cursor: pointer;
}

@media (max-width:1200px) {
    .nav-responsive > .nav-btn {
        display: inline-block;
        position: relative;

    }
    .nav-responsive > .nav-btn > label {
        display: inline-block;
        padding-left: 13px;
        margin: auto;
        color: #ddd;

    }
    .nav-responsive > .nav-btn > label:hover {
        color: #fd4540;
        transition: all 0.25s ease-in-out;
    }
    .nav-responsive > .nav-btn > label > span {
        display: block;
        width: 25px;
        height: 10px;
        border-bottom: 2px solid;
    }
    .nav-responsive > .nav-links {
        position: absolute;
        display: block;
        /*width: 100%;*/
        width: 16rem;
        background-color: #202020;
        height: 0px;
        transition: all 0.3s ease-in;
        overflow-y: hidden;
        /*top: 50px;*/
        top: 65px;
        right: 0px;
    }
    .nav-responsive > .nav-links > a {
        display: block;
        width: 100%;
    }
    .nav-responsive > #nav-check:not(:checked) ~ .nav-links {
        height: 0px;
    }
    .nav-responsive > #nav-check:checked ~ .nav-links {
        height: calc(14.5rem - 50px);
        overflow-y: hidden;
    }
    .nav-item{
        border-right: 0;
        padding: 0.5rem 0;
        text-align: center;
    }
    .nav-item:not(:last-child) > .gb-a{
        padding: 0 0 0.5rem 0;
        border-bottom: 2px solid #fd4540;
    }
    .navbar-nav{
        flex-direction: column !important;
    }
    .gb-flags{
        flex: content;
    }
    .bg-card{
        width: 97%;
    }
    .tab-content{
        width: 97%;
        padding: 2rem 1rem;
    }
    .center-auto > img{
        width: 97%;
    }
    .share-controls{
        width: 97%;
    }
;
}
@media (max-width:900px) {
    .gb-body {
        margin-top: 1rem;
        margin-bottom: 3rem;
    }
    .center-auto{
        margin-top: 1rem;
    }
    .card-details{
        padding: 1rem;
    }
    .gb-welcome {
        font-size: medium;
        padding: 0 0 0 1rem;
    }
    .gb-contact{
        padding: 0 2rem;
    }
    .product{
        margin: 0 !important;
    }
    .photo-container{
        left: 0 !important;
    }
    .product__info{
        padding: 0.8em 0 !important;
    }
    .photo-main{
        text-align: center;

        & img{
            float: none !important;
        }
    }
    .title {
        margin: 1em 2em 0;
        text-align: center;
        & h1{
            margin-left: 0 !important;
        }
    }
    .project-img-horizontal {
        width: min(75%, 900px);
    }
    .project-message-2{
        margin-left: 0rem;
        margin-right: 1rem;
    }
}
@media (max-width: 645px) {

    .card-buttons{
        grid-template-columns: 1fr;
        grid-template-rows: 3fr 3fr;
    }
    .gb-btn{
        font-size: medium;
    }
    .gb-btn-1 {
        grid-area: 1 / 1 / 2 / 2;
    }
    .gb-btn-2 {
        grid-area: 2 / 1 / 2 / 2;
    }
    .project-img-vertical {
        width: min(55%, 400px);
        height: unset;
    }
    .photo-main{
        & img{
            border: 7px solid #fdfdfd !important;
        }
    }
    .project-img-horizontal {
        width: 90%;
    }
    .product{
        /*box-shadow: inset -3px -3px 0px 2px #fd4540 !important;*/
        box-shadow: inset -3px -3px 1px 1px #fd4540 !important;
    }
}

@media (max-width:600px) {
    .gb-welcome-img{
        float: none;
        padding: 0rem 1rem;
    }
    .gb-contact{
        padding: 0 0 0 1rem;
    }
    .gallery{
        margin: auto;
        --size: 100% !important;
        height: min(60vh, 275px) !important;
    }
    .description{
        font-size: small;
    }
    .credits-table td {
        font-size: small;
    }
    .styled-table td > img {
        width: 6rem;
    }

}
@media (max-width:400px) {
    .gb-flags{
        display: none;
    }
    .gallery{
        height: min(25vh, 200px) !important;
    }
    .gb-welcome{
        font-size: small;
    }
    .credits-table td {
        font-size: smaller;
    }
    .styled-table td > img {
        width: 5rem;
    }
}