$border-color: rgba(0,95,167,0.35);
$blue: #006CE6;
$gray: #808080;

@import "install-button.css";

/* Your styles here */


html {
    font-size: 80%;
}


@media only screen 
and (max-height : 480px) {
    html {
        font-size: 62.5%;
    }
}

body {
/*    background-color: #ddeefb;*/
    font-family: 'Helvetica Neue', sans-serif;
    margin: 0px;
    overflow: hidden;
}
section {
    position: absolute;
    height: 100%;
    width: 100%;
}

.list_page-category {
    background-color: #fff;
    width: 90%;
    margin: 1rem auto 1rem auto;
    line-height: 1000%;
    text-align: center;
    border: solid 1px #e5e5e5;
    font-size: 1rem;
    color: $gray;
}

.list_section {
    width: 100%;
    display: flex;
}

.list_logo {
    clear: both;
    background:url(../img/logo.png) no-repeat center center;
    background-size: 14rem;
    display: block;
    margin: auto;
    margin: 1rem 0 0.3rem 0;
    height: 18rem;
}

.left {
    float: left;
    width: 50%;
}

.right {
    float: right;
    width: 50%;
}

/* header */
.header {
    width: 100%;
    background-color: #EAEAEA;
    border-bottom: 0.1rem solid $border-color;
    line-height: 7%;
    margin: auto;
    display: block;
}

.header-title {
    font-size: 2.1rem;
    text-transform: capitalize;
    text-align: center;
    display: inline-block;
    width: 70%;
    line-height: 3rem;
    color: $gray;
} 

.header-left {
    display: inline-block;
    width: 15%;
    text-align: left;
    margin-left: 0.5rem;
}
.header-right {
    display: inline-block;
    width: 15%;
    text-align: right;
}
 
.header-back-button {
    color: $blue;
/*    display: block;*/
    line-height: 3rem;
    position: relative;
    text-align: center;
    font-size: 1.4rem;
    font-weight: bold;
    
}

@keyframes currentToLeft {
  0%   { transform: translateX(0); }
  100% { 
      transform: translateX(-100%);
    }
}

@keyframes rightToCurrent {
  0%   { transform: translateX(100%);}
  100% { transform: translateX(0); }
}

@keyframes leftToCurrent {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(0); }
}


@keyframes currentToRight {
  0%   { transform: translateX(0); }
  100% { transform: translateX(100%);}
}


@keyframes currentToTop {
  0%   { transform: translateY(0); }
  100% { 
      transform: translateY(-100%);
    }
}

@keyframes bottomToCurrent {
  0%   { transform: translateY(100%);}
  100% { transform: translateY(0); }
}

@keyframes topToCurrent {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(0); }
}


@keyframes currentToBootom {
  0%   { transform: translateY(0); }
  100% { transform: translateY(100%);}
}


#list {
    transform: translateX(0);
}

#attractions-list {
    transform: translateX(100%);
}

.js-atto-selector-atto-list {
    transform: translateX(100%);
}

.show[data-direction=left] {
    animation: 0.4s ease 0s normal forwards 1 rightToCurrent;
}

.hide[data-direction=left] {
    animation: 0.4s ease 0s normal forwards 1 currentToLeft;
}


.show[data-direction=right] {
    animation: 0.4s ease 0s normal forwards 1 leftToCurrent;
}

.hide[data-direction=right] {
    animation: 0.4s ease 0s normal forwards 1 currentToRight;
}



.show[data-direction=top] {
    animation: 0.4s ease 0s normal forwards 1 bottomToCurrent;
}

.hide[data-direction=top] {
    animation: 0.4s ease 0s normal forwards 1 currentToTop;
}


.show[data-direction=bottom] {
    animation: 0.4s ease 0s normal forwards 1 topToCurrent;
}

.hide[data-direction=bottom] {
    animation: 0.4s ease 0s normal forwards 1 currentToBootom;
}


.list-items {
    height: 93%;
    overflow: auto;
    z-index: 999;
}
.list-item {
    height: 6rem;
    border-bottom: 0.1rem solid $border-color;
    color: $gray;
    font-weight: bold;
}

.list-item-img {
    display: inline;
    height: 5rem;
    float: left;
    margin: 0.4rem;
    img {
        border-radius: 0.5rem;
        margin: auto;
        height: 5rem;
        width: 5rem;
    }
}

.list-item-title {
    display: inline-block;
    margin: 0.5rem;
    font-size: 1.5rem;
}

.list-item-map-button {
    float: right;
    margin: 2.5rem 0.5rem 0 0;
}

.details-body {
    height: 93%;
    overflow: auto;
}

.details-img {
    width: 100%;
    height: 50%;
}

.details-descrition {
    font-size: 1.6rem;
    text-indent: 3rem;
    margin: auto 1.5rem 2rem 1rem;
    text-align: justify;
    color: #333333;
}

#section_public_transport_map {
  transform: translateX(100%); 
}

.list_attractions {
	background:url(../img/ico-attractions.png) no-repeat center center;	
	background-color:#d60716;
	width:90%;
	height:50%;
}

.public_transport_map {
	background:url(../img/ico-transport.png) no-repeat center center;	
	background-color:#1eb606;
	width:90%;
	height:50%;
}

.list_nightlife {
	background:url(../img/ico-nightlife.png) no-repeat center center;	
	background-color:#dc6107;
	width:90%;
	height:50%;
}

.list_shopping {
	background:url(../img/ico-shopping.png) no-repeat center center;	
	background-color:#ab066e;
	width:90%;
	height:50%;
}
/* jQuery pan CSS */
.smooth_zoom_preloader {
	background-image: url(zoom_assets/preloader.gif);
}	
.smooth_zoom_icons {
	background-image: url(zoom_assets/icons.png);
}

.img_public_transport {
    height: 93%;
    overflow: auto;
    z-index: 999;
}