@charset "utf-8";
/* CSS Document */

body,html {
	font-family: 'Open Sans', sans-serif;
	margin:0px;
	line-height:auto;
}
strong { font-weight: bold; }
#topnav {
	width:100%;
	display:block;
	min-height: 100px;
	background-color:#FFF;
	padding: 20px 70px;
}
#topcolleft {
	display: block;
	float:left;
	color: #000000;
	width: 50%;
	margin-right:0px;
	font-size: 24px;
	font-weight: 500;
	text-transform: uppercase;
	
}
#topcolleft img {
	width:60%;
	padding-bottom:20px;
}
#topcolright {
	display: flex;
    align-content: flex-end;
    width: 48%;
    float: right;
    max-height: 50px;
    justify-content: flex-end;
}
#topcolright img {
	    max-height: 30px;
    margin-left: 20px;
    margin-top: 10px;
}
#ct, #st, #in, #aes, #mat, #col, #epd, #noa {
font-size:20px;
	display:none;
	height:30px;
	margin-right:0.5%;
	max-width:9.5%;
	min-height: 100px;
	opacity: 1;
	animation-name: fadeInOpacity;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-duration: 6s;

}
#ct-show, #st-show, #in-show, #aes-show, #mat-show, #col-show, #epd-show, #noa-show, #sd-show, #fb-show {
    font-size: 12px;
    margin-right: 0.5%;
    max-width: 100%;
    min-height: 30px;
    opacity: 1;
    animation-name: fadeInOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 1s;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
	z-index:1000;
}
#loadershow {
	background-image: url("loader.gif");
	z-index:-1000;
	min-height: 200px;
}
#ct-noinfo, #st-noinfo, #in-noinfo, #aes-noinfo, #mat-noinfo, #col-noinfo, #epd-noinfo, #noa-noinfo, #sd-noinfo, fb-noinfo {
    font-size: 12px;
    margin-right: 0.5%;
    max-width: 100%;
    min-height: 30px;
    opacity: 1;
    animation-name: fadeInOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 1s;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;

}
@keyframes fadeInOpacity {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
#showcm, #showst, #showin, #showct, #showaes, #showmat, #showcol, #showepd, #shownoa, #showsd, #showsave {
font-size:20px;
	display:block;
	margin-right:30px;
	min-width:100%;
	min-height: 30px;

}

#loader {
	z-index:9999;
	background-color: #f0f0f0;
    background:url("https://www.stocorp.com/wall-selector-wizard/loading.gif") no-repeat center center rgba(0,0,0,0)
}
#cm , #ae {
	font-size:20px;
	display:block;
	float:left;
	height:100px;
	margin-right:0.5%;
	max-width:9.5%;
	min-height: 30px;
	opacity: 1;
	animation-name: fadeInOpacity;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-duration: 2s;
	
}
#cm-show , #ae-show {
	font-size:14px;
	margin-right:0.5%;
	max-width:100%;
	min-height: 30px;
	opacity: 1;
	animation-name: fadeInOpacity;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-duration: 1s;
	display: flex;
    justify-content: center;
	
}







input[type="radio"] {
  /* Add if not using autoprefixer */
	-webkit-appearance: none !important;
   -moz-appearance:    none !important;
   appearance:         none !important;
  /* For iOS < 15 to remove gradient background */
  background-color: #fff;
  /* Not removed via appearance */
  margin: 0;
}
input[type="checkbox"] {
  /* Add if not using autoprefixer */
  -webkit-appearance: none !important;
   -moz-appearance:    none !important;
   appearance:         none !important;
  /* For iOS < 15 to remove gradient background */
  background-color: #fff;
  /* Not removed via appearance */
  margin: 0;
}
/*label {
    font-weight: 100;
    display: block;
    width: 20%;
    padding: 15px 20px;
    float: left;
    margin-right: 20px;
    border: 3px solid #F7A600;
    text-align: center;
    border-radius: 30px;
    margin-bottom: 10px;
	background-color:#fff;
	transition: all 0.6s ease;
	font-size:1.1em;
	font-weight:700;
	font-family: 'Open Sans', sans-serif;
}*/

label {
font-weight: 100;
    display: block;
    width: 30%;
    padding: 15px 20px;
    float: left;
    margin-right: 10px;
    border: 3px solid #F7A600;
    text-align: center;
    border-radius: 30px;
    margin-bottom: 10px;
    background-color: #fff;
    transition: all 0.6s ease;
    font-size: 12px;
    font-weight: 700;
    font-family: 'Open Sans', sans-serif;
}


label:hover {
       background-color:#AFB8C7;
	border: 3px solid #F18700;
	transition: all 0.6s ease;
	transform: scale(1.1);
}
input[type="radio"]:checked + label {
  font-weight: 300;
    display: block;
    width: 30%;
    border: 3px solid #FFD700;
	background-color: #3E3E3E;
	color: #FFFFFF;
    padding: 15px 20px;
    text-align: center;
    border-radius: 30px;
	margin-bottom: 10px;
	-webkit-appearance: none !important;
   -moz-appearance:    none !important;
   appearance:         none !important;
}
input[type="checkbox"]:checked + label {
  font-weight: 300;
    display: block;
    width: 30%;
    border: 3px solid #FFD700;
	background-color: #3E3E3E;
	color: #FFFFFF;
    padding: 15px 20px;
    text-align: center;
    border-radius: 30px;
	margin-bottom: 10px;
}
#ar0, #ar1, #ar2 {
	    display: block;
    width: 30px;
    float: left;
    margin-right: -10px;
    margin-left: -20px;
    margin-top: 5px;
}	
#ar0 img, #ar1 img, #ar2 img {
	width:15px;
	
	}
