@charset "UTF-8";
/* CSS Document */

:root{
    --tc-green: #51b244;
    --tc-lightgreen:#80ab75;
    --tc-lightgrey:#e8e8f1;
    --tc-orange:#f89e57;
}

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    color:#000;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
}
.tc_header{
    background-color:var(--tc-green);
    width:100%;
    padding-bottom:4em;
}
.navigation{
    width: 100%;
    padding:2em;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
}
.mobi{
    display:none;
}
.header_image{
    width: 100%;
    background-image:url('https://www.tirecollect.com/images/header_image.jpeg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center; /* vertical axis because of column */
    align-items: center;     /* horizontal axis */
    flex-direction: column;
    padding:4em;
    border-top:5px solid black;
    border-bottom:5px solid black;
}
.brand_block {
    width: clamp(250px, 40%, 600px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.logo {
    width: 100%;
    height: auto;
    margin: 2em 0;
    display: block;
}

.title {
    color:#FFF;
    font-weight:bold;
    font-size: clamp(3.5rem, 6vw, 6rem);
    width: 100%;
    text-align: center;
    margin: 0;
    display: block;
}
.nav_item{
    color:#FFF;
    font-weight:bold;
    font-size:1.1em;
}
.nav_item:hover{
    color:#CCC;
}
a, a:visited, a:active{
    color:var(--tc-green);
    text-decoration:none;
}
a:hover{
    color:var(--tc-lightgreen);
}
.footer{
    background-color:var(--tc-green);
    width:100%;
    padding:2em;
    color:#FFF;
    text-align:center;
    font-size:0.9em;
    bottom:0;
    display: flex;
    justify-content: space-around;
    align-items: center;

}
.footer a{
    color:#FFF;
    text-decoration:none;
}
.footer a:hover{
    color:#CCC;
    text-decoration:underline;
}
.btn-success{
    background-color:var(--tc-green)!important;
    border-color:var(--tc-green)!important;
}
.btn-success:hover{
    background-color:var(--tc-lightgreen)!important;
}
/* Mobile tweak: make logo/title block wider on small screens */
@media (max-width: 768px) {
    .brand_block {
        width: 80%;
    }
    .desk{
        display:none;
    }
    .mobi{
        display:initial;
    }
}