* {
	margin:0;
	padding:0;
	}

html {
	height: 100%;
	min-height: 100%;
	}

body {
	min-height: 100%;
	font-family: Verdana, Geneva, sans-serif;
	color:#101010;
	}

body {
	background-image: url('../images/ProtectingTinyTeeth_backgnd.jpg');
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-position: center center;
	background-color: #ffffff;
	background-repeat: no-repeat;
	background-attachment: fixed;
	}

a, img {
	border: none;
	outline: none;
	}
	
a {
	color: #ec008c;
	}
	
#menu ul {
	display: inline-block;
	width: 100%;
	padding: 0;
	margin: 0;
	list-style-type: none;
	text-align: center;
	}

#menu a {
	float: left;
	width: 7em;
	text-decoration: none;
	padding: 0.3em 0.8em;
	border: 1px solid #ed008c;
	border-radius: 5px;
	font-size: 1.3em;
	white-space: nowrap;
}

#menu a:hover {
	color: #80C342;
	}
	
#menu li {
	display: inline-block;
	}
	
p.survey {
	border: 1px solid #ed008c;
	margin: 15px auto 0;
	padding: 10px;
	border-radius: 5px;
	width: 50%;
	font-weight: 600;
	background: #ffffff;
	font-size: 1em;
	}
	
p.survey a {
	text-decoration: none;
	}

#header {
	position: fixed;
	top: 0px;
	width: 100%;
	background: #ffffff;
	z-index: 10;
	}
	
.headermid {
	text-align: center;
	}

#extras {
	text-align: center;
	margin-top: 20px;
	}
	
#extras .org {
	display: none;
	}

img.iconcenter.svg {
	width:15em;
	margin-bottom: 1em
	}
	
img.iconleft {
	float: left;
	padding: 10px 0px 0px 10px;
	}

img.iconright {
	float: right;
	padding: 10px 10px 0px 0px;
	}
	
img.iconleft, img.iconright {
	display: inline-block;
	max-width: 20%;
	max-height: 100%;
	vertical-align: middle;
	}
	
img.iconcenter {
	display: list-item;
    margin: 0 auto;
	}
	
img.banner {
	display: inline-block;
	max-height: 100%;
	vertical-align: middle;
	max-width: 40%;
	}

img.footer, img.bpp {
	display: inline-block;
	max-height: 100%;
	max-width: 60%;
	}
	
img.bpp {
	float: right;
	}
	
img.tooth {
	max-width: 70%;
	border: 1px solid #ec008c;
	background: #fff;
	border-radius: 8px;
	}

#container {
	width: 60%;
	height: 60%;
	margin: auto;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	}

#faqcontainer {
	width: 60%;
	height: 60%;
	margin: auto;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	text-align: center;
	}

#content {
	border: 10px solid #ed008c;
	border-radius: 15px;
	}

#faqcontent {
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 50%;
	height: 0;
	margin: 0 auto;
	border: 10px solid #ed008c;
	border-radius: 15px;
	position: relative;
	overflow: auto;
	background: rgba(256,256,256,0.9);
	}

.player {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	margin: 0 auto;
	}

.player a {
	display: block;
	padding: 20px;
	text-align: right;
	}
	
.player iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}

h1 {
	font-size: 4em;
	font-family: 'Gochi Hand', cursive;
	margin-top: 0.3em;
	}

h2 {
	font-size: 2em;
	font-family: 'Gochi Hand', cursive;
	margin-top: 0.1em;
	font-weight: lighter;
	}
	
.org h2 {
	margin:0.5em 0 0.5em;
	font-size: 2em;
	color:#7fc241;
	}

#faqcontent h2 {
	font-size: 3em;
	margin: 0.5em 0 0.5em 0;
	text-align: center;
	}
	
#faqcontent h2.heading {
	margin-top: 20em;
	padding-top: 1em;
}
	
#contact-area h2 {
	font-size: 3em;
	margin: 0.5em 0 0 0;
	text-align: right;
	}

#faqs dt {
	font-size:1.5em;
	color: #9d9d9d;
	cursor: pointer;
	height: 50px;
	line-height: 25px;
	margin: -23px 0 15px 15px;
	padding: 26px 20px 0 70px;
	}
	
#faqs dd {
	font-size: 1em;
	margin: 0 0 30px 0px;
	line-height: 1.2em;
	padding: 0px 20px 0px 20px;
	text-align: left
	}
	
#faqs dd.center {
	text-align: center;
	}
	
#faqs dt {
	background: url('/images/expand-icon.png') no-repeat left;
	}
	
#faqs .expanded {
	background: url('/images/expanded-icon.png') no-repeat left;
	}
	
#faqs ul {
	text-align: left;
	padding-left: 50px;
	padding-top: 10px;
	}
	
#footer {
    position: fixed;
    height: 10%;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin-bottom: 0px;
    z-index: -10;
	}

#footer p {
	padding-top: 20px;
	}

#bpp {
	position: fixed;
    height: 7%;
    bottom: 0px;
    right: 0px;
    margin-bottom: 0px;
	}
	
