#banner-hf{
	
	background-color: black !important;
}

#banner-hf{
	background-image: none !important;
	background-color: black !important;
}




.holder {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  z-index: 3;
  top: -70.3vmin;
  left: -102.6vmin;
  width: 9.5vmin;
  height: 3vmin;
  border-radius: 1vmin;
  background: #323136;
}

.holder-circle {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  z-index: 1;
  top: -70.4vmin;
  left: -102.6vmin;
  width: 4vmin;
  height: 4vmin;
  border-radius: 50%;
  border: 0.7vmin solid #323136;
  background: #819dae;
}

.paper-holder {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  top: -40vmin;
  left: -103vmin;
  width: 24.1vmin;
  height: 32.2vmin;
  border-radius: 1vmin;
  background: #5c5d61;
  overflow: hidden;
}
.paper-holder:after {
  content: "";
  position: absolute;
  left: 12.3vmin;
  width: 20vmin;
  height: 32.2vmin;
  background: #3d3d3f;
}
.paper-holder .paper {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  z-index: 2;
  top: 0.3vmin;
  left: 0.5vmin;
  width: 20.3vmin;
  height: 28.5vmin;
  overflow: hidden;
  background: #ffffff;
}
.paper-holder .paper .line-grid {
  margin-top: 2.75vmin;
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-flow: row dense;
  grid-row-gap: 1.5vmin;
}
.paper-holder .paper .line-grid .line {
  top: 3vmin;
  width: 17.5vmin;
  margin-left: 1.5vmin;
  height: 0.8vmin;
  background: #d4d4d7;
}

.iphone {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  top: 34.5vmin;
  left: -87.6vmin;
  width: 10.4vmin;
  height: 20vmin;
  background: #707173;
  border-radius: 1vmin;
  overflow: hidden;
}
.iphone:before {
  content: "";
  position: absolute;
  left: 5.26vmin;
  width: 7vmin;
  height: 20vmin;
  background: #474749;
}
.iphone:after {
  content: "";
  position: absolute;
  left: 4.32vmin;
  top: 17.85vmin;
  width: 1.95vmin;
  height: 1.95vmin;
  background: #ffffff;
  border-radius: 50%;
}
.iphone .screen {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  top: -0.65vmin;
  width: 9.1vmin;
  height: 15vmin;
  background: #ffffff;
}
.iphone .screen:before {
  content: "";
  position: absolute;
  top: -1.64vmin;
  left: 4.3vmin;
  width: 0.63vmin;
  height: 0.63vmin;
  border-radius: 50%;
  background: #ffffff;
}
.iphone .screen:after {
  content: "";
  position: absolute;
  top: -0.9vmin;
  left: 3.5vmin;
  width: 2.1vmin;
  height: 0.4vmin;
  border-radius: 1vmin;
  background: #ffffff;
}

.laptop-screen {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  top: -27.2vmin;
  left: -0.1vmin;
  width: 71.4vmin;
  height: 3.8vmin;
  background: #e0e0e0;
  border-radius: 1vmin;
}

.laptop {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: -90px;
  margin-top: -180px;
  margin-left: auto;
  margin-bottom: auto;
  margin-right: auto;
  top: 20vw;
  width: 41vw;
  height: 24vw;
  background: #b8c0c2;
  border-radius: 2.5vw;
  overflow: hidden;
}
.laptop:after {
  content: "";
  position: absolute;
  top: 15vw;
  left: 14.5vw;
  width: 12vw;
  height: 7vw;
  background: #ffffff;
  border-radius: 0.5vw;
}
.laptop .shadow {
  content: "";
  position: absolute;
  z-index: 2;
  top: -3vw;
  left: 13vw;
  width: 40vw;
  height: 20.5vw;
  background: #889497;
  opacity: 0.2;
  transform: rotate(45deg);
}
.laptop .keyboard {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  top: -8vw;
  left: 0.5vw;
  width: 30vw;
  height: 11vw;
}
.laptop .keyboard .key {
  width: 2.4vw;
  height: 1.7vw;
  border-radius: 0.2vw;
  background: #ffffff;
}
.laptop .keyboard .keyboard-1 {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  grid-column-gap: 0.4vmin;
}
.laptop .keyboard .keyboard-1 .key {
  height: 1.7vw;
}
.laptop .keyboard .keyboard-2 {
  margin-top: 0.5vw;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-column-gap: 0.4vw;
}
.laptop .keyboard .keyboard-2 .key-2 {
  width: 4.8vw;
}
.laptop .keyboard .keyboard-3 {
  margin-top: 0.5vw;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-column-gap: 0.4vw;
}
.laptop .keyboard .keyboard-3 .key-3 {
  width: 3.6vw;
}
.laptop .keyboard .keyboard-4 {
  margin-top: 0.5vw;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-column-gap: 0.4vw;
}
.laptop .keyboard .keyboard-4 .key-2 {
  width: 5vw;
}
.laptop .keyboard .keyboard-5 {
  margin-top: 0.5vw;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-column-gap: 0.4vw;
}
.laptop .keyboard .keyboard-5 .key-4 {
  width: 13.2vw;
}

