/*

  Theme Name: Anthony Finds Deals
  Theme URI: 
  Author: Larry Enzer
  Author URI: https://www.mwdwebsites.com
  Description: Bahamian Solar Management is a compatible theme made with WordPress. It is a great modern design using modern UI/UX design principals. Using this you can sell anything online. The theme is beautiflly designed, custom and fully responsive.
  Version: 1.0
  Text-domain: anthony-finds-deals
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
  Tags: e-commerce, custom-menu, custom-logo, featured-images, footer-widgets, theme-options, translation-ready, blog, right-sidebar, sticky-post, threaded-comments
  */



/*
--- 01 TYPOGRAPHY SYSTEM

 FONT SIZE SYSTEM (px)
  10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98

  SPACING SYSTEM (px)
  2 / 4 / 8 / 16/ 24 / 32 / 48 / 64 / 80 / 96 / 128

- Font weights
Default: 400
Medium: 500
Semi-bold: 600
Bold: 700

- Line heights
Default: 1
Small: 1.05
Medium: 1.2
Paragraph default: 1.6
Large: 1.8

- Letter spacing
-0.5px
0.75px

--- 02 COLORS

- Primary: 
Brown: #f08c00
Header: #fff4e6

Blue Main: #5c7cfa
White Main: #f8f9fa


accent Shade
Blue: #4c6ef5

- Tints:
#fd7e14

- Shades: 
#cf711f
#45260a

- Accents

- Greys
#212529

--- 05 SHADOWS


--- 06 BORDER-RADIUS

Default: 9px
Medium: 11px

--- 07 WHITESPACE

- Spacing system (px)
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
*/

/**************************/
/* GENRAL REUSABLE COMPONENTS */
/**************************/

html #wpadminbar {
  position: fixed;
  top: 0;
}

html {
  /* 10px / 16px = 62.5% */
  font-size: 62.5%;
}

html.disable-scroll {
  overflow: hidden;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none; 
}

/* clearfix hack, after is last child of parent div */
.clearfix::after {
  clear: both;
  content: "";
  display: block;
}

/* CSS Document */
html * {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
.breadcrumb-item.active {
  color: #636e72;
  font-weight: 500;
  width: auto !important;
}
.breadcrumb-item {
    float: none ;
}
.preloadImage, .preloadImage img {
	width:0;
	height:0;
	visibility: hidden;
	left: -9999px;
	position: relative;
}
.leftOffers strong, .headerSectionText {
  color: #e17055;
}
.cat-icon {
	position: relative;
	font-size: 1.8rem !important;
	color:steelblue;
}
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
  outline: none;
  box-shadow: none;
}
button[aria-expanded="false"] .navbar-toggler-icon {
  background-image: url('images/menu-outline.svg');
  width: 4rem;
  height: 4rem;
  z-index: 9999;
  filter: brightness(0) saturate(100%) invert(66%) sepia(80%) saturate(7061%) hue-rotate(188deg) brightness(98%) contrast(93%);
  transition: all .3s ease-in;
}

