@charset "UTF-8";
/* CONTENT */

/* 1. GENERAL */
/* 2. MENU */
/* 100. RESPONSIVE */
/* MEGAMENU */




/* START STYLE */

/* 1. GENERAL */

.mobile_only{
	display: none;
}


/* 2. MENU */

#mobilemenu:not( .mm-menu ) {
   display: none;
}

html.mm-background .mm-page{
	background: #fff;
}




/* 100. RESPONSIVE ADJUSTMENTS */

/* All screens */
/*@media only screen { } /* Define mobile styles NOT used since it's not a mobile-first */

/* SMALL screen max-width 736px, mobile-only styles, use when QAing mobile issues */
@media only screen and (max-width: 736px) { 

	/* GENERAL STYLE */

	#emptylinks{
		width: 100%;
	}

	#pathway{
		max-width: 100%;
	}

	img{
		max-width: 100%;
	}

	table{
		width: 100%;
	}

	.hide_mobile{
		display: none;
	}

	/* TYPOGRAPHY */

	.maintitle, h1{
		font-size: 1.6em;
	}

	h1, h2, h3, h4, h5, h6{
		font-weight: bold;
	}

	h2{
		font-size: 1.5em;
	}

	h3{
		font-size: 1.4em;
	}

	h4{
		font-size: 1.3em;
	}

	h5{
		font-size: 1.2em;
	}

	h6{
		font-size: 1.1em;
	}

	q{
		padding: 1em;
		display: inline-block;
	}

	/* IMAGES */

	#imgcenter, #imgright, #imgleft, #smallimgleft, #smallimgright, #smallimg,#imgbig,#bigimgright,#bigimgleft, #sp_img{
		float: none;
		width: 100% !important;
		margin: 0;
	}

	#imgcenter img, #imgright img, #imgleft img, #smallimgleft img, #smallimgright img, #smallimg img,#bigimgright img,#bigimgleft img,#imgbig img, #sp_img img{
		width:100% !important;
	}	

	#container_main img{
		max-width:100%;
		height: auto;
	}	

	p.caption, p.smallcaption,.captionmain{
		width: 100% !important;
	}

	/* CLEANING FROM DESKTOP */

	body{
		background: #fff;
		margin: 0;
		font-size: 14px;
	}

	.mobile_only{
		display: block;
	}

	#rightbox{
		width: 100%;
		float: left;		
		margin: 0 0 10px;
	}

	#iconbox{
		float: right;
		margin: 0;
	}

	#container_main #iconbox img{
		max-width: 100%;
		width: auto;
	}

	#header, #menuleft02, #mainmenu, #imgheader, #head{
		display: none;
	}

	#container{
		width: 100%;
	}

	.preamble{
		width: auto !important;
	}

	/* HEADER */	

	#header{
		float:left;
		width:100%;
	}

	#mobile_header{
		background: #ff8c00;
	}
	
	#mobile_header img{
		width: 100%;
	}

	.mobilemenu__open{
		color: #fff;
		background: center center no-repeat transparent;
		background-image: url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADhJREFUeNpi/P//PwOtARMDHQBdLGFBYtMq3BiHT3DRPU4YR4NrNAmPJuHRJDyahEeT8Ii3BCDAAF0WBj5Er5idAAAAAElFTkSuQmCC );

		display: block;
		width: 40px;
		height: 40px;
		position: absolute;
		top: 0;
		left: 10px;
	}

	.language_selector{
		float: right;
		margin: 10px 20px 10px;
		background: #fff;
	}

	/* MENU */

	.mm-menu{
		background-color: #fff;
	}

	.mm-listview>li{
		background-color: #efe9e9;	
	}

	.mm-listview>li.active{
		background: #807272;
		color: #ff8b00;		
	}
	

	.mm-listview>li.mobilemenu__secondrow, .mm-listview.mobilemenu__secondrow li{
		background-color: #fff;
	}

	.mm-listview>li.mobilemenu__secondrow.active, .mm-listview.mobilemenu__secondrow li.active{
		background: #ff8b00;
		color: #fff;
	}

	#menuright02{
		display: none;
	}

	/* MAIN CONTENT	*/

	#container_body{
		display:flex;
		width: 100%;
		flex-flow: row-reverse wrap;
	}

	#container_left{
		width:100%;
		order:2;
	}

	#container_main{
		width: 94%;
		padding: 3%;
		order:1;
	}

	/* NAVIGATION ELEMENTS */

	#container_main #bottomnavigation img{
		width: auto;
	}


	/* FOOTER */

	#footer {
		width: 100%;
		margin: 0 auto;
		padding: 0;
		clear: both;
		float: left;
		height: auto;
	}

	#subfooter{
		width:94%;
		padding: 0 3% 3%;
		margin: 0;
		background: #ff8c00;
	}

	#subfooter ul.sub{
		display: none;
	}

	#subfooter ul.sub02{
		margin: 0;
	}

	ul.sub02 li.first a{
		height: 20px;
	}

	ul.sub02 li a{
		color: #fff !important;
		border: none !important;
		text-decoration: underline;
		height: 20px;
		padding: 0 10px 0 0;
	}


	#links, #insidelinks, #menuleft01{
		width: 100%;
	}

	#links ul.link li, #insidelinks ul.link li{
		width: 90%;
		display: inline-block;
		padding: 10px 10px 0;
	}	

	.newsblock_img {
		width: 162px !important;
		height: 109px !important;
	}