.pencil {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin-top: -180px;
  margin-left: auto;
  margin-bottom: auto;
  margin-right: auto;
  top: 27vw;
  left: 34vw;
  width: 0.9vw;
  height: 16vw;
  background: #181820;
}
.pencil:after {
  content: "";
  position: absolute;
  width: 0.5vw;
  height: 16vw;
  background: #39383e;
}
.pencil .pencil-top {
  position: absolute;
  top: -1vw;
  width: 0;
  height: 0;
  border-bottom: 1vw solid #f5f6f6;
  border-left: 0.55vw solid transparent;
  border-right: 0.55vw solid transparent;
}
.pencil .pencil-top:before {
  content: "";
  position: absolute;
  left: -0.2vw;
  width: 0;
  height: 0;
  border-bottom: 0.4vw solid #181820;
  border-left: 0.2vw solid transparent;
  border-right: 0.2vw solid transparent;
}

.mouse {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  top: 14.4vmin;
  left: 108.2vmin;
  width: 10.2vmin;
  height: 18.8vmin;
  background: #ffffff;
  border-radius: 5vmin;
  overflow: hidden;
}
.mouse:before {
  content: "";
  position: absolute;
  left: -4.8vmin;
  width: 10vmin;
  height: 18.8vmin;
  background: #adacb1;
}
.mouse:after {
  content: "";
  position: absolute;
  top: 2.4vmin;
  left: 4.3vmin;
  width: 1.8vmin;
  height: 1.8vmin;
  border-radius: 50%;
  background: #505156;
}

.cup {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  top: -38.2vmin;
  left: 114vmin;
  width: 9.2vmin;
  height: 9.2vmin;
  background: #7d390a;
  border-radius: 50%;
  border: 2vmin solid #ffffff;
  overflow: hidden;
}
.cup:after {
  content: "";
  position: absolute;
  left: 2vmin;
  width: 10vmin;
  height: 10vmin;
  background: #8e410b;
  border-radius: 50%;
}
.cup .froth {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  z-index: 2;
  top: 1.9vmin;
  left: -1.2vmin;
  width: 1.5vmin;
  height: 1.5vmin;
  border-radius: 50%;
  background: #a9602e;
}
.cup .froth:before {
  content: "";
  position: absolute;
  top: -2.5vmin;
  left: 1.2vmin;
  width: 1.5vmin;
  height: 1.5vmin;
  border-radius: 50%;
  background: #994d19;
}
.cup .froth:after {
  content: "";
  position: absolute;
  top: -0.5vmin;
  left: 1.4vmin;
  width: 1.2vmin;
  height: 0.35vmin;
  border-radius: 50%;
  background: #994d19;
}

.cup-holder {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  top: -28.8vmin;
  left: 125.75vmin;
  width: 2vmin;
  height: 4vmin;
  background: #ffffff;
  border-bottom-left-radius: 5vmin;
  border-bottom-right-radius: 5vmin;
  transform: rotate(-50deg);
}

#mosaico{
  top: -20%;
}

#mosaico .container-mosaico{
  top: 25%;
}



/*Responsive Desktop*/

.box-3niveis .text-box{
  height: 355px;
}

