/*
	-----------------------------------------------------------------------------------
	----------------------------    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: 16px;
    line-height: 19px;
    width: 70%;
}

.main .callout ul {
    list-style: disc;
    margin-left: 20px;
    font-size: 16px;
    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: #900;
    font-size: 17px;
}


.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;
}

.tm {
	font-size: 150%;
    line-height: 10px;
    vertical-align: sub;
}

.header  {
	position: relative;
}

.header .lang-selector {
	position: absolute;
	right: 10px;
	top: 10px;
	width: 200px;
	text-align: right;
}

div#popup-container .popup-window {
	width: 480px;
	position: absolute;
 /*   background: #cc0000e3; */
 /*   background: #64b5cf; */
	border: none;
	background: #296595e3; 
	border-radius: 0 50px;
	padding: 40px;
	left: calc(50% - 250px);
	top: 80px;
	box-shadow: 7px 7px 11px rgba(0,0,0,0.3);
	color: white;
	font-size: 24px;
	line-height: 26px;
}
div#popup-container .popup-window p, div#popup-container .popup-window label{
	font-size:18px;
	line-height:20px;
	padding-top:5px;
}

.popup-window .form-row input[type="text"], .popup-window .form-row input[type="email"], .popup-window .form-row input[type="submit"] {
	width: 100%;
}

.popup-window .form-row input[type="submit"] {
	width: 50%;
}

.popup-window .form-row label {
	line-height: 26px;
	color: white;
	text-transform: none;
	vertical-align: baseline;
}

.form-row input[type="checkbox"] {
	vertical-align: inherit;
	width: 19px;
	height: 19px;
	margin-right: 6px;
	margin-top: 2px;
}

.popup-window a {
	color: #f5f4ff;
	text-decoration: none;
}

.popup-window a:hover {
	text-decoration: underline;
}

.header .lang-selector ul li {
	display: inline-block;
	padding: 0px 10px;
	margin: 10px 0px;
	border-right: 2px solid rgb(166,163,163);
}

.header .lang-selector ul li:last-child {
	border-right: none;
}

.header .lang-selector ul li a {
	font-weight: 700;
	color: rgb(166,163,163);
	font-size: 14px;
	text-transform: capitalize;
	text-decoration: none;
}

.header .header-image {
	background-image: url(/img/oralair.png);
	background-position: 15px 12px;
	background-repeat: no-repeat;
	background-size: 260px;
	min-height: 121px;
}

.topbar {
	background-color: #296595;
	min-height: 2.7em;
	height: 2.7em;
	top: 6.2em;
	border: 0;
	margin-bottom: 0px;
}

.topbar .nav .menu-button {
	display: none;
}

.topbar .nav li {
	display: inline-block;
	text-align: center;
	padding: 10px 25px;
}

.topbar .nav li a {
	text-transform: uppercase;
	color: white;
	text-decoration: none;
	font-size: 14px;
	font-weight: 400;
}

.banner-image {
	height: 160px;
	width: calc(100% - 40px);
	background-size: cover;
	background-repeat: no-repeat;
	margin: 0 auto;
	border-radius: 0 0 30px 310px;
	background-position: center;
}

.page-footer {
/*	background-color: #c1d06a;*/
	border-top: 2px solid #098B41;
	min-height: 80px;
	height: 2.438em;
	top: 6.2em;
	margin-bottom: 0px;
	padding: 20px;
}

.page-footer .inner {
	position: relative;
}

.page-footer .sg-logo {
	background-image: url(/img/stallergenesgreer.png);
	background-repeat: no-repeat;
	background-size: contain;
	width: 240px;
	height: 60px;
	right: 10px;
	position: absolute;
	top: 10px;
}

.page-footer ul li {
	display: inline-block;
	text-align: center;
	border-right: 1px solid rgb(0 0 0);
	padding: 0 10px;
	line-height: 14px;
	color: black;
}

.page-footer ul li:last-child {
	border-right: none;
}

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

.front-page-section {
	padding: 40px;
}
.front-page-section-image {
	/* background-image: url(/img/family.jpg); */
}

.front-page-section .section-image {
	border-radius: 240px 30px 30px 30px;
	padding: 30px;
	box-shadow: 12px 14px 20px #0002;
	background-size: cover;
}

