* {box-sizing: border-box;}

body {
    margin: 0;
    font-family: 'Roboto';
    font-size: 14px;
}
.contents {
  /*max-width:1172px;margin:auto*/
    margin:0px 50px 0px 50px;
}
.contents1 {
  max-width:1172px;margin:auto
}
.contents2 {
    max-width: 1172px;
    display: inline-block;
    padding-top:20px;
}
.header {
  overflow: hidden;
  background-color: #ffffff;
  /*max-width:1172px;*/
  margin:0px 50px 0px 50px;
}

.header a {
  float: left;
  color: black;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 16px; 
  font-weight:300;
  line-height: 15px;
  border-radius: 4px;
}

.header a.logo {
  font-size: 12px;
}

.header a:hover {
  color: #F69306;
}

.header a.active {
  color: #FFFFFF;
}

.topnav {
overflow: hidden;
  float: right;
  margin-top:30px;
}*
.topnav a.active{
/*color: #FFFFFF;
  background-color: #F69306;*/
  color:#f69306;
}
.topnav .icon {
display: none;
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 720px){
	.contents{margin:auto;}
}
@media only screen and (max-width: 830px) {

.header {margin:auto;}
.header a {
    float: left;
    display: block;
    text-align: left;
  }
.topnav a{display: none;}

/*
.dropdown a{display: none;}
.dropdown .icon{
	display:none;
}
.dropdown a.icon{
float: right;
display: block;
}
.dropdown {float:none;}
.dropdown.responsive {position:relative;}
.dropdown.responsive .icon{position:absolute;right:0;top:0;}
.dropdown.responsive a{
	float: none;
display: block;
text-align: left;
}
.dropdown{
	float:none;
}
*/
.topnav a.icon{
float: right;
display: block;
}
.topnav.responsive {position: relative;}
.topnav.responsive .icon {position: absolute;right: 0;top: 0;}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
  .topnav {
    float: none;
  }
}

/* Small devices (portrait tablets and large phones, 600px and up)*/
@media only screen and (min-width: 600px) {
  /*.header {background: green;}*/
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  /*.header {background: blue;}*/
} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  /*.header {background: orange;}*/
} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  /*.header {width: 1172px}*/
}
@media only screen and (min-width: 1900px) {

}


.mySlides1, .mySlides2 {display: none}
.mySlides1 img {vertical-align: middle;}
.mySlides2 img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  position: relative;  margin: auto;
}

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

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

/* On hover, add a grey background color */
.prev:hover, .next:hover {
  background-color: #f1f1f1;
  color: black;
}


/* Caption text */
.text {
  color: #000000;font-family:Roboto;font-weight:300;font-size: 15px;padding: 8px 12px;position: absolute;background-color: #ffffff;text-align: center;top: 70%;left: 50%;transform: translate(-50%, -50%);
}
.text:hover {
  background-color: rgba(255, 255, 255, 0);color:#ffffff;border: 1px solid #e9e9e9; 
}
.text1 {
  color: #ffffff;font-family:Roboto;font-weight:300;font-size: 24px;text-shadow: 2px 2px 2px #000000;padding: 8px 12px;position: absolute;text-align: center;top: 50%;left: 50%;transform: translate(-50%, -50%);
}
.text2 {
  color: #ffffff;font-family:Roboto;font-weight:300;font-size: 16px;text-shadow: 2px 2px 2px #000000;padding: 8px 12px;position: absolute;text-align: center;top: 57%;left: 50%;transform: translate(-50%, -50%);
}
@media screen and (max-width: 720px) {
  .text2 {font-size: 8px;padding: 4px 6px;top:60%;}
  .text1{font-size:12px;padding: 4px 6px;top:40%;}
  .text{font-size:7px;padding: 4px 6px;top: 80%;}
  }
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (max-width: 1025px) {
  .text2 {font-size: 12px;padding: 4px 6px;top:60%;}
  .text1{font-size:16px;padding: 4px 6px;top:50%;}
  .text{font-size:10px;padding: 4px 6px;top: 70%;}
} 
.cataloguetext {
  color: #000000;font-family:Roboto;font-weight:300;font-size: 15px;padding: 12px 12px;position: absolute;background-color: #ffffff;text-align: center;top: 88%;left: 50%;transform: translate(-50%, -50%);
}
.cataloguetext a{
text-decoration:none;color:#000000;
}
.cataloguetext:hover {
  background-color: rgba(255, 255, 255, 0);color:#ffffff;border: 1px solid #e9e9e9; 
}
.cataloguetext1 {
  color: #ffffff;font-family:Roboto;font-weight:300;font-size: 36px;text-shadow: 2px 2px 2px #000000;padding: 8px 12px;position: absolute;text-align: center;top: 20%;left: 50%;transform: translate(-50%, -50%);
}
.cataloguetext2 {
  color: #ffffff;font-family:Roboto;font-weight:300;font-size: 16px;text-shadow: 2px 2px 2px #000000;padding: 8px 12px;position: absolute;text-align: center;top: 80%;left: 50%;transform: translate(-50%, -50%);
}
@media screen and (max-width: 720px) {
  .cataloguetext2 {font-size: 8px;padding: 4px 6px;top:60%;}
  .cataloguetext1{font-size:12px;padding: 4px 6px;top:40%;}
  .cataloguetext{font-size:7px;padding: 4px 6px;top: 80%;}
  }
  @media screen and (min-width: 768px) {
  .cataloguetext2 {font-size: 8px;padding: 4px 6px;top:80%;}
  .cataloguetext1{font-size:12px;padding: 4px 6px;top:20%;}
  .cataloguetext{font-size:7px;padding: 4px 6px;top: 88%;}
  }
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 1024px) {
  .cataloguetext2 {font-size: 10px;padding: 4px 6px;top:80%;}
  .cataloguetext1{font-size:16px;padding: 4px 6px;top:20%;}
  .cataloguetext{font-size:10px;padding: 4px 6px;top: 88%;}
} 
@media only screen and (min-width: 1440px) {
  .cataloguetext2 {font-size: 14px;padding: 12px 12px;top:80%;}
  .cataloguetext1{font-size:36px;padding: 8px 12px;top:20%;}
  .cataloguetext{font-size:15px;padding: 8px 12px;top: 88%;}
} 
@media only screen and (min-width: 1920px) {
  .cataloguetext2 {font-size: 16px;padding: 12px 12px;top:80%;}
  .cataloguetext1{font-size:36px;padding: 8px 12px;top:20%;}
  .cataloguetext{font-size:15px;padding: 8px 12px;top: 88%;}
}
/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 10px;
  width: 10px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  /*transition: background-color 0.6s ease;*/
}
.dot.active{
  background-color: #F69306;
}
.dot:hover {
  background-color: #F69306;
}
.dot1 {
  cursor: pointer;
  height: 10px;
  width: 10px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  /*transition: background-color 0.6s ease;*/
}
.dot1.active{
  background-color: #F69306;
}
.dot1:hover {
  background-color: #F69306;
}
/* Fading animation */
/*.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}
*/

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}

