/*START CSS RESET*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/*END CSS RESET*/

/*MEDIA queries*/
@media screen and (min-width: 769px){
    .flex{
        flex-direction: row;        
    }
    .info-container-top{
        background-color: white;
        width: 300px;
        position: absolute;
        top: 0;
        left: calc(50% - 150px);    
    }
    .info-container-bottom{
        background-color: white;
        width: 600px;
        position: absolute;
        bottom: 0;
        left: calc(50% - 300px);    
    }
    p{
        font-size: 20px;
    }

    h1{
        font-size: 40px;
    }
    .info-container-bottom{
        transform: scale(0.8) translateY(20px);
        transition: 300ms cubic-bezier(.69,.01,.18,.19);
        cursor: default;
    }
    .info-container-bottom:hover{
        transform: scale(1) translateY(-10px);
        transition: 100ms cubic-bezier(.69,.01,.18,.19);
    }
    .union-logo img{
        height: 100px;
    }
    .half{
        width: 50%;    
    }
    .car-logo-container svg{
        width: 400px;
    }
    .car-logo-container{
        margin-bottom: 30px;
    }
    .f_height{
        height: 100%;
    }
}
@media screen and (max-width: 768px){
    .union-logo img{
        height: 50px;
    }
    .flex{
        flex-direction: column;
    }
    .info-container-top{
        display: block;
        margin: 0 auto;
    }
    .info-container-bottom{
        display: block;
        margin: 0 auto;
        background-color: white;
    }
    p{
        font-size: 16px;      
    }

    h1{
        font-size: 35px;
    }
    .info-container-bottom{    
        cursor: default;        
    }
    .info-container-bottom:hover{    

    }
    .car-logo-container svg{
        width: 300px;
    }
    .car-logo-container{
        margin-bottom: 30px;        
    }
    .mob-pd{
        min-height: 400px;
    }
}

/*END MEDIA queries*/

html, body{
    font-family: 'Noto Sans', sans-serif;
    height: 100%;
    position: relative;
    background-color: #e8e8e8;          
}
html{
    overflow-y: scroll;
}
.flex{
    display: flex;    
}
.flex-center-center{
    display: flex;
    justify-content: center;
    align-items: center;
}
.info-container-top{
    background-color: white; 
    -webkit-box-shadow: 0px 5px 15px -6px rgba(0,0,0,0.15);
    -moz-box-shadow: 0px 5px 15px -6px rgba(0,0,0,0.15);
    box-shadow: 0px 5px 15px -6px rgba(0,0,0,0.15);
    padding: 10px 0px;
}

.info-container-bottom{
    -webkit-box-shadow: 0px -5px 15px -6px rgba(0,0,0,0.15);
    -moz-box-shadow: 0px -5px 15px -6px rgba(0,0,0,0.15);
    box-shadow: 0px -5px 15px -6px rgba(0,0,0,0.15);
    padding: 20px 50px; 
}

.col-left{
    transition: 300ms cubic-bezier(.4,.01,.51,.17);
}
.col-left:hover{
    background-color: #2F5E9C;
    transition: 300ms cubic-bezier(.4,.01,.51,.17);
    width: 100%;
}
.col-left:hover #Ford_logo .st1{
    fill: white;
    transition: 300ms cubic-bezier(.69,.01,.18,.19);
}
.col-left:hover #Ford_logo .st0{
    fill: #2F5E9C;
    transition: 300ms cubic-bezier(.69,.01,.18,.19);
}
#Ford_logo .st1{
    transition: 300ms cubic-bezier(.69,.01,.18,.19);
}
#Ford_logo .st0{
    transition: 300ms cubic-bezier(.69,.01,.18,.19);
}
.col-right{
    transition: 300ms cubic-bezier(.4,.01,.51,.17);
}
.col-right:hover{
    background-color: #ffffff;
    transition: 300ms cubic-bezier(.4,.01,.51,.17);
    width: 100%;
}
.col-right:hover #path3534{
    fill: white!important;
    transition: 300ms cubic-bezier(.69,.01,.18,.19);
}
#path3534{
    transition: 300ms cubic-bezier(.69,.01,.18,.19);
}
.col-right:hover .suz-com{
    fill: white!important;
    transition: 300ms cubic-bezier(.69,.01,.18,.19);
}
.suz-com{
    transition: 300ms cubic-bezier(.69,.01,.18,.19);
}

#Ford_logo .st0{
    fill-rule:evenodd;
    clip-rule:evenodd;
    fill:#FFFFFF;
}
#Ford_logo .st1{
    fill-rule:evenodd;
    clip-rule:evenodd;
    fill:#2F5E9C;
}

.union-contact-details{
    text-align: center;
}
.button-container{
    text-align: center;
}
.button-container a{
    text-decoration: none;    
    font-size: 20px;
    text-transform: uppercase;    
}
.button-container a span{
    color: #000;
    border: 2px solid #000;
    padding: 10px 20px;
    transition: 300ms cubic-bezier(.4,.01,.51,.17);
}
.button-container a:hover > span{
    background-color: #000;
	color:#fff;
    border: 2px solid white;
    transition: 300ms cubic-bezier(.4,.01,.51,.17);
}
.button-container a:hover > .color_1{
    color: #fff;
}
.button-container a:hover > .color_2{
    color: #fff;
}
.button-container{
    transform: translateY(50px);
    opacity: 0;
    transition: 300ms cubic-bezier(.4,.01,.51,.17);
}
.col-left:hover .button-container{    
    transition: 200ms cubic-bezier(.4,.01,.51,.17);
    transition-delay: 300ms;
    transform: translateY(0);    
    opacity: 1;
}
.col-right:hover .button-container{
    transition: 200ms cubic-bezier(.4,.01,.51,.17);
    transition-delay: 300ms;
    transform: translateY(0);
    opacity: 1;
}
p{
    font-weight: 400;
    margin-bottom: 10px;
    line-height: 1;
}
p strong{
    color: #1f2f59;
    font-weight: 600;
}
h1{
    color: #1f2f59;

    margin-bottom: 20px;    
}
h1 strong{
    font-weight: bold;
}