.front-page-section .columns .column:first-child {
	padding-right: 20px;
}

.front-page-section .columns .column:last-child {
	padding: 0 100px;
}

.front-page-section .columns .column {
	align-self: flex-start;
	flex: 1;
}

.front-page-section form .form-row {
	margin: 0 0 50px 0;
}

.front-page-section.video {
	text-align: center;
}

.front-page-section.video video {
	width: 50%;
	background: #eee;
}

.front-page-section img {
	color: #727271;
	max-height: 400px;
	font-weight: 700;
	line-height: 24px;
}

.main .front-page-section h1 {
	background: #cc0000c4;
	padding: 27px 79px;
	border-radius: 0 130px;
	color: white;
	font-size: 28px;
	line-height: 35px;
	font-weight: 400;
}

.main .front-page-section h2 {
	color: #296595;
	font-size: 22px;
	font-weight: 700;
	background-image: none;
	padding: 0;
	margin-bottom: 10px;
	line-height: 22px;
}

.front-page-section label {
	color: #727271;
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
}

.main {
	padding: 20px;
}

.main h1 {
	font-size: 28px;
	font-weight: bolder;
	color: #296595;
/*	color: #64b5cf;*/
/*	letter-spacing: -1;*/
	line-height: 24px;
	margin-top: 24px;
/*	margin-left: 40px; */
}

.main h2 {
	font-size: 20px;
	font-weight: bold;
	padding-left: 50px;
	background-image: url(img/greenleaf-bullet.png);
	background-repeat: no-repeat;
	background-size: 52px;
	background-position: 0 -6px;
	margin-top: 30px;
}

.main .nobullet h1 {
	margin-left: 40px;
}

.main .nobullet h2 {
	background-image: none;
}
.main h3 {
	color: #078c40;
	font-size: 19px;
	padding: 0 50px;
	font-weight: bold;
}

.main p {
	font-size: 16px;
	padding-left: 50px;
	line-height: 18px;
	margin: 13px 0;
	width: 70%;
}

/* .main img {
	padding-left: 30px;
	width: 70%;
} */


.columns .column.first {
	flex: none;
	width: 250px;
}

.columns .column.h1 {
	flex: none;
	width: 200px;
}

.columns .column.h1 .h1-box {
	width: 200px;
	height: 100px;
	background-color: #296595;
	font-size: 24px;
	line-height: 30px;
	border-radius: 30px 0 30px 0;
	padding-left: 10px;
	color: white;
	text-transform: uppercase;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-flex-wrap: nowrap;
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-align-content: center;
	-ms-flex-line-pack: center;
	align-content: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}

.columns .column.h1 .h1-box .inner {
	-webkit-order: 0;
	-ms-flex-order: 0;
	order: 0;
	-webkit-flex: 0 0 auto;
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	-webkit-align-self: center;
	-ms-flex-item-align: center;
	align-self: center;
}

.contact-us-form {
	padding: 0px 20px;
}

.contact-us-form textarea {
    width: 100%;
    max-width: 450px;
    height: 100px;
}

form label {
    padding: 5px 5px 5px 29px;
    display: block;
    line-height: 14px;
    text-transform: uppercase;
    color: #434343;
    text-indent: -29px;
}

form label.for-checkbox {
    vertical-align: sub;
}

form .form-row {
	margin-bottom: 10px;
}

form input, form select {
	color: #296595;
	font-size: 18px;
	padding: 6px 16px;
	border-width: 1px;
	border-style: solid;
	border-color: #e0e0e0;
	background: #efefef;
}

form input:required {
	/*background: #eedcdc;*/
}

form select {
	padding: 5px 10px;
}

input[type="submit"], button, a.button {
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:linear-gradient(to bottom, #efefef 5%, #cfcfcf 100%);
	border-radius:8px;
	border:1px solid #dcdcdc;
	cursor:pointer;
	padding:6px 24px;
	text-decoration:none;
}

input[type="submit"]:hover, button:hover, a.button:hover {
	text-shadow:0px 2px 0px #ffffff99;
/*
	background:linear-gradient(to bottom, #cfcfcf 5%, #efefef 100%);
	background-color:#f6f6f6;
*/
}


div#popup-container .popup-window.subscribe {
	width: 580px;
	left: calc(50% - 250px);
}

