@import url('https://fonts.googleapis.com/css2?family=Varela+Round&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400;1,700&family=Varela+Round&display=swap');

/* Default media */
body {
	color: #000000;
	font-size: 150%;
	line-height: 1.6em;
	font-family: 'Roboto', sans-serif;
	text-align: left;
	margin: 0;
	padding: 0;
	background: #FFFFFF;
}

a, a:link, a:visited, a:active { color: #1B525A; text-decoration: underline; }

a:hover { color: #000000; text-decoration: underline; }

img { border: 0 none; }

h1, h2, h3, h4 { color: #000000; line-height: 1.2em; font-family: 'Varela Round', sans-serif; font-weight: 400; margin-top: 3.5rem; margin-bottom: 1rem; }

h1 { font-size: 3em; }
h2 { font-size: 2.3em; }
h3 { font-size: 1.7em; margin-top: 2.2rem; }
h4 { font-size: 1.3em; margin-top: 1em;}
h5 { font-size: .8em; font-weight: 400; }

h4, h5, h6 { line-height: 1.4em; }

h2.intro { margin-top: .3em; }

#about-us h4 { margin-top: 1.3em; margin-bottom: 0; }
#about-us p { margin-top: .6em; }

hr { border: 1px solid #000000; margin-top: 2.5em; margin-bottom: 0em;  }

ul, ol { padding-left: 1.1em; }
ul li, ol li { padding-bottom: 0.5em; }

sup { vertical-align: top; font-size: .6em; position: relative; top: -0.3em; }

blockquote { border-left: 5px solid #88DAD6; color: #1B525A; font-size: 1.4em; line-height: 3rem; padding-left: 20px; margin: 40px 10% 80px 10%; }

.intro p { font-size: 1.3em; line-height: 1.95em; margin-top: 0; width: 60%; }

.photo-w-caption { float: right; width: 35%; padding: 1% 3%; }
.photo-w-caption h6 { margin-top: 0; }
.photo-w-caption img { width: 100%; }
.photo-w-caption.fordeskptop { display: block; }
.photo-w-caption.formobile { display: none; }

.skip {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  background: white;
  padding: 0 10px;
}

.skip:focus {
  position: static;
  width: auto;
  height: auto;
}

/* Layout */

.container {
	width: 96%;
	margin: 0;
	padding: 0 2%;
	display: block;
	clear: both;
}

.contentcol {
	width: 100%;
	margin: 0;
	padding: 0 0 40px 0;
	display: inline-block;
}

.subsec { padding: 0; }
.subsec hr { margin-bottom: 0;  }

.topbar { padding: 13px 0; margin: 0; display: flex; }

#logo {
	height: 50px;
	margin: 0;
	padding: 0;
}

#logo img {
	height: 50px;
	margin: 0;
	padding: 0;
}

#top-btn {
	margin: 0 0 0 auto;
	padding: 0;
}

#top-btn .button2 { margin: 7px 50px 0 0 !important; }


/* Navigation */

.navhide, #navtop, .dropclose { display: none; }

#navigation {
	display: inline-block;
	width: 96%;
	margin: 0;
	padding: 0 2%;
	color: #000000;
	font-size: 1em;
	font-family: 'Varela Round', sans-serif;
	font-weight: 400;
	border-top: 2px solid #000000;
	border-bottom: 2px solid #000000;
}

/* Top Navigation */
#mainav {margin:0; padding:0;}
#mainav ul {margin:0; padding:0; float: left;}
#mainav li {display:inline-block; position:relative; margin:0; padding:0;}
#mainav li a {display:block; margin:0; padding:20px; color:#000000; text-decoration:none; background-color:#ffffff; transition-duration: 0.5s;}
#mainav li.aboutnav a {display:none;}
#mainav ul li:hover > ul {display:block;}
#mainav .active a, #mainav a:hover, #mainav li:hover > a {color:#000000; background-color: #f9cb42;}

.dfltoplogo { width: 78px; height: 56px; padding: 10px 0; float: right; }
.dfltoplogo img { width: 78px; height: 56px; }

.masthead { padding-bottom: 0; }

.pagetitle {
	width: 96%;
	margin: 0 0 50px 0;
	padding: 0 2%;
	background-color: #FFFFFF;
	background-image: url(../images/page-title-bg.png);
	background-repeat: repeat-x;
	background-size: auto;
	background-position: 0 bottom;
}

.pagetitlecol {
	width: 100%;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
}

.yellow { background-image: url(../images/page-title-bg-yellow.png); }

.pagetitle h1 { width: 55%; font-size: 2.7em; line-height: 1.1em; margin: 0; padding-bottom: 1.1em; float: left; }
.pagetitle img { width: 40%; height: auto; padding: 20px 2% 0 3%; float: right; }

.content1col {
	width: 100%;
	margin: 0;
	padding: 20px 0;
}

.content2col {
	float: left;
	width: 47%;
	margin: 0 6% 0 0;
	padding: 20px 0;
}

.content3col {
	float: left;
	width: 31%;
	margin: 0 3.5% 0 0;
	padding: 20px 0;
}

.contentfcol {
	float: left;
	margin: 0 2% 0 0;
	padding: 20px 0;
}

.content2col:last-child, .content3col:last-child { margin: 0; }

.bggrey { background-color: #eeeeee; }

.highlightbox {
	margin: 40px 0;
	padding: 30px;
	background-color: #88DAD6;
	border-radius: 20px;
}
.highlightbox h4 { margin-top: 0; }

.arrdown { color: #ffffff; font-size: 50px; width: 60px; height: 60px; line-height: 50px; text-align: center; padding: 0; margin: 0 40px; border-radius: 60px; background-color: #000000; }

.series-container {
	display: flex;
	flex-wrap: wrap;
	align-content: stretch;
	justify-content: center;
	margin-top: 1.7em;
}

.series-container .colw {
	background-color: #ffffff;
	width: 42%;
	margin: 1%;
	padding: 2% 3% 4% 3%;
	border-radius: 10px;
}

.series-container .fullw {
	background-color: #ffffff;
	width: 92%;
	margin: 1%;
	padding: 2% 3%;
	border-radius: 10px;
}

.colw:hover, .fullw:hover { background-color: #f9cb42; }
a.colw, a.colw:link, a.fullw, a.fullw:link { color: #000000; text-decoration: none; }

.series-container h4 { margin-top: 0; }
.series-container p { margin-top: 0; }
.series-container img { width: 60%; padding: 0 20%; }
.series-container .fullw h4 { margin-top: 2em; }
.series-container .fullw img { width: 30%; padding: 0 2%; float: right; }

.series-back-main { float: left; position: relative; left: -0.5%; top: 2.2em; width: 5%; }

.series-content { margin: 2.4em 5% 1.4em 5%; }
.series-content h2 { margin-top: 0; }
.series-content p { margin-bottom: .4em; }

.series-box
{
	background-color: #eeeeee;
	border-radius: 10px;
	padding: 2% 2% 4% 2%;
	margin: 1.4em 0;
}
.series-box-bot { font-size: .8em; }

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
	margin-bottom: 2em;
}

.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.previous { float: left; margin-bottom: 30px; }
.next { float: right; text-align: right; margin-bottom: 30px; }

/* SHOW HIDE */
#android-exploring-resources, #android-exploring-transcript, #android-basics-resources, #android-basics-transcript, #android-display-resources, #android-display-transcript, #android-readers-resources, #android-readers-transcript, #android-contact-resources, #android-contact-transcript, #android-calls-resources, #android-calls-transcript, #android-messages-resources, #android-messages-transcript, #ios-exploring-resources, #ios-exploring-transcript, #ios-basics-resources, #ios-basics-transcript, #ios-display-resources, #ios-display-transcript, #ios-readers-resources, #ios-readers-transcript, #ios-contact-resources, #ios-contact-transcript, #ios-calls-resources, #ios-calls-transcript, #ios-messages-resources, #ios-messages-transcript {
	position: relative;
	z-index: 2;
	top: 0;
	padding: 0;
	margin: -75px 0 0 0;
	text-align: left;
	background-color: #eeeeee;
	display: none;
}

.pointer { cursor: pointer; }

a.button4, a.button5 {
	border-radius: 30px;
	width: 280px;
	height: 60px;
	padding: 0;
	margin: 0 10px 15px 0;
	color: #000000;
	font-family: 'Varela Round', sans-serif;
	font-size: .9em;
	line-height: 60px;
	font-weight: 400;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	display: inline-block;
	transition-duration: 0.5s;
	background-color: #f9cb42;
}

a.button4:hover { background-color: #000000; color: #FFFFFF; }
a.button5 { background-color: #FFFFFF; color: #000000; }
a.button5:hover { background-color: #000000; color: #FFFFFF; }
/* END SHOW HIDE */

.support { margin-top: 70px; }
.support p { margin-top: 50px; }
.support img { height: 60px; }
.dfllogo { width: 180px; height: inherit !important; }

.help { width: 100%; margin: 50px 0; background-color: #eeeeee; display: flex;
  align-items: end; }
.helptxt { width: 60%; padding: 2% 2% 10% 2%; float: left; } 
.helpimage { width: 36%; float: left; line-height: 0; } 
.helpimage img { padding: 5% 25% 0 2%; } 

.footer { font-size: .8em }

.footer a, .footer a:link, .footer a:visited, .footer a:active { color: #000000; }
    
.footer a:hover { color: #1B525A; }

.footer p { margin-top: 0; }

.footerlogo { display: block; }

.footerlogo img { max-height: 80px; }

.footerbot {
	color: #FFFFFF;
	padding: 2%;
	margin: 0;
	font-size: .8em;
	background-color: #000000;
}  

.footerbotterms { float: right; }

.footerbot a, .footerbot a:link, .footerbot a:visited, .footerbot a:active { color: #FFFFFF; }

.footerbot a:hover { color: #f9cb42; }


/* Nav Others */
a.button {
	border-radius: 30px;
	padding: 12px 50px;
	margin: 0;
	color: #000000;
	font-family: 'Varela Round', sans-serif;
	font-size: 1em;
	font-weight: 400;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	transition-duration: 0.5s;
	background-color: #f9cb42;
}

a.button:hover { background-color: #000000; color: white; }

a.button1 {
	width: 90%;
	border-radius: 60px;
	padding: 28px 5%;
	font-size: 1.3em;
}

a.button2 {
	border: 1px solid #000000;
	padding: 9px 30px;
	font-size: .6em;
	line-height: 1em;
	background-color: white;
}

a.button2:hover { color: #000000; background-color: #f9cb42; border: 1px solid #f9cb42; }

a.button3
{
	width: 26%;
	border-radius: 50px;
	padding: 15px 3%;
	margin: 10px 0.4%;
	font-size: .9em;
	line-height: 1.2em;
	vertical-align: text-top;
}

a.button6 { font-size: .9em; padding: 10px 36px; margin-bottom: 15px; }

a.buttonres { font-size: .9em; padding: 12px 40px; margin: 15px 0 30px 0; }

a.os-icon { border-radius: 42px; padding: 18px 50px; line-height: 42px; }
a.os-icon img { filter: invert(0); width: 37px; height: 37px; margin-right: 5px; float: left; }
a.os-icon:hover img { filter: invert(1); }

.btnback { width: 50px; height: 50px; display: block; border-radius: 60px; }
.btnback img { width: 20px; height: 30px; padding: 10px 17px 10px 13px; filter: invert(0); }
a.btnback, a.btnback:link, a.btnback:visited, a.btnback:active { background-color: #f9cb42; transition-duration: 0.5s; }
a.btnback:hover { background-color: #000000; }
a.btnback:hover img { filter: invert(1); }

.btntotop { width: 96%; margin: 0 2% 30px 2%; padding: 0; display: inline-block; clear: both; }

.btnsocial { width: 40px; height: 40px; display: block; float: left; padding: 5px; margin: 10px; border-radius: 60px; }
.btnsocial img { width: 100%; }
a.btnsocial, a.btnsocial:link, a.btnsocial:visited, a.btnsocial:active { background-color: #88DAD6; transition-duration: 0.5s; }
a.btnsocial:hover { background-color: #f9cb42; }


/* Media for smaller devices */

@media screen and (max-width: 1023px), print {

body { min-width: 100%; font-size: 120%; }

.intro p { width: 100%; }

.photo-w-caption { float: none; width: 100%; padding: 10px 0 0 0; }
.photo-w-caption.fordeskptop { display: none; }
.photo-w-caption.formobile { display: block; margin-top: 40px; }

.container { width: 90%; padding: 0 5%; }

#logo { float: none; width: 100%; }

#top-btn { display: none; }

#navtop {
	display: block;
	top: 80px;
	width: 90%;
	height: 70px;
	margin: 0;
	padding: 0 5%;
	z-index: 9999;
	border-top: 2px solid #000000;
	border-bottom: 2px solid #000000;
}

a.buttonddm { font-size: 16px; padding: 0 25px; width: 90px; height: 50px; margin-top: 9px; line-height: 50px; }
a.buttonddm:hover { background-color: #f9cb42; color: #000000; }
#navigation a.buttonddm { margin-left: 5%; }
.dropclose { display: block; }
.dfltoplogom { width: auto; height: 50px; padding: 10px 0; float: right; position: relative; z-index: 9999; }

#navigation {
	display: none;
	width: 100%;
	background-color: #ffffff;
	color: #000000;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 78px;
	z-index: 9998;
	border-top: 0 solid #000000;
	border-bottom: 0 solid #000000;
}

@keyframes slidein {
    0% {
	transform: translateY(-5%);
	opacity: 0;
    }
    100% {
	transform: translateY(0%);
	opacity: 1;
    }
}

/* Top Navigation */
#mainav ul { display: block; margin-top: 11px; float: none; animation: slidein .5s forwards; }
#mainav li { display:block; }
#mainav li a { padding: 20px 5%; border-bottom:solid 1px #000000; }
#mainav li.aboutnav a, #mainav ul li:hover > ul { display:block; }
.dfltoplogo { display: none; }

.pagetitle { width: 90%; padding: 0 5%; }
.pagetitlecol { display: inline-block; }
.pagetitle h1 { width: 100%; margin: .9em 0 .4em 0; padding: 0; float: none; }
.pagetitle img { width: 90%; padding: 20px 5% 0 5%;  float: none; }

.content2col, .content3col { float: none; width: 100%; margin: 0; }

.series-container .colw, .series-container .fullw { width: 90%; padding: 3% 5% 10% 5%; }
.series-container .fullw h4 { margin-top: 0; }
.series-container .fullw img { width: 60%; padding: 0 20%; float: none; }
.series-back-main { float: none; }
.series-content { margin: 4em 0% 1.4em 0%; }
.series-box { padding: 5% 5% 7% 5%; margin: 1em 0; }

.support img { margin-right: 0; margin-bottom: 36px; display: block; }

.helptxt { padding: 2% 5% 10% 5%; } 
.helpimage img { padding: 5% 5% 0 0; } 

.footerbot { padding: 5%; }
.footerbotterms { float: none; margin-top: 20px; }

.btntotop .button2 { margin: 5%; }
a.button3 { width: 94%; margin: 10px 0; }
a.buttonres { margin: 15px 0 0 0; }
.resources p { margin-bottom: 50px; }
.previous, .next { float: none; text-align: left; margin-bottom: 20px; }

}

@media screen and (max-width: 570px), print {

/* SHOW HIDE */
#android-exploring-resources, #android-exploring-transcript, #android-basics-resources, #android-basics-transcript, #android-display-resources, #android-display-transcript, #android-readers-resources, #android-readers-transcript, #android-contact-resources, #android-contact-transcript, #android-calls-resources, #android-calls-transcript, #android-messages-resources, #android-messages-transcript, #ios-exploring-resources, #ios-exploring-transcript, #ios-basics-resources, #ios-basics-transcript, #ios-display-resources, #ios-display-transcript, #ios-readers-resources, #ios-readers-transcript, #ios-contact-resources, #ios-contact-transcript, #ios-calls-resources, #ios-calls-transcript, #ios-messages-resources, #ios-messages-transcript { margin: -150px 0 0 0; }
a.button4, a.button5 { width: 100%; margin: 0 0 15px 0; }
/* END SHOW HIDE */

.help { display: inline-block; }
.helptxt { width: 100%; padding: 2% 5% 6% 5%; float: none; } 
.helpimage { width: 100%; float: none; line-height: 0; } 
.helpimage img { padding: 5% 7% 0 7%; } 

}

@media screen and (min-width: 1024px) and (max-width: 1080px), print {

#top-btn .button2 { margin: 7px 7vw 0 0 !important; }
#navigation { font-size: .87em; }
#mainav li a { padding: 20px 16px; }
a.button1 { width: 100%; padding: 28px 0; font-size: 1em; }

}

@media print {

.series-back-main { display: none; }
a.button1 { text-align: left; padding: 0; }
a.button3, a.button4, a.button5 { width: inherit; margin: 0 15px; }

}