/*------------------------------------------------------------------------*\
 * PREFIX MEANINGS
 *
 * t ............... Text Styles
 * b ............... Background Styles
 * ................. Miscellaneous Styles
 * ................. Media Query (Responsive) Styles
 *
\*------------------------------------------------------------------------*/
 
 body {overflow-x: hidden; font-family: "Open Sans", sans-serif;}

/*------------------------------------*\
    #TEXT STYLES
\*------------------------------------*/

.t-01 {color: #00316e;}
.t-02 {color: #c22026;}
.cantata-one-regular {font-family: "Cantata One", serif; font-weight: 400; font-style: normal;}
  

/*------------------------------------*\
    #BACKGROUND STYLES
\*------------------------------------*/

.b-01 {background: url(https://manna.amazingfacts.org/amazingfacts/website/religiousfreedom250/images/bg-yellow.webp); background-size: cover; background-position: center center;}
.b-02 {background-color: #f2f9ff;}
.b-03 {background-color: #00316e;}
.b-06 {background-color: #166ac2;}
.b-09 {background-color: #2d2f3d;}
.b-16 {background-color: #01032b;}


/*------------------------------------*\
    #MISCELLANEOUS STYLES
\*------------------------------------*/

.btn-af-red {color: #fff; background-color: #ae0000; border-color: #ae0000;}
.btn-af-red:hover {text-decoration: none; background-color: #ea2316; color: #fff;}
.btn-af-blue {color: #fff; background-color: #2c358d; border-color: #2c358d;}
.btn-af-blue:hover {text-decoration: none; background-color: #4d5be1; color: #fff;}
.btn-af-orange {color: #fff; background-color: #e66c00; border-color: #e66c00;}
.btn-af-orange:hover {text-decoration: none; background-color: #ff7800; color: #fff;}
.btn-af-white {color: #2c358d; background-color: #fff; border-color: #fff;}
.btn-af-white:hover {text-decoration: none; background-color: #fff; color: #2c358d;}
.play-btn {font-size: 25px;left: 0;top: -8px;}
.anchor {display: block; position: relative; top: -150px; visibility: hidden;}
.afType {display: none;}
.dnBtn {padding: 12px 35px; font-size: 18px; border-radius: 3px; margin: 10px auto; background-color: #2979ff; color: #ffffff; border: none; outline: none; cursor: pointer; display: block;}
.plyrPad {padding-top: 35px;}
.txtShdw {text-shadow: 3px 3px 5px #000;}
.tWidth {max-width: 600px;}
#tRex {top: -94px !important;}
#translation {top: -40px !important;}
.af-auto {margin-right: auto !important; margin-left: auto !important;}
.af-bottom {bottom: 17%;}
.af-top {top: 6%;}


/*------------------------------------*\
    #MEDIA QUERY (RESPONSIVE) STYLES
\*------------------------------------*/

/* Large Screen ----------- */
@media (max-width: 3400px) 
{
	.af-auto {margin-right: 0 !important; margin-left: 5% !important;}
}

/* Media Screen ----------- */
@media (max-width: 2500px) 
{
	.af-auto {margin-right: 0 !important; margin-left: 5% !important;}
}

@media (max-width: 1200px) 
{
}

/* tablets ----------- */
@media (max-width: 900px) 
{
	.af-auto {margin-right: 0 !important; margin-left: 25% !important;}
}

@media (max-width: 775px) 
{
}

/* Small devices (landscape phones, less than 885px) ----------- */
@media (max-width: 725px) 
{
	.b-03 {height: 350px; background-position: 65% center; background-size: 200%; background-attachment: unset;}
	.translate-middle {transform: translate(-50%,-30%) !important;}
	.tWidth {max-width: 200px;}
	#af-logo {text-align: center !important; border: 0px !important;}
	.af-auto {margin-right: auto !important; margin-left: auto !important;}
}