/* Reset CSS */


*, *:after, *:before{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  line-height: 1.5;
}


body {
  background-color: white;
  margin-top: 1px;
}

h1 {
  font-size: 45px;
  font-weight: bold;
  margin-top: 2px;
  text-align:left;
}

h2 {
  font-size: 32px;
  font-weight: bold;
  margin-top: 20px;
}

h3 {
  font-size: 22px;
  font-weight: bold;
  margin-top: 5px;
}

h4 {
  font-size: 20px;
  font-weight: bold;
  margin-top: 5px;
}

h5 {
  font-size: 20px;
  font-weight: lighter;
  line-height: 1.3;
  margin-top: 5px;
  text-align:left;
}


p {
  font-size: 18px;
  margin-top: 2px;
}

.highlight
{
    color: red;
    font-weight: bold;
}


/* NAV BAR. */

/* Maximum width for page content across the various page containers */
.page-container {
  max-width: 1600px;
  background-color:  white ;
}


/* Stackoverflow preview fix, please ignore */
.navbar-nav {
  flex-direction: row;
  padding: 0px;
  margin: 0px;
}

.navbar {
  font-size: 20px;
}

.nav-link {
  padding-right: .5rem !important;
  padding-left: .5rem !important;
}

/* Fixes dropdown menus placed on the right side */
.ml-auto .dropdown-menu {
  left: auto !important;
  right: 0px;
}

.navbar-brand{
    /*background-color: #25c4b6;*/
    background-color: #2ebab9;
    padding-right: 30px;
    padding-left: 30px;
}
    

    
/*  Top jumbotron */ 

.jumbotron{
   /*background-color: #25c4b6;*/
   background-color:  #999999;
   margin: 0px;
   background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("imagem1.png");
   background-size: cover ; 
   height:50%;
   color: white;
   font-family: 'Roboto', sans-serif, arial;
}

.jumbotron h1 {
  font-size: 65px;
  font-weight: bold;
  margin-top: 2px;
  text-align:center;  
}

.jumbotron p {
  font-size: 25px;
  font-weight: bold;
  margin-top: 20px;  
  text-align:center;   
}

/*  content container: is where the main content of the page is presented, possibly with multiple columns and rows */ 

.content{
   background-color: white;
   /*background-color:#4a235a ;*/
   max-width: 1200px;
}

/*
.row {
   background-color: white;
   margin: 0px;
   padding: 5px; 
}   */
    
.content-main {
   background-color: white;
   /*background-color: #0b5345; */
   margin: 0px;
   padding: 5px; 
   
}

.content-aside {
   /*background-color: white;*/
   background-color:  #7b7d7d; 
   margin: 0px;
   padding: 20px; 
}


.mainsection{
   background-color: #eeeeee;
   /*background-color:  #7d6608;*/
   box-shadow: 10px 10px 8px #888888;
   border-style: solid;
   border-width: 0px;
   padding: 5px;
   margin-top: 40px;
}



.mainsection ol li {
   margin-left: 10px;
   font-size: 18px;
}

.mainsection .row{
   background-color: white;
   /*background-color:black;*/
   margin-top: 5px;
   padding: 5px;
}

.mainsection img{
   margin: 15px;
   padding: 5px;
}

.asidesection{
   background-color: #25c4b6;
   margin-top: 20px;
   padding: 10px;
}  
   
.person-card {
 	/*background-color: white;*/
 	padding: 0px;
 	margin: 0px;	
}

.person-card h4{
  font-size: 22px;
  margin-left: 2px;
}

.person-card .card-body{
  padding: 5px;
}


.person-card p{
  font-size: 16px;
  margin-left: 2px;
  margin-right: 2px;
  margin-top: 5px;
  margin-bottom: 5px;
}

/*
.about-person-card{
 	padding: 0px;
 	margin-bottom: 0px;	
 	margin-top: 0px;
}
*/

.person-card .card-header{
    height:70px;
    padding-top:1px;
    padding-bottom:1px;
    padding-left:5px;
    padding-right:5px;
    
}

/*
.about-person-card  .card-img-top {
    height: 200px;
}*/

/*.card-columns .card {
    background-color: green;
 	padding: 0px;
 	margin-bottom: 10px;	
 	margin-top: 10px;

}; */


.topic-card {
    border: none;
 	padding: 0px;
 	margin-bottom: 0px;	
 	margin-top: 0px;
    margin-left:40 px;
    margin-right: 40 px;
}

.topic-card .card-img-top { 
 	height: 250px;
}

.topic-card .card-body{
  padding: 5px;
}

.topic-card p{
  font-size: 2opx;
  font-weight: lighter;
  margin: 2px;
}

.personreference img{
 	height: 70px;
}