.carousel-indicators li {
    width: 10px;
    height: 10px;
    border-radius: 100%;
	margin:7.5px;
}
.carousel-control-next-icon {
  /*background-image: none;
  color: white;
  font-size: 50px;
  font-family:roboto;
  font-weight:300;*/
  /*filter: invert(1);*/
  background-image: none;
  left: auto;
    right: 75%;
    margin: -1.875rem;
    border-bottom: 0 solid;
    border-left: 0 solid;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    box-shadow: 2px -2px 3px rgba(0,0,0,.5),inset -2px 2px 3px rgba(0,0,0,.5);
	content: '';
    position: absolute;
    width: 2rem;
    height: 2rem;
	/*
    border-bottom: 2px solid #fff;
    border-left: 2px solid #fff;
    top: 50%;
    left: 75%;
    margin: -1.875rem;
    box-shadow: -2px 2px 3px rgba(0,0,0,.5),inset 2px -2px 3px rgba(0,0,0,.5);*/
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
}
.carousel-control-prev-icon {
  /*background-image: none;
  color: white;
  font-size: 50px;
  font-family:roboto;
  font-weight:300;*/
  /*filter: invert(1);*/
  background-image: none;
  right: auto;
    left: 75%;
    margin: -1.875rem;
    border-bottom: 2px solid #fff;
    border-left: 2px solid #fff;
    border-top: 0 solid;
    border-right: 0 solid;
    box-shadow: -2px 2px 3px rgba(0,0,0,.5),inset 2px -2px 3px rgba(0,0,0,.5);
	content: '';
    position: absolute;
    width: 2rem;
    height: 2rem;
	/*
    border-bottom: 2px solid #fff;
    border-left: 2px solid #fff;
    top: 50%;
    left: 75%;
    margin: -1.875rem;
    box-shadow: -2px 2px 3px rgba(0,0,0,.5),inset 2px -2px 3px rgba(0,0,0,.5);*/
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
}
  @media screen and (max-width: 720px) {
	.carousel-control-next-icon,.carousel-control-prev-icon {width:1rem;height:1rem; }
} 
.fa.fa-arrow-up
{
	
}
.fa.fa-arrow-left
{
	
}
/*
.slick-next:before {
    left: auto;
    right: 75%;
    margin: -1.875rem;
    border-bottom: 0 solid;
    border-left: 0 solid;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    box-shadow: 2px -2px 3px rgba(0,0,0,.5),inset -2px 2px 3px rgba(0,0,0,.5);
}
.slick-next:before, .slick-prev:before {
    content: '';
    position: absolute;
    width: 3.75rem;
    height: 3.75rem;
    border-bottom: 2px solid #fff;
    border-left: 2px solid #fff;
    top: 50%;
    left: 75%;
    margin: -1.875rem;
    box-shadow: -2px 2px 3px rgba(0,0,0,.5),inset 2px -2px 3px rgba(0,0,0,.5);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
}*/
/*Product Submenu*/
nav ul { list-style-type: none; }
   .c1, .c2, .c3 {
      float: left;
      width: 33.33%;
      color: white;
      padding: 0px;
      text-align: center;
   }
   .container:after {
      clear: both;
   }
  @media screen and (max-width: 720px) {
	.c1, .c2, .c3 {float:none; width:100%; }
} 
.productsubmenucontainer {
  position: relative;
}
.productsubmenucontainerimage {
  display: block;
  width: 100%;
  height: auto;
}

.productsubmenuoverlay {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: #ffffff;
  overflow: hidden;
  width: 100%;
  height:0%;
  transition: .2s ease-out;
}



.productsubmenucontainer:hover .productsubmenuoverlay {
  bottom: 0;
  height: 100%;
  background-color: rgba(255,255,255,0.9);
          -webkit-transform: rotateX(0);
  transform: rotateX(0);
}

.productsubmenu {
  color: black;
  font-size: 20px;
  font-weight: 300;font-family: Roboto;line-height: 1.33;
  position: absolute;
  top: 50%;
  left: 25%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: left;
}
.productsubmenu a{
color:black;
text-decoration:none;
}
.productsubmenu a.active{
}
.productsubmenu a:hover{
  color:#f69306;

  }
  
   .c0 {
      float: left;
      width: 100%;
      color: white;
      padding: 0px;
      text-align: center;
   }


  .productsubmenuoverlay1 {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: #ffffff;
  overflow: hidden;
  width: 25%;
  height:0%;
  transition: .2s ease-out;

}

