/* Smartphones (portrait and landscape) ----------- */
@media only screen and (max-width : 767px) {
  /* STYLES GO HERE */
  p{
    font-size: 18px;
  }
  
  .mobile{
      display:block;
  }
  
  .desktop{
    display:none;
}

.mobile-item-menu{
     margin-top:50px;
}

.full-article .show-in-full-article {
    width: 100%;
    margin: 0 auto;
}

.first-level-menu li span {
    cursor: pointer;
    font-size: 20px;
}

.navbar > .mobile-item-menu ~ .mobile-item-menu {
    margin-top:0px;
} 

.mobile-item-menu{
       height: 38px;
    left: 100%;
    width: 0;
}
ul.lang a {
    color: #fff;
    margin: 14px;
    display: block;
    font-size: 24px;
}

.hi-slide , .view-categories, .repo-filters{
    display:none!important;
}

.repo-slider {
    width: 100%;
    margin: 0 auto;
}

.repo-items-container {
    width: 100%;
    overflow: hidden;
    min-height: 100%;
}

.repo-items-container h1 {
    padding: 20px;
    font-size: 40px;
    padding-top: 100px;
}

.repo-items-container h1 a {
    font-size: 16px;
    float: right;
    border: 1px solid;
    padding: 10px 40px;
    border-radius: 100px;
    padding-top: 15px;
    cursor: pointer;
    color: #fff;
    position: absolute;
    top: 15px;
    right: 15px;
}

.icon-menu.selected .close-menu {
    display: block!important;
    position: fixed;
    right: 0;
    left: auto;
    z-index: 999;
    width: 70px;
}

.repo-general-categories h2 {
    text-align: center;
    letter-spacing: 2px;
    width: 95%;
    margin: 0 auto;
    padding-top: 100px;
    font-size: 40px;
    font-weight: 300;
}

 li.icon-menu.mobile-item-menu  .open-menu span{
        -webkit-text-stroke: 1px;
    font-size: 22px;
}

.mobile-item-menu span{
    
}

.close-mobile-menu{
        position: fixed;
    right: 5px;
    z-index: 9;
    top: 5px;
}

.close-mobile-menu img{
     max-width:50px;
}



.mobile-block.first-level-menu{
        display: block;
    background: transparent;
    position: relative;
    left: 85%;
}

.icon-menu.active .close-menu ,.icon-menu.selected .close-menu{
position: fixed;
    right: 0;
    left: auto;
    z-index: 999;
    width: 70px;
    background: transparent;
    background-image: url(/media/f5nd13o2/close.png);
    background-size: cover;
}

.icon-menu.active .close-menu img{
    opacity:0;
}

.mobile-item-menu.icon-menu:hover{
    background:transparent;
}

ul.lang {
    position: absolute;
    bottom: 20px;
    text-align: center;
    width: 15%;
    z-index: 99;
}

.mobile-block.first-level-menu li:nth-child(1){
    padding-top: 30px;
    padding-bottom: 10px;
    font-size: 16px;
}
  
  .open-mobile-menu{
          position: absolute;
    z-index: 99;
    width: 70px;
    height: 100px;
    top: 0;
    left: 0;
  }

.open-mobile-menu img{
    width:100%;
}

  h2.heading {
    font-size: 22px;
    margin-bottom: 20px;
  }
  
  .home-espa img.espa {
       max-width: 300px;
    max-height: 65px
}
  
  .general-loader-container{
      left:0;
  }
  .main-body, .footer{
      margin-left:0;
  }
  
  .left-bar{
      width:100%;
      text-align:left;
      display:none;
  }
  
  .navbar{
      width:15%;
      z-index: 9;
      height:100%;
  }
  
  .first-level-menu li:nth-child(1), .general-menu .first-level-menu li .second-level-menu li:nth-child(1){
      padding-bottom:30px;
  }
  
  
  .third-level-menu , .second-level-menu {
      background:#f2f2f2;
    color:#000;
  }
  
  .second-level-menu a , .third-level-menu a{
    color: #000;
}
  
  .icon-menu.selected .open-menu{
      opacity:1;
  }
  
    .left-bar::before{
        content: '';
    position: fixed;
    width: 15%;
    background: #be893e;
    height: 100%;
    top: 0;
    left: 0%;
    z-index: 7;
    }
  
    .left-bar::after{
        content: '';
    position: fixed;
    width: 100%;
    background: #f2f2f2;
    height: 100%;
    top: 0;
    left: 15%;
    z-index: 7;
    }
    
    .second-level-menu {
  
    left: 15%;
  
    width: 85%;
 
    z-index: 9;
}

.third-level-menu {

    left: 15%;
  z-index: 99;
    width: 85%;
   
}

.main-body.type-2 , .main-body.type-1 , .main-body.type-3 {
    position: relative;
    left: 0;
    width: 100%;
    padding: 0 20px;
    min-height: 100vh;
    padding-bottom: 50px;
    background: #000;
    color:#fff;
    margin: 0;
}
  
  li.icon-menu .open-menu span{
 
    font-size: 24px;
    width: 480%;
    text-align: left;
 left: 100%;
   background:#f2f2f2;
    padding-top: 0;
    line-height: initial;
    padding-bottom: 0;
    padding-top: 14px;
    z-index:8;
  }
  
  .loader-container{
      left:0;
  }
  
  #id_1233 .main-body{
      overflow:auto;
  }
  
  #map {
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    zoom: 3.5;
}


