/*GLOBALS*/
html {
	background: url(Images/wallpapers.jpg);
	z-index: 1;
	width: auto !important;
	height: auto;
	overflow-x: hidden;
	margin-right: 0%;
}

body {
	background: url(Images/wallpapers.jpg);
}
/* ----------- iPhone 6 ----------- */

@media screen and (max-width: 375px) {
    body {
        overflow-x: hidden;
    }
}

@media screen and (max-width: 300px){
    body {
        overflow-x: hidden;
    }
}


/* ----------- iPad mini ----------- */

@media screen and (max-width: 768px) {
    body {
        overflow-x: hidden;
    }
}

/*Navigation Bar*/


/*bar*/
.navigation{
	height: 110px;
	background: #FFFFFF;
}

.nav-container {
	height: 110px;
	max-width: auto;
	margin:  auto;
	background: #FFFFFF;
}

.brand{
	position: absolute;
	padding-left: 2px;
	float: left;
	color: maroon;
}

.brand a, .brand a:visited{
	color: maroon;
	font-size: 1.6em;
	line-height: 80px;
	padding-left: 5px;
}


.brand img{
	position: relative;
	float: left;
    height: 73px;
	width: 73px;
	margin-top: 5px;
}

nav{
	float:right;
	margin-top: 25px;
}

nav ul{
	list-style: none;
	margin-top: 0px;
	padding: 0;
}

nav ul li{
	float: left;
	position: relative;
}

nav ul li a, nav ul li a:visited{
	display: block;
	padding: 0 20px;
	line-height: 70px;
	background: white;
	color: maroon;
	font-family: Trebuchet MS;
	font-size: 1.1em;
	text-decoration: none;
}

nav ul li a: hover, nav ul li a:visited:hover{
	background: white;
	color: maroon;
		text-decoration: none;
}

a :hover
{
    text-decoration:none;
}

nav ul li a:not(:only-child):after, nav ul li a:visited:not(:only-child):after{
	padding-left: 4px;
	content: ' ▾';
	text-decoration: none;
}

nav ul li ul li {
  min-width: 190px;
}

nav ul li ul li a {
  padding: 15px;
  line-height: 20px;
}

.nav-dropdown {
  position: absolute;
  display: none;
  z-index: 1;
  box-shadow: none;
}

/* Mobile navigation */
.nav-mobile {
  display: none;
  position: absolute;
  top: 10px;
  right: 0;
  background: white;
  height: 70px;
  width: 70px;
}

@media only screen and (max-width: 798px) {
  .nav-mobile {
    display: block;
  }

  nav {
    width: 100%;
	padding: 70px 0 15px;
  }
  nav ul {
    display: none;
  }
  nav ul li {
    float: none;
  }
  nav ul li a {
    padding: 15px;
    line-height: 20px;
  }
  nav ul li ul li a {
    padding-left: 30px;
  }

  .nav-dropdown {
    position: static;
  }
}

@media screen and (min-width: 799px) {
  .nav-list {
    display: block !important;
  }
}

#nav-toggle {
  position: absolute;
  left: 18px;
  top: 20px;
  cursor: pointer;
  padding: 10px 35px 16px 0px;
}

#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
  cursor: pointer;
  border-radius: 1px;
  height: 5px;
  width: 35px;
  background: maroon;
  position: absolute;
  display: block;
  content: '';
  transition: all 300ms ease-in-out;
}

#nav-toggle span:before {
  top: -10px;
}

#nav-toggle span:after {
  bottom: -10px;
}

#nav-toggle.active span {
  background-color: transparent;
}

#nav-toggle.active span:before, #nav-toggle.active span:after {
  top: 0;
}

#nav-toggle.active span:before {
  transform: rotate(45deg);
}

#nav-toggle.active span:after {
  transform: rotate(-45deg);
}

#nav-toggle.active span:after {
  transform: rotate(-45deg);
}

#icons {
	height: 60px;
	width: 100%;
	margin-right: 0px;
	margin-bottom: 5px;
}

#icon1 {
    background: url('Images/back-arrow.png') left no-repeat;
	height: 60px;
	width: 60px;
	border: none;
}

#icon2 {
    background: url('Images/right-arrow.png') left no-repeat;
	height: 60px;
	width: 60px;
	border: none;
}

.carcontainer {
	margin-top: -10px;
}

#myCarousel {
 	margin-top: -40px;
	max-width: 100%;
	margin:  auto;
}

#myCarousel .carousel-inner .item{
	width: 100%;
}

.carousel-inner > .item > img,
  .carousel-inner > .item > a > img {
width: 100%;

}

/*Collapsible*/
.intro {
	background-color: #FFFAF0;
}

.intro p{
	margin-left: 20px;
	margin-right: 20px;
}

.page-header{
	margin-top: 50px;
	text-align: left;
}

.panel{
   margin: 60px;
   display: flex; 
   position: relative;   
 }

.panel-default{
	border-radius: 3px;
}

