﻿/* index.php */
   @import url(https://fonts.googleapis.com/css?family=Raleway:400,200,300,800);
   figure.carcoverusa {font-family: 'Raleway', Arial, sans-serif;color: #fff;position: relative;overflow: hidden;margin: 10px;min-width: 220px;max-width: 400px;max-height: 300px;height: 300px;width: 100%;background: #FFFFFF;border: 1px solid #C0C0C0;display: flex;align-items: center;}
   figure.carcoverusa * {-webkit-box-sizing: border-box;box-sizing: border-box;}
   figure.carcoverusa .logo {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 3;opacity: 1;width: auto;background-color: rgba(255, 255, 255, 0.8);border-radius: 5px;padding: 5px;transition: opacity 0.35s, transform 0s 3s;}
   figure.carcoverusa .logo img {width: 260px;border-radius: 5px;}
   figure.carcoverusa > img {object-fit: cover;height: auto;width: 100%;display: block;margin: auto;opacity: 1;filter: blur(0px);transition: opacity 0.35s;transform: scale(1.05);}
   figure.carcoverusa figcaption {left: 30px;margin-bottom: -50px;position: absolute;right: 30px;text-align: left;bottom: 100%;transition: bottom 0.35s;}
   figure.carcoverusa figcaption h2 {width: 100%;text-align: left;border-radius: 0 0 5px 5px;margin: 0;padding: 15px 20px;font-size: 13px;bottom: 0;font-weight: 300;text-transform: uppercase;box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);background-color: #000000;position: relative;z-index: 1;}
   figure.carcoverusa figcaption h2 span {font-weight: 800;}
   figure.carcoverusa figcaption p {border-left: 1px solid #C0C0C0;border-right: 1px solid #C0C0C0;position: relative;background-color: rgba(255, 255, 255, 0.9);color: #000;margin: 0;font-size: 0.9em;min-height: 220px;}
   figure.carcoverusa figcaption p span {padding: 15px 20px;position: absolute;bottom: 0;width: 100% !important;}
   figure.carcoverusa figcaption p span img {width: 80% !important;display: block !important;margin: 0 auto 5px !important;}
   figure.carcoverusa figcaption .buynow {text-align: center;width: 100% !important;margin: 0 auto;padding: 5px;position: absolute;right: 0;bottom: -13px;}
   figure.carcoverusa figcaption .buynow span {font-size: 23px;padding: 4px;color: #FFFFFF;opacity: 1;position: relative;bottom: -90px;opacity: 0;transition: bottom 0.35s, opacity 0.35s;display: inline-block;width: 100% !important;max-width: 300px;}
   figure.carcoverusa figcaption .buynow {display: block;width: 100%;}
   figure.carcoverusa figcaption .buynow a {text-decoration: none;}
   figure.carcoverusa figcaption .buynow span {display: inline-block;width: 100%;max-width: 300px;}
   figure.carcoverusa figcaption .buynow span {transition-delay: 0.3s;}
   figure.carcoverusa figcaption .buynow .buynowbutton {display: inline-block;font-weight: 400;color: #000000;text-align: center;vertical-align: middle;user-select: none;background-color: #FFFFFF;border: 1px solid #000000;padding: 0.375rem 0.75rem;font-size: 1rem;line-height: 1.5;border-radius: 0.25rem;transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;width: 100%;max-width: 300px;margin: 0 auto;}
   figure.carcoverusa figcaption .buynow .buynowbutton:hover {color: #000000;background-color: #FFFFFF;border-color: #000000;}
   figure.carcoverusa:after {position: absolute;display: block;bottom: -15px;height: 15px;right: 30px;left: 30px;border-radius: 5px 5px 0 0;background-color: #000000;z-index: 2;content: '';transition: bottom 0.35s;}
   figure.carcoverusa.black:after, figure.carcoverusa.black h2 {background: #000000;}
   figure.carcoverusa.white:after, figure.carcoverusa.white h2 {background: #FFFFFF;}
   figure.carcoverusa.blue:after, figure.carcoverusa.blue h2 {background: #20638f;}
   figure.carcoverusa.red:after, figure.carcoverusa.red h2 {background: #962d22;}
   figure.carcoverusa.yellow:after, figure.carcoverusa.yellow h2 {background: #bf6516;}
   figure.carcoverusa.green:after, figure.carcoverusa.green h2 {background: #1e8449;}
   figure.carcoverusa a {opacity: 0.7;transition: opacity 0.35s;}
   figure.carcoverusa a:hover {opacity: 1;}
   figure.carcoverusa:hover > img, figure.carcoverusa.hover > img {opacity: 0.5;filter: blur(5px);transform: scale(1.1);}
   figure.carcoverusa:hover figcaption, figure.carcoverusa.hover figcaption {bottom: 115px;}
   figure.carcoverusa:hover figcaption .buynow span, figure.carcoverusa.hover figcaption .buynow span {opacity: 1;bottom: -41px;}
   figure.carcoverusa:hover::before, figure.carcoverusa.hover::before {opacity: 0.8;}
   figure.carcoverusa:hover:after, figure.carcoverusa.hover:after {bottom: 0;}
   figure.carcoverusa:hover .logo, figure.carcoverusa.hover .logo {opacity: 0;}