body {

    background-image: url("background-texture.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    margin: auto;
}

* { box-sizing: border-box; }

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

.dropbtn {
	background-color: #fff;
    color: black;
    padding: 7px;
    font-size: 16px;
    border: none;
}

.dropdown {
    position: relative;
    display: inline-block;
	cursor:pointer;
	float: right;
	margin-top:0.1%;
}

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

.dropdown-content a {
	font-size:14px;
    color: black;
    padding: 6px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {color: grey;background-color:rgba(0, 0, 0, 0)}

.dropdown:hover .dropbtn:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {color: grey;text-decoration:underline}
.pointer {cursor: pointer;}
#section {
	width:80%;
  margin-right: 10%;
  margin-left: 10%;
}
#section1 {
  margin-right: 14%;
}
.main-nav {
  height: 60px !important;
  width: 100%;
  font-size: 16px !important;
  font-family:'"cabin', regular;
  color: black;
  text-align: justify;
  position: fixed;
  top: 0;
  border-bottom: 1px solid #e6e6e6;
  padding: 5px 16px;
  background-color: #FFF;
  transition: all 300ms ease-in-out;
  z-index: 1;
}

.main-nav img {
  height: 80px !important;
  width: auto;
  margin-top: -13px;
}

.small {
  height: 35px !important;  

}
.small #right{
  font-size: 13px;
  color: grey;
}

.small #right1,.small #right2,.small .dropdown .dropbtn{
  font-size: 13px;
  color: grey;
}
.acc-column {
  float: left;
  width: 50%;
}
.main-nav #right:hover{
     background-color: rgba(0, 0, 0, 0);
    color: grey;
    
  }

.main-nav #right1:hover{
    background-color: rgba(0, 0, 0, 0);
    color: grey;
  }
  .main-nav #right2:hover{
    background-color: rgba(0, 0, 0, 0);
    color: grey;
  }



.dropdown .dropbtn {
    font-size: 16px;    
    border: none;
    outline: none;
    color: black;
    padding: 5px 16px;
    background-color: rgba(0, 0, 0, 0);
    font-family: 'PT+sans', regular;
    margin: 0;
    margin-top: 4px;
    
    
}

.main-nav a:hover, .dropdown:hover .dropbtn {
    background-color: rgba(0, 0, 0, 0);
    color: grey;
}

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

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


.dropdown-content a:hover {
    background-color: #bfbfbf;
}

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

/*#right1 {*/
/*    position: absolute;*/
/*    right: 265px;*/
/*    font-size: 16px;*/
/*    font-family: 'cabon', regular;*/
/*    text-align: center;*/
/*    color: black;*/
/*    text-decoration: none;*/
/*    padding-top: 5px;*/
/*}*/

/*#right2{*/
/*    position: absolute;*/
/*    right: 180px;*/
/*     font-size: 16px;*/
/*    font-family: 'cabon', regular;*/
/*    text-align: center;*/
/*    color: black;*/
/*    text-decoration: none;*/
/*    padding-top: 5px;*/
/*    }*/

h1{
    font-family: 'Merriweather', bold !important;
    font-weight: 1000 !important;
    font-size: 60px !important;
    color: #353740;
    text-align: center ;
    line-height: 1.3em;
    padding-top: 20px;
    margin-top: 6% !important;

}
hr {
    margin-top: -2%;
    margin-left: 43%;
    margin-right:43%;
    border-width:4px !important;
border-style: solid !important;
color: #353740 !important;

}

#title {
    padding-top: 5%;
}

#title img {
    width: 70%; 
    margin-left:15%; 
    margin-right: 15%
}

p {
    font-family: 'calibri', regular;
    font-size: 18px;
    line-height: 1.8em;
    color: #494949;
    text-align: justify;
    margin-left: 5%;
    margin-right: 10%;
}
.page-wrap { width: 100%; margin: 60px auto; padding-top: 0px;}
.page-wrap > div, .actual-table { margin: 0 0; min-width: 500px; width: 100%; }