.callout {
    float: right;
    background: #296595;
    color: white;
    border-radius: 3px 60px;
    padding: 30px 30px;
    line-height: 20px;
    font-size: 16px;
    margin-right: 20px;
	margin-top: 14px;
	margin-left: 10px;
	max-width: 30%;
}

.callout.left-large {
	float: left;
	width: 70%;
	max-width: 70%;
}

.column .callout {
	max-width: none;
}

.column .callout.bottom {
	bottom: 30px;
    position: absolute;
}

.float-right {
    float: right;
}
.main img.framed {
    border: 1px solid rgba(0,0,128,0.3);
}

.main p.image-footnote {
    font-size: 12px;
    line-height: 13px;
    width: auto;
}

.main p.footnote {
    font-size: 12px;
    line-height: 13px;
    width: auto;
}

.pills .column {
	text-align: center;
	padding: 10px 0 10px 0;
}
.pills img.pill {
    width: 33px;
}

.patient-safety-img {
	max-width: 608px;
	padding-left: 40px;
}

.bkg.beige {
	background-color: #ffebb0;
	line-height: 24px;
}

.bkg.light-green {
	background-color: #d8e685;
}

.border.green {
	border-color: green;
	border-width: 3px;
	border-style: solid;
}

.border.green.coverage-table {
	padding: 20px;
	margin-top: 30px;
    margin-left: 20px;
}

.border.green.coverage-table .columns {
	margin: 10px 0;
}

.border.green.coverage-table img {
    width: 22px;
    padding: 4px 0 0 0;
}

.pct40 {
	width: 40%;
}

/*
	-----------------------------------------------------------------------------------
	----------------------------    Tiled assets css    ----------------------------
	-----------------------------------------------------------------------------------
*/

	.tiles {
		display: flex;
		flex-flow: row wrap;
		justify-content: center;
		align-items: flex-start;
		align-content: flex-start;
	}

	.tiles .tile-listing {
		display: flex;
		flex-direction: column;
		flex-basis: 25%;
		padding: 3%;
		text-align: center;
		height: 360px;
	}

	.tile-listing:nth-of-type(2n+1) {
		background: #f1f1f1;
		color: #4a4a4a;
	}

/*	.tile-listing:nth-of-type(2n+2) {
		background: #64b5cf;
		color: white;
	} */

	.tile-image img {
		max-height: 200px;
	}
	.tile-video video {
		width: 280px;
	}

	.tile-header h4 {
		font-size: 48px;
		font-weight: bold;
		color: white;
		margin: 0;
		line-height:50px;
	}

	.tile-text {
		padding-top: 20px;
	}
	.tile-text p {
		font-size: 24px;
		font-weight: 500;
		color: white;
		margin: 0;
		width: 100%;
		padding: 0;
		line-height: 26px;
	}
	
	.tile-button {
		padding: 20px;
	}

	.tiles.hcp .tile-listing {
		flex: none;
		width: 33.3%;
		background: none;
		padding: 9px;
	}

	.tiles.hcp .tile-listing .inner {
		background: #296595;
		width: 100%;
		height: 100%;
		border-radius: 0px 60px;
		padding: 20px;
		display: flex;
		flex-direction: column;
	}
	
	.grow { flex: 1 1 auto;}
	.grow2 { flex: 2 1 auto;}
	.grow3 { flex: 3 1 auto;}

	.tiles.hcp .tile-listing .inner .tile-image {
		background-position: center center;
		background-size: contain;
		background-repeat: no-repeat;
	}
	.tiles.hcp .tile-listing img {
		max-width: 50%;
	}		

