/**
* Template Name: DevFolio - v2.3.0
* Template URL: https://bootstrapmade.com/devfolio-bootstrap-portfolio-html-template/
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/

html {
  touch-action: manipulation;
}


body {
  background-color: #f5f5f5;
  color: #4e4e4e;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #1e1e1e;
}

a {
  color: #1e1e1e;
  transition: all 0.5s ease-in-out;
}




#btnAutores{
  color: #2d3236;
}

#btnDescricao{
  color: #2d3236;
}

.avatar {
  width: 32px;
  height: 32px;
  margin-right: 4px;
  overflow: hidden;
}

.bg-image {
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-position: center center;
}

.overlay-mf {
  background-color: #0078ff;
}

.overlay-mf {
  position: absolute;
  top: 0;
  left: 0px;
  padding: 0;
  height: 100%;
  width: 100%;
  opacity: .7;
}

.paralax-mf {
  position: relative;
  padding: 4rem 0;
}

.display-table {
  width: 100%;
  height: 100%;
  display: table;
}

.table-cell {
  display: table-cell;
  vertical-align: middle;
}

.sect-pt4 {
  padding-top: 4rem;
}

.sect-mt4 {
  margin-top: 4rem;
}

.title-s {
  color: #1e1e1e;
  font-size: 1.4vw;
}
.title-box {
  margin-bottom: 4rem;
}

.title-a {
  font-size: 3rem;
  font-weight: bold;
  text-transform: uppercase;
}

.subtitle-a {
  color: #000;
}

.line-mf {
  width: 40px;
  height: 5px;
  background-color: #0078ff;
  margin: 0 auto;
}

.title-box-2 {
  margin-bottom: 3rem;
}

.title-box-3 {
  margin-bottom: 2rem;
  margin-top: 5rem;

}

.title-left {
  font-size: 2rem;
  position: relative;
  text-shadow: 2px 2px 4px #fff;

}

#title-left{
  color: #fff;
  text-shadow: 2px 2px 4px #000000;
}
.title-left:before {
  content: '';
  position: absolute;
  height: 3px;
  background-color: #0078ff;
  width: 100px;
  bottom: -12px;
}

.box-shadow-full {
  padding: 3rem 1.25rem;
  position: relative;
background-color: #fff;
  margin-bottom: 3rem;
  z-index: 2;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.06), 0 2px 5px 0 rgba(0, 0, 0, 0.2);
}


#contact {
  position: relative;
  background-image:  linear-gradient(to right, rgba(0,0,0,0.0), rgba(0,0,0,0.0)),  url(../img/logo-branco.png);
background-size: contain;
background-repeat: no-repeat;
background-position-x: center;
  margin-bottom: 3rem;
 
}

/*------/ Socials /------*/
.socials {
  padding: 1.5rem 0;
  margin: auto;
  width: 100%;
  box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%);
  background: #f1f1f1;

}

.contact-social-icons{
  margin: auto;
padding-left: 7%;
}



.contact-social-icons ul li{
  width: 19%;

}

.socials ul {
  margin: auto;
}

.socials ul li {
  display: inline-block;
}


/*------/ Ul resect /------*/
.ul-resect, .socials ul, .list-ico, .blog-wrapper .post-meta ul, .box-comments .list-comments, .widget-sidebar .list-sidebar, .widget-tags ul {
  list-style: none;
  margin-bottom: 0;
}

/*------/ Ico Circle /------*/
.ico-circle {
  height: 100px;
  width: 100px;
  font-size: 2rem;
  border-radius: 50%;
  line-height: 1.55;
  margin: 0 auto;
  text-align: center;
  box-shadow: 0 0 0 10px #0078ff;
  display: block;
}

.ico-circle img{
  margin-bottom: 15%;
}

/*------/ Back to top button /------*/
.back-to-top {
  position: fixed;
  display: none;
  background: #0078ff;
  color: #fff;
  width: 44px;
  height: 44px;
  text-align: center;
  line-height: 1;
  font-size: 16px;
  border-radius: 50%;
  right: 15px;
  bottom: 15px;
  transition: background 0.5s;
  z-index: 11;
}

.back-to-top i {
  padding-top: 12px;
  color: #fff;
}

/*------/ Prelaoder /------*/
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  overflow: hidden;
  background: #fff;
}

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #f2f2f2;
  border-top: 6px solid #0078ff;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}

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

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/*------/ Button /------*/
.button {
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-size: 1rem;
  border-radius: .3rem;
  border: 1px solid #000;
  transition: all 500ms ease;
  cursor: pointer;
  outline: 0;
 font-size: 1.3vw;
  padding: 8px;
  color: #000;
  background-color: #fff;
}

.button:hover {
background-color: #000;
color: #fff;
border: 1px solid #fff;
}

.navbar-b {
  transition: all .5s ease-in-out;
  background-color: transparent;
  padding-top: 1.563rem;
  padding-bottom: 1.563rem;
}

.navbar-b.navbar-reduce {
  box-shadow: 0px 6px 9px 0px rgba(0, 0, 0, 0.06);
}

.navbar-b.navbar-trans .nav-item, .navbar-b.navbar-reduce .nav-item {
  position: relative;
  padding-right: 10px;
  padding-left: 0;
}

@media (min-width: 768px) {
  .navbar-b.navbar-trans .nav-item, .navbar-b.navbar-reduce .nav-item {
    padding-left: 10px;
  }
}

.navbar-b.navbar-trans .nav-link, .navbar-b.navbar-reduce .nav-link {
  color: #fff;
  text-transform: uppercase;
  font-weight: 600;
}

.navbar-b.navbar-trans .nav-link:before, .navbar-b.navbar-reduce .nav-link:before {
  content: '';
  position: absolute;
  margin-left: 0px;
  width: 0%;
  bottom: 0;
  left: 0;
  height: 2px;
  transition: all 500ms ease;
}

@media (min-width: 768px) {
  .navbar-b.navbar-trans .nav-link:before, .navbar-b.navbar-reduce .nav-link:before {
    margin-left: 18px;
  }
}

.navbar-b.navbar-trans .nav-link:hover, .navbar-b.navbar-reduce .nav-link:hover {
  color: #1B1B1B;
}

.overlay {
  height: 0%;
  width: 100%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0, 0.9);
  overflow-y: hidden;
  transition: 0.5s;
}

.overlay-content {
  position: relative;
  width: 100%;
  text-align: center;
  top:10%;

}

.overlay a{ 
padding: 8px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}



.navbar-b.navbar-trans .nav-link:hover:before, .navbar-b.navbar-reduce .nav-link:hover:before {
  width: 35px;
}

.navbar-b.navbar-trans .show > .nav-link:before,
.navbar-b.navbar-trans .active > .nav-link:before,
.navbar-b.navbar-trans .nav-link.show:before,
.navbar-b.navbar-trans .nav-link.active:before, .navbar-b.navbar-reduce .show > .nav-link:before,
.navbar-b.navbar-reduce .active > .nav-link:before,
.navbar-b.navbar-reduce .nav-link.show:before,
.navbar-b.navbar-reduce .nav-link.active:before {
  width: 35px;
}

.navbar-b.navbar-trans .nav-link:before {
  background-color: #fff;
}

.navbar-b.navbar-trans .nav-link:hover {
  color: #fff;
}

.navbar-b.navbar-trans .show > .nav-link,
.navbar-b.navbar-trans .active > .nav-link,
.navbar-b.navbar-trans .nav-link.show,
.navbar-b.navbar-trans .nav-link.active {
  color: #fff;
}



.nav-link {
  color: #115A47;
  border-color: #115A47;
text-decoration: none;
font-size: 1.25vw;
font-weight: 600;
}

.navbar-b.navbar-reduce {
  transition: all .5s ease-in-out;
  background-color: #fff;
  padding-top: 15px;
  padding-bottom: 15px;
}

.navbar-b.navbar-reduce .nav-link {
  color: #0078ff;
}

.navbar-b.navbar-reduce .nav-link:before {
  background-color: #0078ff;
}

.navbar-b.navbar-reduce .nav-link:hover {
  color: #0078ff;
}

.navbar-b.navbar-reduce .show > .nav-link,
.navbar-b.navbar-reduce .active > .nav-link,
.navbar-b.navbar-reduce .nav-link.show,
.navbar-b.navbar-reduce .nav-link.active {
  color: #0078ff;
}

.navbar-b.navbar-reduce .navbar-brand {
  color: #0078ff;
}

.navbar-expand-md .navbar-toggler {
  display: none;
}

.navbar-b.navbar-reduce .navbar-toggler span {
  background-color: #1B1B1B;
}

.navbar-b .navbar-brand {
  color: #fff;
  font-size: 1.6rem;
  font-weight: 600;
}

.navbar-b .navbar-nav .dropdown-item.show .dropdown-menu,
.navbar-b .dropdown.show .dropdown-menu,
.navbar-b .dropdown-btn.show .dropdown-menu {
  transform: translate3d(0px, 0px, 0px);
  visibility: visible !important;
}

.navbar-b .dropdown-menu {
  margin: 1.12rem 0 0;
  border-radius: 0;
}

.navbar-b .dropdown-menu .dropdown-item {
  padding: .7rem 1.7rem;
  transition: all 500ms ease;
}

.navbar-b .dropdown-menu .dropdown-item:hover {
  background-color: #0078ff;
  color: #fff;
  transition: all 500ms ease;
}

.navbar-b .dropdown-menu .dropdown-item.active {
  background-color: #0078ff;
}

/*--/ Hamburger Navbar /--*/
.navbar-toggler {
  position: relative;
}

.navbar-toggler:focus,
.navbar-toggler:active {
  outline: 0;
}

.navbar-toggler span {
  display: block;
  background-color: #fff;
  height: 3px;
  width: 25px;
  margin-top: 4px;
  margin-bottom: 4px;
  transform: rotate(0deg);
  left: 0;
  opacity: 1;
}

.navbar-toggler span:nth-child(1),
.navbar-toggler span:nth-child(3) {
  transition: transform .35s ease-in-out;
}

.navbar-toggler:not(.collapsed) span:nth-child(1) {
  position: absolute;
  left: 12px;
  top: 10px;
  transform: rotate(135deg);
  opacity: 0.9;
}

.navbar-toggler:not(.collapsed) span:nth-child(2) {
  height: 12px;
  visibility: hidden;
  background-color: transparent;
}

.navbar-toggler:not(.collapsed) span:nth-child(3) {
  position: absolute;
  left: 12px;
  top: 10px;
  transform: rotate(-135deg);
  opacity: 0.9;
}

/*--------------------------------------------------------------
# Intro Section
--------------------------------------------------------------*/
.intro {
  height: 100vh;
  position: relative;
  color: #fff;
}

.intro .intro-content {
  text-align: center;
  position: absolute;
}

.intro .overlay-itro {
  background-color: rgba(0, 0, 0, 0.6);
  position: absolute;
  top: 0;
  left: 0px;
  padding: 0;
  height: 100%;
  width: 100%;
  opacity: .9;
}

.intro .intro-title {
  color: #fff;
  font-weight: 600;
  font-size: 3rem;
}

@media (min-width: 768px) {
  .intro .intro-title {
    font-size: 4.5rem;
  }
}

.intro .intro-subtitle {
  font-size: 1.5rem;
  font-weight: 300;
}

@media (min-width: 768px) {
  .intro .intro-subtitle {
    font-size: 2.5rem;
  }
}

.intro .text-slider-items {
  display: none;
}

.intro-single {
  height: 350px;
}

.intro-single .intro-content {
  margin-top: 30px;
}

.intro-single .intro-title {
  text-transform: uppercase;
  font-size: 3rem;
}

@media (min-width: 768px) {
  .intro-single .intro-title {
    font-size: 3.5rem;
  }
}

.intro-single .breadcrumb {
  background-color: transparent;
  color: #0078ff;
}

.intro-single .breadcrumb .breadcrumb-item:before {
  color: #cde1f8;
}

.intro-single .breadcrumb .breadcrumb-item.active {
  color: #cde1f8;
}

.intro-single .breadcrumb a {
  color: #fff;
}

/*--------------------------------------------------------------
# About
--------------------------------------------------------------*/
.about-mf .box-shadow-full {
  padding-top: 4rem;
  padding-bottom: 4rem;
 
}



#box-shadow-full_02{
  display: none;
}

.about-mf .about-img {
  margin-bottom: 2rem;
}

.about-mf .about-img img {
  margin-left: 10px;
}

@media (min-width: 767px) {
  .about-mf .box-pl2 {
    margin-top: 3rem;
    padding-left: 0rem;
  }
}

.skill-mf span {
  color: #4e4e4e;
}

.skill-mf .progress {
  background-color: #cde1f8;
  margin: .5rem 0 1.2rem 0;
  border-radius: 0;
  height: .7rem;
}

.skill-mf .progress .progress-bar {
  height: .7rem;
  background-color: #0078ff;
}

/*--------------------------------------------------------------
# Services
--------------------------------------------------------------*/
.service-box {
  padding: 1.5rem 1.3rem;
  border-radius: 1rem;
  margin-bottom: 3rem;
  height: 350px;
  box-shadow: 0.3px 0.3px 0.3px hsl(0deg 0% 0% / 0.38);
  transition: all 500ms ease;

  background-repeat: no-repeat;
  background-size: 40px 40px;
  border-left: none;
}

