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

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

html, body {height: 100%;width: 100%;padding: 0;margin: 0;}
body {display: flex;flex-direction: column;}
main {flex: auto;}
main article{height: calc(100% - 44px);overflow: auto;overflow-x: hidden;}

main#main.main_to_left{animation: 0.4s ease 0s normal forwards 1 currentToLeft;}
main#main.left_to_main{animation: 0.4s ease 0s normal forwards 1 leftToCurrent;}
main#main{height: 100%;}
main#main header.bar-subheader,main#main section header.bar-subheader div.bar-header{padding: 0px;}
main#main header.bar-subheader div.bar-header{padding-left: 5px;padding-right: 5px;}

main#view{position: absolute;top: 0;: 100%;transform: translateX(100%);width: 100%;height: 100%}
main#view.right_to_main{animation: rightToCurrent 0.4s forwards;}
main#view.main_to_right{animation: currentToRight 0.4s forwards;}
main#view img{width: 100%;border-radius: 20px;padding: 10px;}
main#view article div.list div.item{white-space:pre-line;text-align: justify;}

div#loading{position: absolute;width: 100%;height: 100%;opacity: 0.5;z-index: 99999;background: url('../images/ajax-loader.gif') no-repeat center black;}