html, body {
margin: 0px;
padding: 0px;
width: 100%;
min-height: 100vh;
}
body {
font-family: 'Poppins', sans-serif;
font-size: 16px;
background-image:url(../images/bg1.jpg);
}
a, a:link, a:visited {
outline: none;
text-decoration: none;
-webkit-transition: color 0.4s ease-out,background-color 0.4s ease-out;
-moz-transition: color 0.4s ease-out,background-color 0.4s ease-out;
-o-transition: color 0.4s ease-out,background-color 0.4s ease-out;
transition: color 0.4s ease-out,background-color 0.4s ease-out;
}
img {
border: none;
margin: 0px;
max-width: 100%;
width: 100%;
object-fit: cover;
}
h1,h2,h3, h4, h5, h6 {
font-weight: bold;
margin: 0px;
padding: 0px;
}
form, input, select, textarea, p {
margin: 0px;
padding: 0;
}
textarea {
resize: none;
}
input:focus, textarea:focus {
outline: none;
}
input::-moz-focus-inner {
border: 0;
padding: 0;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, time {
display: block;
margin: 0px;
padding: 0;
}
/*IE below 9*/
#ieWrapper {
background: #000;
position: fixed;
z-index: 100;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; }
.ieHolder {
position: relative;
width: 555px;
padding: 20px;
margin: 200px auto 0 auto;
background: #FFF;
border: 7px solid #2b2927; }
.btnIeUpdate {
background: url(../images/btnIeUpdate.jpg) 0 0 no-repeat;
width: 144px;
height: 37px;
position: absolute;
right: 20px;
bottom: 20px;
color: #fff;
line-height: 37px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 13px; }
.ieLogo {
float: left;
width: 134px;
height: 139px;
background: url(../images/ieLogo.jpg) no-repeat 0 0; }
.ieContent {
float: right;
margin: 0;
padding: 0;
width: 400px;
color: #666;
font-size: 15px;
line-height: 18px; }
.ieContent strong {
margin: 0 0 15px 0;
padding: 0 0 10px 0;
border-bottom: 1px dashed #cccccc;
display: block;
font-size: 18px;
color: #333;
font-weight: normal;
}
* {
box-sizing: border-box;
}
/*End IE below 9*/
:root{
--main-blue: #003a49;
--orange: #ff6400;
--orange-light: #fa9e63;
--black: #000;
--white: #FFF;
--back-light: #737373;
--grey-border: #817272;
--blue-border: #70939c;
--bg-input: #668992;
--bg-border: #1a4e5c;
--blue-light: #cbd1d4;
--border-input: #c2c4c5;
--input-txt-color: #797a7b;
--yellow: #f7b125;
--text-grey: #b3b3b3;
}
#container {
overflow-x: hidden;
}
@media screen and (max-width: 991px){
.container {
max-width: 767px;
height:auto;
padding:20px 50px;
}
.logo-wrapper {
max-width: 334px;
width: 100%;
padding: 30px 70px;
margin:50px auto;
}
.button-wrapper
{
width:100%;
display:flex;
}
.btn-category
{
width:50%;
display: flex;
justify-content: center;
}
.btn-category a
{
padding:15px;
text-align:center;
background: #890e05;
background: -moz-linear-gradient(left, #890e05 0%, #ff1111 100%);
background: -webkit-linear-gradient(left, #890e05 0%,#ff1111 100%);
background: linear-gradient(to right, #890e05 0%,#ff1111 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#890e05', endColorstr='#ff1111',GradientType=1 );
color:#fff;
font-size:24px;
width:95%;
border-radius:35px;
}
.contact-wrapper
{
width:100%;
margin-top:25%;
}
.contact-wrapper h2
{
font-size:46px;
font-weight:400;
color:#fff;
text-align:center;
text-transform:uppercase;
letter-spacing:1px;
}
.contact-wrapper .address
{
width:100%;
margin:15px 5px;
text-align:center;
}
.contact-wrapper .address p
{
font-size:22px;
color:#FCED69;
}
.contact-wrapper .contact
{
text-align: center;
display: flex;
justify-content: space-around;
width: 300px;
margin: 0 auto;
}
.contact-wrapper .contact p
{
font-size:15px;
color:#fff;
}
.contact-wrapper .insta
{
text-align: center;
width: 300px;
margin: 10px auto;
}
.contact-wrapper .insta p
{
font-size:15px;
color:#fff;
text-align:center;
}
.contact-wrapper .insta p i
{
margin-right:5px;
}
.contact-wrapper .insta p i img
{
width:16px;
}
.header
{
display:flex;
margin-bottom:30px;
justify-content: space-between;
align-items: center;
}
.header img
{
width:100%;
max-width:100px;
}
.back a
{
padding:5px 25px;
text-align:center;
background-color:transparent;
color:#fff;
font-size:21px;
border-radius:35px;
border:1px solid #fff;
}
.lists-wrapper
{
margin-top:50px;
}
.title h2
{
font-size:26px;
font-weight:700;
color:#fff;
text-transform:uppercase;
margin-bottom:50px;
position:relative;
}
.title h2:after
{
content:"";
width:50px;
height:1px;
background-color:#f00;
position:absolute;
left:0;
bottom:-10px;
}
.lists a
{
border:1px solid #fff;
display:flex;
justify-content: space-between;
align-items: center;
padding:10px;
margin-bottom:15px;
}
.lists p
{
color: #fff;
}
.lists span
{
color: #000;
background-color:#fff;
padding:5px 10px;
border-radius:2px;
}
}
@media screen and (max-width: 576px) {
.container {
max-width: 767px !important;
height: auto !important;
padding: 20px 20px !important;
}
.button-wrapper
{
width:100% !important;
max-width:320px !important;
display:block !important;
margin:0 auto !important;
}
.btn-category
{
width:100% !important;
display: flex !important;
justify-content: center !important;
margin-bottom:15px !important;
}
.contact-wrapper h2 {
font-size: 46px;
font-weight: 400;
color: #fff;
text-align: center;
text-transform: uppercase;
letter-spacing: 1px;
}
}
.container {
max-width: 767px;
height: auto;
padding: 20px 50px;
}
.logo-wrapper {
max-width: 334px;
width: 100%;
padding: 30px 70px;
margin: 50px auto;
}
.button-wrapper {
width: 100%;
display: flex;
}
.btn-category {
width: 50%;
display: flex;
justify-content: center;
}
.btn-category a {
padding: 15px;
text-align: center;
background: #890e05;
background: -moz-linear-gradient(left, #890e05 0%, #ff1111 100%);
background: -webkit-linear-gradient(left, #890e05 0%, #ff1111 100%);
background: linear-gradient(to right, #890e05 0%, #ff1111 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#890e05', endColorstr='#ff1111', GradientType=1);
color: #fff;
font-size: 24px;
width: 95%;
border-radius: 35px;
}
.contact-wrapper {
width: 100%;
margin-top: 25%;
}
.contact-wrapper h2 {
font-size: 46px;
font-weight: 400;
color: #fff;
text-align: center;
text-transform: uppercase;
letter-spacing: 1px;
}
.contact-wrapper .address {
width: 100%;
margin: 15px 5px;
text-align: center;
}
.contact-wrapper .address p {
font-size: 22px;
color: #FCED69;
}
.contact-wrapper .contact {
text-align: center;
display: flex;
justify-content: space-around;
width: 300px;
margin: 0 auto;
}
.contact-wrapper .contact p {
font-size: 15px;
color: #fff;
}
.contact-wrapper .insta {
text-align: center;
width: 300px;
margin: 10px auto;
}
.contact-wrapper .insta p {
font-size: 15px;
color: #fff;
text-align: center;
}
.contact-wrapper .insta p i {
margin-right: 5px;
}
.contact-wrapper .insta p i img {
width: 16px;
}
.header {
display: flex;
margin-bottom: 30px;
justify-content: space-between;
align-items: center;
}
.header img {
width: 100%;
max-width: 100px;
}
.back a {
padding: 5px 25px;
text-align: center;
background-color: transparent;
color: #fff;
font-size: 21px;
border-radius: 35px;
border: 1px solid #fff;
}
.lists-wrapper {
margin-top: 50px;
}
.title h2 {
font-size: 26px;
font-weight: 700;
color: #fff;
text-transform: uppercase;
margin-bottom: 50px;
position: relative;
}
.title h2:after {
content: "";
width: 50px;
height: 1px;
background-color: #f00;
position: absolute;
left: 0;
bottom: -10px;
}
.lists a {
border: 1px solid #fff;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
margin-bottom: 15px;
}
.lists p {
color: #fff;
}
.lists span {
color: #000;
background-color: #fff;
padding: 5px 10px;
border-radius: 2px;
}
@media (min-width: 769px) {
.lists-wrapper {
display: block !important; }
.list-wrapper_mobile {
/*display: none !important;*/
}
}
@media (max-width:768px) {
.lists-wrapper {
/*display: none !important;*/
}
img.card__image {
height: 265px;
object-fit: cover;
width: 100%;
}
.list-wrapper_mobile {
display: block !important;
}
}
.list-wrapper_section {
padding: 70px 0;
}
.list-wrapper_section .container {
width: 100%;
margin: 0 auto;
padding: 0px;
}
@media (max-width:650px) {
.card {
max-width: 90% !important;
}
img.card__image {
height: 100% !important;
object-fit: cover;
width: 100%;
}
.grid {
display: grid;
grid-template-columns: repeat(1, 1fr) !important;
grid-gap: 25px;
row-gap: 70px;
}
.card__info h2 {
font-size: 16px !important;
font-weight: 800;
}
.list-wrapper_section .container {
width: 100%;
margin: 0 auto;
padding: 0px !important;
}
}
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
row-gap: 70px;
}
.card {
width: 100%;
position: relative;
max-width: 80%;
margin: 0 auto;
border: none;
border-radius: 0px;
background: transparent;
}
.card__image {
width: 100%;
margin: 0 auto;
transition: all 0.3s ease-out;
-webkit-filter: drop-shadow(5px 5px 5px #222);
filter: drop-shadow(0 5px 10px rgba(255, 255, 255, 0));
cursor: pointer;
}
.card__data {
border: 1px solid #fff;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
margin-bottom: 0px;
transition: all 0.3s ease-out 0.1s;
cursor: pointer;
}
.card__info {
padding: 0 0px;
margin-bottom: 0px;
transition: all 0.3s ease-out 0.1s;
}
.card__info p {
color: #fff;
}
.card__action {
display: grid;
grid-template: 30px / 1fr 35px;
}
.card__price {
color: #000;
text-align: center;
background-color: #fff;
padding: 5px 10px;
border-radius: 2px;
}
.card__add {
overflow: hidden;
width: 35px;
height: 30px;
right: 0;
bottom: 0;
position: absolute;
background-color: #222222;
border: none;
color: #fff;
border-top-left-radius: 15px;
border-bottom-right-radius: 15px;
font-size: 20px;
cursor: pointer;
outline: none;
transition: all 0.3s ease-in;
}
.card__add:hover {
opacity: 0.8;
transform: scale(1.1);
}
.card__add:active {
opacity: 1;
transform: scale(0.8);
}
.card:hover .card__image {
top: -20%;
}
.card:hover .card__info {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}