@font-face {
font-family: 'Poppins';
src: url(//my-soyo.com/wp-content/themes/soyo/fonts/Poppins-Light.ttf);
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'Poppins';
src: url(//my-soyo.com/wp-content/themes/soyo/fonts/Poppins-Regular.ttf);
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Poppins';
src: url(//my-soyo.com/wp-content/themes/soyo/fonts/Poppins-Medium.ttf);
font-weight: 500;
font-style: normal;
} html{
height: 100%;
margin: 0;
padding: 0;width: 100%;
background: #fff;
}
body{
height: 100%;
width: 100%;
position: relative;
margin: 0;
padding: 0;
color: #000;
font-size: 18px; 
font-weight: 400;
font-family: 'Poppins', Arial, Helvetica, sans-serif;
line-height: 150%; 
min-width: 320px;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
h1, h2, h3, h4, p, ul, li, a, span, div, input, textarea, select, form, fieldset, button, dl, dd, dt, figure, figcaption, blockquote, caption, aside, section {
margin: 0;
padding: 0;
border: 0;
outline: 0;
box-sizing: border-box;
}
img {
margin: 0;
padding: 0;
border-style: none;
vertical-align: bottom;
}
input, textarea, select, button {
font-weight: 400;  
font-family: 'Poppins', Arial, Helvetica, sans-serif;
vertical-align:middle;
border: 0;
outline: 0;
background: none;
}
a:hover {text-decoration: none;} .holder {
padding: 0 15px;
}
@media (min-width: 576px){
.holder {
max-width: 540px;
margin: auto;
padding: 0;
}
}
@media (min-width: 768px){
.holder {
max-width: 720px;	
}
}
@media (min-width: 1024px) {
.holder {
max-width: 960px;
}
}
@media (min-width: 1300px){
.holder {
max-width: 1200px;
}
}
.holder:after {
display: block;
content: '';
clear: both;
}
h1 {
font-weight: 700;
font-size: 294px;
line-height: 432px;
text-transform: lowercase;
color: #1A1A1A;
}
h2 {
font-weight: 400;
font-size: 70px;
line-height: 212px;
color: #333333;
}
h3 {
font-weight: 500; 
font-size: 53px; 
line-height: 110%; 
color: #333333; 
}
h4 {
font-weight: 200; 
font-size: 28px; 
line-height: 115%; 
color: #333333; 
}
a {transition: all .3s linear;}
p {margin: 0 0 27px;}
p a, .article li a {color: #000;}
.camel {color: #FACCA5;}
.purple {color: #AD98DA;}
.center {text-align: center;}
.upper {text-transform: uppercase;}
.button-holder {text-align: center;}
.button {
position: relative;
display: inline-block;
min-width: 220px; 
padding: 20px; 
color: #AE95DA;
font-weight: 400; font-size: 21px;
line-height: 24px;
text-transform: none; 
text-align: center;
text-decoration: none;
cursor: pointer;
background: transparent;
transition: all .3s linear;
border: 2px solid #AE95DA; }
.button::after {
position: absolute;
top: -3px;
left: -3px;
right: -3px;
bottom: -3px;
content: '';
box-sizing: border-box;
border: 1px solid #4f4f4f;
transition: all .3s linear;
opacity: 0;
}
.button:hover {
background: #333333; 
color: #ffffff;
}
.button:focus::after {
opacity: 1;
}
.button:active {
transform: scale(0.95);
}
.button:active::after {
opacity: 0;
} .button-grey {
background: none;
border: 2px solid #AE95DA;
color: #AE95DA;
min-width: 150px;
padding: 20px 45px;
font-size: 20px;
text-transform: none;
margin-left: 20px;
font-weight: 400;
}
.button-grey:hover {
color: #fff;
background: #000000;
} .button-svc {
background: none;
border: 2px solid #AE95DA;
color: #AE95DA;
min-width: 150px;
padding: 20px 45px;
font-size: 20px;
text-transform: none;
margin-left: 20px;
font-weight: 400;
}
.button-svc:hover {
color: #fff;
background: #000000;
}
.button-white {
background: none;
color: #000000;
border: 1px solid #000000;
}
.button-white:hover {
color: #fff;
background: #000;
border: 1px solid #000;
}
.darker {
background: red;
} .input {
display: block;
width: 75%; 
height: 55px;
padding: 0 10px;
margin: 0 0 20px;
font-size: 24px;
color: #000;
background: transparent;
border-bottom: 1px solid #666666;
}
.textarea {
display: block;
width: 75%; 
height: 250px; 
padding: 10px;
margin: 0 0 20px;
font-size: 24px;
resize: vertical;
color: #000;
background: transparent;
border-bottom: 1px solid #666666;
}
::-webkit-input-placeholder {color: #000;}
:-moz-placeholder {color: #000; opacity: 1;}
::-moz-placeholder {color: #000; opacity: 1;}
:-ms-input-placeholder {color: #000;}
.form-button {
padding: 30px 0 0;
text-align: center;
display: flex; 
}
#popup .wpcf7 {
position:relative;
}
.input.wpcf7-not-valid {
border-bottom: 1px solid red;
}
#popup .wpcf7 span.wpcf7-form-control-wrap {
position:relative;
}
#popup .wpcf7-not-valid-tip {
position:absolute;
bottom:-24px;
right:0px;
color:red;
font-size: 14px!important;
}
#popup .wpcf7 .wpcf7-response-output {
position:absolute;
left:0px;
right:0px;
bottom:-32px;
border:none!important;
text-align:center!important;
font-size:14px!important;
line-height:20px!important;
padding:0!important;
margin:0!important;
}
#popup .wpcf7 .wpcf7-spinner {
position:absolute;
padding:0;
display:block;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
top:50%!important;
left:50%!important;
background:#facca5 url(//my-soyo.com/wp-content/themes/soyo/images/loading.svg) no-repeat center center!important;
background-size:31px 31px!important;
width:50px!important;
height:50px!important;
margin:-25px 0 0 -25px!important;
}
#popup .wpcf7 .wpcf7-spinner::before { display:none!important; }
@media screen and (max-width: 1023px) {
#popup .wpcf7 .wpcf7-response-output {
bottom:-43px;	
}
} #wrapper {
position: relative;
overflow: hidden;
padding: 134px 0 0;
}
.cursor {
position: fixed;
top: 0;
left: 0;
pointer-events: none;
border-radius: 50%;
background: #ffffff; 
border-radius: 50%;
z-index: 1000;
transition: box-shadow .3s, transform .3s;
}
.cursor.is-active {
background: #000;
transform: scale(1.2);
} .header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 200;
display: flex;
align-items: center;
justify-content: space-between;
height: 134px;
padding: 0 110px 0 70px;
background: #fff;
transition: all 0.3s linear;
}
.header.fixed {
height: 90px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}
.header-logo img {
display: block;
width: 166px; 
}
.header .button {
padding: 16px 25px;
min-width: 1px;
background-color: #FDC99A;
color: #222222;
font-size: 17px;
font-weight: 500;
border: none;
}
.header .button:hover {
background: #FFBB82; 
}
.header-nav {
display: flex;
align-items: center;
}
.header-nav-list {
display: flex;
position: relative;
} .header-nav-list li {
position: relative;
margin: 0 60px 0 0;
font-weight: 400; 
font-size: 21px; 
line-height: 24px;
text-transform: none; 
list-style: none; }
.header-nav-list a {
color: #222222; 
text-decoration: none;
}
.header-nav-list a:hover,
.header-nav-list a.active,
.header-nav-list > li:hover > a {
color: #FACCA5;
}
.menu-item-has-children > a {
position: relative;
padding: 0 20px 0 0;
}
.menu-item-has-children > a::after {
position: absolute;
top: 50%;
margin:-5px 0 0 0;
right: 0;
content: '';
width: 10px;
height: 10px;
background: url(//my-soyo.com/wp-content/themes/soyo/images/down-black.svg) 50% 50% no-repeat;
transition: all 0.3s linear;
}
.header-nav-list .menu-item-has-children:hover a::after,
.header-nav-list .menu-item-has-children > a.active::after {
background: url(//my-soyo.com/wp-content/themes/soyo/images/down-camel.svg) 50% 50% no-repeat;
}
.sub-menu,
.subnav {
position: absolute;
left: 0;
top: 100%;
z-index: 50;
width: 200px;
margin-top: 22px;
background: #FFFFFF;
box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.05);
visibility: hidden;
opacity: 0;
transform: translateY(5px);
transition: all 0.3s linear;
}
.header-nav-list li:hover .sub-menu,
.header-nav-list li:hover .subnav {
transform: translateY(0px);
opacity: 1;
visibility: visible;
}
.sub-menu::before,
.subnav::before {
position: absolute;
left: 0;
right: 0;
top: -22px;
height: 22px;
content: '';
}
.sub-menu li,
.subnav li {
margin: 0;
}
.sub-menu a,
.subnav a {
display: block;
padding: 10px 15px;
border-left: 2px solid transparent;
}
.sub-menu a:hover,
.sub-menu a.active,
.subnav a:hover,
.subnav a.active {
color: #FACCA5;
border-left: 2px solid #FACCA5;
} .sub-menu ul {
position: absolute;
padding: 0;
left: 0;
display: none; 
}
.sub-menu li:hover ul ul {
display: none; 
}
.sub-menu li:hover ul {
display: block; 
margin-left: 145px;
margin-top: -34px; 
}
.sub-menu li li:hover ul {
display: block; 
}
.mob-nav-icon {
position: absolute;
top: 15px;
right: 15px;
z-index: 250;
padding: 0 0 10px;
display: none;
}
.mob-nav-block {
position: relative;
display: block;
width: 25px;
height: 2px;
background: #000;
transition: all .3s linear;
}
.mob-nav-block:after {
content: "";
position: absolute;
top: -9px;
left: 0;
width: 25px;
height: 2px;
background: #000;
transition: all .3s linear;
}
.mob-nav-block:before {
content: "";
position: absolute;
top: 9px;
left: 0;
width: 25px;
height: 2px;
background: #000;
transition: all .3s linear;
}
.mob-nav-icon.active .mob-nav-block {
background: none;
}
.mob-nav-icon.active .mob-nav-block:before {
top: 0;
transform: rotate(45deg);
}
.mob-nav-icon.active .mob-nav-block:after {
top: 0;
transform: rotate(-45deg);
}   .info-item2 {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
margin: 0; 
padding: 0 25%;
}
.info-item2:last-child {margin: 0;}
.info-col2 {
width: 46.6%;
font-size: 24px; 
}
.info-col2:first-child {
text-align: right;
}
.info-text2 {
margin: 0 0 20px;
font-size: 24px; 
line-height: 115%; 
font-weight: 200; 
} @media screen and (max-width: 767px) { 
.info-item2 {
flex-direction: column; 
}
.info-col2 {
width: 100%; 
}
}
.main-slogan {
margin: 0 0 100px;
}
.slogan {
display: flex;
flex-direction: column;
margin: 0 -280px;
font-size: 200px; 
line-height: 76%; 
white-space: nowrap;
}
.slogan-line {
display: flex;
}
.slogan1 {
position: relative;
margin: 0 0 0 70px;
opacity: 0;
left: 400px;
}
.slogan2 {
position: relative;
margin: 0 0 0 auto;
opacity: 0;
left: -400px;
}
.slogan3 {
position: relative;
opacity: 0;
left: 400px;
}
.slogan-logo {
position: relative;
margin: 5% 0 0 75px;
opacity: 0;
left: -400px;
}
.slogan .slogan1,
.slogan .slogan2,
.slogan .slogan3,
.slogan .slogan-logo {
transition: all 0.5s linear, left 1.5s cubic-bezier(0.250, 0.900, 0.300, 1.000), transform 0s linear;
}
.slogan .slogan2 {
transition: all 0.5s linear 0.3s, left 1.5s cubic-bezier(0.250, 0.900, 0.300, 1.000) 0.3s, transform 0s linear 0s;
}
.slogan .slogan3,
.slogan .slogan-logo {
transition: all 0.5s linear 0.6s, left 1.5s cubic-bezier(0.250, 0.900, 0.300, 1.000) 0.6s, transform 0s linear 0s;
}
.slogan span.ani_start,
.slogan .slogan-line.ani_start .slogan3,
.slogan .slogan-line.ani_start .slogan-logo {
opacity: 1;
left: 0px;
}   #header {
display: flex;
justify-content: space-between;
align-items: center;
} .hero {
position: relative; 
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100vh;
padding: 1em;
box-sizing: border-box;
color: #333333;
background: url(//my-soyo.com/wp-content/themes/soyo/images/media/main_banner_clean.png) center center no-repeat;
background-size: cover;
}
.hero-title {
max-width: 17em;
margin: 0;
font-size: 10.3vh;
font-weight: 100;
line-height: 1.0;
padding-left: 99px;
padding-top: 165px;
text-transform: none;
letter-spacing: 0;
}
.hero-subtitle {
max-width: 22em;
margin: 0;
font-size: 3.2vh;
font-weight: 100;
line-height: 1.2;
padding-left: 99px;
padding-bottom: 55px;
padding-top: 45px;
color: #333333;
}
.hero-footer {
display: flex;
margin-bottom: 2.5em;
} .button-primary {
color: #9d86c4;
background-color: transparent;
padding: 23px 57px;
margin-left: 99px;
margin-bottom: 350px;
text-decoration: none;
border: 2px solid #9d86c4;
font-size: 22px;
font-weight: 400;
}
.button-primary:hover {
color: #ffffff;
background-color: #333333;
border: .1em solid #ffffff;
}
#iconheader {
position: absolute;
right: 0; 
bottom: 0; 
z-index: 99999;
margin-right: 40px;
padding-bottom: 60px;
} 
#myicon {
text-decoration: none;
color: transparent;
font-size: 6vh;
background: url(//my-soyo.com/wp-content/themes/soyo/images/chat_icon.png) 50% 50% no-repeat;
}  .container-new {
display: flex;
align-items: center;
justify-content: center;
padding-top: 190px;
}
.item-new {
background-color: #ffffff;
width: 50%;
}
.heading-2 {
color:  #333333;
font-size: 45px;
line-height: 115%;
text-align: center;
font-weight: 300;
} .banner2 {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 67vh;
padding: 1em;
box-sizing: border-box;
background: url(//my-soyo.com/wp-content/themes/soyo/images/media/Banner2_rs.jpg) center center no-repeat;
background-size: contain;
margin-top: 220px;
} .flex-container {
height: 100%;
padding: 0;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
.row {
width: auto;
}
.flex-item {
background-color: #ffffff;
padding: 5px;
margin: 185px 0;
color: #AE95DA;
font-weight: 500;
font-size: 5.6em;
text-align: center;
} .legg-section {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
margin: 100px 0;
}
.legg-desc {
color: #ae95da;
font-size: 4.5em; 
font-weight: 500;
margin-top: -10px;
}
div#one ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
}
div#one ul li {
color: #ae95da;
font-family: 'Poppins', sans-serif;
transition: 0.9s;
font-weight: 500;
font-size: 6.5em;
margin-top: 90px;
} ul:hover li {
transform: rotateY(360deg);
}
ul:hover li:nth-child(1) {
transition-delay: 0.9s;
} .button-holder-bottom {
text-align: center;
padding: 80px 0 80px; 
} .button-new {
background: none;
border: 1px solid #AE95DA;
min-width: 150px;
color: #AE95DA;
font-weight: 500;
font-size: 17px;
padding: 15px 35px;
}
.button-new:hover {
color: #ffffff;
background: #333333;
}
.main-banner {
height: 1300px; 
margin: 0 0 150px;
}
.main-banner-block {
display: flex;
position: relative;
left: 50%;
margin-left: -760px;
width: 1520px;
}
.main-banner-col {
width: 50%;
}
.main-banner-col:first-child {
margin-top: 250px;
}
.main-banner-photo {
overflow: hidden;
height: 1000px;
}
.main-banner-title {
position: absolute;
left: 50%;
top: 50%;
width: 860px;
transform: translate(-50%, -50%);
color: #fff;
text-align: center;
opacity: 0;
margin-top: 50px;
line-height: 166px;
}
.main-banner-title.animate {
transition-delay: 0.2s;
}
.main-banner-title.ani_start {
opacity: 1;
margin-top: 0;
} .main-about {
padding: 0 0 150px;
}
.title {
margin: 0 0 75px;
text-align: center;
} .title-choose {
margin: 0 0 75px;
text-align: center;
}
.info-item {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
margin: 0 0 0px; 	
}
.info-item:last-child {margin: 0;}
.info-col {
width: 46.6%;
}
.info-col:first-child {text-align: right;}
.info-text {
margin: 0 0 20px;
font-size: 24px; 
line-height: 115%; 
font-weight: 200; 
} .info-text-h4 {
margin: 0 0 20px;
font-size: 24px; 
line-height: 115%; 
font-weight: 200; 
margin-left: 28px; 
}
.newcol {
max-width: 70%;
}
.info-list {
padding: 0 0 0 20px;
margin: 0 0 50px;
font-size: 18px; 
line-height: 115%; 
font-weight: 200; 
}
.info-list li {
list-style-type: circle; 
} .info-list-h4 {
padding: 0 0 0 20px;
margin: 0 0 50px;
font-size: 24px; 
line-height: 115%; 
font-weight: 200; 
margin-left: 25px; 
}
.info-list-h4 li {
list-style-type: circle; 
}
.flexh4 {
font-weight: 300; 
font-size: 30px; 
line-height: 115%; 
color: #222222; 
}
.info-list:last-child {margin: 0;}
.main-about .info-col:last-child { }
.number-title {
width: 100%; 
text-align: center; 
margin-top: 150px; 
} .number-block {
display: flex;
align-items: center; 
justify-content: center; 
margin-top: 200px;
}
.number-item {
position: relative;
overflow: hidden;
width: 170px;
min-width: 200px; 
margin: 0 14px 0 0;
}
.number-item:last-child {margin: 0;}
.number-item img {
display: block;
width: 100%;
}
.number-text {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-weight: 500;
font-size: 186px;
line-height: 100%;
text-align: center;
}
.number1 {
color: #edc3ae;
}
.number2 {
color: #c3a7cc;
}
.number3 {
color: #c3a7cc;
}
.number4 {
color: #edc3ae;
} .main-prov {
margin: 0 0 150px;
}
.main-prov .holder {
max-width: none;
padding: 0 100px;
}
.prov-slider {
padding: 0 58px;
}
.prov-slide {
padding: 0 42px;
}
.prov-item {
margin: 0 0 60px;
}
.prov-slide.slick-active:nth-child(3n + 2) .prov-item {
transition-delay: 0.3s;
}
.prov-slide.slick-active:nth-child(3n + 3) .prov-item {
transition-delay: 0.6s;
}
.prov-photo {
margin: 0 0 20px;
}
.prov-photo img {
width: 100%;
}
.prov-item h4 .camel {
display: block;
} .slide,
.sliderimg {
width: 40%;
height: 40%;
}
.slick-next:before {
content: "→";
}
.slick-prev,
.slick-next {
z-index: 999;
}
.slick-next {
right: 0 !important;
}
.slick-prev {
left: 0 !important;
}
html,
body {
margin: 0;
padding: 0;
}
.main {
width: 100%;
text-align: center;
} .slider {
width: 60%; margin: 0px auto;
}
.slick-slide {
margin: 10px;
}
.slick-slide .sliderimg {
width: 100%;     
}
.card {
position: relative;
background: #fff;
}
.card:hover {
background: rgb(253, 201, 154, 0.8);
}
.middle {
position: absolute;
visibility: hidden;
}
.card-content {
text-align: center;
color: #ccc;
}
.card-text {
font-size: 15px;
font-weight: 300; 
}
.car:hover .sliderimg {
opacity: 0.1;
}
.card:hover .middle {
opacity: 3; 
} .car:hover .middle {
background-color: transparent;
color: black;
font-size: 26px;
position: absolute;
padding: 0px;
line-height: 135%; 
font-weight: 200; 
top: 40%; left: 25%; visibility: visible;
font-weight: 100;
text-align: center;
} .slick-dots button {
display: block;
width: 16px;
height: 16px;
font-size: 0;
cursor: pointer;
font-size: 0;
box-sizing: border-box;
background: #e7dff4; 
border-radius: 50%;
}
.slick-dots button:hover,
.slick-dots .slick-active button {
background: #AE95DA;
opacity: 1;
} .slick-prev {margin-left:10px;}
.slick-next {margin-right:10px;} .slick-arrow {
position: absolute;
top: 130px; 
z-index: 10;
display: block;
width: 50px;
height: 50px;
font-size: 0;
cursor: pointer;
background: url(//my-soyo.com/wp-content/themes/soyo/images/arrow_slide.svg) 50% 50% no-repeat;
background-size: contain;
transition: all 0.3s linear;
}
.slick-prev {
left: 0px;
transform: scale(-1, 1);
}
.slick-next {
right: 0px;
}
.slick-dots {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.slick-dots li {
margin: 0 5px;
} .main-info {
margin: 0 0 150px;
} .main-choose {
margin: 0 0 150px;
}
.choose-block {
position: relative;
padding: 247px 0 224px;
}
.choose-nav a {
display: block;
margin: -1px 0 0;
padding: 50px;
font-weight: 500;
font-size: 60px;
line-height: 100%;
text-align: center;
text-transform: lowercase;
text-decoration: none;
color: #000000;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}
.choose-nav a:hover {
position: relative;
color: #AD98DA;
border-top: 1px solid #AD98DA;
border-bottom: 1px solid #AD98DA;
}
.choose-box {
position: absolute;
overflow: hidden;
width: 396px;
height: 371px;
left: 50%;
}
.choose-box img {width: 100%;}
.choose1 {
top: 0;
margin-left: 364px;
}
.choose2 {
top: 324px;
margin-left: -760px;
}
.choose3 {
top: 534px;
margin-left: 228px;
}
.choose-box-text {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: #FFFFFF;
opacity: 0;
transform: translateY(30px);
transition: all 0.5s linear 0.5s;
}
.choose-box.ani_start .choose-box-text {
opacity: 1;
transform: translateY(0px);
} .main-form {
position: relative;
padding: 0 0 50px; 
}
.main-form-bg {
position: absolute;
left: 50%;
bottom: 0px;
margin-left: -460px;  
}
.main-form .holder {
position: relative;
}
.main-form-block {
display: flex;
justify-content: flex-end;
padding-right: 80px;
}
.main-form-block form {
width: 480px;
}
.main-form-block .wpcf7 span.wpcf7-form-control-wrap {
position:relative;
}
.main-form-block .wpcf7 .wpcf7-not-valid-tip {
position:absolute;
bottom:-24px;
right:0px;
color:red;
font-size: 14px!important;
}
.main-form-block .wpcf7 {
position:relative;
}
.main-form-block .wpcf7 .wpcf7-response-output {
position:absolute;
left:0px;
right:0px;
bottom:-32px;
border:none!important;
text-align:center!important;
font-size:14px!important;
line-height:20px!important;
padding:0!important;
margin:0!important;
}
.main-form-block .wpcf7 .wpcf7-spinner {
position:absolute;
padding:0;
display:block;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
top:50%!important;
left:50%!important;
background:#facca5 url(//my-soyo.com/wp-content/themes/soyo/images/loading.svg) no-repeat center center!important;
background-size:31px 31px!important;
width:50px!important;
height:50px!important;
margin:-25px 0 0 -25px!important;
}
.main-form-block .wpcf7 .wpcf7-spinner::before { display:none!important; }
.main-form-title {
display: flex;
justify-content: center;
margin: 0 -250px;
font-weight: 700;
font-size: 200px; 
line-height: 432px;
text-align: center;
text-transform: lowercase;
white-space: nowrap;
}
.main-form-title1 {
margin-right: 70px;
opacity: 0;
transform: translateX(-150px);
}
.main-form-title2 {
margin-top: 158px;
opacity: 0;
transform: translateX(150px);
}
.main-form-title span.ani_start {
opacity: 1;
transform: translateX(0px);
}  .banner {
position: relative;
overflow: hidden;
height: 850px;
display: flex;
} .banner.mod {
height: 400px;
}
.banner .holder {width: 100%;}
.banner-main {
position: absolute;
top: 0;
left: 50%;
margin-left: -960px;
}
.banner-4-mask {
position: absolute;
z-index: 10;
bottom: 0;
left: 50%;
margin-left: -549px;
height: 72.7%;
}
.banner-title {
display: flex;
color: #fff;
}
.banner-title .animate {
transition: all 0.5s linear, left 1.5s cubic-bezier(0.250, 0.900, 0.300, 1.000), transform 0s linear;
}
.serv-title-4-1 {
position: relative;
z-index: 20;
opacity: 0;
left: 400px;
}
.serv-title-4-2 {
position: relative;
z-index: 5;
margin: 18% 0 0 4%;
opacity: 0;
left: -400px;
}
.serv-title-4-1.ani_start,
.serv-title-4-2.ani_start {
opacity: 1;
left: 0px;
}
.serv1 .holder {
max-width: none;
padding: 0 50px;
}
.serv1 .banner-title {
justify-content: center;
}
.serv-title-1-1 {
position: relative;
z-index: 20;
opacity: 0;
left: 400px;
bottom: 100px;
}
.serv-title-1-2 {
position: relative;
z-index: 5;
margin: 13% 0 0 -8%;
opacity: 0;
left: -400px;
bottom: 100px;
}
.serv-title-1-1.ani_start,
.serv-title-1-2.ani_start {
opacity: 1;
left: 0px;
}
.serv2 .holder {
max-width: none;
padding: 0 50px;
}
.serv-title-2-1 {
position: relative;
z-index: 20;
opacity: 0;
left: 400px;
}
.serv-title-2-2 {
position: relative;
z-index: 5;
margin: 13% 0 0 0;
opacity: 0;
left: -400px;
}
.serv-title-2-1.ani_start,
.serv-title-2-2.ani_start {
opacity: 1;
left: 0px;
}
.banner-2-mask {
position: absolute;
z-index: 10;
top: 1%;
left: 50%;
margin-left: -378px;
height: 99%;
}
.serv3 .holder {
max-width: none;
padding: 0 50px;
}
.serv3 .banner-title {
justify-content: center;
padding: 0 0 0 70px;
}
.banner-3-mask {
position: absolute;
z-index: 10;
bottom: 6.1%;
left: 50%;
margin-left: -560px;
height: 59.5%;
}
.serv-title-3-1 {
position: relative;
z-index: 20;
opacity: 0;
left: 400px;
}
.serv-title-3-2 {
position: relative;
z-index: 5;
margin: 7% 0 0 10%;
opacity: 0;
left: -400px;
}
.serv-title-3-1.ani_start,
.serv-title-3-2.ani_start {
opacity: 1;
left: 0px;
}
.serv5 .banner-title {
max-width: 840px;
margin: 0 auto;
padding: 0 0 100px;
}
.banner-5-mask {
position: absolute;
z-index: 10;
top: 21%;
left: 50%;
margin-left: -336px;
height: 91%;
}
.serv-title-5-1 {
position: relative;
z-index: 5;
opacity: 0;
left: 400px;
bottom: 100px;
}
.serv-title-5-1.ani_start {
opacity: 1;
left: 0px;
}
.serv6 .holder {
max-width: none;
padding: 0 30px;
}
.serv6 .banner-title {
justify-content: center;
}
.serv-title-6-1 {
position: relative;
z-index: 5;
opacity: 0;
left: 400px;
}
.serv-title-6-2 {
position: relative;
z-index: 20;
margin: 12% 0 0 5%;
opacity: 0;
left: -400px;
}
.serv-title-6-1.ani_start,
.serv-title-6-2.ani_start {
opacity: 1;
left: 0px;
}
.banner-6-mask {
position: absolute;
z-index: 10;
top: 16%;
left: 50%;
margin-left: -532px;
height: 100%;
}
.serv7 .holder {
max-width: none;
padding: 0 50px;
}
.serv7 .banner-title {
padding: 200px 0 0;
justify-content: flex-end;
}
.serv-title-7-1 {
position: relative;
z-index: 20;
opacity: 0;
left: 400px;
}
.serv-title-7-2 {
position: relative;
z-index: 5;
margin: 12% 0 0 5%;
opacity: 0;
left: -400px;
}
.serv-title-7-1.ani_start,
.serv-title-7-2.ani_start {
opacity: 1;
left: 0px;
}
.banner-7-mask {
position: absolute;
z-index: 10;
bottom: 2.8%;
left: 50%;
margin-left: 187px;
height: 51%;
}
.serv8 .holder {
max-width: none;
padding: 0 50px;
}
.serv8 .banner-title {
justify-content: center;
}
.serv-title-8-1 {
position: relative;
z-index: 20;
opacity: 0;
left: 400px;
}
.serv-title-8-2 {
position: relative;
z-index: 5;
margin: 15% 0 0 -13.5%;
opacity: 0;
left: -400px;
}
.serv-title-8-1.ani_start,
.serv-title-8-2.ani_start {
opacity: 1;
left: 0px;
} .serv {
padding: 150px 0 100px;
}
.serv-top {
display: inherit; flex-wrap: wrap;
justify-content: space-between;
padding: 0 0 50px;
}
.serv-top-col {
width: 100%; }
.serv-top-col h4 {
text-align: left; 
font-size: 55px; 
font-weight: 500; 
margin-left: 140px;
}
.serv-top-text {
padding: 10px 0 0;
font-size: 23px; 
line-height: 145%;
font-weight: 300;
margin-top: 30px;
margin-left: 140px;
margin-right: 130px;
}
.serv-top-text p {
margin: 0 0 30px;
}
.serv-top-text p:last-child {margin: 0;}
.serv-list h3, .serv-list > h4 {
margin: 0 0 35px;
text-align: center;
margin-left: 200px;
margin-right: 200px;
}
.serv-list > h4 {
max-width: 600px;
margin: 0 auto 75px;
}
.serv-list .box {
margin: 0 0 50px;
align-items: center;
}
.serv-list .box:last-child {margin: 0;}
.serv-list .box-content h4, .serv-list .box-col h4 {
margin: 0 0 3px;
}
.box-buttons {
display: flex;
flex-wrap: wrap;
margin: 0 0 -20px;
}
.box-buttons .button {
margin: 0 20px 20px 0;
}
.box-buttons .button:last-child {margin-right: 0;} .serv-bottom {
padding: 200px 0 80px;
}
.serv-bottom-title {
display: flex;
flex-direction: column;
line-height: 80%;
margin: 0 0 68px;
}
.serv-bottom-title span {
position: relative;
white-space: nowrap;
transition: all 0.5s linear, left 1.5s cubic-bezier(0.250, 0.900, 0.300, 1.000), transform 0s linear;
}
.serv-bottom-2 {
margin-left: 190px;
}
.serv-bottom-1 {
opacity: 0;
left: 400px;
}
.serv-bottom-2 {
opacity: 0;
left: -400px;
}
.serv-bottom-3 {
opacity: 0;
left: 400px;
}
.serv-bottom-title span.ani_start {
opacity: 1;
left: 0px;
text-align: center;
}
.serv-nav {
position: relative;
display: flex;
flex-direction: column;
}
.serv-nav-link {
color: #000;
text-decoration: none;
}
.serv-nav-link:hover {color: #AD98DA;}
.serv-nav-text {
padding: 30px 5px; 
font-weight: 300; 
font-size: 35px; 
line-height: 80%; 
text-transform: none; 
border-bottom: 1px solid #333333; content: " ";
display: block;
margin-left: 150px; 
width: 24%;
white-space: nowrap;
}
.serv-nav-link:last-child .serv-nav-text {
border-bottom: 1px solid #000000;
}
.nav-img {
position: absolute;
z-index: -1;
transform: translate(300px, -50%);
opacity: 0;
transition: opacity 0.3s linear; height: 475px; width: 525px; }
.nav-img.is-active {
opacity: 1;
}
.nav-img img {
display: block;
} .box {
display: flex;
justify-content: space-around; align-items: flex-start;
flex-wrap: wrap;
margin: 0 0 150px;
}
.box:last-child {margin: 0;}
.box-col {
width: 46.6%;
}
.box-col:first-child {text-align: right;}
.box-img {
display: flex;
justify-content: flex-end;
width: 46.6%;
}
.box-content {
width: 46.6%;
}
.box-img-wrap {
overflow: hidden;
width: 440px; 
height: 420px;
}
.box-img-wrap img {
width: 100%;
}
.box-content h4,
.box-col h4 {
margin: 0 0 30px;
color: #333333; 
}
.box-content h4:last-child,
.box-col h4:last-child {
margin: 0;
}
.box-text {
margin: 0 0 50px;
font-size: 22px;
line-height: 125%;
font-weight: 200;
}
.box-text:last-child {margin: 0;}
.box-list {
font-size: 24px;
line-height: 150%;
list-style: none; }
.box-list li {
margin: 0 0 10px;
}
.box-reverse {
flex-direction: row-reverse;
}
.box-reverse .box-img {
justify-content: flex-start;
}
.box-reverse .box-content {
text-align: right;
}
.box-button-wrap {
padding: 50px 0 0;
}
.point-list {
font-size: 24px;
line-height: 150%;
width: 52%;
}
.point-list li {
margin: 0 0 20px;
list-style-type: circle;
font-size: 18px;
font-weight: 100;
line-height: 105%;
}
.point-list li:last-child {margin: 0;} .button-git {
background: none;
border: 1px solid #AE95DA;
min-width: 150px;
color: #AE95DA;
font-weight: 400;
font-size: 15px;
padding: 10px 12px;
margin-top: 90px;
}
.button-git:hover {
color: #ffffff;
background: #333333;
} .step-list {
padding: 150px 0 0;
}
.step-list-padding {padding-bottom: 150px;}
.step-list.no-padding {padding: 0;}
.step-item {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0 0 50px;
}
.step-item:last-child {margin: 0;}
.step-num {
width: 19%; font-weight: 100;
font-size: 200px;
line-height: 130%;
text-transform: lowercase;
color: #FDC99A;
text-align: right;
}
.step-content {
width: 75%; padding: 35px 0 0;
}
.step-content h4 {
margin: 0 0 20px;
color: #FDC99A;
font-size: 51px;
font-weight: 500;
letter-spacing: 1px;
}
.step-text {
font-size: 20px;
line-height: 115%;
font-weight: 300;
width: 78%;
padding-top: 20px;
}
.step-content p {
margin: 0 0 30px;
}
.step-content p:last-child {margin: 0;}
.step-top {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
margin: 0 0 50px;
}
.step-top-title {
display: flex;
justify-content: center;
width: 100%;
text-align: left;
}
.step-top-title h3 span {white-space: nowrap;}
.step-top-img {
width: 5%;
}
.step-top-img img { max-width: 560px;
} .camel.black {
color: #333333;
} .team h2 {
margin: 0 0 150px;
text-align: center;
}
.team h3 {
margin: 0 0 75px;
text-align: center;
}
.team-block {
margin: 0 0 200px;
}
.team-block:last-child {
margin: 0;
}
.team-item {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
margin: 0 0 150px;
}
.team-item:last-child {
margin: 0;
}
.team-photo {
display: flex;
flex-direction: column;
align-items: flex-end;
width: 46.6%;
}
.team-photo img {
width: 100%;
max-width: 400px;
}
.team-photo-big img {
max-width: 560px;
}
.team-content {
width: 46.6%;
}
.team-item h4 {
margin: 0 0 30px;
text-align: left;
}
.team-item h4:last-child {
margin: 0;
}
.team-item h4 span {
display: block;
text-align: left;
font-weight: 500;
font-size: 30px;
}
.team-text {
margin: 0 0 30px;
font-size: 24px;
line-height: 115%;
text-align: left;
}
.team-text:last-child {margin: 0;}
.team-text p {
margin: 0 0 30px;
}
.team-text p:last-child {margin: 0;}
.team-reverse {
flex-direction: row-reverse;
}
.team-reverse .team-photo {
align-items: flex-start;
}
.team-item .team-photo .team-hidden {margin: 30px 0 0;}
.team-content .team-hidden {display: none;} .main {
padding: 16px 0 150px;
} .blog h2 {
margin: 0 0 150px;
text-align: center;
}
.blog-top {
padding: 0 30px 75px;
width: 93%;
}
.blog-subtitle {
max-width: 550px; font-weight: 500;
font-size: 62px;
line-height: 145%;
text-align: left; 
color: #AE95DA;
margin: 130px 0 50px;
} .new-blog-subtitle {
color: #222222;
font-size: 33px;
text-align: left;
font-weight: 400;
padding-top: 60px;
border-bottom: 1px solid #333333;
width: 100%; 
margin-bottom: 15px;
margin-top: -55px;
}
.new-tags {
float: right;
display: inline-flex;
flex-direction: row;
}
.blog-tabs li {
font-weight: 500;
font-size: 16px;
line-height: 145%;
display: inline-block; 
}
.blog-tabs a {
color: #AE95DA;
text-decoration: none;
}
.blog-tabs a:hover,
.blog-tabs a.active {
color: #AE95DA;
}
.blog-list {
display: flex;
flex-wrap: wrap;
margin: 0 -30px;
} .blog-search-bar {
width: 20%;
float: right;
border-bottom: 1px solid #9D86C4; 
}
.blog-col {
width: 46.66%; padding: 0 60px; margin: 0 0 100px; }
.blog-col:nth-child(3n + 2){
transition-delay: 0.3s;
}
.blog-col:nth-child(3n + 3){
transition-delay: 0.6s;
}
.blog-img {
display: block;
margin: 0 0 20px;
}
.blog-img img {
width: 100%;	
}
.blog-date {
margin: 0 0 20px;
font-weight: 500;
text-align: left;
}
.blog-title {
margin: 0 0 20px;
font-size: 24px;
line-height: 150%;
text-align: left;
}
.blog-title a {
color: #222222;
text-decoration: none;
font-size: 38px;
font-weight: 300;
}
.blog-title a:hover {
color: #FDC99A;
}
.blog-text {
margin: 0 0 30px;
font-weight: 400;
text-align: left;
color: #222222;
}
.more {
font-weight: 500;
font-size: 17px;
line-height: 35px;
text-transform: none;
text-decoration: none;
color: #AE95DA;
padding: 10px 45px;
border: 1px solid #AE95DA;
float: left;
}
.more:hover {
color: #333333;
border: 1px solid #333333;
} .bottom {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
height: 850px;
padding: 50px 0;
margin-bottom: -1px;
color: #fff;
text-align: center;
padding:0!important;
margin:0!important;
}
.bottom-bg {
position: absolute;
top: 0;
left: 50%;
margin-left: -960px;
min-height: 100%;
object-fit: cover;
}
.bottom .holder {
position: relative;
width: 100%;
}
.bottom-title {
margin: 0 0 40px;
font-weight: 700;
font-size: 100px;
line-height: 130px;
text-indent: -250px;
}
.bottom-text {
max-width: 950px;
margin: 0 auto 50px;
font-weight: 700;
font-size: 39px;
line-height: 145%;
} .article {
padding: 50px 0 120px;
font-weight: 400; 
font-size: 18px;     
text-align: left;
}
.article-top {
margin: 0 0 30px;
}
.article-title {
position: relative;
margin: 0 0 30px; 
color: #000;
font-weight: 500;
font-size: 60px;
line-height: 100%;
text-align: center;
text-transform: lowercase;
font-family: "Georgia", Georgia, serif; 
}
.article-banner {
display: block;
width: 100%;
}
.article-date {
margin: 0 0 30px;
}
.article-content {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 0 0 70px;
}
.article-content:last-child {
padding: 0;
}
.article-col {
width: 100%; }
.blog-more {margin: 0 0 -75px;}
.blog-more h4 {
margin: 0 0 30px;
}
.article-blog {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
margin: 0 0 75px;
}
.article-blog-reverse {
flex-direction: row-reverse;
}
.article-blog-img {
width: 46.6%;
}
.article-blog-img img {
width: 100%;
}
.article-blog-content {
width: 46.6%;
}
.article-blog-content h4 {
margin: 0 0 30px;
color: #FACCA5;
}
.article-blog-text {
padding: 0 0 20px;
} .event-date {
margin: 0 0 20px;
font-weight: 700;
font-size: 39px;
line-height: 145%;
text-align: center;
color: #FACCA5;
}
.event h3 {
margin: 0 0 50px;
text-align: center;
}
.event-img {
margin: 0 0 150px;
}
.event-img img {
display: block;
width: 100%;
} .contact-top {
margin: 0 0 150px;
}
.contact-top h2 {
position: relative;
z-index: 10;
margin: 0 0 -85px;
text-align: center;
}
.contact-top-img {
position: relative;
overflow: hidden;
width: 450px;
height: 570px;
margin: 0 auto;
}
.contact-top-img img {
position: relative;
width: 100%;
}
.contact-info-item {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0 0 100px;
}
.contact-info-item:last-child {margin: 0;}
.contact-info-title {
width: 46.6%;
text-align: right;
}
.contact-info-content {
width: 46.6%;
padding: 30px 0 0;
}
.contact-info-text {
max-width: 560px;
margin: 0 0 50px;
font-size: 24px;
line-height: 150%;
}
.contact-info-text:last-child {
margin: 0;
}
.contact-bottom .bottom-title {
margin: 0 -200px 40px;
text-indent: 0px;
}
.bottom-text {
max-width: none;
} .loc-top {
margin: 0 0 75px;
}
.loc-info {
display: flex;
justify-content: flex-end;
}
.loc-info-text {
width: 100%; font-size: 24px;
line-height: 150%;
}
.map {
height: 300px; 
}
.map iframe {
display: block;
width: 100%;
height: 100%;
border: 0;
}
.route {
padding: 150px 0 150px;
}
.route-item {
display: flex;
padding: 75px 0; }
.route-item:last-child {padding-bottom: 0;}
.route-side {
width: 33.33%;
min-width: 33.33%;
padding: 0 30px 0 0;
}
.big-text {
font-weight: 500;
font-size: 60px;
line-height: 100%;
text-transform: lowercase;
}
.route-content {
flex: 1;
padding: 6px 0 0;
}
.route-top {
padding: 6px 0 50px;
font-size: 24px;
line-height: 150%;
}
.route-block {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.route-col {
width: 46.25%;
}
.route-col h4 {
margin: 0 0 20px;
}
.route-text {
margin: 0 0 75px;
font-size: 24px;
line-height: 150%;
}
.route-text:last-child {margin: 0;}
.route-text p {
margin: 0 0 20px;
}
.route-text p:last-child {
margin: 0;
} .events-banner {
display: flex;
align-items: center;
height: 850px;
background: url(//my-soyo.com/wp-content/themes/soyo/images/media/events.png) 50% 50% no-repeat;
background-size: cover;
}
.blog-banner {
display: flex;
align-items: center;
height: 850px;
background: url(//my-soyo.com/wp-content/themes/soyo/images/media/blog-banner.png) 50% 50% no-repeat;
background-size: cover;
}
.events-banner .holder {
width: 100%;
}
.events-banner h3 {
margin: 0 -120px;
text-align: right;
color: #ffffff;
}
.events-main {
padding: 150px 0;
}
.events-item {
display: flex;
align-items: flex-start;
margin: 0 0 50px;
}
.events-item:last-child {margin: 0;}
.events-side {
width: 31%;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
padding: 10px 0 0;
border-top: 3px solid #FACCA5; 
}
.events-date {
font-weight: 700;
font-size: 39px;
line-height: 145%;
}
.events-year {
padding: 0 0 10px;
font-weight: 700;
font-size: 39px;
line-height: 145%;
border-bottom: 3px solid #FACCA5;
}
.events-img {
width: 320px;
min-width: 320px;
margin: 0 40px 0 30px;
}
.events-img img {
width: 100%;
}
.events-content {
flex: 1;
}
.events-content h4 {
margin: 0 0 10px;
}
.events-text {
margin: 0 0 30px;
font-size: 20px;
line-height: 150%;
}
.events-bottom-block {
display: flex;
justify-content: space-between;
text-align: left;
}
.events-bottom-title {
width: 60%;
}
.events-bottom-title::after {
clear: both;
content: '';
}
.events-bottom-title h2 {
float: right;
width: 125%;
}
.events-bottom-col {
width: 36.6%;
padding: 70px 0 0;
}
.events-bottom-text {
margin: 0 0 50px;
font-size: 24px;
line-height: 150%;
color: #000000;
} .page404-banner {
overflow: hidden;
position: relative;
display: flex;
align-items: center;
height: 520px;
background: #000;
}
.page404-bg {
position: absolute;
z-index: 20;
bottom: 0;
left: 50%;
margin-left: -960px;
}
.page404-banner .holder {width: 100%;}
.page404-banner h1 {
margin-top: -50px;
color: #fff;
text-align: center;
}
.page404-main {
padding: 65px 0 110px;
text-align: center;
}
.page404-main h4 {
margin: 0 0 33px;
}
.page404-text {
margin: 0 0 55px;
font-size: 24px;
line-height: 150%;
} .footer {
padding: 80px 110px 50px; 
color: #FFFFFF;
background: #333333;
position:relative;
}
footer.footer::before {
content: '';
display: block;
position: absolute;
left: 0px;
right: 0px;
top: -3px;
height: 6px;
background: #333333;
}
.footer-top {
display: flex;
justify-content: space-between;
}
.footer-col {
max-width: 340px;
}
.footer-logo {
margin: 0 0 22px;  
}
.footer-logo img {width: 170px;}
.footer-about {
max-width: 260px;
font-size: 20px;  
line-height: 145%;
opacity: 0.9; 
color: #AE95DA;
font-weight: 500;
}
.footer-nav li {
margin: 0 0 30px;
font-weight: 300;
font-size: 18px;
line-height: 24px;
letter-spacing: 0.1em;
list-style: none; }
.footer-nav a {
text-decoration: none;
color: #FFFFFF;
}
.footer-category a {
color: #FFFFFF;
}
.footer-nav a:hover {
color: #FDC99A;
}
.footer-title {
margin: 0 0 20px; 
font-weight: 500;
font-size: 22px; line-height: 24px;
text-transform: uppercase;
color: #AD98DA;    }
.footer-text {
margin: 0 0 20px;
font-size: 16px;  
line-height: 145%;
} .footer-location {
margin: 0 0 20px;
font-size: 15px;
line-height: 115%;
color: #ffffff;
margin-top: 40px;
font-weight: 300;
}
.footer-sub {
position: relative;
margin: 0 0 48px;
}
.footer-sub .wpcf7 {
position:relative;
}
.sub-input {
display: block;
width: 100%;
height: 44px;
padding: 0 20px 0 17px;
margin: 0;
font-size: 16px; 
color: #AE95DA; 
background: transparent;
border: 1px solid #ffffff;
}
.sub-input.wpcf7-not-valid {
border:1px solid red;
}
.sub-input::-webkit-input-placeholder {color: #ffffff;}
.sub-input:-moz-placeholder {color: #ffffff; opacity: 1;}
.sub-input::-moz-placeholder {color: #ffffff; opacity: 1;}
.sub-input:-ms-input-placeholder {color: #ffffff;}
.sub-button {
position: absolute;
top: 12px;
right: 17px;
width: 20px;
height: 20px;
cursor: pointer;
background: url(//my-soyo.com/wp-content/themes/soyo/images/arrow_right.svg) 50% 50% no-repeat;
text-indent:-9999px;
}
.footer-sub .wpcf7 .wpcf7-spinner {
position:absolute;
padding:0;
display:block;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
top:50%!important;
left:50%!important;
background:#facca5 url(//my-soyo.com/wp-content/themes/soyo/images/loading.svg) no-repeat center center!important;
background-size:31px 31px!important;
width:50px!important;
height:50px!important;
margin:-25px 0 0 -25px!important;
}
.footer-sub .wpcf7 .wpcf7-spinner::before { display:none!important; }
.footer-sub .wpcf7 .wpcf7-not-valid-tip {
font-size:15px!important;
}
.footer-sub .wpcf7 .wpcf7-response-output {
display:none!important;
}
.footer-webs {
display: flex;
}
.footer-webs a {
margin: 0 30px 0 0;
}
.footer-webs a:last-child {margin: 0;}
.footer-webs img {display: block;}
.footer-bottom {
display: flex;
align-items: flex-start; justify-content: space-between;
padding-right: 220px;
}
.footer-copy {
font-size: 14px;
line-height: 145%;
color: #ffffff;
}
.footer-studio {
font-weight: 300;
font-size: 18px;
line-height: 150%;
}
.footer-studio a {
color:#FFF;
text-decoration:none;
}
.footer-studio a:hover {
text-decoration:underline;
}
.footer-links {
display: flex;
flex-wrap: wrap;
}
.footer-links li {
margin: 0 10px 0 0;
font-size: 16px;
line-height: 95%;
list-style: none; }
.footer-links li::before {
display: inline-block;
margin: 0 10px 0 0;
content: '|';
color: rgba(255, 255, 255, 0.3);
}
.footer-links li:first-child::before {
display: none;
}
.footer-links a {
color: #ffffff;
text-decoration: none;
}
.footer-links a:hover {
text-decoration: underline;
} .popup {
display: none;
width: 1000px;
}
.popup.fancybox-content {padding: 0px;}
.popup-block {
display: flex;
}
.popup-side {
width: 40%;
background: url(//my-soyo.com/wp-content/themes/soyo/images/popup-img.jpg) 50% 50% no-repeat;
background-size: cover;
}
.popup-content {
width: 60%;
padding: 45px 60px;
}
.popup-title {
margin: 0 0 25px;
font-weight: 700;
font-size: 100px;
line-height: 100%;
}
.popup-title-1 {
margin: 0 0 0 -220px;
opacity: 0;
transform: translateY(50px);
transition: all 0.5s linear;
}
.popup-title-2 {
opacity: 0;
transform: translateY(50px);
transition: all 0.5s linear 0.3s;
}
.popup-title-1 span {color: #fff;}
.popup-content .input {
margin: 0 0 10px;
}
.popup-title.show .popup-title-1,
.popup-title.show .popup-title-2 {
opacity: 1;
transform: translateY(0px);
} .animate {
transition: all 0.5s linear, transform 0.7s ease-in-out, left 0.7s ease-in-out;
}
.fade-bottom {
opacity: 0;
transform: translateY(50px);
}
.fade-bottom.ani_start {
opacity: 1;
transform: translateY(0px);
}
.fade-right {
opacity: 0;
transform: translateX(50px);
}
.fade-right.ani_start {
opacity: 1;
transform: translateX(0px);
} @media screen and (max-width: 1500px) {
.header {
padding: 0 50px;
}
.header-nav-list li {
margin: 0 40px 0 0;
font size: 21px; 
}
.footer {
padding: 128px 50px 50px;
}
h1 {
font-size: 200px;
line-height: 240px;
}
.contact-bottom .bottom-title {
margin: 0 -50px 40px;
}
.banner {
height: 664px;
}
.banner-main {
width: 1500px;
margin-left: -750px;
}
.banner-4-mask {
margin-left: -428px;
}
.serv-title-4 {
padding: 0 0 0 190px;
}
.events-banner {
height: 664px;
}
.events-banner h3 {
margin: 0 -50px;
}
.events-bottom-title h2 {
float: none;
width: auto;
font-size: 100px;
line-height: 180px;
}
.number-block {
margin-top: 155px;
}
.number-item {
width: 185px; 
min-width: 120px;
}
.number-text {
font-size: 140px;
}
.main-prov .holder {
padding: 0 50px;
}
.prov-slide {
padding: 0 25px;
}
.prov-slide h4 {
font-size: 24px;
}
.choose-box {
width: 280px;
height: 262px;
}
.choose1 {
margin-left: 264px;
}
.choose2 {
top: 324px;
margin-left: -600px;
}
.choose3 {
top: 534px;
margin-left: 200px;
}
h3.choose-box-text  {
font-size: 60px;
}
.main-form {
padding: 0 0 270px;
}
.main-form-block {
padding-right: 0;
}
.main-form-bg {
margin-left: -500px; 
width: 600px;
}
.main-form-title {
margin: 0 -50px;
font-size: 180px;
line-height: 240px;
}
.slogan {
margin: 0;
font-size: 200px;
}
.slogan1 {
margin: 0 0 0 50px;
}
.slogan2 {
margin: 0 0 0 auto;
}
.slogan-logo {
margin: 5% 0 0 50px;
width: 600px;
}
.banner-2-mask {
margin-left: -295px;
}
.serv-title-2-2 {
margin: 13% 0 0 7%;
}
.banner-3-mask {
margin-left: -438px;
}
.banner-5-mask {
margin-left: -263px;
}
.serv5 .banner-title {
max-width: 580px;
padding: 0;
}
.banner-6-mask {
margin-left: -415px;
}
.banner-7-mask {
margin-left: 145px;
}
.serv7 .banner-title {
padding: 240px 0 0;
}
.serv7 .holder {
padding: 0 30px;
}
.serv-title-7-2 {
margin: 10% 0 0 5%;
}
.hero-title {
font-size: 8.8vh;
}
.hero-subtitle {
font-size: 2.5vh;
}
.button-primary {
font-size:19px;
padding: 15px 35px;
}
.item-new {
width: 56%;
}
.heading-2 {
font-size: 40px;
}
.banner2 {
height: 60vh;
}
.flex-item {
font-size: 4.8em;
}
div#one ul li {
margin-top: 50px;
}
.button-grey {
font-size: 18px;
padding: 15px 35px;
}
.button-svc {
font-size: 18px;
padding: 15px 35px;
}
.button-holder-bottom {
padding: 40px 0 90px;
}
.car:hover .middle {
font-size: 19px;
}
.serv-top-col h4 {
margin-left: 140px;
}
.serv-top-text {
margin-left: 140px;
margin-right: 110px;
}
}
@media screen and (max-width: 1300px) {
.header {
padding: 0 30px;
}
.header-nav-list li {
margin: 0 30px 0 0;
font-size: 19px;
}
.bottom-title {
font-size: 80px;
line-height: 100px;
text-indent: -210px;
}
.article-blog {
align-items: flex-start;
}
.serv-title-4 {
padding: 0 0 0 90px;
}
.events-side {
width: 22%;
}
.events-bottom-title h2 {
font-size: 80px;
line-height: 140px;
}
.number {
flex-direction: column;
justify-content: center;
}
.number-title {
width: auto;
text-align: center;
margin: 0 0 75px;
}
.slogan {
margin: 0 -100px;
font-size: 180px;
}
.slogan-logo {
width: 500px;
}
.serv-title-2-2 {
margin: 13% 0 0 4%;
}
.serv7 .banner-main {
margin-left: -850px;
}
.banner-7-mask {
margin-left: 45px;
}
.hero-title {
font-size: 7.2vh;
}
.hero-subtitle {
font-size: 2.2vh;
}
.button-primary {
font-size: 14px;
padding: 6px 18px;
}
.item-new {
width: 60%;
}
.heading-2 {
font-size: 38px;
}
.banner2 {
height: 58vh;
}
.flex-item {
font-size: 4.7em;
}
.car:hover .middle {
font-size: 18px;
}
.main-form-block {
margin-right: -135px;
}
.info-item2 {
padding: 0 20%;
}
.serv-nav-text {
width: 26%;
font-size: 30px;
}
.serv-top-col h4 {
margin-left: 20px;
}
.serv-top-text {
margin-left: 15px;
margin-right: 30px;
}
.step-text {
width: 90%;
}
.serv-list h3 {
margin-left: 170px;
margin-right: 170px;
}
.point-list {
width: 60%;
}
.step-content h4 {
font-size: 47px;
letter-spacing: 0;
}
.point-list {
width: 70%;
}
.serv {
padding: 80px 0 100px;
}
.serv-top {
padding 0 0 80px;
}
.button-holder-bottom {
padding: 30px 0 60px;
}
.blog-subtitle {
font-size: 62px;
}
.blog-tabs a {
font-size: 14px;
}
}
@media screen and (max-width: 1200px) {
.header-logo img {
width: 150px;
}
.header-nav-list li {
font-size: 15px; 
margin: 0 25px 0 0;
}
.header .button {
padding: 11px 20px;
}
.events-item {
flex-wrap: wrap;
justify-content: space-between;
}
.events-side {
width: 100%;
margin: 0 0 30px;
}
.events-img {
margin: 0;
}
.events-content {
flex: none;
width: calc(100% - 360px);
}
.serv-title-2-2 {
margin: 13% 0 0 0%;
} .hero-title {
font-size: 6.3vh;
}
.hero-subtitle {
font-size: 2vh;
}
.button-primary {
font-size: 15px;
padding: 8px 20px;
}
.item-new {
width: 66%;
}
.heading-2 {
font-size: 37px;
}
.number-item {
width: 155px;
}
.banner2 {
height: 55vh;
}
.flex-item {
font-size: 4em;
}
.car:hover .middle {
font-size: 16px;
}
.slider {
width: 68%; 
}
}  @media only screen 
and (min-device-width: 1024px) 
and (max-device-width: 1024px) 
and (orientation: portrait) 
and (-webkit-min-device-pixel-ratio: 2) {
.hero-title {
font-size: 4.9vh;
padding-top: 70px;
padding-left: 40px;
}
.hero-subtitle {
font-size: 2vh;
padding-left: 40px;
max-width: 16em;
}
.button-primary {
font-size: 15px;
padding: 8px 20px;
margin-left: 40px;
margin-bottom: 400px;
}
.banner2 {
height: 40vh;
}
}
@media screen and (max-width: 1023px) {	
#wrapper {
padding: 50px 0 0;
}
.is-form-style input.is-search-input {
font-size: 11px;
}
.header {
height: 50px;
padding: 0 15px;
}
.header.fixed {
height: 50px;
}
.header-logo img {
width: 75px; 
}
.mob-nav-icon {display: block;}
.header-nav {
position: fixed;
top: 50px;
left: -100%;
bottom: 0;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
padding: 75px 0 50px;
z-index: 540;
overflow-y: auto;
box-sizing: border-box;
background: #fff;
transition: all 0.5s ease;
}
.header-nav.vis {
left: 0;
}
.header-nav-list {
display: block;
padding: 0 0 10px;
}
.header-nav-list li {
margin: 0 0 30px;
font-size: 14px; 
text-align: center;
}
.menu-item-has-children > a.active::after { 
transform: rotate(180deg); 
}
.sub-menu,
.subnav {
position: relative;
left: auto;
top: auto;
width: auto;
padding: 10px 0 0;
margin: 0;
background: none;
box-shadow: none;
border-radius: 0px;
visibility: visible;
opacity: 1;
transform: translateY(0px);
display: none;
transition: none;
}
.sub-menu::before,
.subnav::before {
display: none;
}
.sub-menu li,
.subnav li {
margin: 0 0 10px;
font-size: 12px;
line-height: 145%;
}
.sub-menu li:last-child,
.subnav li:last-child {
margin: 0;
}
.sub-menu a,
.subnav a {
display: inline;
padding: 0;
border-left: 0;
}
.sub-menu a:hover,
.sub-menu a.active,
.subnav a:hover,
.subnav a.active {
border-left: 0;
} .sub-menu li:hover ul {
margin-left: 120px;  
margin-top: -16px; 
}
.menu-item-has-children > a::after {
margin: -5px -12px 0 0; 
}
.header .button {
padding: 18px 37px;
}
.main {
padding: 16px 0 80px;
}
.button {
padding: 12px 18px; }
h1 {
font-size: 140px;
line-height: 180px;
}
h2 {
font-size: 80px;
line-height: 100px;
}
h3 {
font-size: 48px;
line-height: 110%;
}
h4 {
font-size: 28px;
line-height: 99%; margin-top: 8px;
}
.info-text-h4 {
margin-left: 20px;
margin-top: 10px;
}
.flexh4 {
margin-top: 8px;
}
.footer {
padding: 80px 30px 50px;
}
.footer-top {
flex-wrap: wrap;
padding: 0;
}
.footer-col {
max-width: none;
width: 50%;
padding: 0 0 50px;
}
.f-col1 {order: 1;}
.f-col4 {order: 2;}
.f-col2 {order: 3;}
.f-col3 {order: 4;}
.footer-nav li {
margin: 0 0 20px;
}
.footer-bottom {
padding-right: 325px;
}
.blog h2 {
margin: 0 0 30px;
}
.blog-top {
flex-direction: column;
padding: 0 0 30px;
}
.blog-title a {
font-size: 30px;
}
.blog-subtitle {
max-width: 400px;
margin: 50px 0 50px;
font-size: 47px;
line-height: 145%;
text-align: left;
}
.blog-text {
font-size: 18px;
}
.blog-tabs li {
font-size: 11px;
line-height: 145%;
}
.blog-tabs a {
font-size: 11px;
}
.blog-list {
margin: 0 -22px;
}
.blog-col {
padding: 0 22px;
margin: 0 0 50px;
}
.blog-title {
font-size: 21px;
}
.blog-img img {
margin-top: 20px;
}
.blog-search-bar {
width: 25%;
}
.bottom {
height: 600px;
}
.more {
font-size: 14px;
padding: 5px 20px;
}
.bottom-title {
margin: 0 0 30px;
font-size: 48px;
line-height: 56px;
text-indent: -140px;
}
.bottom-text {
max-width: 950px;
margin: 0 auto 40px;
font-size: 24px;
}
.contact-bottom {
min-height: 500px;
}
.contact-bottom .bottom-title {
margin: 0 0 30px;
}
.article {
padding: 20px 0 60px;
}
.article-title {
margin: 0 0 17px;  
font-size: 40px;
line-height: 100%;
}
.event-date {
font-size: 30px;
}
.event-img {
margin: 0 0 80px;
}
.box {
margin: 0 0 80px;
}
.box-text {
font-size: 18px;
}
.box-list, .point-list {
font-size: 16px;
}
.box-img-wrap {
width: 340px;
height: 350px;
}
.button-git {
margin-top: 35px;
padding: 5px 5px;
}
.contact-top {
margin: 0 0 80px;
}
.contact-top h2 {
margin: 0 0 -40px;
}
.contact-top-img {
width: 355px;
height: 450px;
}
.contact-info-item {
margin: 0 0 80px;
}
.contact-info-content {
padding: 10px 0 0;
}
.contact-info-text {
margin: 0 0 40px;
font-size: 18px;
}
.loc-info-text {
width: 100%;
}
.map {
height: 500px;
}
.route-col {
width: 100%;
margin: 0 0 50px;
}
.route-col:last-child {margin: 0;}
.route-text {
margin: 0 0 50px;
}
.route {
padding: 75px 0;
}
.serv {
padding: 75px 0 75px;
}
.serv-top {
padding: 0 0 15px;
}
.serv-top-text {
font-size: 20px;
margin-left: 5px;
margin-right: 30px;
}
.serv-top-col h4 {
margin-left: 5px;
}
.serv-list h3 {
margin: 0 0 50px;
}
.serv-list > h4 {
margin: 0 auto 50px;
}
.serv-bottom {
padding: 100px 0 0;
}
.serv-bottom-title {
line-height: 90%;
font-size: 45px;
}
.serv-nav-text {
padding: 20px;  
font-size: 30px; 
white-space: nowrap; 
width: 40%; 
margin-left: 230px;
}
.nav-img {display: none;}
.step-text {
font-size: 18px;
}
.step-num {
font-size: 120px;
line-height: 110%;
}
.step-content {
padding: 20px 0 0; 
}
.step-content h4 {
font-size: 42px;
}
.point-list li {
font-size: 16px;
}
.button-holder-bottom {
padding: 70px 0 60px;
}
.team h2 {
margin: 0 0 75px;
}
.team h3 {
margin: 0 0 50px;
}
.team-text {
font-size: 18px;
}
.team-block {
margin: 0 0 100px;
}
.team-item {
margin: 0 0 75px;
}
.events-main {
padding: 75px 0;
}
.events-bottom-block {display: block;}
.events-bottom-title {
width: auto;
}
.events-bottom-title h2 {
font-size: 60px;
line-height: 80px;
}
.events-bottom-col {
width: auto;
padding: 40px 0 0;
}
.events-bottom-text {
font-size: 18px;
}
.events-date {
font-size: 28px;
}
.events-year {
font-size: 28px;
}
.events-text {
font-size: 18px;
}
.page404-banner {
height: 320px;
}
.page404-bg {
width: 800px;
margin-left: -560px;
}
.page404-banner h1 {
margin-top: -30px;
}
.main-banner {
height: 800px;
margin: 0 0 100px;
}
.main-banner-block {
margin-left: -450px;
width: 900px;
}
.main-banner-photo {
height: 592px;
}
.number {
padding: 100px 0;
}
.info-text {
font-size: 18px; 
}
.info-list {
font-size: 18px;
}
.choose-box {display: none;}
.choose-block {
padding: 0 0 50px;
}
.choose-nav a {
padding: 30px;
font-size: 36px;
}
.main-form {
padding: 0 0 70px;
}
.main-form-title {
margin: 0 0 30px;
font-size: 100px;
line-height: 140px;
}
.main-form-title1 {
margin-right: 30px;
}
.main-form-title2 {
margin-top: 50px;
}
.main-form-bg {
margin-left: -250px;
width: 500px;
opacity: 0.3; }
.main-form-block {
justify-content: center;
}
.main-form-block form {
width: 100%;
max-width: 480px;
}
.prov-slide.slick-active:nth-child(3n + 2) .prov-item,
.prov-slide.slick-active:nth-child(3n + 3) .prov-item {
transition-delay: 0s;
}
.prov-slide.slick-active:nth-child(2n + 2) .prov-item {
transition-delay: 0.3s;
}
.slogan {
margin: 0 -30px;
font-size: 120px;
}
.slogan-logo {
margin: 3% 0 0 50px;
width: 400px;
}
.serv-title-2-2 {
margin: 13% 0 0 10%;
}
.serv5 .banner-title {
max-width: 390px;
}
.serv-title-7-2 {
z-index: 20;
}
.serv-title-8-2 {
margin: 18% 0 0 -12%;
}
.serv3 .banner-title {
padding: 0 0 0 20px;
}
.popup {
width: 360px;
}
.popup-block {
flex-direction: column;
padding: 60px 8px 50px;
}
.popup-side {
width: 100%;
height: 210px;
background: url(//my-soyo.com/wp-content/themes/soyo/images/popup-img-mob.jpg) 50% 50% no-repeat;
background-size: cover;
}
.popup-content {
width: 100%;
padding: 1px 0 0;
}
.popup-title {
margin: -50px 0 30px;
display: flex;
justify-content: center;
align-items: flex-start;
font-size: 55px;
line-height: 81px;
}
.popup-title-1 {
margin: 0 9px 0 0;
background: -webkit-linear-gradient(to bottom, #fff 0%, #fff 60%, #000 60%, #000 100%);
background: -moz-linear-gradient(to bottom, #fff 0%, #fff 60%, #000 60%, #000 100%);
background: linear-gradient(to bottom, #fff 0%, #fff 60%, #000 60%, #000 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.popup-title-2 {
margin: 47px 0 0;
}
.popup-title-1 span {color: #000;}
.popup-content .input {
margin: 0 0 40px;
}
.popup-title.show .popup-title-1,
.popup-title.show .popup-title-2 {
opacity: 1;
transform: translateY(0px);
}
.main-banner-title {
line-height: 100px;
}
.hero-title {
font-size: 6.5vh;
padding-left: 60px;
}
.hero-subtitle {
font-size: 2vh;
padding-left: 60px;
}
.button-primary {
font-size: 13px;
padding: 5px 15px;
margin-bottom: 390px;
margin-left: 60px;
}
.heading-2 {
font-size: 32px;
}	
.number-item {
width: 160px;
}	
.banner2 {
height: 52vh;
margin-top: 150px;
}	
.flex-item {
font-size: 3.5em;
}
div#one ul li {
font-size: 5.5em;
}
.legg-desc {
font-size: 4em;
margin-top: 40px;
}	
.car:hover .middle {
font-size: 17px;
left: 30%;
}
.button-grey {
font-size: 16px;
padding: 12px 25px;
}
.button-svc {
font-size: 16px;
padding: 12px 25px;
margin-left: 0;
}
.info-item2 {
padding: 0 10%;
}
.footer-bottom {
padding-right: 350px;
}
} @media screen and (max-width: 932px) and (orientation: landscape) {
.hero-title {
font-size: 10vh;
padding-top: 50px;
}
.hero-subtitle {
font-size: 3.5vh;
padding-bottom: 35px;
}
.button-primary {
font-size: 11px;
padding: 2px 6px;
}
#myicon {
font-size: 11vh;
}
.item-new {
width: 90%;
}
.heading-2 {
font-size: 30px;
}
.number-item {
width: 135px;
}
.banner2 {
height: 95vh; 
margin-top: 120px;
}
.flex-item {
font-size: 3.3em;
margin: 120px 0;
}
.serv-nav-text {
width: 35%;
}
.main-form-bg {
margin-left: -260px;
width: 560px;
}
.main-form-block {
margin-right: -100px;
}
.footer-nav li {
font-size: 11px;
}
.footer-category a {
font-size: 11px;
}
.header-nav-list li {
font-size: 10px;
margin: 0 10px 0 0;
}
.header .button {
font-size: 9px;
white-space: nowrap;
padding: 3px 5px;
}
.header-logo img {
width: 90px;
}
h4 {
margin-left: 10px;
margin-bottom: 10px;
}
.button-holder-bottom {
padding: 70px 0 200px;
}
.footer-logo img {
width: 100px;
}
.footer-about {
font-size: 10px;
}
.footer-location {
font-size: 10px;
}
.footer-title {
font-size: 15px;
}
.footer-text {
font-size: 12px;
}
.sub-input {
height: 30px;
font-size: 12px;
}
.footer-col {
max-width: 136px; 
}
.footer-links a {
font-size: 11px;
}
.footer-copy {
font-size: 11px;
}
.serv-list h3 {
margin-left: 17px;
margin-right: 17px;
}
.blog-search-bar {
width: 30%;
}
.footer-bottom {
padding-right: 65px;
}
.sub-button {
top: 5px;
}
} @media screen and (max-width: 910px) and (orientation: portrait) { .hero-title {
font-size: 5vh;
padding-top: 145px;
padding-left: 5px;
}
.hero-subtitle {
font-size: 2vh;
padding-left: 5px;
max-width: 12em;
}
.button-primary {
font-size: 13px;
padding: 2px 8px;
margin-bottom: 450px;
font-weight: 300;
border: 2px solid #9d86c4;
margin-left: 5px;
}
.heading-2 {
font-size: 28px;
}
.number-item {
width: 130px;
}
.item-new {
width: 70%;
}
.banner2 {
height: 53vh;
margin-top: 100px;
}
.flex-item {
font-size: 3em;
margin: 105px 0;
}
.footer-bottom {
padding-right: 265px;
}
.container-new {
padding-top: 160px;
}
.number-block {
margin-top: 125px;
}
.blog-search-bar {
width: 30%;
}
}
@media screen and (max-width: 767px)  {
.blog-col {
width: 47%; 
}
.blog-col:nth-child(3n + 2){
transition-delay: 0s;
}
.blog-col:nth-child(3n + 3){
transition-delay: 0s;
}
.blog-col:nth-child(2n + 2){
transition-delay: 0.3s;
}
.article-col {
width: 100%;
}
.article-blog-img {
width: 100%;
margin: 0 0 40px;
}
.article-blog-content {
width: 100%;
}
.blog-subtitle {
font-size: 37px;
max-width: 320px;
}
.new-blog-subtitle {
font-size: 26px;
}
.blog-date {
font-size: 15px;
}
.blog-title a {
font-size: 23px;
}
.blog-text {
font-size: 15px;
line-height: 105%;
}
.more {
padding: 3px 10px;
}
.blog-search-bar {
width: 35%;
}
.box-col {
width: 100%;
}
.box-col:first-child {text-align: left;}
.box-img {
display: flex;
justify-content: flex-start;
width: 100%;
margin: 0 0 30px;
}
.box-content {
width: 100%;
}
.box-img-wrap {
width: 250px; 
height: 250px;
}
.box-reverse .box-img {
justify-content: flex-end;
}
.route-item {
display: block;
}
.route-side {
width: auto;
min-width: 1px;
padding: 0 0 30px;
}
.big-text {
font-size: 40px;
}
h1 {
font-size: 100px;
line-height: 120px;
}
h3 {
font-size: 39px;
}
.banner {
height: 354px;
}
.banner-main {
width: 800px;
margin-left: -400px;
}
.banner.mod {
height: 300px;
}
.serv7 .banner-main {
margin-left: -400px;
}
.banner-4-mask {
margin-left: -229px;
}
.serv {
padding: 5px;
}
.serv-title-4 {
padding: 0 0 0 55px;
}
.serv-top-col h4 {
margin-left: 0;
font-size: 38px;
}
.serv-top-text {
font-size: 18px;
margin-left: 0;
}
.step-num {
width: 100%;
font-size: 100px;
line-height: 100%;
text-align: left;
}
.step-content {
width: 100%;
padding: 15px 0 0;
}
.step-content h4 {
font-size: 39px;
}
.step-text {
width: 100%;
}
.step-list {
padding: 100px 0 0;
}
.step-list-padding {
padding-bottom: 100px;
}
.team-photo {
width: 100%;
margin: 0 0 30px;
}
.team-content {
width: 100%;
}
.team-item .team-photo .team-hidden {display: none;}
.team-content .team-hidden {display: block;}
.events-item {
flex-direction: column;
}
.events-img {
order: 1;
width: auto;
min-width: 1px;
margin: 0 0 30px;
}
.events-side {
width: 100%;
order: 2;
}
.events-content {
width: 100%;
order: 3;
}
.info-col {
width: auto;
}
.info-col:first-child {
text-align: left;
margin-left: 20px;
}
.slick-arrow {
width: 40px;
height: 40px;
}
.prov-slide.slick-active:nth-child(2n + 2) .prov-item {
transition-delay: 0s;
}
.slogan {
margin: 0 -20px;
font-size: 100px; 
}
.slogan-logo {
margin: 4% 0 0 20px;
width: 260px;
}
.banner-2-mask {
margin-left: -158px;
}
.serv-title-2-2 {
margin: 13% 0 0 0%;
}
.banner-3-mask {
margin-left: -235px;
}
.banner-5-mask {
margin-left: -140px;
}
.serv5 .banner-title {
max-width: 280px;
}
.banner-6-mask {
margin-left: -222px;
}
.banner-7-mask {
margin-left: 79px;
}
.serv7 .holder {
padding: 0 30px;
}
.serv7 .banner-title {
padding: 100px 0 0;
}
.serv-title-7-2 {
z-index: 5;
}
.footer-bottom {
padding-right: 155px;
}
.hero-title {
padding-left: 30px;
font-size: 4.6vh;
padding-top: 120px;
}
.hero-subtitle {
max-width: 18em;
padding-left: 30px;
font-size: 1.6vh;
color: #222222;
}
.button-primary {
margin-left: 30px;
font-size: 14px;
padding: 5px 15px;
margin-bottom: 450px;
}
.heading-2 {
font-size: 30px;
}
.number-item {
min-width: 110px;
width: 110px;
}
.number-block {
margin-top: 115px;
}
.container-new {
padding-top: 100px;
}
.banner2 {
height: 50vh;
margin-top: 160px;
}
.flex-item {
font-size: 3em;
margin: 150px 0;
}
.info-col2:first-child {
text-align: left;
padding-left: 10px; 
}
div#one ul li {
font-size: 6em;
}
.legg-desc {
font-size: 4em;
}
.serv-nav-text {
width: 48%;
margin-left: 140px;
}	
.banner.mod {
height: 200px;
}
.button-svc {
margin-left: 0;
}
} @media screen and (max-width: 640px) {
.hero-title {
font-size: 8.6vh;
padding-top: 50px;
}
.hero-subtitle {
font-size: 2.9vh;
}
.button-primary {
font-size: 10px;
padding: 1px 6px;
margin-bottom: 470px;
}
.item-new {
width: 75%;
}
.heading-2 {
font-size: 25px;
}
.flex-item {
font-size: 2.5em;
margin: 145px 0;
}
.number-item {
width: 90px;
}
div#one ul li {
font-size: 5.5em;
}
.legg-desc {
font-size: 3.8em;
}
.banner2 {
height: 90vh;
}
.info-col2:first-child {
padding-left: 10px;
}
}
@media screen and (max-width: 576px) {
.footer {
padding: 50px 15px 23px;
background: #333333;
}
.footer-col {
padding: 0 0 30px;
}
.f-col1 {width: 100%;}
.f-col4 {
width: 100%;
padding: 0 0 20px;
}
.f-col3 {
text-align: right;
}
.footer-logo {
margin: 0 0 10px;
}
.footer-logo img {width: 62px;}
.footer-about {
max-width: none;
font-size: 12px; 
}
.footer-nav li {
margin: 0 0 10px;
font-weight: 400;
font-size: 16px;
line-height: 150%;
text-transform: none;
}
.footer-title {
margin: 0 0 10px;
text-transform: uppercase; 
}
.footer-text {
font-size: 15px; 
line-height: 145%;
}
.footer-location {
font-size: 11px;
}
.footer-sub {
margin: 0 0 30px;
}
.sub-input {
font-size: 16px;
}
.footer-webs {
display: flex;
}
.footer-bottom {
flex-direction: column;
align-items: flex-start;
padding-right: 230px;
}
.footer-copy {
margin: 0 0 10px;
font-size: 12px;
order: 1;
}
.footer-studio {
font-weight: 400;
font-size: 12px;
line-height: 145%;
order: 3;
}
.footer-links {
display: flex;
flex-wrap: wrap;
margin: 0 0 10px;
order: 2;
}
.footer-links li {
margin: 0 8px 0 0;
font-size: 12px;
line-height: 145%;
}
.footer-links li::before {
margin: 0 8px 0 0;
}
.main {
padding: 25px 0 80px;
}
.button {
min-width: 170px;
padding: 12px 18px;
font-size: 18px;
}
.button-git {
font-size: 16px;
padding: 10px 15px;
}
h1 {
font-size: 55px;
line-height: 81px;
}
h2 {
font-size: 45px;
line-height: 66px;
}
h3 {
font-size: 33px;
line-height: 110%;
}
h4 {
font-size: 23px;
line-height: 145%;
}
.hero-title { 
font-size: 5.7vh; 
padding-left: 0; 
color: #000000;
max-width: 10em;
}
.hero-subtitle {
font-size: 2vh; 
padding-left: 0; 
color: #000000;
max-width: 12em;
}
.hero-footer {
margin-bottom: 20em;
}
.button-primary {
padding: 5px 12px;
margin-left: 0px; 
font-size: 11px;
margin-bottom: 550px;
}
.heading-2 {
font-size: 23px;
}
.banner2 {
margin-top: 90px;
}
.flex-item {
font-size: 3.4em;
margin-top: 90px;
margin-bottom: 90px;
}
.new-wrapper {
padding: 0;
margin: 20px;
}
.title-column {
font-size: 14px;
}
.legg-desc {
font-size: 58px;
margin-top: 40px;
}
.legg-section {
margin: 50px 0;
}
div#one ul li {
font-size: 7em;
}
.flex-item4 {
font-size: 2em;
}
.info-text-h4 {
font-size:20px;
}
.info-list-h4 {
font-size: 20px;
}
.button-holder-bottom {
text-align: center;
padding-top: 100px; 
padding-bottom: 130px;
}
.holder {
padding: 0 25px;
}
.flex-item5 {
margin-top: 0;
}
.heading-5 {
font-size: 18px;
padding-left: 20px;
}
.item-new {
height: 60px;
}
.button-grey {
font-size: 18px;
margin-left: 15px;
}
.button-svc {
font-size: 18px;
margin-left: 0;
}
.car:hover .middle {
font-size: 11px;
left: 27%;
}
.blog h2 {
margin: 0 0 10px;
}
.blog-top {
padding: 0 0 40px;
}
.blog-subtitle {
font-size: 32px;
text-align: left; 
max-width: 280px;
}
.blog-tabs li {
margin: 0 0 10px;
font-size: 11px;
}
.blog-date {
margin: 0 0 10px;
font-weight: 400;
font-size: 12px;
line-height: 145%;
}
.blog-title {
font-size: 16px;
line-height: 150%;
}
.blog-title a{
font-size: 18px;
}
.more {
padding: 2px 8px;;
font-size: 11px;
}
.blog-text {
font-weight: 400;
font-size: 12px;
line-height: 145%;
}
.blog-search-bar {
width: 35%;
}
.bottom {
height: auto;
min-height: 600px;
padding: 70px 0;
text-align: left;
}
.bottom-bg {
left: 0;
margin-left: 0;
width: 100%;
}
.bottom-title {
font-size: 35px;
line-height: 110%;
text-indent: 0px;
}
.bottom-title br {display: none;}
.bottom-text {
max-width: none;
margin: 0 0 40px;
font-size: 20px;
}
.article {
padding: 0 0 55px;
font-weight: 400;
}
.article-title {
margin: 0 0 12px; 
font-size: 30px;
}
.article-top {
margin: 0 0 50px;
}
.article-date {
margin: 0 0 20px;
}
body {
font-size: 12px;
}
p {margin: 0 0 18px;}
.article-blog {
margin: 0 0 50px;
}
.article-content {
padding: 0 0 30px;
}
.article-blog-img {
margin: 0 0 20px;
}
.article-blog-content h4 {
margin: 0 0 10px;
}
.event-date {
margin: 0 0 10px;
font-size: 20px;
}
.event h3 {
margin: 0 0 10px;
}
.event-img {
margin: 0 0 75px;
}
.box {
margin: 0 0 50px;
}
.box-content h4, .box-col h4 {
margin: 0 0 10px;
}
.box-text {
margin: 0 0 40px;
font-size: 16px;
}
.box-list, .point-list {
font-size: 17px;
}
.box-list, .point-list li {
font-size: 16px;
}
.box-img {
margin: 0 0 20px;
} .box-img-wrap {
width: 370px;
height: 320px;
}
.event-about {margin: 0 0 75px;}
.contact-top {
margin: 0 0 75px;
}
.contact-top h2 {
margin: 0 0 -30px;
}
.contact-top-img {
width: 175px;
height: 220px;
}
.contact-info-title {
width: 100%;
text-align: left;
}
.contact-info-title h3 br {display: none;}
.contact-info-content {
width: 100%;
}
.contact-info-item {
margin: 0 0 50px;
}
.contact-info-text {
font-size: 16px;
}
.loc-info-text {
font-size: 16px;
}
.route-item {
padding: 30px 0 75px;
}
.big-text {
font-size: 30px;
}
.route-content {
padding: 0;
}
.route-top {
padding: 0 0 50px;
margin: -10px 0 0;
font-size: 16px;
}
.route-top:last-child {padding: 0;}
.route-col {
margin: 0 0 30px;
}
.route-col h4 {
margin: 0 0 10px;
}
.route-text {
margin: 0 0 30px;
font-size: 16px;
}
.route-text p {
margin: 0 0 10px;
}
.banner {
height: 500px;
align-items: center;
}
.banner-main {
width: 100%;
left: 0;
margin-left: 0;
}
.serv7 .banner-main {
margin-left: 0px;
}
.banner-4-mask {
display: none;
margin-left: -36%;
height: auto;
width: 65.33%;
bottom: -5%;
}
.serv-title-4-1 {
padding: 0;
justify-content: flex-end;
}
.serv-title-4-2 {
margin: 15% 0 0 3%; 
}
.serv-top-col {
width: 100%;
}
.serv-top-col h4 {
text-align: left;
font-size: 30px;
}
.serv-top-text {
font-size: 17px;
}
.serv-list h3, .serv-list > h4 {
margin: 0 0 30px;
}
.serv-bottom {
padding: 85px 0 0;
}
.serv-bottom-title {
line-height: 120%;
margin: 0 0 40px;
font-size: 30px;
}
.serv-bottom-2 {
margin-left: auto;
}
.serv-nav-text {
padding: 15px 10px 5px; 
font-size: 25px; 
text-align: left; 
white-space: nowrap;
margin-left: 0; 
margin-bottom: 20px;
width: 46%;
}
.serv-nav-link {
display: flex;
justify-content: center;
}
.sub-menu li:hover ul {
margin-left: 118px; 
margin-top: -16px;
} .menu-item-has-children > a::after {
margin: -5px -12px 0 0; 
}
.box-button-wrap {
padding: 30px 0 0;
text-align: center;
}
.step-text {
font-size: 17px;
}
.step-top-title {
justify-content: center;
width: 100%;
margin: 0 0 20px;
text-align: center;
}
.step-top-img {
width: 100%;
}
.step-num {
font-weight: 700;
}
.step-content {
padding: 10px 0 0;
}
.step-content h4 {
margin: 0 0 10px;
font-size: 33px;
}
.team h2 {
margin: 0 0 50px;
}
.team h3 {
margin: 0 0 30px;
}
.team-text {
font-size: 16px;
}
.team-item h4 {
margin: 0 0 10px;
}
.team-photo {margin: 0 0 20px;}
.team-photo img {
max-width: 200px;
}
.team-photo-big img {
max-width: 275px;
}
.events-item {
margin: 0 0 75px;
}
.events-img {
margin: 0 0 35px;
}
.events-side {
margin: 0 0 30px;
}
.events-date, .events-year {
font-size: 20px;
}
.events-text {
margin: 0 0 20px;
font-size: 16px;
}
.events-banner {
height: 500px;
background: url(//my-soyo.com/wp-content/themes/soyo/images/media/events-mob.png) 50% 50% no-repeat;
background-size: cover;
}
.blog-banner {
height: 500px;
background: url(//my-soyo.com/wp-content/themes/soyo/images/media/blog-mob.png) 50% 50% no-repeat;
background-size: cover;
}
.events-banner h3 {
margin: 0;
}
.events-bottom-title h2 {
font-size: 45px;
line-height: 66px;
}
.events-bottom-col {
padding: 30px 0 0;
}
.events-bottom-text {
margin: 0 0 40px;
font-size: 16px;
}
.page404-banner {
height: 190px;
}
.page404-bg {
width: auto;
left: 0;
margin-left: 0;
}
.page404-banner h1 {
margin-top: -5px;
font-size: 93px;
}
.page404-main {
padding: 75px 0 100px;
}
.page404-main h4 {
margin: 0 0 10px;
}
.page404-text {
margin: 0 0 40px;
font-size: 16px;
}
.main-banner {
height: 500px;
margin: 0 0 100px;
}
.main-banner-col:first-child {
margin-top: 150px;
}
.main-banner-block {
margin-left: -172px;
width: 344px;
}
.main-banner-photo {
height: 375px;
}
.number {
padding: 75px 0;
}
.number-title {
margin: 0 0 30px;
}
.number-item {
width: 85px;
min-width: 75px;
margin: 0 7px 0 0;
}
.number-text {
font-size: 80px;
}
.title {
margin: 0 0 30px;
}
.title-choose {
margin: 0 0 30px;
font-size: 31px;
padding-right: 30px;
padding-left: 30px;
}
.main-prov {
margin: 0 0 75px;
}
.main-prov .holder {
padding: 0 15px;
}
.prov-slider {
padding: 0;
margin: 0 -15px;
}
.prov-slide {
padding: 0 15px;
}
.prov-slide h4 {
font-size: 20px;
text-align: center;
}
.prov-item {
margin: 0 0 20px;
}
.slick-dots button {
width: 6px;
height: 6px;;
}
.car:hover .middle {
font-size: 16px;
}
.main-about {
padding: 0 0 75px;
}
.info-text {
font-size: 16px;
}
.info-list {
margin: 0 0 40px;
font-size: 16px;
}
.info-col h4 {
margin: 0 0 10px;
}
.main-about .info-col:last-child {
padding: 0;
}
.main-info {
margin: 0 0 75px;
}
.info-item {
margin: 0 0 30px;
}
.main-choose {
margin: 0 0 75px;
}
.choose-nav a {
padding: 30px 20px;
font-size: 30px;
}
.choose-block {
padding: 0 0 40px;
}
.main-form {
padding: 0 0 35px;
}
.input {
height: 35px;
margin: 0 0 40px;
font-size: 19px;
width: 73%;
}
.textarea {
margin: 0 0 40px;
font-size: 19px;
height: 150px;
width: 73%;
}
.form-button {
padding: 0;
}
.main-form-bg {
margin-left: -177px;
width: 355px;
}
.main-form-title {
font-size: 55px;
line-height: 81px;
justify-content: flex-start;
}
.main-form-title1 {
margin-right: 10px;
}
.main-form-title2 {
margin-top: 50px;
}
.main-slogan {
margin: 0 0 75px;
}
.slogan {
margin: 0;
font-size: 55px;
line-height: 130%;
}
.slogan1 {
margin: 0 0 0 10px;
}
.slogan-logo {
margin: 7% 0 0 15px;
width: 170px;
}
.serv1 .holder {
padding: 0 15px;
}
.serv-title-1 {justify-content: center;}
.serv-title-1-2 {
margin: 17% 0 0 -6%;
}
.serv2 .holder {
padding: 0 15px;
}
.serv-title-2 {
margin-top: -120px;
justify-content: center;
}
.banner-2-mask {
margin-left: 0;
left: 0;
width: 100%;
height: auto;
}
.serv-title-2-2 {
margin: 15% 0 0 -6%;
}
.serv3 .banner-title {
justify-content: center;
padding: 50px 0 0 40px;
}
.serv-title-3-2 {
margin: 18% 0 0 12%;
}
.banner-3-mask {
margin-left: 0;
left: 0;
width: 100%;
height: auto;
top: 34%;
}
.banner-5-mask {
left: 0;
margin-left: 0px;
height: auto;
width: 100%;
top: 15%;
}
.serv5 .banner-title {
max-width: 176px;
}
.banner-6-mask {
left: 0;
margin-left: 0px;
height: 100%;
width: 100%;
top: 9%;
}
.banner-7-mask {
left: 0;
margin-left: 0px;
height: 100%;
width: 100%;
top: 0%;
}
.serv7 .holder {
padding: 0 15px 40px;
margin: auto 0 0;
}
.serv7 .banner-title {
padding: 0;
}
.serv8 .banner-title {
padding: 0 0 180px;
}
.serv-title-8-2 {
margin: 24% 0 0 -24%;
}
.main-banner-title {
line-height: 56px;
}
} @media only screen and (-webkit-min-device-pixel-ratio: 4) and (orientation: landscape) {
.hero-title {
padding-top: 45px;
font-size: 11.8vh;
}
.hero-subtitle {
font-size: 3.6vh;
padding-top: 15px;
}
.button-primary {
padding: 1px 6px;
font-size: 9px;
}
.banner2 {
height: 100vh; 
margin-top: 110px;
}
} @media screen and (min-device-width: 320px)  and (max-device-width: 480px) {
.hero-title {
font-size: 2.8vh;
} 
.hero-subtitle {
font-size: 1.4vh;
}
.button-primary {
padding: 3px 9px;
font-size: 10px;
}
.item-new {
width: 100%;
}
.heading-2 {
font-size: 20px;
}
.number-item {
width: 85px;
}
.banner2 {
margin-top: 30px;
height: 50vh;
}
.flex-item {
margin-top: 5px;
font-size: 2.2em;
}
div#one ul li {
font-size: 6em;
}
.legg-desc {
font-size: 50px;
margin-top: 30px;
}
.serv-nav-text {
font-size: 23px;
width: 58%;
}
.serv-bottom-title {
font-size: 28px;
}
.blog-search-bar {
width: 52%;
}
.new-blog-subtitle {
font-size: 23px;
}
.blog-subtitle {
font-size: 32px;
}
.blog-tabs a {
font-size: 10px;
}
#iconheader {
margin-right: 5px;
}
h4 {
margin: 10px;
} .box-img-wrap {
width: 370px;
height: 320px;
}
.title-choose {
margin: 0 0 30px;
font-size: 31px;
padding-right: 36px;
padding-left: 30px;
}
} @media only screen 
and (min-device-width: 375px) 
and (max-device-width: 667px) 
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) { 
.hero-title {
font-size: 10vh;
padding-top: 50px;
}
.hero-subtitle {
max-width: 20em;
font-size: 2.9vh;
}
.button-primary {
font-size: 9px;
padding: 0 6px;
}
.heading-2 {
font-size: 25px;
}
.banner2 {
height: 90vh;
margin-top: 100px;
}
.flex-item {
font-size: 2.5em;
margin: 100px 0;
}
div#one ul li {
font-size: 5em;
}
.legg-desc {
font-size: 3.5em;
}
h3 {
font-size: 45px;
} .serv-top-col h4 {
font-size: 35px;
margin-top: 20px;
}
.serv-bottom-title {
font-size: 28px;
}
#iconheader {
margin-right: -10px;
padding-bottom: 40px;	  	
}
.title-choose {
margin-left: 45px;
margin-right: 45px;
font-size: 45px;
}	  
}
.defaulttext {
line-height:140%;
padding:25px 0 0 0;
}
.defaulttext p {
padding:12px 0;
margin:0;
}
.defaulttext h2 {
font-size:2.2em;
line-height:140%;
padding:12px 0;
}
.defaulttext h3 {
font-size:1.8em;
line-height:140%;
padding:12px 0;
}
.defaulttext h4 {
font-size:1.4em;
line-height:140%;
padding:12px 0;
}
.page-template-default .main {
padding-bottom:100px;
}
@media screen and (max-width: 1023px) {
.page-template-default .main {
padding-bottom:60px;
}
}
@media screen and (max-width: 576px) {
.page-template-default .main {
padding-bottom:60px;
}	
}
#message-ok.fancybox-content {
max-width:500px;
padding:0;
}
#message-ok.fancybox-content .cell {
display:flex;
}
#message-ok.fancybox-content .cell .pic {
width: 40%;
background: url(//my-soyo.com/wp-content/themes/soyo/images/popup-img.jpg) 50% 50% no-repeat;
background-size: cover;
}
#message-ok.fancybox-content .cell .data {
width:60%;
box-sizing: border-box;
padding:65px;
}
#message-ok.fancybox-content p {
margin:0px;
padding:0px;
font-size:30px;
line-height:140%;
text-align:center;
}
@media screen and (max-width: 600px) {
#message-ok.fancybox-content {
max-width:400px;
}
#message-ok.fancybox-content .cell .data {
padding:30px;
}
}
@media screen and (max-width: 400px) {
#message-ok.fancybox-content .cell .pic {
display:none;
}
#message-ok.fancybox-content .cell .data {
width:100%;
padding:35px;
}	
} .hide {
display:none;
}
.services-all .mtitle {
font-style: normal;
font-weight: 700;
font-size: 130px;
line-height: 110%;
color: #333333;
position:relative;
}
.services-all .mtitle::before {
content:'';
display:block;
width:100%;
height:631px;
background:url(//my-soyo.com/wp-content/themes/soyo/images/services-all-mtitle-min.png) no-repeat center center;
background-size:cover;
position:absolute;
top:-330px;
right:0px;
z-index:2;
}
.services-all .mtitle .brick {
position:relative;
z-index:5;
}
.services-all .mtitle .brick span {
position:relative;
}
.services-all .mtitle .brick span:nth-child(1) { 
left:200px; 
transition-delay: 0.2s;
opacity:0;
}
.services-all .mtitle .brick span:nth-child(2) { 
left:-200px; 
transition-delay: 0.4s;
opacity:0;
}
.services-all .mtitle .brick span:nth-child(3) { 
left:200px; 
transition-delay: 0.6s;
opacity:0;
}
.services-all .mtitle .brick span {
transition: all 0.5s linear, left 1.5s cubic-bezier(0.250, 0.900, 0.300, 1.000), transform 0s linear;
}
.services-all .mtitle .brick span.ani_start {
left:0px;
opacity:1;
}
.services-all .mdescription {
max-width:730px;
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 150%;
color: #333333;
margin:40px 0 88px 0;
}
.services-all .serv-nav {
position:relative;
z-index:5;
}
@media screen and (max-width: 1300px) {
.services-all .mtitle {
font-size: 110px;
}
.services-all .mtitle::before {
height:505px;
}
}
@media screen and (max-width: 1024px) {
.services-all .mtitle {
font-size: 78px;
}
.services-all .mtitle::before {
height:379px;
top: -200px;
}
.services-all .mdescription {
font-size: 18px;
margin:40px 0 40px 0;
}	
}
@media screen and (max-width: 768px) {
.services-all .mtitle {
font-size: 58px;
}
.services-all .mtitle::before {
height:284px;
top: -150px;
}
.services-all .mdescription {
margin:30px 0 30px 0;
} .page-template-page-service-iv-therapy .banner-title {
font-size: 40px;
left: 10px;
top: 20px;
line-height: 1.2;
text-align: center;
}
}
@media screen and (max-width: 568px) {
.services-all .mtitle {
font-size: 50px;
}
.services-all .mtitle::before {
background-size:100% auto;
}
}
@media screen and (max-width: 476px) {
.services-all .mtitle {
font-size: 40px;
}	
}
@media screen and (max-width: 378px) {
.services-all .mtitle {
font-size: 35px;
}	
} @media screen and (max-width:640px) {
body.stretch-page-thumbnail #banner-area-wrapper {
display: block !important;
}
#banner-area-wrapper img {
width: 100% !important;
height: auto !important;
}
#banner-area a {
text-align: left !important;
display: block;
}
}