/*
Theme Name: WP THEME TSA SEO
Author: Paulo Emiliano Cadaillon
Description: Tema optimizado para SEO
Version: 1.0
*/
/* variables color */
:root {
	/* main colors */
	--main-color: #005aef;
	--second-color: #e6efff;
	--heading-color: black;
	--bg-header: #00cdc6;
	--txt-header: white;
	--bg-footer: #00cdc6;
	--txt-footer: white;
	--bg-body: #f1f1f1;
	--txt-body: #424242;
	--bg-bt: #48cfad;
	--txt-bt: white;
	--bg-menu: #3a3a3a;
	--bg-menu-hover: #333333;
}
@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) format('woff2');
  font-display: swap;
}

/*
Generals
*/
body,
button,
input,
select,
optgroup,
textarea {
	color: var(--text-main);
	font-family: Arial, Verdana, sans-serif;
	font-size: large;
}

body{
	background-color:var(--second-color);
}
article{
	background-color: var(--bg-body);
}

h1, h2, h3, h4, h5, h6 {
	font-family: Arial, Verdana, sans-serif;
	color: var(--heading-color);
}
a {
	color: #000;
}
a:hover {
	color: var(--main-color);
}
.title {
    font-family: Montserrat, "Helvetica Neue", sans-serif;
}
.container-content{
	background-color:white;
    display:flex;
    flex-flow:row wrap;
    clear:both;
    justify-content:space-between;
    position:relative;
    z-index:1;
    width:60%;
    margin:20%;
	margin-top:5%;
	margin-bottom:2%
}
.content{
	color: var(--txt-body);
	display: block;
	width: 100%;
	padding-left: 5%;
	padding-right: 5%;
}
@media (max-width: 800px) {
  .container-content {
    width: 90%;
	margin: 5%;
  }
}
@media (max-width: 325px) {
  .container-content {
    width: 90%;
	margin: 5%;
	font-size:medium;
  }
}
@media (max-width: 281px) {
  .container-content {
    width: 100%;
	margin: 0%;
	padding: 0%;
	border:0px;
  }
	.content{
		padding:2%;
	}
}

.content a {
	color: var(--main-color);
}
.content a:hover {
	text-decoration: underline;
}
.site-header{
	background-color: var(--second-color);
	color: var(--txt-header);
	text-align: center;
}
.site-footer {
    background: var(--bg-footer);
    color: var(--txt-footer);
	text-align: left;
    padding-left: 30%;
    padding: 5%;
}

/*
Sticky NavBar Desktop
*/
.nav-logo{
	position: fixed;
	top: 0;
	z-index: 100;
  	margin-left: 3%;
}

.nav-menu{
	position: fixed;
	top: 0;
	z-index: 99;
  	width: 90%;
  	margin-left:10%;
	text-align:center;
}
@media (max-width: 800px) {
	.nav-menu > ul li{
		visibility: hidden;
	}
	.nav-menu{
		width: 100%;
		margin-left:0%;
	}
	}
.nav-menu ul{
	background: var(--bg-header);
  	list-style: none;
  	margin: 0;
  	padding: 0;
}
.nav-menu ul li {
  position: relative;
  display: inline-block;
  margin-right: -4px;
  text-align: center;
}
.nav-menu ul li:first-child a {
  background: var(--main-color);
}
.nav-menu ul li:last-child {
  margin: 0;
}
.nav-menu ul li a {
  display: block;
  background: var(--bg-bt);
  padding: 15px 20px;
  color: var(--txt-bt);
  font-size: 14px;
  text-decoration: none;
  transition: 0.2s linear;
}
.nav-menu ul li a:hover {
  background: var(--main-color);
}
.nav-menu ul li ul {
  visibility: hidden;
  position: absolute;
  top: 100%;
  left: 0;
  width: 240px;
  border-bottom: 4px solid var(--main-color);
	height: auto;
}
.nav-menu ul li:hover ul {
  visibility: visible;
}
.nav-menu ul li:active ul{
	visibility: visible;
}
.nav-menu ul li ul li {
  display: block;
  width: 100%;
  margin: 0;
  text-align: left;
}
.nav-menu ul li ul li a {
  display: block;
  background: var(--bg-menu);
  padding: 10px 15px;
}
.nav-menu ul li ul li a:first-child {
  background: var(--bg-menu);
  width: auto;
  border-left: 4px solid transparent;
  padding: 10px 15px;
  font-size: 14px;
}
.nav-menu ul li ul li a:hover {
  background: var(--bg-menu-hover);
  border-left: 4px solid var(--bg-header);
}
.nav-menu ul li button{
	position:absolute;
    visibility: hidden;
}