.person-img-reference{ 
 	height: 100px;
}

.largeImage{ 
 	height: 200px;
}

.btn{ 
    margin-top:10px;
    margin-bottom:50px;        
}


/*  footercontainer container: is the main content block in the page, possibly with multiple rows
background-color: #25c4b6; */
 
.footer-container {
   background-color: #292b2c ;
   margin-top: 0px; 
   padding: 20px; 
   max-width: 1200px;
}

.footer-container row {
   background-color: #292b2c ;
}
    

.footer-container h5 {
   color: white;
   font-size: 16px;
   background-color: #292b2c ;
}

.footer-container p, .footer-container a, .footer-copyright {
   color: white;
   font-size: 12px;
}


.avatar {
  vertical-align: middle;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.avatar-name {
    font-size: 15px;
    font-weight: bold;
    color: black;
}


.keyword-button {
  background-color: #25c4b6;
  border: none;
  color: white;
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 10px;
  padding-right: 10px;  
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 10px;
  margin: 4px 2px;
  border-radius: 12px;
  height: 20px;
}

.hovereffect {
width:100%;
height:100%;
float:left;
overflow:hidden;
position:relative;
text-align:center;
cursor:default;
}

.hovereffect .overlay {
width:100%;
height:100%;
position:absolute;
overflow:hidden;
top:0;
left:0;
opacity:0;
background-color:rgba(0,0,0,0.5);
-webkit-transition:all .4s ease-in-out;
transition:all .4s ease-in-out
}

.hovereffect img {
display:block;
position:relative;
-webkit-transition:all .4s linear;
transition:all .4s linear;
}

.hovereffect h2 {
text-transform:uppercase;
color:#fff;
text-align:center;
position:relative;
font-size:15px;
/* background:rgba(0,0,0,0.6);*/
-webkit-transform:translatey(-100px);
-ms-transform:translatey(-100px);
transform:translatey(-100px);
-webkit-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
padding:10px;
}

.hovereffect a.info {
text-decoration:none;
display:inline-block;
text-transform:uppercase;
color:#fff;
border:1px solid #fff;
background-color:transparent;
opacity:0;
filter:alpha(opacity=0);
-webkit-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
margin:50px 0 0;
padding:7px 14px;
}

.hovereffect a.info:hover {
box-shadow:0 0 5px #fff;
}

.hovereffect:hover img {
-ms-transform:scale(1.2);
-webkit-transform:scale(1.2);
transform:scale(1.2);
}

.hovereffect:hover .overlay {
opacity:1;
filter:alpha(opacity=100);
}

.hovereffect:hover h2,.hovereffect:hover a.info {
opacity:1;
filter:alpha(opacity=100);
-ms-transform:translatey(0);
-webkit-transform:translatey(0);
transform:translatey(0);
}

.hovereffect:hover a.info {
-webkit-transition-delay:.2s;
transition-delay:.2s;
}


/* https://codepen.io/cornishninja/pen/CAocG */

.flex-container {
  display: flex;
  margin: 20;
  padding: 0;
  max-height:20;
}
.flex-container li {
  list-style: none;
  flex-grow: 1;
}
.twitter {
  background-color: #55acee;
  order: 5;
}
.twitter:hover {
  background-color: #6fb9f1;

}
.facebook {
  background-color: #3b5998;
  order: 3;
}
.facebook:hover {
  background-color: #4365ad;
}
.linkedin {
  background-color: #0976b4;
  order: 1;
  max-height:10;
}
.linkedin:hover {
  background-color: #0a89d1;
  height:15;
}
.codepen {
  background-color: #181818;
  order: 2;
}
.codepen:hover {
  background-color: #262626;
}
.dribbble {
  background-color: #ea4c89;
  order: 4;
}
.dribbble:hover {
  background-color: #ed6499;
}
.twitter, 
.facebook,
.linkedin,
.codepen,
.dribbble,
.twitter:hover, 
.facebook:hover, 
.linkedin:hover,
.codepen:hover,
.dribbble:hover {
  transition: background-color .5s ease;
}
.flex-container a {
  display: block;
}
.flex-container i {
  color: #fff;
  line-height: 100px;
  width: 100%;
  text-align: center;
}


 /* Style all font awesome icons */

.fa {
  padding: 20px;
  font-size: 30px;
  #width: 30px;
  text-align: center;
  text-decoration: none;
  border-radius: 50%;
}


/* Add a hover effect if you want */
.fa:hover {
  opacity: 0.7;
}

/* Set a specific color for each brand */

/* Facebook */
.fa-facebook {
  background: #3B5998;
  color: white;
}

/* Twitter */
.fa-twitter {
  background: #55ACEE;
  color: white;
}