/* Universal elements agnostic to device breakpoints) */



html, body {
    max-width: 100%;
    overflow-x: hidden;
    margin:0px 0px;

}

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


 #startForm{
display:none;
position:absolute;
box-sizing: border-box;
margin-left:10%;
width:80%;
padding:20px;
z-index:5;
background-color:#FFF;
border-radius:30px;
font-family: 'Lexend', sans-serif;
font-weight:700;
font-size:16px;
margin-top:20px;
border: solid 5px #000;
 }

input[type="text"] {
    width: 95%;
    height: 16px;
    padding:4px;
    font-size:14px;
    margin: 5px 0px 17px 0px;
}

input[type="submit"] {
    padding:8px;
    font-size:15px;
    cursor:pointer;
    
}

#magicIsland{
  position:relative;
  width:80%;
  max-width:500px;
  padding:25px 25px;
  margin:0px auto 20px auto;
  border-radius:50px;
  background-color:#000;
  color:#FFF;
  text-align: center;
  font-family: 'Lexend', sans-serif;
  font-weight:600;
  font-size:28px;
  overflow:hidden;
  cursor:pointer;
}


#greenProgressBar{
position:absolute;
z-index:1;
width:100%;
height:100%;
right:100%;
top:0px;
background-color:#00CC66;
}


@keyframes barTravelRight {
  0%   {right: 100%;}
  100% {right:0%;}
}

.scanProgress{
  animation: barTravelRight 3s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}




#greenScanLine{
position:absolute;
z-index:1;
width:110%;
height:3px;
top:-10px;
left:-5%;
background-color:#00CC66;
opacity:0.0;
}



@keyframes lineTravelDown {
  0%   {top: -10px; opacity:1.0;}
  95% {top:100%; opacity:1.0;}
  96% {top:100%; opacity:0.0;}
  100% {top:100%; opacity:0.0;}


}

.scanDown{
  animation: lineTravelDown 3s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}



#miText{
position:relative;
text-shadow: 1px 1px 2px black;
top:0px;
opacity:1.0;
z-index:2;
}


@keyframes bringUpTextandFadeIn {
  0%   {top: 10px; opacity: 0.0;}
  100% {top:0px; opacity: 1.0;}
}

.textEnter{
  animation: bringUpTextandFadeIn 0.5s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}


@keyframes bringUpTextandFadeOut {
  0%   {top: 0px; opacity: 1.0;}
  100% {top:-10px; opacity: 0.0;}
}

.textExit{
  animation: bringUpTextandFadeOut 0.5s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}


.sampleTypeGraf{
font-family:courier, courier new, serif;
font-size: 18px;
color: #000;
margin-bottom:30px;
}


#demoTextPanel{
  position:relative;
  width:90%;
  margin:50px 50px 40px 50px;
  float:left;
  height:100%;
}



.insertEdit{
position:relative;
display:inline-block;
overflow:visible;
width:0px;
height:0px;
}



.edit1{
position: absolute;
z-index:2;
width:180px;
height:60px;
cursor:pointer;
margin-top:-40px;
margin-left:-20px;
}


.edit2{
position: absolute;
z-index:2;
width:180px;
height:60px;
cursor:pointer;
margin-top:-40px;
margin-left:-20px;
}


.edit6{
position: absolute;
z-index:2;
width:257px;
height:60px;
cursor:pointer;
margin-top:-40px;
margin-left:-20px;
}


.circleGhostTop{
opacity:1.0;
animation-name: ghostMark1;
animation-duration: .25s;
}


.circleGhostBottom{
opacity:1.0;
animation-name: ghostMark2;
animation-duration: .25s;
}


.circleGhostFinal{
opacity:1.0;
animation-name: ghostMark3;
animation-duration: .25s;
}


@keyframes ghostMark1 {
  0%   {opacity: 0.0;}
  33%  {opacity: 1.0;}
  66%  {opacity: 1.0;}
  100% {opacity: 1.0;}
}


@keyframes ghostMark2 {
  0%   {opacity: 0.0;}
  33%  {opacity: 0.0;}
  66%  {opacity: 1.0;}
  100% {opacity: 1.0;}
}


@keyframes ghostMark3 {
  0%   {opacity: 0.0;}
  33%  {opacity: 0.0;}
  66%  {opacity: 0.0;}
  100% {opacity: 1.0;}
}


.circleSegmentTop{
position:absolute;
left:0px;
top:0px;
width:50%;
height:58.5%;

}


.circleSegmentBottom{
position:absolute;
width:100%;
height:41.5%;
top:58.5%;

}


