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

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

    /* page-wrap */
    .page-wrap { padding: 0 20px;}
    
    /* header */
    .header .social {
        position: absolute;
        top: 10px;
        right: 0;
        line-height: 1;
    }
    
    /* highlights */
    .highlights .item { height: 30vh;}
    
    /* footer */
    .footer { padding: 20px;}
    
}


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

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

	.container { width: 720px;}
    
    /* page-wrap */
    .page-wrap { padding: 0 20px;}
    
    /* header */
    .header { text-align: right;}
    .header .logo { right: 0; margin: auto;}
    .header .social {
        position: absolute;
        top: 10px;
        right: 0;
        line-height: 1;
    }
    
    /* highlights */
    .highlights .item { height: 25vh;}
    
    /* footer */
    .footer { padding: 20px;}

}


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

@media (max-width: 767px) {

	.container { width: auto;}

    /* page-wrap */
    .page-wrap { padding: 0 10px;}
    
    /* header */
    .header {
        height: 70px;
        line-height: 70px;
        text-align: right;
    }
    .header .logo { max-width: 125px;}
    header .btn.webshop { display: none;}

    /* navbar */
    .navbar .search-box input[type=text] { display: none;}
    .navbar .search-box button[type=submit] { position: static;}
    .navbar .button .text { display: none;}
    
    /* nav-holder */
    .nav-holder { top: 70px;}
    
    /* eyecatcher */
    .eyecatcher .slides li { min-height: 300px;}
    .eyecatcher .slides .caption { width: 220px; height: 220px;}
    .eyecatcher .slides .caption .line-1 { margin-bottom: 10px;}
    .eyecatcher .slides .caption .line-2 { display: none;}

    /* hero-bar */
    .hero-bar { font-size: 18px;}
    
    /* highlights */
    .highlights .col-4 { display: none;}
    .highlights .col-4:first-child { display: block;}
    .highlights .item { height: 30vh;}
    
    /* content */
    .content.introduction { margin-left: 10px; margin-right: 10px;}
    .content-left, .content-right { float: none; width: auto;}

    /* footer */
    .footer { padding: 10px;}
    .footer .latest-news .col-4 { display: none;}
    .footer .latest-news .col-4:first-child { display: block;}

    /* 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%;}
	
}