#bound-one {
  background: #d0d8db;
}

#bound-two {
}

#bound-three {
  background: #D0D6B3;
}

.scroll-bound {
  height: 500vh;
}
.scroll-bound .content {
  height: 100vh;
  padding-left: 0px;
  width: 100%;
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.scroll-bound video {
  width: 100%;
  min-height: auto;
}

.test-sticky{
  object-fit: fill;
    position: sticky;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
}

/* info 10 */
.tab-center{
  justify-content: center;
align-items: center;
margin: auto !important;

}
.tab-content{
  margin: auto;
  width: 80%;
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active{
color: #ffffff;
background-color: #01719b;
border-color: #dee2e6 #dee2e6 #fff;
}
.nav-tabs .nav-link{
font-size: 1.3em;
font-weight: 600;
border: none !important;
width: 88px;
}
.col-content{
background-color: #121212;
text-align: center;
padding: 10px;
border-radius: 10px;
margin: 10px;
}
.col-content2{
text-align: center;
font-size: .8em;
margin-top: -30px;
}

.content-inside-row {
 display: flex;
 width: 100%;
}
.content-inside-colum {
width: 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.content-inside-colum .box1 {
background-color: #a9a9a9;
color: white;
margin-top: 11px;
width: 52px;
text-align: center;
font-weight: 800;
padding: 10px 0px;
border-radius: 4px;
padding-left: 0;
}
.content-inside-colum .red {
background-color: #01719b;
color: white;
margin-top: 11px;
width: 52px;
text-align: center;
font-weight: 800;
padding: 10px 0px;
border-radius: 4px;
}
.content-inside-colum .box3 {
background-color: #282828;
color: white;
margin-top: 11px;
width: 52px;
text-align: center;
font-weight: 800;
padding: 10px 0px;
border-radius: 4px;
}
.title-nav{
background-color: #01719b;
color: #ffffff;
width: 360px;
margin: auto;
padding: 7px;
margin-top: 70px;
margin-bottom: 18px;
font-size: 21px;
text-align: center;
font-weight: 600 !important;
}
.detil{
width: 26px;
object-fit: contain;
margin: 0px 6px;
}
.center-2{
width: 80%;
margin: auto;
}
.sub-style{
font-size: 15px !important;
}
.bg33{
background: #e7e7e796;
padding: 1px 0px 32px 0px;
border-radius: 15px;
}
.img-left{
text-align: center;
padding-top: 50px;
}

.nav-link img{
  -webkit-filter: brightness(0.2);
  filter: brightness(0.2);
}
.nav-tabs .nav-link:focus, .nav-tabs .nav-link img:hover{
  -webkit-filter: brightness(1);
      filter: brightness(.8);
      -webkit-transition: .3s ease-in-out;
      transition: .3s ease-in-out;
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active img{
  -webkit-filter: brightness(1);
      filter: brightness(1);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover{
  border: none !important;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active{
    border: none !important;
    background:  none !important;
}
.nav-link{
  padding: 0.5rem 0rem !important;
}
.nav-tabs{
  border: none !important;
}
.p-box-title{
  background: #9d2c00;
    color: #fff;
    font-size: 1.1em;
    padding: 11px 20px;
    font-weight: 600;
    position: absolute;
    border-radius: 35px;
}
.p-box-title2{
  background: #9d2c00;
    color: #fff;
    font-size: 1.1em;
    padding: 11px 20px;
    font-weight: 600;
    border-radius: 35px;
}
.p-box{
  color: #fff;
    text-align: justify;
    line-height: 2;
    margin-top: 56px;
    padding: 0px 20px;
}

.name-box{
  justify-content: center;
    align-items: center;
}
.name-box p{
  margin: 51px 0px;
}
.t-hide {
  display: none;
position: absolute;
z-index: 99;
top: 143px;
width: 100px;
font-size: .6em;
}
.n-hide2:hover + .t-hide {
  display: block;
  color: white;
text-align: center;
padding: 5px 3px;
}


/* timeline 7*/
.heads-container{
    display: flex;
}
.all-heads{
    display: flex;
    width: 20%;
    justify-content: center;
    margin-left: 2px;
    margin-right: 2px;
    border: 1px solid gray;
    padding: 18px;
    align-items: center;
    flex-direction: column;
    position: relative;
    cursor: pointer;
}
.all-heads img{

}
.all-heads p{
    font-size: 17px;
    font-weight: 500;
}
.tooltiptext {
    visibility: hidden;
    position: absolute;
    background-color: #191919e8;
    top: 95px;
    width: 256px;
    z-index: 1;
    display: flex;
    justify-content: center;
    flex-direction: column;
    border-radius: 9px;
    padding: 18px;
    align-items: center;
}
.tooltiptext .number{
    color: white;
    font-weight: 500;
    font-size: 17px;
}
.tooltiptext .museum-name{
    color: white;
    font-weight: 500;
    font-size: 17px;
    margin-top: 12px;
}
.infob{
    text-align: center;
    padding-top: 30px;
    padding-bottom: 20px;
}
.heads-container{
    margin-top: 35px;
    margin-bottom: 46px;
}
.pointer-hand{
    display: flex;
    margin-top: 30px;
    margin-bottom: -27px;
}
.pointer-hand img{
    height: 22px;
    margin-left: 8px;
}

.pointer-hand p {
    font-weight: 500;
    color: #7c7c7c;
}

@media screen and (max-width: 800px)  {
        .image-container04 {
            display: flex;
            margin-top: 28px;
            margin-bottom: 30px;
            justify-content: center;
            /* flex-direction: column; */
        }
        .col02 {
            text-align: center;
            margin-left: 10px;
        }
        .image-container04 img {
            height: 100%;
            width: 100%;
            object-fit: contain;
            /* margin-left: 10px; */
        }
        .heads-container {
            display: flex;
            flex-direction: column;
        }
        .all-heads{
            width: 100%;
            margin-bottom: 10px;
        }

        .logopic {
            width: 75px;
        }
        .logo03 {
            left: 113px;
            top: 21px;
        }
        .logo03 img {
            width: 50px;
        }



    }

    @media screen and (max-width: 500px)  {
        .image-container04 {
            display: flex;
            margin-top: 28px;
            margin-bottom: 30px;
            justify-content: center;
            flex-direction: column;
        }
        .image-container04 img {
            height: 100%;
            width: 100%;
            object-fit: contain;
            margin-left: 0;
        }
        .col02{
            text-align: center;
        }
    }
/* train */




.map-container {
  position: relative;
  width: 80%;
    margin: auto;
}
@media screen and (max-width: 480px)  {
  .tippy-popper{

  }

  .mob{
    background: none !important;
        border: none !important;
        padding: 0px !important;
  }
}
.map-container img {
  width: 100%;
}
.map-container .point {
  background-image: url(../img/loc31.gif);
  cursor: pointer;
  position: absolute;
  background-repeat: no-repeat;
  background-size:contain;
  width: 53px;
    height: 38px;
  transition: all 0.3s ease;
  will-change: transform, box-shadow;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 rgba(0, 172, 193, 0.4);
}
.map-container .point:hover {
  animation: none;
  transform: translate(-50%, -50%) scale3D(1.35, 1.35, 1);
}
.map-container .p4 {
  top: 40%;
    left: 27%;
}
.map-container .p2 {
  top: 69%;
    left: 76%;
    background-image: url(../graphics/loc3.gif);
}
.map-container .p3 {
  top: 37%;
    left: 29.5%;
}
.map-container .p5 {
  top: 62%;
    left: 33.2%;
}

.map-container .p6 {
  top: 48%;
      left: 33.5%;
}
.map-container .p1 {
  top: 44%;
    left: 36%;
}
.map-container .p7 {
  top: 35%;
      left: 34.5%;
}
.map-container .p9 {
  top: 5%;
    left: 39%;
}
.map-container .p11 {
  top: 32%;
    left: 39.3%;
}
.map-container .p12 {
  top: 80%;
    left: 42%;
}
.map-container .p10 {
  top: 23%;
    left: 39%;
}

.map-container .p13 {
  top: 84%;
    left: 51%;
}
.map-container .p8 {
  top: 30%;
      left: 27.3%;
}

.map-container .p14 {
  top: 45%;
    left: 56%;
}

.map-container .p15 {
  top: 43%;
left: 60%;
}
.map-container .p16 {
  top: 68%;
left: 35%;
}
.map-container .p17 {
  top: 60%;
      left: 10%;

}
.map-container .p18 {
  top: 48%;
left: 16%;
}
.map-container .p19 {
  top: 53%;
      left: 24%;
}
.map-container .p20 {
  top: 27%;
left: 67%;
}
.map-container .p21 {
  top: 19%;
    left: 74%;

}
.map-container .p22 {
  top: 63%;
    left: 66%;
}
.map-container .p23 {
  top: 62%;
    left: 68%;
    background-image: url(../graphics/loc3.gif);
}
.map-container .p24 {
  top: 54%;
left: 69%;
background-image: url(../graphics/loc3.gif);

}
.map-container .p25 {
  top: 52%;
      left: 70%;
}
.map-container .p26 {
  top: 43%;
    left: 70%;
    background-image: url(../graphics/loc3.gif);

}
.map-container .p27 {
  top: 41%;
    left: 71%;
}
.map-container .p28 {
  top: 33%;
left: 76%;
background-image: url(../graphics/loc3.gif);

}
.map-container .p29 {
top: 36%;
    left: 74%;
}
.map-container .p30 {
  top: 25%;
left: 88%;
background-image: url(../graphics/loc3.gif);

}
.map-container .p31 {
  top: 25%;
      left: 91%;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 172, 193, 0.5);
  }
  70% {
    box-shadow: 0 0 0 25px rgba(0, 172, 193, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 172, 193, 0);
  }
}
.title2{
  font-size: 2em;
color: #fff;
background: #04101c;
padding: 4px 10px;
border-radius: 5px;
}





/* video */

.timeline {
  position: relative;
}
.timeline::before {
  content: "";
  background: #C5CAE9;
  width: 5px;
  height: 95%;
  position: absolute;
  left: 50%;
  top: 87px;
  transform: translateX(-50%);
}

.timeline-item {
  width: 100%;

}
.timeline-item:nth-child(even) .timeline-content {
  float: right;
}
.timeline-item:nth-child(even) .timeline-content .date {
  right: auto;
  left: 0;
}
.timeline-item:nth-child(even) .timeline-content::after {
  content: "";
  position: absolute;
  border-style: solid;
  width: 0;
  height: 0;
  top: 30px;
  left: -15px;
  border-width: 10px 15px 10px 0;
  border-color: transparent #04101c transparent transparent;
}
.timeline-item::after {
  content: "";
  display: block;
  clear: both;
}

.timeline-content {
  position: relative;
  width: 45%;
  border-radius: 4px;
  background: #04101c;
  box-shadow: 0 20px 25px -15px rgba(0, 0, 0, 0.3);
}
.timeline-content p{
  text-align: justify;
  padding: 17px 30px;
      direction: ltr;
      color: #fff;
}

.timeline-content::after {
  content: "";
  position: absolute;
  border-style: solid;
  width: 0;
  height: 0;
  top: 30px;
  right: -15px;
  border-width: 10px 0 10px 15px;
  border-color: transparent transparent transparent #04101c;
}

.timeline-img {
  width: 30px;
  height: 30px;
  background: #3F51B5;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  margin-top: 25px;
  margin-left: -15px;
}


.timeline-card {
  padding: 0 !important;
}
.timeline-card p {

}
.timeline-card a {
  margin-left: 20px;
}
.timeline-item .timeline-img-header1 {
  background: linear-gradient(rgba(0, 0, 0, 0), rgb(0 0 0 / 85%)), url(../graphics/icon/1.jpg) center center no-repeat;
  background-size: cover;
}
.timeline-item .timeline-img-header2 {
  background: linear-gradient(rgba(0, 0, 0, 0), rgb(0 0 0 / 85%)), url(../graphics/icon/2.jpg) center center no-repeat;
  background-size: cover;
}
.timeline-item .timeline-img-header3 {
  background: linear-gradient(rgba(0, 0, 0, 0), rgb(0 0 0 / 85%)), url(../graphics/icon/3.jpg) center center no-repeat;
  background-size: cover;
}
.timeline-item .timeline-img-header4 {
  background: linear-gradient(rgba(0, 0, 0, 0), rgb(0 0 0 / 85%)), url(../graphics/icon/4.jpg) center center no-repeat;
  background-size: cover;
}
.timeline-item .timeline-img-header5 {
  background: linear-gradient(rgba(0, 0, 0, 0), rgb(0 0 0 / 85%)), url(../graphics/icon/5.jpg) center center no-repeat;
  background-size: cover;
}
.timeline-item .timeline-img-header6 {
  background: linear-gradient(rgba(0, 0, 0, 0), rgb(0 0 0 / 85%)), url(../graphics/icon/6.jpg) center center no-repeat;
  background-size: cover;
}
.timeline-item .timeline-img-header7 {
  background: linear-gradient(rgba(0, 0, 0, 0), rgb(0 0 0 / 85%)), url(../graphics/icon/7.jpg) center center no-repeat;
  background-size: cover;
}
.timeline-item .timeline-img-header8 {
  background: linear-gradient(rgba(0, 0, 0, 0), rgb(0 0 0 / 85%)), url(../graphics/icon/8.jpg) center center no-repeat;
  background-size: cover;
}


.timeline-img-header, .timeline-img-header1, .timeline-img-header2, .timeline-img-header3, .timeline-img-header4, .timeline-img-header5, .timeline-img-header6, .timeline-img-header7, .timeline-img-header8 {
  height: 200px;
  position: relative;
  margin-bottom: 20px;
}
.timeline-img-header h2 , .timeline-img-header1 h2, .timeline-img-header2 h2, .timeline-img-header3 h2, .timeline-img-header4 h2, .timeline-img-header5 h2, .timeline-img-header6 h2, .timeline-img-header7 h2, .timeline-img-header8 h2{
  color: #FFFFFF;
  position: absolute;
  bottom: 5px;
  left: 20px;
}

blockquote {
  margin-top: 30px;
  color: #757575;
  border-left-color: #3F51B5;
  padding: 0 20px;
}

.date {
  background: #154e8b;
  display: inline-block;
  color: #FFFFFF;
  padding: 10px;
  position: absolute;
  top: 0;
  right: 0;
      direction: ltr;
}

@media screen and (max-width: 768px) {
  .timeline::before {
    left: 50px !important;
  }
  .timeline .timeline-img {
    left: 50px;
  }
  .timeline .timeline-content {
    max-width: 100%;
    width: auto;
    margin-left: 70px;
  }
  .timeline .timeline-item:nth-child(even) .timeline-content {
    float: none;
  }
  .timeline .timeline-item:nth-child(odd) .timeline-content::after {
    content: "";
    position: absolute;
    border-style: solid;
    width: 0;
    height: 0;
    top: 30px;
    left: -15px;
    border-width: 10px 15px 10px 0;
    border-color: transparent #f5f5f5 transparent transparent;
  }
}


/* video */


[class^="swiper-button-"],
.swiper-container-horizontal
  > .swiper-pagination-bullets
  .swiper-pagination-bullet,
.swiper-container-horizontal
  > .swiper-pagination-bullets
  .swiper-pagination-bullet::before {
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.swiper-container {
  width: 100%;
  height: auto;
  -webkit-transition: opacity 0.6s ease;
  transition: opacity 0.6s ease;
}
.swiper-container.swiper-container-coverflow {
  margin-top: 60px;
}
.swiper-container.loading {
  opacityx: 0;
  visibilityx: hidden;
}
.swiper-container:hover .swiper-button-prev,
.swiper-container:hover .swiper-button-next {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
}

.swiper-slide {
  background-position: center;
  background-size: cover;
}
.swiper-slide img {
  position: absolute;
  width: 100%;
  height: auto;
}
.swiper-slide .content {
  position: absolute;
  top: 40%;
  left: 0;
  width: 50%;
  padding-left: 5%;
  color: #fff;
}
.swiper-slide .content .title {
  font-size: 2.6em;
  font-weight: bold;
  margin-bottom: 30px;
}
.swiper-slide .content .caption {
  display: block;
  font-size: 13px;
  line-height: 1.4;
}
.ratioWrapper {
  position: relative;
  width: 100%;
  height: 0;
  background-color: #000;
  padding-top: 56%;
}
.ratioWrapper img {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.slide-caption {
  font-family: helvetica;
  color: white;
  text-transform: lowercase;
  letter-spacing: 2px;
  font-size: 15px;
  padding-top: 10px;
  text-align: center;
}

[class^="swiper-button-"] {
  width: 44px;
  opacity: 0;
  visibility: hidden;
}

.swiper-button-prev {
  -webkit-transform: translateX(50px);
  transform: translateX(50px);
}

.swiper-button-next {
  -webkit-transform: translateX(-50px);
  transform: translateX(-50px);
}

.swiper-container-horizontal
  > .swiper-pagination-bullets
  .swiper-pagination-bullet {
  margin: 0px 9px;
  position: relative;
  width: 12px;
  height: 12px;
  background-color: #fff;
  opacity: 0.5;
  visibility: hidden;
}
.swiper-container-horizontal
  > .swiper-pagination-bullets
  .swiper-pagination-bullet::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  border: 0px solid #fff;
  border-radius: 50%;
}
.swiper-container-horizontal
  > .swiper-pagination-bullets
  .swiper-pagination-bullet:hover,
.swiper-container-horizontal
  > .swiper-pagination-bullets
  .swiper-pagination-bullet.swiper-pagination-bullet-active {
  opacity: 1;
}
.swiper-container-horizontal
  > .swiper-pagination-bullets
  .swiper-pagination-bullet.swiper-pagination-bullet-active::before {
  border-width: 1px;
}

@media (max-width: 1023px) {
  .swiper-container {
    height: auto;
  }
  .swiper-container.swiper-container-coverflow {
    margin-top: 0;
  }

  .slide-caption {
    font-size: 12px;
  }
}

/* **************
  Disable Click Events on Previous and Next Slide
************* */

.swiper-slide-next {pointer-events: none;}
.swiper-slide-prev {pointer-events: none;}


/* **************
 Active Slide Class
.swiper-slide-active {}
************* */

/* **************
  VIDEO WRAPPER
************* */

.videoWrapper {
  position: relative;
  width: 100%;
  height: 0;
  background-color: #000;
  padding-top: 56%;
}

.videoIframe {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
}

.videoPoster {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  cursor: pointer;
  border: 0;
  outline: none;
  background-position: 50% 50%;
  background-size: 100% 100%;
  background-size: cover;
  text-indent: -999em;
  overflow: hidden;
  opacity: 1;
  -webkit-transition: opacity 800ms, height 0s;
  -moz-transition: opacity 800ms, height 0s;
  transition: opacity 800ms, height 0s;
  -webkit-transition-delay: 0s, 0s;
  -moz-transition-delay: 0s, 0s;
  transition-delay: 0s, 0s;
}
.videoWrapperActive .videoPoster {
  opacity: 0;
  height: 0;
  -webkit-transition-delay: 0s, 800ms;
  -moz-transition-delay: 0s, 800ms;
  transition-delay: 0s, 800ms;
}
.videoIframe {
  position: absolute;
  top: 0;
}
/* *********
  SVG PLAY BUTTON
********** */

.stroke-dotted {
  stroke-dasharray: 4, 5;
  stroke-width: 1px;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-animation: spin 4s infinite linear;
  animation: spin 4s infinite linear;
  -webkit-transition: opacity 1s ease, stroke-width 1s ease;
  transition: opacity 1s ease, stroke-width 1s ease;
}
.stroke-solid {
  stroke-dashoffset: 0;
  stroke-dasharray: 300;
  stroke-width: 4px;
  -webkit-transition: stroke-dashoffset 1s ease, opacity 1s ease;
  transition: stroke-dashoffset 1s ease, opacity 1s ease;
  opacity: 0;
}
.vid-icon {
  -webkit-transition: -webkit-transform 200ms ease-out;
  transition: -webkit-transform 200ms ease-out;
  transition: transform 200ms ease-out;
  transition: transform 200ms ease-out, -webkit-transform 200ms ease-out;
}

.play-vid:hover .stroke-dotted {
  stroke-width: 4px;
  opacity: 1;
}
.play-vid:hover .stroke-solid {
  opacity: 1;
  stroke-dashoffset: 300;
}
.play-vid:hover .icon {
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
  opacity: 1;
}
.play-vid {
  cursor: pointer;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  opacity: 0.85;
  width: 110px;
  height: 110px;
}
@-webkit-keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}



.blog .carousel-indicators {
  left: 212px;
  top: auto;

}

/* The colour of the indicators */
.blog .carousel-indicators li {
    background: #a3a3a3;
    border-radius: 50%;
    width: 8px;
    height: 8px;
}

.blog .carousel-indicators .active {
background: #707070;
}
.owl-stage, .owl-item{
  width: 100%!important;
}
.owl-item{
  margin-bottom: 20px

}


/* infoooooooooo 12*/



a {

    -webkit-transition: all 250ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
    -moz-transition: all 250ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
    -ms-transition: all 250ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
    -o-transition: all 250ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
    transition: all 250ms cubic-bezier(0.230, 1.000, 0.320, 1.000);

    text-decoration: none;
}



/* List styles */

.list-1 {

    -webkit-transform-style: preserve-3d;
    -moz-transform-stle: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;

    text-transform: uppercase;
    position: relative;
    margin-left: -140px;
    top: 20%;
}

.list-1 a {

    display: block;
    color: #fff !important;
    font-size: 1.2em;
}

.list-1 a:hover {
    text-indent: 20px;
}

.list-1 dt, .list-1 dd {

    text-indent: 10px;
    line-height: 55px;
    background: #E0FBAC;
    margin: 0;
    height: 55px;
    width: 441px;
    color: #fff;
}

.list-1 dt {

    /* Since we're hiding elements behind here, we need it in 3d */
    -webkit-transform: translateZ(0.3px);
    -moz-transform: translateZ(0.3px);
    -ms-transform: translateZ(0.3px);
    -o-transform: translateZ(0.3px);
    transform: translateZ(0.3px);
background: #6f020f !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    font-size: 15px;
}

.list-1 dd {

    line-height: 35px;
    font-size: 11px;
    height: 35px;
    margin: 0;
}

/* UI */

.toggle {

    -webkit-transform: translateZ(100px);
    -moz-transform: translateZ(100px);
    -ms-transform: translateZ(100px);
    -o-transform: translateZ(100px);
    transform: translateZ(100px);

    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
    border-radius: 3px;

    text-transform: uppercase;
    line-height: 50px;
    margin-left: -70px;
    margin-top: -20px;
    background: #2b2b2b;
    text-align: center;
    font-size: 14px;
    position: absolute;
    z-index: 1;
    height: 50px;
    top: 8%;
    width: 140px;
    color: #fff !important;
    left: 50%;
}

.toggle:hover {

    background: #6f020f;
}

/* No CSS 3D support warning */
.warning {

    -webkit-transform: translateZ(2px);
    -moz-transform: translateZ(2px);
    -ms-transform: translateZ(2px);
    -o-transform: translateZ(2px);
    transform: translateZ(2px);

    background: rgba(255,255,255,0.6);
    position: fixed;
    display: none;
    z-index: 999;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
}

.warning .message {

    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
    border-radius: 5px;
    text-align: center;
    margin-left: -150px;
    margin-top: -60px;
    line-height: 1.5;
    background: #222;
    font-size: 12px;
    position: absolute;
    padding: 10px;
    width: 280px;
    color: #fff;
    left: 50%;
    top: 50%;
}

.warning .message h1 {

    font-weight: 300;
    font-size: 14px;
}

.warning .message a {

    text-decoration: none;
    color: #3a3a3a;
}

/* Individual styles */

.sashimi dt, .sashimi dd, .sashimi a { background: #3a3a3a; }
.nigiri dt, .nigiri dd, .nigiri a { background: #3a3a3a; }
.maki dt, .maki dd, .maki a { background: #3a3a3a; }
.sasa dt, .sasa dd, .sasa a { background: #3a3a3a; }


.sashimi a:hover { background: #565857; }
.nigiri a:hover { background: #565857; }
.maki a:hover { background: #565857; }
.sasa a:hover { background: #565857; }


.nigiri {

/*  -webkit-transform: perspective(1200px) rotateY(40deg) !important;
  -moz-transform: perspective(1200px) rotateY(40deg) !important;
  -ms-transform: perspective(1200px) rotateY(40deg) !important;
  -o-transform: perspective(1200px) rotateY(40deg) !important;
   transform: perspective(1200px) rotateY(40deg) !important; */
  text-align: center;
  -webkit-transform-origin: 79% 25%;
  -moz-transform-origin: 110% 25%;
  -ms-transform-origin: 110% 25%;
  -o-transform-origin: 110% 25%;
  transform-origin: 77% 65%;
  left: 52px;
  width: 45%;
  float: left;
  margin: auto;
}

.maki {

/*    -webkit-transform: perspective(600px) translateZ(1px) !important;
    -moz-transform: perspective(600px) translateZ(1px) !important;
    -ms-transform: perspective(600px) translateZ(1px) !important;
    -o-transform: perspective(600px) translateZ(1px) !important;
    transform: perspective(600px) translateZ(1px) !important;*/
    text-align: center;
    left: 0;
    float: left;
    width: 41%;
    margin: auto;
}

.sasa {

  /*  -webkit-transform: perspective(600px) translateZ(1px) !important;
    -moz-transform: perspective(600px) translateZ(1px) !important;
    -ms-transform: perspective(600px) translateZ(1px) !important;
    -o-transform: perspective(600px) translateZ(1px) !important;
    transform: perspective(600px) translateZ(1px) !important;*/
    text-align: center;
    left: 0;
    top: 25px;
    width: 49%;
    float: left;
    margin: auto;
}

.sashimi {

  /*  -webkit-transform: perspective(1200px) rotateY(-40deg) !important;
    -moz-transform: perspective(1200px) rotateY(-40deg) !important;
    -ms-transform: perspective(1200px) rotateY(-40deg) !important;
    -o-transform: perspective(1200px) rotateY(-40deg) !important;
    transform: perspective(1200px) rotateY(-40deg) !important;*/
    text-align: center;
    -webkit-transform-origin: -10% 25%;
    -moz-transform-origin: -10% 25%;
    -ms-transform-origin: -10% 25%;
    -o-transform-origin: -10% 25%;
    transform-origin: -10% 25%;
        left: 66px;
        top: 25px;
        float: left;
        margin: auto;
        width: 32%;
}
.demo{
}
.title-color{
  background-color: #111 !important;
  font-size: 1.2em;
    font-weight: 600;
}

.title-color2{
  background-color: red !important;
}



/* الخمس دعائم*/
@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,700);
.clearfix {
  zoom: 1;
}
.clearfix:before, .clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
}


#wrapper {
  display: block;
  width: 90%;
  margin: 50px auto !important;
  opacity: 1!important;
}

.slider-outer {
  display: block;
  width: 100%;
  height: 250px;
  position: relative;
  -webkit-perspective: 1600px;
  -moz-perspective: 1600px;
  -o-perspective: 1600px;
  -ms-perspective: 1600px;
}
.slider-outer .slider-inner {
  display: block;
  width: 100%;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  -ms-transition: all 0.3s linear;
  -webkit-transform-origin: 50% 100%;
  -moz-transform-origin: 50% 100%;
  -o-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
}
.slider-outer .slider-inner.rotate.two {
  -webkit-transform: rotateX(-90deg) translateZ(250px);
  -moz-transform: rotateX(-90deg) translateZ(250px);
  -o-transform: rotateX(-90deg) translateZ(250px);
  -ms-transform: rotateX(-90deg) translateZ(250px);
}
.slider-outer .slider-inner.rotate.three {
  -webkit-transform: rotateX(-180deg) translateY(-250px) translateZ(250px);
  -moz-transform: rotateX(-180deg) translateY(-250px) translateZ(250px);
  -o-transform: rotateX(-180deg) translateY(-250px) translateZ(250px);
  -ms-transform: rotateX(-180deg) translateY(-250px) translateZ(250px);
}
.slider-outer .slider-inner.rotate.four {
  -webkit-transform: rotateX(-270deg) translateY(-250px);
  -moz-transform: rotateX(-270deg) translateY(-250px);
  -o-transform: rotateX(-270deg) translateY(-250px);
  -ms-transform: rotateX(-270deg) translateY(-250px);
}
.slider-outer .slide {
  display: block;
  width: 100%;
  height: 250px;
  position: absolute;
  background: white;
  background-color: #6f020f;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#6f020f), to(#6f020f));
  background-image: -webkit-linear-gradient(top, #6f020f, #6f020f);
  background-image: -moz-linear-gradient(top, #6f020f, #6f020f);
  background-image: -o-linear-gradient(top, #6f020f, #6f020f);
  background-image: linear-gradient(to bottom, #6f020f, #6f020f);
  padding: 27px;
  color: #4ECDC4;
  overflow: hidden;
  -webkit-transform-origin: 0% 0%;
  -moz-transform-origin: 0% 0%;
  -o-transform-origin: 0% 0%;
  -ms-transform-origin: 0% 0%;
}
.slider-outer .slide .slide-title {
  display: block;
    position: relative;
    font-size: 2em;
    font-weight: 500;
    z-index: 12;
    text-align: left;
}
.slider-outer .slide i img{
  top: -33px;
    width: 31%;
    position: absolute;
    left: -27px;
}
.slider-outer .slide.top {
  background: #556270;
  background-color: #46505c;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#556270), to(#46505c));
  background-image: -webkit-linear-gradient(top, #556270, #46505c);
  background-image: -moz-linear-gradient(top, #556270, #46505c);
  background-image: -o-linear-gradient(top, #556270, #46505c);
  background-image: linear-gradient(to bottom, #556270, #46505c);
  -webkit-transform: rotateX(90deg) translateY(-250px);
  -moz-transform: rotateX(90deg) translateY(-250px);
  -o-transform: rotateX(90deg) translateY(-250px);
  -ms-transform: rotateX(90deg) translateY(-250px);
}
.slider-outer .slide.back {
  background: #FF6B6B;
  color: white;
  background-color: #ff4747;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#FF6B6B), to(#ff4747));
  background-image: -webkit-linear-gradient(top, #FF6B6B, #ff4747);
  background-image: -moz-linear-gradient(top, #FF6B6B, #ff4747);
  background-image: -o-linear-gradient(top, #FF6B6B, #ff4747);
  background-image: linear-gradient(to bottom, #FF6B6B, #ff4747);
  -webkit-transform: rotateX(180deg) translateY(-250px) translateZ(250px);
  -moz-transform: rotateX(180deg) translateY(-250px) translateZ(250px);
  -o-transform: rotateX(180deg) translateY(-250px) translateZ(250px);
  -ms-transform: rotateX(180deg) translateY(-250px) translateZ(250px);
}
.slider-outer .slide.bottom {
  background: #4ECDC4;
  background-color: #36c1b7;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#4ECDC4), to(#36c1b7));
  background-image: -webkit-linear-gradient(top, #4ECDC4, #36c1b7);
  background-image: -moz-linear-gradient(top, #4ECDC4, #36c1b7);
  background-image: -o-linear-gradient(top, #4ECDC4, #36c1b7);
  background-image: linear-gradient(to bottom, #4ECDC4, #36c1b7);
  color: white;
  -webkit-transform: rotateX(-90deg) translateZ(250px);
  -moz-transform: rotateX(-90deg) translateZ(250px);
  -o-transform: rotateX(-90deg) translateZ(250px);
  -ms-transform: rotateX(-90deg) translateZ(250px);
}

#nav {
  display: block;
  position: relative;
  width: 100%;
  margin-top: 27px;
  z-index: 10;
}
#nav ul {
  display: block;
  padding: 0;
  margin: 0 0 0;
  list-style: none;
  width: 230px;
  margin: 0 auto;
  text-align: left;
}
#nav ul li {
  display: block;
  float: left;
  margin-right: 10px;
  font-size: 18px;
}
#nav ul li:nth-of-type(4) {
  margin-right: 0;
}
#nav ul li a.btn {
  display: block;
  width: 40px;
  height: 40px;
  color: white;
  border: 1px solid white;
  border-radius: 30px;
  font-weight: 300;
  line-height: 35px;
  text-align: center;
  text-decoration: none;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
}
#nav ul li a.btn:focus, #nav ul li a.btn:hover {
  color: #ffffff !important;
    border-color: #000000 !important;
  background-color: #6f020f !important;
}

#nav ul li a.btn:active {
  color: #C44D58;
  border-color: #6f020f !important;
}
#nav ul li a.btn.focus {
  color: #fff;
  border-color: #a20014;
}
.slide-title p{
      width: 65%;
  font-size: .7em;
    padding-top: 10px;
    color: #fff;
}

/* جراف الخمسية */


.card33 {
  background-color: black;
  width: 250px;
  height: 300px;
  margin: auto;
  border-radius: 10px;
  perspective: 1500;
  transition: transform 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transform-style: preserve-3d;
  box-shadow: 5px 5px 24px 0px rgba(0, 0, 0, 0.2);
}
@media (min-height: 600px) {
  .card33 {
    width: 484px;
    height: 440px;
  }
}
.card33 h2, .card33 h3, .card33 P {
  transform: translateZ(2px);
  color: white;
  font-size: 30px;
  line-height: 30px;
  margin: 0;
  font-weight: 300;
  padding: 0;
  transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}
@media (min-height: 600px) {
  .card33 h2, .card33 h3, .card33 P {
    line-height: 40px;
  }
}
.card33 h2 {
  margin: 20px 0 0 0;
}
.card33 h3 {
  margin: 10px 0 40px 0;
}
@media (min-height: 600px) {
  .card33 h3 {
    margin: 20px 0 40px 0;
  }
}
.card33 P {
  margin: 0px 0 30px 0;
  font-size: 16px;
}
@media (min-height: 600px) {
  .card33 P {
    margin: 0px 0 40px 0;
    font-size: 21px;
  }
}
.card33 .chart {
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  perspective: none !important;
  transform: translateZ(2px);
  transition: transform 0.5s ease-in-out;
}
.card33 .photo {
  position: absolute;
  transform: translateZ(1px);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("../graphics/info-bg.jpg") no-repeat center center;
  background-size: cover;
  border-radius: 10px;
  transition: transform 0.5s ease-in-out;
  overflow: hidden;
}
.card33 .photo:after {
  position: absolute;
  content: " ";
  display: block;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgb(0 0 0 / 56%);
  transition: background-color 0.5s ease-in-out;
}
.card33 .bar {
  will-change: height;
  width: 15px;
  height: 1px;
  background-color: white;
  transform: translateX(-7.5px) rotateX(-90deg) rotateY(-45deg);
  transform-origin: 100% 100%;
  transition: height 0.5s ease-in-out, margin 0.5s ease-in-out, transform 0.5s ease-in-out;
  transform-style: preserve-3d;
  margin: 6px;
  position: relative;
  background: linear-gradient(to bottom, #feffff 0%, #ddf1f9 0%, #a0d8ef 100%);
}
@media (min-height: 600px) {
  .card33 .bar {
    margin: 10px;
    width: 25px;
    transform: translateX(-12.5px) rotateX(-90deg) rotateY(-45deg);
  }
}
.card33 .bar:after {
  display: block;
  content: "";
  height: 100%;
  width: 15px;
  position: absolute;
  top: 0;
  right: -15px;
  background-color: grey;
  transform: rotateY(90deg);
  transform-origin: 0% 50%;
  background: linear-gradient(to bottom, #feffff 0%, #85d7f7 0%, #4c8596 100%);
}
@media (min-height: 600px) {
  .card33 .bar:after {
    width: 25px;
    right: -25px;
  }
}
.card33 .bar:before {
  display: block;
  content: "";
  height: 15px;
  width: 15px;
  position: absolute;
  top: -15px;
  left: 0;
  background-color: white;
  transform: rotateX(90deg);
  transform-origin: 0% 100%;
  color: white;
  text-align: center;
  font-size: 10px;
  line-height: 14px;
  padding: 0;
  transition: color 0.3s ease-in-out;
}
@media (min-height: 600px) {
  .card33 .bar:before {
    width: 25px;
    height: 25px;
    top: -25px;
    font-size: 12px;
    line-height: 18px;
  }
}
.card33 .bar.bar1:before {

}
.bar1 p{
  opacity: 1 !important;
    position: absolute;
    left: -9px;
    top: -18px;
    width: 140px;
    text-align: center;
    font-size: 14px;
    line-height: 1.5;
}
.bar2 p{
  opacity: 1 !important;
    position: absolute;
    left: 19px;
    top: -7px;
    width: 140px;
    text-align: center;
    font-size: 14px;
    line-height: 1.5;
}
.bar3 p{
  opacity: 1 !important;
    position: absolute;
    left: -39px;
    top: -16px;
    width: 140px;
    text-align: center;
    font-size: 14px;
    line-height: 1.5;
}
.bar4 p{
  opacity: 1 !important;
    position: absolute;
    left: -56px;
    top: -17px;
    width: 140px;
    text-align: center;
    font-size: 14px;
    line-height: 1.5;
}


.card33 .bar span {
  position: absolute;
      transform: rotateZ(-90deg);
      border-radius: 2px;
      transform-origin: 0% 100%;
      top: 72px;
      white-space: nowrap;
      text-align: left;
      left: 28px;
      font-weight: 600;
      padding: 5px;
      color: black;
      font-size: 13px;
      opacity: 0;
      transition: opacity 0.5s ease-in-out;
}
@media (min-height: 600px) {
  .card33 .bar span {
    font-size: 13px;
  }
}

.details .card33 {
  transform: rotateX(60deg) translateY(150px);
  box-shadow: 0px 30px 40px 0px rgba(0, 0, 0, 0.75);
}
.details .card33 .chart {
  transform: translateZ(40px) translatey(50px);
}
.details .card33 .bar {
  transform: translateX(-7.5px) rotateX(-90deg) rotateY(-25deg);
}
@media (min-height: 600px) {
  .details .card33 .bar {
    transform: translateX(-12.5px) rotateX(-90deg) rotateY(-25deg);
  }
}
.details .card33 .bar.bar1 {
  height: 110px;
    transition-delay: 0.3s;
    margin-top: -101px;
}
.details .card33 .bar.bar2 {
  height: 265px;
transition-delay: 0.2s;
margin-top: -255px;
}
.details .card33 .bar.bar3 {
  height: 265px;
transition-delay: 0.2s;
margin-top: -255px;
}
.details .card33 .bar.bar4 {
  height: 160px;
      transition-delay: 0s;
      margin-top: -151px;
}
.details .card33 .bar.bar5 {
  height: 52.5px;
  transition-delay: 0.1s;
  margin-top: -52.5px;
}
.details .card33 .bar.bar6 {
  height: 52.5px;
  transition-delay: 0.2s;
  margin-top: -52.5px;
}
.details .card33 .bar.bar7 {
  height: 75px;
  transition-delay: 0.3s;
  margin-top: -75px;
}
.details .card33 .bar span {
  opacity: 1;
  transition-delay: 0.3s;
}
.details .card33 .bar:before {
  color: black;
}
.details .card33 .photo {
  transform: translateZ(20px);
}
.details .card33 .photo:after {
  background-color: rgba(0, 50, 100, 0.8);
}
.details .card33 h2 {
  opacity: 0;
  transform: translateZ(40px) translateY(-100px);
}
.details .card33 p {
  opacity: 0;
  transform: translateZ(40px) translateY(-80px);
}
.details .card33 h3 {
  transform: translateZ(60px) translateY(100px);
}

.background {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: linear-gradient(120deg, rgba(50, 150, 100, 0.4), rgba(0, 0, 100, 0));
}
.background:before, .background:after {
  position: absolute;
  content: " ";
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(0deg, rgba(0, 0, 200, 0.4), rgba(0, 0, 200, 0));
}
.background:after {
  background: linear-gradient(240deg, rgba(150, 50, 50, 0.4), rgba(0, 0, 200, 0));
}

.info {
  color: white;
  position: absolute;
  bottom: 0px;
    right: 50px;
    text-align: left;
}


/* moon Train */


.container5 {
  direction: ltr;
    position: relative;
    width: 100%;
    height: 553px;
    margin: 0px auto 30px auto;
  /*  background: #595055;*/
    overflow: hidden;
    z-index: -5;
/*  box-shadow: 0 0 25px #2b2628; */
/*   transform: scale(1.5); */
}

.moon {
  width: 100px;
  height: 100px;
  margin: 40px 0 80px 80px;
  border-radius: 50%;
  background: #fff8d7;
  box-shadow: 0 0 70px 70px rgba(255,248,216, 0.2);
}

.cloud-container {
  opacity: 0.6
}

.cloud,
.cloud:before,
.cloud:after {
  border-radius: 35px;
  background: rgb(145,133,132);
}

.cloud {
  display: inline-block;
  vertical-align: top;
  width: 100px;
  height: 30px;
  border-radius: 50px 35px 35px 15px;
  position: relative;
}

.cloud:before,
.cloud:after {
  content:'';
  display: block;
  position: absolute;
}

.cloud:before {
  width: 40px;
  height: 45px;
  left: 12px;
  bottom: 0;
}

.cloud:after {
  width: 40px;
  height: 50px;
  right: 16px;
  bottom: 0;
}

.cloud:nth-child(1){
  position: absolute;
  top: 180px;
  left: -450px;
}

.cloud:nth-child(2){
  position: absolute;
  top: 80px;
  left: -230px;
}

.cloud:nth-child(4){
  position: absolute;
  top: 50px;
  left: 230px;
}

.cloud:nth-child(5) {
  position: absolute;
  top: 140px;
  right: 100px;
}

.cloud {
    animation: cloudmove 50s linear infinite backwards;
}

@keyframes cloudmove {
  0% { transform: translateX(-450px); }
  100% { transform: translateX(1090px); }
}

.stars {
  width: 100%;
}

.star {
  display: inline-block;
  position: relative;
  animation: twinkle 7s -1s infinite;
}

.star:nth-child(even){
  animation: twinkle 7s 2s infinite;
}

@keyframes twinkle {
  0% { opacity: 1; }
  60% { opacity: 0.2; }
}

.star:before,
.star:after{
  content: '';
  display: block;
  width: 3px;
  height: 10px;
  background: #b0a69b;
  border-radius: 45%;
}

.star:before {
  transform: rotate(-45deg);
  position: absolute;
  top: 0;
}

.star:after {
  transform: rotate(45deg);
}

.star:nth-child(1){
  transform: translate(60px, -210px);
}

.star:nth-child(2){
  transform: translate(180px,-110px);
}

.star:nth-child(3){
  transform: translate(210px,-215px);
}

.star:nth-child(4){
  transform: translate(370px,-15px);
}

.star:nth-child(5){
  transform: translate(440px,50px);
}

.star:nth-child(6){
  transform: translate(440px,-190px);
}

.star:nth-child(7){
  transform: translate(-5px,20px);
}


.mountain {
  width: 490px;
  height: 490px;
  margin: 10px auto 0;
  background: linear-gradient(-225deg, #796f74, #534a4f 50%, #4a4246 50%);
  border-radius: 60px;
  transform: rotate(-45deg);
  position: relative;
  z-index: -2;
}

.train-container {
  position: absolute;
  bottom: -40px;
}

.train {
  width: 1450px;
  animation: move 8s -1.5s linear infinite forwards;
}

@keyframes move {
  0% {transform: translateX(600px);}
  100% { transform: translateX(-1450px); }
}

.train-car {
  display: inline-block;
  vertical-align: top;
  height: 70px;
  width: 240px;
  border: 1px solid #71656a;
  border-top: 2px solid #978a8e;
  background: #50464b;
  border-radius: 11px;
  padding-top: 18px;
  padding-left: 18px;
}

.head-car,
.end-car{
  width: 210px;
  border-left: 2px solid #978a8e;
  border-top-left-radius: 200px;
  padding-left: 25px;
}

.end-car {
  border-top-left-radius: 11px;
  border-top-right-radius: 200px;
  padding-left: 10px;
  padding-right: 25px;
}

.windows,
.door {
  display: inline-block;
}

.windows {
  width: 80px;
  height: 50px;
}

.head-car .windows,
.end-car .windows{
  width: 130px;
}

.w-left,
.w-right,
.head-car-window,
.end-car-window{
  display: inline-block;
  width: 37px;
  height: 26px;
  border-radius: 2px;
  background: #ffc72f;
/*   vertical-align: top; */
}

.head-car-window,
.end-car-window{
  width: 25px;
  border-top-left-radius: 25px;
  margin-right: 15px;
  position: relative;
}

.end-car-window {
  border-top-left-radius: inherit;
  border-top-right-radius: 25px;
  margin-left: 15px;
  margin-right: 0;
}

.head-car-window:after,
.end-car-window:after{
  content: '';
  display: block;
  width: 5px;
  height: 26px;
  background: #554b50;

  position: absolute;
  right: -12px;
}

.end-car-window:after {
  left: -12px;
}

.door {
  background: #675e62;
  width: 25px;
  height: 50px;
  padding: 4px 5px 0;
  vertical-align: top;
  margin: 0 5px;
}

.end-car .door {
  margin: 0 6px;
}

.door:before{
  content: '';
  display: block;
  width: 15px;
  height: 20px;
  background: #53494f;

}

.train-track {
  position: relative;
  background: #000;
  width: 100%;
  height: 270px;
}

.ledge {
  height: 20px;
  width: 100%;
/*   background: white; */
  border-bottom: 3px solid #392e34;
  margin-bottom: 40px;
}

.pillar {
  overflow-x: hidden;
  position: absolute;
overflow-y: hidden;
margin-top: -38px;
}

.pillar > div{
  background: #534a4f;
  height: 186px;
  border-radius: 200px 200px 0 0;
  display: inline-block;
}
.pillar .p2-title{
  color: #fff;
    text-align: center;
    padding-left: 70px;
    font-weight: 600;
    font-size: 1.2em;
}

.pillar-left {
  width: 160px;
      margin-left: 67px;
      margin-right: 16px;
}
.pillar-middle p,
.pillar-right p,
.pillar-left  p{
  text-align: center;
    padding-top: 23px;
    color: #fff;
    direction: ltr;
    font-size: 18px;
}

.pillar-middle,
.pillar-right,
.pillar-left {
  border-right: 5px solid #968b8e;
}

.pillar-middle {
  width: 171px;
  margin-right: 17px;
}

.pillar-right {
  width: 160px;
  border-right-width: 8px;
}

.desc {
  margin-bottom: 30px;
  text-align: center;
  color: #d3c5b2;
  line-height: 1.5;
}

.desc a,
.desc a:visited {
  font-weight: bold;
  color: #d3c5b2;
}



/* shadow */
.repo1{
  margin:0;
  background:url(../images/img6.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
  width: 100%;
  height: 80vh;
  background-position: center;
}
.repo2{
  margin:0;
  background:url(../images/img7.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
  width: 100%;
  height: 80vh;
  background-position: center;
}

.repo3{
  margin: 0;
      background: url(../images/img8.jpg);
      background-size: cover;
      background-repeat: no-repeat;
      overflow: hidden;
      width: 100%;
      height: 80vh;
      background-position: center;
}
.spotlight{
  cursor:none;
  position:absolute;
  top:0px; left:0px;
  height:200px;
  width:200px;
  border-radius:50%;
  background:transparent;
  box-shadow:0 0 0 2000px rgba(0,0,0,.85);
}

.ha{
-webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}
/* last info */




.container .card{
    position: relative;
    cursor: pointer;
    width: 70% !important;
    background: none !important;
}

.container .card .face{
  width: 221px;
height: 180px;
    transition: 0.5s;
}

.container .card .face.face1{
    position: relative;
    background: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    transform: translateY(80px);
}

.container .card:hover .face.face1{
    background: #a20014;
    transform: translateY(0);
}

.container .card .face.face1 .content{
    opacity: 0.2;
    transition: 0.5s;
    padding-left: 0px;
    padding-top: 17px;
}

.container .card:hover .face.face1 .content{
    opacity: 1;
}

.container .card .face.face1 .content img{
    max-width: 100px;
}

.container .card .face.face1 .content h3{
    margin: 10px 0 0;
    padding: 0;
    color: #fff;
    text-align: center;
    font-size: 1.5em;
}

.container .card .face.face2{
    position: relative;
    height: 100px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
    transform: translateY(-100px);
}

.container .card:hover .face.face2{
    transform: translateY(0);
}

.container .card .face.face2 .content p{
    margin: 0;
    padding: 0;
    font-size: 1.3em;
    font-weight: 500;
}

.face2 .content{
  padding-left: 0px;
    margin-bottom: 0px;
}

.container .card .face.face2 .content a{
    margin: 15px 0 0;
    display:  inline-block;
    text-decoration: none;
    font-weight: 900;
    color: #333;
    padding: 5px;
    border: 1px solid #333;
}

.container .card .face.face2 .content a:hover{
    background: #333;
    color: #fff;
}


/* title */


.st0{fill:#fff}
.st2{fill:#242424}
.st3{fill:#303132}
.st4,.st6{
  fill:#fff;
  stroke:#b3dcdf;
  stroke-miterlimit:10
}
.st6{
  stroke:#5d89af;
  stroke-width:2
}
.st7,.st8,.st9{
  stroke:#f1f5f8;
  stroke-miterlimit:10
}

.st7{
  stroke-width:5;
  stroke-linecap:round;
  fill:none
}
.st8,.st9{
  fill:#000000;
}
.st9{
  fill:none
}
.st10{
stroke: #ed4808;
}

#cloud1{
  animation: cloud003 15s linear infinite;
}

#cloud2{
  animation: cloud002 25s linear infinite;
}

#cloud3{
  animation: cloud003 20s linear infinite;
}

#cloud4{
  animation: float 4s linear infinite;
}

#cloud5{
  animation: float 8s linear infinite;
}

#cloud7{
  animation: float 5s linear infinite;
}

#tracks{

}

#bumps{
  animation: land 10000ms linear infinite;
}

@keyframes jig {
    0% { transform: translateY(0px); }
    50% { transform: translateY(1px); }
    100% { transform: translateY(0px); }
}

#car-layers{
  animation: jig 0.35s linear infinite;
}

@keyframes land {
    from { transform: translateX(0); }
    to { transform: translateX(1000px); }
}


@keyframes slide {
    from { transform: translateX(0px); }
    to { transform: translateX(100px); }
}

/* @keyframes cloudFloat {
  0% { transform: translateX(0) translateY(3px); }
  100% { transform: translateX(1000px) translateY(0); }
} */

@keyframes cloud001 {
  0% { transform: translateX(-1000px) translateY(3px); }
  100% { transform: translateX(1000px) translateY(0); }
}

@keyframes cloud002 {
  0% { transform: translateX(-1000px) translateY(3px); }
  100% { transform: translateX(1000px) translateY(0); }
}

@keyframes cloud003 {
  0% { transform: translateX(-1000px) translateY(3px); }
  100% { transform: translateX(1000px) translateY(0); }
}

@keyframes float {
    0% { transform: translateY(0px) translateX(0); }
    50% { transform: translateY(8px) translateX(5px); }
    100% { transform: translateY(0px) translateX(0); }
}

#bracefront, #braceback{
  animation: braces 1s linear infinite;
}

@keyframes braces {
    0% { transform: translateX(-2px); }
  25% { transform: translateX(3px); }
    50% { transform: translateX(-2px); }
    75% { transform: translateX(3px); }
  100% { transform: translateX(-2px); }
}


#nav-in1-tab, #nav-in2-tab{
  width: 120px;
}


/* video */

.play-button {
  width: 152px !important;
  height: 152px !important;
  position: relative !important;
  cursor: pointer !important;
}

.play-backdrop {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background-color: #000;
  opacity: 0;
  visibility: hidden;
}

.play-close {
  width: 30px;
  height: 30px;
  position: absolute;
  right: 0;
  bottom: calc(100% + 15px);
  border: none;
  outline: none;
  background: none;
  opacity: 0;
  cursor: pointer;
}

.play-close::before,
.play-close::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  position: absolute;
  top: 50%;
  left: 0;
  transform: rotate(45deg);
  background-color: #fff;
}

.play-close::after {
  transform: rotate(-45deg);
}

.play-circles {
  display: block;
  width: 100%;
  height: 100%;
}

.play-perspective {
  width: 600px;
  height: 400px;
  position: absolute;
  left: -230px;
  top: -125px;
}

.play-triangle {
  width: 600px;
  height: 400px;
  background-color: #fff;
  cursor: pointer;
}


/* video 2*/


.video-play-button {
  position: absolute;
  z-index: 10;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  box-sizing: content-box;
  display: block;
  width: 32px;
  height: 44px;
  /* background: #fa183d; */
  border-radius: 50%;
  padding: 18px 20px 18px 28px;
}

.video-play-button:before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  display: block;
  width: 80px;
  height: 80px;
  background: #ba1f24;
  border-radius: 50%;
  -webkit-animation: pulse-border 1500ms ease-out infinite;
          animation: pulse-border 1500ms ease-out infinite;
}

.video-play-button:after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  display: block;
  width: 80px;
  height: 80px;
  background: #fa183d;
  border-radius: 50%;
  transition: all 200ms;
}

.video-play-button:hover:after {
  background-color: #da0528;
}

.video-play-button img {
  position: relative;
  z-index: 3;
  max-width: 100%;
  width: auto;
  height: auto;
}

.video-play-button span {
  display: block;
  position: relative;
  z-index: 3;
  width: 0;
  height: 0;
  border-left: 32px solid #fff;
  border-top: 22px solid transparent;
  border-bottom: 22px solid transparent;
}

@-webkit-keyframes pulse-border {
  0% {
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
    opacity: 0;
  }
}

@keyframes pulse-border {
  0% {
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
    opacity: 0;
  }
}
.video-overlay {
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.8);
  opacity: 0;
  transition: all ease 500ms;
}

.video-overlay.open {
  position: fixed;
  z-index: 1000;
  opacity: 1;
}

.video-overlay-close {
  position: absolute;
  z-index: 1000;
  top: 15px;
  right: 20px;
  font-size: 36px;
  line-height: 1;
  font-weight: 400;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: all 200ms;
}

.video-overlay-close:hover {
  color: #fa183d;
}

.video-overlay iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  /* width: 90%; */
  /* height: auto; */
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.75);
}
.title-info10{

}

.title-info10 h3{
  color: #282828;
    text-align: center;
    width: 48%;
    margin: 22px auto;
}
.b-phone{
  position: absolute;
  top: 191px;
  z-index: 11;
  left: 83px;
  background: #7f201ca1;
  color: #fff !important;
  padding: 16px 20px;
  font-size: 19px;
}
.bg-video{
  background-image: url(../graphics/img-bg-video.jpg);
  background-size: cover;
      border-radius: 25px;
}
.note-clip{
  position: relative;
    color: #fff !important;
  font-size: 10px;
    top: 96%;
    background: #000;
    padding-top: 4px;
}
.info-bg-img{
  position: absolute;
      bottom: 56px;
      left: 0px;
      background: rgb(0 0 0 / 41%);
}
.info-bg-img2{
  position: absolute;
      bottom: 0px;
      left: 0px;
      background:   rgb(162 0 20);
      border-radius: 10px
}
.video-overlay-close{
  color: #ffffff !important;
width: 37px;
height: 39px;
text-align: center;
background: #fa183d;
border-radius: 50px;
}
.info-bg-img2 p{
  color: #fff;
    padding: 8px 15px;
    margin-bottom: 0px;
}
.info-bg-img p{
  color: #fff;
    padding: 8px 15px;
    margin-bottom: 0px;
}
.last-logo{
  position: absolute;
    bottom: -80px;
}
/* intro Train */

.intro-train {
  background-color: #8c2f8d;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
  overflow: hidden;
  color: white;
  font: 100 2em sans-serif;
}

.rails {
  width: 100vw;
  height: 200px;
  margin: auto;
  background-image: linear-gradient(transparent 10%, #ddd 10%, #9b9b9b 15%, rgba(0, 0, 0, 0.5) 15%, transparent 17%, transparent 85%, #ddd 85%, #9b9b9b 90%, rgba(0, 0, 0, 0.5) 90%, transparent 92%), linear-gradient(to right, transparent 25%, #ffd182 25%, #ffd182 75%, transparent 75%);
  background-size: 37px 100%;
}

.train2 {
  margin-top: -125px;
  position: absolute;
  top: 48%;
  left: 0;
  width: 10000px;
  height: 100vh;
}

.car {
  position: relative;
  float: left;
  width: 800px;
  height: 250px;
  border-radius: 5px;
  background-color: gray;
  background-image: linear-gradient(transparent 0, #ddd 50%, transparent 50%);
  background-size: 100% 5px;
  box-shadow: inset 0px 0px 10px black, inset 0px -50px 150px black;
}

.car svg {
  position: absolute;
  top: 25px;
  left: 300px;
}

.car + .car {
  margin-left: 25px;
}

.car + .car:before {
  content: "";
  display: block;
  margin-top: 95px;
  width: 0px;
  height: 10px;
  border-left: solid 30px #333;
  border-top: solid 30px transparent;
  border-bottom: solid 30px transparent;
  position: relative;
  left: -28px;
  z-index: -1;
}

.pole {
  margin-top: -200px;
  position: absolute;
  top: 50%;
  width: 20px;
  height: 280px;
  padding-top: 75px;
  border-radius: 5px;
  box-shadow: 0px 200px 10px 0 rgba(0, 0, 0, 0.2);
}

.cables {
  width: 200vw;
  margin-left: -100vw;
  margin-top: 80px;
  height: 5px;
  background-color: black;
  border-radius: 50%;
}

.rails {
  -webkit-animation: slowpace 3s infinite linear;
          animation: slowpace 3s infinite linear;
}

.train2 {
  transform: translateX(19999px);
  -webkit-animation: train 15s infinite linear;
          animation: train 15s infinite linear;
}

.pole {
  transform: translateX(-100vw);
  -webkit-animation: firstpole 12s infinite linear;
          animation: firstpole 12s infinite linear;
}

.pole + .pole {
  transform: translateX(100vw);
  -webkit-animation: secondpole 12s infinite linear;
          animation: secondpole 12s infinite linear;
}

@-webkit-keyframes slowpace {
  to {
    background-position: -222px 0;
  }
}

@keyframes slowpace {
  to {
    background-position: -222px 0;
  }
}
@-webkit-keyframes firstpole {
  to {
    transform: translateX(100vw);
  }
}
@keyframes firstpole {
  to {
    transform: translateX(100vw);
  }
}
@-webkit-keyframes secondpole {
  to {
    transform: translateX(300vw);
  }
}
@keyframes secondpole {
  to {
    transform: translateX(300vw);
  }
}
@-webkit-keyframes train {
  to {
    transform: translateX(-19999px);
  }
}
@keyframes train {
  to {
    transform: translateX(-19999px);
  }
}
/* icon */
.icon-name{
    top: 170px;
    width: 45px;
    right: 23px;
}

/* chart*/
.chart-bar{
  display: flex;
    justify-content: center;
    flex-direction: column;
    padding-bottom: 0px;
}

.chart-bar input{
  display: none;
}
.chart {
  font-size: 1em;
  perspective: 1000px;
  perspective-origin: 50% 50%;
  -webkit-backface-visibility: visible;
          backface-visibility: visible;
}

.bar {
  font-size: 1em;
  position: relative;
  height: 10em;
  transition: all 0.3s ease-in-out;
  transform: rotateX(60deg) rotateY(0deg);
  transform-style: preserve-3d;
}
.bar .face {
  font-size: 2em;
  position: relative;
  width: 100%;
  height: 2em;
  background-color: rgba(254, 254, 254, 0.3);
}
.bar .face.side-a, .bar .face.side-b {
  width: 2em;
}
.bar .side-a {
  transform: rotateX(90deg) rotateY(-90deg) translateX(2em) translateY(1em) translateZ(1em);
  left: -224px;
}
.bar .side-b {
  transform: rotateX(90deg) rotateY(-90deg) translateX(4em) translateY(1em) translateZ(-1em);
  position: absolute;
  right: 0;
  top: 226px;
}
.bar .side-0 {
  transform: rotateX(90deg) rotateY(0) translateX(0) translateY(1em) translateZ(-1em);
}
.bar .side-1 {
  transform: rotateX(90deg) rotateY(0) translateX(0) translateY(1em) translateZ(3em);
}
.bar .top {
  transform: rotateX(0deg) rotateY(0) translateX(0em) translateY(4em) translateZ(2em);
}
.bar .floor {
}

.growing-bar {
  transition: all 0.3s ease-in-out;
  background-color: rgb(81 6 6 / 70%);
  width: 100%;
  height: 2em;
}

.bar.yellow .side-a,
.bar.yellow .growing-bar {
  background-color: rgba(241, 196, 15, 0.6);
}
.bar.yellow .side-0 .growing-bar {
  box-shadow: -0.5em -1.5em 4em rgba(241, 196, 15, 0.8);
}
.bar.yellow .floor .growing-bar {
  box-shadow: 0em 0em 2em rgba(241, 196, 15, 0.8);
}

.bar.red .side-a, input[id='red']:checked ~ .chart .side-a,
.bar.red .growing-bar,
input[id='red']:checked ~ .chart .growing-bar {
  background-color: rgba(236, 0, 140, 0.6);
}
.bar.red .side-0 .growing-bar, input[id='red']:checked ~ .chart .side-0 .growing-bar {
  box-shadow: -0.5em -1.5em 4em rgba(236, 0, 140, 0.8);
}
.bar.red .floor .growing-bar, input[id='red']:checked ~ .chart .floor .growing-bar {
  box-shadow: 0em 0em 2em rgba(236, 0, 140, 0.8);
}

.bar.cyan .side-a, input[id='cyan']:checked ~ .chart .side-a,
.bar.cyan .growing-bar,
input[id='cyan']:checked ~ .chart .growing-bar {
  background-color: rgba(87, 202, 244, 0.6);
}
.bar.cyan .side-0 .growing-bar, input[id='cyan']:checked ~ .chart .side-0 .growing-bar {
  box-shadow: -0.5em -1.5em 4em #57caf4;
}
.bar.cyan .floor .growing-bar, input[id='cyan']:checked ~ .chart .floor .growing-bar {
  box-shadow: 0em 0em 2em #57caf4;
}

.bar.navy .side-a,
.bar.navy .growing-bar {
  background-color: rgba(10, 64, 105, 0.6);
}
.bar.navy .side-0 .growing-bar {
  box-shadow: -0.5em -1.5em 4em rgba(10, 64, 105, 0.8);
}
.bar.navy .floor .growing-bar {
  box-shadow: 0em 0em 2em rgba(10, 64, 105, 0.8);
}

.bar.lime .side-a, input[id='lime']:checked ~ .chart .side-a,
.bar.lime .growing-bar,
input[id='lime']:checked ~ .chart .growing-bar {
  background-color: rgba(118, 201, 0, 0.6);
}
.bar.lime .side-0 .growing-bar, input[id='lime']:checked ~ .chart .side-0 .growing-bar {
  box-shadow: -0.5em -1.5em 4em #76c900;
}
.bar.lime .floor .growing-bar, input[id='lime']:checked ~ .chart .floor .growing-bar {
  box-shadow: 0em 0em 2em #76c900;
}

.bar.white .side-a,
.bar.white .growing-bar {
/*  background-color: rgba(254, 254, 254, 0.6);*/
}
.bar.white .side-0 .growing-bar {
}
.bar.white .floor .growing-bar {
}

.bar.gray .side-a,
.bar.gray .growing-bar {
  background-color: rgba(68, 68, 68, 0.6);
}
.bar.gray .side-0 .growing-bar {
  box-shadow: -0.5em -1.5em 4em #444;
}
.bar.gray .floor .growing-bar {
  box-shadow: 0em 0em 2em #444;
}

.chart .bar.yellow-face .face {
  background-color: rgba(241, 196, 15, 0.2);
}

.chart .bar.lime-face .face {
  background-color: rgba(118, 201, 0, 0.2);
}

.chart .bar.red-face .face {
  background-color: rgba(236, 0, 140, 0.2);
}

.chart .bar.navy-face .face {
  background-color: rgba(10, 64, 105, 0.2);
}

.chart .bar.cyan-face .face {
  background-color: rgba(87, 202, 244, 0.2);
}

.chart .bar.gray-face .face {
  background-color: rgba(68, 68, 68, 0.2);
}

.chart .bar.lightGray-face .face {
  background-color: rgba(145, 145, 145, 0.2);
}

.bar-0 .growing-bar {
  width: 0%;
}

.bar-1 .growing-bar {
  width: 1%;
}

.bar-2 .growing-bar {
  width: 2%;
}

.bar-3 .growing-bar {
  width: 3%;
}

.bar-4 .growing-bar {
  width: 4%;
}

.bar-5 .growing-bar {
  width: 5%;
}

.bar-6 .growing-bar {
  width: 6%;
}

.bar-7 .growing-bar {
  width: 7%;
}

.bar-8 .growing-bar {
  width: 8%;
}

.bar-9 .growing-bar {
  width: 9%;
}

.bar-10 .growing-bar {
  width: 10%;
}

.bar-11 .growing-bar {
  width: 11%;
}

.bar-12 .growing-bar {
  width: 12%;
}

.bar-13 .growing-bar {
  width: 13%;
}

.bar-14 .growing-bar {
  width: 14%;
}

.bar-15 .growing-bar {
  width: 15%;
}

.bar-16 .growing-bar {
  width: 16%;
}

.bar-17 .growing-bar {
  width: 17%;
}

.bar-18 .growing-bar {
  width: 18%;
}

.bar-19 .growing-bar {
  width: 19%;
}

.bar-20 .growing-bar, input[id='exercise-2']:checked ~ .chart.grid .exercise .bar:nth-child(1) .growing-bar {
  width: 20%;
}

.bar-21 .growing-bar {
  width: 21%;
}

.bar-22 .growing-bar {
  width: 22%;
}

.bar-23 .growing-bar {
  width: 23%;
}

.bar-24 .growing-bar {
  width: 24%;
}

.bar-25 .growing-bar, input[id='pos-0']:checked ~ .chart .growing-bar {
  width: 50%;
}
.bar-25 .growing-bar, input[id='pos-0']:checked ~ .chart .growing-bar::before{
  content: " 10 ملايين";
  position: absolute;
  top: 97px;
  left: 60px;
  transform: rotateX(369deg) rotateY(359deg);
  /* transform-style: preserve-3d; */
  color: #000;

}
.bar-25 .growing-bar, input[id='pos-1']:checked ~ .chart .growing-bar::before{
  content: " 12 مليوناً";
  position: absolute;
  top: 97px;
  left: 60px;
  transform: rotateX(369deg) rotateY(359deg);
  /* transform-style: preserve-3d; */
  color: #000;

}
.bar-25 .growing-bar, input[id='pos-2']:checked ~ .chart .growing-bar::before{
  content: " 10 ملايين";
  position: absolute;
  top: 97px;
  left:60px;
  transform: rotateX(369deg) rotateY(359deg);
  /* transform-style: preserve-3d; */
  color: #000;

}

.bar-25 .growing-bar, input[id='pos-3']:checked ~ .chart .growing-bar::before{
  content: "12 مليوناً";
  position: absolute;
  top: 97px;
  left:60px;
  transform: rotateX(369deg) rotateY(359deg);
  /* transform-style: preserve-3d; */
  color: #000;

}

.bar-26 .growing-bar {
  width: 26%;
}

.bar-27 .growing-bar {
  width: 27%;
}

.bar-28 .growing-bar {
  width: 28%;
}

.bar-29 .growing-bar {
  width: 29%;
}

.bar-30 .growing-bar {
  width: 30%;
}

.bar-31 .growing-bar {
  width: 31%;
}

.bar-32 .growing-bar {
  width: 32%;
}

.bar-33 .growing-bar {
  width: 33%;
}

.bar-34 .growing-bar {
  width: 34%;
}

.bar-35 .growing-bar {
  width: 35%;
}

.bar-36 .growing-bar {
  width: 36%;
}

.bar-37 .growing-bar {
  width: 37%;
}

.bar-38 .growing-bar {
  width: 38%;
}

.bar-39 .growing-bar {
  width: 39%;
}

.bar-40 .growing-bar {
  width: 40%;
}

.bar-41 .growing-bar {
  width: 41%;
}

.bar-42 .growing-bar {
  width: 42%;
}

.bar-43 .growing-bar {
  width: 43%;
}

.bar-44 .growing-bar {
  width: 44%;
}

.bar-45 .growing-bar {
  width: 45%;
}

.bar-46 .growing-bar {
  width: 46%;
}

.bar-47 .growing-bar {
  width: 47%;
}

.bar-48 .growing-bar {
  width: 48%;
}

.bar-49 .growing-bar {
  width: 49%;
}

.bar-50 .growing-bar, input[id='pos-1']:checked ~ .chart .growing-bar, input[id='exercise-2']:checked ~ .chart.grid .exercise .bar:nth-child(2) .growing-bar, input[id='exercise-4']:checked ~ .chart.grid .exercise .bar:nth-child(1) .growing-bar, input[id='exercise-4']:checked ~ .chart.grid .exercise .bar:nth-child(2) .growing-bar {
  width: 75%;
}

.bar-51 .growing-bar {
  width: 51%;
}

.bar-52 .growing-bar {
  width: 52%;
}

.bar-53 .growing-bar {
  width: 53%;
}

.bar-54 .growing-bar {
  width: 54%;
}

.bar-55 .growing-bar {
  width: 55%;
}

.bar-56 .growing-bar {
  width: 56%;
}

.bar-57 .growing-bar {
  width: 57%;
}

.bar-58 .growing-bar {
  width: 58%;
}

.bar-59 .growing-bar {
  width: 59%;
}

.bar-60 .growing-bar {
  width: 60%;
}

.bar-61 .growing-bar {
  width: 61%;
}

.bar-62 .growing-bar {
  width: 62%;
}

.bar-63 .growing-bar {
  width: 63%;
}

.bar-64 .growing-bar {
  width: 64%;
}

.bar-65 .growing-bar {
  width: 65%;
}

.bar-66 .growing-bar {
  width: 66%;
}

.bar-67 .growing-bar {
  width: 67%;
}

.bar-68 .growing-bar {
  width: 68%;
}

.bar-69 .growing-bar {
  width: 69%;
}

.bar-70 .growing-bar, input[id='exercise-3']:checked ~ .chart.grid .exercise .bar:nth-child(1) .growing-bar, input[id='exercise-3']:checked ~ .chart.grid .exercise .bar:nth-child(2) .growing-bar, input[id='exercise-3']:checked ~ .chart.grid .exercise .bar:nth-child(3) .growing-bar {
  width: 70%;
}

.bar-71 .growing-bar {
  width: 71%;
}

.bar-72 .growing-bar {
  width: 72%;
}

.bar-73 .growing-bar {
  width: 73%;
}

.bar-74 .growing-bar {
  width: 74%;
}

.bar-75 .growing-bar, input[id='pos-2']:checked ~ .chart .growing-bar {
  width: 50%;
}

.bar-76 .growing-bar {
  width: 76%;
}

.bar-77 .growing-bar {
  width: 77%;
}

.bar-78 .growing-bar {
  width: 78%;
}

.bar-79 .growing-bar {
  width: 79%;
}

.bar-80 .growing-bar, input[id='exercise-2']:checked ~ .chart.grid .exercise .bar:nth-child(3) .growing-bar {
  width: 80%;
}

.bar-81 .growing-bar {
  width: 81%;
}

.bar-82 .growing-bar {
  width: 82%;
}

.bar-83 .growing-bar {
  width: 83%;
}

.bar-84 .growing-bar {
  width: 84%;
}

.bar-85 .growing-bar {
  width: 85%;
}

.bar-86 .growing-bar {
  width: 86%;
}

.bar-87 .growing-bar {
  width: 87%;
}

.bar-88 .growing-bar {
  width: 88%;
}

.bar-89 .growing-bar {
  width: 89%;
}

.bar-90 .growing-bar {
  width: 90%;
}

.bar-91 .growing-bar {
  width: 91%;
}

.bar-92 .growing-bar {
  width: 92%;
}

.bar-93 .growing-bar {
  width: 93%;
}

.bar-94 .growing-bar {
  width: 94%;
}

.bar-95 .growing-bar {
  width: 95%;
}

.bar-96 .growing-bar {
  width: 96%;
}

.bar-97 .growing-bar {
  width: 97%;
}

.bar-98 .growing-bar {
  width: 98%;
}

.bar-99 .growing-bar {
  width: 99%;
}

.bar-100 .growing-bar, input[id='pos-3']:checked ~ .chart .growing-bar, input[id='exercise-4']:checked ~ .chart.grid .exercise .bar:nth-child(3) .growing-bar {
  width: 75%;
}

/*
END // CHART'S RULES
*
*
*/
.chart.grid {
  display: flex;
  flex-direction: row;
}
.chart.grid .exercise {
  flex: 0 0 100%;
  display: flex;
}
.chart.grid .exercise .bar {
  flex: 1;
  margin: 0 .5em;
}
.chart.grid .exercise .bar:nth-child(2) {
  z-index: 8;
  flex: 1 0 40%;
}
.chart.grid .exercise .bar:first-child {
  z-index: 10;
  margin-left: 0;
}
.chart.grid .exercise .bar:last-child {
  margin-right: 0;
}

.actions {
  display: flex;
  justify-content: center;
  margin-bottom: 0;
  padding-bottom: 2em;
  border-bottom: 1px dotted rgba(68, 68, 68, 0.4);
}

label {
  box-sizing: border-box;
  padding: 1em;
  margin: 0 .2em;
  cursor: pointer;
  transition: all .15s ease-in-out;
  color: #747474;
  border-radius: 0;
  flex: 1;
}
label:first-child {
  margin-left: 0;
  border-radius: .2em 0 0 .2em;
}
label:last-child {
  margin-right: 0;
  border-radius: 0 .2em .2em 0;
}

input[id='exercise-1']:checked ~ .actions label[for='exercise-1'],
input[id='exercise-2']:checked ~ .actions label[for='exercise-2'],
input[id='exercise-3']:checked ~ .actions label[for='exercise-3'],
input[id='exercise-4']:checked ~ .actions label[for='exercise-4'],
input[id='pos-0']:checked ~ .actions label[for='pos-0'],
input[id='pos-1']:checked ~ .actions label[for='pos-1'],
input[id='pos-2']:checked ~ .actions label[for='pos-2'],
input[id='pos-3']:checked ~ .actions label[for='pos-3'],
input[id='red']:checked ~ .actions label[for='red'],
input[id='cyan']:checked ~ .actions label[for='cyan'],
input[id='lime']:checked ~ .actions label[for='lime'] {
  color: #fff;
  border: 1px solid #031523;
  background-color: #7a0514;
}

input[id='exercise-2']:checked ~ .chart.grid .exercise .bar:nth-child(1) {
  flex: 1 0 0%;
}
input[id='exercise-2']:checked ~ .chart.grid .exercise .bar:nth-child(2) {
  flex: 1;
}
input[id='exercise-2']:checked ~ .chart.grid .exercise .bar:nth-child(3) {
  flex: 1 0 30%;
}

input[id='exercise-3']:checked ~ .chart.grid .exercise .bar:nth-child(1), input[id='exercise-3']:checked ~ .chart.grid .exercise .bar:nth-child(2), input[id='exercise-3']:checked ~ .chart.grid .exercise .bar:nth-child(3) {
  flex: 1;
}

input[id='exercise-4']:checked ~ .chart.grid .exercise .bar:nth-child(1), input[id='exercise-4']:checked ~ .chart.grid .exercise .bar:nth-child(2) {
  flex: 1 0 30%;
}
input[id='exercise-4']:checked ~ .chart.grid .exercise .bar:nth-child(3) {
  flex: 1;
}

section article {
  align-self: center;
  width: 20em;
  margin-bottom: 2em;
}





/*card */
.card-2{
  display: flex;
  align-items: center;
  min-height: 58vh;
  justify-content: center;
}

.card-container {
  perspective: 50em;
}
.card-container:nth-child(1) {
--bi: linear-gradient(#f9f9f9 5em, #0000 3em), linear-gradient(60deg, #1d1d1d, #a20014);
    padding-left: 50px;
}
.card-container:nth-child(2) {
--bi: linear-gradient(#f9f9f9 5em, #0000 3em), linear-gradient(60deg, #1d1d1d, #a20014);
}

.card2 {
  position: relative;
  width: 320px;
  height: 255px;
  /*padding: 3em;*/
      padding: 9px 20px 7px 20px;
  color: #fff;
  transform: rotateY(30deg) rotateX(15deg);
  transform-style: preserve-3d;
  transition: transform 1s;
}

.card2{
  font-size: 20px;
text-align: center;
}

.card2 p{
  color: #fff;
  text-align: justify;
  font-size: 15px;
}
.card2:hover {
  transform: rotateY(-30deg) rotateX(-15deg);
}

.layers2 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  z-index: -1;
}

.layer2 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 1em;
  background-image: var(--bi);
  transform: translateZ(var(--tz));
  box-shadow: 0 0 0.5em #000d inset;
}
.layer2:nth-child(1) {
  --tz: 0px;
}
.layer2:nth-child(2) {
  --tz: -4px;
}
.layer2:nth-child(3) {
  --tz: -8px;
}
.layer2:nth-child(4) {
  --tz: -12px;
}
.layer2:nth-child(5) {
  --tz: -16px;
}
.layer2:nth-child(6) {
  --tz: -20px;
}
.layer2:nth-child(7) {
  --tz: -24px;
}
.layer2:nth-child(8) {
  --tz: -28px;
}
.layer2:nth-child(9) {
  --tz: -32px;
}
.layer2:nth-child(10) {
  --tz: -36px;
}
.layer2:last-child {
  box-shadow: 0 0 0.5em #000d inset, 0 0 5px #000;
}


/* 5 دعائم */

body #user-button {
  z-index: 1000;
  bottom: 1rem !important;
  right: 1rem !important;
  color: var(--user-button-text);
  transition: 1s 0s ease-out;
  -webkit-animation: slide 3s ease-out forwards;
          animation: slide 3s ease-out forwards;
}
@-webkit-keyframes slide {
  0%, 50% {
    opacity: 0;
    display: block !important;
  }
  100% {
    opacity: 1;
    display: block !important;
  }
}
@keyframes slide {
  0%, 50% {
    opacity: 0;
    display: block !important;
  }
  100% {
    opacity: 1;
    display: block !important;
  }
}
body #user-button .u-card {
  border-radius: 100%;
  box-shadow: 0 0 1rem -0.25rem var(--user-button-shadow), inset 0 0 1rem -0.75rem var(--user-button-shadow);
}
body #user-button .u-main {
  cursor: pointer;
  --user-button-background:var(--user-button-main, #EC87C0);
}
body #user-button .u-main img {
  height: 100%;
  width: 100%;
}
body #user-button .u-main iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 4rem;
  height: 4rem;
  opacity: 1;
  transition: 0s 4s;
}
body #user-button .u-icons {
  position: relative;
  z-index: 950;
  transform: translate(-50%, -50%);
  background: var(--user-button-circle);
  box-shadow: 0 0 0 0.125rem var(--user-button-cardborder);
  border-radius: 100%;
  transition: 0.25s;
  opacity: 1 !important;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  /*&:before {
     z-index:-1;
     position:absolute;
     top:0; right:0; bottom:0; left:0;
     content:'';

     backdrop-filter: blur(10px);
  }*/
}
body #user-button .u-icons a {
  color: inherit;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  text-decoration: none;
}
body #user-button .u-icons a div {
  padding: 0.5rem;
  transition: 0s;
}
body #user-button .u-icons a[href="https://twitter.com/Osorpenke"] {
  position: relative;
}
body #user-button .u-icons a[href="https://twitter.com/Osorpenke"]:before {
  content: "Middle Click";
  position: absolute;
  top: -1.5rem;
  left: 50%;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  white-space: pre;
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  transition: 0.25s ease-in;
  background: #fffc;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
}
body #user-button .u-icons a[href="https://twitter.com/Osorpenke"].show:before {
  opacity: 1;
  transition: 0.25s ease-out;
}
body #user-button .u-icons a[href="https://twitter.com/Osorpenke"] div {
  color: #1da1f2;
}
body #user-button .u-icons a[href="https://codepen.io/z-"] div {
  background: black;
  color: white;
}
body #user-button .u-icons a.u-random div {
  position: relative;
  top: -1px;
  -webkit-animation: diespin 2s linear infinite;
          animation: diespin 2s linear infinite;
}
@-webkit-keyframes diespin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes diespin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
body #user-button .u-icons a.u-random:not(:hover) div {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}
body #user-button .u-icons > * {
  position: absolute;
  width: 30px;
  height: 30px;
  background: var(--singlecolour);
  border-radius: 100%;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: 0.25s -0.05s;
}
body #user-button .u-icons > *:before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
body #user-button .u-icons > *:hover, body #user-button .u-icons > *:focus-within {
  background: var(--hcolour);
}
body #user-button .u-icons > *:first-child:nth-last-child(1):nth-child(1), body #user-button .u-icons > *:first-child:nth-last-child(1) ~ *:nth-child(1) {
  left: 25%;
  top: 25%;
}
body #user-button .u-icons > *:first-child:nth-last-child(2):nth-child(1), body #user-button .u-icons > *:first-child:nth-last-child(2) ~ *:nth-child(1) {
  left: 37.5%;
  top: 18.75%;
}
body #user-button .u-icons > *:first-child:nth-last-child(2):nth-child(2), body #user-button .u-icons > *:first-child:nth-last-child(2) ~ *:nth-child(2) {
  left: 18.75%;
  top: 37.5%;
}
body #user-button .u-icons > *:first-child:nth-last-child(3):nth-child(1), body #user-button .u-icons > *:first-child:nth-last-child(3) ~ *:nth-child(1) {
  left: 50%;
  top: 15.625%;
}
body #user-button .u-icons > *:first-child:nth-last-child(3):nth-child(2), body #user-button .u-icons > *:first-child:nth-last-child(3) ~ *:nth-child(2) {
  left: 25%;
  top: 25%;
}
body #user-button .u-icons > *:first-child:nth-last-child(3):nth-child(3), body #user-button .u-icons > *:first-child:nth-last-child(3) ~ *:nth-child(3) {
  left: 15.625%;
  top: 50%;
}
body #user-button .u-icons > *:first-child:nth-last-child(4):nth-child(1), body #user-button .u-icons > *:first-child:nth-last-child(4) ~ *:nth-child(1) {
  left: 62.5%;
  top: 18.75%;
}
body #user-button .u-icons > *:first-child:nth-last-child(4):nth-child(2), body #user-button .u-icons > *:first-child:nth-last-child(4) ~ *:nth-child(2) {
  left: 37.5%;
  top: 18.75%;
}
body #user-button .u-icons > *:first-child:nth-last-child(4):nth-child(3), body #user-button .u-icons > *:first-child:nth-last-child(4) ~ *:nth-child(3) {
  left: 18.75%;
  top: 37.5%;
}
body #user-button .u-icons > *:first-child:nth-last-child(4):nth-child(4), body #user-button .u-icons > *:first-child:nth-last-child(4) ~ *:nth-child(4) {
  left: 18.75%;
  top: 62.5%;
}
body #user-button:hover .u-icons, body #user-button:focus-within .u-icons {
  width: 300% !important;
  height: 300% !important;
}

