body{
    background-color: black;
}


*{
font-family: 'Lato', sans-serif; margin : 0px; padding : 0px; box-sizing: border-box; 
}



.nav-bar img{
    width: 150px;
    height : 65px;
    padding: 5px 30px;
}

.nav-bar{
    display: flex;
    color: white ; 
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
    border-bottom : .5px solid gray;
    width: 100%;
    height: 70px;

}

.nav-bar ul{
    list-style-type: none;
    display: flex;
    
}

ul li{
    position: relative;
    padding: 20px 0px;
    display : flex;
    justify-content: space-between;
}

.nav-bar ul li a{
    text-decoration: none;
    width: 110px;
    color : white;
    padding: 10px 0;
    transition: 1s;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -ms-transition: 1s;
    -o-transition: 1s;

}

.nav-bar ul li a::after{
    content: "" ;
    width: 0%;
    height: 3px;
    background-color: white;
    position: absolute;
    transition: 1s;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -ms-transition: 1s;
    -o-transition: 1s;
    top: 20%;
    left: 20%;
    transform: translatex(-50%);
    -webkit-transform: translatex(-50%);
    -moz-transform: translatex(-50%);
    -ms-transform: translatex(-50%);
    -o-transform: translatex(-50%);
} 


.nav-bar ul li a:hover::after{
    content: "";
    width: 100%;
}

.content{
    display: flex;
    justify-content: space-between; 
    color : white; 

}

.content .FIX{
    display: flex;
    flex-direction: column;
    padding: 120px 60px;  
}

.content img{
    width: 500px ;
    filter: grayscale(1);
    -webkit-filter: grayscale(1);
    margin-right: 74px;
    transition: filter 4s;
    -webkit-transition: filter 4s;
    -moz-transition: filter 4s;
    -ms-transition: filter 4s;
    -o-transition: filter 4s;
    padding-top: 60px;
}

.content img:hover {
    filter: grayscale(0);
    -webkit-filter: grayscale(0);
}

.content h1{
    padding-bottom: 20px;
    font-size: 50px;
}

span{
    color: orange;
}


button{
    margin-top: 20px;
    background-color: white;
    cursor: pointer;
    padding: 10px;
    border-radius: 18px 18px 19px 19px;
    border: none;
    font-weight: bold;
}

button.btn {
    margin-left: 20px;
}


button:hover{
    background-color: gray;
    color: rab(219,219,219);
}








/* 
ul li .first_hover::before{
    content: "";
    width: 0%;
    background-color: #5cb85c;
    height: 2px;
    position: absolute;
    margin-top: 24px;
    display: inline-block;
}

    ul li .first_hover:hover::before{
        content: "";
        width: 13%;
        background-color: #5cb85c;
        height: 2px;
        position: absolute;
        transition: width 1s ease-in-out ;
        -webkit-transition: width 1s ease-in-out ;
        -moz-transition: width 1s ease-in-out ;
        -ms-transition: width 1s ease-in-out ;
        -o-transition: width 1s ease-in-out ;
        margin-top: 24px;
        display: block;
      }  */