@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;700&family=Sarabun:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Changa:wght@400;600&display=swap');
/**/

:root{
    --color1: #02337a;
    --menu-shadow: 0 10px 10px -10px #00000080!important;
    --menu-background: #00409ce3!important;
    --menu-mobile-background: #001f4c!important;
    --menu-text-color: #fff!important;
    --menu-text-color-hover: #cddc39!important;
    --menu-border: 1px solid #33333312!important;
    --menu-accent-color: #cddc39!important;
    --menu-submenu-background: #111c2cf5!important;
    --gotop-color: #111!important;
    --gotop-background: #e6e9ed!important;
    --footer-border: solid #cddc39!important;
    --footer-background: #111!important;
    --footer-text-color: #e0e9ff!important;
    --footer-highlight-color: #cddc39!important;
    --footer-separator-color: #141414!important;
    --footer-paragraph-color: #9d9d9d!important;
    --menu-padding: 10px;
    --menu-height: 30px;
    --menu-font-size: 18px;
    --menu-transition: 0.3s ease-out;
    --menu-mobile-shadow: px 0px 63px 0px inset #00000011;
    --footer-border-width: 10px 0px 0px 0px!important;
}
/**/

body{
	font-family: 'Rubik', sans-serif!important;
	text-align: left;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
	background-image: url(/s/main/images/background.jpg);
	background-attachment: fixed;
	transition:0.3s;
}
body[dir=rtl]{
	font-family: 'Changa', sans-serif!important;
}
@media only screen and (max-width: 800px) {
	body{
		background-size: 800px;
	}
}

h1, h2, h3, h4{
	font-family: 'Sarabun', sans-serif;
	color: #243348;
}
[dir=rtl] h1, [dir=rtl] h2, [dir=rtl] h3, [dir=rtl] h4{
	font-family: 'Changa', sans-serif;
}
h1.underline::after, h2.underline::after{
    content: '';
    width: 55px;
    height: 2px;
    background: #cddc39;
    margin: 10px auto;
    display: block;
}
/**/

#header{
	text-align: center;
}
#header>div.container:first-of-type{
	background:var(--color1);
	color:#fff;
	font-size: 16px;
    line-height: 30px;
	box-shadow: 0px 10px 10px -10px #000000cc;
}
#header .container>div{
	display:flex;
	padding:5px;
	margin: auto;
	transition:0.3s;
}
@media only screen and (min-width: 820px) {
	#header .container>div{
		max-width:800px;
	}
}
@media only screen and (min-width: 1020px) {
	#header .container>div{
		max-width:1000px;
	}
}

#header .container>div .flex{
	flex:1;
}

.hide_mobile{
	margin-inline-end: 5px;
}
@media only screen and (max-width: 700px) {
	#header .hide_mobile,#header .container a.hide_mobile{
		display:none;
	}
}

#header a{
    display: inline-block;
	position: relative;
	padding: 0px 10px;
    color: #fff;
	text-decoration: none;
    transition: 0.2s;
	direction: ltr;
	top: 0px;
}
#header a:hover{
	/*transform: scale(1.2);*/
	color:var(--menu-accent-color);
	top: 3px;
}

#header icon{
	vertical-align: middle;
}

#header .logo_container{
	display:flex;
    color: #000;
	font-weight: bold;
	justify-content: center;
}
#header .logo_container>div{
	flex-direction: column;
	padding: 10px;
}
#header .logo_container>div>div {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#header .logo_container span{
	display:block;
	font-weight: normal;
}

/**/
#menu{
    position: relative;
	z-index: 101;
	height: 50px;
	max-width: 100%;
    margin: auto;
	transition:0.3s;
}
@media only screen and (min-width: 820px) {
	#menu{
		max-width:800px;
	}
}
@media only screen and (min-width: 1020px) {
	#menu{
		max-width:1000px;
	}
}

#menu nav{
	height: 50px;
	font-family: 'Rubik', sans-serif!important;
}
[dir=rtl] #menu nav{
	font-family: 'Changa', sans-serif!important;
}

@media only screen and (min-width: 684px) {
	#menu nav .title {
		display: none;
	}
}

@media only screen and (max-width: 684px) {
	nav li>a {
		height: auto!important;
		min-height: 30px;
	}
}

#menu .logo_horizontal{
	width: 162px;
    display: flex;
    align-items: center;
	margin: auto;
}
@media only screen and (max-width: 700px) {
	#menu .logo_horizontal{
		filter: contrast(0) brightness(2.5);
	}
	#menu .logo .logo_horizontal{
		transform: scale(1.5);
		padding-bottom: 20px;
	}
}
#menu .logo_horizontal>span{
	display:inline-block;
	height:30px;
    background-size: contain;
}
#menu .logo_horizontal>span:first-of-type{
	width:54px;
	background-image: url(/s/main/images/logo.shape.png);
}
#menu .logo_horizontal>span:last-of-type{
	width:108px;
	background-image: url(/s/main/images/logo.text.png);
}

