• CSS 25
    Mobile-nav.css Guest on 6th February 2021 10:08:24 AM
    1. @charset "UTF-8";
    2. @-ms-viewport {
    3.   width: device-width;
    4. }
    5.  
    6. @viewport {
    7.   width: device-width;
    8. }
    9.  
    10. /*
    11.  *
    12.  *  Copyright (c) David Bushell | http://dbushell.com/
    13.  *
    14.  */
    15. /* normalize.css v2.0.1 | MIT License | git.io/normalize */
    16. article,
    17. aside,
    18. details,
    19. figcaption,
    20. figure,
    21. footer,
    22. header,
    23. hgroup,
    24. nav,
    25. section,
    26. summary {
    27.   display: block;
    28. }
    29.  
    30. audio,
    31. canvas,
    32. video {
    33.   display: inline-block;
    34. }
    35.  
    36. audio:not([controls]) {
    37.   display: none;
    38.   height: 0;
    39. }
    40.  
    41. [hidden] {
    42.   display: none;
    43. }
    44.  
    45. html {
    46.   font-family: sans-serif;
    47.   -webkit-text-size-adjust: 100%;
    48.   -ms-text-size-adjust: 100%;
    49. }
    50.  
    51. body {
    52.   margin: 0;
    53. }
    54.  
    55. a:focus {
    56.   outline: thin dotted;
    57. }
    58.  
    59. a:active,
    60. a:hover {
    61.   outline: 0;
    62. }
    63.  
    64. h1 {
    65.   font-size: 2em;
    66. }
    67.  
    68. abbr[title] {
    69.   border-bottom: 1px dotted;
    70. }
    71.  
    72. b,
    73. strong {
    74.   font-weight: bold;
    75. }
    76.  
    77. dfn {
    78.   font-style: italic;
    79. }
    80.  
    81. mark {
    82.   background: #ff0;
    83.   color: #000;
    84. }
    85.  
    86. code,
    87. kbd,
    88. pre,
    89. samp {
    90.   font-family: monospace, serif;
    91.   font-size: 1em;
    92. }
    93.  
    94. pre {
    95.   white-space: pre;
    96.   white-space: pre-wrap;
    97.   word-wrap: break-word;
    98. }
    99.  
    100. q {
    101.   quotes: "\201C" "\201D" "\2018" "\2019";
    102. }
    103.  
    104. small {
    105.   font-size: 80%;
    106. }
    107.  
    108. sub,
    109. sup {
    110.   font-size: 75%;
    111.   line-height: 0;
    112.   position: relative;
    113.   vertical-align: baseline;
    114. }
    115.  
    116. sup {
    117.   top: -0.5em;
    118. }
    119.  
    120. sub {
    121.   bottom: -0.25em;
    122. }
    123.  
    124. img {
    125.   border: 0;
    126. }
    127.  
    128. svg:not(:root) {
    129.   overflow: hidden;
    130. }
    131.  
    132. figure {
    133.   margin: 0;
    134. }
    135.  
    136. fieldset {
    137.   border: 1px solid silver;
    138.   margin: 0 2px;
    139.   padding: 0.35em 0.625em 0.75em;
    140. }
    141.  
    142. legend {
    143.   border: 0;
    144.   padding: 0;
    145. }
    146.  
    147. button,
    148. input,
    149. select,
    150. textarea {
    151.   font-family: inherit;
    152.   font-size: 100%;
    153.   margin: 0;
    154. }
    155.  
    156. button,
    157. input {
    158.   line-height: normal;
    159. }
    160.  
    161. button,
    162. html input[type="button"],
    163. input[type="reset"],
    164. input[type="submit"] {
    165.   -webkit-appearance: button;
    166.   cursor: pointer;
    167. }
    168.  
    169. button[disabled],
    170. input[disabled] {
    171.   cursor: default;
    172. }
    173.  
    174. input[type="checkbox"],
    175. input[type="radio"] {
    176.   box-sizing: border-box;
    177.   padding: 0;
    178. }
    179.  
    180. input[type="search"] {
    181.   -webkit-appearance: textfield;
    182.   -moz-box-sizing: content-box;
    183.   -webkit-box-sizing: content-box;
    184.   box-sizing: content-box;
    185. }
    186.  
    187. input[type="search"]::-webkit-search-cancel-button,
    188. input[type="search"]::-webkit-search-decoration {
    189.   -webkit-appearance: none;
    190. }
    191.  
    192. button::-moz-focus-inner,
    193. input::-moz-focus-inner {
    194.   border: 0;
    195.   padding: 0;
    196. }
    197.  
    198. textarea {
    199.   overflow: auto;
    200.   vertical-align: top;
    201. }
    202.  
    203. table {
    204.   border-collapse: collapse;
    205.   border-spacing: 0;
    206. }
    207.  
    208. ul, ol {
    209.   padding: 0;
    210.   list-style: none;
    211. }
    212.  
    213. h1, h2, h3, h4, h5, h6, p, ul, ol {
    214.   margin: 0;
    215. }
    216.  
    217. a {
    218.   text-decoration: none;
    219. }
    220.  
    221. body {
    222.   color: #333;
    223.   position: relative;
    224.   width: 100%;
    225.   min-width: 20em;
    226. }
    227.  
    228. .highlight {
    229.   background: #fff699;
    230.   padding: 0 0.5em;
    231. }
    232.  
    233. .prose ul, .prose ol {
    234.   list-style: outside disc;
    235.   font-size: 1em;
    236.   line-height: 1.5em;
    237.   margin-bottom: 1.5em;
    238. }
    239. .prose p {
    240.   font-size: 1em;
    241.   line-height: 1.5em;
    242.   margin-bottom: 1.5em;
    243. }
    244. .prose p.small {
    245.   color: #666;
    246.   font-size: 0.8125em;
    247.   line-height: 1.84615em;
    248.   margin-bottom: 1.84615em;
    249. }
    250. .prose p.medium {
    251.   color: #666;
    252.   font-size: 0.875em;
    253.   line-height: 1.71429em;
    254.   margin-bottom: 1.71429em;
    255. }
    256. .prose p:last-child {
    257.   margin-bottom: 0;
    258. }
    259. .prose h1 {
    260.   font-size: 1.875em;
    261.   line-height: 1.2em;
    262.   margin-bottom: 0.4em;
    263. }
    264. .prose h2 {
    265.   font-size: 1.5em;
    266.   line-height: 1.25em;
    267.   margin-bottom: 0.5em;
    268. }
    269. .prose a {
    270.   color: #6d7173;
    271.   border-bottom: 1px solid #a1cfe5;
    272.   text-decoration: none;
    273.   outline: none;
    274. }
    275. .prose a:focus, .prose a:hover {
    276.   color: #4ab336;
    277.   border-bottom-color: #77b36b;
    278. }
    279.  
    280. .block {
    281.   position: relative;
    282.   margin: 0 auto;
    283.   padding: 1.5em 1.25em;
    284.   max-width: 60em;
    285. }
    286.  
    287. .close-btn {
    288.   display: block;
    289.   width: 39px;
    290.   height: 45px;
    291.   padding: 0;
    292.   border: 0;
    293.   outline: none;
    294.   background: #333333 url("../images/close-icon.png") left top no-repeat;
    295.   background-size: 39px 45px;
    296.   overflow: hidden;
    297.   white-space: nowrap;
    298.   text-indent: 100%;
    299.   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    300.   opacity: 1;
    301.   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    302. }
    303. .no-svg .close-btn {
    304.   background-image: url("../img/close-btn.png");
    305. }
    306. .close-btn:focus, .close-btn:hover {
    307.   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    308.   opacity: 1;
    309. }
    310.  
    311. .nav-btn {
    312.   display: block;
    313.   /*width: 2.625em;
    314.   height: 2.25em;*/
    315.   padding: 0;
    316.   border: 0;
    317.   outline: none;
    318.   background: #333333 url("../images/menu-button.png") left center no-repeat;
    319.   background-size: 1.875em 1.5em;
    320.   overflow: hidden;
    321.   white-space: nowrap;
    322.   /*text-indent: 100%;*/
    323.   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    324.   opacity: 1;
    325.   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    326. }
    327. .no-svg .nav-btn {
    328.   background-image: url("../img/nav-icon.png");
    329. }
    330. .nav-btn:hover, .nav-btn:focus {
    331.   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    332.   opacity: 1;
    333. }
    334.  
    335. #outer-wrap {
    336.   position: relative;
    337.   overflow: hidden;
    338.   width: 100%;
    339. }
    340.  
    341. #nav {
    342.   z-index: 200;
    343.   position: relative;
    344.   overflow: hidden;
    345.   width: 100%;
    346.   color: #fff;
    347. }
    348. #nav .close-btn {
    349.   display: none;
    350. }
    351. #nav .block-title {
    352.   border: 0;
    353.   clip: rect(0 0 0 0);
    354.   height: 1px;
    355.   margin: -1px;
    356.   overflow: hidden;
    357.   padding: 0;
    358.   position: absolute;
    359.   width: 1px;
    360. }
    361. #nav .block {
    362.   z-index: 2;
    363.   position: relative;
    364.   padding: 0.75em 1.25em;
    365. }
    366. #nav ul {
    367.   *zoom: 1;
    368.   display: block;
    369. }
    370. #nav ul:before, #nav ul:after {
    371.   content: "";
    372.   display: table;
    373. }
    374. #nav ul:after {
    375.   clear: both;
    376. }
    377. #nav li {
    378.   display: block;
    379. }
    380. #nav li a {
    381.   background-color: #EFEFEF;
    382.   display: block;
    383.   color: #363636;
    384.   font-family: "HelveticaNeueW01-57Cn", Helvetica, Verdana, Arial, sans-serif;
    385.   font-size: 18px;
    386.   line-height: 1.0em;
    387.   outline: none;
    388.   text-transform: uppercase;
    389. }
    390. #nav li.gray a {
    391.   background-color: #363636;
    392.   color: #FFF;
    393. }
    394. /*#nav li a:focus, #nav li a:hover {
    395.   color: #fff;
    396.   background: rgba(255, 255, 255, 0.1);
    397. }*/
    398. #nav li.is-active a {
    399.   color: #fff;
    400. }
    401.  
    402. #top {
    403.   z-index: 100;
    404.   position: relative;
    405.   color: #fff;
    406.   background: #333333;
    407. }
    408. #top .block-title {
    409.   margin: 0;
    410.   font-size: 1.875em;
    411.   line-height: 1.2em;
    412.   text-align: center;
    413.   white-space: nowrap;
    414. }
    415. #top .nav-btn {
    416.   position: absolute;
    417.   top: 1.5em;
    418.   left: 1.875em;
    419. }
    420.  
    421. #main {
    422.   background: #fff;
    423. }
    424. #main .block {
    425.   padding: 2.625em 1.875em;
    426. }
    427.  
    428. footer[role="contentinfo"] {
    429.   background: #ddd;
    430. }
    431.  
    432. @media screen and (min-width: 768px) {
    433.   #top .nav-btn {
    434.     border: 0;
    435.     clip: rect(0 0 0 0);
    436.     height: 1px;
    437.     margin: -1px;
    438.     overflow: hidden;
    439.     padding: 0;
    440.     position: absolute;
    441.     width: 1px;
    442.   }
    443.  
    444.   #nav .close-btn {
    445.     border: 0;
    446.     clip: rect(0 0 0 0);
    447.     height: 1px;
    448.     margin: -1px;
    449.     overflow: hidden;
    450.     padding: 0;
    451.     position: absolute;
    452.     width: 1px;
    453.   }
    454.   #nav .block-title {
    455.     border: 0;
    456.     clip: rect(0 0 0 0);
    457.     height: 1px;
    458.     margin: -1px;
    459.     overflow: hidden;
    460.     padding: 0;
    461.     position: absolute;
    462.     width: 1px;
    463.   }
    464.   #nav ul {
    465.     text-align: center;
    466.     white-space: nowrap;
    467.   }
    468.   #nav li {
    469.     display: inline-block;
    470.     border-right: 1px solid rgba(255, 255, 255, 0.1);
    471.   }
    472.   #nav li:last-child {
    473.     border-right: none;
    474.   }
    475.   #nav li a {
    476.     padding: 0.42857em 0.85714em;
    477.   }
    478. }
    479. @media only screen and (max-width: 767px) {
    480.  
    481. #inner-wrap {
    482.   position: relative;
    483.   width: 100%;
    484. }
    485.  
    486.   #nav {
    487.     display: block;
    488.     padding-top: 0;
    489.     position: absolute;
    490.     top: 0;
    491.     width: 100%;
    492.   }
    493.   #nav:not(:target) {
    494.     z-index: 1;
    495.     height: 0;
    496.   }
    497.   #nav:target .close-btn {
    498.     display: block;
    499.   }
    500.   #nav .close-btn {
    501.     position: absolute;
    502.     top: 0;
    503.     left: 0;
    504.   }
    505.   #nav .block {
    506.     position: relative;
    507.     padding: 45px 0 0 0;
    508.   }
    509.   #nav li {
    510.     position: relative;
    511.     border-top: 1px solid #D2D2D2;
    512.   }
    513.   #nav li:last-child {
    514.     border-bottom: 1px solid #D2D2D2;
    515.   }
    516.   #nav li.is-active:after {
    517.     z-index: 50;
    518.     display: block;
    519.     content: "";
    520.     position: absolute;
    521.     top: 50%;
    522.     right: -0.03125em;
    523.     margin-top: -0.625em;
    524.     border-top: 0.625em transparent solid;
    525.     border-bottom: 0.625em transparent solid;
    526.     border-right: 0.625em white solid;
    527.   }
    528.   #nav li a {
    529.     padding: 20px;
    530.   }
    531.   #nav li.arrow a {
    532.       background: #EFEFEF url('../images/mobile-nav-arrow-gray.png') no-repeat 215px 20px;
    533.       padding-right: 50px;
    534.   }
    535.   #nav li.gray.arrow a {
    536.      background: #363636 url('../images/mobile-nav-arrow.png') no-repeat 215px 20px;  
    537.   }
    538.    #nav li.arrow a.active {
    539.       background: #EFEFEF url('../images/mobile-nav-arrow-gray-down.png') no-repeat 215px 20px;
    540.       padding-right: 50px;
    541.   }
    542.   #nav li.gray.arrow a.active {
    543.      background: #363636 url('../images/mobile-nav-arrow-down.png') no-repeat 215px 20px;  
    544.   }
    545.  
    546.   .js-ready #nav {
    547.     height: 100%;
    548.     width: 78%;
    549.     background: #333333;
    550.     -webkit-box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25);
    551.     -moz-box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25);
    552.     box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25);
    553.   }
    554.   .js-ready #nav .block {
    555.     background: #FFF;
    556.   }
    557.   .js-ready #nav .close-btn {
    558.     display: block;
    559.     filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    560.     opacity: 1;
    561.     z-index: 300;
    562.   }
    563.   .js-ready #nav .close-btn:focus, .js-ready #nav .close-btn:hover {
    564.     filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    565.     opacity: 1;
    566.   }
    567.  
    568.   .js-ready #nav {
    569.     left: -78%;
    570.   }
    571.   .js-ready #inner-wrap {
    572.     left: 0;
    573.   }
    574.  
    575.   .js-nav #inner-wrap {
    576.     left: 78%;
    577.   }
    578.   /* darken the main body of the page when nav appears */
    579.   .csstransforms3d.csstransitions.js-ready header, .csstransforms3d.csstransitions.js-ready #body, .csstransforms3d.csstransitions.js-ready footer {
    580.       opacity: 1.0;
    581.     /*  -webkit-transition: opacity 300ms 100ms, -webkit-transform 500ms ease;
    582.     -webkit-transition-delay: ease, 0s;
    583.     -moz-transition: opacity 300ms 100ms ease, -moz-transform 500ms ease;
    584.     -o-transition: opacity 300ms 100ms ease, -o-transform 500ms ease;
    585.     transition: opacity 300ms 100ms ease, transform 500ms ease;*/
    586.      
    587.   }
    588.   .csstransforms3d.csstransitions.js-nav header, .csstransforms3d.csstransitions.js-nav #body, .csstransforms3d.csstransitions.js-nav footer {
    589.         opacity: 0.4;
    590.   }
    591.  
    592.   .csstransforms3d.csstransitions.js-ready #nav {
    593.     left: 0;
    594.     -webkit-transform: translate3d(-100%, 0, 0);
    595.     -moz-transform: translate3d(-100%, 0, 0);
    596.     -ms-transform: translate3d(-100%, 0, 0);
    597.     -o-transform: translate3d(-100%, 0, 0);
    598.     transform: translate3d(-100%, 0, 0);
    599.     -webkit-backface-visibility: hidden;
    600.     -moz-backface-visibility: hidden;
    601.     -ms-backface-visibility: hidden;
    602.     -o-backface-visibility: hidden;
    603.     backface-visibility: hidden;
    604.   }
    605.   .csstransforms3d.csstransitions.js-ready #inner-wrap {
    606.     left: 0 !important;
    607.     -webkit-transform: translate3d(0, 0, 0);
    608.     -moz-transform: translate3d(0, 0, 0);
    609.     -ms-transform: translate3d(0, 0, 0);
    610.     -o-transform: translate3d(0, 0, 0);
    611.     transform: translate3d(0, 0, 0);
    612.     -webkit-transition: -webkit-transform 500ms ease;
    613.     -moz-transition: -moz-transform 500ms ease;
    614.     -o-transition: -o-transform 500ms ease;
    615.     transition: transform 500ms ease;
    616.     -webkit-backface-visibility: hidden;
    617.     -moz-backface-visibility: hidden;
    618.     -ms-backface-visibility: hidden;
    619.     -o-backface-visibility: hidden;
    620.     backface-visibility: hidden;
    621.   }
    622.  
    623.   .csstransforms3d.csstransitions.js-nav #inner-wrap {
    624.     -webkit-transform: translate3d(78%, 0, 0) scale3d(1, 1, 1);
    625.     -moz-transform: translate3d(78%, 0, 0) scale3d(1, 1, 1);
    626.     -ms-transform: translate3d(78%, 0, 0) scale3d(1, 1, 1);
    627.     -o-transform: translate3d(78%, 0, 0) scale3d(1, 1, 1);
    628.     transform: translate3d(78%, 0, 0) scale3d(1, 1, 1);
    629.   }
    630.  
    631.   .csstransforms3d.csstransitions.js-ready #nav .block {
    632.     filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
    633.     opacity: 0.7;
    634.     -webkit-transition: opacity 300ms 100ms, -webkit-transform 500ms ease;
    635.     -webkit-transition-delay: ease, 0s;
    636.     -moz-transition: opacity 300ms 100ms ease, -moz-transform 500ms ease;
    637.     -o-transition: opacity 300ms 100ms ease, -o-transform 500ms ease;
    638.     transition: opacity 300ms 100ms ease, transform 500ms ease;
    639.     -webkit-transform: translate3d(78%, 0, 0) scale3d(0.9, 0.9, 0.9);
    640.     -moz-transform: translate3d(78%, 0, 0) scale3d(0.9, 0.9, 0.9);
    641.     -ms-transform: translate3d(78%, 0, 0) scale3d(0.9, 0.9, 0.9);
    642.     -o-transform: translate3d(78%, 0, 0) scale3d(0.9, 0.9, 0.9);
    643.     transform: translate3d(78%, 0, 0) scale3d(0.9, 0.9, 0.9);
    644.     -webkit-transform-origin: 50% 0%;
    645.     -moz-transform-origin: 50% 0%;
    646.     -ms-transform-origin: 50% 0%;
    647.     -o-transform-origin: 50% 0%;
    648.     transform-origin: 50% 0%;
    649.   }
    650.  
    651.   .csstransforms3d.csstransitions.js-nav #nav .block {
    652.     filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    653.     opacity: 1;
    654.     -webkit-transform: translate3d(0, 0, 0);
    655.     -moz-transform: translate3d(0, 0, 0);
    656.     -ms-transform: translate3d(0, 0, 0);
    657.     -o-transform: translate3d(0, 0, 0);
    658.     transform: translate3d(0, 0, 0);
    659.   }
    660.  
    661.   /*SECOND LEVEL NAV*/
    662.   #nav ul li ul {
    663.       background-color: #FFF;
    664.       margin-top: 0;
    665.   }
    666.   #nav ul li.gray {
    667.     background-color: #666;
    668.   }
    669.   #nav ul li.gray ul {
    670.       background-color: #FFF;
    671.       margin: 0 auto;
    672.       width: 100%;
    673.   }
    674.  
    675.   #nav ul li.gray ul {
    676.       background-color: #666;
    677.       border-top:  1px solid #D2D2D2;
    678.   }
    679.   #nav ul li ul li {
    680.       width: 100%;
    681.       margin: 0 auto;
    682.   }
    683.   #nav ul li.gray ul li {
    684.       width: 80%;
    685.   }
    686.   #nav ul li ul li, #nav ul li ul li:last-child {
    687.       border: 0;
    688.   }
    689.  
    690.   #nav ul li ul li a {
    691.       background-color: #FFF;
    692.       border-top: #EFEFEF;
    693.       font-size: 16px;
    694.       padding: 8px 10px 8px 20px;
    695.       text-transform: uppercase;
    696.   }
    697.    #nav ul li.arrow ul li a, #nav ul li.gray.arrow ul li a {
    698.       background-image: none;
    699.    }
    700.    #nav ul li.arrow ul li a {
    701.       background-color: #FFF;
    702.       border-top: 1px solid #EFEFEF;
    703.    }
    704.    #nav ul li.gray.arrow ul li a {
    705.       background-color: #666;
    706.       border-top: 1px solid #EFEFEF;
    707.       padding: 20px 0;
    708.    }
    709.    #nav ul li.gray.arrow ul li:first-child a {
    710.        border-top: 0;
    711.    }
    712.  
    713. }

    Paste is for source code and general debugging text.

    Login or Register to edit, delete and keep track of your pastes and more.

    Recent Pastes

    Cartoon Sexy

    Энергонадзор

    Kentalsusumanis

    Susukental

    Pinoy Sexy Videos

    Hot Clips From[...]

    2013 - 2021[...]

    Tiktok Sexy

    Arab Sexy Video

    Asia Sexy

    Raw Paste

    Login or Register to edit or fork this paste. It's free.

    Copyright © 2021 Paste. All rights reserved.
    Powered by Stikked | pastebin