body {
    overflow-x: hidden
}
main {
    position: relative;
    display: block
}
main h2[class^=common-Uppercase] {
    color: #32325d;
    margin-bottom: 20px
}
/** For Globe**/
.globe-section {
    background-color:#f6f9fc;
    min-height:1100px;
    border-top: 2px solid #eaeaea;
	 text-align: center;
}
.globe-section .upper-part .left-side {
    padding: 5%;
    padding-top: 0;
    border-right: 5px solid #ccc;
    margin-top: 5%;
}
.globe-section .lower-part {
    margin-top: 100px;
}
.mlinks {
    margin: 50px auto;
    font-weight: 500;
    text-transform: uppercase;
}
.former-container img {
    width: 100%;
    height: auto;
}
.former-angle-container {
    font-size: 40px;
    color: #cccccc;
    float:left;
}
.former-angle-container .fa {
    margin: auto 15px;
}
.upper-part .right-side {
    padding: 7%;
}
.forest-detail {
    /*padding: 7%;*/
}
.forest-detail h3,
.forest-detail h5 {
    text-transform: uppercase;
    margin: 25px auto;
}
.forest-detail h3 {
    font-weight: 700;
}
.forest-detail .mlinks span {
    padding-right: 20px;
    color: #50afbb;
}
.forest-detail .mlinks span .more_arrow {
    color: #50afbb;
    border: 1px solid #50afbb;
}
.globe-section .right-side {
    font-weight: 500;
}

.cif_globe_canv { display:none;}
.columns {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column
}
@media (min-width: 670px) {
    .columns {
        -ms-flex-direction: row;
        flex-direction: row;
        -ms-flex-pack: justify;
        justify-content: space-between
    }
}
.columns .left,
.columns .right {
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%
}
.intro-copy {
    max-width: 840px;
    margin: 0 auto
}
@media (min-width: 670px) {
    .intro-copy {
        text-align: center
    }
}
.angle-clip-container {
    position: relative;
    overflow: hidden
}

