@font-face {
    font-family:'Wigrum';
    src:url("../fonts/Wigrum-Light.eot");
    src:url("../fonts/Wigrum-Light.eot?#iefix") format("embedded-opentype"), url("../fonts/Wigrum-Light.woff2") format("woff2"), url("../fonts/Wigrum-Light.woff") format("woff"), url("../fonts/Wigrum-Light.ttf") format("truetype"), url("../fonts/Wigrum-Light.svg#Wigrum-Light") format("svg");
    font-weight:300;
    font-style:normal;
}

@font-face {
    font-family:'Wigrum';
    src:url("../fonts/Wigrum-Bold.eot");
    src:url("../fonts/Wigrum-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/Wigrum-Bold.woff2") format("woff2"), url("../fonts/Wigrum-Bold.woff") format("woff"), url("../fonts/Wigrum-Bold.ttf") format("truetype"), url("../fonts/Wigrum-Bold.svg#Wigrum-Bold") format("svg");
    font-weight:bold;
    font-style:normal;
}

@font-face {
    font-family:'Wigrum';
    src:url("../fonts/Wigrum-Medium.eot");
    src:url("../fonts/Wigrum-Medium.eot?#iefix") format("embedded-opentype"), url("../fonts/Wigrum-Medium.woff2") format("woff2"), url("../fonts/Wigrum-Medium.woff") format("woff"), url("../fonts/Wigrum-Medium.ttf") format("truetype"), url("../fonts/Wigrum-Medium.svg#Wigrum-Medium") format("svg");
    font-weight:500;
    font-style:normal;
}

@font-face {
    font-family:'Wigrum';
    src:url("../fonts/Wigrum-LightItalic.eot");
    src:url("../fonts/Wigrum-LightItalic.eot?#iefix") format("embedded-opentype"), url("../fonts/Wigrum-LightItalic.woff2") format("woff2"), url("../fonts/Wigrum-LightItalic.woff") format("woff"), url("../fonts/Wigrum-LightItalic.ttf") format("truetype"), url("../fonts/Wigrum-LightItalic.svg#Wigrum-LightItalic") format("svg");
    font-weight:300;
    font-style:italic;
}

/* ==========================================================================
   Common Css
   ========================================================================== */

body {
    font-family:'Wigrum';
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    color:#4e4e56;
}

h1, h2, h3, h4, h5, h6{margin-top:0;}
a{text-decoration:none;}
a:focus, a:active, button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, select::-moz-focus-inner, input[type="file"]>input[type="button"]::-moz-focus-inner{outline:0;}

/* ==========================================================================
   Button Css
   ========================================================================== */

