@font-face {
    font-family: 'Cambria', cambriab;
    src: url(../font/Cambria.ttf);
    src: url(../font/cambriab.ttf);
}

body {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

body, html {
    height: 100%;
    background-repeat: no-repeat; /*background-image: linear-gradient(rgb(12, 97, 33),rgb(104, 145, 162));*/
    position: relative;
    font-family: Cambria;
    font-family: 'Cambria', cambriab;
}
/* vietnamese */
@font-face {
    font-family: 'Josefin Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Josefin Sans Regular'), local('JosefinSans-Regular'), url(../font/Qw3aZQNVED7rKGKxtqIqX5EUAnx4RHw.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}

.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {
    outline: 0px auto -webkit-focus-ring-color;
    outline-offset: 0px;
}

.agreeinside {
    scrollbar-face-color: #367CD2;
    scrollbar-shadow-color: #FFFFFF;
    scrollbar-highlight-color: #FFFFFF;
    scrollbar-3dlight-color: #FFFFFF;
    scrollbar-darkshadow-color: #FFFFFF;
    scrollbar-track-color: #FFFFFF;
    scrollbar-arrow-color: #FFFFFF;
}

    /* Let's get this party started */
    .agreeinside::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    /* Track */
    .agreeinside::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        -webkit-border-radius: 10px;
        border-radius: 10px;
    }

    /* Handle */
    .agreeinside::-webkit-scrollbar-thumb {
        -webkit-border-radius: 10px;
        border-radius: 10px;
        background: #f2dede;
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
    }

hr {
    margin-top: 7px;
    margin-bottom: 13px;
    border: 0;
    border-top: 1px solid #eee;
}

.form-control {
    display: block;
    width: 100%;
    height: 34px;
    font-size: 13px !important;
    line-height: 1.42857143;
    margin: 1px 0px 0px -2px;
    border-radius: 7px;
    border-radius: 20px !important;
    margin-top: -7px;
}

.modal-content {
    width: 100%;
    float: left;
}

.modal_bg {
    background-image: linear-gradient(5deg, #efd8d8 7%, #ffd3d3 38%, #fffafa 103%);
    float: left;
    width: 100%;
}

.modal_bg11 {
    background-image: linear-gradient(5deg, #ebe3f7 7%, #f2edf9 38%, #ebe3f7 92%);
    float: left;
    width: 100%;
}

#login-box .controls input:first-child {
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    margin-bottom: 15px;
}

#login-box .logo .logo-caption {
    font-family: 'Poiret One', cursive;
    color: white;
    text-align: center;
    margin-bottom: 0px;
}

#login-box .logo .tweak {
    color: #ff5252;
}

#login-box .controls {
    padding-top: 30px;
}

    #login-box .controls input {
        border-radius: 0px;
        background: #fff;
        border: 0px;
        color: #222;
        font-family: 'Nunito', sans-serif;
        margin-bottom: 15px;
    }

h3, h2, h3, h5, h6 {
    font-family: 'Cambria', cambriab;
}

h5 {
    font-family: 'Cambria', cambriab;
}

#login-boxs .controls input {
    border-radius: 0px;
    background: #fff;
    border: 0px;
    color: #222;
    font-family: 'Nunito', sans-serif;
    margin-bottom: 15px;
    border: 1px #eee solid;
    +
}

#login-box .controls input:focus {
    box-shadow: none;
}

#login-box .controls input:first-child {
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
}

#login-box .controls input:last-child {
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
}

#login-box button.btn-custom {
    margin-top: 8px;
    color: white;
    font-family: 'Nunito', sans-serif;
    border-radius: 20px !important;
}

    #login-box button.btn-custom:hover {
        -webkit-transition: all 500ms ease;
        -moz-transition: all 500ms ease;
        -ms-transition: all 500ms ease;
        -o-transition: all 500ms ease;
        transition: all 500ms ease;
        background: rgba(48, 46, 45, 1);
        border-color: #ff5252;
    }

