My Gaming Buddy

.hero150 { background: hsla(0, 0%, 100%, .2); height: calc(100vh - 64px); margin-top: 4px; position: relative; width: 100%; z-index: 2; } .hero150 .img { background: hsla(0, 0%, 100%, .2); bottom: 0; height: 100%; left: 0; position: absolute; right: 0; top: 0; width: 100%; } .box { position: relative; max-width: 600px; width: 90%; height: 400px; background: #fff; box-shadow: 0 0 15px rgba(0,0,0,.1); } /* common */ .ribbon { width: 150px; height: 150px; overflow: hidden; position: absolute; } .ribbon::before, .ribbon::after { position: absolute; z-index: -1; content: ''; display: block; border: 5px solid #FFC107; } .ribbon span { position: absolute; display: block; width: 225px; padding: 15px 0; background-color: #FFC107; box-shadow: 0 5px 10px rgba(0,0,0,.1); color: #fff; font: 700 18px/1 'Lato', sans-serif; text-shadow: 0 1px 1px rgba(0,0,0,.2); text-transform: uppercase; text-align: center; } /* top right*/ .ribbon-top-right { top: -10px; right: -10px; } .ribbon-top-right::before, .ribbon-top-right::after { border-top-color: transparent; border-right-color: transparent; } .ribbon-top-right::before { top: 0; left: 0; } .ribbon-top-right::after { bottom: 0; right: 0; } .ribbon-top-right span { left: -25px; top: 30px; transform: rotate(45deg); } @-webkit-keyframes pulse { 0% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes pulse { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } .pulse { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-name: pulse; animation-name: pulse; -webkit-animation-duration: 1s; animation-duration: 5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .bg-primary, .bg-primary:hover,.bg-primary:focus, a.bg-primary:focus, a.bg-primary:hover, button.bg-primary:focus, button.bg-primary:hover, .badge-primary { background:#681C65 !important; } .btn-primary, .btn-primary:hover { color: #fff; background-color: #681C65 !important; border-color: #681C65 !important; } .text-primary, .filters_col .distance span { color: #681C65 !important; } .btn-outline-primary { color: #681C65 !important; border-color: #681C65 !important; } .btn-outline-primary:hover { background:none !important; } .text-primary a { color: #681C65 !important; } [ppt-nav].active-underline > ul > li.active > a { border-bottom: 2px solid #681C65!important; } .bg-secondary, .bg-secondary:hover, .bg-secondary:focus, a.bg-secondary:focus, a.bg-secondary:hover, button.bg-secondary:focus, button.bg-secondary:hover, .irs-bar { background-color:#FFC107 !important; } .btn-secondary, .btn-secondary:hover, .btn-secondary:focus { color: #fff; background-color: #FFC107 !important; border-color: #FFC107 !important; } .text-secondary { color: #FFC107 !important; } .text-secondary a { color: #FFC107 !important; } .btn-outline-secondary { color: #FFC107 !important; border-color: #FFC107 !important; } .btn-outline-secondary:hover { background:none !important; } .custom-control-input:checked~.custom-control-label::before, .filter_sortby a.active { color: #fff; border-color: #FFC107 !important; background-color: #FFC107 !important; }