﻿@media screen and (max-width: 1024px) {
    .notice_note {
        margin-left: 0px;
    }

    .quiz .radio {
        display: block;
    }

    .threetabs {
        padding: 0px;
        padding-top: 10px;
        text-align: justify;
    }
}

@media screen and (max-width: 768px) {
    .banner_div_medium {
        display: block;
    }

    .banner_div {
        display: none;
    }

    .banner_div_small {
        display: none;
    }

    .sai_banner_tablet {
        display: block;
    }

    .sai_banner {
        display: none;
    }

    .sai_banner_mobile {
        display: block;
    }

    .safety_icn img {
        margin-right: 10px;
        width: 85%;
    }

    .safety_div {
        font-size: 13px;
    }

        .safety_div table tr {
            border-bottom: 15px solid #fff;
        }

        .safety_div tr td {
            vertical-align: top;
        }

    .neccesary_acc .panel-default > .panel-heading {
        background: #fff;
        border: 0px;
    }

        .neccesary_acc .panel-default > .panel-heading a, .faq_acc .panel-default > .panel-heading a {
            font-size: 14px;
            color: #010101;
        }

    .neccesary_acc .panel-heading .accordion-toggle:after, .faq_acc .panel-heading .accordion-toggle:after {
        content: none;
    }

    .neccesary_acc .panel-heading .accordion-toggle:before {
        font-family: 'Glyphicons Halflings';
        /*content: "\e114";*/
        float: left;
        color: #7a7676;
        margin-right: 10px;
    }

    .faq_acc .panel-heading .accordion-toggle:before {
        font-family: 'Glyphicons Halflings';

        float: left;
        color: #7a7676;
        margin-left:10px;
    }

    .neccesary_acc .panel_content {
        font-size: 13px;
    }

    .neccesary_acc .panel {
        border: 0px;
        border-bottom: 1px solid #ccc;
        border-radius: 0px;
        margin-bottom: 0px;
    }

    .logo_container .div_left {
        width: 30%;
        margin-right: 5px !important;
    }

        .logo_container .div_left img {
            width: 80%;
        }

    .grey_bg {
        font-size: 13px;
    }

    .fill_process_div {
    }
}

@media screen and (max-width: 767px) {
    .login_btn {
        margin-top: 15px;
    }
}

@media (max-width:600px) {
    .logo_text {
        font-size: 10px;
        color: #4e91ff;
        font-family: Roboto-Regular;
        margin: 25px 0px 0px 10px;
        font-weight: normal;
        display:none;
    }

    .logotxt_div {
        margin: 0px 3px;
        padding: 0px 5px;
        width: 56%;
    }

    .header {
        height: 65px;
    }

    .logo_icn {
        width: 64px;
    }

    .logoicn_div {
        width: 40px;
    }

    .menu_left ul li a {
        width: 95%;
        padding-left: 40px;
        text-align: left;
    }

    .banner_div {
        display: none;
    }

    .banner_div_small {
        display: block;
    }

    .banner_div_medium {
        display: none;
    }
}

/* collapsed sidebar styles */
@media screen and (max-width: 640px) {

    .navbar-toggle {
	position:absolute;
	top:0px;
	right:0px;
    }

    

    .menu_left {
        background: none;
    }
} 

@media screen and (max-width: 600px) {
    .row-offcanvas {
        position: relative;
        -webkit-transition: all 1s ease;
        -moz-transition: all 1s ease;
        transition: all 1s ease;
    }

    .navbar-toggle {
        display: block;
    }

    .row-offcanvas-right .sidebar-offcanvas {
        right: -90%;
    }

    .row-offcanvas-left .sidebar-offcanvas {
        left: -91%;
        z-index: 9999;
        top: -65px;
        -webkit-transition: all 1s ease;
        -moz-transition: all 1s ease;
        transition: all 1s ease;
    }

    .row-offcanvas-right.active {
        right: 90%;
    }

    .row-offcanvas-left.active {
        left: 90%;
        transition: transform 1s;
    }

    .sidebar-offcanvas {
        position: absolute;
        top: 0;
        width: 95%;
    }

    .breakme {
        display: none;
    }

    .for_mob_icn {
        display: block;
        background: #FFFFFF !important;
        padding: 0px !important;
    }

        .for_mob_icn img {
            padding-left: 25px;
        }

    .col-offset-125 {
        /*padding-left: 15px;*/
        padding-left: 0px;
        padding-left: 0px;
    }

    .index_page .col-offset-125 {
        padding-left: 15px;
    }

        .layout {
        margin: 5px;
    }

    .offender_option .radio-inline {
        display: block;
        margin-left: 0px;
        margin-bottom: 10px;
    }
}