.productsubmenucontainer:hover .productsubmenuoverlay1 {
  bottom: 0;
  height: 100%;
  background-color: rgba(255,255,255,0.9);
          -webkit-transform: rotateX(0);
  transform: rotateX(0);
}
@media only screen and (min-width: 375px) {
.productsubmenu{font-size:12px;}
}
  @media screen and (min-width: 720px) {
	.c0 {float:none; width:100%; }
	.productsubmenuoverlay1{width:100%;}
	.productsubmenu{font-size:12px;}
}
@media only screen and (min-width: 1025px) {
.productsubmenu{font-size:14px;}
}
@media only screen and (min-width: 1400px) {
.productsubmenu{font-size:20px;}
}

/*ProductPortfolio*/
.contents-productportfolio{
padding-left:0px;padding-right:0px;margin-top:0px;background-color:#ffffff;display:inline-block;text-align:center;
}
/*Whats New*/
.contents-whatsnewheader{
background-color:#ffffff;width:100%;text-align:center;padding-left:20px;padding-right:20px;
}
.contents.whatsnew{
padding-left:0px;padding-right:0px;padding-top:20px;padding-bottom:20px;
}
.whatsnewrow{
margin-top:-5px;
}
.whatsnewcolumn {
  float: left;
  width: 19.1%;
  padding: 0px;
  margin:3px 3px;
}
.whatsnewcolumn img{
  width: 100%;
  height: auto;
}
/* Clear floats after the columns */
.whatsnewrow:after {
  content: "";
  display: table;
  clear: both;
}
  .whatsnewcolumnsmall{
display:none;}

@media screen and (max-width: 720px) {
  .whatsnewcolumn {
    display:none;
  }
  .whatsnewcolumnsmall{
display:block;}
}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
.whatsnewcolumn {
  float: left;
  width: 19.1%;
  padding: 0px;
  margin:3px 3px;
  }
} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
.whatsnewcolumn {
  float: left;
  width: 19.48%;
  padding: 0px;
  margin:3px 2px;
}
} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
.whatsnewcolumn {
  float: left;
  width: 19.47%;
  padding: 0px;
  margin:3px 3px;
}
}
@media only screen and (min-width: 1920px) {
.whatsnewcolumn {
  float: left;
  width: 19.65%;
  padding: 0px;
  margin:3px 3px;
}
}

/*Projects*/
.contents-projectsheader{
width:100%;padding-bottom:25px;
}
.contents.projects{
padding-left:0px;padding-right:0px;margin-top:-30px;
}

/*Copyright*/
.copyrightbg{
	width:100%;vertical-align:center;border-top: 1px solid #e9e9e9;display:inline-block;
}
.contents.copyright{
position:relative;
}
/* Small devices (portrait tablets and large phones, 600px and up)*/
@media only screen and (max-width: 600px) {
  .contents.copyright {height:80px;}
  .copyrightleft{padding-bottom:10px;}
  .copyrightright{display:block;}
}
.copyrightleft{
font-size:14px;font-weight:300;margin-top:15px;float:left;
}
.copyrightright{
display:inline;float: right;
}
/* Clear floats after projectheaderright*/ 
.copyrightright:after {
  content: "";
  display: table;
  clear: both;
}
/*Social Media Icons*/
/* unvisited link 
.fa a:link {

}

/* visited link 
.fa a:visited {

}

/* mouse over link 
.fa a:hover {

}

/* selected link 
.fa a:active {

}

.fa a{

}
When setting the style for several link states, there are some order rules:

a:hover MUST come after a:link and a:visited
a:active MUST come after a:hover
*/
.fa {
  padding: 10px;
  font-size: 20px;
  width: 36px;
  text-align: center;
  text-decoration: none;
  margin: 2px 2px 2px 2px;
  border-radius: 50%;
}
.fa:before {
/*color: #303030;*/
text-decoration:none;
}
.fa:after {
color: #303030;
text-decoration:none;
}
    .fa:hover {
        /*opacity: 0.7;*/
        color: #F69306 !important;
        /*color: #F69306;*/
        text-decoration: none;
    }
.fa-facebook {
  color: #303030;
}
.fa-twitter {
  color: #303030;
}

.fa-google {
  color: #303030;
}

.fa-linkedin {
  color: #303030;
}

.fa-youtube {
  color: #303030;
}

.fa-instagram {
  color: #303030;
}

.fa-pinterest {
  color: #303030;
}
.fa-map-marker {
    color: #303030;
}
.fa.fa-search {
    padding: 0px;
    margin: 0;
    font-size: inherit;
    text-align: left;
    width: auto;
}
.fa.fa-user {
    padding: 0px;
    margin: 0;
    font-size: inherit;
    text-align: left;
    width: auto;
}
.fa.fa-sign-in {
    float: right;
}
.fa.fa-arrow-up{
	  font-size: 16px;
}
.fa.fa-arrow-left{
	  font-size: 12px;
}
/*Project Listing*/
.projectheaderleft{
width: 65%;
float:left;
}
.projectheaderright{
width:35%;
display:inline;
}
/* Clear floats after projectheaderright*/ 
.projectheaderright:after {
  content: "";
  display: table;
  clear: both;
}
/* Center website */
.projectlistmain {
  max-width: 1172px;
  margin: auto;
    /*margin:0px 50px 0px 50px;*/
  padding: 20px;
}

.projectlistmain h1 {
  font-size: 16px;
  word-break: break-all;
  font-weight:300;
}

.projectlistrow {
  margin: 10px -10px 0px -10px;
}

/* Add padding BETWEEN each column */
.projectlistrow,
.projectlistrow > .projectlistcolumn {
  /*padding: 3px;*/
}
.projectlistcolumn
{
	padding: 0px 10px 40px 10px;
}

/* Create four equal columns that floats next to each other */
.projectlistcolumn {
  float: left;
  width: 25%;
  display: none; /* Hide all elements by default */
}
  @media screen and (max-width: 720px) {
	.projectlistcolumn {float:none; width:100%;margin:0px 0px 60px 0px; }
	.projectlistrow{margin:0px 0px 0px 0px;}
	.projectheaderleft{float:none; width:100%;}
}
/* Clear floats after rows */ 
.projectlistrow:after {
  content: "";
  display: table;
  clear: both;
}