/* printbutton */    

#iconbox{
    position: absolute;
    top: 9px;
    right: 110px;
}

#print_action{
    display:none;
}

#print_action img{
    height: 25px;
}

} 

/* MEDIUM screens and up min-width 641px, medium screens */
@media only screen and (min-width: 641px) { 
#container_main{
    position: relative;
}

#rightbox {
    position: absolute;
    top: -204px;
    left: -340px;
    height: 20px;
}

#container #rightbox .mf_finder_searchBox_items_wrapper {
    width: 339px;
}

#container #rightbox .mf_finder_searchBox_query_input {
    width: 306px;
    height: 20px;
    margin-top: 3px;
}

#iconbox{
    position: relative;
    top: -30px;
    right: -640px;
}
#print_action{
    position: absolute;
    top: -2px;
    left: -30px;
}
#print_action img{
    height: 20px;
}
} 

/* MEDIUM screens ONLY min-width 641px and max-width 1024px, use when QAing tablet-only issues */
@media only screen and (min-width: 641px) and (max-width: 1024px) { 

} 

/* // LARGE screens UP min-width 1025px, large screens */
@media only screen and (min-width: 1025px) { } 

/* LARGE screen ONLY min-width 1025px and max-width 1440px, use when QAing large screen-only issues */
@media only screen and (min-width: 1025px) and (max-width: 1440px) { } 

/* // XLARGE screens and UP min-width 1441px, xlarge screens */
@media only screen and (min-width: 1441px) { } 


/* NOT USED other exception
@media only screen and (min-width: 90.063em) and (max-width: 120em) { } /* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues 
// XXLarge screens
@media only screen and (min-width: 120.063em) { } /* min-width 1921px, xxlarge screens */


/* ==========================================================================
	DROPDOWN MENU - ORANGE
========================================================================== */

/*** ESSENTIAL STYLES ***/
.mainmenu_class, .mainmenu_class * {
	margin: 0;
	padding: 0;
	list-style: none;
}
.mainmenu_class li {
	position: relative;
}
.mainmenu_class ul {
	position: absolute;
	display: none;
	top: 100%;
	left: 0;
	z-index: 99;
}
.mainmenu_class > li {
	float: left;
}
.mainmenu_class li:hover > ul,
.mainmenu_class li.sfHover > ul {
	display: block;
}

.mainmenu_class a {
	display: block;
	position: relative;
}
.mainmenu_class ul ul {
	top: 0;
	left: 100%;
}

/* service menu */

/*** ESSENTIAL STYLES ***/
.service_menu_class, .service_menu_class * {
	margin: 0;
	padding: 0;
	list-style: none;
}
.service_menu_class li {
	position: relative;
}
.service_menu_class ul {
	position: absolute;
	display: none;
	top: 100%;
	left: 0;
	z-index: 99;
}
.service_menu_class > li {
	float: left;
}
.service_menu_class li:hover > ul,
.service_menu_class li.sfHover > ul {
	display: block;
}