.width-half#hw35{
  width: 35%;
}
.width-half#hw55{
  width: 55%;
}
.width-half#hw65{
  width: 65%;
}
.width-half#hw80{
  width: 80%;
}


@media screen and (min-width: 1280px){
  .laptop {
    left: -120px;
    top: 16vw;
    width: 36vw;
    height: 22vw;
    border-radius: 1.5vw;
  }
  .laptop:after {
    top: 13.5vw;
    left: 12.5vw;
    width: 11vw;
    height: 6.5vw;
    border-radius: 0.5vw;
  }
  .laptop .shadow {
    top: -3vw;
    left: 9.8vw;
    width: 40vw;
    height: 19vw;
  }
  .laptop .keyboard {
    top: -8vw;
    left: 0.5vw;
    width: 30vw;
    height: 11vw;
  }
  .laptop .keyboard .key {
    width: 2.35vw;
    height: 1.7vw;
    border-radius: 0.2vw;
  }
  .laptop .keyboard .keyboard-1 {
    grid-column-gap: 0.4vw;
  }
  .laptop .keyboard .keyboard-1 .key {
    height: 1.7vw;
  }
  .laptop .keyboard .keyboard-2 {
    margin-top: 0.5vw;
    grid-column-gap: 0.4vw;
  }
  .laptop .keyboard .keyboard-2 .key-2 {
    width: 5vw;
  }
  .laptop .keyboard .keyboard-3 {
    margin-top: 0.5vw;
    grid-column-gap: 0.4vw;
  }
  .laptop .keyboard .keyboard-3 .key-3 {
    width: 3.6vw;
  }
  .laptop .keyboard .keyboard-4 {
    margin-top: 0.5vw;
    grid-column-gap: 0.4vw;
  }
  .laptop .keyboard .keyboard-4 .key-2 {
    width: 5vw;
  }
  .laptop .keyboard .keyboard-5 {
    margin-top: 0.5vw;
    grid-column-gap: 0.4vw;
  }
  .laptop .keyboard .keyboard-5 .key-4 {
    width: 13.5vw;
  }
  
  .pencil {
    top: 21vw;
    left: 31vw;
    width: 1.1vw;
    height: 14vw;
  }
  .pencil:after {
    width: 0.5vw;
    height: 14vw;
  }
  .pencil .pencil-top {
    top: -0.9vw;
    border-bottom: 1vw solid #f5f6f6;
    border-left: 0.55vw solid transparent;
    border-right: 0.55vw solid transparent;
  }
  .pencil .pencil-top:before {
    left: -0.1vw;
    border-bottom: 0.4vw solid #181820;
    border-left: 0.2vw solid transparent;
    border-right: 0.2vw solid transparent;
  }
  .box-3niveis .text-box{
    height: 250px;
  }
  #mosaico .container-mosaico{
    top: 32%;
  }
}

@media screen and (min-width: 1366px){
  .laptop {
    left: -120px;
    top: 12vw;
    width: 36vw;
    height: 22vw;
    border-radius: 1.5vw;
  }
  .laptop:after {
    top: 13.5vw;
    left: 12.5vw;
    width: 11vw;
    height: 6.5vw;
    border-radius: 0.5vw;
  }
  .laptop .shadow {
    top: -3vw;
    left: 9.8vw;
    width: 40vw;
    height: 19vw;
  }
  .laptop .keyboard {
    top: -8vw;
    left: 0.5vw;
    width: 30vw;
    height: 11vw;
  }
  .laptop .keyboard .key {
    width: 2.35vw;
    height: 1.7vw;
    border-radius: 0.2vw;
  }
  .laptop .keyboard .keyboard-1 {
    grid-column-gap: 0.4vw;
  }
  .laptop .keyboard .keyboard-1 .key {
    height: 1.7vw;
  }
  .laptop .keyboard .keyboard-2 {
    margin-top: 0.5vw;
    grid-column-gap: 0.4vw;
  }
  .laptop .keyboard .keyboard-2 .key-2 {
    width: 5vw;
  }
  .laptop .keyboard .keyboard-3 {
    margin-top: 0.5vw;
    grid-column-gap: 0.4vw;
  }
  .laptop .keyboard .keyboard-3 .key-3 {
    width: 3.6vw;
  }
  .laptop .keyboard .keyboard-4 {
    margin-top: 0.5vw;
    grid-column-gap: 0.4vw;
  }
  .laptop .keyboard .keyboard-4 .key-2 {
    width: 5vw;
  }
  .laptop .keyboard .keyboard-5 {
    margin-top: 0.5vw;
    grid-column-gap: 0.4vw;
  }
  .laptop .keyboard .keyboard-5 .key-4 {
    width: 13.5vw;
  }

  .pencil {
    top: 17vw;
    left: 31vw;
    width: 1vw;
    height: 14vw;
  }
  .pencil:after {
    width: 0.5vw;
    height: 14vw;
  }
  .pencil .pencil-top {
    top: -0.95vw;
    border-bottom: 1vw solid #f5f6f6;
    border-left: 0.55vw solid transparent;
    border-right: 0.55vw solid transparent;
  }
  .pencil .pencil-top:before {
    left: -0.15vw;
    border-bottom: 0.4vw solid #181820;
    border-left: 0.2vw solid transparent;
    border-right: 0.2vw solid transparent;
  }
  #mosaico .container-mosaico{
    top: 34%;
  }
}