#menu nav>ul>li.logo{
	flex:0;
}
#menu nav>ul>li.logo>a {
	display: flex;
    width: 0px;
    height: 50px;
    padding: 0px;
    /*background-image: url(/s/main/images/logo.png);*/
    background-position: center;
    /*background-color: #fff;*/
    background-size: 25px;
    background-repeat: no-repeat;
    vertical-align: top;
	transition: 0.3s;
    border-right: none;
	overflow: hidden;
}
@media only screen and (max-width: 683px) {
	#menu nav>ul>li.logo>a {
		width: 100%;
		padding-top: 50px;
		background-position: top;
		background-size: 50px;
		text-align: center;
	}
}

@media only screen and (max-width: 700px){
	nav ul ul, .language ul {
		margin: 10px!important;
		border-radius: 10px;
		overflow: hidden;
		background-color: #021024!important;
	}
}

@media only screen and (min-width: 684px) {
	#menu nav>ul>li.logo>a {
		box-shadow: 0px 0px 30px #000 inset;
	}
	#menu nav.sticky>ul>li.logo>a {
		width: 170px;
		border-radius: 0px 0px 20px 5px;
		border-right: solid 3px #cddc39;
		background-color: #fff;
		box-shadow: 0px 0px 10px rgb(0 0 0 / 0%) inset;
		background-size: 40px;
	}
	[dir=rtl] #menu nav.sticky>ul>li.logo>a {
		border-radius: 0px 0px 5px 20px;
	}
	#menu nav.sticky>ul>li.logo>a:hover {
		background-color: #e4f3ff;
	}
}
#menu nav.sticky>ul>li.logo>a:before {
	display:none!important;
}

#menu nav>ul, .mobileMenu{
	backdrop-filter: saturate(180%) blur(20px);
	/*border-radius: 0px;*/
}
@media only screen and (min-width: 701px) {
	#menu nav>ul, .mobileMenu{
		border-radius: 5px;
		border: solid 1px #ffffff24;
	}
}

#menu ul ul li>a{
	text-align:left!important;
}
[dir=rtl] #menu ul ul li>a{
	text-align:right!important;
}

#menu .mobileMenu a{
	margin:auto;
	width: 100%;
}

.menu_only{
	margin:0px 10px;
	vertical-align: text-bottom;
}
@media only screen and (min-width: 701px) {
	.menu_only{
		display:none;
	}
}
/**/
@media only screen and (min-width: 701px) {
	li.products>ul{
		display:flex;
	}
}
li.products>ul>div{
	background-size:cover;
	padding: 30px;
}
li.products>ul>div:last-of-type{
	background-image:url(/s/main/images/menu.raw.jpg);
	background-position: bottom left;
}
li.products>ul>div:first-of-type{
	background-image:url(/s/main/images/menu.tubes.jpg);
	background-position: bottom left;
}

li.products>ul a{
	color: #122334;
    --menu-text-color-hover: #0359db!important;
    --menu-accent-color: #0359db;
    background-color: #ffffff8c;
    margin: 5px;
    border-radius: 5px 5px 0px 0px;
}

/**/
.page-title{
    display: flex;
	height: 200px;
    margin: 10px auto;
    border-bottom: solid 10px #cddc39;
    border-radius: 5px;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-shadow: 0 0 5px #000;
    background-color: #222;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
	transition:0.3s;
}
@media only screen and (min-width: 820px) {
	#content .page-title{
		max-width:800px;
		height: 250px;
	}
}
@media only screen and (min-width: 1020px) {
	#content .page-title{
		max-width:1000px;
		height: 300px;
	}
}
.page-title h1{
	color: #fff;
}
@media only screen and (max-width: 700px) {
	.page-title{
		margin-top: 0px;
		height: 350px;
		border-radius: 0px;
	}
}


/**/
#content{
	min-height: 400px;
	font-size: 18px;
    color: #222;
}

