.hover { transition:all 0.5s ease-in-out 0s; -moz-transition:all 0.5s ease-in-out 0s; -ms-transition:all 0.5s ease-in-out 0s; -webkit-transition:all 0.5s ease-in-out 0s; -o-transition:all 0.5s ease-in-out 0s;}
.hover3 { transition:all 0.3s ease-in-out 0s; -moz-transition:all 0.3s ease-in-out 0s; -ms-transition:all 0.3s ease-in-out 0s; -webkit-transition:all 0.3s ease-in-out 0s; -o-transition:all 0.3s ease-in-out 0s;}

.ind_btn { background: #02142c; border: 2px solid #02142c; border-radius: 3px; line-height: 40px; padding: 0 15px; text-align: center; color: #fff; text-transform: uppercase; display: inline-block; font-weight: 500; font-size: 13px;}
.ind_btn:hover { background: none; color: #fff;}

.ind_btn_light { background: #f22303; border: 2px solid #f22303; border-radius: 3px; line-height: 40px; padding: 0 15px; text-align: center; color: #fff; text-transform: uppercase; display: inline-block; font-weight: 500; font-size: 13px;}
.ind_btn_light:hover { background: none; color: #000;}

section.welcome-note { padding: 30px 0 80px;}
section.welcome-note h1 { font-size: 30px; color: #02142c; text-transform: uppercase; margin: 0 0 5px;}
section.welcome-note h1 span { color: #f22303;}
section.welcome-note h3 { font-weight: 400; font-size: 16px; margin: 0 0 15px;}
section.welcome-note p { color: #111; font-size: 16px; line-height: 30px;}

section.front-cats { background: #f22303; padding: 20px 0; position: relative; z-index: 99;}
section.front-cats::before { background: #f22303; content: ""; height: 100%; left: 0; top: 0; right: 0; width: 100%; position: absolute; transform: skewY(-3.2deg); margin-top:-3%;}

section.front-cats .title-bar h2 { color: #fff;}
section.front-cats .title-bar h2::before { background: #02142c; width: 150px;}

.cat-block { position:relative; overflow:hidden; margin:15px 0; z-index:99;}
.cat-block .block-inner { margin:10px; position:absolute; top:0; left:0; right:0; bottom:0;}
.cat-block .cat-border { border:2px solid #f22303;  height:100%;}
.cat-block .cat-hover { background:transparent; text-align:center; justify-content:center; flex-direction:column; display:flex; height:100%; backface-visibility:hidden; transform:scale(0); opacity:0;}
.cat-block .block-inner h2 { margin:0; font-size:24px; color:#fff; text-transform:uppercase; letter-spacing:1px;}
.cat-block:hover .cat-hover { background:rgba(2,20,44,0.8); transform:scale(1); opacity:1;}

section.featured-prods { padding: 40px 0 0;}

section.how-we-do { padding: 30px 0;}

.title-bar { text-align: center; text-transform: uppercase;}
.title-bar h2 { margin: 0 0 20px; padding: 0 0 6px; position: relative; font-weight: 700; font-size: 28px; color: #02142c;}
.title-bar h2::before { position: absolute; content: ''; left: 0; right: 0; bottom: 0; background-color: #f22303; width: 100px; height: 2px; margin: 0 auto;}
.title-bar h2 span { color: #f22303;}

.text-block { background: #f7f7f7; border: 1px solid #d7d7d7; border-radius: 3px; padding: 20px; min-height: 270px; margin-bottom: 30px;}
.text-block h2 { color: #02142c; margin: 10px 0 15px; padding: 0; font-size: 20px; text-transform: none;}
.text-block p { color: #5e5e5e; font-size: 14px; line-height: 22px;}

.text-block2 { background: #f7f7f7; border: 1px solid #d7d7d7; border-radius: 3px; padding: 60px 20px 20px; position: relative; margin-top: 50px; min-height: 364px;}
.text-block2 .block-img { position: absolute; top: -50px; left: 0; right: 0;}
.text-block2 h2 { color: #02142c; margin: 10px 0 15px; padding: 0; font-size: 18px;}
.text-block2 p { margin: 0; padding: 0; color: #5e5e5e; font-size: 14px; line-height: 26px;}

section.customize { background: #02142c; position: relative; overflow: hidden;}
section.customize::before { background: #f7f7f7; content: ""; height: 100%; width: 630px; right: -143px; top; 0; position: absolute; transform: skewX(-25deg)}
.cust-text { justify-content: center; flex-direction: column; display: flex; height: 100%;}
.cust-text h2 { font-size: 32px; color: #fff;}
.cust-text a { background: #f22303; border: 2px solid #f22303; border-radius: 3px; line-height: 40px; padding: 0 10px; width: 150px; text-align: center; color: #fff; text-transform: uppercase;}
.cust-text a:hover { background: none;}
.cust-img { padding: 30px 0;}

section.about-block { background: #f22303; position: relative; overflow: hidden;}
section.about-block::before { background: #f7f7f7; content: ""; height: 100%; width: 57%; left: -144px; top; 0; position: absolute; transform: skewX(-34deg)}

.about-text { padding: 40px;}
.about-text h2 { font-size: 28px; color: #fff; border-bottom: 1px solid #fff; margin-bottom: 30px;}
.about-text p {color: #fff; margin-bottom: 30px;}

section.signup-bg { background: #02142c; width: 100%; padding: 40px 0; text-align: center;}
section.signup-bg h2 { font-size: 20px; color: #fff; font-weight: 700; margin: 0 0 15px; padding: 0;  text-align: center;}
section.signup-bg form { margin:0; padding: 20px 0;}
section.signup-bg .newsletter input { height: 40px; background: none; border: none; border-bottom: 1px solid #082c5c; color: #fff; font-size: 13px; box-shadow: none; width: 74%; float: left;}
section.signup-bg .newsletter input:focus { outline: none;}
section.signup-bg .newsletter button { border: none; background: #f22303; border: 2px solid #f22303; height: 40px; text-align: center; width: 25%; font-size: 14px; text-transform: uppercase; color: #fff; font-weight: 500; float: right; border-radius: 3px;}
section.signup-bg .newsletter button:hover { background: none; color: #fff;}
section.signup-bg a { display: inline-block; margin: 20px 5px 0;}
section.signup-bg a i { background: #f22303; border: 2px solid #f22303; line-height: 40px; width: 40px; text-align: center; border-radius: 3px; font-size: 14px; color: #fff;}
section.signup-bg a:hover i { background: none; color: #fff; transform: rotate(360deg);}

.grid-products .item .product-image { border: 1px solid #ccc;}
.product-details { padding-bottom: 20px;}

h2.Total { text-align: right; font-size: 20px; text-transform: uppercase; font-weight: 700;}
.basket-btn { text-align: right; margin-top: 10px;}
.SubmitText { text-align: center; color: #060; font-size: 22px; padding: 8rem 0 8rem;}

.NoProd { text-align: center; font-size: 18px; color: #c3c3c3; padding: 100px 0; width: 100%; display: block;}


footer { background: #021836; padding: 40px 0; position: relative;}
footer::before { position: absolute; content: ''; left: 0; top: 0; width: 35%; height: 100%; background: #f22303;}
footer h2 { color: #fff; font-weight: 700; font-size: 20px; margin: 0 0 30px;}
.f-contact img { margin: 0 auto 20px;}
.f-contact ul { list-style: none; margin: 0; padding: 0;}
.f-contact ul li { margin: 0px 0px 12px 0px; padding: 0; float: none; display: block; list-style: none; line-height: 28px;}
.f-contact ul li i { line-height: 21px; float: left; font-size: 17px; color: #fff; margin-right: 13px;}
.f-contact ul li div { float: left; width: 66%; line-height: 20px; margin: 0; padding: 0;}
.f-contact ul li div p { margin: 0; color: #fff; font-size: 14px; font-weight: 400;}
.f-contact ul li a { color: #fff; font-size: 14px; font-weight: 400;}
.f-contact ul li a:hover { text-decoration: underline;}

ul.f-links { margin: 0; padding: 0}
ul.f-links li { list-style: none; margin: 0 0 7px 0; padding: 0;}
ul.f-links li a { color: #fff; font-size: 14px; transition:all 0.5s ease-in-out 0s; -moz-transition:all 0.5s ease-in-out 0s; -webkit-transition:all 0.5s ease-in-out 0s; -ms-transition:all 0.5s ease-in-out 0s; -o-transition:all 0.5s ease-in-out 0s;}
ul.f-links li a:hover, section.copyrights p a:hover { color: #f22303;}

.shipment { margin-top: 30px;}

section.copyrights { background: #02142c; padding: 20px 0; text-align: center;}
section.copyrights p { color: #bebebe; font-size: 13px; line-height: 22px; margin: 0; }
section.copyrights p a { color: #fff; transition:all 0.5s ease-in-out 0s; -moz-transition:all 0.5s ease-in-out 0s; -webkit-transition:all 0.5s ease-in-out 0s; -ms-transition:all 0.5s ease-in-out 0s; -o-transition:all 0.5s ease-in-out 0s; }