@media screen and (min-width: 1440px){
  .laptop {
    left: -120px;
    top: 10vw;
    width: 36vw;
    height: 22vw;
    border-radius: 1.5vw;
  }
  .laptop:after {
    top: 13.5vw;
    left: 12.5vw;
    width: 11vw;
    height: 6.5vw;
    border-radius: 0.5vw;
  }
  .laptop .shadow {
    top: -3vw;
    left: 9.8vw;
    width: 40vw;
    height: 19vw;
  }
  .laptop .keyboard {
    top: -8vw;
    left: 0.5vw;
    width: 30vw;
    height: 11vw;
  }
  .laptop .keyboard .key {
    width: 2.35vw;
    height: 1.7vw;
    border-radius: 0.2vw;
  }
  .laptop .keyboard .keyboard-1 {
    grid-column-gap: 0.4vw;
  }
  .laptop .keyboard .keyboard-1 .key {
    height: 1.7vw;
  }
  .laptop .keyboard .keyboard-2 {
    margin-top: 0.5vw;
    grid-column-gap: 0.4vw;
  }
  .laptop .keyboard .keyboard-2 .key-2 {
    width: 5vw;
  }
  .laptop .keyboard .keyboard-3 {
    margin-top: 0.5vw;
    grid-column-gap: 0.4vw;
  }
  .laptop .keyboard .keyboard-3 .key-3 {
    width: 3.6vw;
  }
  .laptop .keyboard .keyboard-4 {
    margin-top: 0.5vw;
    grid-column-gap: 0.4vw;
  }
  .laptop .keyboard .keyboard-4 .key-2 {
    width: 5vw;
  }
  .laptop .keyboard .keyboard-5 {
    margin-top: 0.5vw;
    grid-column-gap: 0.4vw;
  }
  .laptop .keyboard .keyboard-5 .key-4 {
    width: 13.5vw;
  }

  .pencil {
    top: 15vw;
    left: 31vw;
    width: 1vw;
    height: 14vw;
  }
  .pencil:after {
    width: 0.5vw;
    height: 14vw;
  }
  .pencil .pencil-top {
    top: -0.95vw;
    border-bottom: 1vw solid #f5f6f6;
    border-left: 0.55vw solid transparent;
    border-right: 0.55vw solid transparent;
  }
  .pencil .pencil-top:before {
    left: -0.1vw;
    border-bottom: 0.4vw solid #181820;
    border-left: 0.2vw solid transparent;
    border-right: 0.2vw solid transparent;
  }
  .box-3niveis .text-box{
    height: 230px;
  }
  #mosaico .container-mosaico{
    top: 36%;
  }
}

