.content-wrap { height: 100%; overflow: hidden; width: 100%; } .content-wrap { -webkit-overflow-scrolling: touch; } #cd-shadow-layer:hover { } /* Menu Button */ .menu-button { position: fixed; bottom: 0; z-index: 1000; margin: 1em; padding: 0; width: 2.5em; height: 2.25em; border: none; font-size: 1.5em; color: #373a47; background: transparent; } .menu-button span { display: none; } .menu-button:hover { opacity: 0.6; } /* Menu */ .menu-wrap { position: fixed; z-index: 999; background: #ebedf4; -webkit-transition: width 0.3s, height 0.3s; transition: width 0.3s, height 0.3s; width: 0; height: 0; font-size: 1.5em; bottom: 1em; left: 1em; -webkit-transform-origin: 0% 100%; transform-origin: 0% 100%; } @media screen and (max-width: 50em) { .menu-button { margin: 0.25em; } .menu-wrap { bottom: 0.25em; left: 0.25em; } } .content-wrap .menu { height: 100%; opacity: 0; font-size: 0.65em; color: #64697d; text-align: right; } .profile { display: inline-block; line-height: 42px; font-weight: 700; padding: 1em; } .profile img { float: right; border-radius: 50%; margin-left: 10px; } .link-list { padding: 1.35em 0; margin: 0 0.75em; border-bottom: 3px solid rgba(125,129,148,0.2); border-top: 3px solid rgba(125,129,148,0.2); } .link-list a { display: block; margin: 0.25em 0; color: #7d8194; padding: 0.5em 1.5em; } .link-list a:hover, .link-list a:focus { color: #64697d; } .link-list a span { margin-left: 10px; font-weight: 700; vertical-align: middle; } .icon-list { position: absolute; right: 1em; bottom: 0.9em; } .icon-list a { font-size: 1.5em; margin-left: 0.25em; color: rgba(125,129,148,0.5); } /* Shown menu */ .show-menu .content::before { opacity: 1; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } .show-menu .menu-wrap { width: 280px; height: 340px; -webkit-animation: anim-jelly 0.8s linear forwards; animation: anim-jelly 0.8s linear forwards; } .show-menu .menu { opacity: 1; -webkit-transition: opacity 0.3s 0.3s; transition: opacity 0.3s 0.3s; } /* Generated with Bounce.js. Edit at http://goo.gl/PJ93gs */ @-webkit-keyframes anim-jelly { 0% { -webkit-transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 3.333333% { -webkit-transform: matrix3d(0.32778, 0, 0, 0, 0, 0.32778, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.32778, 0, 0, 0, 0, 0.32778, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 6.666667% { -webkit-transform: matrix3d(0.69875, 0, 0, 0, 0, 0.69875, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.69875, 0, 0, 0, 0, 0.69875, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 10% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 13.333333% { -webkit-transform: matrix3d(1.1815, 0, 0, 0, 0, 1.1815, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.1815, 0, 0, 0, 0, 1.1815, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 16.666667% { -webkit-transform: matrix3d(1.24402, 0, 0, 0, 0, 1.24402, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.24402, 0, 0, 0, 0, 1.24402, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 20% { -webkit-transform: matrix3d(1.21871, 0, 0, 0, 0, 1.21871, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.21871, 0, 0, 0, 0, 1.21871, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 23.333333% { -webkit-transform: matrix3d(1.14702, 0, 0, 0, 0, 1.14702, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.14702, 0, 0, 0, 0, 1.14702, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 26.666667% { -webkit-transform: matrix3d(1.06589, 0, 0, 0, 0, 1.06589, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.06589, 0, 0, 0, 0, 1.06589, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 30% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 33.333333% { -webkit-transform: matrix3d(0.9603, 0, 0, 0, 0, 0.9603, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.9603, 0, 0, 0, 0, 0.9603, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 36.666667% { -webkit-transform: matrix3d(0.94663, 0, 0, 0, 0, 0.94663, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.94663, 0, 0, 0, 0, 0.94663, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 40% { -webkit-transform: matrix3d(0.95217, 0, 0, 0, 0, 0.95217, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.95217, 0, 0, 0, 0, 0.95217, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 43.333333% { -webkit-transform: matrix3d(0.96784, 0, 0, 0, 0, 0.96784, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.96784, 0, 0, 0, 0, 0.96784, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 46.666667% { -webkit-transform: matrix3d(0.98559, 0, 0, 0, 0, 0.98559, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.98559, 0, 0, 0, 0, 0.98559, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 50% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 53.333333% { -webkit-transform: matrix3d(1.00868, 0, 0, 0, 0, 1.00868, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00868, 0, 0, 0, 0, 1.00868, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 56.666667% { -webkit-transform: matrix3d(1.01167, 0, 0, 0, 0, 1.01167, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.01167, 0, 0, 0, 0, 1.01167, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 60% { -webkit-transform: matrix3d(1.01046, 0, 0, 0, 0, 1.01046, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.01046, 0, 0, 0, 0, 1.01046, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 63.333333% { -webkit-transform: matrix3d(1.00703, 0, 0, 0, 0, 1.00703, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00703, 0, 0, 0, 0, 1.00703, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 66.666667% { -webkit-transform: matrix3d(1.00315, 0, 0, 0, 0, 1.00315, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00315, 0, 0, 0, 0, 1.00315, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 70% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 73.333333% { -webkit-transform: matrix3d(0.9981, 0, 0, 0, 0, 0.9981, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.9981, 0, 0, 0, 0, 0.9981, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 76.666667% { -webkit-transform: matrix3d(0.99745, 0, 0, 0, 0, 0.99745, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99745, 0, 0, 0, 0, 0.99745, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 80% { -webkit-transform: matrix3d(0.99771, 0, 0, 0, 0, 0.99771, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99771, 0, 0, 0, 0, 0.99771, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 83.333333% { -webkit-transform: matrix3d(0.99846, 0, 0, 0, 0, 0.99846, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99846, 0, 0, 0, 0, 0.99846, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 86.666667% { -webkit-transform: matrix3d(0.99931, 0, 0, 0, 0, 0.99931, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99931, 0, 0, 0, 0, 0.99931, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 90% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 93.333333% { -webkit-transform: matrix3d(1.00042, 0, 0, 0, 0, 1.00042, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00042, 0, 0, 0, 0, 1.00042, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 96.666667% { -webkit-transform: matrix3d(1.00056, 0, 0, 0, 0, 1.00056, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00056, 0, 0, 0, 0, 1.00056, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 100% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);} } @keyframes anim-jelly { 0% { -webkit-transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 3.333333% { -webkit-transform: matrix3d(0.32778, 0, 0, 0, 0, 0.32778, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.32778, 0, 0, 0, 0, 0.32778, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 6.666667% { -webkit-transform: matrix3d(0.69875, 0, 0, 0, 0, 0.69875, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.69875, 0, 0, 0, 0, 0.69875, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 10% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 13.333333% { -webkit-transform: matrix3d(1.1815, 0, 0, 0, 0, 1.1815, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.1815, 0, 0, 0, 0, 1.1815, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 16.666667% { -webkit-transform: matrix3d(1.24402, 0, 0, 0, 0, 1.24402, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.24402, 0, 0, 0, 0, 1.24402, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 20% { -webkit-transform: matrix3d(1.21871, 0, 0, 0, 0, 1.21871, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.21871, 0, 0, 0, 0, 1.21871, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 23.333333% { -webkit-transform: matrix3d(1.14702, 0, 0, 0, 0, 1.14702, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.14702, 0, 0, 0, 0, 1.14702, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 26.666667% { -webkit-transform: matrix3d(1.06589, 0, 0, 0, 0, 1.06589, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.06589, 0, 0, 0, 0, 1.06589, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 30% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 33.333333% { -webkit-transform: matrix3d(0.9603, 0, 0, 0, 0, 0.9603, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.9603, 0, 0, 0, 0, 0.9603, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 36.666667% { -webkit-transform: matrix3d(0.94663, 0, 0, 0, 0, 0.94663, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.94663, 0, 0, 0, 0, 0.94663, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 40% { -webkit-transform: matrix3d(0.95217, 0, 0, 0, 0, 0.95217, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.95217, 0, 0, 0, 0, 0.95217, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 43.333333% { -webkit-transform: matrix3d(0.96784, 0, 0, 0, 0, 0.96784, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.96784, 0, 0, 0, 0, 0.96784, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 46.666667% { -webkit-transform: matrix3d(0.98559, 0, 0, 0, 0, 0.98559, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.98559, 0, 0, 0, 0, 0.98559, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 50% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 53.333333% { -webkit-transform: matrix3d(1.00868, 0, 0, 0, 0, 1.00868, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00868, 0, 0, 0, 0, 1.00868, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 56.666667% { -webkit-transform: matrix3d(1.01167, 0, 0, 0, 0, 1.01167, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.01167, 0, 0, 0, 0, 1.01167, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 60% { -webkit-transform: matrix3d(1.01046, 0, 0, 0, 0, 1.01046, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.01046, 0, 0, 0, 0, 1.01046, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 63.333333% { -webkit-transform: matrix3d(1.00703, 0, 0, 0, 0, 1.00703, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00703, 0, 0, 0, 0, 1.00703, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 66.666667% { -webkit-transform: matrix3d(1.00315, 0, 0, 0, 0, 1.00315, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00315, 0, 0, 0, 0, 1.00315, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 70% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 73.333333% { -webkit-transform: matrix3d(0.9981, 0, 0, 0, 0, 0.9981, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.9981, 0, 0, 0, 0, 0.9981, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 76.666667% { -webkit-transform: matrix3d(0.99745, 0, 0, 0, 0, 0.99745, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99745, 0, 0, 0, 0, 0.99745, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 80% { -webkit-transform: matrix3d(0.99771, 0, 0, 0, 0, 0.99771, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99771, 0, 0, 0, 0, 0.99771, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 83.333333% { -webkit-transform: matrix3d(0.99846, 0, 0, 0, 0, 0.99846, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99846, 0, 0, 0, 0, 0.99846, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 86.666667% { -webkit-transform: matrix3d(0.99931, 0, 0, 0, 0, 0.99931, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99931, 0, 0, 0, 0, 0.99931, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 90% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 93.333333% { -webkit-transform: matrix3d(1.00042, 0, 0, 0, 0, 1.00042, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00042, 0, 0, 0, 0, 1.00042, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 96.666667% { -webkit-transform: matrix3d(1.00056, 0, 0, 0, 0, 1.00056, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00056, 0, 0, 0, 0, 1.00056, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 100% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);} } /* -------------------------------- Main components -------------------------------- */ header[role=banner] { position: relative; height: 50px; background: #343642; } header[role=banner] #cd-logo { float: left; margin: 4px 0 0 5%; /* reduce logo size on mobile and make sure it is left aligned with the transform-origin property */ -webkit-transform-origin: 0 50%; -moz-transform-origin: 0 50%; -ms-transform-origin: 0 50%; -o-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); } header[role=banner] #cd-logo img { display: block; } header[role=banner]::after { /* clearfix */ content: ''; display: table; clear: both; } @media only screen and (min-width: 768px) { header[role=banner] { height: 80px; } header[role=banner] #cd-logo { margin: 20px 0 0 5%; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } } .main-nav { float: right; } .main-nav ul { position: absolute; top: 0; left: 0; width: 100%; -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } .main-nav ul.is-visible { -webkit-transform: translateY(50px); -moz-transform: translateY(50px); -ms-transform: translateY(50px); -o-transform: translateY(50px); transform: translateY(50px); } .main-nav a { display: block; height: 40px; line-height: 40px; padding-left: 5%; color: #FFF; border:0px !important } .logout-nav { float:right; } .logout-nav a{ display: block; height: 40px; line-height: 40px; padding-left: 5%; color: #FFF; } .ott-top-social-icon .main-nav a , .ott-top-social-icon .logout-nav a{ background:#11649b !important; border:0px !important } .ott-top-social-icon .main-nav a i, .ott-top-social-icon .logout-nav a i { color:#fff !important ; font-size:13px; } @media only screen and (min-width: 768px) { .main-nav { width: auto; height: auto; background: none; cursor: auto; } .main-nav ul { position: static; width: auto; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); line-height: 80px; } .main-nav ul.is-visible { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .main-nav li { display: inline-block; margin-left: 1em; } .main-nav li:nth-last-child(2) { margin-left: 2em; } .main-nav a { display: inline-block; height: auto; line-height: normal; background: transparent; } .main-nav a.cd-signin, .main-nav a.cd-signup { line-height:50px; } .main-nav a.cd-signup { background: #2f889a; border: none; } } /* -------------------------------- xsigin/signup popup -------------------------------- */ .cd-user-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.9); z-index: 109; overflow-y: auto; cursor: pointer; visibility: hidden; opacity: 0; -webkit-transition: opacity 0.3s 0, visibility 0 0.3s; -moz-transition: opacity 0.3s 0, visibility 0 0.3s; transition: opacity 0.3s 0, visibility 0 0.3s; } .cd-user-modal.is-visible { visibility: visible; opacity: 1; -webkit-transition: opacity 0.3s 0, visibility 0 0; -moz-transition: opacity 0.3s 0, visibility 0 0; transition: opacity 0.3s 0, visibility 0 0; } .cd-user-modal.is-visible .cd-user-modal-container { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .cd-user-modal-container { position: relative; width: 90%; max-width: 600px; background: #fff; margin: 3em auto 4em; cursor: auto; border-radius: 0.25em; -webkit-transform: translateY(-30px); -moz-transform: translateY(-30px); -ms-transform: translateY(-30px); -o-transform: translateY(-30px); transform: translateY(-30px); -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; transition-property: transform; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; transition-duration: 0.3s; } .cd-user-modal-container .cd-switcher{ padding:0px; margin:0px; list-style:none } .cd-user-modal-container .cd-switcher:after { content: ""; display: table; clear: both; } .cd-user-modal-container .cd-switcher li { width: 50%; float: left; text-align: center; } .cd-user-modal-container .cd-switcher li:first-child a { border-radius: .25em 0 0 0; } .cd-user-modal-container .cd-switcher li:last-child a { border-radius: 0 .25em 0 0; } .cd-user-modal-container .cd-switcher a { display: block; width: 100%; height: 50px; line-height: 50px; background: #eee; color: #222; font-size:14px; font-weight:500 } .cd-user-modal-container .cd-switcher a.selected { background: #fff; color: #222; } .wp-social-login-provider-list { padding:0px; margin-top:10px; } .no-touch .cd-form input[type="submit"]:hover { background:#fff !important; color:#222 !important } @media only screen and (min-width: 600px) { .cd-user-modal-container { margin: 4em auto; } .cd-user-modal-container .cd-switcher a { height: 70px; line-height: 70px; } } .cd-form { padding: 1.4em; } .cd-form .fieldset { position: relative; margin: 1.4em 0; } .cd-form .fieldset:first-child { margin-top: 0; } .cd-form .fieldset:last-child { margin-bottom: 0; } .cd-form label { font-size: 14px; font-size: 0.875rem; } .cd-form label.image-replace { /* replace text with an icon */ display: inline-block; position: absolute; left: 15px; top: 50%; bottom: auto; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); height: 20px; width: 20px; overflow: hidden; text-indent: 100%; white-space: nowrap; color: transparent; text-shadow: none; background-repeat: no-repeat; background-position: 50% 0; } .cd-form label.cd-username { background-image: url("../img/cd-icon-username.svg"); } .cd-form label.cd-email { background-image: url("../img/cd-icon-email.svg"); } .cd-form label.cd-password { background-image: url("../img/cd-icon-password.svg"); } .cd-form input { margin: 0; padding: 0; border-radius: 0.25em; } .cd-form input.full-width { width: 100%; } .cd-form input.has-padding { padding: 12px 20px 12px 50px; } .cd-form input.has-border { border: 1px solid #d2d8d8; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; } .cd-form input.has-border:focus { border-color: #ddd; box-shadow: 0 0 5px rgba(52, 54, 66, 0.1); outline: none; } .cd-form input.has-error { border: 1px solid #d76666; } .cd-form input[type=password] { /* space left for the HIDE button */ padding-right: 65px; } .cd-form input[type=submit] { padding: 16px 0; cursor: pointer; background: #2f889a; color: #FFF; font-weight: bold; border: none; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; -webkit-transition: all 450ms ease-out 0s; -moz-transition: all 450ms ease-out 0s; -o-transition: all 450ms ease-out 0s; transition: all 450ms ease-out 0s; } .no-touch .cd-form input[type=submit]:hover, .no-touch .cd-form input[type=submit]:focus { background: #2b353e !important; color:#fff !important; outline: none; } .cd-form .hide-password { display: inline-block; position: absolute; right: 0; top: 0; padding: 6px 15px; border-left: 1px solid #d2d8d8; top: 50%; bottom: auto; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); font-size: 14px; font-size: 0.875rem; color: #343642; } .cd-form .cd-error-message { display: inline-block; position: absolute; left: -5px; bottom: -35px; background: rgba(215, 102, 102, 0.9); padding: .8em; z-index: 2; color: #FFF; font-size: 13px; font-size: 0.8125rem; border-radius: 0.25em; /* prevent click and touch events */ pointer-events: none; visibility: hidden; opacity: 0; -webkit-transition: opacity 0.2s 0, visibility 0 0.2s; -moz-transition: opacity 0.2s 0, visibility 0 0.2s; transition: opacity 0.2s 0, visibility 0 0.2s; } .cd-form .cd-error-message::after { /* triangle */ content: ''; position: absolute; left: 22px; bottom: 100%; height: 0; width: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid rgba(215, 102, 102, 0.9); } .cd-form .cd-error-message.is-visible { opacity: 1; visibility: visible; -webkit-transition: opacity 0.2s 0, visibility 0 0; -moz-transition: opacity 0.2s 0, visibility 0 0; transition: opacity 0.2s 0, visibility 0 0; } @media only screen and (min-width: 600px) { .cd-form { padding: 2em; } .cd-form .fieldset { margin: 2em 0; } .cd-form .fieldset:first-child { margin-top: 0; } .cd-form .fieldset:last-child { margin-bottom: 0; } .cd-form input.has-padding { padding: 16px 20px 16px 50px; } .cd-form input[type=submit] { padding: 16px 0; } } .cd-form-message { padding: 1.4em 1.4em 0; font-size: 14px; font-size: 13px;; line-height: 1.4; text-align: left; } @media only screen and (min-width: 600px) { .cd-form-message { padding: 2em 2em 0; } } .cd-form-bottom-message { position: absolute; width: 100%; left: 0; bottom: -55px; text-align: center; font-size: 14px; font-size: 0.875rem; font-size:14px; } .cd-form-bottom-message a { color: #FFF; text-decoration: underline; } .cd-close-form { /* form X button on top right */ display: block; position: absolute; width: 40px; height: 40px; right: 0; top: -40px; background: url("../img/cd-icon-close.svg") no-repeat center center; text-indent: 100%; white-space: nowrap; overflow: hidden; } @media only screen and (min-width: 1170px) { .cd-close-form { display: none; } } #cd-login, #cd-signup, #cd-reset-password { display: none; } #cd-login.is-selected, #cd-signup.is-selected, #cd-reset-password.is-selected { display: block; } /* -------------------------------- Modules - reusable parts of our design -------------------------------- */ .cd-container { /* this class is used to horizontally align the gallery of items */ position: relative; width: 90%; max-width: 1200px; margin: 0 auto; } .cd-container::after { /* clearfix */ content: ''; display: table; clear: both; } .cd-img-replace { /* replace text with a background-image */ display: inline-block; overflow: hidden; text-indent: 100%; white-space: nowrap; } /* Nice Scrolling Fix */ #ascrail2000{ z-index: 10000 !important; background-color: transparent; width: 15px!important; left:-10px !important; right:auto !important; } .search-header-wrap{ position:relative; float:right; width:67px; height:100px; } .cd-search-trigger:hover:before { border-color:#11649b } .cd-search-trigger:after , .cd-search-trigger:before { -webkit-transition: all 450ms ease-out 0s; -moz-transition: all 450ms ease-out 0s; -o-transition: all 450ms ease-out 0s; transition: all 450ms ease-out 0s; } .cd-search-trigger:hover:after { background:#11649b } #header.stuck .header-stuckycart-wrap .cart_dropdown_link:hover { color:#11649b } #header #slide-side-wrap .mobile-menu-icon span { border-radius:2px; height:2px; } /* -------------------------------- xheader -------------------------------- */ #slide-side-wrap{ position:relative ; height:67px; width:67px; float:right; z-index:3 ; padding-left:13px; } #cd-hamburger-menu, #cd-cart-trigger { position: absolute; left:0px; top:0%; width:100%; height:100% } #cd-hamburger-menu a, #cd-cart-trigger a { width:67px; height:67px; position:relative ; display:block ; overflow:hidden } #slide-side-wrap .mobile-menu-icon span{ background:#2e3233 } #slide-side-wrap .mobile-menu-icon:hover span{ background:#11649b } #cd-hamburger-menu { left: 0; } #cd-hamburger-menu a, #cd-cart-trigger a em { width:30px; height:16px; position:absolute; left:50%; top:50%; margin-left:-15px; margin-top:-8px; } #cd-cart-trigger a em span.first-line { -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; -o-transition:all 0.3s ease; transition:all 0.3s ease; } #cd-cart-trigger a em span.second-line { -webkit-transition:all 0.4s ease; -moz-transition:all 0.4s ease; -o-transition:all 0.4s ease; transition:all 0.4s ease; } #cd-cart-trigger a em span.thrid-line { -webkit-transition:all 0.6s ease; -moz-transition:all 0.6s ease; -o-transition:all 0.6s ease; transition:all 0.6s ease; } #cd-cart-trigger a:hover em.ott-first span{ transform: translate(-100px,0%); -webkit-transform:translate(-100px,0%); -o-transform: translate(-100px,0%); -moz-transform: translate(-100px,0%); } #cd-cart-trigger a em.ott-last span{ transform: translate(100px,0%); -webkit-transform: translate(100px,0%); -o-transform: translate(100px,0%); -moz-transform: translate(100px,0%); } #cd-cart-trigger a:hover em.ott-last span{ transform: translate(0px,0%); -webkit-transform:translate(0px,0%); -o-transform: translate(0px,0%); -moz-transform: translate(0px,0%); } @media only screen and (min-width: 1200px) { #cd-hamburger-menu { display: none; } } #cd-cart-trigger { right: 0; } @media only screen and (min-width: 1200px) { #cd-cart-trigger { /* cart right margin on desktop */ right: 0; } #cd-cart-trigger a { position: relative; border-left: none; } } #main-nav, #cd-cart { position: fixed; top: 0; height: 100%; width: 350px; /* header height */ padding-top: 50px; overflow: hidden; -webkit-overflow-scrolling: touch; box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); z-index: 109; } #cd-cart { padding:70px 0; } @media only screen and (min-width: 768px) { #main-nav, #cd-cart { width: 310px; } } @media only screen and (min-width: 1200px) { #cd-cart { width: 315px; /* header height has changed */ padding-top: 30px; } .admin-bar #cd-cart { padding:60px 0 50px; } } .no-js #main-nav { position: fixed; } #cd-cart { right: -100%; background: rgba(25, 27, 31, .95); -webkit-transition: right 0.3s; -moz-transition: right 0.3s; transition: right 0.3s; padding-bottom:50px; } #cd-cart.speed-in { right: 0; } #cd-cart > * { padding: 0 1em; } #cd-cart h2 { font-size: 14px; font-size: 0.875rem; font-weight: bold; text-transform: uppercase; margin: 1em 0; } #cd-cart .cd-cart-items { padding: 0; } #cd-cart .cd-cart-items li { position: relative; padding: 1em; border-top: 1px solid #e0e6ef; } #cd-cart .cd-cart-items li:last-child { border-bottom: 1px solid #e0e6ef; } #cd-cart .cd-qty, #cd-cart .cd-price { color: #a5aebc; } #cd-cart .cd-price { margin-top: .4em; } #cd-cart .cd-item-remove { position: absolute; right: 1em; top: 50%; bottom: auto; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: 32px; height: 32px; border-radius: 50%; background: url("../img/cd-remove-item.svg") no-repeat center center; } .no-touch #cd-cart .cd-item-remove:hover { background-color: #e0e6ef; } #cd-cart .cd-cart-total { padding-top: 1em; padding-bottom: 1em; } #cd-cart .cd-cart-total span { float: right; } #cd-cart .cd-cart-total::after { /* clearfix */ content: ''; display: table; clear: both; } #cd-cart .checkout-btn { display: block; width: 100%; height: 60px; line-height: 60px; background: #7dcf85; color: #FFF; text-align: center; } .no-touch #cd-cart .checkout-btn:hover { background: #a2dda8; } #cd-cart .cd-go-to-cart { text-align: center; margin: 1em 0; } #cd-cart .cd-go-to-cart a { text-decoration: underline; } @media only screen and (min-width: 1200px) { #cd-cart > * { padding: 0 2em; } #cd-cart .cd-cart-items li { padding: 1em 2em; } #cd-cart .cd-item-remove { right: 2em; } } /* -------------------------------- xgallery -------------------------------- */ main { position: relative; min-height: 100%; background: #eeeff7; padding-top: 70px; z-index: 1; } @media only screen and (min-width: 768px) { main { padding-top: 90px; } } @media only screen and (min-width: 1200px) { main { padding-top: 120px; } } #cd-gallery-items li { margin-bottom: 1.5em; } #cd-gallery-items li img { width: 100%; display: block; border-radius: 0.25em; } @media only screen and (min-width: 768px) { #cd-gallery-items li { width: 48%; float: left; margin-bottom: 2em; margin-right: 4%; } #cd-gallery-items li:nth-child(2n) { margin-right: 0; } } @media only screen and (min-width: 1200px) { #cd-gallery-items li { width: 31%; float: left; margin-bottom: 2.5em; margin-right: 3.5%; } #cd-gallery-items li:nth-child(2n) { margin-right: 3.5%; } #cd-gallery-items li:nth-child(3n) { margin-right: 0; } } #cd-shadow-layer { position: fixed; min-height: 100%; width: 100%; top: 0; left: 0; background: rgba(0, 0, 0, 0.95) none repeat scroll 0 0; cursor: pointer; z-index: 109; display: none; opacity:1 } #cd-shadow-layer.is-visible { display: block; -webkit-animation: cd-fade-in 0.3s; -moz-animation: cd-fade-in 0.3s; animation: cd-fade-in 0.3s; } /* -------------------------------- xkeyframes -------------------------------- */ @-webkit-keyframes cd-fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes cd-fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes cd-fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } /**************************************** Header Search ****************************************/ .header-search-wrap{ float:right; position:relative; width:160px; height:67px; float:right; margin-top:0px; } .search-form-top{ width:160px; } .search-form-top form{ margin-bottom:0px !important; } .search-form-top input[type="text"]{ height:67px; background: rgba(0, 0, 0, 0.05); display: block; float: left; line-height: 16px; margin:0px; text-indent: 0; vertical-align: middle; width:160px; padding:0px 30px 0px 20px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; border:0px; } .search-form-top input[type="text"]:focus{ opacity:1; background: rgba(0, 0, 0, 0.1); } .search-form-top form{ margin:0px; } .search-form-top #search_submit{ position:relative; background:none; text-indent:-99999px; height:67px; width:40px; opacity:1; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; box-shadow:none; padding:0px; border:0px; margin:0px; z-index:2 } .search-form-top #search_submit:focus, .search-form-top #search_submit:hover{ opacity:.8 ; border:0px; } .search-form-top .search-btn-wrap { width:40px; height:67px; position:absolute; right:0px; top:0px; } .search-btn-wrap > i { position:absolute; z-index:1; width:40px; height:67px; right:0px; top:0px; line-height:67px; display:block; text-align:center ; font-size:16px; } .search-btn-wrap:hover > i { opacity:.6 ; } #cd-search .container{ height:100%; position:relative } @media only screen and (max-width: 1169px) { body.nav-on-left.overflow-hidden { overflow: hidden; } } a { color: #69aa6f; text-decoration: none; } img { /* make images responsive */ max-width: 100%; } input { font-family: sans-serif; font-size: 1.6rem; } input[type="search"]::-ms-clear { /* removes close icon - IE */ display: none; } input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration { display: none; } #cd-search input[type="text"], #cd-search input[type="password"], #cd-search input[type="email"]{ width:100%; padding-left:0 ; background:none ; margin-bottom:0px } #cd-search input[type="text"]::-moz-placeholder { color:#000 !important ; font-size:16px; } /* -------------------------------- Main components -------------------------------- */ .cd-main-content, .cd-main-header { /* Force Hardware Acceleration in WebKit */ -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); will-change: transform; } .cd-main-content, .cd-main-header { position: relative; -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; transition: transform 0.3s; } @media only screen and (max-width: 1169px) { .cd-main-content.nav-is-visible, .cd-main-header.nav-is-visible { -webkit-transform: translateX(-260px); -moz-transform: translateX(-260px); -ms-transform: translateX(-260px); -o-transform: translateX(-260px); transform: translateX(-260px); } .nav-on-left .cd-main-content.nav-is-visible, .nav-on-left .cd-main-header.nav-is-visible { -webkit-transform: translateX(260px); -moz-transform: translateX(260px); -ms-transform: translateX(260px); -o-transform: translateX(260px); transform: translateX(260px); } } .cd-main-content { background: #e2e3df; min-height: 100vh; z-index: 2; } .cd-main-header { height: 50px; background: #ffffff; z-index: 3; } .nav-is-fixed .cd-main-header { /* add .nav-is-fixed class to body if you want a fixed navigation on > 1170px */ position: fixed; top: 0; left: 0; width: 100%; } @media only screen and (min-width: 1170px) { .cd-main-header { height: 80px; } .cd-main-header:after { content: ""; display: table; clear: both; } } .cd-logo { position: absolute; top: 12px; left: 5%; } .cd-logo img { display: block; } @media only screen and (max-width: 1169px) { .nav-on-left .cd-logo { left: auto; right: 5%; } } @media only screen and (min-width: 1170px) { .cd-logo { top: 26px; left: 4em; } } .cd-header-buttons { position: absolute; display: inline-block; right: 0; margin:0px; padding:0px; height:40px; margin-top:-23px; top:50% } .cd-header-buttons li { display: block; line-height:none; } @media only screen and (max-width: 1169px) { .nav-on-left .cd-header-buttons { right: auto; left: 5%; } .nav-on-left .cd-header-buttons li { float: right; } } @media only screen and (min-width: 1170px) { .cd-header-buttons { top: 50%; right: 50%; margin-right:-20px; width:40px; z-index:5 } } #header{ position:relative; } .cd-search-trigger, .cd-nav-trigger { position: relative; display: block; width: 44px; height: 44px; overflow: hidden; white-space: nowrap; /* hide text */ color: transparent; z-index: 3; } .cd-search-trigger::before, .cd-search-trigger::after { /* search icon */ content: ''; position: absolute; -webkit-transition: opacity 0.3s; -moz-transition: opacity 0.3s; transition: opacity 0.3s; /* Force Hardware Acceleration in WebKit */ -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .cd-search-trigger::before { /* lens */ left: 10px; top: 13px; width: 18px; height: 18px; border-radius: 50%; border: 3px solid #2e3233; } .cd-search-trigger::after { /* handle */ height: 3px; width: 8px; background: #2e3233; bottom: 11px; right: 12px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .cd-search-trigger span { /* container for the X icon */ position: absolute; height: 100%; width: 100%; top: 0; left: 0; } .cd-search-trigger span::before, .cd-search-trigger span::after { /* close icon */ content: ''; position: absolute; display: inline-block; height: 3px; width: 22px; top: 50%; margin-top: -2px; left: 50%; margin-left: -11px; background: #2e3233; opacity: 0; /* Force Hardware Acceleration in WebKit */ -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; -moz-transition: opacity 0.3s, -moz-transform 0.3s; transition: opacity 0.3s, transform 0.3s; } .cd-search-trigger:hover span::before, .cd-search-trigger:hover span::after { background: #11649b ; } .cd-search-trigger span::before { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .cd-search-trigger span::after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .cd-search-trigger.search-is-visible::before, .cd-search-trigger.search-is-visible::after { /* hide search icon */ opacity: 0; } .cd-search-trigger.search-is-visible span::before, .cd-search-trigger.search-is-visible span::after { /* show close icon */ opacity: 1; } .cd-search-trigger.search-is-visible span::before { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); } .cd-search-trigger.search-is-visible span::after { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .cd-nav-trigger span, .cd-nav-trigger span::before, .cd-nav-trigger span::after { /* hamburger icon in CSS */ position: absolute; display: inline-block; height: 3px; width: 24px; background: #2e3233; } .cd-nav-trigger span { /* line in the center */ position: absolute; top: 50%; right: 10px; margin-top: -2px; -webkit-transition: background 0.3s 0.3s; -moz-transition: background 0.3s 0.3s; transition: background 0.3s 0.3s; } .cd-nav-trigger span::before, .cd-nav-trigger span::after { /* other 2 lines */ content: ''; right: 0; /* Force Hardware Acceleration in WebKit */ -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-transition: -webkit-transform 0.3s 0.3s; -moz-transition: -moz-transform 0.3s 0.3s; transition: transform 0.3s 0.3s; } .cd-nav-trigger span::before { /* menu icon top line */ top: -6px; } .cd-nav-trigger span::after { /* menu icon bottom line */ top: 6px; } .cd-nav-trigger.nav-is-visible span { /* hide line in the center */ background: rgba(46, 50, 51, 0); } .cd-nav-trigger.nav-is-visible span::before, .cd-nav-trigger.nav-is-visible span::after { /* keep visible other 2 lines */ background: #2e3233; } .cd-nav-trigger.nav-is-visible span::before { -webkit-transform: translateX(4px) translateY(-3px) rotate(45deg); -moz-transform: translateX(4px) translateY(-3px) rotate(45deg); -ms-transform: translateX(4px) translateY(-3px) rotate(45deg); -o-transform: translateX(4px) translateY(-3px) rotate(45deg); transform: translateX(4px) translateY(-3px) rotate(45deg); } .cd-nav-trigger.nav-is-visible span::after { -webkit-transform: translateX(4px) translateY(2px) rotate(-45deg); -moz-transform: translateX(4px) translateY(2px) rotate(-45deg); -ms-transform: translateX(4px) translateY(2px) rotate(-45deg); -o-transform: translateX(4px) translateY(2px) rotate(-45deg); transform: translateX(4px) translateY(2px) rotate(-45deg); } @media only screen and (min-width: 1170px) { .cd-nav-trigger { display: none; } } .cd-primary-nav, .cd-primary-nav ul { position: fixed; top: 0; right: 0; height: 100%; width: 260px; background: #2e3233; overflow: auto; -webkit-overflow-scrolling: touch; z-index: 1; /* Force Hardware Acceleration in WebKit */ -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; transition: transform 0.3s; } .cd-primary-nav a, .cd-primary-nav ul a { display: block; height: 50px; line-height: 50px; padding: 0 20px; color: #ffffff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-bottom: 1px solid #3a3f40; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); will-change: transform, opacity; -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; -moz-transition: -moz-transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; } .cd-primary-nav.is-hidden, .cd-primary-nav ul.is-hidden { /* secondary navigations hidden by default */ -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } .cd-primary-nav.moves-out > li > a, .cd-primary-nav ul.moves-out > li > a { /* push the navigation items to the left - and lower down opacity - when secondary nav slides in */ -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); opacity: 0; } @media only screen and (max-width: 1169px) { .nav-on-left .cd-primary-nav, .nav-on-left .cd-primary-nav ul { right: auto; left: 0; } } .cd-primary-nav .see-all a { /* different style for the See all button on mobile and tablet */ color: #69aa6f; } .cd-primary-nav .cd-nav-gallery .cd-nav-item, .cd-primary-nav .cd-nav-icons .cd-nav-item { /* items with picture (or icon) and title */ height: 80px; line-height: 80px; } .cd-primary-nav .cd-nav-gallery .cd-nav-item h3, .cd-primary-nav .cd-nav-icons .cd-nav-item h3 { overflow: hidden; text-overflow: ellipsis; } .cd-primary-nav .cd-nav-gallery .cd-nav-item { padding-left: 90px; } .cd-primary-nav .cd-nav-gallery .cd-nav-item img { position: absolute; display: block; height: 40px; width: auto; left: 20px; top: 50%; margin-top: -20px; } .cd-primary-nav .cd-nav-icons .cd-nav-item { padding-left: 75px; } .cd-primary-nav .cd-nav-icons .cd-nav-item p { color: #2e3233; font-size: 1.3rem; /* hide description on small devices */ display: none; } .cd-primary-nav .cd-nav-icons .cd-nav-item::before { /* item icon */ content: ''; display: block; position: absolute; left: 20px; top: 50%; margin-top: -20px; width: 40px; height: 40px; background-repeat: no-repeat; background-position: center center; background-size: 40px 40px; } .cd-primary-nav .cd-nav-icons .cd-nav-item.item-1::before { background-image: url("../img/line-icon-1.svg"); } .cd-primary-nav .cd-nav-icons .cd-nav-item.item-2::before { background-image: url("../img/line-icon-2.svg"); } .cd-primary-nav .cd-nav-icons .cd-nav-item.item-3::before { background-image: url("../img/line-icon-3.svg"); } .cd-primary-nav .cd-nav-icons .cd-nav-item.item-4::before { background-image: url("../img/line-icon-4.svg"); } .cd-primary-nav .cd-nav-icons .cd-nav-item.item-5::before { background-image: url("../img/line-icon-5.svg"); } .cd-primary-nav .cd-nav-icons .cd-nav-item.item-6::before { background-image: url("../img/line-icon-6.svg"); } .cd-primary-nav .cd-nav-icons .cd-nav-item.item-7::before { background-image: url("../img/line-icon-7.svg"); } .cd-primary-nav .cd-nav-icons .cd-nav-item.item-8::before { background-image: url("../img/line-icon-8.svg"); } @media only screen and (max-width: 1169px) { .cd-primary-nav { /* by default .cd-primary-nav is hidden - trick for iOS devices where you can see the navigation if you pull down */ visibility: hidden; -webkit-transition: visibility 0s 0.3s; -moz-transition: visibility 0s 0.3s; transition: visibility 0s 0.3s; } .cd-primary-nav.nav-is-visible { visibility: visible; -webkit-transition: visibility 0s 0s; -moz-transition: visibility 0s 0s; transition: visibility 0s 0s; } } @media only screen and (min-width: 1170px) { .cd-primary-nav { position: static; padding: 0 150px 0 0; height: auto; width: auto; float: right; overflow: visible; background: transparent; } .cd-primary-nav:after { content: ""; display: table; clear: both; } .cd-primary-nav.moves-out > li > a { /* reset mobile style */ -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); opacity: 1; } .cd-primary-nav ul { position: static; height: auto; width: auto; background: transparent; overflow: visible; z-index: 3; } .cd-primary-nav ul.is-hidden { /* reset mobile style */ -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .cd-primary-nav ul.moves-out > li > a { /* reset mobile style */ -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); opacity: 1; } .cd-primary-nav > li { float: left; margin-left: 3em; } .cd-primary-nav > li > a { /* main navigation buttons style */ position: relative; display: inline-block; height: 80px; line-height: 80px; padding: 0 10px; color: #2e3233; overflow: visible; border-bottom: none; -webkit-transition: color 0.3s, box-shadow 0.3s; -moz-transition: color 0.3s, box-shadow 0.3s; transition: color 0.3s, box-shadow 0.3s; } .cd-primary-nav > li > a:hover { color: #69aa6f; } .cd-primary-nav > li > a.selected { color: #69aa6f; box-shadow: inset 0 -2px 0 #69aa6f; } .cd-primary-nav .go-back, .cd-primary-nav .see-all { display: none; } .cd-primary-nav .cd-secondary-nav, .cd-primary-nav .cd-nav-gallery, .cd-primary-nav .cd-nav-icons { /* dropdown menu style */ position: absolute; top: 80px; width: 100vw; background: #ffffff; padding: 48px 64px 130px; box-shadow: inset 0 1px 0 #e2e3df, 0 3px 6px rgba(0, 0, 0, 0.05); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); -webkit-transition: opacity .3s 0s, visibility 0s 0s; -moz-transition: opacity .3s 0s, visibility 0s 0s; transition: opacity .3s 0s, visibility 0s 0s; } .cd-primary-nav .cd-secondary-nav:after, .cd-primary-nav .cd-nav-gallery:after, .cd-primary-nav .cd-nav-icons:after { content: ""; display: table; clear: both; } .cd-primary-nav .cd-secondary-nav.is-hidden, .cd-primary-nav .cd-nav-gallery.is-hidden, .cd-primary-nav .cd-nav-icons.is-hidden { opacity: 0; visibility: hidden; -webkit-transition: opacity .3s 0s, visibility 0s .3s; -moz-transition: opacity .3s 0s, visibility 0s .3s; transition: opacity .3s 0s, visibility 0s .3s; } .cd-primary-nav .cd-secondary-nav > .see-all, .cd-primary-nav .cd-nav-gallery > .see-all, .cd-primary-nav .cd-nav-icons > .see-all { /* this is the BIG See all button at the bottom of the dropdown menu */ display: block; position: absolute; left: 0; bottom: 0; height: 80px; width: 100%; overflow: hidden; /* reset some inherited style */ margin: 0; padding: 0; } .cd-primary-nav .cd-secondary-nav > .see-all a, .cd-primary-nav .cd-nav-gallery > .see-all a, .cd-primary-nav .cd-nav-icons > .see-all a { position: absolute; width: 100%; height: 100%; top: 0; left: 0; font-size: 2.2rem; font-weight: bold; text-align: center; line-height: 80px; border-top: 1px solid #e2e3df; /* reset some inherited style */ border-bottom: none; margin: 0; padding: 0; -webkit-transition: color 0.2s, background 0.2s, border 0.2s; -moz-transition: color 0.2s, background 0.2s, border 0.2s; transition: color 0.2s, background 0.2s, border 0.2s; } .cd-primary-nav .cd-secondary-nav > .see-all a:hover, .cd-primary-nav .cd-nav-gallery > .see-all a:hover, .cd-primary-nav .cd-nav-icons > .see-all a:hover { background: #2e3233; border-color: #2e3233; color: #ffffff; } .cd-primary-nav .cd-secondary-nav > li { /* change the height according to your needs - you can even set height: auto */ height: 340px; /* here you set the number of columns - use width percentage */ width: 23%; float: left; margin-right: 2.66%; border-right: 1px solid #e2e3df; overflow: hidden; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; } .cd-primary-nav .cd-secondary-nav > li:nth-child(4n+2) { /* +2 because we have 2 list items with display:none */ margin-right: 0; border-right: none; } .cd-primary-nav .cd-secondary-nav > li > a { /* secondary nav title */ color: #69aa6f; font-weight: bold; font-size: 1.6rem; margin-bottom: .6em; } .cd-primary-nav .cd-secondary-nav a { height: 30px; line-height: 30px; padding: 0 18% 0 0; color: #2e3233; border-bottom: none; font-size: 1.4rem; } .cd-primary-nav .cd-secondary-nav a:hover { color: #69aa6f; } .cd-primary-nav .cd-secondary-nav ul { /* Force Hardware Acceleration in WebKit */ -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); } .cd-primary-nav .cd-secondary-nav ul ul { /* tertiary navigation */ position: absolute; top: 0; left: 0; height: 100%; width: 100%; } .cd-primary-nav .cd-secondary-nav ul ul.is-hidden { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } .cd-primary-nav .cd-secondary-nav ul ul .go-back { display: block; } .cd-primary-nav .cd-secondary-nav ul ul .go-back a { color: transparent; } .cd-primary-nav .cd-secondary-nav ul ul .see-all { display: block; } .cd-primary-nav .cd-secondary-nav .moves-out > li > a { /* push the navigation items to the left - and lower down opacity - when tertiary nav slides in */ -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } .cd-primary-nav .cd-nav-gallery li { /* set here number of columns - use width percentage */ width: 22%; float: left; margin: 0 4% 40px 0; } .cd-primary-nav .cd-nav-gallery li:nth-child(4n+2) { /* +2 because we have two additional list items with display:none */ margin-right: 0; } .cd-primary-nav .cd-nav-gallery .cd-nav-item { border-bottom: none; padding: 0; height: auto; line-height: 1.2; } .cd-primary-nav .cd-nav-gallery .cd-nav-item img { position: static; margin-top: 0; height: auto; width: 100%; margin-bottom: .6em; } .cd-primary-nav .cd-nav-gallery .cd-nav-item h3 { color: #69aa6f; font-weight: bold; padding: 0 .4em; } .cd-primary-nav .cd-nav-icons li { /* set here number of columns - use width percentage */ width: 32%; float: left; margin: 0 2% 20px 0; } .cd-primary-nav .cd-nav-icons li:nth-child(3n+2) { /* +2 because we have two additional list items with display:none */ margin-right: 0; } .cd-primary-nav .cd-nav-icons .cd-nav-item { border-bottom: none; height: 80px; line-height: 1.2; padding: 24px 0 0 85px; } .cd-primary-nav .cd-nav-icons .cd-nav-item:hover { background: #f6f6f5; } .cd-primary-nav .cd-nav-icons .cd-nav-item h3 { color: #69aa6f; font-weight: bold; } .cd-primary-nav .cd-nav-icons .cd-nav-item p { display: block; } .cd-primary-nav .cd-nav-icons .cd-nav-item::before { left: 25px; } } .has-children > a, .go-back a { position: relative; } .has-children > a::before, .has-children > a::after, .go-back a::before, .go-back a::after { /* arrow icon in CSS - for element with nested unordered lists */ content: ''; position: absolute; top: 50%; margin-top: -1px; display: inline-block; height: 2px; width: 10px; background: #464c4e; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .has-children > a::before, .go-back a::before { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .has-children > a::after, .go-back a::after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } @media only screen and (min-width: 1170px) { .has-children > a::before, .has-children > a::after, .go-back a::before, .go-back a::after { background: #c9cbc4; } .has-children > a:hover::before, .has-children > a:hover::after, .go-back a:hover::before, .go-back a:hover::after { background: #69aa6f; } } .has-children > a { padding-right: 40px; } .has-children > a::before, .has-children > a::after { /* arrow goes on the right side - children navigation */ right: 20px; -webkit-transform-origin: 9px 50%; -moz-transform-origin: 9px 50%; -ms-transform-origin: 9px 50%; -o-transform-origin: 9px 50%; transform-origin: 9px 50%; } .cd-primary-nav .go-back a { padding-left: 40px; } .cd-primary-nav .go-back a::before, .cd-primary-nav .go-back a::after { /* arrow goes on the left side - go back button */ left: 20px; -webkit-transform-origin: 1px 50%; -moz-transform-origin: 1px 50%; -ms-transform-origin: 1px 50%; -o-transform-origin: 1px 50%; transform-origin: 1px 50%; } @media only screen and (min-width: 1170px) { .has-children > a::before, .has-children > a::after { right: 15%; } .cd-primary-nav > .has-children > a { /* main navigation arrows on larger devices */ padding-right: 30px !important; } .cd-primary-nav > .has-children > a::before, .cd-primary-nav > .has-children > a::after { width: 9px; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; background: #c9cbc4; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: width 0.3s, -webkit-transform 0.3s; -moz-transition: width 0.3s, -moz-transform 0.3s; transition: width 0.3s, transform 0.3s; } .cd-primary-nav > .has-children > a::before { right: 12px; } .cd-primary-nav > .has-children > a::after { right: 7px; } .cd-primary-nav > .has-children > a.selected::before, .cd-primary-nav > .has-children > a.selected::after { width: 14px; } .cd-primary-nav > .has-children > a.selected::before { -webkit-transform: translateX(5px) rotate(-45deg); -moz-transform: translateX(5px) rotate(-45deg); -ms-transform: translateX(5px) rotate(-45deg); -o-transform: translateX(5px) rotate(-45deg); transform: translateX(5px) rotate(-45deg); } .cd-primary-nav > .has-children > a.selected::after { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .cd-secondary-nav > .has-children > a::before, .cd-secondary-nav > .has-children > a::after { /* remove arrows on secondary nav titles */ display: none; } .cd-primary-nav .go-back a { padding-left: 20px; } .cd-primary-nav .go-back a::before, .cd-primary-nav .go-back a::after { left: 1px; } } .cd-search { position: absolute; height: 50px; width: 100%; top: 50px; left: 0; z-index: 3; opacity: 0; visibility: hidden; -webkit-transition: opacity .3s 0s, visibility 0s .3s; -moz-transition: opacity .3s 0s, visibility 0s .3s; transition: opacity .3s 0s, visibility 0s .3s; } .cd-search form { height: 100%; width: 100%; background:#fff ; margin-bottom:0px; } .cd-search input { border-radius: 0; border: none; background: #ffffff; height: 100%; width: 100%; padding: 0 5%; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; border:0px !important; } .cd-search input::-webkit-input-placeholder { color: #c9cbc4; } .cd-search input::-moz-placeholder { color: #c9cbc4; font-size:17px; } .cd-search input:-moz-placeholder { color: #c9cbc4; } .cd-search input:-ms-input-placeholder { color: #c9cbc4; } .cd-search input:focus { outline: none; } .cd-search.is-visible { opacity: 1; visibility: visible; -webkit-transition: opacity .3s 0s, visibility 0s 0s; -moz-transition: opacity .3s 0s, visibility 0s 0s; transition: opacity .3s 0s, visibility 0s 0s; } .nav-is-fixed .cd-search { position: fixed; } @media only screen and (min-width: 1170px) { .cd-search { height: 67px; top: 0px; } .cd-search input { padding: 0 2em; font-size: 3.2rem; font-weight: 300; } } .cd-overlay { /* shadow layer visible when navigation is active */ position: fixed; z-index: 2; height: 100%; width: 100%; top: 0; left: 0; cursor: pointer; background-color: rgba(105, 170, 111, 0.8); visibility: hidden; opacity: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s, -webkit-transform 0.3s 0s; -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s, -moz-transform 0.3s 0s; transition: opacity 0.3s 0s, visibility 0s 0.3s, transform 0.3s 0s; } .cd-overlay.is-visible { opacity: 1; visibility: visible; -webkit-transition: opacity 0.3s 0s, visibility 0s 0s, -webkit-transform 0.3s 0s; -moz-transition: opacity 0.3s 0s, visibility 0s 0s, -moz-transform 0.3s 0s; transition: opacity 0.3s 0s, visibility 0s 0s, transform 0.3s 0s; } @media only screen and (max-width: 1169px) { .cd-overlay.is-visible { -webkit-transform: translateX(-260px); -moz-transform: translateX(-260px); -ms-transform: translateX(-260px); -o-transform: translateX(-260px); transform: translateX(-260px); } .nav-on-left .cd-overlay.is-visible { -webkit-transform: translateX(260px); -moz-transform: translateX(260px); -ms-transform: translateX(260px); -o-transform: translateX(260px); transform: translateX(260px); } .cd-overlay.is-visible.search-is-visible, .nav-on-left .cd-overlay.is-visible.search-is-visible { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } /* -------------------------------- support for no js -------------------------------- */ .no-js .cd-primary-nav { position: relative; height: auto; width: 100%; overflow: visible; visibility: visible; z-index: 2; } .no-js .cd-search { position: relative; top: 0; opacity: 1; visibility: visible; } @media only screen and (min-width: 1170px) { .no-js .cd-primary-nav { position: absolute; z-index: 3; display: inline-block; width: auto; top: 0; right: 150px; padding: 0; } .no-js .nav-is-fixed .cd-primary-nav { position: fixed; } }