/* Content */
.projectlistcontent {
    background-color:#e9e9e9;
  padding: 0px;
  font-size:12px;
  font-family:Roboto;
  font-weight:300;
  
}
.projectlistcontenttext {
    background-color:#e9e9e9;
  font-size:14px;
  font-family:Roboto;
  font-weight:300;
  	/*top right bottom left*/
  padding: 10px 10px 10px 10px;
  min-height:90px;
  
}
.projname{
font-weight:500;
line-height:1.5;
}
.projlocation{
	font-size:12px;
	line-height:1.5;
}
.projdesigner{
	font-size:12px;
	line-height:1.5;
}
/* The "show" class is added to the filtered elements */
.show {
  display: block;
}

/* Style the buttons */
.projectlistbtn {
  border: none;
  outline: none;
  padding: 8px 16px;
  margin:auto auto 10px auto;
  background-color: #303030;
  color:white;
  cursor: pointer;
  font-family: Roboto;
  font-size: 15px;
  font-weight:300;
}

.projectlistbtn:hover {
  background-color: #ddd;
}

.projectlistbtn.active {
  background-color: #666;
  color: white;
}
#projectlistmyBtnContainer{
margin-bottom:40px;
}
/*Productlist*/
.contents.productlistsubheader{
	border-bottom: 1px solid #e9e9e9;font-size:24px;font-weight:100;font-family:Roboto;line-height:1.33;
	max-width:1172px;margin:20px auto 40px auto;
	/*margin-top:20px;background-color:#303030;color:white;padding:10px;*/
}
.productlistheaderleft{
width: 65%;
float:left;
}
.productlistheaderright{
width:35%;
display:inline;
  font-size:16px;
  font-family:Roboto;
  font-weight:300;
}
.productlistheaderright1{
padding-top:20px;padding-left:20px;color:white;display:table;
}
.productlistheaderright2{
margin:20px;color:white;font-size:12px;
}
/* Clear floats after projectheaderright*/ 
.productlistheaderright:after {
  content: "";
  display: table;
  clear: both;
}
/* Center website */
.productlistmain {
  max-width: 1172px;
  margin: auto;
    /*margin:0px 50px 0px 50px;*/

}

.productlistmain h1 {
  font-size: 16px;
  word-break: break-all;
  font-weight:300;
}

.productlistrow {
    margin: 10px -10px 0px -10px;
}

/* Add padding BETWEEN each column */
.productlistrow,
.productlistrow > .productlistcolumn {
  /*padding: 3px;*/
}
.productlistcolumn
{
	padding: 0px 10px 40px 10px;
}
/* Create four equal columns that floats next to each other */
.productlistcolumn {
  float: left;
  width: 25%;
}
.productlistcolumn img{
	border: 1px solid #e9e9e9;
}
  @media screen and (max-width: 720px) {
	.productlistcolumn {float:none; width:100%; padding:20px;}
	.productheaderleft{float:none; width:100%;}
	.productlistmain{padding: 20px;margin:auto;}
}
/* Clear floats after rows */ 
.productlistrow:after {
  content: "";
  display: table;
  clear: both;
}

/* Content */
.productlistcontent {
  background-color: white;
  padding: 0px;
  font-size:16px;
  font-family:Roboto;
  font-weight:300;
}
.productlistcontent1 {
    background-color:#e9e9e9;
  padding: 0px;
  font-size:12px;
  font-family:Roboto;
  font-weight:300;
  
}

.productlistcontenttext {
    background-color:#e9e9e9;
  font-size:14px;
  font-family:Roboto;
  font-weight:300;
  	/*top right bottom left*/
  padding: 10px 10px 10px 10px;
  min-height:90px;
  
}
/* Style the buttons */
.productlistbtn {
  border: none;
  outline: none;
  padding: 12px 12px;
  margin-bottom: 6px;
  background-color: #303030;
  color:white;
  cursor: pointer;
  font-family: Roboto;
  font-size: 12px;
}

.productlistbtn:hover {
  background-color: #ddd;
}

.productlistbtn.active {
  background-color: #666;
  color: white;
}

/* Catalogue Page */
.InstallationGuidelines
{
		font-size:20px;font-weight:100;font-family:Roboto;line-height:1.33;
}
.InstallationGuidelines a{
color:black;
text-decoration:none;
}
.InstallationGuidelines a.active{
}
.InstallationGuidelines a:hover{
  color:#f69306;

  }
.cataloguelistmain {
  max-width: 1172px;margin:auto;
  
  /*margin:0px 0px 0px 0px;*/

}

.cataloguelistmain h1 {
  font-size: 25px;
  word-break: break-all;
}

.cataloguelistrow {
  /*margin: 10px 10px;*/
    margin: 10px -10px 0px -10px;
}

/* Add padding BETWEEN each column */
.cataloguelistrow,
.cataloguelistrow > .cataloguelistcolumn {
	/*top right bottom left*/
  /*padding: 0px 20px 25px 20px;*/
}
.cataloguelistcolumn
{
	padding: 0px 10px 40px 10px;
}
.cataloguelistcolumn-1
{
	padding: 0px 10px 40px 10px;
}
/* Create four equal columns that floats next to each other */
.cataloguelistcolumn {
  float: left;
  width:25%;

}
.cataloguelistcolumn-1
{
  float: left;
  width:25%;
}
.cataloguelistcolumn1 {
  float: left;
  min-width:100px;
}
.cataloguelistcolumn img{
	border: 1px solid #e9e9e9;
}
.cataloguelistcolumn-1 img{
	border: 2px solid #e9e9e9;
}
  @media screen and (max-width: 720px) {
	.cataloguelistcolumn {float:none; width:100%; padding:20px;}
		.cataloguelistcolumn-1 {float:none; width:100%; padding:20px;}
	.productheaderleft{float:none; width:100%;}
	.cataloguelistmain{padding: 20px;margin:auto;}
	.cataloguelistcolumn1{float:none;display:none;}
}
  @media screen and (min-width: 768px) {

	.cataloguelistcolumn1{float:left;min-width:55px;}
  }
  @media screen and (min-width: 1024px) {

	.cataloguelistcolumn1{float:left;min-width:65px;}
}
  @media screen and (min-width: 1025px) {

	.cataloguelistcolumn1{float:left;min-width:100px;}
}
  @media screen and (min-width: 1440px) {

	.cataloguelistcolumn1{float:left;min-width:115px;}
  }
