.TopMain { width: 100%; display: flex; flex-direction: column; align-items: center; /*padding: 15px 0;*/ background: white; box-shadow: 0 0 8px 0 rgb(0,0,0,0.1); border-bottom: solid 1px rgba(0,0,0,0.1); } @media (max-width: 992px) { .TopMain { display: none; padding: 15px 0 5px 0; border-bottom: solid 1px rgba(255,255,255,0.05); } } .navMain { width: 100%; display: grid; grid-template-columns: 0.65fr 1.35fr; grid-gap: 25px; padding: 8px 0px; } .navMain.navMainAlt { grid-template-columns: 1fr; padding: 5px 0; } .navMainSec { width: 100%; flex-grow: 1; display: flex; flex-direction: row; } .navMainSecLogo { transition: ease 0.4s; display: flex; flex-direction: row; grid-gap: 20px; align-items: center; } .navMainSecLogo:hover > .navMainSecLogoText { transition: ease 0.4s; opacity: 1; } .navMainSecLogo:hover > .navMainSecLogoImgWrapper > .navMainSecLogoImg { transition: ease 0.4s; opacity: 0; } .navMainSecLogo:hover > .navMainSecLogoImgWrapper > .navMainSecLogoImgAlt { transition: ease 0.4s; opacity: 1; } .navMainSecLogoImg { transition: ease 0.4s; position: absolute; opacity: 0.5; } .navMainSecLogoImgWrapper { width: 50px; height: 50px; position: relative; display: flex; align-items: center; } .navMainSecLogoText { transition: ease 0.4s; font-weight: 800; font-size: 24px; opacity: 0.5; color: #ff9900; line-height: 1; } .navMainSecLinks { width: 100%; display: flex; flex-direction: row; grid-gap: 20px; align-items: center; justify-content: center; /*justify-content: space-around;*/ } @media (max-width: 992px) { .navMainSecLinks { flex-direction: column; } } .navMainSecLinksLink { font-size: 18px; padding: 8px 15px; white-space: nowrap; font-weight: 600; width: 100%; text-align: center; } .navMainSecLinksLink:hover { transition: ease 0.2s; color: #ff9900; } @media (max-width: 992px) { .navMainSecLinksLink { padding: 15px 10px; font-size: 18px; } } .navMainSecLinksLinkWrapper { transition: ease 0.2s; display: flex; flex-direction: column; justify-content: center; align-items: center; font-weight: 400; opacity: 0.5; } @media (max-width: 992px) { .navMainSecLinksLinkWrapper { width: 100%; } } .navMainSecLinksLinkWrapper:hover { opacity: 1; } .navMainSecLinksSocial { display: flex; flex-direction: row; justify-content: end; align-items: center; flex-grow: 1; grid-gap: 10px; } @media (max-width: 992px) { .navMainSecLinksSocial { align-items: center; } } .navMainSecLinksSocialLink { transition: ease 0.2s; padding: 15px; opacity: 0.75; display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 24px; color: rgba(0,0,0,0.5); } @media (max-width: 992px) { .navMainSecLinksSocialLink { padding: 10px; } } .navMainSecLinksSocialLink:hover { transition: ease 0.2s; opacity: 1; } .navMainSecLinksSocialLinkInside { width: 25px; height: 25px; } .navMainSecLogoImg.navMainSecLogoImgAlt { opacity: 0; } .navMainSec.navMainSecMid { width: 100%; } @media (max-width: 992px) { .navMainSec.navMainSecMid { grid-column-start: 1; grid-column-end: 3; } } .TopMain.TopMainMobile { display: none; padding: 10px 0; } @media (max-width: 992px) { .TopMain.TopMainMobile { display: flex; } } .navMain.navMainMobile { display: flex; flex-direction: row; } .navMainSec.navMainSecMobile { width: unset; flex-grow: unset; } .btnMain.navMainSecLinksSocialBurger { padding: 10px 20px; font-size: 24px; border: solid 1px rgba(0,0,0,0.1); background: white; color: rgba(0,0,0,0.5); } .btnMain.navMainSecLinksSocialBtn { padding: 8px 15px; } .navMainWrapper { width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; border-bottom: solid 1px rgba(0,0,0,0.1); }