lite-youtube {
    background-color: #000;
    position: relative;
    display: block;
    contain: content;
    background-position: center center;
    background-size: cover;
    cursor: pointer;
    max-width: 720px;
}

/* gradient */
lite-youtube::before {
}

lite-youtube:hover::before {
    color: white;
}

/* responsive iframe with a 16:9 aspect ratio
    thanks https://css-tricks.com/responsive-iframes/
*/
lite-youtube::after {
    content: "";
    display: block;
    padding-bottom: calc(100% / (16 / 9));
}
lite-youtube > iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
}

/* play button */
lite-youtube > .lty-playbtn {
    display: block;
    /* Make the button element cover the whole area for a large hover/click target… */
    width: 100%;
    height: 100%;
    /* …but visually it's still the same size */
    background: no-repeat center/68px 48px;
    /* YT's actual play button svg */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 48"><path d="M66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19C55.79.13 34 0 34 0S12.21.13 6.9 1.55c-2.93.78-4.63 3.26-5.42 6.19C.06 13.05 0 24 0 24s.06 10.95 1.48 16.26c.78 2.93 2.49 5.41 5.42 6.19C12.21 47.87 34 48 34 48s21.79-.13 27.1-1.55c2.93-.78 4.64-3.26 5.42-6.19C67.94 34.95 68 24 68 24s-.06-10.95-1.48-16.26z" fill="red"/><path d="M45 24 27 14v20" fill="white"/></svg>');
    position: absolute;
    cursor: pointer;
    z-index: 1;
    filter: grayscale(100%);
    border: 0;
}

lite-youtube:hover > .lty-playbtn,
lite-youtube .lty-playbtn:focus {
    filter: none;
}

/* Post-click styles */
lite-youtube.lyt-activated {
    cursor: unset;
}
lite-youtube.lyt-activated::before,
lite-youtube.lyt-activated > .lty-playbtn {
    opacity: 0;
    pointer-events: none;
}

.lyt-visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }
// lite youtube end

.resovid{
    margin:0 80px 
}
  lite-youtube {
    max-width: 100%;
    margin: 0 auto;
    aspect-ratio: 16 / 9
  }