button[aria-expanded="true"] .navbar-toggler-icon {
  background-image: url('images/close-outline.svg');
  width: 4rem;
  height: 4rem;
  filter: brightness(0) saturate(100%) invert(66%) sepia(80%) saturate(7061%) hue-rotate(188deg) brightness(98%) contrast(93%);
  z-index: 9999;
}		
a, .navbar-toggler, button {
  outline: 0;			
}
.logo {
	max-width: 30rem !important;
}
.headerSectionText {
	font-weight: bold !important;
}
.disabled {
	color: #660000 !important;
	font-weight: bold !important;
}
.img-link {
	margin-bottom:10px;
	border: 1px solid black;
	width:100%;
}
.breadcrumb {
	border: 1px solid rgba(55,90,139,0.50);
	border-radius:8px;
	padding: 8px 15px;
	background-color: antiquewhite;
	font-size:1.4rem;
}
.bannerLink {
	margin: 1rem 5px;
	max-width: 25rem !important;
}
a.bannerLink:hover {
	color: #fff !important;
}
h3.headerSectionText {
	text-decoration: none !important;
	font-size: 2rem !important;
}
.pGutter {
	margin-top: 1.6rem;
  margin-bottom: 1.6rem;
}
.navbar-brand i {
	top: 5px; 
	position: relative;
	font-size: 2.4rem;
	color:steelblue;
}
.rectImage {
	margin-bottom: 1rem;
	border-radius: 3px;
	border: 2px solid #333;
	border-radius:6px;
	
}
.salesLFD img, .bannerLink img, .fadeBanner {
	/* visibility: hidden; */
  box-shadow: 0 0rem 4.8rem rgba(0, 0, 0, 0.075);
} 
figcaption {
	margin-bottom: 1.6rem;
	margin-top: 1.6rem;
	line-height: 1.4;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 2rem;
}
.salesLFD img {
	margin-bottom: 0px !important;
}
#savingsLinks img {
	margin-bottom: 1rem;
}
.bannerRight {
	margin-right: 1.6rem;
}
option {
	background-color: honeydew !important;
}
.savingsSelect { 
  height: 5rem !important;
	margin-bottom: 2rem; 
	margin-top: 5px; 
	font-family: 'Mukta', sans-serif;
  font-size: 1rem;
	padding:2px 1rem;
	border-radius: 6px;
	border:1px solid rgba(51,201,208,1.00);
}
select {
  width: 100% !important;
  padding: 1.2rem !important;
  font-size: 1.8rem !important;
  font-family: inherit !important;
  color: inherit !important;
  background-color: #fdf2e9 !important;
  border-radius: 9px !important;
  border: none !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}
.leftOffers {
	padding-left: 2rem !important;
}
.card-body {
	font-weight: normal !important;
	font-family: 'Mukta', sans-serif;
	font-size:17px;
	padding:10px;
}
#savingsLinks {
	border-radius: 8px;
	margin-bottom: 2rem;
	margin-top: 2rem;
	padding-top: 3rem;
	background-color: aliceblue;
	font-size: 2rem;
	font-family: 'Titillium Web', sans-serif;
}
.leftLine {
	border-left: 1px solid #ccc; 
	padding:1rem 3rem;
}
.rightLine {
	border-right:1px solid #ccc; 
	padding:1rem 2rem;
}
.rightLine img {
  margin-bottom: 2.6rem;
}
.bannerPadding {
	margin: 1rem 0;
}
.jumbotron {
	margin-bottom: 1rem;
	padding-bottom: 1rem;
	padding-top: 1.6rem;
}
footer {
	padding-left: 2rem;
  font-size: 1.4rem;
  font-weight: 600;
  font-family: 'Mukta', sans-serif;
  color: #00b894;
}
.card {
  margin-bottom: 40px !important;
}
.browseImage2 {
  width: 25rem;
  height: 9rem;
}
.view .mask h2 {
	font-size: 1.2rem;
}
/* css for the banner effect overlay */
.view {
  margin: 1rem;
  float: left;
  border: 1px solid #333;
  overflow: hidden;
  position: relative;
  text-align: center;
  box-shadow: 1px 1px 2px #e6e6e6;
  cursor: default;
  background: #fff url(../images/bgimg.jpg) no-repeat center center
}
.view .mask, .view .content {
	width: 25rem;
	height: 7.9rem;
	position: absolute;
	overflow: hidden;
	top: 0;
	left: 0;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
.view img {
  display: block;
  position: relative;
	width: 22rem;
	height: 7.9rem;
}
.view h2 {
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  position: relative;
  font-size: 1.8rem;
  padding: 1.6rem;
  background: rgba(0, 0, 0, 0.6);
  margin: 2rem 0 0 0;
}
.view p {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 1.2rem;
  position: relative;
  color: #fff;
  padding: 1.0rem 2rem 2rem;
  text-align: center;
}
.view a.info {
  display: inline-block;
  text-decoration: none;
  padding: 7px 1.4rem;
  background: #000;
  color: #fff;
  text-transform: uppercase;
  box-shadow: 0 0 1px #000;
}
.view a.info:hover {
  box-shadow: 0 0 5px #000
}

/* v1 */
.view-first img { 
  transition: all 0.2s linear;
}
.view-first .mask {
  opacity: 0;
  background-color:rgba(231,240,91,0.40);
  transition: all 0.4s ease-in-out;
}
.view-first h2 {
  transform: translateY(-100px);
  opacity: 0;
  transition: all 0.2s ease-in-out;
}
.view-first p { 
  transform: translateY(100px);
  opacity: 0;
	transition: all 0.2s linear;
}
.view-first a.info{
  opacity: 0;
	transition: all 0.2s ease-in-out;
}

.view-first:hover img { 
	transform: scale(1.1);
} 
.view-first:hover .mask { 
	opacity: 1;
}
.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
  opacity: 1;
  transform: translateY(0px);
}
.view-first:hover p {
   transition-delay: 0.1s;
}
.view-first:hover a.info {
   transition-delay: 0.2s;
}
/* v1 */

