#splash-container { background-color: #ff4000; color: #000; height: calc(100vh); overflow: hidden; position: relative; }
#splash-container.inactive { background-color: #000; color: #ff4000; text-shadow: 2px 2px 20px #ff4000, -2px -2px 20px #ff4000; }

.splash-content { padding-right: 20px; }
.splash-content,
.splash-content > div { height: 100%;  }
.splash-content h1 { font-size: 64px; letter-spacing: -0.075em; line-height: 0.75em; text-align: right; }
.splash-content h1 > span { display: block; }
.splash-content h1 > span:nth-child(1) {}
.splash-content h1 > span:nth-child(2) { opacity: 0.5; }
.splash-content h1 > span:nth-child(3) { opacity: 0.25; }
.splash-content h6 { font-size: 12px; letter-spacing: -0.025em; line-height: 2em; text-align: right; }
.splash-content h6 > span { display: block;  vertical-align: middle; }
.splash-content h6 > span:after { content: "\f0d9"; font-family: FontAwesome; font-size: 16px; margin-left: 5px; vertical-align: middle; }
h6.splash-note-color { display: none; font-size: 0.7em; }
h6.splash-note-color span { display: block; font-weight: 900; }
h6.splash-note-color span:after { content: ''; }

#splash-content-icos { margin: auto 0; margin-right: -40px; text-align: center; }
#splash-content-icos > div { position: relative; width: 0; height: 0; margin: auto; }
.hc-ico { font-size: 32px; position: absolute; right: 0; top: 0; }

.hc-tablet:before { font-size: 48px; content: "\f10a"; font-family: FontAwesome; }
.hc-tablet-hand { animation: tabletHand 2s ease-in-out infinite normal; top: 50px; }
.hc-tablet-hand:before { font-size: 30px; content: "\f0a6"; font-family: FontAwesome; }
.drag-icon-hand { animation: notificationTablet 2s ease-in-out infinite normal; transform: scale(0.5); top: -50px; }
@keyframes tabletHand {
   0%    { opacity: 0; transform: scale(0); top: 110px; }
   20%   { opacity: 1; transform: scale(1); top: 30px; }
   30%   { opacity: 1; transform: scale(1); top: 30px; }
   70%   { opacity: 1; transform: scale(1); top: 10px; }
   80%   { opacity: 1; transform: scale(1); top: 10px; }
   100%  { opacity: 0; transform: scale(0); top: -60px; }
}

