body{
	background-color : black;
	text-shadow: 2px 2px 5px black;
	color : white;
	font-family : Libre Baskerville, Josefin Slab, Trebuchet MS, arial, helvetica, sans-serif;
	font-size : 18px;
	line-height: 1.5em;
	margin : 0px;
	padding : 0px;
	height : 100%;
}

#topBackground {
  	margin-top: 115px;	
}

h1{
    font-size : 70px;
}

h1 span{
	padding-top : 160px;
	position : relative;
}

h2{
    font-size : 35px;
}

h2 span{
	padding-top : 160px;
	position : relative;
}

h3{
    font-size : 40px;
}

h3 span{
	padding-top : 0px;
	position : relative;
}

p1{
    font-size : 30px;
}

p2 {
    font-size : 20px;
}

p2::after{
    content: "\a";
    white-space: pre;
}

li {
	  margin : 20px;
	  padding-left : 0px;
}

a {
	text-decoration : none;
	color : white; /*#cc9900; */
	font-size : 35px;
	font-weight : bold; 
	text-align : center;
}

a:hover{
	color : #e60000;
}

.parallax {
    /***************************************************************/
    /* Parallax not working in php mode but does work in html mode */
    /***************************************************************/
    /* The image used */
/*    background-image : url("/home/u350170449/domains/rishrashrosh.com/public_html/images/Etsy Banner III.png"); */
    background-image : url("../images/Etsy Banner III.png");
    /* Full height */
    height : 100%;
    
    /* Create the parallax scrolling effect */
    background-attachment : fixed;
    background-position : center;
    background-repeat : no-repeat;
    background-size : cover;
 
    /* border-left : 2px white solid; */
    text-align : center;
  
    padding-top : 100px;
    padding-bottom : 100px;
}

.headerContainer{
	display : flex;
	display : -webkit-flex;
	padding : 10px;
	flex-wrap : nowrap;
}

.headBox1{
	flex : 1;
}

.headBox1 img{
	width : 200px;
	height : 90px;
	object-fit : contain;
}

.headBox2{
	flex : 2;
	text-align : right;
/*	display : flex; 
	font-family : Josefin Slab;
	font-weight : bolder; */
}

.bannerColor{
  padding-top : var(--padding);
  padding-bottom : var(--padding);
  text-align : center;
  color : darkred;
  background : linear-gradient(to right, var(--colour) 0%, #ffffff 100%);	
}

.productContainer{
	background-color : white;
	color : brown;
	display : flex;
	display : -webkit-flex;
	flex-wrap : nowrap;
}

.descriptionContainer{
	flex : 1;
	text-align : left;
	padding-top : 0px;
	padding-left : 0px;
}

.descriptionFormat{
	padding-top : 10px;
	padding-left : 20px;
}

.largeImage{
	flex : 1;
}

.largeImage img{
	height : 100%;
	width : 100%;
	object-fit : cover;
}

.container90{
	display : flex;
	display : -webkit-flex; 
	width : 90%;
	margin : auto;
	overflow : hidden;
	padding-bottom : 10px;
}

.container100{
	width : 100%;
	margin : auto;
	overflow : hidden;
}

.pageContent{
	width : 100%;
	height : 100%;
	margin : auto;
	overflow : hidden;
}

.buttonContainer{
	width : 60%;
	margin : auto;
	align-items : center;
	overflow : hidden;
	padding-bottom : 10px;
}

.button {
    text-align : center;
    text-decoration : none;
    display : inline-block;
    font-weight : bold; 
    cursor : pointer;
    background-color : white;
    border : solid;
    color : black;
    padding : 20px 30px;
    font-size : 18px;
    margin : 20px 10px;
}

.buttonRental {
	background-color: #e60000;
	color: white;
	padding: 12px 20px;
	font-size : 16px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	float: right;
	font-family : Arial, helvetica, sans-serif;
}

.imageContainerWrap{
	display : flex;
	display : -webkit-flex;
	padding : 10px;
	flex-wrap : wrap;
}

.imageContainerNoWrap{
	display : flex;
	display : -webkit-flex;
	padding : 0px;
	flex-wrap : nowrap;
}

.imageBox{
	flex : 1;
}

.imageBox:hover{
	transform: scale(1.2);
/*    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); */
}

.imageThree{
	width : 230px;
	height : 230px;
	padding : 10px;
	padding-left : 0px;
	object-fit : cover;
}

.imageFour{
	width : 170px;
	height : 230px;
    padding : 10px;
	padding-left : 0px;
	object-fit : cover;
    
}

.imageSix{
	width : 210px;
	height : 140px;
	padding : 0px;
	border : 0px;
	padding-left : 0px;
	object-fit : cover;
}

.form{
	flex 2;
	flex-wrap : nowrap;
	width : 67%;
}

#navbar{
	flex : 1;
}

#navbar a{
	color : black;
	text-decoration : none;
	font-size : 25px;
	padding-right : 15px;
    display: inline-block;
}