@keyframes roads {
    0% {
        transform: translateY(-650px)
    }
    to {
        transform: translateY(0)
    }
}
main header {
    position: relative;
    background: linear-gradient(-180deg, #f6bf4e 1%, #f9d281 23%, #fffdf3 71%);
    overflow: hidden
}
main header .stripes {
    position: absolute;
    width: 100%;
    height: 100%;
    top: -80px;
    transform: skewY(-12deg)
}
@media (min-width: 670px) {
    main header .stripes {
        top: -130px
    }
}
main header .stripes .stripe {
    position: absolute;
    height: 190px
}
main header .stripes .s1 {
    top: 0;
    left: 0;
    width: 30%;
    background: linear-gradient(90deg, #ffad5a, rgba(250, 175, 82, .25))
}
main header .stripes .s2 {
    top: 190px;
    left: 0;
    width: 38%;
    background: linear-gradient(90deg, #ffcd68, rgba(255, 199, 107, 0))
}
main header .stripes .s3 {
    top: 380px;
    right: 0;
    width: 36%;
    background: linear-gradient(90deg, hsla(46, 98%, 78%, 0), #ffda84)
}
main header .intro {
    margin-top: 190px;
    text-align: center;
    will-change: transform;
    z-index: 1;
    position: relative
}
main header .intro .common-PageTitle {
    color: #7c0e3e;
    font-weight: 300
}
main header .intro .common-Button--default {
    margin-top: 25px
}
main header .road-map {
    position: relative;
    width: 100%;
    height: 500px;
    perspective: 500px;
    -webkit-perspective: 500px;
    -webkit-mask-image: linear-gradient(-180deg, transparent, #000 35%);
    pointer-events: none
}
.globalContent {
    -ms-flex-positive: 1;
    flex-grow: 1
}

section.users {
    position: relative;
    /*padding: 120px 0 300px;*/
    z-index: 2;
    overflow: hidden;
    pointer-events: none;
}
section.users>* {
    pointer-events: all
}
section.users:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    /* bottom: 440px;background-color: #f6f9fc;transform: skewY(-12deg)*/
}
section.users .intro-copy {
    position: relative
}
section.users .intro-copy h2 {
    margin-bottom: 20px
}

section.users .globe {
    position: relative;
    height: 1000px;
    padding: 0;
    margin-bottom: 350px;
}
section.users .globe canvas {
    position: relative;
    width: 100%!important;
    height: auto!important
}
@media (max-width: 1000px) {
    section.users .globe canvas {
        -webkit-mask-image: linear-gradient(180deg, #000, #000 calc(100% - 40px), transparent 100%);
        mask-image: linear-gradient(180deg, #000, #000 calc(100% - 40px), transparent 100%)
    }
}
section.users .user-details {
    position: absolute;
    bottom: 50px;
    margin-top: 100px;
}
section.users .user-details .common-Card {
    display: block;
    width: 100%;
    padding: 0;
    /*margin-top: -30px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px*/
	background:#f6f9fc;
}
@media (min-width: 670px) {
    section.users .user-details .common-Card {
        display: -ms-flexbox;
        display: flex;
        border-bottom-left-radius: 6px
    }
}
section.users .user-details .common-Card .nav {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: absolute;
    width: 48px;
    height: 48px;
    top: 50vw;
    margin-top: -24px;
    border-radius: 50%;
    cursor: pointer
}
@media (min-width: 670px) {
    section.users .user-details .common-Card .nav {
        display: -ms-flexbox;
        display: flex;
        top: 50%
    }
}
/*
section.users .user-details .common-Card .nav.prev {
    left: -15px
}*/
section.users .user-details .common-Card .nav {
    margin-top: -250px;
}
section.users .user-details .common-Card .nav.next {
    right: 50px;
}
section.users .user-details .photos {
    position: relative;
    overflow: hidden;
    height: 50vw;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
    mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC)
}
@media (min-width: 670px) {
    section.users .user-details .photos {
        width: 50%;
        height: auto;
        min-height: 320px;
        border-top-right-radius: 0;
        border-bottom-left-radius: 4px
    }
}
section.users .user-details .photos .image {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-size: cover;
    background-position: 50%
}
section.users .user-details .photos .image.during {
    background-image: url('1.png')
}
section.users .user-details .photos .image.iris {
    background-image: url('1.png')
}
section.users .user-details .photos .image.metafused {
    background-image: url('1.png')
}
section.users .user-details .photos .image.pasilobus {
    background-image: url('1.png')
}
section.users .user-details .photos .image.tress {
    background-image: url('1.png')
}
section.users .user-details .photos .image.zumrod {
    background-image: url('1.png')
}
section.users .user-details .descriptions {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    /*padding: 30px 10px */
}
@media (min-width: 670px) {
    section.users .user-details .descriptions {
        /*width: 50%;
        padding: 50px 50px 45px 20px*/
		width:80%;
		margin:auto;
    }
}
section.users .user-details .descriptions:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #fff;
    left: 0;
    top: 0;
   /* transform: skew(-12deg);*/
    transform-origin: 0 0;
    pointer-events: none;
    display: none;
    border-top-right-radius: 10px
}
@media (min-width: 670px) {
    section.users .user-details .descriptions:after {
        display: block
    }
}
section.users .user-details .descriptions .mask-container {
    position: relative;
    width: 100%;
   /* -webkit-mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 20px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 20px), transparent 100%);*/
    z-index: 1;
	background: #f6f9fc;
}
section.users .user-details .descriptions .scroll-container {
    display: -ms-flexbox;
    display: flex;
    position: relative;
    -ms-flex-align: center;
    align-items: center;
    overflow: hidden;
    padding-bottom: 10px;
    margin-bottom: -10px;
    -webkit-mask-image: linear-gradient(180deg, #000, #000 calc(100% - 10px), transparent calc(100% - 10px), transparent 100%);
    mask-image: linear-gradient(180deg, #000, #000 calc(100% - 10px), transparent calc(100% - 10px), transparent 100%)
}
section.users .user-details .descriptions .scroll-container::-webkit-scrollbar {
    display: none
}
section.users .user-details .descriptions .scroll-container.scrollable {
    overflow: auto;
    -webkit-scroll-snap-type: mandatory;
    -webkit-overflow-scrolling: touch
}
section.users .user-details .descriptions .user {
    position: relative;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 100%;
    /*padding: 0 20px;*/
    -webkit-scroll-snap-coordinate: 0 0
}
section.users .user-details .logo {
    margin-bottom: 25px;
    will-change: transform
}
section.resources {
    position: relative;
    padding: 120px 0 130px;
    margin-top: -311px;
    z-index: 1
}
@media (min-width: 880px) {
    section.resources {
        padding-bottom: 180px
    }
}

.globalContent .container-fluid,
.globalContent .container-lg,
.globalContent .container-wide,
.globalContent .container-xl {
    margin-bottom:40px;
    padding: 0 20px;
    width: 100%;
	background: #f3f4f8;
}
.common-BodyText {
    font-weight: 400;
    font-size: 17px;
    line-height: 26px;
    color: #6b7c93;
}
.mphotos {
	position:absolute;
	right:0;
	top:-150px;
    padding: 10px;
    background: #fff;
    box-shadow: 1px 1px 50px #5a5a5a;
}



@keyframes bounce {
  from, 20%, 53%, 80%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transform: translate3d(0,0,0);
  }

  40%, 43% {
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    transform: translate3d(0,-4px,0);
  }
}

.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}
.bounce {
  animation-name: bounce;
  transform-origin: center bottom;
}