$gray : #222; $green3 : #00cc69; .about { main { li::before { color: $gray; // content: "\2022"; font-weight: bold; display: inline-block; width: 1em; margin-left: -1em; } ul { list-style: circle !important; margin-top: 10px !important; } p, li { color: $gray; margin-top: 2px; line-height: 1.5; } } header { margin-top: 30px; width: 70%; h1 { display: inline; color: $green3; } p { margin-top: 10px; text-align: justify; margin-bottom: 20px; } } &__fury { margin-top: 30px; margin-bottom: 30px; justify-content: space-between; &--right { align-items: center; width: 48%; .right-top { h1 { display: inline; letter-spacing: -1px; color: $green3; } p { margin-top: 10px; text-align: justify; } } .right-bottom { margin: 20px 30px 20px 0px; h2 { display: inline; color: $green3; } ul { margin: 0px; // list-style: none; padding: 0px; margin-top: 5px; } } } &--left { width: 48%; height: 100%; position: relative; & img { border-radius: 15px; // position: absolute; } } } &__advantages { width: 100%; height: 300px; margin-top: 10px; margin-bottom: 10px; justify-content: space-around; &--right { width: 48%; height: 100%; & img { border-radius: 15px; width: 100%; } } &--left { padding-right: 20px; padding-top: 0px; width: 48%; height: 100%; align-items: flex-end; margin-top: 5px; h1 { display: inline; color: $green3; } ul { margin: 0px; padding: 0px; margin-top: 5px; li { text-align: justify; } } } } } @media screen and (min-width: 1441px) { .about { header { h1 { font-size: 24px; } p { font-size: 14px; } } &__fury { margin-top: 30px; width: 100%; margin-bottom: 30px; justify-content: space-between; &--right { align-items: center; .right-top { h1 { font-size: 23px; } p { font-size: 14px; } } .right-bottom { margin: 20px 30px 20px 0px; h2 { font-size: 18px; } ul { li { font-size: 14px; } } } } &--left { & img { width: 100%; } &__1 { top: 100px; left: 00px; z-index: 100; width: 100%; } } } &__advantages { &--right { & img { } } &--left { h1 { font-size: 18px; } ul { li { font-size: 14px; } } } } } } @media screen and (min-width: 1008px) and (max-width: 1440px) { .about { main { padding: 0px 10px; } header { h1 { font-size: calc(100vw / 65); } p { font-size: calc(100vw / 100); } } &__fury { margin-top: 30px; width: 100%; margin-bottom: 30px; justify-content: space-between; &--right { align-items: center; .right-top { h1 { font-size: calc(100vw / 60); } p { font-size: calc(100vw / 100); } } .right-bottom { margin: 20px 30px 20px 0px; h2 { font-size: 18px; } ul { li { font-size: calc(100vw / 100); } } } } &--left { & img { width: 100%; } &__1 { top: 100px; left: 00px; z-index: 100; width: 100%; } } } &__advantages { &--right { & img { } } &--left { h1 { font-size:calc(100vw / 65); } ul { li { font-size: calc(100vw / 100); } } } } } } @media screen and (min-width : 641px) and (max-width: 1007px) { .about { main { padding: 0px 30px; } header { margin: 0px; width: 100%; h1 { font-size: calc(100vw / 35); } p { font-size: calc(100vw / 50); } } &__fury { flex-direction: column-reverse; margin-top: 30px; &--right { align-items: center; width : 100%; margin-top: 20px; .right-top { h1 { font-size: calc(100vw / 38); } p { font-size: calc(100vw / 55); } } .right-bottom { margin: 20px 30px 0px 0px; h2 { font-size: calc(100vw / 48); } ul { li { font-size: calc(100vw / 55); } } } } &--left { width: 100%; position: static; margin-bottom: 0px; & img { height: 300px; margin: 0px auto; // width: 100%; } &__1 { top: 100px; left: 00px; z-index: 100; width: 100%; } } } &__advantages { position: static; flex-direction: column; height: auto; margin-bottom: 0px; &--right { width: 100%; & img{ margin: 0px auto; width: auto; height: 300px; } } &--left { margin-top: 20px; width: 100%; h1 { font-size: calc(100vw / 40); } ul { li { font-size: calc(100vw / 55); } } } } } } @media screen and (max-width: 640px) { .about { main { padding: 0px 10px; } header { margin: 0px; width: 100%; h1 { font-size: calc(100vw / 22); } p { font-size: calc(100vw / 35); } } &__fury { flex-direction: column-reverse; margin-top: 30px; &--right { align-items: center; width : 100%; margin-top: 20px; .right-top { h1 { font-size: calc(100vw / 24); } p { font-size: calc(100vw / 35); } } .right-bottom { margin: 20px 30px 0px 0px; h2 { font-size: calc(100vw / 30); } ul { li { font-size: calc(100vw / 38); } } } } &--left { width: 100%; position: static; margin-bottom: 0px; & img { width: 100%; } &__1 { top: 100px; left: 00px; z-index: 100; width: 100%; } } } &__advantages { position: static; flex-direction: column; height: auto; margin-bottom: 0px; &--right { width: 100%; } &--left { margin-top: 20px; width: 100%; h1 { font-size: calc(100vw / 26); } ul { li { font-size: calc(100vw / 35); } } } } } } .linegr { /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+49,000000+100&0+0,0.65+49,0+100 */ /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+1,000000+49,000000+100&0+0,0.51+49,0+100 */ background: -moz-linear-gradient( left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.01) 1%, rgba(255, 255, 255, 0.51) 49%, rgba(255, 255, 255, 0) 100% ); /* FF3.6-15 */ background: -webkit-linear-gradient( left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.01) 1%, rgba(255, 255, 255, 0.51) 49%, rgba(255, 255, 255, 0) 100% ); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient( to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.01) 1%, rgba(255, 255, 255, 0.51) 49%, rgba(255, 255, 255, 0) 100% ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffffff', endColorstr='#ffffffff',GradientType=1 ); /* IE6-9 */ }