@media screen and (min-width: 1600px) {

	.cataloguelistcolumn1{float:left;min-width:110px;}
}
/* Clear floats after rows */ 
.cataloguelistrow:after {
  content: "";
  display: table;
  clear: both;
}
.catalogueheader{
	font-size:24px;font-weight:100;font-family:Roboto;line-height:1.33;
	max-width:1172px;align:center;margin:20px auto 40px auto;
	/*margin-top:20px;background-color:#303030;color:white;padding:10px;*/
}
/* Content */
.cataloguelistcontent {
    background-color:#e9e9e9;
  padding: 0px;
  font-size:12px;
  font-family:Roboto;
  font-weight:300;
  
}
.cataloguelistcontenttext {
    background-color:#e9e9e9;
  font-size:14px;
  font-family:Roboto;
  font-weight:300;
  	/*top right bottom left*/
  padding: 10px 10px 10px 10px;
  min-height:90px;
  
}

.submenubg{
    width: 100%;
    border-top: 1px solid #e9e9e9;
    border-bottom: 1px solid #e9e9e9;
    color: black;
	}
.submenuright{
    display: inline;
    font-size: 16px;
    font-family: Roboto;
    font-weight: 300;
}
.submenuright:after {
    content: "";
    display: table;
    clear: both;
}
.submenu{
color:black;padding:10px;font-size:16px;font-family:Roboto;font-weight:300;margin:0px 50px 0px 50px;float:right;
}
.submenu a:hover{
  color: #F69306;
}
.submenu a{
color:black;text-decoration:none;
}
.submenu a.active{
  color:#f69306;
}
  @media screen and (max-width: 720px) {
	.submenu{margin:auto;}
}
.direction {
    color: black;
    font-size: 16px;
    font-family: Roboto;
    font-weight: 300;
}
.direction a:hover {
        color: #F69306;
    }
.direction a {
        color: black;
        text-decoration: none;
}

.direction a.active {
            color: #f69306;
 }
/* Product Main Page */
.productcatlistmain {
  max-width: 1172px;
  margin: auto;
    /*margin:0px 50px 0px 50px;*/

}
.productcatlistrow {
  /*margin: 10px 0px 10px 0px;*/
    margin: 10px -10px 0px -10px;
}
/* Add padding BETWEEN each column */
.productcatlistrow,
.productcatlistrow > .productcatlistcolumn {
  /*padding: 2px;*/
}
/* Create five equal columns that floats next to each other */
.productcatlistcolumn {
  float: left;
  width: 25%;
  	padding: 0px 10px 20px 10px;
}
.productcatlistcolumn img{
	border: 1px solid #e9e9e9;
}

/* Clear floats after rows */ 
.productcatlistrow:after {
  content: "";
  display: table;
  clear: both;
}
.productcatlistmain1 {
  margin: auto;
    /*margin:0px 50px 0px 50px;*/

}
.productcatlistrow1 {
  /*margin: 10px 0px 10px 0px;*/
    margin: 10px -10px 0px -10px;
}
/* Add padding BETWEEN each column */
.productcatlistrow1,
.productcatlistrow1 > .productcatlistcolumn1 {
  padding: 2px;
}
/* Create five equal columns that floats next to each other */
.productcatlistcolumn1 {
  float: left;
  width: 33.33%;
}
.productcatlistcolumn1 img{
	border: 1px solid #e9e9e9;
}
/* Clear floats after rows */ 
.productcatlistrow1:after {
  content: "";
  display: table;
  clear: both;
}
  @media screen and (max-width: 720px) {
	.productcatlistcolumn {float:none; width:100%; padding:20px;}
	.productcatlistcolumn1 {float:none; width:100%; padding:20px;}
	.productheaderleft{float:none; width:100%;}
	.productcatlistmain{padding: 20px;margin:auto;}
	.productcatlistmain1{padding: 0px;margin:auto;}
}
/* Content */
.productcatlistcontent {
  background-color: white;
  padding: 0px;
  font-size:16px;
  font-family:Roboto;
  font-weight:300;
}
.productcatlistcontenttext {
    background-color: #e9e9e9;
    font-size: 14px;
    font-family: Roboto;
    font-weight: 300;
    /*top right bottom left*/
    padding: 10px 10px 10px 10px;
    min-height: 90px;
}
.generalcontents{
margin:20px auto 20px auto;font-size:14px;font-weight:300;
max-width:1171px;}
/*Aboutus*/
.aboutusvideo {
    margin:auto;
 background-color:#e9e9e9;
}
.contents.aboutussubheader{
	font-size:24px;font-weight:100;font-family:Roboto;line-height:1.33;margin-top:20px;
	/*margin-top:20px;background-color:#303030;color:white;padding:10px;*/
}
.aboutussubheader1{
	font-size:24px;font-weight:100;font-family:Roboto;line-height:1.33;margin-top:20px;max-width:1172px;margin:auto;
	/*margin-top:20px;background-color:#303030;color:white;padding:10px;*/
}
.aboutuslistmain {
  max-width: 1172px;
    margin:auto;
  padding: 20px;
}

.aboutuslistmain h1 {
  font-size: 16px;
  word-break: break-all;
  font-weight:300;
}

.aboutuslistrow {
  /*margin: 10px -10px;*/
    margin: 10px -10px 0px -10px;
}

