@import url('https://fonts.cdnfonts.com/css/pergola-2');

/* this is your hyperlink offset for fixed or sticky menu*/
html{
  scroll-behavior:smooth;
   scroll-padding-top: 120px;
}

.card {
    display: block !important;
}

.card-body{position:absolute;
    bottom: 0px;
}


body {
	background-color:white;	
  font-family: 'Lato', sans-serif;}
    
  
    
h1, h2 {
	font-family: 'Amaranth', sans-serif;
	text-align: center;
	color: #000;
	text-shadow: -1px -1px 0 rgba(255, 255, 255, .5), 2px 2px 0 #000;
	font-variant: normal;
	text-transform: none;
}
h3 {
	font-family: 'Amaranth', sans-serif;
	text-align: center;
	color: #000;
}

.shadow {text-shadow:  1px 1px 2px rgba(0, 0, 0, 0.9);
}
h1 span, h2 span, h3 span, h4 span, h5 span, p span {
	font-family: 'Lato', sans-serif;
	text-align: center;
	font-weight: 100;
}

h2 {font-size:2.2em;}

.bggreen{background-color:#CC0000}
.gold {
	color: #000
}
h4 am {font-family:  'Amaranth', sans-serif;}
.lato {font-family: 'Lato', sans-serif;}

.bg-gray {background-color: #232323}

.bggold {
	background-color:#FF0000
}
.bgwhite {
	background-color:white;
}
.blue{
	color:#CC0000;
}
.black {
	color:black:
}
.red {color:#ff0000}
.bgblue{
	background-color:#003C79;
}


#reference {
display:none}


input.form-control, select.form-control {
   height:31px !important;
 padding-top:2px;
   margin-bottom:4px;
}
.form-group{
padding-bottom: 2px;}
.bgbluegrad{
background: #003c79; /* Old browsers */
background: -moz-linear-gradient(top, #003c79 0%, #0a3f75 7%, #0a3f75 50%, #0a3f75 93%, #003c79 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #003c79 0%,#0a3f75 7%,#0a3f75 50%,#0a3f75 93%,#003c79 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #003c79 0%,#0a3f75 7%,#0a3f75 50%,#0a3f75 93%,#003c79 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#003c79', endColorstr='#003c79',GradientType=0 ); /* IE6-9 */ 
}

.bo {
	background-image: url('../images/alfs-wallpapers.jpg');

	background-position: center;
  background-repeat: repeat;
 
	overflow: hidden;
	padding: 15px;
		color: #fff;
		  border-style: solid;
  border-width: 3px;
  border-image: linear-gradient(to left, #000 1%, #CC0000 35%, #fff 50%, #39AC37 100%) 
                100% 0 100% 0/5px 0 5px 0 stretch;
  border-left: 0;
  border-right: 0;



	 z-index:99}





.box {
	background: url('../images/alfs-bg.jpg') repeat ;
	padding: 25px;
	margin-bottom: 25px;
		-webkit-box-shadow: 0px 4px 10px 4px rgba(0,0,0,0.86);
	-moz-box-shadow: 0px 4px 10px 4px rgba(0,0,0,0.86);
box-shadow: 0px 4px 10px 4px rgba(0,0,0,0.86);

	color: #fff;;
}
.box2 {
	background-color:silver;	
	-webkit-box-shadow: 0px 5px 8px 3px rgba(0,0,0,0.9); 
box-shadow: 0px 5px 8px 3px rgba(0,0,0,0.9);
-moz-box-shadow: 0px 5px 8px 3px rgba(0,0,0,0.9); 
  border-style: solid;
  border-width: 3px;
   border-image: linear-gradient(to left, #000 1%, #CC0000 35%, #fff 50%, #39AC37 100%) 
                100% 0 100% 0/3px 0 3px 0 stretch;
}

.box2inner {
	
  border-style: solid;
  border-width: 1px;
   border-image: linear-gradient(to left, #000 1%, #CC0000 35%, #fff 50%, #39AC37 100%) 
                100% 0 100% 0/2px 0 2px 0 stretch;
}

.box3 {
	background: url('../images/alfs-bg.jpg') repeat scroll;
	padding:25px;

-webkit-box-shadow: 0px 5px 8px 3px rgba(0,0,0,0.9); 
box-shadow: 0px 5px 8px 3px rgba(0,0,0,0.9);
-moz-box-shadow: 0px 5px 8px 3px rgba(0,0,0,0.9); 
border: thick #CC0000 solid;
	

	color: white;
}

.box4 {
	background: #CCCCCC;
	
-webkit-box-shadow: 0px 5px 8px 3px rgba(0,0,0,0.9); 
box-shadow: 0px 5px 8px 3px rgba(0,0,0,0.9);
-moz-box-shadow: 0px 5px 8px 3px rgba(0,0,0,0.9); 
	border-top: medium #CC0000 solid;
	border-bottom: medium #CC0000 solid;

	color: white;
}
.box5 {
	background: url('../images/alfs-bgl.jpg') repeat scroll;
	
-webkit-box-shadow: 0px 5px 8px 3px rgba(0,0,0,0.9); 
box-shadow: 0px 5px 8px 3px rgba(0,0,0,0.9);
-moz-box-shadow: 0px 5px 8px 3px rgba(0,0,0,0.9); 
border-top: medium #CC0000 solid;
	border-bottom: medium #CC0000 solid;
	color: black;
}
.box6 {
	color: black;
	background-color: #C0C0C0;
	-webkit-box-shadow: 0px 5px 8px 3px rgba(0,0,0,0.9); 
box-shadow: 0px 5px 8px 3px rgba(0,0,0,0.9);
-moz-box-shadow: 0px 5px 8px 3px rgba(0,0,0,0.9); 
	
	background-attachment: scroll;
}
.box7 {
	background: url('../images/alfs-bg2.jpg') repeat scroll;

	color: black;
	
	
-webkit-box-shadow: 0px 5px 8px 3px rgba(0,0,0,0.9); 
box-shadow: 0px 5px 8px 3px rgba(0,0,0,0.9);
-moz-box-shadow: 0px 5px 8px 3px rgba(0,0,0,0.9); 
  border-style: solid;
  border-width: 3px;
   border-image: linear-gradient(to left, #000 1%, #CC0000 35%, #fff 50%, #39AC37 100%) 
                100% 0 100% 0/4px 0 4px 0 stretch;


}
.box8 {
background: radial-gradient(circle at 100% 100%, #C0C0C0 0, #C0C0C0 5px, transparent 5px) 0% 0%/8px 8px no-repeat,
            radial-gradient(circle at 0 100%, #C0C0C0 0, #C0C0C0 5px, transparent 5px) 100% 0%/8px 8px no-repeat,
            radial-gradient(circle at 100% 0, #C0C0C0 0, #C0C0C0 5px, transparent 5px) 0% 100%/8px 8px no-repeat,
            radial-gradient(circle at 0 0, #C0C0C0 0, #C0C0C0 5px, transparent 5px) 100% 100%/8px 8px no-repeat,
            linear-gradient(#C0C0C0, #C0C0C0) 50% 50%/calc(100% - 6px) calc(100% - 16px) no-repeat,
            linear-gradient(#C0C0C0, #C0C0C0) 50% 50%/calc(100% - 16px) calc(100% - 6px) no-repeat,
            linear-gradient(90deg, #39ac37 0%, #ffffff 35%, rgba(223,97,79,1) 50%, #000000 100%);
border-radius: 8px;
padding: 6px;
margin-bottom: 60px;
	color: black;
	margin-top: 2em;
	
-webkit-box-shadow: 0px 5px 8px 3px rgba(0,0,0,0.9); 
box-shadow: 0px 5px 8px 3px rgba(0,0,0,0.9);
-moz-box-shadow: 0px 5px 8px 3px rgba(0,0,0,0.9); 
    -webkit-transition: all 1s;
    transition: all 1s;



}


.carousel-item p {color: black}
.frame {
  background: radial-gradient(circle at 100% 100%, #ffffff 0, #ffffff 3px, transparent 3px) 0% 0%/8px 8px no-repeat,
            radial-gradient(circle at 0 100%, #ffffff 0, #ffffff 3px, transparent 3px) 100% 0%/8px 8px no-repeat,
            radial-gradient(circle at 100% 0, #ffffff 0, #ffffff 3px, transparent 3px) 0% 100%/8px 8px no-repeat,
            radial-gradient(circle at 0 0, #ffffff 0, #ffffff 3px, transparent 3px) 100% 100%/8px 8px no-repeat,
            linear-gradient(#ffffff, #ffffff) 50% 50%/calc(100% - 10px) calc(100% - 16px) no-repeat,
            linear-gradient(#ffffff, #ffffff) 50% 50%/calc(100% - 16px) calc(100% - 10px) no-repeat,
            linear-gradient(90deg, #000000 3%, #39ac37 35%, #ffffff 50%, rgba(223,97,79,1) 100%, #CC0000 100%);	box-shadow: rgba(57, 172, 55, 0.9) 0px 0px 0px 2px, rgba(57, 172, 55, 0.8) 0px 6px 20px 6px;
transform: scale(1.1);
      border-radius: 8px;
padding: 3px;
box-sizing: content-box;
margin-bottom: 60px;
    -webkit-transition: all 1s;
    transition: all 1s
         

}
.frame1 {
	border: thin #000000 solid;
-webkit-box-shadow: 0px 2px 2px 2px rgba(0,0,0,0.9); 
box-shadow: 0px 2px 2px 2px rgba(0,0,0,0.9);
-moz-box-shadow: 0px 2px 2px 2px rgba(0,0,0,0.9); 
    -webkit-transition: all 1s;
    transition: all 1s;
    margin-bottom:2.5em}

.frame1:hover { 
transform: scale(1.04);
box-shadow: rgba(57, 172, 55, 0.9) 0px 0px 0px 2px, rgba(57, 172, 55, 0.8) 0px 6px 20px 6px;
	border: thin #fff solid;

}


.frame2 {
	border: thin #000000 solid;
-webkit-box-shadow: 0px 5px 8px 3px rgba(0,0,0,0.9); 
box-shadow: 0px 5px 8px 3px rgba(0,0,0,0.9);
-moz-box-shadow: 0px 5px 8px 3px rgba(0,0,0,0.9); 
    -webkit-transition: all 1s;
    transition: all 1s;}

.frame2:hover { 
transform: scale(1.1);
box-shadow: rgba(57, 172, 55, 0.9) 0px 0px 0px 2px, rgba(57, 172, 55, 0.8) 0px 6px 20px 6px;
	border: thin #fff solid;

}
 
.frame3 {
background: radial-gradient(circle at 100% 100%, rgba(35,35,35,0.8) 0, rgba(35,35,35,0.8) 3px, transparent 3px) 0% 0%/8px 8px no-repeat,
            radial-gradient(circle at 0 100%, rgba(35,35,35,0.8) 0, rgba(35,35,35,0.8) 3px, transparent 3px) 100% 0%/8px 8px no-repeat,
            radial-gradient(circle at 100% 0, rgba(35,35,35,0.8) 0, rgba(35,35,35,0.8) 3px, transparent 3px) 0% 100%/8px 8px no-repeat,
            radial-gradient(circle at 0 0, rgba(35,35,35,0.8) 0, rgba(35,35,35,0.8) 3px, transparent 3px) 100% 100%/8px 8px no-repeat,
            linear-gradient(rgba(35,35,35,0.8), rgba(35,35,35,0.8)) 50% 50%/calc(100% - 10px) calc(100% - 16px) no-repeat,
            linear-gradient(rgba(35,35,35,0.8), rgba(35,35,35,0.8)) 50% 50%/calc(100% - 16px) calc(100% - 10px) no-repeat,
            linear-gradient(90deg, #39ac37 0%, #ffffff 35%, rgba(223,97,79,1) 50%, #000000 100%);           
            border-radius: 8px;
padding: 3px;
box-sizing: content-box;
margin-bottom: 60px;
    -webkit-transition: all 1s;
    transition: all 1s;
}
.frame3:hover {
	background: radial-gradient(circle at 100% 100%, #ffffff 0, #ffffff 3px, transparent 3px) 0% 0%/8px 8px no-repeat,
            radial-gradient(circle at 0 100%, #ffffff 0, #ffffff 3px, transparent 3px) 100% 0%/8px 8px no-repeat,
            radial-gradient(circle at 100% 0, #ffffff 0, #ffffff 3px, transparent 3px) 0% 100%/8px 8px no-repeat,
            radial-gradient(circle at 0 0, #ffffff 0, #ffffff 3px, transparent 3px) 100% 100%/8px 8px no-repeat,
            linear-gradient(#ffffff, #ffffff) 50% 50%/calc(100% - 10px) calc(100% - 16px) no-repeat,
            linear-gradient(#ffffff, #ffffff) 50% 50%/calc(100% - 16px) calc(100% - 10px) no-repeat,
            linear-gradient(90deg, #000000 3%, #39ac37 35%, #ffffff 50%, rgba(223,97,79,1) 100%, #CC0000 100%);	box-shadow: rgba(57, 172, 55, 0.9) 0px 0px 0px 2px, rgba(57, 172, 55, 0.8) 0px 6px 20px 6px;
transform: scale(1.1);

}
.frame4 {
background: radial-gradient(circle at 100% 100%, rgba(35,35,35,0.8) 0, rgba(35,35,35,0.8) 3px, transparent 3px) 0% 0%/8px 8px no-repeat,
            radial-gradient(circle at 0 100%, rgba(35,35,35,0.8) 0, rgba(35,35,35,0.8) 3px, transparent 3px) 100% 0%/8px 8px no-repeat,
            radial-gradient(circle at 100% 0, rgba(35,35,35,0.8) 0, rgba(35,35,35,0.8) 3px, transparent 3px) 0% 100%/8px 8px no-repeat,
            radial-gradient(circle at 0 0, rgba(35,35,35,0.8) 0, rgba(35,35,35,0.8) 3px, transparent 3px) 100% 100%/8px 8px no-repeat,
            linear-gradient(rgba(35,35,35,0.8), rgba(35,35,35,0.8)) 50% 50%/calc(100% - 10px) calc(100% - 16px) no-repeat,
            linear-gradient(rgba(35,35,35,0.8), rgba(35,35,35,0.8)) 50% 50%/calc(100% - 16px) calc(100% - 10px) no-repeat,
            linear-gradient(90deg, #39ac37 0%, #ffffff 35%, rgba(223,97,79,1) 50%, #000000 100%);           border-radius: 8px;
padding: 3px;
box-sizing: content-box;
margin-bottom: 60px;
    -webkit-transition: all 1s;
    transition: all 1s;
}
.lavender { color: #a6a9d2 } .mapblue{ color: #CC0000;
	font-size: medium;
	font-weight: bold;
}
.bgenu {
background-color:#232323;}
.bgwhite {
	background-color:#FFF
}
.bgpeach {
	background-color:#FF0000;
}
.white {
	color:white;
}
.1white {
	color:white;
}
.1white:hover {
	color:#a6a9d2;
}
.light {
	color: #CCCCCC;
}

p {
	color: white;
}
.black{
	color: #333333;
}
#open h5 {
	font-family: 'Lato', sans-serif;}

.px-10 {padding-right:7rem!important;padding-left:7rem!important}
.p-2v{
padding-top:1rem!important;
padding-bottom:1rem!important;
}

.p-3v{
padding-top:2rem!important;
padding-bottom:2rem!important;
}
.p-2h{
padding-left:1.6rem!important;
padding-right:1.6rem!important}


.p-5h{
padding-left:9rem!important;
padding-right:9rem!important}
.p-6h{
padding-left:12rem!important;
padding-right:12rem!important}

.m-t25 {
	margin-top:25px;
}
#suppliers {
	max-height: 90px;
}



.mont {
	font-family:  'Amaranth', sans-serif;

}
#toplefthead h3, #toprighthead h3 {
font-family:  'Amaranth', sans-serif;
text-align: center;
	color: white;
	}
		


/*button*/
.btn-af {
  color: #fff;
  background-color: black;
  border-color: black;
}

.btn-af:hover{
  color: black;
  background-color:#CC0000;
  border-color: #CC0000;
}

.btn-af:focus {
  box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5);
}






.social-links, .contact-info {font-size:large}
#toTop{
	border: thin #FFFFFF solid;
	position: fixed;
	background: black;
	color: white;
	bottom: 10px;
	right: 10px;
	cursor: pointer;
	display: none;
	width: 115px;
	text-align: left;
	right: -82px;
	width: 115px;
	z-index: 99;
	-webkit-transition: all .5s;
	transition: all .5s;
	  z-index:1000

}
#toTop:hover { 
right: 0;
background:#CC0000;


}
#callback{
	position: fixed;
	background: #00FF00;
	bottom: 220px;
	visibility: hidden;
	cursor: pointer;
	width: 197px;
	text-align: left;
	right: -164px;
	width: 197px;
	z-index: 99;
	-webkit-transition: all .5s;
	transition: all .5s;
	z-index: 1000;
}

#callback:hover { 
right: 0;
 background: #00FF00;
color:black;
}


#facebook{
	position: fixed;
	 background: #3B5998;
	bottom: 180px;
	visibility: hidden;
	cursor: pointer;
	width: 115px;
		text-align:left;
	right: -82px;
	width: 115px;
	z-index: 99;
    -webkit-transition: all .5s;
    transition: all .5s;
    z-index:1000}

#facebook:hover { 
right: 0;
 background: #3B5998;
color:black;
}


#messenger {
		position: fixed;
			
 background: linear-gradient(rgb(255, 143, 178) 0%, rgb(167, 151, 255) 50%, rgb(0, 229, 255) 100%);
background: -webkit-linear-gradient(rgb(255, 143, 178) 0%, rgb(167, 151, 255) 50%, rgb(0, 229, 255) 100%);
	background: -o-linear-gradient(rgb(255, 143, 178) 0%, rgb(167, 151, 255) 50%, rgb(0, 229, 255) 100%);transition: color 0.3s ease, background 0.3s ease;

	bottom: 140px;
	cursor: pointer;
	visibility: hidden;
	width: 115px;
		text-align:left;
	right: -82px;
	width: 115px;
z-index: 99;
    -webkit-transition: all 1s;
    transition: all .5s;
      z-index:1000}


#messenger:hover { 
right: 0;

color:black;

}

#instagram {
		position: fixed;
		background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); 
background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
background: -o-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );
  	bottom: 100px;
	cursor: pointer;
	visibility: hidden;
	width: 115px;
		text-align:left;
	right: -82px;

		z-index: 99;
    -webkit-transition: all 1s;
    transition: all .5s;
      z-index:1000;}


#instagram:hover { 
right: 0;
color:black;

}

#twitter {
		position: fixed;
			  background:  #55ACEE;
	bottom: 60px;
	right: 10px;
	cursor: pointer;
	visibility: hidden;
	width: 115px;
		text-align:left;
	right: -82px;
	width: 115px;
	z-index: 99;
    -webkit-transition: all 1s;
    transition: all .5s;
      z-index:1000
}

#twitter:hover { 
right: 0;

color:black;

}
#email {
		position: fixed;
			background:black;
	bottom: 20px;
	cursor: pointer;
	visibility: hidden;
	width: 115px;
		text-align:left;
	right: -82px;
	width: 115px;
	z-index: 99;
    -webkit-transition: all 1s;
    transition: all .5s;
      z-index:1000}
}

#email:hover { 
right: 0;
background:#CC0000;
color:black;

}

.animated { visibility: visible !important; }
#scroll {
    position:fixed;
    right:10px;
    bottom:10px;
    cursor:pointer;
    width:50px;
    height:50px;
    background-color:#3498db;
    text-indent:-9999px;
    display:none;
    -webkit-border-radius:60px;
    -moz-border-radius:60px;
    border-radius:60px
}
#scroll span {
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-8px;
    margin-top:-12px;
    height:0;
    width:0;
    border:8px solid transparent;
    border-bottom-color:#ffffff;
}
#scroll:hover {
    background-color:#e74c3c;
    opacity:1;filter:"alpha(opacity=100)";
    -ms-filter:"alpha(opacity=100)";
}

/*links*/ 


.dropdown-item {
	color: #F0F0F0!important;
	text-decoration: none;
	background-color:transparent;
}
.dropdown-item:visited {
	color: #FFFFFF;
}
.dropdown-item:active {
	color: #F0F0F0!important;
	background-color: #cc0000;
}
.dropdown-item:focus, .dropdown-item:hover {
	background-color: #000;
}



a.1 {
	color: #F0F0F0!important;
	text-decoration: none;
}
a.1:visited {
	color: #FFFFFF;
}

a.1:active {
	color: #ffffff;
	 
}
a.1:hover {
	color: #ffffff;
}

a.1:active {
	color: #ffffff;
}
a.1:hover {
	color: #ffffff;
}






a.lite {
	color: white;
}

a.lite:visited {
	color: white;
}
a.lite:active {
	color: black;
}
a.lite:hover {
	color: black;
}

a.cook {
	color: black;
}
a.cook:visited {
	color: black;
}
a.cook:active {
	color: #CC0000;
}
a.cook:hover {
	color: #CC0000;
}
a.lit {
	color: white;
}
a.lit:visited {
	color: white;
}
a.lit:active {
	color: black;
}
a.lit:hover {
	color: black;
}

a.lit2 {
	color: white;
}
a.lit2:visited {
	color: white;
}
a.lit2:active {
	color: #CC0000;
}
a.lit2:hover {
	color: #CC0000;
}






.social-links, .contact-info {font-size:large} 

.slh {height:54px;
border: thin blac solid}
.engraved
{text-shadow:1px 1px 2px rgba(0, 0, 0, 0.9);

}
.engravedb
{text-shadow: 0px 1px 0px rgba(0,0,0,.7), 0px -1px 0px rgba(255,255,255,.3);
}
.highlight {
 text-shadow: -1px -1px 0 rgba(255, 255, 255, .5), 2px 2px 0 #000;
}
.pergola {
font-family: 'Pergola', sans-serif;
font-size: large;}

.pergola span {
	font-family: 'Lato', sans-serif;
	font-size: medium;
	font-weight: 100;
}


/*header*/
#header {
	/*background: url('../images/headerpic.jpg') no-repeat fixed center; */

	min-width:100%;
}
#header h1 {
	color: #CC0000;
	font-size: 4.5em;
	text-shadow: 0px 0px 2px rgba(255,255,255,0.95);
	padding-top: 5%;
	font-weight: bold;
	border-bottom: 10px #a6a9d2 solid;
}
#header h2 {
	color:#fff;
	font-size:3em;
	

padding:  0 15%
}

body {
  min-height: 1200px;
}
/*map */

#map {
  height:350px;}
  
 .px-10{padding-right:6rem!important;padding-left:6rem!important}
  .py-7{padding-right:5.6rem!important;padding-left:5.6rem!important}
  .pt-6{padding-top:4rem!important}
  
    
  /*nav */

 nav {
 position:relative;
	background: url('https://alfsmcshop.co.uk/images/alfs-bg.jpg') repeat scroll;
	width: 100%;
	color: #fff;;
	font-size: 1.3em !important;
	z-index:65;
}



.navbar-dark{
--bs-navbar-color:white;
--bs-navbar-hover-color:rgba(255, 255, 255, 0.75);
--bs-navbar-disabled-color:rgba(255, 255, 255, 0.25);
--bs-navbar-active-color:#fff;
--bs-navbar-brand-color:#fff;
--bs-navbar-brand-hover-color:#fff;
--bs-navbar-toggler-border-color:rgba(255, 255, 255, 0.1);
box-shadow: rgba(0, 0, 0, 0.60) 0px 40px 20px -20px;
	-moz-box-shadow: rgba(0, 0, 0, 0.60) 0px 40px 20px -20px;
	box-shadow: rgba(0, 0, 0, 0.60) 0px 40px 20px -20px; 
  border-style: solid;
  border-width: 9px;
  border-image: linear-gradient(to left, #000 1%, #CC0000 35%, #fff 50%, #39AC37 100%) 
                100% 0 100% 0/3px 0 3px 0 stretch;
  
}

.navbar-dark .navbar-brand{
	font-weight: bold;
	font-size: 1.6rem;
	font-family: 'Amaranth', sans-serif;
	color:white;


}

.navbar-dark .navbar-nav .nav-link, .nav-link:active {color: white!important;}
.navbar-dark .navbar-nav .nav-link, .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:active, .navbar-dark .navbar-brand:hover{
	color: #F4F4F4;}
	.nav-link:hover {
	background-color:black;
}
.dropdown-menu{--bs-dropdown-zindex:1000;--bs-dropdown-min-width:16rem;}

.dropdown-menu-dark, .dropdown-menu{
	--bs-dropdown-color: #dee2e6;
	--bs-dropdown-box-shadow: #CC0000;
	--bs-dropdown-link-color: white;
	--bs-dropdown-link-hover-color: white;
	--bs-dropdown-divider-bg: var(--bs-border-color-#CC0000);
	--bs-dropdown-link-hover-bg: black;
	--bs-dropdown-link-active-color: #fff;
	--bs-dropdown-link-active-bg: #0d6efd;
	--bs-dropdown-link-disabled-color: #adb5bd;
	--bs-dropdown-header-color: #adb5bd;
	font-size: 17px;
	background-color: #666666;
	background: radial-gradient(circle at 100% 100%, rgba(35,35,35,0.8) 0, rgba(35,35,35,0.8) 2px, transparent 2px) 0% 0%/4px 4px no-repeat, radial-gradient(circle at 0 100%, rgba(35,35,35,0.8) 0, rgba(35,35,35,0.8) 2px, transparent 2px) 100% 0%/4px 4px no-repeat, radial-gradient(circle at 100% 0, rgba(35,35,35,0.8) 0, rgba(35,35,35,0.8) 2px, transparent 2px) 0% 100%/4px 4px no-repeat, radial-gradient(circle at 0 0, rgba(35,35,35,0.8) 0, rgba(35,35,35,0.8) 2px, transparent 2px) 100% 100%/4px 4px no-repeat, linear-gradient(rgba(35,35,35,0.8), rgba(35,35,35,0.8)) 50% 50%/calc(100% - 10px) calc(100% - 16px) no-repeat, linear-gradient(rgba(35,35,35,0.8), rgba(35,35,35,0.8)) 50% 50%/calc(100% - 16px) calc(100% - 10px) no-repeat, linear-gradient(90deg, #39ac37 0%, #ffffff 35%, rgba(223,97,79,1) 50%, #000000 100%);
	border-radius: 5px;
	padding: 5px;
	box-sizing: content-box;
	-webkit-transition: all 1s ease-in-out;
	transition: all 1s ease;
}


.navbar-toggler  {
 width:40px;
 height:20px;
 position:relative;
 transition:.5s ease-in-out;
}

.navbar-toggler,
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
border:none;
box-shadow:none;
outline:none;
}

.navbar-toggler span{
margin:0;
padding:0;
}

.toggler-icon {
display:block;
position:absolute;
height:4px;
width:100%;
border-radius:1px;
opacity:1;
Background: #CC0000;
left:0;
transform: rotate(0deg);
transition: .25s ease-in-out;

}
.middle-bar{
margin-top: 0px;
}
/* when navigation is clicked */

.navbar-toggler .top-bar {
margin-top: 0px;
transform: rotate(135deg);
}
.navbar-toggler .middle-bar {
opacity: 0;
filter: alpha(opacity=0);
}
.navbar-toggler .bottom-bar {
margin-top: 0px;
transform: rotate(-135deg);
}
/* when navigation is collapsed */
.navbar-toggler.collapsed .top-bar {
margin-top: -20px;
transform: rotate(0deg);
}
.navbar-toggler.collapsed .middle-bar {
opacity: 1;
filter: alpha(opacity=100);}

.navbar-toggler.collapsed .bottom-bar {
margin-top: 20px;
transform: rotate(0deg);
}
/* color of 3 bars*/

.navbar-toggler.collapsed .toggler-icon {
	background: -moz-linear-gradient(to left, #000 1%, #CC0000 35%, #fff 50%, #39AC37 100%); 
background: -webkit-linear-gradient(to left, #000 1%, #CC0000 35%, #fff 50%, #39AC37 100%); 
background: -o-linear-gradient(to left, #000 1%, #CC0000 35%, #fff 50%, #39AC37 100%);
background: linear-gradient(to left, #000 1%, #CC0000 35%, #fff 50%, #39AC37 100%); 

}
 



.dropdown-menu-dark:hover {
-webkit-box-shadow: 0px 14px 15px 9px rgba(57,172,55,0.98); 
box-shadow: 0px 14px 15px 9px rgba(57,172,55,0.98);

}

.slide-in-top {
-webkit-animation: slide-in-top 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
        animation: slide-in-top 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}


@-webkit-keyframes slide-in-top {
  0% {
    -webkit-transform: translateY(-1000px);
            transform: translateY(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slide-in-top {
  0% {
    -webkit-transform: translateY(-1000px);
            transform: translateY(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}




nav li ul {
	float: left;
	left: 0;
	width:150%;
	opacity: 0;
	position: absolute;
	visibility: hidden;
	z-index: 1;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
}
nav li:hover ul {
	opacity: 1;
	
	visibility: visible;
}

.mt-25{margin-top:.5rem!important}
.mt-35{margin-top:2.1rem!important}
.dropdown-menu-dark:hover {
box-shadow: rgba(57, 172, 55, 0.9) 0px 20px 30px;
}

.dropdown-header{
font-size:1.4rem;
font-family:  'Amaranth', sans-serif;
text-align:left;

}

.dropdown:hover>.dropdown-menu {
  display: block;
  margin=0;
   -webkit-transition: all .7s;
    transition: all .7s;
}

/* this makes a hyperlink bigger  maybe your dropdown is further away and disappears on moving to it*/
.dropdown-menu { position: relative; 
background-color:#333333!important}
.dropdown-menu::after {
    content: '';
 color:white!important;
    position: absolute;
         top: -60%;
    left: 0;
    width:60%;

    height:60%;
    cursor: pointer
}




#latestnews .container{
background-image: url('../images/alfs-bg.jpg') repeat scroll;
background-color:#232323;
color:white;}

.bordsq {
    
background: 

            linear-gradient(rgba(35,35,35,0.8), rgba(35,35,35,0.8)) 50% 50%/calc(100% - 10px) calc(100% - 16px) no-repeat,
            linear-gradient(rgba(35,35,35,0.8), rgba(35,35,35,0.8)) 50% 50%/calc(100% - 16px) calc(100% - 10px) no-repeat,
            linear-gradient(90deg, #39ac37 0%, #ffffff 35%, rgba(223,97,79,1) 50%, #000000 100%);
            border-radius: 5px;
border-radius: 0;
padding:  3px;


}

hr {
	border-style: solid;
	border-width: 1px;
	border-image: linear-gradient(to left, #000 1%, #CC0000 35%, #fff 50%, #39AC37 100%) 100% 0 100% 0/1px 0 1px 0 stretch;
	width: 50%;
	margin: 15px auto 15px auto;
}



/* about */
#about {
	margin-bottom:25px;
}

.bgtr {
background: rgba(0, 0, 0, 0.7);
 color: #fff;
}
/*contact*/

ul.address {
	margin-top: 30px;
	list-style: none;
	padding: 0;
	margin: 30px 0 30px 0;
	font-size:1.3em;
}
}

/*lightbox overlay*/

#baguetteBox-overlay .full-image figcaption{
background-color:#CC0000;
background-color:rgba(0,60,121,.5);
	
}
/*slider*/

.btn-min-block
{
    min-width: 170px;
    line-height: 26px;
}
.btn-clear
{
    color: #FFF;
    background-color: transparent;
    border-color: #FFF;
    margin-right: 15px;
}
.btn-clear:hover
{
    color: #000;
    background-color: #FFF;
}

/*carousel*/
.main-text h2
{
    position: absolute;
    top: 20px;
   
	font-weight: bold;
	text-shadow: 0px 0px 2px #000;



} 
#carousel-example-2 {
	 
	 z-index:50;
}

#carouselTestimonial .carousel-inner {
	
	width: 75%;
	height: 220px !important;

 margin:auto;

}
#cover, #cover2, #cover3, #cover4, #cover5 {
    color: white;
}

.border {
	border:medium white solid;

}

#contact .form #sendmessage {
  color: #65659A;
  background-color: #01a0e2;
  border: 1px solid #65659A;
  display: none;
  text-align: center;
  padding: 15px;
  font-weight: 600;
  margin-bottom: 15px;
}

#contact .form #errormessage {
  color: red;
  display: none;
  border: 1px solid red;
  text-align: center;
  padding: 15px;
  font-weight: 600;
  margin-bottom: 15px;
}

#contact .form #sendmessage.show, #contact .form #errormessage.show, #contact .form .show {
  display: block;
}

#contact .form .validation {
  color: red;
  display: none;
  margin: 0 0 20px;
  font-weight: 400;
  font-size: 13px;
}

#contact .form input, #contact .form textarea {
  padding: 10px 14px;
  border-color: #a6a9d2;
  box-shadow: none;
  font-size: 18px;
  color:black;
}






/*bottom banner*/
.bottomphone {
	width: 100%;
	position: fixed;
	bottom: 0px;
	z-index: 101;
z-index:99;

	
} 
.social-bottom {
	text-align:center!important;

}
/*footer */
#footer {
	color: white;
}
#footer .fthd {
	color: #333333!important;
	text-align: left;
	padding-bottom: 1em;
}
#footer p {
 line-height:7px;
 padding-bottom: 3px;
}

#footer p.normal, #footer2 p.normal {
	line-height: normal;
	padding-bottom: 3px;
	color: white;
	text-align: center;
	font-style: italic;
	font-weight: bolder;
}

.copy {
 line-height: 5px!important;
 padding-bottom: 3px;
}

.pe-6{padding-right:6rem!important}
.p-6{padding:5rem!important}



 .oval {
   width: 160px;
   height: 80px;
   background: #a84909;
   border-radius: 50%;
 }
 #gallery img {
	padding-left: 0px;
	padding: 7px 15px 7px 0;
}
/*paypal button centre */
#product1ppbutton table, #product2ppbutton table, #product3ppbutton table, #product4ppbutton table, #product5ppbutton table, #product6ppbutton table, #product7ppbutton table, #product8ppbutton table, #product9ppbutton table, #product10ppbutton table, #product11ppbutton table, #product12ppbutton table  {
	margin: auto;
	text-align: center;
}
/*button */
 

