/*
Theme Name: Black and White Child
Theme URI: modernthemes.net/demo/blackandwhite
Author: Modern Themes
Author URI: modernthemes.net
Template: blackandwhite
Description: Black and White Child Theme
Version: 1.30.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: blackandwhite-child
Tags: Magazine, Blogging 
*/

* {
  font-family: 'Old Standard TT', serif;
  overflow-x: hidden;
}
/*    Colors     */
.bg-white-color {
  background-color: #F7F7F7;
}

.bg-gray-light-color {
  background-color: #BFBFBF;
}

.bg-gray-color {
  background-color: #8C8C8C;
}

.bg-gray-black-color {
  background-color: #404040;
}

.bg-black-color {
  background-color: #0D0D0D;
}

.text-white-color {
  color: #F2F2F2;
}

.text-gray-light-color {
  color: #BFBFBF;
}

.text-gray-color {
  color: #8C8C8C;
}

.text-gray-black-color {
  color: #404040;
}

.text-black-color {
  color: #0D0D0D;
}

/*   Sections Size    */
.section-size-1 {
  width: 99.1vw;
  height: 30vh;
}

.section-size-2{
  width: 99.1vw;
  height: 60vh;
}

.section-size-3, .content-area {
  width: 99.1vw;
  height: 100vh;
}

.section-home {
  width: 99.1vw;
  height: 80vh;
}

.section-size-4 {
  width: 99.1vw;
  height: 120vh;
}

.section-size-auto {
  width: 99.1vw;
  height: auto;
}

.meta-nav {
  font-size: 30px !important;
  line-height: normal !important;
}

/*    Logo    */
.logo-nav {
  width: 200px;
  height: auto;
}

/*    home    */
#home {
  background: linear-gradient(rgba(247, 247, 247, 1),rgba(247, 247, 247, 0.7),rgba(247, 247, 247, 0.7));
  background-size: cover;
  background-position: top;
}

.img-slide-home {
  filter: grayscale(100%);
  transition: ease-in 0.6s;
  max-width: 450px;
  height: auto;
}

.img-slide-home:hover {
  filter: grayscale(50%);
}

.slide {
  display: flex;
  align-items: center;
}

.card-home {
  width: 350px;
}

.btn-home {
  border: 1px solid #000000;
  border-radius: 0px;
  text-transform: lowercase;
  letter-spacing: 0.3rem;
  transition: ease-in 0.5s;
}

.btn-home:hover {
  background-color: #000000;
  color: #F2F2F2;
}

.title-home {
  letter-spacing: 0.2rem;
}

.carousel-indicators [data-bs-target] {
  height: 1px !important;
  transition: ease-in 0.7s;
}

.carousel-indicators .active {
  transform: scale(0.7);
}

.box {
  max-width: 50vw;
}

.section-geo {
  max-width: 40vw;
  /* background-color: #0d0d0db4; */
  height: 50vh;
  margin-right: -10px;
  padding: 0;
  display: flex;
  align-items: center;
  align-content: center;
}

.section-geo img {
  /* text-shadow: #0D0D0D; */
  width: 600px;
  z-index: 1;
}

.section-geo::before {
  border: 70vh solid transparent;
  border-bottom-color: #0D0D0D;
  border-right-color: #0D0D0D;
  /* border-top-color: #0D0D0D; */
  border-left-width: 40vh;
  border-top-width: 40vh;
  border-bottom-width: 40vh;
  content: "";
  right: -10vw;
  position: absolute;
  transform: rotateY(42deg);
  z-index: inherit;
}

#quadroLateral {
  width: 200px;
  height: 200px;
  border: 3px solid #F7F7F7;
  border-radius: 100px;
  transform: rotate(35deg);
  position: absolute;
  right: -100px;
  top: 150vh;
}

#quadroLateral2 {
  width: 200px;
  height: 200px;
  border: 3px solid #F7F7F7;
  transform: rotate(45deg);
  position: absolute;
  left: -80px;
  top: 130vh;
}

.description {
  height: 0px;
  transition: all 0.5s;
}

.load-description:hover  + .description {
  height: auto;
}

.nav-link {
  transition: ease-in 0.5s;
}

.nav-link:hover {
  border-bottom: 1px solid #000000;
}

/*cards section */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin: 4rem 5vw;
  padding: 0;
  list-style-type: none;
}

.card {
  position: relative;
  display: block;
  height: 100%;  
  border-radius: calc(40 * 1px);
  overflow: hidden;
  text-decoration: none;
  max-width: 350px;
  max-height: 450px;
}

.card__image {      
  width: 100%;
  height: auto;
  max-width: 350px;
  filter: grayscale(100%);
  transition: ease-in 0.1s;
}

.card__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;      
  background-color: #FFFFFF;      
  color:#0D0D0D;
  border-radius: calc(40 * 1px) 0px;    
  transform: translateY(60%);
  transition: .4s ease-in-out;
}

.card:hover .card__overlay {
  transform: translateY(0);
}

.card:hover .card__image {
  filter: grayscale(50%);
}

.card__header {
  position: relative;
  display: flex;
  align-items: center;
  text-align: center;
  font-weight: bold;
  gap: 2em;
  padding: 2em;
  border-radius: calc(40 * 1px) 0 0 0;    
  background-color: #fff;  
  transform: translateY(0%);
  transition: .2s ease-in-out;
  color: #0D0D0D;
}

.card__arc {
  width: 80px;
  height: 80px;
  position: absolute;
  bottom: 100%;
  right: 0;      
  z-index: 1;
}

.card__arc path {
  fill: #FFFFFF;
  d: path("M 40 80 c 22 0 40 -22 40 -40 v 40 Z");
}       

.card:hover .card__header {
  transform: translateY(0);
}

.card__thumb {
  flex-shrink: 0;
  width: 50px;
  height: 50px;      
  border-radius: 50%;      
}

.card__title {
  font-size: 1em;
  margin: 0 0 .3em;
}

.card__tagline {
  display: block;
  margin: 1em 0;
  font-size: .8em; 
}

.card__status {
  font-size: .8em;
}

.card__description {
  padding: 0 2em 2em;
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}    

.container-article {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
}

.card-article {
  margin: 10px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  width: 300px;
}
.card-article-header img {
  width: 100%;
  height: 170px;
  object-fit: cover;
  filter: grayscale(100%);
}
.card-article-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 20px;
  min-height: 200px;
}

.tag {
  background: #cccccc;
  border-radius: 50px;
  font-size: 12px;
  margin: 0;
  color: #fff;
  padding: 2px 10px;
  text-transform: uppercase;
  cursor: pointer;
}
.tag-teal {
  background-color: #0D0D0D;
}
.tag-purple {
  background-color: #5e76bf;
}
.tag-pink {
  background-color: #cd5b9f;
}

.card-article-body p {
  font-size: 13px;
  margin: 0 0 40px;
}
.user {
  display: flex;
  margin-top: auto;
}

.user-info h5 {
  margin: 0;
}
.user-info small {
  color: #545d7a;
}

#divisao {
  background-image: url('http://localhost/geoMiners/wp-content/uploads/2021/10/background-home.jpg');
}

.carousel-control-next:focus, .carousel-control-next:hover, .carousel-control-prev:focus, .carousel-control-prev:hover {
  opacity: .9 !important;
  box-shadow: none !important;
  border-color: transparent !important;
}