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;
}
}