.header { background: rgb(255, 255, 255); background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 25%, rgba(0, 112, 255, 1) 25%, rgba(70, 162, 255, 1) 40%, rgba(0, 112, 255, 1) 44%, rgba(5, 116, 255, 1) 52%, rgba(70, 162, 255, 1) 77%, rgba(0, 112, 255, 1) 100%); position: fixed; width: 100%; z-index: 11; margin-top: -20px; box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, .1); } .header ul { margin: 0; padding: 25px 0; list-style: none; overflow: hidden; background-color: rgba(255, 255, 255, 0); margin-right: 125px; } .header li { margin: 0 10px; } .white-blue { color: white; } .header li a { display: block; padding: 20px 20px; text-decoration: none; transition: all 0.25s ease-in-out; font-family: 'AllRoundGothicW01-Book'; font-size: 22px; margin-top: 5px; } .header li a:hover, .header .menu-btn:hover { color: rgb(250, 97, 9); } .header .logo { display: block; float: left; font-size: 2em; padding: 10px 20px; text-decoration: none; } .logo { margin-left: 125px; width: 225px; margin-top: 15px; } /* menu */ .header .menu { clear: both; max-height: 0; transition: max-height .2s ease-out; } /* menu icon */ .header .menu-icon { cursor: pointer; display: inline-block; float: right; padding: 40px 40px; position: relative; user-select: none; } .header .menu-icon .navicon { margin-top: 30px; background: #343884; display: block; height: 3px; position: relative; transition: background .2s ease-out; width: 25px; } .header .menu-icon .navicon:before, .header .menu-icon .navicon:after { background: #343884; content: ''; display: block; height: 100%; position: absolute; transition: all .2s ease-out; width: 100%; } .header .menu-icon .navicon:before { top: 6px; } .header .menu-icon .navicon:after { top: -6px; } .ajustar-img { width: 121.5%; } /* menu btn */ .header .menu-btn { display: none; } .header .menu-btn:checked~.menu { max-height: 350px; } .header .menu-btn:checked~.menu-icon .navicon { background: transparent; } .header .menu-btn:checked~.menu-icon .navicon:before { transform: rotate(-45deg); } .header .menu-btn:checked~.menu-icon .navicon:after { transform: rotate(45deg); } .header .menu-btn:checked~.menu-icon:not(.steps) .navicon:before, .header .menu-btn:checked~.menu-icon:not(.steps) .navicon:after { top: 0; } #link1 { margin-top: 15px; } #link2, #link3, #link4 { margin-top: 15px; } #covid { margin-top: 15px; } @media (max-width: 1516px) { .header ul { margin-right: 100px; } .header li { margin: 0 9px; } } @media (max-width: 1480px) { .header ul { margin-right: 90px; } .header li { margin: 0 7.5px; } } @media (max-width: 1454px) { .header ul { margin-right: 80px; } .header li { margin: 0 5px; } .logo { margin-left: 110px; } } @media (max-width: 1404px) { .header ul { margin-right: 70px; } .header li { margin: 0 3.5px; } .logo { margin-left: 100px; } } @media (max-width: 1370px) { .header ul { margin-right: 60px; } .header li { margin: 0 2.5px; } .logo { margin-left: 80px; } .header li a { padding: 20px 100px; } } @media (max-width: 1328px) { .header li { margin: 0 1.5px; } .logo { margin-left: 60px; } .header li a { padding: 20px 80px; } } @media (max-width: 1300px) { .header ul { margin-right: 40px; } .header li { margin: 0 0; } .logo { margin-left: 50px; } .header li a { padding: 20px 50px; } } @media (max-width: 1254px) { .header ul { margin-right: 20px; } .logo { margin-left: 40px; } .header li a { padding: 20px 20px; } } @media (max-width: 1224px) { .header ul { margin-right: 0; } .logo { margin-left: 30px; width: 200px; } .header li a { padding: 20px 0; } } @media (max-width: 1224px) { .logo { margin-left: 20px; width: 150px; margin-top: 12.5px; } } @media (min-width: 1112px) { .header li { float: left; } .header li a { padding: 20px 30px; } .header .menu { clear: none; float: right; max-height: none; } .header .menu-icon { display: none; } } @media (max-width: 1111px) { .header { margin-top: -50px; flex-wrap: wrap; background: rgb(255, 255, 255); } .header li a { margin-top: -15px; /* margin-bottom: -15px; */ padding-bottom: 20px; font-size: 18px; } .header ul { padding: 0px; } #link1 { margin-top: 5px; } #link2, #link3, #link4 { margin-top: 1px; } .header .logo { padding-top: 55px; } .header .menu-icon { /* padding: 70px 40px; */ padding: 63px 40px 0px; } .padb { padding-bottom: 10px; } .white-blue { padding-left: 50px !important; color: rgba(0, 112, 255, 1); } .ajustar-img { width: 136.5%; } }