/*
	-----------------------------------------------------------------------------------
	----------------------------    ZCode Base-site css    ----------------------------
	-----------------------------------------------------------------------------------
*/
div#popup-container {
	display: none;
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background: #00000020;
}

div#popup-container .popup-window {
	width: 400px;
	position: absolute;
	background: white;
	border: 1px solid black;
	border-radius: 12px;
	padding: 20px;
	left: calc(50% - 200px);
	top: 80px;
	box-shadow: 7px 7px 11px rgba(0,0,0,0.3);
}
div#popup-container .popup-window .close-popup {
	position: absolute;
	top: 5px;
	right: 5px;
	padding: 10px 12px;
	font-family: sans-serif;
}

.main ul {
	list-style: disc;
	margin-left: 63px;
	font-size: 17px;
	line-height: 19px;
	width: 70%;
}

.main .callout ul {
	list-style: disc;
	margin-left: 20px;
	font-size: 17px;
	line-height: 19px;
	width: 80%;
}

.main ul li {
	margin-bottom: 5px;
}

div#popup-container .popup-footnote {
	font-size: 14px;
	line-height: 16px;
}	

.columns {
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-flex-wrap: nowrap;
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
	-webkit-justify-content: flex-start;
	-ms-flex-pack: start;
	justify-content: flex-start;
	-webkit-align-content: stretch;
	-ms-flex-line-pack: stretch;
	align-content: stretch;
	-webkit-align-items: flex-start;
	-ms-flex-align: start;
	align-items: flex-start;
}

.white-box-60 {
	background: rgba(255, 255, 255, 0.60);
	border-radius: 20px;
}
	
.columns .column {
	-webkit-order: 0;
	-ms-flex-order: 0;
	order: 0;
	-webkit-flex: 1 1 auto;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	-webkit-align-self: stretch;
	-ms-flex-item-align: stretch;
	align-self: stretch;
	position:relative;
}

.main .column p {
	width: 100%;
}

.columns .column.col1 { -webkit-flex: 1 1 8.333325%; -ms-flex: 1 1 8.333325%; flex: 1 1 8.333325%; }
.columns .column.col2 { -webkit-flex: 1 1 16.66665%; -ms-flex: 1 1 16.66665%; flex: 1 1 16.66665%; }
.columns .column.col4 { -webkit-flex: 1 1 33.33333%; -ms-flex: 1 1 33.33333%; flex: 1 1 33.33333%; }
.columns .column.col8 { -webkit-flex: 1 1 66.66665%; -ms-flex: 1 1 66.66665%; flex: 1 1 66.66665%; }
.columns .column.col6 { -webkit-flex: 1 1 50%; -ms-flex: 1 1 50%; flex: 1 1 50%; }
.columns .column.col3 { -webkit-flex: 1 1 25%; -ms-flex: 1 1 25%; flex: 1 1 25%; }
.columns .column.col9 { -webkit-flex: 1 1 75%; -ms-flex: 1 1 75%; flex: 1 1 75%; }


.flash {
	text-align: center;
	color: #fff;
	font-size: 17px;
	background: #286595;
	padding: 8px;
}


.input-form .columns .column {
	padding: 0 4px 0 4px;
}
.input-form .columns .column:first-child {
	padding-left: 0;
}
.input-form .columns .column:last-child {
	padding-right: 0;
}

.clear {
	clear: both;
}

img .center {
	vertical-align: middle;
}

.center {
	text-align: center;
}


/*
	-----------------------------------------------------------------------------------
	--------------------------    End ZCode Base-site css    --------------------------
	-----------------------------------------------------------------------------------
*/

@font-face {
	font-family: "proxima-nova-regular";
	src: url("/css/fonts/ProximaNova-Regular.otf") format("opentype");
}

@font-face {
	font-family: "proxima-nova-bold";
	src: url("/css/fonts/ProximaNova-Bold.otf") format("opentype");
}

@font-face {
	font-family: "proxima-nova";
	src: url("/css/fonts/ProximaNova-Regular.otf") format("opentype");
	font-weight: normal;
}
@font-face {
	font-family: "proxima-nova";
	src: url("/css/fonts/ProximaNova-Bold.otf") format("opentype");
	font-weight: bold;
}

body {
	font-family: "proxima-nova", arial, helvetica, sans-serif;
	line-height: 1.629;

	color: #333;
	font-size: 14px;
}

.main {
	padding: 20px 0;
	position: relative;
}

.main .corner {
	background-image: url(/img/corner2.png), url(/img/coffee3.jpg);
	background-repeat: no-repeat;
	background-position: top right;
	background-size: contain, cover;
	width: 26vw;
	height: 31.9vw;
	position: absolute;
	top: 0;
	right: 0;
	z-index: -100;
}