.st1, .st2 {
 
    height: 3px;
}
  
  .navigator{
      display:none;
  }
  
  .zoom{
      display:none;
  }
  
  .pin-info{
      display:none!important;
  }
  
  .map-inner-container {
    width: 98%;
    height: 100%;
    z-index: 9999;
    position: fixed;
    background: #989898;
    overflow: auto;
    display: none;
    left: 0;
}
  
  .hand-navigate{
      display:none;
  }
  
  
  li.icon-menu:nth-child(1) {
    margin-bottom: 0;
}
.menu-overlay{
    display:none;
    left:200%;
}

.first-level-menu {
    left: 15%;
    width: 85%;
    background:#f2f2f2;
    color:#000;
}

.home-box-left{
overflow:hidden;    
}

  .container-padding {
    padding: 50px 15px;
    
  }
  
  .info-box {
    color: #fff;
    padding-top: 50px;
    padding-bottom: 100px;
    overflow: hidden;
}
  
  .home-box-right {
    height: 100%;
    background-image: url(../assets/cities-bg.jpg);
    background-size: cover;
    position: relative;
    height: 100vh;
    background-position:center;
}
  
  .home-map {
    height: 100vh;
    background-image: url(../assets/home-map-bg.jpg);
    background-size: cover;
    background-attachment: unset;
    position: relative;
        background-position: center;
}
.footer .espa{
    width:90%;
}
  .hero-logo {
    background: black;
    padding: 0;
    overflow: hidden;
    position: relative;
    z-index: -1;
    height: 100vh;
}

  .mobile-menu{ 
    position: absolute;
    left: 20px;
    top: 20px;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
    display: block;
  }

  .mobile-menu * {
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
  }

  .mobile-menu .hamburger {
    margin-top: 0;
    z-index: 999;
    position: absolute;
    left: 0;
    top: 0px;
  }

  .mobile-menu .hamburger span {
    display: block;
    height: 4px;
    width: 40px;
    background: #fff;
    margin-top: 10px;
    border-radius: 1px;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
  }

  .menu-opened .mobile-menu .hamburger span.top {
    -webkit-transform: rotate(
      45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(
      45deg);
    margin-top: 11px;
  }

  .menu-opened .mobile-menu .hamburger span.middle {
    opacity: 0;
  }

  .menu-opened .mobile-menu .hamburger span.bottom {
    -webkit-transform: rotate(
      -45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(
      -45deg);
    margin-top: -17px;
  }

  .menu-opened .mobile-menu .hamburger span {
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
    background: #000;
  }

  .menu-opened .mobile-menu .hamburger {
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
    border-radius: 100px;
    padding-top: 16px;
    padding-left: 0px;
    height: 60px;
  }

  .menu-opened .fixed-menu {
    left: 0; 
  }

  .fixed-menu {
    position: fixed;
    height: 100%;
    width: 100%;
    left: -100%;
    top: 0;
    background: #fff;
    z-index: 9;
    color: white;
  }
  .fixed-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    line-height: 38px;
    padding-top: 72px;
    text-align: center;
  }

  .fixed-menu ul li.active {
    background: white;
    background-repeat: no-repeat;
    background-size: 75px;
    background-position: 0 16px;
  }

  .fixed-menu ul li a {
     display: block;
    color: #000;
    font-size: 32px;
    padding: 4px 20px;
    text-align: center;
 }

 .fixed-menu ul li.social-item a{
  color: #9fa4a6;
}


.top-bar{
  display: none;
}

.logo-animation {
 display: none;
}


.logo {
  width: 100%;
  opacity: 1;
}

.info-box h2 {
  font-size: 36px;
}

.info-box h3 {
  font-size: 22px;
}

.info-box p {
  font-size: 18px;
} 

.info-box a {
  font-size: 18px;
  float: none;
  text-decoration: none;
  color: #fff;
  margin-top: 40px;
  display: block;
  text-align: center;
}

.accordion ul li h4 {
  font-size: 18px;
  margin-top: 10px;
  position: relative;
  text-align: center;
  width: 100%;
}

.accordion ul li span {
  font-size: 36px;
}

.first-level-menu  li span, .second-level-menu  li span{
    font-size:22px;
    line-height:50px;
}

.main-body .main-body-article {
    width: 100%;
        margin-top: 55px;
}

.main-body-article h1 {
    margin-bottom: 30px;
    margin-top: 30px;
    width: 78%;
}

.full-article .main-body-article {
    width: 97%;
    margin: 12px auto;
    margin-top: 80px;
}

.first-level-menu li.active span {
    margin-top: 15px;
    margin-bottom: 10px;
}

.accordion ul li button span {
  font-size: 18px;
  position: relative;
}

.accordion ul li button {
  display: block;
  color: #fff;
  position: relative;
  right: 0;
  top: 12px;
  text-align: center;
  width: 100%;
}

.accordion .hidden-text {
  padding-top: 44px;
  text-align: left;
  font-size: 18px;
  display: none;
}

.newsletter label {
  position: relative;
  top: 0;
  display: block;
  text-align: center;
  width: 100%;
  font-size: 22px;
  margin: 0;
}

.newsletter input[type=text], input[type=submit] {
  background: transparent;
  border: none;
  font-size: 22px;
  color: #fff;
  min-width: 100%;
  text-align: center;
}

.newsletter input[type=submit] {
  min-width: 100%;
  position: relative;
  top: 10px;
  width: 100%;
  text-align: center;
  font-size: 22px;
  margin: 0
}

.newsletter form{
  height: 100px;
}

.espa {
  padding-top: 0;
  display: block;
  margin: 0 auto;
  width: 100%;
}

.copyright {
  text-align: center;
  font-size: 18px;
  padding-top: 10px;
}

.social-media a {
    font-size: 22px;
    color: #000;
    margin: 5px 0px;
    display: block;
}

.article .mentor-img {
  margin: 0 auto;
  display: block;
  margin-top: 68px;
  width: 75%;
}

.contact-box{
  margin-bottom: 36px;
  font-size: 18px;
}

.contact-box h2 {
  font-size: 36px;
}

.contact-box form input, .contact-box form textarea {
  display: block;
  border: 0;
  font-size: 30px;
}

.contact-box form button {
  color: #d09b3e;
  display: block;
  text-align: center;
  width: 100%;
  font-size: 30px;
  margin-top: 36px;
}

.blog-menu {
    font-size: 22px;
}

.search-blog input {
  text-align: center;
  width: 100%;
  margin: 0;
  padding: 23px;
  background: #d6d9db;
  border: 0;
  font-size: 36px;
}

.blog-box-details {
  background: #ffffff; 
  padding: 0;
  color: #000;
}


.blog-box-details a {
  color: #000;
}

.blog-box-details h3 {
  font-size: 22px;
}

.blog-box-image {
  position: relative;
  height: 290px;
  background-image: url(../assets/blog/1.jpeg);
  background-size: cover;
  margin-bottom: 36px;
}

.blog-box-details h2 {
  font-size: 36px;
  margin: 20px 0;
}

.blog-pagination .page-link {
  position: relative;
  display: block;
  color: #000000;
  text-decoration: none;
  background-color: #d6d9db;
  border: 0;
  border-radius: 100px;
  min-width: 43px;
  margin: 0 5px;
  font-size: 18px;
  margin-bottom: 100px;
}

.page-item{
  position: relative;
}

.blog-pagination .page-link.prev{ 
  background: transparent;
  color: #000;
  position: absolute;
  width: 123px;
  top: 41px;
  z-index: 9;
  left: -44px;
}

.blog-pagination .page-link.next{ 
  background: transparent;
  color: #000;
  position: absolute;
  width: 123px;
  top: 41px;
  right: -51px;
}

.blog-post-slider {
    margin-top: 0px;
    background: #000;
}

.blog-post-header .category {
    position: relative;
    left: 0;
    top: 0;
    font-size: 18px;
}

.blog-post-header h3 {
    font-size: 36px;
    margin: 15px 0;
}

.blog-post-header .date {

    position: relative;
    right: 0;
    top: 0;
    font-size: 22px;
}
.back-to-blog {
    font-size: 22px;
    margin-bottom: 36px;
    display: inline-block;
}

.blog-post-title {
    font-size: 36px;
}

}