@font-face
	{
	  font-family: CSPraJad;
	  src: url('../fonts/CSPraJad/CSPraJad.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
	       url('../fonts/CSPraJad/CSPraJad.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
	}

@font-face {
	font-family: CSPraJadbold;
	src: url('../fonts/CSPraJadbold/CSPraJadbold.eot');
	src: url('../fonts/CSPraJadbold/CSPraJadbold.eot') format('embedded-opentype'),
	     url('../fonts/CSPraJadbold/CSPraJadbold.woff2') format('woff2'),
	     url('../fonts/CSPraJadbold/CSPraJadbold.woff') format('woff'),
	     url('../fonts/CSPraJadbold/CSPraJadbold.ttf') format('truetype'),
	     url('../fonts/CSPraJadbold/CSPraJadbold.svg#CSPraJadbold') format('svg');
}

*{
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}
.container-fluid {
    padding: 0px;
}
body{ font-family: CSPraJad; font-size: 16px; }
.bold{ font-family: CSPraJadbold; font-size: 16px;}
.hide{
	display: none;
}
.btn{
	font-family: Lato;
	display: inline-block;  
	color: #24292b;
	padding: 10px 20px;
	text-decoration: none;
	border: 1px solid #24292b;
	border-radius: 5px; 
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px;
	-webkit-transition: background 0.2s, color 0.2s; /* For Safari 3.1 to 6.0 */
    transition: background 0.2s, color 0.2s;
}
.btn:hover{ background: #24292b; color: #e0e6e8; }

#top_hover_bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #e8f0f3; /* Adjust background color as needed */
    z-index: 1000; /* Ensure it stays above other elements */
    padding: 0px 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Optional: Add a shadow for better visibility */
}

#top_hover_bar .container-fulid {
    display: flex;
    justify-content: space-between; /* Ensures left and right groups are spaced apart */
    align-items: center; /* Vertically aligns the content */
	padding-left:15px;
	padding-right:15px;
}

.group-left {
    display: flex;
    align-items: center; /* Vertically center the content */
    justify-content: flex-start; /* Align content to the left */
    flex: 3; /* Allow it to take up available space */
}

.group-right {
    display: flex;
    align-items: center; /* Vertically center the content */
    justify-content: flex-end; /* Align content to the right */
    flex: 1; /* Allow it to take up available space */
}

.group-right .button-group a {
    text-decoration: none;
    transition: color 0.3s ease;
	font-size: 14px;
}

/* Default styling for .group-right */
.group-right {
    display: flex;
    align-items: center; /* Vertically center the content */
    justify-content: flex-end; /* Align content to the right */
    flex: 1; /* Allow it to take up available space */
}

/* Adjust .group-right for mobile screens */
@media (max-width: 768px) {
    .group-right .button-group a {
        flex: 0; /* Allow it to take up available space */
    }
}

.group-right .button-group a:hover {
    color: #ffcc00; /* Highlight color on hover */
}

#top_hover_bar .top-left {
	display: inline-flex;
    align-items: center;
    justify-content: flex-start;
}
#top_hover_bar .top-left img{
	height: 20px;
}
#top_hover_bar .top-left a{
	font-size: 14px;
}

#top_hover_bar .top-left .phone-emoji{
	font-size: 10px;
}

/* Top Bar */
#top_bar{
	background: #333;
	position: relative;
	height: 600px;
}
#top_bar .container{ position: absolute; margin-left: 0; z-index: 100;width:100%; }
header{ padding: 30px 0; z-index: 10000; }
.logo{display: block; float: left; background: url('../images/kth_logo.png') center no-repeat; width: 130px; height: 130px; margin: -20px 0; z-index: 100; background-size:contain;}
.logo-mini{display: none;float:left;background: url('../images/kth_logo.png') center no-repeat; width: 90px; height: 90px;background-size: contain;}
#nav{ float: right; font-family: LatoLight; font-size: 16px; padding: 0; }
.nav li:not(:first-child){ margin-left: 20px; }
.nav li a{ font-size:20px;font-weight: bold;color: #FFF; text-decoration: none; text-shadow: -1px 0 #00000040, 0 1px #00000040, 1px 0 #00000040, 0 -1px #00000040;}
.nav li:hover a{ background: none; cursor: pointer; }
.nav li:hover{ border-bottom: 2px solid #FFF; }
.navbar-toggle{ 
	border: 1px solid #fff; 
	color: #fff; 
	font-size: 20px; 
	padding: 3px 9px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	text-shadow: 
	0 0 2px rgba(0, 0, 0, 0.8), 
	0 0 4px rgba(0, 0, 0, 0.6);
}
.lang-bar {
	display: flex;
	flex-direction: row-reverse ;
	padding-left:15px;
	padding-right:15px;
}
.lang-bar .button-group{
	padding-left:15px;
	padding-right:15px;
}
.lang-bar .button-group a{
	color:black;
	font-style: bold;
	text-shadow: 
	0 0 2px rgba(255, 255, 255, 0.8), 
	0 0 4px rgba(255, 255, 255, 0.6);
}
.lang-bar .button-group a.hilight{
	text-decoration: underline;
}
.navbar-toggle:hover{ background-color: #000; color: #AAA; }
.nav .lang-button {
	padding-top: 10px;
    padding-bottom: 10px;
}
.nav .lang-button a{
	color:black;
	text-shadow: none;
}
/* End of Top Bar*/

/* Banner */
	.bxslider{ margin: 0; padding: 0; }
	.bxslider li {
		margin: 0;
		padding: 0;
		height: 600px;
	}
	#banner1 {
		background: url('../images/banner8.jpg') center no-repeat;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
	}
	#banner2{
		background: url('../images/banner6.jpg') center no-repeat;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
	 	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/banner6.jpg', sizingMethod='scale');
		-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/banner6.jpg', sizingMethod='scale')";
	}
	#banner3 {
		background: url('../images/banner7.jpg') center no-repeat;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
	 	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/banner7.jpg', sizingMethod='scale');
		-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/banner7.jpg', sizingMethod='scale')";
	}
	#banner4 {
		background: url('../images/banner3.jpg') center no-repeat;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
	}
