* {
    margin: 0;
    padding: 0;
}
a {
    text-decoration: none;
}
li {
    list-style: none;
}
body {
    font-family: 'Open Sans', sans-serif;
}
.header {
    width: 100%;
    background-color: #000;
    display: flex;
}
.header__logo {
    text-transform: uppercase;
    color: white;
    font-weight: 800;
    font-size: 24px;
    cursor: pointer;
    margin-top: 56px;
    margin-left: 12%;
}
.list {
    margin-top: 56px;
    margin-left: 29%;
}
.menu__link:hover {
    color: #fcac45;
    transition-duration: 1s;
}
.topnav a {
    color: white;
    text-align: center;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: bold;
}
.topnav a:hover {
    border-bottom: 3px solid #fcac45;
}
.icon {
    display: none;
}
.main {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.main__welcome {
    background-color: black;
    text-align: center;
    padding: 200px 0 410px 0;
}
.main__welcome p {
    color: #999999;
    font-size: 20px;
    
}
.main__welcome h1 {
    color: #999999;
    font-size: 44px;
    
}
.mycompany {
    color: #da953d;
}
.wrapper {
    width: 76%;
    margin: 0 auto;
}
.main__about {
    display: flex;
    padding: 100px 0 100px 0;
}
.about__right {
    margin-left: 175px;
}
.about__right h1{
    display: inline-block;
    border-bottom: 3px solid #fcac45;
    padding-bottom: 20px;
}
.about__right h1:after {
   display: none;
}
.about__right p {
    margin: 30px 0 50px 0;
    color: #6c6c6c;
}
.about__right li{
    background: url(../images/marker.png) 0px no-repeat;
    padding-left: 25px;
    margin-top: 10px;
    color: #5a5a5a;
}
.mv-100 {
    min-width: 100%;
}
.main__team {
    background-color: black;
    text-align: center;
    padding: 100px 0 165px 0;
    color: white;
}
.main__team h1{
    font-size: 44px;
    padding-bottom: 30px;
}
/* .line {
    width: 100px;
    height: 3px;
    background: #fcac45;
    position: relative;
    left: 45.5%;
    margin-bottom: 85px;
} */
.photo {
    background: grey;
    width: 125px;
    height: 125px;
    border-radius: 50%;
    margin: 20px auto;
}
.team__cards {
    display: flex;
}
.card {
    margin: 0 40px;
}
.name {
    font-size: 20px;
    margin-bottom: 7px;
}
.position {
    font-size: 16px;
    margin-bottom: 35px;
}
.about__position {
    font-size: 14px;
}
.services__cards {
    text-align: center;
    display: grid;
    grid-template-columns: auto auto auto auto;    
    grid-column-gap: 20px;
}
.main__services h1{
    text-align: center;
    padding: 100px 0 30px 0;
}
.main__services p{
    color: #6c6c6c;
    margin-bottom: 100px;
}
.services__card h4{
    margin-top: 20px;
    margin-bottom: 15px;
}
.main__clients {
    background: black;
    padding: 100px 0 205px 0;
    color: white;
    text-align: center;
}
.main__clients h1 {
    margin-bottom: 30px;
}
.main__testimonials {
    background-color: black;
    text-align: center;
    color: white;
    padding-bottom: 170px;
}
.main__testimonials h1{
    text-transform: uppercase;
    margin-top: 100px;
    margin-bottom: 30px;
}
.main__testimonials .testimonial{
    text-transform: uppercase;
    margin-bottom: 50px;
}
.contact__form {
    padding: 100px 0 100px 0;
}
.contact__form h1,p {
    text-align: center;
}
.contact__wrapper {
    width: 753px;
    margin: 0 auto;
    color: #636363;
}
.red {
    color: red;
}
.contact__form h1{
    color: black;
    margin-bottom: 30px;
}
form p{
    text-align: left;
}
.form__inputs {
    margin-top: 100px;
    display: flex;
}
textarea {
    width: 100%;
    height: 163px;
}
input {
    width: 360px;
    height: 40px;
    font-size: 20px;
    margin-bottom:  30px;
}
input:first-of-type{
    margin-right: 23px;
}
input, textarea {
    border: 1px solid #999999;
    margin-top: 5px;
}
.button__block {
    display: flex;
    justify-content: flex-end;
}
input[type=submit]{
    width: 165px;
    height: 40px;
    background: #fcac45;
    color: white;
    margin-right: 0;
    margin-top: 20px;
}
h1:after {
    content: "";
    display: block;
    margin: 0 auto;
    width: 100px;
    padding-top: 30px;
    border-bottom: 3px solid #fcac45;
}
.footer__social {
    padding: 30px 0;
    display: flex;
    justify-content: center;
}
.footer {
    background-color: #222;
    border-bottom: 1px solid #3f3f3f;
}
.container {
    width: 90%;
    margin: 0 auto;
}
.social__item {
    margin-left: 14px;
}
.social__item-fa {
    border-radius: 50%;
    border: 3px solid #ababab;
    padding: 5px 9px;
    color: #ababab;
    font-size: 14px;
}
.social__item-fa:hover {
    color: #fcac45;
    transition-duration: 1s;
    border: 3px solid #fcac45;
}
.social__item-twitter {
    border-radius: 50%;
    border: 3px solid #ababab;
    padding: 5px 5px;
    color: #ababab;
    font-size: 14px;
}
.social__item-twitter:hover {
    color: #fcac45;
    transition-duration: 1s;
    border: 3px solid #fcac45;
}
.social__item-google {
    border-radius: 50%;
    border: 3px solid #ababab;
    padding: 5px 4px;
    color: #ababab;
    font-size: 14px;
}
.social__item-google:hover {
    color: #fcac45;
    transition-duration: 1s;
    border: 3px solid #fcac45;
}
.social__item-linkedin {
    border-radius: 50%;
    border: 3px solid #ababab;
    padding: 5px 6px;
    color: #ababab;
    font-size: 14px;
}
.social__item-linkedin:hover {
    color: #fcac45;
    transition-duration: 1s;
    border: 3px solid #fcac45;
}
.social__item-dribbble {
    border-radius: 50%;
    border: 3px solid #ababab;
    padding: 5px 5px;
    color: #ababab;
    font-size: 14px;
}
.social__item-dribbble:hover {
    color: #fcac45;
    transition-duration: 1s;
    border: 3px solid #fcac45;
}












@media (max-width: 1200px){ 
    .list {
        margin-left: 20%;
    }
}
@media (max-width: 1105px){
    .list {
        margin-left: 10%;
    }
}

@media (max-width: 1010px){
    .topnav a {
        display: none;
    }
    .topnav a.icon {
        float: right;
        margin-top: -17px;
        display: block;
        color: white;
        font-size: 25px;
    }
    .list {
        width: 100%;
    }
    .topnav.responsive {
        position: relative;
        top: 50px;
        left: -200px;
    }
    header .topnav.responsive {
        height: 340px;
    }
    .topnav.responsive a.icon{
        position: absolute;
        top: -50px;
        right: -200px;
    }
    .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
    }




    .main__welcome {
        padding: 50px 0 50px 0;
    }
    .main__welcome p{
        font-size: 14px;
    }
    .main__welcome h1{
        font-size: 25px;
    }
    .mv-100 {
        max-width: 100%;
    }
    .main__about {
        flex-direction: column;
    }
    .about__right {
        text-align: center;
        margin-left: 0;
    }
    .about__right li{
        text-align: left;
    }
    .about__right h1{
        margin-top: 10px;
        font-size: 20px;
    }


    .team__cards {
        flex-direction: column;
    }

    .services__cards {
        grid-template-columns: auto;
    }
    .image__logos {
        width: 254px;
    }
    .contact__wrapper {
        width: 50%;
    }
    .form__inputs {
        display: block;
    }
    .text__input {
        width: 100%;
    }
}