@keyframes fadeInOpacity            {0% {opacity: 0;} 100% {opacity: 1;}}

.herocontainer                      {width:100%; min-height:700px; background-image:linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0)),url('/Images/HeroBG.jpg'); background-attachment: fixed; background-size: cover; background-position: center; background-repeat: no-repeat; padding:0px; z-index:999; position:relative; text-align:center; margin-bottom: 100px;}
.herocontainer nav ul               {display: flex; justify-content:space-evenly; list-style-type: none;}                    
.herocontent                        {text-align:center; position:relative; margin: 0px 0 40px 0;}
.herocontent p                      {margin: 80px 0 80px 0; color:white; font-size:25px; line-height: 1.5em}
.herocontent h1                     {padding:0 0 20px 0; color:white; font-size:50px; line-height:60px; margin-top:-50px;}
.herocontent .desktop               {display:block;}
.herocontent .mobile                {display:none;}        

.underline                          {position:absolute;margin-top:0px; margin-left:auto; margin-right:auto; transform: translateY(120px) translateX(30px); opacity:1; width:200px; animation-name: fadeInOpacity; animation-iteration-count: 1; animation-timing-function: ease-in; animation-duration: 1s;}        
.content                            {text-align:center; position:relative; z-index:0px;padding: 16px 0;}    

