@charset "utf-8";
/* Custom Styles for Red Box Shop website created by Monsters Edge */

/* FONTS */
a { transition: all 1s ease 0s; -webkit-transition: all 1s ease 0s; -moz-transition: all 1s ease 0s; outline: none; color: #333; text-decoration: none;}
a:hover { text-decoration:none; color: #cf152d;}
a:focus { outline: none;}

/* SPACING CLASSES */
.pad30 { padding: 30px;}
.pad60 { padding: 60px;}
.pad90 { padding: 90px;}
.pad120 { padding: 120px;}
.padX30 { padding: 0 30px;}
.padX60 { padding: 0 60px;}
.padX90 { padding: 0 90px;}
.padX120 { padding: 0 120px;}
.padY30 { padding: 30px 0;}
.padY60 { padding: 60px 0;}
.padY90 { padding: 90px 0;}
.padY120 { padding: 120px 0;}

/* HEADINGS & TEXT */
h1,h2,h3,h4,h5,h6 { margin: 0 0 25px 0;}
section h5 { text-transform: uppercase; margin: 0 0 5px 0; font-size: 1rem; color: #cf152d;}
.sacremento-title { font-family: "Sacramento", serif; font-size: 3rem; line-height: 3rem; color: #cf152d;}
p { font-size: 1rem; margin: 0 0 25px 0;}
.intro p, p.intro { font-size: 1.3rem; font-weight: 500;}

/* GENERAL */
html,body { overflow-x: hidden;}
body { font-family: "semplicitapro", sans-serif; font-weight: 400;}

.bg-light-grey { background-color: #f2f2f2;}
.bg-grey { background-color: #e4e4e4;}
.bg-grey.shadow { background: #e4e4e4 url("../images/grey-shadow.jpg") 0 0 repeat-x;}
#post-office.bg-grey.shadow { background-color: #e4e4e4; background-image: url("../images/grey-shadow.jpg"), url("../images/boxes.png"); background-position: 0 0, 0 90%; background-repeat: repeat-x, no-repeat;}
ol.legal { padding: 0; margin: 0; font-size: 0.75rem;}
ul.service-list { list-style: none; padding: 0; margin: 0 0 25px 0;}
ul.service-list li { display: block; background-color: #fff; padding: 7px 15px; margin-bottom: 5px; font-size: 0.9rem;}
ul.service-list li:first-child { background-color: #cf152d; color: #fff; font-weight: 500; font-size: 1rem;}
ul.styled { list-style: none; padding: 0; margin: 0;}
ul.styled li { padding-left: 1em; text-indent: -.7em; margin-bottom: 5px;}
ul.styled li::before { content: "• "; color: #cf152d;}

header { background-color: #cf152d;}
header .social a { color: #fff; font-size: 1.4rem; display: inline-block; margin: 0 0 0 10px;}
header .social a:first-of-type { margin: 0;}
header .social a:hover { color: #cf152d;}

#carousel-hero .carousel-item { height: 600px; background-size: cover; background-repeat: no-repeat; background-position: center center; position: relative;}
#carousel-hero .carousel-item .carousel-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #fff;}
#carousel-hero .carousel-item .carousel-text h1 { font-size: 4.6rem; font-weight: 600; line-height: 4.6rem;}
#carousel-hero .carousel-item .carousel-text p { font-weight: 500; margin: 0 0 50px 0;}
#carousel-hero .carousel-item .carousel-text .subtitle { font-family: "Sacramento", serif; font-size: 4.2rem; line-height: 4rem;}

.carousel-control-next, .carousel-control-prev { width: 6%;}
.carousel-indicators { padding-bottom: 60px;}
.carousel-indicators [data-bs-target] { border-radius: 50%; width: 9px; height: 9px; background-color: transparent; border: 1px solid #fff; opacity: 1; margin: 0 6px; transition: all 1s ease 0s; -webkit-transition: all 1s ease 0s; -moz-transition: all 1s ease 0s;}
.carousel-indicators [data-bs-target].active, .carousel-indicators [data-bs-target]:hover { background-color: #fff;}

#banner { height: 350px; background-size: cover; background-repeat: no-repeat; background-position: center center; position: relative;}
#banner.product { background-size: auto; background-position: bottom left;}
#banner .overlay { background-color: rgba(0,0,0,0.4); width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
#banner h1 { color: #fff; font-weight: 600; font-size: 4rem; margin: 0;}
#banner .subtitle { font-family: "Sacramento", serif; font-size: 4rem; line-height: 4rem; color: #fff;}
#banner #line { position: absolute; bottom: -30px; left: 50%;}

#products { padding-top: 20px; padding-bottom: 20px;}
#products .product { padding: 50px; color: #fff; background-size: cover; background-repeat: no-repeat; background-position: bottom center; border-bottom: 3px solid #fff; border-right: 3px solid #fff;}
#products .product h3 { font-family: "Sacramento", serif; font-size: 3.6rem; line-height: 3.6rem; text-transform: lowercase; margin: 0 0 30px 0;}
#products .product p { margin: 0 0 40px 0;}
#products .product:nth-of-type(3n) { border-right: none;}

#image-block { position: relative; margin-bottom: 200px;}
#image-block #second { border: 2px solid #fff; position: absolute; right: -60px; bottom: -140px; max-height: 200px;}
.gallery-btn { margin-bottom: 30px; box-shadow: 0 0 15px #999; border-radius: 14px;}
.sl-overlay { background: #000 !important;}
.sl-wrapper .sl-close, .sl-wrapper .sl-navigation button { color: #fff !important;}
.sl-wrapper .sl-image .sl-caption { background: #fff !important; color: #000 !important;}

#services { background-color: #e5e5e5;}
#services h2 { color: #ab1a2d; font-weight: 600; font-size: 3rem;}
#services p { font-weight: 500;}
#services ul { list-style: none; padding: 0; margin: 0 0 30px 0;}
#services ul li { display: inline-block; width: 48.5%; margin: 0 8px 8px 0; background-color: #fff; padding: 7px 15px; color: #ab1a2d; font-weight: 500;}
.service { background-color: #fff; padding: 20px 15px; color: #000; font-weight: 600; font-size: 1.1rem; margin-top: 15px;}

#contact-box { background-color: #cf152d; color: #fff; margin-bottom: 30px;}
#contact-box .title { background-color: #233746; padding: 20px 30px; font-weight: 600; font-size: 1.8rem;}
#contact-box .text { padding: 30px;}
#contact-box hr { border-style: dotted; opacity: 1;}
#contact-box a { color: #fff; font-weight: 600;}
#contact-box a:hover { color: #000;}
#contact-box a.larger { font-size: 1.4rem;}
#contact-box a .fa-brands { font-size: 1.8rem;}

.form-control, .form-select { border: 0; border-radius: 0; padding: 15px 25px;}
.form-check-input { background-color: transparent; border-radius: 0 !important;}
.form-check-label { font-size: 0.9rem;}

footer { background-color: #ab1a2d; color: #fff; font-weight: 500;}
footer h6 { text-transform: uppercase; font-size: 0.85rem; margin: 0 0 10px 0;}
footer p { font-size: 0.85rem; line-height: 1.4rem;}
footer a { color: #fff;}
footer a:hover { color: #000;}

#copyright { font-size: 0.85rem; font-weight: 500;}
#copyright ul { list-style: none; padding: 0; margin: 0;}
#copyright ul li { display: inline-block; margin-right: 15px;}

/* NAVIGATION */
.navbar { background-color: #233746;}
.navbar .nav-item { margin: 0 15px;}
.navbar .nav-item .nav-link { color: #fff; font-weight: 600; padding: 3px 0;}
.navbar .nav-item .nav-link:hover, .navbar .nav-item.active .nav-link { color: #cf152d;}
.dropdown-menu { background-color: #233746; top: 36px !important; border-radius: 0; left: -15px !important; border: 0;}
.dropdown-menu li { margin: 0 !important;}
.dropdown-menu li a { color: #fff; padding: 6px 30px !important;}
.dropdown-menu li a:hover { color: #cf152d; background-color: transparent;}

/* BUTTONS */
.btn { border-radius: 0; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; font-size: 0.75rem; text-align: center; padding: 10px 30px; min-width: 190px; transition: all 1s ease 0s; -webkit-transition: all 1s ease 0s; -moz-transition: all 1s ease 0s;}
.btn-outline-light:hover { background-color: #cf152d; border-color: #cf152d; color: #fff;}
.btn-outline-light.red { border-color: #cf152d; color: #000;}
.btn-outline-light.red:hover { color: #fff;}
.btn-primary { background-color: #233746; border-color: #233746; padding: 15px 30px;}
.btn-primary:hover { background-color: #cf152d; border-color: #cf152d;}
.btn:disabled { background-color: #233746; border-color: #233746;}

/* RESPONSIVE AMENDED STYLES */
/* #Tablet (Landscape)
================================================== */
/* Note: Design for a width of 1080px */
@media only screen and (min-width: 960px) and (max-width: 1080px) {
	#carousel-hero .carousel-item { height: 500px;}
	#carousel-hero .carousel-item .carousel-text { width: 80%;}
	#products .product { padding: 50px 30px;}
}

/* #Tablet (Portrait)
================================================== */
/* Note: Design for a width of 768px */
@media only screen and (min-width: 768px) and (max-width: 959px) {
	#carousel-hero .carousel-item { height: 500px;}
	#carousel-hero .carousel-item .carousel-text { width: 80%;}
	#products .product { padding: 50px 30px;}
	#services ul li { width: 100%; margin: 0 0 8px 0;}
	#image-block { margin-bottom: 150px;}
	#image-block #second { bottom: -100px; max-height: 150px;}
}

/* #Mobile (Both)
================================================== */
/* Note: Landscape and portrait */
@media only screen and (max-width: 767px) {
	.padY60,.padY90,.padY120 { padding: 40px 0;}
	.mb-5 { margin-bottom: 1.5rem !important;}
	ol.legal { padding: 0 15px;}
	header .padY30 { padding: 15px 0 !important;}
	#carousel-hero .carousel-item { height: 400px;}
	#carousel-hero .carousel-item .carousel-text { width: 90%;}
	#carousel-hero .carousel-item .carousel-text .subtitle { font-size: 2.4rem; line-height: 2.5rem;}
	#carousel-hero .carousel-item .carousel-text h1 { font-size: 2rem; line-height: 2rem; margin-bottom: 15px;}
	#carousel-hero .carousel-item .carousel-text p { margin: 0 0 30px 0; font-size: 1rem;}
	.carousel-indicators { padding-bottom: 5px;}
	#banner { height: 200px;}
	#banner h1 { font-size: 2.2rem; padding: 0 30px;}
	#banner .subtitle { font-size: 3rem; line-height: 3rem;}
	#banner.product { background-image: none !important;}
	#products .product { border-right: none;}
	#services h2 { font-size: 2rem;}
	#services ul li { width: 100%; margin: 0 0 8px 0;}
	#services .btn { width: 100%;}
	footer, #copyright { text-align: center !important;}
	#image-block { margin-bottom: 150px;}
	#image-block #second { right: -5px; bottom: -100px; max-height: 150px;}
	#contact-box a.larger { font-size: 1.2rem;}
	#post-office.bg-grey.shadow { background-position: 0 0, 0 98%;}
	
	.navbar-toggler { border: none; padding: 0; color: #fff; display: inline-block; font-size: 1.8rem;}
	.navbar-toggler:focus { box-shadow: none;}
	.navbar .nav-item { margin: 0; border-top: 1px solid #ccc;}
	.navbar .nav-item .nav-link { padding: 8px 0; font-weight: 500;}
	.navbar-nav { padding: 20px 0 10px 0;}
	.dropdown-menu li a { padding: 5px 15px;}
}

/* #Mobile (Landscape)
================================================== */
/* Note: Design for a width of 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) {

}
	
/*  #Mobile (Portrait)
================================================== */
/* Note: Design for a width of 320px */
@media only screen and (min-width: 320px) and (max-width: 479px) {
 
}

@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}