.container1 {
	position: relative;
	flex: left;
	margin-top: -10px;
}

.container1 h2{
	color: maroon;
	margin-left: 10px;
}

.container1 p {
	text-align: left;
	margin-left: 10px;
	margin-right: 10px;
	font-family: Arial;
	font-weight: none;
	font-size: 1em;
}

.panel-body {
	display: inline-flex;
	float: left;
	margin:20px;
	text-align: left;
	color: maroon;
}



.panel-body li {
	display: inline-flex;
	float: left;
	margin:20px;
	text-align: left;
	color: maroon;
}

a:link {	
	color: maroon;
}

a:visited {
	color: maroon;
}

a:hover {
	color: maroon;
	text-decoration: none;
} 

.panel-heading{
	text-align: left;
}


.brands {
	margin-top: 10px;
	margin-bottom: 10px;
	font-size: 32px;
}

.brands p {
	color: #F5DEB3;
	text-align: center;
}

/*Footer*/

#footer {
	background: #B22222;
	padding: 0 0 30px 0;
	color: #d3d3d3;	
	position: relative;
	height: 450px;
	margin-bottom: 0px;
}

#footer .footer-top .footer-info {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
	font-family: cursive;
	height: 100%;
	text-align: center;
}

#footer .footer-top .footer-info p{
	font-size: 15px;
	margin-top: 50px;
	line-height: 2;
	font-family:Arial;
	color: black;
	text-align: center;
}

.container .copyright {
	position: relative;
	text-align: center;
	margin-top: 390px;
	border-radius: 5px;
	font-size: 0.8em;
	color: black;
}


.cards-container {
	margin-top: 33px;
	display: flex;
	position: relative;
	flex-direction: row;
	flex-wrap: wrap;
	max-width: 1080px;
	margin: 0 auto;
	margin-bottom: 22px;
}

.card-wrapper {
    display:flex;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
	transition: 0.3s;
	width: 15%;
	border-radius: 5px;
	margin:5px auto;
	-webkit-animation:scaledown 0.3s linear;
	-moz-animation:scaledown 0.3s linear;
	animation:scaledown 0.2s linear;
	transform-origin:50% 50%;
	animation-fill-mode: forwards;
	background-color: white;
	height: 150px;
	width: 210px;
}

.card-wrapper:hover {
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
	z-index:100;
	-webkit-animation:scale 0.3s linear;
	-moz-animation:scale 0.3s linear;
	animation:scale 0.1s linear;
	transform-origin:50% 50%;
	animation-fill-mode: forwards;
}


.card-image img {
  border-radius: 5px 0 0 5px;
  height: 100%;
  width: 100%;
  object-fit: cover;
  padding: 5px;
}

@keyframes scale{
	0%{
		transform:scale(1.0);
  }
	100%{
		transform:scale(1.02);
	}
}

@keyframes scaledown{
	0%{
		transform:scale(1.02);
	}
	100%{
		transform:scale(1.0);
	}
}

.av{
	display: inline-block;
	font-weight: none;
}

.popup-position{
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,0.7);
	width: 100%;
	z-index: 3;
	

}

#popup-wrapper{
	width: 100%;
	margin: 70px auto;
	text-align: left;
	height: 100%;
	position: center;
}

#popup-container{
	background-color: #FFF;
	padding: auto;
	border-radius: 4px;
	margin-top: 40px !important;
	display: inline-block;
	height: 100%;
	position: center;
}

#wrapper {
	height: 5% !important;
	width: 100%;
	text-align: center;
}

.image_backgroundContainer, .card_image {
  max-width: 100%;
  position: relative;
  width: 100%;
  height: 100%;
}

.image_backgroundContainer img {
  background-color: inherit;
  background-size: cover;
  background-image: inherit;
  background-position: 50% 50%;
  content: "";
  display: block;
  height: 75%;
  width: 100%;
  object-fit: scale-down;
  object-position: 200% 200%;
  padding-left: 100%;
}

.type .overflow, .card_description, .card_title {
  background-color: inherit;
  /* stylelint-disable property-no-unknown */
  box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-box-orient: vertical;
  /* stylelint-enable */
  color: inherit;
  display: box;
  display: -webkit-box;
  display: -moz-box;
  margin: 0;
  max-width: 100%;
  overflow: hidden;
  padding: 0;
  position: relative;
  text-overflow: -o-ellipsis-lastline;
  text-overflow: ellipsis;
  height: 100%;
}

.cardCollection {
  align-items: left;
  align-content: flex-start;
  display: flex;
  justify-content: left;
  flex-wrap: wrap;
  margin: 0 auto;
  max-width: none;
  padding: 18px;
  height: 100% !important;
}

.card {
  box-shadow: 0 0 0 1px #95989a;
  color: #323232;
  display: flex;
  flex: 0 1 auto;
  flex-direction: left !important;
  height: 400px;
  margin: 15px;
  max-width: calc(100% - 36px);
  position: absolute;
  width: 350px;
  align-items: left;
  overflow: hidden;
}