/**/
.summary{
	display: inline-block;
    padding: 15px;
	border-radius: 3px;
	box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    position: relative;
	line-height: 18px;
	margin: 10px 0px;
    background: #00409c;
    color: #fff;
}
.summary::before {
    content: " ";
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    box-shadow: 0px 0px 40px #00000011 inset;
	z-index: -1;
}
.summary a {
    display: block;
	padding: 5px 10px;
    color: #fff;
    text-decoration: underline;
}
.summary a:hover {
    text-decoration: none;
}
.summary ul {
    margin: 0px;
}
/**/
.section{
	border-bottom: solid 1px #96bbe4;
    padding: 20px;
    box-shadow: 0px 2px 5px rgb(0 0 0 / 10%);
    background-color: #ffffff61;
}
/**/
#content .page-image{
	float: none;
	margin: auto;
	display: block;
}
@media only screen and (min-width: 550px) {
	#content .page-image{
		float: right;
	}
}

/**/
#content div.container.first{
	margin-top: 50px;
	background-color: #e6e9ed;
}
@media only screen and (max-width: 820px) {
	#content div.container.first{
		margin-top: -20px;
	}
}

#content div.container.first::before{
	content:" ";
	position: relative;
    top: -40px;
	display:block;
	width:100%;
	height:40px;
	background-image: url(/s/main/images/arc.svg);
}
#content .container>div{
	margin: auto;
	padding:15px;
	box-sizing: border-box;
	transition:0.3s;
    border-radius: 5px 5px 0px 0px;
	text-align: justify;
}
@media only screen and (min-width: 820px) {
	#content .container>div{
		max-width:800px;
	}
}
@media only screen and (min-width: 1020px) {
	#content .container>div{
		max-width:1000px;
	}
}
.container h1, .container h2{
	text-align: center;
}

#content .no-page-image{
    margin-top: 50px;
}

#content img{
	max-width:100%;
}

/**/
#footer{
	line-height:22px;
	font-weight: lighter;
}
[dir=rtl] #footer{
	direction: rtl;
    text-align: right;
}

#footer a:hover{
	text-decoration: none!important;
}
#footer .social a {
    margin: 5px!important;
}

#footer div.logo{
    text-align: center;
}
#footer .logo a{
	font-family: 'Source Sans Pro', sans-serif!important;
    font-size: 18px!important;
    display: inline-block!important;
}
[dir:rtl] #footer .logo a{
	direction: ltr;
}
#footer .logo a:hover{
	padding-left: 0px;
	text-decoration: none;
	transform: scale(1.1);
}
#footer .logo a img{
	vertical-align:middle;
	/*height: 80px;
    filter: grayscale(100%) brightness(500%);
	opacity: 0.7;*/
    transition: 0.2s;
	display: block;
    margin: auto;
	filter: contrast(0) brightness(2.5);
}
#footer .logo a:hover img{
    /*filter: none;
	opacity: 1;*/
}
#footer .logo p{
	color:#fff;
}

/**/
#footer .djidel {
    display: block!important;
    min-width: 100%!important;
    border: none!important;
    /*margin: 30px 0 0!important;*/
    text-align: center;
    box-sizing: border-box;
}
#footer .djidel a {
    text-align: center;
    font-size: 10px;
    /*padding: 5px 0 0;*/
}
#footer .djidel a:hover {
	padding: 0px:important;
}
/* animate */
.scrollAnimate{
	position:relative;
	transition:0.5s;
}
.an2.animationOut, .an1.animationOut, .an3.animationOut{
	transform: scale(0.6);
	opacity:0;
}
.an2.animationIn, .an1.animationIn, .an3.animationIn{
	transform: scale(1);
	opacity:1;
}

/**/
.center{
	text-align:center;
}

/**/
.material-icons{
	vertical-align: middle;
}

/**/
.related_images{
	display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.related_images>div{
	width: 200px;
    height: 200px;
    margin: 10px;
    border-radius: 200px;
    background-size: contain;
}

/* button */
a.button{
	position:relative;
	top:0px;
    display: block;
    width: 100px;
    margin: auto;
	margin-bottom:20px;
    background: #0D47A1;
    text-align: center;
    padding: 10px;
    color: #fff;
    border-radius: 5px;
    text-decoration: none;
    /*font-weight: bold;*/
	transition:0.2s;
}
a.button:hover{
    background: #015ae5;
	top:-5px;
    box-shadow: 0 10px 10px -10px #00000080;
}

/* loading */
.loading_bar{
	position: relative;
	height: 4px;
    width: 140px;
    background: #868686;
    margin: 10px auto 10px;
    border-radius: 5px;
}
.loading_bar::before{
    content: ' ';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 5px;
    background: #e0f5ff;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-name: loader_an;
}

@-webkit-keyframes loader_an {
    0% {
        -webkit-transform: translateX(0)
    }

    to {
        -webkit-transform: translateX(140px)
    }
}

@keyframes loader_an {
    0% {
        transform: translateX(0)
    }

    to {
        transform: translateX(140px)
    }
}