.service_menu_class a {
	display: block;
	position: relative;
}
.service_menu_class ul ul {
	top: 0;
	left: 100%;
}


/*** arrows (for all except IE7) **/
.sf-arrows .sf-with-ul {
	padding-right: 2.5em;
	*padding-right: 1em; /* no CSS arrows for IE7 (lack pseudo-elements) */
}
/* styling for both css and generated arrows */
.sf-arrows .sf-with-ul:after {
	content: '';
	position: absolute;
	top: 50%;
	right: 0.5em;
	margin-top: -3px;
	height: 0;
	width: 0;
	/* order of following 3 rules important for fallbacks to work */
	border: 5px solid transparent;
	border-top-color: #dFeEFF; /* edit this to suit design (no rgba in IE8) */
	border-top-color: rgba(255,255,255,.5);
}

.sf-arrows > li > .sf-with-ul:focus:after,
.sf-arrows > li:hover > .sf-with-ul:after,
.sf-arrows > .sfHover > .sf-with-ul:after {
	border-top-color: white; /* IE8 fallback colour */
}
/* styling for right-facing arrows */
.sf-arrows ul .sf-with-ul:after {
	margin-top: -5px;
	margin-right: -3px;
	border-color: transparent;
	border-left-color: #dFeEFF; /* edit this to suit design (no rgba in IE8) */
	border-left-color: rgba(255,255,255,.5);
}

.sf-arrows ul li > .sf-with-ul:focus:after,
.sf-arrows ul li:hover > .sf-with-ul:after,
.sf-arrows ul .sfHover > .sf-with-ul:after {
	border-left-color: white;
}

/* VERTICAL OPTION OF SUPERFISH MENU */

/* adding sf-vertical class in addition to sf-menu creates a vertical menu */
/* eg. <ul class="sf-menu sf-vertical"> ... */
.sf-vertical {
  min-width: 12em;
  /* If you want the width of the closed menu to expand to its
  widest top-level menu item (like its "Supersubs" submenus do),
  replace the width rule above with the following two rules. */

  /*
  min-width: 12em;
  *width: 12em;
  */
}
.sf-vertical ul {
	left:	100%;
	top: 0;
}
.sf-vertical > li {
  float: none;
}
.sf-vertical li {
  width: 100%;
}

/*** alter arrow directions ***/
.sf-vertical.sf-arrows > li > .sf-with-ul:after {
  margin-top: -5px;
  margin-right: -3px;
  border-color: transparent;
  border-left-color: #dFeEFF; /* edit this to suit design (no rgba in IE8) */
  border-left-color: rgba(255,255,255,.5);
}

#internal02 .sf-vertical.sf-arrows > li > .sf-with-ul:after {
  border-left-color: rgba(0,0,0,.5); 
}

#internal02 .sf-vertical.sf-arrows > li.sfHover > .sf-with-ul:after, #internal02 .sf-vertical.sf-arrows > li.active > .sf-with-ul:after {
  border-left-color: rgba(255,255,255,.5);
}

.sf-vertical.sf-arrows li.active > .sf-with-ul:after,
.sf-vertical.sf-arrows li > .sf-with-ul:focus:after,
.sf-vertical.sf-arrows li:hover > .sf-with-ul:after,
.sf-vertical.sf-arrows .sfHover > .sf-with-ul:after {
  border-left-color: white;
}

/* OTHER STYLE OF MENU */

#mainmenu ul.mainmenu_class li ul{
	margin-left: 6px;
	width: 100%;
}

#mainmenu ul.mainmenu_class > li.last{
	padding-bottom: 1px;
}

#mainmenu ul.mainmenu_class li.active{
	background: #ff8b00;
	color: #fff;
}

#mainmenu ul.mainmenu_class li ul.first-level-menu li, #mainmenu ul.mainmenu_class li ul.second-level-menu li{
	border: none;
}

#mainmenu ul.mainmenu_class li ul.first-level-menu li{
	height: auto;
}