body h1 {
	font-size: 27px;
	font-weight: bold;
}

.header {
	position: relative;
}

.header .header-bar {
	background: #296595;
	color: white;
	padding: 5px 10px;
	align-items: center;
}

.header .lang-selector-col.column, .column.no-stretch {
	-webkit-align-self: initial;
	-ms-flex-item-align: initial;
	align-self: initial;
	position: initial;
}
.header ul.lang-selector {
	text-align: right;
}
.header ul.lang-selector li {
	display: inline-block;
}
.header ul.lang-selector li a {
	color: white;
	text-decoration: none;
	padding: 4px 10px;
}
.header ul.lang-selector li a:hover {
	text-decoration: underline;
}

.header .sg-logo {
	background-image: url(/img/stallergenesgreer.png);
	background-repeat: no-repeat;
	background-size: contain;
	width: 400px;
	height: 44px;
	margin: 20px 30px;
}

.right {
	text-align: right;
}
.page-footer {
	border-top: 2px solid #296595;
	min-height: 80px;
	margin-bottom: 0px;
	padding: 20px;
}

.page-footer .inner {
	justify-content: flex-end;
	align-items: flex-end;
	flex-wrap: wrap;
}

.page-footer .sg-logo {
	background-image: url(/img/stallergenesgreer.png);
	background-repeat: no-repeat;
	background-size: contain;
	width: 270px;
	height: 30px;
	display: inline-block;
}

.page-footer .column {
	padding-bottom: 21px;
}

.page-footer h3 {
	font-size: 20px;
	color: #00000066;
	font-weight: bold;
	line-height: 24px;
}

.page-footer ul li {
	line-height: 17px;
}

.page-footer ul li a {
	color: black;
	text-decoration: none;
	font-size: 14px;
	font-weight: 400;
}

