/* Bennington Self Storage Style Sheet */

.green { color: #008066; }
.bg-bss-green {
  background-color: #008066;
}
.text-white {
   color: #ffffff;
}
.red { color: #9F2000; }
.grey { color: #DCE1E4; }
.blue { color: #1b79dd; }
body {
    font-size: 1.25rem;
	font-family: 'Open Sans', sans-serif;
}
.brand-wrapper {
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: #ffffff; 
    min-height: 140px;
}
.header-wrap {
	padding: 10px 0;
}
#call {
	color: #ffffff;
	font-size: 125%;
}
.credits {
   color: #343a40;
}
.credits a { color:#343a40; text-decoration:none; } 
.credits a:hover { color:#fff; text-decoration:underline; }
h1,h2,.customH2,h3,.panel-title {
    font-weight:bold;
}
.panel-title {
	color: #fff;
	font-size: 140%;
}
h1,h2,h3,h4,.customH2 {
	color: #444;
}
h1 {
	font-size: 160%;
}
h2,.customH2 {
	font-size: 140%;
    padding-top: 30px;
}
.customH2 {
	margin-bottom: 10px;
}
h2.supplies {
   font-size: 110%;
   padding-top: 0px;
}
h3 {
   font-size: 120%;
}
h4 { 
   font-size: 110%;
}
h5 {
   font-weight: bold;
}
hr.foot { 
   border-top: 0.5px solid #ffffff;
   width: 70%;
}
ul { 
   list-style-type:none;
   padding-left:0;
}
#value .customH2 {
	font-size: 160%;
	color: #fff;
}
.btn-primary {
   color: #1b79dd;
   background-color: #ffffff;
   border-color: #1b79dd;
   text-decoration:none;
   margin: 10px 10px;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
   color: #ffffff;
   background-color: #1b79dd;
   border-color: #ffffff;
}
.btn-header {
   color: #ffffff;
   background-color: #1b79dd;
   border-color: #1b79dd;
   text-decoration:none;
}
.btn-header:hover,
.btn-header:focus,
.btn-header:active {
   color: #1b79dd;
   background-color: #ffffff;
   border-color: #1b79dd;
}
.btn-body {
   color: #ffffff;
   background-color: #1b79dd;
   border-color: #1b79dd;
   text-decoration:none;
}
.btn-body:hover,
.btn-body:focus,
.btn-body:active {
   color: #1b79dd;
   background-color: #ffffff;
   border-color: #1b79dd;
}

.jumbotron {
	color: #fff;
	background-color: #2a2122;
	margin-bottom: 0;
	padding:20px 0;
    border-radius: 0px;
}

/* ---------------------------------------- NAVBAR ------------------------------------------------*/
.topnav a:hover {
    border-bottom: 4px solid #1b79dd;
}
.navbar {padding: 0;}
#navbar {
    padding:0 9%;
}
.navbar-bss {
	background-color: #008066;
}
.navbar-bss .navbar-nav > li > a {
    color:#fff;
    text-decoration:none;
    padding:12px 12px;
    min-height:60px;
}

/* ----------------------------------------   FOOTER ----------------------------------------- */
/* MIGHT NOT NEED ALL THIS - DELETE WHAT I NEED TO LATER */
.col_white_amrc { color:#FFF;}
footer { width:100%; background-color:#008066; min-height:100px; padding:10px 0px 25px 0px ;}
.pt2 { padding-top:40px ; margin-bottom:20px ;}
footer p { font-size:1.25rem; color:#CCC; padding-bottom:0px; margin-bottom:8px;} 
footer a { color:#ffffff; text-decoration:underline; } 
footer a:hover { color:#ccc; text-decoration:none; }
.mb10 { padding-bottom:15px;}
.footer_ul_amrc { margin:0px; list-style-type:none; font-size:1.25rem;; padding:0px 0px 0px 0px ; } 
.footer_ul_amrc li {padding:0px 0px 5px 0px;}
.footer_ul_amrc li a { }
.footer_ul_amrc li a:hover{ color:#ccc; text-decoration:none;}
.fleft { float:left;}
.padding-right { padding-right:10px; }
.padding-left { padding-right:10px; }

.footer_ul2_amrc {margin:0px; list-style-type:none; font-size:14px; padding:0px; color:#CCC;}
.footer_ul2_amrc li p { display:table; }
.footer_ul2_amrc li a:hover { text-decoration:none;}
.footer_ul2_amrc li i { margin-top:5px;}

.bottom_border { border-bottom:1px solid #999999; padding-bottom:20px;}
.footer_bottom_ul_amrc {
	list-style-type:none;
	padding:0px;
	display:table;
	margin-top: 10px;
	margin-right: auto;
	margin-bottom: 10px;
	margin-left: auto;
}
.footer_bottom_ul_amrc li { display:inline;}
.footer_bottom_ul_amrc li a { color:#85AD4A; margin:0 12px;}
.footer_bottom_ul_amrc li a:hover { color:#ccc; text-decoration:none;}

/* ---------------------------------  MAP  ----------------------------- */
#map {
	padding-top: 20px;
    padding-bottom: 20px;
}
#map iframe {
	border: 0;
}
iframe, object, embed{
	max-width: 100%;
	}
.google-maps {
	position: relative;
	padding-bottom: 50%; // This is the aspect ratio
	height: 0;
	overflow: hidden;
	}
.google-maps iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
	}
@media (min-width: 768px) {
	.google-maps {
	padding-bottom: 30%; // This is the aspect ratio
	}
}

/* -------------------------------------  CAROUSEL ------------------------------------ */
.carousel-outer {
    clear: both;
}
.carousel-inner {
    min-height: 130px !important;
    margin-top: 20px;
}
	.sq-crousal4 li {width: 20px;}
	.sq-crousal4 .fa-angle-left {font-size: 45px;color: #444;left: -30px;position: relative;top: -17px;}
	.sq-crousal4 .fa-angle-right {font-size: 45px;color: #444;right: -30px;position: relative;top: -17px;}
    
/* ------------------------------------- Storage Types -------------------------------  */
.section{
	padding: 30px 0;
}
.section .section-title{
	text-align:center;
	color:#370b64;
	margin-bottom:50px;
	text-transform:uppercase;
}
#storage-types{
	background:#ffffff;
}
#storage-types .card{
	padding: 1rem!important;
	border: none;
	margin-bottom:1rem;
	-webkit-transition: .5s all ease;
	-moz-transition: .5s all ease;
	transition: .5s all ease;
    
    -webkit-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
	-moz-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
	box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
}
#storage-types .card:hover{
	-webkit-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
	-moz-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
	box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
}
#storage-types .card .card-block{
	padding-left: 50px;
    position: relative;
}
#storage-types .card .card-block a{
	color: #1b79dd !important;
	font-weight:700;
	text-decoration:none;
}
#storage-types .card .card-block a i{
	display:none;
}
#storage-types .card:hover .card-block a i{
	display:inline-block;
	font-weight:700;
}
#storage-types .card .card-block:before{
	font-family: "Font Awesome 5 Free";
    position: absolute;
    font-size: 39px;
    color: #1b79dd;
    left: 0;
	-webkit-transition: -webkit-transform .2s ease-in-out;
    transition:transform .2s ease-in-out;
}
#storage-types .card .block-1:before{
    content: "\f6c0";
    font-weight: 900;
}
#storage-types .card .block-2:before{
    content: "\f187";
    font-weight: 900;
}
#storage-types .card .block-3:before{
    content: "\f1b9";
    font-weight: 900;
}
#storage-types .card:hover .card-block:before{
	-webkit-transform: rotate(360deg);
	transform: rotate(360deg);	
	-webkit-transition: .5s all ease;
	-moz-transition: .5s all ease;
	transition: .5s all ease;
}