.header-nav { background-color: #000; bottom: 0px; position: absolute; text-align: center; width: 100%; }
.header-nav.active { background-color: #ff4000; }
.nav-container { background-color: #000; color: #ff4000; cursor: pointer; padding: 15px 0 10px; }
.nav-container > * { vertical-align: middle; }
.nav-container .fa { font-size: 24px; transition-duration: 0.5s; }
.nav-container span { display: block; font-size: 12px; padding-top: 5px; transition-duration: 0.5s; }
.nav-container span:before { content: attr(data-name-short); }
.nav-container.active { background-color: #ff4000; color: #000; }
.nav-container:not(:first-child) { border-left-width: 0px; }
.nav-container:hover { background-color: #ff4000; color: #000; }
.nav-container.active:hover { background-color: #000; color: #ff4000; }
.nav-container:hover .fa { transform: rotateY(360deg); }
.nav-container:hover span { transform: rotateY(-360deg); }

.nav-fixed-wrapper { position: fixed; top: 0; visibility: hidden; }
.nav-fixed-container { }

#nav-desktop-container { color: #000; width: 100%; z-index: 1001; }
.nav-fixed-container-desktop { background-color: #ff4000; box-shadow: 0 0 6px 0px rgba(0,0,0,.5); cursor: pointer; padding: 1px 0; text-align: center; text-transform: none; transition-duration: 0.5s; }
.nav-fixed-container-desktop > * { vertical-align: middle; }
.nav-fixed-container-desktop .fa { font-size: 12px; margin-bottom: 2px; margin-right: 5px; }
.nav-fixed-container-desktop span { display: inline-block; font-size: 12px; }
.nav-fixed-container-desktop:hover { background-color: #000; color: #ff4000; }
.nav-fixed-container-desktop.active { background-color: #fff; color: #000; }
.nav-fixed-container-desktop.active:before,
.nav-fixed-container-desktop.active:after { font-family: FontAwesome; font-size: 12px; margin: 0 3px; vertical-align: middle; }
.nav-fixed-container-desktop.active:before { content: "\f0da"; }
.nav-fixed-container-desktop.active:after { content: "\f0d9"; }
.nav-fixed-container-desktop.parentmenu.active:before,
.nav-fixed-container-desktop.parentmenu.active:after { content: "\f0d7"; }
.nav-desktop-home { }
.nav-desktop-home .fa { margin-right: 5px; }
.nav-desktop-home span:nth-child(4) { opacity: 0.50; }

#nav-mobile-menu-switch { background-color: #ff4000; border-bottom-right-radius: 100px; box-shadow: 0 0 10px #000; color: #000; font-size: 32px; left: 0; padding: 5px 20px 15px 10px; z-index: 1000; }

#nav-mobile-container { height: 100%; right: 100%; position: fixed; top: 0; width: 100%; z-index: 1000; }
#nav-mobile-container.active { right: 0%; }
#nav-mobile-container > div { float: left; height: 100%; }
.nav-mobile-content { background-color: #ff4000; border-right: 1px dotted #000; width: calc(100% - 60px); }
.nav-mobile-row { height: calc(100% / 7); padding: 10px 30px; vertical-align: middle; }
.nav-mobile-row:not(:first-child) { border-top: 1px dotted #000; }
.nav-mobile-row .table { margin: 0; }
.nav-mobile-row > * { vertical-align: middle; }
.nav-mobile-row .fa { font-size: 32px; margin-right: 10px; vertical-align: middle; }
.nav-mobile-close { background-color: rgba(255,64,0,0.8); width: 60px; font-size: 64px; }

#theme-selector-container { }
.theme-selector-square { box-shadow: 0 0 2px 0 rgba(0,0,0,.5); border: 2px solid transparent; display: inline-block; height: 16px; line-height: 8px; padding-left: 2px; width: 16px; overflow: hidden; margin-top: -2px; transition-duration: 0.25s; }
.nav-mobile-row .theme-selector-square { height: 100%; margin-top: 0; width: calc(100% / 8); }
.theme-selector-square.active,
.theme-selector-square.selected { box-shadow: 0 0 2px 0 #fff; border-color: #fff; }
.theme-selector-square > * { color: #fff; opacity: 0; }
.theme-selector-square.active > * { opacity: 0.0; }
.theme-selector-square:hover { border-color: #fff; }
#theme-selector-container:hover .theme-selector-square.selected { border-color: transparent; }
#theme-selector-container:hover .theme-selector-square.selected:hover { border-color: #fff; }

@media (max-height: 550px) and (max-width: 960px) { 
    #splash-content-icos { margin-left: 100px; text-align: left; }
    #splash-content-icos > div { margin: 0; top: -100px; }
}
@media (max-width: 480px) { 
    #header { box-shadow: none; }
}
@media (min-width: 750px) and (max-width: 960px) { 
    .nav-fixed-container-desktop:nth-child(4) { border-bottom-left-radius: 20px; }
    .nav-fixed-container-desktop:nth-child(7) { border-bottom-right-radius: 20px; }
}
@media (min-width: 960px) {
    .splash-content { padding-right: 0px; }
    .splash-content h1 { line-height: 1em; text-align: center; }
    .splash-content h1 > span { display: inline-block; }
    .splash-content h6 { text-align: center; }
    .splash-content h6 > span { display: inline-block; }
    .splash-content h6 > span:not(:nth-child(1)):before { content: "/"; padding: 0 20px; padding-right: 20px; }
    .splash-content h6 > span:after { content: ''; }
    
    .nav-container .fa { font-size: 14px; }
    .nav-container span { display: inline-block; font-size: 12px; padding: 0; padding-left: 5px; }
    .nav-container span:before { content: attr(data-name); }
    
    .nav-container { padding: 10px 0; }
    .nav-container:not(:first-child) { border-left: 0px dotted #ff4000; }
    
}
@media (min-width: 960px) and (max-width: 1200px) { 
    .nav-fixed-container-desktop:nth-child(4) { border-bottom-left-radius: 20px; }
    .nav-fixed-container-desktop:nth-child(7) { border-bottom-right-radius: 20px; }
}
@media (min-width: 1200px) { 
    .nav-wrapper { margin: auto; width: 1170px; }
    .nav-fixed-container-desktop:nth-child(2) { border-bottom-left-radius: 20px; }
    .nav-fixed-container-desktop:nth-child(7) { border-bottom-right-radius: 20px; }
}