/*
Theme Name: Commons
Author: Dazːain Studio
Author URI: https://dazain.org/
Description: Commons is a custom theme designed in 2019 for AI Commons
Version: 1.0
Text Domain: commons

----------------------------------------------------------------
TABLE OF CONTENTS:
----------------------------------------------------------------

1. Fonts
2. Colors
3. Layout
4. Forms
5.
6.
8.

--------------------------------------------------------------*/

/* 1. FONTS ------------------------------------------------- */

html, p {
  color: black !important;
  font-family: 'Inter', sans-serif !important;
}

@import url('https://rsms.me/inter/inter.css');

h1,.h1 { font-size: 64px !important; font-family: 'Inter', sans-serif; font-weight: 700 !important; }
h2,.h2 { font-size: 40px !important; font-family: 'Inter', sans-serif; font-weight: 700 !important; }
h3,.h3 { font-size: 30px !important; font-family: 'Inter', sans-serif; font-weight: 400 !important; }
h4,.h4 { font-size: 24px !important; font-family: 'Inter', sans-serif; font-weight: 700 !important; }
h5,.h5 { font-size: 24px !important; font-family: 'Inter', sans-serif; font-weight: 400 !important; line-height: 145% !important; }
h6,.h6 { font-size: 20px !important; font-family: 'Inter', sans-serif; font-weight: 400 !important; line-height: 145% !important;}
.text { font-size: 16px !important; font-family: 'Inter', sans-serif; font-weight: 400 !important; }


.bold { font-weight: 700 !important; }

p {line-height: 160%;}

a {
  text-decoration: underline !important;
  color: inherit !important;
}

a:hover {
  text-decoration: none !important;
  color: inherit !important;
}

.unlinked {
  text-decoration: none !important;
}

/* 2. COLORS ------------------------------------------------ */