.actual-table { border-collapse: collapse; margin-left: 15%;}
        .actual-table td { 
            width: 30%; 
            padding-top: 15px; 
            vertical-align: top;
        }

/*.acc-column {
    width: 45%;
}*/

.acc-column h3 {
    font-family: 'Merriweather', bold;
    font-size: 48px; 
    color: #fcd21d;
}

.acc-column h2 {
    font-family: 'Merriweather', bold;
    font-size: 28px;
    font-weight: 900;
    text-align: left; 
    color: #e00b00;
}
.acc-column p {
    font-family: 'calibri', regular;
    font-size: 20px; 
    font-weight: 400;
    text-transform: none;
    text-align: justify;
    color: #747d88;
    margin-left: 0%; 
    width:90%;
}

#footer {
    background-color: #fcd21d;
    padding-bottom: 3%;
    width: 100%;
}

#footer h2{
text-align: center;
font-size: 35px;
font-family: 'Courgette', cursive;
font-weight: 400;
text-decoration-style: bold;
color: black;
text-shadow: 2px 2px #ff000000;
padding-top: 60px; 
padding-bottom: 20px
}
.button {
    float: left;
  border-radius: 15px;
  background: #fcd21d;
  border: 2px solid #202020;
  color: #202020;  
  text-align: center;
  font-size: 20px;
  font-weight: 400;
  padding: 20px 30px;
  width: 18%;
  transition: all 0.5s;
  cursor: pointer;
  margin-left: 5%;
  font-family: 'courgette', ;bold

}

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button:hover span {
  padding-right: 25px;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
}


.footer {
    display: block;
    background-image: url("https://i1.wp.com/www.solidcolore.com/3840/fcd21d_background.jpg");
    margin: auto;
}

#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: #ff000000;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 10px;
}

#myBtn:hover {
  background-color: #ff000000;
}

@media screen and (max-width: 1099px){

#page{
  width: 100%;
  }
}

@media screen and (max-width: 650px){

#page{
  width: 100%;
  }
  /*.acc-column {
    width: 100%;
  }
  .acc-column img {

    width: 100%;
  }*/
  .page-wrap {
    width: 100%;
  }
}

.container-1{
  position: relative;
  margin-top: 3%;
  width: 100%;
  z-index:-1;
}

/* Hide the images by default */
.mySlides {
  display: none;
  height: 569px;
  width: 100%;

}
.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
  color: grey;
}

/* Number text (1/3 etc) */
.numbertext {
  color: black;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Container for image text */
.caption-container {
  text-align: center;
  background-color: #222;
  padding: 2px 16px;
  color: white;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}


/* Add a transparency effect for thumnbail images */
.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

/* Container holding the image and the text */
.container {
    position: relative;
    padding-top: 10%;
}

/* Bottom right text */
.text-block {
    position: absolute;
    top: 6%;
    right: 10%;
    left: 10%;
    bottom: 6%;
    background-color: rgba(0,0,0,0.33);
    color: white;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10%;
}

.text-block1 {
    position: absolute;
    top: 10%;
    right: 10%;
    left: 10%;
    bottom: 5%;
    background-color: rgba(0, 0, 0, 0.33);
    color: grey;
    padding-left: 20px;
    padding-right: 20px;
}

.text-block h2 {
  font-family: 'courgette';
  font-size: 52px;
  color: white; 
  text-align: center;
  margin-top: -10%;
}

.text-block p {
  font-family: 'calibri'; 
  font-size: 22px; 
  color: white; 
  text-align: center;
}
.text-block1 h2 {
    font-family: 'courgette';
    font-size: 30px;
    color: white; 
    text-align: center;
}
.text-block1 p{
  font-family: 'calibri'; 
  font-size: 22px; 
  color: white; 
  text-align: center;
}
.bg {

  background-color: #d9d9d9;
}

.product {
 border-radius: 15px;
  background: rgba(255, 255, 255, 0.0);
  border: 2px solid #333333;
  color: #333333;
  text-align: center;
  font-size: 35px;
  font-weight: 500;
  margin: 15px 0;
  width: 65%;
  transition: all 0.5s;
  cursor: pointer;
  margin: 0 17.5%;
  font-family: 'courgette', bold;

}
.acc-column img{
	height:500px;
}
.product span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.product span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.product:hover span {
  padding-right: 25px;

}

.product:hover span:after {
  opacity: 1;
  right: 0;
}

.text-block-p {
    width:71%;
    top: 16%;
    background-color: rgba(0,0,0,0.04);
    color: white;
    padding-left: 20px;
    padding-right: 20px;
    margin:0 14.5%
}

.product-heading {
  background-image: url("product-bg41.jpg");
  width: 100%; 
  height: 400px;
  background-repeat: no-repeat;
    background-size: cover;
    image-rendering: crisp-edges; 
}
.product-heading h1 {
  font-family: 'Cinzel Decorative', cursive !important;
  font-size: 45px;
  font-weight: 600;
  text-align: center;
  color: white;
}

#footer1 { width: 100%;margin-right:-5%;}
#footer1 > div, #footer-table { margin: 0; min-width: 500px; width: 100%; }
;
#footer-table { border-collapse: collapse; }
        #footer-table td { 
            width: 31%; 
            padding-top: 50px; 
            vertical-align: top;
        }
        #footer-table  { 
            background: #424242;
        }
        #actual-table2 td:nth-child(odd) { 
              background-color: rgba(0, 0, 0, 0);
    
        }