.service-box:hover .ico-circle {
  transition: all 500ms ease;
  color: #fff;
  background-color: #0078ff;
  box-shadow: 0 0 0 10px #cde1f8;
}
.service-box:hover{
  transition: all 500ms ease;

}

.service-box .service-ico {
  margin-bottom: 1rem;
  color: #1e1e1e;
}

.service-box .ico-circle {
  transition: all 500ms ease;
  font-size: 4rem;
}

.service-box .s-title {
  font-size: 1.4rem;
  text-transform: uppercase;
  text-align: center;
  padding: .4rem 0;
}

.service-box .s-description {
  color: #4e4e4e;
  font-size: 0.9vw;
}

/*--------------------------------------------------------------
# Counter
--------------------------------------------------------------*/
.counter-box {
  color: #fff;
  text-align: center;
}

@media (min-width: 577px) {
  .counter-box {
    margin-bottom: 1.8rem;
  }
}

.counter-ico {
  margin-bottom: 1rem;
}

.counter-ico .ico-circle {
  height: 80px;
  width: 80px;
  line-height: 1.8;
  box-shadow: 0 0 0 10px #cde1f8;
}

.counter-num .counter {
  font-size: 2rem;
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Portfolio
--------------------------------------------------------------*/
.work-box {
  margin-bottom: 3rem;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  padding: 3%;
  background-color: #fff;
}

.work-box:hover img {
  transform: scale(1.1);
}

.work-img {
  display: block;
  overflow: hidden;

}

.work-img img {
  transition: all 1s;
}

.work-content {
  padding: 2rem 3% 1rem 4%;


}

.work-content .w-more {
  color: #4e4e4e;
  font-size: .8rem;
}

.work-content .w-more .w-ctegory {
  color: #0070ef;
}

.work-content .w-like {
  font-size: 2.5rem;
  color: #0078ff;
  float: right;
}

.work-content .w-like a {
  color: #0078ff;
  text-decoration:none;
  transition: all 1s;
  position: relative;
  display: inline-block;
}

.work-content .w-like a .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
  font-size: 1.0rem;
}


.work-content .w-like a .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.work-content .w-like a:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

.work-content .w-like a:hover{
  color: #000;
}

.work-content .w-like .num-like {
  font-size: .7rem;
}

.w-title {
  font-size: 1.2rem;
  padding: 2%;
}

/*--------------------------------------------------------------
# Portfolio Details
--------------------------------------------------------------*/
.portfolio-details {
  padding-top: 30px;
}

.portfolio-details .portfolio-details-container {
  position: relative;
}

.portfolio-details .portfolio-details-carousel {
  position: relative;
  z-index: 1;
}

.portfolio-details .portfolio-details-carousel .owl-nav, .portfolio-details .portfolio-details-carousel .owl-dots {
  margin-top: 5px;
  text-align: left;
}

.portfolio-details .portfolio-details-carousel .owl-dot {
  display: inline-block;
  margin: 0 10px 0 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #ddd !important;
}

.portfolio-details .portfolio-details-carousel .owl-dot.active {
  background-color: #0078ff !important;
}

.portfolio-details .portfolio-info {
  padding: 30px;
  position: absolute;
  right: 0;
  bottom: -70px;
  background: #fff;
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
  z-index: 2;
}

.portfolio-details .portfolio-info h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.portfolio-details .portfolio-info ul {
  list-style: none;
  padding: 0;
  font-size: 15px;
}

.portfolio-details .portfolio-info ul li + li {
  margin-top: 10px;
}

.portfolio-details .portfolio-description {
  padding-top: 50px;
}

.portfolio-details .portfolio-description h2 {
  width: 50%;
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 20px;
}

.portfolio-details .portfolio-description p {
  padding: 0 0 0 0;
}

@media (max-width: 768px) {
  .portfolio-details .portfolio-description h2 {
    width: 100%;
  }
  .portfolio-details .portfolio-info {
    position: static;
    margin-top: 30px;
  }
}

/*--------------------------------------------------------------
# Testimonials
--------------------------------------------------------------*/
.testimonials .owl-carousel .owl-item img {
  width: auto;
}

.testimonial-box {
  color: #fff;
  text-align: center;
}

.testimonial-box .author-test {
  margin-top: 1rem;
}

.testimonial-box .author-test img {
  margin: 0 auto;
}

.testimonial-box .author {
  color: #fff;
  text-transform: uppercase;
  font-weight: 600;
  margin: 1rem 0;
  display: block;
  font-size: 1.4rem;
}

.testimonial-box .comit {
  font-size: 2rem;
  color: #0078ff;
  background-color: #fff;
  width: 52px;
  height: 52px;
  display: block;
  margin: 0 auto;
  border-radius: 50%;
  line-height: 1.6;
}

@media (min-width: 768px) {
  .testimonial-box .description {
    padding: 0 5rem;
  }
}

@media (min-width: 992px) {
  .testimonial-box .description {
    padding: 0 8rem;
  }
}

@media (min-width: 1200px) {
  .testimonial-box .description {
    padding: 0 13rem;
  }
}

/*--------------------------------------------------------------
# Contact


.contact-mf {
  margin-top: 4rem;
}

@media (min-width: 767px) {
  .contact-mf .box-pl2 {
    margin-top: 3rem;
    padding-left: 0rem;
  }
}

.php-email-form .validate {
  display: none;
  color: red;
  margin: 0 0 15px 0;
  font-weight: 400;
  font-size: 13px;
}

.php-email-form .error-message {
  display: none;
  color: #fff;
  background: #ed3c0d;
  text-align: center;
  padding: 15px;
  font-weight: 600;
}

.php-email-form .sent-message {
  display: none;
  color: #fff;
  background: #18d26e;
  text-align: center;
  padding: 15px;
  font-weight: 600;
}

.php-email-form .loading {
  display: none;
  background: #fff;
  text-align: center;
  padding: 15px;
}

.php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid #18d26e;
  border-top-color: #eee;
  -webkit-animation: animate-loading 1s linear infinite;
  animation: animate-loading 1s linear infinite;
}

.php-email-form input, .php-email-form textarea {
  border-radius: 0;
  box-shadow: none;
  font-size: 14px;
}

.php-email-form input::focus, .php-email-form textarea::focus {
  background-color: #0078ff;
}

.php-email-form input {
  padding: 20px 15px;
}

.php-email-form textarea {
  padding: 12px 15px;
  margin-bottom: 0;
}

.php-email-form button[type="submit"] {
  background: #0078ff;
  border: 0;
  padding: 10px 24px;
  color: #fff;
  transition: 0.4s;
}

.php-email-form button[type="submit"]:hover {
  background: #3393ff;
}

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

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

/*--------------------------------------------------------------
# Blog
--------------------------------------------------------------*/
@media (min-width: 767px) {
  .card-blog {
    margin-bottom: 3rem;
  }
}

.card-blog .card-body {
  position: relative;
}

.card-body {
height: 250px;
}

.card-blog .card-category-box {
  position: absolute;
  text-align: center;
  top: -16px;
  left: 15px;
  right: 15px;
  line-height: 25px;
  overflow: hidden;
}

.card-blog .card-category {
  display: inline-block;
  color: #fff;
  padding: 0 15px 5px;
  overflow: hidden;
  background-color: #0078ff;
  border-radius: 4px;
}

.card-blog .card-category .category {
  color: #121212;
  display: inline-block;
  text-transform: uppercase;
  font-size: .7rem;
  letter-spacing: .1px;
  margin-bottom: 0;
}

.card-blog .card-title {
  font-size: 1.3rem;
  margin-top: .6rem;
}

.card-blog .card-description {
  color:#000;
}

.card-blog .post-author {
  display: inline-block;
}

.card-blog .post-date {
  color: #4e4e4e;
  display: inline-block;

}

/*--------------------------------------------------------------
# Blog Single
--------------------------------------------------------------*/
.post-box,
.form-comments,
.box-comments,
.widget-sidebar {
  padding: 2rem;
  background-color: #fff;
  margin-bottom: 3rem;
}

@media (min-width: 768px) {
  .post-box,
  .form-comments,
  .box-comments,
  .widget-sidebar {
    padding: 3rem;
  }
}

.blog-wrapper .article-title {
  font-size: 1.5rem;
}

@media (min-width: 768px) {
  .blog-wrapper .article-title {
    font-size: 1.9rem;
  }
}

.blog-wrapper .post-meta {
  margin: 1rem 0;
}

.blog-wrapper .post-meta ul {
  border-left: 4px solid #0078ff;
  margin-top: 1rem;
}

.blog-wrapper .post-meta ul li {
  display: inline-block;
  margin-left: 15px;
}

.blog-wrapper .post-meta ul a {
  color: #0078ff;
}

.blog-wrapper .post-meta ul span {
  color: #1e1e1e;
}

.blog-wrapper .blockquote {
  border-left: 4px solid #0078ff;
  padding: 18px;
  font-style: italic;
}

/*------/ Comments /------*/
.box-comments .list-comments li {
  padding-bottom: 40px;
}

.box-comments .list-comments .comment-avatar {
  display: table-cell;
  vertical-align: top;
}

.box-comments .list-comments .comment-avatar img {
  width: 80px;
  height: 80px;
}

.box-comments .list-comments .comment-author {
  font-size: 1.3rem;
}

@media (min-width: 768px) {
  .box-comments .list-comments .comment-author {
    font-size: 1.5rem;
  }
}

.box-comments .list-comments .comment-details {
  display: table-cell;
  vertical-align: top;
  padding-left: 25px;
}

.box-comments .list-comments a {
  color: #0078ff;
}

.box-comments .list-comments span {
  color: #1e1e1e;
  font-style: italic;
}

.box-comments .comment-children {
  margin-left: 40px;
}

/*------/ Sidebar /------*/
.widget-sidebar .sidebar-title {
  font-size: 1.6rem;
  font-weight: 600;
  border-left: 5px solid #0078ff;
  padding-left: 15px;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

.widget-sidebar .list-sidebar li {
  position: relative;
  padding: 6px 0 6px 24px;
}

.widget-sidebar .list-sidebar li:before {
  position: absolute;
  content: "";
  width: 10px;
  height: 1px;
  left: 0;
  background-color: #0078ff;
  top: 20px;
}

.sidebar-search input {
  background-color: #fff;
  border-radius: 0;
  transition: all 0.5s ease-in-out;
}

.sidebar-search .btn-search {
  background-color: #0078ff;
  border-color: #0078ff;
  border-radius: 0;
  padding-left: 20px;
  padding-right: 20px;
}

.widget-tags ul li {
  display: inline-block;
  background-color: #0078ff;
  padding: .2rem .6rem;
  margin-bottom: .5rem;
  border-radius: 15px;
}

.widget-tags ul li a {
  color: #fff;
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
footer {
  text-align: center;
  color: #fff;
  padding: 25px 0;
  background: #0062d3;
}

footer .copyright {
  margin-bottom: .3rem;
}

footer .credits {
  margin-bottom: 0;
}

footer .credits a {
  color: #fff;
}

.line{
  content: '';
  width: 50px;
  height: 3px;
  background-color: #0078ff;
  margin: 0 auto;
  margin-top: 5%;
  margin-bottom: 5%;
}


/* The actual timeline (the vertical ruler) */
.timeline {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}



/* The actual timeline (the vertical ruler) */


/* Container around content */
.container-formacao {
  padding: 10px 40px;
  position: relative;
  width: 50%;
}

/* The circles on the timeline */
.container-formacao::after {
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  right: -14px;
  background-color: white;
  border: 4px solid #0062d3;
  top: 15px;
  border-radius: 50%;
  z-index: 1;
}

/* Place the container to the left */
.left {
  left: 0;
}

/* Place the container to the right */
.right {
  left: 50%;
}

/* Add arrows to the left container (pointing right) */
.left::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  right: 30px;
  border: medium solid white;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent #0078ff;
}

/* Add arrows to the right container (pointing left) */
.right::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  left: 30px;
  border: medium solid white;
  border-width: 10px 10px 10px 0;
  border-color: transparent #0078ff transparent transparent;
}

/* Fix the circle for containers on the right side */
.right::after {
  left: -16px;
}

/* The actual content */
.content {
  padding: 20px 30px;
  background: #f5f5f5;
  position: relative;
  border-radius: 6px;
 
  box-shadow: 0 7px 8px 0 rgba(0, 0, 0, 0.2);
}



.timeline-block {
  position: relative;
  padding-top: 1.5rem;
}
 .timeline-ico {
  height: 4.8rem;
  width: 4.8rem;
  line-height: 4.8rem;
  background: #313131;
  border-radius: 50%;
  text-align: center;
  color: #FFFFFF;
  position: absolute;
  left: 35%;
  top: .9rem;
  margin-left: -2.4rem;
}
 .timeline-ico i {
  position: relative;
  left: .05rem;
  top: .2rem;
}

.resume-list {
  list-style: none;
  margin-left: -20px;
  padding-left: 60px;
  border-left: 4px solid #fff;
}

.resume-list h2 {
  font-size: 4.0vw;
  margin-bottom: 10px;
  text-shadow: 2px 2px 4px #fff;

}


.resume-list h4 {
  text-align: justify;
  font-size: 1.2vw;
  text-transform: uppercase;
  color: #fff;
  margin-top: 10px;
  text-shadow: 3px 3px 4px #371818;


}