.circleSegmentFinal{
position:absolute;
top:0px;
left:50%;
width:50%;
height:58.5%;

}


.editorCircleTop{
width:100%;
height:100%;
background-image:url(../img/circleTop.png);
background-size:100% 100%;
background-repeat: no-repeat;
}



.editorCircleBottom{
width:100%;
height:100%;
background-image:url(../img/circleBottom.png);
background-size:100% 100%;
background-repeat: no-repeat;
}



.editorCircleFinal{
width:100%;
height:100%;
background-image:url(../img/circleFinal.png);
background-size:100% 100%;
background-repeat: no-repeat;
}




.opportunity{
position:absolute;
font-size: 22px;
top:5px;
left:-20px;
}





#rolloverLesson{
position:relative;
margin:0px auto;
width:500px;
height:200px;
}


#pointer{
position:absolute;
width:100px;
height:100px;
top:70px;
background-image: url("../img/pointer.png");
background-repeat: no-repeat;
background-size:100px 100px;
z-index:3;
transform: rotate(60deg);}



.editDemo{
position:absolute;
z-index:2;
width:500px;
height:100px;
cursor:pointer;
}


.opportunityDemo{
position:absolute;
font-size: 22px;
top:42px;
text-align:center;
width:500px;
}




.optimizationToast{
display:inline-block;
z-index:2;
background-color:#F9F9F9;
border-top-left-radius:9px;
border-top-right-radius:9px;
border-bottom-right-radius:9px;
border:1px solid #F9F9F9;
padding:12px 18px;
margin-left:60px;
margin-right:60px;
font-family: 'Lexend', sans-serif;
font-weight:200;
font-size:13px;
color:#000;
text-align:center;
overflow:visible;
filter: drop-shadow(0.5rem 0.5rem 0.7rem rgba(0, 0, 0, 0.8));
}




.pointerTriangleToast{
position:absolute;
left:-7px;
bottom:-8px;
width:0; 
height:0; 
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 12px solid #F9F9F9;
transform: rotate(320deg)
}


.upTriangleToast{
float:left;
margin:3px 3px 0px 0px;
width:0; 
height:0; 
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 12px solid #00CC66;
}




.percentageLiftToast{
float:left;
margin:-2px 3px 0px 0px;
color:#00CC66;
font-weight:bold;
font-size:17px;
}

.toastMessage{
float:left;
}



#optimizationToast1{
position:absolute;
top:295px;
margin-left:50px;
opacity:0.0;
animation-name: toast1;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-delay: 1s;
}


@keyframes toast1 {
  0%   {opacity: 0.0; top: 295px;}
  33%  {opacity: 1.0;}
  66%  {opacity: 1.0;}
  100% {opacity: 1.0; top: 235px;}
}



#optimizationToast2{
position:absolute;
top:370px;
margin-left:30px;
opacity:0.0;
animation-name: toast2;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-delay: 2s;
}


@keyframes toast2 {
  0%   {opacity: 0.0; top: 370px;}
  33%  {opacity: 1.0;}
  66%  {opacity: 1.0;}
  100% {opacity: 1.0; top: 310px;}
}


#optimizationToast3{
position:absolute;
top:445px;
margin-left:80px;
opacity:0.0;
animation-name: toast3;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-delay: 3s;
}


@keyframes toast3 {
  0%   {opacity: 0.0; top: 445px;}
  33%  {opacity: 1.0;}
  66%  {opacity: 1.0;}
  100% {opacity: 1.0; top: 385px;}
}



.whatItDoes{
  position:relative;
  width:100%;
  margin:0px auto;

}


.stepPanel{
  position:relative;
  width:90%;
  margin:20px auto 0px auto;
  padding:10px 0px 0px 10px;
}


.steps{
font-family: 'Lexend', sans-serif;
font-weight:600;
font-size:40px;
padding:10px 25px 25px 10px;
text-align:center;
color:#000;
}


.stepsProductPage{
font-family: 'Lexend', sans-serif;
font-weight:600;
font-size:25px;
padding:10px 25px 25px 10px;
text-align:center;
color:#000;
}

.explainBlock{
display:inline-block;
width:270px;
margin:10px auto;
overflow-x:hidden;
}


.emphasis{
color:#FF3F00;
}

.emphasisPositive{
color:#00CC66;
}


.checkmark {
  display: inline-block;
  width: 88px;
  height: 88px;
  -ms-transform: rotate(45deg); /* IE 9 */
  -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
  transform: rotate(45deg);
}

.checkmark_stem {
  position: absolute;
  width: 12px;
  height: 36px;
  background-color: #00CC66;
  left: 44px;
  top: 24px;
}

