/home/techb158/l2hypotheques.com/wp-content/themes/pylon/assets/sass
Edit: /home/techb158/l2hypotheques.com/wp-content/themes/pylon/assets/sass/_about.scss (9014B)
.about-one {
&__content {
padding-top: 120px;
@media (max-width: 991px) {
padding-top: 40px;
}
p {
margin: 0;
}
}
&__content &__text {
margin: 0;
font-size: 24px;
line-height: 36px;
color: $thm-primary;
margin-top: -10px;
margin-bottom: 40px;
@media (max-width: 425px) {
font-size: 20px;
margin-bottom: 20px;
}
}
&__form {
margin-top: -120px;
position: relative;
z-index: 10;
margin-left: 70px;
background-color: #fff;
box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.1);
border-radius: $border-radius;
@media (max-width: 1199px) {
margin-left: 0;
}
@media (max-width: 991px) {
margin-top: 60px;
}
&-content {
padding-left: 60px;
padding-right: 60px;
padding-bottom: 60px;
padding-top: 40px;
@media (max-width: 425px) {
padding-left: 25px;
padding-right: 25px;
}
p {
margin: 0;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
font-size: 18px;
align-items: center;
&:first-child {
margin-top: 40px;
}
span {
line-height: 1;
}
i {
font-style: normal;
}
b {
font-weight: 500;
color: $thm-black;
line-height: 1;
}
+ p {
padding-top: 30px;
margin-top: 30px;
border-top: 1px solid #e6eaef;
}
}
}
h3 {
text-align: center;
margin: 0;
font-size: 30px;
color: #fff;
background-color: $thm-primary;
font-weight: 400;
border-top-left-radius: $border-radius;
border-top-right-radius: $border-radius;
padding-top: 42px;
padding-bottom: 52px;
position: relative;
@media(max-width: 375px) {
font-size: 24px;
}
&::after {
content: "";
width: 100%;
height: 10px;
background-image: url(../images/shapes/about-form-shape-1-1.png);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
position: absolute;
bottom: 0;
left: 0;
}
}
.thm-btn {
width: 100%;
margin-top: 60px;
padding-top: 17.5px;
padding-bottom: 17.5px;
&:hover {
background-color: $thm-black;
color: #fff;
}
}
.noUi-horizontal {
height: 7px;
border-radius: $border-radius;
background-color: #eff2f6;
border: none;
box-shadow: none;
}
.noUi-horizontal .noUi-handle {
width: 20px;
height: 20px;
border: 4px solid #fff;
background: $thm-base;
border-radius: 50%;
outline: none !important;
box-shadow: none;
&::before,
&::after {
display: none;
}
}
.noUi-tooltip {
border: none;
padding: 0;
color: $thm-color;
font-size: 15px;
background-color: none;
box-shadow: none;
}
.noUi-horizontal .noUi-tooltip {
bottom: 185%;
}
.noUi-connect {
background-color: $thm-base;
border-radius: $border-radius;
}
.input-box {
margin-bottom: 30px;
}
.input-box__top {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 15px;
color: $thm-color;
margin-bottom: 12px;
}
}
}
.about-two {
position: relative;
padding: 120px 0;
&__shape-1 {
position: absolute;
left: 120px;
bottom: 375px;
-webkit-animation-name: bubbleMover;
animation-name: bubbleMover;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
animation-duration: 8s;
}
&__shape-2 {
position: absolute;
top: 190px;
right: 285px;
-webkit-animation-name: bubbleMover;
animation-name: bubbleMover;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
animation-duration: 8s;
}
&__shape-3 {
position: absolute;
right: 200px;
bottom: 133px;
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: bounce;
animation-name: bounce;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
-webkit-animation-duration: 5s;
animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.container {
position: relative;
}
&__image {
position: relative;
&::before {
content: "";
width: 20px;
height: 338px;
background-color: $thm-base;
position: absolute;
top: 0;
left: -50px;
border-radius: $border-radius;
}
> img {
border-radius: $border-radius;
@media (max-width: 1199px) {
max-width: 100%;
}
}
}
&__content {
@media (max-width: 991px) {
margin-top: 50px;
}
> P {
margin-top: -10px;
margin-bottom: 0;
}
.block-title {
h2 {
line-height: 1.08;
}
}
.thm-btn {
&:hover {
background-color: $thm-black;
color: #fff;
}
}
}
&__box {
background-color: #fff;
box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.07);
width: 100%;
max-width: 240px;
border-radius: $border-radius;
padding: 60px;
padding-bottom: 55px;
position: absolute;
bottom: 30px;
left: -90px;
@media (max-width: 667px) {
left: 30px;
}
> i {
position: relative;
font-size: 60px;
color: $thm-base;
position: relative;
&::before {
position: relative;
z-index: 10;
}
&::after {
content: "";
position: absolute;
width: 60px;
height: 60px;
background-color: #eff2f6;
top: 0;
left: 0;
border-radius: 50%;
}
}
h3 {
margin: 0;
font-size: 20px;
line-height: 30px;
font-weight: 400;
color: $thm-black;
margin-top: 10px;
}
}
&__list {
margin-bottom: 0;
display: flex;
flex-wrap: wrap;
margin-top: 40px;
margin-bottom: 50px;
li {
display: flex;
flex: 0 0 50%;
color: $thm-black;
align-items: center;
font-size: 18px;
@media (max-width: 1199px) {
flex: 0 0 100%;
}
+ li {
@media (max-width: 1199px) {
margin-top: 10px;
}
}
> i {
color: $thm-base;
margin-right: 10px;
}
}
}
.button-wrap {
display: flex;
align-items: center;
@media(max-width: 480px) {
flex-direction: column;
align-items: flex-start;
}
}
.main-header__info-phone {
align-items: center;
margin-left: 20px;
@media(max-width: 480px) {
margin-left: 0;
margin-top: 20px;
}
> i {
width: 67px;
height: 67px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background-color: #eff2f6;
border-radius: 50%;
}
}
}
.about-three {
padding-top: 120px;
padding-bottom: 120px;
background-color: #eff2f6;
.block-title {
margin-bottom: 0;
}
.block-text {
@media (min-width: 1200px) {
margin-left: -30px;
}
@media (max-width: 991px) {
margin-top: 40px;
}
}
&__image {
border-radius: $border-radius;
margin-bottom: 60px;
@media (max-width: 1199px) {
position: relative;
}
> img {
width: 100%;
}
&-text {
width: 333px;
text-align: center;
background-color: $thm-base;
line-height: 76px;
text-transform: uppercase;
font-size: 18px;
letter-spacing: 0.2em;
font-weight: 400;
color: #fff;
position: absolute;
bottom: 0;
right: 0;
border-bottom-left-radius: $border-radius;
border-bottom-right-radius: $border-radius;
transform: rotate(-90deg) translate(95.5%, -91px);
transform-origin: top right;
@media (max-width: 1199px) {
transform: rotate(0) translate(0, 0);
width: 100%;
bottom: 0;
transform-origin: bottom center;
}
}
}
}