/*
	Theme Name: UH CPIS
	Theme URI:
	Description: Based on sample theme created for the Genesis Framework.
	Author: Stacey Leong Design
	Author URI: https://staceyleong.com

	Template: genesis
	Template Version: 2.6.1

	License: GPL-2.0+
	License URI: http://www.opensource.org/licenses/gpl-license.php
	
	Text Domain: genesis-sample
*/

/*  Fonts: PT Sans, Sumana   */




:root {
	--bluejeans: #339ECC;
	--blizzardblue: #ACE3EF;
	--darkgray: #616562;
	--lightgray: #cfcfcf;
	--green: #278780;
	--junglegreen: #37AC8D;
	--fadedyellow: #F0E6AD;
	--powderblue: #B3E4E0;
	--orange: #F66634;
	--oysterbay: #D1EFEC;
	--jellybeanblue: #2474A1;
	--sand: #e6d5ab;
}

.site-container {background-image: url(/cpis/wp-content/uploads/tapa_pattern-sand.jpg);}
.site-inner {background-color: #fff;}

.page-template-page-cpis_landing-a .site-inner {margin-top: -53px;}
body.home .entry, body.home .inside-grid-column {margin-bottom: 0;}

.site-header, 
.footer-widgets,
.site-footer {
	max-width: 1600px; margin: 0 auto;
}

.site-header {
  background-image:  url(/cpis/wp-content/uploads/CPIS_home_header_bg_200x1500.jpg);
  background-color: #003262;
  background-repeat: no-repeat;
  background-size: 100%;
}

.widget-area.header-widget-area {float: left;}

ul#menu-main-menu {text-align: left;}

body.page .nav-primary {z-index: 10;}
.nav-secondary {display: inline-block;}
.genesis-nav-menu .menu-item {text-align: left;}

body.single .content-sidebar-wrap {display: flex; flex-wrap: wrap;}
body.single main {width: 65%; margin-right: 5%;}
body.single aside {width: 30%;}

.entry-content h2, .entry-content h4, .entry-content h6 {font-family: 'sumana';}
.entry-content h2 {color: #5a5a5a;}
.entry-content h4 {color: var(--green); text-transform: uppercase;}
.entry-content h3 {color: #35768E; font-weight: 600;}
.entry-content h5 {text-transform: uppercase;}
.entry-content h6 {color: #5a5a5a; font-style: italic;}


.double-column .entry-content {padding: 40px 20px 40px 40px;}

.wp-block-text-columns.columns-2.column-1_2 .wp-block-column:first-child {width:35%;}
.wp-block-text-columns.columns-2.column-1_2 .wp-block-column:last-child {width: 65%;}

.home .left_news_col {background-color: var(--blizzardblue);}
.recent_news_block h5, .recent_events_block h5 {
    height: 40px;
    color: #fff;
    padding: 8px 14px;
	 font-family: PT Sans;
	 font-weight: 700;
	 margin: 0;
	 text-align: center;
}
.recent_news_block h5 {background-color: var(--bluejeans);}
.recent_events_block h5 {background-color: var(--bluejeans);}
.recent_news_block section,  .recent_events_block section {padding: 40px;}
.recent_news_block .event_date {font-size: 1.5rem; color: var(--darkgray);}
.recent_events_block hr {margin: 0.5rem 0 1rem 0;border-top: 2px solid var(--lightgray);}
.recent_news_block hr {margin: 0.5rem 60% 1rem 0;border-top: 2px solid var(--darkgray);}
.entry-content .recent_news_block .title_link {color: #2474A1; font-weight: 700;}
.entry-content .recent_events_block .title_link {color: #000; font-weight: 700;}
.entry-content .recent_news_block h4 {margin: 0;line-height: 1.2;}
.recent_news_block .news_excerpt {margin: 0;}

.recent_news_block p.news_excerpt, .recent_events_block p.event_excerpt {
margin: 1rem 0 2.2rem 0; 
line-height: 1.3;
}
.entry-content .recent_events_block h4 {
margin: 0 0 1rem;
font-weight: 700;
font-size: 2.5rem;
}
.recent_events_block p.event_tag {
margin: 0;
font-family: Sumana;
color: var(--green);
line-height: 1.5;
}

.page-template-page-cpis_landing-a .site-inner {padding: 0;}
.page-template-page-cpis_landing-a .entry {margin-bottom: 0;}

.hero_image {height: 580px; background-repeat: no-repeat; background-size: cover;}
.hero_image .section_title_overlay {
	display: block;
	margin: 0 auto;
	width: 50%;
	text-align: center;
	top: 25%;
	position: relative;
	background-color: rgba(0, 0, 0, 0.13);
	border: 1px solid #fff;
	padding: 40px 10px;
}
.hero_image .section_title_overlay h1 {
color: #fff; 
font-family: pt sans narrow; 
line-height: 1.1; 
margin: 0;
font-size: 4rem;
text-transform: uppercase;
font-weight: 700;
}
.hero_image hr {margin: 20px 25% 0 25%; border-color: #fff;}

#genesis-mobile-nav-primary {width: 100%; background-color: rgba(0, 118, 167, 0.7);}


.custom_block-1 .left_column {
width: 60%; flex: inherit; padding: 50px; margin: 0;
background: url(/cpis/wp-content/uploads/tapa_pattern.png) no-repeat top / cover;
}
.custom_block-1 .left_column h2 {line-height: 1;color: ; font-weight: 700;}
.custom_block-1 .right_column {width:40%; flex: inherit; margin: 0;}
.custom_block-1 .right_column .wp-block-image {height: 100%;}
.custom_block-1 .right_column .wp-block-image img {object-fit: cover;height: 100%;}

.custom_block-2 {
background: var(--junglegreen) url(/cpis/wp-content/uploads/backgr-green_tapa.jpg) no-repeat top / cover;
padding: 50px;}
.custom_block-2 .left_column {width: 35%; flex: inherit;}
.custom_block-2 .left_column h2 {line-height: 1.5; color: var(--fadedyellow); font-weight: 700;}
.custom_block-2 .right_column {width: 65%; flex: inherit;}
.custom_block-2 .right_column p, 
.custom_block-2 .right_column a,
.custom_block-2 .right_column a:hover
 {color: #fff;}
 .custom_block-2 .right_column a {text-decoration: underline;}

.custom_block-3 .left_column {width: 35%; flex: inherit; margin: 0;}
.custom_block-3 .left_column .wp-block-image {height: 100%;}
.custom_block-3 .left_column .wp-block-image img {object-fit: cover; height: 100%;}
.custom_block-3 .right_column {width: 65%; flex: inherit; background-color: var(--powderblue); padding: 30px; margin: 0;}
.custom_block-3 .right_column h2 {color: ; font-weight: 700;}

.below_hero_strip {
    height: 40px;
    width: 100%;
    background: url(/cpis/wp-content/uploads/backgr_strip.jpg) no-repeat top / cover;
}

aside h4 {
    margin: 0 0 0.6rem 0;
    font-family: 'PT Sans';
    font-size: 1.7rem;
}

.entry-content li, aside li {line-height: 1.2; margin: 0 0 0.4rem 0;}

.custom_widget {
    padding: 30px;
    margin: 0 0 20px 0;
}
.icon_widget_header {display: flex;}
.icon_widget_header img {
    width: 50px;
    height: 50px;
    margin: 0 10px 0 0;
}
.sidebar .custom_widget h3 {
    line-height: 1.1;
    font-size: 2.2rem;
    font-family: 'PT Sans';
	 margin: 0 0 1.8rem 0;
}
.sidebar .custom_widget p {
    line-height: 1.2;
    font-size: 90%;
    margin: 0 0 0.6rem 0;
}
.sidebar .custom_widget a {text-decoration: underline;}

.footer-widget-area h5 {
    color: #fff;
    font-weight: 700;
    margin: 0 0 1.5rem 0;
}
.footer-widgets-1.footer-widget-area {width: 30%;}

.footer-widgets .footer-widget-area ul {margin: 0 0 2rem 0;}

.footer-widgets .footer-widget-area li {
    color: #fff;
    line-height: 1.2;
    font-size: 90%;
    list-style: none;
    margin-bottom: 1rem;
}

.footer-widgets, .footer-widgets p {color: #fff; font-size: 90%; line-height: 1.3;}

.footer-widgets .columns {display: table;}
.footer-widgets .columns div {display: table-cell; width: 50%; padding: 0 30px 0 0;}
.site-footer p {text-align: left;}

.entry-content .post_list {margin: 0;padding: 0;}
.entry-content .post_list li {
list-style: none;
margin: 0;
padding: 0;
}
.entry-content .post_list li h3 {margin: 0 0 0.2rem 0;line-height: 1.2;}
.post_list .post_date {font-size: 85%; margin: 0;}
.post_date {font-size: 90%; margin: 0 0 2rem 0;}
.post_list li p {margin-top: 1em;}


/* - - - REUSABLES - - - */

section.columns {display: table; width: 100%;}
.double-column main, .double-column aside {display: table-cell; float: none;}
.double-column .content {width: 70%;}
.double-column aside {width: 30%; padding: 40px 40px 40px 20px; vertical-align: top;}


.background-aqua main {background-color: var(--powderblue);}
.background-aqua aside {background-color: var(--oysterbay);}
.background-aqua h2 {font-weight: 700; color: ;}
.background-aqua h4 {color: ;}

.background-sand main {background-color: var(--sand);}
.background-sand aside {background-color: var(--sand);}
.background-sand h2 {font-weight: 700; color: var(--jellybeanblue);}

.no_margin .site-inner {padding: 0;}
.padded_block {margin-left: 70px; margin-right: 70px;}

h2.front_welcome_header {color: #339ECC; margin-top: 1rem; margin-bottom: 2rem;}
.custom_separator_line { border-top: 2px solid #B0DDF0; width: 150px;}

#modal_button {color: #fff; margin: 0 10px 0 15px;}
i#modal_button:hover {color: var(--orange); cursor: pointer;}


/* PLUGINS */

.lgc-grid-33 .inside-grid-column, .lgc-grid-65 .inside-grid-column {padding: 0;}
section.simple-social-icons ul li { margin: 0 !important;}

.home .black .sa_owl_theme .owl-nav button {
	width: 50px !important;
	height: 50px !important;
	border-radius: 25px;
}

.home .black .sa_owl_theme .owl-nav .owl-prev {
	background: URL('/cpis/wp-content/uploads/angle-left.png') no-repeat center center !important;
}
.home .black .sa_owl_theme .owl-nav .owl-next {
	background: URL('/cpis/wp-content/uploads/angle-right.png') no-repeat center center !important;
}
.home .sa_owl_theme .owl-dots {bottom: 30px !important; }
.home .owl-pagination-true {margin-bottom: 0 !important;}
.home .sa_owl_theme .owl-dots .owl-dot span {background-color: rgba(0, 0, 0, 0.4) !important;}
.home .sa_owl_theme .owl-dots .active span {background-color: #fff !important;}

.wp-block-button__link { background-color: rgb(249, 175, 64); color: #fff;}


/* GRID BUTTONS */

.grid_button_module {display: grid;grid-template-columns: 33.3% 33.3% 33.3%;}
.grid_button_module button {width: 100%; background-color: #d8d8d8;}
.grid_button_module button:hover {  opacity: 0.6;}
.grid_button_module button h4 {
    color: #fff;
    margin: 23% 0 0.5em 0;
    font-weight: 600;
	 font-size: 2.7rem;
}
.grid_button_module button hr {margin: 15px 30%;}
button .frame {
    border: 1px solid #fff;
    position: relative;
    height: 253px;
    margin: 15px;
}



/*  MODAL VIEW  */

.modal {
    display: none; 
    position: fixed; 
    z-index: 1200; 
    left: 0;
    top: 0;
    width: 100%;
    height: 100%; 
    overflow: auto; 
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.4); 
    -webkit-animation-name: fadeIn; 
    -webkit-animation-duration: 0.4s;
    animation-name: fadeIn;
    animation-duration: 0.4s
}

.modal-content {
    position: fixed;
    top: 0;
    background-color: #fefefe;
    width: 100%;
	 text-align: center;
    -webkit-animation-name: slideIn;
    -webkit-animation-duration: 0.4s;
    animation-name: slideIn;
    animation-duration: 0.4s
}

.close {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.modal-header, .modal-header h2 {
	 text-align: center;
    padding: 2px 16px;
    background-color: #000;
    color: white;
}

.modal-body {padding: 15% 5%;}


@-webkit-keyframes slideIn {
    from {top: -300px; opacity: 0} 
    to {top: 0; opacity: 1}
}

@keyframes slideIn {
    from {top: -300px; opacity: 0}
    to {top: 0; opacity: 1}
}

@-webkit-keyframes fadeIn {
    from {opacity: 0} 
    to {opacity: 1}
}

@keyframes fadeIn {
    from {opacity: 0} 
    to {opacity: 1}
}




/*  RESPONSIVE VIEWS   */

@media only screen
  and (min-width: 1025px) {
.lgc-column.lgc-grid-65 {float: left;width: 66.55%;}
#menu-top-minor-links li.menu-item {border-right: 1px solid rgba(255, 255, 255, 0.5); height: 40px; padding: 7px 0;}
}

@media only screen
  and (max-width: 1040px) {
	.site-header {background-size: cover;}
	.hero_image {height: auto; 	padding: 100px 0;}
	.grid_button_module {display: grid;grid-template-columns: 50% 50%;}
	.grid_button_module button h4 {margin: 26% 0 0.5em 0;}
}

@media only screen
  and (max-width: 700px) {
	.hero_image {height: auto; 	padding: 70px 0;}
	.grid_button_module {display: grid; grid-template-columns: 100%;}
	.grid_button_module button h4 {margin: 20% 0 0.5em 0;}
	.custom_block-1, .custom_block-2, .custom_block-3 {flex-wrap: wrap;}
	.custom_block-1 .left_column,
	.custom_block-1 .right_column,
	.custom_block-2 .left_column,
	.custom_block-2 .right_column,
	.custom_block-3 .left_column,
	.custom_block-3 .right_column,
	body.single main {width: 100%; margin-right: 0%;}
	body.single aside, .double-column .content, .double-column aside {width: 100%;}
	section.columns {display: block;}
	.double-column main, .double-column aside {display: block; float: left;}
	.double-column .content, .double-column aside {width: 100%;}
	.footer-widgets .columns {display: block;}
	.footer-widgets .columns div {display: block; width: 100%;}
	.padded_block {margin-left: 40px; margin-right: 40px;}
}