@media (min-width:200px) and (max-width: 1245px) {
  .view .mask h2 {
    font-size: 0px !important;
    padding: 2rem 5px; 
    margin-top: 2.4rem;
    display: none !important;  
  }
}
@media (min-width:992px) and (max-width: 1245px) {
  .view .mask h2 {
    font-size: 0px !important;
    padding: 2rem 5px; 
    margin-top: 2.3rem;
    display: none;  
  }	
  .view { 
    width: 17.5rem !important;
    height: 7.4rem !important;
    margin: 1rem;
    float: left;
    border: 1px solid #333;
    overflow: hidden;
    position: relative;
    text-align: center;
    box-shadow: 1px 1px 2px #e6e6e6;
    cursor: default;
    background: #fff url(../images/bgimg.jpg) no-repeat center center
  }
  .view .mask, .view .content {
    width: 17.3rem;
    height: 7.4rem;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
  }
  .view img {
    display: block;
    position: relative;
    width: 17rem !important;
    height: 7.2rem;
  }
} 

/* @media (min-width:0px) { */
/* end css */
@media (max-width:991px) {
  figcaption {
	  margin-bottom: 1.6rem;
	  line-height: 2.6;
	  font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	  font-size: 1.8rem;
  }	
  .leftLine {
	  border-left: 1px solid white !important; 
	  padding:2rem 1rem;
  }
  .rightLine {
    border-right: 1px solid white !important;	  	
  }	
  .logo2{
	  width:26.5rem;
	  height:3.2rem;
  }
  .jumbotron span {
		font-size: 16rem;
		padding-top: 2rem;
  }
}
.menu-list {
	margin-top: 2rem !important;
}
.menu-list li {
	margin-bottom: 1rem;
}
.jumbotron {
	background-color:#fff;
	border: 1px solid rgba(183,60,62,0.40);
	border-radius: 8px;
}
.jumbotron h4 {
	border-bottom: 1px solid #333;
	margin-bottom: 10px;
}
.jumbotron h4 span {
	float: right;
} 
.imageborder {
	margin: 0 3rem 3rem 3rem !important;
	border:1px solid #333 !important;
}
.panel-default,.panel-group {
	margin:0px !important;
	padding:0px !important;
  border:none !important;
	color:#fff !important;
}
.mb-0, h5 {
	color: #fff !important;
}
.panel-heading, .card-header{
	margin: 0 !important;
	padding-left: 15px !important;
	color: #fff !important;
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
	font-size:12px;
}
.table-class {
	width: 32rem !important;
}
.table-class, .table-class td{
	border: 3px solid rgba(38,138,211,1.00);
	margin-bottom: 1rem;
	margin-top: 0px;
	margin-bottom: 2rem;
	font-size:1.6rem;
	font-weight: bold;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"
}
.table-class i, .card-body i {
	color:sienna;
	font-size: 2rem;
}
.menu-list {
	list-style: none;
	margin-left: -1.5rem;
	margin-top: 1rem;
	padding-right: 2rem;
}
.footer-td {
	background-color: rgba(38,138,211,1.00) !important;
}
nav {
  margin-bottom: 5px;	
}
li.active .nav-link {
  color: #d63031;
}
.nav-link {
  color: #636e72;
  font-size: 2rem;
  font-weight: 500;
  transition: all .3s ease-in;
}
.navbar-nav {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr);
}
header {
	padding: 1.4rem;
}
.navbar-custom {
  background-color: #ff5500;
}
/* change the brand and text color */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
  color: rgba(255,255,255,.8);
}
/* change the link color */
.navbar-custom .navbar-nav .nav-link {
  color: rgba(255,255,255,.5);
}
/* change the color of active or hovered links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:hover .nav-link {
  color: #ffffff;
}
.style-logo {
	margin-left: auto;
	margin-right: auto;
	display: block;
}
.style-nav ul {
	list-style-type: none;
}
.style-nav ul li a {
	text-decoration: none;
	color: #2F322A;
	text-align: center;
	display: block;
	text-transform: uppercase;
	padding: 8px;
}

/*Tablet View*/