.btn-af1 {
	color: #fff;
	background: rgb(161,151,151);
	background: -moz-radial-gradient(circle, rgba(161,151,151,1) 7%, rgba(78,80,72,1) 100%);
	background: -webkit-radial-gradient(circle, rgba(161,151,151,1) 7%, rgba(78,80,72,1) 100%);
	background: radial-gradient(circle, rgba(161,151,151,1) 7%, rgba(78,80,72,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#a19797",endColorstr="#4e5048",GradientType=1);
	border: thin black solid;
	font-size : 20px;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	padding: 4px 8px 4px 8px;
	font-family: 'Amaranth';
	transition: all 0.5s;
	margin: 15px 15px 5px 15px;
}

.btn-af1:hover,.btn-af1 active, button-af1 focus{
	color: #fff!important;
background: rgb(217,43,43);
background: -moz-radial-gradient(circle, rgba(217,43,43,1) 45%, rgba(0,0,0,1) 100%);
background: -webkit-radial-gradient(circle, rgba(217,43,43,1) 45%, rgba(0,0,0,1) 100%);
background: radial-gradient(circle, rgba(217,43,43,1) 45%, rgba(0,0,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#d92b2b",endColorstr="#000000",GradientType=1);	transform: scale(1.05);
box-shadow: rgba(57, 172, 55, 0.9) 0px 0px 0px 2px, rgba(57, 172, 55, 0.8) 0px 6px 20px 6px;
	border: thin #fff solid;
	text-shadow:1px 1px 2px rgba(0, 0, 0, 0.9)

	

}


.centre{margin:auto;}

#iframe-wrapper {
  position:relative;
  width: 100%;
  height: 1550px;
  z-index:10
}
#iframe-overlay {
  height:150px;
  width:100%;
    background: url('../images/alfs-bg.jpg') repeat fixed center;
	border-top: thick #CC0000 solid;
	border-bottom: thick #CC0000 solid;
	
-webkit-box-shadow: 0px 5px 8px 3px rgba(0,0,0,0.9); 
box-shadow: 0px 5px 8px 3px rgba(0,0,0,0.9);
-moz-box-shadow: 0px 5px 8px 3px rgba(0,0,0,0.9); 
	z-index: 40;
color: #CC0000;
  position:absolute;
  top: 0;
  left:0;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  height: 60px;
  width: 100px;
  outline: #CC0000;
  background-size: 20%, 20%;
  border-radius: 50%;
  background-color: black;
     
    }

.carousel-control-next-icon:after
{
	font-size: 35px;
	color: white;
	transform: translateY(60px);
	font-weight: bold;
}

.carousel-control-prev-icon:after {
 	font-weight: bold;
  font-size: 35px;
  color: white;
  transform: translatey(-60px);}

.carousel-indicators {
    color : #CC0000;
}

* {margin: 0; padding: 0;}
.block {
	border: medium #C0C0C0 inset;
	overflow: hidden;
	width: 90%;
 height: 115px;
  padding: 0;

	margin: 50px auto;
	background: #fff;
}
.animation {
  width: auto;
  height: 90px;
  font-size: 0px;
  padding: 0 10px;
margin:0;

}
.animation div {
  display: inline-block;
  width: auto;
  float: none;
  padding: 0;
  margin:0;
}
/* this is how you can add stylings to wrapper, f.e. */

.catchpainline{
float:left;

}
#cb-cookie-banner { position: fixed; bottom: 0; left: 0; width: 100%; z-index: 999; border-radius: 0; display: none; }
.cookieTitle {
	color:white;
	font-family:  'Amaranth';}
	


 
 
 
.whatsapp {
  color: white;
  background: #25D366;
 transition: color 0.3s ease, background 0.3s ease;

}
.whatsapp:hover {
  background:white;
  color: black;
 }

.envelope {
	color: white;
	background: #CC0000;
	transition: all 0.3s ease;

}
.envelope:hover {
	background: white ;
	color: black;

}
.callback {
	color: white;
	background: #00FF00;
	transition: all 0.3s ease;
}
.callback:hover {
  background: white;
  color: black;
}

.facebook {
  color: white;
  background: #3B5998;
 transition: all 0.3s ease;

}
.facebook:hover {
  background: white;
  color: black;
}

.twitter {
  color: white;
  background:  #55ACEE;
   transition: all 0.3s ease;
}
.twitter:hover {
  background: white;
  color: black;
}


.google {
  color: #dd4b39;
  background: inherit;
}
.messenger {
	
color: white;

 background: linear-gradient(rgb(255, 143, 178) 0%, rgb(167, 151, 255) 50%, rgb(0, 229, 255) 100%);
background: -webkit-linear-gradient(rgb(255, 143, 178) 0%, rgb(167, 151, 255) 50%, rgb(0, 229, 255) 100%);
	background: -o-linear-gradient(rgb(255, 143, 178) 0%, rgb(167, 151, 255) 50%, rgb(0, 229, 255) 100%);
	transition: all 0.3s ease;

}
.messenger:hover {
	background:white;
 color: black;

}



.instagram {
  color: white; 
background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); 
background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
background: -o-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );
  
transition: all 0.3s ease;

}