#start {
	font-size:20px;
	display:block;
	float:left;
	height:30px;

	margin-right:10px;
}
#ctsel, #cmsel, #stsel, #insel, #aessel, #matsel, #colsel, #epdsel, #noasel {
	display:block;
	font-size:14px;	
	margin-right:30px;
	width: 100%;
	min-width: 100%;
	background-color:#BBBBBB;
	color: #000000;
	font-weight:300;
	padding: 5px 2px;
	
}
#arrow {
	float:left;
	font-size: 30px;
	margin-left:5px;
	margin-right: 5px;
}
#selected0, #selected1, #selected2, #selected3, #selected4, #selected5, #selected6, #selected7, #selected8 {
	border:none;
	display:block;
	font-size:14px;
	line-height: 20px;
}
#submitbtn {
	display: block;
    width: 218px;
    background-color: #FFFFFF;
    border: 1px solid #000000;
    padding: 5px 3px;
    margin-top: 20px;
    border-radius: 30px;
}
#centercontent {
	    display: none;
    font-size: 14px;
    line-height: 20px;
    color: #666666;
    width: 100%;
    text-align: center;
  
    flex-wrap: nowrap;
  
}
#wallsubmittals {
	
	display: inline-flex;
    width: 100%;
    margin: none;
    min-height: auto;
    background-color: #FFF;
    clear: both;
    /* max-height: 30vh; */
    /* overflow: scroll; */
    flex-direction: row;
    align-content: flex-start;
    flex-wrap: wrap;
    justify-content: center;
    /* max-width: 100%; */
    align-items: center;
	animation: fadeIn 6s;

}
#resetbtn {
        display: block;
    width: 70%;
    background-color: #FFFFFF;
    border: 4px solid #FFD700;
    padding: 20px 5px;
    margin-top: 20px;
    text-align: center;
    border-radius: 75px;
    transition: 0.6s ease;
    margin-right: auto;
    margin-left: auto;
    font-size: 1.5em;
    font-weight: 700;
    margin-bottom: 20px;
}
#resetbtn:hover { 
background-color: #ABABAB;
	transition: 0.6s ease;
}
#getsaveformbutton {
	display:block;
	width:100%;
	background-color:#FFFFFF;
	border: 1px solid #000000;
	padding: 10px 5px;
	margin-top: 20px;
}
#nextbtn {
	display:none;
	width:150px;
}
#header {
	display:none;
	font-size:13px;
	color:#333333;
	margin-bottom: 10px;
	font-weight:700;
	min-height: 30px
}
#resultslist {
	background-color:#FFFFFF;
	color:#333333;
	display:block;
}
#showvid {
	width: 100%;
	padding: 50px 20px 20px 70px;
}
#showvid-video, #showvid-video2, #showvid-video3, #showvid-video4, #showvid-video5, #showvid-video6, #showvid-video7, #showvid-video8, #showvid-video9, #showvid-video10 {
    height: auto;
    width: 100%;
	/*float:left;*/
    z-index: -100;
	margin:0px;
    background: url(../img/index-image.jpg) no-repeat center center;
    background-size: cover;

}
#leftcol {
	width:50%;
	float:left;
	min-height: 70vh;
	background-color:#617489;
		background-image: url("https://www.stocorp.com/wall-selector-wizard/assets/img/learn-more-bg-pattern.png");
	background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover;
	display: flex;
    align-items: top;
	
}
#leftcolmain {
	width:50%;
	float:left;
	min-height: 75vh;
	background-color:#617489;
	padding:20px 20px 20px 70px;
	background-image: url("https://www.stocorp.com/wall-selector-wizard/assets/img/learn-more-bg-pattern.png");
	background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover;
	
}
#rightcol {
	width:0%;
	float:right;
	padding:10px;
	background-color:#f0f0f0;
	
}
#centercolumn {
    width: 50%;
    float: left;
    padding: 20px 0px 0px 30px;
	margin-left:30px;
	display: flex;
    align-items: center;
    flex-direction: column;
	
}
#centercolumnpt {
    width: 50%;
    float: left;
    padding: 20px 0px 0px 30px;
	margin-left:30px;
	
}
#saveform {
	display:block;
}
#getsaveform {
	display: block;
}
.savenum {
	font-weight: 700;
    text-align: center;
    display: block;
    padding: 5px;
    border: 1px solid #A8A8A8;
    border-radius: 60px;
    background-color: #ffffff;;
    color: #787878;
    cursor: pointer;
    font-size: 10px;
    line-height: 10px;
	width:30px;
}
.savename {
	display:block;
	padding:5px;
	border:1px solid #A8A8A8;
	border-radius: 30px;
	width: 100%;
	font-size:12px;
	text-align:center;
	line-height:14px;
	transition: 0.6s ease;
}
.savename:hover {
	background-color:#9E9E9E;
	transition: 0.6s ease;
}
.savedate {
	display:block;
	font-size: 10px;
}
.delete {
	font-weight: 700;
    text-align: center;
    display: block;
    padding: 5px;
    border: 1px solid #A8A8A8;
    border-radius: 60px;
    background-color: rgba(104,0,1,1.00);
    color: white;
    cursor: pointer;
    font-size: 10px;
    line-height: 10px;
}
.delete hover {
	color: grey;
	cursor: pointer;
}
#savelist {
	width:100%;
	margin-top:30px;
	clear:both;
}
.savelist {
	display:table;
	width:100%;
}
.savelist tr {
	font-size:12px;
	line-height:14px;
}
.savelist td {
	font-weight: 300;
	text-align:left;
	padding:5px;
	color: #767676;
	text-decoration:none;
	font-size:14px;
}
.savelist td a{
	font-weight: 300;
	text-align:left;
	padding:5px;
	color: #004E87;
	text-decoration:none;
	font-size:14px;
}
.savelist th {
	font-weight:300;
	text-align:left;
}
#selresults {
	    font-size: 14px;
    /* line-height: 20px; */
    color: #333333;
    font-weight: 100;
    margin-left: -45px;
	padding-bottom: 10px;
	
}