/* Add padding BETWEEN each column */
.aboutuslistrow,
.aboutuslistrow > .aboutuslistcolumn {
  /*padding: 3px;*/
}

/* Create four equal columns that floats next to each other */
.aboutuslistcolumn {
  float: left;
  width: 25%;
  padding: 0px 10px 40px 10px;
}

  @media screen and (max-width: 720px) {
	.aboutuslistcolumn {float:none; width:100%; }
}
  @media screen and (max-width: 720px) {
	.aboutuslistcolumn1 {float:none; width:100%; }
}
.aboutuslistcolumn1{padding: 10px;}
/* Clear floats after rows */ 
.aboutuslistrow:after {
  content: "";
  display: table;
  clear: both;
}
.aboutuslistcolumn img{
	border: 1px solid #e9e9e9;
}

/* Content */
.aboutuslistcontent {
    background-color:#e9e9e9;
  padding: 0px;
  font-size:12px;
  font-family:Roboto;
  font-weight:300;
}
.aboutuslistcontenttext {
    background-color:#e9e9e9;
  font-size:14px;
  font-family:Roboto;
  font-weight:300;
  	/*top right bottom left*/
  padding: 10px 10px 10px 10px;
  min-height:60px;
  
}
.aboutusname{
font-weight:500;
line-height:1.5;
}
.aboutuslocation{
	font-size:12px;
	line-height:1.5;
}
.aboutusdesigner{
	font-size:12px;
	line-height:1.5;
}
.aboutuslink{
float:right;font-family:Roboto;font-size:16px;font-weight:300;color:#F69306;
}
.aboutuslink a{
color:#f69306;
text-decoration:none;
}
.aboutuslink a.active{
}
.aboutuslink a:hover{
  color:#e9e9e9;
  }
.contents-aboutusheader{
width:100%;
/*border-top: 1px solid #e9e9e9;*/
max-width:1172px;margin:auto;
}
.contents.aboutus{
padding-top:20px;font-size:25px; color: #F69306;margin:auto;
}
/* Product Main Page */
.aboutusmain {
  max-width: 1172px;
  margin: auto;
    /*margin:0px 50px 0px 50px;*/

}
.aboutusmain h1 {
  font-size: 25px;
  word-break: break-all;
}
.aboutusrow {
  margin: 10px -16px;
}

/* Add padding BETWEEN each column */
/*.aboutusrow,
.aboutusrow > .aboutuscolumn {
  padding: 3px;
}*/
/* Create two equal columns that floats next to each other */
.aboutuscolumn {
  float: left;
  width: 50%;
}
/* Clear floats after rows */ 
.aboutusrow:after {
  content: "";
  display: table;
  clear: both;
}
/* Content */
.aboutusmaincontent {
  background-color: white;
  max-width:1172px;
  margin:auto;
    /*margin:0px 50px 0px 50px;*/
  padding: 20px;
  font-family:Roboto;font-size:16px;font-weight:300;
}
.aboutuscontent {
  background-color: white;
  padding: 0px;
  font-family:Roboto;font-size:16px;font-weight:300;
}
.aboutuscontent img{max-width:100%;}
.ac-left1{
border-right: 1px solid #F69306;padding-right:40px;padding-left:20px;
}
.ac-right1{
border-left: 1px solid #F69306;padding-left:40px;padding-right:20px;
}
.ac-left2{
padding-right:40px;padding-left:20px;
}
.ac-right2{
padding-left:40px;padding-right:20px;
}
@media screen and (max-width: 720px) {
	.aboutus{padding:20px;}
	.aboutuscolumn {float:none; width:100%; padding:20px; border:none;}
	.aboutusmain{padding: 20px;margin:auto;}
	.aboutusmaincontent{padding:20px;margin:auto;}
	.aboutuslistmain{margin:auto;}
	.ac-left1{padding:20px;border:none:}
	.ac-right1{padding:20px;border:none:}
	.ac-left2{padding:20px;border:none:}
	.ac-right2{padding:20px;border:none:}
	.aboutuscontent{width:100%;}
	.aboutuscontent img{max-width:100%;}
	.generalcontents{margin:20px;}
}

/*Contact*/
.contents-contactheader{
width:100%;border-top: 1px solid #e9e9e9;
}
.contents.contact{
padding-top:20px;font-size:25px; color: #F69306;margin:auto;
}
/* Product Main Page */
.contactmain {
  /*max-width: 1172px;
  margin: auto;*/
    margin:0px 50px 0px 50px;

}
.contactmain h1 {
  font-size: 25px;
  word-break: break-all;
}
.contactrow {
  margin: 10px 10px;
}

/* Add padding BETWEEN each column */
/*.aboutusrow,
.aboutusrow > .aboutuscolumn {
  padding: 3px;
}*/
/* Create two equal columns that floats next to each other */
.contactcolumn {
  float: left;
  width: 50%;
}
/* Clear floats after rows */ 
.contactrow:after {
  content: "";
  display: table;
  clear: both;
}
/* Content */
.contactcontent {
  background-color: white;
  padding: 0px;
  font-size: 16px;
	font-family:Roboto;font-weight:300;
	line-height: 1.6;

}
.contactcontent1 {
  background-color: white;
  padding: 0px;
  font-size: 16px;
	font-family:Roboto;font-weight:300;
	line-height: 200%;

}
.cc1{
border-right: 1px solid #F69306;padding-right:40px;padding-left:20px;
}
.cc2{
padding-left:40px;padding-right:20px;
}
.contacttextbox {
    width: 100%;
    font-family: Roboto;
    font-size: 16px;
    font-weight: 300;
    min-height: 10px;
    padding: 8px 12px;
    color: #555;
    vertical-align: middle;
    border: 1px solid #ccc;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    background-color: #F6F6F6;
}
@media screen and (max-width: 720px) {
	.contact{padding:20px;}
	.contactcolumn {float:none; width:100%; padding:20px; border:none;}
	.contactmain{padding: 20px;margin:auto;}
	.cc1{padding:20px;border:none:}
	.cc{padding:20px;border:none:}
	.contactcontent{width:100%;}
	.contactcontent img{max-width:100%;}
}