h4.formacaoAcad{
margin-bottom:1%;
}

.resume-list p {
  margin-bottom: 3%;
}

.resume-list li {
  margin-bottom: 60px;
  position: relative;
}

.resume-list li:last-child {
  margin-bottom: 0;
}

.resume-list li:after {
  position: absolute;
  content: '';
  width: 15px;
  height: 15px;
  border: 2px solid #40424a;
  border-radius: 50px;
  background: #cacaca;
  top: 30px;
  left: -68px;
}


.iframe {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.column {
  float: left;
  width: 33.33%;
  padding: 0 10px;
}

/* Remove extra left and right margins, due to padding */
.row {margin-bottom: 10px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive columns */


/* Style the counter cards */
.card {
  padding: 16px;
  text-align: center;
  background-color: #f1f1f1;
}

.card p{
font-size: 0.9vw;
color:#0068de;
font-weight: 600;
text-align: justify;
}

.p-contact{
  font-size: 1.4vw;
color: #6d6d6d;
}

.p-contact02{
  font-size: 1.0vw;
color: #000;
}


#skill-02 .tecnologias-conecidas .card p{
  margin-top: 10%;
  text-align: center;
}

li.some-scores{
  margin-top: -60px;
}


li.some-scores:after{
display: none;
}

.img-timeline{
width: 100%;
height: auto;
margin-left: -5%;
}

.w3-panel{
    width: 48%;
  color: #000;
  background-color: #f1f1f1;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-top: 16px;
  margin-bottom: 16px;

  margin-right: 2%;
  padding: 0.01em 16px;
  float: left;
}

.eq-c{
margin-left:3%;
font-weight: bold;
}

.w3-code{
  margin-top: 16px;
  margin-bottom: 16px;
  width: auto;
  background-color: #fff;
  padding: 8px 12px;
  border-left: 4px solid #4CAF50;
  word-wrap: break-word;
  overflow: scroll;
  max-height: 270px;

}


.formacao{
  position: relative;
    margin-bottom: 3rem;
    z-index: 2;
  
max-width: 1300px;
margin: auto;
padding: 3%;

}




#bloco-header{
  width: 90%;
 
padding: 2%;
}

#bloco-header h4{
text-align: center;
}

#bloco-header p{
  margin-left: 3%;
  color: #0078ff;
  font-weight: 700;
}


#resultado p{
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.06), 0 2px 5px 0 rgba(0, 0, 0, 0.2);
  padding: 3%;
  margin-bottom: 5%;
}

p#pesp{
  color: #000;
  font-size: 50px;
}
p#pesp02{
  color: #000;
  font-size: 50px;
}
p#pesp03{
  color: #000;
  font-size: 50px;
}



#bloco{
  display: none;
  background-color: #fff;
  margin-top: 1%;
}




.btn01{
  margin-top: 1%;
margin-left: 3%;
margin-right: 3%;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.btn02{
  margin-top: 1%;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.btn02:hover {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}

.btn03{
  display: none; 
  margin-top:1%;
 
}

#curvaToogle{
  width: 100%;
  border-radius: 4px;
  background-color: #0078ff;
  border: none;
  text-align: center;
  font-size: 16px;
  filter: contrast(300%);

  display: block;
  transition: all 0.5s;
  cursor: pointer;
  margin-bottom: 3%;
  margin-top: 3%;
}

#curvaToogle p{
  margin-bottom: 0;
  color: #FFFFFF;

}

#curvaToogle:hover {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.64),0 17px 50px 0 rgba(0,0,0,0.49);
}

#curvaToogle02{
  width: 100%;
  border-radius: 4px;
  background-color: #0078ff;
  border: none;
  text-align: center;
  font-size: 16px;
  filter: contrast(300%);

  display: block;
  transition: all 0.5s;
  cursor: pointer;
  margin-bottom: 3%;
  margin-top: 3%;
}

#curvaToogle02 p{
  margin-bottom: 0;
  color: #FFFFFF;

}

#curvaToogle02:hover {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.64),0 17px 50px 0 rgba(0,0,0,0.49);
}

.btn-group button {

  border-radius: 4px;
  background-color: #0078ff;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 16px;
  padding: 15px 5px;
  width: 170px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  
}

.btn-group button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.btn-group button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.btn-group button:hover span {
  padding-right: 25px;
}

.btn-group button:hover span:after {
  opacity: 1;
  right: 0;
}



.iframe-bloco{
 
  margin-top: 3%;
 
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.06), 0 2px 5px 0 rgba(0, 0, 0, 0.2);
  padding:  1%;

  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.pos{
 color:#fff;
font-size: 1.5vw;
text-shadow: 2px 2px 4px #000;
font-weight: 500;
 }


 
 #introduction{
  padding: 3rem 1.25rem;
  position: relative;
  margin-bottom: 3rem;
  z-index: 2;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.06), 0 2px 5px 0 rgba(0, 0, 0, 0.2);
  background: rgba(250, 250, 250, 0.8);
}

#introduction p{
  font-size: 1.6vw;
  font-family: auto;
}


#resoluction{ 

  padding: 3rem 1.25rem;
  position: relative;
  background-color: #fff;
  margin-bottom: 3rem;
  z-index: 2;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.06), 0 2px 5px 0 rgba(0, 0, 0, 0.2);
  background: rgba(247, 244, 244, 0.8);


}
  
  .btn-group button {
  
    border-radius: 4px;
    background-color: #0078ff;
    border: none;
    color: #FFFFFF;
    text-align: center;
    font-size: 16px;
    padding: 15px 5px;
    width: 170px;
    transition: all 0.5s;
    cursor: pointer;
    margin: 5px;
    
  }
  

  
  .btn-group button:hover span {
    padding-right: 25px;
  }
  
  .btn-group button:hover span:after {
    opacity: 1;
    right: 0;
  }
  
  
  
  .iframe-bloco{
   
    margin-top: 3%;
   
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.06), 0 2px 5px 0 rgba(0, 0, 0, 0.2);
    padding:  1%;
  
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border: none;
  }
  

  .flex-container {
   margin-right: 2%;
   display: flex;
   flex-wrap: wrap;
   font-size: 18px;
   text-align: left;
   margin-bottom:5%;
   margin-top: 5%;
 }

 .flex-container p{
   margin-left: 3%;
   
   color: #0078ff;
   font-weight: 700;
 }
 .flex-item-left {
   padding: 10px;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
background-color: #fff;
transform: rotate(8deg);
width: 40%;
 

 }

 .flex-item-left h4{
text-align: center;
margin: auto;
font-size: 1.5vw;
 }

 .flex-item-right h4{
   text-align: center;
   margin-bottom: 10px;
   font-size: 1.5vw;

     }

 .flex-item-right {
   padding: 10px;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
background-color: #fff;
   float: left;
   transform: rotate(-8deg);
width: 60%; 

 }
 
 .flex-item-bottom {
  padding: 10px;
  width: 100%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
background-color: #fff;
  float: left;


}

 .flex-item-right img{
width: 100%;
margin:0 auto;
display: block;
 }

 



  
#bloco-header{
  width: 100%;
 
padding: 2%;
}

#bloco-header h4{
text-align: center;
font-size: 1.4vw;

}

#bloco-header p{
  margin-left: 3%;
  color: #0078ff;
  font-weight: 700;
  font-size: 1.5vw;

}


#bloco{
  display: none;
}

#bloco-02{
  display: none;
margin: auto;
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 5%; /* 8:5 Aspect Ratio */
}

.btn01{

  border-radius: 4px;
  background-color: #0078ff;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 14px;
  padding: 15px 5px;
  width: 120px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  
}

.btn02{

  border-radius: 4px;
  background-color: #0078ff;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 14px;
  padding: 15px 5px;
  width: 120px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  
}

.btn03{

  border-radius: 4px;
  background-color: #0078ff;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 14px;
  padding: 15px 5px;
  width: 120px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  
}


.btn-group button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.btn-group button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

#formulario{
  background-color: rgba(255, 255, 255, 0.1);

margin: auto;
padding-bottom: 2%;
margin-bottom: 2%;
max-height: 750px;
}

.grid-container {
  width:80%;
  float: left;
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-gap: 5px;
  background-color: #2196F3;
  padding: 5px;
  font-weight: bold;
  margin: 1%;
  margin-left: 10%;
}

.grid-container input{
  width: 95%;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid black;
  text-align: center;
  font-size: 14px;
}

#btnEnviar{
  border-radius: 4px;
  background-color:#fff;
  border: none;
  color:  #0078ff;
  text-align: center;
  font-size: 14px;
  padding: 10px;
  width: 80px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

#resultado{
  float: left;
margin-left: 1%;
  width: 100%;
  padding:  1%;
  display: none;
}

#paragrafo-respostas{
margin: 2% auto;
width: 90%;

}

#paragrafo-respostas-bloco02{
  display: none;
  width: 30%;
  float:left;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
            padding: 2%;
            overflow: hidden;
margin-left: 1%;
margin-top: 1%;
            
        transition-property: transform;
        transition-duration: 3s;
        transition-delay: 6s;
        transition-timing-function: linear;
   }

   #paragrafo-respostas-bloco02 span{
margin-left: -90%;
   }



#resultado span{
  padding: 1%;
  font-size: 1.5vw;
 
}


  #calc02resposta-bloco02{
    margin-bottom: 0;
    clear:both;
    margin-left: 3%;
    float: left;
  display: none;
    margin:0 auto;

    width: 0;
          height: 0;
    
        }


#resposta{
  margin-bottom: 0;
  clear:both;
  margin-left: 3%;
}

p#resposta {
  font-size: 1.7rem;
  position: relative;
  text-shadow: 2px 2px 4px #fff;
}

#rowResultados:after {
  content: "";
  display: table;
  clear: both;
}

#myCanvas{
  width: 48%;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.06), 0 2px 5px 0 rgba(0, 0, 0, 0.2);
  padding:  1%;
}

#myCanvas02{
  float: left;
  background: rgba(255, 255, 255, 0.8);
  width: 48%;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.06), 0 2px 5px 0 rgba(0, 0, 0, 0.2);
  padding:  1%;

}

#myCanvas03{
  width: 70%;
  margin-top: 5%;
  margin-left: 15%;
box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
background-image: linear-gradient(to right, rgba(255,0,0,0), rgb(255, 255, 255));

}

#myCanvas04{
  padding-top: 3%;
  padding-bottom: 5%;
   padding-left: 2%;
   width: 100%;

}

#myCanvas05{
  margin-left: 10%;
  margin-top: 1%;
  padding: 3%;
box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
background-image: linear-gradient(to bottom right, rgba(14,15,14,1) 50%, rgba(39,0,255,1));
width: 80%;

}


.theta{
  font-weight: lighter;
  font-family: "Times New Roman", Times, serif;
color: #000;
position: absolute;
z-index: 4;
margin-top: -7%;
margin-left: 8%;
width: 80%;
font-size: 1.4vw;
}

.theta span{
margin-right: 7.5%;
}


.fTheta{
  font-weight: lighter;
  font-family: "Times New Roman", Times, serif;
color: #000;
  position: absolute;
  z-index: 4;
  margin-top: -55%;
  margin-left: 6%;
  width: 100%;
  font-size: 1.4vw;

  }

  .fTheta span{
    display: block;
    padding-bottom: 7%;
  }
  #fThetaBottom{
    padding-top: 4%;
  }

  #theta05{
    color: #ffffff;
 padding-left: 10%;
    margin-top: -4%;
    width: 80%;
  }

#btnLimpar{
  border-radius: 4px;
  background-color: #FFFFFF;
  border: none;
  color:  #0078ff;
  text-align: center;
  font-size: 14px;
  padding: 10px;
  width: 80px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;

}



#lightbox  .column {
  float: left;
  width: 25%;
  padding: 10px;
}

#lightbox  .column img {
  opacity: 0.8; 
  cursor: pointer; 
}

#lightbox .column img:hover {
  opacity: 1;
}

/* Clear floats after the columns */
#lightbox .row:after {
  content: "";
  display: table;
  clear: both;
}

/* The expanding image container */
#lightbox .container {
  position: relative;
  display: none;
}

/* Expanding image text */
#lightbox #imgtext {
  position: absolute;
  bottom: 15px;
  left: 15px;
  color: #000;
  font-size: 20px;
}

/* Closable button inside the expanded image */
#lightbox .closebtn {
  position: absolute;
  top: 10px;
  right: 15px;
  color:#000;
  font-size: 35px;
  cursor: pointer;
}

.rank{
  float: left;
  width: 33.3%;
  margin-bottom: 16px;
  padding: 0 8px;
}




@media screen and (max-width: 650px) {
  .rank {
    width: 100%;
    display: block;
  }
}

.rank .card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4);
}

.rank .container {
  padding: 0 16px;
}

.rank .container::after, .row::after {
  content: "";
  clear: both;
  display: table;
}

.rank .title {
  color: grey;
}

.rank .button {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 8px;
  color: white;
  background-color: #000;
  text-align: center;
  cursor: pointer;
  width: 100%;
}

.rank .button:hover {
  background-color: #555;
}

#kafka{

  background-image:  linear-gradient( rgba(255,255,255,.7) 0%,rgba(255,255,255,.7) 100%),  
  url(../img/franz-kafka.png);

  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: 80%;

}

