/* Safari 4.0 - 8.0 */ @-webkit-keyframes fadeIn { 0% {opacity: 0} 33% {opacity: 0} 100% {opacity: 1}} /* Standard syntax */ @keyframes fadeIn { 0% {opacity: 0} 33% {opacity: 0} 100% {opacity: 1} } h1 {color: #fff; margin: 6px 0 10px 0; font-size: 1.8rem; line-height: 1.2rem} h2 {color: #fff; margin: 6px 0 10px 0; font-size: 1.8rem; line-height: 1.2rem} h3 {color: #fff; margin: 0 0 6px 0; font-size: 1.5rem;} p {color: #fff; margin: 0; font-size: 1.2rem;} ul li {color: #fff; margin: 0 0 6px; font-size: 1rem;} #global-container, #home-background {width: 100%; height: 100%;} #global-container.home {background: #1f1f1f;} #logo {position: absolute; left: 160px; top: 20px;} ul.widgetA {list-style: disc !important; padding: 6px 0 0 1.5rem !important;} ul.widgetA li {list-style: disc !important; margin: 0 0 2px !important; font-size: 1rem !important;} ul.widgetA li a {color: #fff;} #home-background {background: #666666; z-index:1; animation-name: fadeIn; animation-duration: 1.5s;} #nav-school-building, #nav-sfw {display: none;} nav { position: absolute; bottom: 20px; left: 0px; background: rgba(0,0,0,0.6); z-index: 2; margin: 0; padding: 0; height: 200px; width: 920px; transition: all .5s; transition: height 0s; z-index: 10000; animation-name: fadeIn; animation-duration: 2.5s;} nav > ul > li {position: absolute; bottom: 10px; display: block; width: 180px; min-height: 180px; margin: 10px 10px 0px 0px; list-style: none; color: #fff; transition: padding 1s; padding: 10px; font-size: 20px; font-weight: 400;} .nav-height {padding-bottom:140px !important; transition: padding .3s !important;} nav > ul > li > a {color: #fff; text-decoration: none; cursor: default} nav > ul > li:first-child {display:none;} nav > ul > li:nth-child(2) {left: 160px; background-color: #4098a5; background: url(../images/nav-bg-1.jpg) bottom no-repeat;} nav > ul > li:nth-child(3) {left: 350px; background-color: #9e63e8; background: url(../images/nav-bg-2.jpg) bottom no-repeat;} nav > ul > li:nth-child(4) {left: 540px; background-color: #38a85d; background: url(../images/nav-bg-3.jpg) bottom no-repeat;} nav > ul > li:nth-child(5) {left: 730px; background-color: #d98e6d; background: url(../images/nav-bg-4.jpg) bottom no-repeat;} nav > ul > li > ul {display: none; padding: 14px 0px 0px;} nav > ul > li > ul > li {list-style: none; margin: 0; padding:0; font-size: 14px; font-weight: 300} nav > ul > li > ul > li > a {display: block; color: #fff; text-decoration: none; line-height: 1.3rem; padding: 10px 8px 8px; margin-bottom: 5px; background: rgba(0,0,0,.2); transition: all .2s;} nav > ul > li > ul > li > a:hover {background: rgba(0,0,0,.8);} #news { position: absolute; left: 930px; bottom: 20px; background: rgba(0,0,0,0.6); width: 395px; height: 135px; padding: 14px 14px; transition: all .5s; animation-name: fadeIn; animation-duration: 3s;} /* #pods { position: absolute; left: 930px; bottom: 165px; width: 395px; height: 90px; transition: all .5s; animation-name: fadeIn; animation-duration: 3.3s;} #sunday-family-worship { position: absolute; left: 930px; bottom: 243px; width: 395px; height: 90px; transition: all .5s; animation-name: fadeIn; animation-duration: 3.3s;} .slider-box {position: absolute; left: 930px; bottom: 340px; width: 395px; background: rgba(0,0,0,0.8); padding: 14px 14px; transition: all .5s; color: #000; animation-name: fadeIn; animation-duration: 2s;} */ #pods { position: absolute; left: 930px; bottom: 20px; width: 395px; height: 90px; transition: all .5s; animation-name: fadeIn; animation-duration: 3.3s;} #sunday-family-worship { position: absolute; left: 930px; bottom: 120px; width: 395px; height: auto; transition: all .5s; animation-name: fadeIn; animation-duration: 3.3s;} .slider-box {position: absolute; left: 165px; bottom: 242px; width: auto; background: none; padding: 14px 14px; transition: all .5s; color: #000; animation-name: fadeIn; animation-duration: 2s; word-break: keep-all; text-align: left;} .bx-wrapper, .bx-viewport, .bxslider, .bxslider li {height: 100% !important; margin: 0 !important; padding: 0 !important; box-shadow: none !important; border: 0 !important; left:0 !important;} .bx-wrapper .bx-viewport {background: #ccc;} .slider-box.light h1, .slider-box.light h2, .slider-box.light p {color: #000; text-shadow: 0px 0px 10px #ffffff;} .slider-box.dark h1, .slider-box.dark h2, .slider-box.dark p {color: #fff; text-shadow: 0px 0px 10px #000000; } .slider-box h1, .slider-box h2 {font-size: 3.5rem; line-height: 4.4rem;} .slider-box p {font-size: 2rem; line-height: 2.2rem; margin-bottom: 1rem;} .slider-box p a {color: #fff; text-decoration: none;} .slider-box p a:hover {text-decoration: underline;} .slider-box a.slider-box-cta { transition: all .5s; background: #3b5ec2; color: #fff; display: inline-block; padding: 0 14px; line-height: 38px; font-size: 1.2rem; text-decoration: none; margin-top: 8px; margin-right: 8px; border: 1px solid #ffffff;} .slider-box a.slider-box-cta:hover {background: #fff; color: #3b5ec2; border: 1px solid #3b5ec2;} .bx-wrapper .bx-controls-direction a {transition: bottom 0.5s; transition: left 0.5s; top: 50%;} /* .bx-wrapper .bx-prev {left: 1410px !important; top: auto !important; bottom: 212px; margin-top: 0px !important;} .bx-wrapper .bx-next {left: 1445px !important; top: auto !important; bottom: 212px; margin-top: 0px !important;} */ .bxslider li {background-size: cover !important; background-position: center !important;} #pods a {width: 49%; margin-right: 2%; display: block; float: left;} #pods a:last-of-type {margin-right: 0} #pods a img {width: 100%; height: auto;} @media all and (max-width:1600px) { nav {height: 190px; width: 780px; bottom: 20px;} nav > ul > li {width: 170px; min-height: 170px; bottom: 10px;} nav > ul > li:nth-child(2) {left: 60px;} nav > ul > li:nth-child(3) {left: 240px;} nav > ul > li:nth-child(4) {left: 420px;} nav > ul > li:nth-child(5) {left: 600px;} #logo {left: 40px;} #news {left: 790px; bottom: 20px;} #pods {left: 790px; bottom: 20px;} #sunday-family-worship {left: 790px; bottom: 120px;} .slider-box {left: 65px; bottom: 242px;} /* #pods {left: 790px; bottom: 165px;} #sunday-family-worship {left: 790px; bottom: 243px;} .slider-box {left: 790px; bottom: 340px;} */ /* .bx-wrapper .bx-prev {left: 1110px !important; bottom: 172px;} .bx-wrapper .bx-next {left: 1145px !important; bottom: 172px;} */ } @media all and (max-width:1280px) { nav {width: 730px;} nav > ul > li:nth-child(2) {left: 10px;} nav > ul > li:nth-child(3) {left: 190px;} nav > ul > li:nth-child(4) {left: 370px;} nav > ul > li:nth-child(5) {left: 550px;} nav > ul > li > ul > li {font-size: 12px;} .nav-height {padding-bottom:50px !important; transition: padding .3s !important;} #logo {left: 10px; top: 0px;} #news {left: 740px;} #pods {left: 740px;} #sunday-family-worship {left: 740px;} .slider-box {left: 65px;} /* .bx-wrapper .bx-prev {left: 1055px !important;} .bx-wrapper .bx-next {left: 1090px !important;} */ } @media all and (max-width:1145px) { nav {height: 160px; width: 610px;} nav > ul > li {width: 140px; min-height: 140px;} nav > ul > li:nth-child(2) {left: 10px;} nav > ul > li:nth-child(3) {left: 160px;} nav > ul > li:nth-child(4) {left: 310px;} nav > ul > li:nth-child(5) {left: 460px;} nav > ul > li > ul {padding: 8px 0px;} nav > ul > li > ul > li > a:hover {background: rgba(0,0,0,.3);} #news {left: 620px;} #pods {left: 620px;} #sunday-family-worship {left: 620px;} .slider-box {left: 65px; bottom: 196px;} /* .bx-wrapper .bx-prev {left: 940px !important;} .bx-wrapper .bx-next {left: 975px !important;} */ } @media all and (max-width:1023px) { nav {height: 160px; width: 610px;} #news {left: 620px;} #pods {left: 404px; width: 364px; bottom: 182px;} #sunday-family-worship {left: 404px; width: 364px; bottom: 272px;} .slider-box {left: 0px; bottom: 190px; width: calc(100% - 370px); padding: 30px;} .slider-box h1, .slider-box h2 {font-size: 2.5rem; line-height: 3.2rem;} .slider-box p {font-size: 2rem; line-height: 2.2rem; margin-bottom: 1rem;} /* .bx-wrapper .bx-prev {left: 940px !important;} .bx-wrapper .bx-next {left: 975px !important;} */ } @media all and (max-width:767px) { #page-container {margin: 0 auto; height: auto; background: #000;} .mobile-off {display:none} .mobile-on {display:block} a.mobile-on {margin:0;} #home-background { position: relative; height: 480px; top: 60px; animation-name: fadeIn; animation-duration: 1s;} .slider-box {left: 0; width: 100%; position: absolute; top: auto; bottom: 0; padding: 30px;} .slider-box p a {color: #3b5ec2} .slider-box h1, .slider-box h2 {font-size: 2.6rem; line-height: 3.2rem;} .slider-box p {font-size: 1.8rem; line-height: 2rem; margin-bottom: 1rem;} .bx-wrapper .bx-prev {left: 0 !important;} .bx-wrapper .bx-next {right: 0 !important;} #news { left: 0px; width: 100%; top: 60px; position: relative; background: #fff; height: auto; animation-duration: 2s;} #news ul li, #news h3 {color: #000;} #news a {color: #3b5ec2;} ul.widgetA li {font-size: 1.2rem !important;} #sunday-family-worship { left: 0px; width: 100%; height: auto; top: 60px; position: relative; background: #000000; padding: 20px 20px 0px; animation-duration: 1.5s;} #sunday-family-worship img {width: 100%; height: auto; display: block;} #pods {left: 0px; width: 100%; height: auto; top: 60px; position: relative; background: #000000; padding: 20px 20px 16px; animation-duration: 1.5s;} #logo {float: none; margin: 0px 0px 0px; text-align: center; left:0 !important; top:0; width: auto; height: 60px; z-index: 15000; position: fixed} nav {width: 100%; float: none; padding: 0; margin: 0; top: 0 !important; left: 0; height: 60px; bottom: auto; animation-duration: 0s;} nav > ul {padding: 0; margin-top: 0px; display: none;} nav #mobile-nav {display: block;} nav > ul > li {position: relative; float: left; width: 100%; bottom: 0; margin: 0; font-size: 18px; padding: 15px 10px; min-height: 40px; background-image: none !important; background-repeat: repeat !important;} nav > ul > li:nth-child(2) {left: 0px; background: #4098a5 !important;} nav > ul > li:nth-child(3) {left: 0px; background: #9e63e8 !important;} nav > ul > li:nth-child(4) {left: 0px; background: #38a85d !important;} nav > ul > li:nth-child(5) {left: 0px; background: #d98e6d !important;} .nav-height {padding-bottom:10px !important;} footer {top: 60px; position: relative;} } @media all and (max-width:480px) { #global-container {height: auto;} .slider-box h1, .slider-box h2 {font-size: 2.2rem; line-height: 3.2rem;} .slider-box p {font-size: 1.5rem; line-height: 1.8rem; margin-bottom: 1rem;} #home-background {height: 460px;} #news {left: 0px; width: 100%; top: 60px; position: relative;} #pods {padding: 0 10px 10px 10px;} #pods a {width: 48.5%; margin-right: 3%;} #sunday-family-worship {padding: 10px 10px 10px;} } @media all and (max-width:320px) { h1 {color: #fff; margin: 0 0 6px 0; font-size: 1.5rem;} h2 {color: #fff; margin: 0 0 6px 0; font-size: 1.5rem;} h3 {color: #fff; margin: 0 0 6px 0; font-size: 1.5rem;} }