Advertisement
Guest User

Untitled

a guest
May 20th, 2019
84
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 3.62 KB | None | 0 0
  1. /* Josh Below */
  2.  
  3. @media (min-width: 767px) {
  4.     .mobileabout{display:none;}
  5.    
  6. }
  7.  
  8. @media (max-width: 767px) {
  9.     .desktopabout{display:none;}
  10.    
  11. }
  12.  
  13.  
  14. @media (max-width: 1200px) {
  15.     .yagerbar{display:none;}
  16.     .map-responsive{display:none;}
  17. }
  18.  
  19. @media (min-width: 1200px) {
  20.     .yagerbar2{      
  21.  
  22.         display:none;}
  23.    
  24. }
  25.  
  26. .yagerbar2 {
  27.   background-color: #33c200;
  28.   box-shadow: 0 3px 0 #33c200;
  29.   left: 0;
  30.   right: 0;
  31.   color: #fdd5d3;
  32.   text-shadow: 0 1px rgba(0,0,0, .3);
  33.   font-size: 14px;
  34.   z-index:9999;
  35. position:fixed !important;
  36.         top:300px !important;
  37.         margin:0 auto;
  38.         padding:20px;
  39.         width:80%;
  40. }
  41.  
  42. .yagerbar2 a { color: #000; text-decoration: none;
  43. font-weight: bold;float:right;font-size:30px;    position: absolute;right: 0px;top: -46px;}
  44. .yagerbar2 a:hover { text-decoration: none; color:#fff;}
  45.  
  46.  
  47. .yagerbar {
  48.   background-color: #33c200;
  49.   box-shadow: 0 3px 0 #33c200;
  50.   position: sticky;
  51.   top: 0;
  52.   left: 0;
  53.   right: 0;
  54.   color: #fdd5d3;
  55.   text-shadow: 0 1px rgba(0,0,0, .3);
  56.   font-size: 14px;
  57.   z-index:9999;
  58. }
  59. .yagerbar a { color: #fff; text-decoration: none;
  60. font-weight: bold;}
  61. .yagerbar a:hover { text-decoration: none; }
  62. .yagerbar-wrap {
  63.   position: relative;
  64.   margin: 0 auto;
  65.   width: 100%;
  66.   max-width: 960px;
  67. }
  68. .yagerbar-content {
  69.   overflow: hidden;
  70.   padding: 7px 0;
  71.   transition: 0.1s ease;
  72.   font-size: 18px;
  73.   text-align:center;
  74.   font-weight:600;
  75.   font-family:'Open Sans', sans-serif;
  76.   width: 93%;
  77.   margin: 0 auto;
  78.   color:white;
  79.  
  80. }
  81. .yagerbar-toggle {
  82.   position: absolute;
  83.   top: 7px;
  84.   right: 15px;
  85.   bottom: 0;
  86.   z-index: 1;
  87.   min-width: 9px;
  88.   min-height: 17px;
  89.   opacity: 0;
  90.  
  91.   cursor: pointer;
  92. }
  93. .yagerbar-toggle:checked { top: 0; right: -133px; min-width: 38px; min-height: 30px; }
  94. .yagerbar-toggle:checked ~ .yagerbar-content { padding: 0; height: 0; }
  95. .yagerbar-toggle:checked ~ .yagerbar-arrow:after { top: 7px; left: 16px; box-shadow: none; }
  96. .yagerbar-toggle:checked ~ .yagerbar-arrow:before {
  97.   position: absolute;
  98.   top: 15px;
  99.   left: 11px;
  100.   border-color: #4c4237 transparent transparent transparent;
  101.   border-width: 8px 8px 0 8px;
  102.   box-shadow: none;
  103. }
  104. .yagerbar-toggle:checked ~ .yagerbar-arrow {
  105.   top: 0;
  106.   right: -130px;
  107.   width: 38px;
  108.   height: 30px;
  109.   border: 3px solid transparent;
  110.   border-top: 0;
  111.   border-radius: 0 0 3px 3px;
  112.     background-color:#33c200;
  113. }
  114. .yagerbar-arrow {
  115.   position: absolute;
  116.   top: 7px;
  117.   right: 15px;
  118.   background-color: #b45210;
  119. }
  120. .yagerbar-arrow:before {
  121.   display: block;
  122.   width: 0px;
  123.   height: 0px;
  124.   border-color: transparent transparent #4B4237 transparent;
  125.   border-style: solid;
  126.   border-width: 0 8px 8px 8px;
  127.   box-shadow: 0 1px 0 rgba(255,255,255,0.2);
  128.   content: '';
  129.   background-color: #33c200;
  130. }
  131. .yagerbar-arrow:after {
  132.   position: absolute;
  133.   left: 5px;
  134.   display: block;
  135.   width: 6px;
  136.   height: 8px;
  137.   background-color: #4B4237;
  138.   box-shadow: 0 1px 0 rgba(255,255,255,0.2);
  139.   content: '';
  140. }
  141. .yagerbar-toggle:hover ~ .yagerbar-arrow:after { background-color: #7d2b27; }
  142. .yagerbar-toggle:hover ~ .yagerbar-arrow:before { border-bottom-color: #7d2b27; border-top-color: #7d2b27; }
  143.  
  144.  
  145.  
  146. .shakebutton {
  147.   animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  148.   transform: translate3d(0, 0, 0);
  149.   perspective: 1000px;
  150. }
  151.  
  152. @keyframes shake {
  153.   10%, 90% {
  154.     transform: translate3d(-1px, 0, 0);
  155.   }
  156.   20%, 80% {
  157.     transform: translate3d(2px, 0, 0);
  158.   }
  159.   30%, 50%, 70% {
  160.     transform: translate3d(-4px, 0, 0);
  161.   }
  162.   40%, 60% {
  163.     transform: translate3d(4px, 0, 0);
  164.   }
  165. }
  166.  
  167.  
  168.  
  169.  
  170. /*Josh Codepen End Test*/
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement