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