.player .outro-wrapper.in {
	background: rgba(0,0,0,0) !important;
	}
	
/********************************************************************NEW NAVIGATION MARCH 2020*/

nav[role="full-horizontal"] {
  width: 100%;
  display: inline-block;
  }
nav[role="full-horizontal"] ul {
  width: 100%;
  list-style: none;
  }
nav[role="full-horizontal"] ul > li {
  position: relative;
  float: left;
  padding: .5em 1.5em;
  margin: .5em .5em;
  text-transform: uppercase;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.8);
  text-align: center;
  border-radius: .75em;
  transition-duration: .3s;
  transition-timing-function: ease-in-out;
  transition-property: background, color, padding, border-radius;
  border: 2px solid #ed008c;
  border-radius: 5px;
  }
nav[role="full-horizontal"] ul > li:after {
  position: absolute;
  z-index: -1;
  content: "";
  right: 0;
  border-radius: 50%;
  box-shadow: 1em 1em 0 2em rgba(255, 255, 255, 0.5);
  }
nav[role="full-horizontal"] ul > li:last-child:after {
  box-shadow: none;
  }
nav[role="full-horizontal"] ul > li:hover {
  background-color: #ed008c;
  padding-left: 3em;
  }
nav[role="full-horizontal"] ul > li:hover > a {
  color: #fff;
  }
nav[role="full-horizontal"] ul > li > a {
  color: #ed008c;
  text-decoration: none;
  font-size: 1.4em;
  transition: color .3s ease-in-out;
  }

/*************************************************************************** small screens ----------- */

@media screen and (max-width: 44em) {
	body {
	    background-image: url('/images/ProtectingTinyTeeth_backgnd_port.jpg');
		}
	#header {
		height: auto;
		}
	.headermid {
		width: 50%;
		margin: 0 auto;
		}
	img.banner {
		max-width: 80%;
		padding-top: 1em;
		}
	img.iconleft, img.iconright {
		display: none;
		}
	#extras .org {
		display: block;
		margin: 2em 0;
		text-align: center;
		background: rgba(255,255,255,0.7);
		padding: 0.5em;
		}
	img.footer, img.bpp {
		max-height: 70%;
		}
	nav[role="full-horizontal"] ul {
    	padding: 0;
		}
	nav[role="full-horizontal"] ul > li {
    	width: 100%;
		padding: .45em 0;
		margin: 0 0 .55em 0;
		}
	nav[role="full-horizontal"] ul > li:after {
    	box-shadow: none;
  		}
  	nav[role="full-horizontal"] ul > li:hover {
	  	padding-left: 1em;
	  	}
  	#faqs dt {
	    font-size: 1em;
	    line-height: 20px;
	    margin: -20px 7px 0px 0px;
	    padding-top: 27px;
		}
	#faqcontent h2 {
    	font-size: 2em;
    	}
}

@media screen and (max-width: 44em) and (orientation : portrait) {
	#container {
		width: 90%;
		}
	#faqcontainer {
		width: 90%;
		}
	#faqcontent {
		padding-bottom: 100%;
		}
	.headermid {
		width: 80%;
		}
}

/*************************************************************************** iPad (landscape) --------- */

@media only screen and (max-width : 1140px) and (orientation : landscape) {
	#faqcontent h2 {
		font-size: 2em;
		}
	#faqs dt {
		font-size:1.1em;
		}
	#faqcontent h2 {
		margin: 0.7em 0 0.7em 0;
		}
	#menu a {
		width: 6em; padding: 0.3em 0em; font-size: 1em;
		}
	#thanks h1 {
		font-size: 2.5em;
		}
}

/*************************************************************************** iPad (portrait) ----------- */

@media screen and (max-width : 1140px) and (min-width : 44em) and (orientation : portrait) {
	body {
		background-image: url('/images/ProtectingTinyTeeth_backgnd_port.jpg');
		}
	#container {
		width: 70%;
		height: 70%;
		}
	#faqcontainer {
		height: 70%;
		width: 70%
		}
	#faqcontent {
		padding-bottom: 85%;
		}
	#faqcontent h2 {
		font-size: 2em;
		}
	#faqs dt {
		font-size:1em;
		line-height: 20px;
		margin: -20px 7px 0px 0px;
		padding-top: 27px;
		}
	#faqs dd {
		padding: 0;
		margin-left: 0;
		}	
	#menu a {
		width: 6em;
		padding: 0.3em 0em;
		font-size: 0.9em;
		}
	#thanks h1 {
		font-size: 2em;
		}
}

/***************************************************************************  BREAKPOINT ----------- */

@media screen and (max-width : 1780px) and (orientation : landscape)  {
	#container {
		width: 70%;
		}
	#faqcontainer {
		width: 70%;
		}
	#faqcontent {
		padding-bottom: 60%;
		}
}

@media screen and (max-width : 1290px)  {
	#faqcontent {
		padding-bottom: 90%;
		}
}