ok
Direktori : /proc/self/root/home/importfo/public_html/inddigmedia.in/css/ |
Current File : //proc/self/root/home/importfo/public_html/inddigmedia.in/css/primary-menu.css |
/* Item name: primary-menu - Responsive Megamenu Author: marcoarib - marco.arib@gmail.com License: http://codecanyon.net/licenses */ /* CONTENTS: 1 - MENU CONTAINER - Scrollable menu 2 - BRAND 3 - MENU - Right alignment - Menu items - Active/hover state 4 - DROPDOWN - Dropdown items - Hover state - Dropdown left alignment 5 - DROPDOWN/MEGAMENU INDICATORS 6 - MEGAMENU 7 - MEGAMENU WIDTHS - Half width - Quarter width 8 - GRID SYSTEM 9 - SHOW/HIDE BUTTON (MOBILE MODE) - Icon 10 - ICONS (parent menu items) 11 - SEARCH FIELD - Form - Input 12 - VERTICAL TABS 13 - COLOR SCHEMES 14 - MOBILE MODE (RESPONSIVE MODE) - Menu container - Brand - Show/hide button - Menu - Dropdown - Dropdown items - Dropdown/megamenu indicators - Megamenu - Search field */ /* 1 - MENU CONTAINER ======================================*/ .primary-menu, .primary-menu *{ box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; } @media (max-width: 980px) { .primary-menu{ padding: 14px 0; } } .primary-menu a{ -webkit-transition: color .3s linear, background .3s linear; transition: color .3s linear, background .3s linear; } /* scrollable menu */ .primary-menu-menu.scrollable > .scrollable-fix{ display: none; } /* 2 - BRAND ======================================*/ .primary-menu-brand{ margin: 18px 30px 0 0; float: left; color: #666; text-decoration: none; font-size: 24px; font-weight: 600; line-height: 1.3; cursor: pointer; } /* 3 - MENU ======================================*/ .primary-menu-menu{ margin: 0; padding: 0; float: left; list-style: none; } /* Right alignment */ .primary-menu-menu.primary-menu-right{ float: right; } /* Menu items */ .primary-menu-menu > li{ display: inline-block; padding: 10px 13px; position: relative; vertical-align: middle; } @media (max-width: 980px) { .primary-menu-menu > li{ padding: 0 10px; } } .primary-menu-menu > li > a{ position: relative; font-size: 17px; text-transform: capitalize; font-weight: 500; -webkit-transition:all .3s ease; transition: all .3s ease; margin-right: 3px; } @media (max-width: 1200px) { .primary-menu-menu > li > a { font-size: 14px; } } .primary-menu-menu > li > a:before { content: ''; display: block; width: 80%; height: 2px; background-color: #4cc2c0; position: absolute; right: 0; bottom: -10px; opacity: 0; -webkit-transition:all .3s linear; transition: all .3s linear; } .primary-menu-menu > li > a:after { content: ''; display: block; position: absolute; width: 15%; height: 2px; background-color: #4cc2c0; left: 0; bottom: -10px; opacity: 0; -webkit-transition:all .3s linear; transition: all .3s linear; } .primary-menu-menu > li:hover > a:after, .primary-menu-menu > li:hover > a:before { opacity: 1; } /* Active/hover state (Menu items) */ .primary-menu-menu > li.active > a, .primary-menu-menu > li:hover > a, .primary-menu-menu > li:hover > i { color: #4cc2c0; } .primary-menu-menu > li > i { font-size: 10px; } .primary-menu-responsive .primary-menu-menu > li > i { display: none; } @media (max-width: 1023px) { .primary-menu-responsive .primary-menu-menu > li:hover > a:after, .primary-menu-responsive .primary-menu-menu > li:hover > a:before { display: none; } } .primary-menu-menu > li.has-megamenu { position: static; } .no-menu-box{ font-size: 14px; } /* 4 - DROPDOWN ======================================*/ .primary-menu-menu ul.dropdown, .primary-menu-menu ul.dropdown li ul.dropdown{ position: absolute; z-index: 9999; left: -25px; margin-top: 0; min-width: 400px; top: 100%; background-color: #ffffff; padding: 20px 0 30px; -webkit-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 15px 15px 30px rgba(0, 0, 0, 0.16); box-shadow: 15px 15px 30px rgba(0, 0, 0, 0.16); list-style: none; display: none; } @media (max-width: 1023px) { .primary-menu-menu ul.dropdown, .primary-menu-menu ul.dropdown li ul.dropdown { -webkit-box-shadow: none; box-shadow: none; padding: 10px 0 10px; } } .primary-menu-menu ul.dropdown a i, .primary-menu-menu > li.has-megamenu .megamenu ul > li a i { margin-left: 10px; opacity: 0; -webkit-transition:all .4s ease; transition: all .4s ease; font-size: 12px; color: #e1e1e1; text-align: center; } .primary-menu-menu ul.dropdown a:hover > i, .primary-menu-menu > li.has-megamenu .megamenu ul > li a:hover i { opacity: 1; color: #4cc2c0; } .primary-menu-menu ul.dropdown li ul.dropdown{ left: -webkit-calc(100% - 5px); left: calc(100% - 5px); top: -20px; } /* Dropdown items */ .primary-menu-menu ul.dropdown li{ clear: both; width: 100%; border: 0 none; font-size: 12px; position: relative; } .primary-menu-menu ul.dropdown li a { font-family: "Lato", sans-serif; font-size: 16px; font-weight: 400; padding: 10px 40px 10px 40px; position: relative; color: #acacac; -webkit-transition:all .4s ease-out; transition: all .4s ease-out; display: block; } @media (max-width: 640px) { .primary-menu-menu ul.dropdown li a { padding: 10px; } } .primary-menu-menu ul.dropdown li.hover-ver2 i { font-size: 24px; opacity: 1; margin-right: 15px; margin-left: 0; vertical-align: middle; } .primary-menu-menu ul.dropdown li.hover-ver2 a:before { content: ''; display: block; height: 100%; width: 3px; position: absolute; left: 0; top: 0; background-color: #4cc2c0; opacity: 0; -webkit-transition:all .3s ease; transition: all .3s ease; } .primary-menu-menu ul.dropdown li.hover-ver2 a:hover:before { opacity: 1; } .primary-menu-menu > li.has-megamenu .megamenu ul > li a { font-family: "Lato", sans-serif; font-size: 16px; font-weight: 400; padding: 10px 0; position: relative; color: #acacac; -webkit-transition:all .4s ease-out; transition: all .4s ease-out; display: block; } .primary-menu-menu > li.has-megamenu .megamenu ul > li:hover a { color: #4cc2c0; } .primary-menu-menu ul.dropdown li.menu-item-has-children > a > i { opacity: 0; } .primary-menu-menu ul.dropdown li.menu-item-has-children.hover-ver2 > a > i { opacity: 1; } /* Hover state (dropdown items) */ .primary-menu-menu ul.dropdown li:hover > a{ color: #4cc2c0; -webkit-transition:all .3s ease; transition: all .3s ease; } /* Dropdown left alignment */ .primary-menu-menu ul.dropdown.dropdown-left{ left: auto; right: 0; } .primary-menu-menu ul.dropdown li ul.dropdown.dropdown-left{ left: -100%; right: auto; } /* 5 - DROPDOWN/MEGAMENU INDICATORS ======================================*/ .primary-menu-menu li .indicator{ color: #acacac; font-family: "FontAwesome"; font-size: 10px; margin-left: 6px; } .primary-menu-menu li ul.dropdown li .indicator{ position: absolute; top: 13px; right: 20px; font-size: 15px; -webkit-transition:all .3s ease; transition: all .3s ease; } .primary-menu-menu li ul.dropdown li:hover > a .indicator{ color: #4cc2c0; } .primary-menu-menu > li:hover > a > .indicator { color: #4cc2c0;; } /* 6 - MEGAMENU ======================================*/ .primary-menu-menu > li > .megamenu { width: 100%; padding: 30px 30px 20px; left: 0; position: absolute; display: none; z-index: 99; background: #fff; top: 53px; background-position: right bottom; background-repeat: no-repeat; -webkit-box-shadow: 15px 15px 30px rgba(0, 0, 0, 0.16); box-shadow: 15px 15px 30px rgba(0, 0, 0, 0.16); -webkit-border-radius: 5px; border-radius: 5px; } @media (max-width: 1200px) { .primary-menu-menu > li.has-megamenu > .megamenu{ top: auto; } } .primary-menu-menu > li > .megamenu ul { list-style: none; padding-left: 0; } .primary-menu-menu > li > .megamenu .google-logo { margin-bottom: 15px; } .primary-menu-menu > li > .megamenu .google-text { font-size: 14px; color: #acacac; } .primary-menu-menu > li > .megamenu .megamenu-item-info .megamenu-item-info-title, .primary-menu-menu > li > .dropdown .megamenu-item-info .megamenu-item-info-title { margin-bottom: 10px; line-height: 1.2; } .primary-menu-menu > li > .megamenu .megamenu-item-info .megamenu-item-info-text, .primary-menu-menu > li > .dropdown .megamenu-item-info .megamenu-item-info-text { font-size: 14px; color: #ccc; line-height: 1.3; } .primary-menu-menu > li > .dropdown .megamenu-item-info { padding: 10px 40px 0; } /* 7 - MEGAMENU WIDTHS ======================================*/ /* Half width */ .primary-menu-menu > li > .megamenu.megamenu-half-width{ width: 50%; left: auto; } /* Quarter width */ .primary-menu-menu > li > .megamenu.megamenu-quarter-width{ width: 25%; left: auto; } /* 8 - GRID SYSTEM ======================================*/ .primary-menu-menu > li > .megamenu .megamenu-row{ width: 100%; margin-top: 15px; } .primary-menu-menu > li > .megamenu .megamenu-row:first-child { margin-top: 0; } .primary-menu-menu > li > .megamenu .megamenu-row:before, .primary-menu-menu > li > .megamenu .megamenu-row:after { display: table; content: ""; line-height: 0; } .primary-menu-menu > li > .megamenu .megamenu-row:after { clear: both; } .primary-menu-menu > li > .megamenu .megamenu-row .col1, .primary-menu-menu > li > .megamenu .megamenu-row .col2, .primary-menu-menu > li > .megamenu .megamenu-row .col3, .primary-menu-menu > li > .megamenu .megamenu-row .col4, .primary-menu-menu > li > .megamenu .megamenu-row .col5, .primary-menu-menu > li > .megamenu .megamenu-row .col6, .primary-menu-menu > li > .megamenu .megamenu-row .col7, .primary-menu-menu > li > .megamenu .megamenu-row .col8, .primary-menu-menu > li > .megamenu .megamenu-row .col9, .primary-menu-menu > li > .megamenu .megamenu-row .col10, .primary-menu-menu > li > .megamenu .megamenu-row .col11, .primary-menu-menu > li > .megamenu .megamenu-row .col12{ display: block; min-height: 20px; float: left; margin-left: 3%; } .primary-menu-menu > li > .megamenu .megamenu-row [class*="col"]:first-child { margin-left: 0; } .primary-menu-menu > li > .megamenu .megamenu-row .col1{ width: 5.583333333333%; } .primary-menu-menu > li > .megamenu .megamenu-row .col2{ width: 14.166666666666%; } .primary-menu-menu > li > .megamenu .megamenu-row .col3{ width: 22.75%; } .primary-menu-menu > li > .megamenu .megamenu-row .col4{ width: 31.333333333333%; } .primary-menu-menu > li > .megamenu .megamenu-row .col5{ width: 39.916666666667%; } .primary-menu-menu > li > .megamenu .megamenu-row .col6{ width: 48.5%; } .primary-menu-menu > li > .megamenu .megamenu-row .col7{ width: 57.083333333333%; } .primary-menu-menu > li > .megamenu .megamenu-row .col8{ width: 65.666666666667%; } .primary-menu-menu > li > .megamenu .megamenu-row .col9{ width: 74.25%; } .primary-menu-menu > li > .megamenu .megamenu-row .col10{ width: 82.833333333334%; } .primary-menu-menu > li > .megamenu .megamenu-row .col11{ width: 91.416666666667%; } .primary-menu-menu > li > .megamenu .megamenu-row .col12{ width: 100%; } /* 9 - SHOW/HIDE BUTTON (MOBILE MODE) ======================================*/ .menu-icon-wrapper{ position: relative; display: inline-block; width: 34px; height: 34px; pointer-events: none; -webkit-transition:0.1s; transition: 0.1s; } .menu-icon-wrapper.scaled{ -webkit-transform: scale(0.5); -ms-transform: scale(0.5); transform: scale(0.5); } .menu-icon-wrapper svg{ position: absolute; top: -33px; left: -33px; } .menu-icon-wrapper svg path{ stroke: #2f2c2c; stroke-width: 30px; stroke-linecap: round; fill: transparent; } .menu-icon-wrapper .menu-icon-trigger{ position: relative; width: 100%; height: 100%; cursor: pointer; pointer-events: auto; background: none; border: none; margin: 0; padding: 0; } .menu-icon-wrapper svg { -webkit-transform: scale(0.1); -ms-transform: scale(0.1); transform: scale(0.1); -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; } .showhide .mob-menu--title{ position: relative; top: 2px; text-transform: uppercase; font-size: 18px; margin-right: 15px; font-weight: bold; } .primary-menu .showhide > span{ display: inline-block; vertical-align: middle; } .primary-menu .showhide{ height: 46px; cursor: pointer; text-align: center; padding: 0; display: none; float: right; text-decoration: none; outline: none; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent; position: relative; } /* 10 - ICONS (parent menu items) ======================================*/ .primary-menu-menu > li > a > i{ margin: 0 5px 0 0; font-size: 18px; float: left; line-height: 20px; font-family: 'FontAwesome'; } /* 11 - SEARCH FIELD ======================================*/ /* Form */ .primary-menu-menu > li.search form{ float: left; padding: 22px 16px 17px; } /* Input */ .primary-menu-menu > li.search form input[type="text"]{ width: 160px; padding: 5px 10px; font-family: 'Open Sans', sans-serif; border: none; background: #f0f0f0; -webkit-border-radius: 2px; border-radius: 2px; outline: 0; -webkit-transition: width 1s ease-out; transition: width 1s ease-out; } .primary-menu-menu > li.search form:hover input[type="text"]{ width: 160px; } /* 12 - VERTICAL TABS ======================================*/ .primary-menu-tabs{ width: 100%; float: left; } .primary-menu-tabs-nav{ width: 20%; margin: 0; padding: 0; float: left; list-style: none; } .primary-menu-tabs-nav > li > a{ width: 100%; padding: 7px 16px; float: left; font-size: 13px; text-decoration: none; color: #666; border: solid 1px #f0f0f0; outline: 0; } .primary-menu-tabs-nav li.active a, .primary-menu-tabs-nav li:hover a{ background: #f0f0f0; } .primary-menu-tabs-content{ width: 80%; min-height: 30px; padding: 20px; float: right; display: none; font-size: 13px; border: solid 1px #f0f0f0; } .primary-menu-tabs-content.active{ display: block; } /* 13 - COLOR SCHEMES ======================================*/ /* blue */ .primary-menu.blue .primary-menu-menu > li.active > a, .primary-menu.blue .primary-menu-menu > li:hover > a, .primary-menu.blue .primary-menu-menu ul.dropdown li:hover > a{ color: #4A89DC; } /* green */ .primary-menu.green .primary-menu-menu > li.active > a, .primary-menu.green .primary-menu-menu > li:hover > a, .primary-menu.green .primary-menu-menu ul.dropdown li:hover > a{ color: #37BC9B; } /* red */ .primary-menu.red .primary-menu-menu > li.active > a, .primary-menu.red .primary-menu-menu > li:hover > a, .primary-menu.red .primary-menu-menu ul.dropdown li:hover > a{ color: #E9573F; } /* orange */ .primary-menu.orange .primary-menu-menu > li.active > a, .primary-menu.orange .primary-menu-menu > li:hover > a, .primary-menu.orange .primary-menu-menu ul.dropdown li:hover > a{ color: #ff670f; } /* yellow */ .primary-menu.yellow .primary-menu-menu > li.active > a, .primary-menu.yellow .primary-menu-menu > li:hover > a, .primary-menu.yellow .primary-menu-menu ul.dropdown li:hover > a{ color: #F6BB42; } /* purple */ .primary-menu.purple .primary-menu-menu > li.active > a, .primary-menu.purple .primary-menu-menu > li:hover > a, .primary-menu.purple .primary-menu-menu ul.dropdown li:hover > a{ color: #967ADC; } /* pink */ .primary-menu.pink .primary-menu-menu > li.active > a, .primary-menu.pink .primary-menu-menu > li:hover > a, .primary-menu.pink .primary-menu-menu ul.dropdown li:hover > a{ color: #D770AD; } /* 14 - MOBILE MODE (RESPONSIVE MODE) ======================================*/ @media (max-width: 1023px){ /* Responsive menu container */ .primary-menu-responsive.primary-menu{ padding: 0; width: auto; display: block; float: none; overflow: visible; } .primary-menu-responsive .primary-menu-menu > li > .dropdown .megamenu-item-info { padding: 10px 20px 0; } .primary-menu-responsive.primary-menu .google-text{ margin-bottom: 120px; } /* Brand */ .primary-menu-responsive .primary-menu-brand{ margin: 8px 30px 10px 20px; font-size: 20px; line-height: 1.55; } /* Show/hide button */ /* Menu */ .primary-menu-responsive .primary-menu-menu{ width: 100%; float: left !important; } .primary-menu-responsive .primary-menu-menu ul.dropdown { top: 0; } /* scrollable menu*/ .primary-menu-responsive .primary-menu-menu.scrollable{ overflow-y: auto; -webkit-overflow-scrolling: touch; margin-top: 18px; overflow-y: auto; -webkit-overflow-scrolling: touch; position: absolute; top: -webkit-calc(100% + 15px); top: calc(100% + 15px); left: 0; max-height: 60vh !important; background-color: #fff; border-radius: 0 0 20px 20px; box-shadow: 10px 0 30px 0 rgba(74,189,187, 0.4); z-index: 5; } .primary-menu-responsive .primary-menu-menu.scrollable > .scrollable-fix{ display: block; } /* Menu items */ .primary-menu-responsive .primary-menu-menu > li{ width: 100%; display: block; position: relative; padding: 0; } .primary-menu-responsive .primary-menu-menu > li > a{ width: 100%; padding: 12px 20px; display: block; border-bottom: solid 1px #f0f0f0; } .primary-menu-responsive .primary-menu-menu > li:first-child > a{ border-top: solid 1px #f0f0f0; } /* Dropdown */ .primary-menu-responsive .primary-menu-menu ul.dropdown, .primary-menu-responsive .primary-menu-menu ul.dropdown li ul.dropdown{ width: 100%; left: 0; position: static; border: none; background: #fff; float: left; } .primary-menu-responsive .primary-menu-menu ul.dropdown { position: relative; } .primary-menu-responsive .primary-menu-menu > li { padding-bottom: 0; } /* Dropdown items */ .primary-menu-responsive .primary-menu-menu ul.dropdown li{ position: relative; } .primary-menu-responsive .primary-menu-menu ul.dropdown li a{ border-bottom: solid 1px #f0f0f0; padding: 10px 20px; } .primary-menu-responsive .primary-menu-menu.primary-menu-indented > li > ul.dropdown > li > ul.dropdown > li > ul.dropdown > li > a{ padding-left: 80px !important; } .primary-menu-responsive .primary-menu-menu.primary-menu-indented > li > ul.dropdown > li > ul.dropdown > li > ul.dropdown > li:hover > a{ padding-left: 90px !important; } /* Dropdown/megamenu indicators */ .primary-menu-responsive .primary-menu-menu li .indicator{ width: 60px; height: 100%; position: absolute; right: 0; top: 0; font-size: 14px; text-align: center; line-height: 53px; border-left: solid 1px #f0f0f0; } .primary-menu-responsive .primary-menu-menu li ul.dropdown li .indicator{ height: 100%; right: 0; top: 0; font-size: 14px; line-height: 36px; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); border-left: none; } /* Megamenu */ .primary-menu-responsive .primary-menu-menu > li > .megamenu{ width: 100% !important; left: 0 !important; position: static; border-top: none; border-bottom: solid 1px #f0f0f0; -webkit-box-shadow: none; box-shadow: none; } .primary-menu-responsive .primary-menu-menu > li > .megamenu .megamenu-row [class*="col"]{ float: none; display: block; width: 100% !important; margin-left: 0; margin-top: 15px; } .primary-menu-responsive .primary-menu-menu > li > .megamenu .megamenu-row:first-child [class*="col"]:first-child { margin-top: 0; } .primary-menu-responsive .primary-menu-menu > li > .megamenu .megamenu-row{ margin-top: 0; } /* Search field */ .primary-menu-responsive .primary-menu-menu > li.search form{ width: 100%; margin: 4px 0; padding: 10px 16px !important; } .primary-menu-responsive .primary-menu-menu > li.search form input[type="text"]{ width: 100%; } /* Tabs */ .primary-menu-responsive .primary-menu-tabs-nav{ width: 100%; } .primary-menu-responsive .primary-menu-tabs-content{ width: 100%; } } @media (max-width: 1023px) { .primary-menu-responsive.primary-menu .showhide { display: inline-block; } } /* CSS3 ANIMATIONS */ .zoom-in{ -webkit-animation: zoomIn 400ms ease both; animation: zoomIn 400ms ease both; } @-webkit-keyframes zoomIn { 0% { -webkit-transform: scale(1.5); } 100% { -webkit-transform: scale(1); } } @keyframes zoomIn { 0% { -webkit-transform: scale(1.5); transform: scale(1.5); } 100% { -webkit-transform: scale(1); transform: scale(1); } } .zoom-out{ -webkit-animation: zoomOut 400ms ease both; animation: zoomOut 400ms ease both; } @-webkit-keyframes zoomOut { 0% { -webkit-transform: scale(.6); } 100% { -webkit-transform: scale(1); } } @keyframes zoomOut { 0% { -webkit-transform: scale(.6); transform: scale(.6); } 100% { -webkit-transform: scale(1); transform: scale(1); } } .drop-up{ -webkit-animation: drop-up 400ms ease both; animation: drop-up 400ms ease both; } @-webkit-keyframes drop-up { 0% { -webkit-transform: translateY(100px); } 100% { -webkit-transform: translateY(0); } } @keyframes drop-up { 0% { -webkit-transform: translateY(100px); transform: translateY(100px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } .drop-left{ -webkit-animation: drop-left 400ms ease both; animation: drop-left 400ms ease both; } @-webkit-keyframes drop-left { 0% { -webkit-transform: translateX(-100px); } 100% { -webkit-transform: translateX(0); } } @keyframes drop-left { 0% { -webkit-transform: translateX(-100px); transform: translateX(-100px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } .swing { -webkit-transform-origin: top center; -ms-transform-origin: top center; transform-origin: top center; -webkit-animation: swing 400ms ease-out both; animation: swing 400ms ease-out both; } @-webkit-keyframes swing { 20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; } 20% { -webkit-transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); } 100% { -webkit-transform: rotate(0deg); } } @keyframes swing { 20% { -webkit-transform: rotate(15deg); transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } .flip{ -webkit-animation: flip 700ms ease both; animation: flip 700ms ease both; } @-webkit-keyframes flip { 0% { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateX(-10deg); transform: perspective(400px) rotateX(-10deg); } 70% { -webkit-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); } 100% { -webkit-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } } @keyframes flip { 0% { -webkit-transform: perspective(400px) rotateX(90deg); -ms-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateX(-10deg); -ms-transform: perspective(400px) rotateX(-10deg); transform: perspective(400px) rotateX(-10deg); } 70% { -webkit-transform: perspective(400px) rotateX(10deg); -ms-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); } 100% { -webkit-transform: perspective(400px) rotateX(0deg); -ms-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } } .roll-in{ -webkit-animation: roll-in 400ms ease both; animation: roll-in 400ms ease both; } @-webkit-keyframes roll-in { 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-15deg); transform: translateX(-100%) rotate(-15deg); } 100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } } @keyframes roll-in { 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-15deg); -ms-transform: translateX(-100%) rotate(-15deg); transform: translateX(-100%) rotate(-15deg); } 100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); -ms-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } } .stretch{ -webkit-animation: stretch 500ms ease both; animation: stretch 500ms ease both; transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -webkit-transform-origin: 0% 0%; } @keyframes stretch{ 0% { -webkit-transform: scaleX(0.3); transform: scaleX(0.3); } 40% { -webkit-transform: scaleX(1.02); transform: scaleX(1.02); } 60% { -webkit-transform: scaleX(0.98); transform: scaleX(0.98); } 80% { -webkit-transform: scaleX(1.01); transform: scaleX(1.01); } 100% { -webkit-transform: scaleX(0.98); transform: scaleX(0.98); } 80% { -webkit-transform: scaleX(1.01); transform: scaleX(1.01); } 100% { -webkit-transform: scaleX(1); transform: scaleX(1); } } @-webkit-keyframes stretch{ 0% { -webkit-transform: scaleX(0.3); } 40% { -webkit-transform: scaleX(1.02); } 60% { -webkit-transform: scaleX(0.98); } 80% { -webkit-transform: scaleX(1.01); } 100% { -webkit-transform: scaleX(0.98); } 80% { -webkit-transform: scaleX(1.01); } 100% { -webkit-transform: scaleX(1); } } @media all and (max-width: 1023px) { .primary-menu { background: #fff } .header.absolute{ position: relative; } } @media (max-width: 768px) { .primary-menu-responsive .primary-menu-menu.scrollable { margin-top: 0; } }