@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,700'); .burger-menu_button_2 { position: fixed; top: 13px; right: 10px; z-index: 30; width: 46px; height: 46px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.5); -webkit-transition: 0.4s; -moz-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; } .burger-menu_button_2:hover .burger-menu_lines_2 { filter: brightness(0.7); } .burger-menu_button_2:hover { background-color: rgba(255, 255, 255, 0.7); } .burger-menu_lines_2::before, .burger-menu_lines_2::after, .burger-menu_lines_2 { position: absolute; width: 40px; height: 3px; background-color: #35a8df; -webkit-transition: 0.4s; -moz-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; } .burger-menu_lines_2 { top: 50%; left: 50%; transform: translate(-50%, -50%); } .burger-menu_lines_2::before { content: ''; top: -12px; } .burger-menu_lines_2::after { content: ''; top: 12px; } .burger-menu_active_2 .burger-menu_lines_2 { background-color: transparent; } .burger-menu_active_2 .burger-menu_lines_2::before { top: 0; transform: rotate(45deg); } .burger-menu_active_2 .burger-menu_lines_2::after{ top: 0; transform: rotate(-45deg); } .burger-menu_nav_2 { padding-top: 120px; position: fixed; top: 0; z-index: 20; display: flex; flex-flow: column; height: 100%; background-color: #ffffff; overflow-y: auto; right: -100%; -webkit-transition: 0.8s; -moz-transition: 0.8s; -o-transition: 0.8s; transition: 0.8s; } .burger-menu_active_2 .burger-menu_nav_2 { right: 0; -webkit-transition: 0.4s; -moz-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; } .burger-menu_link_2 { padding: 18px 35px; font-family: 'Roboto', sans-serif; font-size: 18px; text-decoration: none; text-transform: uppercase; letter-spacing: 5px; font-weight: 400; color: #35a8df; border-bottom: 1px solid #fff; } .burger-menu_link_2:first-child { border-top: 1px solid #fff; } .burger-menu_link_2:hover { filter: brightness(0.9); } .burger-menu_overlay_2 { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 10; } .burger-menu_active_2 .burger-menu_overlay_2 { display: block; background-color: rgba(0, 0, 0, 0.5); } @media (max-width: 768px) { .burger-menu_2, #burger-menu-icon { display: none; } } /*-------ICON-------ICON-------ICON-------ICON-------ICON-------ICON-------ICON-------ICON-------ICON-------ICON-------ICON-------ICON-------ICON-------ICON*/ /*-------ICON-------ICON-------ICON-------ICON-------ICON-------ICON-------ICON-------ICON-------ICON-------ICON-------ICON-------ICON-------ICON-------ICON*/ /*-------ICON-------ICON-------ICON-------ICON-------ICON-------ICON-------ICON-------ICON-------ICON-------ICON-------ICON-------ICON-------ICON-------ICON*/ /* GRID */ .twelve_icon { width: 100%; } .eleven_icon { width: 91.53%; } .ten_icon { width: 83.06%; } .nine_icon { width: 74.6%; } .eight_icon { width: 66.13%; } .seven_icon { width: 57.66%; } .six_icon { width: 49.2%; } .five_icon { width: 40.73%; } .four_icon { width: 32.26%; } .three_icon { width: 23.8%; } .two_icon { width: 15.33%; } .one_icon { width: 6.866%; } /* COLUMNS */ .col_icon { display: block; float:left; margin: 1% 0 1% 1.6%; } .col_icon:first-of-type { margin-left: 0; } .container_icon{ display: inline-block; margin: 0 auto; position: relative; text-align: center; } /* CLEARFIX */ .cf_icon:before, .cf_icon:after { content: " "; display: table; } .cf_icon:after { clear: both; } .cf_icon { *zoom: 1; } /* ALL */ .row_icon { cursor: pointer; } .row_icon .three_icon{ } .hamburger_icon .line_icon{ width: 50px; height: 5px; background-color: #fee900; display: block; margin: 8px auto; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .hamburger_icon:hover{ cursor: pointer; } /* SEVEN */ #hamburger-7_icon.is-active_icon .line_icon:nth-child(1){ width: 30px; } #hamburger-7_icon.is-active_icon .line_icon:nth-child(2){ width: 40px; } #hamburger-7_icon.is-active_icon .line_icon{ -webkit-transform: rotate(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg); transform: rotate(30deg); }