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

#myBtn:hover {
  background-color: #cf5fc5;
}
/*
table {
  border: 1px solid #ccc;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;
  table-layout: fixed;
}

table caption {
  font-size: 1.5em;
  margin: .5em 0 .75em;
}

table tr {

  border: 1px solid #ddd;
  padding: .35em;
}

table th,
table td {
  padding: .625em;
  text-align: center;
}

table th {
  font-size: .85em;
  letter-spacing: .1em;
  text-transform: uppercase;
}

@media screen and (max-width: 600px) {
  table {
    border: 0;
  }

  table caption {
    font-size: 1.3em;
  }

  table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }

  table tr {
    border-bottom: 3px solid #ddd;
    display: block;
    margin-bottom: .625em;
  }

  table td {
    border-bottom: 1px solid #ddd;
    display: block;
    font-size: .8em;
    text-align: right;
  }

  table td::before {
    /*
    * aria-label has no advantage, it won't be read inside a table
    content: attr(aria-label);
    */
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }

  table td:last-child {
    border-bottom: 0;
  }
}

	@media (max-width: 800px) {
		table td {
	    border-bottom: 1px solid #ddd;
	    display: block;


	  }


	}

*/

/*
img.ri
{
	position: absolute;
	max-width: 80%;
	top: 10%;
	left: 10%;

}

img.ri:empty
{
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

@media screen and (orientation: portrait) {
  img.ri { max-width:100%; }
}

@media screen and (orientation: landscape) {
  img.ri { max-height: 100%; }
}
*/
.story-list {
  margin: 0;
  padding-left: auto;
}

.story-list li {
  position: relative;
  list-style-type: none;
  padding-left: 2.5rem;
  margin-bottom: 0.5rem;
}

.story-list li:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: -2px;
    width: 5px;
    height: 11px;
    border-width: 0 2px 2px 0;
    border-style: solid;
    border-color: #bf58b5;
    transform-origin: bottom left;
    transform: rotate(45deg);
}


#thestory{
  color:#977F71;
  letter-spacing: 1px;
  font-family:Futura, "Trebuchet MS", Arial, sans-serif;;
  font-weight:400;
  line-height:1.8em;
	-webkit-text-stroke-width: .1px;
    -webkit-text-stroke-color: #000000;
}

#catalog{
  color:#977F71;
  letter-spacing: 1px;
  font-family:Futura, "Trebuchet MS", Arial, sans-serif;;
  font-weight:400;
  line-height:1.8em;
	-webkit-text-stroke-width: .1px;
    -webkit-text-stroke-color: #000000;
}

#table {
	color:#f4511e;
  letter-spacing: 1px;
  font-family:Futura, "Trebuchet MS", Arial, sans-serif;;
}

#story {
  max-width: auto;
  margin-left: auto;
  margin-right: auto;
  text-align:left;
  font-size: 20px;
  font-family:Futura, "Trebuchet MS", Arial, sans-serif;;
  font-weight:400;
  line-height:1.8em;
}


.top1 {
  position:relative;

  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  /*
    fixed = parallax
    scroll = normal
  */
  background-attachment:fixed;
}


.top1{
  background-image:url('../img/background_color.png');
	min-height:100%;
	min-width: auto;

}
.centerinfo {
  position: absolute;
 top: 50%;
 left: 50%;
 -ms-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
}

#headertext1{
-webkit-text-stroke-width: 3px;
 -webkit-text-stroke-color: black;
 -webkit-text-fill-color: white;

  text-align: center;
  font-size:67px;
  font-family:Futura, "Trebuchet MS", Arial, sans-serif;;
  font-weight:200;
	text-shadow:
		0 -1px 0 #fff,
		0 1px 0 #2e2e2e,
		0 2px 0 #2c2c2c,
		0 3px 0 #2a2a2a,
		0 4px 0 #282828,
		0 5px 0 #262626,
		0 6px 0 #242424,
		0 7px 0 #222,
		0 8px 0 #202020,

		0 22px 15px rgba(0, 0, 0, 0.9);

}