::-webkit-input-placeholder { /* WebKit browsers */
    color: #333 !important;
}

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #333 !important;
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #333 !important;
}

:-ms-input-placeholder { /* Internet Explorer 10+ */
    color: #333 !important;
}

textarea::-webkit-input-placeholder { /* WebKit browsers */
    color: #333 !important;
}

textarea:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #333 !important;
}

textarea::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #333 !important;
}

textarea:-ms-input-placeholder { /* Internet Explorer 10+ */
    color: #333 !important;
}

/*hiding placeholder for desktop*/
@media (min-width:767px) {

    ::-webkit-input-placeholder { /* WebKit browsers */
        color: transparent !important;
    }

    :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
        color: transparent !important;
    }

    ::-moz-placeholder { /* Mozilla Firefox 19+ */
        color: transparent !important;
    }

    :-ms-input-placeholder { /* Internet Explorer 10+ */
        color: transparent !important;
    }

    textarea::-webkit-input-placeholder { /* WebKit browsers */
        color: transparent !important;
    }

    textarea:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
        color: transparent !important;
    }

    textarea::-moz-placeholder { /* Mozilla Firefox 19+ */
        color: transparent !important;
    }

    textarea:-ms-input-placeholder { /* Internet Explorer 10+ */
        color: transparent !important;
    }
}
/*hiding form labels for mobile screen*/
@media screen and (max-width: 640px) {
    .login_form .control-label, .login_form .small_font {
        display: none;
    }
    /*hiding panel and showing accordian of process page for mobile*/
    .acc_mobile {
        display: block;
    }

    .panel_desktop {
        display: none;
    }

    .panel_content {
        min-height: auto;
    }
    /*this code is for process page image*/
    .process_img {
        display: none;
    }

    .process_img_mobile {
        display: block;
    }

    .panel-heading .accordion-toggle::after {
        font-size: 12px;
    }

    .what_happens .panel-heading .accordion-toggle::after {
        font-size: 14px;
    }

    .panel-title {
        font-size: 14px;
    }

    .score_div1 ul li span {
        width: 15px;
        height: 15px;
    }
}




/*making buttons half size for mobiles*/
@media screen and (max-width: 480px) {
    .login_form .btn {
        width: 49.3%;
    }

    .login_form .btn_div .pull-right {
        width: 100%;
    }

}


    .carousel-control.left, .carousel-control.right {
        width: 30px;
        height: 41px;
        top: 125px;
        background-image: none;
        background: #4f91ff;
        text-shadow: none;
        opacity: 1;
    }

    .carousel-control {
        font-size: 26px !important;
        font-weight: bold;
    }




/*panel adjustment for tablet*/
@media (max-width:1200px) {
    .panel_2 {
        padding-right: 0px;
    }

    .panel_3, .panel_4 {
        margin-top: 5px;
    }
}

/*converting tabs into dropdown mobile*/
@media screen and (min-width: 768px) {
    .faq_acc #nav-tabs-wrapper {
        display: block !important;
    }
}

@media screen and (max-width: 767px) {
    .faq_acc .nav-tabs-dropdown {
        display: block;
    }

    .faq_acc #nav-tabs-wrapper {
        display: none;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        text-align: center;
        width: 100%;
    }

    .faq_acc .nav-tabs-horizontal {
        min-height: 20px;
        padding: 0px;
        background-color: #f5f5f5;
        border-radius: 4px;
        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
        box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
    }

        .faq_acc .nav-tabs-horizontal > li {
            float: none;
        }

            .faq_acc .nav-tabs-horizontal > li + li {
                /*margin-left: 2px;*/
            }

            .faq_acc .nav-tabs-horizontal > li,
            .faq_acc .nav-tabs-horizontal > li > a {
                background: #3d3c3c;
                width: 500%;
                padding: 5px;
                text-align: left;
            }

    .faq_acc .nav > li > a {
        border: 0px;
        font-family: Roboto-Thin;
    }

    .faq_acc .nav-tabs-horizontal > li > a {
        border: 0px;
    }

    .faq_acc .nav-tabs-horizontal > li.active > a,
    .faq_acc .nav-tabs-horizontal > li.active > a:hover,
    .faq_acc .nav-tabs-horizontal > li.active > a:focus {
        color: #ffffff;
        background-color: #3d3c3c;
        font-weight: bold;
        border: 0px;
        font-family: Roboto-Thin;
	width:500px;
    }

    .faq_acc .nav-tabs > li.active > a, .faq_acc .nav-tabs > li.active > a:focus, .faq_acc .nav-tabs > li.active > a:hover {
        border: 0px;
    }

    .faq_acc a:hover {
        border: 0px;
    }

    .faq_heading h2 {
        display: none;
    }

    .faq_acc .btn-primary {
        background: none;
        border: 0px;
        text-align: left;
    }

    .faq_heading {
        padding: 2px;
    }

        .faq_heading .btn {
            padding: 6px 10px;
        }

    /*end converting tabs into dropdown mobile*/

    .driver_div h3 {
        display: none;
    }

    .driverinfo .layout {
        padding: 0px;
    }

    .driver_div .driver_info {
        padding-right: 0px;
    }

    .driver_div .interactive {
        padding-left: 0px;
    }
}

