.body-sec { max-width:100%; margin-left:auto; margin-right:auto; } .jp-inner { max-width:1070px; width:90%; margin:0 auto; font-family: "Roboto", serif; } .jp-inner.full { width:95%; } #homepage h3.jp { font-size: 2em; text-align: center; margin-bottom: 1em; font-family: "Raleway", sans-serif; } /*Hero Sec */ #homepage .hero-sec { background: #176c06; padding: 0 0 0 0; position: relative; } #homepage .hero-sec .overlay { position: absolute; width:100%; height:100%; background: #000; z-index: 110; background-color: rgba(0, 0, 0, 0.1); } #homepage .hero-sec::after { background-image: url("https://jamaicanpatwah.com/assets/img/homepage/jamaican_patwah_avatar_bk.jpg"); background-repeat: no-repeat; background-position: top right; background-size: 1200px 706px; position: absolute; width: 850px; height: 100%; content: ""; top: -2px; right: 150px; bottom: 0; border: 3px solid transparent; z-index: 100;} #homepage .hero-sec .jp-inner { margin: 0 auto; padding-top: 2em;} #homepage .hero-sec .left { max-width: 600px; width: 100%; margin-top: 3em; position: relative; z-index: 999; } /* Make H1 bigger and add shadow to make it stand out */ #homepage .hero-sec h1 { font-size: 2.8em; color: #fff; font-family: "Montserrat", sans-serif; font-weight: 900; line-height: 1.4em; letter-spacing: -1px; text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6); text-transform: none; } #homepage .hero-sec h1 em { color: #ffe600; text-shadow: 0 0 10px rgba(255, 230, 0, 0.5); /* font-size: 1.15em; */} #homepage .hero-sec p.sub_desc { color: #e0ffe0; font-size: 1.4em; text-align: left; line-height: 1.6em; margin-top: 1.5em; text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5); } #homepage .hero-sec p.sub_desc i { color: #98e0ab; font-size: .8em; } #homepage .hero-sec a.cta-btn { display: block; background: #b52121; color: #fff; padding: 1.2em 1.8em; width: 250px; text-align: center;} #homepage .hero-sec a.cta-btn { font-weight: bold; font-size: 1.15em; text-transform: uppercase; border-radius: 8px; margin: 2em 0 3em 0; font-weight: bold;} #homepage .hero-sec a.cta-btn { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); letter-spacing: 0.05em; transition: background-color 0.3s ease, box-shadow 0.3s ease; } #homepage .hero-sec a.cta-btn:hover { background: #329310; text-decoration: none; box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4); } /* Top Sec ----------------------------------------- **/ /*Word of the Day*/ #homepage .top-focus-sec { display: flex;} #homepage .wft-day-container {max-width:550px; width: 100%;} #homepage .wft-day .word_of_day_label { display: inline-block; background: #37570e; color: #fff; padding: .4em 1em; font-family: 'Raleway', Helvetica, Arial; } #homepage .wft-day .word_of_day_label { margin-bottom: .5em; } #homepage .wft-day { background: #fff; padding: 2em 2em; border:2px solid #ddd; box-shadow: 1px 1px 3px -1px rgba(0,0,0,0.35);} #homepage .wft-day .cur_date { display: block; font-size: 1em; margin-top: 1em; color: #aaa; float: right; font-family: 'Raleway', Helvetica, Arial; } #homepage .wft-day dt { font-family: 'Raleway', Helvetica, Arial; font-size:1.5em; color:#333;} #homepage .wft-day dt h2 { display:inline; font-size:1.9em;} #homepage .wft-day dd { font-size:.95em;} #homepage .wft-day dd em { display:block; margin-bottom:1em; color:#61931E;} #homepage .wft-day dd p { color:#555; margin-bottom:.5em;} #homepage .wft-day dd p i { color:#888;} #homepage a.wft-link:hover { text-decoration: none;} #homepage .wft-day .get-def { display: none;} #homepage .subscribe-sec { padding: 1em; background: #444; } /* trending */ #homepage .trending-sec { margin: 0 0 0 2em; font-family: "Raleway", sans-serif;} #homepage .trending-sec h3 { font-size: 1.6em; margin-bottom: 1em; } #homepage .trending-sec ul { width: 400px; display: block; } #homepage .trending-sec li { background: #c5c5c5; width: 100px; } #homepage .trending-sec li:hover { width: 100% !important;} #homepage .trending-sec li a:hover { background: #075c1c; text-decoration: none; color: #fff !important; } #homepage .trending-sec li a { font-size: 1.1em; color: #222; white-space: nowrap; display: block; padding: .8em 1em; font-weight: bold;} #homepage .trending-sec li a span { display: inline-block; margin-right: 1em; } #homepage .trending-sec li.one { width: 95%; } #homepage .trending-sec li.two { width: 80%; background: #c5c5c5; } #homepage .trending-sec li.three { width: 70%; background: #ccc; } #homepage .trending-sec li.four { width: 60%; background: #ddd; } #homepage .trending-sec li.four a { color: #444; font-size: 1em;} #homepage .trending-sec li.five { width: 50%; background: #e1e1e1; } #homepage .trending-sec li.five a { color: #888; font-size: 1em;} #homepage .trending-sec li.six { width: 40%; background: none; border: none; } #homepage .trending-sec li.six a { color: #888; font-size: 1em;} #homepage .trending-sec a.browse { float: right; font-weight: bold; color: #2E882D; font-size: .9em;} /*Translator Demo -----------------------------------------*/ #homepage .translator-demo-sec-bg {background: #244625; } #homepage .translator-demo-sec { padding: 3em 1em 2em 1em; } #homepage .translator-demo-sec hgroup { text-align: center; color: #fff;} #homepage .translator-demo-sec hgroup h6{ font-size: .9em; margin-bottom: 1em; color: #ccc;} #homepage .translator-demo-sec hgroup h4 { font-size: 1.7em; font-family: "Raleway", sans-serif;} #homepage .translator-demo-sec input#translator_demo_text { max-width: 650px; width: 95%; margin: 1em auto; display: block; border-radius: 5px; font-size: .9em;} #homepage .translator-demo-sec input#translator_demo_text { height: 30px; padding: .4em; text-align: center;} #homepage .translator-demo-sec a#translator_demo_link { border-radius: 5px; border: 1px solid #46A045; padding: .6em 1em; background: #2E882D; } #homepage .translator-demo-sec a#translator_demo_link { color: #fff; max-width: 100px; width: 100%; text-align: center; font-family: "Trebuchet MS", Helvetica, sans-serif; font-size: .8em; display: block; margin: 1em auto;} /* patwah-academy-sec -----------------------------------------*/ #homepage .patwah-academy-sec-bg {background: #fff; } #homepage .patwah-academy-sec h2 { font-size: 2em; padding: 1em 0 .4em 0; color: #444;} #homepage .patwah-academy-sec p { font-size: .85em; max-width: 700px; color: #666; line-height: 1.5em;} #homepage .patwah-academy-sec a.featured-article { display: flex; background: #f1f1f1; padding: 1em; } #homepage .patwah-academy-sec a.featured-article:hover {text-decoration: none; } #homepage .patwah-academy-sec a.featured-article .left { width: 100%; max-width: 400px; margin-right: 2em;} #homepage .patwah-academy-sec a.featured-article .left img { width: 100%; } #homepage .patwah-academy-sec a.featured-article .right h6 { font-size: 1.6em; margin-bottom: .5em; color: #329310; margin-top: 2em;} #homepage .patwah-academy-sec a.featured-article .right p { font-size: .9em; margin-bottom: 1em;} #homepage .patwah-academy-sec a.featured-article .right span { color: #3f93f3; font-size: .9em;} #homepage .patwah-academy-sec .join-academy { background: #ddd; margin-top: 1em; padding: 2em 1em; } #homepage .patwah-academy-sec .join-academy .jp-inner {display: flex; align-items: center; justify-content: space-between; } #homepage .patwah-academy-sec .join-academy p { width: 90%; font-size: 1em; } #homepage .patwah-academy-sec .join-academy p em { font-weight: bold; display: inline-block; font-family: "Raleway", sans-serif; color: #444; font-size: 1.2em; margin-bottom: .5em;} #homepage .patwah-academy-sec .join-academy a { display: block; font-size: 1em; background: #444; color: #fff; padding: 1em; width: 240px; margin-left: 2em;text-align: center; font-weight: bold; border-radius: 25px; } #homepage .patwah-academy-sec .join-academy a:hover { text-decoration: none; background: #1a68b0;} /*Define it here*/ #homepage .add_word_master_sec { border:4px solid #2b8040; border-left: none; border-right: none; background: #333; margin: 0;} #homepage .add_word_master_sec .item { width: 100%; max-width: 90%; } #homepage .add_word_sec_br { display: none;} #homepage .add_word_master_sec .add-word { background: #333; padding: 2em 1em; text-align: center; display: table;} #homepage .add_word_master_sec .add-word hgroup { display: table-cell; vertical-align: middle;} #homepage .add_word_master_sec .add-word h6 { font-size:.9em; color:#aaa; margin-bottom:.5em;} #homepage .add_word_master_sec .add-word h2 { font-size:1.5em; color:#ccc; font-family: "Raleway", sans-serif;} #homepage .add_word_master_sec .add-word h2 a { text-decoration:underline; color: #8abd48; display: inline-block; margin-top: 0.3em;} /* quiz-sec --------------------------------------*/ #homepage .quiz-sec { padding: 1em 0;} #homepage .quiz-sec .view-all-quiz { margin: 1em auto 0 auto; display: block; font-size: .8em; color: #fff; width: 120px;} #homepage .quiz-sec .view-all-quiz { background: #1a68b0; padding: .8em 1em; text-align: center; border-radius: 15px;} #homepage .quiz-sec .content { display: flex; justify-content: space-between; } #homepage .quiz-sec .content a.item { display: block; width: 48%; background: #fff; border: 1px solid #ddd;} #homepage .quiz-sec .content a.item:hover { text-decoration: none;} #homepage .quiz-sec .content .item img { display: block; width: 100%; } #homepage .quiz-sec .content .item em { font-size: 1.3em; display: block; margin: 1em 1em 1em 1em; color: #444; } #homepage .quiz-sec .content .item p { font-size: .9em; color: #777; margin: 0 1em; line-height: 1.7em;} #homepage .quiz-sec .content .item span.play { font-size: 1em; margin: 1.5em 1em; display: block; color: #cb1913; } /* download-app-sec --------------------------------------*/ #homepage .download-app-sec { background: #555; padding: 2em 0 1em 0;} #homepage .download-app-sec h3 { color: #ddd;} #homepage .download-app-sec .item { width: 50%; background: #eee; border: 1px solid #bbb; padding: 1em;} #homepage .download-app-sec .item img { width: 100%; display: block;} #homepage .download-app-sec .item em { display: block; font-size: 1.3em; margin-bottom: 1em; text-align: center;} #homepage .download-app-sec .item p { font-size: .9em; color: #555; margin-bottom: 1em; text-align: center; display: block;} #homepage .download-app-sec .item a.btn { width: 200px; margin: 0 auto; display: block; } #homepage .download-app-sec .item a.btn img { width: 100%;} @media screen and (max-width: 1300px) { #homepage .hero-sec::after { background-size: 1100px 606px; width: 850px; top: -2px; right: 0px; bottom: 0; } } @media screen and (max-width: 1170px) { #homepage .hero-sec .overlay { background-color: rgba(0, 0, 0, 0.8); } } @media screen and (max-width: 800px) { /*Hero Sec */ #homepage .hero-sec { padding: 0; margin:0; border: 1px solid transparent; } #homepage .hero-sec .jp-inner { padding: 0; margin: 0; } #homepage .hero-sec .left { margin: 0; max-width: 97%; padding: 5em 1.5em 1.5em 1.5em; } #homepage .hero-sec h1 { font-size: 2em; } #homepage .hero-sec p.sub_desc { font-size: 1.2em; } #homepage .hero-sec::after { background-size: 900px 506px;} #homepage .hero-sec .jpNewsletterSubscriber_v_2 fieldset input { width: 90%;} /* browse */ #homepage .trending-sec a.browse { float: none; font-weight: bold; color: #fff; font-size: .96em; background: #0f4f8a; padding: .8em;} #homepage .trending-sec a.browse { margin: 1em auto 0 auto; display: block; width: 180px; border-radius: 10px; text-align: center; } #homepage .trending-sec a.browse:hover { background: #329310; text-decoration: none;} } @media screen and (max-width: 690px) { /*Hero Sec */ #homepage .hero-sec { } #homepage .hero-sec .jp-inner { } #homepage .hero-sec .left { } #homepage .hero-sec .jpNewsletterSubscriber_v_2 fieldset a { margin-bottom: 2em;} #homepage .hero-sec h1 { } #homepage .hero-sec p.sub_desc { } } @media screen and (max-width: 800px) { /*Word of the Day ------------------------------*/ #homepage .top-focus-sec { display: block;} #homepage .wft-day-container {max-width:950px; width: 100%;} /* trending */ #homepage .trending-sec { margin: 2em auto 1em auto; max-width: 450px; width: 90%; } #homepage .trending-sec ul { width: 370px; } /* patwah-academy-sec -----------------------------------------*/ #homepage .patwah-academy-sec h2 { font-size: 1.7em;} #homepage .patwah-academy-sec a.featured-article { display: block; } #homepage .patwah-academy-sec a.featured-article .right h6 { margin-top: 1em;} #homepage .patwah-academy-sec .join-academy .jp-inner { display: block; align-items: center; justify-content: space-between; } #homepage .patwah-academy-sec .join-academy p { margin-bottom: 2em; text-align: center;} #homepage .patwah-academy-sec .join-academy p em { margin-bottom: .7em; } #homepage .patwah-academy-sec .join-academy a { margin: 0 auto; } /* download-app-sec --------------------------------------*/ #homepage .download-app-sec .item { width: 90%;} #homepage .download-app-sec .item img { width: 100%; display: block;} #homepage .download-app-sec .item em { display: block; font-size: 1.3em; margin-bottom: 1em; text-align: center;} #homepage .download-app-sec .item p { font-size: .9em; color: #555; margin-bottom: 1em; text-align: center; display: block;} #homepage .download-app-sec .item a.btn { width: 200px; margin: 0 auto; display: block; } #homepage .download-app-sec .item a.btn img { width: 100%;} } @media screen and (max-width: 510px) { #homepage .wft-day dt h2 { font-size:1.4em;} #homepage .wft-day dd { display: none;} #homepage .wft-day .get-def { display: block; margin-top: 1.5em; font-size: .95em; color: #777; font-weight: bold;} /* quiz-sec --------------------------------------*/ #homepage .quiz-sec .content { display: block; } #homepage .quiz-sec .content a.item { display: block; width: 90%; margin-bottom: 2em;} }