@media (min-width: 768px){
  .custom-logo {
    width: 30rem;
    height: auto;
  }
	.style-nav ul li {
		display: inline-block;
	}
}

/*Desktop View*/

@media (min-width: 1024px){
	.style-logo {
		float: left;
	}
	.style-nav {
		float: right;
	}
}

@media (max-width:1000px) {
	.table-class {
	  width: 25rem !important;
  }
	.view-first img {
		width: 20rem;
		height: 7.2rem;
	}
	.view-first {
		width: 22rem;
		height:7.2rem;
	}
  .table-class, .table-class td{
    border: 3px solid rgba(38,138,211,1.00);
    margin-bottom: 1rem;
    margin-top: 0px;
    margin-bottom: 1.5rem;
    font-size: 1.2rem;
    font-weight: bold;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"
  }
  .table-class i, .card-body i {
    color:sienna;
    font-size: 1.5rem;
  }
}
@media (max-width:825px) {
  .custom-logo {
    width: 28rem;
    height: auto;
  }
	.table-class {
	  width: 23.5rem;
  }
	.view-first img {
		width: 18rem;
		height:6.4rem;
	}
	.view-first {
		width: 18rem;
		height:6.4rem;
	}
  .table-class, .table-class td{
    border: 3px solid rgba(38,138,211,1.00);
    margin-bottom: 1rem;
    margin-top: 0px;
    margin-bottom: 2rem;
    font-size: 1.2rem;
    font-weight: bold;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"
  }
  .table-class i, .card-body i {
    color:sienna;
    font-size: 1.6rem;
  }
  /* css for the banner effect overlay */
  .view {
    width: 20rem;
    height: 6.4rem;
    margin: 1rem;
    float: left;
    border: 1px solid #333;
    overflow: hidden;
    position: relative;
    text-align: center;
    box-shadow: 1px 1px 2px #e6e6e6;
    cursor: default;
    background: #fff url(../images/bgimg.jpg) no-repeat center center
  }
  .view .mask, .view .content {
    width: 20rem;
    height: 5.7rem;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0
  }
  .view img {
    display: block;
    position: relative
  }
  .view h2 {
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    position: relative;
    font-size: 1.6rem;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.6);
    margin: 1rem 0 0 0
  }
  .view p {
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 1.2rem;
    position: relative;
    color: #fff;
    padding: 1rem 2rem 2rem;
    text-align: center
  }
  .view a.info {
    display: inline-block;
    text-decoration: none;
    padding: 7px 4px;
    background: #000;
    color: #fff;
    text-transform: uppercase;
    box-shadow: 0 0 1px #000
  }
  .view a.info:hover {
    box-shadow: 0 0 5px #000
  }
}
@media (max-width:767.98px) {
  .navbar-nav {
    display: grid !important;
    grid-template-columns: 1fr;
    gap:1.8rem;
    background-color: #48dbfb;
    padding-top: 4rem;
    padding-bottom:4rem;
  }
	.cat-icon {
	  position: relative;
	  font-size: 1.6rem !important;
	  color:steelblue;
  }
	.navbar-brand i {
	  top: 5px; 
	  position: relative;
	  font-size: 2.4rem;
	  color:steelblue;
  }
	.nav-link{
		font-size:2rem;
	}
	.jumbotron h4 span {
		font-size: 1.6rem;
		margin-top:2rem;
	}
	.view-first img {
		width: 25rem;
		height:9rem;
	}
	.view-first {
		width:25rem;
		height:9rem;
	}
	/* css for the banner effect overlay */
  .view {
    width: 25rem;
    height: 9rem;
    margin: 1rem;
    border: 1px solid #333;
    overflow: hidden;
    position: relative;
    text-align: center;
    box-shadow: 1px 1px 2px #e6e6e6;
    cursor: default;
    background: #fff url(../images/bgimg.jpg) no-repeat center center
  }
  .view .mask, .view .content {
    width: 25rem;
    height: 9rem;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0
  }
  .view img {
    display: block;
    position: relative 
  }
  .view h2 {
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    position: relative;
    font-size: 1.6rem;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.6);
    margin: 1rem 0 0 0
  }
  .view p {
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 1.2rem;
    position: relative;
    color: #fff;
    padding: 1rem 2rem 2rem;
    text-align: center
  }
  .view a.info {
    display: inline-block;
    text-decoration: none;
    padding: 7px 4px;
    background: #000;
    color: #fff;
    text-transform: uppercase;
    box-shadow: 0 0 1px #000
  }
  .view a.info:hover {
    box-shadow: 0 0 5px #000
  }
}
@media (max-width:602px) {
  .custom-logo {
    width: 27.5rem;
    height: auto;
  }
	.nav-link{
		font-size:1.4rem;
		color:#333 !important;
		font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif"
	}
	.jumbotron h4 span {
		font-size: 1.4rem;
		margin-top: 1.8rem;
		border:1px solid red;
	}
	.rightLine {
		margin-bottom: 2rem;
		padding-bottom: 1rem;
		border-bottom: 1px solid rgba(240,240,240,0.60);
	}
	.view-first img {
		width: 2rem;
		height:7.2rem;
	}
	.view-first {
		width:20rem;
		height:7.2rem;
	}
  .table-class, .table-class td{
    border: 3px solid rgba(38,138,211,1.00);
    margin-bottom: 1rem;
    margin-top: 0px;
    margin-bottom: 2rem;
    font-size:1.2rem;
    font-weight: bold;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"
  }
  .table-class i, .card-body i {
    color:sienna;
    font-size: 1.8rem;
  }
    /* css for the banner effect overlay */
  .view {
      width: 25rem;
      height: 9rem;
      margin: 1rem;
      float2: left;
      border: 1px solid #333;
      overflow: hidden;
      position: relative;
      text-align: center;
      box-shadow: 1px 1px 2px #e6e6e6;
      cursor: default;
      background: #fff url(../images/bgimg.jpg) no-repeat center center
  }
  .view .mask, .view .content {
      width: 25rem;
      height: 9rem;
      position: absolute;
      overflow: hidden;
      top: 0;
      left: 0
  }
  .view img {
      display: block;
      position: relative
  }
  .view h2 {
      text-transform: uppercase;
      color: #fff;
      text-align: center;
      position: relative;
      font-size: 1.6rem;
      padding: 1rem;
      background: rgba(0, 0, 0, 0.6);
      margin: 10px 0 0 0
  }
  .view p {
      font-family: Georgia, serif;
      font-style: italic;
      font-size: 1.2rem;
      position: relative;
      color: #fff;
      padding: 1rem 2rem 2rem;
      text-align: center
  }
  .view a.info {
      display: inline-block;
      text-decoration: none;
      padding: 7px 4px;
      background: #000;
      color: #fff;
      text-transform: uppercase;
      box-shadow: 0 0 1px #000
  }
  .view a.info:hover {
      box-shadow: 0 0 5px #000
  }
}
@media (max-width:575px) {
  button[aria-expanded="false"] .navbar-toggler-icon {
    width: 3.6rem;
    height: 3.6rem;
    transition: all .3s ease-in;
  }

  button[aria-expanded="true"] .navbar-toggler-icon {
    width: 3.6rem;
    height: 3.6rem;
  }
  .custom-logo {
    width: 25rem;
    height: auto;
  }
	.jumbotron {
	    margin-bottom:1rem;
	    padding-bottom: 1rem;
	    padding-top:1.6rem;
	    padding:0;
	    border:0px solid white !important;
    }
	.nav-link{
		font-size:1.4rem;
		color:#333 !important;
		font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif"
	}
	.jumbotron h4 span {
		font-size: 1.2rem;
		margin-top: 2rem;
	}
}
@media (max-width:500px) {
  button[aria-expanded="false"] .navbar-toggler-icon {
    width: 3.6rem;
    height: 3.6rem;
    transition: all .3s ease-in;
  }
  button[aria-expanded="true"] .navbar-toggler-icon {
    width: 3.6rem;
    height: 3.6rem;
  }
  .custom-logo {
    width: 20rem;
    height: auto;
  }
	.logo {
		width: 80%;
	}
	.card-body {
		padding: 5px;
	}
	.container-fluid {
		padding-left: 5px;
		padding-right: 5px;
		width: 100% !important;
		overflow: hidden;
	}
	figcaption, figure {
		padding: 2px;
		margin: 2px;
		font-size: 1.4rem;
	}
	figcaption {
	    margin: 2rem;
	}
	.headerSectionText {
		padding: 1.6rem 0 0 0;
		font-weight: bold;
	}
	.navbar-toggler-icon, .navbar-toggler {
		font-size: 1.2rem;
		margin: 5px;
		padding: 5px;
	}
	.breadcrumb {
		font-size: 1rem;
		line-height: 1.2em;
		padding: 8px 10px;
	}
	.pGutter {
		font-size: 1.4rem;
		line-height: 1.2;
	}
	h3.headerSectionText {
		font-size: 1.6rem !important;
	}
	.nav-link{
		font-size: 1.4rem;
		color:#333 !important;
		font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif"
	}
	.jumbotron h4 span {
		font-size: 1.4rem;
		margin-top: 0;
	}
    .table-class {
	    width: 300% !important;
    }
	.view-first img {
		width: 60%;
		height:80%;
	}
	.view-first {
		width:95%;
		height:60%;
	}
  .table-class, .table-class td{
    border: 3px solid rgba(38,138,211,1.00);
    margin-bottom: 1rem;
    margin-top: 0;
    margin-bottom: 2rem;
    font-size: 1.2rem;
    font-weight: bold;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"
  }
  .table-class i, .card-body i {
    color:sienna;
    font-size: 1.6rem;
  }
    /* css for the banner effect overlay */
  .view {
    width: 25rem;
    height: 9rem;
    margin-top: 6px;
    margin-right: 6px;
    margin-left: 6px;
    margin-bottom: 6px;
    border: 1px solid #333;
    overflow: hidden;
    position: relative;
    text-align: center;
    box-shadow: 1px 1px 2px #e6e6e6;
    cursor: default;
    background: #fff url(../images/bgimg.jpg) no-repeat center center
  }
  .view .mask, .view .content {
      width: 25rem;
      height: 9rem;
      position: absolute;
      overflow: hidden;
      top: 0;
      left: 0
  }
  .view img {
      display: block;
      position: relative
  }
  .view h2 {
      text-transform: uppercase;
      color: #fff;
      text-align: center;
      position: relative;
      font-size: 1.6rem;
      padding: 1rem;
      background: rgba(0, 0, 0, 0.6);
      margin: 1rem 0 0 0
  }
  .view p {
      font-family: Georgia, serif;
      font-style: italic;
      font-size: 1.2rem;
      position: relative;
      color: #fff;
      padding: 1rem 2rem 2rem;
      text-align: center
  }
  .view a.info {
      display: inline-block;
      text-decoration: none;
      padding: 7px 4px;
      background: #000;
      color: #fff;
      text-transform: uppercase;
      box-shadow: 0 0 1px #000
  }
  .view a.info:hover {
      box-shadow: 0 0 5px #000
  }
}
	