.btn{border:none;-webkit-transition:all 300ms linear;transition:all 300ms linear;}
.btn-primary{background-color:#6872f4;}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active{color:#fff;background-color:#4752d8;}
.text-center img{margin-left:auto;margin-right:auto;}

/* ==========================================================================
   Form Css
   ========================================================================== */

.form-control:focus{border-color:inherit;-webkit-box-shadow:none;box-shadow:none;outline:0 !important;}
.form-control:focus ::-moz-placeholder, .form-control:focus :-moz-placeholder, .form-control:focus ::-webkit-input-placeholder, .form-control:focus :-ms-input-placeholder{color:#fff;}
.form-control::-moz-placeholder{color:#9c9ca0;font-weight:300;opacity:1;filter:alpha(opacity = 100);}
.form-control:-moz-placeholder{color:#9c9ca0;font-weight:300;opacity:1;filter:alpha(opacity = 100);}
.form-control::-webkit-input-placeholder{color:#9c9ca0;font-weight:300;opacity:1;filter:alpha(opacity = 100);}
.form-control:-ms-input-placeholder{color:#9c9ca0;font-weight:300;opacity:1;filter:alpha(opacity = 100);}
.form-group{position:relative;margin-bottom:31px;}
.form-control{position:relative;height:auto;border:none;border-radius:0;padding:0 0 20px 0;box-shadow:none;font-size:18px;font-weight:500;color:#6872f4;background-color:transparent;}
select.form-control{background:url("../images/icon-select-down.svg") no-repeat right center;appearance:none;-moz-appearance:none;-ms-appearance:none;-webkit-appearance:none;}
select.form-control option{padding:0;}
.form-border{display:block;position:relative;border-bottom:2px solid #b1b7f9;}
.form-border::before, .form-border::after{position:absolute;content:'';width:0%;height:2px;top:0;background-color:#6670f4;transition:all 350ms ease;}
.form-border::before{left:50%;}
.form-border::after{right:50%;}
.mandetory .form-border::before, .mandetory .form-border::after{width:50%;}
.required-text{position:absolute;right:0;bottom:24px;font-size:18px;font-weight:500;color:#fd5373;}
.required-text{opacity:0;transition:all 350ms ease;}
.required:focus+.required-text, .required:active+.required-text{opacity:1;}

/* ==========================================================================
   Panel Css
   ========================================================================== */

.panel-default{border:none;}
.panel-group .panel{border-top:4px solid #f5f5f9;border-radius:0;box-shadow:none;}
.panel-group .panel+.panel{margin-top:0;}
.panel-default>.panel-heading{background:transparent;border:none;border-radius:0;padding:0;}
.panel-title>.small, .panel-title>.small>a, .panel-title>a, .panel-title>small, .panel-title>small>a{display:block;padding:20px 20px 20px 160px;font-size:24px;font-weight:500;line-height:81px;color:#4e4e56;background:url("../images/arrow-down.svg") no-repeat 42px center;}
.panel-group .panel+.panel .panel-title>a{border-top:none;}

/* .panel-group .panel+.panel .panel-title>a.collapsed {
    border-bottom:4px solid #f5f5f9;
} */

.panel-title>.small:hover, .panel-title>.small>a:hover, .panel-title>a:hover, .panel-title>small:focus, .panel-title>small>a:focus, .panel-default>.panel-heading>.panel-title>a:focus, .panel-default>.panel-heading>.panel-title>a:hover, .panel-default>.panel-heading>.panel-title>a:active{text-decoration:none;}
.panel-default > .panel-heading+.panel-collapse>.panel-body{border-top:4px solid #e6e6eb;padding-left:0;padding-top:0;padding-bottom:0;background-color:#f5f5fa;}
.panel-body>ul{margin-bottom:0;}
.panel-body>ul li+li{border-top:4px solid #e6e6eb;}
.panel-body>ul li a{display:block;padding:45px 20px 45px 160px;font-size:24px;font-weight:500;color:#4e4e56;background:url("../images/icon-play.svg") no-repeat 42px center;background-size:81px;}
.panel-body>ul li a:hover, .panel-body>ul li a:focus, .panel-body>ul li a:active{text-decoration:none;}

/* ==========================================================================
   Open Close Tutorial Css
   ========================================================================== */

.open-close-tutorial{position:absolute;width:100%;max-width:520px;right:20px;bottom:100px;border-radius:5px;text-align:left;box-shadow:1px 2px 18px 0 rgba(0, 0, 0, 0.2);overflow:hidden;opacity:0;visibility:hidden;transition:all 500ms ease;}
.open-close-tutorial.open{opacity:1;visibility:visible;}
.open-close-tutorial::after{position:relative;display:block;content:'';width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #fff;margin-left:460px;}
.open-close-tutorial .panel-group{margin-bottom:0;}
.open-close-tutorial .panel-group .panel{border-top-width:2px;border-color:#dedeea;}
.open-close-tutorial .panel-group .panel:first-child{border-top:none;}
.open-close-tutorial .panel-group .panel:last-child, .open-close-tutorial .panel-group .panel:last-child .panel-body{border-bottom-left-radius:5px;border-bottom-right-radius:5px;}
.open-close-tutorial .panel-title>.small, .open-close-tutorial .panel-title>.small>a, .open-close-tutorial .panel-title>a, .open-close-tutorial .panel-title>small, .open-close-tutorial .panel-title>small>a{padding:20px 70px 20px 25px;font-size:18px;line-height:1.427;background-image:url("../images/arrow-down-small.svg");background-position:470px center;background-size:34px;}
.panel-title > .small.collapsed, .panel-title > .small > a.collapsed, .panel-title > a.collapsed, .panel-title > small.collapsed, .panel-title > small > a.collapsed{background-image:url("../images/arrow-right-big.svg");}
.open-close-tutorial .panel-title>.collapsed{background-image:url("../images/arrow-right.svg");background-position:470px center;background-size:34px;}
.open-close-tutorial .panel-body{padding-right:0;}
.open-close-tutorial .panel-default>.panel-heading+.panel-collapse>.panel-body{border-top-width:2px;}
.open-close-tutorial .panel-body>ul li a{padding:20px 25px 20px 70px;font-size:18px;line-height:1.427;font-weight:normal;background-position:20px center;background-size:34px;}
.open-close-tutorial .panel-body>ul li+li{border-width:2px;}

/* ==========================================================================
   Carousel fade in  
   ========================================================================== */

.carousel-fade .carousel-inner .item {
    -webkit-transition-property:opacity;
    transition-property:opacity;
}

.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
    opacity:0;
}

.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
    opacity:1;
}

.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
    left:0;
    -webkit-transform:translate3d(0, 0, 0);
    transform:translate3d(0, 0, 0);
}

/* ==========================================================================
   Navigation Css
   ========================================================================== */
   
.header {box-shadow:0 1px 0 0 rgba(210, 210, 215, 0.61);
  background-color:#ffffff;
}
.header .navbar-default {
    border:none;
    margin:0;
    padding:15px 0;
    background-color:#fff;
    box-shadow:0 1px 0 0 rgba(210, 210, 215, 0.61);
}

.header .navbar-brand {
    width:232px;
    height:auto;
    padding:0 0 0 15px;
}

.navbar-default .navbar-nav:not(.navbar-button)>li {
    margin-right:29px;
    margin-top:6px;
}

.navbar-default .navbar-nav:not(.navbar-button)>li:last-child {
    margin-right:10px;
}

.navbar-default .navbar-nav:not(.navbar-button)>li>a {
    padding:0;
    font-size:15px;
    font-weight:300;
    color:#4e4e56;
}

.navbar-default .navbar-nav:not(.navbar-button)>.active>a,
.navbar-default .navbar-nav:not(.navbar-button)>li>a:hover,
.navbar-default .navbar-nav:not(.navbar-button)>li>a:focus,
.navbar-default .navbar-nav:not(.navbar-button)>li>a:active {
    color:#6872f4;
    background-color:transparent;
}

.navbar-default .navbar-button>li>a {
    border:none;
    border-radius:17px;
    padding:7px 17px;
    font-size:15px;
    color:#fff;
    font-weight:500;
}

.navbar-default .navbar-button>li>a:hover,
.navbar-default .navbar-button>li>a:focus,
.navbar-default .navbar-button>li>a:active {
    color:#fff;
    background-color:#4752d8;
}

/* ==========================================================================
   Hero Section Css
   ========================================================================== */
.hero {
    position:relative;
    padding-top:86px;
    padding-bottom:50px;
	background-color:#f5f5f9;
}
/*
.hero::before {
    position:absolute;
    content:'';
    width:100%;
    height:270px;
    top:0;
    left:0;
    background-color:#f5f5f9;
}*/

.hero>* {
    position:relative;
}

.hero h1 {
    margin-bottom:20px;
    font-size:72px;
    font-weight:bold;
    color:#6872f4;
}

.hero p {
    margin-bottom:19px;
    font-size:32px;
    font-weight:300;
    color:#4e4e56;
}

.hero p:last-child {
    margin-bottom:0;
}

.hero .video-player {
    margin-top:54px;
}

.hero .video-player img {
    cursor:pointer;
    -webkit-box-shadow:0px 10px 16px -1px rgba(163, 163, 163, 1);
    -moz-box-shadow:0px 10px 16px -1px rgba(163, 163, 163, 1);
    box-shadow:0px 10px 16px -1px rgba(163, 163, 163, 1);
}

/* ==========================================================================
   User Guide Css
   ========================================================================== */
.user-guide {
    padding-top:44px;
    padding-bottom:50px;
}

.user-guide .panel-group:last-child {
    margin-bottom:0;
}

/* ==========================================================================
   Manual Css
   ========================================================================== */
.manual {
    padding:92px 0 144px;
    background-color:#f5f5fa;
}

.manual-box a:hover,
.manual-box a:focus,
.manual-box a:active {
    text-decoration:none;
}

.manual-box a span {
    display:block;
}

.manual-box .icon {
    margin-bottom:12px;
}

.manual-box .title {
    margin-bottom:12px;
    font-size:32px;
    font-weight:bold;
    color:#6872f4;
}

.manual-box .manual-text {
    font-size:21px;
    color:#4d4e56;
}

/* ==========================================================================
   Tyto Block
   ========================================================================== */
.tyto-block {
    padding-top:70px;
    padding-bottom:100px;
}

.tyto-block h2 {
    font-size:48px;
    font-weight:bold;
    color:#6872f4;
}

.tyto-block .btn {
    padding:7px 82px;
    border-radius:20px;
    font-size:18px;
    font-weight:500;
    color:#ffffff;
}

/* ==========================================================================
   Contact Us
   ========================================================================== */
.contact-form {
    max-width:565px;
    margin:82px auto 0;
}

.contact-form .form-button {
    margin-top:56px;
}

/* ==========================================================================
   Help Us
   ========================================================================== */
.help-us {
    background-color:#f5f5f9;
}

.help-us h2 {
    margin-bottom:30px;
}

.help-us p {
    font-size:32px;
    font-weight:300;
    color:#4e4e56;
}

.help-us .heading {
    margin-bottom:40px;
}

.help-us .list-star svg {
    width:62px;
    height:58px;
    fill:#d2d2d7;
    cursor:pointer;
}

.help-us .list-star li.active svg {
    fill:#6872f4;
}

.help-us .message-fom {
    margin-top:29px;
}

.help-us .message-fom .form-button {
    margin-top:47px;
}

.help-us .message-fom .form-button .btn {
    min-width:250px;
}

/* ==========================================================================
   footer Css
   ========================================================================== */
.footer {
    padding:25px 0;
    color:#fff;
    background-color:#4e4e56;
}

.footer li {
    position:relative;
}

.footer .list-links li:not(:last-child) {
    padding-right:0;
}

.footer .list-links li:not(:last-child)::after {
    position:relative;
    content:'.';
    margin-left:5px;
}

.footer ul:not(:last-child) {
    margin-bottom:25px;
}

.footer .list-links li a {
    font-size:10px;
    font-weight:normal;
    color:#fff;
}

.footer .social-links li {
    padding:0 10px;
}

.footer p {
    text-align:left;
    font-size:9px;
    font-weight:normal;
}

.begin {
    position:fixed;
    width:100%;
    left:0;
    bottom:0;
    padding:18px 0;
}

.begin .btn {
    min-width:248px;
    border:none;
    padding:8px 30px;
    font-size:18px;
    font-weight:500;
    color:#ffffff;
    border-radius:23px;
    background-color:#fd5373;
    box-shadow:0.3em 0.3em 1.2em rgba(0, 0, 0, 0.3);
}

.begin .btn:hover,
.begin .btn:focus {
    background-color:#e43052;
}

/* ==========================================================================
   Video Css
   ========================================================================== */
.custom-modal .modal-body {
    padding:0;
    overflow:hidden;
}

.custom-modal video {
    width:100%;
}

.custom-modal .modal-dialog {
    max-width:1200px;
    width:94%;
    border-radius:0;
}

.video-title {
    position:absolute;
    display:flex;
    flex-wrap:wrap;
    top:0;
    left:0;
    width:100%;
    padding:20px;
}

.video-title h5 {
    width:calc(100% - 30px);
    margin-bottom:0;
    font-size:22px;
    font-weight:500;
    color:#fff;
    text-shadow:2px 2px 10px rgba(0, 0, 0, 0.5);
}

button.close {
    display:flex;
    align-items:center;
    justify-content:center;
    width:30px;
    height:30px;
    border-radius:100%;
    text-shadow:none;
    background-color:#6872F4;
    opacity:1;
    padding:9px;
}

button.close:hover,
button.close:focus {
    opacity:1;
}

button.close img {
    width:14px;
}

.controls {
    display:flex;
    flex-wrap:wrap;
    /*position:absolute;*/
    bottom:0;
    width:100%;
    background-color:#f5f5fa;
}

.controls-bottom {
    width:100%;
    padding:15px 20px;
    display:flex;
    flex-wrap:wrap;
}

.controls button {
    border:none;
    padding:0;
    background-color:transparent;
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    -ms-appearance:none;
}

.controls button:focus {
    outline:none;
}

.controls button img {
    width:36px;
}
/*
.controls .play .icon-pause,
.controls .play-pause .icon-pause,
.controls .pause .icon-play {
    display:none;
}
*/
/*
.controls .play .icon-play {
    display:block;
}*/

.play .controls .icon-pause{display:none;}
.play .controls .icon-play { display:block;}

.pause .controls .icon-pause{display:block;}
.pause .controls .icon-play { display:none;}

.control-list {
    width:calc(100% - 40px);
    padding-left:20px;
    padding-top:4px;
}

.control-list ul {
    margin-bottom:0;
}

.control-list li:not(:last-child) {
    padding:0;
}

.control-list li a {
    color:#6872f4;
    text-decoration:none;
}

.controls .orange-bar {
    width:100%;
    height:5px;
    top:0;
    left:0;
    background-color:rgba(63, 63, 63, 0.15);
}

.controls .orange-juice {
    position:relative;
    height:5px;
    background-color:#6872f4;
}

.controls .orange-juice::after {
    position:absolute;
    display:inline-block;
    content:'';
    width:16px;
    height:16px;
    top:-6px;
    right:-16px;
    border-radius:20px;
    box-shadow:0 1px 5px 0 rgba(0, 0, 0, 0.5);
    background-color:#6872f4;
}

/* ==========================================================================
   Star Rating Css
   ========================================================================== */
.tyto-star {
    position:relative;
    max-width:370px;
    margin:0 auto;
}

.tyto-star>input {
    display:none;
}

.tyto-star>label:before {
    width:64px;
    height:58px;
    display:block;
    /* content:url("../images/star.svg");*/
}

.tyto-star>label {
    display:block;
    color:#ddd;
    float:right;
    margin:0 5px;
    width:64px;
    height:58px;
}


.tyto-star > input:checked ~ label svg path, /* show gold star when clicked */
.tyto-star:not(:checked) > label:hover svg path , /* hover current star */
.tyto-star:not(:checked) > label:hover ~ label svg path{ fill:#6872f4;} /* hover previous stars in list */

.tyto-star > input:checked + label:hover svg path, /* hover current star when changing rating */
.tyto-star > input:checked ~ label:hover svg path,
.tyto-star > label:hover ~ input:checked ~ label svg path, /* lighten current selection */
.tyto-star > input:checked ~ label:hover ~ label svg path{ fill:#6872f4;}

.thanks_rating, .thanks_form{
    font-size:48px;
    font-weight:bold;
    color:#6872f4;
    text-align:center
}

/* **** CSS Magic to Highlight Stars on Hover ****

.tyto-star>input:checked~label,
.tyto-star:not(:checked)>label:hover,
.tyto-star:not(:checked)>label:hover~label {
    content:url("../images/star-blue.svg");
    margin:0 5px;
}

.tyto-star>input:checked+label:hover,
.tyto-star>input:checked~label:hover,
.tyto-star>label:hover~input:checked~label,
.tyto-star>input:checked~label:hover~label {
    content:url("../images/star-blue.svg");
    margin:0 5px;
} */

/* ==========================================================================
   Tablet Css
   ========================================================================== */
@media screen and (min-width:1350px) {
    .container {
        width:85%;
        max-width:1376px;
    }
}

@media screen and (max-width:1199px) {
    /* ==========================================================================
       Common
       ========================================================================== */
    .header .navbar-brand {
        max-width:200px;
        padding-top:3px;
    }

    .navbar-default .navbar-nav:not(.navbar-button)>li {
        margin-right:22px;
    }

    .navbar-default .navbar-nav:not(.navbar-button)>li>a {
        font-size:14px;
    }

    /* ==========================================================================
       Header Css
       ========================================================================== */

    /* ==========================================================================
       Navigation Css
       ========================================================================== */
    /* ==========================================================================
       Hero Section Css
       ========================================================================== */
    .custom-modal .modal-dialog {
        width:85%;
    }

    /* ==========================================================================
       Section 2
       ========================================================================== */
    /* ==========================================================================
       Footer
       ========================================================================== */
}

@media screen and (max-width:991px) {
    /* ==========================================================================
       Menu
       ========================================================================== */
    .header .navbar-brand {
        max-width:215px;
    }

    .header .navbar-header {
        width:100%;
    }

    .header .navbar-toggle {
        display:block;
        border:none;
        border-radius:0;
        margin:0 10px 0 0;
    }

    .header .navbar-toggle:hover,
    .header .navbar-toggle:focus,
    .header .navbar-toggle:active {
        background-color:transparent;
    }

    .header .navbar-collapse {
        display:block !important;
        position:fixed;
        width:300px;
        height:100vh !important;
        top:0;
        right:0;
        padding:54px 28px 20px 37px;
        box-shadow:2px 2px 44px 0 rgba(0, 0, 0, 0.3);
        background-color:#ffffff;
        z-index:99999;
        transform:translateX(400px);
        transition:transform 500ms ease;
    }

    .header .navbar-collapse.in {
        transform:translateX(0);
    }

    .navbar-default .navbar-nav {
        clear:both;
    }

    .navbar-default .navbar-nav:not(.navbar-button)>li {
        width:100%;
        margin:0;
    }

    .navbar-default .navbar-nav:not(.navbar-button)>li>a {
        font-size:18px;
        font-weight:normal;
        line-height:3.56;
    }

    .navbar-default .navbar-button {
        margin-top:20px;
    }

    .navbar-default .navbar-nav>li:last-child {
        margin-top:20px;
    }

    .navbar-default .navbar-button>li>a {
        width:100%;
        max-width:231px;
        border-radius:23px;
        padding:12px 30px;
        font-size:18px;
        font-weight:500;
    }

    .navbar-default .navbar-nav:not(.navbar-button)>li>a.btn {
        width:100%;
        max-width:231px;
        border-radius:23px;
        padding:12px 30px;
        font-size:18px;
        font-weight:500;
        color:#fff;
        line-height:1.427;
    }

    .navbar-default .navbar-nav:not(.navbar-button)>li>a.btn:hover,
    .navbar-default .navbar-nav:not(.navbar-button)>li>a.btn:focus,
    .navbar-default .navbar-nav:not(.navbar-button)>li>a.btn:active {
        background-color:#4752d8;
    }

    .header .close-slidemenu,
    .header .close-slidemenu:hover,
    .header .close-slidemenu:focus {
        position:fixed;
        width:45px;
        height:45px;
        top:60px;
        right:300px;
        margin:0;
        padding:0;
        background-color:#6872f4;
        cursor:pointer;
        z-index:9999;
    }

    /* ==========================================================================
       Hero Css
       ========================================================================== */
    .hero::before {
        height:600px;
    }

    .hero h1 {
        font-size:56px;
    }

    .hero p {
        font-size:28px;
    }

    /* ==========================================================================
       Manual Css
       ========================================================================== */
    .manual-box:not(:last-child) {
        margin-bottom:30px;
    }

    /* ==========================================================================
    Video Css
    ========================================================================== */
    .custom-modal .modal-dialog {
        width:100%;
        height:100vh;
        margin:0;
    }

    .modal-content {
        border:none;
        height:100vh;
        background-color:#222;
    }

    .custom-modal .video {
        height:calc(100vh - 4px);
    }

    .control-list {
        width:100%;
        padding:0;
    }

    .controls-bottom .buttons,
    .controls-bottom button {
        position:fixed;
        display:flex;
        align-items:center;
        justify-content:center;
        width:100%;
        height:100vh;
        top:0;
        left:0;
    }

    .controls button img {
        width:142px;
    }

    .controls .pause .icon-play-mobile {
        display:none !important;
    }

    .controls-bottom {
        padding:0;
    }

    .control-list {
        position:relative;
        padding:15px 20px;
        z-index:5;
    }

    .control-list ul {
        margin-bottom:0;
        display:flex;
        flex-flow:row-reverse;
        align-items:center;
        justify-content:center;
    }

    .control-list li {
        padding:0 15px;
    }

    .video-title {
        box-shadow:0 2px 8px 0 rgba(0, 0, 0, 0.12);
        background-color:#f5f5fa;
        z-index:9;
    }

    .video-title h5 {
        padding-top:5px;
        font-size:18px;
        font-weight:bold;
        text-shadow:none;
        color:#6872f4;
    }

    button.close {
        background-color:rgba(77, 78, 86, 0.37);
    }

    .paused .video-title {
        transform:translateY(-120px);
        transition:transform 350ms ease;
    }

    .paused .controls {
        bottom:-120px;
        transition:bottom 350ms ease;
    }

    #video-data.play .video-title {
        transform:translateY(0);
    }

    #video-data.play .controls {
        bottom:0;
    }

    .open-close-tutorial {
        right:50%;
        bottom:67px;
        transform:translateX(50%);
    }

    .open-close-tutorial::after {
        margin-left:190px;
    }

    .open-close-tutorial .panel-body>ul {
        flex-flow:wrap;
    }

    .open-close-tutorial .panel-body>ul li {
        width:100%;
        padding:0;
    }

    /* ==========================================================================
       Hero Section Css
       ========================================================================== */
    /* ==========================================================================
       Section 2
       ========================================================================== */
    /* ==========================================================================
       Footer
       ========================================================================== */
}

@media screen and (max-width:767px) {
    /* ==========================================================================
       Common
       ========================================================================== */

    /* ==========================================================================
       Header Css
       ========================================================================== */
	   
	.tyto-star > label svg {
		height:27px;
		position:relative;
		top:-28px;
		width:27px;
	}
    .header .navbar-collapse {
        width:100%;
        padding:0;
        margin:0;
        transform:translateX(100%);
        box-shadow:none;
        background-color:rgba(0, 0, 0, 0.76);
    }

    .header .navbar-default {
        border-bottom:1px solid rgba(255, 255, 255, 0.36);
        padding:13px 0;
    }

    .header .navbar-header {
        margin:0;
    }

    .navbar-default .navbar-nav {
        width:calc(100% - 76px);
        max-width:300px;
        margin:0;
        padding:54px 28px 20px 35px;
        height:100vh;
        box-shadow:2px 2px 44px 0 rgba(0, 0, 0, 0.3);
        background-color:#ffffff;
    }

    .header .navbar-brand {
        max-width:125px;
        padding:0;
    }

    .header .navbar-toggle {
        padding:3px 0 0 0;
        margin-right:5px;
    }

    .header .close-slidemenu {
        margin:0;
        padding:0;
    }

    .header .navbar-collapse.in {
        overflow:inherit;
    }

    /* ==========================================================================
    Hero  Css
    ========================================================================== */
    .hero {
        padding-top:20px;
        padding-bottom:0;
    }

    .hero::before {
        display:none;
    }

    .hero h1 {
        margin-bottom:26px;
        font-size:28px;
        line-height:1.17;
    }

    .hero p {
        font-size:15px;
        font-weight:normal;
        letter-spacing:.01px;
    }

    .hero .video-player {
        margin-top:27px;
    }

    /* ==========================================================================
       User Guide
       ========================================================================== */
    .user-guide {
        padding-top:35px;
        padding-bottom:24px;
    }

    .panel-group {
        border:1px solid #e6e6eb;
    }

    .panel-group .panel {
        border-top:1px solid #e6e6eb;
    }

    .panel-group .panel:first-child {
        border-top:none;
    }

    .panel-default>.panel-heading+.panel-collapse>.panel-body {
        border-top:1px solid #e6e6eb;
        padding:0;
    }

    .panel-title>.small,
    .panel-title>.small>a,
    .panel-title>a,
    .panel-title>small,
    .panel-title>small>a {
        padding-top:18px;
        padding-left:58px;
        font-size:15px;
        font-weight:500;
        line-height:1.425;
        background-size:33px;
        background-position:13px center;
    }

    .panel-body>ul li {
        background-size:33px;
        background-position:13px center;
    }

    .panel-body>ul li a {
        padding:18px 13px 18px 58px;
        font-size:15px;
        font-weight:500;
        line-height:1.425;
        background-size:33px;
        background-position:13px center;
    }

    .panel-body>ul li+li {
        border-top:1px solid #e6e6eb;
    }

    /* ==========================================================================
      Manual
      ========================================================================== */
    .manual {
        padding-top:35px;
        padding-bottom:44px;
    }

    .manual-box .icon {
        margin-bottom:-17px;
    }

    .manual-box .icon img {
        width:120px;
    }

    .manual-box .title {
        margin-bottom:10px;
        font-size:24px;
    }

    .manual-box .manual-text {
        font-size:15px;
        font-weight:normal;
    }

    /* ==========================================================================
      Tyto Block
      ========================================================================== */
    .tyto-block {
        padding-top:65px;
        padding-bottom:45px;
    }

    .tyto-block h2 {
        font-size:24px;
    }

    .contact-form {
        margin-top:43px;
    }

    .contact-form .form-button {
        margin-top:35px;
        text-align:center;
    }

    /* ==========================================================================
       Help Us
       ========================================================================== */
    .help-us {
        padding-top:45px;
    }

    .help-us p {
        font-size:15px;
        font-weight:400;
    }

    .help-us h2 {
        margin-bottom:20px;
    }

    .help-us .heading {
        margin-bottom:19px;
    }

    .help-us .list-star {
        margin-bottom:4px;
    }

    .help-us .list-star li {
        padding:0 1px;
    }

    .help-us .list-star svg {
        width:27px;
        height:27px;
    }

    .help-us .message-fom {
        margin-top:0;
    }

    .message-fom .form-group {
        margin-bottom:28px;
    }

    .message-fom .form-control {
        padding-bottom:10px;
        font-size:14px;
    }

    .help-us .message-fom .form-button {
        margin-top:0;
    }

    .help-us .message-fom .form-button .btn {
        min-width:190px;
        padding:7px 70px;
    }

    .tyto-star {
        max-width:185px;
        margin-bottom:20px;
    }

    .tyto-star > label::before,
    .tyto-star > label {
        width:27px;
        height:27px;
        content:'';
        background:url("../images/star.svg") no-repeat;
        background-size:100%;
    }

    /* ==========================================================================
       Open Tutorial
       ========================================================================== */
    .open-close-tutorial {
        max-width:100%;
        border-radius:0;
    }

    .open-close-tutorial::after {
        display:none;
    }

    .open-close-tutorial .panel-group .panel:last-child,
    .open-close-tutorial .panel-group .panel:last-child .panel-body {
        border-radius:0;
    }

    .open-close-tutorial .panel-title>.small,
    .open-close-tutorial .panel-title>.small>a,
    .open-close-tutorial .panel-title>a,
    .open-close-tutorial .panel-title>small,
    .open-close-tutorial .panel-title>small>a {
        padding:12px 50px 12px 15px;
        font-size:16px;
        background-position:94% center;
        background-size:24px;
    }

    .open-close-tutorial .panel-title>.collapsed {
        background-position:94% center;
        background-size:24px;
    }

    .open-close-tutorial .panel-body>ul li a {
        padding:12px 15px 12px 50px;
        font-size:16px;
        background-position:15px center;
        background-size:24px;
    }
}

@media screen and (min-width:992px) {
.footer .container-fluid {
display:flex;
flex-flow:row-reverse;
}

.footer .container-fluid::after,
.footer .container-fluid::before {
display:none;
}

.footer .container-fluid>* {
width:50%;
}

.footer p {
font-size:11px;
}

.footer .list-links li a {
font-size:12px;
text-decoration:none;
}

    .footer .list-links li{padding:0 12px;}
    .footer .social-links{margin-bottom:0;}
}

@media screen and (min-width:1200px){
    .footer-links{display:flex;flex-flow:wrap;justify-content:flex-end;}
    .footer .list-links{margin-bottom:10px;}
    .footer .list-links li a{font-size:14px;}
}

@media screen and (min-width:1250px){
    .custom-modal .modal-dialog{width:1200px;}
    /* .custom-modal .modal-body{height:675px;background:url("../images/bg-image.jpg") no-repeat center top;background-size:100%;} */
    .custom-modal .modal-body{height:auto;}
    .custom-modal .video{width:100%;position:relative;height:100%;max-height: 600px;object-fit: scale-down;}
}

@media screen and (max-width:320px){
    .header .close-slidemenu, .header .close-slidemenu:hover, .header .close-slidemenu:focus{right:244px;}
}

.container{position:relative;}
.lang_menu{position:absolute;right:-80px;top:10px;z-index:99999999;border-left:1px solid #d8d8d8;padding-left:15px;width:100px;}
.lang_menu .selected img{ width:19px;height:19px;display:inline-block;margin-right:5px;}
.lang_menu a{color:#4d4e56;font-size:15px;}
.lang_menu a:hover{text-decoration:none;}
.lang_menu ul{list-style-type:none;padding:0;}
.lang_menu .drop_down{transition:all 0.8s ease;display:none;visibility:hidden;opacity:0;position:absolute;right:0;top:45px;width:100%;border-radius:2px;box-shadow:0px 3px 15px 0 rgba(0, 0, 0, 0.13);border:solid 1px #dfdfe3;background-color:#fff;border-top:none;}
.lang_menu .drop_down.act{visibility:visible;opacity:1;display:block;width:100%;}
.lang_menu .drop_down li{width:100%;text-align:center;line-height:2.07;}
.lang_menu .drop_down li:hover{background:rgba(216,216,216,0.28);}

@media screen and (max-width:1280px) {
	.lang_menu{right:-35px;top:10px;border-left:none;width:75px;}
}

@media screen and (max-width:680px){
    .lang_menu{right:40px;top:0px;}
}