#selresults ul {
	display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: row;
	
}





#selresults ul li {
font-size: 14px;
    display: block;
    color: #000000;
    padding: 5px 10px;
    /*border: 1px solid #000000; */
    border-radius: 10px;
    text-align: center;
    text-decoration: none;
    /* margin-bottom: 3px; */
    /* margin-left: -18px; */
    transition: 0.6s ease;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: center;
    float: left;
    /*background: #ffffff;*/
    margin-left: 3px;
    margin-right: 3px;
	margin-bottom: 10px;
    background: #fff;
	text-transform: capitalize;
}
#step1 {
	display: block;
}
#step2, #step3, #step4, #step5, #step6, #step7, #step8, #step9, #step10 {
	display:none;
}

.pf10 {
	width: 10%;
	background-color:aqua;
	min-height:30px;
}
.pf20 {
	width: 20%;
	background-color:aqua;
	min-height:30px;
}
.pf30 {
	width: 30%;
	background-color:aqua;
	min-height:30px;
}
.pf40 {
	width: 40%;
	background-color:aqua;
	min-height:30px;
}
.pf50 {
	width: 50%;
	background-color:aqua;
	min-height:30px;
}
.pf60 {
	width: 60%;
	background-color:aqua;
	min-height:30px;
}
.pf70 {
	width: 70%;
	background-color:aqua;
	min-height:30px;
}
.pf80 {
	width: 80%;
	background-color:aqua;
	min-height:30px;
}
.pf90 {
	width: 90%;
	background-color:aqua;
	min-height:30px;
}
.pf100 {
	width: 100%;
	background-color:aqua;
	min-height:30px;
}


.pe10 {
	width: 10%;
	background-color:#7A7A7A;
	min-height:30px;
}
.pe20 {
	width: 20%;
	background-color:#7A7A7A;
	min-height:30px;
}
.pe30 {
	width: 30%;
	background-color:#7A7A7A;
	min-height:30px;
}
.pe40 {
	width: 40%;
	background-color:#7A7A7A;
	min-height:30px;
}
.pe50 {
	width: 50%;
	background-color:#7A7A7A;
	min-height:30px;
}
.pe60 {
	width: 60%;
	background-color:#7A7A7A;
	min-height:30px;
}
.pe70 {
	width: 70%;
	background-color:#7A7A7A;
	min-height:30px;
}
.pe80 {
	width: 80%;
	background-color:#7A7A7A;
	min-height:30px;
}
.pe90 {
	width: 90%;
	background-color:#7A7A7A;
	min-height:30px;
}
.pe100 {
	width: 100%;
	background-color:#7A7A7A;
	min-height:30px;
}

#steps {
	display:block;
	width:100%;
	background-image: url("/wall-selector-wizard/assets/img/step-1.png");
	min-height:120px;
	height:120px;
	background-size:contain;                      /* <------ */
    background-repeat:   no-repeat;
    background-position: center center;
	 visibility: visible;
  opacity: 1;
  transition: opacity 2s linear;
	
}

/* --- Slider Styles --- */
* {box-sizing: border-box}
body {}
.mySlides {display: none;transition: 0.6s ease;}
.myVids {display: none;transition: 0.6s ease;}
.myLearn {display: none;transition: 0.6s ease;}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  /*max-width: 90%;*/
  position: relative;
  margin: auto;
	clear:both;
	margin-right: auto;
	margin-left: auto;
	/*min-height: 20vh;*/
}