.portfoliolistmain {
  max-width: 1172px;
    margin:auto;
  /*padding: 20px;*/
}
.portfoliolistrow {
  /*margin: 10px -10px;*/
    margin: 10px -10px 60px -10px;
}
.portfoliolistrow:after {
  content: "";
  display: table;
  clear: both;
}
.portfoliolistcolumn
{
	float: left;
	width: 33.33%;
	padding: 0px 10px 20px 10px;
}

  @media screen and (max-width: 720px) {
	.portfoliolistcolumn {float:none; width:100%; }
}

.eventslistmain {
  max-width: 1172px;
    margin:auto;
  /*padding: 20px;*/
}
.eventslistrow {
  /*margin: 10px -10px;*/
    margin: 10px -10px 60px -10px;
}
.eventslistrow:after {
  content: "";
  display: table;
  clear: both;
}
.eventslistcolumn
{
	float: left;
	width: 25%;
	padding: 0px 10px 20px 10px;
}
.eventslistcolumn img{
	border: 1px solid #e9e9e9;
}
.eventslistcontent {
	    background-color:#e9e9e9;
  padding: 0px;
  font-size:16px;
  font-family:Roboto;
  font-weight:300;
}
.eventslistcontenttext {
    background-color:#e9e9e9;
  font-size:14px;
  font-family:Roboto;
  font-weight:300;
  	/*top right bottom left*/
  padding: 10px 10px 10px 10px;
  min-height:70px;
  
}
  @media screen and (max-width: 720px) {
	.eventslistcolumn {float:none; width:100%; }
}
.medialibrarylistmain {
  max-width: 1172px;
    margin:auto;
  /*padding: 20px;*/
}
.medialibrarylistrow {
  /*margin: 10px -10px;*/
    margin: 10px -10px 0px -10px;
}
.medialibrarylistrow:after {
  content: "";
  display: table;
  clear: both;
}
.medialibrarylistcolumn
{
	float: left;
	width: 50%;
	padding: 0px 10px 40px 10px;
}
.medialibrarylistcontent {
	    background-color:#e9e9e9;
  padding: 0px;
  font-size:16px;
  font-family:Roboto;
  font-weight:300;
}
.medialibrarylistcontenttext {
    background-color:#e9e9e9;
  font-size:14px;
  font-family:Roboto;
  font-weight:300;
  	/*top right bottom left*/
  padding: 10px 10px 10px 10px;
  min-height:60px;
  
}
  @media screen and (max-width: 720px) {
	.medialibrarylistcolumn {float:none; width:100%; }
}
.medialibrarylistcolumn iframe{
	border: 1px solid #e9e9e9;
}

/* Used Products*/
.usedproductslistmain {
  max-width: 1172px;
    margin:auto;
  /*padding: 20px;*/
}
.usedproductslistrow {
  /*margin: 10px -10px;*/
    margin: 10px -10px 60px -10px;
}
.usedproductslistrow:after {
  content: "";
  display: table;
  clear: both;
}
.usedproductslistcolumn
{
	float: left;
	width: 14.28%;
	padding: 0px 10px 40px 10px;
}
.usedproductslistcontent {
	    background-color:#e9e9e9;
  padding: 0px;
  font-size:16px;
  font-family:Roboto;
  font-weight:300;
}
.usedproductslistcontenttext {
    background-color:#e9e9e9;
  font-size:14px;
  font-family:Roboto;
  font-weight:300;
  	/*top right bottom left*/
  padding: 10px 10px 10px 10px;
  min-height:60px;
  
}
  @media screen and (max-width: 720px) {
	.usedproductslistcolumn {float:none; width:100%; }
}
.usedproductslistcolumn img{
	border: 1px solid #e9e9e9;
}

/*Product Detailed Page*/
.pdpmain {
    max-width: 1172px;
  margin: auto;
}
.pdprow {
    margin: 10px 10px;
}
/* Create two equal columns that floats next to each other */
.pdpcolumn1 {
    width: 35%;
    float: left;
    padding-right: 20px;
    padding-left: 20px;
}
.pdpcolumn2 {
    width: 65%;
    display: inline-block;
    font-weight: 300;
    font-family: Roboto;
    line-height: 1.33;
    letter-spacing: 0.25px;
    padding-left: 20px;
    padding-right: 20px;
    float: left;
}
/* Clear floats after pdpmain 02-08-2022*/
.pdpmain:after {
    content: '\A';
    white-space: pre;
    display: table;
    clear: both;
}
/* Clear floats after rows */
.pdprow:after {
    content: '\A';
    white-space: pre;
    display: table;
    clear: both;
}
/* Content */
.pdpcontent {
    font-weight: 300;
    font-family: Roboto;
    line-height: 1.33;
    letter-spacing: 0.25px;
}