#russel{

  background-image:  linear-gradient( rgba(255,255,255,.7) 0%,rgba(255,255,255,.7) 100%),  
  url(../img/russel.png);

  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: 80%;

}

blockquote {
font: 24px/22px normal helvetica, sans-serif;
margin-top: 3%;
margin-bottom: 3%;
margin-left: 50px;
padding-left: 15px;
border-left: 3px solid #0078ff;
font-weight: 800;

}

.eq-densidade{
  box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%);
  text-align: center;
  padding: 1%;
  transition: transform .4s;

  margin-top: 2%;

}
.eq-densidade:hover{
transform:scale(1.5) ;
color: #fff;
background-color: #000;
}

.eq-densidade01{
  font-family: "Times New Roman", Times, serif;

}


   .corpo-eq{
    font-style: italic;
font-family: initial;
      position: relative;
      display: inline-block;
      vertical-align: middle;
      text-align: center;
  }

.corpo-eq-direito{
  font-style: italic;
  font-family: initial;
font-size: 2.0vw;
margin-left: 3%;
}

.eq-direito-exp{
  font-size: 20px;
vertical-align:revert;
margin-right: -1.5ex;
}

.nome-funcao{
font-size: 1.1em;
}

  .corpo-eq > span {
      display: block;
      font-size: 70%;
  }
  .corpo-eq .lim-up {
      margin-bottom: -1.0ex;
      font-size: 20px;
      margin-right: -4ex;

  }
  .corpo-eq .lim {
      margin-top: -2.0ex;
      font-size: 20px;
      margin-right: -1ex;


  }
  .corpo-eq .sum {
      font-size: 2.5vw;
      transform: rotate(12deg);
        
      font-weight: lighter;
  }


  .limes {
      position: relative;
      display: inline-block;
      margin: 0 0.2em;
      vertical-align: middle; 
      text-align: center;
  }
  .limes > span { 
      display: block;
      margin:-0.5ex auto;
  }
  .limes span.numup,
  .limes span.overdn {
      font-size: 70%;
  }
  .radical {
      position: relative;
      font-size: 1.6em;
      vertical-align: middle;
  }
  .n-root {
      position: absolute;
      top: -0.333em;
      left: 0.333em;
      font-size: 45%;
  }
  .radicand { 
     
      border-top: thin black solid;
  }
  
  .sy {
      position: relative;
      text-align: center;
  }
  .oncapital, .onsmall {
      position: absolute;
      top: -1em;
      left: 0px;
      width: 100%;
      font-size: 70%;
      text-align: center;
  }
  .onsmall {
      top: -0.7em;
  }


  .grid-container {
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-gap: 5px;
    background-color: #2196F3;
    padding: 5px;
    font-weight: bold;
  }

  .grid-container input{
    width: 100%;
  }
  
  .grid-container > div {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid black;
    text-align: center;
    font-size: 14px;
  }

  #btnEnviar{
      border-radius: 4px;
      background-color: #fff;
      border: none;
      color:#0078ff;
      text-align: center;
      font-size: 14px;
      padding: 10px;
      width: 80px;
      transition: all 0.5s;
      cursor: pointer;
      margin: 5px;
  }

  #txtIdade{
    width: 70%;
    float: left;
    }

  #inputReset{
    border-radius: 4px;
    background-color: #fff;
    border: 1px solid #FF0000;
    color:#FF0000;
    text-align: center;
    font-size: 14px;
    width: 30%;
    transition: all 0.5s;
    cursor: pointer;
    float: left;
}

  .flex-container {
    width: 100%;
    margin: auto;
    margin-right: 2%;
    display: flex;
    flex-wrap: wrap;
    font-size: 18px;
    text-align: left;
    margin-bottom:5%;
    margin-top: 5%;
  }

  .flex-container p{
    margin-left: 3%;
    font-size: 1.4vw;
    color: #0078ff;
    font-weight: 700;
  }

  


.flex-item-left blockquote{
  margin-left: -1px;
 
}

img.taylor{
width: 100%;
}

  #curva-toogle{
    display: none;
  }


  .img-desafio{ 
    padding: 1%;
    margin: 1%;
  box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
  }
  
  .img-desafio02{ 
    padding: 1%;
    margin-left: 10%;
    width: 80%;
  box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
  }
  
  
  .img-z-distribution{ 
    padding: 1%;
    margin-left: 25%;
    margin-top: 2%;
    width: 50%;
  box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
  }

  h2.desafio{
    font-size: 2rem;
    position: relative;
    text-shadow: 2px 2px 4px #fff;
}

iframe.tabela-toggle {
  margin: auto;
  width: 100%;
}

iframe.iframe-historico {
  margin: auto;
  width: 100%;
  height: 1000px;
 }


.tabela-normal{
  width:100%;

}

.tabela-normal table{
margin:auto;
}

#tabela-z{ 
  display: block;
  width: 100%;
  border: none;
  background-color: #0078ff;
  color: white;
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
  text-align: center;
}

#tabela-z:hover {
  background-color: #ddd;
  color: black;
}


#tabela-certificate{ 
  display: block;
  width: 100%;
  border: none;
  background-color: #0078ff;
  color: white;
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
  text-align: center;
}

#tabela-certificate:hover {
  background-color: #ddd;
  color: black;
}

#tabela-certificate02{ 
  display: none;
  width: 100%;
  border: none;
  background-color: #0078ff;
  color:#111111;
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
  text-align: center;
}

#abela-certificate012:hover {
  background-color: #ddd;
  color: black;
}

span.instructions{
  color:#000;
}

#tabela-z02{ 
  display: none;
  width: 100%;
  border: none;
  background-color: #0078ff;
  color: white;
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
  text-align: center;
}

#tabela-z02:hover{
  background-color: #ddd;
  color: black;
}

  .img-metas{
    
    max-width: 100%;
    
    height: auto;
        background-position: center;
    background-repeat: no-repeat;
    position: relative;
    
  }

  .metas-pos{
    padding-top: 20%;
    padding-bottom: 15%;
   

  }
  
  #metas-text {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  width: 100%;
}

#metas-text-02 {
  text-align: center;
  position: absolute;
top: 30%; 
width: 30%;
}

.h3-metas {
  font-family: "Segoe UI",Arial,sans-serif;
  font-weight: 400;
  margin: 10px 0;
  font-size: 1.8vw;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  text-shadow: 3px 3px 5px #000000;
color: #fff;
}
  
  
  .gauss{
    margin-left:0;
    font-style: italic;
    font-weight: 500;
    margin-top: 8%;
    margin-bottom: 8%;
    padding-left: 15px;
    border-left: 3px solid #0078ff;
    font-weight: 800;
  }
  
  #frase-gauss{
background-image:  linear-gradient( rgba(255,255,255,.7) 0%,rgba(255,255,255,.7) 100%), 
 url("../img/carl-gauss.png");
background-position: bottom;
background-repeat: no-repeat;
background-size: 100%;
margin-bottom: 4%;
position: relative;
box-shadow: 5px 5px 5px #aaaaaa;  
transform: rotate(7deg);


  }

  .modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  }

  .modal-content {
    font-family: 'Times New Roman', serif;

    position: relative;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
      box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s;
  }

  /* Add Animation */
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

/* The Close Button */
.close {
  color: #000;
  float: right;
  font-size: 28px;
  font-weight: bold;
}
  

.close:hover,
.close:focus {
  color:red;
  text-decoration: none;
  cursor: pointer;
}


.graContainer {
  position: relative;
  box-shadow: 0 4px 8px 0 rgba(0,120,255,0.3);

}


.graduacaoOverlay {
  cursor: pointer;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color:rgba(0, 0 , 0, 0.8);
  width: 100%;
  height: 100%;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-transition: .3s ease;
  transition: .3s ease;
}

.imgGra{

  display: block;
  width: 100%;
  height: auto;
}



.graContainer:hover .graduacaoOverlay{
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

.graText {
  width: 70%;
  color: #fff;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.modalMack {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-contentMack {
  
  margin: auto;
  padding: 20px;
 
  width: 100%;
}

/* The Close Button */
.closeMack, .closeSenac, .closeEnade, .closeFCU, .closeMedia{
  display: none;
  color: #aaaaaa;
  float: right;
  font-size: 40px;
  font-weight: bold;
}

.closeMack, .closeSenac, .closeEnade, .closeFCU, .closeMedia:hover,
.closeMack, .closeSenac, .closeEnade, .closeFCU, .closeMedia:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.imgContainerHid{
width: 80%;
margin: 2% auto;
}

.imgHidden{
  width: 100%;
  display: none;
  border: 1px solid #000;
}

.row > .column10 {
  padding-top:8px;
  padding-right:8px;
  padding-left:8px;
  margin: 1%;
  border: 1px solid rgba(0,0,0,.125);
  background-color: #f1f1f1;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  float: left;
  width:  31%;
}



.container10 {
    padding: 0 16px;
}

.container10  .title {
  text-align: center;
    color: grey;
}
.container10  h3{
  text-align: center;
   
}
.container10  .button {
  margin-top: 5%;
    border: none;
    outline: 0;
    display: inline-block;
    padding: 8px;
    color: white;
    background-color: #000;
    text-align: center;
    cursor: pointer;
    width: 100%;
    font-size: 1.3vw;
}

.container10  .button i{
margin-left: 3%;
}

.myBtnFCU{
  border: none;
  outline: 0;
  display: inline-block;
  padding: 8px;
  color: #000;
  background-color: #fff;
  text-align: center;
  cursor: pointer;
  width: 100%;
  border-radius: 5px;

}

.myBtnFCU:hover {
  border: 1px solid #fff;
  background-color: black;
  color: white;
}

[type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {
    cursor: pointer;
}

#rowResultados:after {
  content: "";
  display: table;
  clear: both;
}

.column20 {
  float: left;
  width:  20%;
}


/* The Modal (background) */
.modal02 {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
}

/* Modal Content */
 .modal-content10 {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  width: 90%;
  max-width: 1200px;
}

/* The Close Button */
 .close {
  color: #0078ff;
  position: absolute;
  top: -1px;
  right: 5px;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
 .close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

/* The Close Button */
.close02 {
  color: #0078ff;
  position: absolute;
  top: -1px;
  right: 5px;
  font-size: 35px;
  font-weight: bold;
}

.close02:hover,
 .close02:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}
.mySlides10 {
  display: none;
}

.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
 .prev,
 .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: #000;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
  background: #fff;
}

/* Position the "next button" to the right */
 .next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
 .prev:hover,
 .next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
 .numbertext10 {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}


 .demo {
  opacity: 0.6;
}
 .active,
 .demo:hover {
  opacity: 1;
}

 img.hover-shadow {
  height: auto;
  transition: transform .6s;

}




 .hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#flecha{

  background-image:  linear-gradient( rgba(255,255,255,.7) 0%,rgba(255,255,255,.7) 100%), 
   url(../img/seta.png);

  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: 50%;

}


.overlay-formacao {
  background-image:  linear-gradient( rgba(255,255,255,.5) 0%,rgba(255,255,255,.5) 100%);
  position: absolute;
  top: 0;
  left: 0px;
  padding: 0;
  height: 100%;
  width: 100%;
  opacity: .9;
}


hr.linha-metas{ 
content: '';
position: absolute;
height: 3px;
background-color: #0078ff;
width: 100px;
margin-left: 3%;
}

.seta-icon{
  font-size: 300px;
  position: absolute;
  color: #000;
  margin-top: -20%;
  z-index: 1;
}

.pos_close{
  font-size: 30px;
  cursor: pointer;
  position: absolute;
  color: #fff;
  margin-left: 96%;
  margin-top: -5%;
  z-index: 1;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;

}

.pos_close:hover{
  font-size: 40px;
  color: red;
}

#work-content-gauss{
background: #fff;
  
}

#work-content-gauss h3{
  color: #000;
   text-shadow: none; 
  }

  #curvaValoresY{
    border-bottom: 5px groove #000;
    width: 100%;
  }
  
  
  #myBtnMetas{
    border-bottom: 5px groove #fff;
    width: 100%;
  }

  .certificados{
    width: 95%;
    height: 600px;
    overflow: hidden;
  }

  .certificados-colunas {
    margin-left: 2%;
    margin-bottom: 2%;
    width: 30%;
    float: left;
}

#margin-certificados{
  margin-bottom: 4%;
}

.certificados-colunas .w3-card{
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.39);
  height: auto;
}



.certificados-colunas .w3-card .image{
cursor: pointer;
transition: .5s ease;
backface-visibility: hidden;
height: auto;

}

.certificados-colunas .w3-card .image:hover{
  opacity: 0.7;
border-color: rgb(255, 0, 0) ;
border-width: 5px;
border-style: solid;
  
  }

.certificados-colunas .w3-card .w3-container{
  padding: 0.01em 16px;
}

#modal01{
  margin-top: 64px;
}


#myModal{ 
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 11; /* Sit on top */
padding-top: 150px; /* Location of the box */
top: 0;
width: 80%; /* Full width */
height: 100%; /* Full height */
overflow:auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,1.0); /* Black w/ opacity */
}




  #myModal_hist{ 
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 11; /* Sit on top */
    padding-top: 150px; /* Location of the box */
    top: 0;
    left: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow:auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,1.0); /* Black w/ opacity */
    }
    
    #myModal_hist img{
      max-width: 700px;
      width: 100%;
    position: relative;
    
    }
    
    #myModal_hist img:hover{
      transform: scale(1.05);
      transition: 0.3s;}
    