.checkmark_kick {
  position: absolute;
  width: 12px;
  height: 12px;
  background-color: #00CC66;
  left: 32px;
  top: 48px;
}


.emphasisLarge{
color:#FF3F00;
font-size:85px;
text-align: center;
}


.emphasisGray{
color:#999;
font-size:17px;
margin:0px 40px;
text-align: center;
display:inline-block;
}




.valueBanner{
font-family: 'Lexend', sans-serif;
font-weight:600;
font-size:20px;
text-align:center;
color:#FFF;
position:relative;
margin:0px;
background-color:#0C1446;
width:100%;
margin:150px 0px 0px 0px;
padding:30px 0px 150px 0px;
}

.valueBanner p{
  margin:40px 20px;
}


.howItWorksBlock{
position:relative;
margin:0px auto;
width:100%;
height:600px;
max-width:900px;
}

.howItWorksPanel{
position:absolute;
width:67%;
max-width:600px;
height:600px;
background-color:#FFF;
box-shadow: 3px 8px 10px 10px rgba(0, 0, 0, 0.1);
border-radius: 50px;
color:#71797E;
z-index:2;
}

.maxImitationContent{
max-width:600px;
margin:0px auto;
}

#demoPointer{
position:absolute;
top:550px;
left:67%;
width:100px;
height:100px;
background-image: url("../img/pointer.png");
background-repeat: no-repeat;
background-size:100px 100px;
z-index:6;
}

.whyItWorksForYouPanel{
float:right;
width:27%;
height:600px;
background-color:#FFF;
border-radius: 50px;
background-color:#0C1446;
}

.valuePoint{
  color:#FFF;
  font-family: 'Lexend', sans-serif;
  font-size:25px;
  padding:35px 10px 40px 10px;
  font-weight:bold;
  text-align:center;
  height:80px;
}

.imitationHero{
position:relative;
margin:0px 0px 20px 0px;
padding:40px 0px 20px 0px;
font-family: Times;
font-size: 50px;
text-align: center;
color:#FFF;
background-color:rgba(114,120,124,0.5);
overflow:hidden;
border-top-left-radius: 50px;
border-top-right-radius: 50px;
}

.imitationProductTitle{
padding:10px 50px;
font-family: Times;
font-size: 27px;
}


.imitationProductImage{
float:left;
margin:10px 30px 10px 50px;
width:30%;
max-width:220px;
height:220px;
background-color:rgba(114,120,124,0.15);
}


.imitationProductDesc{
float:left;
width:45%;
margin:10px 0px;
}

#placeHolderRow1{
width:80%;
}

#placeHolderRow2{
width:90%;
}

#placeHolderRow3{
width:95%;
}

#placeHolderRow4{
width:92%;
}

#placeHolderRow5{
width:98%;
}

#placeHolderRow6{
width:90%;
}

#placeHolderRow7{
width:50%;
}

.placeHolderRow{
height:20px;
background-color:rgba(114,120,124,0.15);
margin:8px 0px;
}

.imitationBuyButton{
margin:10px 50px 10px 50px;
float:right;
font-family: Times;
font-size: 18px;
font-weight: bold;
background-color:#6082B6;
padding:7px 18px;
border-radius:7px;
color:#FFF;
}

.imitationRelatedProduct{
margin:280px 50px 10px 50px;
}

.imitationRelatedZone1{
float:left;
width:30%;
}



#customerSubmitToast{
display:none;
position:absolute;
box-sizing: border-box;
margin-left:25%;
width:50%;
padding:30px;
z-index:5;
background-color:#00CC66;
border-radius:30px;
font-family: 'Lexend', sans-serif;
color:#FFF;
font-weight:700;
font-size:20px;
margin-top:20px;
border: solid 5px #000;
}


/*end universal styles */







/* Large devices (portrait tablets and large phones) */
@media only screen and (min-width: 599px) and (max-width: 1320px){

.howItWorksBlock{
position:relative;
margin:0px auto;
width:100%;
height:600px;
max-width:900px;
}

.howItWorksPanel{
position:absolute;
width:100%;
max-width:900px;
height:600px;
background-color:#FFF;
box-shadow: 3px 8px 10px 10px rgba(0, 0, 0, 0.1);
border-radius: 50px;
color:#71797E;
z-index:2;
}

#navigationPanelWrapper{
margin:0px 0px;
position:relative;
width: 100%;
margin:0px auto;
max-width:1280px;
}

#navigationPanel{
margin:0px 0px;
padding:0px 0px;
position:relative;
width: 100%;
height:130px;
}


#wrapper{
margin:0px 0px;
width: 100%;
font-family:arial;
max-width:1280px;
}