#mainmenu ul.mainmenu_class li ul.first-level-menu{
	background-color: #ff8c00;
}

#mainmenu ul.mainmenu_class li ul.second-level-menu{
	width: 162%;
	background-color: #ff8c00;
}

#mainmenu ul.mainmenu_class li.sfHover{
	background-color: #ff8c00;	
}

#mainmenu ul.mainmenu_class li.sfHover:after {
	content: "";
	display: block;
	width: 6px;
	height: 20px;
	background: #ff8b00;
	position: absolute;
	right: 0;
	margin-top: -22px !important;
	z-index: 10000 !important;
	margin-right: -6px;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
}

#mainmenu ul.mainmenu_class li.last.sfHover:after,#mainmenu ul.mainmenu_class li:last-child.sfHover:after {
	height: 21px;
}

#mainmenu .mainmenu_class ul.first-level-menu li a:hover,
#mainmenu .mainmenu_class ul.first-level-menu li:hover a,
#mainmenu .mainmenu_class ul.first-level-menu li.active a {
	color: #000;
}

#mainmenu ul.mainmenu_class li ul.second-level-menu a, #mainmenu ul.mainmenu_class li ul.second-level-menu a:visited{
	color: #4f463d;
}
#mainmenu ul.mainmenu_class li ul.second-level-menu a:hover,
#mainmenu ul.mainmenu_class li ul.second-level-menu li.active a{
	color: #fff;
}



/* ==========================================================================
	MEGA MENU DARK-BROWN
========================================================================== */

#internal02 ul.service_menu_class li ul{
	margin-left: 6px;
	width: 100%;
}

#internal02 li:hover {
	background: #807272;
}

#internal02 ul.service_menu_class li:hover a {
	color: #ff8b00;
}

#internal02 ul.service_menu_class li.active{
	background: #807272;
}
#internal02 ul.service_menu_class li.active a,#internal02 ul.service_menu_class li.active a:visited{
	color: #ff8b00;
}

#internal02 ul.service_menu_class li.sfHover:after {
	content: "";
	display: block;
	width: 6px;
	height: 22px;
	background: #807272;
	position: absolute;
	right: 0;
	margin-top: -19px !important;
	z-index: 10000 !important;
	margin-right: -6px;
}

#internal02 ul.first-level-menu,
#internal02 ul.second-level-menu,
#internal02 ul.third-level-menu{
	width: 100% !important;
	background: #807272;
	color: #fff;
}

#internal02 .first-level-menu a {
	color: #fff !important;
}

#internal02 .first-level-menu a:hover, 
#internal02 .first-level-menu li.active > a {
	color: #ff8b00 !important;
}

#mainmenu ul li:after {
	height: 100% !important;
	top: 21px;
	right: -5px;
}

.p_2 #mainmenu > ul > li:first-child,
.p_3 #mainmenu > ul > li:first-child + li,
.p_4 #mainmenu > ul > li:first-child + li + li,
.p_5 #mainmenu > ul > li:first-child + li + li + li,
.p_1284 #mainmenu > ul > li:first-child + li + li + li + li {
	background: #ff8b00;
	color: #fff;
}

.p_2 #mainmenu > ul > li:first-child a:after,
.p_3 #mainmenu > ul > li:first-child + li a:after,
.p_4 #mainmenu > ul > li:first-child + li + li a:after,
.p_5 #mainmenu > ul > li:first-child + li + li + li a:after,
.p_1284 #mainmenu > ul > li:first-child + li + li + li + li a:after {
	border-left-color: white;
}

.p_2489 #internal02 > ul > li:first-child,
.p_677 #internal02 > ul > li:first-child + li,
.p_6 #internal02 > ul > li:first-child + li + li,
.p_19 #internal02 > ul > li:first-child + li + li + li,
.p_1283 #internal02 > ul > li:first-child + li + li + li + li,
.p_2219 #internal02 > ul > li:first-child + li + li + li + li + li,
.p_20 #internal02 > ul > li:first-child + li + li + li + li + li + li,
.p_2451 #internal02 > ul > li:first-child + li + li + li + li + li + li +li {
	background: #807272
}

