.footer {
    position: relative;
    display: table;
}

.footer.sticky-footer {
    margin-top: 1px;
}

.index-create-button {
    margin-left: auto;
    margin-right: auto;
    margin-top: 200px;
}

body {
    background-color: #f9f9f9;
    /*overflow-x: hidden;*/
}

h1 {
    color: #464646;
    font-size: 50px;
    text-align: center;
}

.footer h4 {
    color: #4D4D4D;
}

p {
    color: #464646;
    font-size: 19px;
    max-width: 700px;
    margin: 0 auto;
    word-break: break-word;
}

span {
    word-break: break-word;
}

.feature-text {
    width: 100%;
    margin: 50px 0;
    text-align: center;
}

.al {}

.al72 {
    font-size: 72px;
}

.al36 {
    font-size: 36px;
}

.al18 {
    font-size: 18px;
}

.al24 {
    font-size: 24px;
}

.al16 {
    font-size: 16px;
}

.bg-cover {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50%;
}

#stage {
    margin-top: 52px;
    background-image: url(../images/index/homepage.jpg);
    margin-bottom: 0px;
    width: 100%;
    min-height: 758px;
    font-weight: 400;
    position: absolute;
    left: 0px;
    top:0px;   
    bottom: 0px;
    display: flex;
    flex-direction: column; 
}

#intro_view {
    width: 100%;
    min-height: auto;
    background-image: url(../images/index/homepage.jpg);
    background-position: 50%;
}

html[dir='rtl'] #intro_view .col-md-2,
html[dir='rtl'] #intro_view .col-md-5 {
    float: left !important;
}

.create-new,
#intro_view .title,
#intro_view .subtitle {
    color: #fff;
}

#intro_view .title {
    margin-top: 116px;
    max-width: 400px;
    margin-bottom: 0;
}

html[dir='rtl'] #intro_view .title,
html[dir='rtl'] #intro_view .subtitle {
    text-align: left !important;
    float: left;
    clear: both;
}

#intro_view .subtitle {
    margin: 30px 0 40px 0;
    font-size: 18px;
}

.create-new {
    height: 40px;
    background-color: #f89927 !important;
    line-height: 40px;
    padding: 0 15px;
    color: #fff !important;
    border: 0px;
    border-radius: 0px;
    text-transform: none;
}

html[dir='rtl'] #intro_view .create-new {
    float: left;
    clear: both;
}

#app_features {
    /*height: 1200px;*/
    position: relative;
    background-color: #fff;
}

#app_features .title {
    margin-top: 70px;
}

#app_features .subtitle {
    margin-bottom: 70px;
    line-height: 24px;
}

#app_features .line-break {
    margin: 40px 70px 15px;
}

#app_features .app-bg {
    position: relative;
    width: 518px;
    height: 315px;
    margin: auto;
    background-image: url(../images/index/apps.png);
}

#app_features .app-bg a {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 80px;
    height: 80px;
    margin: auto;
}

#stage .modal-video {
    height: 650px !important;
    width: 980px !important;
    position: absolute;
    top: 20px;
    bottom: auto;
    margin: auto;
}

#stage .modal-video .modal-content {
    background-color: #fff;
    border-style: none;
    border-radius: 0;
    outline: 0;
    box-shadow: 0 0px 0px #fff;
    padding: 55px 10px !important;
}

#app_features .feature {
    padding-left: 68px;
    padding-right: 0px;
    background-position: left top;
    background-repeat: no-repeat;
    background-size: 52px 60px;
    max-width: 300px;
    margin: 55px auto;
}

html[dir='rtl'] #app_features .feature {
    padding-right: 68px;
    padding-left: 0px;
    background-position: right top;
}

#app_features .feature .topic {
    margin-bottom: 15px;
    word-break: break-word;
}

#app_features .feature .description {
    word-break: break-word;
}

#app_features .feature1 {
    background-image: url(../images/index/feature1.png);
}

#app_features .feature2 {
    background-image: url(../images/index/feature2.png);
}

#app_features .feature3 {
    background-image: url(../images/index/feature3.png);
}

#app_features .feature4 {
    background-image: url(../images/index/feature4.png);
}

#app_features .feature5 {
    background-image: url(../images/index/feature5.png);
}

#app_features .feature6 {
    background-image: url(../images/index/feature6.png);
}

#app_features .feature2,
#app_features .feature4,
#app_features .feature6 {
    margin-top: 0px;
}

#how_it_works {
    width: 100%;
    background-image: url(../images/index/howitworks.jpg);
    background-color: #0e1110;
    color: #fff !important;
    background-size: cover;
    background-position: 50% 0;
}

#how_it_works .title {
    color: #fff;
    margin: 80px 0 40px;
}

#how_it_works .second-row {
    margin-bottom: 40px;
}

#how_it_works .third-row {
    margin-bottom: 66px;
}

#how_it_works .fourth-row {
    margin-bottom: 66px;
    text-align: center;
}

#how_it_works .step {
    padding-top: 135px;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 160px;
}

#how_it_works .step .counter {
    padding: 0 10px;
}

#how_it_works .step .desc {
    color: #fff;
}

#how_it_works .step1 {
    background-image: url(../images/index/works1.png);
}

#how_it_works .step1 .counter {
    color: #0069f2;
}

#how_it_works .step2 {
    background-image: url(../images/index/works2.png);
}

#how_it_works .step2 .counter {
    color: #aad04b;
}

#how_it_works .step3 {
    background-image: url(../images/index/works3.png);
}

#how_it_works .step3 .counter {
    color: #f89927;
}

#how_it_works .step4 {
    background-image: url(../images/index/works4.png);
}