#logoTop{
position:relative;
margin:2px auto;
width:230px;
height:60px;
background-image: url("../img/Wordraze-Logo.png");
background-repeat: no-repeat;
background-size: 100% auto;
cursor:pointer;
}



#navLinkPanel{
position:relative;
width:287px;
margin:10px auto;
}


.navLink{
float:right;
font-family: 'Lexend', sans-serif;
font-weight:600;
display:inline-block;
color:#333;
text-align:center;
padding:5px 5px 0px 15px;
cursor:pointer;
font-size:14px;
}


.navLink a{
  color: #000;
  text-decoration: none; /* no underline */
}

.navLink a:visited{
  color: #000;
  text-decoration: none; /* no underline */
}


.navLink a:hover{
color:rgb(253,105,5);
}





#heroZone{
position:relative;
height:700px;
margin:0px 0px;
width:100%;
overflow:hidden;
}



.valuePropPanel{
position:absolute;
width:48%;
margin:10px 0px 0px 8px;
padding:15px 6px 0px 10px;
border-bottom: 1px #CCC solid;
border-top: 1px #CCC solid;
background-color:rgba(256,256,256,0.9);
z-index:3;
overflow:hidden;
}

.valueProp{
  width:90%;
  /* color:rgb(253,105,5);*/
  color:#FF3F00;
  text-align: left;
  font-family: 'Lexend', sans-serif;
  font-weight:600;
  font-weight:bold;
  font-size:26px;
  line-height:32px;
  margin:0px 0px;
}

.valuePropDesc{
  padding:20px 5px 0px 0px;
  text-align: left;
  font-family: 'Lexend', sans-serif;
  font-weight:200;
  color:#000;
  font-size:15px;
  line-height: 21px;
  margin:0px 0px;
}

.acquisitionButton{
  padding:10px 15px;
  text-align: center;
  font-family: 'Lexend', sans-serif;
  font-weight:600;
  color:#FFF;
  background-color:#FF3F00;
  font-size:15px;
  line-height: 21px;
  margin:20px 0px;
  width:37%;
  cursor:pointer;
  border-radius:6px;
}




.heroArtPanel{
position:absolute;
width:100%;
max-height:700px;
z-index:1;
margin:0px 0px;
overflow:hidden;
}


.heroArt{
position:relative;
margin:0px auto;
width:100%;
height:700px;
background-image:url(../img/writer_using_wordraze.jpg);
background-size:100% auto;
background-repeat: no-repeat;
background-position:top center;
overflow:hidden;

}

.intendedUse{
  position:relative;
  font-size:21px;
  text-align:left;
  margin:0px auto;
  width:70%;
  margin-top:10px;
}

  




} /* end large device styles */












/* Small devices (portrait tablets and large phones) */
@media only screen and (min-width: 0px) and (max-width: 600px){

.howItWorksBlock{
position:relative;
margin:0px auto;
width:100%;
height:600px;
max-width:600px;
}

.howItWorksPanel{
position:absolute;
width:100%;
max-width:600px;
height:600px;
background-color:#FFF;
box-shadow: 3px 8px 10px 10px rgba(0, 0, 0, 0.1);
border-radius: 50px;
color:#71797E;
z-index:2;
}


#navigationPanelWrapper{
margin:0px 0px;
position:relative;
width: 100%;
margin:0px auto;
max-width:1280px;
}

#navigationPanel{
margin:0px 0px;
padding:0px 0px;
position:relative;
width: 100%;
height:130px;
}


#wrapper{
margin:0px 0px;
width: 100%;
font-family:arial;
max-width:1280px;
overflow:hidden;
}



#logoTop{
position:relative;
margin:2px auto;
width:230px;
height:60px;
background-image: url("../img/Wordraze-Logo.png");
background-repeat: no-repeat;
background-size: 100% auto;
cursor:pointer;
}



#navLinkPanel{
position:relative;
width:287px;
margin:10px auto;
}


.navLink{
float:right;
font-family: 'Lexend', sans-serif;
font-weight:600;
display:inline-block;
color:#333;
text-align:center;
padding:5px 5px 0px 15px;
cursor:pointer;
font-size:14px;
}

.navLink a{
  color: #000;
  text-decoration: none; /* no underline */
}


.navLink a:visited{
  color: #000;
  text-decoration: none; /* no underline */
}



.navLink a:hover{
color:rgb(253,105,5);
}




#heroZone{
position:relative;
height:400px;
margin:0px 0px;
width:100%;
overflow:hidden;
}



