/*************************************************************************

					Theme Name: Salt and Light
					Author: BILLY CHAN
					Author URI: http://saltandlighttv.org
					Version: 3.0

**************************************************************************

CONTENT:

1. GOOGLE FONT IMPORT
2. GENERAL
	2.1 FONTS
	2.2 SECTION STRUCTURE
	2.3 IMAGE
3. HEADER
4. BODY
5. FOOTER
6. IATS
7. RESPONSIVE
	7.1 MAX-WIDTH: 960
	7.2 MAX-WIDTH: 600

*************************************************************************/

/*****************************
	1. GOOGLE FONT IMPORT 
*****************************/

/*
@import url(https://fonts.googleapis.com/css?family=Satisfy);
@import url(https://fonts.googleapis.com/css?family=Raleway:500,900);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
@import url(https://fonts.googleapis.com/css?family=Ubuntu:500,700);
*/

/*****************************
	2 GENERAL
*****************************/

	/*-----------*/
	/*   RESET   */
	/*-----------
	
	html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video
	{ margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }*/
	
	article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
	body { line-height: 1; }
	blockquote, q {	quotes: none; }
	blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
	table { border-collapse: collapse; border-spacing: 0;}
	
	.break,
	#break{	display:none; } /*** This is to determine the break will only happen in mobile ***/
	
	hr { border: 0; 	height: 1px; background-color: #d9d9d9; }
	
	.bar { padding-bottom:5px; margin: 5px 0 5px 0; border-bottom: 1px solid #d9d9d9;}
	
	.borderbottom { padding-bottom:0px; border-bottom: 1px solid #d9d9d9; }
	
	
	/*** Resposive iframe wrapper ***/
	.videoWrapper { position: relative;	padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; }
	.videoWrapper iframe { width: 100%;	height: 100%; position: absolute;	top: 0;	left: 0; }
	
	
	/*** S+L Button ***/
	.slbutton a { padding: 10px 30px 10px 30px; border: 1px solid #0091D2; text-align: center; display: block; margin-bottom: 15px; text-decoration: none; font-size: 15px; color: #00AAE9; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
	
	.slbutton a:hover{ padding: 10px 30px 10px 30px; border: 1px solid #0091D2; text-align: center; background-color: #0091D2; text-decoration: none; color: #fff; }

/**************************************
	2.1 GENERAL - FONTS / PARAGRAPH / Color
***************************************/

	h1{ font-size:40px; line-height:1.2; color:#444444; margin:20px 0; font-weight:bold;}
	h2{ font-size:35px; line-height:1.2; color:#444444; margin:20px 0; font-weight:bold;}
	h3{ font-size:30px; line-height:1.2; color:#444444; margin:20px 0; font-weight:bold;}
	h4{ font-size:25px; line-height:1.2; color:#444444; margin:20px 0; font-weight:bold;}
	h5{ font-size:20px; line-height:1.2; color:#444444; margin:20px 0; }
	h6{ font-size:16px; line-height:1.2; color:#444444; margin:20px 0; }
		
	.head-title,
	#head-title{ font-size:35px; line-height:1.2; color:#444444; margin:20px 0; }
	
	.sub-title-1{ font-size:28px; line-height:1.2; color:#444444; margin:20px 0; }
	.sub-title-2{ font-size:20px; line-height:1.2; color:#444444; margin:20px 0; }
	.sub-title-3{ font-size:16px; line-height:1.2; color:#444444; margin:10px 0; }
	
	strong, b{ font-weight:bold;}
	em, i{ font-style:italic;}
	blockquote{ margin:10px; padding: 10px; background-color:#F1F1F1;}
	
	/***** NEW TAG *****/
	.new{  background-color:#FF0004 !important; color:rgba(255,255,255,1.00) !important; float: left; font-size:0.9em; text-align:center; font-weight:bold; margin-right:5px; padding: 0px 5px;}
	
	/***** General Hyperlinks style ******/
	a:link { color: #00AAE9;	text-decoration: none; outline: none; }
	a:visited {	color: #00AAE9;	text-decoration: none; outline: none;}
	a:hover { color: #104E7F; }
	a:active { color: #00AAE9; }
	
	
	/***** FONT 1: AQUA ******/
	.aqua{
		font-family: 'Open Sans', sans-serif;
		font-size: 14px;
		color: #555555;
		text-decoration: none;
		line-height: 1.6;
		-webkit-font-smoothing:antialiased; 
		-webkit-text-size-adjust:none;
	}
	
	.aqua-ch{
		font-family: 'Open Sans', sans-serif;
		font-size: 16px;
		color: #555555;
		text-decoration: none;
		line-height: 1.6;
		-webkit-font-smoothing:antialiased; 
		-webkit-text-size-adjust:none;
	}
	
	/***** FONT 2: RALEWAY ******/
	.raleway {
		font-family: 'Raleway',Arial,sans-serif;
		font-size: 14px;
		color: #555555;
		text-decoration: none;
		line-height: 1.6;
		-webkit-font-smoothing:antialiased; 
		-webkit-text-size-adjust:none;
	}
	
	/***** FONT 3: HANDWRITING ******/
	.handwriting {
		font-family: 'Satisfy', cursive;
		font-size: 18px;
		color: #555555;
		text-decoration: none;
		line-height: 1.6;
		-webkit-font-smoothing:antialiased; 
		-webkit-text-size-adjust:none;
	}
	
	/***** FONT 4: JUSTIFIED (VERY OLD)******/
	.justified {
		font-family: Verdana, Helvetica, Arial, sans-serif;
		font-size: 11px;
		color: #555555;
		text-decoration: none;
		line-height: 14pt;
	}
	
	.justified A:link {color: #1a7dcb; text-decoration: none;}
	.justified A:visited {color: #1a7dcb; text-decoration: none;}
	.justified A:active {color: #1a7dcb; text-decoration: none;}
	.justified A:hover {color: #555555; text-decoration: none;}
	
	.justifiedBlue {
		font-family: Verdana, Arial, Helvetica, sans-serif;
		color: #4578b3;
		font-size: 11px;
		line-height: 14pt;
	}
	
	.justifiedBlue2 {
		font-family: Verdana, Arial, Helvetica, sans-serif;
		color: #4578b3;
		font-size: 11px;
		line-height: 14pt;
	}
	.justifiedBlue2 A:link {color: #1a7dcb; text-decoration: underline;}
	.justifiedBlue2 A:visited {color: #1a7dcb; text-decoration: underline;}
	.justifiedBlue2 A:active {color: #1a7dcb; text-decoration: underline;}
	.justifiedBlue2 A:hover {color: #da2902; text-decoration: none;}
	
	
	
	

/*****************************************
	2.2 GENERAL - SECTION STRUCTURE
*****************************************/
	.section { width:100%; float:top; display:inline-block; }
	
	/*** half half structure ***/
	.s-left-one-half{ width:45%; float:left; }
		
	.s-right-one-half{ width:45%; float:right; }
		
	.s-one-half{ width:50%;  float:left; display:inline-block; }
		
		
	/*** one-third structure ***/
	.s-one-third{ width:33%; display:inline-block; vertical-align:text-top;}
	
	.s-two-third{ width:66%;  display:inline-block; vertical-align:text-top;}
	
	/*** one-forth structure ***/
	.s-one-forth{ width:25%; float:left; }
	
	.s-three-forth{ 	width:75%; float:left; }

	/***** background color *****/
	.bg-grey{ background-color:#EDEDED; }

/*****************************************
	2.3 GENERAL - IMAGE
*****************************************/

	img.mainbanner { width:100%; max-width:960px; }
	.inline-img-left{ float:left; width:45%; margin:0 10px 10px 0; }
	
	.inline-img-right{ float:right; width:45%; margin:0 0 10px 10px; }
	
	.imgBorder { border: 5px solid #e2e2e2; }

/*****************************
	3. HEADER
*****************************/

	#header-image
	{
		width:100%;	
		text-align:center;
		
		/*** Ordinary Time ***/
		background-color:#00AAE9; 
		
		/*** Lent Time 
		background-color:#A72ED5;***/
		
		/*** EASTER 
		background-color:#DCA700;***/
	}
	
	/***** Donate Button *****/
	
	
	.donate-button:hover{
		
		color:#F36 !important;
		border:3px #104e7f solid;
		transition-property: all;
		transition-duration: 0.25s;
		transition-timing-function: ease-in;
	}
	
	.donate-button{		
		font-size:16px;
		padding:15px;
		border:3px #F36 solid;
		border-radius:20px;
		width:50%;
		background-color:#F5F5F5;
		color:rgb(53, 124, 189);
		text-decoration:none;
		font-weight:bold;
	}

/*****************************
	4. BODY
*****************************/

	body{
			margin: 0 0; text-align:center; min-height:100%;
					
		  	background-size:cover;
		  	background-repeat: repeat-x;
		  	background-position:center top;
		  	background-attachment:fixed;
		  	background-color: #FFFFFF;
	}
	
	.s-960{	width: 100%; max-width:960px; display:block;}
	
	.full-width{width:100%;}
	
	#outterbox{	width: 100%; margin-top: 40px; }
	
	/*#content,*/
	#innerbox {	width: 100%; max-width:960px; background-color: transparent;	text-align:left; display:inline-block; }
	
	
	#fb-comments { width:100%; max-width: 960px; margin: 50px 0; }
	
	
	#sharing-buttons { width:100%; display:inline-block; max-width:960px; margin:20px 0px 20px 0px; } /*** secondary page sharing buttons ***/
	
	#sharing-buttons .desktop-ad{ display:inline-block; float:right; margin-top:10px;}
	#sharing-buttons .mobile-ad{ display:none;}
	#sharing-buttons .mobile-ad img{ margin-bottom:20px; }
	
	/*** GLOBAL OVERLAY ***/
	#overlay{ width:100%; height:100%; position:fixed; top:0; left:0; z-index:100; background:rgba(0,0,0,0.8); display:none; }
	
	#overlay-alpha{ width:100%; height:100%; position:fixed; top:0; left:0; z-index:100; background:rgba(0,0,0,0); display:none;  }
		
	#showiframe{ width:80%; position:fixed; top:50%; left:50%; transform: translate(-50%, -50%); z-index:101; display:none; }
	
	#linkToCopy{z-index:102; color:#FFFFFF; font-size:20px; text-weight:bold; margin-top:10px;} 
	
	.youtube,
	.vimeo{ cursor:pointer;}
	
	/*** Urgent Notification ***/
	
	#notification{ padding:10px 10px 10px 35px; background:#E8E8E8; margin:10px 0; color:rgba(255,108,111,1.00); font-weight:bold; }
	
	/****** socialmedia signup - index page ******/
	
	#socialmedia{ width:100%; height:50px; border-top:0px #D9D9D9 solid; border-bottom:0px #D9D9D9 solid; padding-top:15px; background-color:#E6E6E6; opacity:0.90; }
	
	#socialmedia-icons{	float:left; margin-left:35px; }
	
	#socialmedia-subscribe{	float:right; margin-right:35px; font-size:16px; margin-top:10px; }

/*****************************
	5. FOOTER
*****************************/

	#footer{ width:100%; background-color:#E6E6E6; display:block; padding:20px 0 100px 0; border-top:50px #666666 solid;}
		
	#footer-content{ width:100%; max-width:960px; color:#878787; font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:16px; padding-top:12px; padding-bottom:12px; text-align:left; }

/*****************************
	6. IATS
*****************************/

	.IATSdonate {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 11px;
		color: #555555;
		text-decoration: none;
		line-height: 14pt;
	}
	.IATSdonate A:link {color: #1a7dcb; text-decoration: none;}
	.IATSdonate A:visited {color: #1a7dcb; text-decoration: none;}
	.IATSdonate A:active {color: #1a7dcb; text-decoration: none;}
	.IATSdonate A:hover {color: #555555; text-decoration: none;}

/*****************************
	7.1 MAX-WIDTH: 960
	
		7.1.1 GENERAL
			7.1.1.1 FONTS
			7.1.1.2 SECTION STRUCTURE
			7.1.1.3 IMAGE
		7.1.2 HEADER
		7.1.3 BODY
		7.1.4 FOOTER
*****************************/

	@media screen and (max-width:960px)
	{
		
		/*****************************
			7.1.1 GENERAL
		*****************************/
		.break,
		#break{	display:inline; } /*** This is to determine when the break will happen ***/
		
		/*****************************
			7.1.1.2 SECTION STRUCTURE
		*****************************/
		
		/*** structure ***/
		.s-left-one-half,
		.s-right-one-half,
		.s-one-half,
		.s-one-third,
		.s-two-third,
		.s-one-forth{ width:100%; float:top; display:block; }
		
		/*****************************
			7.1.2 HEADER
		*****************************/
				
		#header-image{ background-position:left center; }
		
		.head-title,
		#head-title{ line-height:1.2; font-size:25px; color:#444444; margin:20px 0;}
	
		.sub-title-1{ font-size:22px;}
		.sub-title-2{ font-size:18px;}
		.sub-title-3{ font-size:14px;}
		
		
		/*****************************
			7.1.3 BODY
		*****************************/
		#outterbox{ width:100%; }
		.r-padding-left-right,
		#r-padding-left-right { font-size:1.05em; padding:0 10px; }
	
		#innerbox{ width:100%; text-align:left; padding:0;	}	
		#content{ width:100%; font-size:1.05em;}
	
		/*** Urgent Notification ***/
		
		#notification{ padding:10px 10px 10px 10px;}
	
	
		/****** socialmedia signup - index page ******/
	
		#socialmedia{ width:100%; height:auto; padding: 15px 0; background-color:#E6E6E6; opacity:0.90; display:inline-block; text-align:left; margin:0; float:top; z-index:9999999; }
		
		#socialmedia-icons{ width:90%; float:none; margin-left:15px; display:block; }
		
		#socialmedia-subscribe{ width:90%; float:none; font-size:14px; line-height: 1.5; margin:10px 0px 0px 15px; margin-right:0px; display:block; }
		
		#sharing-buttons {display:inline-block; height:auto; padding:0; margin:10px 0 0 0;}
		#sharing-buttons .desktop-ad{ display:none; }
		#sharing-buttons .mobile-ad{ display:inline-block; float:top; margin:10px 0 0 0; }
		
		#showiframe{ width:100%; }
		
		/*****************************
			7.1.4 FOOTER
		*****************************/
		#footer{ width:100%; background-color:#E6E6E6; padding: 0; padding:20px 0 50px 0; display: block; }
		#footer-content	{ width:100%; color:#878787; font-family:Arial, Helvetica, sans-serif; font-size:14px; line-height:18px; text-align:left; display: block; box-sizing: border-box; padding:5px; }	
		
	}
	
/*****************************
	7.2 MAX-WIDTH: 600
	
		7.2.1 GENERAL
			7.2.1.1 FONTS
			7.2.1.2 SECTION STRUCTURE
			7.2.1.3 IMAGE
		7.2.2 HEADER
		7.2.3 BODY
		7.2.4 FOOTER
*****************************/
	

	@media screen and (max-width:600px)
	{
		/*****************************
			7.2.1.3 IMAGE
		*****************************/
		.inline-img-left,
		.inline-img-right{
			
			float:none;
			width:100%;
			margin:20px 0;
		}
		
	}