.navbar-nav > li > a{padding: 15px;} .compact .navbar-nav > li > a{font-size: 13.75px !important;} .cst-service{top: 43px !important;} /* New DMJ Beta */ .hoursBox{ width: 20%; heght: 100%; /* padding:14px; */ padding-bottom: 14px; padding-left: 14px; padding-right: 14px; /* background:linear-gradient( 90deg, rgba(66,103,178,1) 10%, rgba(66,103,178,.3) 25%, rgba(66,103,178,.1) 50%, rgba(66,103,178,.3) 75%, rgba(66,103,178,1) 90% ); */ font-size: 2.8em; font-weight: 300; color: #999; } h1{padding:2px; margin: 2px;} .textBox{ font-family: "Open Sans", sans-serif; width: 20%; heght: 100%; /* background:linear-gradient( 90deg, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 50%, rgba(0,0,0,1) 75%, rgba(0,0,0,1) 90% ); */ font-size: 1.2em; font-weight: 400; color: #fff; padding-left: 2px; padding-right: 2px; padding-top: 1px; padding-bottom: 1px; } .tg{border-collapse:collapse;} .tg td{border-collapse:collapse;} .tg th{overflow:hidden;} @media all and (max-width: 479px) { .lpT, .lpt table, .lpt thead, .lpt tbody, .lpt th{display: block;}} @media all and (max-width: 479px) { .dmjTbl{ width: 100%; font-family: "Open Sans", sans-serif; } .dmjTH{ } .theadDJ{width: 100%;} .dmjHfont{color: #fff; font-size: 5.0vw; font-family: "Open Sans", sans-serif; } .dmjDHMS{color: #F00; font-size: 5.0vw; font-family: "Open Sans", sans-serif; } .dmjDHMS-G{color: #f00; font-size: 6.0vw; font-family: "Open Sans", sans-serif; } .dmjDHMS-G2{color: #999; font-size: 4.0vw; font-family: "Open Sans", sans-serif; } .dmjDHMS-S{color: #F00; font-size: 3.5vw; font-family: "Open Sans", sans-serif; } } @media only screen and (min-width: 480px){ .dmjTbl{ background: transparent !important; width: 45%; font-family: "Open Sans", sans-serif; } .dmjTH{background: transparent !important;} .dmjHfont{color: #000; font-size: 2.5vw; padding-right: 0px; font-family: "Open Sans", sans-serif;} .dmjDHMS{color: #f00 !important; font-size: 1.8vw; font-family: "Open Sans", sans-serif; } .dmjDHMS-G{color: #f00; font-size: 1.8vw; font-family: "Open Sans", sans-serif; } .dmjDHMS-G2{color: #000; font-size: 1.8vw; font-family: "Open Sans", sans-serif; } .dmjDHMS-S{color: #F00; font-size: 1.0vw; font-family: "Open Sans", sans-serif; } } .dmjFcFS{margin-left: 250px !important; margin-right: 250px !important;} .content-alert-banner-message{background-color: #000; background-image: url("https://pictures.dealer.com/n/napletonhondaoaklawn/1234/f90a94e581d04e8f9e75ab7cabf19fa4.jpg"), url("https://pictures.dealer.com/n/napletonhondaoaklawn/1234/3bf854eedf7f49f19c21e754fb4c27d4.jpg");/*, linear-gradient( 90deg, rgba(0,0,0,.4) 14%, rgba(0,156,0,.9) 25%, rgba(0,156,0,.9) 75%, rgba(0,156,0,.4) 86% );*/ background-repeat: no-repeat; background-size: contain !important; background-position: left center, right center, right 0em top 0em; background-size: contain; font-size: 21px; font-weight: bold !important; padding: 2px; margin: -13px !important; bottom-margin: 12px !important; color: #f00 !important;} .memDMJ{font-size: 1.5vw;} .text-link.text-link-inverse.content-alert-banner-link{/* background: #000 !important; */ opacity: .8 !important; color: #fff; margin-left: -10px; font-size: 24px; padding-left: 20px; padding: 4px;} .dmjIncrease{ text-transform: uppercase; background-image: linear-gradient( -260deg, #009900 5%, #fffd74 16%, #93E9BE 25%, #0000FF 35%, #0000FF 65%, #93E9BE 75%, #fffd74 84%, #009900 95% ); background-size: auto auto; background-clip: border-box; background-size: 200% auto; color: #000; background-clip: text; text-fill-color: transparent; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: textclip 7s linear infinite; display: inline-block; font-size: 46px; margin-bottom: -12px; } @keyframes textclip { to { background-position: -200% center; } } /* New DMJ Beta */ /* fdbarfety 13120162 */ .page-header .inventory-search-form {left: 620px; width: 34%;} .page-header .inventory-search-form input[type="search"] {height: 42px;} .page-header .inventory-search-form .btn {border-radius: 0 4px 4px 0;} [data-location="vehicle-value-a-trade-button"] {background: rgb(173,216,230,.9); color: #000; font-size: 15px;} [data-location="vehicle-eprice-button"] { background-image: linear-gradient(to right, #FF512F 0%, #F09819 51%, #FF512F 100%); padding: 22px 45px; text-align: center; text-transform: uppercase; transition: 0.5s; background-size: 200% auto; color: white; box-shadow: 0 0 20px #eee; border-radius: 5px; display: block; } [data-location="vehicle-eprice-button"]:hover { background-image: linear-gradient(to left, #FF512F 0%, #F09819 100%, #FF512F 100%); color: #000; text-decoration: none; } /*migrating custom styling from the display config eprice button to vehicle CTA eprice button for DESKTOP*/ .vdp .btn-info {border: solid 1px; border-color: #924f01; padding: 12px; background: linear-gradient(#ffef03,#ffd503); border-radius: 8px; background-image: linear-gradient(#ff4e00, #ff8a00); text-decoration: none; font-style: italic; font-weight: bold; font-size: 21px; text-shadow: 0px 0px #000000; color: #000000;} .vdp .btn-info:hover {border: solid 1px; border-color: #924f01; background-color: #ff0000; background-image: none; color: #ffffff;} .form-group label, .ddc-form-group label, .ddc-form-group-container label{ padding-right:10px; padding-left:2px; padding-top:4px;} .navbar-nav .honda {background-color: #1f4588; color: #fff !important; height: 61px; border-style: solid; border-width: 1px; border-color: #000f44; display: flex; align-items: center;} /* ddcbatot DNA4455597 */ .compact.navbar-default {height: 62px;} .compact .navbar-nav>li>a {height: 61px;} .navbar-nav .dropdown .nav-with-children {background-color: #0a468d; color: #ffffff !important; border-style: solid; border-width: 1px; border-color: #000f44; display: flex; align-items: center;} .navbar-nav .dropdown .nav-with-children:hover {background-color: #007aeb; border-color: #0a468d;} .navbar-nav .nav-no-children {background-color: #1f4588; color: #fff !important; height: 61px; border-style: solid; border-width: 1px; border-color: #000f44; display: flex; align-items: center;} .navbar-nav .nav-no-children:hover {background-color: #007aeb!important; color: #ffffff !important;} .navbar-nav .dropdown .homeLink {display: flex; align-items: center;} .navbar-nav .home {background: #0a468d; height: 61px; color:#000 !important;} .navbar-nav .dropdown.open .nav-with-children {background-color: #fff; color: #000 !important;} .navbar-nav .dropdown.open:hover .nav-with-children {background-color: #007aeb; color: #fff !important; border-bottom: 2 px solid #000!important;} .navbar-default .navbar-nav>.currentPage>a {background-color: #007aeb!important;} .navbar-default .compact .navbar-nav>.currentPage>a:hover {background-color: #007aeb;} .navbar-default .navbar-nav>li>a {padding-top: 15px; padding-bottom: 15px;} .navbar-default .navbar-nav>li>a:hover {background: #007aeb;} .navbar-default .navbar-nav>li.nav-last>a {padding-top: 10px; padding-bottom: 10px;} .compact .navbar-nav .dropdown>a {color: var(--color-neutral-0);} .fancyFontVLP{ font-face: alegra sans; font-size: 19px; font-weight: 200; color: #fff; } .fancyFontVLP a{ font-face: alegra sans; font-size: 14px; font-weight: 200; color: #fff; } /* dtjeremyw adjust nav tab spacing */ .navbar-nav .dropdown .sublabelled {min-width:95px; padding: 10px 15px;} /* dtjeremyw fix img disp */ .ddc-content.content-default .content img {display:inline-block;} /* dtjeremyw style check availability button */ .pricing .customCheckAvailability .ui-button {background: transparent linear-gradient(#0D65BF, #094481) repeat scroll 0% 0%;; padding: 10px; color: white; font-style: italic; font-weight: 300; text-shadow: 1px -1px 0px rgba(0, 0, 0, 0.75); letter-spacing: 0.1em; float: right; margin-top: 5px; width: 100%; text-align: center} .customCheckAvailability .ui-button:hover {background: black; text-decoration: none;} /* M-00205062 billyh */ .page-header a.finance {position: absolute; top: 81px; right: 0px; font-size: 14px;width: 140px;color: black;text-shadow: none;font-weight: bold;} .page-header a.btn-sm.finance::after {font-family: 'ddc-icons'; content: "\e6a4"; line-height: 1;margin-left: 5px;} .page-header a.service {position: absolute; top: 81px; right: 0px; font-size: 14px;width: 140px;color: black;text-shadow: none;font-weight: bold;} .page-header a.btn-sm.service::after {font-family: 'ddc-icons'; content: "\e6bf"; line-height: 1;margin-left: 5px;} .page-header a.finance, .page-header a.service {background: #00ff00; background: -webkit-linear-gradient(#00ff00, #00b300); background: -moz-linear-gradient(#00ff00, #00b300); background: -o-linear-gradient(#00ff00, #00b300); background: linear-gradient(#00ff00, #00b300);} .page-header a.finance:hover, .page-header a.service:hover {opacity:0.8;} .shrink-header-nav .btn.btn-primary.btn-sm.finance, .shrink-header-nav .btn.btn-primary.btn-sm.service {display: none;} /* M-00235953 billyh */ .cst-wanted {position: absolute; top: 51px; right: 298px;} .cst-wanted:hover {opacity:0.8;} .page-header.sticky-header-nav.shrink-header-nav .cst-wanted {display:none;} /* M-00258609 billyh */ .dealerscience {margin-top: 5px;} /*ddcandyg M-00444747*/ /*.inventoryList .item .hproduct[data-type="new"] .pricing-area .pricing .msrp .value { text-decoration: line-through; font-weight: bold; font-size: 18.2px; color: #000000; } /* M-00524626 JLC */ .compact .navbar-nav .dropdown .dropdown-menu.row {margin-top:22px;} /* Start 'vdp-new-price-value-msrp' (do not modify this line) */ /* Modified by andrewreilly1 on 08/16/17 10:49 AM EDT */ .vdp .inv-type-new.pricing .msrp .price { text-decoration: none; font-weight: bold; font-size: 23.4px; color: #000000; } /* End 'vdp-new-price-value-msrp' (do not modify this line) */ .page-header .cst-service img { display: inline; width: 100%; height: auto; } .page-header .cst-service { position: absolute; top: 13px; right: 385px; width: 160px; } /* M-00429568 ddcbobc */ .shrink-header-nav.page-header .cst-service { top: 10px; right: 210px; width: 90px; } /* ddcjosiahl M-00439326 */ .custom-header-bbb {position: absolute; top: 65px; left: 400px; } .custom-header-bbb img {max-width: 210px; } .page-header.sticky-header-nav.shrink-header-nav .custom-header-bbb {display: none; } /* ddcrandyh M-00441617 */ .inventoryList .media a.video { font-size: 0px; width: 225px; height: 30px; background-color: gray; margin-top: 5px; margin-left: 5px; } .inventoryList .media a .ddc-icon-video::before { content: "Play Video"; font-size: 16px; margin-top: 6px; color: #FFF; font-weight: bold; } /* Start 'vdp-new-price-value-final-price' (do not modify this line) */ /* Modified by vincentmoore on 01/06/18 12:41 PM EST */ .vdp .inv-type-new.pricing .final-price .price { text-decoration: none; font-weight: bold; font-size: 23.4px; color: #000000; } /* End 'vdp-new-price-value-final-price' (do not modify this line) */ /* ddcrandyh M-00444753 */ .vdp .ddc-wrapper .ui-tabs .ui-widget-header li.ui-state-default:nth-child(2) > a:link { background-color: #FF0000; color: #FFF; } .fancyFont{ font-face: alegra sans; font-size: 21px; font-weight: 200; color: #333333; } .fancyFontVLP{ font-face: alegra sans; font-size: 18px; font-weight: 200; color: #fff; } /* Start 'vdp-ePrice-button' (do not modify this line) */ /* Modified by ddcawehmeyer on 06/08/17 03:54 PM EDT */ .vdp .pricing .eprice.button { text-decoration: none; font-style: italic; font-weight: bold; font-size: 21px; text-shadow: 0px 0px #000000; color: #000000;} .vdp .pricing .eprice.button:hover { color: #ffffff; } .vdp .pricing .eprice.button { border: solid 1px; border-color: #924f01; padding:12px; width: 270px; background: linear-gradient(#ffef03,#ffd503); border-radius:8px; background-image: linear-gradient(#ff4e00, #ff8a00);} .vdp .pricing .btn.eprice.button:hover { border: solid 1px; border-color: #924f01; background: #ff0000; background-color: #ff0000; background-image: none; } /* End 'vdp-ePrice-button' (do not modify this line) */ .vdp .inv-type-new.pricing .abSub .label { text-decoration: none; font-family: open sans; font-weight: 300; font-size: 17.0px; color: #04af00; } .vdp .inv-type-new.pricing .abSub .price{ text-decoration: none; font-family: open sans; font-weight: 300; font-size: 19.0px; color: #04af00; } .vdp .inv-type-new.pricing .rebate .label { text-decoration: none; font-family: open sans; font-weight: 300; font-size: 15.0px; color: #04af00; } .vdp .inv-type-new.pricing .rebate .price{ text-decoration: none; font-family: open sans; font-weight: 300; font-size: 15.0px; color: #04af00; } .vdp .inv-type-new.pricing .final-price .label { text-decoration: none; font-face: open sans; font-weight: bold; padding-top: 10px; padding-bottom: 15px; font-size: 18px; color: #04af00; } .vdp .inv-type-new.pricing .final-price .price { text-decoration: none; font-face: open sans; font-weight: bold; padding-top: 10px; padding-bottom: 15px; font-size: 26px; color: #04af00; } /* Start 'vdp-used-price-label-final-price' (do not modify this line) */ /* Modified by sarahvespa on 09/01/17 04:30 PM EDT */ .vdp .inv-type-used.pricing .final-price .label { text-decoration: none; font-weight: bold; font-size: 17px; color: #03cc01; } /* End 'vdp-used-price-label-final-price' (do not modify this line) */ /* Start 'vdp-used-price-value-final-price' (do not modify this line) */ /* Modified by ddcawehmeyer on 09/21/17 03:18 PM EDT */ .vdp .inv-type-used.pricing .final-price .price { text-decoration: none; font-weight: bold; font-size: 30px; color: #03cc01; } /* End 'vdp-used-price-value-final-price' (do not modify this line) */ .inventory-featured-full-page .hproduct .pricing .internetPrice .label, .inventory-featured-full-page .hproduct .pricing .internetPrice .value {color: #03cc01; font-face: roboto; font-weight:600; font-size: 1.4em; } #bcrumb Ol { margin: 0; padding: 0; list-style-type: none; text-align: rigth; font-family:"Roboto"; font-weight:200; } #bcrumb Ol li { display: inline;font-family:"Roboto"; font-weight:200; } #bcrumb Ol li a { text-decoration: none; padding: 4px 4px; color: #000; font-family:"Roboto"; font-weight:200; } #bcrumb Ol li a:hover { color: #fff; background-color: #00b4ff; font-family:"Roboto"; font-weight:200; } div.MenuService{ background-image: linear-gradient(#8b0000, #ff0000); background: linear-gradient(#ff0000,#8b0000); height: 90%; width: 100%; border: #000000 solid 1px; border-radius:7px; color: white; margin-bottom: 4px; padding:9px; box-shadow: 0 1px 2px #fff, /*bottom external highlight*/ 0 -1px 1px #860000, /*top external shadow*/ inset 0 -1px 1px rgba(0,0,0,0.5), /*bottom internal shadow*/ inset 0 1px 1px rgba(255,255,255,0.7); /*top internal highlight*/ } div.MenuService:hover{ background: linear-gradient(#8b0000,#ff0000); height: 90%; width: 100%; border-radius:9px; color: white; margin: 0px; padding:9px; box-shadow: 0px 0px 0px 1px #000 inset; } .modelButtons { background: #12489e; height: 100%; width: 100%; font-face: "open Sans"; font-size: 16px; border: #000000 solid 1px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; color: white; margin: 0px; box-shadow: 0px 0px 0px 1px #fff inset; padding:15px; text-align:center!important; vertical-align:middle!important; display:inline-block; } .modelButtons:hover { background: #36F; height: 100%; width: 99%; font-face: "open Sans"; font-size: 16px; border: #000000 solid 1px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; color: white; margin: 0px; box-shadow: 0px 0px 0px 1px #fff inset; padding:15px; text-align:center !important; vertical-align:middle !important; display:inline-block; } .modelButtonsG { background: #009900; height: 100%; width: 100%; font-face: "open Sans"; font-size: 16px; border: #000000 solid 1px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; color: white; margin: 0px; box-shadow: 0px 0px 0px 1px #fff inset; padding:15px; text-align:center !important; vertical-align:middle !important; display:inline-block; } .modelButtonsG:hover { background: #00f400; height: 100%; width: 99%; font-face: "open Sans"; font-size: 16px; border: #000000 solid 1px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; color: white; margin: 0px; box-shadow: 0px 0px 0px 1px #fff inset; padding:13px; text-align:center !important; vertical-align:middle !important; display:inline-block; } /*Top Model Buttons*/ .modelButtons2 { background: #12489e; height: 100%; width: 100%; font-face: "open Sans"; font-size: 26px; border: #000000 solid 1px; border-top-left-radius: 5px; border-top-right-radius: 5px; color: white; margin: 0px; box-shadow: 0px 0px 0px 1px #fff inset; padding:15px; text-align:center !important; vertical-align:middle !important; display:inline-block; } .modelButtons2:hover { background: #36F; height: 100%; width: 99%; font-face: "open Sans"; font-size: 26px; border: #000000 solid 1px; border-top-left-radius: 5px; border-top-right-radius: 5px; color: white; margin: 0px; box-shadow: 0px 0px 0px 1px #fff inset; padding:15px; text-align:center !important; vertical-align:middle !important; display:inline-block; } .modelButtonsG2 { background: #009900; height: 100%; width: 100%; font-face: "open Sans"; font-size: 26px; border: #000000 solid 1px; border-top-left-radius: 5px; border-top-right-radius: 5px; color: white; margin: 0px; box-shadow: 0px 0px 0px 1px #fff inset; padding:15px; text-align:center !important; vertical-align:middle !important; display:inline-block; } .modelButtonsG2:hover { background: #00f400; height: 100%; width: 99%; font-face: "open Sans"; font-size: 26px; border: #000000 solid 1px; border-top-left-radius: 5px; border-top-right-radius: 5px; color: white; margin: 0px; box-shadow: 0px 0px 0px 1px #fff inset; padding:13px; text-align:center !important; vertical-align:middle !important; display:inline-block; } .box1:hover{ opacity: .7; } a.anchor { display: block; position: relative; top: -313px; visibility: hidden; } .clock-text{ color: #f00; font-weight: bold; } #Main-header_container { background-image: url(""), linear-gradient( rgb(255,0,0, 0.5), rgb(0,0,0),rgb(0,1,1)); background-repeat: no-repeat; background-attachment: fixed; background-position: center bottom; background-size: 100%; border:1px solid #666; padding-top: 2px; bottom: 0px; padding-right: 0px; height:145px; left:0; position: fixed; z-index: 9999; width:100%; } /*Also Must Add Font below for Button style. This is commented out so just copy the whole thing*/ .countdown-clock-default .countdown-dark span{ background: #fff; color:#ff0000 !important; font-weight: bold; } /*Also Must Add Font below for Button style. This is commented out so just copy the whole thing*/ .fancyFont21{ /* @font-face{ font-family: 'BONEAPA'; src: url('http://napleton.com/BONEAPA.TTF') format('truetype'); } */ padding-top: 19px; font-size: 36px; font-weight: bold; color: #ff0; text-shadow:1px 1px 1px #000, 1px 1px 1px #ff0; } #Main-header_container { background: -webkit-linear-gradient( rgb(0,0,0),rgb(0,0,0)); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(rgb(0,0,0), rgb(0,0,0),rgb(0,1,1) ); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient( rgb(0,0,0), rgb(0,0,0),rgb(0,1,1),rgb(0,0,0)); /* For Firefox 3.6 to 15 */ background: linear-gradient( rgb(0,0,0, 0.9), rgb(0,0,0),rgb(0,1,1)); /* Standard syntax (must be last) */ background: -ms-linear-gradient(#017ac1, #00bcdf); /* background-image: url("https://pictures.dealer.com/n/napletonhondaoaklawn/0188/fd7f6ab0e7b402e01cf285061a7a6334x.jpg"), linear-gradient( rgb(0,0,0, 0.7), rgb(0,0,0),rgb(0,1,1)); */ -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; background-position: center bottom; z-index: 9999 !important; background-size: 100%; border:1px solid #666; padding-top: 2px; bottom: 0px; padding-right: 0px; height:145px; left:0; position: fixed; width:100%; } .DMJcntBox{ background: #fff; border-radius:10px; padding: 0px !important; } @keyframes jiggle { 45%, 65% { transform: scale(1.0, 1.0) } 50% { transform: scale(1.1, 0.9) } 55% { transform: scale(0.9, 1.1) translate(0, -5px) } 60% { transform: scale(1.0, 1.0) translate(0, -5px) } } @keyframes jiggle { 45%, 65% { transform: scale(1.0, 1.0) } 50% { transform: scale(1.1, 0.9) } 55% { transform: scale(0.9, 1.1) translate(0, -5px) } 60% { transform: scale(1.0, 1.0) translate(0, -5px) } } #EddieFloat { float: right; margin: 0 0 0 15px; } #EddieFloat2 { float: left; margin: 0 15px 0px 0px; } .yui3-u-1.ddc-span12{ padding: 30px; } .alias-sitebuilder-honda-oil-change-special-2 .type-1.contact-form.ddc-content{ background: #868686; padding: 10px;} .newWiggle{ border: 0; animation: jiggle 2s infinite ease-in; } a[href="/express-credit-approval.htm"]{ background: #009900;} .custom-header-bbb{visibility: hidden;} /*owen.perks 13171011*/ .mega-menu-inner-curtain,.dropdown-menu {background:var(--color-primary-700);} .navigation-default .dropdown-menu h4, .navigation-default .dropdown-menu a:not(.btn), .navbar-nav, .ddc-mega-menu-nav .contact-form label{color: #FFF;} /* fdbarfety 13175011 */ .ddc-footer{background-color: #fff;} .ddc-footer .navigation-default {float: none; width: 100%; display: flex; justify-content: center; top: -50px; left: 150px} .ddc-footer .navigation-default ul li>a {display: block; padding: 35px 10px;} .ddc-footer .navigation-default ul li {height: auto;} .ddc-footer .non-mega-menu .nav-list>li>a {color: var(--color-neutral-0); height: 60px; display: flex; justify-content: center; align-items: center} .ddc-footer .non-mega-menu .nav-list>li>a:hover {color: var(--color-neutral-0); height: 60px;} .ddc-footer .navigation-default ul li>a {padding: 32px 10px;} .fireDMJ { color: #ff0000; /* Light text color */ font-weight: bolder; font-size: 16px; /* Text size */ /* Multi-layered text-shadow for fire effect */ text-shadow: 0px -1px 3px #fff, /* Innermost layer - intense heat (white) */ 0px -2px 6px #FF3, /* Second layer - core of flame (yellow) */ 0px -6px 12px #F90, /* Middle layer - body of flame (orange) */ 0px -10px 20px #C33; /* Outermost layer - edges of flame (red) */ } /* Define the animation named "flicker" */ @keyframes flicker { /* Initial state of animation */ 0%, /* Final state of animation */ 100% { text-shadow: 0 -1px 3px #fff, /* Innermost layer - intense heat (white) */ 0 -2px 6px #Ff0, /* Second layer - core of flame (yellow) */ 0 -6px 12px #F90, /* Middle layer - body of flame (orange) */ 0 -10px 20px #ff7e00; /* Outermost layer - edges of flame (red) */ } /* Middle state of animation */ 50% { text-shadow: 0 -2px 6px #fff, /* Innermost layer - intense heat (white) */ 0 -4px 12px #ff7e00, /* Second layer - core of flame (yellow) */ 0 -8px 16px #F90, /* Middle layer - body of flame (orange) */ 0 -12px 24px #f00; /* Outermost layer - edges of flame (red) */ } } .fireDMJ { /* Apply the "flicker" animation to the .fire class */ animation: flicker 2s infinite; }