header { position:relative; z-index:999; width:100%; background:#f4b5ae; padding:2px 0; } header .topbar { padding:0px; } header .social{ margin:0; float:right; } header .social li { margin: 0 ; padding: 7px 0; letter-spacing: 2px; display: inline-block; border-top: #fff 1px solid; border-bottom: #fff 1px solid; } header .social li a { color: #fff; } header .logo{ margin: 0; text-align:center; } header .header-nav{ margin: 15px 0; font-size:14px; text-align:center; } header .header-nav ul{ margin:0; padding:0; list-style:none; } header .header-nav ul li{ margin: 0 ; display: inline-block; font-family:'Sweet Sans Pro'; } header .header-nav ul li a{ color:#FFF; } header .header-nav ul li.active a{ color:#141414; background:#f4b5ae; border:#f4b5ae 1px solid; font-size:14px; text-transform:uppercase; padding: 12px 28px; font-weight: 400; letter-spacing: .5px; line-height: 16px; } header .header-nav ul li.active:hover a{ color:#f4b5ae; background:#FFF; } header .nav{ padding-left:20px; } header nav { background-color:#f4b5ae; position: fixed; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; z-index: 2; overflow: auto } .nav_wrap { padding-top: 50px; font-family:'PP Hatton Ultralight'; } .nav_wrap .container, .nav_wrap .row, .nav_wrap .col-md-6{ margin:0; padding:0; } .nav_wrap ul{ margin:60px 70px; padding: 0; } .nav_wrap img{ height:100vh; } .nav_wrap p{ margin:10px 70px; padding: 0; color: #141414; font-family:'Sweet Sans Pro'; } header nav ul li { -webkit-transform: translateY(50px); transform: translateY(50px); opacity: 0; } #toggle:checked ~ nav ul li ul li a{ font-size: 1.25rem; padding-left:24px; max-width: 256px;max-height: 256px;background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOnN2Z2pzPSJodHRwOi8vc3ZnanMuY29tL3N2Z2pzIiB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiIgeD0iMCIgeT0iMCIgdmlld0JveD0iMCAwIDQ5Mi4wMDQgNDkyLjAwNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTEyIDUxMiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgY2xhc3M9IiI+PGc+PHNjcmlwdCBpZD0idGlueWhpcHBvcy1pbmplY3RlZCI+PC9zY3JpcHQ+CjxnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+Cgk8Zz4KCQk8cGF0aCBkPSJNMzgyLjY3OCwyMjYuODA0TDE2My43Myw3Ljg2QzE1OC42NjYsMi43OTIsMTUxLjkwNiwwLDE0NC42OTgsMHMtMTMuOTY4LDIuNzkyLTE5LjAzMiw3Ljg2bC0xNi4xMjQsMTYuMTIgICAgYy0xMC40OTIsMTAuNTA0LTEwLjQ5MiwyNy41NzYsMCwzOC4wNjRMMjkzLjM5OCwyNDUuOWwtMTg0LjA2LDE4NC4wNmMtNS4wNjQsNS4wNjgtNy44NiwxMS44MjQtNy44NiwxOS4wMjggICAgYzAsNy4yMTIsMi43OTYsMTMuOTY4LDcuODYsMTkuMDRsMTYuMTI0LDE2LjExNmM1LjA2OCw1LjA2OCwxMS44MjQsNy44NiwxOS4wMzIsNy44NnMxMy45NjgtMi43OTIsMTkuMDMyLTcuODZMMzgyLjY3OCwyNjUgICAgYzUuMDc2LTUuMDg0LDcuODY0LTExLjg3Miw3Ljg0OC0xOS4wODhDMzkwLjU0MiwyMzguNjY4LDM4Ny43NTQsMjMxLjg4NCwzODIuNjc4LDIyNi44MDR6IiBmaWxsPSIjZmZmZmZmIiBkYXRhLW9yaWdpbmFsPSIjMDAwMDAwIiBzdHlsZT0iIiBjbGFzcz0iIj48L3BhdGg+Cgk8L2c+CjwvZz4KPGcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPC9nPgo8ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8L2c+CjxnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjwvZz4KPGcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPC9nPgo8ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8L2c+CjxnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjwvZz4KPGcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPC9nPgo8ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8L2c+CjxnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjwvZz4KPGcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPC9nPgo8ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8L2c+CjxnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjwvZz4KPGcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPC9nPgo8ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8L2c+CjxnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjwvZz4KPC9nPjwvc3ZnPg==); background-size:14px; background-repeat: no-repeat; background-position: left center;} header nav ul li a, header nav ul li span { display: block; font-size: 32px; text-decoration: none; padding: 6px 0; color: #141414; letter-spacing:1px; text-transform:uppercase; } header nav ul li a:hover { color: #570b15; } .toggle-btn { display: block; position: fixed; z-index: 333333; cursor: pointer; top:15px; left:30px; } .toggle-btn .bar { width: 35px; height: 1px; margin: 7px auto; background-color: #000; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } @media(min-width:575px){ .nav_wrap { padding-top: 50px; padding-left:0 } header nav ul li a, header nav ul li span { font-size: 26px; } #toggle:checked ~ nav ul li ul li a{ font-size: 1.5rem;} } @media(min-width:768px){ .nav_wrap { list-style-type: none; padding: 0; margin: 0; position: absolute; top: 0; /*left: 50%; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; -webkit-transform: translateX(-50%); transform: translateX(-50%);*/ width: 100%; } } /*.toggle-btn .bar:nth-child(2) { width: 20px; }*/ #toggle:checked ~ nav { opacity: 1; visibility: visible; } #toggle:checked ~ nav ul { top: 70px; } #toggle:checked ~ nav ul li { -webkit-transform: translateY(0px); transform: translateY(0px); opacity: 1; } #toggle:checked ~ nav ul li:nth-child(1) { -webkit-transition: all 0.3s cubic-bezier(0.6, 0, 0.8, 1.5) 0.1s; transition: all 0.3s cubic-bezier(0.6, 0, 0.8, 1.5) 0.1s; } #toggle:checked ~ nav ul li:nth-child(2) { -webkit-transition: all 0.3s cubic-bezier(0.6, 0, 0.8, 1.5) 0.2s; transition: all 0.3s cubic-bezier(0.6, 0, 0.8, 1.5) 0.2s; } #toggle:checked ~ nav ul li:nth-child(3) { -webkit-transition: all 0.3s cubic-bezier(0.6, 0, 0.8, 1.5) 0.3s; transition: all 0.3s cubic-bezier(0.6, 0, 0.8, 1.5) 0.3s; } #toggle:checked ~ nav ul li:nth-child(4) { -webkit-transition: all 0.3s cubic-bezier(0.6, 0, 0.8, 1.5) 0.4s; transition: all 0.3s cubic-bezier(0.6, 0, 0.8, 1.5) 0.4s; } #toggle:checked ~ nav ul li:nth-child(5) { -webkit-transition: all 0.3s cubic-bezier(0.6, 0, 0.8, 1.5) 0.5s; transition: all 0.3s cubic-bezier(0.6, 0, 0.8, 1.5) 0.5s; } #toggle:checked ~ nav ul li:nth-child(6) { -webkit-transition: all 0.3s cubic-bezier(0.6, 0, 0.8, 1.5) 0.6s; transition: all 0.3s cubic-bezier(0.6, 0, 0.8, 1.5) 0.6s; } #toggle:checked ~ nav ul li:nth-child(7) { -webkit-transition: all 0.3s cubic-bezier(0.6, 0, 0.8, 1.5) 0.7s; transition: all 0.3s cubic-bezier(0.6, 0, 0.8, 1.5) 0.7s; } #toggle:checked ~ nav ul li:nth-child(8) { -webkit-transition: all 0.3s cubic-bezier(0.6, 0, 0.8, 1.5) 0.8s; transition: all 0.3s cubic-bezier(0.6, 0, 0.8, 1.5) 0.8s; } #toggle:checked ~ nav ul li:nth-child(9) { -webkit-transition: all 0.3s cubic-bezier(0.6, 0, 0.8, 1.5) 0.9s; transition: all 0.3s cubic-bezier(0.6, 0, 0.8, 1.5) 0.8s; } #toggle:checked + label.toggle-btn .bar { background-color: #fff; } #toggle:checked + label.toggle-btn .bar:nth-child(2) { -webkit-transform: translateX(50px); transform: translateX(50px); opacity: 0; } #toggle:checked + label.toggle-btn .bar:nth-child(1) { -webkit-transform: translateY(8px) rotate(45deg); transform: translateY(8px) rotate(45deg); } #toggle:checked + label.toggle-btn .bar:nth-child(3) { -webkit-transform: translateY(-8px) rotate(-45deg); transform: translateY(-8px) rotate(-45deg); } @media(max-width:574px){ .toggle-btn{ top: 20px; left: 15px; } @media(max-width:991px){ .logo_box{text-align: center} } /* aminate */ @-webkit-keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-35px, 0, 0); transform: translate3d(-35px, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-35px, 0, 0); transform: translate3d(-35px, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(35px, 0, 0); transform: translate3d(35px, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(35px, 0, 0); transform: translate3d(35px, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } @-webkit-keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -40px, 0); transform: translate3d(0, -40px, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -40px, 0); transform: translate3d(0, -40px, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 40px, 0); transform: translate3d(0, 40px, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-webkit-keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 40px, 0); transform: translate3d(0, 40px, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 40px, 0); transform: translate3d(0, 40px, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .animated.delay-1s { -webkit-animation-delay: 1s; animation-delay: 1s; } .animated.delay-2s { -webkit-animation-delay: 2s; animation-delay: 2s; } .animated.delay-3s { -webkit-animation-delay: 3s; animation-delay: 3s; } .animated.delay-4s { -webkit-animation-delay: 4s; animation-delay: 4s; } .animated.delay-5s { -webkit-animation-delay: 5s; animation-delay: 5s; } .animated.fast { -webkit-animation-duration: 800ms; animation-duration: 800ms; } .animated.faster { -webkit-animation-duration: 500ms; animation-duration: 500ms; } .animated.slow { -webkit-animation-duration: 2s; animation-duration: 2s; } .animated.slower { -webkit-animation-duration: 3s; animation-duration: 3s; } @media (print), (prefers-reduced-motion: reduce) { .animated { -webkit-animation-duration: 1ms !important; animation-duration: 1ms !important; -webkit-transition-duration: 1ms !important; transition-duration: 1ms !important; -webkit-animation-iteration-count: 1 !important; animation-iteration-count: 1 !important; } }