#particles-js {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: 50% 50%;
    position: fixed;
    top: 0px;
}

.footer {
    position: fixed;
    bottom: 0;
    text-align: center;
    width: 100%;
    background: #0000001c;
    padding: 10px 0px 1px 0px;
}


.btn-success {
    color: #fff;
    background-color: #5cb85c;
    border-color: #4cae4c;
    display: inline-block;
    width: 48%;
    margin: 13px 0px 7px 0px;
    padding: 6px 0px 7px 0px;
}

.btn-warning {
    color: #fff;
    background-color: #035984;
    border-color: #035984;
    width: 48%;
    margin: 8px 0px 8px 2px;
    padding: 6px 0px 7px 0px;
    border-radius: 20px !important;
}

.btn-view {
    color: #fff;
    background-color: #c33a3f;
    border-color: #c33a3f;
    width: 50%;
    margin: 8px 0px 8px 0px;
    padding: 6px 0px 7px 0px;
    float: left;
    border-radius: 20px !important;
}

    .btn-view:hover {
        color: #fff;
        background-color: #c33a3f !important;
        border-color: #c33a3f !important;
    }

.btn-warning:hover {
    color: #fff;
    background-color: #035984;
    border-color: #035984;
}

.btn-default.focus, .btn-default:focus {
    color: #fff;
    background-color: #c33a3f;
    border-color: #c33a3f;
}

.btn-warning.focus, .btn-warning:focus {
    color: #fff;
    background-color: #035984;
    border-color: #035984;
}

.btn-default.active, .btn-default:active, .open > .dropdown-toggle.btn-default {
    color: #333;
    background-color: #c33a3f;
    border-color: #c33a3f;
}

.btn-warning.active, .btn-warning:active, .open > .dropdown-toggle.btn-warning {
    color: #fff;
    background-color: #035984;
    border-color: #035984;
}

    .btn-warning.active.focus, .btn-warning.active:focus, .btn-warning.active:hover, .btn-warning:active.focus, .btn-warning:active:focus, .btn-warning:active:hover, .open > .dropdown-toggle.btn-warning.focus, .open > .dropdown-toggle.btn-warning:focus, .open > .dropdown-toggle.btn-warning:hover {
        color: #fff;
        background-color: #035984;
        border-color: #035984;
    }

label {
    display: -webkit-box;
    max-width: 100%;
    margin-bottom: 10px;
    font-weight: 700;
    color: #222;
}

.wrapper h3 {
    margin-top: 0px !important;
}

.btn-default:hover {
    color: #fff;
    background-color: #222;
    border-color: #adadad;
    border-radius: 20px;
}

.btn-group-xs > .btn, .btn-xs {
    background-color: #c33a3f !important;
    border-color: #c33a3f !important;
    padding: 7px 5px !important;
    width: 100%;
    border-radius: 20px;
}

.navbar-brand > img {
    display: block;
    width: 65%;
    padding-top: -20px;
    margin-top: -14px;
}

.nav > li > a {
    position: relative;
    display: block;
    padding: 10px 3px;
}

.btn-default {
    color: #fff;
    background-color: #c33a3f;
    border-color: #c33a3f;
    border-radius: 20px;
}

.agree h2, h4 {
    text-align: center;
}

.navbar-default .navbar-collapse, .navbar-default .navbar-form {
    border-color: #e7e7e7;
    padding-top: 13px;
}

.navbar {
    position: relative;
    min-height: 70px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-bottom: 1px #eee solid;
}

.navbar-default {
    background-color: #ffffff;
    border-color: #e7e7e7;
}

    .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover {
        color: #555;
        background-color: transparent;
    }
/* STRUCTURE */

.wrapper {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    width: 99%;
    min-height: 100%;
    padding-top: 0%;
    padding-bottom: 0%;
}