.instagram:hover {
  background: white ;
  color: black;
}





.linkedin {
  background: #007bb5;
  color: white;
}

.youtube {
  background-color: #bb0000;
  color: white;
}


.tbborder {
  /* top and bottom gradient shining border */
   border-style: solid;
  border-width: 3px;
   border-image: linear-gradient(to left, #000 1%, #CC0000 35%, #fff 50%, #39AC37 100%) 
                100% 0 100% 0/3px 0 3px 0 stretch;
}


.grborder {
background: radial-gradient(circle at 100% 100%, rgba(35,35,35,0.8) 0, rgba(35,35,35,0.8) 3px, transparent 3px) 0% 0%/8px 8px no-repeat,
            radial-gradient(circle at 0 100%, rgba(35,35,35,0.8) 0, rgba(35,35,35,0.8) 3px, transparent 3px) 100% 0%/8px 8px no-repeat,
            radial-gradient(circle at 100% 0, rgba(35,35,35,0.8) 0, rgba(35,35,35,0.8) 3px, transparent 3px) 0% 100%/8px 8px no-repeat,
            radial-gradient(circle at 0 0, rgba(35,35,35,0.8) 0, rgba(35,35,35,0.8) 3px, transparent 3px) 100% 100%/8px 8px no-repeat,
             (rgba(35,35,35,0.8), rgba(35,35,35,0.8)) 50% 50%/calc(100% - 10px) calc(100% - 16px) no-repeat,
            linear-gradient(rgba(35,35,35,0.8), rgba(35,35,35,0.8)) 50% 50%/calc(100% - 16px) calc(100% - 10px) no-repeat,
            linear-gradient(90deg, #39ac37 0%, #ffffff 35%, rgba(223,97,79,1) 50%, #000000 100%);         
            border-radius: 8px;
padding: 6px;
box-sizing: content-box;
margin-bottom: 60px;
    -webkit-transition: all 1s;
    transition: all 1s;
    background-color:#232323;
}
.grborder:hover {
	box-shadow: rgba(57, 172, 55, 0.9) 0px 0px 0px 2px, rgba(57, 172, 55, 0.8) 0px 6px 20px 6px;

}

.grborder2 {
background: radial-gradient(circle at 100% 100%, rgba(35,35,35,0.8) 0, rgba(35,35,35,0.8) 3px, transparent 3px) 0% 0%/8px 8px no-repeat,
            radial-gradient(circle at 0 100%, rgba(35,35,35,0.8) 0, rgba(35,35,35,0.8) 3px, transparent 3px) 100% 0%/8px 8px no-repeat,
            radial-gradient(circle at 100% 0, rgba(35,35,35,0.8) 0, rgba(35,35,35,0.8) 3px, transparent 3px) 0% 100%/8px 8px no-repeat,
            radial-gradient(circle at 0 0, rgba(35,35,35,0.8) 0, rgba(35,35,35,0.8) 3px, transparent 3px) 100% 100%/8px 8px no-repeat,
            linear-gradient(rgba(35,35,35,0.8), rgba(35,35,35,0.8)) 50% 50%/calc(100% - 10px) calc(100% - 16px) no-repeat,
            linear-gradient(rgba(35,35,35,0.8), rgba(35,35,35,0.8)) 50% 50%/calc(100% - 16px) calc(100% - 10px) no-repeat,
            linear-gradient(90deg, #39ac37 0%, #ffffff 35%, rgba(223,97,79,1) 50%, #000000 100%);       
            border-radius: 8px;
padding: 9px;
box-sizing: content-box;
margin-bottom: 60px;
    -webkit-transition: all 1s;
    transition: all 1s;
  
}
.grborder2:hover {
	box-shadow: rgba(57, 172, 55, 0.9) 0px 0px 0px 2px, rgba(57, 172, 55, 0.8) 0px 6px 20px 6px;

}
.popup-carousel {
	position: absolute;
	left: -500px;
	width: 400px;
	height: auto;
	background: radial-gradient(circle at 100% 100%, #ffffff 0, #ffffff 5px, transparent 5px) 0% 0%/8px 8px no-repeat, 
	radial-gradient(circle at 0 100%, #ffffff 0, #ffffff 5px, transparent 5px) 100% 0%/8px 8px no-repeat, 
	radial-gradient(circle at 100% 0, #ffffff 0, #ffffff 5px, transparent 5px) 0% 100%/8px 8px no-repeat, 
	radial-gradient(circle at 0 0, #ffffff 0, #ffffff 5px, transparent 5px) 100% 100%/8px 8px no-repeat, 
	linear-gradient(#ffffff, #ffffff) 50% 50%/calc(100% - 6px) calc(100% - 16px) no-repeat, 
	linear-gradient(#ffffff, #ffffff) 50% 50%/calc(100% - 16px) calc(100% - 6px) no-repeat, 
	linear-gradient(90deg, #39ac37 0%, #ffffff 35%, rgba(223,97,79,1) 50%, #000000 100%);
	border-radius: 8px;
	margin-bottom: 0;
	color: black;
	margin-top: .5em;
	-webkit-box-shadow: 0px 5px 8px 3px rgba(0,0,0,0.9);
	box-shadow: 0px 5px 8px 3px rgba(0,0,0,0.9);
	-moz-box-shadow: 0px 5px 8px 3px rgba(0,0,0,0.9);
	-webkit-transition: all 1s;
	transition: all 1s;
	top: 4%;
	text-align: center;
	visibility: 10px 10px 0 10px;
	padding: 10px 10px 10px 10px;
	display: block;
	z-index: 1000;
}
.slidein {
  animation: 1s 4s 1 forwards slide-in;  
}
.closebutton {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  margin: 0;
}

@keyframes slide-in {
  100% {
    left: 50%;
    margin-left: -200px;
  }
}

.popup-carousel:empty {
  visibility:hidden;
  border:none;
  background-color: transparent;
  display: none
}
div:empty { display: none }
.overlay h3, h2, h4, h5, h6, p {color:#000;}





.bacground-opaque {
	background-color: rgba(255, 255, 255, .7);
	border: thin #000000 solid;	
}

.btn-styled  {
	position: absolute;
	top: 0;
	right: -25px;
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	background-color: rgb(102, 0, 26);
	cursor: pointer;
	border-radius: 50%;
	color: white;
	text-align: center;
	border-color: lightgray;
	
	padding: 2px 10px 2px 10px ;
	border-width: thin;
	transition: all .5s ease-in-out;
}
.btn-styled:hover  {
	background-color: #880000;
	-webkit-box-shadow: inset 2px 1px 0px 20px rgba(255, 255, 240, 0.2);
  -moz-box-shadow: inset 2px 1px 0px 20px rgba(255, 255, 240, 0.2);
  box-shadow: inset 2px 1px 0px 20px rgba(255, 255, 240, 0.2);

}
.popup-btn{
margin-top:0;
 
}

.main-btn-rect,
.main-btn-circle{
	position: relative;
	margin: 0;
	font-family: 'Roboto', sans-serif;
	color: #FFFFF0;
	background-color: rgb(102, 0, 26);
	text-transform: uppercase;
	font-size: 16px;
	letter-spacing: 1px;
	
	outline: none;
	cursor: pointer;
	z-index: 100;


}
.main-btn-rect {
	padding: 10px 80px;
	line-height: 30px;
}
.main-btn-rect:before, 
.main-btn-rect:after{
  position: absolute;
  content: '';
  top:0;
   width: 0%;
  height: 100%;
  background-color: rgba(255, 255, 240, 0.2);
  -webkit-transition: width 0.3s;
  -o-transition: width 0.3s;
  transition: width 0.3s;
}
.main-btn-rect:before {
  left: 0;
}
.main-btn-rect:after {
  right: 0;
}
.main-btn-rect:hover:before, 
.main-btn-rect:hover:after{
  width: 50%;
}
.main-btn-circle{
position:absolute;
	height: 34px;
	width: 34px;
	border:thin silver solid;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	line-height: 29px;
	padding-bottom: 10px;	
  -webkit-transition: box-shadow 0.3s;
  -o-transition: box-shadow 0.3s;
  transition: box-shadow 0.3s;
  top:-15px;
  right: -15px;
}
.main-btn-circle:hover{   
 	background-color: #880000;
	-webkit-box-shadow: inset 2px 1px 0px 20px rgba(255, 255, 240, 0.2);
  -moz-box-shadow: inset 2px 1px 0px 20px rgba(255, 255, 240, 0.2);
  box-shadow: inset 2px 1px 0px 20px rgba(255, 255, 240, 0.2);
}

.popup{
  position: fixed;
	top: 100%;
  width: 100%;
  height: 100%;
  z-index: 10001;
  background-color: 
}
.popup.active{
  top:0;
  background-color: rgba(3, 3, 3, 0.5); 
  transition: background-color .6s ,opacity .6s;
}
.popup .main-btn-rect{
  padding: 10px 100px;
}
.popup .popup-content{
  position: absolute;
  top: 50%;
  left: 50%;
  max-height: 568px;
  min-width: 320px;
  margin-top: 150px;
  padding: 25px;
  background-color: #FFFFF0;
  color: #070000;
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transition: margin .6s;
  -webkit-transition: margin .6s;
  -moz-transition: margin .6s;
  -o-transition: margin .6s;
}
.popup.active .popup-content{
  margin-top: 0px;
}
.popup-content h6{
  display: table;
  font-size: 16px;
  text-align: center;
  margin: 10px auto;
  font-family: 'Familjen Grotesk', sans-serif;font-weight: 100;  
}






/* ihover */
#hovers {
	
	-webkit-box-shadow: 0px 10px 10px 10px rgba(0,0,0,0.25);
	-moz-box-shadow: 0px 10px 10px 10px rgba(0,0,0,0.25);
	box-shadow: 0px 10px 10px 10px rgba(0,0,0,0.25);
	z-index: 99;
}
#hovers .row {
	padding:50px 0 50px;
	margin-bottom:25px;
}

#hovers p {
	font-size: large;
	font-weight: bold;
}





.x{
  background-color:black;
  height:50px;
  width:50px;
  border-radius:100%;
  position:relative;
  top:-20px;
  left:20px;
}

.x > a{
  color:white;
  font-weight:bold;
  font-size:2.3em;
  font-family:none;
  text-align:center;
  text-decoration:none;
  }
.panorama {
	margin: 0 auto;
	cursor: all-scroll;
	width: 100%;
	height: 0;
	padding-bottom: 30%;
	background-image: url('../images/shop-pano-min.jpg');
	background-size: cover;
	background-position: 50% 0;
	transition: background-position 1s linear;
}
.panorama1 {
	margin: 0 auto;
	cursor: all-scroll;
	width: 100%;
	height: 0;
	padding-bottom: 30%;
	background-image: url('../images/shop-pano2.jpg');
	background-size: cover;
	background-position: 50% 0;
	transition: background-position 1s linear;
}