@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,700,800&subset=latin,latin-ext,cyrillic-ext,cyrillic); /* RESET ------------------------------------------------------------------------------*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } ul { -webkit-margin-before: 0em; -webkit-margin-after: 0em; -webkit-padding-start: 0em; } /* RESET END ------------------------------------------------------------------------------*/ /* FONTS ------------------------------------------------------------------------------*/ body { font-family: 'Open Sans', sans-serif; color: #414c55; } /* FONTS END ------------------------------------------------------------------------------*/ /* REUSABLE STYLES ------------------------------------------------------------------------------*/ .hidden { display: none !important; } .clear { height:0; clear:both; overflow:hidden; font-size:0; } /* REUSABLE STYLES END ------------------------------------------------------------------------------*/ /* FOUNDATION ------------------------------------------------------------------------------*/ html { height: 100%} body { background: #ffffff; height: 100%} a { color: #ffffff; text-decoration: underline; } a:hover { text-decoration: none; } img { color: #00b9ee; } strong { font-weight: bold; } h1,h2,h3,h4,h5,h6 { font-weight: normal; } /* FOUNDATION ------------------------------------------------------------------------------*/ /* BUTTONS ------------------------------------------------------------------------------*/ .btn { display: inline-block; zoom: 1; border: 1px solid #1aa267; background-color: #1dc17a; box-sizing: border-box; color: #ffffff; font-family: 'Open Sans', sans-serif; text-decoration: none; text-transform: uppercase; text-align: center; border-radius: 3px; } .btn:hover { background-color: #079ed0; cursor: pointer; } .btn-primary { font-size: 18px; width: 256px; padding: 19px 0; } .btn-lg { width: 335px; } .btn-primary:hover { background-color: #25bb7a; } .wrap { max-width: 1000px; margin: 0 auto; position: relative; padding: 0 15px; } section { position: relative; border-bottom: 3px solid #dee1e5; } section h3.subtitle { font-size: 36px; line-height: 52px; font-weight: 700; text-align: center; } section h2.title { font-size: 48px; line-height: 56px; font-weight: 700; text-align: center; } section .btn-wrapper { text-align: center; } section .inverse { color: #ffffff; } @media screen and (max-width: 1000px) { section h2.title { font-size: 36px; line-height: 42px; } section h3.subtitle { font-size: 28px; line-height: 34px; } } @media screen and (max-width: 480px) { section { padding: 50px 0 !important; } .wrap { padding: 0 10px; } section h2.title { font-size: 28px; line-height: 34px; } section h3.subtitle { font-size: 22px; line-height: 26px; } } header.header { background-color: #1ebaed; } .header.fixed { position: fixed; left: 0; right: 0; top: 0; z-index: 100; box-shadow: 0 0 5px #808080; } .navigation { text-align: center; padding: 12px 0; } .navigation ul li { display: inline-block; margin: 0 30px; } .navigation ul li a { font-size: 18px; text-transform: uppercase; line-height: 26px; text-decoration: none; } .navigation ul li a span { text-transform: lowercase; } @media screen and (max-width: 960px) { .header.fixed { position: relative; } .navigation ul li a { font-size: 14px; line-height: 20px; } } @media screen and (max-width: 480px) { .navigation ul li { display: block; } } .deal-block { background: url(/landings/87430/1489485628/images/bg-deal-new.jpg) no-repeat center center; min-height: 904px; background-size: cover; } .deal-block .logos-block { text-align: center; padding-top: 20px} .deal-block .logos-block img { display: inline-block; width: 100%; } .deal-block .logos-block .adsbridge { max-width: 327px; } .deal-block .logos-block .affiliate { max-width: 363px; } .deal-block .logos-block span { font-size: 28px; line-height: 50px; font-weight: 700; display: inline-block; margin: 0 20px; vertical-align: bottom; } .deal-block h3.subtitle { margin-bottom: 415px; } .deal-block .main-title { font-size: 60px; font-weight: 700; color: #101010; background: url(/landings/87430/1489485628/images/bg-for-slogan.png) no-repeat; width: 523px; text-align: center; line-height: 79px; margin: 15px auto; } .subtitle span { color: #ffcb05; } @media screen and (max-width: 1000px) { .deal-block .main-title { font-size: 44px; } } @media screen and (max-width: 800px) { .deal-block .logos-block .adsbridge { max-width: 267px; } .deal-block .logos-block .affiliate { max-width: 303px; } .deal-block .main-title { background-size: contain; width: 440px; line-height: 67px; } } @media screen and (max-width: 680px) { .deal-block { min-height: 640px; } .deal-block .subtitle { background: rgba(80, 92, 102,0.8); padding: 10px; } .deal-block h3.subtitle { margin-bottom: 20px; } .deal-block .main-title { margin-top: 150px; } } @media screen and (max-width: 480px) { .deal-block .main-title { width: 300px; line-height: 46px; font-size: 32px; } } @media screen and (max-width: 400px) { .deal-block .logos-block { background: rgba(80, 92, 102,0.8); padding: 10px; } } .pricing { background-color: #f7f9fb; padding: 80px 0 95px; display: none; } .pricing:after { content: ''; background: url(/landings/87430/1489485628/images/ninja-pic-price.png) no-repeat; width: 249px; height: 175px; display: block; position: absolute; bottom: 0; left: 195px; } .period { padding: 30px 0; text-align: center; } .period p { display: inline-block; font-size: 24px; font-weight: bold; text-transform: uppercase; } .period p:first-child { margin-right: 25px; } .period p input[type="radio"] { vertical-align: middle; } .period p input[type="radio"] + label { cursor: pointer; } .period p input[type="radio"] + label:before { content: ""; display: inline-block; height: 28px; margin: 0 10px 0 -24px; vertical-align: middle; width: 28px; } .period p input[type="radio"] + label:before { background: url(/landings/87430/1489485628/images/checkbox-sprite.png) 0 -28px no-repeat; } .period p input[type="radio"]:checked+label:before { background: url(/landings/87430/1489485628/images/checkbox-sprite.png) 0 0 no-repeat; } .container-level { text-align: center; } .container-level .level { display: inline-block; width: 330px; vertical-align: middle; } .container-level .level.pro { margin: 0 -5px 0 -6px; } .level .name { font-size: 30px; line-height: 40px; font-weight: 700; color: #ffffff; text-align: center; padding: 10px 0; text-transform: uppercase; } .level .price { color: #ffffff; text-align: center; padding: 25px; } .level .price[name="six-month"] { display: none; } .level .price .visits { font-size: 18px; font-weight: 700; } .level .price .last { font-size: 40px; text-decoration: line-through; padding: 20px 0 0; } .level .price .last span { font-size: 24px; vertical-align: top; line-height: 30px; } .level .price .new { font-size: 70px; } .level .price .new span { font-size: 40px; vertical-align: top; line-height: 52px; } .level.start .name { background-color: #47515a; } .level.start .price { background-color: #505c66; } /*.level.business .content { padding-top: 35px; }*/ .level.pro .name { background-color: #343e45; } .level.pro .price { background-color: #414c55; } .level.business .name { background-color: #129bc8; } .level.business .price { background-color: #1ebaed; } .level .content { background-color: #ffffff; border: 1px solid #dee1e5; box-sizing: border-box; padding: 25px 35px 40px; border-top-width: 2px; min-height: 355px; } .level .content ul { list-style-position: inside; } .level .content ul li { font-size: 14px; line-height: 26px; text-align: left; } .level .content ul li b { font-weight: 700; } .level .btn-wrapper { margin-top: 20px; } .level .content .note { font-size: 14px; line-height: 18px; text-align: left; padding: 20px 0 0; } /*.level.business .btn-wrapper { margin-top: 35px; }*/ .level .btn { width: 100%; } @media screen and (max-width: 1400px) { .pricing:after { left: 0; background-size: cover; width: 199px; height: 140px; } } @media screen and (max-width: 1040px) { .period { padding: 20px 0; } .period p { font-size: 14px; } .period p:first-child { margin-right: 5px; } .period p input[type="radio"] + label:before { width: 20px; height: 20px; background-size: cover; background-position: 0 -20px; } .period p input[type="radio"]:checked+label:before { background-size: cover; } .container-level .level { width: 300px; } .level .price { padding: 20px; } .level .name { font-size: 24px; line-height: 30px; } .level .price .visits { font-size: 16px; } .level .price .last { font-size: 30px; padding-top: 10px; } .level .price .new { font-size: 50px; } .level .content { padding: 20px 20px 30px; min-height: auto; } } @media screen and (max-width: 940px) { .container-level .level { width: 100%; display: block; margin-bottom: 25px; } .container-level .level.pro { margin: 0 auto 25px; } } @media screen and (max-width: 480px) { .pricing:after { display: none; } } .faq { background-color: #ffffff; padding: 80px 0; display: none; } .faq .two-column { padding: 30px 0 0; } .faq .column { display: inline-block; width: 47%; vertical-align: top; } .faq .column:first-child { padding-right: calc(6% - 5px); } .column .title { font-size: 18px; line-height: 24px; font-weight: 700; padding-bottom: 20px; text-transform: uppercase; } .column p { font-size: 14px; line-height: 20px; padding-bottom: 10px; } .column p.last { padding-bottom: 45px; } .column p.before-list { padding: 0; } .column ul li { font-size: 14px; line-height: 20px; } @media screen and (max-width: 760px) { .faq .column { width: 100%; display: block; } .faq .column:first-child { padding: 0 0 25px 0; } .column .title { padding-bottom: 5px; } .column p.last { padding-bottom: 25px; } } .features { background: url(/landings/87430/1489485628/images/bg-how-does-work.png) no-repeat top center; padding: 80px 0; background-size: cover; } .features:after { content: ''; background: url(/landings/87430/1489485628/images/ninja-how-does-work.png) no-repeat; width: 208px; height: 194px; display: block; position: absolute; bottom: -30px; right: 505px; z-index: 4; } .features .subtitle { color: #fff; max-width: 670px; margin: 0 auto; padding: 80px 0; } .features .list { text-align: center; padding-top: 35px; } .features .list .item { display: inline-block; width: 245px; vertical-align: top; text-align: center; padding-bottom: 45px; } .features .list .item img { -o-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .features .list .item img:hover { transform: rotateZ(720deg); } .features .list .item p { font-size: 18px; color: #fff; font-weight: 700; padding: 25px 0; } @media screen and (max-width: 1600px) { .features:after { right: 0; background-size: cover; width: 172px; height: 160px; bottom: -24px; } } @media screen and (max-width: 800px) { .features .list .item { padding-bottom: 25px; } .features .list .item p { padding: 10px 0; } .features .list .item img { width: 120px; } .features .list { padding-bottom: 25px; } } @media screen and (max-width: 600px) { .features:after { right: auto; left: -60px; } } @media screen and (max-width: 480px) { .features:after { display: none; } } .why-adsbridge { padding: 80px 0; } .main-direction { padding: 40px 0 0; text-align: center; } .verticals { width: 490px; display: inline-block; vertical-align: top; } .verticals .title { font-size: 24px; line-height: 28px; font-weight: 700; text-align: center; max-width: 300px; margin: 0 auto; } .verticals ul { position: relative; max-width: 300px; margin: 10px auto; } .verticals ul:before { content: ''; width: 2px; height: 350px; display: block; background-color: #babdc1; position: absolute; top: 15px; left: 50%; z-index: 3; } .verticals ul:after { content: ''; background: url(/landings/87430/1489485628/images/vertical-ninja.png) no-repeat; display: block; width: 89px; height: 172px; position: absolute; bottom: -210px; left: 50%; margin-left: -44px; z-index: 2; } .verticals ul li { font-size: 24px; line-height: 34px; max-width: 300px; position: relative; text-align: center; } .verticals ul li:after { content: ''; width: 17px; height: 17px; border-radius: 10px; display: block; position: absolute; top: 50%; margin-top: -8px; left: 50%; margin-left: -7px; z-index: 4; } .verticals ul li.first:after { } .verticals ul li.first:after { background-color: #1f9ad2; } .verticals ul li.second:after { background-color: #ffcb05; } .verticals ul li.third:after { background-color: #4ad5fa; } .verticals ul li.left.first { padding-right: 125px; } .verticals ul li.left.second { padding-right: 175px; } .verticals ul li.left.third { padding-right: 140px; } .verticals ul li.right.first { padding-left: 135px; } .verticals ul li.right.second { padding-left: 145px; } .verticals ul li.right.third { padding-left: 125px; } .our-clients { position: relative; width: 480px; display: inline-block; min-height: 450px; } .our-clients .circle { width: 272px; height: 272px; border-radius: 50%; position: absolute; } .our-clients .circle.first { background: rgba(31, 154, 210, 0.8); top: 0; left: 0; z-index: 3; } .our-clients .circle.second { background: rgba(255, 203, 5, 0.8); top: 0; right: 0; z-index: 2; } .our-clients .circle.third { background: rgba(74, 213, 250, 0.8); bottom: 0; left: 50%; margin-left: -136px; z-index: 1; } .our-clients .circle p { text-align: center; font-size: 24px; line-height: 272px; font-weight: 700; text-transform: uppercase; } .map-container { background: url(/landings/87430/1489485628/images/map.png) no-repeat center center; position: relative; width: 798px; height: 399px; margin: 100px auto 80px; } .map-container p { font-size: 24px; font-weight: 700; text-transform: uppercase; position: absolute; } .map-container .countries { right: 125px; top: -55px; } .map-container .clicks { right: -65px; max-width: 160px; top: 50%; margin-top: -35px; } .map-container .data-center { bottom: 10px; left: 275px; } @media screen and (max-width: 1020px) { .verticals { width: 350px; } } @media screen and (max-width: 940px) { .map-container { margin: 40px auto; text-align: center; max-width: 798px; width: 100%; margin-bottom: 180px; } .map-container p { background: rgba(255,255,255,0.5); line-height: 28px; padding: 10px 0; } .map-container .countries { top: auto; bottom: -60px; right: 0; left: 0; } .map-container .clicks { left: 0; right: 0; max-width: 100%; top: auto; bottom: -110px; } .map-container .data-center { left: 0; bottom: -160px; right: 0; } } @media screen and (max-width: 870px) { .main-direction { padding: 20px 0 0; } .verticals { width: 100%; } .verticals .title { max-width: 100%; font-size: 20px; line-height: 24px; } .verticals ul li { font-size: 20px; line-height: 28px; } .verticals ul:before { height: 300px; } .verticals ul li.left.first { padding-right: 95px; } .verticals ul li.right.second { padding-left: 115px; } .verticals ul li.left.third { padding-right: 110px; } .verticals ul li.right.first { padding-left: 105px; } .verticals ul li.left.second { padding-right: 145px; } .verticals ul li.right.third { padding-left: 95px; } .verticals ul:after { bottom: -190px; } .our-clients { display: block; margin: 220px auto 0; } } @media screen and (max-width: 560px) { .our-clients { width: 300px; min-height: 300px; } .our-clients .circle { width: 170px; height: 170px; } .our-clients .circle p { font-size: 16px; line-height: 170px; } .our-clients .circle.third { margin-left: -85px; } } @media screen and (max-width: 480px) { .map-container { margin-bottom: 130px; } .map-container p { font-size: 18px; line-height: 20px; } .map-container .countries { bottom: -50px; } .map-container .clicks { bottom: -80px; } .map-container .data-center { bottom: -110px; } .why-adsbridge .btn { width: 100%; } } .ad-networks { padding: 80px 0; display: none; } .ad-networks .title { max-width: 740px; margin: 0 auto; } .partners-container { margin: 20px 0; } .partners-container .center { display: inline-block; vertical-align: middle; width: 350px; height: 350px; background-color: #ebeef2; border-radius: 50%; box-sizing: border-box; border: 25px solid #dee1e5; text-align: center; line-height: 330px; margin: 0 20px; } .partners-container .left, .partners-container .right { display: inline-block; width: 300px; position: relative; vertical-align: middle; margin: 0 auto; } .left .logo { background: url(/landings/87430/1489485628/images/left-sprite-logo-new.png) no-repeat; margin: 0 auto 10px; } .left .logo-1 { background-position: 0 -10px; width: 162px; height: 63px; margin-left: 0; } .left .logo-2 { background-position: -12px -80px; width: 140px; height: 42px; margin-right: 0; } .left .logo-3 { background-position: -7px -126px; width: 148px; height: 52px; margin-left: 0; } .left .logo-4 { background-position: -9px -184px; width: 130px; height: 40px; margin-right: 0; } .left .logo-5 { background-position: -12px -248px; width: 130px; height: 50px; margin-left: 0; } .left .logo-6 { background-position: -16px -310px; width: 117px; height: 50px; margin-right: 0; } .left .logo-7 { background-position: -35px -363px; width: 106px; height: 80px; margin-left: 0; } .left .logo-8 { background-position: -23px -463px; width: 112px; height: 30px; margin: -50px -50px 0 auto; } .right .logo { background: url(/landings/87430/1489485628/images/right-sprite-logo.png) no-repeat; margin: 0 auto 10px; } .right .logo-1 { background-position: -62px 0px; width: 88px; height: 66px; margin-left: 0; } .right .logo-2 { background-position: -14px -90px; width: 158px; height: 45px; margin-right: 0; } .right .logo-3 { background-position: -36px -146px; width: 139px; height: 45px; margin-left: 0; } .right .logo-4 { background-position: 0 -192px; width: 190px; height: 50px; margin-right: 0; } .right .logo-5 { background-position: -48px -249px; width: 110px; height: 75px; margin-left: 0; } .right .logo-6 { background-position: -20px -340px; width: 150px; height: 30px; margin-right: 0; } .right .logo-7 { background-position: -32px -387px; width: 130px; height: 40px; margin-left: -40px; } @media screen and (max-width: 1040px) { .partners-container .left, .partners-container .right { width: 100%; display: block; text-align: center; } .partners-container .center { display: block; margin: 20px auto; } .left .logo, .right .logo { display: inline-block; vertical-align: middle; margin: 0 15px 15px; } } @media screen and (max-width: 480px) { .left .logo, .right .logo { display: block; margin: 0 auto 15px; } .partners-container .center { width: 300px; height: 300px; line-height: 280px; } .partners-container .center img { width: 210px; } } .experience { background-color: #ebeef2; padding: 80px 0; } .experience .subtitle { padding-top: 10px; } .b-feedback-slide .text { display: inline-block; vertical-align: middle; width: 780px; position: relative; font-size: 14px; line-height: 18px; color: #525d67; padding: 5px 30px 30px 30px; } .b-feedback-slide .about-author { display: inline-block; vertical-align: middle; } .b-feedback-slide .text:before { content: ''; background: url(/landings/87430/1489485628/images/open-quotes.png) no-repeat; display: block; width: 20px; height: 16px; position: absolute; left: 0; top: 0; } .b-feedback-slide .name { font-size: 16px; color: #2a3943; font-weight: 700; text-align: center; padding-top: 15px; } .b-feedback-slide .pic-author { background: url(/landings/87430/1489485628/images/feedback-author-sprite.png) no-repeat; display: block; width: 113px; height: 113px; } .b-feedback-slide-1 .pic-author { background-position: 0 0; } .b-feedback-slide-2 .pic-author { background-position: 0 -123px; } .b-feedback-slide-3 .pic-author { background-position: 0 -246px; } .b-feedback-slide-4 .pic-author { background-position: 0 -369px; } .bx-wrapper { /*padding-bottom: 80px;*/} .bx-wrapper .bx-controls { text-align: center; margin-top: 10px; } .bx-wrapper .bx-pager-item { display: inline-block; } .bx-wrapper .bx-pager-item a { display: block; width: 14px; height: 14px; border: 1px solid #c0c6cd; border-radius: 14px; -webkit-border-radius: 14px; -moz-border-radius: 14px; text-indent: -9999px; margin: 0 5px; } .bx-wrapper .bx-pager-item a.active { background: #c0c6cd; } .bx-wrapper .bx-viewport { padding-bottom: 15px; } .bx-wrapper .bx-controls-direction { display: none; } @media screen and (max-width: 1000px) { .b-feedback-slide .text { display: block; width: calc(100% - 30px); margin-top: 20px; } .b-feedback-slide .about-author { display: block; } .b-feedback-slide .about-author .pic-author { margin: 0 auto; } } .footer { background: #374047; position: relative; padding: 35px 0; color: #7c8891; } .footer .copy { font-size: 16px; text-align: right; float: right; line-height: 24px; } .footer .footer-menu { float: left; } .footer .footer-menu li { display: inline-block; vertical-align: top; line-height: 16px; overflow: hidden; padding-right: 25px; } .footer .footer-menu li:last-child { padding-right: 0; } .footer .footer-menu li a { display: block; font-size: 22px; line-height: 24px; text-align: center; color: #7c8891; text-decoration: none; } @media screen and (max-width: 680px) { .footer .footer-menu { float: none; text-align: center; padding-bottom: 10px; } .footer .footer-menu li a { font-size: 16px; } .footer .copy { float: none; text-align: center; font-size: 12px; } } .popup-container { } .popup-overlay { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.75); z-index: 105; display: none; } .popup-overlay.active { display: block; } .popup { position: fixed; width: 510px; height: 650px; left: 50%; top: 50%; margin: -325px 0 0 -255px; z-index: 110; display: none; } .popup.active { display: block; } .popup-top { position: relative; } .popup-top .close { position: absolute; right: 10px; bottom: 5px; width: 20px; height: 20px; cursor: pointer; } .popup-top .close .line { width: 2px; height: 20px; display: block; transform: rotateZ(45deg); background-color: #ffffff; position: absolute; left: 9px; top: 0; } .popup-top .close .line-2 { transform: rotateZ(-45deg); } .popup-top img { margin: 0 0 -21px 0; } .popup-bottom .btn-wrapper { text-align: center; margin: 30px 0 0 0; } .popup-bottom .title-v2 { font-size: 33px; line-height: 40px; font-weight: 700; text-align: center; margin: 20px 0 0 0; } .popup-bottom .title-v2 span { color: #1ebaed; } .popup-bottom { background-color: #ffffff; padding: 25px 25px 30px; border-radius: 4px; } .popup-bottom .title { font-size: 30px; line-height: 50px; font-weight: 400; color: #ffffff; background-color: #666666; text-transform: uppercase; text-align: center; border: 1px dashed #ffffff; } .popup-bottom .title span { font-weight: 700; color: #eedd20; } .popup-bottom .subtitle { font-size: 24px; line-height: 30px; color: #414c55; font-weight: 700; text-align: center; padding: 20px 0; } .popup-bottom ul { text-align: center; } .popup-bottom ul li { display: inline-block; position: relative; vertical-align: top; text-align: center; width: 120px; margin: 0 25px; } .popup-bottom ul li:first-child:after { content: ''; background: url(/landings/87430/1489485628/images/sprite-popup.png) no-repeat -97px 0; width: 97px; height: 33px; display: block; position: absolute; top: -5px; left: 95px; } .popup-bottom ul li .pic { background: url(/landings/87430/1489485628/images/sprite-popup.png) no-repeat; display: block; min-height: 48px; margin: 0 auto; } .popup-bottom ul li .pic-1 { background-position: 0 0; width: 49px; height: 48px; } .popup-bottom ul li .pic-2 { background-position: -55px 0; width: 36px; height: 46px; } .popup-bottom ul li p { font-size: 14px; padding: 10px 0; } .popup-bottom ul li .btn { padding: 6px 0; width: 100%; } @media screen and (max-width: 640px) { .popup { width: calc(100% - 40px); height: auto; left: 20px; top: 20px; margin: 0; bottom: 20px; } .popup-top { text-align: center; } .popup-top img { max-width: 300px; } .popup-bottom { padding: 15px; } .popup-bottom .title { font-size: 24px; line-height: 36px; } .popup-bottom .subtitle { font-size: 18px; line-height: 24px; padding: 10px 0; } .popup-bottom .btn-wrapper { margin-top:15px } .popup-bottom .btn-primary { width:100%; } } @media screen and (max-width: 480px) { .popup-bottom .title-v2 { font-size:24px; line-height:28px; } } @media screen and (max-width: 440px) { .popup-bottom ul li { width: 41%; margin: 0; } .popup-bottom ul li:first-child:after { display: none; } }