@charset "utf-8";
/* CSS Document */
/*Main Page*/
body {
  	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.1vw;
}

* { margin: 0; padding:0; box-sizing:border-box; outline: none;}

@media screen and (max-width: 1400px)
{
	body {
		font-size: 15px;/*font-size: 1.025vw;*/
	}
}
@media screen and (min-width: 1400px) {
	h1 {font-size: 2.35vw; margin: 0.81vw 0}
	h2 {font-size: 1.76vw; margin: 0.88vw 0}
	/*h3 {font-size: 1.39vw; margin: 0.96vw 0}*/
	h4 {font-size: 1.17vw; margin: 1.32vw 0}
	/*h5 {font-size: 0.96vw; margin: 1.76vw 0}
	h6 {font-size: 0.88vw; margin: 1.98vw 0}*/
}
/*JourNEI Header*/
/*Logo Head */
.logoheadtext {
	width: 100%; 
	color: #f2f2f2; 
	clear: both;
	background-color: darkmagenta;
	padding: 5px;
}
.imghead {width: 100px; height: 100px;}	
@media screen and (max-width: 720px)
{
	.logoheadtexth1 {font-size: 18px; font-weight: bold;}
	.logoheadtexth4 {font-size: 14px;}
	.imghead {width: 70px; height: 70px;}
}
@media screen and (min-width: 1400px)
{
	/*.logoheadtexth1 {font-size: 1.32vw; font-weight: bold;}
	.logoheadtexth4 {font-size: 1.02vw;}*/
	.imghead {width: 5vw; height: 5vw;}
}

/*Stick Header on Main page*/
.MainContent {
  	width: 100%;
	/*padding: 20px;*/
}

.MainContent-Section {
	clear: both;
	width: 100%;
	display: table;
}

/* The sticky class is added to the header with JS when it reaches its scroll position */
.StickyHeader {
  	position: fixed;
	z-index: 95;
  	top: 0;
  	width: 100%;
}

/* Add some top padding to the page content to prevent sudden quick movement (as the header gets a new position at the top of the page (position:fixed and top:0) */
.StickyHeader + .MainContent {
  	padding-top: 100px;
}



/*Main Menu*/
.MainMenu-topnav {
  	overflow: hidden;
  	background-color: #063852;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.MainMenu-topnav a {
  	float: left;
  	display: block;
  	color: #f2f2f2;
  	text-align: center;
  	padding: 14px 16px;
  	text-decoration: none;
}

.MainMenu-active {
  	background-color: #FFDF00;
}

.NavHome {
	padding-left: 10px;
	padding-right: 10px;
}	

.MainMenu-topnav .icon {
  	display: none;
}

.MainMenu-dropdown {
    float: left;
    overflow: hidden;
}

.MainMenu-dropdown .MainMenu-dropbtn {
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}

.MainMenu-dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
    z-index: 1;
}

.MainMenu-dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.MainMenu-topnav a:hover, .MainMenu-dropdown:hover .MainMenu-dropbtn {
 	background-color: #1995ad;
  	color: white;
}

