/*
Theme Name: ADRC LONI
Theme URI: https://adrc.usc.edu
Author: Robert De La Cruz
Author URI: https://www.loni.usc.edu
Description: The ADRC 2024 is a WordPress theme specially designed for ADRC. It is compatible with different devices. Whether it is a smartphone, tablet, laptop, or computer, it works smoothly on all devices. This multi-browser compatible WordPress theme allows the users to use it on any browser they want. Demo: https://gracethemesdemo.com/synergy/
Version: 1.0
License: GNU General Public License version 2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: adrc-loni
Requires PHP:  5.6
Tested up to: 6.5
Tags:blog, news, portfolio, one-column, two-columns, right-sidebar, block-styles, custom-colors, editor-style, custom-background, custom-menu, featured-images, template-editing, full-site-editing, block-patterns,  threaded-comments, wide-blocks, translation-ready
ADRC LONI WordPress Theme has been created by LONI USC, 2024.
ADRC LONI WordPress Theme is released under the terms of GNU GPL
*/
body { position:relative; background-color:#000; color:#fff; font-family:'Sintony Regular'; margin:0px; padding:0px; min-height: 100vh;    display: flex;     flex-direction: column;}

hr, hr.wp-block-separator, hr.has-alpha-channel-opacity { height: 1px; color: #FFCC00; background: #FFCC00; font-size: 0; border: 0;}

.wp-block-navigation ul{ padding:10px !important;}
.wp-block-navigation .has-child .wp-block-navigation__submenu-container{  background-color:#ffffff; }

body.page-template-front .ink-site-header {  width:100%; z-index:999;}
.ink-site-header{  background-color:#000; position:relative !important;}
.clear{ clear:both;}
.wp-block-post-featured-image img{ width:auto !important;}

header{ padding:0%; margin 0%; background:#990000; width:100%; min-width:1140px;}
/* = Font 
----------------------------------------------- */
@font-face {
	font-family: 'Sintony Bold';
	src: url("includes/fonts/Sintony-Bold.ttf") format("truetype");
}
@font-face {
	font-family: 'Sintony Regular';
	src: url("includes/fonts/Sintony-Regular.ttf") format("truetype");
}

@font-face {
	font-family: 'LibreBaskerville-Regular';
	src: url("includes/fonts/LibreBaskerville-Regular.ttf") format("truetype");
}
/* Menu
----------------------------------------------- */
.header {
  display: flex;
  align-items: center;
}
.menu-mainnav-container ul li:hover > ul {
    display: block;
}
.menu-mainnav-container ul ul {
    display: none;
    position: absolute;
    z-index: 99999;
    background: #990000;
    box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
	padding: 0px;
	width:240px;
	margin-top: -20px;
	line-height: 22px;
}
.menu-mainnav-container ul { line-height:88px;}

.menu-mainnav-container ul ul li{
	width:220px;
	border:1px solid #ffffff;
	padding: 10px;
	line-height: 22px;
}
.menu-mainnav-container ul ul li:hover{
	background:#000000;
}
.menu-mainnav-container li {
    position: relative;
}

#menu-mainnav {
	margin: 0 auto;
	width: 1140px;
}
.menu-mainnav-container .menu li{
	display: inline-block;
	position: relative;
}
.menu li a, .menu li a:hover {
	color:#ffffff !important;
	text-decoration:none;
	margin-right: 39px;
}
.menu li:last-child  a, .menu li:last-child  a:hover { 
margin-right: 20px;
}
ul.menu li a:hover {
	border-bottom: 2px solid #fff;
	padding-bottom:3px;
}

.sub-menu li a:hover, .menu li.no-hover a:hover {
	border-bottom: none !important;
}
.sub-menu li a, .sub-menu li a:hover { margin-right:5px;}
.menu li.no-hover img {
	margin-bottom: -14px;
}

.topheader {background-color:#000000; padding:20px 0px; display:block; }
img.btn-donate { float:right; }
.topcontainer { width: 1140px; margin:0 auto; height:40px;}

/* = Heading
----------------------------------------------- */
h2 {font-size: 48px; text-align:center; font-family:'Sintony Bold';}
h3 {font-size: 32px; font-family:'Sintony Bold';}
h4 {font-size: 18px; font-family:'Sintony Bold';}

/* = Homepage
----------------------------------------------- */
#home-desc{ position:relative; background-image: url(/wp-content/uploads/img-home-bg.jpg); height:800px; background-position: center;  background-repeat: no-repeat; background-size: cover; background-color: #000000; }
.home-yellow {color:#F7BE22; }
.home-trojan {font-family:'LibreBaskerville-Regular'; }
#home-desc h1 { font-size:60px; font-weight:700; text-align:center;margin: 30px 20px;}
.home-content {position:absolute; bottom:80px;}
.home-boxes { display:flex; flex-wrap: wrap; justify-content: center;}
.home-box1 { background-image:url(/wp-content/uploads/bg-home-box1.png); width: 496px; height:320px; border-radius:12px; border: solid 2px #ffffff; background-position: center;  background-repeat: no-repeat; background-size: cover; background-color: #000000; margin:0px 20px 40px 0px;}
.home-box2 { background-image:url(/wp-content/uploads/bg-home-box2.png); width: 496px; height:320px; border-radius:12px; border: solid 2px #ffffff; background-position: center;  background-repeat: no-repeat; background-size: cover; background-color: #000000; margin:0px 0px 40px 0px;}
.home-box3 { background-image:url(/wp-content/uploads/bg-home-box3.png); width: 496px; height:320px; border-radius:12px; border: solid 2px #ffffff; background-position: center;  background-repeat: no-repeat; background-size: cover; background-color: #000000; margin:0px 20px 40px 0px;}
.home-box4 { background-image:url(/wp-content/uploads/bg-home-box4.png); width: 496px; height:320px; border-radius:12px; border: solid 2px #ffffff; background-position: center;  background-repeat: no-repeat; background-size: cover; background-color: #000000; margin:0px 0px 40px 0px;}
.home-box { text-align:center; vertical-align:middle;}
.home-box img { margin: 50px 0px 10px;}
.home-box a, .home-box a:hover { border-radius:5px; border:solid 2px #fff; background-color:#000; color:#fff; text-decoration:none; padding:10px 20px;}
.home-qlinks { background-image: url(/wp-content/uploads/bg-home-quicklinks.jpg); height:460px; background-position: center;  background-repeat: no-repeat; background-size: cover; background-color: #000000; }
.home-qlinks a, .home-qlinks a:hover { width:246px; height:246px; border: solid 2px #fff; border-radius:5px; margin: 10px; background-color: rgba(0, 0, 0, 0.6);}
.home-qlinks-row { display:flex; justify-content: center;}
.home-qlinks img { margin:50px 0px 20px; } 
/* = Content
----------------------------------------------- */
#centercol { width: 1138px; margin:0px auto 40px;}
a { color:#ffffff; text-decoration: none;}
.highlight { font-weight:700; color: #FFCC00;}
.post { width:1038px; margin:0 auto;}
.text-yellow { color:#FFCD05; }
.yellow-block { border-radius:24px; border:solid 2px #FFcc00; padding:40px 60px; display:flex;}
.small-block { flex-basis: 33%}
.big-block { flex-basis: 60%}
.yellow-divider { margin:0 40px; border: dashed 1px #ffcc00;}
.yellow-block a,.yellow-block a:hover{margin-top:10px; background-color:#ffcc00; color:#000000; font-weight:700; border-radius: 5px; padding:10px 20px; display: inline-block; bottom:0px;}
.yellow-block a.nostyle,.yellow-block a.nostyle:hover{ background-color:transparent; color:#ffffff;font-weight:400; padding: 0px; border-radius:0px;}
.yellow-btn {margin-top:10px; background-color:#ffcc00; color:#000000!important; font-weight:700; border-radius: 5px; padding:10px 20px; display: inline-block; bottom:0px;}
.yellow-btn a {color:#000000!important; }
.al-center {text-align:center;}
.clear-spacer{ padding:10px;}
/* = Blog page Design CSS
----------------------------------------------- */
ul.blog-list-style{ margin:0; padding:0; }
ul.blog-list-style li{ margin-bottom:40px !important; border-radius:10px; background-color:#f1f1f1; padding:40px !important}
ul.blog-list-style li .blog-thumbx{ width:45%; float:left; margin:0 35px 20px 0;}
.wp-block-group.PostStyle-1, 
.wp-block-group.page-style-for-pages{  border-radius:10px; background-color:#f1f1f1; padding:40px !important;}

/* = Contact Form 7 CSS
----------------------------------------------- */
.wpcf7{ margin:30px 0 0;padding:0;}
.wpcf7 input[type="text"], 
.wpcf7 input[type="tel"], 
.wpcf7 input[type="email"]{ width:40%;border:1px solid #cccccc;box-shadow:inset 1px 1px 2px #ccc;color:#797979;margin-bottom:0;height:40px;padding:0 15px;}	
.wpcf7 textarea{color:#797979;margin-bottom:25px;border:1px solid #cccccc;box-shadow:inset 1px 1px 2px #ccc;padding:10px;width:60%;	height:160px;font-size:12px;}
.wpcf7 input[type="submit"]{border-radius:40px;font-weight:600;font-size:16px;cursor:pointer;background-color:#60c19f;padding:20px 40px;color:#ffffff;width:auto;border:none;text-transform:uppercase;}
.wpcf7 input[type="submit"]:hover{background-color:#101010;}

.welcome-leftBX{ position:relative;}
.expBX{ position:absolute; right:-30px; top:45%;}
.capTitle{ margin-top:70% !important;}

/* = Footer CSS
----------------------------------------------- */
footer{    margin-top: auto;	background-color:#990000;	min-height: 200px;	text-align:center;	font-size:12px; width:100%; min-width:1140px;}
footer hr { height: 1px; color: #FFFFFF; background: #FFFFFF; font-size: 0; border: 0;}
footer .container { width: 1140px; margin: 0 auto;}
.footer-logo { background-color:#000000; padding: 40px 0px;}
.footer-logo-padded { margin-right: 20px; }
footer ul { margin:16px 0px; padding:0px;}
.footer-top { background-color:#000000; height: 35px;}
.footer-top-container { padding-right:40px; width:1100px; text-align:right; margin: 0px auto; cursor:pointer;}
/* Footer Menu
----------------------------------------------- */
.footer-menu { display: inline-table;} 
.footer-menu ul{ display: inline;	position:relative;	margin: 0px;}
.footer-menu li { list-style:none;  text-align:left; display: inline-block; clear:both; vertical-align: top; border-right: 1px solid #ffffff; height:100%; font-weight: 700; width: 160px; margin-right:20px; height:100px;}
.footer-menu li:last-child { border:0px; }
.footer-menu ul li {	padding: 0px;	margin:0px;	list-style:none; 	text-align: left; 	font-weight: 700;height:auto;}
.footer-menu .sub-menu li { font-weight: 400; }

/* Spacing
----------------------------------------------- */
.px16 { padding: 0px 16px; }
.px20 { padding: 0px 20px; }
.px24 { padding: 0px 24px; }
.px32 { padding: 0px 32px; }
.px40 { padding: 0px 40px; }
.py16 { padding: 16px 0px; }
.py20 { padding: 20px 0px; }
.py24 { padding: 24px 0px; }
.py32 { padding: 32px 0px; }
.py40 { padding: 40px 0px; }
.pb16 { padding-bottom: 16px; }
.pb24 { padding-bottom: 24px; }
.pb32 { padding-bottom: 32px; }
.pb40 { padding-bottom: 40px; }
.pr24 { padding-right: 24px;}
.mb12 { margin-bottom: 12px;}
.mb16 { margin-bottom: 16px;}
.mb20 { margin-bottom: 20px;}
.mb32 { margin-bottom: 32px;}
.mb40 { margin-bottom: 40px;}
.mt20 { margin-top: 20px;}
.mt32 { margin-top: 32px;}
.mt40 { margin-top: 40px;}
.mx40{ margin: 40px 0px;}
.mr12 { margin-right: 12px;}
.mr16 { margin-right: 16px;}
.mr32 { margin-right: 32px;}
.mr40 { margin-right: 40px;}
.ml12 { margin-left: 12px;}
.ml16 { margin-left: 16px;}
.ml32 { margin-left: 32px;}
.ml40 { margin-left: 40px;}
.ml48 { margin-left: 48px;}

/* Panel
----------------------------------------------- */
.panel { }
.panel-left { width: 30%; display: inline-block; vertical-align: top;}
.panel-right {width: 60%; display: inline-block;vertical-align: top; border-left: solid 1px #ffffff; padding-left: 40px; min-height:520px;}
.panel-right a, .panel-right a:hover {margin-top:10px; background-color:#ffcc00; color:#000000; font-weight:700; border-radius: 5px; padding:10px 20px; display: inline-block;}
.panel-nav { padding:20px; cursor: pointer;}
.panel-active { background-color:#ffcc00; color:#000000; font-weight:700; border-radius: 5px; width: 240px;}
.post-thumb {    float: left;}
.post-thumb img { display: block;}
.post-content { margin-left: 180px;}
.panel-top {text-align:center; margin:0px auto; vertical-align:top; display:flex;justify-content: center;  align-items: center;}
.navbox { width:140px; height:140px; background-color:#000000;  text-align:center; display:inline-block; margin: 0px 20px; padding:20px; border: solid 2px #000000; color:#ffffff; font-weight:400; border:solid 2px #000000;cursor: pointer;}
.panel-top .panel-active { width:140px; height:140px; background-color:#000000;  text-align:center; display:inline-block; margin: 0px 20px; padding:20px; color:#ffffff;font-weight:400;border:solid 2px #FFCC00;}

.panel-bottom .panel-content{position: relative; height:700px; width:1000px; margin:0 auto;}
.panel-bottom img {position:absolute;  top:0px;  left:0px; }
.panel-bottom .panel-text-bottom{color: #ffffff;  height: 40%;  position:absolute;  bottom:0%;  background: rgba(0,0,0,0.6);  text-align: left; padding:20px; margin:0px;font-size:14px;}
.panel-bottom .panel-text-right {color: #ffffff;  width: 40%;  height: 100%;  position:absolute;  top:0%;  background: rgba(0,0,0,0.6);  text-align: left; padding:20px; margin:0px; right:0px; font-size:14px;}

/* IT Panel
----------------------------------------------- */
.it-navbox { font-size:12px; width:62px; display:inline-block; margin: 0px 30px;}
.it-navbox div { margin-top:5px;}
.it-navbox .it-panel-text { text-shadow: 1px 1px 2px #000000, 0 0 25px #000000,0 0 5px #000000;}
.it-panel {position: relative; height:440px; width:1000px; margin:0 auto 80px;}
.it-panel img { color:#ffffff; font-weight:400; border:solid 1px #000000; border-radius:5px;}
.it-panel-active img { color:#ffffff; font-weight:400; border:solid 2px #FFCC00!important; border-radius:8px;}
.it-panel-left img {position:absolute;  top:0px;  left:0px; }
.it-panel-left .it-panel-text { color: #ffffff;  width: 20%;  height: 100%;  position:absolute;  top:0%;  background: rgba(0,0,0,0.6);  text-align: left; padding:20px; margin:0px; font-size:14px;}
.it-panel-bottom { bottom:20px; right:60px; position: absolute;display:flex; justify-content: center;}
.it-panel-content { color:#ffffff;}

/* CS Panel
----------------------------------------------- */
.cs-navbox { font-size:12px; display:inline-block; margin: 10px 10px; cursor: pointer;}
.cs-navbox div { margin-top:5px;}
.cs-navbox .cs-panel-text { text-shadow: 1px 1px 2px #000000, 0 0 25px #000000,0 0 5px #000000;}
.cs-panel {position: relative; height:800px; width:1000px; margin:0 auto 80px;}
.cs-panel img { color:#ffffff; font-weight:400; border:solid 6px #000000; border-radius:8px;}
.cs-panel-active img { color:#ffffff; font-weight:400; border:solid 6px #FFCC00!important; border-radius:8px;}
.cs-panel-bottom img { position:absolute; }
.cs-panel-bottom .cs-panel-text { color: #ffffff;  width: 75%;  height: 100%;  position:absolute;  background: rgba(0,0,0,0.6);  text-align: left; padding:25px; margin:0px; font-size:14px; right:0px; top:0px;}
.cs-panel-top { display:flex; overflow:auto; width:1000px; margin-bottom:20px;}
.cs-panel-content { color:#ffffff; position:relative; height:555px;}
.cs-panel-text a, .cs-panel-text a:hover { bottom:15px; display:block; background-color:#ffcc00; padding:10px 20px; text-align:center; color:#000000; border-radius:8px; position:absolute;}
a.text-link, a.text-link:hover { display:inline !important; background-color: transparent!important; padding:0; bottom:0; text-align: left; position:relative; color:#FFFFFF; text-decoration:underline;}
/* CCC Panel
----------------------------------------------- */
.ccc-navbox { font-size:12px; display:inline-block; margin: 10px 10px; width:168px; height:168px; overflow:hidden;}
.ccc-navbox div { margin-top:5px;}
.ccc-navbox .ccc-panel-text { text-shadow: 1px 1px 2px #000000, 0 0 25px #000000,0 0 5px #000000;}
.ccc-panel {position: relative; height:350px; width:1000px; margin:0 auto 80px;}
.ccc-panel img { color:#ffffff; font-weight:400; border:solid 2px #000000; border-radius:8px;}
.ccc-panel-active { width: 267px; height:172px;}
.ccc-panel-active img { color:#ffffff; font-weight:400; border:solid 1px #ffffff!important; border-radius:5px;}
/*.ccc-panel-bottom img { position:absolute; }
.ccc-panel-bottom .ccc-panel-text { color: #ffffff;  width: 75%;  height: 100%;  position:absolute;  background: rgba(0,0,0,0.6);  text-align: left; padding:20px; margin:0px; font-size:14px; right:0px; top:0px;}*/
.ccc-panel-top { display:flex; overflow:auto; width:1000px; margin-bottom:20px;}
.ccc-panel-content { color:#ffffff; }
.ccc-panel-text a, .ccc-panel-text a:hover { bottom:15px; display:block; background-color:#ffcc00; padding:10px 20px; text-align:center; color:#000000; border-radius:8px; position:absolute;}

/* Cards
----------------------------------------------- */
.card-panel { display:flex;}
.rect-card-3 { width:332px; border:solid 1px #ffffff; border-radius:12px;display:inline-block;  margin:0px 10px; position: relative;}
.rect-card-3-content a, .rect-card-3-content a:hover { bottom:15px; display:block; background-color:#ffcc00; padding:5px 10px; text-align:center; color:#000000; border-radius:8px; position:absolute; width: 275px; margin-top:15px;}
.rect-card-3-content{ padding:15px 15px 35px 15px;}
.rect-card-3 img {border-top-left-radius:12px; border-top-right-radius:12px; width:100%;}

.rect-card-4 { width:242px; border:solid 1px #ffffff; border-radius:12px;display:inline-block; height:700px; margin:0px 10px; position: relative;}
.rect-card-4-content a, .rect-card-4-content a:hover { bottom:15px; display:block; background-color:#ffcc00; padding:5px 10px; text-align:center; color:#000000; border-radius:8px; position:absolute; width: 185px;}
.rect-card-4-content{ padding:15px;}
.rect-card-4 img {border-top-left-radius:12px; border-top-right-radius:12px; width:100%; background-color: #ffffff;}

/* Publications
----------------------------------------------- */
#publications input[type=text] { background: transparent; border: none; border-bottom: 1px solid #7778B0; padding: 2px 5px; margin:10px 0px 0px; color:#ffffff;}
#publications textarea:focus, #publications input:focus{ outline: none;}
#publications input[type=submit] { padding:10px 20px; background:#FFCD05; border:0 none; cursor:pointer; -webkit-border-radius: 10px; border-radius: 10px; font-weight:700; font-size:14px;}

.search-results { width:900px;  margin:40px auto;}
#result-table { width:100%; border-collapse: collapse;}
#result-table th { background-color:#FFCD05; padding:5px; color:#000;}
#result-table tr { border-bottom: 1pt solid #FFCD05; }
#result-table td {padding:10px 5px; vertical-align: top;}
.pagination { text-align:right; margin-top:20px;}
#result-table a, #result-table a:hover { text-decoration:underline; }

#cs-panel-ADAD img {width: 150px;height: 150px;background: #ffffff;}