/* Next & previous buttons 
.prev {
  cursor: pointer;
    position: absolute;
    /* top: 50%; 
    width: auto;
    padding: 8px;
    color: black;
    font-weight: bold;
    font-size: 40px;
    transition: 0.6s ease;
    user-select: none;
    /* margin-left: -40px;
    left: 0;
} */
.prev {
    display: inline-block;
    width: 30px;
    height: 30px;
    border: 5px solid #FFD700;
    border-radius: 50%;
    margin-right: 1.5em;
    transition: 0.6s ease;
  
}
.prev:after {
         content: '';
    display: inline-block;
    margin-top: 5px;
    margin-left: 6px;
    width: 8px;
    height: 8px;
    border-top: 4px solid #333;
    border-right: 4px solid #333;
    -moz-transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
    transition: 0.6s ease;
}
/* Position the "next button" to the right 
.next {
  cursor: pointer;
    width: auto;
    padding: 8px;
    margin-top: -22px;
    color: black;
    font-weight: bold;
    font-size: 40px;
    transition: 0.6s ease;
    user-select: none;
    position: relative;
    top: 10;
    left: 100%;
}
*/
.next {
	display: inline-block;
    width: 30px;
    height: 30px;
    border: 5px solid #FFD700;
    border-radius: 50%;
    margin-right: 1.5em;
    transition: 0.6s ease;
  
}
.next:after {
       content: '';
    display: inline-block;
       margin-top: 4px;
    margin-left: -3px;
    width: 8px;
    height: 8px;
    border-top: 4px solid #333;
    border-right: 4px solid #333;
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transition: 0.6s ease;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(255,215,0,0.80);
}

/* Caption text */
.text {
       color: #617489;
    font-size: 2.5em;
    padding: 0px;
    width: 80%;
    text-align: center;
    z-index: -100;
	margin-bottom:35px;
	font-family: 'Open Sans', sans-serif;
	margin-top:35px;
	margin-left:auto;
	margin-right:auto;
	font-weight:700;
	line-height: 1.5em;

}
@supports (-moz-appearance:none) {
   .text {
       color: #617489;
    font-size: 2.5em;
    padding: 0px;
    width: 80%;
    text-align: center;
    z-index: -100;
	margin-bottom:35px;
	font-family: 'Open Sans', sans-serif;
	margin-top:35px;
	margin-left:auto;
	margin-right:auto;
	font-weight:700;
	line-height: 1.5em;
	letter-spacing:-0.05em;
}
}
/* Number text (1/3 etc) */
.numbertext {
  color: #000000;
  font-size: 12px;
  padding: 8px 12px;
  /*position: absolute;*/
  top: 0;
	    font-family: 'Open Sans', sans-serif;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
	
}

.active, .dot:hover {
  background-color: #717171;
	
}

.prevdot {
  background-color: #f0f0f0;
	border:1px dotted #000;
	
}

.nextdot {
	background-color: red;
	
}
/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@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}
}

/* --- End Slider Styles --- */
#learnmorerow {
	diplay:flex;
	width:100%;
	background-color:#ffd70052;
	text-align:center;
	clear:both;
	margin-bottom: 30px;
}
#toparea {
	dislay:block;
	width:100%;
	clear:both;
	background-color:#ffffff;
	height: auto;
}
#bottomarea {
	    display: flex;
    width: 100%;
    margin: none;
    min-height: 70vh;
    background-color: #f2f2f2;
    /* clear: both; */
    flex-direction: row;
    flex-wrap: nowrap;
   
}
#bottomareamain {
	    display: flex;
    width: 100%;
    margin: none;
    min-height: auto;
    background-color: #F7A600;
    /* clear: both; */
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
}
#midarea {
	display: inline-flex;
    width: 98%;
    margin: 30px 0px 20px 0px;
    min-height: auto;
    /*background-color: #C4C4C4;*/
    clear: both;
    /* max-height: 30vh; */
    /* overflow: scroll; */
    flex-direction: row;
    align-content: center;
    flex-wrap: wrap;
    justify-content: center;
    /* max-width: 100%; */
    align-items: center;
	animation: fadeIn 3s;
    border-radius: 0px;
}
#lmatitle {
	font-size: 12px;
    line-height: 20px;
    font-weight: 300;
    display: block;
    text-align: center;
    margin-bottom: -15px;
    margin-top: 20px;
	padding-top: 5px;
}
input[type=button], input[type=submit], input[type=reset] {
    background-color: #FFFFFF;
    border: 1px solid #000000;
    color: #000000;
    padding: 5px 2px;
    text-decoration: none;
    /* margin: 4px 2px; */
    cursor: pointer;
    border-radius: 30px;
    width: 117px;
    margin-right: auto;
    margin-left: auto;
    display: block;
    margin-top: 10px;
}
#sywtitle {
	font-size: 24px;
    line-height: 30px;
    font-weight: 300;
    display: block;
    margin-top: 20px;
	text-align: center;
	margin-bottom: 20px;
}
#sywtitle img {
	display:block;
	max-width: 400px;
	margin-right: auto;
	margin-left: auto;
}
ul li {
	list-style:none;
}
#lmacenteritems {
	    display: flex;
    justify-content: center;
    margin-left: -40px;
}
#lmacenteritems ul li {
	display:block;
	float:left;
}
.lma {
	    font-size: 10px;
    display: block;
    width: 105px;
    color: #333;
    padding: 3px 1px;
    border: 1px solid #333;
    border-radius: 30px;
    text-align: center;
    text-decoration: none;
    margin-bottom: 5px;
    /* margin-left: -40px; */
    transition: 0.6s ease;
    float: left;
    margin-right: 10px;
	background-color:#fff;
	
}
.lma:hover {
	color: #000000;
	border: 1px solid #000000;
	background-color:#BFBFBF;
	transition: 0.6s ease;
}
.box{
  background-color: #FFFFFFS;
  height: 0px;
  width: 0px;
padding:20px;
	

}