#formContent {
    -webkit-border-radius: 10px 10px 10px 10px;
    border-radius: 10px 10px 10px 10px;
    padding: 15px;
    width: 100%;
    max-width: 330px;
    position: relative;
    text-align: center;
    margin: 0 auto;
    background: #1310100a;
    margin-top: 3em;
}

#formFooter {
    background-color: #f6f6f6;
    border-top: 1px solid #dce8f1;
    padding: 25px;
    text-align: center;
    -webkit-border-radius: 0 0 10px 10px;
    border-radius: 0 0 10px 10px;
}

.agreeinside {
    border: 1px solid #e5e5e5;
    height: 400px;
    overflow: auto;
    padding: 10px;
    background: #ffffff2e;
    box-shadow: 0 1px 1px 0 rgba(0,0,0,0.16),0 0px 2px 0 rgba(0,0,0,0.12) !important;
}


/* TABS */

h2.inactive {
    color: #cccccc;
}

h2.active {
    color: #0d0d0d;
    border-bottom: 2px solid #5fbae9;
}



/* ANIMATIONS */

/* Simple CSS3 Fade-in-down Animation */
.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

/* Simple CSS3 Fade-in Animation */
@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-moz-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.fadeIn {
    opacity: 0;
    -webkit-animation: fadeIn ease-in 1;
    -moz-animation: fadeIn ease-in 1;
    animation: fadeIn ease-in 1;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    animation-duration: 1s;
}

    .fadeIn.first {
        -webkit-animation-delay: 0.4s;
        -moz-animation-delay: 0.4s;
        animation-delay: 0.4s;
    }

    .fadeIn.second {
        -webkit-animation-delay: 0.6s;
        -moz-animation-delay: 0.6s;
        animation-delay: 0.6s;
    }

    .fadeIn.third {
        -webkit-animation-delay: 0.8s;
        -moz-animation-delay: 0.8s;
        animation-delay: 0.8s;
    }

    .fadeIn.fourth {
        -webkit-animation-delay: 1s;
        -moz-animation-delay: 1s;
        animation-delay: 1s;
    }

/* Simple CSS3 Fade-in Animation */
.underlineHover:after {
    display: block;
    left: 0;
    bottom: -10px;
    width: 0;
    height: 2px;
    background-color: #56baed;
    content: "";
    transition: width 0.2s;
}

.underlineHover:hover {
    color: #0d0d0d;
}

    .underlineHover:hover:after {
        width: 100%;
    }

h1 {
    color: #60a0ff;
}

/* OTHERS */

*:focus {
    outline: none;
}

#icon {
    width: 30%;
}

.bg1 {
    background: url(../img/pattern-bg.jpg);
    background-size: cover;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}


.bg {
    overflow: auto;
    background-image: url('../img/bg.png');
    background-repeat: repeat;
}

.bgs {
    overflow: hidden;
}