/*converting tabs into dropdown mobile for top menu*/
@media screen and (max-width: 1200px) {

    .top_menu .nav > li > a {
        font-size: 12px;
        padding: 10px 3px;
		line-height:28px;
    }

    .top_menu {
        margin-top: 16px;
    }
}

@media screen and (max-width:1023px) {
    .top_menu {
        display: none;
    }

    .top_menu_drp {
        display: block;
    }

        .top_menu_drp .dropdown-menu {
            top: 32px;
            left: auto;
            width: 100%;
        }

    .top_menu_show {
        padding-right: 0px;
    }

    .drp_btn {
        width: 100%;
    }
}

/*end converting tabs into dropdown mobile for topmenu*/
@media screen and (min-width:320px) and (orientation:portrait) {
    .col-md-100 {
        width: 100%;
    }

    .site_layout {
        margin-top: 10px;
        margin-left: 0px;
    }

    #sel1 {
        width: 28%;
        height: 48px;
        margin-right: 10px;
        margin-bottom: 10px;
    }

    #sel2 {
        width: 28%;
        height: 48px;
        margin-right: 10px;
    }

    .site_img {
        width: 99%;
    }

    .col33 {
        width: 33.3%;
    }

    .btn-submit {
        width: 89px;
    }

    .site_details_layout .nav > li > a {
        height: 141px;
        overflow: hidden;
    }

    #alledged_info ul li {
        display: inline;
        float: left;
        width: 100%;
    }

    #what_next ul li {
        display: inline;
        float: left;
        width: 10%;
    }

        #what_next ul li + li {
            float: left;
            width: 89%;
        }

    .col-37 {
        width: 79%;
        float: left;
    }

    .col-xs {
        padding-left: 0px;
        padding-right: 0px;
    }

    .emailaddress {
        width: 100%;
        height: 32px;
        margin-right: 10px;
        margin-bottom: 10px;
    }
	.check-box{width:8%;vertical-align:top;}
}

@media screen and (min-width:320px) and (orientation:landscape) {
    .col-md-100 {
        width: 100%;
    }

    .site_img {
        width: 99%;
    }

    #alledged_info ul li {
        display: inline;
        float: left;
        width: 100%;
    }

    #what_next ul li {
        display: inline;
        float: left;
        width: 5%;
    }

        #what_next ul li + li {
            float: left;
            width: 94%;
        }

    .col-37 {
        width: 86.7%;
        float: left;
    }
	.col33 {
    width: 33.3%;
}
}

@media screen and (min-width:360px) and (orientation:portrait) {

    .col-37 {
        width: 81.7%;
        float: left;
    }
}

@media screen and (min-width:360px) and (orientation:landscape) {
    .col-md-100 {
        width: 73%;
    }

    .site_img {
        width: 99.2%;
    }
}

@media screen and (min-width:480px) and (orientation:portrait) {
    #carausel-text {
        top: 10px;
    }

    .site_layout {
        margin-top: 10px;
        margin-left: 0px;
    }
}

@media screen and (min-width:480px) and (orientation:landscape) {
    .col-md-100 {
        width: 100%;
    }
}

@media screen and (max-width:480px) and (orientation:landscape) {
    #sel1 {
        width: 25%;
        height: 48px;
        margin-right: 10px;
        margin-bottom: 10px;
    }

    #sel2 {
        width: 25%;
        height: 48px;
        margin-right: 10px;
    }
}

@media screen and (min-width:494px) and (orientation:portrait) {
    .col-md-100 {
        width: 73%;
    }
}


@media screen and (min-width:567px) and (orientation:portrait) {
    .col-md-100 {
        width: 73%;
    }
}