.transform{
  transition: all 1s ease;
	opacity:0;
	position:relative;
	width: 100%;
	height:auto;
}

.transform-active{
  background-color: #FFFFFF;
  height: auto;
  width: 100%;
margin-top: 10px;
	z-index:100000;
	position:relative;
	opacity:1;
}
.savetoggle {
	display:block;
	padding:5px;
	border:1px solid #A8A8A8;
	border-radius: 30px;
	width: 150px;
	font-size:12px;
	text-align:center;
	line-height:14px;
	transition: 0.6s ease;
	
}
#loading-image {
	width:100%;
	height: 100vh;
	display:none;
	position:fixed;
	
	left:0;
	z-index:1000000000000000;
	background: rgba(255,255,255,0.9) url("loader.gif") center no-repeat;
}
#submit-show {
	display: flex;
    text-align: center;
    width: 100%;
    justify-content: center;
    margin-left: -27px;
	
}
.searchfilter_aesthetic_mainimg img {
    width: 75px;
    height: 75px;
    position: relative;
	margin-bottom: 5px;
}
.searchfilter_aesthetic_selector {
    width: 10%;
    float: left;
    margin: 0;
    text-align: center;
    font-size: 12px;
    /* min-height: 100px; */
    /* border: 1px #e4e4e4 solid; */
    /* padding-left: 10px; */
    /* padding-right: 10px; */
   	padding-top: 5px;
	padding-bottom: 5px; 
    /* line-height: 18px; */
    /* position: relative; */
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    /* transform: scale(0.98); */
    transition: all .5s ease;
    z-index: 0;
}
.compare_button_seltool {
    width: 80%;
    color: #000000;
    font-size: .8em;
    line-height: 1em;
    background-color: #FFFFFF;
    border: 1px solid #000000;
    border-radius: 0;
    min-height: 1em;
    padding: 8px 10px;
    text-decoration: none;
    display: block;
    text-align: center;
    margin-right: auto;
    margin-left: auto;
    float: none;
    font-weight: 700;
    text-transform: uppercase;
    position: absolute;
    top: 130px;
    left: 10%;
}
#systemshow {
	    font-size: 12px;
    color: #000000;
    line-height: 12px;
    font-weight: 500;
    /* margin-bottom: 10px; */
    /* min-height: 40px; */
    display: block;
    /* position: absolute; */
    /* top: 40; */
    background-color: rgba(255,255,255,0.80);
    width: 100%;
    padding-top: 5px;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    border-radius: 30px;
    text-align: center;
    border: 1px #000 solid;
    /* margin-bottom: 35px;*/
}
.wallchoices {
	font-size:18px;
	font-weight:500;
	display:block;
	width:100%;
	text-align:center;
	line-height:14px;
	padding-top: 10px;
	color:#999;
}


.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 30px; /* Location of the box */
  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.8); /* Black w/ opacity */
  transition: opacity 1s;
	opacity: 1;
}
.modal.fade { 
	opacity: 0;
}
/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 40%;
	transition: opacity 1s;
	border-radius:10px;
}
.modal-content-tutorial {
  background-color: #000000;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 90%;
	transition: opacity 1s;
	border-radius:10px;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

/*ContactRep Modal */
.modalcr {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 30px; /* Location of the box */
  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.8); /* Black w/ opacity */
  transition: opacity 1s;
	opacity: 1;
}
.modalcr.fade { 
	opacity: 0;
}
/* Modal Content */
.modalcr-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 50%;
	transition: opacity 1s;
	border-radius:10px;
}

/* The Close Button */
.closecr {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.closecr:hover,
.closecr:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}


#isulationcompare {
	display:block;
}
#isulationcompare img {
	width:100%;
}
/*Insulation Compare Modal */
.modalicm {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 30px; /* Location of the box */
  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.8); /* Black w/ opacity */
  transition: opacity 1s;
	opacity: 1;
}
.modalicm.fade { 
	opacity: 0;
}
/* Modal Content */
.modalicm-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 90%;
	transition: opacity 1s;
	border-radius:10px;
}

/* The Close Button */
.closeicm {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.closeicm:hover,
.closeicm:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}




/*WallSystem Modal */
.modalws {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 30px; /* Location of the box */
  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.8); /* Black w/ opacity */
  transition: opacity 1s;
	opacity: 1;
}
.modalws.fade { 
	opacity: 0;
}
/* Modal Content */
.modalws-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 95%;
	transition: opacity 1s;
	border-radius:10px;
}

