/*
Theme Name: TravelToPast
Theme URI: https://wordpress.org/themes/traveltopast/
Author: Squick
Author URI: skype://squick.fl
Description: Theme created by Squick special for TravelToPast company
Version: 1.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: traveltopast
Tags: adaptive, music

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/
@import url('https://fonts.googleapis.com/css?family=Lobster|Raleway:500,900');
@import url(assets/css/nouislider.min.css);
a, a:hover {color: inherit;text-decoration: none;}
body { font-family: 'Raleway', sans-serif; background: #c8c7b1; }
main .row { margin: 0; }
footer { background: #1d1d14; color: #878676; padding: 20px; line-height: 10px; width: 100%; }
footer h5 {font-size:11pt; }
footer a { color: #b4b4ae; text-decoration: underline; }
footer a:hover { color: #7b7a73; }
header { height: 250px; width: 100%; position: relative; }
.content { background: #c8c7b1; padding: 20px 0; }
.buttons{ position: absolute; font-size:45pt; left: 1%; }
.buttons div { line-height: 0; }
.buttons.fixed { position: fixed; top: 38px; }
.fa-chevron-circle-left, .fa-chevron-circle-up { display: none; opacity: 0.6; transition: opacity .4s;}
.fa-chevron-circle-left:hover, .fa-chevron-circle-up:hover { opacity: 1; }
.player { background: #949482; height:0 ; transition: height .4s; }
.player h5 { font-weight: bold; color: #22210f; margin: 0; font-size: 14pt;}
.player h6 { color: #22210f; font-size: 11pt;}
.player h5, .player h6 { overflow: hidden;text-overflow: ellipsis; white-space: nowrap; }
.prev-cover img, .cover img, .next-cover img { border-radius: 3px; }
.player .col-8 { position: relative; opacity:0; transition: opacity .4s; }
.player .cover { position: absolute;left: -85px;top: -15px; transition: all .4s; }
.player .prev-cover, .player .next-cover {  position: absolute;top: -5px; opacity: 0.5; transition: all .4s; }
.player.opened { height: 100px; }
.player.opened .col-8 { opacity: 1; }
.prev-cover { left:-155px; }
.next-cover { right: -130px; }
.player .cover.prev { left: -155px; top: -5px; opacity: 0.5; }
.player .cover.prev img, .player .cover.next img { width: 55px; }
.player .next-cover.prev { right: 135px; top: -15px; }
.player .next-cover.prev img, .player .prev-cover.next img { width: 70px; }
.player .cover.next { left: 195px; top: -5px; opacity: 0.5; }
.player .prev-cover.next { left: -85px; top: -15px; }
.prev-cover:hover, .next-cover:hover { opacity: 1; }
.player .current, .player .covers {     position: absolute;left: 45%;width: 120px;top: 30%; }
.player .covers { display: none; }
.player .point { position: absolute; height: 0; width: 0px; -webkit-box-shadow: 0px 0px 150px 70px rgba(255,255,255,1); top: 25px; left: 30%; }
.player .info { position: absolute; width: 100%; }
.player .control { position: absolute;right: -55px; top: -5px; padding-top: 3px; }
.player .volume { position: absolute; right: -300px; width: 120px; top: 18px; }
.control.pause:after { content: "\f04c";position: absolute;color: #30301e;top: 15px;left: 18px;font-family: FontAwesome;}
.control.play:after { content: "\f04b";position: absolute;color: #30301e;top: 15px;left: 21px;font-family: FontAwesome;}
.slideshow { display: none; height: 250px; width: 100%; background-size: cover!important; }
.overlay { background: #000; opacity: 0; position: absolute; top: 0; width: 100%; height: 100%; transition: opacity 1s; }
.logo { background: url(assets/images/logo.png) no-repeat center;width: 100%;position: absolute;height: 100%;top: 0; }
.cat { position: relative; display: inline-block; cursor: pointer; width: 30%; height: 250px; text-align: center; background: #fff;padding: 10px; border-radius: 3px;margin: 1.4%; -webkit-box-shadow: 0px 10px 32px -4px rgba(0,0,0,0.75);-moz-box-shadow: 0px 10px 32px -4px rgba(0,0,0,0.75); box-shadow: 0px 10px 32px -4px rgba(0,0,0,0.75); opacity: 0.5; transition: opacity .4s; }
.cat:hover { opacity: 1; }
.cat:hover .cat-next { transform: rotate(180deg); }
.cat h3 { position: absolute; top: 20px; text-align: center; font-family: 'Lobster', cursive; color: #fff; width: 100%; font-size: 35pt;background: rgba(0,0,0,0.5);}
.cat-next { background: url(assets/images/cat-next.png) no-repeat; width: 56px; height: 56px; position: absolute; bottom: 25px; left: 40%; transition: transform .4s;}
.noUi-connect, .noUi-target  { background: #e7d575;border-radius: 4px; box-shadow: none; border: none; }
.noUi-horizontal  { height: 5px; }
.noUi-horizontal .noUi-handle {width: 16px;height: 16px;border-radius: 100%;left: -8px;}
.noUi-handle:after, .noUi-handle:before { display: none; }
.post-content { background: #e7e7dd; padding: 0; }
.post-title { height: 250px; text-align: center; background-size: cover; display: table; width: 100%; }
.post-title-text { display: table-cell; vertical-align:middle; }
.post-title-text span { font-size: 25pt;color: #fff;background: rgba(0, 0, 0, 0.6); line-height: 39px; padding: 2px 7px;}
.post-title-text span.small { font-size: 15pt; }
.post-block { padding: 25px 30px; clear:both;}
.post { background: #fff; overflow: hidden; padding: 10px; cursor: pointer; font-size: 10pt; transition: transform .4s; }
.post:not(:first-child) {border-top: 2px solid #30301e; }
.post:hover { transform: scale(1.05); }
.post-image { position: relative; height: 150px;width: 150px;float: left;overflow: hidden;margin-right: 10px; }
.post img { border-radius: 3px;position: absolute; left: 50%; top: 50%; height: 100%; width: auto; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}
.post h6 { font-size: 15pt; }
.alignnone {
    margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

.alignright {
    float:right;
    margin: 5px 0 20px 20px;
}

.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}

a img.alignnone {
    margin: 5px 20px 20px 0;
}

a img.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.move_up{
    cursor: pointer;
}
.overflow,.modal{
    display: none;
    position: fixed;
}
.overflow{
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0,0,0,.95);
}
.modal{
    left: 50%;
    top: 50%;
    max-width: 800px;
    min-height: 80%;
    overflow-y: auto;
    margin-left: -400px;
    margin-top: -250px;
}
.iframe_click {
    position: absolute;
    cursor: pointer;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.iframe_modal {
    position: relative;
    display: inline-block;
}
.modal iframe {
    width: 100%;
    max-width: 800px;
    height: 500px;
}