/** ------------------------------ FEATURES CARDS --------------------------------  **/
#ssfeatures{
	background-color:#008066;
}
#ssfeatures .card {
  background-color: #008066;
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0.25rem;
}

/** ----------------------------- HOME PAGE UNIT SIZES AND PRICES ACCORDIONS --------------------- **/
.panel-default > .panel-heading {
	background-color: #1b79dd;
}
h2.panel-title {
    padding: 5px;
    font-size: 2rem;
}
h2.panel-title a {
	color: #fff;
}
.panel-collapse {
   outline: 1px solid silver; 
   padding: 20px;
   margin-bottom: 30px;
}

/* --------------------------------------- FAQ ACCORDION ----------------------------------------- */
section {
	padding: 60px 0;
}
#accordion-style-1 h1 {
   color:#000000;
}
#accordion-style-1 a {
    color:#1b79dd; 
}
#accordion-style-1 .btn-link {
    font-weight: 400;
    color: #1b79dd; 
    background-color: transparent;
    text-decoration: none !important;
    font-size: 16px;
	padding-left: 0px;
}
#accordion-style-1 .card-body {
    border-top: 2px solid #1b79dd; 
}
#accordion-style-1 .card-header .btn.collapsed .fa.main {
	display:none;
}
#accordion-style-1 .card-header .btn .fa.main {
	background: #1b79dd; 
    padding: 13px 11px;
    color: #ffffff;
    width: 35px;
    height: 41px;
    position: absolute;
    left: -1px;
    top: 10px;
    border-top-right-radius: 7px;
    border-bottom-right-radius: 7px;
	display:block;
}

