Why am I Here?

<!DOCTYPE html>     <html class="no-js" lang="en">  <head> <link href="/taglib/css/fonts/museo-sans/museo-sans.css" rel="stylesheet" type="text/css" /> <link href="/taglib/css/fonts/font-awesome/3.2.1/font-awesome.css" rel="stylesheet" type="text/css" /> <link href="/css/icons/twr360-icons.css?v=2" rel="stylesheet" type="text/css" /> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <meta name="author" content="" />  <script type="text/javascript" async defer src="https://apis.google.com/js/platform.js?publisherid=106605327292697132734"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <title>Why am I Here?</title>  <link href='https://fonts.googleapis.com/css?family=Lato:400,900,400italic,300|Montserrat:300,400,500,600,700' rel='stylesheet' type='text/css'> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" /> <link href="/css/main.css?v=5.1" rel="stylesheet" type="text/css" /> <link href="/javascript/magnific-popup/magnific-popup.css?v=1" rel="stylesheet" type="text/css" />  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <link href="/css/app_pages.css?v=3" rel="stylesheet" type="text/css" /> <style type="text/css"> .fa {font-family:"FontAwesome";} .custom-form h1 { display: none; } .button-wrap { display: none; } /*VIDEO POPOUT*/ .program-player { position: fixed; width: 100%; height: 100%; background: rgba(11,11,11,0.8); z-index: 100; top: 0px; left: 0px; display: none; } .vid-wrapper { position: relative; max-width: 800px; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #0F2E4D; } .vid-wrapper-ltr { position: relative; max-width: 800px; top: 50%; right: 50%; transform: translate(50%, -50%); background: #0F2E4D; } .vid-wrapper h2 { margin: .5em; margin-right: 1.75em; display: inline-block; max-width: 800px; } .vid-wrapper-ltr h2 { margin: .5em; display: inline-block; max-width: 800px; } .close { position: absolute; font-family: FontAwesome; color: #fff; font-size: 1.8em; padding: .1em .25em; margin: .2em; font-weight: normal; top:0px; right:0px; cursor: pointer; } .close-ltr { position: absolute; font-family: FontAwesome; color: #fff; font-size: 1.2em; padding: .1em .25em; margin: .2em; font-weight: normal; top:0px; left:0px; cursor: pointer; } .iframe-container { position: relative; padding-bottom: 56.25%; padding-top: 35px; height: 0; overflow: hidden; z-index: 100; } .iframe-container iframe { position: absolute; top:0; left: 0; width: 100%; height: 100%; } /*END VIDEO POPOUT*/ .button { margin: .5em; } .hidden { display: none !important; } .custom-form form li { border-bottom: none; } .page-header .container { max-width: 1456px; } .page-body .container { max-width: 1200px; } #content h1 { text-align: center; } #content a:hover { color: white; } /** Banner **/ @keyframes fade-in{ from{opacity:0;} 50% {opacity: 1;} to{opacity:0;} } @keyframes fade-final{ from{opacity:0;} 50% {opacity: 1;} to{opacity:1;} } .banner { background: url('https://www.twr360.org/files/library/SadnessAndSorrow.png')no-repeat center black; height: 600px; position: relative; width: 100%; overflow: hidden; } .bannerText { position: relative; display: block; color: white; height: 250px; padding: 1em .3em; font-weight: 900; font-size: 3.6em; text-align: center; text-shadow: 4px 4px 12px #000000; width: 61%; float: right; line-height: 1.3em; } .rotateBox { position: relative; display: block; height: 150px; padding: 1em .5em; color: white; font-weight: 900; font-size: 3.6em; text-shadow: 4px 4px 12px #000000; vertical-align: center; width: 60%; float: right; } .text-one { opacity: 0; position:absolute; height:50px; animation:fade-in 4s; left:0; right:0; margin-left:auto; margin-right:auto; text-align: center; text-transform: capitalize; } .text-two{ opacity:0; position:absolute; height:50px;; animation:fade-in 4s ease 3s; left:0; right:0; margin-left:auto; margin-right:auto; text-align: center; text-transform: capitalize; } .text-three{ opacity:0; position:absolute; height:50px;; animation:fade-in 4s ease 6s; left:0; right:0; margin-left:auto; margin-right:auto; text-align: center; text-transform: capitalize; } .text-four{ opacity:0; position:absolute; height:50px; animation:fade-in 4s ease 9s; left:0; right:0; margin-left:auto; margin-right:auto; text-align: center; text-transform: capitalize; } .text-five{ opacity:0; position:absolute; height:50px; animation:fade-in 4s ease 12s; left:0; right:0; margin-left:auto; margin-right:auto; text-align: center; text-transform: capitalize; } .text-six{ opacity:0; position:absolute; height:50px; animation:fade-in 4s ease 15s; left:0; right:0; margin-left:auto; margin-right:auto; text-align: center; text-transform: capitalize; } .text-seven{ opacity:0; position:absolute; height:50px; animation:fade-in 4s ease 18s; left:0; right:0; margin-left:auto; margin-right:auto; text-align: center; text-transform: capitalize; } .text-eight{ opacity:0; position:absolute; height:50px; animation:fade-in 4s ease 21s; left:0; right:0; margin-left:auto; margin-right:auto; text-align: center; text-transform: capitalize; } .text-nine{ opacity:0; position:absolute; height:50px; animation:fade-in 4s ease 24s; left:0; right:0; margin-left:auto; margin-right:auto; text-align: center; text-transform: capitalize; } .text-ten{ opacity:0; position:absolute; height:50px; animation:fade-final 4s ease 27s forwards; left:0; right:0; margin-left:auto; margin-right:auto; text-align: center; text-transform: capitalize; } .button-wrap { padding: .5em; text-align: center; width: 60%; float: right; } .button-wrap a { font-family:"FontAwesome"; display: inline-block; background-color: #ff5e17; font-size: 2em; padding: 0em .2em !important; border-radius: .35em; overflow: hidden; margin: 12.6px; display: inline-block; width: 92.2031px; height: 82.141px; color: white; text-decoration: none; text-align: center; line-height: 1.9em; cursor: pointer; } /** Form **/ .section-banner { max-width: 100%; background: #009bee; border-radius: 5px; color: white; text-align: center; padding: 10px; margin: 1em 0; } .section-banner .fa { font-size: 1.44em; } .section-banner h2 { display: inline-block; margin: 0em ! important; text-transform: capitalize; } .custom-form form ul { width: 100%; } /** Languages **/ .languages { list-style-type: none; border-top: 2px solid #eee; margin-right: 1em; margin-left: 1em; } .languages li { display: inline-block; width: 245px; padding: .6em .45em; margin: 0em .3em; border-bottom: 2px solid #eee; } .languages a { text-decoration: none } /** Other Ministries **/ .ministries { text-align: center; display: inline-block; width: 100%; } .ministries img { margin: 1.5em .5em; box-shadow: 1px 1px 3px gray; width: 340px; height: 140px; } .ministries img:hover { opacity: .9; } @media only screen and (max-width : 1040px) and (min-width : 810px) { /* Large Tablet view: */ .banner { height: 480px; position: relative; width: 100%; } .bannerText { font-size: 2.8em; height: 200px; line-height: 1.4em; } .rotateBox { font-size: 2.8em; height: 120px; } .button-wrap { height: 160px; } .ministries img { margin-top: 1em; } } @media only screen and (max-width : 809px) { /* Small Tablet view: */ .banner { height: 480px; position: relative; width: 100%; } .bannerText { font-size: 2.8em; height: 200px; line-height: 1.4em; float: none; width: 100%; } .rotateBox { font-size: 2.8em; height: 120px; float: none; width: 100%; } .button-wrap { height: 160px; float: none; width: 100%; } .ministries img { margin-top: 1em; } } @media only screen and (max-width: 640px) { .button-wrap a { width: 79.0313px; height: 70.4063px; } } @media only screen and (max-width: 480px) { .bannerText { height: 240px; padding-top: 2em; padding-bottom: 0em; padding-left: .5em; padding-right: .5em; padding-top: .8em; } .rotateBox { height: 120px; padding-top: .5em; padding-bottom: 1.5em; padding-left: .5em; padding-right: .5em; } .button-wrap { height: 120px; } .button-wrap a { width: 61.4219px; height: 52.7969px; font-size: 1.7em; vertical-align: top; margin: 10.8px; line-height: 1.67em; padding-left: .5em; padding-right: .5em; } } @media only screen and (max-width: 380px) { .ministries img { margin: 1.5em 0em; max-width: 100%; height: auto; } } @media only screen and (max-width: 380px) { .bannerText { font-size: 2.5em } .rotateBox { font-size: 2.5em } } </style>  <script type="text/javascript"> $.noConflict(); jQuery(window).load(function(){ var $ = jQuery; $('a.contact').attr('href','/app/contact/'); }); </script> <script type="text/javascript" src="/taglib/javascript/modernizr-1.7.min.js"></script> <script type="text/javascript"> var site_domain = 'www.twr360.org'; var languageId = 1; // language metadata details var lang_api_bible_language_code = 'eng'; var lang_api_bible_scripture_ref_default = ''; // if user is signed in to their My360 account, the following data will be available: var user_signed_in = 0; // boolean var user_pref_language_id = ''; var user_pref_api_bible_version = ''; var user_bible_prefs = {'':''}; </script> <script type="text/javascript" src="/javascript/ga-tracking/ga_ads_event_bindings.js"></script> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-38927975-2', 'auto'); ga('send', 'screenview'); </script> </head> <body class="page-app-videoItem-Renewal english ltr"> <div id="wrapper"> <div id="document" role="document"> <nav role="app"> <div class="inner">  </div> </nav> <section id="content"> <section id="main" role="main"> <script src="https://www.gstatic.com/firebasejs/4.2.0/firebase.js"></script> <div id="vid1" class="program-player"> <div class="vid-wrapper"> <h2>The Renewal of All Things</h2> <a class="close" onclick="hideVideo()"></a> <div class="iframe-container"> <div></div> </div> </div> </div> <div class="banner"> <div class="bannerText"> Why is there so much... </div> <div class="rotateBox"> <div class="text-one">sorrow</div> <div class="text-two">sadness</div> <div class="text-three">Abuse</div> <div class="text-four">war</div> <div class="text-five">slavery</div> <div class="text-six">famine</div> <div class="text-seven">violence</div> <div class="text-eight">addiction</div> <div class="text-nine">destruction</div> <div class="text-ten">Death</div> </div> <div class="button-wrap"> <a class="button-video" onclick="displayVideo(1)"><span class="fa"></span></a> <a class="button-pdf pdf-wrap"></a> </div> </div> <div class="section-banner" id="respond"> <span class="fa"></span>  <h2>respond</h2> </div> <h2 style="text-align:center;">Contact</h2>  <div style="width: 305px; margin: 0 auto; text-align:center;">  <form style="" action="?" method="POST"> <div id="example3"></div> <br> </form> <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer> </script> </div> <div class="section-banner" id="languages"> <span class="fa"></span>  <h2>Languages</h2> </div> <ul class="languages"></ul> <div class="section-banner" id="programs"> <span class="fa"></span>  <h2>Programs</h2> </div> <section class="ministries"> <a href="/ministry/41/stories-of-the-master"><img src="/files/library/SoM-Banner.png" alt="Stories of the Master" title="Stories of the Master"/></a> <a href="/ministry/42/heaven-and-home-hour"><img src="/files/library/HHH-Banner.png" alt="Heaven and Home Hour" title="Heaven and Home Hour" /></a> <a href="/ministry/192/word-of-god-speak"><img src="/files/library/WGS-Banner.png" alt="Word of God Speak" title="Word of God Speak" /></a> <br> <a href="http://wgsministries.org/" class ="button">WGS Ministries</a> <a href="/home" class ="button">Return to Home</a> </section> <script type="text/javascript"> // Firebase firebase.initializeApp({databaseURL: "https://twr360-dd329.firebaseio.com/"}); firebase.database().ref('/pages/knowingGod/renewal').once('value').then(function(snapshot){ var data = snapshot.val(); langList(data); var langContent = filterByLang(data); addContent(langContent); }); function filterByLang (data) { return data.filter(function(langContent) { return langContent.lang.toString() === languageId.toString(); })[0]; } // Create Languages list function langList(data) { data.map( function (lang) { if (languageId === 1) { var langName = lang.vernacularName + " (" + lang.englishName + ")"; } else { var langName = lang.vernacularName; } $('<li />').appendTo('ul.languages').append( $('<a />', { "href": "/lp-roat/?lang=" + lang.lang, "text": langName }) ); }); } // Change content for languages function addContent(lang) { if (lang) { // If PDF exists, add pdf button if (lang.pdfLink) { $('.button-wrap > a.button-pdf').attr('href', lang.pdfLink); } else { $('.button-wrap > a.button-pdf').remove() } // If Video Exists, add video button if (lang.videoId) { $('.iframe-container > div').attr('data-id', lang.videoId); } else { $('a.button-video').remove() } $('.button-wrap').show(); // YouTube API var players = document.querySelectorAll('.iframe-container div') for (var i = 0; i < players.length; i++) { new YT.Player(players[i], { playerVars: {'rel': 0,'showinfo': 0, 'jsapi':1,}, videoId: lang.videoId }); } } else { $('.button-wrap').remove(); } } // Video Modal Functionality var tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); var x = 0; function displayVideo(vidNumber) { x = document.getElementById("vid" + vidNumber); x.style.display = "block"; var iframe = x.getElementsByTagName("iframe")[0].contentWindow; func = 'playVideo'; iframe.postMessage('{"event":"command","func":"' + func + '","args":""}', '*'); return x; } function hideVideo() { var iframe = x.getElementsByTagName("iframe")[0].contentWindow; func = 'stopVideo'; iframe.postMessage('{"event":"command","func":"' + func + '","args":""}', '*'); x.style.display = "none"; } jQuery( document ).on( 'keydown', function ( e ) { if ( e.keyCode === 27 ) {hideVideo();} }); // Hide Programs Section if non-English if (languageId !== 1) { $('#programs, section.ministries').hide(); } </script> </section> </section> </div> </div> </body> </html>

CINXE.COM

Why am I Here?