#modal_tcc {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 11; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,1.0); /* Black w/ opacity */
}
/* Modal Content */

#box-metas .modal-content {
  position: relative;
  background-image: linear-gradient(to right, rgba(255,250,255,0.1), rgba(255,255,255,0.2));
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s;
}

#myBtnMetas01{
  border: none;
  background:none;
  color: #ffffff;
  text-shadow: 3px 3px 5px #000000;
}

#myBtnMetas02{
  border: none;
  background: rgba(0, 0, 0, 0.0);
  color: #fff;
  text-shadow: 3px 3px 5px #000000;
}


#logo {
 position:fixed;
  width: 70px;
  height: 70px;

  background: #fff;

}

    
    /* The Modal (background) */
    .modal-landing {
      display: none; /* Hidden by default */
      position: fixed; /* Stay in place */
      z-index: 3; /* Sit on top */
      padding-top: 100px; /* Location of the box */
      left: 0;
      top: 0;
      width: 100%; /* Full width */
      height: 100%; /* Full height */
      overflow: auto; /* Enable scroll if needed */
      background-color: rgb(0,0,0); /* Fallback color */
      background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    }
    
    /* Modal Content */
    #myModal-landing .modal-content {
      position: relative;
      background-color: #fefefe;
      margin: auto;
      padding: 0;
      border: 1px solid #888;
      width: 70%;
      box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
      -webkit-animation-name: animatetop;
      -webkit-animation-duration: 0.4s;
      animation-name: animatetop;
      animation-duration: 0.4s
    }
    
    /* Add Animation */
    @-webkit-keyframes animatetop {
      from {top:-300px; opacity:0} 
      to {top:0; opacity:1}
    }
    
    @keyframes animatetop {
      from {top:-300px; opacity:0}
      to {top:0; opacity:1}
    }
    
    /* The Close Button */
    #myModal-landing .close {
      color: #fff;
      float: right;
      font-size: 28px;
      font-weight: bold;
    }
    
    #myModal-landing .close:hover,
    #myModal-landing   .close:focus {
      color: #000;
      text-decoration: none;
      cursor: pointer;
    }
    
    #myModal-landing .modal-header-landing {
      padding: 2px 16px;
      color: white;
    }
    

    
    #myModal-landing  .modal-footer-landing {
      padding: 2px 16px;
      color:#2196F3;

    }

    #myModal-landing  .modal-footer-landing h3{
margin: 1%; 
  color:#2196F3;

    }


    #myModal-landing   .modal-body{
    
        width: 100%;
        height: 70%;
       
    }

    #myModal-landing .modal-body-left{
        float: left;
        width: 53%;
        margin: 0.5%;
    }

    #myModal-landing .modal-body-right{
        margin: 0.5%;
        float: left;
        width: 43%;

    }

    #myModal-landing .img-modal{
        max-width: 100%;
  height: auto;
  margin-left: 5%;
    }

    #myModal-landing  .img-logo{
        width: 100px;
  height: auto;
  
    }

    #myModal-landing  .title{
      text-align: center;
      font-size: 4vw;
      font-family: cursive;
    }

    #myModal-landing .sub-title{
      text-align: center;
      font-size: 1.7vw;
      font-family: cursive;
    }

    #myModal-landing .par-title{
      font-size: 12px;
      margin: 3%;
      text-align:justify;
      font-family: cursive;
    }

    #myModal-landing  .h3-title{
  text-align: center;
  font-style: italic;
  color:    #1a78c2;
  font-size: 1.4vw;
  margin-top: 10%;

}

#myModal-landing   .btn {
  border: 2px solid black;
  border-radius: 5px;
  background-color: white;
  color: black;
  font-size: 16px;
  cursor: pointer;
  margin: 2%;
}

/* Blue */
#myModal-landing .info {
  border-color: #2196F3;
  color: dodgerblue;
}

#myModal-landing .info a{
  padding: 14px 28px;
font-weight: bold;
  color: dodgerblue;
}

#myModal-landing .info a:hover{

  color: #fff;
}

#myModal-landing .info:hover {
  background: #2196F3;
  color: white;
}

#myModal-landing .coluna-buttons{
text-align: center;
}

#myModal-landing .hr-footer{
  margin: auto;
      width: 80%;
      color:#2196F3;
      border: 1px solid #ccc;
}

.contact-img{
  width: 80%;
}

.icon-contact{
 font-size: 30px;
 width: 50px;
 text-align: center;
 text-decoration: none;

}

.icon-card:hover{
 opacity: 0.7;
 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

}

.icon-card{
 width:70px;
 height: auto;
 transition: 0.3s;
}

.column-contact{
 
   float: left;
   width: 25.00%;
   padding: 0 10px;
}

.column-contact-localizacao{
 width: 100%;
  float: left;
  padding:10px;
}

#contact-grid{
 width: 100%;
 margin: auto;
 padding-bottom: 5%;

}

#contact-grid p{
text-align: center;

}

#contact-localizacao{
  display: block;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  padding: 16px;
  text-align: center;
  background-color: #f1f1f1;
  width: 100%;
}

.about-info{
  padding-left: 10px;
}

.mini-memorial {
  flex: 0 0 50%;
  width: 50%;
  padding-left: 15px;
  padding-right: 15px;
}





p.mini-menu-lead {
  text-align: justify;
  font-size: 1.5vw;
  font-weight: 300;
}

p.mini-menu-lead {
  text-align: justify;
  font-size: 1.5vw;
  font-weight: 300;
}

.col-center{
  width: 33%;
  padding-right: 15px;
  padding-left: 15px;
  height: 400px;
}

.col-left{
  width: 33%;
  padding-right: 15px;
  padding-left: 15px;
  height: 400px;

}

.col-right{
  width: 33%;
  padding-right: 15px;
  padding-left: 15px;
height: 400px;

}

.row-livro{
 position: relative;
margin: auto;
}

.column-livro {
float: left;
padding: 10px;
max-height: 500px; /* Should be removed. Only for demonstration */
height: 400px;

}

.left-livro {
width: 25%;
}

.left-livro img {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  height: auto;
  }

  .right-livro{
	  width: 20%;
  }
  
  .middle-livro {
	width: 50%;
  }
  
  .row-livro:after {
    content: "";
    display: table;
    clear: both;
    }
  
    .content-livro .product-title {
      font-weight: 600;
      font-size: 2.0vw;
      color: #000;
      letter-spacing: 0.62px;
      line-height: 1.1;
    font-family: serif;
    padding: 0 0 20px 0;
    text-shadow: 2px 2px 4px #fff;

    }
    
    .content-livro .product-description {
      font-weight: 500;
      font-size: 20px;
      color: #fff;
      letter-spacing: 0.62px;
      line-height: 1.2;
      padding: 20px 0 0 0;
text-align: justify;
text-shadow: 2px 2px 4px #484748;
}


    
  
  .product-ref{
    color: #fff;
    padding: 3px;
    border: 1px solid #ffff;
  }
  .card-livro {
    position: relative;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    max-width: 300px;
    margin: auto;
    text-align: center;
    font-family: arial;
    margin-top: 5%;
    }
  
    .card-livro02 {
      position: relative;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
      max-width: 300px;
      max-height: 150px;
      margin: auto;
      text-align: center;
      font-family: arial;
      margin-top: 5%;
      }

    .card-livro h1{
      color:#fff;
      font-size: 1.4vw;
      position: absolute;
      top: 5%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
    }
    
    .price-livro {
    color: #757575;
    font-size: 22px;
    }
  
    .card-livro a{
    text-decoration: none;
    font-size: 1.2vw;
    color: #fff;
    }
    
    .card-livro a:hover{
    transition: 0.1s;
    font-size: 1.4vw;
      color: blue;
      }

    .card-livro button {
    border: none;
    outline: 0;
    padding: 12px;
    color: white;
    background-color: #000;
    text-align: center;
    cursor: pointer;
    width: 100%;
    font-size: 18px;
    }
    
    .card-livro button:hover {
    opacity: 0.7;
    }
  
    .row-descricao {
      line-height: 3;
      text-align: left;
      width: 100%;
   
  }

  
.col-lg-8-descricao {
  flex: 0 0 80.00%;
  max-width: 100.00%;
  width: 80%;
  margin: auto;
}

.px-4 {
  padding-right: 1.5rem;
  padding-left: 1.5rem;
}

.nav-tabs .nav-item {
  margin-bottom: -1px;
}

.d-flex {
  display: flex;
 
}

#other-details{
  margin-bottom: 1%;
  border-bottom: none;
  background-color: #fff;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.6);
  border-radius: 4px;
}




.tab-content-descricao{ 
border: 1px solid #E1DDD7;
border-radius: 4px;
padding: 2rem 2.5rem;
margin-bottom: 2%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.6);
background-color: #fff;

}

#dados-tecnicos{
color: #000;
}

#autores{
color: #000;
display:none ;
}

#descricao{
color: #000;
display: none;
}

#sumario{
  color: #000;
  }



  .component{
    font-family: "Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif;
    font-size: 20px;
    text-shadow: 1px 1px 2px #fff;
    font-weight: 600;
    margin:0 auto;
    padding: 3rem;
    color: #000;
  }


  
  .component blockquote.quote {
      position: relative; 
      text-align: center;
      padding: 1rem 1.2rem;
      width: 80%;  /* create space for the quotes */
      color: #fff;
      margin: 1rem auto 2rem;
      text-shadow: 2px 2px 4px #484748;

  }
  .component blockquote.EN {
      background:
      linear-gradient(to right, #fff 4px, transparent 4px) 0 100%,
      linear-gradient(to left, #fff 4px, transparent 4px) 100% 0,
      linear-gradient(to bottom, #fff 4px, transparent 4px) 100% 0,
      linear-gradient(to top, #fff 4px, transparent 4px) 0 100%;
      background-repeat: no-repeat;
      background-size: 20px 20px;
      border-left: none;
  }
  
  .component blockquote.DE {
      background:
      linear-gradient(to right, #fff 4px, transparent 4px) 0% 0%,
      linear-gradient(to bottom, #fff 4px, transparent 4px) 0% 0%,
      linear-gradient(to left, #fff 4px, transparent 4px) 100% 100%,
      linear-gradient(to top, #fff 4px, transparent 4px) 100% 100%;
      background-repeat: no-repeat;
      background-size: 20px 20px;
      border-left: none;

  }
      
  
  /* -- create the quotation marks -- */
  .component blockquote.quote:before,
  .component blockquote.quote:after{
      font-family: FontAwesome;
      position: absolute;
      color: #fff;
      font-size: 34px;
  }
  
  .component blockquote.EN:before{
      content: "\f10d";
      top: -12px;
      margin-right: -20px;
      right: 100%;
  }
  .component blockquote.EN:after{
      content: "\f10e";
      margin-left: -20px;
      left: 100%;  
      top: auto;
      bottom: -20px;
  }
  .component blockquote.DE:before{
      content: "\f10e";
      margin-right: -20px;
      bottom: -20px;
      right: 100%;
  }
  .component blockquote.DE:after{
      content: "\f10d";
      margin-left: -20px;
      left: 100%;  
      top: -20px;
      bottom: auto;
  }
  
  .zitat1 {
    position: relative;
    font-family: 'Verdana', serif;
    font-size: 2.4em;
    line-height: 1.5em;
  }
  .zitat1 cite {
    font-family: 'Verdana', sans-serif;
    font-size: 0.6em;
    font-weight: 700;
    color: #bdbec0;
    float: right;
  }
  .zitat1 cite:before {
    content: '\2015';
  }
  .zitat1:after {
    content: '\201d';
    position: absolute;
    top: 0.28em;
    right: 0px;
    font-size: 6em;
    font-style: italic;
    color: #bdbec0;
    z-index: -1;
  }
  .sidekick {
    position: relative;
    padding-left: 1em;
    border-left: 0.2em solid #fff;
    font-family: 'Roboto', serif;
    font-size: 2.4em;
    line-height: 1.5em;
    font-weight: 100;
  }
  .sidekick:before, .sidekick:after {
    font-family: Calibri;
      color: #fff;
      font-size: 34px;
  }
  .sidekick:before {content: '\201e'}
  .sidekick:after {content: '\201c';}
  .sidekick cite {font-size: 50%; text-align:center; top:50%}
  .sidekick cite:before {content: ' \2015 '}


    
 .eqDensidade01{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin-top: 3%;
margin-left: 50px;
padding-left: 15px;
border-left: 3px solid #0078ff;
width: 100%;
  }

  .integracao01{
    font-size: 1.5em;
    font-weight: 800;
margin-right: 3%;
margin-left: 3%;

  }

#integracao01{
font-weight:lighter;
font-family: "Times New Roman", Times, serif;

}

  #eqDensidade01{
    color: #000;

  }

.eqDensidade01 .integrante{
     display: inline-block;
        transform: rotate(15deg);
font-size: 150%;
    }

    .integracao01 .inf{
      bottom:-0.75em;
      right: 0.6em;
    }

    .integracao01 .sup{
      top:-1.25em;
      right: 0.4em;
    }

    .integracao01 .sup-exp{
      top:-0.75em;
    }


    .eqDensidade01 .fracao{
     display: inline-grid;
 }

 .eqDensidade01 .fracao02{
  display: inline-grid;
  position: relative;
  text-align: center;
  font-size: 0.6em;
  margin-top: -18%;
  margin-bottom: -18%;
}


.eqDensidade01 #fracao02{
  font-size: 1.0em;
  margin-top: -50%;
}



 .eqDensidade01 #fracao{
     border-bottom: 1px solid;
     text-align: center;
}

.eqDensidade01 #fracaoMais{
  text-align: center;
  
}

.iframe-blog{
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  min-height: 215px;
  height: 100%;
  border: none;
}


.container-python-simulator #paragrafo-respostas-python{
  display: none;
  float:left;
  width:35%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  margin-left: 2%;                   
            padding: 0.375rem 0.75rem;
   }

   .container-python-simulator #resposta-python{
     display:none; 
   }

   .container-python-simulator span{
         font-family: "Times New Roman", Times, serif;
float:left;
font-size:1.5vw;
width:100%;
     }

          #myCanvas06{
            display: none;
float: left;            
margin-left: 1%;
margin-top: 1%;
          }

          .container-python-simulator      #num02{
            width:50%;
            display: block;
            padding: 0.375rem 0.75rem;