#footer-table td h4 {
    font-family: 'PT Sans', regular; 
    font-size: 16px; 
    font-weight: 400;
    color: #afafaf;
    width: 80%; 
    margin: auto;
}
.fa {
    
    color: rgba(224,168,47,0.88); 
    font-size: 16px;
    width: 80%;
    margin-left: 10%;
}
#phone {
  color: rgba(224,168,47,0.88); 
    font-size: 16px;
    width: 80%;
    margin-left: 18%;
}
#abc-page{
	width:100%;
	margin-top:4.5%;
	z-index: -1;
}
#envelope{
  color: rgba(224,168,47,0.88); 
    font-size: 16px;
    width: 80%;
    margin-left: 18%;
}
.contatus-heading{
	width:65%!important;
}
#abt {
    font-family: 'PT Sans', regular;
    font-size: 16px; 
    font-weight: 400;
    color: #afafaf;
    width:100%;
    margin-left: 150px;
    padding-left:15%;
    margin-top: -9px;
}
.abtus {
    color: rgba(224,168,47,0.88);
    font-size: 16px; 
    font-family: 'cabin', regular;
    width:100%; 
    margin-left: 150; 
    padding-left: 25%;
}
#amp {
    font-family: 'PT Sans', regular;
    font-size: 16px; 
    font-weight: 400;
    color: #afafaf;
    width:100%;
    margin-left: 300px;
    padding-left:15%;
    margin-top: -9px;
}

