@import "header.css"; @import "footer.css"; @import "integrate-with-section.css"; @import "print-custom-section.css"; .faq__first-section{ /* padding: 92px 0 238px 0; */ /* background: url(../img/faq-bag-mob.png) top 55px right 466px, linear-gradient(#D6E3F0, #fff); background-repeat: no-repeat; background-size: 400px auto, 100%; margin-bottom: -101px; */ padding: 92px 0 386px 0; background: url(../img/faq-bg-desk.png); background-position: top center; background-repeat: no-repeat; } .faq__first-section .faq__first-section-title{ font-family: 'Gotham Pro Bold'; color: #000000; font-size: 34px; letter-spacing: 0; line-height: 36px; text-transform: uppercase; margin-bottom: 30px; } .faq__search-form{ max-width: 490px; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: center; align-items: center; } .faq__search-form input[type="text"]{ border-radius: 4px; background-color: #F4F8FC; border: none; /* color: rgba(0, 0, 0, 0.3); */ color: rgba(0, 0, 0, 1); font-size: 14px; letter-spacing: 0; line-height: 55px; padding: 0 15px; width: 100%; max-width: 340px; box-sizing: border-box; border-bottom-right-radius: 0; border-top-right-radius: 0; font-family: 'Gotham Pro Medium'; } .faq__search-form input[type="text"]::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.3); } .faq__search-form input[type="text"]:-ms-input-placeholder { color: rgba(0, 0, 0, 0.3); } .faq__search-form input[type="text"]::placeholder { color: rgba(0, 0, 0, 0.3); font-family: 'Gotham Pro Medium'; } .faq__search-form button[type="submit"]{ width: 100%; max-width: 150px; box-sizing: border-box; letter-spacing: 0; line-height: 53px; } .faq__search-form button[type="submit"] i{ padding-right: 20px; } .faq__columns-wrapper{ display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; } .faq__two-columns-wrapper{ -webkit-justify-content: space-between; justify-content: space-between; } .faq__single-column{ padding: 30px 25px; border-radius: 4px; background-color: #F4F8FC; width: 25%; max-width: 230px; margin: 0 20px 20px 0; min-height: 295px; position: relative; } .faq__single-column:hover{ background-color: #ffffff; outline: none; -webkit-box-shadow: inset 0px 0px 0px 2px rgba(0,156,236,1); -moz-box-shadow: inset 0px 0px 0px 2px rgba(0,156,236,1); box-shadow: inset 0px 0px 0px 2px rgba(0,156,236,1); } .faq__single-column:active, .faq__single-column:focus { background-color: #e2ecf6; outline: none; box-shadow: unset; } .faq__double-width-column{ width: 50%; max-width: 480px; } .faq__full-width-column{ width: 100%; max-width: 980px; margin: 0 0 20px 0; } .faq__masonry-columns-wrapper .faq__single-column:nth-child(3n){ margin: 0 0 20px 0; } .faq__two-columns-wrapper .faq__single-column:nth-child(2n){ margin: 0 0 20px 0; } .faq__single-blue-column{ background-color: #009CE5; } .faq__single-blue-column:hover{ background-color: #0089ff; outline: none; box-shadow: unset; } .faq__single-blue-column:active, .faq__single-blue-column:focus { background-color: #0072c1; outline: none; box-shadow: unset; } .faq__single-column-texts-wrapper{ position: absolute; top:78px; padding-right: 50px; } .faq__single-column-title{ color: #009CE5; font-family: 'Gotham Pro Bold'; font-size: 18px; letter-spacing: 0; line-height: 20px; margin-bottom: 25px; } .faq__single-column-texts-wrapper .faq__single-column-title{ margin-bottom: 22px; max-width: 240px; } .faq__single-blue-column .faq__single-column-title{ color: #ffffff; } .faq__single-column-text{ max-width: 330px; color: #7C88A5; font-size: 12px; letter-spacing: 0; line-height: 16px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .faq__single-blue-column .faq__single-column-text{ color: #D7F3FF; } .faq__single-column-link{ position: absolute; bottom: 30px; font-family: 'Gotham Pro Medium'; opacity: 0.65; color: #9BADBD; font-size: 13px; letter-spacing: 0; line-height: 12px; display: flex; } .faq__single-column-link::after{ content:url(../img/grey-arrow-about.svg); margin-left: 7px; } .faq__single-blue-column .faq__single-column-link::after { content:url(../img/blue-arrow-about.svg); } .faq__single-blue-column .faq__single-column-link{ color: #ffffff; } .faq__single-column-categories-links-wrapper{ max-width: 560px; margin-top: 40px; position: relative; } .faq__full-width-column-image{ position: absolute; right: 0; top: 0; } .faq__full-width-column-image img{ width: 100%; max-width: 304px; max-height: 295px; border: 2px solid #F4F8FC; box-sizing: border-box; } .faq__single-column.faq__full-width-column:hover .faq__full-width-column-image img{ border: 2px solid rgba(0,156,236,1); box-sizing: border-box; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-left-color: transparent; max-height: 295px; } .faq__single-column-category-link{ display: inline-block; font-family: 'Gotham Pro Medium'; color: #009CE5; font-size: 14px; letter-spacing: 0; line-height: 24px; text-decoration: underline; margin-bottom: 10px; padding-right: 30px; } .faq__single-column-category-link:nth-child(4n){ padding-right: 0; } .faq__quote-link{ margin: 20px auto 0; width: 100%; max-width: 207px; border-radius: 4px; line-height: 55px; } .faq__double-width-sub-columns-wrapper{ display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; width: 100%; height: 100%; } .faq__double-width-sub-columns-wrapper .faq__double-width-sub-column{ width: 50% } .faq__double-width-sub-columns-wrapper .faq__double-width-sub-column:nth-child(2){ display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; } .faq__double-width-sub-column .faq__single-column-text{ overflow: unset; display: block; -webkit-line-clamp: unset; } .faq__print-custom-section { margin-bottom: 135px; } .faq-breadcrumbs-section { margin: auto; padding: 46px 20px 60px; display: flex; align-items: center; } .faq__breadcrumb { display: flex; } .faq-categ__search-form { max-width: 100%; } .faq-categ__search-form input[type="text"] { max-width: 100%; } .faq__double-placing { margin-right: 0; } .faq-categ-h1 { font-family: 'Gotham Pro Bold'; font-size: 24px; color: #000; text-transform: uppercase; } .faq-categ__first-section { max-width: 980px; margin: auto; margin-bottom: 50px; padding: 0 20px; } .faq-categ__questions { display: flex; flex-wrap: wrap; justify-content: space-between; margin: auto; max-width: 980px; padding: 0 20px; } .faq-categ__first-section .faq-categ-h1 { margin-bottom: 22px; } .faq-categ__deskrip { font-size: 18px; line-height: 26px; color: #000000; font-family: 'Gotham Pro Regular'; margin-bottom: 30px; max-width: 490px; } .faq-categ__questions-block { width: calc((100% - 20px)/2); margin-bottom: 20px; border-radius: 4px; background: #F4F8FC; padding: 30px; padding: 30px 30px 70px 30px; position: relative; } .faq-categ__question-title { font-size: 20px; font-family: 'Gotham Pro Bold'; color:#009CEC; margin-bottom: 17px; } .faq-categ__questions-wrapper { margin-bottom: 30px; } .faq-categ__one-question a { padding: 10px 0; font-family: 'Gotham Pro Regular'; font-size: 14px; line-height: 20px; text-decoration: underline; color: #000; display: block; } .faq-categ__one-question a:hover { color: rgba(0,0,0,.7); } .faq-questions__load-btn { background: #DEE4EB; border: 2px solid #DEE4EB; font-size: 12px; line-height: 12px; color: #A7B1BA; font-family: 'Gotham Pro Bold'; padding: 14px 25px; border-radius: 4px; display: inline-block; position: absolute; bottom: 30px; cursor: pointer; } .faq-questions__load-btn:hover { background: #fff; color: #009CE5; /* border: 1px solid #A7B1BA; */ border: 2px solid #009CE5; } .faq-categ__disclaimer { margin-bottom: 85px; padding: 0 20px; } .faq-categ__disclaimer .main-container { border: 1px solid #FF0000; border-radius: 4px; padding: 30px; background: #FCF4F4; } .faq-categ__disclaimer-title { font-size: 20px; text-transform: uppercase; color:#EC0000; margin-bottom: 20px; font-family: 'Gotham Pro Bold'; } .faq-categ__disclaimer-text { font-size: 14px; line-height: 26px; font-family: 'Gotham Pro Regular'; color: #FF0000; text-decoration: underline; } .faq__categ-nav__section { margin-bottom: 85px; } .faq__categ-nav__section .faq-categ-h1 { margin-bottom: 35px; } .faq__categ-nav-wrapper { display: flex; flex-wrap: wrap; } .faq__categ-nav-wrapper .faq__single-column:last-child { margin-right: 0; } .faq__categ-nav-wrapper .faq-payment__single-column { display: none; } /*FAQ ARTICLE PAGE*/ .faq-acticle__wrapper { max-width: 980px; margin: auto; padding: 20px; } .faq-acticle__desktop { display: flex; align-items: flex-start; margin-bottom: 80px; } .faq-acticle__questions { background: #F4F8FC; border-radius: 4px; padding: 30px; min-width: 420px; margin-right: 60px; } .faq-acticle__questions-title { color: #009CEC; font-size: 20px; font-family: 'Gotham Pro Bold'; margin-bottom: 18px; text-transform: uppercase; } .faq-acticle__one-question a { display: block; font-family: 'Gotham Pro Medium'; padding: 10px 0; font-size: 14px; line-height: 20px; color: #000000; text-decoration: underline; position: relative; } .faq-acticle__one-question a:after{ display: none; content: ""; position: absolute; width: 2px; height: 100%; right: -29px; top: 0; background: #FF4C3B; } .faq-acticle__one-question:hover a { color: #FF5C48; } .faq-acticle__one-question:hover a:after { display: block; } .faq-acticle__question_active a { color: #FF5C48; } .faq-acticle__question_active a:after { display: block; } .faq-acticle__answers { padding-top: 35px; } .faq-acticle__one-answer_active .faq-acticle__one-answer-title { color: #FF4C3B; } .faq-acticle__one-answer-columns { display: flex; justify-content: space-between; } .faq-acticle_one-answer-link { color: #009CF3; font-family: 'Gotham Pro Regular'; font-size: 14px; line-height: 24px; text-decoration: underline; display: block; } .faq-acticle_one-answer-link:not(:last-child) { margin-bottom: 35px; } .faq-acticle__one-answer:not(:last-child) { padding-bottom: 30px; margin-bottom: 30px; border-bottom: 1px solid #CACED2; } .faq-acticle__one-answer-title { font-family: 'Gotham Pro Bold'; font-size: 24px; line-height: 26px; color: #000000; margin-bottom: 30px; } .faq-acticle__one-answer-text p { font-size: 14px; line-height: 24px; color: #000000; font-family: 'Gotham Pro Regular'; } .faq-acticle__one-answer-text p:not(:last-child) { margin-bottom: 35px; } .faq-acticle__breadcrumbs-section { padding: 48px 20px 27px; } .faq-acticle__mob { display: none; } .faq-acticle__mob-bottom { background: #F4F8FC; padding: 30px 20px 60px 20px; } .faq-acticle__mob-bottom-title { color: #009CEC; font-size: 20px; font-family: 'Gotham Pro Bold'; } .faq-acticle__mob .faq-acticle__answers { padding-top: 16px; } .faq-acticle__mob .faq-acticle__one-question a:after { left: -20px; } .faq-acticle__mob .faq-acticle__one-answer-text { display: none; padding: 15px 0 20px 0; } .faq-acticle__mob .faq-acticle__one-answer:not(:last-child) { border-bottom: 0; } .faq-acticle__mob .faq-acticle__one-answer:not(:last-child) { padding-bottom: 0; margin-bottom: 0; } .faq-acticle__mob .faq-acticle__one-answer-text p:not(:last-child) { margin-bottom: 10px; } .faq-acticle__mob-title { color: #FF4C3B; font-size: 24px; line-height: 30px; margin-bottom: 25px; font-family: 'Gotham Pro Bold'; } .faq-acticle__mob-top { padding: 0 20px 40px 20px; } .faq-acticle__mob-text { font-size: 14px; line-height: 24px; font-family: 'Gotham Pro Regular'; } .faq-acticle__mob .faq-acticle_one-answer-link:not(:last-child) { margin-bottom: 25px; } /*end of FAQ ARTICLE PAGE*/ .faq-main-page .faq__single-column-text { font-size: 14px; line-height: 22px; } .faq-main-page .faq__second-section .faq__columns-wrapper:nth-child(1) { margin-top: -252px; } .faq-main-page .faq__full-width-column-image { position: static; } .faq-main-page .faq__full-width-column-image img { border: none !important; position: relative; right: 27px; } .faq-main-page .faq__full-width-column { display: flex; justify-content: space-between; align-items: center; } .faq-main-page .faq__full-width-column .faq__single-column-text { max-width: 415px; } .faq-main-page .faq__full-width-column .faq__single-column-link { position: static; display: block; margin-top: 41px; } .faq-main-page .faq__full-width-column .faq__single-column-title { margin-bottom: 12px;; } .faq-main-page .faq__single-column-texts-wrapper .faq__single-column-title { margin-bottom: 19px; } .faq-main-page .faq__single-column.faq__full-width-column { min-height: initial; } .faq-main-page .faq__first-section-title span{ color:#FF6953; } .faq-main-page .faq__single-column-text { -webkit-line-clamp: 3; } .faq-main-page .faq-bandcamp-logo img { width: 114px; } .faq-main-page .faq-amazon-logo img { width: 72px; } .faq-main-page .faq-walmart-logo img { width: 95px; } .faq-main-page .faq-shopify-logo img { width: 85px; } .faq-main-page .faq-woocommerce-logo img { width: 110px; } .faq-main-page .faq-ebay-logo img { width: 60px; } .faq-main-page .faq-etsy-logo img{ width: 50px; } .faq-main-page .faq__double-width-column .faq__double-width-sub-column:nth-child(1) { width: 55%; } .faq-main-page .faq__double-width-column .faq__double-width-sub-column:nth-child(2) { width: 45%; } .faq-main-page .faq__double-width-column .faq__single-column-text { -webkit-line-clamp: 3; overflow: hidden; display: -webkit-box; } .faq-main-page .faq__single-column-collections { border: 2px solid #F4F8FC; } .faq-main-page .faq__single-column-collections:hover { box-shadow: none; border: 2px solid rgba(0,156,236,1); }