#navbar a:hover{
	color : #e60000; /*#ff0000; /*#cc6600;*/
}

#navbar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  text-decoration: none; 
}

#navbar li {
  float: right;
}

#navbar li a, .dropbtn {
  display: inline-block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

#navbar li a:hover, .dropdown:hover .dropbtn {
  background-color: white;
}

#navbar li.dropdown {
  display: inline-block;
}

#navbar .dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

#navbar .dropdown-content a {
  color : black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

#navbar .dropdown-content a:hover {
    background-color: #f1f1f1;
    color : #e60000; /*#cc6600;*/
}

#navbar .dropdown:hover .dropdown-content {
  display: block;
}


#mainheader{
	background-color : white;
	color : black;
	position : fixed;
	width : 100%;
	top : 0;
}

#aboutus{
	background-color : black;
	color : white;
	float : left;
	width : 70%;
	/*padding : 0 100px;*/
	padding-right : 100px;
	-webkit-box-sizing : border-box;
	box-sizing : border-box;
}

#contactus{
	flex 1;
	float : right;
	width : 30%;
	color : black;
	padding : 0 30px;
	border-bottom : 10px;
	min-width : 235px;
	line-height : 1em;
	-webkit-box-sizing : border-box;
	box-sizing : border-box;
	background : linear-gradient(to bottom, #e60000 0%, #ffffff 100%);
}

#contactus p{
    margin : 10px 0px;
}

#mainfooter{
	background : #e60000;
	color : white;
	text-align : center;
	padding-top : 1px;
	padding-bottom : 1px;
}

.tel{
    color : black;
    font-size : 18px;
    font-weight : normal;
}

.gallery {
	background : white; /*#EEE;*/
 	color : black;
}

.gallery-cell {
	width: 30%;
	height: var(--height);
	margin-right: 0px;
	background: white;
	/* flex-box, center image in cell */
	display: -webkit-box;
	display: -webkit-flex;
	display:         flex;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
			justify-content: center;
	-webkit-align-items: center;
			align-items: center;
	counter-increment: gallery-cell;
	flex-direction: column;
}

.gallery-cell img {
	display: block;
	width: 100%;
 	height: 100%;
	object-fit : contain;
 	/* dim unselected */
 	opacity: 1.0;
 	-webkit-transform: scale(0.85);
    		transform: scale(0.85);
	-webkit-filter: blur(3px);
    		filter: blur(3px);
 	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s, transform 0.3s, -webkit-filter 0.3s, filter 0.3s;
    	    transition: opacity 0.3s, transform 0.3s, filter 0.3s;
}

.gallery-cell a:hover {
	background-color: #ff0000;
	color : white;
}

.gallery-cell.is-selected {
	background: white;
}

/* brighten selected image */
.gallery-cell.is-selected img {
	opacity: 1;
	-webkit-transform: scale(1);
	      transform: scale(1);
	-webkit-filter: none;
	      filter: none;
}

/* cell number */
.gallery-cell:before {
	display: block;
	text-align: center;
	content: none; 
	/*content: counter(gallery-cell);*/
	line-height: 200px;
	font-size: 80px;
	color: white;
}

/* Form Settings */
input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid white;
  border-radius: 4px;
  resize: vertical;
}

label {
  padding: 12px 12px 12px 0;
  display: inline-block;
}

input[type=submit] {
  background-color: #e60000;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right;
}

input[type=submit]:hover {
  background-color: #ff0000;
}

.formContainer {
  border-radius: 0px;
  background-color: #990000;
  padding: 20px;
}

.col-25 {
  float: left;
  width: 25%;
  margin-top: 6px;
}

.col-75 {
  float: left;
  width: 75%;
  margin-top: 6px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

@media (device-width : 320px)
{
	#mainHeader{
		width : 100%;
		float : none;
	}

    #topBackground{
		width : 100%;
		float : none;
    }
    
	#main{
		width : 100%;
		float : none;
	}

	#sidebar{
		width : 100%;
		float : none;		
	}

    .headBox2{
	    flex : 2;
    }

	.productContainer{
		width : 100%;
		float : left;
		height : 100%;
	}

	.descriptionContainer{
		width : 50%;
		float : none;		
	}

	.largeImage{
		width : 50%;
		float : none;		
	}

    .imageBox{
        width : 100%;
        float : none;
    }	
    
	.imageThree{
		width : 100%;
		float : none;		
	}

	.imageFour{
		width : 100%;
		float : none;		
	}
	
	.imageSix{
		width : 100%;
		float : none;		
	}

	.buttonContainer{
		width : 100%;
		float : none;
	}
	
	.button{
	    margin-left : 0px;
	}
	
	.imageContainerWrap{
		width : 95%;
		float : none;
		padding : 0px;
	}

	.imageContainerNoWrap{
		width : 95%;
		float : none;
	}

    .parallax{
		width : 100%;
		float : none;
		background-attachment : scroll;
	}

    h1 span::before {
        content: '';
        display: block;
        height:      160px;
        margin-top: -190px;
        visibility: hidden;
    }
}