/* imports and fonts imports */ @import url("/apps/js/polls/polls-pack.css"); /* General */ html { height: 100%; font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } body { height: 100%; text-align: center; margin: 0; padding: 0; font-size: 13px; line-height: 1.231;min-width: 1200px;background: #1C2834;} article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } audio:not([controls]) { display: none; } [hidden] { display: none; } .cf:before, .cf:after { content: ""; display: table; } .cf:after { clear: both; } .cf { zoom: 1; } .DB_mask {z-index: 99999 !important;} .DB_dialog {z-index: 99999 !important;} .ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; } h1, h2, h3, h4, h5, h6 { padding: 0; margin: 0; } a, a:active, a:visited { color: #033b73; } a:hover, a:active { outline: 0; color: #fb3038; } img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; } /* Normalization of fonts */ abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: bold; } blockquote { margin: 1em 40px; } dfn { font-style: italic; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } ins { background: #ff9; color: #000; text-decoration: none; } mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; } pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; } pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } q { quotes: none; } q:before, q:after { content: ""; content: none; } small { font-size: 85%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* Font styles */ body, #nav_items_0 li:hover ul li a, #nav_items_0 li.over ul li a, #address { font-family: "Arial", Helvetica, sans-serif; } #pageNav, #pageNav ul li a, #quicklinks a, #nav_items_0 li a, #motto { font-family: "Arial", Helvetica, sans-serif; } /* Site Styles */ #wrapper, #wrapper-index { position: relative; margin: 0 auto; width: 100%; min-width: 960px; height: 100%; min-height: 100%; height: auto!important; text-align: left;background: url('') no-repeat;} .inside { width: 1000px; margin: 0 auto; } #wrapper .content { position: relative; margin: 0 auto; } #wrapper .content .inside { width: 1000px; padding: 84px 0 70px; line-height: 20px; } .content { width: 100%; text-align: left; margin: 0 auto; padding: 0 0 0px 0;background:#fff;} .content .inside { position: relative; min-height: 400px; height: auto!important; height: 400px; padding-bottom: ;width: 100%;} .pageTitle { width: auto; display: block; height: 35px; padding: 8px 0 0 0; margin-bottom: 15px; font-size: 30px; color: #223140; font-family: 'Glegoo', serif;font-weight: 600;text-transform: uppercase; position: relative; background: url('/pics/header_border.jpg') repeat-x;letter-spacing: 1.2px;} #wrapper .content .inside, #wrapper .neutral, #wrapper table {font-family: 'Sintony', serif;font-weight: 400;font-size: 15px;color: #363636;line-height: 1.5;} /* Top */ #top { position: relative; position: relative; top: 0; background: url('/pics/top_bg.png') repeat-x; width: 100%; } #top #inner {position: relative; width: 1000px; height: 34px; margin: 0 auto; } #tabs { width: 206px; height: 34px; padding: 0; float: right; position: relative;z-index: 10000;} #search { float: left; margin-right: 0px;position: absolute;right: 46px;top: 4px;} #search form { margin: 0; } #search #search-field { width: 120px; height: 32px; border: 0px; padding: 0px 6px; font-size: 12px; color: #fff; background: #c31015;display: none;position: absolute;right: 0px;top: 40px;font-family: "Sintony";font-weight: 400;font-size: 14px;} #search #search-img { vertical-align: top; } .ie6 #search #search-img, .ie7 #search #search-img { margin-top: 1px; } #googleTranslate { opacity:0; filter: alpha(opacity = 0); width:120px!important; height: 34px;cursor: pointer; } #preGoogle { position: absolute; left: 0; bottom: 0; height: 34px!important; width:120px;display:block; overflow:hidden; background:url("/pics/translate.png") no-repeat top left; border:0; } .fb{background: #3b5998 url('/pics/fb.png') no-repeat center;height: 40px;width: 40px;border-radius: 50%;position: absolute;right: 0;top: 4px;margin-left: 6px;} .fb:hover{box-shadow: 0 0 20px 10.5px rgba(0, 0, 0, 20%); -webkit-box-shadow: 0 0 20px 10.5px rgba(0, 0, 0, 20%); webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); -webkit-transition-property: transform; -webkit-transition-duration: 0.5s; transition-property: transform; transition-duration: 0.5s;} #marquee-new { float:right;position: absolute;left: 174px; } /* Header */ #header { position: relative; top: 0; z-index: 9999; width: 100%; background: #fff;height: 136px; } #header .inside { position: relative; height: 136px; } #header-name {position: absolute; left: 215px;top: 23px;background: url('/pics/header_name.png') no-repeat;width:398px;height: 89px; } #header .logo { width: 200px; height: 201px; background: url('/pics/header_logo.png') no-repeat; position: absolute;top: -29px;left: -6px;} #motto { position: absolute; right: 55px; top: 100px; color: #4b5f6d; font-size: 20px; text-shadow: 1px 1px #fff; font-weight: bold; } /* Navigation menu */ #menu { width: 100%; height: 54px; z-index: -1; margin: 0 auto; background: url('/pics/nav_bg.png') repeat-x; position: relative; top: 0; } #menu h2 { width: 0; height: 0; } #nav_items_0 { list-style: none; margin: 0; padding: 0; float: right; right: 46.4%; position: relative; z-index: 9999; } #nav_items_0 li { list-style: none; display: inline; float: left; left: 50%; position: relative; z-index: 9999; padding: 0; } #nav_items_0 li a { white-space: nowrap; width: 0; display: block; text-align: center; padding: 14px 14.5px; font-size: 18px; letter-spacing: 0.3px; text-decoration: none; color: #fff; font-family: 'Glegoo', serif; font-weight: 400;} #nav_items_0 > li a { width: auto; white-space: normal; } #nav_items_0 li:hover a, #nav_items_0 li.over a { color: #fff; background: url('/pics/nav_li_hover.png') repeat-x; height: 26px; } /* Drop down items */ #nav_items_0 ul, #nav_items_0 li:hover ul ul, #nav_items_0 li.over ul ul, #nav_items_0 li:hover ul ul ul, #nav_items_0 li.over ul ul ul, #nav_items_0 li:hover ul ul ul ul, #nav_items_0 li.over ul ul ul ul { position: absolute; right: auto; left: -9999em; top: -9999em; z-index: 9999; width: 216px; margin: 0; padding: 0; font-size: 12px;} #nav_items_0 ul li { margin: 0; left: auto; } #nav_items_0 li:hover ul, #nav_items_0 li.over ul { left: auto; top: auto; background: url('/pics/dropdown_bg.png') repeat; padding-top:10px;padding-bottom:10px;} #nav_items_0 ul li:hover ul, #nav_items_0 ul li.over ul, #nav_items_0 ul ul li:hover ul, #nav_items_0 ul ul li.over ul, #nav_items_0 ul ul ul li:hover ul, #nav_items_0 ul ul ul li.over ul { position: absolute; top: 0; left: 100%; } /* Drop down items colors and formatting */ #nav_items_0 li:hover ul li a, #nav_items_0 li.over ul li a { line-height: 16pt; text-align: left; text-decoration: none; padding: 8px 20px 8px 20px; height: auto; width: 176px;font-size: 13px; letter-spacing: normal; white-space: normal; text-transform: none; text-shadow: none; font-variant: normal;} #nav_items_0 li:hover ul li a, #nav_items_0 li.over ul li a, #nav_items_0 li ul li:hover ul a, #nav_items_0 li ul li.over ul a, #nav_items_0 li ul li ul li:hover ul a, #nav_items_0 li ul li ul li.over ul a, #nav_items_0 li ul li ul li ul li:hover ul a, #nav_items_0 li ul li ul li ul li.over ul a { color: #fff; background: none; font-size: 16px; font-family: 'Sintony', sans-serif; font-weight: 600;} #nav_items_0 li ul li a:hover, #nav_items_0 li ul li:hover a, #nav_items_0 li ul li.over a, #nav_items_0 li ul li:hover ul a:hover, #nav_items_0 li ul li.over ul a:hover, #nav_items_0 li ul li ul li:hover a, #nav_items_0 li ul li ul li.over a, #nav_items_0 li ul li ul li:hover ul a:hover, #nav_items_0 li ul li ul li.over ul a:hover, #nav_items_0 li ul li ul li ul li:hover a, #nav_items_0 li ul li ul li ul li.over a, #nav_items_0 li ul li ul li ul li:hover ul a:hover, #nav_items_0 li ul li ul li ul li.over ul a:hover { color: #fff; background: #2A51B5; } li.nav_items_0 { padding-right: 2px!important; background: url('/pics/topnav_sep.gif') no-repeat right 11px; } nav#menu ul li span.nav_icon { display: none; } #nav_items_0 li a bdi:after, #nav_items_0 li a li a bdi:after, #nav_items_0 li a li a li a bdi:after{ content: " \2192";} /* Index properties */ #index-wrapper { } #index-top, #columns { width: 1000px; position: relative;} #index-top { margin: 0 auto 0; height: 650px;} #columns { width: 1000px; padding: 10px 0 25px 0; margin: 0 auto; position: relative; } #left-column {width: 340px; position: relative; float: left; display: inline-block;padding-top: 18px;} #center-column {width: 320px; padding-right: 20px; position: relative; float: left; display: inline-block;padding-top: 18px;} #right-column {width: 320px; margin-right: 0px; position: relative; float: left; display: inline-block;} /* Image shuffles */ #slideshow { width: 1000px;height: 650px; } #slide-motto p {color: #fff;font-size: 60px;font-family: 'Parisienne', cursive;font-weight: 400;position: absolute;bottom: -7px;left: 147px;z-index: 11;margin: 0} .gradient {content: '';position: absolute;display: block;background: url('/pics/slideshow-bg.png');width: 100%;height: 100%;bottom: 0;z-index: 10;top: 0;height: 650px;} /* mission */ #mission{background: url('/pics/mission_bg.jpg') repeat-x center;min-height: 220px;height: auto;} .mission_statement{width:1000px; margin: 0 auto;} .mission_statement p{font-size: 20px; color:#fff; font-family: 'Glegoo', serif; font-weight: 400;margin: 0;text-align: center;padding: 38px 0 22px;letter-spacing: 0;line-height: 1.5;} .mission_statement a{display: block; font-size: 16px; color:#fff !important;font-family: 'Sintony' sans-serif; font-weight: 600;text-transform: uppercase;background: #2a53c1; padding: 10px 0; text-decoration: none;width: 180px;margin:0 auto;text-align: center;letter-spacing: 0.5px;} .mission_statement a:hover{background: #7E0E0A;} /* Homepage Sections */ section { margin-bottom: 10px; position: relative; } /* Homepage Section Headers */ #wrapper-index .content section h2 { } #wrapper-index .content section h2 a { width: auto;padding-bottom: 5px; font-size: 28px; text-decoration: none; font-family: 'Glegoo', serif;font-weight: 600; margin: 0; color: #223140; display: block;text-transform: uppercase;letter-spacing: 1.1px; } #wrapper-index .content section h2 a span{color:#415973; font-size: 24px;text-transform: lowercase;} /* Homepage Sections Containers */ .container {position: relative; margin-top: 0; padding: 6px 0; } /* Events */ #events #hp-events .v3 .dayInfoWrap {background: url('/pics/date_bg.png') no-repeat top 4px left 0px;height: 60px;width: 60px;padding-top: 18px;line-height: 1;margin-left: -1px;} #events #hp-events .v3 span.month {font-size:12px;color:#2e4359;font-family: 'Sintony', serif;font-weight: 600;text-transform: uppercase;} #events #hp-events .v3 span.day {font-size:22px;color:#c31015;font-family: 'Glegoo', serif;font-weight: 600;} #events #hp-events .v3 ul {padding-left: 76px;} #events #hp-events ul li.event div {font-size:14px;color:#363636;font-family: 'Sintony', serif;font-weight: 400;text-decoration: none;} #events #hp-events ul li.event div a {font-size:16px; color:#213875;font-family: 'Glegoo', serif;font-weight: 600;text-decoration: none;} #events #hp-events .hpeventlinks div a {font-size: 13px;color:#2e4359;font-family: 'Sintony', serif;font-weight: 600;text-decoration: none;background: url('/pics/show_all.png') no-repeat left center; text-transform: uppercase;padding-left: 15px;padding-top: 3px;} #hp-events .hpeventlinks {margin-left: 0px !important;margin-top: 25px;} #events .container{padding-right: 30px;} #events #hp-events ul li.event div a:hover,#wrapper-index .content section table a:hover,#wrapper-index .content table #r b a:hover,#events #hp-events .hpeventlinks div a:hover{color:#7E0E0A;} #events .time span:first-child, #events .location span:first-child{display:none;} .news-showall:hover{color:#7E0E0A !important;} /* News */ .news{width: 1000px;margin: 0 auto;margin-bottom: 20px;} .news h2{margin: 30px 0 13px;display: inline-block;} .news h2 a{font-size: 30px;color:#223140;text-transform: uppercase;text-decoration: none;font-family: 'Glegoo', serif;font-weight: 600;letter-spacing: 1.2px;} .news h2 a span{color:#415973;} #second-row .homepage-news .bx-wrapper .bx-prev { background: url('/pics/leftArrow.png') center center no-repeat;left: -30px;color: #fff !important; width: 22px; height: 368px;-pie-background: url('/pics/leftArrow.png') center center no-repeat;behavior: url('/shared/pie.htc');} #second-row .homepage-news .bx-wrapper .bx-next {background: url('/pics/rightArrow.png') center center no-repeat;right: -30px;color: #fff !important; width: 22px; height: 368px;-pie-background: url('/pics/rightArrow.png') center center no-repeat;behavior: url('/shared/pie.htc');} #second-row .homepage-news .bx-wrapper .bx-controls-direction a {margin-top: 0 !important; top: -38px !important;} #second-row .homepage-news li {background: none; border: 0;} #second-row .homepage-news .news-wrap {padding: 10px 14px 16px ; margin: 0;height: 132px;background: #ececee;} #second-row .homepage-news .news-text {font-family: 'Sintony', sans-serif; color: #363636; font-size: 14px; font-weight: 400;line-height: 1.4;} #second-row .homepage-news .news-title {margin: 0 0 10px;} #second-row .homepage-news .news-title a {font-size: 16px; color: #213875; font-family: 'Glegoo', serif; font-weight: 600;line-height: 1.3;} #second-row .homepage-news .news-title a:hover{color: #760D0C !important;} .homepage-news .news-thumb {border-bottom: 2px solid #2a53c1;} .news-showall{text-decoration: none;font-size: 13px;color:#2e4359 !important;font-family: 'Sintony', serif;font-weight: 600;background: #fff url('/pics/show_all.png') no-repeat left center; text-transform: uppercase; padding-left: 15px;float: right;margin: 45px 0 13px;} /* quote */ #quote{height: 400px;width: 100%;margin: 0 auto;} .quote-content-bg{width: 50%;float: left;margin: auto;height: 400px;background: #820805 url('/pics/quote-bg-img.jpg') no-repeat top right;position: relative;} .quote-content p{font-size: 40px; color:#fff;font-family: 'Glegoo', serif;font-weight: : 400;margin: 0;line-height: 1.2;} .quote-content span{font-size: 18px; color:#fff;font-family: 'Sintony', serif;font-weight: 600;margin: 13px 0;display: block;text-transform: uppercase;letter-spacing: 1.8px;} .quote-banner{width: 50%;height: 400px;float: left;background: url('/pics/img.jpg')no-repeat;background-size: 100% 100%;} .quote-content{width: 420px;height: 320px; margin: auto;position: absolute;right: 0;padding: 80px 80px 0px 0px;} #stats{height: 380px;width: 100%;margin: 0 auto;} .group1{background: url('/pics/group1_bg.jpg') no-repeat;background-size: 100% 100%; width: 50%;height: 370px;float: left;position: relative;} .group2{background: url('/pics/group2_bg.jpg') no-repeat;background-size: 100% 100%; width: 50%;height: 370px;float: left;position: relative;} .group1_gradient{background: url('/pics/group1_gradient.png') repeat-x; width: 100%;height: 370px;float: left;} .group2_gradient{background: url('/pics/group2_gradient.png') repeat-x; width: 100%;height: 370px;float: left;} .group1_content{width: 495px;float: left;position: absolute;top:0;right: 0;border-right: 5px solid #fff; height: 370px;} .group2_content{width: 495px;float: left;position: absolute;bottom:0;left: 0px;border-left: 5px solid #fff;height: 370px;} .group1_content div, .group2_content div{width: 165px;display: inline;float: left;} .group1_content div span, .group2_content div span{display: block;} .group1_content div .heading, .group2_content div .heading{height: 40px;font-size: 18px; color:#fff;font-family: 'Glegoo', serif; font-weight: 600;text-align: center;padding: 16px 35px 15px; line-height: 1.3;margin-right: 3px;} .group2_content div .heading{padding: 16px 0 24px;} .group2_content div:nth-child(2) span.heading, .group2_content div:nth-child(3) span.heading{padding: 16px 29px 24px;} .group1_content div:nth-child(3) span.heading{padding: 16px 18px;} .group1_content div .number, .group2_content div .number{height: 70px;font-size: 50px; color:#fff;font-family: 'Parisienne', cursive; font-weight: 400;text-align: center;line-height: 1.8;} .group2_content div{position: relative;top: 220px;left: 8px;} .group1_content div {position: relative;top: 0;right: 8px;} /* important links */ .imp-links{background:url('/pics/img-links.jpg') no-repeat;width: 320px;height: 130px; box-shadow: 0 0 12px rgba(0, 0, 0, 0.2); filter: progid:DXImageTransform.Microsoft.Shadow(Color=#BBBBBB, Strength=6, Direction=0), progid:DXImageTransform.Microsoft.Shadow(Color=#BBBBBB, Strength=6, Direction=90), progid:DXImageTransform.Microsoft.Shadow(Color=#BBBBBB, Strength=6, Direction=180), progid:DXImageTransform.Microsoft.Shadow(Color=#BBBBBB, Strength=6, Direction=270);} .imp-links p{font-size: 14px; color:#820805;font-family: 'Sintony', serif;font-weight: 400;width: 145px;float: right;padding: 28px 0px 0 20px;margin: 0;line-height: 1.4;} /* Featured Photo Album */ #columns .HPFeaturedAlbums {margin-bottom: 10px; position: relative;} #columns .HPFeaturedAlbums h2 {width: auto;height: 25px; font-size: 28px; text-decoration: none; font-family: 'Glegoo', serif;font-weight: 600; margin: 0; padding: 18px 0 20px 0; color: #223140; display: block;text-transform: uppercase;letter-spacing: 1.1px;} #columns .HPFeaturedAlbums .featuredAlbums {position: relative; margin-top: 0; padding: 10px 0 1px; background: #fff;} #columns .HPFeaturedAlbums ul {margin-top: 0;} #columns .HPFeaturedAlbums ul li {margin-bottom: 30px;border: none;box-shadow: none;} #columns .HPFeaturedAlbums ul li h3 {background: #2e4359; text-shadow: none;height: 50px;} #columns .HPFeaturedAlbums ul li h3 span {font-size: 18px; color: #fff;font-family: 'Glegoo', serif; font-weight: 600; text-align: center;line-height: 2;} /* Homepage Section Table Includes */ #wrapper-index .content table { width: 100%; padding: 0; margin: 0; } /* Other homepage section extras */ .dark {background-color: #2e4359 !important; color: #fff !important;font-family: "Sintony" !important;font-weight: 400 !important;font-size: 15px !important;} .light {color: #363636 !important;font-family: "Sintony" !important;font-weight: 400 !important;font-size: 15px !important; } .dark a, .dark a:visited, .dark a:link, .dark a:hover, .dark a:active {color: #fff !important;} #wrapper-index .content table { color: #000; } #wrapper-index .content section table a { text-transform: capitalize;color: #213875;font-size: 16px; text-decoration: none;font-family: 'Glegoo', serif; font-weight: 600; } #wrapper-index .content table #l { padding-top: 8px; display: none;} /* Put Display None if you want to hide bullet */ #wrapper-index .content table #r { padding: 6px 0 6px 12px; } #wrapper-index .content table #r b a { display: block;margin-top: -2px;text-decoration: none;font-size: 13px;color:#2e4359;font-family: 'Sintony', serif;font-weight: 600;background: #fff url('/pics/show_all.png') no-repeat left center; text-transform: uppercase; padding-left: 15px;padding-top: 10px;padding-bottom: 8px;} #wrapper-index .content table tr:nth-child(even){background: #ececee;} .autoCalendarLinks td, #showAll-0, #showAll-hpbbmessages #r, #showAll-hplinks #r, #showAll-0 #r { border-bottom: 0!important; padding-left: 0!important; padding-bottom: 0!important; padding-top: 2px!important; } #wrapper-index .content table tr:first-child td, .autoCalendarLinks, #showAll-0, #showAll-hplinks #r, #showAll-0 #r { border-left: 0!important; } #wrapper-index .content table tr:last-child td { border-bottom: 0!important; } /* Quick Poll */ .HPQuickpoll h2 { display: none; } .HPQuickPoll .bar-color { background-color: #003270; } /* results bar color */ .HPQuickPoll .results, .HPQuickPoll .choices, .HPQuickPoll .results_only { margin: 0 auto; width: 70%; } /* Side Image */ img.sub {} #wrapper img.sub {margin-left: 20px;border: none;} /* Page navigation */ #pageNav { border: 0; font-size: 14px; position: relative; background: #2e4359 url('/pics/inside_menu.jpg') no-repeat bottom; margin-left: 20px;width: 250px;} #pageNav ul, #pageNav ul li { list-style: none; line-height: 16px; } #pageNav ul { padding: 10px 0!important; margin: 0 auto!important; width: 250px; height: auto!important; } #pageNav ul li { padding: 0 0 5px!important; margin: 0 0 5px!important; zoom: 1; /* important for IE6 */ } #pageNav td img { display: none; } #pageNav ul li a, #pageNav ul li b { min-height: 20px;text-decoration: none; padding: 8px 0 8px 15px; margin: 0; display: block; font-size: 16px; text-align: left; position: relative; z-index: 0; } #pageNav ul li b,#pageNav ul li a:hover { background: url('/pics/inside_menu_hover.jpg') repeat; color: #fff; } #pageNav ul li a { text-decoration: none; color: #fff; font-size: 18px; font-family: 'Sintony', serif; font-weight: 600; line-height: 1.2;} /* Footer */ #footer { width: 100%; position: relative; bottom: 0; text-align: left; background: url('/pics/footer_bg.jpg') repeat-x; } #footer .inside { height: 220px; margin-top: 0; position: relative; } #footer span { margin: 0 6px; } #footer .logo{background: url('/pics/footer_logo.png') no-repeat;height: 100px;width:100px;margin: auto;position: relative;top: -36px;} #footer #name { margin: auto; background: url('/pics/footer_name.png') no-repeat;height: 59px;width:262px;margin-top: -16px; } #logo { width: 84px; height: 88px; background: url('/pics/crest.gif') #000; position: absolute; right: 10px; top: 15px; } #district-logo { width: 130px; height: 77px; background: url('/pics/district_logo.png') no-repeat center center; position: absolute; right: -1px; top: 52px; } .address { color: #fff; margin: 0; font-size: 16px; line-height: 1.4; position: absolute; left: -42px;top: 68px; font-family: 'Sintony', serif; font-weight:400;letter-spacing: 0;padding-top: 2px;} #address-left{top: 18px;left: -47px;} #address-right{} #edunet { width: 184px; height: 23px; background: url('/pics/edunet_white.png') no-repeat; position: absolute; left: 408px; bottom: 9px; } .tw { background: #1da1f3 url(/pics/Twitter_Social_Icon_Circle_Color.png) no-repeat center; height: 40px; width: 40px; border-radius: 50%; position: absolute; right: -46px; top: 4px; margin-left: 6px; } .tw:hover { box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 20px 10.5px; transform: scale(1.2); transition-property: transform; transition-duration: 0.5s; }