body.dark {
  background: #232223;
  color: white;
}
@media (prefers-color-scheme: dark) {
  body:not(.light) {
    background: #232223;
    color: white;
  }
}
body .credit {
  position: absolute;
  bottom: 20px;
  left: 20px;
  color: inherit;
}
body .options {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  overflow: hidden;
  min-width: 600px;
  max-width: 900px;
  width: calc(100% - 100px);
  margin: auto;
  height: 400px;
}
@media screen and (max-width: 718px) {
  body .options {
    min-width: 520px;
  }
  body .options .option:nth-child(5) {
    display: none;
  }
}
@media screen and (max-width: 638px) {
  body .options {
    min-width: 440px;
  }
  body .options .option:nth-child(4) {
    display: none;
  }
}
@media screen and (max-width: 558px) {
  body .options {
    min-width: 360px;
  }
  body .options .option:nth-child(3) {
    display: none;
  }
}
@media screen and (max-width: 478px) {
  body .options {
    min-width: 280px;
  }
  body .options .option:nth-child(2) {
    display: none;
  }
}
body .options .option {
  position: relative;
  overflow: hidden;
  min-width: 60px;
  margin: 10px;
  background: var(--optionBackground, var(--defaultBackground, #E6E9ED));
  background-size: auto 120%;
  background-position: center;
  cursor: pointer;
  transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
}
body .options .option:nth-child(1) {
  --defaultBackground:#ED5565;
}
body .options .option:nth-child(2) {
  --defaultBackground:#FC6E51;
}
body .options .option:nth-child(3) {
  --defaultBackground:#FFCE54;
}
body .options .option:nth-child(4) {
  --defaultBackground:#2ECC71;
}
body .options .option:nth-child(5) {
  --defaultBackground:#5D9CEC;
}
body .options .option:nth-child(6) {
  --defaultBackground:#AC92EC;
}
body .options .option.active {
  flex-grow: 10000;
  transform: scale(1);
  max-width: 600px;
  margin: 0px;
  border-radius: 40px;
  background-size: auto 100%;
  /*&:active {
     transform:scale(0.9);
  }*/
}
body .options .option.active .shadow {
  box-shadow: inset 0 -120px 120px -120px black, inset 0 -120px 120px -100px black;
}
body .options .option.active .label {
  bottom: 20px;
  left: 20px;
}
body .options .option.active .label .info > div {
  left: 0px;
  opacity: 1;
}
body .options .option:not(.active) {
  flex-grow: 1;
  border-radius: 30px;
}
body .options .option:not(.active) .shadow {
  bottom: -40px;
  box-shadow: inset 0 -120px 0px -120px black, inset 0 -120px 0px -100px black;
}
body .options .option:not(.active) .label {
  bottom: 10px;
  left: 10px;
}
body .options .option:not(.active) .label .info > div {
  left: 20px;
  opacity: 0;
}
body .options .option .shadow {
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
  height: 120px;
  transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
}
body .options .option .label {
  display: flex;
  position: absolute;
  right: 0px;
  height: 40px;
  transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
}
body .options .option .label .icon {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  min-width: 40px;
  max-width: 40px;
  height: 40px;
  border-radius: 100%;
  background-color: white;
  color: var(--defaultBackground);
}
body .options .option .label .info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 10px;
  color: white;
}
body .options .option .label .info > div {
  position: relative;
  transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95), opacity 0.5s ease-out;
}
body .options .option .label .info .main {
  font-weight: bold;
  font-size: 1.2rem;
}
body .options .option .label .info .sub {
  transition-delay: 0.1s;
}
/* intro text */
.sp-container {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 0;
	background: -webkit-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
	background: -moz-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
	background: -ms-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
	background: radial-gradient(rgb(0 0 0 / 88%), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7))
}
.sp-content {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	z-index: 1000;
}