@media (max-width:455px) {
  header {
    padding: 1rem;
  }    
  button[aria-expanded="false"] .navbar-toggler-icon {
    width: 3rem;
    height: 3rem;
  }

  button[aria-expanded="true"] .navbar-toggler-icon {
    width: 3rem;
    height: 3rem;
    transition: all .3s ease-in;
  }
  .custom-logo {
    width: 18rem;
    height: auto;
  }
	.navbar-brand {
		width: 70%;
	}
	.savingsSelect { 
	    margin-bottom: 1rem; 
	    margin-top: 0; 
	    font-family: 'Mukta', sans-serif;
	    padding:2px 1rem;
	    border-radius: 6px;
	    border:1px solid rgba(51,201,208,1.00);
    }
	.savingsText {
	   font-family: 'Titillium Web', sans-serif;
	   font-size: 1.6rem !important;
	   font-weight: bold;
	   color: maroon;
	   margin-bottom: 1rem;
	   text-transform:uppercase;
    }
	.logo2 {
		width: 17.5rem;
		height:2rem;
	}
	.jumbotron h4 span {
		font-size: 1.2rem;
		margin-top: 2rem;
	}
    .table-class {
	    width: 100% !important;
    }
	.view-first img {
		width: 80%;
		height:100%;
	}
	.view-first {
		width:95%;
		height:80%;
	}
  .table-class, .table-class td{
    border: 3px solid rgba(38,138,211,1.00);
    margin-bottom: 1rem;
    margin-top: 0px;
    margin-bottom: 2rem;
    font-size: 1.2rem;
    font-weight: bold;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"
  }
  .table-class i, .card-body i {
    color:sienna;
    font-size: 1.6rem;
  }
    /* css for the banner effect overlay */
  .view {
    width: 25rem;
    height: 9rem;
    margin-top: 6px;
    margin-right: 6px;
    margin-left: 6px;
    margin-bottom: 6px;
    border: 1px solid #333;
    overflow: hidden;
    position: relative;
    text-align: center;
    box-shadow: 1px 1px 2px #e6e6e6;
    cursor: default;
    background: #fff url(../images/bgimg.jpg) no-repeat center center
  }
  .view .mask, .view .content {
      width: 25rem;
      height: 9rem;
      position: absolute;
      overflow: hidden;
      top: 0;
      left: 0
  }
  .view img {
      display: block;
      position: relative
  }
  .view h2 {
      text-transform: uppercase;
      color: #fff;
      text-align: center;
      position: relative;
      font-size: 1.6rem;
      padding: 1rem;
      background: rgba(0, 0, 0, 0.6);
      margin: 1rem 0 0 0
  }
  .view p {
      font-family: Georgia, serif;
      font-style: italic;
      font-size: 1.2rem;
      position: relative;
      color: #fff;
      padding: 1rem 2rem 2rem;
      text-align: center
  }
  .view a.info {
      display: inline-block;
      text-decoration: none;
      padding: 7px 4px;
      background: #000;
      color: #fff;
      text-transform: uppercase;
      box-shadow: 0 0 1px #000
  }
  .view a.info:hover {
      box-shadow: 0 0 5px #000
  }
}

