.site { transition: all 0.3s ease; } .site-header { .header-content > .container { padding-top: 62px; padding-bottom: 68px; display: flex; justify-content: space-between; flex-flow: row wrap; position: relative; transition: all 0.3s ease; } } .header-content { background: $color__white; top: 0; left: 0; width: 100%; z-index: 1; border-bottom: 1px solid $color__border; box-shadow: 3px 0px 7px rgba(0, 0, 0, 0.1); position: relative; } .site-branding { align-self: center; margin-left: 37px; img { transition: all 0.3s; } } .site-logo { display: flex; flex-flow: row wrap; align-items: center; .site-title { @include font-size(2.1); font-weight: 700; margin: 0 0 2px; word-wrap: break-word; a { color: $color__black; font-weight: 300; font-size: 36px; &:hover, &:focus, &:active { text-decoration: none; outline: none; } } } .site-description { margin: 0; word-wrap: break-word; font-weight: 400; @include font-size(1.4); text-transform: uppercase; padding-top: 11px; opacity: 0.5; letter-spacing: 0.1em; } } .custom-logo-link { margin-bottom: 0; margin-right: 60px; } .site-identify { flex: 1 0 auto; line-height: 1.2; } .site-address { width: 248px; border-left: 1px solid #ebebeb; height: 73px; margin-top: 3px; padding-left: 20px; i { font-size: 24px; color: $color__main; float: left; margin-top: 7px; } .address { font-weight: 600; @include font-size(1.1); text-transform: uppercase; color: $color__black; margin-left: 37px; line-height: 1.8; letter-spacing: 0.05em; } p { margin-bottom: 0; } } .header-info { margin-left: 16px; margin-top: 8px; i { font-size: 24px; color: $color__main; float: left; margin-top: -2px; } .address { font-weight: 600; @include font-size(1.1); text-transform: uppercase; color: $color__black; margin: 0; margin-left: 43px; letter-spacing: 0.05em; line-height: 1.8; } } .site-info { width: 200px; border-left: 1px solid #ebebeb; height: 73px; .site-phone { height: 29px; border-bottom: 1px solid #ebebeb; } .site-email { height: 33px; } } .collapse { display: none; } @media(max-width: 1023px) { .site-branding { margin-left: 0; } } @media(max-width: 991px) { .site-header { .header-content > .container { padding-top: 35px; padding-bottom: 35px; } } .site-address { display: none; } .site-info { display: none; } .menu-toggle { display: block; border-radius: 100px; padding: 0px 35px; background-color: $color__main; color: $color__white; height: 46px; margin-top: 20px; &:hover { background-color: $color__main; } &:focus { background-color: $color__main; outline: none; color: $color__white; } } } @media(max-width: 767px) { .site-header { .header-content > .container { flex-flow: column wrap; } } .site-logo .site-title { margin: 0; text-align: center; } .menu-toggle { line-height: 1.9; margin-top: 35px; margin-bottom: 10px; padding: 0 12px; width: 25%; margin-left: 40%; &:before { @include font-size(2); } } } @media ( max-width: 575px) { .site-title.site-title a { @include font-size(2.5); } } @media ( max-width: 480px ) { .site-header { .header-content > .container { padding-top: 30px; padding-bottom: 30px; display: flex; align-items: center } } .site-logo { flex-direction: column; } .menu-toggle { width: 50%; margin-left: 0; margin-top: 35px; padding: 8px; } .site-branding { img { margin-left: 25%; } } }