/*!
Theme Name: Magna Marketing & Publicidade
Theme URI: http://underscores.me/
Author: Yanik R. dos Santos
Author URI: http://underscores.me/
Description: Site Oficial da Magna Marketing & Publicidade
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: magna-wp
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Magna Marketing & Publicidade 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.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

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

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
/* @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap"); */
@import url("https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap");

html,
body {
  font-family: "Rubik", sans-serif !important;
  scroll-behavior: smooth;
  font-size: 1rem;
}
ul {
  list-style: none !important;
  margin-top: 0rem !important;
  margin-bottom: 0rem !important;
  padding-left: 0rem !important;
}
a {
  text-decoration: none !important;
}

p {
  text-align: justify;
}


/*Classes Utilitarios*/

/*Text Align*/
.text-center {
  text-align: center;
}
.text-right {
  text-align: right !important;
}
.text-left {
  text-align: left !important;
}
.nav-item {
  margin-left: 15px;
  margin-bottom: 15px;
}
.alinhar-end{
  display: flex;
  justify-content: end;
}

h1{
  margin-bottom: 0rem !important;
}
h2 {
  font-size: 32px;
}
p {
  font-size: 15px;
  line-height: 1.6em;
}
h5 {
  font-size: 20px;
}



/*Classes Utilitarios End*/

.flex {
  display: flex;
  align-items: center;
}
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.espacamento {
  padding: 50px 0;
}
.invisible-desktop {
  display: none;
}


.borda-inferior {
  border-bottom: dashed #a4a4a4;
  border-width: thin;
}




.bg-cinza{
  background: #F0F1F3;
  color: #000;
}
.bg-blog-white{
  background: #f3f3f3;
}

.btn-magna, 
.btn-magna:hover{
  color: #fff;
  background: #000;
}


.btn-transparent,
.btn-transparent:hover{
  border: 1px solid #fff;
  color: #fff;
  background: transparent;
}
.btn-magna-branco{
  color: #000 !important;
  background: #fff !important;
}
.btn-magna-branco:hover{
  color: #000 !important;
  background: #e3e1e1 !important;
}

.btn-insta-magna{
  color: #fff !important;
  background: linear-gradient(115deg, #f9ce34, #ee2a7b, #6228d7) !important;
  border: none;
}
.btn-magna-preto:hover{
  color: #fff;
  background: #000;
}
.bg-topBar {
  background: #000;
  color: #fff;
}

.btn-primary-magna{
  color: #fff;
  border-color: none!important;
}
.btn-primary-magna:hover{
  color: #fff !important;
  border-color: none!important;
}

.bg-magna-preto{
  background: #000 !important;
  color: #fff !important;
}
/* ======= Preloader Style ======= */
.preloader-bg,
#preloader {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #fff;
  z-index: 999999;
  text-align: center;
}
#preloader {
  display: table;
  table-layout: fixed;
}
#preloader-status {
  display: table-cell;
  vertical-align: middle;
}
.preloader-position {
  position: relative;
  margin: 0 auto;
  text-align: center;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}
.loader {
  position: relative;
  width: 55px;
  height: 55px;
  left: 50%;
  top: auto;
  margin-left: -28px;
  margin-top: 2px;
  -webkit-animation: rotate 1s infinite linear;
  -moz-animation: rotate 1s infinite linear;
  -ms-animation: rotate 1s infinite linear;
  -o-animation: rotate 1s infinite linear;
  animation: rotate 1s infinite linear;
  border: 1px solid rgba(0, 0, 0, 0.1);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
}
.loader span {
  position: absolute;
  width: 55px;
  height: 55px;
  top: -1px;
  left: -1px;
  border: 1px solid transparent;
  border-top: 1px solid #000;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
}

@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* ======= toTop Button style ======= */
.progress-wrap {
  position: fixed;
  bottom: 30px;
  right: 30px;
  height: 40px;
  width: 40px;
  cursor: pointer;
  display: block;
  border-radius: 50px;
  -webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateY(20px);
  -ms-transform: translateY(20px);
  transform: translateY(20px);
  -webkit-transition: all 400ms linear;
  -o-transition: all 400ms linear;
  transition: all 400ms linear;
}
.progress-wrap.active-progress {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}
.progress-wrap::after {
  position: absolute;
  font-family: "Font Awesome 5 Free";
  content: "\f106";
  text-align: center;
  line-height: 40px;
  font-size: 12px;
  font-weight: 700;
  color: #323232;
  left: 0;
  top: 0;
  height: 40px;
  width: 40px;
  cursor: pointer;
  display: block;
  z-index: 1;
  -webkit-transition: all 400ms linear;
  -o-transition: all 400ms linear;
  transition: all 400ms linear;
}
.progress-wrap svg path {
  fill: none;
}
.progress-wrap svg.progress-circle path {
  stroke: rgba(0, 0, 0, 0.2);
  stroke-width: 2;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 400ms linear;
  -o-transition: all 400ms linear;
  transition: all 400ms linear;
}
.progress-wrap {
  -webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
}
.progress-wrap::after {
  color: #000;
}
.progress-wrap svg.progress-circle path {
  stroke: #000;
}

