html, body, #dat-menu { width: 100%; height: 100%; } body.datnomargin { margin-top: 0px!important; /*overflow: hidden;*/ } .dat-menu-setup { position: relative; background-color: #665140; background-repeat: repeat; background-position: center center; background-size: cover; } .dat-menu-setup .dat-menu-container { min-height: 100%; position: relative; outline: 1px solid rgba(0,0,0,0); z-index: 10; -webkit-transform: translateZ(0) translateX(0) rotateY(0deg); /* reset transforms (Chrome bug) */ transform: translateZ(0) translateX(0) rotateY(0deg); } .dat-menu-setup .dat-menu-container::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 0px; opacity: 0; background: rgba(0,0,0,0.2); -webkit-transition: opacity 0.4s, height 0s 0.4s; transition: opacity 0.4s, height 0s 0.4s; } .dat-menu-setup .dat-menu-wrapper { position: relative; } .dat-menu-wrapper.dat-menu-padding { padding-top: 0px; } .component { margin: 0 auto; width: 60%; } .dat-menu-setup.dat-menu-load { position: fixed; -webkit-perspective: 1500px; perspective: 1500px; } .dat-menu-load .dat-menu-container { position: absolute; overflow: hidden; width: 100%; height: 100%; cursor: pointer; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .dat-menu-load .dat-menu-wrapper { -webkit-transform: translateZ(-1px); } .dat-menu-animate .dat-menu-container::after { opacity: 1; height: 101%; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; } .dat-menu-list { display: none; position: absolute; height: auto; font-size: 26px; line-height: 130%; max-height: 90%; overflow-x: hidden; overflow-y: hidden; padding-right: 10%; } .datnomargin .dat-menu-list { display: block; } .dat-menu-list { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .dat-menu-list { width: 0px; padding-left: 0px; z-index: -1; } .dat-menu-load .dat-menu-list { left: 0%; width: auto; padding-left: 15%; z-index: 1; overflow: hidden; } .dat-menu-list a { display: inline-block; font-weight: 300; margin: 0 0 30px 0; color: rgba(255,255,255,0.6); text-decoration: none; border: 0px!important; -webkit-transition: color 0.3s; transition: color 0.3s; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .dat-menu-list a:hover { color: #fff; } .dat-menu-list a { display: block; } .datnomargin .dat-menu-container { -webkit-transition: -webkit-transform 0.4s; transition: transform 0.4s; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; } .effect-1.dat-menu-animate .dat-menu-container { -webkit-transform: translateZ(-1500px) translateX(100%) rotateY(-45deg); transform: translateZ(-1500px) translateX(100%) rotateY(-45deg); } .effect-2.dat-menu-animate .dat-menu-container { -webkit-transform: translateZ(-1500px) translateX(100%) rotateY(0deg); transform: translateZ(-1500px) translateX(100%) rotateY(0deg); } .effect-3.dat-menu-animate .dat-menu-container { -webkit-transform: translateZ(0px) translateX(80%) rotateY(0deg); transform: translateZ(0px) translateX(80%) rotateY(0deg); } .no-csstransforms3d .dat-menu-animate .dat-menu-container { left: 75%; } .dat-menu-list > ul { margin: 0px!important } li.dat-menu-header span { font-weight: 700; display: block; padding-bottom: 20px; color: #fff; padding-top: 40px; text-transform: uppercase; } ul:first-child li.dat-menu-header:first-child span { padding-top: 0px; } .dat-menu-list > ul > li > ul { margin-left: 0px; padding-left: 0px; position: static; } .dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus, .dropdown-menu>li>a { color: rgba(255,255,255,0.6); padding: 0px; white-space: normal; line-height: auto; background-color: transparent; } .dat-menu-list ul.dropdown-menu { position: static; float: none; display: block; background: none; box-shadow: none; min-width: 0px; padding: 0px; margin: 0px; border: 0px; left: auto; top: auto; font-size: inherit; border-radius: 0px; } .dat-menu-list ul.dropdown-menu li { } .dat-menu-list li { opacity: 0; list-style: none; padding-left: 0px; margin-left: 0px; -webkit-transform: translateX(-150px); transform: translateX(-150px); -webkit-transition: -webkit-transform 0.4s, opacity 0.4s; transition: transform 0.4s, opacity 0.4s; } .dat-menu-animate .dat-menu-list li { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } .dat-menu-animate .dat-menu-list li:nth-child(2) { -webkit-transition-delay: 0.04s; transition-delay: 0.04s; } .dat-menu-animate .dat-menu-list li:nth-child(3) { -webkit-transition-delay: 0.08s; transition-delay: 0.08s; } .dat-menu-animate .dat-menu-list li:nth-child(4) { -webkit-transition-delay: 0.12s; transition-delay: 0.12s; } .dat-menu-animate .dat-menu-list li:nth-child(5) { -webkit-transition-delay: 0.16s; transition-delay: 0.16s; } .dat-menu-animate .dat-menu-list li:nth-child(6) { -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } .dat-menu-animate .dat-menu-list li:nth-child(7) { -webkit-transition-delay: 0.24s; transition-delay: 0.24s; } .dat-menu-animate .dat-menu-list li:nth-child(8) { -webkit-transition-delay: 0.28s; transition-delay: 0.28s; } .dat-menu-animate .dat-menu-list li:nth-child(9) { -webkit-transition-delay: 0.32s; transition-delay: 0.32s; } .dat-menu-animate .dat-menu-list li:nth-child(10) { -webkit-transition-delay: 0.36s; transition-delay: 0.36s; } .dat-menu-animate .dat-menu-list li:nth-child(11) { -webkit-transition-delay: 0.4s; transition-delay: 0.4s; } .dat-menu-animate .dat-menu-list li:nth-child(12) { -webkit-transition-delay: 0.44s; transition-delay: 0.44s; } .dat-menu-animate .dat-menu-list li:nth-child(13) { -webkit-transition-delay: 0.48s; transition-delay: 0.48s; } .dat-menu-animate .dat-menu-list li:nth-child(14) { -webkit-transition-delay: 0.52s; transition-delay: 0.52s; } .dat-menu-animate .dat-menu-list li:nth-child(15) { -webkit-transition-delay: 0.56s; transition-delay: 0.56s; } .dat-menu-list { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } .dat-menu-list.dat-submenu > ul > li > ul { margin-left: 15%!important; opacity: 0.7; } .dat-menu-list.dat-submenu > ul > li > ul ul { padding-left: 0px!important; } .dat-menu-list.dat-submenu > ul li.has-ot-mega-menu, .dat-menu-list.dat-submenu div { display: none!important; } .dat-menu-list.dat-submenu > ul li.dat-has-sub > ul > li { display: none; } .dat-menu-list.dat-submenu > ul li.dat-has-sub { position: relative; display: block; } .dat-menu-list.dat-submenu > ul li.dat-has-sub > a { display: block; padding-right: 50px; border: 0px!important; } .dat-menu-list ul li > a i { display: none; } .dat-menu-list.dat-submenu > ul li.dat-has-sub:after { position: absolute; display: block; content: '+'; top: 0px; right: 0px; color: #fff; } .dat-menu-list.dat-submenu > ul li.dat-has-sub.dat-sub-active:after { content: '-'; } .dat-menu-top-header { display: none; position: fixed; top: 0px; left: 0px; width: 100%; height: 60px; font-size: 20px; font-weight: 700; line-height: 40px; padding: 10px; text-align: center; color: #fff; background: #232323; box-shadow: inset 0 30px 0 rgba(255,255,255,0.01), inset 0 -1px 0 rgba(255,255,255,0.05), 0 2px 5px rgba(0,0,0,0.2); z-index: 100000; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .dat-menu-top-header a, .dat-menu-top-header a:hover, .dat-menu-top-header a:active { color: #fff; } .dat-menu-list input[type='submit'], .dat-menu-top-header input[type='submit'] { display: none!important; } .dat-menu-top-header input[type='text'] { display: block; position: absolute; height: 40px; top: 10px; padding: 0 15px; line-height: 40px; border: 0px; background: #fff; border-radius: 40px; outline: none; opacity: 0; box-shadow: none; width: 0px; right: 60px; padding: 0 15px; width: 0px; z-index: 100; transition: all 0.2s; -moz-transition: all 0.2s; -webkit-transition: all 0.2s; -o-transition: all 0.2s; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;font-size:16px; } .dat-menu-top-header input[type='text']:focus { right: 60px; width: 62%; opacity: 1; } .dat-menu-top-header a.dat-menu-menu { display: block; float: left; width: 40px; height: 40px; /*background: url(../images/dat-header-icon-menu@2x.png) no-repeat center;*/ background-size: 40px 40px; text-decoration: none; } .dat-menu-top-header a.dat-menu-search { display: block; float: right; width: 40px; height: 40px; /*background: url(../images/dat-header-icon-search@2x.png) no-repeat center;*/ background-size: 40px 40px; text-decoration: none; } .dat-menu-list .dat-menu-search-block input[type='text'] { display: block; height: 40px; padding: 0 15px; line-height: 40px; width: 100%; border: 0px; border-radius: 40px; color: #fff; outline: none; background: transparent; position: relative; z-index: 10; border: 1px solid rgba(255,255,255,0.5); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .dat-menu-list .dat-menu-search-block input[type='text']:focus { color: #232323; background: #fff; border: 1px solid #fff; } ul#dat-menu-list-inner { padding-left: 0px!important; } .dat-menu-temp { display: none!important; } .admin-bar:not(.datnomargin) .dat-menu-top-header { margin-top: 32px; } .dat-menu-top-header > img { display: inline-block; max-width: 70%; max-height: 35px; } @media screen and (max-width: 782px) { .admin-bar:not(.datnomargin) .dat-menu-top-header { margin-top: 46px; } } @media screen and (max-width: 77em) { .dat-menu-list.top { top: 15%; } .dat-menu-list.bottom { bottom: 15%; } } @media screen and (max-width: 36.625em), screen and (max-height: 41.75em) { .dat-menu-load .dat-menu-list { padding-left: 15%; } } @media screen and (max-width: 31em), screen and (max-height: 36.2em) { .dat-menu-list { font-size: 17px; width: 6.8em; } } @media screen and (max-height: 31.6em) { .dat-menu-list a { margin-bottom: 20px; } }