font-size: 1rem;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: 0.25rem;
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
          }

          .container-python-simulator     label {
display: inline-block;
margin-bottom: 0.5rem;
font-weight: 600;
}

.container-python-simulator .btn:not(:disabled):not(.disabled) {
cursor: pointer;
}
 
.container-python-simulator .btn-primary {
color: #fff;
background-color: #007bff;
border-color: #007bff;
}
.container-python-simulator .btn {
display: inline-block;
font-weight: 400;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: 1px solid transparent;
padding: 0.375 rem 0.75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: 0.25rem;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.container-python-simulator h2{
  font-size: 1.4vw;
}

.closeBtnPython {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
  color: #ccc;
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #818181;
    display: block;
    transition: 0.3s;
  
}


.closeBtnPython:hover, 
.closeBtnPython:focus {
  color: #f1f1f1;
}

#btnCloseNav{
  z-index:5;
  color: #fff;
  display: none;
width: 50px;
height: 50px;
font-size: 40px;
}

#closebtnSpan{
  background-color: #fff;
  width: 50px;
height: 50px;
}

#container-calc-normal02{
  clear: both;
  padding-top: 2%;
}

#container-calc-normal02 #distImage{
	position:absolute;
	left:0px;
	top:0px;
	width:599px;
	z-index:10;
display: none;
	border-left-style:ridge;
border-width: 5px;
}


#container-calc-normal02 #mainInput{
	position:relative;
	text-align:left;
	float:left;
	margin: 1%;
	padding: 1%;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(55,100,100,1));
width: 100%;
}
#container-calc-normal02 #mainDist{
	position:relative;
	float:left;
	width:597px;
	margin: 1%;
}

#container-calc-normal02	.column {
  float: left;
  padding: 0 10px;
  max-height: 400px;
}

#container-calc-normal02 #left-column{
	width:40%;

}

#container-calc-normal02 #meio-column{
	width: 50%;

}

#container-calc-normal02 #right-column{
	width: 50%;
  margin: auto;

}


/* Remove extra left and right margins, due to padding */
#container-calc-normal02 .row {margin: 0 -5px;
  width: 100%;
}

/* Clear floats after the columns */
#container-calc-normal02 .row:after {
  content: "";
  display: table;
}


#container-calc-normal02 input[type=text], select {
  width: 100%;
  padding: 5px 5px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

#container-calc-normal02 input[type=submit] {
  width: 100%;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

#container-calc-normal02 input[type=submit]:hover {
  background-color: #45a049;
}


#container-calc-normal02 #demo-python{
margin: 1%;
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(55,100,100,1));
display: none;
}

#container-calc-normal02 p{
	padding: 1%;
font-size: 1.3vw;
font-weight: 600;
}

#container-calc-normal02 button{
  background-color: white;
  color: black;
   cursor: pointer;

  padding: 8px 8px; 
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

#container-calc-normal02 button:hover {
  background-color: #555555;
  color: white;
}


#container-calc-normal02 #btnLimparPython{
	display:none;
}

.col-md-4{ 
  padding-left: 1%;
  padding-right: 1%;
}
#box-metas{
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
padding:0;

}

.container-python-simulator h4{

  text-transform: uppercase;
  color: #fff;
  text-shadow: 2px 2px 4px #000;
}

@font-face {
  font-family:myFirstFont;
  src: url(../vendor/ionicons/fonts/ionicons.ttf);

  font-display: swap;
}

.divulgacao{
  width: 100%;
  height: auto;
}

p.p_divulgacao{ 
  position: relative;
}

.glass-icon{
  
  transform: rotate(120deg);
  font-size: 2.8vw;
font-weight: 600;
color: #fff;
}

#paragrafo-respostas-bloco02 span{
  color: snow;
  text-shadow: 1px 2px #000;
}

#resp_01.animate {
  transform: translate(90%);
  transition-property: transform;
  transition-duration: 1.0s;
  transition-timing-function: linear
}

#resp_00.animate02 {
  transform: translate(90%);
  transition-property: transform;
  transition-duration: 1.0s;
  transition-delay:1.0s;
  transition-timing-function: linear
}
#resp_04.animate03 {
  transform: translate(90%);
  transition-property: transform;
  transition-duration: 1s;
  transition-delay:2.0s;
  transition-timing-function: linear
}

#resp_02.animate04 {
  transform: translate(90%);
  transition-property: transform;
  transition-duration: 1.0s;
  transition-delay:3.0s;
  transition-timing-function: linear
}#resp_03.animate05 {
  transform: translate(90%);
  transition-property: transform;
  transition-duration: 1.0s;
  transition-delay:4.0s;
  transition-timing-function: linear
}#resp_05.animate06 {
  transform: translate(90%);
  transition-property: transform;
  transition-duration: 1.0s;
  transition-delay:5.0s;
  transition-timing-function: linear
}

.container-typed{
  display: inline-block;
}
.typed-out{
  overflow: hidden;
  border-right: .15em solid orange;
  white-space: nowrap;
  animation: 
    typing 2s forwards;
  font-size: 1.6rem;
  width: 0;
}
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

#curva01{
  transition:linear;
}
#curva02{
  transition:linear;
}
#curva03{
  transition:linear;
}

p#retorno03{
  width: 30px;
  border-bottom: 2px dashed red;
  padding-left: 15px;
  margin-left: -15px;
  display: none;
}


.col-lg-3 {
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
}

.col-md-4 {
  -ms-flex: 0 0 33.333333%;
  flex: 0 0 33.333333%;
  max-width: 33.333333%;

     
}

#img-CV{
 padding: 0;
 border: none;
background: none;
  position: relative;
  width: 100%;
  height:auto;
  text-align: center;
  box-shadow:none;
}

#img-CV03 .container10{
  padding: 0;
  border: none;
 

 }

 #img-CV03 .container10 .button{
  background: none;
  text-decoration: none;
 }

 #img-CV03 .container10 .button:hover{
color: red;
font-size: 1.4vw;
 }

 
 #img-CV .container10 .button{
  background: none;
  text-decoration: none;

 }

 #img-CV .container10 .button:hover{
color: red;
font-size: 1.4vw;
 }

 
 #img-CV02 .container10 .button{
  background: none;
  text-decoration: none;

 }

 #img-CV02 .container10 .button:hover{
color: red;
font-size: 1.4vw;
 }


 #img-CV03 img{
   border-radius: 50%;
   width: 100%;
   height: auto;
 }





 #img-CV02 img{
  border-radius: 50%;
  width: 100%;
height:auto ;
}

#img-CV img{
  width: 100%;
height: auto;
}

#img-CV02{
  padding: 0;
  border: none;
  background: none;
border-radius: 50%;
   position: relative;
   width: 100%;
   height:auto;
   text-align: center;
   transition: transform 0.6s;
   transform-style: preserve-3d;
   box-shadow: none;
 }

 #img-CV03{
  padding: 0;
  border: none;
  background: none;
border-radius: 50%;
   position: relative;
   width: 100%;
   height: auto;
   text-align: center;
   transition: transform 0.6s;
   transform-style: preserve-3d;
   box-shadow:none;
 }

#column-img-CV{
  background-color: transparent;
  perspective: 1000px;
  border-radius: 50%;
}




.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: auto;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: #bbb;
  color: black;
}

.flip-card-front img{
width: 100%;
height: auto;
}

.flip-card-back {
  color: white;
}

.flip-card-back p{
font-size: 1.5vw;
  color: white;

}

#section-counter{
  min-height: 200px;
}

#container10-meio{         
  margin-top: 100%;
}

#citacao-einstein{
  display: none;
  font-size: 1.7vw;
  line-height: 1.4;
  position: absolute;
  bottom: -120px;
  text-shadow: 3px 3px #000;
  left: 50%;
  right: 0;
  background-color:rgba(192,192,192,0.3);
  overflow: visible;
  width: 100%;
  height:0;
  transition: .9s ease;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  font-weight: 600;
  text-align: justify;
}

#citacao-CV{
  transform: translate(-50%, -50%);
position:absolute;
bottom: -350px;
  left: 50%;
  width: fit-content;
  text-shadow: 3px 3px #000;

}

#overlay {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color:rgba(192,192,192,0.3);
  overflow: hidden;
  width: 100%;
  height:0;
  transition: .5s ease;
  border-radius: 50%;

}

#overlay02 {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color:rgba(192,192,192,0.3);
  overflow: hidden;
  width: 100%;
  height:0;
  transition: .5s ease;
  border-radius: 50%;

}
#overlay03 {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color:rgba(192,192,192,0.3);
  overflow: hidden;
  width: 100%;
  height:0;
  transition: .5s ease;
  border-radius: 50%;

}

#img-CV02:hover #overlay {
  bottom: 0;
  height: 100%;}

  
#img-CV03:hover #overlay02 {
  bottom: 0;
  height: 100%;}


  
  #text-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color:rgba(152,112,36,.8);
    overflow: hidden;
    width: 100%;
    height:100%;
    transition: .5s ease;
    border-radius: 50%;
  }

  
  #text-overlay02 {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0,0,0,.8);
    overflow: hidden;
    width: 100%;
    height:100%;
    transition: .5s ease;
    border-radius: 50%;
  }


#text-overlay img{
  position: absolute;
  left: 50%;
  bottom: 50%;
  z-index: 5;
    transform: translate(-50%, -50%);
width: 13%;
}


#text-overlay p{
  position: absolute;
  left: 48%;
  bottom: 35%;
  color: #fff;
  font-size: 1.3vw;
  width: fit-content;
  z-index: 5;
  transform: translate(-50%, -50%);
text-shadow: 2px 2px #000;
}




#text-overlay02 p{
  position: absolute;
  transform: translate(-50%, -50%);
  text-shadow: 2px 2px #000;
  font-size: 1.3vw;
  width: fit-content;
  left: 50%;
  bottom: 35%;
  color: #fff;
  z-index: 5;
}

#text-overlay02 img{
  position: absolute;
 bottom: 50%;
  transform: translate(-50%, -50%);
  width: 13%;

  z-index: 5;
}

 



#overlay p{ 
color: #fff;
font-size: 1.7vw;
width: max-content;
text-align: center;
}

#button-CV02{ 
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
text-shadow: 2px 2px #000;

}

#button-CV04{ 
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  text-shadow: 2px 2px #000;
  
  }
#overlay02 p{ 
  color: #fff;
  font-size: 1.7vw;
  text-shadow: 2px 2px #000;
  text-align: center;
width: max-content;
  }
  
  #button-CV03{ 
    text-shadow: 2px 2px #000;

  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  }
.arrow {
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
}


.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

#overlay button {
  display: contents;
  position: absolute;
  top: 180%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #555;
  color: white;
  font-size: 1.5vw;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  text-shadow: 2px 2px #000;
  font-weight: bold;
  text-align: center;
}

#overlay02 button {
  display: contents;
  position: absolute;
  top: 180%;
  left: 50%;
  text-shadow: 2px 2px #000;
font-weight: bold;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #555;
  color: white;
  font-size: 1.5vw;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  text-align: center;
}

#overlay03 button {
  display: contents;
  position: absolute;
  top: 180%;
  left: 50%;
  text-shadow: 2px 2px #000;

  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #555;
  color: white;
  font-size: 1.2vw;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  text-align: center;
}



.overlay-mf-curva02 {
  position: absolute;
  top: 10;
  left: 0px;
  padding: 0;
  height: 0;
  width: 0;
  opacity: .7;
  background-color: #000;

}

.conquistas_Paragrafo{
  text-align: center;
  font-size: 1.3vw;
  margin-top: 5%;
  color:#505050;
font-weight: 700;
transition: 0.3s;

}

.conquistas_Paragrafo:hover{
  font-size: 1.5vw;
  text-shadow: 2px 2px 4px blue;

}

#ProcessosSeletivosImg01{
  width: 100%;
}

#portIcon{
  width: 33%;
}

#einstein_citacion {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
  width: 100%;
}

#img-CV:hover #einstein_citacion {
  opacity: 0.3;
}