.homeicon {color: #063852}	

.MainMenu-dropdown-content a:hover {
    background-color: #ddd;
    color: black;
}

.MainMenu-dropdown:hover .MainMenu-dropdown-content {
    display: block;
}

/*.MainMenu-dropdown .closebtn {
	font-size: 15px;
  	display: none;
}*/	
	
@media screen and (max-width: 1040px) {
  	.MainMenu-topnav a:not(:first-child), .MainMenu-dropdown .MainMenu-dropbtn {
    	display: none;
  	}
	.MainMenu-topnav a:first-child {font-size: 15px;}
  	.MainMenu-topnav a.icon {
    	float: right;
    	display: block;
		font-size: 15px;
		background-color: #063852;
  	}
  	.MainMenu-topnav.responsive {position: relative;}
	/*.MainMenu-topnav.responsive .NavHome {display: none;}*/
  	.MainMenu-topnav.responsive .icon {
    	position: absolute;
    	right: 0;
    	top: 0;
  	}
  	.MainMenu-topnav.responsive a {
    	float: none;
    	display: block;
    	text-align: left;
  	}
  	.MainMenu-topnav.responsive .MainMenu-dropdown {float: none;}
  	.MainMenu-topnav.responsive .MainMenu-dropdown-content {position: relative/*!important*/;}
  	.MainMenu-topnav.responsive .MainMenu-dropdown .MainMenu-dropbtn {
    	display: block;
    	width: 100%;
    	text-align: left;
  	}
}

.MainMenu-topnav-image1 {
	height: 3.50vw;
  	background-color: #063852;
	float: left;
	/*display: none;*/
}

.MainMenu-topnav-image1:hover {
  	background-color: #1995ad;
}
	
@media screen and (max-width: 1400px) {
	.MainMenu-topnav-image1 {height: 49px;}
	.imgresp {width: 60px;}
}

.stickylogo {
    position: -webkit-sticky;
    position: sticky;
	/*position: fixed;*/
    top: 0;
	padding-left: 2px;
}

.MainMenuSearch {
	float: left;
	background-color: #063852;
	color: #333;
	padding-top: 10px;
	padding-bottom: 5px;
	padding-left: 10px;
	display: none;
}

@media screen and (min-width: 460px) and (max-width: 1040px) {
	.MainMenuSearch {display: block;}		
}	

@media screen and (min-width: 360px) and (max-width: 460px) {
	.MainMenuSearch {display: block;}		
	.MainMenuSearch-child input[type=text], .MainMenuSearch-child input[type=text]:focus {
		width: 150px;
	}
}	

@media screen and (max-width: 360px) {
	.MainMenuSearch {display: block;}
	.MainMenuSearch-child input[type=text], .MainMenuSearch-child input[type=text]:focus {
		width: 100px;
	}
}
.MainMenuSearch-child input[type=text] {
    padding: 4px 25px 4px 4px;
	/*padding-bottom: 4px;
	padding-left: 4px;
	padding-right: 25px;
	font-size: 14px;*/
	/*width: 200px;
	-webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;*/
	border: none;
	border-radius: 10px;
    background: #f2f2f2;
}

.MainMenuSearch-child input[type=text]:focus {
	/*width: 80%;*/
	outline: none;
}

.MainMenuSearch-child input[type=text]::placeholder {
	color: #333;
}

.MainMenuSearch-child button {
    padding-top: 5px;
	padding-bottom: 5px;
    color: #333;
	background-color: transparent;
	margin-left: -25px;
	border: none;
    cursor: pointer;
}

.MainMenuSearch-child button:hover {
    color: #cb0000;
}

.MainMenuSearch-child::after {
    content: "";
    clear: both;
    display: table;
}
@media screen and (min-width: 1400px){
	.imgresp {width: 4vw;}
}

/* Footer Style*/
.col-container {
    display: table;
    width: 100%;
	background-color: #020509;
	color: #f2f2f2;
}
.col-l {
    display: table-cell;
	vertical-align: top;
    padding: 10px;
	text-align: right;
	width: 40%;
}

.col-l a {
	text-decoration: none;
	color: #f2f2f2;
}

.col-l a:hover {
	text-decoration: none;
	color: #f2df00;
}
	
.col-c {
    display: table-cell;
	vertical-align: top;
    padding: 10px;
	text-align: center;
	width: 20%;
}

.col-c a {
	text-decoration: none;
	color: #f2f2f2;
}

.col-c a:hover {
	text-decoration: none;
	color: #f2df00;
}
	
.col-r {
    display: table-cell;
	vertical-align: top;
    padding: 10px;
	text-align: left;
	width: 40%;
}

.col-r a {
	text-decoration: none;
	color: #f2f2f2;
}

.col-r a:hover {
	text-decoration: none;
	color: #f2df00;
}

.footerlogo {
	background-color: #f2f2f2;
	max-width: 100px;
}

.footerlogo:hover {
	background-color: #f2df00;
}	

@media only screen and (max-width: 420px) {
	.col-l, .col-c, .col-r {
		display: block;
		width: 100%;
		text-align: center;
	}	
}	
@media only screen and (min-width: 1400px) {
	.footerlogo {max-width: 7.32vw;}
}

.MenuOptContainer {
	width:80%; 
	margin: auto; 
	display: table;
}

.MenuOptHead {
	width:80%; 
	margin: auto; 
	display: block; 
	font-variant: small-caps; 
	font-size: 30px; 
	padding: 10px;
	border-bottom: 1px solid #cb0000;
}

.MenuOptMain {
	width:80%; 
	display: table-cell; 
	padding: 10px;
}

.MenuOptSide {
	width:20%; 
	display: table-cell; 
	/*vertical-align: top;*/ 
	padding: 10px;
	line-height: 30px;
	font-weight: 400;
}
.MenuOptSideSmall {
	line-height: 30px;
	font-weight: 400;
}	

.MenuOptHide {
	display: none;
	padding: 10px;
}	

.MenuOptSide a, .MenuOptSideSmall a, .MenuOptHide a {
	color: #063852;
}

.MenuOptSide a:hover, .MenuOptSideSmall a:hover, .MenuOptHide a:hover {
	color: #cb0000;
	text-decoration: none;
}	

@media screen and (max-width: 1040px) {
	.MenuOptMain {width:100%;}
	.MenuOptSide {display: none;}
	.MenuOptHide {display: block;}
}

@media screen and (max-width: 1040px) {
	.MenuOptMain {width:100%;}
	.MenuOptSide {display: none;}
	.MenuOptHide {display: block;}
}

@media (min-width:1040px){
	.hidelarge{display:none/*!important*/;}
}


/*Sub Pages */
#journei-extra {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	background-image: url(../images/background/dbim.jpg);
}