.codeexamplecontainer               {position:absolute; display:flex; width:100%; flex-direction:row; justify-self: center; justify-content:center; margin-top:0px;}        
.codeexample                        {height:200px; width:800px; padding:40px; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Helvetica Neue",Arial,sans-serif; min-width: 500px; background-color:black; border-radius: 20px;  position:relative;box-shadow:0px 5px 20px 5px rgba(0, 0, 0, .5); color:white; text-align:left;  line-height: 30px; border:10px solid white;}
.codeexample .tagoperator           {color:#199eef}
.codeexample .tagname               {color:#f07178}        
.codeexample .attr                  {color:#c792ea}
.codeexample .value                 {color:#b6e869}
.codeexample .mark                  {background-color: yellow; color: black;}                
.codeexample .arrow                 {position:absolute; width:100px; top:-80px;left:750px; animation-name: fadeInOpacity; animation-iteration-count: 1; animation-timing-function: ease-in; animation-duration: 1s;}
.codeexample .ctabutton             {position:absolute; right:0; bottom:0; margin:0 20px 20px 0; border:1px solid white; padding:10px; width:150px;  transition: background-color 0.3s linear, color 0.3s linear; border-radius: 5px; text-align:center;}

.codeexampleback                    {height:240px; width:840px; padding:20px 20px 20px 20px; min-width: 500px;  background-color:white; border-radius: 20px;  position:relative;box-shadow:0px 5px 20px 5px rgba(0, 0, 0, .5); color:black; text-align:left; line-height: 30px; border:10px solid white;}
.codeexampleback .ctabutton         {position:absolute; right:0; top:0; margin:-10px -10px 0px 0px; color:silver; border:1px solid silver; border-right:0px; border-top:0px;  padding:0 0 0 0; width:30px; height:30px;  transition: background-color 0.3s linear, color 0.3s linear; border-bottom-left-radius: 5px; border-top-left-radius: 0; border-bottom-right-radius: 0; border-top-right-radius: 20px; text-align:center;}
.codeexampleback .ctabutton:hover   {background-color:black; color: white; cursor:pointer}        
.codeexampleback .hiwbutton         {position:absolute; bottom:0; transform: translateY(-25%); margin-bottom:-15px;border:2px solid #1A374D; padding:5px; width:200px; transition: background-color 0.3s linear, color 0.3s linear; border-radius: 5px; text-align:center;left:0; right:0; margin-left:auto; margin-right:auto; background-color:white;}
.codeexampleback .hiwbutton:hover   {background-color:#1A374D; color: white; cursor:pointer}
.codeexampleback .stepcontainer     {display: flex; justify-content:space-around; list-style-type: none; flex-wrap: wrap;}
.codeexampleback .step              {border:2px solid #1A374D; border-radius: 5px;height:240px; min-width:200px; width:20%; text-align:center; position:relative}
.codeexampleback .steparrow         {position:absolute; left:-20px; top:20px; width:50px; height:200px;}
.codeexampleback .stepnumber        {position:absolute; left:-25px; top:20px; font-size:30px; top:50%; transform: translateY(-10px); color:silver}
.codeexampleback .info              {font-size:14px; margin:0 20px 0 20px; border:0px red solid; line-height:1.5em;}
.codeexampleback .icon              {width:40px; margin:20px 0 10px 0;}
.codeexampleback a                  {color:inherit; text-decoration: none;}

.features                           {margin-top:40px; padding-top:70px;;position:relative}    
.features h2                        {font-size:30px; color:#102230}
.featurecontainer                   {display:flex; justify-content:space-around; flex-direction: row; flex-wrap:wrap;}
.feature                            {width:300px; min-height:200px; border:0px red solid; margin: 20px;}
.feature h3                         {margin:0 0 15px 0;}        
.feature .icon                      {width:50px; padding:0px; margin:60px 0 70px 0; transition: transform 0.5s}
.feature .icon:hover                {transform: scale(5);}
.zoom                               {transform: scale(4.5);}

.calltoaction                       {background-color: #1A374D; color:white; margin:0 0 20px 0; padding:20px;background-image:linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0)),url('/Images/HeroBG.jpg'); background-attachment: fixed; background-size: cover; background-position: center; background-repeat: no-repeat; }
.calltoaction h2                    {font-size:30px; margin:20px 0 20px 0;}
.calltoaction p                     {padding:20px}
.calltoaction .ctabutton            {border:1px solid white; padding:15px; width:200px; margin:20px; transition: background-color 0.3s linear, color 0.3s linear; border-radius: 5px;}
.calltoaction .ctabutton:hover      {background-color:white; color: #1A374D; cursor:pointer}

.prices                             {background-color:white; margin:0px 0 0 0; padding:70px 30px 0px 30px; color:white;}
.prices h1                          {font-size:30px; color:#102230; margin:0 0 20px 0;}
.prices h2                          {font-size:50px;margin:0 0 30px 0; display:inline;}
.prices h3                          {font-size:20px;margin:20px 0 20px 0; font-weight:normal; color:#B1D0E0}
.prices p                           {color:black;margin:20px 0 20px 0;}
.pricecontainer                     {display:flex; width:100%; flex-direction:row; justify-content:center; margin-top:0px; flex-wrap:wrap; }
.price                              {position:relative; width:250px; min-height:400px; background-color:#1A374D; border-radius:20px; margin:20px; text-align:left; padding:30px; box-shadow:0px 5px 20px 5px rgba(0, 0, 0, .25); display:flex; flex-direction: column; align-items:stretch; justify-content:space-between;}
.price p                            {color:white; margin:0px 0 10px 0;}
.price ul                           {list-style: none;}
.price ul li:before                 {content: "\2714\0020";}

.price .ctabutton                   {border:1px solid white; padding:15px; width:auto; margin:20px 0 0 0; transition: background-color 0.3s linear, color 0.3s linear; border-radius: 5px; text-align:center;}
.price .ctabutton:hover             {background-color:white; color: #1A374D; cursor:pointer}        
.price .buttontransblue             {border:1px solid #102230}
.price .buttontransblue:hover       {background-color:#406882; color: white; }

.price strong                       {color:#B1D0E0}

.price.currentlevel                 {background-color:white;}
.price.currentlevel h2              {color:#1A374D}
.price.currentlevel h3              {color:#6998AB}
.price.currentlevel li              {color:#1A374D}
.price .currentlevelmarker          {width:180px; position:absolute; top:-5px; left:-15px;}
.price .currentleveltext            {position:absolute; right:0; top:0; margin-right:20px; margin-top:20px; color:#1A374D}

.testimonial                        {background-color: #1A374D; color:white; margin:0px 0 0 0; padding:20px;background-image:linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),url('/Images/QuoteBackground.jpg'); background-attachment: fixed; background-size: cover; background-position: center; background-repeat: no-repeat; }
.testimonial h2                     {font-size:30px; margin:20px 0 20px 0;}
.testimonial p                      {padding:20px}
.testimonial h6                     {font-size:11px; color:gray}
.testimonial .ctabutton             {border:1px solid white; padding:15px; width:200px; margin:20px; transition: background-color 0.3s linear, color 0.3s linear; border-radius: 5px;}
.testimonial .ctabutton:hover       {background-color:white; color: #1A374D; cursor:pointer}

.howitworks                         {min-height:200px; background-color:white; margin:0px 0 0 0; padding:60px 0 0px 0; color:black;}
.howitworks video                   {width:90%; margin:0; padding:0; display:block;}

.contactus                          {min-height:200px; background-color:#f4f4f4; margin:20px 0 0px 0; padding:20px 0 20px 0; color:black;}        
.contactus h1                       {font-size:30px; color:#102230; margin:0 0 20px 0;}        
.contactus h6                       {font-size:12px; font-weight:normal; line-height:1.5em; margin:20px 0 0 0;}        
.contactuscontainer                 {display:flex; justify-content:center; align-items:center top; width:100%;flex-direction: row; flex-wrap:wrap;}
.contactuscontainer .form           {border:0px red solid; width:450px; min-height:300px; padding:20px 40px 20px 20px; text-align:left;}
.contactuscontainer .info           {border:0px green solid;; width:450px; min-height:300px; padding:20px;  text-align:left;}
.contactus input[Type="text"]       {width:100%; margin: 10px; padding:20px; box-sizing:border-box; font-size:20px; font-family:inherit;}
.contactus input[Type="email"]      {width:100%; margin: 10px; padding:20px; box-sizing:border-box; font-size:20px; font-family:inherit;}
.contactus input[Type="submit"]     {width:auto; margin: 10px; padding:10px 20px 10px 20px; box-sizing:border-box; font-size:16px; font-family:inherit; border:1px solid #1A374D; transition: background-color 0.3s linear, color 0.3s linear; border-radius: 5px;}
.contactus input[Type="submit"]:hover{cursor:pointer}
.contactus textarea                 {width:100%; min-height:200px; margin: 10px; padding:20px; box-sizing:border-box; font-size:20px; font-family:inherit}
.contactus .icon                    {width:50px; padding:0px; margin:140px 0 70px 0; transition: transform 0.5s}
.contactus .zoom                    {transform: scale(7);}        


/*#####################################################################*/
/*# Mobile Styles (< 900 px screen width)                             #*/
/*#####################################################################*/
@media only screen and (max-width: 900px) 
{
.content                            {padding:0px 0 0 0;}
.features                           {margin-top:0px; padding-top:0px;position:relative}            

.codeexamplecontainer               {position:relative;display:flex; width:100%; flex-direction:row; justify-self: center; justify-content:center; margin-top:0px; margin-bottom:50px;}        
.codeexample                        {position:relative;height:; padding: 10px; width:auto; margin-left:0; margin-right:0;border:5px solid white; min-width:0; margin:50px 0 0 0; font-size:15px; overflow:; line-height:1.5em;}
.codeexample .arrow                 {width:80px; position:absolute; left:unset; right:0; margin-top:0px; margin-left:auto; margin-right:auto; transform: translateY(-5px) translateX(-50px);animation-name: fadeInOpacity; animation-iteration-count: 1; animation-timing-function: ease-in; animation-duration: 1s;}
.codeexample .ctabutton             {display:none; position:absolute; right:0; bottom:0; margin:0 20px 20px 0; border:1px solid white; padding:10px; width:150px;  transition: background-color 0.3s linear, color 0.3s linear; border-radius: 5px; text-align:center;}

.codeexampleback                    {display:none; height:240px; width:100%; padding:20px 20px 20px 20px; min-width: 0;  background-color:white; border-radius: 20px;  position:relative;box-shadow:0px 5px 20px 5px rgba(0, 0, 0, .5); color:black; text-align:left; line-height: 30px; border:10px solid white;}
.codeexampleback .ctabutton         {display:none; position:absolute; right:0; top:0; margin:-10px -10px 0px 0px; color:silver; border:1px solid silver; border-right:0px; border-top:0px;  padding:0 0 0 0; width:30px; height:30px;  transition: background-color 0.3s linear, color 0.3s linear; border-bottom-left-radius: 5px; border-top-left-radius: 0; border-bottom-right-radius: 0; border-top-right-radius: 20px; text-align:center;}
.codeexampleback .hiwbutton         {display:none; position:absolute; bottom:0; transform: translateY(-25%); margin-bottom:-15px;border:2px solid #1A374D; padding:5px; width:200px; transition: background-color 0.3s linear, color 0.3s linear; border-radius: 5px; text-align:center;left:0; right:0; margin-left:auto; margin-right:auto; background-color:white;}
.codeexampleback .step              {display:none; border:2px solid #1A374D; border-radius: 5px;height:240px; min-width:200px; width:20%; text-align:center; position:relative}
.codeexampleback .steparrow         {display:none; position:absolute; left:-20px; top:20px; width:50px; height:200px;}
.codeexampleback .stepnumber        {display:none; position:absolute; left:-25px; top:20px; font-size:30px; top:50%; transform: translateY(-10px); color:silver}
.codeexampleback .info              {display:none; font-size:14px; margin:0 20px 0 20px; border:0px red solid; line-height:1.5em;}
.codeplaceholder                    {display:none;}
.herocontainer                      {min-height:400px; background-image:linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)),url('/Images/HeroBG.jpg'); background-attachment: fixed; background-size: cover; background-position: center; background-repeat: no-repeat; padding:0px; z-index:999; position:relative; text-align:center; margin-bottom: 100px;}
.herocontent                        {text-align:center; position:relative; margin: 0px 0 40px 0; border:0px red solid;}
.herocontent h1                     {padding:40px 0 20px 0; color:white; font-size:40px; line-height:1.2em; margin-top:-20px; letter-spacing:-2px;}
.herocontent p                      {margin: 50px 20px 0px 20px; color:white; font-size:20px; line-height: 1.5em; letter-spacing:-1px;}
.herocontent .desktop               {display:none;}
.herocontent .mobile                {display:block;}
.underline                          {position:absolute;margin-top:0px; margin-left:auto; margin-right:auto; transform: translateY(180px) translateX(30px); opacity:1; width:150px; animation-name: fadeInOpacity; animation-iteration-count: 1; animation-timing-function: ease-in; animation-duration: 1s;}

.calltoaction                       {background-color: #1A374D; color:white; margin:0 0 20px 0; padding:20px;background-image:linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0)),url('/Images/HeroBG.jpg'); background-attachment: fixed; background-size: contain; background-position: center; background-repeat: no-repeat; }
.testimonial                        {background-color: #1A374D; color:white; margin:0px 0 0 0; padding:20px;background-image:linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),url('/Images/QuoteBackground.jpg'); background-attachment: fixed; background-size: cover; background-position: center; background-repeat: no-repeat; }

.howitworks                         {overflow:hidden; }
.howitworks video                   {width:200%; margin-left:-50%}

.features                           {padding-top:70px}
.prices                             {padding-top:70px}
.contactus                          {padding-top:70px}

textarea,
input[type="text"],
input[type="button"],
input[type="submit"]                {-webkit-appearance: none;border-radius: 0;}
}