.ampgrp {
    color: rgba(224,168,47,0.88);
    font-size: 16px; 
    font-family: 'cabin', regular; 
    width:100%; 
    margin-left: 300;
    padding-left: 25%;
}
#social h4 {
    font-family: 'PT Sans', regular; 
    font-size: 16px; 
    font-weight: 400;
    color: #afafaf; 
    width:100%!important;
    margin-left: 590;
    margin-top: -13px;
    padding-bottom: 10px;
}
.data-left{
	float:left;
}
.image-border{
	width:100%; 
	height: 569px;
}
@media screen and (min-width: 320px) and (max-width: 575px){
	#section{width:90%;margin-left:5%;margin-right:5%}
	h1{
		font-size:30px!important;
	}
	.menuicon img{
		width:26px;
	}
	#footer{
		padding-bottom:0;
	}
	#footer h2{
		font-size:30px;
	}
	.button{
		width:100%!important;
		margin-bottom:5px;
		padding:0;
		float:none;
	}
	.actual-table,.button{
		margin-left:0;
	}
	.acc-column img{height:288px; margin-top:60px;}
	.acc-column p{
		text-align: -webkit-auto;
	}
	.menuicon{
		float:right;
	}
	.dropdown-content{
		width:60%;
		margin:8.5% auto 0 auto;
	}
	.mobile-align{
		text-align:center!important
	}
	.text-block{
		position:absolute!important;
	}
	.mySlides, .image-border{
		height:765px;
	}
	.product{
		width:90%;
		margin:0 5%;
		font-size:24px;
	}
	#footer-table td{
		width:100%;
		padding:15px 0;	
	}
	#footer-table td h4{
		width:100%;
		padding:0
	}
	#page,#abc-page{
		margin:36px 0 0 0;
	}
	.abc-image{
		height:119px;
	}
	.product-heading{
		margin:61px 0 0 0!important;
	}
	#envelope,#phone{
		width:100%;
		margin-left:13%;
	}
	#title img{width:90%;margin-left:5%;margin-right:5%}
	
}
@media screen and (min-width:465px) and (max-width:521px){
	.mySlides, .image-border{
		height:621px;
	}
}
@media screen and (min-width:522px) and (max-width:567px){
	.mySlides, .image-border{
		height:595px;
	}
}
@media screen and (min-width:568px) and (max-width:767px){   
	.mySlides, .image-border{
		height:621px;
	}
	.text-block p{
		font-size: 18px; 
	}
}
@media screen and (min-width:320px) and (max-width:322px){
	.mySlides, .image-border{
		height:767px;
	}
}
@media screen and (min-width:323px) and (max-width:330px){
	.mySlides, .image-border{
		height:1534px;
	}
}
@media screen and (min-width:331px) and (max-width:330px){
	.mySlides, .image-border{
		height:1430px;
	}
}
@media screen and (min-width:638px) and (max-width:640px){
	.mySlides, .image-border{
		height:627px;
	}
}
@media screen and (min-width:568px) and (max-width:636px){
	.mySlides, .image-border{
		height:631px;
	}
}
@media screen and (min-width:637px) and (max-width:666px){
	.mySlides, .image-border{
		height:593px;
	}
}
@media screen and (min-width:667px) and (max-width:1023px){
	.mySlides, .image-border{
		height:512px;
	}
}
@media screen and (min-width:768px) and (max-width:1023px){
	#footer-table td{
		width:28%;
	}
	#footer{padding-bottom:5%;}
	.text-block p{
		font-size: 18px; 
	}
	h1{font-size:52px!important;}
	#title img {
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
	}
}
@media screen and (min-width:1024px) and (max-width:1224px){
	#footer-table td{
		width:30.5%;
	}
}
@media screen and (min-width:374px) and (max-width:436px){
	.mySlides, .image-border{
		height:678px;
	}
}
@media screen and (min-width:437px) and (max-width:464px){
	.mySlides, .image-border{
		height:652px;
	}
}
@media screen and (min-width:320px) and (max-width:767px){
	.text-block p{
		font-size:18px;
	}
	.text-block h2{
		font-size: 42px;
	}
	#title h1{
		font-size: 30px!important;
	}
	h1{margin-top: 0!important;}
}
@media screen and (min-width:576px) and (max-width:767px){
	#footer-table td{
		width:28%;
	}
	.product{
		font-size: 25px;
	}
	#footer-table td h4{
		font-size: 14px;
	}
	.abtus,.ampgrp,#envelope{
		font-size:14px;
	}
	
}
@media screen and (min-width:1024px) and (max-width:1281px){
	.text-block p{
		font-size: 18px; 
	}
	.mySlides, .image-border{
		height:505px;
	}
	.product{
		font-size: 28px;
	}
}
@media screen and (min-width:2280px){
	#footer-table td{
		width: 31.9%
	}
	h1{margin-top: 0!important;}
	#title img{
		width: 58%;
    margin-left: 21%;
    margin-right: 21%;
	}
}