.center-blocks {
    width: 9%;
    padding-top: 2em;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.logo img {
    width: auto;
}

.openwindow {
    background-color: #5cb85c;
    border-color: #4cae4c;
    color: #fff;
}

.closewindow {
    background-color: #c33a3f;
    border-color: #c33a3f;
    color: #fff;
}

i.fa-play, .fa-save, .fa-ban, .fa-calculator {
    border-top: 1px #fff solid;
    width: 100%;
    margin: 8px 6px 5px 0px;
    padding: 7px 3px 2px 0px;
    text-align: center;
    font-size: 20px;
}

.spandif5 {
    margin-top: 18px !important;
}

.lstfa3 {
    display: none !important;
}

.lstfa2 {
    display: none;
}

.headers {
    /*border: 1px #dadada solid;*/
    padding: 5px 3px 5px 5px;
    display: flex;
    margin-bottom: 0px;
}

/*.col {
    display: flex;
}*/

.pdfbtn {
    height: 70px;
    background-color: #ffffff;
    border-color: #b5a7a7;
    color: #222;
    width: 75px;
    padding: 0px 6px 8px 3px;
    margin: 0px 4px 0px 1px;
}

.btns {
    height: 70px;
    text-align: left;
    background-color: #ffffff;
    border-color: #b5a7a7;
    color: #222;
    margin: 0px 4px 0px 1px;
}

.pllaybtn {
    background-color: #5bc0de;
    border-color: #46b8da;
    color: #fff;
    padding: 0px 3px;
}

.savebtn {
    border-color: #035984;
    padding: 0px 3px;
    background: #035984;
    color: #fff;
    padding: 0px 3px;
}

.statusbtn {
    background-color: #17a2b8;
    border-color: #17a2b8;
    color: #fff;
    padding: 0px 3px;
}

.rejectbtn {
    background-color: #c33a3f;
    border-color: #c33a3f;
    color: #fff;
    padding: 0px 3px;
}

.evalubtn {
    background-color: #5cb85c;
    border-color: #4cae4c;
    color: #fff;
    padding: 0px 3px;
}

.btn-primary.focus, .btn-primary:focus {
    color: #fff;
    background-color: #222;
    border-color: #222;
}

.btn-primary:hover {
    color: #fff;
    background-color: #222;
    border-color: #222;
}

#popup_content_wrap {
    width: 100%;
    height: 100%;
    left: 0;
    z-index: 9999999;
}

#popup_content {
    width: 100%;
    height: 330px;
    padding: 20px;
    position: relative;
    border: 1px solid #e0dcdc99;
    background: rgb(255, 255, 255);
}

.mainsection {
    width: 100%;
    float: left;
    z-index: 1;
    /*position: relative;*/
    position: sticky;
    top:0px;
}

.video-play-button {
    position: absolute;
    z-index: 10;
    top: 75%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    box-sizing: content-box;
    display: block;
    width: 15px;
    height: 12px;
    background: #222;
    border-radius: 50%;
    padding: 9px 24px 18px 28px;
}

    .video-play-button:before {
        content: "";
        position: absolute;
        z-index: 0;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        display: block;
        width: 75px;
        height: 75px;
        background: #b50201;
        border-radius: 50%;
        animation: pulse-border 1500ms ease-out infinite;
    }

    .video-play-button:after {
        content: "";
        position: absolute;
        z-index: 1;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        display: block;
        width: 70px;
        height: 70px;
        background: #035984;
        border-radius: 50%;
        transition: all 200ms;
        border: solid 4px #fff;
    }


    .video-play-button span {
        display: block;
        position: relative;
        z-index: 3;
        width: 0;
        height: 0;
        border-left: 18px solid #fff;
        border-top: 10px solid transparent;
        border-bottom: 12px solid transparent;
    }

@keyframes pulse-border {
    0% {
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
        opacity: 1;
    }

    100% {
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
        opacity: 0;
    }
}


.app {
    font-family: 'Source Sans Pro', sans-serif;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: bold;
    /*	background:#539AB9;
	border:5px solid #539AB9;*/
    /*
    This is the CSS for the feedback div that is fixed to the top left hand side
    of the screen. This div should slide with the form so that it provides a
    close button when the form is slid into view.
    */
    right: -50px; /* Bring the div in and hide the left (top) border */
    left: -10px\9; /* Less Than IE9 Hack - Bring the div in and hide the left (top) border */
    top: 50%;
    margin-top: -152px;
    cursor: pointer;
    padding-left: -70px;
    width: 150px; /* Since this is getting rotated width appears as height to the eye*/
    height: 30px; /* Since this is getting rotated height appears as width to the eye*/
    text-align: center;
    letter-spacing: 1px;
    z-index: 10000; /* Msake sure it floats above the content */
    position: fixed;
    background: #689F38;
    border: 5px solid #fff;
    color: #FFF;
    padding: 10px 15px 30px;
}

    .app a {
        color: #fff;
    }

        .app a:hover {
            text-decoration: none;
        }