#how_it_works .step4 .counter {
    color: #dfcbe3;
}

#how_it_works .step5 {
    background-image: url(../images/index/works5.png);
}

#how_it_works .step5 .counter {
    color: #da4b1e;
}

#check_out {
    background-color: purple;
    clear: both;
    overflow: hidden;
    padding: 75px 0;
    width: 100%;
}

#check_out .title {
    color: #FFF;
    margin-bottom: 70px;
}

#check_out .topic {
    font-size: 24px;
    margin-top: 10px;
    margin-bottom: 15px;
    font-weight: 500;
    line-height: 1.1;
}

#check_out .col-md-4 {
    padding-left: 10px;
    padding-right: 10px;
}

#check_out .checkOutRow {
    text-align: center;
    padding: 0 50px;
}

#check_out .topic,
#check_out .desc,
#check_out a {
    color: #FFF;
}

.index-see-others-img {
    width: 139px;
    height: 160px;
    margin-bottom: 25px;
}

#see_others_built {
    background-color: #EBEBEB;
}

#see_others_built .second-row {
    margin-bottom: 80px;
}

#see_others_built .title {
    margin: 80px 0 70px;
}

#see_others_built .app {
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 116px;
}

#see_others_built .app .topic {
    font-weight: 500;
    margin-bottom: 20px;
}

#see_others_built .app .desc {
    margin-bottom: 30px;
}

#see_others_built .line-break {
    margin: 70px 0 30px;
}

#do_more {
    background-color: #fff;
}

#do_more .doMore .title {
    margin-top: 40px;
}

#do_more .doMore .subtitle {
    margin: 20px auto 49px;
}

#do_more .customizeEnterpriseApp {
    margin-bottom: 50px;
}

#do_more .customizeEnterpriseApp .title {
    margin: 23px auto 40px;
}

#do_more table tr td {
    font-size: 16px;
    text-align: center;
}

#do_more table tr td:nth-child(1) {
    text-align: left;
}

#do_more table tr td:nth-child(2),
#do_more table tr td:nth-child(3) {
    width: 200px;
}

html[dir='rtl'] #do_more table tr td:nth-child(1) {
    text-align: right;
}

#do_more table tr .glyphicon-ok {
    color: #16A42A;
    text-align: center;
    font-size: 12px;
}

#do_more .step {
    display: inline-block;
    margin: 0 35px;
    position: relative;
    vertical-align: top;
    max-width: 185px;
}

#do_more .step p {
    font-size: 16px;
    font-weight: 500;
    max-width: 200px;
}

#do_more .step img {
    height: 126px;
    width: 185px;
}

#do_more .step4 img {
    height: 126px;
    width: 126px;
}

#do_more .arrow {
    position: absolute;
    top: 17px;
    left: 187px;
}

html[dir='rtl'] #do_more .arrow {
    right: 195px;
    left: 0;
}

#do_more .arrow span {
    font-size: 80px;
    color: #D9D9D9;
}

html[dir='rtl'] #do_more .arrow span {
    transform: scaleX(-1);
    transform: rotateY(180deg);
    display: inline-block;
}

#do_more .glyphicon-arrow-right {
    display: inline-block;
    width: 5%;
}

#learn_how .learn {
    display: inline-block;
    padding-left: 67px;
    padding-right: 0px;
    height: 60px;
    line-height: 60px;
    background-image: url(../images/index/light.png);
    background-position: left center;
    background-size: 48px;
    background-repeat: no-repeat;
    max-width: 100%;
}

html[dir='rtl'] #see_others_built .second-row .learn {
    padding-right: 67px;
    padding-left: 0px;
    background-position: right center;
}

#get_started {
    background-image: url(../images/index/createnewapp.jpg);
    padding: 80px 0;
    overflow: hidden;
}

#get_started .title,
#get_started .subtitle {
    color: #fff;
}

#get_started .upgradeSubtitle {
    margin-bottom: 20px;
}

#get_started .create-new {
    margin-top: 35px;
    margin-bottom: 43px;
}

#learn_how {
    margin-top: 30px;
}

.border-container {
    height: 468px;
    border: 2px dashed #ccc;
    position: absolute;
    top: 80px;
    bottom: 0;
    width: 92%;
    margin: 0 10px;
    padding: 220px 50px 0;
    text-align: center;
}

.border-container:hover {
    border: 2px dashed #ea5f44;
}

.border-container p {
    color: #000;
    height: 140px;
}

.border-container a {
    margin-top: 50px;
    color: #fff;
    padding: 10px 60px;
    border-radius: 30px;
    cursor: pointer;
}

.border-container a.active,
.border-container a.focus,
.border-container a:active,
.border-container a:focus,
.border-container a:hover,
.border-container a:active.focus,
.border-container a:active:focus {
    color: #fff;
    background-color: #ff8660;
}

.esri-logo-footer {
    padding-top: 130px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: initial;
}

a.index-try-arcgis-now:link {
    color: #FFFFFF;
    text-decoration: underline;
}

a.index-try-arcgis-now:hover {
    color: #FFFFFF;
    text-decoration: underline;
}

a.index-try-arcgis-now:visited {
    color: #FFFFFF;
    text-decoration: underline;
}

a.index-create-like-this:link {
    color: #2a7433;
    text-decoration: underline;
}

a.index-create-like-this:hover {
    color: #2a7433;
    text-decoration: underline;
}

a.index-create-like-this:visited {
    color: #2a7433;
    text-decoration: underline;
}

#modalOverlay.active {
    cursor: pointer;
}

#check_out .checkOutRow img {
    height: 160px;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 400;
}