.p_2489 #internal02 > ul > li:first-child a,
.p_677 #internal02 > ul > li:first-child + li a,
.p_6 #internal02 > ul > li:first-child + li + li a,
.p_19 #internal02 > ul > li:first-child + li + li + li a,
.p_1283 #internal02 > ul > li:first-child + li + li + li + li a,
.p_2219 #internal02 > ul > li:first-child + li + li + li + li + li a,
.p_20 #internal02 > ul > li:first-child + li + li + li + li + li + li a,
.p_2451 #internal02 > ul > li:first-child + li + li + li + li + li + li + li a {
	color: #ff8b00;
}

.p_2489 #internal02 > ul > li:first-child a:after,
.p_677 #internal02 > ul > li:first-child + li a:after,
.p_6 #internal02 > ul > li:first-child + li + li a:after,
.p_19 #internal02 > ul > li:first-child + li + li + li a:after,
.p_1283 #internal02 > ul > li:first-child + li + li + li + li a:after,
.p_2219 #internal02 > ul > li:first-child + li + li + li + li + li a:after,
.p_20 #internal02 > ul > li:first-child + li + li + li + li + li + li a:after,
.p_2451 #internal02 > ul > li:first-child + li + li + li + li + li + li + li a:after {
	border-left-color: rgba(255,255,255,.5) !important;
}

.p_2 .mobilemenu_class > li:first-child,
.p_3 .mobilemenu_class > li:first-child + li,
.p_4 .mobilemenu_class > li:first-child + li + li,
.p_5 .mobilemenu_class > li:first-child + li + li + li,
.p_1284 .mobilemenu_class > li:first-child + li + li + li + li {
	background: #807272;
	color: #ff8b00;
}

.p_2489 li.last + li,
.p_677 li.last + li + li,
.p_6 li.last + li + li + li,
.p_19 li.last + li + li + li + li,
.p_1283 li.last + li + li + li + li + li,
.p_2219 li.last + li + li + li + li + li + li,
.p_20 li.last + li + li + li + li + li + li + li,
.p_2451 li.last + li + li + li + li + li + li +li + li {
	background: #ff8b00;
	color: #fff;
}


/******************
 modal
******************/
/* modal01 */
.modal01-area{
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.3);
	z-index:9999999998;
}
.modal01-inner{
	width:100%;
	height:100%;
	position: relative;
}
.modal01-area .modal01{
	padding:calc(60 / 750 * 360px) calc(30 / 750 * 360px);
	width:90%;
	max-width:800px;
	background-color:#fff;
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
}
.modal01-area .modal01 .md-title01{
	text-align:center;
	font-size:22px;
	color:#ff8c00;
}
.modal01-area .modal01 .md-text01{
	margin:calc(50 / 750 * 360px) 0 0;
	font-size:16px;
	color:#003C64;
}
.modal01-area .modal01 .md-frame01{
	margin:calc(30 / 750 * 360px) 0 0;
	height:200px;
	overflow:auto;
	border:2px solid #B2C7D0;
	border-radius:4px;
	font-size:16px;
	color:#003C64;
}
.modal01-area .modal01 .md-frame01-inner{
	padding:calc(20 / 750 * 360px);
}
.modal01-area .modal01 .md-frame01 .title01{
	margin:0 0 calc(50 / 750 * 360px);
	text-align:center;
	font-size:calc(3.2 / 750 * 360rem);
}
.modal01-area .modal01 .md-frame01 .text01{
	margin:calc(20 / 750 * 360px) 0 0;
}
.modal01-area .modal01 .md-frame01 .title02{
	margin:calc(50 / 750 * 360px) 0 0;
	font-size:calc(3.0 / 750 * 360rem);
}
.modal01-area .modal01 .md-frame01 .title03{
	margin:calc(40 / 750 * 360px) 0 0;
}
.modal01-area .modal01 .md-frame01 .text01 p{
	margin:0 0 calc(40 / 750 * 360px);
}
.modal01-area .modal01 .md-frame01 .text01>ul{
	margin:0 0 calc(40 / 750 * 360px);
	padding-left:1.5em;
	list-style-type:disc;
}
.modal01-area .modal01 .md-frame01 .text01>ul>li>ul{
	padding-left:1.5em;
	list-style-type:disc;
}
.modal01-area .modal01 .md-frame01 .logo01{
	display:inline;
	margin:0 10px;
	width:100px;
	vertical-align:middle;
}

