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

underCondition
{
	 width: 98%;
	 float: left;
	 text-align: center;
	 background-color: #FFF;
	 font-family: sans-serif;
	 font-weight: 400;
	 font-size: 1.5vw;
	 border: 0px red solid;
	 padding: 0px 0% 0px 0px;
	 margin: 0px 0% 0px 0px;
}

clearFloat
{
 float: none;
}

.backBtn
{
	border: 0px solid green;
	width: 100%;
	height: 330px;/**/
	background-color: #52ABDF;
	text-align: center;
}

@media (min-width: 1095px) {
	.backBtn
	{
		border: 0px solid red;
		width: 100%;
		height: 390px;/**/
	}
}
@media (min-width: 1325px) {
	.backBtn
	{
		border: 0px solid gray;
		width: 100%;
		height: 500px;/**/
	}
}

.ThreeBtnArea1
{
	border: 10px solid yellow;
	width: 100%;
	height:230px;
        padding: 0 0% 0% 0%;
	margin: 0px 0% 0% 0%;
	text-align: center;
	background-color: #52ABDF;
}

.ThreeBtnArea2
{
	border: 0px solid yellow;
	width: 24%;
        padding: 0 6% 2% 0%;
	margin: -6px 0% 0% 0%;
	float: left;
	text-align: center;
	background-color: #52ABDF;
}

.ThreeBtnArea3
{
	border: 0px solid red;
	width: 24%;
        padding: 0 6% 2% 0%;
	margin: -6px 0% 0% 0%;
	float: left;
	text-align: center;
	background-color: #52ABDF;
}

.ThreeBtnArea4
{
	border: 10px solid yellow;
	width: 60%;
        padding: 0% 0% 0% 0%;
	margin: 0% 10% 0% 10%;
	float: left;
	text-align: center;
	background-color: #FFF;
}

butArea
{
	 border: 00px solid red;
	 width: 98%;
	 float: clear;
	 text-align: center;
	 background-color: #FFF;
	 font-family: sans-serif;
	 font-weight: 400;
	 font-size: 1.5vw;
	 color: #000;
	 padding: 4px 0% 0 0%;
}

.robartTitleCondition
{
  font-family: sans-serif;
  font-weight: 500;
  margin: 6% 0 -1% 0%;
  font-size: 1.7vw;
  color: #000;
  border: 0px red solid;
  padding: 0 0% 0 18%;
}

.robartTitleQuality
{
  font-family: sans-serif;
  font-weight: 500;
  margin: 6% 0 -1% 0%;
  font-size: 1.7vw;
  color: #000;
  border: 0px red solid;
  padding: 0 14% 0 0%;
}

main
{
	border: 0px solid yellow;
	width: 45%;
        padding: 0 0 2% 0;
	margin-left: 5%;
	float: left;
	text-align: center;
	background-color: #52ABDF;
}

main .menu{
  margin-bottom: 10px;
  margin-top: 20px;
  text-align:center
}

main .menu .button{
  -webkit-transition: all 0.3s ease;   transition: all 0.3s ease;
  cursor: pointer;
  display: block;
  width: 54%;
  text-align: center;
  padding: 6% 0 6% 0;
  color: #000000;
  font-family: sans-serif;
  font-weight: 600;
  font-size: 1.25vw;
  margin: 6% 0% 0% 32%;
  background-color: #808080;
  border: 3px solid #B4B3B4;
  border-right-color: #565555;
  border-bottom-color: #565555;
  margin-bottom: 20px;
  box-shadow: 0px 0px 3px 3px #fff;
}

@media (min-width: 650px) {
 main .menu .button:hover {
   background-color: #A7A69F;
   color: #000  
  }
}

main .menu .button.selected{
  background-color: #E0E0E0;
  color: #000
}

 main .menu .button:active {
  background-color: #fff;
  box-shadow: 0 5px #555;
  transform: translateY(4px);
}

main .menu .buttonDisabled{
/*  -webkit-transition: all 0.3s ease;   transition: all 0.3s ease;
  cursor: pointer;*/
  display: block;
  width: 77%;
  text-align: center;
  padding: 6%;
  color: #000000;
  font-family: sans-serif;
  font-weight: 600;
  font-size: 1.7vw;
  margin: 6% 0% 0% 16%;
  background-color: #808080;
  border: 8px solid #929292;
  border-right-color: #868686;
  border-bottom-color: #868686;
  margin-bottom: 20px;
  box-shadow: 0px 0px 3px 3px #fff;
}