/*------------------log a ticket start here---------------------------------*/
.log-ticket {
    top: 50%;
    margin-top: 2px;
    background: #EB4712;
    border: 5px solid #fff;
}
/*------------------log a ticket end here-----------------------------------*/
.rotate {
    /* Safari, Chrome */
    -webkit-transform: rotate(-90deg);
    /* Firefox */
    -moz-transform: rotate(-90deg);
    /* IE */
    -ms-transform: rotate(-90deg);
    /* Opera */
    -o-transform: rotate(-90deg);
    /* Older versions of IE */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    /* CSS3 standard as defined here: http://www.w3.org/TR/css3-transforms/ */
    transform: rotate(-90deg);
}

.required {
    background-color: #F2DEDE !important;
    border: 1px #F00 solid !important;
}

.feedback {
    position: fixed; /* This will never scroll out of view */
    background: #f0ad4e;
    border: 5px solid #fff;
    color: #fff;
    font-weight: bold;
    padding: 10px 15px 30px 15px;
}

.feedbacks {
    position: fixed; /* This will never scroll out of view */
    background: #f0ad4e;
    border: 5px solid #fff;
    color: #fff;
    font-weight: bold;
    padding: 10px 15px 30px 15px;
}

.feedback-form-wrapper {
    /*
    This is the CSS for the feedback div that is fixed to the top left hand side
    of the screen.
    */
    display: block;
    z-index: 9999; /* Make sure it floats a little higher than the feedback form div below */
    top: 40em;
    /* Bring the div in and hide the left (top) border */
    width: 280px;
}

    .feedback-form-wrapper .form-group {
        padding: 0px 15px;
        margin-bottom: 0;
    }

        .feedback-form-wrapper .form-group .form-control {
            font-size: 13px;
            margin-bottom: 8px;
            border-radius: 0 !important;
        }

    .feedback-form-wrapper .btn {
        padding: 5px 15px !important;
        border: 3px solid #fff;
        background: none;
        transition: all ease-out 0.3s;
        -moz-transition: all ease-out 0.3s;
        -o-transition: all ease-out 0.3s;
        -webkit-transition: all ease-out 0.3s;
        border-radius: 0 !important;
    }

        .feedback-form-wrapper .btn:hover {
            background: #;
            transition: all ease-out 0.3s;
            -moz-transition: all ease-out 0.3s;
            -o-transition: all ease-out 0.3s;
            -webkit-transition: all ease-out 0.3s;
        }

/* This will put some distance between the input box and the next label */
.feedback input {
    margin-bottom: 5px;
}

.feedback legend {
    color: #FFF;
    font-size: 15px;
}

.feedback-toggle {
    font-family: 'Source Sans Pro', sans-serif;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: bold;
    /* background: #539AB9; */
    border: 5px solid #fff;
    left: 2px;
    left: -10px\9;
    top: 70em;
    margin-top: -75px;
    cursor: pointer;
    padding-left: -70px;
    width: 52px;
    height: 52px;
    text-align: center;
    letter-spacing: 1px;
    z-index: 10000;
    border-radius: 100%;
}

.send-complaint {
    position: relative;
    cursor: pointer;
}

    .send-complaint .fa-send {
        font-size: 25px;
        cursor: pointer
    }

    .send-complaint .send-text {
        position: absolute;
        top: 0;
        left: 0px;
        opacity: 0;
        font-family: "Open Sans";
        font-weight: 300;
        font-size: 16px;
        -webkit-transition: all ease-out 0.4s;
        -moz-transition: all ease-out 0.4s;
        -ms-transition: all ease-out 0.4s;
        -o-transition: all ease-out 0.4s;
    }

legend {
    margin-bottom: 15px;
}

