body{ background-color:#f5f5f5; font-family:Raleway; } a, a:hover, a:focus{ color:#222; } /* *** *** *** */ /* *** HEADER *** */ header{ z-index:999; position:fixed; top:0; left:0; display:block; clear:both; width:calc(100% - 16px); margin:0 auto; } #header-layer{ z-index:998; position:fixed; top:0; left:0; display:block; clear:both; width:100%; height:78px; margin:0 auto; opacity:0.9; background-color:#f5f5f5; } .navbar-default { border:none; border-radius:0; background-color:transparent; } .navbar-default #header { position: relative; border-bottom: solid 1px #626264; max-width: 1400px; margin: 0 auto; } .navbar-brand { width: 300px; height: 14px; margin-top: 24px; margin-left: 0; padding: 0; background-image: url('../Imgs/logo.svg'); background-repeat: no-repeat; background-size: 100%; background-position: center; } .navbar-default .navbar-toggle { padding: 0; margin-top:22px; margin-right: 0; margin-bottom: 0; background-color: transparent; background-image: none; border: none; border-radius: 0; width: 14px; height: 14px; background-image: url('../Imgs/close.png'); background-repeat:no-repeat; background-size:cover; } .navbar-default .navbar-toggle.collapsed { background-image: url('../Imgs/menu.png'); } .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover { background-color:transparent; } .navbar-right{ margin-right:-29px; } .nav>li>a { position:relative; padding:23px 15px 7px 15px; text-transform:uppercase; -webkit-transition:all 400ms ease; -moz-transition:all 400ms ease; -ms-transition:all 400ms ease; -o-transition:all 400ms ease; transition:all 400ms ease; font-size:12px; } .nav>li>a span { position:absolute; display:block; width:8px; height:8px; bottom:0; left:50%; transform: translate(-50%, 0); background-color:transparent; -webkit-transition:all 600ms ease; -moz-transition:all 600ms ease; -ms-transition:all 600ms ease; -o-transition:all 600ms ease; transition:all 600ms ease; } .nav>li>a:hover { font-weight:bold; } .nav>li>a:hover span { font-weight:bold; background-color:#626264; } .nav>li>a.active { font-weight:bold; } .nav>li>a.active span { font-weight:bold; background-color:#626264; } .navbar-collapse { position:relative; } .categories-menu { margin: 0; padding: 12px 0 4px 14px; position: absolute; display: block; list-style: none; transform: translateX(0); right: 0; top: calc(100% + 46px); background-color: rgba(245, 245, 245, 0.9); -webkit-transition: all 400ms ease; -moz-transition: all 400ms ease; -ms-transition: all 400ms ease; -o-transition: all 400ms ease; transition: all 400ms ease; } .categories-menu li { font-size:12px; cursor: pointer; text-transform:uppercase; line-height: 2; display: block; min-width:92px; text-align:right; } .categories-menu li:hover, .categories-menu li.active { font-weight: bold; -webkit-transition: all 400ms ease; -moz-transition: all 400ms ease; -ms-transition: all 400ms ease; -o-transition: all 400ms ease; transition: all 400ms ease; } .categories-menu li.title { opacity: 0.6; cursor: default; font-weight: normal; margin:6px 0 0 -8px; } .categories-menu li.title:first-of-type { margin: 0 0 0 -8px; } .categories-menu li.back, .categories-menu li.back:hover { opacity: 0.2; cursor: default; font-weight:normal; margin-top:6px; } .categories-menu li.back.active { opacity: 1; cursor: pointer; font-weight: bold; } #filter { display: none; position: absolute; top: calc(100% + 14px); left: 2px; cursor: pointer; text-transform: uppercase; font-size: 12px; } #filterby { display:none; position: absolute; top: calc(100% + 14px); right: 2px; cursor:pointer; text-transform:uppercase; font-size:12px; } @media (max-width: 1024px) { .categories-menu { right:-150px; } .categories-menu.active { right: 0px; } #filter { display: block; } #filterby { display: block; } } @media (max-width: 767px) { #header-layer { height: 71px; } .navbar-default #header { border-bottom:solid 1px #626264; } .navbar-brand { width:214px; height:18px; } .navbar-right{ margin-right:0; } .nav>li>a span { bottom:14px; left:1px; transform: translate(0, 0); } .navbar-collapse { background-color:#f5f5f5; } } @media (min-width: 768px) { .navbar > .container .navbar-brand, .navbar > .container-fluid .navbar-brand { margin-left:0; } } /* *** *** *** */ #main{ margin-top:75px; } #main > .container{ padding-right:5px; padding-left:5px; } @media (max-width: 768px) and (orientation:portrait) { #main{ margin-top:75px; } #main > .container{ padding-right:15px; padding-left:15px; } } footer{ display:block; clear:both; width:100%; height:200px; margin:0 auto; font-size:10px; } footer #footer-inner{ border-top:solid 1px #626264; max-width:1400px; margin:20px auto; padding:20px 0; } footer #footer-inner .footer-left { text-align: left; padding-bottom:10px; } footer #footer-inner .footer-right { text-align: right; padding-bottom: 10px; } footer #footer-inner .footer-center { text-align: center; padding-bottom: 10px; } @media (max-width:500px) { footer #footer-inner .footer-left { text-align: center; } footer #footer-inner .footer-right { text-align: center; } footer #footer-inner .footer-center span { display:block; } } /* *** HOME *** */ #welcome{ position:absolute; z-index:20; display:none; top:50%; left:50%; transform: translate(-50%, -50%); } #welcome img{ width:650px; height:auto; } #welcome-info { position: absolute; display: none; bottom: 10px; left: 0; width:100%; text-align:center; } #welcome-info img { margin:0 2px; } #slideshow { position:absolute; z-index:10; top:0; left:0; right:0; bottom:0; width:100%; height:100%; overflow:hidden; } #slideshow .slide { position: absolute; display:none; z-index:1; width:100%; height:100%; background-size: cover; background-position: center; } @media (max-width:840px) { #welcome{ width:90%; } #welcome img{ width:100%; } #welcome-info { font-size:2vw; } #welcome-info img { width:20px; } } @media (max-width:420px) { #welcome-info { font-size: 2.4vw; } }