/*
	-----------------------------------------------------------------------------------
	----------------------------    End Tiled Assets css    ---------------------------
	-----------------------------------------------------------------------------------
*/


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

			 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) {
	
	/* Tiled Assets */
		.tile_listing:nth-of-type(4n+1) {
			background: #f2f9fe;;
			color: #4a4a4a;
		}

		.tile_listing:nth-of-type(4n+2) {
			background: #1A577E;
			color: white;
			}

		.tile_listing:nth-of-type(4n+3) {
			background: #1A577E;
			color: white;
		}
		
		.tile_listing:nth-of-type(4n+4) {
			background: #f2f9fe;;
			color: #4a4a4a;
		}	
	/* End Tiled Assets */
	.front-page-section.video video {
		width: 70%;
	}

	.front-page-section .columns .column:last-child {
		padding: 0 50px;
	}

	.topbar .nav li {
		padding: 10px 12px;
	}

	.tiles.hcp .tile-listing {
		width: 50%;
	}
	.columns .column.first {
		flex: none;
		width: 150px;
	}
	
}

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

					 .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) {
	.x-phone {
/*	background-size: 0 0; */
	display: none;
}

	.x-phone-bkg {
		background-size: 0 0 !important; 
		/*	display: none; */
	}

	.columns {
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
		align-items: stretch;
	}

	.columns.efficacy {
		-webkit-flex-direction: column-reverse;
		-ms-flex-direction: column-reverse;
		flex-direction: column-reverse;
		align-items: stretch;
	}

	.columns.efficacy .callout {
		margin: 0 8px 20px 8px;
	}

	.columns.pills {
		-webkit-flex-direction: row;
		-ms-flex-direction: row;
		flex-direction: row;
		align-items: stretch;
	}

	.front-page-section.video video {
		width: 90%;
	}

	.callout {
		padding: 20px 40px;
		max-width: 36%;
	}

	.columns .column.col4 {
		-webkit-flex: none;
		-ms-flex: none;
		flex: none;
	}
	.columns .column {
		-webkit-order: 0;
		-ms-flex-order: 0;
		order: 0;
		-webkit-flex:  none;
		-ms-flex:  none;
		flex:  none;
		-webkit-align-self:  none;
		-ms-flex-item-align:  none;
		align-self:  none;
	}

	.nav {
		position: relative;
	}
	
	.topbar .nav .menu-button {
		display: inline;
		float: right;
		color: white;
		padding: 8px 10px;
	}

	.topbar .nav ul.menu {
		display: none;
		background: #296595;
		width: unset;
		position: absolute;
		right: 20px;
		top: 39px;
		box-shadow: 4px 4px 12px #00000060;
		z-index: 30;
	}

	.topbar .nav ul.menu li {
		display: block;
	}


	.border.green.coverage-table {
		margin-top: 20px;
		margin-left: 0px;
	}

	.border.green.coverage-table .columns {
		-webkit-flex-direction: row;
		-ms-flex-direction: row;
		flex-direction: row;
		align-items: stretch;
	}


}

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

					 .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) {
	.x-phone {
		background-image: none;
	}

	div#popup-container .popup-window {
		width: 420px;
		left: calc(50% - 210px);
	}

	/* Tiled Assets */

		.tiles.hcp .tile-listing {
			width: 100%;
		}

		.tile_listing:nth-of-type(2n+1) {
			background: #f2f9fe;;
			color: #4a4a4a;
		}

		.tile_listing:nth-of-type(2n+2) {
			background: #1A577E;
			color: white;
			}

		.tile_listing {
			display: block;
			padding: 40px;
			text-align: center;
		}
		.tile_text {
			padding: 10px 0 0 0;
		}
	/* End Tiled Assets */

	.front-page-section {
		padding: 20px 0;
	}
	
	.main .front-page-section h1 {
		padding: 21px 59px;
		border-radius: 0 100px;
		font-size: 34px;
		line-height: 34px;
	}
	.front-page-section .columns .column:last-child {
		padding: 0 12px 0 83px;
	}
	.front-page-section form .form-row {
		margin: 0 0 20px 0;
	}

	.front-page-section .columns .column:first-child {
		padding-right: 0px;
	}

	
}	


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

						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) {
	.main .front-page-section h1 {
		padding: 18px 42px;
		border-radius: 0 70px;
		font-size: 28px;
		line-height: 30px;
	}

	.front-page-section .columns .column:last-child {
		padding: 0 12px;
	}

	.main h1 {
		font-size: 21px;
		line-height: 24px;
		margin-top: 8px;
	}

	.header .lang-selector {
		right: 0px;
		top: 0px;
	}
	
	.main p {
		font-size: 16px;
		padding: 0 30px;
		margin: 13px 0;
		width: 100%;
	}
	
	.callout {
		float: none;
		color: white;
		border-radius: 3px 60px;
		padding: 20px 40px;
		line-height: 20px;
		max-width: inherit;
	}

}