@media (min-width: 1140px) and (max-width: 1400px) {
    .highlights .container{ width: 1100px; }
}
@media (min-width: 980px) and (max-width: 1139px) {
    .highlights .container{ width: 800px; }
}

/* ==========================================================================
   Normal devices (tablets, 980px and up)
   ========================================================================== */

@media (min-width: 980px) and (max-width: 1199px) {

	.container { width: 940px;}
    
    .eyecatcher { height: 60vh;}
    
    .highlights .item {}
    .highlights .item .text { padding: 1.5vw;}
    .corner { display: none;}
        
    .news .row { margin-left: -20px;}
    .news .item { width: 300px; margin-left: 20px;}
    
    .news .owl-carousel .owl-nav .owl-prev { left: 20px;}
    .news .owl-carousel .owl-nav .owl-prev:hover { left: 18px;}
    .news .owl-carousel .owl-nav .owl-next { right: 0px;}
    .news .owl-carousel .owl-nav .owl-next:hover { right: -2px;}
    
}


/* ==========================================================================
   Small devices (tablets, 768px and up)
   ========================================================================== */

@media (min-width: 768px) and (max-width: 979px) {

	.container { width: 720px !important; padding: 10px;}
    .content-left, .content-right { width: 100%;}
    
    .eyecatcher { height: 60vh;}
    .eyecatcher.small .logo { max-width: 25vw;}
    
    .highlights .item {
    float: left;
    height: 350px;
    margin: 0 5px;
    width: 230px;
    }
    .highlights .container{ padding: 0;}
    .highlights .item:nth-child(2) {margin: 0 0 10px;}
    .corner { display: none;}
    
    .news .row { margin: 0;}
    .news .item { width: 370px; margin: 0;}
    
    .news .owl-carousel .owl-nav .owl-prev { left: 20px;}
    .news .owl-carousel .owl-nav .owl-prev:hover { left: 18px;}
    .news .owl-carousel .owl-nav .owl-next { right: 0px;}
    .news .owl-carousel .owl-nav .owl-next:hover { right: -2px;}
    
    .collaboration { height: auto;}
    .collaboration .content-left { padding: 20px 2.5vw 0 0vw; width: 50%;}
    .collaboration .banner { background-color: #191919; float: left; padding: 3vh 0; width: 50%;}
    .collaboration .banner::before, .collaboration .banner::after { display: none;}
    .collaboration .btn { display: block; margin-bottom: 10px;}
    
    .logo-visual { display: block; float: left; left: unset; margin: 0 auto;  position: relative; right: unset;}
    .logo-visual img { display: block; margin: 0 auto; width: 149px;}
    .sitelinks { float: left; text-align: center; text-transform: uppercase;
    width: 100%;}
    .sitelinks ul { display: inline-block; margin: 0 auto;}
    

	/* logo-3w */
	.logo-3w { display: none;}

}


/* ==========================================================================
   Extra small devices (phones, less than 768px)
   ========================================================================== */

@media (max-width: 767px) {

	.container { width: auto; padding: 10px;}
    .content-left, .content-right, .content-aside, .aside { width: 100%;}
    .aside { padding: 0 0 40px;}
    .highlights .container {
        width: 300px;
    }
    
    .highlights { padding: 20px 0 30px;}
    .highlights .title h2 { line-height: 30px; margin-bottom: 20px;}
    .highlights .item { width: 300px; margin: 5px 0;}
    .highlights .container { padding: 0;}
    .owl-carousel .owl-stage-outer {
        display: block;
        margin: 0 auto;
    }
    
    .navbar {
        height: auto;
        padding: 0 10px;
    }
    
    .navbar .logo {right: 10px; left: inherit;}
    
    .eyecatcher {
        height: auto;
    }
    .eyecatcher.small {display: none;}
    .eyecatcher .logo { max-width: 150px;}
    .eyecatcher.small .logo {max-width: 25vw;}
    
    .eyecatcher .slides {
    height: auto;
    }
    .eyecatcher .image {
        float: left;
        height: 280px;
        position: relative;
        width: 100%;
    }
    .eyecatcher .caption {
        float: left;
        height: auto;
        padding: 10px;
        position: relative;
        width: auto;
    }
    .eyecatcher .caption .title > h2 { font-size: 28px;}
    .eyecatcher .caption .tagline > h2 { font-size: 20px;}
    
    .eyecatcher .caption .description > p { margin: 15px 0;}
    
    .caption:before {display: none;}
        
    .introduction { padding: 50px 0 100px;}
    .introduction .button-divider { margin: 0;}
    .introduction .button-divider ul { display: block;}
    .introduction .button-divider li { float: none; margin: 0;}
    .introduction .button-divider .btn { display: block; margin-bottom: 10px; width: 100%;}
    
    .news { padding-bottom: 50px;}
    .news .row { margin: 0 auto; width: 300px;}
    .news .item {
        margin: 0 auto;
        max-width: 300px;
        overflow: hidden;
        padding: 0;
        width: 300px;
    }
    
    .btn-news { width: auto;}
    
    .news-item { float: none; margin: 10px 0; min-height: 250px; padding: 10px; 
                width: 100%;}
    
    .container .row { margin: 0 auto;}
    
    .news-item.detail { margin: 0; padding: 10px; swidth: auto;}
    
    .news-item .image { float: none; margin: 0 auto; padding: 0; width: 100%;}
    .news-item .image img { float: none; margin: 0 auto; width: auto;}
    .news-item .description { padding: 0;}
    .news-item.detail .btn { display: block; max-width: 320px;}
    
    .news .owl-carousel .owl-nav .owl-prev { left: 00px;}
    .news .owl-carousel .owl-nav .owl-prev:hover { left: -2px;}
    .news .owl-carousel .owl-nav .owl-next { right: 0px;}
    .news .owl-carousel .owl-nav .owl-next:hover { right: -2px;}
    
    .newsletter { padding: 40px 0;}
    .newsletter ul { margin-bottom: 0;}
    .newsletter li:first-of-type { display: inline-block; float: none; margin-bottom: 20px;}
    .newsletter li { display: inline; float: none; margin: 10px;}
    
    .address { width: 100%; padding: 5vw;}
    .logo-visual { display: block; float: left; left: unset; margin: 0 auto;  position: relative; right: unset; width: 100%;}
    .logo-visual img { display: block; margin: 0 auto; width: 149px;}
    .sitelinks { float: left; text-align: center; text-transform: uppercase;
    width: 100%;}
    .sitelinks ul { display: inline-block; margin: 0 auto;}
    .footer .copyright { padding: 5vw;}
    .footer .blocks {
        width: auto;
    }
    
    .sponsors .owl-carousel .owl-nav .owl-prev          { left: 0;}
    .sponsors .owl-carousel .owl-nav .owl-prev:hover    { left: -2px;}
    .sponsors .owl-carousel .owl-nav .owl-next          { right: 0;}
    .sponsors .owl-carousel .owl-nav .owl-next:hover    { right: -2px;}
    
    .parents .col-4, .parents .col-8 { height: 80px;}
        
    /* table */
    table {
		overflow-x: auto;
		display: block;
        max-width: 100%;
	}

	/* contact-form */
	.contact-form td { display: block;}
	.contact-form input[type=text], .contact-form  select, .contact-form  textarea { width: 100%;}
	
	/* logo-3w */
	.logo-3w { display: none;}
	
}


/* ==========================================================================
   Responive nav
   ========================================================================== */

@media screen and (min-width: 980px) {
	
	.js .nav-collapse { position: relative;}
	.js .nav-collapse.closed { max-height: none;}
	.nav-toggle { display: none;}
	
}
@media screen and (max-width: 979px) { 

	.js .nav-collapse {
		clip: rect(0 0 0 0);
		max-height: 0;
		position: absolute;
		display: block;
		overflow: hidden;
		zoom: 1;
	}
	.nav-collapse.opened {
		max-height: 9999px;
        margin-bottom: 20px;
	}
	.nav-toggle {
		-webkit-tap-highlight-color: rgba(0,0,0,0);
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		-o-user-select: none;
		user-select: none;
	}
    
    
     /* nav-toggle */
	.nav-toggle {
        color: #fff;
        display: inline-block;
        font-size: 17px;
        font-weight: 700;
        line-height: 60px;
        text-align: right;
        text-decoration: none;
        text-transform: uppercase;
    }
    .nav-toggle:hover { color: #cb5506;}
	
	/* menu */
    .menu {
        float: left;
        margin: 0;
        padding: 0;
        width: 100%;
    }
    .menu li {
        float: none;
        line-height: 40px;
        margin: 0;
    }
    .menu > li.divider {
        display: none;
    }
    .menu li > a {
        background-color: rgba(255, 255, 255, 0.1);
        color: #fff;
        height: 40px;
        line-height: 40px;
        padding: 0 20px;
    }
     .menu > li:last-child > a {
        padding: 0 20px;
    }
    .menu li > a:hover, .menu li.active > a {
        background-color: transparent;
        font-weight: bold;
    }
	.menu > li > a:hover, .menu > li.active > a { 
        border-bottom: none; color: #cb5506;}
    .menu > li > ul, .menu > li:hover > ul {
        position: static;
        display: block;
        padding: 0;
        background-color: transparent;
    }
    .menu > li > ul > li { background-color: transparent;}
    .menu > li > ul > li > a {
        background-color: rgba(255, 255, 255, 0.05);
        color: #fff;
        font-size: 16px;
        font-weight: 700;
        padding: 0 60px;
    }
    
    .quick-access { top: 0; position: absolute; right: 80px;}
    
    .menu > li > ul::after {
        border: none;
    }
	
}