.sp-container h2 {
	position: absolute;
	top: 50%;
	line-height: 100px;
	height: 90px;
	margin-top: -50px;
	font-size: 50px;
	width: 100%;
	text-align: center;
  opacity: 0;
  color: #fff;
 overflow: hidden;
animation: fadeEffect 13s linear infinite 0s;
animation-iteration-count: infinite;
}
/* .sp-container h2.frame-1 {
  font-size: 60px;
animation-delay: 0s;
} */
.sp-container h2.frame-2 {
  font-size: 60px;
	animation-delay: 0s;
}

.sp-container h2.frame-3 {
  font-size: 50px;
	animation-delay: 5s;
}
@keyframes fadeEffect {
          0% { opacity: 0; }
          5% { opacity: 0; transform: translateY(0px); }
          10% { opacity: 1; transform: translateY(0px); }
          25% { opacity: 1; transform: translateY(0px); }
          30% { opacity: 0; transform: translateY(0px); }
          80% { opacity: 0; }
          100% { opacity: 0; }
        }
/* scroll down */
.mouse-box {
    height: 30vh;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999999999;
    position: absolute;
    bottom: -8%;
    text-align: center;
    left: 50%;
}

.mouse-icon {
    height: 65px;
    width: 35px;
    padding: 5px;
    border: 2px solid #fff;
    border-radius: 20px;
    display: flex;
    justify-content: center;
}