@media screen and (min-width:597px) and (orientation:portrait) {
    .col-md-100 {
        width: 73%;
    }
}

@media screen and (min-width:600px) and (orientation:portrait) {
.col-md-100 {
    width: 73%;
}
}

@media screen and (min-width:640px) and (orientation:landscape) {
    .col-md-100 {
        width: 74%;
    }

    .site_img {
        width: 99.5%;
    }
}

@media screen and (min-width:768px) and (orientation:portrait) {
.check-box{width:6%;vertical-align:top;}
    .col-md-100 {
        width: 73%;
    }

    .col33 {
        width: 33.2%;
    }

    #what_next ul li {
        display: inline;
        float: left;
        width: 4%;
    }

    #alledged_info ul li {
        display: inline;
        float: left;
        width: 28%;
    }

        #alledged_info ul li + li + li {
            float: left;
            width: 69%;
        }

    .col-37 {
        width: 32.7%;
        float: left;
    }
			.slimScrollDiv{height:557px!important;}
}

@media screen and (min-width:768px) and (orientation:landscape) {
    .col-md-100 {
        width: 66%;
    }

    .col33 {
        width: 33.1% !important;
    }

}

@media screen and (min-width:1024px) and (orientation:portrait) {
    .col-37 {
        width: 32.6%;
        float: left;
    }
	

}

@media screen and (min-width:1024px) and (orientation:landscape) {
    .col-37 {
        width: 34.9%;
        float: left;
    }

    #what_next ul li {
        display: inline;
        float: left;
        width: 5%;
    }

}

@media screen and (max-width:1024px) and (orientation:portrait) {
    #carousel-text {
        height: 160px !important;
        top: 0px;
        overflow-y: scroll;
    }

    #video {
        height: 240px;
        width: 320px;
    }

}



@media screen and (max-width:1024px) and (orientation:landscape) {

    #s {
        height: 350px !important;
        top: 0px;
        overflow-y: scroll;
    }

    #alledged_info ul li {
        display: inline;
        float: left;
        width: 40%;
    }

        #alledged_info ul li + li + li {
            float: left;
            width: 58%;
        }

    #volunteer_info, #alledged_info, #what_next, #information_info {
        min-height: 277px;
    }

    .col-sm-12 {
        width: 100%;
    }

}

@media screen and (min-width:1080px) and (orientation:landscape) {
    #alledged_info ul li + li + li {
    float: left;
    width: 64%;
}
   
#alledged_info ul li {
    display: inline;
    float: left;
    width: 34%;
}

}

@media screen and (max-width:1250px) and (orientation:landscape) {
    #alledged_info ul li + li + li {
    float: left;
    width: 61%;
}
   
#alledged_info ul li {
    display: inline;
    float: left;
    width: 38%;
}

}


@media screen and (min-width:1279px) and (orientation:landscape) {
    #carousel-text {
        height: 450px !important;
        top: 0px;
        overflow-y: scroll;
    }

    .slimScrollDiv {
        height: 407px !important;
    }

    .col-37 {
        width: 16.6%;
        float: left;
    }
	#alledged_info ul li {
    display: inline;
    float: left;
    width: 29%;
}
#alledged_info ul li + li + li {
    float: left;
    width: 69%;
}

}

@media screen and (min-width:1366px) and (orientation:landscape) {
    #carousel-text {
        margin-top: 0px;
        margin-left: 0px;
        background: #f06261;
        color: #fff;
        padding: 12px;
        height: 450px !important;
        overflow-y: scroll;
        right: 0px;
    }

    .slimScrollDiv {
        height: 424px !important;
    }

    #video {
        height: 480px;
        width: 640px;
    }

    #alledged_info ul li {
        display: inline;
        float: left;
        width: 26%;
    }

        #alledged_info ul li + li + li {
            float: left;
            width: 73%;
        }
}

@media screen and (min-width:1600px) and (orientation:landscape) {
    #carousel-text {
        margin-top: 0px;
        margin-left: 0px;
        background: #f06261;
        color: #fff;
        padding: 12px;
        height: 550px !important;
        overflow-y: scroll;
        right: 0px;
    }

    #what_next ul li {
        display: inline;
        float: left;
        width: 3%;
    }

    #alledged_info ul li {
        display: inline;
        float: left;
    }

    .col-37 {
        width: 15.6%;
        float: left;
    }
}

@media screen and (min-width:1920px) and (orientation:landscape) {
    #carousel-text {
        height: 700px !important;
        top: 0px;
    }


    #slimtest2 {
        height: 620px !important;
    }
}
