diff --git a/src/styles/media.css b/src/styles/media.css index 9227f5d..63981b7 100644 --- a/src/styles/media.css +++ b/src/styles/media.css @@ -1,15 +1,67 @@ +@media (max-width: 1030px) { + #contacts .contact-info_content { + padding-left: 100px; + } + + #contacts .contact-form_wrap { + padding-right: 50px; + padding-left: 50px; + justify-self: stretch; + } + + #contacts .section-contacts_wrap { + grid-column-gap: 0px; + grid-template-columns: 1fr; + } + + #contacts .contact-info_content { + padding-left: 0px; + text-align: center; + } + + footer .footer-logo { + text-align: center; + } +} + +@media (min-width: 992px) { + header .wrap-nav { + display: none; + } +} + +@media (max-width: 991px) { + header .header-content_top { + display: none; + } + + header .header-content { + padding-top: 10px; + } +} + @media (max-width: 990px) { header ul li { margin-right: 15px; } } +@media(max-width: 950px) { + #price .card-tariff { + grid-template-columns: 1fr; + text-align: center; + grid-row-gap: 15px; + padding-left: 15px; + padding-right: 15px; + } +} + @media (max-width: 930px) { - #price .section-price_wrap { + #price .compare { grid-template-columns: 1fr 1fr; } - #price .section-price_wrap div:nth-child(3) { + #price .compare div:nth-child(3) { grid-column: 1/3; } } @@ -71,6 +123,10 @@ padding-top: 60px; } + header .header-content { + padding-top: 80px; + } + } @media(min-width: 861px) { @@ -123,10 +179,11 @@ } @media (max-width: 670px) { - #price .section-price_wrap { + #price .compare { grid-template-columns: 1fr; } - #price .section-price_wrap div:nth-child(3) { + + #price .compare div:nth-child(3) { grid-column: 1; } } @@ -162,6 +219,11 @@ #first .section-first_wrap h1 { font-size: 30px; } + + #contacts .contact-form_wrap { + padding-right: 15px; + padding-left: 15px; + } } @media (max-width: 548px) { @@ -203,6 +265,15 @@ .section-apps_download img { margin-top: 20px; } + + main .modal { + padding-left: 45px; + padding-right: 45px; + } + + main .modal-close { + left: 0; + } } @media (max-width: 360px) { diff --git a/src/styles/style.css b/src/styles/style.css index 832006a..df84e8a 100644 --- a/src/styles/style.css +++ b/src/styles/style.css @@ -16,69 +16,92 @@ src: url(../fonts/ProximaNovaExtrabld.ttf); /* Путь к файлу со шрифтом */ } + @font-face { font-family: MullerLight; /* Имя шрифта */ src: url(../fonts/MullerLight.otf); /* Путь к файлу со шрифтом */ } + @font-face { font-family: MullerBold; /* Имя шрифта */ src: url(../fonts/MullerBold.otf); /* Путь к файлу со шрифтом */ } + @font-face { font-family: MullerMedium; /* Имя шрифта */ src: url(../fonts/MullerMedium.otf); /* Путь к файлу со шрифтом */ } + body { padding: 0; margin: 0; } -h1,h2,h3,h4,h5,h6 { + +h1, +h2, +h3, +h4, +h5, +h6 { padding: 0; margin: 0; } + p { padding: 0; margin: 0; } + h2 { font-family: ProximaNovaBold; font-size: 30px; text-align: center; } + a { text-decoration: none; } + +textarea { + resize: none; +} + /* Fade Animation */ .fade { -webkit-animation-name: fade; - animation-name: fade; + animation-name: fade; -webkit-animation-duration: 0.5s; - animation-duration: 0.5s; + animation-duration: 0.5s; -webkit-animation-name: fade; -webkit-animation-duration: 0.5s; - } - @-webkit-keyframes fade { +} + +@-webkit-keyframes fade { from { - opacity: 0.1; + opacity: 0.1; } + to { - opacity: 1; + opacity: 1; } - } - @keyframes fade { +} + +@keyframes fade { from { - opacity: 0.1; + opacity: 0.1; } + to { - opacity: 1; + opacity: 1; } - } +} + .btn-red { height: 65px; width: 300px; @@ -92,10 +115,15 @@ a { border-radius: 5px; outline: none; } + .btn-red:hover { background-color: #d15252; } -.btn-orange, .btn-green, .btn-blue, .btn-grey { + +.btn-orange, +.btn-green, +.btn-blue, +.btn-grey { width: 100%; margin-top: 15px; height: 55px; @@ -107,24 +135,28 @@ a { text-align: center; cursor: pointer; } + .btn-orange { - background: -moz-linear-gradient( 90deg, rgb(255,46,0) 0%, rgb(255,76,37) 100%); - background: -webkit-linear-gradient( 90deg, rgb(255,46,0) 0%, rgb(255,76,37) 100%); - background: -ms-linear-gradient( 90deg, rgb(255,46,0) 0%, rgb(255,76,37) 100%); + background: -moz-linear-gradient(90deg, rgb(255, 46, 0) 0%, rgb(255, 76, 37) 100%); + background: -webkit-linear-gradient(90deg, rgb(255, 46, 0) 0%, rgb(255, 76, 37) 100%); + background: -ms-linear-gradient(90deg, rgb(255, 46, 0) 0%, rgb(255, 76, 37) 100%); } + .btn-grey { background-color: #9a9a9a; } + .btn-green { - background: -moz-linear-gradient( 90deg, rgb(0,142,0) 0%, rgb(0,163,0) 100%); - background: -webkit-linear-gradient( 90deg, rgb(0,142,0) 0%, rgb(0,163,0) 100%); - background: -ms-linear-gradient( 90deg, rgb(0,142,0) 0%, rgb(0,163,0) 100%); + background: -moz-linear-gradient(90deg, rgb(0, 142, 0) 0%, rgb(0, 163, 0) 100%); + background: -webkit-linear-gradient(90deg, rgb(0, 142, 0) 0%, rgb(0, 163, 0) 100%); + background: -ms-linear-gradient(90deg, rgb(0, 142, 0) 0%, rgb(0, 163, 0) 100%); } + .btn-blue { - background: -moz-linear-gradient( 90deg, rgb(0,28,103) 0%, rgb(2,56,143) 100%); - background: -webkit-linear-gradient( 90deg, rgb(0,28,103) 0%, rgb(2,56,143) 100%); - background: -ms-linear-gradient( 90deg, rgb(0,28,103) 0%, rgb(2,56,143) 100%); -} + background: -moz-linear-gradient(90deg, rgb(0, 28, 103) 0%, rgb(2, 56, 143) 100%); + background: -webkit-linear-gradient(90deg, rgb(0, 28, 103) 0%, rgb(2, 56, 143) 100%); + background: -ms-linear-gradient(90deg, rgb(0, 28, 103) 0%, rgb(2, 56, 143) 100%); +} .container { margin-left: auto; @@ -133,13 +165,15 @@ a { padding-right: 15px; max-width: 960px; } + header ul li { display: inline-block; list-style: none; font-size: 16px; font-family: ProximaNovaBold; - margin-right: 25px; + margin-right: 22px; } + header ul { padding: 0; margin: 0; @@ -147,13 +181,16 @@ header ul { justify-content: center; align-items: center; } + a { text-decoration: none; color: #1c1c1c; } + header { margin-top: 20px; } + .header-btn_call { height: 30px; background-color: #ff0000; @@ -167,41 +204,51 @@ header { border-radius: 5px; max-width: 140px; } + .header-telephone { font-family: ProximaNovaBold; } + .header-content_top { margin-bottom: 30px; } + .header-bottom_text { color: #1c1c1c; font-size: 16px; font-family: ProximaNovaBold; } + .header-bottom_info a { font-size: 18px; font-family: ProximaNovaBold; margin-right: 30px; } + .header-bottom_info { display: flex; align-items: center; } + .header-content_bottom { display: flex; justify-content: space-between; align-items: center; } + .android { margin-right: 10px; background: url(../img/android.svg) no-repeat center center; } + .apple { background: url(../img/apple.svg) no-repeat center center; background-position-y: 6px; background-position-x: 7px; } -.android, .apple { + +.android, +.apple { height: 40px; width: 40px; display: inline-block; @@ -209,6 +256,7 @@ header { border: 1px solid #e42626; cursor: pointer; } + /* First Section */ #first { margin-top: 35px; @@ -218,17 +266,21 @@ header { color: #fff; padding-top: 130px; } + .section-first_wrap { font-family: ProximaNovaBold; } + .section-first_wrap h1 { font-size: 36px; line-height: 50px } + .section-first_wrap h1 span { text-transform: uppercase; font-family: ProximaNovaExtrabld; } + .section-first_wrap p { font-size: 24px; line-height: 32px; @@ -236,17 +288,21 @@ header { margin-bottom: 70px; margin-top: 65px; } + .section-first_wrap p b { font-family: ProximaNovaBold; } + /* Secction Services */ #services { padding-top: 100px; padding-bottom: 100px; } + #services h2 { text-align: center; } + .section-services_wrap { margin-top: 85px; display: grid; @@ -254,15 +310,18 @@ header { grid-row-gap: 85px; grid-column-gap: 100px; } + .section-services_wrap div { font-family: ProximaNovaLight; font-size: 16px; } + .section-services_wrap div p { position: relative; padding-left: 70px; top: 7px } + .section-services_wrap div:nth-child(1)::before { content: ''; height: 50px; @@ -271,6 +330,7 @@ header { display: inline-block; position: absolute; } + .section-services_wrap div:nth-child(2)::before { content: ''; height: 50px; @@ -279,6 +339,7 @@ header { display: inline-block; position: absolute; } + .section-services_wrap div:nth-child(3)::before { content: ''; height: 50px; @@ -287,6 +348,7 @@ header { display: inline-block; position: absolute; } + .section-services_wrap div:nth-child(4)::before { content: ''; height: 50px; @@ -295,6 +357,7 @@ header { display: inline-block; position: absolute; } + .section-services_wrap div:nth-child(5)::before { content: ''; height: 50px; @@ -303,6 +366,7 @@ header { display: inline-block; position: absolute; } + .section-services_wrap div:nth-child(6)::before { content: ''; height: 50px; @@ -311,6 +375,7 @@ header { display: inline-block; position: absolute; } + .section-services_wrap div:nth-child(7)::before { content: ''; height: 50px; @@ -319,6 +384,7 @@ header { display: inline-block; position: absolute; } + .section-services_wrap div:nth-child(8)::before { content: ''; height: 50px; @@ -327,6 +393,7 @@ header { display: inline-block; position: absolute; } + .section-services_wrap div:nth-child(9)::before { content: ''; height: 50px; @@ -335,6 +402,7 @@ header { display: inline-block; position: absolute; } + /* Section About */ #about { padding-top: 100px; @@ -343,9 +411,11 @@ header { background: url(../img/about/about_background.jpg) no-repeat center center; background-size: cover; } + #about h2 { color: #fff; } + #about p { font-family: ProximaNovaLight; font-size: 16px; @@ -353,79 +423,99 @@ header { color: #fff; margin-top: 85px; } + #about p:nth-child(3) { margin-top: 30px; } + .section-about_feature span { font-size: 48px; font-family: ProximaNovaBold; } + .section-about_wrap { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; margin-top: 85px; } + /* Section About-Turn */ #turn { padding-top: 100px; padding-bottom: 100px; background-color: #f5f5f5; } + .section-turn_wrap { margin-top: 100px; text-align: center; display: grid; grid-template-columns: 1fr 1fr 1fr; } + .section-turn_feature { margin-top: 20px; } + .wrap-img_feature { min-height: 90px; max-height: 90px; } + .section-turn_feature p { font-family: ProximaNovaLight; font-size: 16px; margin-top: 55px; } + .section-turn_feature p b { font-family: ProximaNovaBold; } + /* Section Advantage */ #advantage { padding-top: 100px; padding-bottom: 100px; } + .section-advantage_wrap { margin-top: 80px; display: grid; grid-template-columns: 2fr 1fr; } + .advantage-cards { display: grid; grid-template-columns: 1fr 1fr 1fr; } + .card-advogrand { background-color: #26b83a; } + .card-other { border: 1px solid #e8e8e8; } -.card-advogrand, .card-other { + +.card-advogrand, +.card-other { padding-top: 30px; } + .card-title { text-align: center; } + .card-title span { font-family: ProximaNovaExtraBld; font-size: 15px; color: #fff; } + .card-other .card-title span { color: #000; } + .card-content ul li { list-style: none; text-align: center; @@ -435,20 +525,25 @@ header { margin-bottom: 30px; } -.card-info .card-content ul li, .card-other .card-content ul li { +.card-info .card-content ul li, +.card-other .card-content ul li { color: #000; } + .card-info .card-content ul { margin-top: 77px; } + .card-content ul { padding: 0; margin: 0; margin-top: 30px; } + .advantage-users { padding-left: 20px; } + .advantage-users .users-title { color: #000; font-size: 16px; @@ -456,23 +551,28 @@ header { text-align: center; margin-bottom: 30px; } + .advantage-users button { width: 100%; } + .users-list ul li { list-style: none; font-family: ProximaNovaBold; color: #1c1c1c; margin-bottom: 20px; } + .users-list ul li span { font-family: ProximaNovaExtraBld; padding-left: 20px; } + .users-list ul { margin: 0; padding: 0; } + .users-list ul li:nth-child(1)::before { content: ''; display: inline-block; @@ -482,6 +582,7 @@ header { position: relative; top: 4px; } + .users-list ul li:nth-child(2)::before { content: ''; display: inline-block; @@ -491,6 +592,7 @@ header { position: relative; top: 4px; } + .users-list ul li:nth-child(3)::before { content: ''; display: inline-block; @@ -500,6 +602,7 @@ header { position: relative; top: 4px; } + .users-list ul li:nth-child(4)::before { content: ''; display: inline-block; @@ -509,6 +612,7 @@ header { position: relative; top: 4px; } + /* Section Apps */ #apps { min-height: 470px; @@ -517,38 +621,54 @@ header { font-family: MullerLight; background-size: cover; } + #apps h2 { text-align: left; font-family: MullerBold; } -.section-apps_wrap { + +.section-apps_wrap { padding-top: 100px; padding-bottom: 100px; display: grid; grid-template-columns: 2fr 1fr; } + .section-apps_wrap p { margin-top: 80px; line-height: 30px; font-size: 18px; } + .section-apps_wrap p span { color: #e41e1e; font-family: MullerMedium; margin-right: 15px; } + .section-apps_download img { margin-top: 40px; } + /* Section Comments */ +.play-button { + width: 25px !important; + height: 25px; + position: absolute; + top: 15px; + left: 20px; +} + #comments { padding-top: 100px; padding-bottom: 100px; background-color: #f5f5f5; } + .section-comments_wrap { - margin-top: 80px; + margin-top: 80px; } + .section-comments_wrap ul { margin: 0; padding: 0; @@ -558,6 +678,7 @@ header { padding-left: 150px; padding-right: 150px; } + .section-comments_wrap ul li { list-style: none; color: #313131; @@ -565,6 +686,7 @@ header { text-transform: uppercase; align-self: center; } + .section-comments_wrap ul li a { color: #313131; padding-left: 12px; @@ -572,46 +694,57 @@ header { padding-right: 12px; padding-bottom: 12px; } + .section-comments_wrap ul li a.active { border: 2px solid #e41e1e; color: #e41e1e; border-radius: 5px; } + .section-comments_wrap ul li a:hover { color: #e41e1e; } + .comments-tab_content { margin-top: 70px; } + /* Slider Comments */ .item { min-height: 260px; } + .item a { color: #313131; font-family: MullerLight; font-size: 14px; } + .item a:hover { color: #e41e1e; text-decoration: underline; } + .item p { margin-top: 20px; } + /* Section Partners */ #partners { padding-top: 100px; padding-bottom: 100px; } + .section-partners_wrap { margin-top: 90px; } + .item-partner { min-height: 170px; transition: all .3s; } + .partner-info { min-height: 170px; background-color: red; @@ -624,8 +757,9 @@ header { z-index: 999; display: none; background-color: rgb(38, 184, 58); - box-shadow: 0px 10px 10px 0px rgba(38, 184, 58, 0.2); + box-shadow: 0px 10px 10px 0px rgba(38, 184, 58, 0.2); } + .partner-info p { color: #fff; font-size: 13px; @@ -633,78 +767,99 @@ header { text-align: center; padding: 15px; } + .section-partners_wrap .owl-prev span { top: 30px !important; } + .section-partners_wrap .owl-next span { top: 30px !important; } -/* Section Price */ + +/* Section Price Compare */ #price { padding-top: 100px; padding-bottom: 100px; background-color: #f5f5f5; } + #price h2 { text-align: left; font-family: MullerBold; font-size: 30px; color: #313131; } - #price .about-card p { + +#price .about-card p { margin-top: 40px; font-size: 18px; text-align: left; font-family: MullerBold; color: #313131; -} - #price .choose-title p { +} + +#price .choose-title p { margin-top: 40px; font-size: 18px; text-align: left; font-family: MullerLight; color: #313131; -} +} + .choose-card { display: flex; justify-content: space-between; } + .tabs-card { align-self: flex-end; } -.tabs-card a { + +.tabs-card span { color: #313131; text-transform: uppercase; font-size: 14px; font-family: MullerMedium; margin-right: 15px; padding: 10px; + cursor: pointer; } -.tabs-card a:hover { + +.tabs-card span:hover { color: #e42626; } -.tabs-card a.active { + +.tabs-card span.active { border: 2px solid #e42626; border-radius: 5px; + color: #e42626; } -.section-price_wrap { + +.compare, +.tariffs { margin-top: 40px; } + .card-title h3 { font-family: MullerLight; font-size: 20px; } + .card-title h3 span { color: #000; font-family: MullerBold; font-size: 20px; } -.card-title, .card-image { + +.card-title, +.card-image { text-align: center; } + .card-image { margin-top: 30px; } + .card { padding-right: 20px; padding-left: 20px; @@ -713,11 +868,13 @@ header { background-color: #fff; border: 1px solid #e8e8e8; } + .card-list_info ul { padding: 0; margin-top: 30px; min-height: 355px; } + .card-list_info ul li { list-style: none; text-align: left; @@ -730,28 +887,435 @@ header { display: flex; justify-content: space-between; } + .card-list_info ul li span { text-align: right; font-family: MullerBold; } + .card-cost p { font-family: MullerLight; text-align: center; line-height: 30px; } + .card-cost p span { font-family: MullerBold; font-size: 24px; } -.section-price_wrap { + +.compare { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-auto-rows: 920px; } + .card-buttons form { text-align: center; } + .card-buttons button { max-width: 220px; } - \ No newline at end of file + +/* Price Tariffs */ +.card-title_tariff h3 { + font-family: MullerLight; + font-size: 20px; + margin-bottom: 30px; +} + +.card-title_tariff h3 span { + color: #000; + font-family: MullerBold; + font-size: 20px; +} + +.card-tariff { + background-color: #fff; + padding-left: 50px; + padding-right: 50px; + padding-top: 50px; + padding-bottom: 70px; + border: 1px solid #e8e8e8; + display: grid; + grid-template-columns: 1fr 1fr 1fr; +} + +.card-tariff .card-cost { + padding-top: 30px; +} + +.card-tariff .card-buttons form:nth-child(1) { + margin-top: 30px; +} + +.card-tariff .card-buttons button { + max-width: 180px; +} + +.card-tariff .card-list_info ul { + margin-top: 0px; + min-height: 0px; +} + +.card-list_info b { + font-family: MullerBold; +} + +/* Section Contacts */ +.section-contacts_wrap { + display: grid; + grid-template-columns: 1fr 1fr; + grid-column-gap: 50px; + background-color: #f5f5f5; +} + +.contact-form_wrap { + background-color: #f5f5f5; + justify-self: end; + padding-top: 70px; + padding-bottom: 70px; +} + +.contact-info_wrap { + background-color: #fff; +} + +.contact-form_content h3 { + font-family: MullerBold; + font-size: 18px; +} + +.contact-form_wrap { + padding-right: 145px; + padding-left: 15px; +} + +.contact-form_content input, +.contact-form_content textarea { + display: block; + width: 100%; + outline: none; + padding-left: 10px; + font-family: MullerMedium; + box-sizing: border-box; +} + +.contact-form_content textarea { + resize: none; + padding-top: 10px; +} + +.contact-form_content form { + margin-top: 15px; +} + +.contact-form_content label { + font-family: MullerLight; + font-size: 14px; + padding-top: 15px; + padding-bottom: 15px; + display: block; +} + +.contact-form_content input { + height: 50px; + border: 1px solid #dddddd; + border-radius: 5px; +} + +.contact-form_content textarea { + height: 80px; + border: 1px solid #dddddd; + border-radius: 5px; +} + +.contact-form_content form button { + width: 100%; + background-color: #cc0000; + border: none; + border-radius: 5px; + text-align: center; + font-family: MullerBold; + font-size: 18px; + color: #fff; + height: 65px; + cursor: pointer; + margin-top: 30px; + transition: all .1s; +} + +.contact-form_content form button:hover { + background-color: #be4545; +} + +.contact-form_content p { + text-align: center; + font-family: MullerLight; + font-size: 14px; + margin-top: 20px; +} + +/* Footer */ +footer { + min-height: 135px; + background-color: #0e0e0e; +} + +.footer-logo { + text-align: left; + padding-top: 50px; +} + +.contact-info_content { + padding-left: 165px; + padding-top: 100px; + padding-bottom: 140px; +} + +.contact-info_content h3 { + font-family: MullerBold; + font-size: 30px; + margin-bottom: 80px; +} + +.contact-info_content span { + font-family: MullerLight; + font-size: 14px; +} + +.contact-info_content a { + font-family: MullerBold; + font-size: 18px; + display: block; + margin-top: 10px; + margin-bottom: 15px; +} + +.contact-info_content p { + font-family: MullerMedium; + font-size: 18px; + margin-top: 10px; +} + +/* Modal Contact */ +.modal-contact-wrap { + height: 100vh; + background-color: rgba(0, 0, 0, .7); + position: fixed; + top: 0; + bottom: 0; + right: 0; + left: 0; + z-index: 999; + padding-left: 15px; + padding-right: 15px; + overflow-y: scroll; + display: none; +} + +.modal-contact { + min-height: 550px !important; +} + +/* Modal Phone */ +.modal-phone-wrap { + height: 100vh; + background-color: rgba(0, 0, 0, .7); + position: fixed; + top: 0; + bottom: 0; + right: 0; + left: 0; + z-index: 999; + padding-left: 15px; + padding-right: 15px; + display: none; + overflow-y: scroll; +} + +.modal { + max-width: 470px; + min-height: 430px; + background-color: #fff; + margin-left: auto; + margin-right: auto; + margin-top: 2rem; + padding-top: 30px; + padding-left: 75px; + padding-right: 75px; + box-sizing: border-box; + margin-bottom: 2rem; +} + +.modal-title h3 { + font-family: MullerBold; + font-size: 18px; + text-align: left; +} + +.modal-content form input, +.modal-content textarea { + width: 100%; + display: block; + box-sizing: border-box; + outline: none; + padding-left: 15px; + font-family: MullerMedium; +} + +.modal-content form input { + height: 50px; + border-radius: 5px; + border: 1px solid #dddddd; +} + +.modal-content form label { + font-family: MullerLight; + font-size: 14px; + display: block; + margin-bottom: 12px; + margin-top: 15px; +} + +.modal-content form button { + width: 100%; + color: #fff; + height: 65px; + border-radius: 5px; + font-family: MullerBold; + font-size: 18px; + background-color: #cc0000; + border: none; + outline: none; + cursor: pointer; + margin-top: 30px; + transition: all .2s; +} + +.modal-content form button:hover { + background-color: #be4545; +} + +.modal-content form textarea { + height: 80px; + border-radius: 5px; + border: 1px solid #dddddd; + padding-top: 10px; +} + +.modal-close { + float: right; + position: relative; + left: 25px; + top: 5px; +} + +.modal-close span { + background-color: #000; + height: 2px; + width: 25px; + display: inline-block; + position: absolute; + cursor: pointer; +} + +.modal-close span:nth-child(1) { + transform: rotate(45deg); +} + +.modal-close span:nth-child(2) { + transform: rotate(-45deg); +} + +.modal-form p { + text-align: center; + font-family: MullerLight; + font-size: 14px; + margin-top: 25px; +} + +/* Navigation Mobile */ +.wrap-nav { + height: 80px; + background-color: #fff; + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 9999; + border-bottom: 1px solid #adadad; + box-sizing: border-box; + padding-top: 25px; +} + +.btn-nav { + display: inline-block; + cursor: pointer; + margin-left: 15px; +} + +.btn-nav span { + background-color: #000; + display: inline-block; + height: 3px; + width: 30px; +} + +.btn-nav span::after { + content: ''; + display: block; + position: absolute; + height: 3px; + width: 30px; + background-color: #000; + bottom: 29px; + transition: all .2s; +} + +.btn-nav span::before { + content: ''; + display: block; + position: absolute; + height: 3px; + width: 30px; + background-color: #000; + top: 25px; + transition: all .2s; +} + +.btn-nav span.active { + background-color: #fff; +} + +.btn-nav span.active::before { + transform: rotate(-45deg); + top: auto; +} + +.btn-nav span.active::after { + transform: rotate(45deg); + bottom: auto; +} + +.nav-content { + background-color: #fff; + margin-top: 37px; + padding-left: 15px; + padding-top: 20px; + display: none; + height: 300px; + transition: all .2s; + border-bottom: 1px solid #adadad; +} + +.nav-content ul li { + margin-bottom: 20px; + font-size: 18px; +} + +.nav-content ul { + flex-direction: column; + margin-top: 15px; +} \ No newline at end of file