/* hambuger menu */
.hamburger_wrapper {
	padding: 5px;
	z-index: 102;
	float:right;
	top: 0;
}

@media (min-width: 1025px) {
	.hamburger_wrapper {
		display:none;
	}
	}
#hamburger {
    width: 60px;
    height: 60px;
    position: absolute;
    cursor: pointer;
    outline: none;
    z-index: 102;
    top: 10px;
    right: 5%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
	background-color: white;
	border-bottom: 2px solid var(--bg-header);
}
#hamburger span {
	display: block;
    position: absolute;
    height: 6px;
    width: 80%;
    background: var(--main-color);
    border-radius: 9px;
    opacity: 1;
    left: 0;
    transform: rotate(0deg);
    transition: .5s ease-in-out;
    margin: 6px;
}
#hamburger span:nth-child(1) {
	top: 9px;
	transform-origin: left center;
}
#hamburger span:nth-child(2) {
	top: 22px;
	transform-origin: left center;
}
#hamburger span:nth-child(3) {
	top: 35px;
	transform-origin: left center;
}
#hamburger.close span:nth-child(1) {
	transform: rotate(28deg) translateX(4px);
}
#hamburger.close span:nth-child(2) {
	width: 0%;
	opacity: 0;
	transition: .1s;
}
#hamburger.close span:nth-child(3) {
	transform: rotate(-28deg) translateX(4px);
}

#nav-menu {
        position: absolute;
        transform: translateX(-100vw);
        opacity: 0;
        z-index: 100;
        transition: transform .5s ease, opacity ease .2s;
      }
#nav-menu.now-active {
        transform: translateX(0) translateY(15%);
        transition: transform .5s ease, opacity ease .2s;
        opacity: 1;
        background-color:var(--bg-menu);
		height: 100%;
    	width: 95%;
		position: fixed;
		border-right: 4px solid var(--main-color);
		border-top: 4px solid var(--main-color);
      }
.nav-list {
        padding: 10px;
        list-style-type: none;
        font-size: 2em;
      }
#nav-menu ul li{
	position: relative;
  	display: flex;
  	margin-right: -4px;
  	text-align: center;
}
#nav-menu ul li ul{
	visibility:hidden;
	position:absolute;
}
#nav-menu ul li a{
	color: whitesmoke;
    text-decoration: none;
	margin:6px;
  	width: auto;
  	padding: 10px 15px;
  	font-size: 14px;
}
#nav-menu ul li a:hover {
  background: var(--bg-menu-hover);
  border-left: 4px solid var(--bg-header);
}
#nav-menu ul li ul li a:hover {
  background: var(--bg-menu-hover);
  border-left: 4px solid var(--bg-header);
}

#nav-menu ul li button{
	display: contents;
}
#nav-menu ul li button span{
	color: whitesmoke;
    margin-top: 15px;
}
#nav-menu ul li button span:hover{
	background: var(--bg-menu-hover);
}
#nav-menu ul button.toggled-on + ul {
    visibility: visible;
	position:unset;
}
/*scroll to top*/
.scrollToTop {
      color: white;
      font-size: 2em;
      box-shadow: 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 1px -1px rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
      width: 50px;
      height: 50px;
      border-radius: 50%;
      border: none;
      outline: none;
      background: var(--main-color);
      z-index: 9999;
      bottom: 50px;
      right: 16px;
      position: fixed;
      opacity: 0;
      visibility: hidden;
      transform: rotate(90deg);
	padding-bottom: 5px;
    }