.splash {
	background-image: url(/img/splash.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	width: 100%;
	height: 53vw;
	display: inline-block;
	background-position: center;
}

.splash form.entry {
	width: 54%;
	/* border: 1px solid black; */
	margin: 10vw 0 0 4vw;
	color: #286595;
	text-align: center;
}

.splash form.entry div.intro {
	font-size: 20px;
	font-weight: bold;
	line-height: 22px;
}

.splash form.entry div.slogan {
	font-style: italic;
	font-family: serif;
	font-size: 34px;
	font-weight: bold;
	text-shadow: 5px 5px 6px white;
	letter-spacing: -1;
	margin: 4px;
}

.splash form.entry input[type="password"] {
	font-size: 18px;
	padding: 3px;
	margin: 0 0 0 5px;
}

.splash form.entry input[type="submit"] {
	background: #286595;
	color: white;
	border: none;
	border-radius: 6px;
	padding: 4px 15px 7px;
}

.splash form.entry .form-row {
	margin: 10px 0;
	color: black;
	font-size: 17px;
}

.tiles {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	padding: 0 40px;
}

.tile-listing {
    display: inline-block;
    text-align: center;
    /* width: 33.3%; */
    width: 250px;
    /* margin: 20px 10px; */
    height: 250px;
    flex: 0 0 auto;
    background-image: url(/img/ResourceFrameBlue.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top left;
    padding: 27px 27px 30px;
	margin: 15px;
}

.tile-listing.green {
	background-image: url(/img/ResourceFrameGreen.png);

}

.tile-listing.orange {
	background-image: url(/img/ResourceFrameOrange.png);

}

.tile-listing .tile-description {
    color: black;
    line-height: 16px;
    font-size: 14px;
    padding: 5px 0;
    flex: 1 1 auto;
}

.tile-listing .inner {
	display: flex;
	flex-direction: column;
    height: 100%;
}

.tile-listing a {
	color: #000000cc;
	font-weight: 500;
	text-decoration: none;
}

.tile-listing .inner a {
	color: #ffffffcc;
}

.tile-listing a:hover {
	text-decoration: underline;
}

/* .bkg.blue { background-color: #296595;}
.bkg.cyan { background-color: #64b5cf; color: black;}
.bkg.orange { background-color: #e47e4c; color: black;}
.bkg.green { background-color: #c1d06a; color: black;} */

.tile-header {
	font-size: 14px;
	font-weight: 500;
    line-height: 16px;
    padding: 5px;
	color: black;
	background-color: #b7e1fd;
	border-radius: 15px;
}

.tile-header.orange {
	color: black;
	background-color: #FFB549;
}

.tile-header.green {
	color: black;
	background-color: #66d898;
}
.tile-new {
	font-size: 16px;
	font-weight: 700;
	line-height: 17px;
}

body div.main .button {
	background-color: white;
/*	border: 1px solid #286595; */
	border: 1px solid black;
	padding: 0px 8px;
/*	color: #286595; */
	color: black;
	border-radius: 5px;
	margin: 5px 5px;
	display: inline-block;
}
body div.main .button.green {
	color: black;
	background-color: #66d898;
}
body div.main .button.orange {
	color: black;
	background-color: #FFB549;
}

.tile-listing .icon {
    background-image: url(/img/icons/page-black.svg);
    width: 100%;
    height: 40px;
    background-size: 40px;
    background-repeat: no-repeat;
    margin: 0px auto 6px;
    flex: 1 1 auto;
    background-position: bottom center;
}

.tile-listing .icon.calculator { background-image: url(/img/icons/calculator-black.svg);}
.tile-listing .icon.form { background-image: url(/img/icons/form-black.svg);}
.tile-listing .icon.pdf { background-image: url(/img/icons/pdf-black.svg);}

.instructions {
    margin: 0 27% 20px 10px;
    text-align: center;
}

.instructions h2 {
    color: #296595;
    font-size: 20px;
    line-height: 22px;
    margin-bottom: 5px;
}

.instructions .details p {
    margin: 0;
    line-height: 18px;
}

/*  -----------------------------------------------------------------------------------

			 d888   .d8888b.   .d8888b.      d8888                    
			d8888  d88P  Y88b d88P  Y88b    d8P888                    
			  888  888    888        888   d8P 888                    
			  888  888    888      .d88P  d8P  888  88888b.  888  888 
			  888  888    888  .od888P"  d88   888  888 "88b `Y8bd8P' 
			  888  888    888 d88P"      8888888888 888  888   X88K   
			  888  Y88b  d88P 888"             888  888 d88P .d8""8b. 
			8888888 "Y8888P"  888888888        888  88888P"  888  888 
													888               
													888               
													888               
																	
-----------------------------------------------------------------------------------  */



@media only screen and (max-width: 1024px) {
	

}

/*  -----------------------------------------------------------------------------------

					 .d8888b.      d8888   .d8888b.                    
					d88P  Y88b    d8P888  d88P  Y88b                   
					Y88b. d88P   d8P 888  888    888                   
					 "Y88888"   d8P  888  888    888 88888b.  888  888 
					.d8P""Y8b. d88   888  888    888 888 "88b `Y8bd8P' 
					888    888 8888888888 888    888 888  888   X88K   
					Y88b  d88P       888  Y88b  d88P 888 d88P .d8""8b. 
					 "Y8888P"        888   "Y8888P"  88888P"  888  888 
													 888               
													 888               
													 888               
																														
 -----------------------------------------------------------------------------------  */


@media only screen and (max-width: 840px) {

	.splash {
		background-image: url(/img/splash.jpg);
		background-repeat: no-repeat;
		background-size: contain;
		width: 100%;
		height: auto;
		display: inline-block;
		background-position: center;
		background-position: top;
	}

	.splash form.entry {
		width: auto;
		margin: 58vw 2vw 0;
		color: #286595;
		text-align: center;
	}


}

/*  -----------------------------------------------------------------------------------

					 .d8888b.      d8888   .d8888b.                    
					d88P  Y88b    d8P888  d88P  Y88b                   
					888          d8P 888  888    888                   
					888d888b.   d8P  888  888    888 88888b.  888  888 
					888P "Y88b d88   888  888    888 888 "88b `Y8bd8P' 
					888    888 8888888888 888    888 888  888   X88K   
					Y88b  d88P       888  Y88b  d88P 888 d88P .d8""8b. 
					 "Y8888P"        888   "Y8888P"  88888P"  888  888 
													888               
													888               
													888               
                                                   
 -----------------------------------------------------------------------------------  */


@media only screen and (max-width: 640px) {
	
}	


/*  -----------------------------------------------------------------------------------

						d8888   .d8888b.   .d8888b.                    
					   d8P888  d88P  Y88b d88P  Y88b                   
					  d8P 888         888 888    888                   
					 d8P  888       .d88P 888    888 88888b.  888  888 
					d88   888   .od888P"  888    888 888 "88b `Y8bd8P' 
					8888888888 d88P"      888    888 888  888   X88K   
					      888  888"       Y88b  d88P 888 d88P .d8""8b. 
					      888  888888888   "Y8888P"  88888P"  888  888 
													 888               
													 888               
													 888    

 -----------------------------------------------------------------------------------  */

@media only screen and (max-width: 420px) {

}