You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

457 lines
8.6 KiB

$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 */
}