@media screen and (min-width: 1680px){
  .laptop {
    left: -170px;
    top: 8vw;
    width: 36vw;
    height: 22vw;
    border-radius: 1.5vw;
  }
  .laptop:after {
    top: 13.5vw;
    left: 12.5vw;
    width: 11vw;
    height: 6.5vw;
    border-radius: 0.5vw;
  }
  .laptop .shadow {
    top: -3vw;
    left: 9.8vw;
    width: 40vw;
    height: 19vw;
  }
  .laptop .keyboard {
    top: -8vw;
    left: 0.5vw;
    width: 30vw;
    height: 11vw;
  }
  .laptop .keyboard .key {
    width: 2.35vw;
    height: 1.7vw;
    border-radius: 0.2vw;
  }
  .laptop .keyboard .keyboard-1 {
    grid-column-gap: 0.4vw;
  }
  .laptop .keyboard .keyboard-1 .key {
    height: 1.7vw;
  }
  .laptop .keyboard .keyboard-2 {
    margin-top: 0.5vw;
    grid-column-gap: 0.4vw;
  }
  .laptop .keyboard .keyboard-2 .key-2 {
    width: 5vw;
  }
  .laptop .keyboard .keyboard-3 {
    margin-top: 0.5vw;
    grid-column-gap: 0.4vw;
  }
  .laptop .keyboard .keyboard-3 .key-3 {
    width: 3.6vw;
  }
  .laptop .keyboard .keyboard-4 {
    margin-top: 0.5vw;
    grid-column-gap: 0.4vw;
  }
  .laptop .keyboard .keyboard-4 .key-2 {
    width: 5vw;
  }
  .laptop .keyboard .keyboard-5 {
    margin-top: 0.5vw;
    grid-column-gap: 0.4vw;
  }
  .laptop .keyboard .keyboard-5 .key-4 {
    width: 13.5vw;
  }

  .pencil {
    top: 13vw;
    left: 31vw;
    width: 1vw;
    height: 14vw;
  }
  .pencil:after {
    width: 0.5vw;
    height: 14vw;
  }
  .pencil .pencil-top {
    top: -0.95vw;
    border-bottom: 1vw solid #f5f6f6;
    border-left: 0.55vw solid transparent;
    border-right: 0.55vw solid transparent;
  }
  .pencil .pencil-top:before {
    left: -0.15vw;
    border-bottom: 0.4vw solid #181820;
    border-left: 0.2vw solid transparent;
    border-right: 0.2vw solid transparent;
  }
  .box-3niveis .text-box{
    height: 200px;
  }
  #mosaico .container-mosaico{
    top: 42%;
  }
  #section-4-hf.margin-cont{
    margin-top: 30px;
  }
}

@media screen and (min-width: 1920px){
  .laptop {
    left: -120px;
    top: 8vw;
    width: 30vw;
    height: 17vw;
    border-radius: 1.5vw;
  }
  .laptop:after {
    top: 10vw;
    left: 9.5vw;
    width: 11vw;
    height: 6.5vw;
    border-radius: 0.5vw;
  }
  .laptop .shadow {
    top: -3vw;
    left: 10vw;
    width: 40vw;
    height: 19vw;
  }
  .laptop .keyboard {
    top: -8vw;
    left: -2.5vw;
    width: 26vw;
    height: 6vw;
  }
  .laptop .keyboard .key {
    width: 2.35vw;
    height: 1.3vw;
    border-radius: 0.2vw;
  }
  .laptop .keyboard .keyboard-1 {
    grid-column-gap: 0.2vw;
  }
  .laptop .keyboard .keyboard-1 .key {
    height: 1.3vw;
  }
  .laptop .keyboard .keyboard-2 {
    margin-top: 0.3vw;
    grid-column-gap: 0.2vw;
  }
  .laptop .keyboard .keyboard-2 .key-2 {
    width: 4.9vw;
  }
  .laptop .keyboard .keyboard-3 {
    margin-top: 0.3vw;
    grid-column-gap: 0.2vw;
  }
  .laptop .keyboard .keyboard-3 .key-3 {
    width: 3.6vw;
  }
  .laptop .keyboard .keyboard-4 {
    margin-top: 0.3vw;
    grid-column-gap: 0.2vw;
  }
  .laptop .keyboard .keyboard-4 .key-2 {
    width: 4.9vw;
  }
  .laptop .keyboard .keyboard-5 {
    margin-top: 0.3vw;
    grid-column-gap: 0.2vw;
  }
  .laptop .keyboard .keyboard-5 .key-4 {
    width: 12.55vw;
  }

  .pencil {
    top: 13vw;
    left: 31vw;
    width: 0.7vw;
    height: 10vw;
  }
  .pencil:after {
    width: 0.35vw;
    height: 10vw;
  }
  .pencil .pencil-top {
    top: -0.8vw;
    border-bottom: 0.8vw solid #f5f6f6;
    border-left: 0.4vw solid transparent;
    border-right: 0.4vw solid transparent;
  }
  .pencil .pencil-top:before {
    left: -0.15vw;
    border-bottom: 0.4vw solid #181820;
    border-left: 0.2vw solid transparent;
    border-right: 0.2vw solid transparent;
  }
  .box-3niveis .text-box{
    height: 170px;
  }
  #mosaico .container-mosaico{
    top: 48%;
  }
  #section-4-hf.margin-cont{
    margin-top: 40px;
  }
}


