/* 1004 x 1417 => ratio 1.41 */
.clear{display: block; clear: both;}
.t {
    display: table;
    width: 100%;
    height: 94%;
    background-color: #303639;
}

.tc {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.rel {
    position: relative;
}



#magazine{position: relative; /*width: 978px;*/ width: 100%; margin: auto; background-color: #303639;}
#magazine .magazine-page{/*width: 489px;*/ width: 50%; background-color: #FFFFFF; position: relative; height: 100%;}
#magazine .magazine-page img.magazine-page-img{width: 100%; height: auto;}
#magazine .magazine-page .preloader-icon-loading{position: absolute; top: 50%; left: 50%; z-index: 100;}

#magazine-single{position: relative; /*width: 978px;*/ width: 100%; margin: auto; background-color: #303639;}
#magazine-single .magazine-page{/*width: 489px;*/ width: 100%; background-color: #FFFFFF; position: relative; }
#magazine-single .magazine-page img.magazine-page-img{width: 100%; height: auto;}
#magazine-single .magazine-page .preloader-icon-loading{position: absolute; top: 50%; left: 50%; z-index: 100;}




#magazine-tools{position: relative; display: block; width: 100%; background-color: #303639; padding: 5px;}
#magazine-tools ul{display: block;}
#magazine-tools ul.left{float: left;}
#magazine-tools ul.right{float: right;}
#magazine-tools ul li{display: inline-block;}
#magazine-tools ul li a{padding: 5px; color: #FFFFFF; width: 36px; height: 36px; text-align: center; display: block;}
#magazine-tools ul li a:hover{background-color: #FFFFFF; color: #303639;
	-webkit-transition: background-color 300ms linear;
    -moz-transition: background-color 300ms linear;
    -o-transition: background-color 300ms linear;
    -ms-transition: background-color 300ms linear;
    transition: background-color 300ms linear;
}

#magazine-tools-singlepage{position: relative; display: block; width: 100%; background-color: #303639; padding: 5px;}
#magazine-tools-singlepage ul{display: block;}
#magazine-tools-singlepage ul.left{float: left;}
#magazine-tools-singlepage ul.right{float: right;}
#magazine-tools-singlepage ul li{display: inline-block;}
#magazine-tools-singlepage ul li a{padding: 5px; color: #FFFFFF; width: 36px; height: 36px; text-align: center; display: block;}
#magazine-tools-singlepage ul li a:hover{background-color: #FFFFFF; color: #303639;
	-webkit-transition: background-color 300ms linear;
    -moz-transition: background-color 300ms linear;
    -o-transition: background-color 300ms linear;
    -ms-transition: background-color 300ms linear;
    transition: background-color 300ms linear;
}

a#magazine-tools-next.disabled{cursor: not-allowed;}
a#magazine-tools-prev.disabled{cursor: not-allowed;}



#magazine-list{display: block; width: 100%; margin-top: 20px; padding-left: 30px; padding-right: 30px;}
#magazine-list .owl-nav .owl-prev{position: absolute; left: 0px; top: 50%;}
#magazine-list .owl-nav .owl-next{position: absolute; right: 0px; top: 50%;}
#magazine-list .overlay{display: none; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(48, 54, 57, 0.5); /*#303639; opacity: 0.5;*/ color: #FFFFFF;}
#magazine-list .overlay > .caption{display: block; padding: 10px;}
#magazine-list .overlay > .caption:first-child{margin-top: 35%; text-align: center;}
#magazine-list div.item:hover .overlay{display: block; z-index:10;}

#magazine-tools-fullscreen.active{text-decoration:none;}
#magazine-tools-fullscreen > i.fa-compress{display:none;}
#magazine-tools-fullscreen.active > i.fa-compress{display:block;}
#magazine-tools-fullscreen.active > i.fa-expand{display:none;}


#magazine .magazine-page .entity{z-index: 10;}