@media screen and (max-width: 720px) {
    .pdpcolumn1 {
        float: none;
        width: 100%;
        padding: 20px;
        border: none;
    }
    .pdpcolumn2 {
        float: none;
        width: 100%;
        padding: 20px;
        border: none;
    }

    .pdpmain {
        padding: 20px;
        margin: auto;
    }
    .pdpcontent {
        width: 100%;
    }
}
.contents-productdetailedpageheader{
width:100%;border-top: 1px solid #e9e9e9;
border-bottom: 1px solid #e9e9e9;color:black;
/*background-color:#303030;color:white;*/
}
.contents.productdetailedpage{
padding-right:20px;padding-top:10px;padding-bottom:10px;padding-left:20px;color:#white;
  font-weight:300;
  letter-spacing: 0.25px;
  margin:auto;
}
.productdetailedpage a{
	text-decoration:none;color:black;
}
.productdetailedpage a:hover{
	color:#F69306;
}
.productimage img{
	border: 1px solid #e9e9e9;
}
.contents.productdetailedpagesubheader{
	padding-left:20px;padding-top:20px;font-size:24px;
	
	font-weight:100;font-family:Roboto;line-height:1.33;
}
.contents1.productdetailedpagesubheader{
	padding-left:20px;padding-top:20px;font-size:24px;
	
	font-weight:100;font-family:Roboto;line-height:1.33;max-width:1172px;margin:auto;
}
.productdetailedpageheaderleft{
width: 35%;
float:left;
padding-right:20px;padding-left:20px;
}
.productdetailedpageheaderleft:after{
    content:"";
    display:table;
    clear:both;
}
.productdetailedpageheaderright{
width:65%;
display:inline-block;
font-weight:300;font-family:Roboto;line-height:1.33;
  letter-spacing: 0.25px;
  padding-left:20px;padding-right:20px;
  float:left;
}
.productdetailedpageheaderright:after {
    content: "";
    display: table;
    clear: both;
}
b{
	font-family:Roboto;font-weight:500;
}
.productdetailedpagedownloads{
}
.productdetailedpagedownloads a{
	text-decoration:none;color:#000;
}
.productdetailedpagedownloads a:hover{
	color:#F69306;
}
.productdetailedpagetab{
	overflow-x:auto;margin-top:20px;
}
.productdetailedpagetab:before{
    content:"";
    display:block;
    clear:both;
}
/*table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}*/
.productdetailedpagetab table {
    border-collapse: collapse;
    width: 100%;
}

.productdetailedpagetab th, td, thead {
    text-align: left;
    padding: 8px;
    font-size: 16px;
	font-family:Roboto;font-weight:300;
}
.productdetailedpagetab td a {
        text-decoration: none;
        color: #000;
        font-size: 16px;
		font-family:Roboto;font-weight:300;
    }
.productdetailedpagetab td a:hover{
	color:#F69306;
}
.productdetailedpagetab th{background-color: #f2f2f2;border-top: 1px solid #000;}
.productdetailedpagetab tr{border-bottom: 1px solid #000;}
/*tr:nth-child(even) {background-color: #f2f2f2;}*/
@media screen and (max-width: 720px) {
	.productdetailedpageheaderleft{float:none; width:100%;padding:10px;}
	.productdetailedpageheaderright{float:none; width:100%;padding:10px;}
  }
  
  /*Search*/
.contents-searchheader{
width:100%;border-top: 1px solid #e9e9e9;
}
.contents.search{
padding-right:20px;padding-top:20px;font-size:25px; color: #F69306;
}
/* Product Main Page */
.searchmain {
  /*max-width: 1172px;
  margin: auto;*/
    margin:0px 50px 0px 50px;

}

.searchmain h1 {
  font-size: 25px;
  word-break: break-all;
}

.searchrow {
  margin: 10px 10px;
}

/* Add padding BETWEEN each column */
/*.searchrow,
.searchrow > .searchcolumn {
  padding: 3px;
}*/

/* Create two equal columns that floats next to each other */
.searchcolumn {
  float: left;
  width: 50%;
}
.sc1{
border-right: 1px solid #F69306;
}
.sc2{
padding-left:20px;
}
  @media screen and (max-width: 720px) {
	.searchcolumn {float:none; width:100%; padding:20px;margin:auto;}
	.searchmain{padding: 20px;}
	.sc1{border:none;}
}
/* Clear floats after rows */ 
.searchrow:after {
  content: "";
  display: table;
  clear: both;
}

/* Content */
.searchcontent {
  background-color: white;
  padding: 0px;
  font-size:14px;
}
/*Back To Top*/
#BackToTopBtn {
  display: none;
  position: fixed;
  bottom: 60px;
  right: 20px;
  z-index: 99;
  font-size: 24px;
  border: none;
  outline: none;
  background-color: #3e3e3e;
  color: white;
  cursor: pointer;
  padding: 5px 5px 5px 5px;
  border-radius: 4px;
}

#BackToTopBtn:hover {
  background-color: rgba(246,147,6,0.5);
}

/*Popup Model*/ /* Login Screen and Search*/
/* Full-width input fields */
/*input[type=text], input[type=password] {*/
.modeltext, .modelpwd {
    width: 100%;
    padding: 12px;
    margin: 0 0 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
    font-family: Roboto;
    font-weight: 300;
	background-color:rgba(255,255,255,0.25);
}

/* Set a style for all buttons */
.modelbutton {
    /*background-color: #FFFFFF;*/
	background-color:rgba(255,255,255,0.25);
    /*border: none;*/
	border: 1px solid #ccc;
    /*
  color: white;
  padding: 14px 20px;
  margin: 8px 0;

  cursor: pointer;
  width: 100%;*/
}

    .modelbutton:hover {
        /* opacity: 0.8;*/
    }

.modelcontainer {
    padding: 16px;
}

.psw {
    font-family: Roboto;
    font-weight: 300;
}

    .psw a {
        text-decoration: none;
        color: #000000;
    }

        .psw a:hover {
            color: #F69306;
        }
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    /*background-color: rgb(0,0,0); */ /* Fallback color */
    /*background-color: rgba(0,0,0,0.4);*/ /* Black w/ opacity */
    padding-top: 60px;
}

/* Modal Content/Box */
.modal-content {
    /*background-color: #fefefe;*/
	background-color:rgba(255,255,255,0.75);
    margin: 10px 20px auto auto; /* 5% from the top, 15% from the bottom and centered */
    border: 1px solid #e9e9e9;
    width: 80%; /* Could be more or less, depending on screen size */
    max-width: 300px;
}


/* Add Zoom Animation */
.animate {
    -webkit-animation: animatezoom 0.6s;
    animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
    from {
        -webkit-transform: scale(0)
    }

    to {
        -webkit-transform: scale(1)
    }
}

@keyframes animatezoom {
    from {
        transform: scale(0)
    }

    to {
        transform: scale(1)
    }
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
}