/*Responsive Mobile*/

@media screen and (max-width: 768px){
  .main-banner .stripe#professor{
    padding: 0px;
    margin-top: 200px;
    margin-left: -45px;
  }
  .laptop {
    margin-top: -50px;
    margin-left: 42px;
  }
  .pencil {
    margin-top: -50px;
    margin-left: 17px;
  }
  .box-3niveis .text-box{
    height: 460px;
  }
  #hf-box{
    margin-top: -80px !important;
  }
  #mosaico .container-mosaico{
    width: 100%;
    margin-top: -105px;
  }
  #section-4-hf.margin-cont{
    margin-top: -250px;
  }
  #section-3-hf.margin-cont{
    margin-top: -40px;
  }
  .width-half#hw35{
    width: 35%;
  }
  .width-half#hw55{
    width: 75%;
  }
  .width-half#hw65{
    width: 85%;
    text-align: center;
  }
  .width-half#hw80{
    width: 85%;
  }
}

@media screen and (max-width: 600px){
  .main-banner .stripe#professor{
    padding: 0px;
    margin-top: 200px;
    margin-left: -45px;
  }
  .laptop {
    margin-top: -150px;
    margin-left: 200px;
  }
  .pencil {
    margin-top: -150px;
    margin-left: 160px;
  }
  #cont-conheca .col-txt#txt-div {
    margin-top: 150px;
  }
  .box-3niveis .text-box{
    height: 160px;
  }
  .row-3niveis .number-circle {
    margin-top: 15px;
  }
  #mosaico .container-mosaico{
    width: 100%;
    margin-top: -125px;
  }
  #section-4-hf.margin-cont{
    margin-top: -350px;
  }
  #section-3-hf.margin-cont{
    margin-top: -40px;
  }
  .width-half#hw35{
    width: 50%;
  }
  .width-half#hw55{
    width: 85%;
  }
  .width-half#hw65{
    width: 85%;
    text-align: center;
  }
  .width-half#hw80{
    width: 85%;
  }
}

@media screen and (max-width: 480px){
  .main-banner .stripe#professor{
    padding: 0px;
    margin-top: 200px;
    margin-left: -45px;
  }
  .main-banner .stripe#professor .container{
    width: 100%;
  }
  .main-banner .stripe#professor .container .ear.left{
    left: 7px !important;
  }
  .main-banner .stripe#professor .container .ear.right{
    left: 77px !important;
  }
  .laptop {
    margin-top: -150px;
    margin-left: 200px;
  }
  .pencil {
    margin-top: -150px;
    margin-left: 160px;
  }
  #cont-conheca .col-txt#txt-div {
    margin-top: 80px;
  }
  .box-3niveis .text-box{
    height: 185px;
  }
  .row-3niveis .number-circle {
    margin-top: 15px;
  }
  #mosaico .container-mosaico{
    width: 100%;
    margin-top: -150px;
  }
  #section-4-hf.margin-cont{
    margin-top: -350px;
  }
  #section-3-hf.margin-cont{
    margin-top: -40px;
  }
  .width-half#hw35{
    width: 85%;
    text-align: center;
  }
  .width-half#hw55{
    width: 85%;
  }
  .width-half#hw65{
    width: 85%;
    text-align: center;
  }
  .width-half#hw80{
    width: 85%;
  }
}

