/*!
Theme Name: crarq22
Theme URI: https://raskod.com
Author: Rúben Duarte
Author URI: https://raskod.com
Description: Template developed to CR Arq
Version: 1.0.2
Tested up to: 6.0.2
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: crarq22
Tags: custom tempalte developed to crarq, raskod.com

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

crarq22 is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.
*/

/*
  Format titles with custom fonts
*/
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

.fontJosefin {
  font-family: 'Josefin Sans', sans-serif;
}

/* Globals */
body {
  font-family: 'Poppins', sans-serif;
}

.btn {
  border: 1px solid black;
  padding: 6px 10px;
  font-size: 19px;
}

.hidden {
  display: none;
}

.header {
  height: 130px;
}

@media (max-width: 747px) {
  .header {
    position: relative;
  }
}

.side-nav>li::before {
  color: #101820;
}

.side-nav li.is-active span {
  font-size: 14px;
  font-weight: 600;
}

h3 {
  color: #CACAC8;
}

.contact-paragraph {
  color: #101820;
}

.work-request--information .information-telephone {

  margin: auto;
}

.custom-logo-link {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  text-decoration: none;
  color: #fff;
}

body {
  background-color: white;
  color: #101820;
}

.header--nav-toggle span,
.header--nav-toggle::before,
.header--nav-toggle::after {
  background-color: #101820;
}

.side-nav>li,
.side-nav li.is-active,
.work--lockup .slider--item a,
.side-nav li.is-active::before,
.side-nav>li span {
  color: black;
}

.side-nav li:nth-child(6)::before {
  content: "06";
}

.effect-rotate-left--animate .container {
  outline: 0px solid #101820;
}

.outer-nav>li::before {
  content: "";
  top: 90%;
  left: 50%;
  height: 1px;
  background-color: #C04E37;
}

a:hover span {
  position: relative;
}

a:hover span::after {
  content: none;
  position: absolute;
  width: 70%;
  height: 0;
  left: 15%;
  bottom: -10px;
  /*Change this to increase/decrease distance*/
  border-bottom: 2px solid #000;
}

.about--banner a {
  color: #A4A5A6;
}

.about--banner {
  display: inline-flex;
  align-items: center;
}

.about--banner .left {
  margin-left: auto;
}

.about--banner .left img {
  width: 100%;
}

.about--banner .right {
  width: 65%;
  padding-left: 40px;
}

.about--banner .right h2 {
  font-size: 40px;
  font-weight: 300;
  line-height: 50px;
}

@media (max-width: 1180px) {
  .about--banner {
    padding-left: 0;

  }


}

@media (max-width: 747px) {

  .about {
    display: block;

  }

  .about--banner {
    flex-direction: column;

    overflow: auto;
  }

  .about--banner .right {
    width: 100%;
    padding-left: 0;


  }

  .about--banner .right h2 {
    font-size: 30px;

    line-height: 35px;

  }

  .custom-logo-link img {
    width: 80px !important;
    height: 80px !important;
  }

}

.menu-top-right {
  margin-left: auto;
  display: flex;
  align-items: center;
}

.menu-top-right button {
  border: 0px solid black;
  background: none;
  font-weight: 400;
  font-size: 18px;
  text-transform: uppercase;
  padding: 5px 20px
}

/* Intro */
.intro img {
  max-width: 500px;
  margin: auto;
}

.header--nav-toggle {
  margin-left: 40px;
}

.menu-lang {
  font-size: 18px;
  font-weight: 300;
}

.menu-lang a,
.menu-lang a:visited,
.menu-lang a:hover {
  text-decoration: none;
  color: black;

}

.intro_logo_show {
  width: 470px;
  height: 70%;
  background-size: cover;
  background-position: top right;
  background-repeat: no-repeat;
  margin: auto;
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .intro_logo_show {
    width: 100%;
    height: 80%;
  }

}