main .menu .buttonDisabled.selected{
  background-color: #E0E0E0;
  color: #000
}

@media (max-width: 650px) {
  main .menu .button{
    display: block;
  }
}

/* send line of buttons*/

quality
{
	border: 0px solid orange;
	width: 45%;
        padding: 0 0 2% 0;
	margin-left: 0%;
	float: left;
	text-align: center;
	background-color: #52ABDF;
}

quality .menu{
  margin-bottom: 20px;
  margin-top: 20px;
  text-align:center;
  
}

quality .menu .btn{
  -webkit-transition: all 0.3s ease;   transition: all 0.3s ease;
  cursor: pointer;
  display: block;
  width: 54%;
  text-align: center;
  padding: 6% 0 6% 0;
  color: #000000;
  font-family: sans-serif;
  font-weight: 600;
  font-size: 1.25vw;
  margin: 6% 0% 0% 16%;
  background-color: #808080;
  border: 3px solid #B4B3B4;
  border-right-color: #565555;
  border-bottom-color: #565555;
  margin-bottom: 20px;
  box-shadow: 0px 0px 3px 3px #fff;
}

@media (min-width: 650px) {
 quality .menu .btn:hover {
   background-color: #A7A69F;
   color: #000;
  }
}

quality .menu .btn.selected{
  background-color: #E0E0E0;
  color: #000
}

 quality .menu .btn:active {
  background-color: #fff;
  box-shadow: 0 5px #555;
  transform: translateY(4px);
}

.submitBtn
{
  -webkit-transition: all 0.3s ease;   transition: all 0.3s ease;
  cursor: pointer;
  display: block;
  width: 60%;
  height:30%;
  text-align: center;
  padding: 2% 0 2% 0%;
  color: #FFFFFF;
  font-family: sans-serif;
  font-weight: 600;
  font-size: 1.25vw;
  margin: 1% 0% 0% 20%;
  background-color: #777;
  border: 3px solid #888;
  border-right-color: #666;
  border-bottom-color: #666;
  margin-bottom: 0px;
  box-shadow: 0px 0px 4px 4px #fff;
}

a .submitBtn:link {
  color: #888;
  text-align: center;
}

.submitBtn:hover
{
  background-color: #888;
  border: 3px solid #999;
  border-right-color: #777;
  border-bottom-color: #777;
  color: #FFF;
}

.submitBtn:active
{
	background-color: #888;
}

/* better quality button*/

.bqBtn
{
  -webkit-transition: all 0.3s ease;   transition: all 0.3s ease;
  cursor: pointer;
  display: block;
  width: 95%;
  text-align: center;
  padding: 12% 0 12% 0;
  color: #000;
  font-family: sans-serif;
  font-weight: 600;
  font-size: 1.25vw;
  margin: 10% 0% 0% 18%;
  background-color: #808080;
  border: 3px solid #B4B3B4;
  border-right-color: #565555;
  border-bottom-color: #565555;
  margin-bottom: 0px;
  box-shadow: 0px 0px 4px 4px #fff;
}

a .bqBtn:link {
  color: #BF0404;
}

.bqBtn:hover
{
   background-color: #A7A69F;
}

.bqBtn:active
{
  background-color: #fff;
  box-shadow: 0 5px #555;
  transform: translateY(4px);
  color: #000;
}


.bqBtnselected{
    background-color: #E0E0E0;
}

.bqBtnselected:hover{
  background-color: #A7A69F;
}

.bqBtnselected:active{
  background-color: #062230;
}

/* season button*/

.seasonalBtn
{
  -webkit-transition: all 0.3s ease;   transition: all 0.3s ease;
  cursor: pointer;
  display: block;
  width: 95%;
  text-align: center;
  padding: 21% 0 22% 0;
  color: #000;
  font-family: sans-serif;
  font-weight: 600;
  font-size: 1.25vw;
  margin: 10% 0% 0% 18%;
  background-color: #808080;
  border: 3px solid #B4B3B4;
  border-right-color: #565555;
  border-bottom-color: #565555;
  margin-bottom: 0px;
  box-shadow: 0px 0px 4px 4px #fff;
}