@media screen and (max-width: 420px){
  #page-hf-home .main-banner .banner-texto h1{
    font-size: 2em;
  }
  .main-banner .stripe#professor{
    padding: 0px;
    margin-top: 200px;
    margin-left: -45px;
  }
  .main-banner .stripe#professor .container{
    width: 100%;
  }
  .main-banner .stripe#professor .container .ear.left{
    left: 33px !important;
  }
  .main-banner .stripe#professor .container .ear.right{
    left: 105px !important;
  }
  .laptop {
    margin-top: -125px;
    margin-left: 160px;
  }
  .pencil {
    margin-top: -125px;
    margin-left: 120px;
  }
  #cont-conheca .col-txt#txt-div {
    margin-top: 80px;
  }
  .box-3niveis .text-box{
    height: 240px;
  }
  .row-3niveis .number-circle {
    margin-top: 15px;
  }
  #mosaico .container-mosaico{
    width: 100%;
    margin-top: -160px;
  }
  #section-4-hf.margin-cont{
    margin-top: -400px;
  }
  #section-3-hf.margin-cont{
    margin-top: -40px;
  }
  .width-half#hw35{
    width: 85%;
    text-align: center;
  }
  .width-half#hw55{
    width: 85%;
  }
  .width-half#hw65{
    width: 85%;
    text-align: center;
  }
  .width-half#hw80{
    width: 85%;
  }
}

@media screen and (max-width: 375px){
  #page-hf-home .main-banner .banner-texto h1{
    font-size: 2em;
  }
  .main-banner .stripe#professor{
    padding: 0px;
    margin-top: 200px;
    margin-left: -45px;
  }
  .main-banner .stripe#professor .container{
    width: 100%;
  }
  .main-banner .stripe#professor .container .ear.left{
    left: 17px !important;
  }
  .main-banner .stripe#professor .container .ear.right{
    left: 87px !important;
  }
  .laptop {
    margin-top: -125px;
    margin-left: 160px;
  }
  .pencil {
    margin-top: -125px;
    margin-left: 120px;
  }
  #cont-conheca .col-txt#txt-div {
    margin-top: 80px;
  }
  .box-3niveis .text-box{
    height: 270px;
  }
  .row-3niveis .number-circle {
    margin-top: 15px;
  }
  #mosaico .container-mosaico{
    width: 100%;
    margin-top: -180px;
  }
  #section-4-hf.margin-cont{
    margin-top: -460px;
  }
  #section-3-hf.margin-cont{
    margin-top: -40px;
  }
  .width-half#hw35{
    width: 85%;
    text-align: center;
  }
  .width-half#hw55{
    width: 85%;
  }
  .width-half#hw65{
    width: 85%;
    text-align: center;
  }
  .width-half#hw80{
    width: 85%;
  }
}

@media screen and (max-width: 360px){
  #page-hf-home .main-banner .banner-texto h1{
    font-size: 2em;
  }
  .main-banner .stripe#professor{
    padding: 0px;
    margin-top: 200px;
    margin-left: -45px;
  }
  .main-banner .stripe#professor .container{
    width: 100%;
  }
  .main-banner .stripe#professor .container .ear.left{
    left: 10px !important;
  }
  .main-banner .stripe#professor .container .ear.right{
    left: 82px !important;
  }
  .laptop {
    margin-top: -125px;
    margin-left: 160px;
  }
  .pencil {
    margin-top: -125px;
    margin-left: 120px;
  }
  #cont-conheca .col-txt#txt-div {
    margin-top: 80px;
  }
  .box-3niveis .text-box{
    height: 270px;
  }
  .row-3niveis .number-circle {
    margin-top: 15px;
  }
  #mosaico .container-mosaico{
    width: 100%;
    margin-top: -180px;
  }
  #section-4-hf.margin-cont{
    margin-top: -460px;
  }
  #section-3-hf.margin-cont{
    margin-top: -40px;
  }
  .width-half#hw35{
    width: 85%;
    text-align: center;
  }
  .width-half#hw55{
    width: 85%;
  }
  .width-half#hw65{
    width: 85%;
    text-align: center;
  }
  .width-half#hw80{
    width: 85%;
  }
}