/* Universal Colors: Dark Blue rgb (40,42,117) Aqua rgb (62,132,172) */ /* Global Style Guide */ .embossed-heavy { border: 1px solid rgba(0,0,0,0.5); box-shadow: inset 0 2px 3px rgba(255,255,255,0.3), inset 0 -2px 3px rgba(0,0,0,0.3), 0 1px 1px rgba(255,255,255,0.9); } .text-shadow {text-shadow: 0 0 10px black, 0 0 5px black, 0 0 2px black;} p#service-button {width: 100%;} p#service-button a {border: 1px solid gold;} section#welcome p {font-size: clamp(1.2rem, 1.8vw, 1.6rem);} body#about section#about-us p {font-size: clamp(1rem, 1.6vw, 2rem); color: #333;} /* Social Media I can massively improve on this!!! */ section#topper i[class^="fa"] {font-size: 1.8rem; padding-left: 20px; text-shadow: 0 0 6px black;} section#topper i.fa-instagram {font-size: 1.9rem; padding-left: 20px; text-shadow: 0 0 2px pink; font-weight: 900;} section#topper div[class^="col"] {padding-top: 15px; color: white;} li#facebook i {color: lightblue;} li#yelp i {color: pink;} li#google i {color: lightgreen;} li#instagram i {color: purple; text-shadow: none;} li#facebook i:hover {color: darkblue; text-shadow: 0 0 2px white, 0 0 5px white, 0 0 8px white;} li#yelp i:hover {color: darkred; text-shadow: 0 0 2px white, 0 0 5px white, 0 0 8px white;} li#google i:hover {color: darkgreen; text-shadow: 0 0 2px white, 0 0 5px white, 0 0 8px white;} li#instagram i:hover {color: violet; text-shadow: 0 0 2px white, 0 0 5px white, 0 0 8px white;} li#foot-facebook i {color: lightblue; font-size:2.5rem;} li#foot-yelp i {color: pink; font-size: 2.5rem;} li#foot-google i {color: lightgreen; font-size: 2.5rem;} li#foot-instagram i {color: violet; font-size: 2.5rem;} li#foot-facebook i:hover {color: darkblue; text-shadow: 0 0 2px white, 0 0 5px white, 0 0 8px white;} li#foot-yelp i:hover {color: darkred; text-shadow: 0 0 2px white, 0 0 5px white, 0 0 8px white;} li#foot-google i:hover {color: darkgreen; text-shadow: 0 0 2px white, 0 0 5px white, 0 0 8px white;} li#foot-instagram i:hover {color: purple; text-shadow: 0 0 2px white, 0 0 5px white, 0 0 8px white;} /* Global Header Area Section Styles */ section#branding address a {color: darkblue; font-weight: 700; font-size: .9rem;} section#branding div#phone p {color: red; font-weight: 700;} section#branding div#phone a {color:black; font-weight: 900; font-size: 1.8rem;} section#branding address a span {color: #555; font-weight: 200;} .navbar-nav a {color: white;} a.nav-link {font-size: 1.3rem; font-weight: 300; padding-right: 30px!important; padding-left: 0;} .dropdown-menu {background: rgb(40,42,117);} .dropdown-item {color:white; font-size: 1.5rem; margin: 15px 0;} @media (min-width: 768px) { a.nav-link {font-size: 1rem;} } @media (min-width: 992px) { a.nav-link {font-size: 1.3rem;} } /* Global HERO Area Section Styles */ div#hero-area { background-color: darkgray; } div#message-area { background: rgba(0,0,0,0.5); border-radius: 25px; } h2#hero-premium { display: inline; } section#ad-message { background: lightblue url(../_images/ad-tile.png) no-repeat center; background-size: cover; } p#since2004 { width: 100%; font-weight: 800; text-shadow: 1px 1px 5px darkorange; letter-spacing: .3rem; } @media (max-width: 991px) { p#service-button, p#since2004 { text-align: center; } } /* Section: Reviews-Clips Carousel */ .carousel-control-prev-icon {background-image: none;} .carousel-control-prev-icon { position:relative; } .carousel-control-prev-icon:before { content: "\2190"; /* this is your text. You can also use UTF-8 character codes as I do here */ font-family: FontAwesome; font-size: 3rem; font-weight: 700; left:-5px; position:absolute; top:0; } .carousel-control-prev-icon:hover:before { content: "\2190"; /* this is your text. You can also use UTF-8 character codes as I do here */ font-family: FontAwesome; color: blue; font-size: 3rem; font-weight: 700; left:-5px; position:absolute; top:0; } .carousel-caption { position: absolute; bottom: 20%; } /* Section: Service Cards */ section#service-cards div.card {box-shadow: 3px 3px 16px #555;} /* Section: Inner Service Page */ div#service-aside-2 img { border: 1px solid black; border-radius: 5px; box-shadow: 2px 2px 6px rgba(0,0,0,0.7);} div#banner-protector {background:#f6f1d1; border: 1px solid black; border-radius: 5px; padding: 15px; margin-top: 30px;} div#banner-protector img {display: block; border:1px solid black;} div#banner-protector aside { font-family: sans-serif; } /* Section: Badges */ section#badges {background:rgb(249,249,249);} body#about section#badges {background: #d4eaf1; border-top: 2px solid darkblue;} section#badges .card {background-color: transparent; border: none;} section#badges h4 a {color: black;} section#badges h3 {font-size: 3rem; font-weight: 900;} section#badges .card-body {padding: 30px 0;} section#badges p {color: #777;} section#badges div.card img {max-width: 50%; height: auto; } section#badges img#bbbb {max-width: 50%; height: auto; } /* Section: Footer */ footer {background: rgb(50,57,70);} div#webby-foot p a {color: #ddd; font-weight: 100;} address i {font-size: 1.5rem; color: lightblue; display: block;} address a {color: white; display:block;} p#foot-phone a::before, p#foot-email a::before, p#foot-address a::before { padding-right: 10px; font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f2a0"; width: 40px; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; color:lightblue; font-size: 1.5rem; -webkit-font-smoothing: antialiased; } p#foot-email a::before {content: "\f004";} p#foot-address a::before {content: "\f0e0";} /* Misc */ div.text-blacky {color: orange;} img.card-img-top {height: 140px!important;}