.scrolling-wheel {
    width: 4px;
    height: 7px;
    margin-top: 5px;
    border-radius: 35%;
    background-color: #fff;
    animation-name: scroll;
    animation-duration: 1.6s;
    animation-iteration-count: infinite;
}

@keyframes scroll {
   0% {
     opacity: 1;
   }
   100% {
     transform: translateY(20px);
     opacity: 0;
   }
 }

.inverted .copyright-content{
  min-height: 0px !important;
  padding: 0px 0 !important;
}


.border-footer{
  border-top: solid;
  position: absolute;
  bottom: 0px;
  width: 80%;
  background: #1a1a1a;
  height: 61.5vh;
}
.p-last-footer{
  color: #fff;text-align: justify;font-size: 16px;margin-right: 60px;
}
.be-1::before{
 content: "";
 background-image: url(../graphics/icon/1-1.png);
 width: 50px;
height: 55px;
position: absolute;
right: 20px;
}

.be-2::before{
 content: "";
 background-image: url(../graphics/icon/5.png);
 width: 50px;
height: 55px;
position: absolute;
right: 20px;
}

.be-3::before{
 content: "";
 background-image: url(../graphics/icon/2.png);
 width: 50px;
height: 35px;
position: absolute;
right: 20px;
}

.be-4::before{
 content: "";
 background-image: url(../graphics/icon/4.png);
 width: 50px;
height: 50px;
position: absolute;
right: 20px;
}