/* End of Banner */

.block_topic{ text-align: center; font-family: CSPraJadBold; font-size: 20px; color: #333; }
.block_topic_desc{ margin-top: 10px; text-align: center; font-family: CSPraJad; font-size: 18px; color: #666; }


.base_text {
	text-align: center;
    font-family: CSPraJadBold;
    color: #333;
}


/* News & Events */
	#news_events{ background: #e0e6e8; padding: 80px 0 50px; }
	#news_events .block_row{ margin-top: 40px;overflow: hidden; }
	#news_events .box{
		margin-bottom: 30px;
		border-bottom: 2px solid #ccd3d6;
	}
	#news_events .box .img img{ width: 100%; }
	#news_events .box .topic{ margin: 10px 0; padding: 4px 20px; border-left: 4px solid #3face3; font-family: CSPraJad; font-size: 18px; }
	#news_events .box .detail{ padding: 0 20px 20px 24px; font-size: 14px; font-family: CSPraJad;height: 120px; }
	#news_events .more_news{ text-align: center; margin-bottom: 14px; }
/* End of News & Events */
/* What is kthlabel */
#head_info{	background: #FFF; padding: 80px 0 50px;}

.text_detail{
	font-size: 20px;
	font-family: CSPraJad;
	color: #666;
}

/* Main Info */
	#main_info{ background: #FFF; padding: 80px 0 50px; }
	#main_info .content{ overflow: hidden; margin-top: 60px; }
	#main_info .content .row1, #main_info .content .row2{ margin-bottom: 30px; }
	#main_info .content .img{ position: relative; text-align: center; min-height: 300px; }
	#main_info .content .img img{ position: absolute; top: 50%; left: 50%; width: 300px; height: 300px; margin-left: -150px; margin-top: -150px; }
	#main_info .content .img .mask{ position: absolute; top: 50%; left: 50%; margin-left: -150px; margin-top: -150px; background: url('../images/mask.png') center no-repeat; width: 300px; height: 300px; }
	#main_info .content .info{ padding-top: 48px; padding-left: 40px; }
	#main_info .content .info .topic{ font-family: CSPraJadBold; font-size: 18px; }
	#main_info .content .info .detail{ margin-top: 14px; font-family: CSPraJad; font-size: 16px; }
	#main_info .content .info .read_more{ margin-top: 28px; }
	#main_info .content .row2 .info{ text-align: right; padding-left: 0; padding-right: 40px; }
/* End of Main Info */

/* Footer */
	footer{ overflow: hidden;background: #282c2d; color: #DDD; padding: 60px 0 0; font-family: LatoLight; font-size: 14px; }
	footer .footer_row{ margin-bottom: 60px; }
	footer .topic{ font-size: 20px; margin-bottom: 14px; color: #FFF; }
	footer .list{ margin: 0; padding: 0; }
	footer .list li{ margin: 0; padding: 0; list-style: none; }
	footer .list a{ display: inline-block; border-left: 2px solid #DDD; padding: 2px 0; padding-left: 10px; color: #DDD; text-decoration: none; }
	footer .list a:hover{ color: #3face3; text-decoration: none; border-left: 2px solid #3face3; }
	footer .space-around{
		padding-top:3px;
		padding-bottom:3px;
	}
	footer .space-around img{
		max-width: 100%;
	}
	#subscription .topic{ text-align: center; }
	#subscription_form .txtfield{ margin-top: 6px; border: 0; background: #555b5c; padding: 10px 14px; outline: none; text-align: center; }
	#subscription_form .txtfield:hover{ background: #666e6f; }
	#subscription_form button{ margin-top: 4px; background: #17191a; color: #DDD; border: 0; padding: 10px 14px; -webkit-transition: background 0.2s, color 0.2s; transition: background 0.2s, color 0.2s; }
	#subscription_form button:hover{ background: #3face3; color: #FFF; }

	#icons{ margin-top: 10px; }
	#icons a img{ border: 0; }
/* End of Footer */

/* Responsive Part */
	@media (max-width: 800px) {
		#top_bar{
			height: 300px;
		}
		.bxslider li {
			height: 300px;
		}

	    .navbar-header {
	        float: none;
	    }
	    .navbar-left,.navbar-right {
	        float: none !important;
	    }
	    .navbar-toggle {
	        display: block;
	        margin-right: 0;
	    }
	    .navbar-collapse {
	        border-top: 1px solid transparent;
	        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
	        background-color:rgba(40, 44, 45, 0.568627);
	    }
	    .navbar-fixed-top {
			top: 0;
			border-width: 0 0 1px;
		}
	    .navbar-collapse.collapse {
	        display: none!important;
	    }
	    .navbar-nav {
	        float: none!important;
			margin-top: 7.5px;
		}
		.navbar-nav>li {
	        float: none;
	    }
	    .navbar-nav>li>a {
	        padding-top: 10px;
	        padding-bottom: 10px;
	    }
	    .collapse.in{
	  		display:block !important;
		}

		#news_events{ padding: 50px 0 20px; }
		.logo{
			display: none;
		}
		.logo-mini{
			display: block;
		}
	}
	@media (max-width: 990px) {
		#news_events{ padding: 50px 0 20px; }
		#main_info{ padding: 50px 0 20px; }
		#main_info .content{ margin-top: 20px; }
		#main_info .content .img{ text-align: center; }
		#main_info .content .info{ padding: 0; text-align: center; }
		#main_info .content .info .read_more{ margin-top: 10px; }
		
		#main_info .content .row2 .info{ padding: 0; text-align: center; }
		
		footer{ text-align: center; }
		footer #sitemap{ display: none; }
	}
/* End of Responsive Part 

/* product-list */
#product-list{
	background-color: white;
}
#product-list .box{
	margin-bottom: 30px;
	border-bottom: 2px solid #ccd3d6;
}

#product-list{ background: #e0e6e8; padding: 80px 0 50px; }
#product-list .block_row{ margin-top: 40px; }
#product-list .box{
	margin-bottom: 30px;
	border-bottom: 2px solid #ccd3d6;
}
#product-list .box .img img{ width: 100%; }
#product-list .box .topic{ margin: 10px 0; padding: 4px 20px; border-left: 4px solid #3face3; font-family: CSPraJad; font-size: 18px; }
#product-list .box .detail{ padding: 0 20px 20px 24px; font-size: 14px; font-family: CSPraJad;height: 120px; }
#product-list .more_news{ text-align: center; margin-bottom: 14px; }

#product-list .row-image img{
	max-width:100%;
}