@media ( max-width:640px) {
    .send {
        font-family: 'Source Sans Pro', sans-serif;
        text-transform: uppercase;
        font-size: 18px;
        font-weight: 300;
        width: 90px;
        padding: 10px 10px 30px;
        z-index: 9999; /* Msake sure it floats above the content */
    }

        .send > .fa {
            float: right;
        }

    .feedback-form-wrapper .form-group .form-control {
        margin-bottom: 0px !important;
        border-radius: 0 !important;
    }

    .feedback-form-wrapper .form-group {
        margin-bottom: 5px !important;
    }

    .send-complaint .send-text {
    }

    /*.send-complaint .send-text	{ position:absolute; top:0; left:30px; opacity:1; font-family:"Open Sans"; font-weight:300; font-size:16px;}
.send-complaint:hover .send-text	{ opacity:1; -webkit-transform:translateX(0px); -moz-transform:translateX(0px); -ms-transform:translateX(0px); -o-transform:translateX(0px);}
*/


    @keyframes pulse-border {
        0% {
            transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
            opacity: 1;
        }

        100% {
            transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
            opacity: 0;
        }
    }

    @media only screen and (max-width: 600px) {

        .footer {
            position: fixed;
            bottom: 0;
            text-align: center;
            width: 100%;
        }

        .wrapper {
            margin-top: 7em !important;
        }

        .center-blocks {
            width: auto;
            padding-top: 1em !important;
            position: absolute;
            left: 0;
            right: 0;
            margin: 0 auto;
        }

        #login-box .controls {
            padding-top: 0px !important;
        }

        .btn-success {
            color: #fff;
            background-color: #5cb85c;
            border-color: #4cae4c;
            display: inline-block;
            width: 100%;
            margin: 13px 0px 7px 0px;
            padding: 6px 0px 7px 0px;
        }

        .btn-warning {
            color: #fff;
            background-color: #f0ad4e;
            border-color: #eea236;
            display: inline-block;
            width: 100%;
            margin: 13px 0px 8px 2px;
            padding: 6px 0px 7px 0px;
        }

        .video-play-button {
            top: 85%;
            position: absolute;
            z-index: 10;
        }

        #popup_content {
            width: 80%;
            height: 330px;
            padding: 20px;
            position: relative;
            top: 10%;
            left: 10%;
            background: #1b100e8c;
            border: 10px solid #be2f33;
        }

        .headers {
            /*border: 1px #dadada solid;*/
            padding: 2px;
            display: block !important;
            width: 100% !important;
        }

        .agreeinside {
            height: 350px;
        }
    }

    @media only screen and (max-width: 320px) {

        .footer {
            position: fixed;
            bottom: 0;
            text-align: center;
            width: 100%;
        }

        .center-blocks {
            width: auto;
            padding-top: 1em !important;
            position: absolute;
            left: 0;
            right: 0;
            margin: 0 auto;
        }

        #login-box .controls {
            padding-top: 0px !important;
        }

        .wrapper {
            margin-top: 7em !important;
        }

        .headers {
            /*border: 1px #dadada solid;*/
            padding: 0px;
            display: block !important;
            width: 100% !important;
        }


        .btn-success {
            color: #fff;
            background-color: #5cb85c;
            border-color: #4cae4c;
            display: inline-block;
            width: 100%;
            margin: 13px 0px 7px 0px;
            padding: 6px 0px 7px 0px;
        }

        .btn-warning {
            color: #fff;
            background-color: #f0ad4e;
            border-color: #eea236;
            display: inline-block;
            width: 100%;
            margin: 13px 0px 8px 2px;
            padding: 6px 0px 7px 0px;
        }

        .video-play-button {
            top: 85%;
            position: absolute;
            z-index: 10;
        }

        #popup_content {
            width: 80%;
            height: 330px;
            padding: 20px;
            position: relative;
            top: 1%;
            left: 10%;
            background: #1b100e8c;
            border: 10px solid #be2f33;
        }

        .navbar-brand {
            float: left;
            height: 50px;
            padding: 15px 0px;
            font-size: 18px;
            line-height: 20px;
        }

        .agreeinside {
            height: 300px;
        }
    }