.bandcamp {
    max-width: 500px;
    margin: auto;
    padding-top: 10px;
    padding-bottom: 40px
}
.center {
    text-align: center
}
.pressbar ul {
  list-style-type: none;
}
.pressbar ul ul {
    margin-left:20px;
}
.pressbar {
    font-size: 14px;
}
.pressbar p {
    font-size: 14px;
}
.solid {
    border-top: 1px solid #333;
}
.row:after,.row:before{
    content:"";
    display:table 
}
.row:after{
    clear:both 
}
.leftindent {
    padding-left: 20px;
}
.indent {
    padding: 0 20px 
}
figure{
    display:inline-block;
    width:25%;
    margin:0 
}
body{
    margin:10px 0 0 0;
    background:#000;
    background-image:url(assets/images/lostecho/bg2.webp);
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:top left;
    color:#bbb;
    -webkit-font-smoothing:antialiased;
    -webkit-text-size-adjust:none;
    -ms-text-size-adjust:none;
    font:16px/1.1 Helvetica,sans-serif 
}
.sociallinks{
    float:right;
    margin-right:1%;
    margin-top:85px 
}
.sociallinks img{
    margin-right:10px 
}
a{
    color:#ff1010;
    text-decoration:none;
    line-height:inherit;
    outline:0;
    border-style:none;
    border-width:0 
}
a:hover{
    color:#2795b6 
}
a:focus{
    color:#2ba6cb;
    outline:0 
}
p{
    font-weight:400;
    font-size:16px;
    line-height:1.5 
}
.nav-bar ul {
    margin: 0 
}
h1,h2,h3,h4,h5,h6{
    font-weight:400;
    color:#ddd;
    text-rendering:optimizeLegibility;
    line-height:1.1;
    margin-bottom:5px;
    margin-top:10px 
}
.blog_post{
    font-family:'Helvetica Neue',Helvetica,sans-serif;
    color: #bbb 
}
.botstuff{
    margin:0 20px 
}
h1{
    padding-bottom: 5px;
    font-size:30px 
}
h2{
    font-size:25px;
}
h3{
    font-size:22px 
}
h4{
    font-size:18px 
}
h5{
    font-size:16px 
}
h6{
    font-size:14px 
}
.solidsmaller{
    margin:10px 0 11px;
    border-top: 1px solid #333 
}
hr{
    border:solid #ddd;
    clear:both;
    height:0;
    border-width:1px 0 0;
    margin:22px 0 21px 
}
em,i{
    font-style:italic;
    line-height:inherit 
}
b,strong{
    font-weight:700;
    line-height:inherit 
}
.row .row{
    background-color:#111;
    width:auto;
    max-width:none;
    min-width:0;
    margin:0 
}
.columns{
    float:left;
    min-height:1px;
    position:relative;
    padding:0 20px 
}
embed,object{
    height:100%;
    max-width:none 
}
img{
    image-rendering:auto;
     max-width:100% 
}
.nav-bar>ul>li{
    float:left;
    display:block;
    position:relative;
    border-right:none;
    color:#ccc;
    margin:0;
    padding:0 
}
.nav-bar>ul>li.active{
    background:#900 
}
.nav-bar>ul>li.active>a{
    color:#ccc;
}
.nav-bar>ul>li.active:hover{
    color:#ddd;
    background:#b00;
}
.nav-bar>ul>li:hover{
    color:#fff;
    background:#333 
}
.nav-bar>ul>li>a{
    color:#ccc 
}
.nav-bar>ul>li>a:first-child{
    display:block;
    text-decoration:none;
    font-size:16px;
    padding:0 20px 
}
.row .three,.three{
    width:333px 
}
.row .six,.six{
    width:50%
}
.aboutsix {
float:left;
width:50%;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box 
}
.nine,.row .nine{
    flex:1;
    background-color:#111;
    -webkit-font-smoothing:subpixel-antialiased 
}
.twelveflx{
    width:100%;
    display:flex 
}
figure{
    margin:0 
}
.blog_post ul {
    padding-left:40px;
    line-height: 1.4;
}
.blog_post ol {
    padding-left:40px;
    line-height: 1.4;
}
.maxwidth100{
    max-width:100% 
}
.resologo {
padding-top:20px;
aspect-ratio: auto 2048 / 549;
    width: 80%;
}
@media print{
    *{
        background:0 0;
        color:#000;
        box-shadow:none;
        text-shadow:none;
        filter:none;
        -ms-filter:none 
    }
    a,a:visited{
        text-decoration:underline 
    }
    blockquote,pre{
        border:1px solid #999;
        page-break-inside:avoid 
    }
    thead{
        display:table-header-group 
    }
    img,tr{
        page-break-inside:avoid 
    }
    img{
        max-width:100% 
    }
    @page{
        margin:.5cm 
    }
    h2,h3,p{
        orphans:3;
        widows:3 
    }
    h2,h3{
        page-break-after:avoid 
    }
}
.page_wrap_blog{
    margin:auto;
    width:75%;
    min-width:1000px;
    max-width:1400px;
    padding-bottom:20px;
}
.breadcrumb{
    text-align:center;
    margin:auto 
}
.sidebartitle {
font-size: 110%;
}
.white{
    color:#fff;
}
.datewhite{
    color:#999;
    font-size: smaller;
}
ul {
    padding:0;
}
.breadcrumb ol{
    margin:0;
    padding:0;
    list-style-type:none;
    color:#ccc 
}
.breadcrumb ol li{
    display:inline;
    padding: 0 10px;
}
.legalstuff{
    font-size:14px;
    text-align:center;
    color:#ddd;
    margin:auto 
}
.quotesleft{
    float:left;
    width:50%;
    text-align:center;
    font-size:14px;
    padding-bottom:15px 
}
.quotesright{
    float:right;
    width:50%;
    text-align:center;
    font-size:14px;
    padding-bottom:15px 
}
.featright{
    float:right;
    width:40%;
    margin:40px 
}
.featright p{
    color:#ccc;
    text-indent:20px;
    text-align:justify 
}
.features{
    text-align:justify;
    width:60%;
    color:#ccc;
    margin:auto;
    padding-top:120px;
}
.resotext{
margin:auto;
width:70%
}
.features h3{
    margin-left:30px;
}
.lescreenshots{
    margin-left:auto;
    margin-right:auto;
    width:100%;
    padding-top:10px;
    text-align: center;
    font-size: 0 
}
.lescreenshots img{
    border:0px;
    margin:0px;
    padding:0px 
}
textarea{
    resize:none 
}
.redbar{
    width:100%;
    overflow:auto;
    background-color:#222;
    border-width:0 
}
.awards{
    width:100%;
    position:relative;
    display:block;
    margin:auto;
    margin-top:20px 
}
.awards img{
    margin:2% 
}
.resostuff{
    -webkit-font-smoothing:antialiased;
    color:#aaa;
    direction:ltr;
    display:block;
    font-family:Helvetica,sans-serif;
    font-weight:400;
    margin-bottom:0;
    text-align:justify;
    margin-top:50px;
    padding:0 
}
.resostuff img{
    display:block 
}
.resostuff h3{
    margin-left:9%;
    margin-right:5%;
    color:#fa0000 
}
.resostuff p{
    margin-left:5%;
    margin-right:5% 
}
.lostechopage{
    line-height:1;
    font-size:16px;
    text-align:center;
    color:#ccc;
    background-color:#0d0d0d 
}
.splashreso{
    font-family: 'Roboto', sans-serif;
    line-height:1;
    font-size:16px;
    text-align:center;
    color:#ccc;
}
.splashreso p{
    font-size:17px;
    text-align: justify;
    margin-left: 20px;
    margin-right: 20px;
}
.headerbar{
    width:100%;
    margin-bottom:10px;
    position:relative;
    height:120px 
}
.nav-bar>ul>li{
    font-family:sans-serif;
    line-height:38px;
    padding:0;
}
.nav-bar>ul>li.last{
    border-right-width:0 
}
.nav-bar>ul>li:hover{
    background:#800;
    color:#222;
}
.footer_menu{
font-size: 18px;
    text-align:center;
    margin-bottom:5px;
    margin-top:25px 
}
.footer_menu li{
    display:inline;
    list-style:none;
    margin:0 10px 
}
.quotesleft a,.quotesright a{
    text-align:center;
    display:block;
    margin:auto 
}
.istore{
    display:inline-block;
    width: 200px;
    overflow:hidden;
    margin:.25% 
}
.googlestoreplay{
    display:inline-block;
    width: 225px;
    overflow:hidden;
    margin:.25% 
}
.googleplaypass{
    display:inline-block;
    width: 331px;
    overflow:hidden;
    margin:.25% 
}
    .istore img{
        width:100% 
    }
    .googlestoreplay img{
        width:100% 
    }
    .googleplaypass img{
        width:100% 
    }