.whatsapp-fixed .float{
  position:fixed;
  width:40px;
  height:40px;
  bottom:80px;
  right:32px;
  background-color:#25d366;
  color:#FFF;
  border-radius:50px;
  text-align:center;
    font-size:25px;
  box-shadow: 0px 0px 6px #555;
    z-index:100;
}


.modal-content .btn-close{
  position: absolute;
  top: 10px;
  right: 10px;
}

/*Header*/

#header ul li a {
  color: #000;
  text-transform: uppercase;
}

#header .menu{
  display: flex;
}


#header ul li.current-menu-item a {
  color: #000 !important;
  font-weight: bold !important;
  text-transform: uppercase;
}
.header-topo,
.header-topo a {
  color: rgba(0, 0, 0, 0.7);
}
.header-nav-menu ul li {
  margin-left: 20px;
}
.header-nav-menu ul li a {
  color: #000;
}
.fixed-top {
  background: #fff;
  box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.7);
}


#img-banner{
  position: relative;
}
#img-banner .mask{
  height: 450px;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
#img-banner .mask .texto{
  display: flex;

}
#img-banner video{
  height: 450px;
  width: 100%;
  object-fit: cover;
  object-position: center;
}


/* ------- Secção Clientes -------- */


.parceiros-img img {
/*  filter: grayscale(); */
  width: 100%;
  aspect-ratio: 2/1;
  object-fit: contain;
}

/* -------------- Secção Servicos ------------- */

#servicos .servico-box img{
  object-fit: cover;
  height: 270px;
}

.bg-image{
  position: relative;
  overflow: hidden;
}

.mask{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.servico-box .icon{
  margin: 0 auto;
  height: 40px;
  width: 40px;
  border-radius: 100%;
  color: #000;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* -------------- Secção Projectos ------------- */

#projetos .projetos-caixa img{
  object-fit: cover;
  height: 250px;
}

#projetos .projetos-caixa{
  position: relative;
}
#projetos .projetos-caixa .overlay{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.9);
  color: #fff;
  height: 100px;

}

#projetos .owl-dots .owl-dot span {
    width: 10px;
    height: 10px;
    margin: 5px 7px;
    background: #D6D6D6;
    display: block;
    -webkit-backface-visibility: visible;
    transition: opacity .2s ease;
    border-radius: 30px;
}

#projetos .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
    background: #869791;
}

#projetos .projetos-caixa h5, 
#projetos .projetos-caixa p{
  text-shadow: 0px 8px 8px rgba(0, 0, 0, 1);
}

#projetos .border-inferior{
  border-bottom: 3px solid #fff;
  width: 2.5rem;
}

#projectos .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: #000 !important;
    background-color: #fff !important;
}

/* -------------- Secção FAQs ------------- */

#faqs .accordion-item {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

#faqs .accordion-item:hover {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

#faqs .accordion-button {
    color: #000;
    background-color: #ffffff;
    transition: all 0.3s ease;
}

#faqs .accordion-button:not(.collapsed) {
    color: #ffffff !important;
    background-color: #000;
}

#faqs .accordion-button:focus {
    box-shadow: none;
    border-color: rgba(0, 0, 0, .125);
}





/* ------- Página Sobre Nós ------- */

#sobre-banner{
  position: relative;
}
#sobre-banner .mask{
  height: 30vh;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

#sobre-banner img{
  height: 30vh;
  width: 100%;
  object-fit: cover;
  object-position: center;
}

#msv .icone{
  height: 50px;
  width: 50px;
  border-radius: 100%;
  background: #DC4265 ;
  color: #fff;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icone .fa-hand-holding{
  display: flex;
  align-items: start !important; 
}

.msv-box:hover{
  cursor: pointer;
  background: #d4d4d4;
}

#msv .hover-shadow-box-animation {
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  transition-duration: 0.3s;
  transition-property: box-shadow, transform;
}

#msv .hover-shadow-box-animation:hover,
#msv .hover-shadow-box-animation:focus,
#msv .hover-shadow-box-animation:active {
  box-shadow: 1px 10px 10px -10px rgba(0, 0, 24, 0.5);
  transform: scale(1.1);
}

/* Dispositivos Celulares*/
@media screen and (max-width: 992px) {
  body {
    font-size: 0.9rem;
  }

  /* ------- Header ------- */
  #header .header-top {
    display: none !important;
  }

  #header .header-nav-menu .menu{
    display: flex !important;
  }

  #header .header-nav-menu li{
    border-bottom: none !important;
  }

  .logo-box img {
    width: 80% !important;
  }
  .fixed-top img {
    width: 80% !important;
  }
  

}

@media screen and (max-width: 768px) {
  /* Respondividade */
  #menu {
    display: none;
  }
  .invisible-desktop {
    display: block !important;
  }

  #header .header-nav-menu .menu{
    display: block !important;
  }
  #header .header-nav-menu li{
    border-bottom: 1px dashed #ccc !important;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-left: 5px !important;
  }
  #header .header-nav-menu li:last-child{
    border-bottom: none !important;
  }
  #header .alinhar-end{
    display: block !important;
    justify-content: start !important;
  }

  .logo-box img {
    width: 30% !important;
  }
  .fixed-top img {
    width: 30% !important;
  }
  
  .share{
      margin-bottom: 20px !important;
  }
}