.seasonalBtn:hover
{
   background-color: #A7A69F;
}

.seasonalBtn:active{
  background-color: #fff;
  box-shadow: 0 5px #555;
  transform: translateY(4px);
  color: #000;
}

.seaBtnselected{
  background-color: #E0E0E0;
}
.seaBtnselected:hover{
  background-color: #A7A69F;
}
.seaBtnselected:active{
  background-color: #062230;
}

/*  AS IS BUTTON */

.asisBtn
{
  -webkit-transition: all 0.3s ease;   transition: all 0.3s ease;
  cursor: pointer;
  display: block;
  width: 95%;
  text-align: center;
  padding: 21% 0 22% 0;
  color: #000;
  font-family: sans-serif;
  font-weight: 600;
  font-size: 1.25vw;
  margin: 10% 0% 0% 18%;
  background-color: #808080;
  border: 3px solid #B4B3B4;
  border-right-color: #565555;
  border-bottom-color: #565555;
  margin-bottom: 0px;
  box-shadow: 0px 0px 4px 4px #fff;
}

.asisBtn:hover
{
   background-color: #A7A69F;
}

.asisBtn:active{
  background-color: #fff;
  box-shadow: 0 5px #555;
  transform: translateY(4px);
  color: #000;
}

.asisBtnselected{
     background-color: #E0E0E0;
}

.asisBtnselected:hover{
  background-color: #A7A69F;
}
.asisBtnselected:active{
  background-color: #062230;
}

/* this covers all elements */
* {
  box-sizing: border-box;
}

.bottomNav
{
   text-align: center;
   font-family: sans-serif;
   font-weight: 500;
   font-size: .55em;
   color: #999;
   width: 100%;
   padding: 2% 0px 0 0;
}

.bottomNav::after
{
   content: " 3";
}

/**/

/* Create two equal columns that floats next to each other */
.column {
  float: left;
  padding: 5px 10px 40px 30px;
  width: 45%;
  border: 0px purple solid;
}

.columnRight {
  float: left;
  padding: 40px 10px 40px 10px;
  width: 25%; /* Here is the area that you adjust the thumbnail sized image */
  border: 0px violet solid;
}

.HeaderFullColumn {
  padding: 20% 0% 2% 0%;
  width: 100%;
  font-family: sans-serif;
  font-weight: 600;
  margin: 0% 0 0% 0%;
  text-align: center;
  font-size: 2.9vw;
  color: #000;
  border: 0px red solid;
}