.card_image {
  height: 100%;
  max-height: 300px;
}

.card_info {
  background-color: #FFF;
  display: flex;
  flex: 1 1 auto;
  flex-direction: left;
  height: 100%;
  max-height: 100px;
  padding: 10px;
}

.card_description {
  font-size: 16px;
  max-height: 70px;
}

.card_title {
  font-size: 22px;
  margin: 24px 0 23px;
  max-height: 30px;
}


/*
* @textClampOverflowConfig
* An Array of config strings consisting of:
- valid selector **(class, id, and other specific selectors must be evaluated ~'(#.+~)String')**
- the number of lines before the overflow treatment is applied
- and the line height of the elment being effected
* {Selector} {Max Number of Lines} {Line Height of Type}...
* {Selector} {Max Number of Lines} {Line Height of Type}...
*/
@-moz-document url-prefix() {
  .gradientPsuedoElement,
  .card_description:after,
  .card_title:after {
    content: "";
    background: linear-gradient(to right, rgba(255, 255, 255, 0), #ffffff);
    position: absolute;
    right: 0;
    text-align: right;
    width: 36%;
  }
  
  .card_description:after {
    height: 26px;
    top: 52px;
  }
  
  .card_title:after {
    height: 26px;
    top: 26px;
  }
}

@supports (-ms-ime-align: auto) {
  .gradientPsuedoElement,
  .card_description:after,
  .card_title:after {
    content: "";
    background: linear-gradient(to right, rgba(255, 255, 255, 0), #ffffff);
    position: absolute;
    right: 0;
    text-align: right;
    width: 36%;
  }
  
  .card_description:after {
    height: 26px;
    top: 52px;
  }
  
  .card_title:after {
    height: 26px;
    top: 26px;
  }
}

#form {
	border: none;
	font-size: 0.4cm;
	color: black;
	position: relative;
	text-align: left;
	line-height: 1;
	width: 100%;
	max-height: 55px;
	text-align: center !important;
	margin-top: 60px;
	margin-bottom: 20px;
}

#result{
	align-items: center;
	align-content: flex-start;
	justify-content: center;
	flex-wrap: wrap;
	margin: 0 auto;
	max-width: none;
	background: no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	display: flex;
    flex: 0 1 auto;
	margin-top: 0px;
	background-color: #FFFAF0;
	height: 85%;
	width: 100%;
    display: inline-grid;
    position: relative;
	text-align: center;
}

#result .popup-position{
	z-index: 3;
}

#result1{
	margin-top: 10px;
	margin-bottom: 10px;
	display: flex;
    flex: 0 1 auto;
	width: 100%;
	height: 100%;
	align-items: center;
	position: relative;
	display: inline-grid;
    grid-gap: 15px;
	text-align: center;
}

#results{
	background-color: #FFFAF0;
}

.input{
  text-shadow: none;
  font-size: 1em;
}

#search{
  text-align: left;
  font-family:"Oxygen", sans-serif;
  font-size:1.1 em;
  color: black;
  width: 100%;
  max-width: 250px;
  height: 32px;
  margin-left: 10px;
  border-radius: 5px;
  margin-top: 10px;
  margin-bottom: 10px;
  box-shadow: none;
}

#submit{
  color:;
  background-color: none;
  width:30%;
  max-width: 53px;
  height: 30px;
  max-height: 55px;
  margin-left: 10px;
  border-radius: 2px;
  margin-top:10px;
  margin-bottom: 10px;
}

#submit: hover{
  background-color: none;
  color:rgb(0,0,0);
}

textarea{
  font-family:"Oxygen", sans-serif;
  text-align: center;
  font-weight:400;
  font-size:1.1 em;
  color:black;
  height:100%;
  width:100%;
  border-radius:3px;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
}

.input:focus{
  background-color: none;
}

@media screen and (max-width:1200px){
	
#form{
   width: 100%;
   height: 100%;
   margin-left:;
   float:left;
   margin-top: ;
   margin-bottom: ;
}

#search,#submit{
   font-size:1em;
    height: 65%;
	width: 70%;
}

textarea{
   height:191.25;
   font-size:1.1em;
}
  
}

@media screen and (max-width:800px){
	
#form{
	width: 100%;
	height: 100%;
    margin-left:;
    float:left;
	margin-top: ;
	margin-bottom: ;
}

#search,#submit{
    font-size:.9em;
    height: 65%;
	width: 60%;
}

.input{
    text-shadow:.5px 1px rgba(0,0,0,.4);
}

textarea{
    height:191.25;
    font-size:1.1em;
}
}

@media screen and (max-width:350px){
	
#form{
	width: 100%;
	height: 100%;
    margin-left: ;
    float: left;
}
  
#search,#submit{
    font-size:.9em;
    height: 80%;
	width: 60%;
}

textarea{
    height:168.75;
    font-size:.9em;
}
}