#headertext2{

 -webkit-text-fill-color: white;

  text-align: center;
  letter-spacing: 1px;

  font-size:20px;
  font-family:Futura, "Trebuchet MS", Arial, sans-serif;;
  font-weight:400;
	text-shadow:
		0 -1px 0 #fff,
		0 1px 0 #2e2e2e,
		0 2px 0 #2c2c2c,
		0 3px 0 #2a2a2a,
		0 4px 0 #282828,
		0 5px 0 #262626,
		0 6px 0 #242424,
		0 7px 0 #222,
		0 8px 0 #202020,

		0 22px 15px rgba(0, 0, 0, 0.9);


}

#about p{

  text-indent: 50px;
   text-align: justify;
   letter-spacing: 1px;
   font-size: 20px;

}

#centertext {
  color: black;
  width: 80%;
}

#centertextb {
  color: black;
  width: 80%;
}

@media (max-width: 800px) {
	#centertext {
	  color: black;
	  width: 100%;

	}
}
	@media (max-width: 800px) {
		#centertextb {
		  color: white;
		  width: 100%;
		  background: rgb(244 81 30 / .8);
		}

	}

  #centerbuttons {
  position: center;
}

/*
@media(min-width:568px){
  .responsiveimg {
    width: 100%;
    height: auto;
}
*/
.responsiveimg {
  width: 50%;
  height: auto;
}

#chart {
	width: auto;
	height: auto;
}

@media (max-width: 800px) {
	#chart {
		width: 100%;
		height: auto;
	}}

.responsiveimgb {
  width: 50%;
  padding-top: 20%;
  height: auto;
}

	@media (max-width: 800px) {
		.responsiveimg {
		  width: 100%;
		  height: auto;
		}
	}

	@media (max-width: 800px) {
		.responsiveimgb {
		  width: 100%;
		  padding-top: 20%;
		  height: auto;
		}
	}

.collapsibleb {
  background-color: #f4511e;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 50%;
  border: none;
  text-align: center;
  outline: none;
  font-size: 15px;
}



.collapsibleb:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 10px;

}

@media (max-width: 800px) {
  .collapsibleb {
    background-color: #f4511e;
    color: white;
    cursor: pointer;
    padding: 18px;
    width: auto;
    border: none;
    text-align: center;
    outline: none;
    font-size: 15px;
  }}

@media (max-width: 800px) {
  .collapsibleb:after {
    content: '\002B';
    color: white;
    font-weight: bold;
    float: right;
    margin-left: 10px;

  }
}


@media (max-width: 800px) {
  .contentb {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    background-color: #f1f1f1;
    opacity: 0.8;
    margin: auto;
     width: 100%;

  }}


.contentb {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
  opacity: 0.8;
  margin: auto;
   width: 50%;

}

@media (max-width: 800px) {
  .contentb {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    background-color: #f1f1f1;
    opacity: 0.8;
    margin: auto;
     width: 100%;

  }}

.contentb p{
    padding: 10px;
}

#buttonstart {
text-align: center;
}
#introbutton {
  position: center;
}

.button {
  border-radius: 4px;
  background-color: #977F71;
  border: none;
  color: #FFFFFF;
  text-align: center;
  /*font-size: 20px;*/
  padding: 5px;

  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.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: 20px;
}

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

ul {
    padding: 0;
    list-style-type: none;
}


#name {
	background-color: #fff;
	 color: #000;
	 width: 100%;
	 height: 20px;
}
#email {
	background-color: #fff;
	 color: #000;
	 width: 100%;
	 height:20px;
}

#message {
	background-color: #fff;
	 color: #000;
	 width: 100%;
	 height: 100px;
}

form {
	margin-top: 50px;
	margin: auto;
	width: 100%;
	margin: 47px auto;
	max-width:580px;
}

#contact{
	padding: 30px 50px 30px 50px;
}
#contact span{
	color: #ffffff;
}

#comment_form{
	margin: 50px auto 50px auto;
	width: 100%;
}

#submit{
	width: 50%;
	height: 45px;
	color: #f4511e;
}

video::-webkit-media-controls {
	overflow: hidden !important
}

video::-webkit-media-controls-enclosure {
	width: calc(100% + 32px);
	margin-left: auto;
}

body{
	overflow-x: hidden;
}

body, html{
	height:100%;
	margin:0;
	font-size:16px;
	font-family:Futura, "Trebuchet MS", Arial, sans-serif;;
	font-weight:400;
	line-height:1.8em;
	color:#666;
}

#about p{
	padding: 10px;
}