.FullColumn {
  padding: 2% 5%;
  width: 100%;
  font-family: sans-serif;
  font-weight: 600;
  margin: 0% 0 0% 0%;
  text-align: center;
  font-size: 2.33vw;
  color: #000;
  border: 0px red solid;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

.headerBox{
	background-color: #002d74;
	padding: 20px 0 40px 10%;
	font-size: 1.8em;
	color: #fff;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	text-align: left;
	heigth: 200px !important;
	width: 100%;
	vertical-align: middle;
}

@media screen and (max-width: 1300px) {
  .headerBox{
	padding: 20px 0 40px 10%;
	font-size: 1.4em;
  }
}

@media screen and (max-width: 780px) {
  .headerBox{
	padding: 20px 0 40px 10%;
	font-size: 1em;
        border: red 0px solid;
  }
}

.feedBackHeader{
	background-color: #002d74;
	padding: 30px 0 30px 0;
	font-size: 1.5em;
	color: #fff;
	font-family: sans-serif;
	text-align: center;
	heigth: 150px !important;
	width: 100%;
	vertical-align: middle;
}

@media screen and (max-width: 780px) {
  .feedBackHeader{
	font-size: 1.2em;
        border: red 0px solid;
  }
}

sub {
  vertical-align: middle;
  font-size: 1.7em;
  margin-top: 40px;
}

super {
  vertical-align: middle;
  font-size: .7em;
  color: gray;
}


.SubHeaderBox{
	background-color: #00ADBB;
	opacity: .9;
	padding: 10px 0 12px 0px;
	margin: -8px 0 0 0px;
	z-index: 10;
	font-size: 2em;
	color: #fff;
	font-family: sans-serif;
	text-align: left;
	heigth: 200px !important;
	width: 80%;
}

.textBullets
{
	padding: 0px 0 0px 0px;
	margin: 2% 0 3% 20%;
	z-index: 10;
	font-size: 1.45vw;
	line-height: 156%;
	color: #000;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-weight: 300;
	border: 0px solid blue;
}

@media screen and (max-width: 1300px) {
  .textBullets{
     margin: 20px 0 0% 40px;
	font-size: 1.1em;
	line-height: 32px;

  }
}

@media screen and (max-width: 780px) {
  .textBullets{
    margin: 20px 0 0 40px;
	font-size: .9em;
	line-height: 22px;
  }
}


.textBulletsFeedback
{
	padding: 0px 0 0px 0px;
	margin: 40px 0 0 2%;
	z-index: 10;
	font-size: 1em;
	line-height: 64px;
	color: #000;
	font-family: sans-serif;
	font-weight: 400;
}

.textEnd
{
	padding: 0px 0 0px 0px;
	margin: 2% 25% 0 25%;
	z-index: 10;
	font-size: 1.5em;
	line-height: 120%;
	color: #000;
	font-family: sans-serif;
	font-weight: 400;
}

@media screen and (max-width: 780px) {
  .textBulletsFeedback{
     margin: 20px 0 0 23%;
	font-size: 1.2em;
	line-height: 32px;
  }
}

.textOverImage
{
	padding: 00px 0 0px 0px !important;
	margin: 10px 0 0 0px;
	z-index: 120;
	font-size: 1em;
	color: #000;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-weight: 300;
        text-align: center;
}

.textAboveBtn
{
	padding: 0px 0 0px 0px;
	margin: 52px 0 0 4px;
	z-index: 10;
	font-size: 1.25em;
	line-height: 34px;
	color: #000;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-weight: 400;
}

@media screen and (max-width: 1300px) {
  .textAboveBtn{
       margin: 38px 0 0 4px;
       font-size: .95em;
  }
}

.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 3% 2%;
  width: 18%;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
  font-size: 1.75em;
  font-weight: 600;
  margin: 10px 4px 0 4px;
  cursor: pointer;
  transition-duration: 0.4s;
}

@media screen and (max-width: 1300px) {
  .button{
       font-size: .5em;
       padding: 3% 1%;
       margin: 10px 2px 0 2px;
  }
}

@media screen and (max-width: 780px) {
  .button{
       font-size: .9em;
       padding: 2% 1%;
       margin: 10px 1px 0 1px;
  }
}

a:link, a:visited 
{
  color: white;
  text-decoration: none;
  border: 0px red solid;
}

.button:hover {
  background-color: #002d74; /* blue */
  color: white;
}

.buttonNext {
  background-color: #002d74; /* Green */
  border: none;
  color: white;
  padding: 2% 2%;
  width: 24%;
  text-align: center;
  text-decoration: none;
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
  font-size: 1.15em;
  font-weight: 600;
  margin: 40px 38% 0 38%;
  cursor: pointer;
  transition-duration: 0.2s;
}

@media screen and (max-width: 780px) {
  .buttonNext{
	font-size: 1.2em;
  }
}
.correct
{
   color: green;
   font-weight: 700;
   font-size: 1.25em;
}

.buttonNext:hover {
  background-color: black; /* blue */
  color: white;
}

.button1 {
  background-color: #00ADBB; 
}

.button2 {
  background-color: #00ADBB; 
}

.button3 {
  background-color: #00ADBB;  
}

.button4 {
  background-color: #00ADBB; 
}

.button5 {
  background-color: #00ADBB; 
}

.magnifierRentgen {
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.magnifierRentgen .magnifier-loupe {
  overflow: hidden;
  position: absolute;
  border-radius: 0em;
  top: 0;
  left: 0;
  border: #f0f0f0 2px solid;
  box-shadow: rgba(0, 0, 0, 0.5) 5px 5px 8px;
  cursor: none;
  transform: scale(2);
  display: none;
}