body{font-family: 'Roboto','Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', Verdana, sans-serif; font-weight: 300;}
.page h2{font-size:2.125em; margin-bottom: 30px;}
#ZE-Logo{max-height: 50px;}
.justify{text-align:justify;}
.page h1, page h2, page p {font-weight:300;}


.navbar-nav li a {text-transform: uppercase; font-size: 12px; font-weight: 500; color: #898989; padding: 20px;}
.navbar-nav .search {background: transparent; border: 0; cursor: pointer; padding: 3px 5px; color: #898989;}
.navbar-light .navbar-toggler {color: #898989; border-color: #898989;}     
.search-input .container{padding:0;}    
#free-trial-btn a{color:#377b4f; padding: 7px 20px; border: 1px solid #499f68;}
#free-trial-btn a:hover{color:#fff; padding: 7px 20px;  background:#377b4f;}
.hero{position: relative;}
.hero h1{font-size: 2.5em; line-height: 1.25; color: #fff; padding: 20px; margin-bottom:0; font-weight:300;}
.hero-image{width:100%;}
.hero-images .container{padding:0 15px; position:relative;}
.hero-images .container-fluid{padding:0;}
.hero-text-box{position: absolute; max-width: 500px; top: 55px; left: 55px; padding: 35px 35px 15px 35px;}
.hero-text-box p{color:#fff; padding:0 0 20px; margin:0; font-size: 18px; text-align: left;}
.hero-text-box a{color:#fff; text-decoration:underline;}
.hero-text-box li{color:#fff;}
    
/* START Content slider styles */
#heros p {margin-bottom:0; line-height:1.375;}
#heros .image {float:left; margin-right:20px; border-radius:3px; border:solid 1px #aaa;}
#heros .title {font-size:1.25em; line-height:1.375;}
.heros-nav, .heros-nav .slick-dots {text-align:center;}
.heros-nav .slick-dots li {display:inline-block; height:10px; width:10px; padding:0; margin:0 15px; overflow:hidden; border-radius: 50%; border: 1px solid rgba(225,225,225,0.75); -moz-border-radius:75px; -webkit-border-radius: 75px;}
.heros-nav .slick-dots li button {background-color: rgba(204, 0, 102, 0); color:rgba(204, 0, 102, 0); overflow:hidden; border:none; content:none;}
.heros-nav .slick-arrow {width: 48px; height: 48px; position: absolute; top: 50%; margin-top: -31px; border-color: rgba(204, 0, 102, 0);}
.heros-nav .slick-dots li button:hover, .heros-nav .slick-dots li.slick-active button {background:#fff; color:#fff; cursor:pointer;}
.heros-nav .slick-prev{background-color: rgba(204,0,102,0); border-bottom: 3px solid rgba(225,225,225,0.75); border-left: 3px solid rgba(225,225,225,0.75); transform: rotate(45deg); left: 30px;}
.heros-nav .slick-prev:hover {background-color: rgba(204,0,102,0); border-bottom: 3px solid #fff; border-left: 3px solid #fff; transform: rotate(45deg); left: 30px; cursor:pointer;}
.heros-nav .slick-next {background-color: rgba(204,0,102,0); border-bottom: 3px solid rgba(225,225,225,0.75); border-left: 3px solid rgba(225,225,225,0.75); transform: rotate(-135deg);right: 30px;}
.heros-nav .slick-next:hover {background-color: rgba(204,0,102,0); border-bottom: 3px solid #fff; border-left: 3px solid #fff; transform: rotate(-135deg);right: 30px; cursor:pointer;}
.hero-overlay{position: absolute; width: 100%; height:100%; top: 0; text-align:center;}
.hero-overlay h1{color:#fff;}
/* **END Content slider styles */
         
/* START Testimonial styles */
.testimonials{background:#e6e6e6;}
.testimonials h2{text-align:center;}
blockquote {font-size: 20px; font-style: italic; max-width: 300px; margin: 0.25em 0; padding: 0.35em 40px; line-height: 1.45; position: relative; color: #404040;}
blockquote:before {font-family:'Lucida Grande';display: block; padding-left: 10px; content: "\201C"; font-size: 80px; position: absolute; left: -20px; top: -20px; color: #6a2b63;}
.author{font-size:16px; display: block; padding:20px 0 0 0;}
.author-location{font-size:12px; color:#404040;display: block;}
/* END Testimonial styles */

/* START Content slider styles */
.screening-dropdown .icon-circle-down, .backtesting-dropdown .icon-circle-down, .adv-backtesting-dropdown .icon-circle-down {display: inline; vertical-align: baseline;}
.screening-dropdown .icon-circle-down, .backtesting-dropdown .icon-circle-down, .adv-backtesting-dropdown .icon-circle-down {margin: 0 0.5em; transition: transform .2s ease-out;}
.rotate {transform: rotate(180deg);}
.icon {display: inline-block; width: 2.5em; height: 2.5em; fill: #4f4f4f; cursor:pointer;}
.icon-search {width: 1.25em; height: 1.25em;}
.screening-expanded, .backtesting-expanded, .adv-backtesting-expanded {display: none;}
.screening-expanded h2, .backtesting-expanded h2, .adv-backtesting-expanded h2 {text-align: left;}
/* END Content slider styles */

/* START ZR1-V-SP500-Percentage styles */
#zr1-v-sp500-percentage {float:none; color: #4f4f4f;}
#zr1-v-sp500-percentage .chart-title {font-size:22px; line-height:1.5;}
#zr1-v-sp500-percentage .canvas {max-width:300px; padding:32px 0 0; border:solid 1px #eeefee; margin:10px auto 40px; position:relative; background:linear-gradient(to bottom, transparent 96%, #eeefee 4%); background-size: 100% 30px;}
#zr1-v-sp500-percentage .canvas:before, #zr1-v-sp500-percentage .canvas:after {content:'30 25 20 15 10 5 0'; width:12px; position:absolute; top:-14px; font-size:10px; line-height:3em; color:#999;}
#zr1-v-sp500-percentage .canvas:before {left:-16px; text-align:right;}
#zr1-v-sp500-percentage .canvas:after {right:-16px; text-align:left;}
#zr1-v-sp500-percentage .bar {width:105px; margin:0 12px;}
#zr1-v-sp500-percentage .bar .value {top:33%; font-size:22px; line-height:1; font-weight:normal;}
#zr1-v-sp500-percentage .bar .label {font-size:16px; line-height:1.5; font-weight:normal;}
#zr1-v-sp500-percentage .caption {font-size:13px; line-height:1.5;}

#zr1-v-sp500-percentage #bar-sp500 {height:68px;}
#zr1-v-sp500-percentage #bar-zr1 {height:153px;}
#zr1-v-sp500-percentage #bar-zr1 .value {top:38%; font-size:28px;}
#zr1-v-sp500-percentage #bar-zr1 .label {width:160px; left:-30px}   
/* END ZR1-V-SP500-Percentage styles */

/* START Tips and Tricks styles */
.tips-n-tricks h2{font-size:1.5em; margin-bottom:0px;}
.tip{display:inline-block; margin-bottom:30px; width:100%;}
.tips-n-tricks .container{max-width:750px}
.tip a{color:#4f4f4f; text-decoration:none;}
.tip-thumb{width:90px; float:left; margin-right:30px;}
.tips-n-tricks h3{font-size:1.5em; margin:30px 0;}
.tips-n-tricks .image{margin-bottom:20px}
.indent {margin-left: 30px;}
/* END Tips and Tricks styles */


/* START Free Trial styles */
.textbox {width: 100%; height: 40px; font-size: 1.125em; border-radius: 5px; border: 1px solid #353531; margin: 5px 0px; padding-left: 10px;}
#submit {margin:0 auto; display:block; background:#499F68; color: #fff; border-radius:0; padding: 10px 30px;}
#submit:hover {text-decoration:underline;}
.footnote{text-align: center; margin: 15px 0; font-size: 10px; line-height:15px;}
/* END Free Trial styles */
    
.bg-gradient{background:-webkit-linear-gradient(0deg,#cccccc 0,#f8f8f8 100%); background:-moz-linear-gradient(0deg,#cccccc 0,#f8f8f8 100%); background:-o-linear-gradient(0deg,#cccccc 0,#f8f8f8 100%); background:-ms-linear-gradient(0deg,#cccccc 0,#f8f8f8 100%); background:linear-gradient(0deg,#cccccc 0,#f8f8f8 100%)}    
.sign-up{text-align: center; background:#f4f4f4;}
.sign-up .container{max-width:735px;}
.cta-btn a{color:#fff; padding: 7px 20px; background:#499F68;}
.cta-btn a:hover{color:#fff; padding: 7px 20px; background:#377b4f;}
.cta-btn-trial a{color:#377b4f; padding: 7px 20px; border: 1px solid #499f68;}
.cta-btn-trial a:hover{color:#fff; padding: 7px 20px; background:#377b4f;}
.img-center{text-align:center; max-width:800px; margin:0 auto;}
.img-center p{margin: 2px 0px 26px;}
.float-right{float:right; max-width:486px; margin-left: 120px; margin-bottom: 30px;}
.float-left{float:left; max-width:486px; margin-right: 120px; margin-bottom: 30px;} 
.download h2 {text-align:center;}
.download p {text-align:center; margin-bottom: 30px;} 
#formWrap{margin: 0 auto; max-width: 350px;}
.step-2 #submit {margin:30px auto;}
.step-3 p{text-align:left; margin-bottom:1rem;}
.step-3 .dl-image{width:50px; display:inherit; margin:0 auto; float:none;}
.expanded-content {overflow:hidden;}
.footer{background:#77b28c57; color:#353531; min-height:76px}
.footer p{color:#353531; font-size:.75em; margin:0;}

@media screen and (min-width:0) {
    #free-trial-btn{margin: 0 0 10px 20px;}
    #navbarSupportedContent{padding-top: 0px;}
     blockquote {max-width: 100%;} 
    .hero-text-box{position: static; max-width: 100%; background-color: none;}
    #hero-text-box-head{font-size:28px;}
    .hero-text-box p{color:#4f4f4f; padding:0 20px 20px;}
    .hero-text-box a{color:#4f4f4f;}  
    .hero h1{color:#4f4f4f;}
    .hero-images .container{padding:0;}
    #heros-nav1 {margin: 0 0 10px 0;}  
    .heros-nav .slick-arrow {display:none !important;}
    .heros-nav .slick-dots li {border: 1px solid #4f4f4f;}
    .heros-nav .slick-dots li button:hover, .heros-nav .slick-dots li.slick-active button {background:#4f4f4f; color:#4f4f4f;}
    .wrapper .container {padding:30px 15px;}
    .img-left, .column.text, .column.graphic {width:100%; display:block;}
    .img-right, .column.text, .column.graphic {width:100%; display:block;}
    .hero-overlay h1{padding:5px 10px; color:#fff; margin:0;} 
    .expand-container{text-align:center; padding-bottom:30px;}
    .dl-left p, .dl-right p{margin-right: 0; margin-bottom:1rem;}
    .dl-left .column.graphic{width: 20%; padding:0;}
    .dl-left .column.text{width: 100%; padding:0; margin-left: 10px;}  
    .dl-right .column.graphic{width: 20%; padding:0;}
    .dl-right .column.text{width: 100%; padding:0; margin-left: 10px;}
    .dl-image{width:45px; float:left; margin-right:15px; margin-bottom:30px;}
}

@media screen and (min-width:480px){
    #navbar-container{padding: 10px 15px;}
    .hero-overlay h1{padding:50px;} 
}

@media screen and (min-width:720px){
    .wrapper .container {padding:60px 30px; overflow:hidden;}
    .img-left .column.text {width:45%; float:right;}
    .img-left .column.graphic {width:45%; float:left; padding: 3% 0;}
    .img-right .column.text {width:45%; float:left;}
    .img-right .column.graphic {width:45%; float:right; padding: 7% 0;}
    .column.graphic .image {display:block; width:100%;}
}

@media screen and (min-width:768px) {
   .quotes{display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between;}
   .quote-box{width:100%;}
   .quote-box-first{width:100%; margin-left:7%;} 
   .hero-text-box{position: absolute; max-width: 356px; top: 20px; left: 20px; padding:15px 0px 0px; background-color: #000; background-color: rgba(0,0,0,0.85);}
   #hero-text-box-head{font-size:22px;}
   .hero-text-box p{color:#fff;}
   .hero-text-box a{color:#fff;}  
   .hero h1{font-size: 2.5em; padding: 20px; color:#fff;} 
   .hero-images .container{padding:0 15px;} 
   #heros-nav1 {position: relative; margin: -42px 0 19px;}
   .heros-nav .slick-arrow {display:inline-block !important;} 
   .heros-nav .slick-dots li {border: 1px solid rgba(225,225,225,0.75);}
   .heros-nav .slick-dots li button:hover, .heros-nav .slick-dots li.slick-active button {background:#fff; color:#fff;} 
   .hero-overlay h1{padding:75px; font-size:3.75em; margin:0;} 
   .download .container{max-width:800px}
   .dl-left{width:50%; float:left; margin-bottom:30px; text-align:center;}
   .dl-left p{text-align:left; margin-right: 0;}
   .dl-left .column.graphic{width: 20%; padding:0;}
   .dl-left .column.text{width: 80%; padding:0; margin-left: 0;}
   .dl-right{width:50%; float:right; margin-bottom:30px; text-align:center;}
   .dl-right p{text-align:left; margin-right: 0;}
   .dl-right .column.graphic{width: 20%; padding:0;}
   .dl-right .column.text{width: 80%; padding:0; margin-left: 0;}
   .dlcontainer{display:inline-block;}
   .dl-image{margin-right:30px;}
   #abt-img {margin-left:30px !important;}
}

@media screen and (min-width:989px) {
    #free-trial-btn{margin: 0 0 0 50px;}
    #navbarSupportedContent{padding-top: 9px;}
    blockquote {max-width: 300px;} 
    .hero-overlay h1{padding:120px; margin:0;}
   .bt-graphic{width:75% !important; margin:0 auto;}
   .expand-added{padding:30px !important;} 
   .expand-container{text-align:center; padding-bottom:60px; }
}

@media screen and (min-width:992px) {
    .hero-text-box{position: absolute; max-width: 500px; top: 55px; left: 55px; padding: 35px 35px 15px 35px;}
    #hero-text-box-head{font-size:28px;}
    #abt-img {margin-left:120px !important;}
}