/* The Close Button */
.closews {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.closews:hover,
.closews:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext-home, .tooltip .tooltiptext-email,.tooltip .tooltiptext-save, .tooltip .tooltiptext-reset {
  visibility: hidden;
  width: auto;
  background-color: #ffd700;
  color: #000;
  text-align: center;
  padding: 5px 5px;
  border-radius: 6px;
 font-size:11px;
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
      top: 120%;
    left: 50%;
    margin-left: -14px;
	opacity: 0;
	transition: 0.3s;
	min-width:50px;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext-home, .tooltip:hover .tooltiptext-email, .tooltip:hover .tooltiptext-save, .tooltip:hover .tooltiptext-reset {
  visibility: visible;
	opacity: 1;
	transition: 0.3s;
}

#page-container {
  position: relative;
  min-height: 90vh;
}

#content-wrap {
  padding-bottom: 12rem;    /* Footer height */
}
#wstname{
width: 300px;
    display: block;
    height: 34px;
    background-color: #ffffff;
    border: 1px solid #000;
    font-size: 24px;
    /* text-align: center; */
    margin-right: auto;
    margin-left: auto;
    padding: 5px;
	
}
#footerwst {
  position: absolute;
  bottom: -20;
  width: 100%;
 text-align:center;
           /* Footer height */
}
#footerwstpt {
  width: 100%;
 text-align:center;
           /* Footer height */
}
#contactrep {
	display:block;
	width:30%;
	min-height:50px;
	padding:10px 20px 0px 20px;
	background-color:#FFFFFF;
	border-radius:100px;
	border: 1px solid #000;
	color: #333333;
	cursor:pointer;
	margin-right:auto;
	margin-left:auto;
	margin-top: 10px;
	margin-bottom: 10px;
	text-align:center;
	font-size:18px;
	line-height:25px;
	clear:both;
	transition: 0.3s;
	text-decoration: none;
}
#contactrep a {
	color:#333333;
	text-decoration: none;
}
#contactrep:hover {
	color:#000000;
	background-color:#9a9a9a;
	transition: 0.3s;
	
}
.footerlinks {
	display:block;
	text-align:center;
	font-size: 12px;
	font-weight: 100;
	color:#686868;
	line-height: 25px;
	margin-bottom: 10px;
}
.contactrepsmall {
	display:block;
	text-align:center;
	font-size: 14px;
	font-weight: 100;
	color:#686868;
	line-height: 25px;
	margin-bottom: 10px;
}
#loaderimg {
	width: 10%;
	transition: 0.3s;
}
#loaderimg img {
	width:2%;
}
#loaderimgsm {
	width: 2%;
	transition: 0.3s;
}
#loaderimgsm img {
	width:10%;
}
#wstfinal {
	border:none;
	margin:0px;
	height:80vh;
	width:100%;
}
#instructionstext {
	display:block;
	text-align:center;
	font-size:12px;
	line-height: 24px;
	margin-bottom:20px;
	margin-top: -25px;
	color:#424242;
	width: 100%;
	
}
#sebaes {
	    display: block;
    width: 80%;
    color: #000;
    font-size: 18px;
    line-height: 50px;
    border: 4px solid #ffd700;
    border-radius: 30px;
    padding: 10px 20px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    background-color: #fff;
    margin-top: 30px;

}
#sebaes:hover {
	background-color:#8F8F8F;
}
#learn {
	display:block;
	/*padding: 50px 30px 30px 30px;*/
}

#showsubmit {
	display:none;
	width:100%;
	
}
#checkimg {
	display: block;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
	border-radius: 20px;
}
#ltbluereg {
	display:block;
	Width: 100%;
	color: #AFB8C7;
	font-size: 24px;
	line-height:24px;
	margin-bottom:10px;
}
#dkbluereg {
	display:block;
	Width: 100%;
	color: #333;
	font-size: 24px;
	line-height:24px;
	margin-bottom:10px;
}
#learnheaderwhite {
	display:block;
	width: 100%;
	color:#fff;
	font-size:36px;
	line-height:45px;
	margin-bottom: 25px;
	font-weight:700;
}

#learnheaderwhite24 {
    display: block;
    width: 100%;
    color: #fff;
    font-size: 24px;
    line-height: 45px;
    /* margin-bottom: 25px; */
    font-weight: 700;
}