.modal01-area .modal01 .md-frame01 a{
	color:#004664;
	text-decoration:none;
	border-bottom:2px solid #ff8c00;
}
.modal01-area .modal01 .md-frame01 a:hover{
	color:#F05A23;
	border-bottom:2px solid #F05A23;
}

.modal01-area .modal01 .md-btn01{
	margin:20px 0 0;
	text-align:center;
}
.modal01-area .modal01 .md-btn01 a{
	display:block;
	line-height:1.3;
	font-size:18px;
	color:#ff8c00;
	text-decoration:none;
}
.modal01-area .modal01 .md-btn01 a::after{
	display:inline-block;
	content:"";
	margin:0 0 0 calc(16 / 750 * 360px);
	width:calc(25/ 750 * 360px);
	height:calc(22 / 750 * 360px);
	line-height:0;
	font-size:0;
	background:url(/assets/images/arrow02.png) no-repeat left center;
	background-size:cover;
}
.modal01-area .modal01 .md-btn01 a:last-child{
	margin:calc(30 / 750 * 360px) 0 0;
	color:#003C64;
}
.modal01-area .modal01 .md-btn01 a:last-child::after{
	background-image:url(/assets/images/arrow11_on.png);
}
.modal01-area .modal01 .md-btn01 a.disabled{
	color:#999;
	cursor:default;
}
.modal01-area .modal01 .md-btn01 a.disabled::after{
	background-image:url(/assets/images/arrow11_on.png);
	opacity:0.6;
}

.md-frame01-inner>ul>li{margin-block-start: 16px;}
.md-frame01-inner>ul>li{list-style-image:url('../../assets/templates/diweb/images/bullet.gif');}
.md-frame01-inner ul ul{list-style-image:none; list-style-type:disc;}
.md-frame01-inner ul ul ul{list-style-image:none; list-style-type:square;}

/* modal02 */
.modal02-area{
	display:none;
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.2);
	z-index:9999999999;
}
.modal02-inner{
	width:100%;
	height:100%;
	display:flex;
	justify-content:center;
	align-items:center;
}
.modal02-area .modal02{
	padding:calc(60 / 750 * 360px) calc(30 / 750 * 360px);
	width:80%;
	max-width:400px;
	background-color:#fff;
	box-shadow:0 0 8px gray;
}
.modal02-area .modal02 .md-text01{
	text-align:center;
	font-size:calc(3.0 / 750 * 360rem);
	color:#003C64;
}
/*.modal02-area .modal02 .md-btn01{
	margin:20px 0 0;
	text-align:center;
}
.modal02-area .modal02 .md-btn01 a{
	display:block;
	line-height:1.3;
	font-size:calc(2.8 / 750 * 360rem);
	color:#ff8c00;
	text-decoration:none;
}
.modal02-area .modal02 .md-btn01 a::after{
	display:inline-block;
	content:"";
	margin:0 0 0 calc(16 / 750 * 360px);
	width:calc(25/ 750 * 360px);
	height:calc(22 / 750 * 360px);
	line-height:0;
	font-size:0;
	background:url(/wp-content/themes/soka/assets/css/img/arrow02.png) no-repeat left center;
	background-size:cover;
}*/
.modal02-area .modal02 .md-btn01{
	margin:20px auto 0;
	width:calc(300 / 750 * 360px);
}
.modal02-area .modal02 .md-btn01 a{
	display:block;
	text-decoration:none;
	padding:calc(20 / 750 * 360px);
	width:100%;
	text-align:center;
	line-height:1;
	font-size:calc(2.8 / 750 * 360rem);
	color:#ff8c00;
	border:2px solid #ff8c00;
	border-radius:4px;
}

hr {
  border: 0;
  border-top: solid 1px #999999;
}