.video-container{
    position:relative;
    padding-bottom:56.25%;
    padding-top:0;
    height:0 
}
.video-container embed,.video-container iframe,.video-container object{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100% 
}
.kblogo{
    float:left;
    position:absolute;
    bottom:0;
    left:4% 
}
@media only screen and (max-width:1000px){
.resologo {
padding-top: 20px;
aspect-ratio: auto 2048 / 549;
    width: 98%;
}

    .sidebar{
        display: none
    }
    .leftindent {
        padding-left: 20px;
        padding-right: 20px 
    }
    .resovid{
        margin:auto;
        max-width:750px 
    }
    .row{
        width:auto;
        min-width:0;
        margin-left:0;
        margin-right:0 
    }
    .nav-bar>ul{
        padding:0;
    }
    .nav-bar>ul>li{
        padding: 3px 6px 
    }
    .twelveflx{
        width:100%;
        margin:auto;
        padding:0;
        display:block 
    }
    .page_wrap_blog{
        max-width: 710px;
        margin:auto;
        padding-bottom:20px 
    }
    .features{
        width:90%!important 
    }
.resotext{
width:100%!important
}
    .column,.columns{
        width:auto!important;
        float:none 
    }
.aboutsix {
width:auto!important;
        float:none 
}
    .istore{
        display:inline-block;
        overflow:hidden;
        margin:.3%;
        width:30%;
        max-width:200px 
    }
    .googlestoreplay{
        display:inline-block;
        overflow:hidden;
        margin:.3%;
        width:34.05%;
        max-width:227px 
    }
    .googleplaypass{
        display:inline-block;
        overflow:hidden;
        margin:.3%;
        width:49.65%;
        max-width:331px 
    }
    .nav-bar>ul>li>a:first-child{
        display:block;
        text-decoration:none;
        font-size:16px;
        padding:0 10px;
    }
}
@media only screen and (max-width:464px){
 .sociallinks {
margin-top:0;
display: flex;
width:100%;
justify-content:space-around;
margin-right:0;
}
.sociallinks img {
margin-right: 0;
}
.headerbar {
height: 146px;
}
}