#img-CV:hover .middle {
  opacity: 1;
}

.text {
  color: #fff;
  font-size: 1.7vw;
  line-height: 1.4;
  text-shadow: 3px 3px #000;
  left: 50%;
  overflow: visible;
  width: 100%;
  transition: .9s ease;
  font-weight: 600;
  text-align: justify;
}


#typedtext .post{
  
    margin: 0 auto;
    margin-bottom: 20px;
    font-size: 17px;
    padding: 2%;
    position: relative;
}

#typedtext h1.title {
  text-align: center;
  color: #fff;
  font-family: "Segoe UI",Arial,sans-serif;
  font-weight: 400;
  margin: 10px 0;  
  font-size: 1.5vw;
  line-height: 1.5;

}

#typedtext .dowload_tcc {
  width: 100%;
  line-height: 1.5;

}
#typedtext .btn_tcc {
  background-color: rgb(5, 64, 123);
  border: none;
  color: #fff;
  padding: 12px 30px; 
  cursor: pointer;
  font-size: 1.2vw;
  width: 20%;
  margin-left: 45%;
  /* text-decoration: none; */
}

  
#typedtext .slideshow-container {
    max-width: 1000px;
    position: relative;
    margin: auto;
}

#typedtext .link_title{
  font-size: 17px;

  color: #007bff;
  text-decoration: none;
  background-color: transparent;
}



#typedtext .fade {
  display: block;

  animation-name: fade;
  animation-duration: 1.5s;
}

#typedtext .mySlides_02 {
  display: none;
  box-shadow: rgb(0 0 0 / 56%) 0px 22px 70px 4px;
  opacity: 1;

}

#typedtext .mySlides_02 img{
  transform: scale(1.0);
width: 100%;
height: 100%;
}


#typedtext #mySlide02 .numbertext {
  background-color: #fff;
}


#typedtext s.numbertext {
    color: #000;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
    font-variant-numeric: oldstyle-nums;
}

#typedtext .cont_tcc {
  display: inline-flex;
  width: 50%;
 list-style: none;
}

#typedtext .cont_tcc .cont_tcc_list {
    background-color: transparent;
    margin: 0 auto;
}

#typedtext li:nth-child(2n+1) {
    background: rgba(255, 0, 0, 0.5);
}

#typedtext .cont_tcc_list::after{
display: none;
}

#typedtext .prev02, .next02 {
    cursor: pointer;
    width: auto;
    padding: 16px;
    margin-left: 3%;
    color: #fff;
    font-weight: bold;
    font-size: 40px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    -webkit-user-select: none;
    margin-top: -1%;
}

#typedtext #dot_resp {
  width: 60px;
  color: #fff;
  background: #000;
  border: 2px double #fff;
  border-width: 5px;
  display: block;
  font-size: 30px;
}

.close {
  color: #fff;
  float: right;
  font-size: 28px;
  font-weight: bold;
}
  

.close:hover,
.close:focus {
  color:red;
  text-decoration: none;
  cursor: pointer;
}

.profile_buttons{
  width: 45%;
  margin: auto;
}

.btn_web_developer{
  border-bottom: 1px solid #ccc;
  border-left: 1px solid #ccc;
border-top: none;
border-right: none;
  background-color: #2196F3;
  padding: 14px 28px;
  font-size: 1.5vw;
  cursor: pointer;
  display: inline-block;
  color:#2a2a2a;
  font-weight: 600;

}



.btn_web_developer:hover {
  background: #2196F3;
  color: white;
}



.btn_data_scientist:hover {
  background:#2196F3;
  
  color: white;
}

.btn_data_scientist {
  border-top: none;
border-right: none;
  border-bottom: 1px solid #ccc;
  border-left: 1px solid #ccc;
    background-color: inherit;
  padding: 14px 28px;
  font-size: 1.5vw;
  cursor: pointer;
  display: inline-block;
  color: #000;
font-weight: 600;
}

.img_diploma_pos{
  width: 80%;
  margin: auto;
}

#canvas_cinem{
  max-width: 100%;
  height: auto;
}

#imgHist{
  width: 700px;
  margin: 0 auto;
}

@media (max-width: 1600px) {


.service-box .s-description {
  
  font-size: 1.0vw;
}

.pos{
  font-size: 1.7vw;
}

.card p{
  font-size: 1.0vw;
}

}


@media (max-width: 1500px) {



  .service-box .s-description {
    
    font-size: 1.1vw;
  }

  .gauss{
    font-size: 1.6vw;
  }

  .pos{
    font-size: 1.8vw;
  }

  .resume-list h4{
    font-size: 1.4vw;
  }

  
  }

  @media (max-width: 1400px) {
.text{
  font-size: 1.9vw;
}

.card p{
  font-size: 1.0vw;
}
.card-blog .card-description {
  font-size: 1.2vw;
}
  }


  
@media (max-width: 1300px) {


  .service-box .s-description {
    
    font-size: 1.2vw;
  }



.p-contact02 {
  font-size: 1.1vw;

}

p.mini-menu-lead {
  font-size: 1.6vw;
}

.gauss{
  font-size: 1.7vw;
}

#frase-gauss{
  margin-bottom: 8%;
}
.pos{
  font-size: 2.0vw;
}

.h3-metas{
  font-size: 2.0vw;
}


.corpo-eq .lim-up {

    margin-right: -3ex;
}  


.content-livro .product-title{ 
  font-size: 2.5vw;
}
 
.content-livro .product-description{
  font-size: 18px;
}

.card-livro h1{
  font-size: 1.6vw;
}

.container-python-simulator h2 {
  font-size: 2.0vw;
}


#container-calc-normal02 p{
font-size: 1.8vw;
}

#text-overlay p{
  font-size: 1.7vw;
}

#text-overlay02 p{
  font-size: 1.7vw;
}

#text-overlay03 p{
  font-size: 1.7vw;
}

#text-overlay img {
width: 60px;
}
#text-overlay03 img {
  width: 60px;
  }

  #text-overlay02 img {
    width: 60px;
    }

    
#overlay02 p{
  font-size: 2.0vw;
}

    
#overlay p{
  font-size: 2.0vw;
}

    
#overlay02 button{
  font-size: 1.8vw;
}

    
#overlay button{
  font-size: 1.8vw;
}

.text{
  font-size: 2.1vw;
}

}

@media (max-width: 1200px) {
  #introduction p{
    font-size: 1.7vw;
 
  }

  .flex-container p{
    font-size: 1.6VW;
  }
  .title-s{
    font-size: 1.2vw;
  }

  #paragrafo-respostas-bloco02{
    width: 25%;
  }

  #citacao-einstein{
    font-size: 1.8vw;
  }

  

#citacao-CV {
bottom: -300px;
}

.conquistas_Paragrafo{
font-size: 1.8vw;
}

.button{
  font-size: 1.6vw;
}

}

  @media (max-width: 1100px) {


    .service-box .s-description {
      
      font-size: 1.3vw;
    }
    .p-contact02 {
      font-size: 1.1vw;
    
    }

    .gauss{
      font-size: 1.8vw;
    }

    .w-title {
      
      text-align: justify;

  }  

  .resume-list h4{
    font-size: 1.6vw;
  }



.nav-link{
  font-size: 1.5vw;
}

#container-calc-normal02 #left-column{
  width: 100%;
  margin-bottom: 2%;
}
#container-calc-normal02 #meio-column
{
  width: 100%;
}
#container-calc-normal02 #form{
  display: flex;
  width: 100%;
}

#container-calc-normal02 #right-column {
  width: 70%;
}
.container-python-simulator span{
  font-size: 2.0vw;
}
#resultado span{
  font-size: 2.0vw;
}

#container-calc-normal02 p {
  font-size: 2.0vw;

}

.about-info{
  padding-left: 5px;
}

#paragrafo-respostas-bloco02{
  width: 100%;
  margin-top:2% ;
}
.text{
  font-size: 2.3vw;
}


  }

@media (max-width: 1000px) {

  #myCanvas03{
width: 90%;
margin-left: 5%;

  }

  .tecnologias-conecidas .column .card{
    padding:5px;
  }

  .tecnologias-conecidas .column .card p{
    font-size: 1.5vw;
  }

  .container, .container-md, .container-sm {
    max-width: 920px;
}

.service-box .s-description {
      
  font-size: 1.7vw;
}

.p-contact02 {
  font-size: 1.5vw;

}




p.mini-menu-lead {
    text-align: justify;
    font-size: 1.8vw;
    font-weight: 300;
}

.mini-memorial{
  flex: 0 0 100%;
  width: 100%;
}

.col-left{
  width: 80%;
  margin-left: 10%;
  margin-bottom: 2%;
}

.col-center{
  width: 75%;
  margin-left: 12%;
  margin-top: 25%
}

.col-right{
  width: 80%;
  margin-left: 10%;
}

#frase-gauss{
  transform: none;

}

#myBtnMetas{
  width: 100%;
}

.seta-icon{
  display: none;
}

#title-box-3{
  margin-top: 35%;
}

.col-md-4{
  flex: 0 0 50%;
    max-width: 100%;

}

.column-contact{
  width: 33.33%;
  padding: 5px 10px;
}

.h3-metas {
  font-size: 5.0vw;
}

#metas-text-02{
  width: 80%;
  top: 63%;
  margin-left: -5%;
  }

  .p-contact{
    font-size: 1.7vw;
  }

  #introduction p{
    font-size: 1.8vw;
 
  }

  .flex-container p{
    font-size: 1.7VW;
  }

  .theta{
    font-size: 1.5vw;
    width: 90%;
  }
.fTheta{
  font-size: 1.5vw;
}



.box-shadow-full {
  padding: 1 rem;
}

.container-md, .container-sm {
  padding-left: 10px;
padding-right: 10px;
}

.mini-memorial {
 
  padding-left: 0px;
  padding-right: 0px;
}

.about-info-perfil p {
  font-size: 2.0vw;
}

.title-s {
  font-size: 2.0vw;
}
.glass-icon{
  font-size: 6.0vw;
}



.profile_buttons{

  width: 50%;
}





#box-metas .modal-content {
padding: 1px;
  width: 90%;

}

#typedtext .cont_tcc {
margin-right: 5%;
}

.btn_data_scientist {
  font-size: 1.9vw;
  }
  .btn_web_developer {
   
    font-size: 1.9vw;
  
  }

#typedtext h1.title {
font-size: 1.8VW;
}

#typedtext .btn_tcc {
font-size: 1.5vw; 
margin-left: 42%;
}

.card-blog .card-description {
  font-size: 1.8vw;
}

}

@media (max-width: 900px) {


.p-contact02 {
  font-size: 1.5vw;

}
.row > .column10{
  width: 45%;
  float: none;
  margin: 3px auto;
}

.container10{
  padding: 0;
}

.container10 .button{
  font-size: 1.8vw;
}

.col-left{
  width: 90%;
  margin: auto;
}
#frase-gauss{
  width: 85%;
  margin: auto;
  margin-top: 30%;
  margin-bottom: 10%;
}
.col-right{
  width: 90%;
  margin: auto;
}

p.mini-menu-lead{

  font-size: 2.0vw;
}
.gauss{
  font-size: 2.5vw;
}



.middle-livro {
	width: 65%;
  
  }


  .left-livro {
    width: 35%;

    }

    .right-livro {
      width: 100%;
      display: flex;
      }


  .card-livro{
    width: 40%;
  }

   
.content-livro .product-description{
  font-size: 20px;
}

.card-livro h1{
  font-size: 3.0vw;
}

.card-livro a{
  font-size: 2.0vw;
}

.nav-link {
  font-size: 2.0vw;

}


#title-box-3{
  margin-top: 35%;
}

.grid-container{
  width: 100%;
  margin-left: auto;
}

#inputReset {
  width: 40%;
 }
#txtIdade{ 
  width: 60%;
}

#introduction p{
  font-size: 2.2vw;

}

.flex-container p{
  font-size: 2.2vw;
}
#metas-text-02 {
  margin-left: 5%;
}

#bloco-header p {
  
 font-size: 2.5vw;
}
#bloco-header h4 {
  
  font-size: 2.5vw;
 }

 #myCanvas06 {
  
  width: 100%;
}




#paragrafo-respostas-bloco02 span{
  width: 50%;
  font-size: 2.5vw;
}

#resp_05{
  width: 50%;
}

#container-calc-normal02 #left-column{
  width: 100%;
float:none;
}

#container-calc-normal02 #mainInpu{
  float:none;
}

.col-lg-8-descricao {
  flex: 0 0 0.00%;
  width: 90%;
}

#paragrafo-respostas-bloco02 span{
  margin-left: -30%;
     }

     #text-overlay p{
      font-size: 2.0vw;
    }
    
    #text-overlay02 p{
      font-size: 2.0vw;
    }
    
    #text-overlay03 p{
      font-size: 2.0vw;
    }

    
#citacao-CV {
  bottom: -250px;
  }

  #overlay02 p{
    font-size: 2.5vw;
  }
  
      
  #overlay p{
    font-size: 2.5vw;
  }
  
      
  #overlay02 button{
    font-size: 2.3vw;
  }
  
      
  #overlay button{
    font-size: 2.3vw;
  }

  .button{
    font-size: 2.0vw;
  }
  .conquistas_Paragrafo {
    font-size: 2.2vw;
}

