/* Small devices (phones, smaller than 768px) */
@media (max-width: 767px) {

    .container {
        width: auto;
        padding-left: 0;
        padding-right: 0;
    }

    .row {
        margin-right: 0;
        margin-left: 0;
    }

    /* layout */
    .sidebar.col-sm-3 {
        width: 100%;
    }

    .CL-layout_double #content.col-sm-6 {
        width: 100%;
    }

    .CL-layout_left #content.col-sm-9,
    .CL-layout_right #content.col-sm-9 {
        width: 100%;
    }

    
    .CL-layout_left #content.col-sm-push-3,
    .CL-layout_right #content.col-sm-push-3 {
        left: auto;
    }

    .CL-layout_left .sidebar.col-sm-pull-9,
    .CL-layout_right .sidebar.col-sm-pull-9 {
        right: auto;
    }

    
    .CL-layout_double #content.col-sm-push-3 {
        left: auto;
    }

    .CL-layout_double .sidebar.col-sm-pull-6 {
        right: auto;
    }
    
    /* header */
    .CL-site-identity {
        width: 100% !important;
        height: auto !important;
        text-align: center;
    }
    
    .CL-position-header .CL-portlet-search {
        float: none;
        overflow: hidden;
    }
    
    #search .CL-search {
        float: right;
        display: block;
        margin-top: 0;
    }

    /* menu */
    .toggle-nav {
        display: block;
        outline: 0;
        position: relative;
        padding: 4px 15px;
        text-decoration: none;
        transition: background-color linear 0.15s;
        text-align: right;
		font-size: 32px;
        width: auto;
    }

	.toggle-nav {
		color: #fff;
	}

    .toggle-nav:hover,
    .toggle-nav.toggle-nav--active {
        background-color: #fff;
        color: #333;
        text-decoration: none;
    }

    .toggle-nav.toggle-nav--active {
        border-bottom: 1px solid #fff;
    }

    #menu .main-nav {
    	display: none;
    }
    #menu .main-nav--active {
    	display: block;
    }
    

    #menu {
        height: auto;
    }

    #menu .CL-box-main ul {
        margin: 0px auto;
        padding: 0;
        text-align: center;
    }

    #menu .CL-box-main li {
        float: none;
    }

    #menu .CL-box-main li a {
        float: none;
        height: 40px;
        padding: 11px 0 2px 0;
    }

    #menu .CL-box-main li a.first {
        border-left: 0;
    }

    #menu .CL-box-main li.CL-active.CL-parent-menu>a:hover {
        background: url("../img/arrow_down_hover.png") no-repeat scroll 90% 61% #525252;
        background-image: none;
    }

    #menu .CL-box-main li.CL-parent-menu>a {
        background: url("../img/arrow_down.png") no-repeat scroll 90% 58% transparent;
        background-image: none;
        padding-right: 0;
    }

    #menu .CL-box-main li.CL-parent-menu>a:hover {
        background: url("../img/arrow_down_hover.png") no-repeat scroll 90% 61% #525252;
        background-image: none;
    }

    #menu .CL-box-main ul li ul {
        display: block;
    }

    #menu .CL-box-main ul li ul {
        margin: 0;
        padding: 0;
        position: static;
        width: 100%;
    }

    #menu .CL-box-main li.CL-parent-menu ul li {
        float: none;
        width: 100%;
    }

    #menu .CL-box-main li.CL-parent-menu ul li.CL-parent-menu>a {
        background: url("../img/arrow.png") no-repeat scroll 230px 55% transparent;
        width: 100%;
        text-align: center;
        padding-left: 0;
        padding-right: 0;
    }

    #menu .CL-box-main li.CL-parent-menu ul li.CL-parent-menu>a:hover {
        background: url("../img/arrow_select.png") no-repeat scroll 230px 55% #525252;
    }

    #menu .CL-box-main li.CL-parent-menu ul li a {
        width: 100%;
        text-align: center;
        padding-left: 0;
        background-color: #6E6E6E;
        padding-right: 0;
        border-bottom: 1px solid #989898;
    }

    #menu .CL-box-main li.CL-parent-menu ul li.CL-parent-menu ul {
        left: auto;
        margin-top: 0px;
    }

}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .container {
        width: 740px;
    }

}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .container{
        width: 980px;
    }
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .container {
        width: 1024px;
    }

}