.main { min-height: 300px; background: #444444; &__info { display: block; width: 100%; position: relative; } &__link { display: block; width: 100%; -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */ filter: grayscale(100%); &:hover { -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */ filter: grayscale(0%); } } &__wrap { display: flex; } &__img { width: 100%; background-repeat: no-repeat; background-size: cover; display: block; height: 412px; } &__group { &_1 { flex-grow: 2; } &_2 { // width: 320px; width: 280px; } &_3 { // width: 320px; width: 280px; } } &__desc { padding: 20px 10px 20px 10px; color: #ffffff; font-family: "Oswald", Roboto; font-size: 19px; font-weight: 400; text-transform: uppercase; display: block; &_1 { background-color: #eb6d65; } &_2 { background-color: #7b8c93; } &_3 { background-color: #565656; } } &__block { position: absolute; left: 0px; bottom: 62px; background-color: rgba(0,0,0,0.77); padding: 20px 30px 15px 30px; } &__ldesc { &_1 { color: #ffffff; font-family: "Oswald", Roboto; font-size: 20px; font-weight: 300; text-transform: uppercase; } &_2 { color: #ffffff; font-family: "Oswald", Roboto; font-size: 30px; font-weight: 400; text-transform: uppercase; } } &__lgroup { margin-top: 5px; &:first-child { margin-top: 0px; } } } .welcome { background-color: #222222; padding: 40px 0px 40px 0px; &__wrap { display: flex; align-items: center; } &__group { color: #ffffff; padding: 10px; color: #d8d8d8; font-size: 15px; font-family: "Roboto", Roboto; font-weight: 400; line-height: 27.8571px; &_1 { flex-grow: 2; text-align: center; } &_2 { width: 80%; } } &__title { padding: 0px; margin: 0px; font-family: "Oswald", Roboto; font-size: 40px; font-weight: 300; display: inline-block; padding-bottom: 30px; } } .benefits { background: #222222; &_color_1 { background: #444444; } &__wrap { } &__items { list-style-type: none; padding: 0px; margin: 0px; display: flex; flex-wrap: wrap; } } .benefits-item { width: 33.33%; display: flex; flex-direction: column; height: 251px; align-items: end; justify-content: center; position: relative; padding: 10px; box-sizing: border-box; &_1 { height: 68px; background-color: #565656; flex-direction: unset; align-items: center; justify-content: flex-start; width: 66.66%; } &_2 { height: 68px; background-color: #eb6d65; flex-direction: unset; align-items: center; justify-content: center; flex-grow: 2; } &_3 { height: 60px; background-color: #eb6d65; flex-direction: unset; align-items: center; justify-content: flex-start;; flex-grow: 2; } &_4 { height: 60px; background-color: #7b8c93; flex-direction: unset; align-items: center; justify-content: flex-start;; flex-grow: 2; } &_5 { height: 60px; background-color: #565656; flex-direction: unset; align-items: center; justify-content: flex-start;; flex-grow: 2; } &__bg { background-repeat: no-repeat; background-size: cover; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 1; -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */ filter: grayscale(100%); } &:hover { .benefits-item__bg { -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */ filter: grayscale(0%); } } &__desc { color: #7b8c93; font-size: 14px; font-family: "Roboto", Roboto; font-weight: 400; border: solid #b7b7b7 1px; border-left: 0px; border-right: 0px; padding: 15px 0px 15px 0px; display: inline-block; margin-bottom: 15px; position: relative; z-index: 2; } &__link { color: #000; font-family: "Oswald", Roboto; font-size: 24px; font-weight: 400; line-height: 1; position: relative; z-index: 2; } &__title { color: #ffffff; font-family: "Oswald", Roboto; font-size: 20px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.9px; } } .possibilities { padding: 30px 0px; &__group { } &__items { list-style-type: none; padding: 0px; margin: 0px; display: flex; justify-content: space-around; margin-top: 50px; align-items: baseline; } } .possibility { display: flex; flex-direction: column; align-items: center; justify-content: center; &__fa { width: 1em; height: 1em; position: relative; display: block; } &__icon { padding: 0.5em; color: #818a91; border: 3px solid #7b8c93; background-color: transparent; box-sizing: border-box; display: inline-block; line-height: 1; font-size: 40px; text-align: center; } &__title { font-family: "Oswald", Roboto; font-size: 24px; font-weight: 400; color: #000000; margin-top: 20px; } &__desc { font-family: "Roboto", Roboto; font-weight: 400; font-size: 15px; margin-top: 10px; } } .works { padding: 30px 0px; &__items { list-style-type: none; margin: 0px; padding: 0px; display: flex; margin: 40px 0px 30px 0px; } &__carousel { margin: 40px 0px 30px 0px; } } .work { width: 25%; border: 1px solid rgba(0, 0, 0, .1); background: #fff; margin: 10px; &__link { display: block; color: #303133; &:hover { color: #23527c; } } &__group { &_1 { } &_2 { padding: 15px; } } &__img { width: 100%; height: auto; } &__title { color: inherit; font-family: "Oswald", Roboto; font-weight: 500; font-size: 18px; display: block; } &__desc { font-family: "Roboto", Roboto; font-weight: 400; font-size: 15px; color: #000; margin-top: 10px; display: block; } &__all { color: #515151; font-family: "Roboto", Roboto; font-weight: 400; font-size: 15px; display: block; &:hover { color: #000; } &_fr { float: right; } } } .elite { background-color: #edeeef; font-size: 15px; border-bottom: solid #edeeef 60px; margin-bottom: -60px; &__title { text-align: left; } &__wrap { display: flex; } &__row { flex-grow: 2; &_1 { } &_2 { display: flex; flex-direction: column; justify-content: center; } } &__h3 { font-size: 50px; } &__group { margin-top: 40px; &:first-child { margin-top: 0px; } } }