/* body,html{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #333333;
    font-family: Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;
    font-size: 16px;
    line-height: 20px;
    color: #0e0e0e
}
body *,html *{box-sizing:border-box!important}
body{overflow-x:hidden} */
@media screen and (max-width:768px){body{font-size:.9rem}}
h2{width:100%;margin:0 auto 80px;padding:0;font-weight:500;font-size:1.8rem;text-align:center}
.Wrapper{
    margin:0 auto;
    padding:0 5px;
    /* width:1170px; */
    max-width:100%;
    /* overflow:hidden */
}
.Wrapper_flex{-ms-flex-pack:distribute;justify-content:space-around;-ms-flex-line-pack:center}
.Wrapper_flex,.Wrapper_flex_center{
    display:-ms-flexbox;
    /* display:flex; */
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    -ms-flex-align:center;
    align-items:center;
    /* align-content:center */
}
.Wrapper_flex_center{
    -ms-flex-pack:center;
    /* justify-content:center; */
    justify-content:right;
    -ms-flex-line-pack:center
}
.Wrapper h3{
    margin:30px auto;
    width:80%;
    font-weight:500;
    font-size:1.3rem
}
@media screen and (max-width:768px){.Wrapper h3{width:100%}}
.Wrapper h3:first-of-type{
    margin-top:0
}
.Wrapper pre{
    display:block;
    width:80%;
    margin:10px auto;
    padding:20px 10px 0;
    background-color:#f5d796;
    overflow:hidden
}
@media screen and (max-width:550px){.Wrapper pre{width:100%}}
@media screen and (max-width:425px){.Wrapper pre{font-size:.8rem}}
.Wrapper .Descr{
    width:80%
}
@media screen and (max-width:768px){.Wrapper .Descr{width:100%}}
.Wrapper .Descr code{display:block;margin:10px auto;padding:20px 10px;background-color:#f5d796}
@media screen and (max-width:425px){.Wrapper .Descr code{font-size:.8rem}}
.Wrapper .Descr span{font-weight:600;color:#f5d796;text-shadow:1px 1px 4px #0e0e0e}
.Wrapper .Options{width:80%;border-collapse:collapse}
@media screen and (max-width:768px){.Wrapper .Options{width:100%}}
@media screen and (max-width:432px){.Wrapper .Options{font-size:.7rem}}
@media screen and (max-width:350px){.Wrapper .Options{font-size:.55rem}}
.Wrapper .Options thead{
    background-color:#f5d796}

.Wrapper .Options td,.Wrapper .Options th{width:100px;border:1px solid #0e0e0e;padding:5px;text-align:center;vertical-align:middle}
.Wrapper .Options td:nth-of-type(odd),.Wrapper .Options th:nth-of-type(odd){background-color:#f5d79666}
.Wrapper .Options td:last-of-type,.Wrapper .Options th:last-of-type{
    width:40%
}
#preload{
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    overflow:hidden;
    background-color:#0e0e0e;
    transition:all .5s;
    z-index:999999
}
#preload svg{
    position:absolute;
    top:calc(50% - 32px);
    left:calc(50% - 32px)
}
.Header{
    position:fixed;
    top:0;
    left:0;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-pack:center;
    justify-content:center;
    -ms-flex-align:center;
    align-items:center;
    -ms-flex-line-pack:center;
    align-content:center;
    padding:10px 0;
    width:100%;
    text-align:center;
    background-color:#f5d796;
    z-index:14
}
@media screen and (max-width:650px){.Header{height:45px}}
.OpenNav{
    top:10px;
    left:15px;
    display:none;
    height:24px;
    background-clip:content-box;
    border-top:11px solid transparent;
    border-bottom:11px solid transparent;
    z-index:111
}
.OpenNav,.OpenNav:after,.OpenNav:before{
    position:absolute;
    width:30px;
    background-color:#0e0e0e;
    transition:all .5s
}
.OpenNav:after,.OpenNav:before{
    left:0;
    display:block;
    height:2px;
    content:""
}
.OpenNav:before{
    top:-10px
}
.OpenNav:after{
    top:10px
}
@media screen and (max-width:650px){.OpenNav{display:block}}
.OpenNav_open{background-color:transparent}
.OpenNav_open:before{top:0;transform:rotate(45deg)}
.OpenNav_open:after{top:0;transform:rotate(-45deg)}
.Navbar{
    display:-ms-flexbox;
    display:flex;
    -ms-flex-pack:justify;
    justify-content:space-between;
    -ms-flex-align:center;
    align-items:center;
    -ms-flex-line-pack:center;
    align-content:center;
    padding:0 10px;
    width:100%;
    height:100%
}
@media screen and (max-width:650px){.Navbar{position:fixed;top:0;left:0;bottom:0;right:0;-ms-flex-wrap:wrap;flex-wrap:wrap;background-color:#f5d796;transform:translateY(-100%);opacity:0;transition:all .5s;z-index:100}}
.Navbar_open{
    opacity:1;
    transform:translateY(0)
}
.Navbar a{
    display:block;
    padding:5px;
    text-decoration:none;
    color:#0e0e0e
}
.Navbar-List{
    display:-ms-flexbox;
    display:flex;
    -ms-flex-pack:center;
    justify-content:center;
    -ms-flex-align:center;
    align-items:center;
    -ms-flex-line-pack:center;
    align-content:center;
    margin:0;
    padding:0;
    list-style:none;
    font-size:0
}
@media screen and (max-width:650px){.Navbar-List{-ms-flex-wrap:wrap;flex-wrap:wrap;width:100%;margin:30px auto}}
.Navbar-Link{
    display:inline-block;
    padding:0 5px;
    font-size:1rem
}
@media screen and (max-width:650px){.Navbar-Link{width:100%;margin:5px auto}}
.Navbar-Link a{
    color:#fcfaf9;
    text-shadow:1px 1px 1px #0E0E0E80;
    font-weight:600;
    border-bottom:2px solid transparent;
    transition:all .25s
}
@media screen and (max-width:650px){.Navbar-Link a{padding:10px;font-size:1.2rem}}
.Navbar-Link a:hover{
    color:#0E0E0E80;
    text-shadow:1px 1px 1px #fcfaf9;
    border-color:#0E0E0E80
}
@media screen and (max-width:650px){.Navbar-Link a:hover{border-color:transparent}}
@media screen and (max-width:650px){.Navbar-Social{width:100%;margin:30px auto}}
.Navbar-Social a{
    width:35px;
    height:35px;
    border:1px solid transparent;
    border-radius:50%;
    text-align:center;
    line-height:35px;
    padding:5px;
    transition:all .2s
}
@media screen and (max-width:650px){.Navbar-Social a{width:60px;height:60px;margin:0 auto}}
.Navbar-Social a:hover{
    background-color:#0E0E0E80
}
.Navbar-Social a:hover svg{
    fill:#fcfaf9
}
.QuickStart{
    display:-ms-flexbox;
    display:flex;
    -ms-flex-align:center;
    align-items:center;
    -ms-flex-pack:center;
    justify-content:center;
    padding:135px 0 0;
    height:auto
}
.QuickStart h1{
    margin:0 auto 50px;
    padding:0;
    font-size:3.1rem;
    line-height:55px;
    font-weight:450;
    text-align:center;
    color:#f5d796;
    text-shadow:1px 1px 4px #0E0E0E80
}
.QuickStart h1 span{
    display:block;
    font-size:.5em
}
.QuickStart-About{
    margin:50px auto 0;
    width:590px;
    max-width:100%;
    overflow:auto
}
@media screen and (max-width:560px){.QuickStart-About{width:420px;font-size:.7rem}}
@media screen and (max-width:425px){.QuickStart-About{width:360px}}
.QuickStart-About pre{
    width:100%;
    background:none
}
@media screen and (max-width:425px){.QuickStart-About pre{
    padding:20px 0 0;
    font-size:.6rem
}}
@media screen and (max-width:360px){.QuickStart-About pre{
    font-size:.53rem
}}
.Features{padding:80px 0 0}
.Features .Feature{
    -ms-flex-pack:justify;
    justify-content:space-between;
    margin:10px;
    width:400px;
    max-width:100%;
    vertical-align:middle
}
.Features .Feature,.Features .Feature-Img{
    display:-ms-flexbox;
    display:flex;
    -ms-flex-align:center;
    align-items:center
}
.Features .Feature-Img{-ms-flex-pack:center;justify-content:center;width:100px;height:100px;border-radius:50%;border:1px solid #0e0e0e;background-color:#f5d796}
@media screen and (max-width:425px){.Features .Feature-Img{margin-right:15px;width:90px;height:90px}}
.Features .Feature-Img img{
    width:65px;
    height:65px
}
@media screen and (max-width:425px){.Features .Feature-Img img{width:50px;height:50px}}
.Features .Feature-Text{
    width:280px
}
@media screen and (max-width:425px){.Features .Feature-Text{
    width:200px;
    -ms-flex-positive:1;
    flex-grow:1
}}
.Features .Feature-Name{
    margin:5px 0 8px;
    font-weight:400;
    font-size:1.4rem
}
.Features .Feature-Descr{
    margin:5px 0;
    line-height:1.3rem;
    font-size:.9rem
}
@media screen and (max-width:425px){.Features .Feature{max-width:100%}}
.Lgallery{padding:80px 0 0}
.TemplateLgallery{
    position:relative;
    width:24%;
    height:auto;
    margin:0 15px 15px 0;
}
.TemplateLgallery-Item{
    width:100%;
    height:200px;
    box-shadow:1px 1px 4px rgba(0,0,0,.4);
    overflow-y:hidden;
    cursor:pointer
}
.TemplateLgallery-Item img{
    display:block;
    width:100%;
    height:100%;
    -o-object-fit:cover;
    object-fit:cover
}
@media screen and (min-width:1024px){.TemplateLgallery{transition:all .5s}
.TemplateLgallery:hover{
    transform:scale(.8) rotate3d(-1,1,0,-20deg);
    box-shadow:-10px -10px 2px .3px rgba(0,0,0,.6),-20px -20px 3px .3px rgba(0,0,0,.3),-30px -30px 4px .3px rgba(0,0,0,.1)
}}
.Lgparent{
    padding:80px 0 0
}
.TemplateParent{
    display:-ms-flexbox;
    display:flex;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    -ms-flex-pack:center;
    justify-content:center;
    -ms-flex-align:start;
    align-items:flex-start;
    -ms-flex-line-pack:start;
    align-content:flex-start;
    width:100%
}
.TemplateParent-Item{
    position:relative;
    width:150px;
    height:150px;
    margin:0 10px 20px
}
.TemplateParent-Item img:not(.LGallerySlider-Slide){
    width:100%;
    height:100%;
    opacity:.8;
    transition:all .5s
}
.TemplateParent-Item span{
    position:absolute;
    bottom:0;
    left:0;
    padding:1px 0;
    display:block;
    width:100%;
    height:20px;
    line-height:20px;
    text-align:center;
    color:#fcfaf9;
    background-color:#0E0E0E80;
    transition:all .5s
}
@media screen and (min-width:1024px){.TemplateParent-Item:hover img:not(.LGallerySlider-Slide){
    opacity:1;transform:scale(.8) rotate3d(-1,1,0,-20deg);
    box-shadow:-10px -10px 2px .3px rgba(0,0,0,.6),-20px -20px 3px .3px rgba(0,0,0,.3),-30px -30px 4px .3px rgba(0,0,0,.1)}
.TemplateParent-Item:hover span{
    height:75px;
    line-height:75px;
    opacity:0;
    z-index:-1
}
}
.Lgslider{
    padding:80px 0 0
}
.TemplateSlider{
    margin:0 auto;
    width:1020px;
    max-width:100%;
    height:550px;
    max-height:70%
}
.Lgpreview{
    padding:80px 0 0
}
.TemplatePreview{
    width:1020px;
    max-width:100%;
    height:550px;
    margin:0 auto
}
.Lgcarusel{
    padding:80px 0 0
}
.TemplateCarusel{
    width:100%;
    max-width:100%;
    height:400px;
    max-height:100%;
    text-align:center;
    overflow:hidden
}
.TemplateCarusel .LGCarusel-Slide picture img{
    height:100%;
    width:100%;
    -o-object-fit:cover;
    object-fit:cover
}
.CardOfGoofs{
    padding:10px 50px;
    width:980px;
    max-width:100%;
    height:320px
}
.CardOfGoofs .LGCarusel,.CardOfGoofs .LGCarusel-Slider{
    overflow:visible!important
}
.CardOfGoofs .LGCarusel svg{
    fill:#000!important
}
.CardOfGoofs .LGCarusel .LGCarusel-Button_next{
    right:-45px!important
}
.CardOfGoofs .LGCarusel .LGCarusel-Button_prev{
    left:-45px!important
}
.CardOfGoofs .newGood{
    position:relative;
    padding:0 10px;
    width:250px;
    height:300px;
    border-radius:10px;
    color:#211b29;
    background-color:#f5d79680;
    box-shadow:1px 1px 4px #000
}
.CardOfGoofs .newGood img{
    margin:20px auto;
    width:60%;
    border-radius:10px;
    box-shadow:1px 1px 4px rgba(0,0,0,.4)
}
.CardOfGoofs .newGood h3{
    margin:10px auto
}
.CardOfGoofs .newGood button{
    position:absolute;
    bottom:20px;
    left:calc(50% - 100px / 2);
    padding:5px 0;
    border:1px solid #000;
    border-radius:10px;
    width:100px;
    font-weight:700;
    color:#fff;
    background-color:#83192d;
    cursor:pointer
}
.CardOfGoofs .newGood button:hover{
    background-color:#451930
}
.Methods,.Thanks{
    padding:80px 0 0
}
.Thanks{
    margin-top:80px;
    padding-bottom:0;
    padding:40px 0;
    background-color:#f5d79680
}