/** -----------------------------------  NO MORE TABLES ------------------------------------------ **/
@media only screen and (max-width: 800px) { 
    /* Force table to not be like tables anymore */
	#no-more-tables table, 
	#no-more-tables thead, 
	#no-more-tables tbody, 
	#no-more-tables th, 
	#no-more-tables td, 
	#no-more-tables tr { 
		display: block; 
	}
	/* Hide table headers (but not display: none;, for accessibility) */
	#no-more-tables thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	#no-more-tables tr { border: 1px solid #ccc; }
	#no-more-tables td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
		white-space: normal;
		text-align:left;
	}
	#no-more-tables td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
		text-align:left;
		font-weight: bold;
	}
	/* Label the data */
	#no-more-tables td:before { content: attr(data-title); }
}

/* --------------------------------------- MEDIA QUERIES ----------------------------------------- */
@media (max-width: 1200px) {
}
@media (max-width: 1024px) {
	.header-wrap .img-responsive { /* or .img-fluid? */
	margin: 0 auto;
	}
}
@media (max-width: 992px) {
	
}
@media (min-width: 768px) {
}
@media (max-width: 767px) {
	body.contact .jumbotron {
		display: none;
	}
}
@media (max-width: 320px) {
}

/* --------------------------------------- DADRA STYLES ----------------------------------------- */

/* fix margin issues on smaller screens caused by .offest-1 */
@media (max-width: 767px) {
	.offset-1 {
	    margin-left: 0;
	}
}
/* ----- HEADER ----- */
header {
	position: relative;
	background-image: url(images/bennington-self-storage-doors-header.jpg);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}
header .header-content-wrap {
	/* darkening layer */
	background: rgba(0,0,0,0.3);
}
header .header-content {
	display: grid;
  	grid-template-columns: 1fr 1fr;
  	grid-template-rows: auto;
  	grid-template-areas: 
    "logo button"
    "text text";
    grid-gap: 20px;
}
header .logo-wrap {
	grid-area: logo;
	justify-self: end;
	width: 150px;
	padding: 20px 0 0 15px;
}
header .logo-wrap img {
	display: block;
	max-width: 100%;
	height: auto;
}
header .header-button-wrap {
	grid-area: button;
	justify-self: start;
	padding: 20px 15px 0 0;
}
header .btn-header {
	padding: 5px 10px;
}
header .header-text {
	grid-area: text;
	padding: 0 20px 20px 20px;
	text-align: center;
	font-weight: 600;
	font-size: .9em;
	color: #fff;
}
header .header-text p {
	max-width: 400px;
	margin: 0 auto;
	text-shadow: 0 0 40px #000;
}