.valuePropPanel{
position:absolute;
width:47%;
margin:12px 0px 0px 10px;
padding:10px 5px 10px 10px;
border-bottom: 1px #CCC solid;
border-top: 1px #CCC solid;
background-color:rgba(256,256,256,0.9);
z-index:3;
overflow:hidden;
}



.valueProp{
  width:90%;
  color:#FF3F00;
  text-align: left;
  font-family: 'Lexend', sans-serif;
  font-weight:600;
  font-weight:bold;
  font-size:28px;
  line-height:32px;
  margin:0px 0px;
}

.valuePropDesc{
  padding:10px 5px 0px 0px;
  text-align: left;
  font-family: 'Lexend', sans-serif;
  font-weight:200;
  color:#000;
  font-size:15px;
  line-height: 21px;
  margin:0px 0px;
}


.acquisitionButton{
  padding:10px 15px;
  text-align: center;
  font-family: 'Lexend', sans-serif;
  font-weight:600;
  color:#FFF;
  background-color:#FF3F00;
  font-size:14px;
  line-height: 21px;
  margin:10px 0px 0px 0px;
  width:60%;
  cursor:pointer;
  border-radius:6px;
}



.heroArtPanel{
position:absolute;
width:100%;
max-height:700px;
z-index:1;
margin:0px 0px;
overflow:hidden;
}


.heroArt{
position:relative;
margin:0px auto;
width:100%;
height:700px;
background-image:url(../img/writer_using_wordraze.jpg);
background-size:130% auto;
background-repeat: no-repeat;
background-position:top center;
overflow:hidden;

}


.intendedUse{
  position:relative;
  font-size:21px;
  text-align:left;
  margin:0px auto;
  width:60%;
  margin-top:10px;
}



#demoTextPanel{
  position:relative;
  width:90%;
  margin:50px 10px 40px 10px;
  float:left;
  height:100%;
}


}












/* Large computers (laptop and desktop computers) */
@media only screen and (min-width: 1321px){

  


#navigationPanelWrapper{
margin:0px 0px;
position:relative;
width: 70%;
margin:0px auto;
max-width:1280px;
}

#navigationPanel{
margin:0px 0px;
padding:20px 0px;
position:relative;
width: 100%;
height:70px;
}


#wrapper{
margin:0px 0px;
width: 70%;
margin:auto;
font-family:arial;
max-width:1280px;
}








#logoTop{
float:left;
width:300px;
height:80px;
background-image: url("../img/Wordraze-Logo.png");
background-repeat: no-repeat;
background-size: 100% auto;
cursor:pointer;
}



#navLinkPanel{
float:right;
width:50%;
}


.navLink{
font-family: 'Lexend', sans-serif;
font-weight:600;
float:right;
color:#333;
text-align:center;
padding:35px 0px 35px 40px;
cursor:pointer;
font-size:15px;
}


.navLink a{
  color: #000;
  text-decoration: none; /* no underline */
}


.navLink a:visited{
  color: #000;
  text-decoration: none; /* no underline */
}



.navLink a:hover{
color:rgb(253,105,5);
}




#heroZone{
position:relative;
}



.valuePropPanel{
position:relative;
display:inline-block;
width:45%;
margin:50px 0px;
padding:50px 0px 50px 0px;
border-bottom: 1px #CCC solid;
border-top: 1px #CCC solid;
background-color:rgba(256,256,256,0.8);
z-index:3;
}

.valueProp{
  width:90%;
	color:#FF3F00;
	text-align: left;
	font-family: 'Lexend', sans-serif;
  font-weight:600;
  font-weight:bold;
	font-size:68px;
  line-height:70px;
}

.valuePropDesc{
  padding:30px 10px 0px 0px;
  text-align: left;
  font-family: 'Lexend', sans-serif;
  font-weight:200;
  color:#333;
  font-size:25px;
line-height: 28px;
}

.acquisitionButton{
  padding:10px 15px;
  text-align: center;
  font-family: 'Lexend', sans-serif;
  font-weight:600;
  color:#FFF;
  background-color:#FF3F00;
  font-size:17px;
  line-height: 21px;
  margin:30px 0px 20px 0px;
  width:37%;
  cursor:pointer;
  border-radius:6px;
}



.heroArtPanel{
float:right;
width:45%;
height:460px;
}


.heroArt{
margin:25px 0px 0px 0px;
float:right;
width:563px;
height:460px;
background-image:url(../img/writer_using_wordraze.jpg);
background-size:100% 100%;
background-repeat: no-repeat;
border-radius: 50px;
}



.intendedUse{
  position:relative;
  font-size:21px;
  text-align:left;
  margin:0px auto;
  width:60%;
  margin-top:10px;
}




}/*end desktop width styles*/