@media (max-width:991px) and (min-width:653px) {
	.view-first img {
		width: 90%;
		height:100%;
	}
	.view-first {
		width:80%;
		height:80%;
	}
	/* css for the banner effect overlay */
  .view {
    width: 25rem;
    height: 9rem;
    margin-top: 6px;
    margin-right: 0px;
    margin-left: 0px;
    margin-bottom: 6px;
    border: 1px solid #333;
    overflow: hidden;
    position: relative;
    text-align: center;
    box-shadow: 1px 1px 2px #e6e6e6;
    cursor: default;
    background: #fff url(../images/bgimg.jpg) no-repeat center center
  }
  .view .mask, .view .content {
      width: 25rem;
      height: 9rem;
      position: absolute;
      overflow: hidden;
      top: 0;
      left: 0
  }
  .view img {
      display: block;
      position: relative
  }
  .view h2 {
      text-transform: uppercase;
      color: #fff;
      text-align: center;
      position: relative;
      font-size: 1.6rem;
      padding: 1rem;
      background: rgba(0, 0, 0, 0.6);
      margin: 1rem 0 0 0;
  }
  .view p {
      font-family: Georgia, serif;
      font-style: italic;
      font-size: 1.2rem;
      position: relative;
      color: #fff;
      padding: 1rem 2rem 2rem;
      text-align: center
  }
  .view a.info {
      display: inline-block;
      text-decoration: none;
      padding: 7px 4px;
      background: #000;
      color: #fff;
      text-transform: uppercase;
      box-shadow: 0 0 1px #000
  }
  .view a.info:hover {
      box-shadow: 0 0 5px #000
  }
}