.be-5::before{
 content: "";
 background-image: url(../graphics/icon/3.png);
 width: 50px;
height: 36px;
position: absolute;
right: 20px;
}

.slider-2img{
      padding: 20px;
}
.bg-sub3{
  width: 44%!important;
margin: 0px !important;
background: #0000007d;
}

.bg-sub3 .item22{
  margin-right: 18px;
}

/* slider */

.scroll-slider {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0;
  height: 100vh;
}

.scroll-wrapper {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  height: 100%;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.scroll-slide {
  flex: 1 0 75vw;
  max-width: 75vw;
  height: 100%;
}

.item {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.item-container {
  position: relative;
}
.item-title {
  font-size: 2em;
    font-weight: bold;
    line-height: 1.5;
    text-align: center;
    color: #ed4808 !important;
}
@media (min-width: 40em) {
  .item-body {
    position: absolute;
    left: 100%;
    top: 50%;
    width: 59%;
    transform: translate(-25%, -50%);
    background: #000000ad;
    padding-left: 14px;
  }
}

.tag {
  margin-right: 0.5rem;
}
.tag > a {
  display: block;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.25);
  color: #FFF;
}
.border-left-2{
  border-left-width: 3px;
border-left-style: solid;
border-image: linear-gradient( to bottom,#c3000000, #7f201c, rgba(0, 0, 0, 0) ) 1 100%;
width: 50%;
height: 350px;
margin-top: 50px;
}
.fa-walking:before{
  content: '' !important;
background: url(../graphics/icon/6.png);
background-size: 70%;
background-position: center;
width: 42px;
height: 38px;
display: block;
position: relative;
background-repeat: no-repeat;
}
.fa-snowflake:before{
  content: '' !important;
background: url(../graphics/icon/7.png);
background-size: 70%;
background-position: center;
width: 42px;
height: 38px;
display: block;
position: relative;
background-repeat: no-repeat;
}
.fa-tree:before{
  content: '' !important;
background: url(../graphics/icon/8.png);
background-size: 70%;
background-position: center;
width: 42px;
height: 38px;
display: block;
position: relative;
background-repeat: no-repeat;
}

.fa-tint:before{
  content: '' !important;
background: url(../graphics/icon/9.png);
background-size: 70%;
background-position: center;
width: 42px;
height: 38px;
display: block;
position: relative;
background-repeat: no-repeat;
}

.fa-sun:before{
  content: '' !important;
background: url(../graphics/icon/10.png);
background-size: 70%;
background-position: center;
width: 42px;
height: 38px;
display: block;
position: relative;
background-repeat: no-repeat;
}
.b-text{
  border-right: solid 3px #a20014;
    padding-right: 6px;
    width: 80%;
    margin: auto;
}
.bar2 span, .bar3 span{
  top:110px !important;
}
.card2 h3{
  font-size: 24px;
}
.bg-text{
  background: #151515ad;
      padding: 0px 13px;
}
.info13{
  color:#ed4808 !important;
}
.f-3 h3{
  color: #d6d3d4;font-size: 2rem;font-weight: bold !important;text-align: center;padding: 0px 12px;position: absolute;z-index: 22;right: 18%;top: 15%;background: #232120bd;
}



/*-----------------------------------------------*/
.description {
  max-width: 600px;
  margin: 0 auto;
  color: rgba(229, 229, 229, 0.7);
}
a:visited {
  color: #dff3fd;
}
li.active a, a:hover, a:active {
  color: #e5e5e5;
}
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.centered-y {
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
}

.distribution-map {
  position: relative;
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  margin: 0 auto;
}
.distribution-map > img {
  width: 100%;
  position: relative;
  margin: 0;
  padding: 0;
}
.distribution-map .map-point {
  cursor: pointer;
  outline: none;
  z-index: 0;
  position: absolute;
  width: 25px;
  height: 25px;
  border-radius: 20px;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
  transform: translate(-50%, -50%);
  -moz-transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
  -o-transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
  -webkit-transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out, z-index 0.25s ease-in-out;
  -webkit-transition-delay: 0.25s, 0.25s, 0.25s, 0.25s;
  transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
  background: rgba(26, 26, 26, 0.85);
  border: 5px solid #7fcff7;
}
.distribution-map .map-point .content {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  transition: opacity 0.25s ease-in-out;
  width: 100%;
  height: 100%;
  left: 50%;
  transform: translateX(0%);
  overflow: overlay;
}
.distribution-map .map-point:active, .distribution-map .map-point:focus {
  margin: 0;
  padding: 0;
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
  width: 300px;
  height: 400px;
  color: #e5e5e5;
  z-index: 1;
  transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out;
}
.distribution-map .map-point:active .content, .distribution-map .map-point:focus .content {
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
  -moz-transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
  -o-transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
  -webkit-transition: opacity 0.25s ease-in-out, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
  -webkit-transition-delay: 0.25s, 0s, 0s;
  transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
  overflow: hidden;
}
.distribution-map .map-point:active .content a:hover, .distribution-map .map-point:active .content a:active, .distribution-map .map-point:focus .content a:hover, .distribution-map .map-point:focus .content a:active {
  color: #afe1fa;
}

.centered-y h3{
  color: #fff;
  font-size: 20px !important;
  text-align: center;
}


.map-point .tooltiptext {
  visibility: hidden;
  width: 250px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  top: 22px;
    right: 11px;
  z-index: 99999 !important;
}
.map-point:hover .tooltiptext {
  visibility: visible;
  z-index: 999 !important
}