:root {
--accent: #FEB501;
--accent2: #8363E2;
--mainblack: #1D1A1A;
--regular-text: 14px;
--lineheight: 1.65;
--userfont: Raleway, sans-serif;
--systemfont: -apple-system, BlinkMacSystemFont, Arial, sans-serif;
--bs-body-font-weight: 400;
}  .container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
--bs-gutter-x: .625rem;
}
.row, .row>* {
--bs-gutter-x: 1.25rem;
} @font-face {
src: url(//www.song4u.co.il/wp-content/themes/song4u/fonts/Nunito-ExtraBold.woff2) format("woff2");
font-family: "Nunito";
font-weight: 700;
font-style: normal;
}
@font-face {
src: url(//www.song4u.co.il/wp-content/themes/song4u/fonts/Nunito-Black.woff2) format("woff2");
font-family: "Nunito";
font-weight: 900;
font-style: normal;
}
@font-face {
src: url(//www.song4u.co.il/wp-content/themes/song4u/fonts/Raleway-Bold.woff2) format("woff2");
font-family: "Raleway";
font-weight: 700;
font-style: normal;
}
@font-face {
src: url(//www.song4u.co.il/wp-content/themes/song4u/fonts/Raleway-Medium.woff2) format("woff2");
font-family: "Raleway";
font-weight: 500;
font-style: normal;
}
@font-face {
src: url(//www.song4u.co.il/wp-content/themes/song4u/fonts/Raleway-Regular.woff2) format("woff2");
font-family: "Raleway";
font-weight: 400;
font-style: normal;
} ::placeholder {
color: #666;
}
::selection {
background-color: var(--accent);
color: #fff;
}
input, textarea {
outline: none;
}
input:focus:required:invalid, textarea:focus:required:invalid {
border-color: red;
}
input:required:valid, textarea:required:valid {
border-color: green;
}
a {
text-decoration: none;
}
body {
font-family: var(--userfont);
font-size: var(--regular-text);
line-height: var(--lineheight);
color: var(--mainblack);
min-width: 320px;
position: relative;
overflow-x: hidden;
background: #F9FAFF;
;
}
h1 {
font-size: 26px;
}
h2 {
font-size: 18px;
}
.image {
max-width: 100%;
}
.accent {
color: var(--accent);
}
.form-control:focus {
border-color: var(--accent);
box-shadow: 0 0 0 0.25rem rgb(0 136 204 / 25%);
}
.textjustify {
text-align: justify;
}
.textcenter {
text-align: center;
}
a {
color: var(--accent);
}
html {
margin-top: 0px !important;
}
section {
padding: 60px 0;
overflow: hidden;
} .fixed-top {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 1030;
}
#header {
transition: all 0.5s;
z-index: 997;
padding: 30px 0;
}
.logo-content {
display: inline-block;
line-height: 1;
position: relative;
margin-left: 11px;
}
.logo-content p {
margin-bottom: 0;
}
.logo-content .logo-text {
font-family: 'Nunito';
font-style: normal;
font-weight: 700;
font-size: 40px;
color: white;
}
.logo-content .logo-text span {
color: var(--accent);
font-weight: 900;
}
.logo-content .logo-text--small {
position: absolute;
bottom: 0;
font-family: 'Nunito';
font-style: normal;
font-weight: 400;
font-size: 16px;
color: white;
}
.navbar {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
padding: 0;
}
.navbar ul {
margin: 0;
padding: 0;
display: flex;
list-style: none;
align-items: center;
}
.navbar li {
position: relative;
}
.navbar a, .navbar a:focus {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 0 0 47px;
color: white;
white-space: nowrap;
transition: 0.3s;
font-family: 'Raleway';
font-style: normal;
font-weight: 700;
font-size: 20px;
line-height: 1;
transition: 0.5s;
}
.navbar a:hover {
color: white;
opacity: .7;
}
.navbar li:first-child a {
padding-left: 0;
}
#hero {
background: var(--accent2);
padding-bottom: 50px;
position: relative;
}
#hero .container {
padding-top: 145px;
}
.hero-title {
font-family: 'Nunito';
font-style: normal;
font-weight: 900;
font-size: 51px;
line-height: 70px;
letter-spacing: 0.03em;
color: white;
text-transform: uppercase;
margin-bottom: 26px;
}
.hero-subtitle {
font-family: 'Raleway';
font-style: normal;
font-weight: 500;
font-size: 24px;
line-height: 28px;
color: white;
margin-bottom: 46px;
max-width: 505px;
}
.btn-main {
padding: 19px 40px 19px 47px;
text-align: center;
border-radius: 10px;
color: white;
font-family: 'Raleway';
font-style: normal;
font-weight: 700;
font-size: 16px;
line-height: 19px;
width: fit-content;
transition: 0.5s;
}
.btn-main.mobbtn {
display: none !important;
}
.btn-main img {
width: 16px;
height: 16px;
}
.btn-yellow {
background-color: var(--accent);
}
.btn-yellow:hover, .btn-promovideo:hover {
background: #FFBE1E;
box-shadow: 0px 0px 15px rgba(255, 193, 7, 0.55);
color: white;
}
.btn-yellow:active, .btn-promovideo:active {
background: #F3AD00;
color: white;
}
.btn-promovideo {
background: #FFBE1E;
border: 2px solid #FFC107;
}
.btn-main.btn-fiol {
background: var(--accent2);
padding: 19px 20px;
}
.btn-fiol:hover {
background: #8A6DDF;
box-shadow: 0px 4px 15px rgba(140, 112, 231, 0.55);
color: white;
}
.btn-fiol:active {
background: #7053C6;
color: white;
}
#hero .btn-main {
margin-bottom: 160px;
}
.hero-bottomtext {
font-family: 'Raleway';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 19px;
color: white;
border-left: 3px solid white;
padding-left: 16px;
max-width: 409px;
}
.hero-bottomtext span {
font-weight: 700;
}
.womenimg {
position: absolute;
bottom: 0;
right: 0;
z-index: 1;
}
.circlebottom {
position: absolute;
bottom: 0;
right: 0;
z-index: 0;
}
.circletop {
position: absolute;
top: 0;
left: 0;
}
.circletopmob {
display: none;
}
.row>img {
width: auto;
z-index: 0;
}
.playfon {
position: absolute;
top: -60px;
left: -52px;
}
.micfon {
height: 49px;
position: absolute;
left: 0;
top: 330px;
}
.melodyfon {
position: absolute;
left: 161px;
bottom: 45px;
}
.melodyfon2 {
position: absolute;
left: 430px;
top: 275px;
}
.gyitarfon {
position: absolute;
top: 460px;
left: 415px;
}
.gyitarfon2 {
position: absolute;
top: -90px;
left: 320px;
}
.play2 {
position: absolute;
top: -105px;
left: 500px;
}
.micfon2 {
position: absolute;
left: 650px;
top: 135px;
}
.micfon3 {
position: absolute;
display: none;
}
.notafon {
position: absolute;
top: 390px;
left: 660px;
}
.melodyfon3 {
position: absolute;
top: -100px;
left: 770px;
}
.notafon2 {
position: absolute;
top: 45px;
right: 0;
}
.notafon3 {
position: absolute;
top: -175px;
right: 100px;
}
.firstcta {
padding-top: 140px;
padding-bottom: 0px;
}
.firstcta-text {
font-family: 'Nunito';
font-style: normal;
font-weight: 700;
font-size: 32px;
line-height: 37px;
margin-bottom: 33px;
}
.firstcta-text span {
color: var(--accent);
}
.videocontainer {
border-radius: 15px;
overflow: hidden;
}
.videocontainer .player {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-position: center center !important;
background-size: cover !important;
cursor: pointer;
}
.videocontainer .playKnopf {
display: flex;
justify-content: center;
align-items: center;
margin: auto;
width: 70px;
height: 70px;
cursor: pointer;
transition: .3s;
border-radius: 50%;
-webkit-animation: kurer-an linear 1.5s infinite;
animation: kurer-an linear 1.5s infinite;
}
@-webkit-keyframes kurer-an {
0% {
box-shadow: 0 0px 10px rgba(255, 255, 255, 0.3), 0 0 0 0 rgba(255, 255, 255, 0.2), 0 0 0 0 rgba(255, 255, 255, 0.2)
}
40% {
box-shadow: 0 0px 10px rgba(255, 255, 255, 0.3), 0 0 0 15px rgba(255, 255, 255, 0.2), 0 0 0 0 rgba(255, 255, 255, 0.2)
}
80% {
box-shadow: 0 0px 10px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 255, 255, 0), 0 0 0 26.7px rgba(2255, 255, 255, 0.067)
}
100% {
box-shadow: 0 0px 10px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 255, 255, 0), 0 0 0 40px rgba(255, 255, 255, 0.0)
}
}
@keyframes kurer-an {
0% {
box-shadow: 0 0px 10px rgba(255, 255, 255, 0.3), 0 0 0 0 rgba(255, 255, 255, 0.2), 0 0 0 0 rgba(255, 255, 255, 0.2)
}
40% {
box-shadow: 0 0px 10px rgba(255, 255, 255, 0.3), 0 0 0 15px rgba(255, 255, 255, 0.2), 0 0 0 0 rgba(255, 255, 255, 0.2)
}
80% {
box-shadow: 0 0px 10px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 255, 255, 0), 0 0 0 26.7px rgba(255, 255, 255, 0.067)
}
100% {
box-shadow: 0 0px 10px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 255, 255, 0), 0 0 0 40px rgba(255, 255, 255, 0.0)
}
}
.firstcta-content .btn-fiol {
display: block;
}
.price {
padding-top: 109px;
padding-bottom: 123px;
}
.price-title {
font-family: 'Nunito';
font-style: normal;
font-weight: 700;
font-size: 32px;
line-height: 44px;
text-align: center;
margin-bottom: 30px;
}
.price-title span {
color: var(--accent);
}
.price-element {
padding: 25px 36px 25px 32px;
border-radius: 15px;
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.16);
height: 317px;
position: relative;
overflow: hidden;
margin-top: 20px;
}
.price-element-1 {
background: #EE5B7A;
}
.price-element-2 {
background: #007EFC;
}
.price-element-2-2 {
background: #62E286;
}
.price-element-3 {
background: white;
}
.price-element-4 {
background: #FEB501;
}
.price-element-5 {
background: #8362E2;
}
.price-element-6 {
background: #E6E7EB;
}
.price-element-1 .price-elemtext {
max-width: 456px;
}
.price-element-2 .price-elemtext {
max-width: 425px;
}
.price-element-2-2 .price-elemtext {
max-width: 373px;
}
.price-element-3 .price-elemtext {
max-width: 450px;
}
.price-element-4 .price-elemtext {
max-width: 425px;
}
.price-element-5 .price-elemtext {
max-width: 472px;
}
.price-element-6 .price-elemtext p {
max-width: 935px;
margin-bottom: 0;
}
.price-elemtitle {
font-family: 'Nunito';
font-style: normal;
font-weight: 900;
font-size: 32px;
line-height: 44px;
color: white;
margin-bottom: 15px;
}
.price-element-3 .price-elemtitle {
color: var(--mainblack);
}
.price-price {
display: inline-block;
float: right;
}
.price-price .old-price {
font-family: 'Nunito';
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 33px;
color: rgba(255, 255, 255, 0.75);
text-decoration: line-through;
}
.price-elemtext {
font-family: 'Raleway';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 19px;
color: #FFFFFF;
}
.price-element-3 .price-elemtext {
color: var(--mainblack);
}
.btn-price {
font-family: 'Raleway';
font-style: normal;
font-weight: 700;
font-size: 16px;
line-height: 19px;
color: #FFFFFF;
padding: 6px 15px;
background: rgba(0, 0, 0, 0.12);
border-radius: 38px;
position: absolute;
bottom: 25px;
left: 32px;
transition: 0.5s;
}
.price-element-3 .btn-price {
background: #1A1A1E;
color: white;
}
.btn-price img {
transition: 0.5s;
vertical-align: middle;
margin-top: -1px;
}
.btn-price:hover {
background: #F3F3F3;
color: var(--mainblack);
}
.btn-price:hover img {
filter: invert(1);
}
.btn-price:active {
background: #E1E0E8;
color: var(--mainblack);
}
.price-img {
position: absolute;
}
.price-element-1 .price-img {
right: -30px;
bottom: -50px;
}
.price-element-2 .price-img {
right: -85px;
bottom: -60px;
}
.price-element-2-2 .price-img {
right: -55px;
bottom: -40px;
}
.price-element-3 .price-img {
right: 0;
bottom: -10px;
}
.price-element-4 .price-img {
right: -80px;
bottom: -60px;
}
.price-element-5 .price-img {
right: 0;
bottom: -40px;
}
.price-element-6 .price-imgbig {
width: 100px;
margin-top: 10px;
margin-right: 10px;
}
.price-element.price-element-6 {
height: 122px;
padding-top: 0;
padding-bottom: 0;
}
.price-element-6 .price-elemtext {
display: flex;
color: var(--mainblack);
align-items: center;
}
.price-element-6 .price-elemtext span {
color: var(--accent2);
font-weight: 700;
}
.secondcta {
padding-top: 0;
padding-bottom: 95px;
}
.secondcta-title {
font-family: 'Nunito';
font-style: normal;
font-weight: 700;
font-size: 32px;
line-height: 39px;
text-align: center;
margin-bottom: 15px;
}
.secondcta-title span {
color: var(--accent);
}
.secondcta-subtitile {
font-family: 'Raleway';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 19px;
text-align: center;
margin-bottom: 34px;
}
.secondcta .videocontainer {
border-radius: 0;
}
.secondcta .videocontainer iframe {
border-radius: 15px;
}
.secondcta .btn-main {
display: block;
margin-top: 65px;
margin-left: auto;
margin-right: auto;
}
.prazdnik-title {
font-family: 'Nunito';
font-style: normal;
font-weight: 700;
font-size: 32px;
line-height: 44px;
text-align: center;
margin-bottom: 47px;
}
.prazdnik-title span {
color: var(--accent);
}
.prazdnik-slide {
position: relative;
height: 458px;
padding: 36px;
border-radius: 15px;
overflow: hidden;
width: 100%;
max-width: 305px;
}
.prazdnik-slide1 {
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.5) 65%, rgba(0, 0, 0, 0.7) 80%, #000000 100%), url(https://www.song4u.co.il/wp-content/themes/song4u/images/slide1.jpg);
}
.prazdnik-slide2 {
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.5) 65%, rgba(0, 0, 0, 0.7) 80%, #000000 100%), url(https://www.song4u.co.il/wp-content/themes/song4u/images/slider2.jpg);
}
.prazdnik-slide3 {
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.5) 65%, rgba(0, 0, 0, 0.7) 80%, #000000 100%), url(https://www.song4u.co.il/wp-content/themes/song4u/images/slider3.jpg);
}
.prazdnik-slide4 {
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.5) 65%, rgba(0, 0, 0, 0.7) 80%, #000000 100%), url(https://www.song4u.co.il/wp-content/themes/song4u/images/slider4.jpg);
}
.btn-prazdnik {
font-family: 'Raleway';
font-style: normal;
font-weight: 700;
font-size: 16px;
line-height: 19px;
color: #FFFFFF;
padding: 6px 21px 6px 19px;
background: rgba(255, 255, 255, 0.12);
border-radius: 38px;
transition: 0.5s;
cursor: pointer;
}
.btn-prazdnik img {
transition: 0.5s;
vertical-align: middle;
margin-top: -1px;
}
.btn-prazdnik:hover {
background: #F3F3F3;
color: var(--mainblack);
}
.btn-prazdnik:hover img {
filter: invert(1);
}
.btn-prazdnik:active {
background: #E1E0E8;
color: var(--mainblack);
}
.btn-prazdnik:active img {
filter: invert(1);
}
.prazdnik-slidecontent p {
font-family: 'Nunito';
font-style: normal;
font-weight: 700;
font-size: 32px;
line-height: 36px;
color: #FFFFFF;
}
.howto {
background: #F3F4F5;
padding-top: 70px;
padding-bottom: 95px;
}
.howto-title {
font-family: 'Nunito';
font-style: normal;
font-weight: 700;
font-size: 32px;
line-height: 44px;
text-align: center;
margin-bottom: 22px;
}
.howto-element img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.howto-element p {
font-family: 'Raleway';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 19px;
text-align: center;
margin-bottom: 0;
max-width: 281px;
display: block;
margin-left: auto;
margin-right: auto;
}
.howto-imgdiv {
height: 195px;
position: relative;
margin-bottom: 11px;
}
.timelinegor {
position: absolute;
top: 47px;
}
.timelinevert {
display: none;
}
.swiper-uswork {
padding-top: 0;
padding-bottom: 0;
}
.swiper-uswork .videocontainer {
width: 630px !important;
display: block;
margin-left: auto;
margin-right: auto;
}
.swiper-uswork .swiper-slide {
width: 630px !important;
opacity: 0;
}
.swiper-uswork .swiper-slide.swiper-slide-active {
opacity: 1;
transition: 1s;
}
.swiper-uswork .swiper-slide.swiper-slide-next, .swiper-uswork .swiper-slide.swiper-slide-prev {
opacity: 0.5;
transition: 1s;
}
.swiper-uswork .swiper-slide .playKnopf {
display: none;
}
.swiper-uswork .swiper-slide.swiper-slide-active .playKnopf {
display: flex;
}
.swiper-uswork .swiper-button-next {
right: 21px;
}
.swiper-uswork .swiper-button-prev {
left: 21px;
}
.swiper-uswork .swiper-button-next, .swiper-uswork .swiper-button-prev {
width: 38px;
height: 38px;
background: #8dc9eb;
background-image:none;
backdrop-filter: blur(4px);
border-radius: 50%;
}
.swiper-uswork .swiper-button-next:after, .swiper-uswork .swiper-button-prev:after {
width: 16px;
height: 16px;
font-size: 16px;
color: white;
text-align: center;
}
.swiper-uswork-title {
font-family: 'Nunito';
font-style: normal;
font-weight: 700;
font-size: 32px;
line-height: 44px;
text-align: center;
margin-bottom: 52px;
}
.swiper-uswork-text {
padding-top: 75px;
padding-bottom: 0;
}
.swiper-uswork-title span {
color: var(--accent);
}
.swiper-uswork2 {
padding-top: 0;
padding-bottom: 0;
}
.swiper-uswork2 .videocontainer {
width: 630px!important;
display: block;
margin-left: auto;
margin-right: auto;
}
.swiper-uswork2 .swiper-slide {
width: 630px!important;
opacity: 0;
}
.swiper-uswork2 .swiper-slide.swiper-slide-active {
opacity: 1;
transition: 1s;
}
.swiper-uswork2 .swiper-slide.swiper-slide-next, .swiper-uswork2 .swiper-slide.swiper-slide-prev {
opacity: 0.5;
transition: 1s;
}
.swiper-uswork2 .swiper-slide .playKnopf {
display: none;
}
.swiper-uswork2 .swiper-slide.swiper-slide-active .playKnopf {
display: flex;
}
.swiper-uswork2 .swiper-button-next {
right: 21px;
}
.swiper-uswork2 .swiper-button-prev {
left: 21px;
}
.swiper-uswork2 .swiper-button-next, .swiper-uswork .swiper-button-prev {
width: 38px;
height: 38px;
background: #8dc9eb;
background-image:none;
backdrop-filter: blur(4px);
border-radius: 50%;
}
.swiper-uswork2 .swiper-button-next:after, .swiper-uswork2 .swiper-button-prev:after {
width: 16px;
height: 16px;
font-size: 16px;
color: white;
text-align: center;
}
.swiper-reviews-text {
padding-top: 135px;
}
ul.review-stars {
margin: 0;
padding: 0;
text-align: left;
margin-bottom: 15px;
}
ul.review-stars li {
display: inline;
color: var(--accent);
text-align: left;
font-size: 16px;
line-height: 1;
}
.review-name {
font-family: 'Raleway';
font-style: normal;
font-weight: 700;
font-size: 16px;
line-height: 19px;
margin-bottom: 5px;
}
.review-text {
font-family: 'Raleway';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 19px;
}
.reviews-content {}
.revimg {
position: absolute;
right: 31px;
bottom: -20px;
}
.swiper-reviews .swiper-slide {
overflow: hidden;
border-radius: 15px;
background: var(--mainlgray);
height: auto;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: flex-start;
-ms-flex-pack: flex-start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
flex-direction: column;
background: white;
border-radius: 15px;
padding: 27px 31px;
overflow: hidden;
}
.swiper-reviews-sec .swiper-uswork-title {
margin-bottom: 44px;
}
.swiper-reviews-sec {
padding-top: 135px;
padding-bottom: 71px;
}
.swiper-reviews-sec .swiper-button-next {
right: -50px;
}
.swiper-reviews-sec .swiper-button-prev {
left: -50px;
}
.swiper-reviews-sec .swiper-button-next.swiper-button-white, .swiper-reviews-sec .swiper-button-prev.swiper-button-white {
width: 38px;
height: 38px;
background: #8dc9eb;
background-image:none;
backdrop-filter: blur(4px);
border-radius: 50%;
}
.swiper-reviews-sec .swiper-button-next:after, .swiper-reviews-sec .swiper-button-prev:after {
width: 16px;
height: 16px;
font-size: 16px;
color: white;
text-align: center;
}
.swiper-reviews-sec .btn-main {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 68px;
padding: 19px 53px;
}
.accordion-button::after {
background-image: url(//www.song4u.co.il/wp-content/themes/song4u/images/plus.svg);
order: -1;
margin-left: 0;
margin-right: 0.5em;
width: 26px;
height: 26px;
background-size: auto;
background-position: center;
}
.accordion-button:not(.collapsed)::after {
background-image: url(//www.song4u.co.il/wp-content/themes/song4u/images/minus.svg);
}
.faq {
background: #F3F4F5;
padding-top: 111px;
padding-bottom: 172px;
}
.faq .accordion-item {
border-radius: 15px;
border: 0;
margin-bottom: 16px;
overflow: hidden;
}
.faq .accordion-header {
border-radius: 15px;
}
.faq .accordion-button:focus {
border-color: transparent;
box-shadow: none;
}
.faq .accordion-button:not(.collapsed) {
color: var(--mainblack);
background-color: #ffffff;
box-shadow: none;
padding-bottom: 13px;
}
.faq .accordion-button {
font-family: 'Raleway';
font-style: normal;
font-weight: 700;
font-size: 26px;
line-height: 31px;
padding: 30px;
transition: 0.5s ease-out;
}
.faq .card-body {
padding: 0 108px 48px 70px;
font-family: 'Raleway';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 19px;
color: #576278;
transition: 0.5s ease-out;
}
.faq .card-body p:last-child {
margin-bottom: 0;
}
[class^="faqi"] {
position: absolute;
}
.faqi1 {
top: -50px;
left: 20px;
}
.faqi2 {
top: 300px;
left: 20px;
}
.faqi3 {
top: -80px;
left: 590px;
}
.faqi4 {
bottom: -65px;
left: 640px;
}
.faqi5 {
top: 30px;
left: 1045px;
}
.faqi6 {
top: 180px;
left: 1150px;
}
.faqi7 {
top: -430px;
left: 1150px;
}
.contactus {
background: var(--accent2);
padding-top: 78px;
padding-bottom: 101px;
}
.contactus-title {
font-family: 'Nunito';
font-style: normal;
font-weight: 700;
font-size: 32px;
line-height: 44px;
color: #FFFFFF;
text-align: left;
margin-bottom: 18px;
}
.footerform label {
font-family: 'Raleway';
font-style: normal;
font-weight: 700;
font-size: 16px;
line-height: 19px;
color: #FFFFFF;
}
.footerform .form-control {
background: rgba(255, 255, 255, 0.14);
border-radius: 12px;
padding: 20px 25px;
border: 1px solid transparent;
color: rgba(255, 255, 255, 0.8);
font-family: 'Raleway';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 19px;
}
.footerform .form-control:hover {
border: 1px solid #7755E5;
}
.footerform .form-control::placeholder {
color: rgba(255, 255, 255, 0.8);
opacity: 1; }
.footerform .form-control:-ms-input-placeholder {
color: rgba(255, 255, 255, 0.8);
}
.footerform .form-control::-ms-input-placeholder {
color: rgba(255, 255, 255, 0.8);
}
.footerform .btn-primary {
background: var(--accent);
color: white;
display: block;
font-family: 'Raleway';
font-style: normal;
font-weight: 700;
font-size: 16px;
line-height: 19px;
text-align: center;
padding: 20px;
border-radius: 10px;
width: 100%;
border: 0;
}
.footerform .btn-primary:hover {
background: #FFBE1E;
box-shadow: 0px 0px 15px rgba(255, 193, 7, 0.55);
color: white;
}
.footerform .btn-primary:active {
background: #F3AD00;
color: white;
}
.footerform .form-control:focus {
box-shadow: none;
border: 1px solid #7755E5;
}
.confagree {
font-family: 'Raleway';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 19px;
text-align: center;
color: white;
margin-top: 20px;
}
.footerimg {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 0;
}
#contactformpopup, #promovideopopup {
display: none;
}
#contactformpopup.contactus {
background: white;
max-width: 632px;
padding: 61px 110px 72px 110px;
border-radius: 25px;
overflow: hidden;
}
#promovideopopup {
background: white;
max-width: 632px;
padding: 60px 20px;
border-radius: 25px;
overflow: hidden;
}
.fancybox-content {
padding: 0 !important;
border-radius: 25px;
}
#contactformpopup .contactus-title {
font-family: 'Nunito';
font-style: normal;
font-weight: 700;
font-size: 32px;
line-height: 41px;
text-align: center;
color: var(--mainblack);
}
#contactformpopup .footerform label {
color: var(--mainblack);
}
#contactformpopup .footerform .form-control {
background: white;
border: 1px solid rgba(0, 0, 0, 0.16);
color: rgba(26, 26, 30, 0.8);
}
#contactformpopup .footerform .form-control:hover {
border: 1px solid #8C70E7;
}
#contactformpopup .footerform .form-control:focus {
border: 1px solid #000000;
}
#contactformpopup .footerform .form-control::placeholder {
color: rgba(26, 26, 30, 0.8);
opacity: 1; }
#contactformpopup .footerform .form-control:-ms-input-placeholder {
color: rgba(26, 26, 30, 0.8);
}
#contactformpopup .footerform .form-control::-ms-input-placeholder {
color: rgba(26, 26, 30, 0.8);
}
#contactformpopup .footerform .btn-primary {
background: #FEB501;
color: var(--mainblack);
}
#contactformpopup .footerform .btn-primary:hover {
background: #FFBE1E;
box-shadow: 0px 0px 15px rgba(255, 193, 7, 0.55);
}
#contactformpopup .footerform .btn-primary:active {
background: #F3AD00;
}
#contactformpopup .confagree {
color: var(--mainblack);
}
.back-to-top {
position: fixed;
visibility: hidden;
opacity: 0;
right: 15px;
bottom: 15px;
z-index: 996;
background: var(--accent);
width: 40px;
height: 40px;
border-radius: 50px;
transition: all 0.4s;
}
.back-to-top i {
font-size: 24px;
color: #fff;
line-height: 0;
}
.back-to-top:hover {
background: #FFBE1E;
color: #fff;
box-shadow: 0px 0px 15px rgba(255, 193, 7, 0.55);
}
.back-to-top.active {
visibility: visible;
opacity: 1;
}
.header-scrolled .logo-content .logo-text {
font-size: 29px;
color: var(--mainblack);
}
.header-scrolled .logo-image {
width: 41px;
}
.header-scrolled .logo-text--small {
font-size: 12px;
color: var(--mainblack);
}
.header-scrolled .navbar a, .header-scrolled .navbar a:focus {
color: var(--mainblack);
}
#header.header-scrolled {
padding: 20px 0;
background: white;
}
.prazdnik-slidetext {
padding: 20px 180px 15px 44px;
transition: 1s;
}
.prazdnik-slidetext--title {
font-family: 'Nunito';
font-style: normal;
font-weight: 700;
font-size: 24px;
line-height: 33px;
margin-bottom: 22px;
text-transform: uppercase;
}
.prazdnik-slidetext--subtitle {
font-family: 'Raleway';
font-style: normal;
font-weight: 700;
font-size: 16px;
line-height: 19px;
margin-bottom: 10px;
}
.prazdnik-slidetext--text {
font-family: 'Raleway';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 19px;
margin-bottom: 30px;
}
.prazdnik-slidetext--btn {
font-family: 'Raleway';
font-style: normal;
font-weight: 700;
font-size: 20px;
line-height: 23px;
color: #8C70E7;
}
.prazdnik-slidetext--btn:hover {
color: #8A6DDF;
}
.prazdnik-slidetext--btn:active {
color: #7053C6;
}
.closepr {
position: absolute;
top: 20px;
right: 50px;
}
.closepr {
cursor: pointer;
}
.closepr.closepr3, .closepr.closepr4 {
right: 355px;
}
.mobile-nav-toggle {
display: none;
}
.socialicon {
padding: 40px 0;
}
.socialiconinner {
display: block;
margin-right: auto;
margin-left: auto;
width: fit-content;
}
.socialiconinner a:nth-child(2) {
margin-left: 25px;
}
.wpcf7-response-output {
color: white;
margin-top: 0;
}
#contactformpopup .wpcf7-response-output {
color: var(--mainblack);
}
.text404 .hero-title {
color: var(--mainblack);
}
.text404 .btn-yellow {
margin-top: 50px;
display: block;
}
.page404, .page404 .row {
height: 100vh;
padding: 0;
} 
.swiper-uswork2 {
margin-top: 44px;
}
.swiper-reviews-sec .swiper-button-next.swiper-button-next2 {
right: -60px;
}
.swiper-reviews-sec .swiper-button-prev.swiper-button-prev2 {
left: -60px;
}
.grecaptcha-badge {
display: none!important;
}
.promo .hero-title {
margin-bottom: 20px;
max-width: 1100px;
}
.promo .hero-title span {
color: var(--accent);
}
.promo .hero-subtitle span {
font-weight: 700;
}
.promo .hero-subtitle {
max-width: 605px;
margin-bottom: 30px;
}
.promo .subtitletext {
font-family: 'Raleway';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 19px;
color: #FFFFFF;
}
.promo .subtitletext p {
margin-bottom: 35px;
}
.promo .subtitletext p span {
color: var(--accent);
font-weight: 700;
}
#hero.promo .container {
padding-top: 85px;
}
#hero.promo .btn-main {
padding: 19px 73px 19px 74px;
margin-bottom: 70px;
}
#hero.promo {
height: 100vh;
}
.video-section-wrapper {
position: absolute;
bottom: 30px;
right: 200px;
width: 389px;
z-index: 10;
border-radius: 9px;
border: 9px solid white;
display: block;
background: white;
}
.video-section .vimeo {
margin-bottom: 0;
} .video-section {
position: relative;
width:100%;
margin:0 auto;
border-radius: 9px;
}
.video-wrapper, figure.vimeo, figure.youtube {
margin:0;
position: relative;
padding-bottom: 56.25%;
padding-top: 0;
height: 0;
overflow: hidden;
border-radius: 9px;
}	
.video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}	
figure.youtube a img, figure.vimeo a img {
position: absolute;
top: 0;
left: 0;
width: auto;
height: 100%;
max-width:none;
}	
figure.vimeo a:after, figure.youtube a:after {
content:"";
width:60px;
height:60px;
background: #fff;
z-index:9;
position:absolute;
top:50%;
left:50%;
margin:-30px 0 0 -30px;
border-radius:50%;
box-shadow: 0px 0px 0px 10px rgba(0,0,0,0.15);
cursor: url(https://www.song4u.co.il/wp-content/uploads/2022/11/play.png) 30 30,pointer;
-webkit-transition: all 300ms linear;
transition: all 300ms linear; 
}
figure.vimeo:hover a:after, figure.youtube:hover a:after {
box-shadow: 0px 0px 0px 1000px rgba(0,0,0,0.1);
}
figure.vimeo:hover a:after, figure.youtube:hover a:after{
opacity: 0;
}
figure.vimeo a:before, figure.youtube a:before {
border-left: 8px solid #212121;
}
figure.vimeo a:before, figure.youtube a:before {
content:"";
width: 0;
height: 0;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
z-index:10;
position:absolute;
top:50%;
left:50%;
color: #8363E2;
margin-left: -3px;
margin-top: -5px;
display:block;
cursor: url(https://www.song4u.co.il/wp-content/uploads/2022/11/play.png) 30 30,pointer;
-webkit-transition: all 300ms linear;
transition: all 300ms linear; 
}
figure.vimeo:hover a:before, figure.youtube:hover a:before {
border-color: transparent;
}	
figure.vimeo a:hover img, figure.youtube a:hover img {
-webkit-transition: all 0.4s;
transition: all 0.4s;
}	
figure.vimeo a img, figure.youtube a img {
-webkit-transition: all 300ms linear;
transition: all 300ms linear; 
border-radius: 10px;
cursor: url(https://www.song4u.co.il/wp-content/uploads/2022/11/play.png) 30 30,pointer;
}
.watchme {
position: absolute;
top: -115px;
right: -90px;
width: 172px;
height: 132px;
background-image: url(//www.song4u.co.il/wp-content/themes/song4u/images/watchme2.svg);
z-index: 11;
transform: rotate(5deg);
background-size: cover;
}
.watchmetext {
position: relative;
top: 28%;
transform: translateY(-50%);
font-family: 'Raleway';
font-style: normal;
font-weight: 700;
font-size: 20px;
line-height: 23px;
text-align: center;
color: #050810;
transform: rotate(4.92deg);
}
.promo .playfon {
top: 30px;
}
.promo .micfon {
top: 430px;
}
.melodyfon2 {
top: 375px;
}
.gyitarfon {
top: 560px;
}
.gyitarfon2 {
top: -10px;
}
.play2 {
top: -25px;
}
.micfon2 {
top: 235px;
}
.notafon {
top: 490px;
}
.melodyfon3 {
top: -30px;
}
.notafon2 {
top: 145px;
}
.notafon3 {
top: -75px;
}
#contactformpopup.contactuspromo {
background: #8B86C8;
}
#contactformpopup.contactuspromo .contactus-title, #contactformpopup.contactuspromo .footerform label {
color: white;
}
#contactformpopup.contactuspromo .footerform .form-control {
background: rgba(255, 255, 255, 0.14);
border: 0;
color: rgba(255, 255, 255, 0.8);
}
#contactformpopup.contactuspromo .footerform .form-control::placeholder {
color: rgba(255, 255, 255, 0.8);
}
#contactformpopup.contactuspromo .footerform .btn-primary {
color: white;
}
#contactformpopup.contactuspromo .confagree {
color:white;
}
.page-template-page-promo1 .fancybox-content, .page-template-page-promo2 .fancybox-content {
background: #8B86C8;
}
#contactformpopup.contactuspromo .contactus-title {
font-size: 30px;
}
.page-template-page-promo1 .fancybox-slide--iframe .fancybox-content, .page-template-page-promo2 .fancybox-slide--iframe .fancybox-content {
background: transparent!important;
}
.page-template-page-promo2 #hero.promo {
background: white;
}
.page-template-page-promo2 .promo .hero-title {
color: #1A1A1E;
font-size: 42px;
max-width: 800px;
}
.page-template-page-promo2 .promo .hero-subtitle {
color: rgba(26, 26, 30, 0.65);
}
.page-template-page-promo2 .promo .subtitletext {
color: #1A1A1E;
}
.page-template-page-promo2 .hero-bottomtext {
color: #9C9494;
border-left: 3px solid #9C9494;
}
.page-template-page-promo2 .promo .hero-title span {
color: #7D58BE;
}
.page-template-page-promo2 #hero.promo .btn-main {
background: #7D58BE;
color: white;
}
.page-template-page-promo2 .logo-content .logo-text {
color: #131212;
}
.page-template-page-promo2 .logo-content .logo-text--small {
color: #1A1A1E;
}
.page-template-page-promo2 .logo-content .logo-text span {
color: #21201E;
}
.page-template-page-promo2 .btn-yellow:hover {
box-shadow: 0px 0px 15px rgb(125 88 190 / 55%);
}