/* Contact form*/
.work-request--options label {
  border: 2px solid #101820;
  color: #101820;
}

.work-request--options input[type="checkbox"]:checked+label {
  background-color: #101820;
  border-color: #101820;
  color: white;
}

.work-request--information input[type="text"],
.work-request--information input[type="email"] {
  background-color: white;
  border-color: #101820;
  color: #101820;
}

.work-request--information input[type="text"]:focus,
.work-request--information input[type="email"]:focus {
  outline: none;
  background-color: transparent;
}

.work-request--information label {
  color: #101820;
}

.slider--item-topCategory {
  font-weight: 300;
  font-size: 16px;
  padding-left: 4px;
  height: 30px;
  display: block;
}

.slider .slider--item-image {
  height: 530px;
  width: 900px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

.slider .slider--item .slider--item-title {
  padding-left: 200px;
  padding-bottom: 50px;
}

.slider .slider--item .slider--item-title h2 {
  margin: 0;
  padding: 0;
  font-weight: 400;
  line-height: 30px;
  text-transform: uppercase;
  font-size: 42px;
}

.side-nav a {
  text-decoration: none;
}

.site-main section .page-content {

  display: flex;
  flex-direction: column;
  justify-content: center;
}

.img_bg_error {
  background-image: url('img/about.png');
  background-position: right bottom;
  background-size: 500px;
  background-repeat: no-repeat;
  height: 95%;
  display: flex;
  justify-content: center;
  align-items: center;

}

.about-us-img {
  display: block;
  width: 300px;
  padding-top: 50px;
  position: absolute;
  right: 0;
}

.titles {
  display: none;
}

@media (max-width: 747px) {
  .titles {
    display: block;
  }

  .header--nav-toggle {
    margin-left: 20px;
  }

  .menu-lang {
    font-size: 14px;
  }

  .menu-top-right button {

    font-size: 14px;

    padding: 5px 10px;
  }

  .header--cta {
    display: inline-flex;
    right: -80px;
  }

  .about--banner {
    background-image: none;
  }

  .section--is-active {
    overflow: auto;
  }
}

@media (max-width: 1400px) {
  .slider .slider--item-image {
    height: 470px;
    width: 750px;

  }

  .work--lockup .slider--next {
    right: 30px;
  }

  .work--lockup .slider--prev {
    right: 100px;
  }


}

@media (max-width: 1180px) {
  .work--lockup .slider {
    padding-left: 0px;
  }

  .slider .slider--item .slider--item-title {
    padding-left: 0px;
    padding-bottom: 30px;
  }

  .slider .slider--item-image {
    height: 450px;
    width: 100%;
  }

  .work--lockup {
    position: relative;

  }
}

@media (max-width: 767px) {
  .work--lockup .slider--next {
    right: -10px;
  }

  .work--lockup .slider--prev {
    right: 30px;
  }

  .slider .slider--item .slider--item-title h2 {
    font-size: 30px;
  }

  .work-request--options label,
  .work-request input[type="submit"] {
    line-height: 30px;
  }

  .work-request input[type="submit"] {
    margin-top: 20px
  }

  .work-request--information .information-telephone {
    margin-top: 20px;
  }

  .work-request--information {
    margin-bottom: 10px;
  }

  .outer-nav>li {
    font-size: 20px;
  }

  .hire {
    max-width: 100%;
    justify-content: start;

  }

  .work--lockup {
    position: relative;
    margin-top: initial;
  }
}

/* class to full pages */

.make_scroll {
  height: auto;
}

.header_relative {
  position: relative;
}


.generate-thumbs {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1.3%;
}

.generate-thumbs .thumb-list {
  flex: 32%;
  max-width: 32%;
}

.post-thumbnail img {
  width: 100%;
  height: auto;
}

.thumb-list {}

.page-title {}

/* Error classes*/

.work-request--information input[type="text"].error,
.work-request--information input[type="email"].error {
  border-color: red;
}