/*   
Theme Name: WeTalk
Description: Tema para o site da WeTalk.
Author: Camila Lins
Author URI: http://camilalins.co
Version: 2020
*/

/* Reset */
*, *:before, *:after {box-sizing:border-box; -moz-box-sizing:border-box;}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, a, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {display:block;}
audio, canvas, progress, video {display:inline-block;}
img, object, embed, video, iframe {max-width:100%;}
ul {list-style:none;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after, q:before, q:after {content:''; content:none;}
del {text-decoration:line-through;}
abbr[title], dfn[title] {border-bottom:1px dotted #000; cursor:help;}
table {border-collapse:collapse; border-spacing:0; font-size:inherit; font:100%;}
th {font-weight:bold; vertical-align:bottom;}
td {font-weight:normal; vertical-align:middle;}
hr {display:block; height:1px; border:0; border-top:1px solid #CCC; margin:10px 0; padding:0;}
input, select {vertical-align:middle;}
pre {white-space:pre; white-space:pre-wrap; white-space:pre-line; word-wrap:break-word;}
input[type="radio"] {vertical-align:text-bottom;}
input[type="checkbox"] {vertical-align:bottom; *vertical-align:baseline;}
input:focus, textarea:focus{outline:0;}
a:hover, a:active {outline:0;}
small {font-size:85%;}
strong, th {font-weight:bold;}
td, td img {vertical-align:top;}
sub, sup {font-size:75%; line-height:0; position:relative;}
sup {top:-0.5em;}
sub {bottom:-0.25em;}
pre, code, kbd, samp {font-family:monospace, sans-serif;}
label, input[type=button], input[type=submit], button {cursor:pointer;}
body, select, input, textarea {-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}
button, input, select, textarea {margin:0; resize:none; color:inherit; font:inherit; border:0; border-radius:0; -webkit-appearance:none; -moz-appearance:none; appearance:none;}
button {width:auto; overflow:visible;}
textarea {overflow:auto;}
ins {background:#FDD900; color:#000; text-decoration:none;}
mark {background:#FDD900; color:#000; font-style:italic; font-weight:bold;}
audio, canvas, iframe, img, svg, video {vertical-align:middle;}
html {font-family:sans-serif; -ms-text-size-adjust:100%; -webkit-text-size-adjust:100%;}

::-moz-selection{background:#55B9E9; color:#FFF; text-shadow:none;}
::selection {background:#55B9E9; color:#FFF; text-shadow:none;}

::-webkit-input-placeholder {color:#FFF;}
::-moz-placeholder {color:#FFF;}
::placeholder {color:#FFF;}

/* Toolbox */
.fleft {float:left;}
.fright {float:right;}
.hide {display:none !important;}
.flex {display:flex;}

/* Clearfix */
.cf:before, .cf:after {content:''; display:table;}
.cf:after {clear:both;}

/* Page style */
body {font:16px 'Rubik', sans-serif; line-height:1.8rem; color:#002A34; background:#FFF;}
a {color:#55B9E9; text-decoration:none; transition:all 250ms ease-out;}
a:hover {color:#002A34;}

h1, h2, h3, h4, h5 {font-weight:400;}
h3 {font-size:48px; line-height:72px; max-width:550px; padding-left:30px;}

#wrap {padding:32px; /*max-width:1440px;*/ margin:auto;}
.wrapper {max-width:1065px; margin:auto;}
.wrapper.padding {padding:0 32px;}

.mobile-check {display:none;}
.rounded-rect {border-radius:56px; padding:100px 32px;}
.yellow-circle {position:absolute; width:80px; height:80px; background:#FDD900; border-radius:50%;}

/* Header */
.burger {display:none;}
header {position:fixed; left:0; right:0; top:53px; padding:0 32px; z-index:100; transition:top 300ms ease-out;}
header .content {position:relative; padding:12px 84px; height:80px; border-radius:80px; transition:background 400ms ease-out;}
header .content:before {content:''; position:absolute; z-index:-1; top:0; bottom:50%; left:0; right:0; transition:top 200ms ease-out; pointer-events:none;}
header .content .inner-wrapper {max-width:1208px; display:flex; align-items:center; justify-content:space-between; margin:auto;}

header .nav li {display:inline-block; font-size:14px;}
header .nav a {display:block; position:relative; line-height:56px; padding:0 26px; color:#FFF;}
header .nav a:hover {color:#55B9E9;}
header .nav a:hover span {color:#FFF;}
header .nav a span {position:absolute; top:-5px; right:14px; font-size:8px; color:#FFF; transition:all 250ms ease-out;}
header .nav li:last-child a {background:#FFF; color:#002A34; padding:0 38px; border-radius:56px; margin-left:30px;}
header .nav li:last-child a:hover {background:#55B9E9;}

header h1 {position:relative; z-index:5;}
header h1 a {display:block; width:143px; height:36px; text-indent:-99999px; background:url(img/layout/logo-white.svg) no-repeat; background-size:100% auto;}

header.fixed {top:20px;}
header.fixed .content {background:#FFF; box-shadow:0 10px 8px -10px rgba(4, 42, 52, .1);}
header.fixed .nav a, header.fixed .nav a span {color:#002A34;}
header.fixed .nav a:hover {color:#55B9E9;}
header.fixed .nav li:last-child a {background:#FDD900;}
header.fixed .nav li:last-child a:hover {background:#55B9E9; color:#FFF;}
header.fixed h1 a {background:url(img/layout/logo-dark.svg) no-repeat; background-size:100% auto;}

header.fixed .content:before {background:#FFF; top:-20px; transition:all 200ms ease-out 300ms;}

/* Hero */
#hero {background:#002A34; color:#FFF; padding-top:180px;}

#hero .wrapper {position:relative; display:flex; justify-content:flex-end; max-width:1200px;}

#hero .text {position:absolute; left:100px; top:36%; transform:translateY(-36%); z-index:5;}
#hero .text h2 {font-size:64px; line-height:72px;}
#hero .text .know-more {display:inline-block; background:#55B9E9; color:#002A34; padding:0 45px; border-radius:56px; font-size:14px; line-height:56px; margin-top:40px;}
#hero .text .know-more:hover {background:#FDD900;}

#hero .image {position:relative; margin-bottom:-230px;}
#hero .image .wrap {width:688px; height:688px; overflow:hidden; border-radius:100%; position:relative;}
#hero .image .wrap img {position:absolute; top:50%; left:50%; min-height:100%; max-width:none; width:100%; transform:translate(-50%, -50%);}
#hero .image .yellow-circle:nth-of-type(1) {top:116px; right:15px; animation:circleone 10s ease-in-out infinite alternate;}
#hero .image .yellow-circle:nth-of-type(2) {top:-16px; left:224px; animation:circletwo 12.5s ease-in-out infinite alternate;}
#hero .image .yellow-circle:nth-of-type(3) {bottom:192px; left:70px; animation:circlethree 12s ease-in-out infinite alternate;}

@keyframes circleone {
    0% {transform:translate(0, 0);}
    100% {transform:translate(18px, 55px);}
}

@keyframes circletwo {
    0% {transform:translate(0, 0);}
    100% {transform:translate(75px, -10px);}
}

@keyframes circlethree {
    0% {transform:translate(0, 0);}
    100% {transform:translate(-47px, 45px);}
}

/* Sobre */
#about {margin-top:230px; margin-bottom:200px;}
#about .wrapper {justify-content:space-between;}
#about .title {width:42%; position:relative;}
#about .text {width:48%; font-size:16px; line-height:40px; color:#667F85;}
#about h3 {padding-left:0;}
#about h4 {font-size:13px; margin-top:-30px; margin-bottom:10px;}
#about h4 span {color:#55B9E9;}
#about .yellow-circle {left:80px; bottom:53px; z-index:-1}

/* Serviços */
#services {background:#FDD900;}

.accordion {margin-top:70px;}

.accordion .info {padding:80px 0; position:relative; border-radius:38px; cursor:pointer; transition:all 250ms ease-out;}
.accordion .info:first-child:before {display:none;}
.accordion .info:before {content:''; position:absolute; top:0; left:32px; right:32px; height:2px; background:#F2C600; transition:background 200ms ease-out;}

.accordion .show-content {position:relative; padding-left:100px;}
.accordion .show-content em {position:absolute; top:10px; left:32px; font-style:normal; color:#002A34; opacity:.3;}
.accordion .show-content h4 {font-size:32px; line-height:64px;}
.accordion .show-content .open-icon {position:absolute; top:0; right:32px; width:64px; height:64px; border-radius:50%; border:2px solid #F2C600; text-indent:-99999px; background:url(img/layout/icon-plus.svg) no-repeat center; transition:all 250ms ease-out;}

.accordion .info:hover {background:#fde33f;}
.accordion .info:hover:before {background:transparent;}
.accordion .info:hover + .info:before {background:transparent;}
.accordion .info:hover .open-icon {background:#002A34 url(img/layout/icon-plus-white.svg) no-repeat center; border-color:#002A34;}

.accordion .content {display:none; padding:10px 140px 0 100px; font-size:16px; line-height:40px; color:#647946;}
.accordion .content img {float:right; border-radius:50%; margin-top:-100px; margin-left:70px;}
.accordion .content p {max-width:520px;}

.accordion .info.opened .content {display:block;}
.accordion .info.opened {background:#FFE964;}
.accordion .info.opened:before {background:transparent;}
.accordion .info.opened + .info:before {background:transparent;}
.accordion .info.opened .show-content .open-icon {background:#F2C600 url(img/layout/icon-minus.svg) no-repeat center; border-color:#F2C600;}
.accordion .info.opened:hover .open-icon {background:#002A34 url(img/layout/icon-minus-white.svg) no-repeat center; border-color:#002A34;}

/* Depoimentos */
#testimonials {background:#55B9E9; margin-top:32px;}
#testimonials .content {display:flex; justify-content:space-between; margin-top:25px;}

#testimonials .left {width:67%; background:#60c3f2; border-radius:38px; padding:44px 10px;}
#testimonials .left .meta {position:relative; color:#FFF; margin-bottom:50px;}
#testimonials .left .meta:before {content:''; position:absolute; bottom:-30px; left:92px; width:31px; height:6px; background:url(img/layout/icon-dots.svg) no-repeat;}
#testimonials .left .thumb {margin-right:32px; box-shadow:0px 10px 20px -4px #002A34; float:left;}
#testimonials .left .thumb:before {content:''; position:absolute; top:-3px; left:-3px; right:-3px; bottom:-3px; border-radius:50%; background:#FFF;}
#testimonials .left h4 {font-size:24px; margin-top:5px;}
#testimonials .left .text {padding-left:14%; padding-right:8%; background:url(img/layout/icon-quote.svg) no-repeat; line-height:38px; color:#2b6983;}

#testimonials .left li {padding:0 22px;}

#testimonials .right {width:29%; background:#60c3f2; border-radius:38px; padding:44px 30px;}
#testimonials .thumb {width:60px; height:60px; border-radius:50%; position:relative;}
#testimonials .thumb img {width:100%; height:auto; border-radius:50%; position:relative;}

#testimonials .right li {display:flex; align-items:center; font-size:14px; line-height:14px; margin-bottom:10px; cursor:pointer; transition:all 250ms ease-out;}
#testimonials .right li:hover {color:#FFF;}
#testimonials .right li:last-child {margin-bottom:0;}
#testimonials .right li .thumb {width:48px; height:48px; margin-right:16px; flex-shrink:0; transition:all 250ms ease-out;}
#testimonials .right li.active {color:#FFF;}
#testimonials .right li.active .thumb {margin-right:32px; box-shadow:0px 10px 20px -4px #002A34;}
#testimonials .right li.active .thumb:before {content:''; position:absolute; top:-3px; left:-3px; right:-3px; bottom:-3px; border-radius:50%; background:#FFF;}

/* Contato */
#contact {background:#002A34; color:#FFF; margin-top:32px;}

.form {background:#07343F; padding:60px 32px 70px; border-radius:38px; margin:25px 0 50px;}
.form input, .form textarea {display:block; background:#07343F; width:100%; color:#FFF; border-bottom:1px solid #668388; font-size:32px;}
.form .text {height:50px; line-height:50px; margin-bottom:30px;}
.form textarea {height:130px; padding-top:11px;}

.form label.placeholder {display:block; position:relative;}
.form label.placeholder span {position:absolute; font-size:32px; color:#FFF; top:11px; left:2px; transition:all 150ms ease-out;}
.form label.placeholder.focus span {top:-20px; font-size:16px; color:#F2C600;}

.form .submit {float:right; margin-top:20px; background-color:#FDD900; background-position:center; color:#002A34; width:174px; padding:0; border-radius:56px; font-size:14px; line-height:56px; border:0; transition:all 250ms ease-out;}
.form .submit:hover {background-color:#55B9E9;}
.form .submit.loading {background:#FFF url(img/layout/loading.svg) no-repeat center; background-size:100%; text-indent:-99999px; pointer-events:none; cursor:default;}

.security-question {display:inline-block; margin-top:20px; font-size:24px;}
.security-question span {display:inline-block; line-height:50px;}
.security-question input.text {display:inline-block; width:50px; text-align:center; font-size:24px; padding:0 5px; margin:0; border:2px solid #365B63; border-radius:8px;}

.form input.error, .form textarea.error {border-color:#C11F1F;}
.form .obs {display:block; text-align:right; margin-top:20px; font-size:16px;}
.form .obs.hidden {display:none;}

.contact-info {background:#FFF; color:#002A34; padding:60px 32px; border-radius:38px;}
.contact-info ul {display:flex; justify-content:space-around; align-items:center;}
.contact-info li span {display:block; font-size:16px; color:#bac5c8;}
.contact-info li p {font-size:24px; color:#002A34;}
.contact-info li.social a {display:block; text-indent:-99999px; width:48px; height:48px; background:#FFF url(img/layout/icon-instagram.svg) no-repeat center; border:1px solid #002A34; border-radius:50%;}
.contact-info li.social a:hover {background-color:#F2C600; border-color:#F2C600;}

.credits {margin:50px 0 -50px; padding:0 32px; color:#FFF; font-size:12px; display:flex; justify-content:space-between;}
.credits p:last-child {opacity:.5;}
.credits a {color:#FFF; border-bottom:1px solid transparent;}
.credits a:hover {border-color:#FFF;}

/* 404 */
#error404 {background:#002A34; color:#FFF; padding-top:120px; min-height:calc(100vh - 64px); display:flex; justify-content:center; align-items:center; text-align:center;}
#error404 h2 {font-size:50px; line-height:54px; margin-bottom:30px;}
#error404 a {border-bottom:1px solid #FFF; color:#F2C600;}
#error404 a:hover {color:#60c3f2;}

/* Owl Carousel */
.owl-carousel {display:none; width:100%; -webkit-tap-highlight-color:transparent; position:relative; z-index:1;}
.owl-carousel .owl-stage {position:relative; -ms-touch-action:pan-Y; -moz-backface-visibility:hidden;}
.owl-carousel .owl-stage:after {content:"."; display:block; clear:both; visibility:hidden; line-height:0; height:0;}
.owl-carousel .owl-stage-outer {position:relative; overflow:hidden; -webkit-transform:translate3d(0px, 0px, 0px);}
.owl-carousel .owl-wrapper, .owl-carousel .owl-item {-webkit-backface-visibility:hidden; -moz-backface-visibility:hidden; -ms-backface-visibility:hidden; -webkit-transform:translate3d(0, 0, 0); -moz-transform:translate3d(0, 0, 0); -ms-transform:translate3d(0, 0, 0);}
.owl-carousel .owl-item {position:relative; min-height:1px; float:left; -webkit-backface-visibility:hidden; -webkit-tap-highlight-color:transparent; -webkit-touch-callout:none;}
.owl-carousel.owl-loaded {display:block;}
.owl-carousel.owl-loading {opacity:0; display:block;}
.owl-carousel.owl-hidden {opacity:0;}
.owl-carousel.owl-refresh .owl-item {visibility:hidden;}
.owl-carousel.owl-drag .owl-item {-webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;}
.owl-carousel.owl-grab {cursor:move; cursor:-webkit-grab; cursor:grab;}
.no-js .owl-carousel {display:block;}
.owl-carousel .animated {-webkit-animation-duration:1000ms;animation-duration:1000ms; -webkit-animation-fill-mode:both; animation-fill-mode:both;}
.owl-carousel .owl-animated-in {z-index:0;}
.owl-carousel .owl-animated-out {z-index:1;}
.owl-height {-webkit-transition:height 300ms ease-out;transition:height 300ms ease-out;}
.owl-carousel .owl-nav.disabled, .owl-carousel .owl-dots.disabled {display:none;}
.owl-carousel .owl-nav .owl-prev, .owl-carousel .owl-nav .owl-next, .owl-carousel .owl-dot {cursor:pointer; cursor:hand; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;}

/* Temp */
#temp {background:#55B9E9; height:100vh; display:flex; align-items:center; justify-content:center; flex-direction:column;}
#temp img {width:80%; max-width:600px;}
#temp p {color:#FFF; margin-top:50px; font-size:25px;}
#temp a {color:#FFF; border-bottom:1px solid #FFF;}

@media screen and (max-width:1150px){
    #hero .text {left:50px;}
    #hero .text h2 {font-size:5.6vw; line-height:6.3vw;}
    #hero .image .wrap {width:55vw; height:55vw;}
    #hero .yellow-circle {width:8vw; height:8vw;}
}

@media screen and (max-width:1000px){
    h3 {font-size:4.8vw; line-height:7.2vw; max-width:56.5vw;}
    #about .title {width:43%;}
    #about .yellow-circle {left:7vw; top:18vw;}
}

@media screen and (max-width:900px){
    .mobile-check {display:block;}

    header .content {padding:12px 30px;}

    .burger-wrapper {display:flex; align-items:center; position:absolute; top:0; right:0; height:100%; padding:0 25px; cursor:pointer;}
	.burger {display:block; width:56px; height:56px; position:relative; z-index:1; transform:rotate(0deg); cursor:pointer; border-radius:100%; background:#FFF;}
	.burger span {display:block; position:absolute; height:2px; width:20px; background:#002a34; border-radius:2px; opacity:1; left:18px; transform:rotate(0deg); transition:all 200ms ease-out;}
	.burger span:nth-child(1) {top:22px;}
	.burger span:nth-child(2), .burger span:nth-child(3) {top:28px;}
	.burger span:nth-child(4) {top:34px;}
	.burger.open span:nth-child(1), .burger.open span:nth-child(4) {background:#FFF; width:0px; opacity:0; left:28px;}
	.burger.open span:nth-child(2) {transform:rotate(45deg);}
    .burger.open span:nth-child(3) {transform:rotate(-45deg);}
    
    header .nav {display:none; position:fixed; top:0; left:0; bottom:0; right:0; background:#002a34; flex-direction:column; justify-content:center;}
    header .nav.open {display:flex;}
    header .nav li {font-size:7vw; line-height:8vw;}
    #wrap header .nav li a {padding:0 0 0 62px; margin:0; color:#FFF;}
    #wrap header .nav li a:hover {color:#60c3f2;}
    header .nav li:nth-child(2) {margin:5.5vw 0;}
    header .nav li:last-child a {background:transparent !important; color:#FFF;}
    header .nav a span {position:relative; vertical-align:middle; top:-15px; right:5px; font-size:1.5vw; color:#667F85}

    header.fixed {top:8px;}
    header.fixed.open h1 a {background:url(img/layout/logo-white.svg) no-repeat;}
    
    #hero .text {left:25px;}
    #hero .text h2 {font-size:6.5vw; line-height:6.3vw;}
    #hero .image {margin-bottom:-180px;}
    #hero .image .wrap {width:50vw; height:50vw;}
    #hero .yellow-circle {width:7vw; height:7vw;}
    #hero .image .yellow-circle:nth-of-type(1) {right:0;}
    #hero .image .yellow-circle:nth-of-type(2) {left:120px;}
    #hero .image .yellow-circle:nth-of-type(3) {bottom:100px;}

    .rounded-rect {padding-top:60px; padding-bottom:32px;}

    .accordion .info {padding:60px 0;}

    #testimonials .content {flex-direction:column;}
    #testimonials .content .left {order:2; width:100%;}
    #testimonials .content .right {width:100%; margin-bottom:30px;}
    #testimonials .right ul {display:flex; justify-content:space-around;}
    #testimonials .right li {display:inline-block; margin:0;}
    #testimonials .right li p {display:none;}
    #testimonials .right li .thumb {margin:0;}
    #testimonials .right li.active .thumb {margin:-12px 0 0 0;}

    .contact-info {padding:52px 32px 32px;}
    .contact-info ul {flex-direction:column; text-align:center;}
    .contact-info ul li:nth-child(2) {padding:25px 0 35px;}
    .credits {margin:25px 0 0;}
}

@media screen and (max-width:770px){
    #hero {padding-bottom:80px;}
    #hero .wrapper {flex-direction:column; align-items:center; text-align:center;}
    #hero .text {position:static; order:2; transform:none;}
    #hero .text h2 {font-size:8.4vw; line-height:9.5vw;}
    #hero .image {margin:0 0 35px;}
    #hero .image .wrap {width:70vw; height:70vw;}
    #hero .yellow-circle {width:9vw; height:9vw;}

    h3 {max-width:none; font-size:6.6vw; line-height:9.4vw; padding:0 30px;}

    #about {margin:150px 0;}
    #about .wrapper {display:block; padding:0 20px;}
    #about .title {width:100%; margin-bottom:48px;}
    #about .yellow-circle {left:auto; right:18vw; width:11vw; height:11vw;}
    #about .text {width:100%;}
}

@media screen and (max-width:650px){
    .rounded-rect {padding:60px 15px 32px;}

    #about {margin:100px 0;}

    .accordion {margin-top:45px;}
    .accordion .info {padding:50px 0;}
    .accordion .show-content {padding-left:50px;}
    .accordion .show-content h4 {padding-right:80px; line-height:50px;}
    .accordion .show-content em {left:15px;}
    .accordion .show-content .open-icon {right:15px;}
    .accordion .content {padding:10px 80px 0 50px;}

    .credits {display:block; text-align:center;}
}

@media screen and (max-width:500px){
    #wrap {padding:10px;}
    h3 {font-size:8.6vw; line-height:11.4vw; padding:0 30px;}
    .rounded-rect {padding:45px 10px 10px; border-radius:45px;}

    header {top:35px; padding:0 10px;}
    header .nav {padding-top:25vw;}
    header .nav li {font-size:10vw; line-height:11vw;}
    #wrap header .nav li a {padding:0 0 0 32px;}
    header .nav a span {display:none;}

    #hero {padding-top:150px;}
    #hero .yellow-circle {width:10vw; height:10vw;}
    #hero .text h2 {font-size:9.4vw; line-height:10.5vw; padding:0 15px;}
    #hero .text h2 br {display:none;}
    #hero .image .wrap {width:75vw; height:75vw;}
    #hero .image .yellow-circle:nth-of-type(2) {top:-8px; left:90px;}
    #hero .image .yellow-circle:nth-of-type(3) {bottom:75px;}

    #about .title {margin-bottom:30px;}
    #about .yellow-circle {right:12vw; top:21vw;}

    .accordion .show-content h4 {font-size:7vw; line-height:8.2vw;}
    .accordion .show-content .open-icon {width:50px; height:50px;}
    .accordion .content p {line-height:28px;}

    #testimonials .left li {padding:0 12px;}
    #testimonials .left .thumb {margin-right:15px;}
    #testimonials .left .text {padding:0 3% 0 6%; background-size:38px;}

    .form {padding:35px 15px 60px;}
    .security-question {width:100%; text-align:center; margin-top:50px;}
    .form .submit {float:none; margin:35px auto 0;}
    .form .obs {text-align:center;}

    .contact-info li p {word-break:break-word; padding:45px 15px 30px;}
    .credits {margin-bottom:15px;}

    #error404 {min-height:calc(100vh - 20px);}
}

@media screen and (max-width:900px) and (max-height:500px){
    header .nav li {font-size:4.8vw; line-height:4.8vw;}
    header .nav li:nth-child(1) {margin-top:auto;}
    header .nav li:nth-child(2) {margin:2vh 0;}
    header .nav li:nth-child(3) {margin-bottom:5vh;}
}