.main-header-bar {
    font-size: 1.2em;
    -moz-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
    -o-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
}

[data-tooltip] {
  position: relative;
  z-index: 2;
  cursor: pointer;
}

/* Hide the tooltip content by default */
[data-tooltip]:before,
[data-tooltip]:after {
  visibility: hidden;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  pointer-events: none;
}

/* Position tooltip above the element */
[data-tooltip]:before {
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-bottom: 5px;
  margin-left: -80px;
  padding: 7px;
  width: 160px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  background-color: #000;
  background-color: hsla(0, 0%, 20%, 0.9);
  color: #fff;
  content: attr(data-tooltip);
  text-align: center;
  font-size: 14px;
  line-height: 1.2;
}

/* Triangle hack to make tooltip look like a speech bubble */
[data-tooltip]:after {
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-left: -5px;
  width: 0;
  border-top: 5px solid #000;
  border-top: 5px solid hsla(0, 0%, 20%, 0.9);
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  content: " ";
  font-size: 0;
  line-height: 0;
}

/* Show tooltip content on hover */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
  visibility: visible;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

video {  
   width:100%; 
   max-width:1200px; 
   height:auto; 
}

.titlePage{
  position: fixed;
  float: left;
  text-align: right;
  width:10%;
  max-width: 200px;
  margin-left: 10px;
  margin-top: 150px;
}

table{
    border: 0px;
}

tr, td {
    border: 0.5px solid #ffffff;
}

a{ 
	  color: #8f3c66;
    text-decoration: none;
}

a:focus{ 
	  color: #8f3c66;
    text-decoration: none;
}

a:hover{ 
	  font-weight: bold;
    text-decoration: none;
}

a:-webkit-any-link {
    cursor: pointer;
    text-decoration: none;
}

.aRodape{ 
	  color: #cccccc;
}

.aRodape:hover{ 
	  color: #ffffff;
}

.button1{ 
	  color: #8f3c66;
}

.button1:hover{ 
		background-color:#ffffff;
		border-radius:4px;
  	padding: 4px;
	  color: #656565;
}

.button2:hover{ 
		background-color:#8f3c66;
		border-radius:4px;
  	padding: 4px;
	  color: #ffffff;
}

.imgBlack {
	-webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: url("data:image/svg+xml;utf8,#grayscale");
   filter: gray;
   -webkit-filter: grayscale(1);
}

.imgBlack:hover {
	-webkit-filter: grayscale(0%);
  -moz-filter: grayscale(0%);
  -ms-filter: grayscale(0%);
  -o-filter: grayscale(0%);
  filter: grayscale(0%);
    filter: url("data:image/svg+xml;utf8,#grayscale");
    filter: none;
    -webkit-filter: grayscale(0); 
}

.column_2 {
    float: left;
    width: 50%;
}

.column_3 {
    float: left;
    width: 33%;
}

.column_3-1 {
    float: left;
    width: 28%;
}

.parallax { 
    /* The image used */
    background-image: url("http://projects.essv.ipv.pt/competenciasemocionais/wp-content/uploads/2018/03/SECTION_bonecos.png");

    /* Full height */
    height: 100%; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
}

@media only screen and (max-device-width: 1366px) {
    .parallax {
        background-attachment: scroll;
    }
  	.titlePage{
 			 position: relative;
			background-color: #f5f5f5;
      box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
      text-align: left;
			width:100%;
      max-width: 1920px;
      margin-left:0px;
      margin-top:-20px;
			padding: 20px; 
	}
    table {
        width: 100%;
    }  
}

@media only screen and (max-device-width: 1540px) {
    .parallax {
        background-attachment: scroll;
    }
  	.titlePage{
 			 position: relative;
			background-color: #f5f5f5;
      box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
      text-align: left;
			width:100%;
      max-width: 1920px;
      margin-left:0px;
    	margin-top:-20px;
			padding: 20px; 
	}
    table {
        width: 100%;
    }  
}

@media screen and (max-width: 1540px) {
  	.titlePage{
 			 position: relative;
			background-color: #f5f5f5;
      box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
      text-align: left;
			width:100%;
      max-width: 1920px;
      margin-left:0px;
    	margin-top:-20px;
			padding: 20px; 
	}
    table {
        width: 100%;
    }  
}


@media screen and (max-width: 600px) {
    .column_2, .column_3, .column_3-1 {
        width: 100%;
    }
  	.titlePage{
 			 position: relative;
			background-color: #f5f5f5;
      box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
      text-align: left;
			width:100%;
      max-width: 1920px;
      margin-left:0px;
      margin-top:0%;
			padding: 20px; 
	}
    table {
        width: 100%;
    }  
}

#myBtn {
  display: none;
  position: fixed;
  bottom: 50px;
  right: 0px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: #959595;
  color: white;
  cursor: pointer;
  padding: 5px;
  border-radius: 8px 0px 0px 8px;
}

#myBtn:hover {
  background-color: #8f3c66;
}