/* CSS Document */
.ftp { content: "X0npd88?" }

/* Define the body */
body,html { font-family: 'Roboto Condensed', sans-serif; }
body { padding:0px; margin:0px; color:#333333; background-color:#FFFFFF; font-size:12pt; }

/* Define the coloured bars */
.ColourTopBar { background-color:#cceea0; clear: both; }
/*.ColourAnimationBar { background-color:transparent; clear: both; }
.ColourContentBar { background-color:transparent; clear: both; }
*/
.ColourNewsletterBar { background-color: #cceea0; clear: both; }
.ColourFooterBar { background-color:#333333; clear: both; }

/* Define the responsive container */
.Container { position: relative; width: 900px; padding: 0px; margin: 0px auto 20px auto; }
@media all and (max-width: 900px) {
	.Container { width:100%; }
}
@media all and (max-width: 320px) {
	.Container { width:320px; }
}

A { color: #FFD100; color: #FFF; text-decoration: none; }
h2 { color: #49daf8; font-size: 14pt; text-align: left; }

.Partners img { margin: 5px 10px; padding: 0; }

.VideoRow { padding: 0; margin: 0; }
.VideoRow .YouTube { position:relative; padding-bottom:56.25%; padding-bottom:46.0%; /* 16:9 */ padding-top:25px; height:0; }
.VideoRow .YouTube iframe { position:absolute; top:0; left:0; width:100%; height:100%; border:thin #333 solid; box-sizing:border-box; }

.SingleCol { padding: 0; margin: 0; }
.SingleCol .Row { background-color: #FFFFFF; color: #333333; padding: 20px 40px 20px 40px; text-align: left; }
.SingleCol .Image IMG { width: 100%; height: auto; vertical-align: top; }

.TwinCol { padding: 0; margin: 0; display: table; width: 100%; background: #FFFFFF; font-size: 12pt; color: #333333 }
.ColumnLeft { display: table-cell; width: 50%; background: transparent; vertical-align: top; margin: 0; padding: 0; }
.ColumnRight { display: table-cell; width: 50%; background: transparent; vertical-align: top; margin: 0; padding: 0; }

/*.Blog { padding: 0; margin: 0px 0 0 0; display: table; width: 100%; font-size: 12pt; color: #FFF; background-color: #3E3E3E; background: #000; }*/

.TwinRowIR .ColumnLeft { vertical-align: middle; padding: 20px; box-sizing: border-box; }
.TwinRowIR .ColumnRight IMG { width: 100%; height: auto; vertical-align: top; }

.TwinRowIL .ColumnLeft IMG { width: 100%; height: auto; vertical-align: top; }
.TwinRowIL .ColumnRight { vertical-align: middle; padding: 20px; box-sizing: border-box; }

.TwinColTF { margin: 0; }
.TwinColTF .ColumnLeft { padding: 20px 20px 20px 40px; box-sizing: border-box; text-align: right; }
.TwinColTF .ColumnRight { padding: 20px 40px 20px 20px; box-sizing: border-box; }

.TwinColIF { margin: 0; }
.TwinColIF .ColumnLeft IMG { width: 100%; height: auto; vertical-align: top; }
.TwinColIF .ColumnRight { padding: 20px 40px 20px 20px; box-sizing: border-box; }

.TwinRowII .ColumnLeft IMG { width: 100%; height: auto; vertical-align: top; }
.TwinRowII .ColumnRight IMG { width: 100%; height: auto; vertical-align: top; }

/*
.AltIndentTextBlock { color: #FFF; text-align: left; font-family: "courier"; font-size: 12pt; }
.AltIndentTextBlock H2 { font-size: 14px; font-weight: bold; }
.AltIndentTextBlock H3 { font-size: 13px; font-weight: bold; }
.AltIndentTextBlock:nth-child(odd) { padding: 0 0 20px 80px; }
.AltIndentTextBlock:nth-child(even) { padding: 0 80px 20px 0; }
*/

#Background { background-repeat: no-repeat; background-size: 100%; background-color: #FFFFFF; overflow: display; }

/*
#Animation { box-sizing:border-box; position:relative; width:100%; margin:0 0 0 0; padding:10px 0 0 0; overflow:hidden; }
#Animation IMG { vertical-align:top; width:100%; height:auto; border:none; padding:0px 0px 0px 0px; box-sizing:border-box; }
#Animation #Cycler DIV { z-index:1; position:absolute; width:100%; }
#Animation #Cycler DIV.Active { z-index:3; }
#Animation #Status { text-align: right; }
#Animation #Status UL { z-index:4; position:absolute; bottom:10px;  right: 10px; list-style:none; padding:0px; margin:0px; }
#Animation #Status UL LI { width:10px; height: 10px; background-color:#CCC; border:#FFF solid 1px; display: inline-block; box-sizing:border-box; opacity:0.6; cursor:pointer; border-radius: 5px; }
#Animation #Status UL .Active { opacity:1.0; background-color:#FFF; }
*/

.Plynth { position: relative; padding: 0; margin: 0; text-align: center; }
.Opaque { position: absolute; background-color: #333; opacity: 0.9; /*height: 100px;*/ top: 0; bottom: 0; left: 0; right: 0; }
.Plynth P { position: relative; text-align: center; font-size: large; color: #FFF; padding: 10px; margin: 0; box-sizing: border-box; }
.Plynth P SPAN { display: inline-block; padding:5px 10px 5px 10px; }
/*.Plynth P SPAN A { text-decoration: none; color: #FFF; }*/
/*.thecall { background-color: #F92E0D; color: #FFF }
.thecall A { background-color: #F92E0D; color: #FFF }
.theshift { background-color: #83F3FB; color: #666 }
.theshift A { background-color: #83F3FB; color: #666 }
.wist { background-color: #FFD100; color: #333 }
.wist A { background-color: #FFD100; color: #333 }
.os { background-color: #8ACDC0; color: #333 }
.os A { background-color: #8ACDC0; color: #333 }*/


FORM {padding:0;margin:0;text-align:left;/*background-color:#FFFFFF;*//*border:1px solid #D1D2D4;*/ box-sizing:border-box;color:#FFF;}
/*FORM * {font-size:10pt;font-family:Verdana, Arial, Helvetica, sans-serif;}*/
FORM .Required {background-color:#3E3E3E;border:solid 1px #3E3E3E;padding:10px;margin:0 0 5px 0px;box-sizing:border-box;color:#FFF;}
FORM .Optional {border:solid 1px #3E3E3E;padding:10px;margin:0px 0 5px 0px;box-sizing:border-box;color:#FFF;}
FORM SELECT {border:inherit;}
FORM SPAN {color:#F00;}
FORM .label {padding:2px 0 8px 0px;margin:0;}
FORM .BtnSubmit { padding:10px; margin:10px 0 0 0; background: #49daf8; border: none; font-size:inherit; color: #FFF }
/*FORM .BtnSubmitS { padding:5px 10px 5px 10px; margin:10px 0 0 0; background: #8ACDC0; border: none; font-size:inherit; color: #333 }*/
::-webkit-input-placeholder { color:#FFF; }
::-moz-placeholder { color:#FFF; } /* firefox 19+ */
:-ms-input-placeholder { color:#FFF; } /* ie */
input:-moz-placeholder { color:#FFF; }


h1 { text-align: left; }
.LeftCol { width: 200px; float:left; padding: 20px 0 0 0; }
.LeftCol img { width: 100%; height: auto; }
.RightCol { width: calc(100% - 200px); float:right; padding-left: 20px; box-sizing: border-box; }
.Tight { margin: 0; padding: 0; }
.Book { width: 20%; display: inline-block; padding: 5px; margin: 0; box-sizing: border-box; border: 5px transparent solid; vertical-align: top; }
.Book a { color: #666; }
.Book a strong { color: #333; font-weight: bold; }
.Book a hr { color: #49DAF8; width: 50%; margin: 0; padding: 0; }
.Book img { width: 100%; height: auto; }
.Author { width: 33.33333%; display: inline-block; padding: 5px; margin: 0; box-sizing: border-box; border: 5px transparent solid; vertical-align: top; }
.Author a { color: #666; }
.Author a strong { color: #333; font-weight: bold; }
.Author a hr { color: #49DAF8; width: 50%; margin: 0; padding: 0; }
.Author img { width: 100%; height: auto; }
.Genre { width: 25%; display: inline-block; padding: 20px; margin: 0; box-sizing: border-box; border: 5px transparent solid; vertical-align: top; }
.Genre a { color: #FFF; }
.Genre img { width: 50%; height: auto; }
.BtnSubmit { display: inline-block; background-color: #49daf8; color: #FFF; padding: 10px; /*font-weight: bold;*/ }

.BookObject {overflow: hidden; position: relative;}
.ImageBook {width:40% !important; height:auto !important; position: relative; padding: 0; margin: 20px; box-shadow: #999 5px 5px 5px; z-index: 2;}
.ImageOpaque {width:100%; height:auto; opacity: 0.15; position: absolute; z-index: 1; top: 0; left: 0;}

#SignUpBlock H2 { color: #333;}
.SignupImageBlock { vertical-align: middle; text-align: right; padding-right: 20px; }
.SignupImageBlock img { width: 40% !important; height: auto; }

@media all and (max-width: 800px) {
	.Book { width: 33.3333%; }
}
@media all and (max-width: 700px) {
	.ImageBook { width:50% !important; }
	.SignupImageBlock img { width: 60% !important; }
}
@media all and (max-width: 600px) {
	.LeftCol { width: 100%; float:none; }
	.LeftCol img { width: initial; height: auto; }
	.RightCol { width: 100%; float:none; padding-left: 0px; }
	.ImageBook { width:60% !important; }
}
@media all and (max-width: 500px) {
	.Book { width: 50%; }
	.Author { width: 50%; }
	.Genre { width: 33.3333%; }
	.ImageBook { width:70% !important; }
}
@media all and (max-width: 400px) {
	.Genre { width: 50%; }
	.SignupImageBlock { text-align: center !important; }
	.ColumnLeft { display: block; width: 100%; }
	.ColumnRight { display: block; width: 100%; }
	.TwinColTF .ColumnLeft { padding: 20px; }
	.TwinColTF .ColumnRight { padding: 20px; }
	.TwinColIF .ColumnRight { padding: 20px; }
	.AltIndentTextBlock:nth-child(odd) { padding: 0 0 20px 20px; }
	.AltIndentTextBlock:nth-child(even) { padding: 0 20px 20px 0; }
	.SingleCol .Row { padding: 20px; }
}


#TheTrustedVerse { position: relative; }
#TheTrustedVerse a { color: #333 !important; }
#TheTrustedVerse .Plynth { position: absolute; top: 0; bottom: 0; left: 0; right: 50%; background-color: #EEE; opacity: 85% }
#TheTrustedVerse .Text { position: absolute; top: 0; bottom: 0; left: 20px; right: calc(50% + 20px); display: flex; align-items: center; font-size: 1em; }
@media all and (max-width: 800px) {
	#TheTrustedVerse .Plynth { right: 40%; }
	#TheTrustedVerse .Text { right: calc(40% + 20px); }
}
@media all and (max-width: 600px) {
	#TheTrustedVerse .Plynth { right: 30%; }
	#TheTrustedVerse .Text { right: calc(30% + 10px); font-size: 0.9em; }
}
@media all and (max-width: 500px) {
	#TheTrustedVerse .Plynth { right: 20%; }
	#TheTrustedVerse .Text { right: calc(20% + 10px); font-size: 0.8em; }
}
@media all and (max-width: 400px) {
	#TheTrustedVerse .Plynth { right: 10%; }
	#TheTrustedVerse .Text { right: calc(10% + 10px); font-size: 0.8em; }
}
@media all and (max-width: 380px) {
	#TheTrustedVerse .Plynth {  }
	#TheTrustedVerse .Text { font-size: 0.7em; }
}