@media (max-width:650px) and (min-width:576px) {
	.view-first img {
		width: 18rem;
		height:6.4rem;
	}
	.view-first {
		width: 18rem;
		height: 6.4rem;
	}
	/* css for the banner effect overlay */
  .view {
    width: 18rem;
    height: 6.4rem;
    margin-top: 6px;
    margin-right: 0px;
    margin-left: 0px;
    margin-bottom: 6px;
    border: 1px solid #333;
    overflow: hidden;
    position: relative;
    text-align: center;
    box-shadow: 1px 1px 2px #e6e6e6;
    cursor: default;
    background: #fff url(../images/bgimg.jpg) no-repeat center center
  }
  .view .mask, .view .content {
      width: 18rem;
      height: 6.4rem;
      position: absolute;
      overflow: hidden;
      top: 0;
      left: 0
  }
  .view img {
      display: block;
      position: relative
  }
  .view h2 {
      text-transform: uppercase;
      color: #fff;
      text-align: center;
      position: relative;
      font-size: 13px;
      padding: 10px;
      background: rgba(0, 0, 0, 0.6);
      margin: 8px 0 0 0
  }
  .view p {
      font-family: Georgia, serif;
      font-style: italic;
      font-size: 12px;
      position: relative;
      color: #fff;
      padding: 10px 20px 20px;
      text-align: center
  }
  .view a.info {
      display: inline-block;
      text-decoration: none;
      padding: 7px 4px;
      background: #000;
      color: #fff;
      text-transform: uppercase;
      box-shadow: 0 0 1px #000
  }
  .view a.info:hover {
      box-shadow: 0 0 5px #000
  }
}
@media (max-width:643px) {
  header {
    padding: 1rem;
  }    
  figcaption {
    margin-bottom: 5px;
    line-height: 5px;
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
    font-size: 1.4rem;
  }
}
@media (max-width:575px) and (min-width:200px) {
	.view-first img {
		width: 24.5rem;
		height:9rem;
	}
	.view-first {
		width: 29rem;
		height: 9rem;
	}
	/* css for the banner effect overlay */
    .view {
	  width: 29rem;
	  height: 9rem;
	  margin-top: 6px;
	  margin-bottom: 6px;
	  border: 1px solid #333;
	  overflow: hidden;
	  text-align: center;
	  box-shadow: 1px 1px 2px #e6e6e6;
	  cursor: default;
  }
  .view .mask, .view .content {
      width: 29rem;
      height: 9rem;
      overflow: hidden;
  }
  .view img {
      display: block;
  }
  .view h2 {
      text-transform: uppercase;
      color: #fff;
      font-size: 13px;
      padding: 2rem;
      background: rgba(0, 0, 0, 0.6);
      margin: 1.6rem 0 0 0;
    text-align: center;
  }
  .view a.info {
      display: inline-block;
      text-decoration: none;
      padding: 7px 4px;
      background: #000;
      color: #fff;
      text-transform: uppercase;
      box-shadow: 0 0 1px #000
  }
  .view a.info:hover {
      box-shadow: 0 0 5px #000
  }
}

@media (max-width:1065px) and (min-width:901px) {
   .card-body i {
	   color:sienna;
	   font-size: 18px;
   }
   footer {
		font-size: 1.4rem;
    font-weight: 600;
    font-family: 'Mukta', sans-serif;
    color: #00b894;
   }	
}
@media (max-width:900px) and (min-width:201px) {	
   .card-body i {
	  color:sienna;
	  font-size: 1.6rem;
   }	
   footer {
		font-size: 1.2rem;
    font-family: 'Mukta', sans-serif;
    font-weight: 600;
    color: #00b894;
   }	
}