#learndeck {
	display:block;
	width:100%;
	color: #FFF;
	font-size:22px;
	line-height: 30px;
	margin-bottom: 25px;
}
#learndeckonly {
    display: block;
    width: 100%;
    color: #FFF;
    font-size: 22px;
    line-height: 30px;
    margin-bottom: 65px;
    PADDING: 0px 70px 0px 0px;
}
#learndeckdk {
	display:block;
	width:90%;
	color: #333;
	font-size:22px;
	line-height: 30px;
	margin-bottom: 25px;
}
#calloutorange {
	color: #F7A600;
	font-size: 40px;
	line-height: 50px;
	display:block;
	width: 100%;
	margin-bottom: 25px;
}
#calloutwhite {
	color: #Fff;
	font-size: 40px;
	line-height: 50px;
	display:block;
	width: 100%;
	margin-bottom: 25px;
}
#learnmaintextwhite {
	display:block;
	width:85%;
	float:left;
	color:#fff;
	font-size:16px;
	line-height: 22px;
	margin-bottom: 25px;
	clear:both;
}
#learnimage {
	display:block;
	width:30%;
	float:left;
	padding: 0px 20px 0px 0px;
	margin-bottom:30px;
}
#learnimageright {
	display:block;
	width:30%;
	float:left;
	padding: 0px 20px 0px 0px;
	margin-bottom:30px;
}
#learnimagehalf {
	display:block;
	width:45%;
	float:left;
	padding: 0px 20px 0px 0px;
}
#learnimagert {
        display: block;
    width: 40%;
    float: right;
    padding: 0px 70px 0px 0px;
    margin-bottom: 20px;

}
#learnimagesingle {
    display: block;
    width: 90%;
    float: left;
    padding: 0px 20px 0px 0px;
}
#learnimage img {
	width:100%;
	contain: cover;
	box-shadow: 4px 4px 5px #555;
}
#learnimagert img {
	width:70%;
	contain: cover;
	box-shadow: 4px 4px 5px #555;
}
#learnimageright img {
	width:100%;
	contain: cover;
	box-shadow: 4px 4px 5px #555;
}
#learnimagesingle img {
	width:100%;
	contain: cover;
	box-shadow: 4px 4px 5px #555;
}
#learnimagehalf img {
	width:100%;
	contain: cover;
	box-shadow: 4px 4px 5px #555;
}
#learnnote {
	display:block;
	font-size:13px;
	color: #FFF;
	line-height: 16px;
	margin-top: 30px;
	font-style:italic;
}
#learnlinksicm {
	display:block;
	color: #000;
	font-size: 16px;
	line-height: 18px;
	/*width: 40%;*/
	text-decoration:none;
	text-align:center;
	padding: 10px 30px;
	background-color:#FFF;
	border:1px solid #000;
	border-radius: 30px;
	clear:both;
	transition: 0.3s;
	margin-bottom:20px;
	float:left;
	font-weight:700;
}
#learnlinksicm a {
	color: #000;
	text-decoration:none;
}
#learnlinksicm:hover {
background-color:#FFD700;
	transition: 0.3s;

}
#learnlinkslg {
    display: block;
    color: #000;
    font-size: 24px;
    line-height: 30px;
    width: 100%;
    text-decoration: none;
    text-align: center;
    padding: 40px 20px;
    background-color: #FFF;
    border: 1px solid #000;
    border-radius: 30px;
    clear: both;
    transition: 0.3s;
    margin-bottom: 20px;
    float: left;
    font-weight: 700;
}
#learnlinkslg a {
	color: #000;
	text-decoration:none;
}
#learnlinkslg:hover {
background-color:#FFD700;
	transition: 0.3s;

}
#learnlinks {
	display:block;
	color: #000;
	font-size: 16px;
	line-height: 18px;
	/*width: 40%;*/
	text-decoration:none;
	text-align:center;
	padding: 10px 30px;
	background-color:#FFF;
	border:1px solid #000;
	border-radius: 30px;
	clear:both;
	transition: 0.3s;
	margin-bottom:20px;
	float:left;
	font-weight:700;
}
#learnlinks a {
	color: #000;
	text-decoration:none;
}
#learnlinks:hover {
background-color:#FFD700;
	transition: 0.3s;

}

#learnlinksnoclear {
    display: block;
    color: #000;
    font-size: 16px;
    line-height: 18px;
    /* width: 40%; */
    text-decoration: none;
    text-align: center;
    padding: 10px 30px;
    background-color: #FFF;
    border: 1px solid #ffd700;
    border-radius: 30px;
    /* clear: both; */
    transition: 0.3s;
    margin-bottom: 20px;
    float: left;
    font-weight: 700;
}
#learnlinksnoclear a {
	color: #000;
	text-decoration:none;
}
#learnlinksnoclear:hover {
background-color:#FFD700;
	transition: 0.3s;

}
#indexmain {
	display:block;
	height:94vh;
	width:100%;
	background-image: url("https://www.stocorp.com/wall-selector-wizard/assets/img/home-image.jpg");
	background-position: top; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover;
	
}
#indexbutton {
	    display: block;
    background-color: #FFF;
    color: #000;
    width: 200px;
    font-size: 16px;
    /* font-weight: 700; */
    text-align: center;
    padding: 10px;
    border: 1px solid #FFD700;
    margin-left: 30px;
    text-decoration: none;
	transition: 0.3s;
	border-radius: 30px;
	font-weight: 700;
	margin-top:80px;
	margin-left: 70px;
	float:left;
}
#indexbutton a {
	text-decoration:none;
	color:#000;
}
#indexbutton:hover {
	background-color:#FFD700;
	transition: 0.3s;
}

#tutorialindexbutton {
	    display: block;
    background-color: #FFF;
    color: #000;
    width: 200px;
    font-size: 16px;
    /* font-weight: 700; */
    text-align: center;
    padding: 10px;
    border: 1px solid #FFD700;
    margin-left: 30px;
    text-decoration: none;
	transition: 0.3s;
	border-radius: 30px;
	font-weight: 700;
	margin-top:80px;
	margin-left: 70px;
	float:left;
}
#tutorialindexbutton a {
	text-decoration:none;
	color:#000;
}
#tutorialindexbutton:hover {
	background-color:#FFD700;
	transition: 0.3s;
}

#indexbuttonlong {
   display: block;
    background-color: #fff;
    color: #000;
    width: 35%;
    font-size: 15px;
    /* font-weight: 700; */
    text-align: center;
    padding: 10px;
    border: 1px solid #000;
    margin-left: 30px;
    text-decoration: none;
    transition: 0.3s;
    border-radius: 30px;
    position: relative;
    bottom: 0;
    margin-bottom: 100px;
    margin-top: 100px;
    margin-left: 100px;
    font-weight: 700;
}
#indexbuttonlong a {
	text-decoration:none;
	color:#000;
}
#indexbuttonlong:hover {
	background-color:#ffd700;
	transition: 0.3s;
}


