*{
    margin: 0;
    padding: 0;
    text-decoration: none;
    color: black;
    list-style: none;
    font-family: 'Rubik', sans-serif;
    box-sizing: border-box;
}

.text {
    font-weight: 500;
    margin: 10px;
    text-align: center;
}
body {
    display: flex;
    justify-content: center;
}

.container {
    height: 100%;
    width: 100%;
    max-width: 680px;
    padding-bottom: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px;
}
.container .list {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}
.container .list .list_item {
    box-sizing: border-box;
    position: relative;
    width: 100%;
    margin: 10px 0px;
    background-color: #73B344;
    border: 2px solid #73B344;
    border-radius: 5px;
    display: flex;
    align-items: center;
    transition: background-color ease 0.3s;
}

.container .list .list_link {
    height: 64px;
    display: flex;
    justify-content: center;
    width: 100%;
    color: white;
    font-weight: 500;
    font-size: 20px;
    padding: 20px 10px;
    transition: all ease 0.3s;
}
.container .list .list_link svg {
    position: absolute;
    left: 20px;
    width: 40px;
    height: 40px;
    top:50%;
    
    transform: translateY(-50%);
    fill: white;
    transition: fill ease 0.3s;
}


.container .list .list_link .svg {
    left: 50%;
    transform: translate(-50%,-50%);
}

.container .list .list_item:hover {
    background-color:white;
}

.container .list .list_item:hover .list_link {
    color: #73B344;
}

.container .list .list_item:hover .list_link svg {
    fill: #73B344;
}

/* 3 social buttons */

/* inst */
/* .container .list .inst {
  
    background: linear-gradient(45deg, #f0e333 ,#e25b2a ,#dc2743 ,#cc2366 ,#bc1888 );
    border:none;
    
} */

/* .container .list .inst:hover svg {
    fill: #833ab4 !important;
}

.container .list .inst:hover {
    background:white !important;
    border: 2px solid  #833ab4 !important;
    height: 64px;
} */

/* facebook */

/* .container .list .facebook {
    background-color:#1877f2;
    border-color: #1877f2;
}

.container .list .facebook:hover svg {
    fill: #1877f2 !important;
}

.container .list .facebook:hover .list_link {
    color: #1877f2 !important;
}

.container .list .facebook:hover {
    background-color:white;
} */

/* youtube */
/* .container .list .youtube {
    background-color:#f00;
    border-color: #f00;
}

.container .list .youtube:hover svg {
    fill: #f00 !important;
}

.container .list .youtube:hover .list_link {
    color: #f00 !important;
}

.container .list .youtube:hover {
    background-color:white;
} */



.container .social_list {
    display: flex;
    justify-content: space-between;
    /* width: 50%; */
    margin: 10px 0px;
}

.container .social_link {
    margin: 0 10px;
}

.container .social_list .social_item{
    cursor:pointer;
    transition: all ease 0.3s;
}

.container .social_list .social_item img {
    width: 35px;
}

.container .social_list .social_item:hover {
    transform: scale(1.1);
}

.container .list .list_item_video {
    border: none !important;
    background-color: white;
    border-radius: 5px;
    overflow: hidden;
}

.logo {
    border: 2px solid #73B344;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    width: 100px;
    height: 100px;
    margin-left: 10px;
}


.container .list_item.fancoil {
    background-color: #039BE5 ;
    border-color: #039BE5 ;
}

.container .list_item.fancoil:hover {
    background-color: #2db7fc ;
    border-color: #2db7fc ;
}
.container .list_item.armagel:hover {
    background-color:#858585;
    border-color:#858585;
}


.container .list_item.fancoil:hover .list_link {
    color:#fff;
}

.container .list_item.armagel:hover .list_link {
    color:#fff;
}

.container .list_item.armagel {
    background-color: #5B5B5B ;
    border-color: #5B5B5B ;
}

.list_item.armagel img,
.list_item.fancoil img {
    position: absolute;
    width: 90px;
    left: 10px;
}

.list_item.fancoil img {
    transform: translateY(-13%);
}
.list_item.armagel img {
    transform: translateY(13%);
    width: 110px;
}

@media screen and (max-width: 440px) {
    .container .list .list_link svg {
        width: 30px;
        height: 30px;
    }

    .list_item.fancoil img {
        width: 65px;
        transform: translateY(0%);
    }

    .list_item.armagel img {
        transform: translateY(35%);
        width: 80px;
    }
}

@media screen and (max-width:350px) {
    a[href="mailto:info@dttermo.ru"] {
        padding-left: 40px !important;
    }

    .list_item.armagel img {
        transform: translateY(50%);
        width: 70px;
    }

    .list_item.armagel img, .list_item.fancoil img {
        left: 5px;
}