@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/**@import "assets/fonts/Poppins/style.css"; **/@import "assets/fonts/Playfair_Display/stylesheet.css"; @import "assets/fonts/fontawesome/css/all.css"; body, html { --text: #111; --text2: #4D4D4D; --main_red: #800000; --offwhite: #f8f8f8; --gold: #efbd24; --color4: #ffef96; --red_accent: #810e0e; --light: #c7c7c7; --grey: #999a9b; --lght_grey: #F3F3F3; --drk_grey: #4D4D4D; --main_blue: #011F35; box-sizing: border-box; margin: 0 auto; --sans: 'Playfair Display'; font-family: Poppins, Verdana, Geneva, Tahoma, sans-serif; } body { min-height: 100vh; } /** TOP NAVIGATION MENUS **/ #nav { letter-spacing: 1px; margin: 0; padding: 0; width: 100%; top: 0; position: absolute; z-index: 255; } #top_nav { top: 0; position: fixed; width: 100%; background: var(--main_red); color: #fff; display: flex; justify-content: space-evenly; align-items: center; padding-top: 8px; padding-bottom: 8px; border-bottom: 4px solid var(--gold); } #top_nav a { font-weight: 500; color: var(--gold); text-decoration: none; font-size: 12px; text-transform: uppercase; padding-left: 10px; padding-right: 10px; &:hover { color: var(--gold); text-decoration: underline; } } nav ul { width: 100%; /* display: flex; */ list-style-type: none; margin: 0; padding: 8px 0 0 0; } nav ul li { margin: 0; padding-left: 10px; padding-right: 10px; } #logo, #logo2 { width: 400px; height: 56px; background: url('./assets/imgs/off_logo.webp'); background-repeat: no-repeat; background-size: contain; position: absolute; top: 5px; left: 50%; /*right: 50%;*/ margin-left: -200px; text-align: center; padding: 0 } .logo_div { width: 200px; /*height: 75px;*/ background: url('./assets/imgs/off_logo.webp'); background-repeat: no-repeat; background-size: contain; } #left_top_nav { flex: 1; padding-left: 2%; justify-self: left; text-align: left; } @media screen and (max-width: 596px) { #left_top_nav a { display: block; } #right_top_nav a { display: block; } #right_top_nav span { display: none; } } #right_top_nav { flex: 1; padding-right: 2%; justify-self: right; text-align: right; } nav { margin-top: 30px; padding-top: 12px; padding-bottom: 8px; padding-right: 10px; width: calc(100% - 10px); background: rgba(0, 0, 0, 0.7); color: var(--text); display: flex; justify-content: space-between; align-items: center; box-shadow: 0 4px 8px -6px rgba(0, 0, 0, 0.3); line-height: 1.1em; } nav span { display: none; } @media screen and (max-width:596px) { nav { justify-content: center; } .nav_right { text-align: right; flex: 1; overflow: hidden; } .nav_right ul { margin: 0; padding: 0; } .nav_right li { display: inline; margin: 0; padding: 0; } nav span { color: #fff; display: inline; font-size: .7em; } } @media screen and (max-width:860px) { nav { padding-top: 30px; } } nav a { color: #fff; text-decoration: none; font-size: 14px; /* font-weight: 500; */ text-transform: capitalize; &:hover { /* color: var(--main_red); */ text-decoration: underline; font-size: 16px; } } nav a:active { text-decoration: underline; } #top { margin-top: 150px; } .overlay { /* background-image: linear-gradient(to right, rgb(138, 14, 14), transparent); */ /* opacity: 0.7; */ position: absolute; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; margin: 0; box-sizing: border-box; padding: 15% 32px; line-height: 1.5; text-align: center; } header { padding: 50px 5%; } .header_inner { width: 65%; margin-bottom: 2em; } @media screen and (max-width:806px) { .header_inner { width: 100%; } } header h1 { font-size: 5vh; font-weight: 400; color: #fff; font-family: 'Playfair Display'; margin: 20px 20px 20px 0; letter-spacing: 1px; text-shadow: 3px 0px 0px rgba(0, 0, 0); } button.yellow_btn { cursor: pointer; font-size: 18px; font-weight: bold; background: var(--gold); padding: 10px 50px; border-radius: 15px; border: 0; &:hover { background: rgb(239, 189, 36, 0.8); } } button.yellow_btn a { text-decoration: none; color: var(--main_red); &:hover { color: var(--text); } } /** VIDEO BACKGROUND **/ .fullscreen-video-container { position: relative; height: 100vh; width: 100vw; overflow: hidden; display: flex; justify-content: center; align-items: center; } .fullscreen-video-container video { position: absolute; width: auto; height: auto; min-width: 100%; min-height: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1; } .fullscreen-video-content { /* background-color: rgba(255,255,255,0.8); */ padding: 30px; border-radius: 5px; } .fullscreen-video-content h1 { /* font-size: 3rem; */ /* font-weight: 700; */ margin: 0; /* color: var(--main_red); */ } /************************************************************************************/ .title { width: 90%; border-top: 2px solid var(--lght_grey); border-bottom: 1px solid var(--lght_grey); padding: 35px 5% 10px 5%; background: url('./assets/imgs/grey_art_400.webp'); background-size: 200px 70%; background-position-x: 95%; background-position-y: 100%; background-repeat: no-repeat; } .title h1 { text-align: center; font-family: 'Playfair Display'; color: var(--main_red); font-weight: 500; text-transform: capitalize; } /********************************************************************************************/ /*** FORM I A DIV (PRELAUNCH) ***/ div#main_cntr { margin: 0; display: flex; padding: 25px 4%; width: 100%; align-items: center; justify-content: center; color: var(--main); } /* #main_cntr .img_div{ background: rgb(255, 255, 255, .5); width: 270px; height: 270px; border-radius: 50%; margin-right: 25px; } #main_cntr .img_div img{ width: 270px; } */ #main_cntr .form_div { background: #fff; box-shadow: 8px 12px 18px rgba(0, 0, 0, .8); padding: 25px 30px; text-align: center; border-radius: 10px; margin-left: 25px; } #main_cntr .form_div h1 { font-weight: 600; font-style: normal; color: var(--main_red); } #main_cntr .form_div input { border: 1px solid var(--red_accent); width: 86%; padding: 10px; border-radius: 7px; margin-bottom: 6px; margin-top: 6px; } #main_cntr .form_div button { cursor: pointer; background: var(--main_red); color: #fff; font-variant: small-caps; width: 86%; padding: 7px 50px; border: 0; border-radius: 8px; font-size: 1.3em; &:hover { background: var(--red_accent); } } form a { color: #111; &:hover { color: var(--main_red); } } /*** RESPONSIVE LOGO **/ @media screen and (max-width: 878px) { #logo, #logo2 { top: 32px; width: 38%; height: auto; margin-left: calc(-19% + 10px); padding-left: 10px; } } @media screen and (max-width: 665px) { #logo2 { top: 50px; } } /**************************************************************/ /*********************** SECTION STYLES ***********************/ /*************************************************************/ /* START OF SECTION 02 STYLES */ .sect02_infobox {flex: 1; display: flex; flex-direction: column; border: 1px solid var(--light); } .sect02_img img { width: 100%; border: 0; margin: 0; } .sect02_infobox_txt { padding: 10px 15px; } .sect02_infobox h3 { color: var(--main_red); font-size: .8em; margin: 0.5em 0; } .sect02_infobox h2 { font-size: 1em; margin: 0; } .sect02_infobox button { background: var(--main); padding: 7px 15px; border-radius: 15px; color: #fff; text-transform: uppercase; border-style: none; margin-top: 10px; margin-bottom: 10px; } .sect02Wrap { display: flex; flex-direction: column; } .sect02Title { display: flex; flex-direction: column; text-align: center; align-items: center; } .sect02Title h1 { color: var(--main_red); margin: .1em 0 .7em 0; } .sect02Title h2 { margin: 25px 0 0 0; text-transform: uppercase; font-size: 1.2em; } .sect02_cols { display: flex; justify-content: space-between; } @media screen and (max-width:780px) { .sect02_cols { flex-wrap: wrap; } .sect02_infobox { margin-bottom: 40px; } } .marginright { margin-right: 12px; } .marginleft { margin-left: 12px; } @media screen and (max-width:1058px) { .marginright { margin-right: 7.5px; } .marginleft { margin-left: 7.5px; } } .marginbottom { margin-bottom: 25px; } .code-wrapper { padding: 0 5%; } /* END OF SECTION 02 STYLES */ /*********************************************************************/ /* START OF SECTION 01 STYLES */ .sect01Wrapper { width: 100%; overflow: hidden; margin-top: 80px; } .sect01Title { text-align: center; } .sect01Title h1 { margin: 0 15px 15px 15px; color: var(--main_red) } .sect01 { display: flex; justify-content: space-between; flex-wrap: wrap; } .sect01_infobx { flex: 1; display: flex; border: 1px var(--light) solid; } .bluebox { display: flex; border: 0; flex-direction: column; align-items: center; justify-content: center; background-color: var(--main_red); width: 110px; color: #fff; text-align: center; padding: 8px 0; } .bluebox h3 { font-size: 2em; margin: 0; } @media screen and (max-width:1058px) { .bluebox { padding: 2px; width: 80px; } .bluebox h3 { font-size: 1.5em; } } .sect01_desc_bx { padding: 8px 15px; color: var(--grey); flex: 1; } .sect01_desc_bx h2 { margin-top: 0; margin-bottom: 0; } .sect01_desc_bx h2 a { color: var(--text); font-size: .8em; text-decoration: none; &:hover { text-decoration: underline; } } @media screen and (max-width:785px) { .bluebox { padding: 0; width: 100%; } .sect01_infobx { flex-direction: column; } .sect01_desc_bx { text-align: center; } } @media screen and (max-width:700px) { .sect01 { flex-direction: column; } .marginright { margin-right: 0; } .marginleft { margin-left: 0; } .sect01_infobx { margin-bottom: 15px; } } /* END OF SECTION 01 STYLES */ .sect_headlines { padding-left: 5%; padding-right: 5%; } .sect_headlines h1 { color: var(--main_red); margin: .1em 0 .7em 0; font-size: 2em; text-align: center; font-weight: bold; } .sect_headlines h2 { margin: 25px 0 0 0; text-transform: uppercase; font-size: 1.2em; color: var(--text); text-align: center; font-weight: bold; } /********* SECTION 03 *****************/ .sect03 { margin-top: 25px; margin-bottom: 25px; padding-left: 5%; padding-right: 5%; } @media screen and (max-width:1018px) { .sect03 { padding-left: 2%; padding-right: 2%; } } .sec03_div { display: flex; justify-content: space-evenly; width: 100%; overflow: hidden; flex-wrap: wrap; } .sec03_div div { flex: 1; margin-bottom: 0; position: relative; } .sec03_div div img { border: 1px var(--light) solid; border-radius: 5px; width: 100%; margin: 0; margin-bottom: 0; display: block; } @media screen and (max-width:811px) { .sec03_div { justify-content: space-between; } .sec03_div .div { width: calc(33% - 16px); flex: auto; border: 2px solid #fff; } } .sec03_div .teacherinfo { width: auto; left: 5px; right: 5px; bottom: 5px; position: absolute; border-radius: 5px; background: rgb(255, 255, 255, 0.7); text-align: center; display: block; overflow: hidden; margin: 0; padding: 2px; text-transform: capitalize; line-height: .8em; border: 2px solid #fff; } .sec03_div .teacherinfo a { text-decoration-style: dotted; &:hover { color: var(--main_red); padding-left: 3px; padding-right: 3px; } color: var(--text); font-weight: 600; font-size: 14px; } .sec03_div .teacherinfo span { color: var(--main_red); font-weight: 400; font-size: 11px; } /************************************************************/ .sec04 { display: flex; justify-content: space-between; padding-left: 5%; padding-right: 5%; } .sec04 .child { display: flex; flex-direction: column; } .sec04 img { width: 100%; border: 0; margin: 0; display: block; } .sec04 .txt { font-size: 12px; padding: 20px; background: var(--main_blue); color: #fff; min-height: 150px; } .sec04 .txt a { font-size: 14px; text-underline-offset: 4px; text-decoration-style: dotted; color: #fff; line-height: 2em; &:hover { text-decoration: underline; } } @media screen and (max-width:780px) { .sec04 { flex-wrap: wrap; } .sec04 .txt { margin-bottom: 40px; min-height: 50px; text-align: center; } } /*************************************************/ .sec05-wrapper { padding: 0 5%; } .sec05 { margin-top: 25px; margin-bottom: 25px; display: flex; align-items: center; justify-content: center; width: 100%; } .sec05_imgdiv { background: url(./assets/imgs/group-of-black-people.webp); background-repeat: no-repeat; background-size: cover; background-position: center; margin: 0; height: 320px; width: 300px; } .sec05_imgdiv img { margin: 0; width: 100%; /* height: 300px; */ display: block; } .sec05_txtdiv { text-transform: capitalize; align-content: center; height: 312px; overflow: hidden; flex: 1; margin: 0; background: var(--drk_grey); color: #fff; border-top: 8px solid var(--main_red); padding: 0 25px; font-size: 1.4em; letter-spacing: 1.5px; } .sec05_txtdiv h1 { text-transform: none; margin: 0 0 20px 0; font-family: 'Playfair Display'; letter-spacing: 2.5px; font-size: 1.6em; } @media screen and (max-width:984px) { .sec05_txtdiv { height: 230px; font-size: 1.2em; } .sec05_txtdiv h1 { font-size: 1.2em; } .sec05_imgdiv { height: 238px; width: 250px; } } @media screen and (max-width:758px) { .sec05_imgdiv { width: 160px; } } @media screen and (max-width:652px) { .sec05 { flex-direction: column; } .sec05_txtdiv { padding-top: 25px; padding-bottom: 25px; text-align: center; height: auto; font-size: 1.2em; } .sec05_txtdiv h1 { font-size: 1.4em; } .sec05_imgdiv { width: 100%; height: auto; } .sec05_imgdiv img { width: 100%; height: 200px; } } /*********************************************/ .sec06 { text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; background: url('./assets/imgs/bg_gry.webp'); background-repeat: no-repeat; background-size: cover; color: #fff; padding: 25px 40px; min-height: 200px; } .sec06 span { font-size: 1.3em; } .sec06 h1 { text-transform: uppercase; font-size: 2.5em; text-shadow: 3px 3px 0px rgba(0, 0, 0); margin-bottom: 10px; } .sec06 p { text-align: center; padding: 15px; background: var(--main_red); border: 2px solid #fff; text-transform: uppercase; } .sec06 a { color: #fff; text-decoration: none; &:hover { text-decoration: underline; color: var(--gold); } } /*********************************************************/ .sec07 { margin-top: 25px; margin-bottom: 25px; display: flex; width: 100%; align-items: center; justify-content: space-between; } .sec07 .txt_div { border-top: 8px solid var(--main_red); height: 222px; background: var(--lght_grey); padding: 35px; flex: 1; } .sec07 .txt_div h1 { font-family: var(--sans); color: var(--main_red); text-transform: capitalize; margin: 0 0 15px 0; } .sec07 .txt_div p { line-height: 1.5em; color: var(--drk_grey); margin-bottom: 10px; } .sec07 .txt_div a { color: var(--main_red); text-decoration: none; font-size: 1.3em; text-transform: capitalize; font-weight: bold; &:hover { text-decoration: underline; } } .sec07 .img_div { flex: 1; background: url(./assets/imgs/018.webp); background-repeat: no-repeat; background-size: cover; } .sec07 .img_div img { margin: 0; height: 300px; display: block; } @media screen and (max-width:1118px) { .sec07 .txt_div { height: 272px; padding: 15px 30px; } .sec07 .img_div img { height: 310px; } .sec07 .img_div { flex: none; } } @media screen and (max-width:905px) { .sec07 .img_div img { height: 310px; width: 250px; } } @media screen and (max-width:826px) { .sec07 .txt_div h1 { font-size: 1.8em; } .sec07 .txt_div a { font-size: 1.1em; } .sec07 .img_div img { height: 310px; width: 200px; } } @media screen and (max-width:718px) { .sec07 .txt_div h1 { font-size: 1.5em; } .sec07 .txt_div p { font-size: .9em; } } @media screen and (max-width:642px) { .sec07 { flex-direction: column; } .sec07 .img_div { width: 100%; /* border: 2px solid var(--text); */ } .sec07 .img_div img { width: 100%; margin: 0; display: block; } } /*********************************************************/ .sec08-wrapper { border-top: 7px solid var(--main_red); padding: 25px 8% 60px 10%; background: var(--lght_grey); } .sec08-wrapper h1, .sec11-wrapper h1 { text-align: center; font-weight: 500; color: var(--drk_grey); margin-bottom: 0; text-transform: uppercase; } .sec08, .sec11 { display: flex; width: 100%; /* background: var(--lght_grey); */ } a.sm { font-size: 1em !important; color: var(--text) !important; text-transform: none !important; } .sec08 div, .sec11 div { flex: 1; } .sec08 .txt_div { background: #fff; padding: 5px 25px 25px 25px; } .sec08 div img, .sec11 div img { width: 100%; display: block; } .sec08 h1, .sec11 h1 { font-size: 1.1em; color: var(--main_red); } .sec08 p, .sec11 p { margin-bottom: 8px; margin-top: 8px; } .sec08 a, .sec11 a { text-transform: uppercase; letter-spacing: 1px; text-decoration: none; font-weight: 600; color: var(--red_accent); &:hover { text-decoration: underline; } } @media screen and (max-width:760px) { .sec08-wrapper { width: 94%; padding: 25px 3% 60px 3%; } .sec08 p { font-size: .9em; } } @media screen and (max-width:558px) { .sec08, .sec11 { flex-direction: column; } .sec08 div, .sec11 div { margin: 0 !important; } } /*********************************************************/ .sec09 { margin: 0 4px; display: flex; background: #fff; align-items: center; color: var(--drk_grey); padding: 22px 12% 18px 12%; border: 1px solid var(--light); flex-wrap: wrap; } .sec09 h1 { font-family: var(--sans); font-size: 1.3em; color: var(--main_red); font-weight: 400; } .sec09 a { text-transform: uppercase; color: var(--main_red); } /*********************************************************/ .sec10 { display: flex; justify-content: center; margin-left: 4px; margin-right: 4px; overflow: hidden; border: 1px solid var(--light); } .sec10 img { width: 20%; border-right: 2px solid #fff; border-left: 2px solid #fff; display: block; } /*********************************************************/ .sec11 .txt_div { background: var(--lght_grey); padding: 5px 10px 25px 10px; font-size: .9em; } .sec11-wrapper { margin-top: 60px; border-top: 5px solid var(--main_red); border-bottom: 5px solid var(--main_red); padding: 25px 5% 60px 5%; width: calc(90%); background: #fff; } @media screen and (max-width:835px) { .sec11-wrapper { padding: 25px 2% 60px 2%; width: calc(96%); } } /*********************************************************/ .sec12-wrapper { padding: 25px 2%; background: var(--lght_grey); text-align: center; } /*********************************************************/ .sec12-wrapper .vid_div { margin: 25px 5%; display: flex; width: 90%; justify-content: space-between; } .sec12-wrapper .vid_div .vid1 { background: url(assets/imgs/drb.anderson.webp); } .sec12-wrapper .vid_div .vid2 { background: url(assets/imgs/jmlakl_index.webp); } .sec12-wrapper .vid_div .vid3 { background: url(assets/imgs/tanyataylorcpa_index.webp); } .sec12-wrapper .vid_div .vid4 { background: url(assets/imgs/toureshow_index1.webp); } .sec12-wrapper .vid_div .vid1, .sec12-wrapper .vid_div .vid2, .sec12-wrapper .vid_div .vid3, .sec12-wrapper .vid_div .vid4 { background-size: cover; background-repeat: no-repeat; background-position: center; } .sec12-wrapper .vid_div div { flex: 1; } @media screen and (max-width:789px) { .sec12-wrapper .vid_div div { margin: 0 2px; } } .sec12-wrapper .vid_div img { width: 100%; display: block; } @media screen and (max-width: 300px) { .sec12-wrapper .vid_div { flex-direction: column; } } /*********************************************************/ .sec13 { display: flex; flex-direction: column; align-items: center; width: 100%; background: #fff; text-align: center; border-top: 5px solid var(--lght_grey); border-bottom: 5px solid var(--lght_grey); } .sec13 h1 { text-transform: capitalize; padding: 0 5%; margin: 30px 0 15px 0; } .sec13 p { margin: 0; padding: 0 8%; } .sec13 .btn{ width: 300px; text-align: center; text-transform: uppercase; background: var(--main_red); color: #fff; padding: 10px 20px; margin: 20px 8% 50px 8%; } /*********************************************************/ .three_col_banner, .three_col_banner2 { display: flex; align-items: center; justify-content: space-between; background: var(--gold); color: #111; } .three_col_banner2 { width: 96%; padding: 70px 2% 35px 2%; } .three_col_banner { width: 96%; padding: 10px 2%; } .three_col_banner h1, .three_col_banner2 h1 { margin: 0; padding-right: 30px; } p.threecol_middiv { flex: 1; } .three_col_banner .btn, .three_col_banner2 .btn { margin-left: 30px; text-align: center; text-transform: uppercase; background: var(--main_red); color: #fff; padding: 10px 20px; } .btn a { text-decoration: none; color: #fff; &:hover { text-decoration: underline; } } .three_col_banner .btn i { color: var(--gold); } @media screen and (max-width:996px) { .three_col_banner2 { padding: 90px 2% 35px 2%; width: 96%; } .three_col_banner { padding: 10px 2%; } .three_col_banner2 h1 { font-size: 1.7em; margin-right: 10px; } .three_col_banner h1 { padding-right: 10px; } .three_col_banner .btn { margin-left: 10px; padding: 8px 10px; } } @media screen and (max-width:858px) { .three_col_banner h1 { font-size: 1.6em; } p.threecol_middiv { font-size: .9em; } .three_col_banner .btn a { font-size: 1em; } } @media screen and (max-width:773px) { .three_col_banner { flex-direction: column; padding: 17px 5% 27px 5%; width: 90%; } .three_col_banner h1 { font-size: 2.3em; } p.threecol_middiv { font-size: 1.3em; } } @media screen and (max-width:700px) { .three_col_banner2 h1 { font-size: 1.5em; } .three_col_banner2 .btn a { font-size: .9em; } } @media screen and (max-width:665px) { .three_col_banner2 { padding-top: 150px; padding-bottom: 18px; flex-direction: column; text-align: center; justify-content: center; align-items: center; } .three_col_banner2 h1 { font-size: 2.5em; margin: 0; padding: 0; } .three_col_banner2 .btn a { margin: 0; padding: 0; font-size: 1.2em; } #logo2 { top: 50px; } } /*********************************************************/ /*********************************************************/ .footer_widget { bottom: 0; position: relative; color: #fff; display: flex; align-items: center; justify-content: center; flex-direction: column; width: 100%; min-height: 300px; background: url(assets/imgs/810e0e_library.webp); background-repeat: no-repeat; background-size: cover; } .footer_content { display: flex; flex-direction: column; align-items: center; /* justify-content: center; */ width: 94%; padding: 25px 3%; } .footer_widget h1 { letter-spacing: 2.5px; text-shadow: 3px 0px 0px rgba(0, 0, 0); text-align: center; } @media screen and (max-width:925px) { .footer_widget h1 { letter-spacing: 1.5px; font-size: 1.8em; } } .footer_logo { background: url(assets/imgs/off_logo.webp); background-repeat: no-repeat; background-size: 100%; } .footer_logo img { width: 380px; height: 53px; } .footer_menu { /* nmww */ display: flex; /* align-items: center; */ justify-content: space-between; /* text-align: center; */ width: 100%; margin: 0; /* padding: 5px 2%; */ } /*********** nmw **************/ .footer_menu ul { margin-top: 0; margin-bottom: 0; display: flex; list-style-type: none; text-align: center; align-items: center; justify-content: center; } .footer_menu ul a { text-decoration: none; color: #fff; text-transform: capitalize; &:hover { text-decoration: underline; } } .footer_menu ul li { margin: 0 10px 0 0; } .footer_menu ul li::after { content: " /"; } .noslash { margin-top: 5px; } /** FOOTER **/ footer { background: rgb(17, 17, 17, .4); color: #fff; bottom: 0; position: absolute; width: 96%; text-align: center; padding: 7px 2% 5px 2%; margin: 0; font-size: 12px; } footer a { color: #fff; } footer a.login { color: var(--gold); border: 1px solid var(--gold); margin-left: 15px; } @media screen and (max-width:884px) {.footer_widget h1 {font-size: 1.1em; padding-bottom: 50px} .footer_menu { width: 100%; flex-direction: column; justify-content: center; align-items: center; } footer, .footer_content, .footer_menu { padding: 0; margin: 0; width: 100%; } .footer_copy { order: 2; background: #000; flex: 1; width: 100%; margin: 0; padding-top: 10px; padding-bottom: 3px; } /* .footer_content { width: 100%; } */ .footer_links { width: 100%; text-align: center !important; padding-top: 10px; padding-bottom: 3px; } .footer_links ul { flex: 1; width: 100%; text-align: center !important; margin: 0; padding: 0; align-self: center !important; justify-self: center !important; } } /***************************************/ #directory_main { display: flex; width: 96%; color: var(--text); padding: 30px 2%; } #directory_main .sidelinks { margin: 0 20px 0 0; padding: 0; width: 30%; } #directory_main .sidelinks a { text-decoration: none; color: var(--text); &:hover { text-decoration: underline; } } #directory_main .sidelinks ul, #directory_main .sidelinks h2 { margin: 0; } #directory_main .sidelinks ul { list-style-type: none; } #directory_main .sidelinks ul, #directory_main .sidelinks ul li { margin: 0; padding: 0; } #directory_main .sidelinks ul li { margin-bottom: 5px; } #directory_main .sidelinks h2 { text-align: left; padding: 0 0 15px 0; color: var(--main_red); font-size: 1.2em; font-weight: 500; } #directory_main .dir_table { margin-top: 0; flex: 1; } #directory_main h1 { /* font-weight: 500; */ padding-top: 0; margin-top: 0; text-align: center; } #directory_main .dir_table table { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; } #directory_main .dir_table table th { background-color: var(--main_red); color: #fff; } #directory_main .dir_table table th, #directory_main .dir_table table td { /** nw was just td **/ padding: 7px; border: 1px solid #DFDFE2; } @media screen and (max-width:969px) { #directory_main .dir_table table th, #directory_main .dir_table table td { font-size: .9em } #directory_main .sidelinks { font-size: .8em; width: 100%; } } @media screen and (max-width:858px) { #directory_main .dir_table table th, #directory_main .dir_table table td { font-size: .8em } } /***** HEEEEEEEEEEEEEEEEEER ************/ @media screen and (max-width:744px) { #directory_main{ flex-direction: column; } #directory_main .sidelinks { order: 2; } #directory_main .sidelinks ul{ text-align: center; } #directory_main .sidelinks h2{ width: 100%; text-align: center; margin-top: 25px; font-size: 2em; } #directory_main .sidelinks ul li{ display: inline; line-height: 1.5em; } #directory_main .sidelinks ul li::after{ content: " | "; white-space: pre; } } /****************************************************/ .rtext { color: var(--main_red); } .rtext a { color: var(--main_red); } .pagination { width: 100%; display: flex; justify-content: center; bottom: 0; } .pagination2 { width: 100%; display: flex; justify-content: center; } .pagination .active a { background: var(--main_red); border-radius: 3px; color: #fff; padding-left: 8px; padding-right: 8px; } .pagination ul { list-style-type: none; display: flex; } .pagination li a { color: var(--text); text-decoration: none; padding: 5px 7px; &:hover { color: var(--main_red); } } /******************************************************************/ .general_div { padding: 30px 8%; line-height: 1.6em; color: var(--text2); font-size: 1.1em; } .profile_gall { width: 100%; background-color: var(--lght_grey); display: flex; flex-direction: column; justify-content: center; align-items: center; margin-bottom: 50px; padding-top: 25px; } .profile_gall h1 { /* padding-top: 25px; */ margin: 0; text-transform: uppercase; font-weight: 500; text-align: center; } .profile_gall .irow { display: flex; flex-wrap: wrap; width: 97%; color: var(--text2); line-height: 1.3em; padding-top: 25px; padding-bottom: 25px; padding-left: 3%; justify-content: center; align-items: start; } .profile_gall .irow_cntr { flex: 1; } .pimg_div { width: 110px; padding: 0; } .ptxt_div { flex: 1; font-size: .9em; padding: 0 18px 0 3%; font-weight: 400; align-self: center; margin: 0; justify-self: flex-end; } .pimg_div img { width: 100%; margin: 0; padding: 0; border-radius: 50%; } .profile_gall .profile_cntr { display: flex; width: 100%; margin: 0; padding: 0; } .profile_gall .irow div a { text-decoration-style: dotted; color: var(--main); font-size: 1.1em; font-weight: 500; &:hover { color: var(--main_red); } } @media screen and (max-width:750px) { .pimg_div { width: 80px; } .ptxt_div { font-size: .8em; padding: 0 1%; } } /*******************************************************/ .privacy_div { background-color: var(--offwhite); padding: 50px 8%; color: var(--text2); line-height: 1.5em; } .privacy_div h2 { margin-top: 50px; } span.showInsCount { right: -80%; overflow: hidden; top: -40px; position: relative; font-weight: 500; color: var(--main_red) } @media screen and (max-width: 848px) { span.showInsCount { right: -40%; top: 0; } } a.offlink { /* text-decoration: underline; */ color: var(--gold); font-weight: 400; font-size: 12px; font-style: italic; &:hover { font-size: 12px; color: #fff; } } @media screen and (max-width: 596px) { a.offlink { font-size: .7em; } } #contact { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 50px 12%; } #contact form { background: var(--offwhite); padding: 30px 70px 30px 50px; } #contact h1 { text-align: center; } #contact input[type='text'], #contact input[type='email'], #contact textarea { display: block; padding: 5px; border-radius: 7px; margin-bottom: 10px; border: 0; width: 100%; background: #eee8d6; ; } #contact label { color: var(--main_red); text-transform: uppercase; margin-bottom: 10px; } /** THIS IS A SPAM PREVENTER - CLASS NAME IS NOT RELEVANT TO PURPOSE **/ .required { display: none !important; } #contact a { color: var(--text); } .contactMsg { width: calc(100%-90px); border-radius: 10px; background: var(--offwhite); color: var(--main_blue); font-weight: 600; font-size: 1em; font-variant: small-caps; text-align: center; padding: 15px 30px; margin-bottom: 25px; letter-spacing: 1px; } /** USED FOR SEC11 MORE COLLAPSE/EXPAND TOGGLE **/ .sec11 p { display: inline; } p.extra { display: none; margin-top: 0; margin-bottom: 0; } .sec11 input[type="checkbox"] { margin-top: 0; /* height: 2em; */ display: block; appearance: none; } .sec11 label { position: relative; /* padding: 1em; */ color: var(--main_red); cursor: pointer; } .sec11 label:before { content: "Read More"; } .sec11 input[type="checkbox"]:checked~label:before { content: "Read Less"; } span.elipsis { letter-spacing: 2px; font-size: 1.5em; line-height: .5em; } .elipsis:has(~ input[type="checkbox"]:checked) { display: none; } .extra:has(~ input[type="checkbox"]:checked) { display: inline; } /**********************************/ .search{ width: 100%; position: relative; display: flex;background:rgb(255, 255, 255, 0.7); } .searchTerm{ width: 100%; border: 3px solid var(--main_red); border-right: none; padding: 5px; height: 20px; border-radius: 5px 0 0 5px; outline: none; color: #9DBFAF; background:rgb(255, 255, 255, 0.8);} .searchTerm:focus{ color: var(--main_blue); font-size: 1em; } .searchButton{ width: 40px; height: 36px; border: 1px solid var(--main_red); background: var(--main_red); text-align: center; color: #fff; border-radius: 0 5px 5px 0; cursor: pointer; font-size: 20px; }.searchWrap {width: 25%;position: absolute;top: 30%;left: 50%;transform: translate(-50%, -50%);}.formPrewrap {width:30%;left: 35%;position: absolute;margin-top: -40px;}@media screen and (max-width:888px) { .searchWrap { width: 50%; } .formPrewrap { width: 40%; margin-top: -30px; } #directory_main .dir_table table { margin-top: 10px; } }@media screen and (max-width:837px) {.searchWrap {top: 38%}} @media screen and (max-width:745px) { .formPrewrap { width: 50%; left: 25%; } } @media screen and (max-width:665px) {    .searchWrap {    top: 62%;    width: 60%; } }

.div_in_vid_overlay {
    width: 100%;
    height: 100vh;
    margin: 0;
    overflow: hidden;
    background: rgb(0, 0, 0, .5);
    position: absolute;
    top: 0vh;
    display: flex; 
    justify-content: center; 
    align-items: center;
}

.admiss_head_title {
    min-width: 50%;
    background: rgb(255, 255, 255, .8);
    color: #161616;
    padding: 25px;
    margin: 60px 2% 0 2%;
    border: 2.5px solid #161616;
    border-top: 15px solid #161616;
    border-bottom: 7px solid #161616;
}
.admiss_head_title h2{
    padding: 0;
    font-variant: small-caps;
    font-size: 2.8em;
    margin: 0;
    letter-spacing: 1.2px;
}

.admiss_sec1{
    background: #800000;
    color: #fff;
    font-size: 1.4em;
    font-weight: 300;
    line-height: 1.4em;
    letter-spacing: .8px;
    /* width: calc(86% - 200px); */
    width: 66%;
    overflow: hidden;
    margin: 0 7%;
    top: -45px;
    position: relative;
    padding: 50px 10%;
}
.admiss_sec1 strong em{
    font-weight: 600 !important;
}
.admiss_sec2_back{ 
    top: -100px;
    position: relative;
    background: #800000;
    /* background-image: url('./assets/imgs/online-course.webp');  */
    background-repeat: no-repeat ; 
    background-size: cover;
    width: 86%;
    margin: 50px 7% 0 7%;
    overflow: hidden;
    padding: 0;
    /* border: 2px solid #161616; */
}
.admiss_sec2{ 
    /* background: rgb(22, 22, 22, .3); */
    padding: 70px 5% 30px 5%;
    color: #fff;
    font-size: 1.3em;
    line-height: 1.4em;
    letter-spacing: .8px;

}
.admiss_sec2 span{
    background: #ffb109;
    color: #161616;  
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-style: normal;
    padding: 10px 25px;
    text-transform: uppercase;
} 
.admiss_sec2 h1{
    font-family: "Poppins", sans-serif;
    font-weight: 900;
    font-style: normal;
    font-size: 3em;
    text-transform: uppercase;
    color: #fff;
    margin: 0;
    padding: 0 0 15px 0;
}
.admiss_sec2 p{
    padding-top: 3px;
}

.admiss_twocol{
    display: flex;
    width: 86%;
    letter-spacing: 1px;
    padding: 0 7%;
}
.admiss_twocol div{
    background: #222222;
    color: #fff;
    padding: 30px;
    line-height: 1.5em;
    flex: 1;
}
.admiss_twocol div h1{
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}
.admiss_twocol_left{
    font-family: "Merriweather", serif;
    letter-spacing: 1px;
    margin-right: 10px;
}

.admiss_twocol_right{
    margin-left: 10px;
    font-family: "Merriweather", serif;
    letter-spacing: 1px;
}

.admiss_sec3{ 
    display: flex;
    width: calc(86% - 50px);
    letter-spacing: 1px;
    padding: 25px;
    background: #ffe1e1;
    margin: 50px 7% 0 7%;
    overflow: hidden;
    align-items: center;
}
.admiss_sec3_left{
    flex: 1;
    background: #fff;
    color: #232323;
    padding: 25px;
    box-shadow: 0 8px 18px 4px rgba(0, 0, 0, 0.3); 
    
}
.flx_2col_div{
    display: flex;
    width: calc(100% );
}

.admiss_sec3_left .dates, .admiss_sec3 h2{
    color: #800000;
}
.two_col_flx_dv{
    flex: 1;
    padding-right: 15px;
}

.admiss_sec3_right{
    background: none;
    width: 25%;
    margin-left: 34px;
}
@media screen and (max-width: 1192px) {
    .admiss_head_title {
    margin-top: 90px;
    box-shadow: 0 10px 18px -10px rgba(0, 0, 0, 0.9);
    }
    
}

@media screen and (max-width: 996px) {
    .admiss_head_title {
    margin-top: 130px;
    }
    
}
@media screen and (max-width: 805px) {
    .admiss_head_title {
    margin-top: 140px;
    }
    
}
@media screen and (max-width: 711px) {
    .admiss_head_title {
    margin-top: 150px;
    }
    
}
@media screen and (max-width: 650px) {
    .admiss_head_title {
    margin-top: 170px;
    }
    
}

div.regispg{
    margin-top: 80px;
    background: var(--main_red);
    color: #fff;
    padding: 50px 20%;
    width: calc(60%);
    text-align: center;
}
.regispg h1{
    font-family: "Open Sans", sans-serif;
    font-weight: 400;
    font-size: 4em;
    margin: 0;
}

.regispg h2{
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-size: 4em;
    margin: 0;
    letter-spacing: 1.2px;
    font-variant: small-caps;
}

@media screen and (max-width: 650px) {
    .regispg h1{
        font-size: 3em;
    }
    
}
form.regform input[type="text"], form.regform  input[type="email"]{
    padding: 12px !important;
    font-size: 1.1em;
}
div.regispg2{
    background: #000;
    color: #fff;
    padding: 15px 8%;
    width: calc(84%);
    text-align: center;
    font-size: 1.5em;
}
.regispform{
    /* background: #011F35; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 86%;
    padding: 0 7%;
}
.regispform code {
    font-size: 1rem;
    padding: 0 0.5rem;
    background-color: #d8dbce;
  }

.regispform .container {
    width: 100%;
    max-width: 768px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem 2rem 1.5rem;
    background-color: #d8dbce;
  }
  @media (min-width: 768px) {
  .regispform .container {
      flex-direction: row;
      align-items: center;
    }
  }
.regispform .container .cta-form {
    margin-bottom: 2rem;
    text-align: center;
  }
  @media (min-width: 768px) {
  .regispform .container .cta-form {
      margin-bottom: 0;
      margin-right: 2rem;
      text-align: left;
    }
  }
.regispform .container .cta-form h2 {
    font-size: 1.5rem;
    width: 100%;
    max-width: 25ch;
    margin: 0 auto;
    text-align: center;
  }
  @media (min-width: 768px) {
  .regispform .container .cta-form h2 {
      text-align: left;
      margin: 0;
    }
  }
  .regispform .container .cta-form p {
    margin-top: 1rem;
    font-size: 1rem;
    width: 100%;
    max-width: 24ch;
  }
  .regispform .form {
    align-self: center;
  }
  .regispform .form__input {
    width: clamp(120px, 50vw, 420px);
    height: 2.5rem;
    padding: 0 1.25rem;
    border: 1px solid #303030;
    border-radius: 2px;
    margin: 0.625rem auto;
    transition: all 250ms;
  }
  @media (min-width: 768px) {
    .regispform .form__input {
      width: clamp(120px, 35vw, 420px);
    }
  }
  .regispform .form__input:focus {
    outline: none;
    border-top-color: rgba(0, 0, 0, 0.1);
  }
  /* .regispform .form__input:focus + .form__label, .regispform .form__input:not(:placeholder-shown) + .form__label {
    transform: translateY(-4.5rem) scale(1);
    color: #303030;
  } */
  /* .regispform .form__input::placeholder {
    display: none;
    color: transparent;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
  } */
  .regispform .form__input:not(:placeholder-shown) {
    border-top-color: rgba(0, 0, 0, 0.5);
  }
  .regispform .form__label {
    font-size: 1rem;
    color: #909090;
    display: block;
    transform-origin: 0 0;
    transition: all 500ms;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
  }
    .regispform button{
    cursor: pointer;
    background: var(--main_red);
    color: #fff;
    font-variant: small-caps;
    min-width: 200px;
    padding: 7px 50px;
    text-align: center;
    border: 0;
    border-radius: 8px;
    font-size: 1.3em;

    &:hover {
        background: var(--red_accent);
    }
}