iframe {
height: 90vh; /* Viewport-relative units */
width: 80vw;
}
#loginform label {
	    font-size: 14px;
    border: none;
    color: #000;
    display: block;
    text-align: left;
    /* margin: 0px; */
    padding: 0px;
	width: 250px;
	
}
#loginform input[type=button], #loginform input[type=submit], #loginform input[type=reset] {
	background-color: #FFFFFF;
    border: 1px solid #000;
    color: #000000;
    padding: 5px 2px;
    text-decoration: none;
    /* margin: 4px 2px; */
    cursor: pointer;
    border-radius: 30px;
    width: 117px;
    margin-right: 0px;
    margin-left: 0px;
    /* display: block; */
    margin-top: 11px;
    clear: both;
}
.nounderline {
	text-decoration:none;
}
#restorelevelhead {
	display:block;
	background-color: rgba(255,255,255,0.65);
	padding: 5px 20px;
	color: #000;
	margin-bottom:5px;
	border-radius: 30px;
	font-size: 13px;
	font-weight: 700;
	clear:both;
	
}
#restoreleveltext {
	display:block;
	padding: 5px 20px;
	color: #000;
	margin-bottom:5px;
	border-radius: 30px;
	font-size: 13px;
	font-weight: 100;
	margin-top:-8px;
	margin-bottom: 10px;
	clear:both;
	
}
#restoreleveltext a {
display: block;
    color: #000;
    font-size: 12px;
    line-height: 14px;
    /* width: 40%; */
    text-decoration: none;
    text-align: center;
    padding: 5px 10px;
    background-color: #FFF;
    border: 1px solid #000;
    border-radius: 30px;
    /* clear: both; */
    transition: 0.3s;
    /* margin-bottom: 20px; */
    font-weight: 500;
    width: 45%;
    margin-bottom: 5px;
    float: left;
    margin-top: 10px;
    margin-bottom: 20px;
	margin-right: 10px;
	
}#restoreleveltext a:hover {
	text-decoration:none;
	color: #000;
	background-color:#ffd700;
	
}
#indexdeck {
	display:block;
	max-width:45%;
	color:#000;
	font-size:18px;
	line-height:30px;
	margin-top:0px;
	padding:0px 70px;
	margin-bottom:20px;
	font-weight:700;
}

@media ( max-width: 1100px ) {
		#indexdeck {
	display:block;
	max-width:80%;
	color:#000;
	font-size:18px;
	line-height:30px;
	margin-top:0px;
	padding:20px;
	margin-bottom:20px;
	font-weight:700;
	margin-right:auto;
	margin-left:70px;
	background-color:rgba(255,255,255,0.75)
}
	
}
/* Extra small devices (phones, 600px and down) */
@media ( max-width: 768px ) {
	
	
	#cm-show, #ae-show {
         font-size: 1.2em;
    margin-right: 0.5%;
    max-width: 100%;
    min-height: 30px;
    opacity: 1;
    animation-name: fadeInOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 1s;
    display: flex;
    justify-content: center;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
}
	label {
    display: block;
    width: 80%;
    padding: 15px 20px;
    float: left;
    margin-right: 20px;
    border: 3px solid #F7A600;
    text-align: center;
    border-radius: 30px;
    margin-bottom: 10px;
	background-color:#fff;
	transition: all 0.6s ease;
	font-size:1.1em;
	font-weight:700;
	font-family: 'Open Sans', sans-serif;
}
#leftcol {
    width: 50%;
    /* float: right; */
    /* min-height: 237vh; */
    background-color: #617489;
	display:none;
}
	#centercolumn {
    width: 100%;
    float: left;
    padding: 20px 0px 0px 0px;
    margin-left: 30px;
		
}
	.text {
    color: #617489;
    font-size: 1.5em;
    padding: 0px;
    width: 80%;
    text-align: center;
    z-index: -100;
    margin-bottom: 35px;
    font-family: 'Open Sans', sans-serif;
    margin-top: 35px;
    margin-left: auto;
    margin-right: auto;
    font-weight: 700;
    line-height: 1.6em;
	}
#checkimg {
    display: none;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
    border-radius: 20px;
}
#contactrep {
    display: block;
    width: 90%;
    min-height: 50px;
    padding: 10px 20px 0px 20px;
    background-color: #FFFFFF;
    border-radius: 100px;
    border: 1px solid #000;
    color: #333333;
    cursor: pointer;
    margin-right: auto;
    margin-left: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
    font-size: 14px;
    line-height: 25px;
    clear: both;
    transition: 0.3s;
    text-decoration: none;
}
	#topcolleft {
    display: block;
    /* float: left; */
    color: #000000;
    width: 100%;
    margin-right: 0px;
    font-size: 24px;
    font-weight: 500;
    text-transform: uppercase;
    text-align: center;
	
}
	#topcolright {
    display: flex;
    align-content: flex-end;
    width: 100%;
    /* float: right; */
    max-height: 50px;
    justify-content: center;
    flex-wrap: nowrap;
}
}