/*
Theme Name: Clean Events Hub: Beta
Author: Access Intelligence
*/

@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,300i,400,400i,700');

html {  font-size: 1em; }
body { background:;
  font-family: 'Roboto', Helvetica, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.42857143;
}
a {color:#0174ee; transition:all .3s}
a:hover {color:#4ea2fc; text-decoration:none;}
a:focus {outline: none; text-decoration:none;}
hr { border-color:#f29da1; border-width:2px;}

h1,h2,h3,h4,h5,h6 {font-weight:bold;}
h1 {font-size: 2.441rem; margin: 0 0 0.5em; }
h2 {font-size: 1.953rem; margin: 0.5em 0;}
h3 {font-size: 1.563rem; margin: 0.5em 0;}
h4 {font-size: 1.5rem; font-weight:100;line-height: 1.4 }
h5 {font-size: 1.25rem;}
h6 {font-size: 1.15rem;}
p {font-size: 1rem; margin: 1em 0 1.5em;}
img {max-width: 100%; height: auto;}

header {text-align:center; padding:1.2rem 0;}
footer { padding-:1rem 0;}
.section-spacer {padding-bottom: 2rem; padding-top: 2rem;}

/* btn color ___________________________*/
.btn {border:none; white-space: normal; font-size:1rem; margin:.5rem auto; border-radius:0;}
.btn-primary {background:#0174ee; margin:.5rem .8rem;}
.btn-primary:hover {background:#165ec0;}
.btn-main {background:#e90000; border:1px solid #e90000; color:#fff;}
.btn-main:hover {background:#c50202; color:#fff;}
.btn-transparent { border:1px #fff solid; color:#fff;}
.btn-transparent:hover {color:#fff; background:rgba(256,256,256,.2);}

/* General */
.date {color:#fff; line-height: 1.1}
.venue {margin-top:0; color:#fff; line-height: 1.1}
.eventinfo-cg, .eventinfo-cw, .eventinfo-cp {padding-top:1rem; padding-bottom:1rem;}
.bg-general {background:url(images/bg-general.jpg) fixed}

/* Homepage */
.homepage {color:#fff;}
.homepage a {color:#fff;}
.col-container {display: table;width: 100%;color:#fff;}
.col-container a{color:#fff;}
.col {display:block;padding: 2rem 16px;}

/* Inner page */
.pageheader {padding-bottom:200px; color:#fff;}
.pagebody {position:relative; margin-top:-180px;background:#fff; min-height:200px; padding-top:5px;}
.title { display:table; margin:.5em auto; position:relative; text-align:center;}
.title:after { content:""; position:absolute; bottom:-.3rem; left:25%; width:50%; border-top:2px solid #f00;}

/*CG*/
.bg-cg {background:url(images/bg-cg2025.jpg) no-repeat fixed bottom / cover , #033961}
.bg-cg- {background:url(images/parallelograms-multiply.svg) no-repeat center -100px / cover , #033961}

/*CW*/
.bg-cw- {background:url(images/bg-cw.png) top center fixed}
.bg-cw {background:url(images/bg-cw.jpg) top center}

/*CP*/
.bg-cp {background: linear-gradient(rgba(0, 20, 73, 0.3), rgba(0, 20, 73, 0.3)), url(https://2020.cleanpacific.org/wp-content/themes/cp2020-s/images/bg.jpg) center / cover}

/* New nav menu */
.mbody {background:#020218; color:#fff; padding:5rem 3.5rem 3.5rem;box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, .3);box-shadow: 15px 15px 0px 5px rgba(4, 146, 254, .8); min-height:450px;}
.mbody-close {font-size:2.5rem; font-weight:100;position: absolute;right: 2rem;top: 1rem;color:#05aff7;}
.mbody-close-bottom {position: absolute;bottom: 30px;right: 30px;color:#05aff7;}
.mbody-close:hover, .mbody-close-bottom:hover  {color:#0277a8; transition:all .3s}
hr.white02 {border-color: rgba(256,256,256,.2);}
#newmenu {background: rgba(256, 256, 256, .8);}
/* nav mneu */
#menu-general {padding-left: 0;}
#menu-general li {list-style:none; display:inline-block; margin:.5rem}
#menu-general li a {color:#fff;}
#menu-general li a:hover {color:#05aff7;}

#menu-cleanevents {padding-left: 0;}
#menu-cleanevents li {list-style:none;}
#menu-cleanevents li  a {color:#fff; font-size:1.1rem;line-height: 1.5rem;padding: .5rem 0;display: block;}
#menu-cleanevents li a:hover {color:red}
#menu-cleanevents .menu-item-has-children > a {background:none !important; cursor:default; color:rgba(256,256,256,.5) !important}
#menu-cleanevents .sub-menu {padding:0}
#menu-cleanevents .menu-item-has-children {margin-top:15px;}

/* Main menu */
#mainmenu { position:fixed; z-index:999; top:20px; left:20px;}
#mainmenu .menuicon {background:rgba(0,0,0,.8); color:#fff; font-size:30px; padding:.6rem; border:none; outline: none;}
#mainmenu .dropdown-menu{background:none; border-radius:0; padding:0; margin:0; min-width:250px;}

#menu-primary {padding-left: 0}
#menu-primary li {list-style:none;}
#menu-primary li a {background:rgba(0,0,0,1); color:#999; padding:.7rem 2rem; display:block}
#menu-primary li a:hover {color:#fff;}
#menu-primary .parent > a {color:#fff; font-weight:bold; background:rgba(0,0,0,1) !important}
#menu-primary- .category li a:hover  { background:none !important;color:blue !important}
#menu-primary .sub-menu {padding:0}
#menu-primary .sub-menu li a {padding-left:40px;}

/* Utility Styles ___________________________*/
.section-spacer {padding-bottom: 2rem; padding-top: 2rem;}
.flexcontainer {display:flex; flex-wrap: wrap; align-self:center}
.vcenter {align-self:center}
.copyright {font-size: .85rem;}
.padding-topbottom {padding-top:1rem; padding-bottom:1rem;}
.inlineblock-250 {display:inline-block; width:250px; vertical-align:top;}
.cornerpiece {margin:auto; display:inline-block; position:relative;padding:.2rem 2rem;}
.cornerpiece::after { content:""; border-right:5px solid #eee; border-bottom:5px solid #eee; height:1.2rem; width:1.2rem; position:absolute; right:0; bottom:0}
.cornerpiece::before { content:""; border-left:5px solid #eee; border-top:5px solid #eee; height:1.2rem; width:1.2rem; position:absolute; left:0; top:0}

/*********** Media Queries *****************/
@media (min-width: 540px) {
	html {font-size: 1.1em; /* 16px / 16px (browser default font-size) */}
	.alignleft {float: left;padding-right: 30px; margin: 0;}
	.alignright {float: right;padding-left: 30px; padding-bottom: 30px; margin: 0;}
	.homepage-logo {max-width:250px;}
}
@media (min-width: 768px) {
	.flexwrapper {height:100vh; display:flex}
	.flexblock {display:flex; align-items:center; justify-content:center; flex-direction:column;}
  .box-alignbottom {height:45vh; display:flex; flex-direction:column}
  .alignbottom {margin-top:auto}
	.pagebody {padding:30px 80px 10px;}

}

@media (min-width: 992px) {
	/* Homepage*/
	.border-right {border-right: 1px solid #ccc;}
	.border-color-red {border-color:#e90000}
	.padding-right {padding-right: 50px;}
    .jobsection {padding-left: 50px;}
	.col {display:table-cell; width:33%}
}

@media (min-width: 1200px) {
	.widthlarge {width:1200px}

}

/*********** Media Queries for mobile *****************/
@media (max-width: 540px) {
	.homepage-logo {max-width:150px;}
	.date {font-size:1rem}
	.venue {font-size:1rem;}
	.btn {padding:.2rem 1rem; font-size:.8rem;}
	#mainmenu .menuicon {font-size:13px;}
}