#journei-head {
	position: fixed; 
	top: 0; 
	width: 100%; 
	z-index: 90;
}

#journei-main {
	margin: 45px 4% 0 4%; 
	padding: 10px;
	width: 92%;
	display: inline-block;
	background-color: #f1f1f1;
	opacity: 0.9;
}

.hreftarget:target {
  padding-top: 120px; 
  margin-top: -120px;
}

.MenuOptHead-3 {
	width:80%; 
	margin: auto; 
	display: block; 
	font-variant: small-caps; 
	font-size: 30px; 
	padding: 10px;
	border-bottom: 1px solid #cb0000;
}

.journei-parent {
	width: 100%;
	display: table;
	vertical-align: top;
	padding: 10px;
}

.journei-layout1 {
	width: 70%;
	display: table-cell;
	vertical-align: top;
	padding: 10px;
}

.journei-layout2 {
	width: 50%;
	display: table-cell;
	vertical-align: top;
	padding: 10px;
}

.journei-layout3 {
	width: 33.33%;
	display: table-cell;
	vertical-align: top;
	padding: 10px;
}

.journei-layout4 {
	width: 30%;
	display: table-cell;
	vertical-align: top;
	padding: 10px;
}
.journei-liststyle {line-height:22px; margin-left: 30px;}

.journei-image {
	border-radius: 10px;
	box-shadow: 2px 2px 4px #063852;
	border: 1px solid #063852;
	background-color: #f1f1f1;
}

.journei-logo {
	position: fixed;
	top: 0;
	left: 48%;
	width: 80px;
	height: 80px;
	z-index: 99;
	display: none;
}
.journei-smallfont {
	font-size: 0.9em;
	padding: 5px;
	box-shadow: 1px 1px 5px #063852;
}

.journei-header {
	color: #3a5199;
	padding: 10px;
	clear: both;
}

.multipledays {
	margin: auto;
	color: red;
	font-weight: 600;
	width: 100%;
	padding: 5px 5px 10px 10px;
	text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #f1f1f1, 0 0 20px #f1f1f1, 0 0 25px #f1f1f1, 0 0 30px #f1f1f1, 0 0 35px #f1f1f1;
}

.registerbutton {
	padding: 10px;
	color: #f2f2f2;
	background-color: #cb0000;
	border-radius: 5px;
	font-size: 1.1em;
	font-weight: 600;
}
a.registerbutton:hover {
	text-decoration: none;
	color: #f2f2f2;
	/*text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #f1f1f1, 0 0 20px #f1f1f1, 0 0 25px #f1f1f1, 0 0 30px #f1f1f1, 0 0 35px #f1f1f1;*/
}
@media screen and (min-width: 1400px) {
	#journei-main {
		margin: 2.5vw 4% 0 4%;
	}

	.hreftarget:target {
	  padding-top: 8.8vw; 
	  margin-top: -8.8vw;
	}
	.journei-liststyle {line-height: 1.62vw; margin-left: 2.2vw;}
	.journei-logo {width: 5vw; height: 5vw;}
}
@media screen and (max-width: 660px) {
	#journei-main {
		margin: 45px 0 0 0;
		width: 100%;
	}
	.MenuOptHead-3, .journei-layout1, .journei-layout2, .journei-layout3, .journei-layout4 {
		width: 100%;
		display: block;
	}

}

@media screen and (min-width: 660px) and (max-width: 1400px) {
	.journei-image:hover {transform: scale(1.5); background-color: #f1f1f1;}	
}