.palegrey, .palegrey p { color: #F1F1F1 !important; }
.lightgrey, .lightgrey p { color: #E5E5E5 !important; }
.midgrey, .midgrey p { color: #8E8E8E !important; }
.darkgrey { color: #505050 !important; }
.graphite { color: #202020 !important; }
.black { color: #000000 !important; }

.purple, .purple p { color: #712FFF !important; }
.green { color: #126749 !important; }
.blue, .blue p { color: #39A5CB !important; }
.red, .red p { color: #F76256 !important; }
.yellow { color: #FFD43E !important; }

.bg-palegrey { background-color: #F1F1F1 !important; }
.bg-lightgrey { background-color: #E5E5E5 !important; }
.bg-midgrey { background-color: #8E8E8E !important; }
.bg-darkgrey { background-color: #505050 !important; }
.bg-graphite { background-color: #202020 !important; }
.bg-black { background-color: #000000 !important; }

.bg-purple { background-color: #712FFF !important; }
.bg-green { background-color: #126749 !important; }
.bg-blue { background-color: #39A5CB !important; }
.bg-red { background-color: #F76256 !important; }
.bg-yellow { background-color: #FFD43E !important; }

.build { color: #F76256 !important; }
.connect { color: #39A5CB !important; }
.scale { color: #126749 !important; }

/* 3. LAYOUT ------------------------------------------------ */

.top-buffer-sm { margin-top: 20px !important; }
.top-buffer { margin-top: 40px !important; }
.top-buffer-lg { margin-top: 60px !important; }

.wrapper { width: 100%; padding: 60px 0; margin: 0; }
.wrapper-footer { width: 100%; padding: 0; margin: 0; }

.underline { border-bottom: 1px solid #2F2F2F; }

.divider-build { border-top: 1px solid #F76256 !important; }
.divider-connect { border-top: 1px solid #39A5CB !important; }
.divider-scale { border-top: 1px solid #126749 !important; }

.divider-lg-build { border-top: 3px solid #F76256 !important; }
.divider-lg-connect { border-top: 3px solid #39A5CB !important; }
.divider-lg-scale { border-top: 3px solid #126749 !important; }

.divider-lg { border-top: 3px solid #000000 !important; }

/* 4. FORMS ------------------------------------------------- */

.wpcf7-form {
  font-family: 'Inter', sans-serif;
  color: black;
}

.wpcf7-form-control-wrap input {
  width: 100% !important;
  border: none;
  padding: 8px 0 8px 0;
  border-bottom: 1px solid black;
  margin-top: 20px;
  margin-bottom: 40px;
  color: #8E8E8E;
  opacity: 1 !important;
}

.wpcf7-form-control-wrap textarea {
  width: 100% !important;
  border: 1px solid black;
  padding: 12px;
  margin-top: 12px;
  margin-bottom: 40px;
  color: #8E8E8E;
}

.wpcf7-submit {
  background-color: #00B348; /* Green */
  border: none;
  color: black;
  padding: 10px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  margin-bottom: 60px;
}

.wpcf7-validation-errors {
  border: none !important;
  background-color: none;
  padding: 0 0 20px 0 !important;
  margin: 0 !important;
  color: #FF7474;
}

.wpcf7-not-valid { border: 1px solid #FF7474 !important; }
span .wpcf7-not-valid-tip { display: none; }
.ajax-loader { display: none  !important; }

.wpcf7-mail-sent-ok {
  border: none !important;
  background-color: none;
  padding: 0 0 20px 0 !important;
  margin: 0 !important;
  color: #00B348;
}

#wpcf7-f61-o1 input, #wpcf7-f61-o2 input {
  background-color: #712FFF !important;
  border-bottom: 1px solid #F1F1F1;
  color: #E5E5E5;
}

input[type='checkbox'] {
  width: auto !important;
  margin: 0 10px 0 0 !important;
  padding: 0 !important;
  position: relative !important;
}

.wpcf7-list-item {
  position: relative !important;
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
}


.formfield-select {
	position: relative;
}

.wpcf7-select {
  width: 100%;
	position: relative;
	background-color: #fff;
	border: 1px solid black;
	margin: 24px 0 32px 0;
	overflow: hidden;
  padding: 12px;
}





/* 5. MENU -------------------------------------------------- */

nav {
  border-bottom: 1px solid #E5E5E5;
  font-family: 'Inter', sans-serif;
  background-color: #FFFFFF;
}

.menu-header-menu-container ul li {
  display: inline-flex;
   padding: 0 !important;
   margin: 0 !important;
}

.menu-header-menu-container ul li a  {
 color: #505050 !important;
 font-size: 16px;
 display:block;
 padding: 0 12px;
 margin: 0 !important;
 text-decoration: none !important;
 float: left;
 height: 80px;
 line-height: 80px;
 cursor: pointer;
}

.menu-footer-1-container ul li, .menu-footer-2-container ul li {
  display: inline-flex;
   padding: 0 !important;
   margin: 0 !important;
}

.menu-footer-1-container ul li a, .menu-footer-2-container ul li a {
  color: #505050 !important;
  font-size: 16px;
  display:block;
  padding: 0 !important;
  margin: 0 30px 0 0 !important;
  text-decoration: none !important;
  float: left;
  height: 80px;
  line-height: 80px;
  cursor: pointer;
}

.footer-icon i {
  color: #505050 !important;
  font-size: 16px;
  display:block;
  padding: 0 !important;
  margin: 0 0 0 10px !important;
  text-decoration: none !important;
  float: left;
  height: 80px;
  line-height: 80px;
  cursor: pointer;
}

/* 5. MENU MOBILE ------------------------------------------- */

.menu-icon  {
 color: #505050 !important;
 font-size: 30px;
 display:block;
 padding: 0 12px;
 margin: 0 !important;
 text-decoration: none !important;
 float: left;
 height: 80px;
 line-height: 80px;
 cursor: pointer;
}

#sidenav-mobile {
  display: none;
}

.sub-menu-mobile-container {
  position: fixed;
  top: 0px;
  height: 100vh;
  width: 100vw;
  background-color: #FFFFFF;
  z-index: 999;
  overflow: hidden;
}

.menu-mobile-menu-container ul li  {
 list-style: none;

}

.menu-mobile-menu-container ul li a  {
 text-decoration: none !important;
 cursor: pointer;
 color: #505050 !important;
 font-size: 24px;
 font-weight: 700 !important;
 font-family: 'Inter', sans-serif !important;
}

.menu-mobile-menu-container ul li a:hover  {
 color: black !important;
}


/* 5. MAP --------------------------------------------------- */

.mapael .map {
  position: relative;
  padding: 0 0 40px 0;
}

.mapael .mapTooltip {
  position: absolute;
  background-color: #000000;
  moz-opacity: 1;
  opacity: 1;
  filter: alpha(opacity=100);
  border-radius: 2px;
  padding: 10px;
  z-index: 1000;
  max-width: 300px;
  display: none;
  color: #fff;
  font-size: 14px;
}

.plot {
  cursor: pointer;
}

/* 5. FILTERS ----------------------------------------------- */

.filter-nav {
  margin: 0 !important;
  padding: 0 !important;
}

.filter .filter-tag#tag-0:checked ~ .filter-nav .radio[for="tag-0"],
.filter .filter-tag#tag-1:checked ~ .filter-nav .radio[for="tag-1"],
.filter .filter-tag#tag-2:checked ~ .filter-nav .radio[for="tag-2"],
.filter .filter-tag#tag-3:checked ~ .filter-nav .radio[for="tag-3"],
.filter .filter-tag#tag-4:checked ~ .filter-nav .radio[for="tag-4"],
.filter .filter-tag#tag-5:checked ~ .filter-nav .radio[for="tag-5"],
.filter .filter-tag#tag-6:checked ~ .filter-nav .radio[for="tag-6"],
.filter .filter-tag#tag-7:checked ~ .filter-nav .radio[for="tag-7"],
.filter .filter-tag#tag-8:checked ~ .filter-nav .radio[for="tag-8"] {
	color: black;
  font-weight: 500 ;
}

.radio {
  margin-right: 16px !important;
  color: #8E8E8E;
  font-weight: 400;
  font-family: 'Inter', sans-serif !important;
}

/* 5. COMMUNITY --------------------------------------------- */

.img-placeholder img {
  height: 350px;
  width: 100%;
  object-fit: cover;
  margin-bottom: 12px;
}

.img-placeholder-lg img {
  height: 400px;
  width: 100%;
  object-fit: cover;
  margin: 0 !important;
  padding: 0 !important;
}

.img-placeholder-lg {
  height: 400px;
  width: 100%;
  object-fit: cover;
  margin: 0 !important;
  padding: 0 !important;
}

.card-img {
  height: auto;
}

.member-caption {
  margin: 0 !important;
  padding: 0 0 20px 0 !important;
}

#member-quote {
  min-height: 500px;
}

.member-caption i {
  color: #8E8E8E;
  font-size: 14px !important;
  margin-left: 4px;
}

.member-caption i:hover { color: black; }

/* 5. TILES & CARDS ----------------------------------------- */

.tile {
  border-top: 1px solid #E5E5E5;
  padding: 20px 0;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.small-tile {
  border-top: none !important;
  padding: 20px 0 0 0 !important;
  margin: 0 !important;
  cursor: default !important;
}

.partners-tile {
  padding-bottom: 40px;
}

.tile-home-init {
  padding: 12px 0;
}

.event-card-sm {
  border-top: 1px solid #505050;
  padding-top: 20px;
}

.tile-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #F1F1F1 !important;
}

/* 5. KPI WIDGET -------------------------------------------- */

.kpi {
  padding: 20px 0;
  border: none;
}

.kpi-number {
  font-size: 72px;
  font-family: 'Inter', sans-serif !important;
  font-weight: 800 !important
}

/* 5. PARTNERS SLIDER --------------------------------------- */

.partners {
  border: 1px solid #F1F1F1 !important;
  height: 200px;
  padding: 60px 30px !important;
  margin-left: 10px;
  background-color: #FFFFFF;
}

.partners-img {
  width: 100% !important;
  height: 100% !important;
  vertical-align: middle !important;

    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
}

.carousel-cell {
  background-color: #FFFFFF;
	border: 1px solid black;
}

/* 5. MEDIA QUERIES ----------------------------------------- */

@media screen and (max-width: 640px) {
  .container {
    padding-left: 1em !important;
    padding-right: 1em !important;
  }
  h1,.h1 { font-size: !important; font-family: 'Inter', sans-serif; font-weight: 700 !important; }
  h2,.h2 { font-size: 24px !important; font-family: 'Inter', sans-serif; font-weight: 700 !important; }
  h3,.h3 { font-size: !important; font-family: 'Inter', sans-serif; font-weight: ; }
  h4,.h4 { font-size: !important; font-family: 'Inter', sans-serif; font-weight: ; }
  h5,.h5 { font-size: 20px !important; font-family: 'Inter', sans-serif; font-weight: 400 !important; line-height: 145% !important;}
  h6,.h6 { font-size: 16px !important; font-family: 'Inter', sans-serif; font-weight: 400 !important; }
  .text { font-size: 14px !important; font-family: 'Inter', sans-serif; font-weight: 400 !important; }

  .bold { font-weight: 700 !important; }

  .top-buffer { margin-top: 20px !important; }
  .top-buffer-lg { margin-top: 32px !important; }
}

@media screen and (max-width: 840px) {
  .kpi {
    border-bottom: none;
  }
}






.mh-sticky {
  position:-webkit-sticky;
  position:sticky;
  top:0;
  z-index:10;
  -webkit-transition:-webkit-transform .2s ease;
  transition:-webkit-transform .2s ease;
  -o-transition:transform .2s ease;
  transition:transform .2s ease;
  transition:transform .2s ease,-webkit-transform .2s ease;
  -webkit-transform:translate3d(0,0,0);
  transform:translate3d(0,0,0);
}

.mh-sticky.mh-unpinned {
  -webkit-transform:translate3d(0,-100%,0);
  transform:translate3d(0,-100%,0);
}