.navfloat{

}

.pimg2, .pimg3{
  position:relative;
  opacity:0.70;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  /*
    fixed = parallax
    scroll = normal
  */
  background-attachment:fixed;
}

.pimg1 {
  position:relative;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  /*
    fixed = parallax
    scroll = normal
  */
  background-attachment:fixed;
}

.pimg1{
  background-image:url('../img/background_main.png');
background-size: cover;
  min-height:100%;
 	min-width: auto;
}

.pimg1b{
  background-image:url('../img/grey.png');
	min-height:100%;
	min-width: auto;
}

.threefivestory{
  background-image:url('../img/background2.png');
	min-height:100%;
	min-width: auto;
}

.catalog{
  background-image:url('../img/background2.png');
	min-height:100%;
	min-width: auto;
}
.pimg2{
  background-image:url('../img/screenup.gif');
  min-height:400px;
}

.pimg3{
  background-image:url('../img/tile.jpg');
  min-height:400px;
}

.section{
  text-align:center;
  padding:50px 80px;

}

.section-light{
 background-image:url('../img/background_main.png');
	min-height:100%;
	min-width: auto;
  color:#080808;
}

.section-story{
 background-image:url('../img/background_main.png');
 background-size: cover;
   min-height:100%;
   min-width: auto;
  color:#080808;
}

.section-ourservices{
 background-image:url('../img/background_main.png');
 background-size: cover;
   min-height:50%;
   min-width: auto;
  color:#080808;
}

.section-catalog{
 background-image:url('../img/background_main.png');
 background-size: cover;
   min-height:50%;
   min-width: auto;
  color:#080808;
}

.section-ourwork{
 background-image:url('../img/background_main.png');
 background-size: cover;
   min-height:50%;
   min-width: auto;
  color:#080808;
}

.section-lightb{
  background-image:url('../img/background_main.png');
  background-size: cover;
  min-height:100%;
  min-width: auto;



  color:white;
}

.top{
 background-image:url('../img/background_main.jpg');
	min-height:100%;
	min-width: auto;
  color:#080808;
}

.section threefivestory{
 background-image:url('../img/background_main.png');
	min-height:100%;
	min-width: auto;
  color:#080808;
}

.section catalog{
 background-image:url('../img/background_main.png');
	min-height:100%;
	min-width: auto;
  color:#080808;
}

.section-dark{
  background-color:#191919;
  color:#f00;
}

.section-contact{
 background-image:url('../img/background_main.png');
	min-height:50%;
	min-width: auto;
  color:#000000ab;
}


.ptext{
  position:absolute;
  top:15%;
  width:100%;
  text-align:center;
  color:#000;
  font-size:25px;
  letter-spacing:8px;
  text-transform:uppercase;
}

.ptext .border{
  background-color:#111;
  color:#fff;
  padding:20px;
}

.ptext .border.trans{
  background-color:transparent;
}

#footer {
    text-align: center;
    /* max-height: 15px; */
    color: #636363;
    background-image:url('../img/background_main.png');
    padding: 8px 0 8px 0;
}

#video {
	top: 50%;
	left: 50%;
	position:fixed;
	background-position:center;
	background-size:cover;
	background-repeat:no-repeat;
}

#pan {
	width: 250px;
}

video {
	width: 75%;
	height: au;
	padding-bottom: 10px;
}


img.logo{
	position: absolute;
	max-width: 80%;
	top: 10%;
	left: 10%;

}

img.logo:empty{
	top: 20%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}



img.slogan{
	position: absolute;
	max-width: 80%;
	top: 10%;
	left: 10%;
}

img.slogan:empty{
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);}



#centercontent {
  margin: 0;
  width: 40%;
    position: absolute;
    top: 50%;
    left: 50%;

    -webkit-transform: translate(-50%, -50%);
  	-moz-transform: translate(-50%, -50%);
  	-ms-transform: translate(-50%, -50%);
  	-o-transform: translate(-50%, -50%);
  	transform: translate(-50%, -50%); }

	@media (max-width: 800px) {
		#centercontent {
		  margin: 0;
		  width: 100%;
		    position: absolute;
		    top: 50%;
		    left: 50%;

		    -webkit-transform: translate(-50%, -50%);
		  	-moz-transform: translate(-50%, -50%);
		  	-ms-transform: translate(-50%, -50%);
		  	-o-transform: translate(-50%, -50%);
		  	transform: translate(-50%, -50%); }

	}