.text{
  font-size: 2.5vw;
}



}

@media screen and (max-width: 830px) {


}

  /* Responsive layout - makes a one column-layout instead of a two-column layout */
  @media (max-width: 800px) {
    .flex-item-right, .flex-item-left, .flex-item-bottom {
      width: 90%;
      margin: auto;
    }
    .certificados-colunas{
      width: 100%;
    }
   .certificados-colunas .w3-card h4{
      font-size: 2.0vw;
    }

    .service-box .s-description{
      font-size: 2.0vw;
    }

    .p-contact02 {
      font-size: 2.0vw;
  }

  .p-contact {
    font-size: 2.2vw;
}
.resume-list h4 {
  font-size: 3vw;
  margin: 1%;
text-align: justify;
}
.pos{
  font-size: 3.0vw;
}



p.mini-menu-lead{
  font-size: 2.5vw;
}

.tecnologias-conecidas .column .card p {
  font-size: 3.0vw;
}

.col-lg-8-descricao{
  flex: 0 0 90.00%;
  max-width: 90.00%;
  width: 90%;
}

.right-livro{
  height: 300px;
  margin-top: -15%;
}

.left-livro{
width: 100%;

}

.middle-livro{
  width: 100%;
  margin-top: 50%;
}

.component{
  margin-top: 10%;
}


.content-livro .product-title {
  font-size: 3.5vw;
}
blockquote{
  font-size: 20px;
}

.eq-densidade{
  padding: 3%;
}

.corpo-eq-direito{
  font-size: 3.0vw;
}

.corpo-eq .sum{
  font-size: 3.0vw;
}

#curvaToogle{
  font-size: 15px;
}


#tcc_Toogle{
  font-size: 15px;
}

.col-left{
  width: 95%;
  margin: auto;
  padding-left: 0;
  padding-right: 0;
}

.col-center{
  height: 400px;
  padding-left: 0;
  padding-right: 0;
}

#frase-gauss{
  width: 95%;

margin: auto;
  margin-top: 40%;
  margin-bottom: 5%;
}
.col-right{
  width: 95%;
  margin: auto;
  padding-left: 0;
  padding-right: 0;
}

.resume-list{
  padding-left:0;
  margin-left: 0;
}

#metas-text-02 {
 
  margin-left: 10%;
  top: 60%;
}


#title-box-3{
  margin-top: 45%;
}


.resume-list{
  border: none;
  }
.w3-panel{
  width: 100%;
}



.theta{
  font-size: 2.2vw;
}

.fTheta{
  font-size: 2.2vw;
}

.theta span{
  margin-right: 9%;
}
.resume-list h2{
  margin-left: 1%;
}

.container-python-simulator h2{
  font-size: 3.0vw;
}
h2.desafio{
  font-size: 1.8rem;
}

#myCanvas{
  width: 100%;
}

#myCanvas02{
  width: 100%;
}






#container-calc-normal02 #right-column{
  width: 100%;
}

.formacao{
  padding:0;
}

#title-left{
  margin-left: 1%;
}

.resume-list h3{
  margin-left: 1%;
}

.resume-list p {
margin-left: 1%;
}

.w3-panel{
  float: none ;
}
.text{
  font-size: 2.7vw;
}


#typedtext h1.title {
font-size: 2.3vw;
}

#typedtext .btn_tcc {
font-size: 2.0vw; 
margin-left: 38%;
}

#typedtext .prev02, .next02 {
font-size: 30px;
}

#typedtext #dot_resp{
  width: 50px;
}

.card-blog .card-description {
  font-size: 2.0vw;
}

  }

  
  @media screen and (max-width: 768px) {

    #navbarDefault{
      display: none;
  }

  .navbar-expand-md .navbar-toggler {
    display: block;
}



  .navbar-toggler span {
    display: block;
    background-color: #fff;
    height: 3px;
    width: 25px;
    margin-top: 4px;
    margin-bottom: 4px;
    transform: rotate(0deg);
    left: 0;
    opacity: 1;
  }
 
  #citacao-CV {
    bottom: -200px;
    }
    
    #citacao-einstein{
      bottom: -80px;
    }
  }




  @media screen and (max-width: 700px) {




.gauss{
font-size: 3.0vw;
} 

.column-contact{
  width: 49.99%;
}

.corpo-eq .lim-up{
  font-size: 16px;
}

.corpo-eq .lim{
  font-size: 16px;
}

.row > .column10 {
  width: 100%;
  margin: 1% auto;

}

.container10 .button {
  font-size: 15px;
}

.right-livro{
  height: 250px;
}

.component blockquote.quote {
  width: 100%;
}

.col-lg-8-descricao {
  flex: 0 0 100.00%; 
  max-width: 100.00%;
width: 100%; 
}



.eq-densidade{
  padding: 4%;
}
.corpo-eq-direito{
  font-size: 3.5vw;
}

.corpo-eq .sum{
  font-size: 3.5vw;
}


#introduction p {
  font-size: 3.0vw;
}


.about-info-perfil p{
  font-size: 3.5vw;
}
.title-s{
  font-size: 4.0vw;
}

.container-python-simulator span{
  font-size: 3.0vw;
}
#resultado span{
  font-size: 3.0vw;
}

#container-calc-normal02 p {
  font-size: 3.0vw;

}

.icon-card {
  width: 60px;
}

.middle-livro{
  margin-top: 40%;
}
#paragrafo-respostas-bloco02 span {
  
  font-size: 3.5vw;


  }

  .glass-icon {
    font-size: 8.0vw;
}

.button{
  font-size: 2.5vw;
}
.conquistas_Paragrafo {
  font-size: 3.2vw;
}

.profile_buttons {
  width: 60%;
}

.btn_data_scientist {
  font-size: 2.3vw;
  }
  .btn_web_developer {
   
    font-size: 2.3vw;
  
  }

  #imgHist {
    width: 600px;
}

}

/* Media queries - Responsive timeline on screens less than 600px wide */
@media (max-width: 600px) {
  /* Place the timelime to the left */

  
  /* Full-width conta iners */
  .container-forfmacao {
  width: 100%;
  padding-left: 70px;
  padding-right: 25px;
  }
  
  /* Make sure that all arrows are pointing leftwards */
  .container-formacao::before {
  left: 60px;
  border: medium solid white;
  border-width: 10px 10px 10px 0;
  border-color: transparent white transparent transparent;
  }

  /* Make sure all circles are at the same spot */
  .left::after, .right::after {
  left: 15px;
  }
  
  /* Make all right containers behave like the left ones */
  .right {
  left: 0%;
  }
  .column {
    width: 100%;
    display: block;
    margin-bottom: 20px;
  }

  .column-contact{
width: 100%;
  }
 
  
  .p-contact02{
    font-size: 3.5vw;
  }

  .p-contact{
    font-size: 4.0vw;
  }

  .col-md-4{
    flex: 0 0 100%;
width: 100%;
  }
  .service-box .s-description{
    font-size: 3.5vw;
  }

  .title-s{
    font-size: 2.5vw;
  }

  .column .card p{
    font-size: 3.0vw;
  }

  .container10 .button{
    font-size: 3.0vw;
  }

 
  .contact-social-icons {
    padding-left: 3%;
   } 



  .eq-densidade{
    padding: 5%;
  }

  .corpo-eq-direito{
    font-size: 4.0vw;
  }
  
  .corpo-eq .sum{
    font-size: 4.0vw;
  }
#curvaToogle{
  font-size: 14px;
}
#tcc_Toogle{
  font-size: 14px;
}

#frase-gauss{
  margin-top: 20%;
}


.title-a {
font-size:2.5rem;
}

.container-python-simulator h2{
  font-size: 2.4vw;
}

.container-python-simulator h2{
  font-size: 3.0vw;
}
.certificados-colunas .w3-card h4 {
  font-size: 3.0vw;
}

.grid-container {
  display: block;
}

#btnEnviar{
  float: right;
}


element.style {
  display: block;
}
#container-calc-normal02 #distImage {
  width: 400px;
}

#container-calc-normal02 #mainDist{

	width:400px;
  max-height: 250px;
}

.middle-livro{
  margin-top: 30%;
}

#text-overlay p{
  font-size: 4.5vw;
}

#text-overlay02 p{
  font-size: 4.5vw;
}

#text-overlay03 p{
  font-size: 4.5vw;
}

#overlay02 p{
  font-size: 5.0vw;
}

    
#overlay p{
  font-size: 5.0vw;
}

    
#overlay02 button{
  font-size: 4.8vw;
}

    
#overlay button{
  font-size: 4.8vw;
}
#citacao-einstein {
font-size: 5.0vw;
bottom: -150px;
}
#citacao-CV {
  font-size: 6.0vw;
  bottom: -450px;
  }

  #container-calc-normal02 #left-column {
    margin-bottom: 5%;
}

.gauss {
  font-size: 4.0vw;
}

.button{
  font-size: 3.5vw;
}
.conquistas_Paragrafo {
  font-size: 4.2vw;
}
.text{
  font-size: 4.9vw;
}

#typedtext h1.title {
  font-size: 2.8vw;
  }
  
  #typedtext .btn_tcc {
  font-size: 2.5vw; 
  margin-left: 36%;
  }
  
  #typedtext .prev02, .next02 {
  font-size: 25px;
  }
  
  #typedtext #dot_resp{
    width: 40px;
    font-size: 25px;
  }

  #imgHist {
    width: 500px;
}

.card-blog .card-description {
  font-size: 3.0vw;
}

}

@media (max-width: 500px) {

.middle-livro{
  margin-top: 0;
}

.content-livro .product-title {
  font-size: 4.5vw;
}

.right-livro{
  margin-top: 1%;
}
.component{
  padding: 1rem;
  margin-bottom: 0;
}


.resume-list h2{
  font-size: 3.0vw;
}

.title-a {
font-size:2.0rem;
}

p.mini-menu-lead {
  font-size: 3.5vw;
}

simulator h2 {
  font-size: 2.2vw;
}


.container-python-simulator h2{
  font-size: 3.0vw;
}

.about-img-perfil{
  width: 100%;
padding-bottom: 70%;
background-image: url("../img/logo03.webp"), url("../img/fotoPerfil02.webp");
background-repeat: no-repeat, no-repeat;
background-size: 50%, 50%;
background-position:left,right;
}

.about-info-perfil{
  width: 100%;
  margin-left: 20%;
  margin-top: 5%;
  text-align: justify;
  
}



.img-fluid {
display: none;
}

.about-info-perfil p {
  font-size: 4.0vw;
}

.title-s{
  font-size: 4.0vw;

}

.about-info-perfil{
  width: 70%;
  margin-left: 15%;
  }

  
.col-center{
  height: 300px;

}

.about-info{
  padding-left: 0;
}

.title-left {
font-size: 1.6rem;
}
.resume-list h2 {
  font-size: 4.0vw;
}

.resume-list h4 {
  font-size: 4.0vw;
}
.pos {
  font-size: 4.0vw;
}

.contact-social-icons {
  padding-left:0;
 } 

 .contact-social-icons ul li {
  width: 18%;
}

.icon-card {
  width: 50px;
}

.middle-livro{
  margin-top: 10%;
}
#citacao-einstein{
bottom: -100px;
}

#citacao-CV {
  bottom: -350px;
  }
  #paragrafo-respostas-bloco02 span {
  
    font-size: 4.5vw;
  
  
    }
    .container10 .button {
    font-size: 4.0vw;
  }

  .about-mf .box-shadow-full {
    padding-top: 0;
   
  }

  .text{
    font-size: 5.9vw;
  }

  .profile_buttons {
    width: 65%;
}

#imgHist{
  width: 420px;
}

.card-blog .card-description {
  font-size: 4.0VW;
}

}

@media (max-width: 450px) {
#container-calc-normal02 #distImage {
  width: 300px;
}

#typedtext h1.title {
  font-size: 3.3vw;
  }
  
  #typedtext .btn_tcc {
  font-size: 3.0vw; 
  margin-left: 34%;
  }
  
  #typedtext .prev02, .next02 {
  font-size: 20px;
  }
  
  #typedtext #dot_resp{
    width: 30px;
    font-size: 20px;
  }

  .service-box .s-description{
    font-size: 4.2vw;
  }
  #imgHist{
    width: 400px;
  }

}

@media (max-width: 400px) {

p.mini-menu-lead {
  font-size: 4.0vw;
}

.p-contact02{
  font-size: 4.0vw;
}

.p-contact{
  font-size: 4.5vw;
}

.icon-card {
  width: 40px;
}

.middle-livro{
  margin-top: 0;
}

#citacao-CV {
  bottom: -280px;
  }

  .button{
    font-size: 4.5vw;
  }
  .conquistas_Paragrafo {
    font-size: 5.2vw;
  }
  .profile_buttons {
    width: 70%;
}#imgHist{
  width: 340px;
}

}


@media (max-width: 300px) {

  
  .icon-card {
    width: 30px;
  }
  
  #citacao-CV {
    bottom: -250px;
    }
    #citacao-einstein {
      bottom: -70px;
      font-size: 6.0vw;
      }

      .button{
        font-size: 5.5vw;
      }
      .conquistas_Paragrafo {
        font-size: 6.2vw;
      }

      .service-box .s-description{
        font-size: 5.0vw;
      }
  }