/* ----- NAV ----- */
/* hamburger - make it white */
.navbar-dark .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1.0)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
/* top nav links - make 'em white*/
nav ul.topnav > li > a.nav-link {
	color: #fff !important;
}
/* top nav links - hover and active state */
nav ul.topnav > li > a.nav-link:hover,
nav ul.topnav > li.show > a.nav-link {
	border-bottom: 4px solid rgba(255,255,255,0.5) !important;
}
/* dropdown menu links - remove clunky bottom border */
nav ul.topnav a.dropdown-item {
	border: 0 !important;
}
/* dropdown menu links - hover state */
nav ul.topnav a.dropdown-item:hover {
	color: #fff;
	background: #008066;
}
/* top nav links - make 'em white and add some padding */
nav ul.topnav > li > a.nav-link {
        padding-right: 15px !important;
        padding-left: 15px !important;
        color: #fff !important;
}
/* top nav links - current page marker */
.nav-item.active {
    background: rgba(255,255,255,0.3) !important;
}
/* phone number link on mobile */
nav #call a {
	color: #fff;
}
/* copied from bootstrap.css and overriding values here */
.dropdown-item.active, .dropdown-item:active {
  color: #fff;
  text-decoration: none;
  background-color: #008066;
}
/* ----- 375px+ ----- */
@media (min-width: 375px) {
	header .header-button-wrap {
		padding-top: 30px;
	}
}
/* ----- 768px+ ----- */
@media (min-width: 768px) {
	header .header-content {
		display: grid;
	  	grid-template-columns: 3fr 5fr 3fr;
	  	grid-template-areas: 
	    "logo text button";
	    grid-gap: 50px;
		max-width: 976px;
		margin: 0 auto;
		padding: 20px 30px;
	}
	header .logo-wrap {
		justify-self: start;
		width: auto;
		padding: 5px 0 0 0;
	}
	header .header-button-wrap {
		justify-self: end;
		padding: 25px 0 0 0;
	}
	header .header-text {
		padding: 0;
	}
	header .header-text p {
		max-width: none;
	}
}
/* ----- 900px+ ----- */
@media (min-width: 900px) {
	header .header-content {
	  	grid-template-columns: 1fr 2fr 1fr;
	  	padding: 40px 30px;
	}
	header .header-text {
		padding-top: 10px;
		font-size: 1em;
	}
}
/* ----- 992px+ ----- */
@media (min-width: 992px) {
	nav .container {
		max-width: 976px;
	}
}

img {
    max-width: 90vw;
}

div#divPromoBanner {
    display: flex;
    align-items: center;
    gap: 4rem;
    max-width: 1090px;
    margin: 0 auto;
    padding: 1rem;
    background: white;
    color: white;
}

#divPromo {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-items: center;
    /* align-content: space-evenly; */
    background: #D0244A;
    /* width: 55rem; */
    /* margin: 0 auto; */
    border: black solid 5px;
    padding: 1rem;
    justify-content: space-around;
    flex: 6 0;
}

#divOutsidePromo {
    flex: 1 0;
    justify-self: center;
}

#divOutsidePromo .btn-header {
   background-color: #008066;
   border-color: #008066;
}

#divOutsidePromo .btn-header:hover,
#divOutsidePromo .btn-header:focus,
#divOutsidePromo .btn-header:active {
   color: #008066;
   background-color: #ffffff;
   border-color: #008066;
}

#divPromo #div1Dollar {
    display: flex;
    align-content: center;
    line-height: 1.1;
    gap: 10px;
    align-items: center;
}

#divPromo #div1Dollar span.one-dollar {
    font-size: 200%;
}

#divPromo #div1Dollar span.other {
    text-transform: uppercase;
    width: 5em;
}

#divPromo #divDetails {
    line-height: 1.1;
    font-size: 75%;
    width: 40%;
    font-weight: bold;
}

#divPromo #divDetails .side-by-side {
    display: flex;
    justify-content: space-around;
    margin: 10px 0 0;
    font-size: 120%;
    font-weight: bold;
}

#divPromo #divButtons {
    display: flex;
    gap: 30px;
    justify-content: center;
}

@media (max-width: 767px) {
    div#divPromoBanner {
	display: block;
    }

    #divPromo {
	display: block;
	width: auto;
	text-align: center;
	margin-bottom: 2rem;
    }
    #divPromo > div {
	margin: 0.5rem 0;
    }
    #divPromo #div1Dollar {
	gap: 3px;
	justify-content: center;
    }
    #divPromo #divDetails {
	width: auto;
    }
}

div#divNowOffering {
    color: yellow;
    background-color: #2a2122;
    margin: 0;
    padding: 10px;
    border-radius: 0px;
    font-weight: bold;
    text-align: center;
}

div#divNowOffering p {
    margin: 0;
}

#divNowOffering a {
    color: yellow;
    text-decoration: underline;
}

#divNowOffering a:hover {
    color: tan;
    text-decoration: none;
}