/*--Nav--*/
.topnav {
  overflow: hidden;
  background-color: #bab5b5;
	opacity: 0.9;
	position: fixed;
	z-index: 9999;
	width: 100%;
}

.topnav a {
  float: left;
  display: block;
	color: #977F71;
  text-align: center;
  padding: 15px 16px;
  text-decoration: none;
  font-size: 15px;
}

.topnav a:hover {
  background-color: litegrey;
  color: #050505;
	text-decoration: none;
}

.active {
  background-color: litegrey;
  color: white;
  text-decoration: none;
}

.topnav .icon {
  display: none;
}

@media(max-width:568px){
	.pimg1, .pimg1b, .pimg2, .pimg3{
		background-attachment:scroll;
  }
}

@media screen and (orientation: portrait) {
  img.logo { max-width: 80%; }
}

@media screen and (orientation: portrait) {
  img.logoomtrp { max-width: 100%; }
}
@media screen and (orientation: landscape) {
  img.logo { max-height: 80%; }
}

@media screen and (max-width: 600px) {
	.topnav a:not(:first-child){
		display: none;
	}
	.topnav a.icon{
		float: right;
		display: block;
	}
}

@media screen and (max-width: 600px) {
	form .submit {
		margin-top: 50px;
		width: 50%;
		font-size: 10px;
	}

	.form-control {
		min-width: 97%;
		padding: 10px;
	}

	#about,#sample{
		padding: 50px 45px;
	}


	.topnav.responsive{
		position: fixed;
	}

	.topnav.responsive .icon {
		right: 0;
		top: 0;
	}

	.topnav.responsive a {
		float: none;
		display: block;
		text-align: left;
		z-index: 9999;
	}

	a{
		color: #ffffff;
	}

	/* unvisited link */
	a:link {
		color: #ffffff;
	}

	a:click{
		color: white;
	}

	/* visited link */
	a:visited {

	}

	/* mouse over link */
	a:hover {
		color: #ffffff;
	}

	/* selected link */
	a:active {
		color: white;
	}

	a:link {
		text-decoration: none;
	}

	a:visited {
		text-decoration: none;
	}

	a:hover {
		text-decoration: none;
	}

	a:active {
		text-decoration: none;
	}



	.topnav a {
		color: #977F71;
	}

	.footer{
		background-color: blue;
		opacity: 0.7;
		position: fixed;
		z-index: 9999;
		width: 100%;
	}

	.btn-success{
		color: #fff;
		background-color: #a94442;
		/* border-color: #1400ff; */
	}

	.form-control{
		max-width: 40%;
		background: transparent;
		border: none;
		outline: none;
		border-bottom: 1px solid gray;
		color: black;
		font-size: 18px;
		margin-bottom: 16px;
	}

	input{
		height: 45px;
	}

	form .submit{
		background: #ff5722;
		border-color: transparent;
		color: white;
		font-size: 20px;
		font-weight: bold;
		letter-spacing: 2ps;
		height: 50px;
		martin-top: 20px;
	}

	form .submit:hover{
		background-color: #f44336;
		cursor: pointer;
	}
}

.card {
  background-color: litegrey;
  color: white;


}

.cards {
  max-width: 100%;
  margin: 0 auto;
  display: grid;
  grid-gap: 1rem;
  padding: 20%;
  padding-left: 20%; }

}

/* Screen larger than 600px? 2 column */
@media (min-width: 600px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}

/* Screen larger than 900px? 3 columns */
@media (min-width: 900px) {
  .cards { grid-template-columns: repeat(5, 1fr); }
}


{
  box-sizing: border-box;
}

.flex-container {
  display: flex;
  flex-direction: row;
  font-size: 30px;
  text-align: center;
}

.flex-item-left {
  background-color: #f1f1f1;
  padding: 10px;
  flex: 50%;
}

.flex-item-right {
  background-color: dodgerblue;
  padding: 10px;
  flex: 50%;
}

/* Responsive layout - makes a one column-layout instead of two-column layout */
@media (max-width: 800px) {
  .flex-container {
    flex-direction: column;
  }

.responsive_largelogo {
  width: 80%;
  height: auto;
}