#product-section .content a{
	color:black;
	text-decoration: none;
	font-family: CSPraJad;
	font-size:1.2em;
}

#product-section .footer a{
	color: black;
}

#product-section .card-container{
	background-color: white;
	margin-bottom:20px;
	border-radius:5px;
	border: 1px solid #f5f6f7;
	overflow:hidden;
}


#product-section .card-container .card-image{
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	width:100%;
}

#product-section .card-container .card-image img{
	width:100%;
}

#product-section .card-container .card-name{
	padding:5px;
}

#product-section .content{
	overflow: hidden;
    margin-top: 60px;
}

#product-section .footer{
	display: flex;
	justify-content: center;
	padding:15px;
}

#product-section a{
	text-align: center;
}

/* highlight-section */
#highlight{
	padding: 50px 0 50px;
}
#highlight .content{
	margin-top:40px;
}
#highlight .content .box .full-background{
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	width:100%;
}

#highlight .box .img img{
	width:100%;
}

.no-padding{
	margin:0;
	padding:0;
}

#highlight .content a{
	color:black;
	text-decoration: none;
	font-family: CSPraJad;
	font-size:1.2em;
}

#highlight .footer a{
	color: black;
}

#highlight .card-container{
	background-color: white;
	margin-bottom:20px;
	border-radius:5px;
	border: 1px solid #f5f6f7;
	overflow:hidden;
}


#highlight .card-container .card-image{
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	width:100%;
}

#highlight .card-container .card-image img{
	width:100%;
}

#highlight .card-container .card-name{
	padding:5px;
}

#highlight .content{
	overflow: hidden;
    margin-top: 60px;
}

#highlight .footer{
	display: flex;
	justify-content: center;
	padding:15px;
}

#highlight a{
	text-align: center;
}

.web-theme .card-container{
	background-color: white;
	margin-bottom:20px;
	border-radius:5px;
	border: 1px solid #f5f6f7;
	overflow:hidden;
}


.web-theme .card-container .card-image{
	width:100%;
	overflow: hidden;
}

.web-theme .card-container .card-image img{
	width:100%;
}

.web-theme .card-container .card-name{
	padding:5px;
}

.web-theme p{
	text-align: center;
    font-family: CSPraJad;
    font-size: 18px;
    color: #666;
}