@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');

/*********** RESET ALL ************/
*{
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
  list-style: none;
  text-decoration: none;
  color: var(--principal-color);
  box-sizing: border-box;
  font-family: 'Montserrat', sans-serif;
}
/*********** ROOT ************/
:root{
  --principal-color: #f4f4f4;
  --secondary-color: #979797;
  --important-color: #eb5b28;
  --principal-bck: #151515;
  --secondary-bck: #303030;

  --border-radius-all: 10px;
  --box-shadow-all: 0px 0px 10px 0px #151515;
}
/*********** BODY ************/
body{
  width: 100%;
  height: max-content;
  position: absolute;
  background-color: var(--principal-bck);
}
::-webkit-scrollbar{
  width:7px;margin-top:10px
}
::-webkit-scrollbar-track{
  background-color:#2c2c2c;
}
::-webkit-scrollbar-thumb{
  background-color:var(--important-color)
}
/*********** ALL BUTTONS ************/
.btn-all{

  background: none;
  width: 180px;
  height: 60px;
  border-radius: 5px;
  border: 2px solid var(--important-color);
  font-size: 1rem;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-all:hover{
  transition: .3s;
  box-shadow: inset 0px 100px 0px 0px var(--important-color);
}

.btn-whatsapp{

  position: fixed;
  bottom: 30px;
  right: 30px;
}

.btn-whatsapp img{
  width: 40px;
  
}

/****** SHAPEDIVIDER *******/

.custom-shape-divider-bottom-1663443106 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}

.custom-shape-divider-bottom-1663443106 svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);
  height: 101px;
}

.custom-shape-divider-bottom-1663443106 .shape-fill {
  fill: var(--principal-bck);
}


/*********** MENU ************/
.menu{
  width: 100%;
  height: 70px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: .3s;
}

.menu-artes{
  background-color: var(--secondary-bck);
}

.menu figure{

  margin-left: 80px;
  display: flex;
  align-items:center;
  justify-content: center;
}

.menu figure img{
  width: 50px;
}

.menu figure h1{
  text-transform: uppercase;
  font-size: 1.3rem;
  font-weight: 900;
}

.menu ul{
  display: flex;
  gap: 20px;
  margin-right: 80px;
}

.menu ul a{
  font-size: .9rem;
  font-weight: 600;
  text-transform: uppercase;
}

.menu ul a:hover{

  color: var(--important-color);
}

#menuResponsivo,
#menuResponsivo2{
  display: none;
}

.buttonMenu{

  display: none;
}

/***** MENU SCROLL *****/

.menu-scroll{
  background-color: var(--principal-color);
  box-shadow: 0px 0px 7px 0px #151515;
}

.menu-scroll figure h1{
  color: var(--important-color);
}

.menu-scroll ul a{

  color: var(--principal-bck);
}

/*********** ALL PANELS ************/
.panel{
  width: 100%;
  height: 700px;
  display: flex;
  align-items: center;
  flex-direction: column;
  position: relative;
}

#about,
#feedback{
  background-color: var(--secondary-bck);
  box-shadow: 0px 0px 5px 0px #000;
}

/*********** ALLTITLES ************/

.alltitles{
  width: 88%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 130px;
  margin-bottom: 50px;
}

.alltitles h1{

  color: var(--important-color);
}

/*********** BANNER ************/
#home{
  background-image: url(https://images.unsplash.com/photo-1642548666500-7990b88e691f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=978&q=80);
  background-size: cover;
  background-position: center;
}

.banner{
  width: 100%;
  height: 100%;
  background-color: #00000060;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.banner p{

  font-size: 1.4rem;
  font-weight: 700;
  color: var(--secondary-color);
}

.banner h1{

  font-size: 5rem;
  font-weight: 900;
  margin: 10px 0px;
  text-transform: uppercase;
}

.banner h5{

  font-size: 1.2rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--important-color);
}

.banner a{

  margin-top: 50px;
}

.banner p, .banner h1,
.banner h5,.banner a{
  margin-left: 80px;
}

/*********** SERVICES ************/
.carrossel{

  width: 90%;
  height: 400px;
  display: flex;
}

.carrossel li{

  margin: 15px;
}

.carrossel li img{
  cursor: pointer;
  width: 100%;
  border:  2px solid #363636;
  border-radius: 5px;
}
/*********** ABOUT US ************/

#about{
  justify-content: center;
}

.sobre {

  width: 88%;
  height: 550px;
  margin-top: 80px;
  display: flex;

}

.sobre figure{
  width: 48%;
  height: 100%;
  border-radius: 5px;
}

.sobre figure div{

  display: none;
}

.sobre figure img{
  
  width: 100%;
  height: 100%;
  border-radius: 5px;
}

.sobre figcaption{
  width: 48%;
  height: 550px;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sobre figcaption h1,
.sobre figcaption h3,
.sobre figcaption p{

  margin-left: 50px;
}

.sobre figcaption h1{

  margin-top: 10px;
  font-size: 2rem;
  text-transform: uppercase;
  font-weight: 900;
}

.sobre figcaption h3{

  margin-top: 10px;
  font-size: 1.3rem;
  color: var(--important-color);
}

.sobre figcaption p{

  margin-top: 30px;
  font-size: 1.1rem;
  line-height: 23px;
  color: var(--secondary-color);
}

/*********** PORTFÓLIO ************/

#portfolio{

  height: 150vh;
}

.box-port{

  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.panel a{
  margin-top: 80px;
}

.btn-portfolio{

  width: 88%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 130px;
}

.btn-portfolio button{

  width: 120px;
  height: 100%;
  border: 1px solid;
  background: none;
  border-radius: 5px;
  text-transform: uppercase;
}

.btn-portfolio button:hover{
  
  background-color: var(--important-color);
  border: 1px solid var(--important-color);
  cursor: pointer;
  transition: .3s;
  
}

.active-link-port{

  border: 1px solid var(--important-color);
}

.list-port{

  width: 88%;
  height: 85vh;
  margin-top: 50px;
  display: grid;
  grid-template-columns: repeat(4, 10fr);
  grid-template-rows: repeat(1);
  gap: 20px;
  margin-bottom: 0px;
}

.list-port li{

  
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--secondary-bck);
  border-radius: 5px;
}

.card-index-one{
  grid-column: 1 / span 1;
  grid-row: 1 / span 0; 
}

.itemCarr{
  grid-column: 1 / span 2;
  grid-row: 2 / span 0; 
  height: 300px;
}

.list-port li h1{
  text-transform: uppercase;
  color: var(--important-color);
  font-size: 1.4rem;
}


.list-port li img{

  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border: 1px solid var(--secondary-color);
  border-radius: 5px;
}

.cardapios{
  display: none;
}

/*********** FEEDBACKS ************/

.carrtwo{

  width: 90%;
  height: max-content;
  display: grid;
  grid-template-columns: repeat(3, 10fr);
  grid-template-rows: repeat(1);
  gap: 20px;
}

.carrtwo li{
  
  width: 100%;
  height: 400px;
  gap: 40px;
  cursor: pointer;
  border-radius: 10px;
  background-color: var(--principal-bck);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
}

.carrtwo li figure{
  width: 100%;
  height: 70%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carrtwo li figure div{
  width: 200px;
  height: 200px;
  border: 1px solid var(--important-color);
  border-radius: 100%;
}

.carrtwo li figcaption{
  width: 100%;
  height: 30%;
  display: flex;
  
  flex-direction: column;
  gap: 20px;

}


.carrtwo li figcaption p{
  font-size: 1rem;
  width: 80%;
  font-weight: 600;
  margin-left: 30px;
}

.carrtwo li figcaption p b{

  color: var(--important-color);
}

.carrtwo li figcaption h6{
  font-size: 1rem;
  font-weight: 800;
  margin-left: 30px;
  color: var(--important-color);
  position: absolute;
  bottom: 20px;
}

#feedback{

  height: max-content;
  padding-bottom: 40px;
}

#box-apoio{

  display: none;
}

.imageOne{
  background-image: url(https://veja.abril.com.br/wp-content/uploads/2016/05/steve-jobs-apple-23-original1.jpeg);
  background-size: cover;
  background-position: center;
}

.imageTwo{
  background-image: url(https://www.oneclub.org/cache/images/userfiles/images/biography/thumbs/384x384/focus_point/Massimo_Vignelli.jpg);
  background-size: cover;
}

.imageTree{
  background-image: url(https://www.frasesypensamientos.com.ar/imagenes/autor/charles-eames.jpg);
  background-size: cover;
}

/*********** CONTACT US ************/
.contate-nos{
  position: relative;
  width: 88%;
  height: 400px;
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
}

.contate-nos section{

  width: 100%;
  height: 75%;
  gap: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
}

.contate-nos section div{

  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.contate-nos section div input{

  width: 48%;
  height: 60px;
  max-height: 60px;
  border-radius: 5px;
  border: none;
  color: var(--principal-color);
  padding: 0px 30px;
  font-size: 1rem;
  outline: none;
  background-color: var(--secondary-bck);
  border: 2px solid var(--secondary-bck);
}

.contate-nos section textarea{

  width: 100%;
  height: 75%;
  outline: none;
  margin-top: 10px;
  resize: none;
  border-radius: 5px;
  border: none;
  color: var(--principal-color);
  padding: 25px 30px;
  font-size: 1rem;
  background-color: var(--secondary-bck);
  border: 2px solid var(--secondary-bck);
}

.contate-nos section div input::placeholder,
.contate-nos section textarea::placeholder{

  color: var(--secondary-color);
}

.contate-nos section div input:focus::placeholder,
.contate-nos section textarea:focus::placeholder{

  padding-left: 20px;
  transition: .3s;
  font-style: italic;
  opacity: 0;
}

.contate-nos section div input:focus,
.contate-nos section textarea:focus{

  border: 1px solid var(--important-color);
  
}

/*********** FOOTER ************/

footer{

  background-image: url(..//img/fundos/montanhafooter.jpg);
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 200px;
  position: relative;
  box-shadow:  0px 0px 5px 0px #000;
}

footer div{
  width: 100%;
  height: 100%;
  background-color: #00000090;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

footer ul{
  display: flex;
  gap: 20px;
}

footer ul a{
  border: 1px solid var(--principal-color);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  cursor: pointer;
}

footer ul a:hover{

  background-color: var(--important-color);
  border: 1px solid var(--important-color);
  box-shadow: 0px 0px 10px 0px var(--important-color);
  transition: .3s;
}

footer p{
  margin-top: 20px;
  font-size: 1.2rem;
  font-weight: 500;
}

footer h2{
  margin-top: 10px;
  font-size: 1rem;
  background-color: #00000090;
  backdrop-filter: blur(10px);
  border-top-right-radius: 10px;
  padding: 10px 20px;
  font-weight: 300;
  position: absolute;
  left: 0px;
  bottom: 0px;
}

footer h2 a{

  margin-left: 5px;
  font-weight: 500;
}

footer h2 a:hover{

  color: var(--important-color);
  transition: .4s;
}

footer h2 a:hover i{
  color: var(--important-color);
  transition: .4s;
}

footer ul a svg{
  width: 30px;
}

/************ TODAS AS ARTES **************/

.panels-artes{

  width: 100%;
  height: max-content;
  margin-top: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.panels-artes ul{

  width: 88%;
  height:max-content;
  display: grid;
  grid-template-columns: repeat(4, 10fr);
  grid-template-rows: repeat(1);
  gap: 20px;
}

.item01{
  grid-column: 1 / span 2;
  grid-row: 1 / span 1; 
}

.item08{
  grid-column: 1 / span 0;
  grid-row: 0 / span 1; 
}

.item-5bottom{
  grid-column: 1 / span 2;
  grid-row: 4 / span 1; 
}

.item-1bottom{
  grid-column: 1 / span 1;
  grid-row: 6 / span 1;
}

.item-2bottom{
  grid-column: 2 / span 2;
  grid-row: 6 / span 1; 
}


.card-01{
  grid-column: 3 / span 4;
  grid-row: 1 / span 1; 
}


.card-new{

  grid-column: 1 / span 2;
  grid-row: 1 / span 1;
  
  font-size: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-new h1{

  color: var(--important-color);
  text-transform: uppercase;
}

.panels-artes h3{
  width: 88%;
  margin: 50px;
  font-size: 1.3rem;
  text-transform: uppercase;
  text-align: center;
  color: var(--important-color);
}

.panels-artes ul li{
  
  overflow: hidden;
  background-color: var(--secondary-bck);
}

.panels-artes ul li img{

  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border: 2px solid var(--secondary-color);
  border-radius: 5px;
}

.titles-artes{
  margin-top: 100px;
  margin-bottom: 40px;
  width: 88%;
  background-color: var(--important-color);
  border-radius: 5px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.titles-artes h1{

  font-size: 1.5rem;
  font-weight: 900;
  color: var(--principal-color);
  text-transform: uppercase;
}

/************ PÁGINA DE OBRIGADO **************/

.pageObrigado{
  width: 70%;
  height: 60%;
  margin-top: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.pageObrigado img{
  width: 25%;
}

.pageObrigado p{
  font-size: 1.3rem;
  margin: 20px 0px;
}

/*********** RESPONSIVE ************/
@media all and (max-width: 1024px){

  /****** MENU ********/
  .menu figure{
    margin-left: 40px;
  }

  .menu ul{
    margin-right: 40px;
  }

  /****** MENU ********/
  .banner p, .banner h1,
  .banner h5, .banner a{
    margin-left: 40px;
  }

  /****** SOBRE ********/
  .sobre{

    margin-top: 120px;
  }

  .sobre figure{

    height: 450px;
  }
  
  .sobre figcaption{
    
    height: 450px;
  }

  .sobre figcaption p{

    font-size: 1rem;
    line-height: 15px;
    width: 80%;
  }

  /****** PORTFOLIO ********/

  .btn-portfolio{
    margin-top: 100px;
  }

  .noneImage{
    display: none;
  }

  .box-port button{
    margin-top: 100px;
  }

  /****** FEEDBACKS ********/

  .carrtwo li{
    height: 350px;
  }

  .carrtwo li figcaption,
  .carrtwo li figure{

    height: 50%;
  }

  /****** CONTATOS ********/

  .contate-nos{
    height: 350px;
  }

  /****** FOOTER ********/

  footer{
    margin-top: 40px;
  }

}

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

  /****** MENU ********/

  .carrtwo{

    grid-template-columns: repeat(2, 10fr);
    grid-template-rows: repeat(1);
    gap: 20px;
  }

  .menu{

    background-color: var(--principal-color);
  }

  .menu figure{
    margin-left: 20px;
  }

  .menu figure h1{

    color: var(--important-color);
  }

  #menu{

    display: none;
  }

  .buttonMenu{

    margin-right: 20px;
    display: flex;
  }

  .buttonMenu i{
    
    font-size: 3rem;
    color: var(--important-color);
  }

  #menuResponsivo{

    width: 100%;
    height: calc(100vh - 70px);
    position: fixed;
    top: 70px;
    left: 0;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: var(--principal-bck);
    animation: menuAnimation .3s;
  }

  @keyframes menuAnimation {
    0%{
      top: -100px;
      left: 50%;
      width: 10%;
      height: 10px;
      border-radius: 1000px;
    }
  }

  #menuResponsivo a{

    width: 60%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--important-color);
    border-radius: 5px;
    color: var(--principal-bck);
    font-size: 1rem;
    font-weight: 800;

  }

  .panels-artes ul{

    grid-template-columns: repeat(3, 10fr);
    grid-template-rows: repeat(1);
  }

  /****** BANNER ********/
  .banner p, .banner h1,
  .banner h5, .banner a{
    margin-left: 0px;
  }

  .banner{

    background-color: #00000099;
    align-items: center;
  }

  .banner p{
    color: var(--principal-color);
  }

  .banner h1{

    font-size: 6rem;
    width: 80%;
    text-align: center;
  }

  .down-arrow{
    z-index: 99;
    position: absolute;
    bottom: 50px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .down-arrow i{

    font-size: 1.8rem;
    color: var(--secondary-color);
    animation:arrowdown ease-in 1.3s infinite alternate;
  }

  @keyframes arrowdown {
    0%{
      transform: translateY(30px);
    }
  }

  /****** SOBRE ********/
  .sobre{

    margin-top: 115px;

  }

  .sobre figure{

    height: 350px;
  }

  .sobre figure div{
    background-color: var(--principal-bck);
    height: 100px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
  }

  .sobre figure h1{

    text-transform: uppercase;
    font-weight: 900;
    margin-left: 20px;
  }

  .sobre figure h3{

    text-transform: uppercase;
    color: var(--important-color);
    margin-left: 20px;
  }
  
  .sobre figcaption h1,
  .sobre figcaption h3{
    
    display: none;
  }

  .sobre figcaption{

    display: flex;
    justify-content:flex-start;
  }

  .sobre figcaption p{

    font-size: .9rem;
    line-height: 20px;
    margin-left: 30px;
    margin-bottom: 30px;
    width: 100%;

  }

  /****** PORTFOLIO ********/

  .list-port{

    grid-template-columns: repeat(3, 10fr);
    grid-template-rows: repeat(0);
    
  }

  .itemCarr{
    grid-column: 2 / span 2;
    grid-row: 1 / span 0; 
  }

  #noneImage{
    display: none;
  }

  /****** FEEDBACKS ********/

  .carrtwo{
    margin-top: -20px;
  }

  .carrtwo li{
    height: 350px;
  }

  .carrtwo li figcaption,
  .carrtwo li figure{

    height: 50%;
  }

  /****** CONTATOS ********/

  .contate-nos{
    height: 350px;
  }

  /****** FOOTER ********/

  footer{
    margin-top: 40px;
  }

  .btn-whatsapp{

    right: 10px;
    bottom: 10px;
  }

  
  .carrtwo{

    width: 90%;
    height: max-content;
    display: grid;
    grid-template-columns: repeat(1, 10fr);
    grid-template-rows: repeat(1);
    gap: 20px;
    
  }

  .carrtwo li{
    width: 95%;
    margin-inline: auto;
  }

  .carrtwo figure{
    margin-top: 30px;
  }

  .carrtwo figcaption{
    margin-bottom: 20px;
  }

  .panels-artes ul{

    grid-template-columns: repeat(2, 10fr);
    grid-template-rows: repeat(1);
  }

  .card-01{
    grid-column: 1 / span 2;
    grid-row: 1 / span 2; 
  }

  .card-new{
    display: none;
  }


  
.item01{
  grid-column: 1 / span 2;
  grid-row: 0 / span 1; 
}

.item08{
  grid-column: 1 / span 1;
  grid-row: 4 / span 1; 
}

.item-5bottom{
  grid-column: 0 / span 1s;
  grid-row: 4 / span 1; 
}

.item-1bottom{
  grid-column: 1 / span 1;
  grid-row: 6 / span 1;
}

.item-2bottom{
  grid-column: 2 / span 1;
  grid-row: 6 / span 1; 
}

.titles-artes h1{
  font-size: 1rem;
}


  /****** BANNER ********/
  .banner{

    background-color: #00000099;
    align-items: center;
  }

  .banner h1{

    font-size: 4rem;
    width: 100%;
    text-align: center;
  }

  .banner a{
    margin-top: 30px;
  }

  .banner p{

    font-size: 1.3rem;
    font-weight: 500;
  }

  .custom-shape-divider-bottom-1663443106 svg{
    display: none;
  }

  /****** ALLTITFeedbacksLES ********/

  .alltitles{

    flex-direction: column;
    align-items: flex-start;
    margin-top: 100px;
  }

  .alltitles h1{

    font-size: 2rem;
  }

  /****** SERVIÇOS ********/
  #services{

    height: 620px;
  }

  .carrossel{

    margin-top: -20px;
    width: 95%;
  }

  .carrossel li{
    
    width: 100%;
  }


  /****** SOBRE ********/

  #about{
    height: 150vh;
  }

  .sobre{

    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .sobre figure{

    height: 400px;
    height: 50%;
  }

  .sobre figure img{

    width: 210%;
    height: 380px;
    margin-top: 0px;
  }

  .sobre figure div{
    width: 210%;
    border-radius: 5px;
  }

  .sobre figcaption{

    width: 100%;
    height: 50%;
    margin-top: -20px;
    display: flex;
  }

  .sobre figcaption p{

    font-size: 1rem;
    line-height: 18px;
    width: 100%;
    margin-left: 0px;
    margin-top: 70px;

  }

  .carrtwo{
    width: 95%;
  }

  /****** PORTFOLIO ********/

  #portfolio{

    height: max-content;
    padding-bottom: 50px;
  }

  .list-port{

    grid-template-columns: repeat(2, 10fr);
    grid-template-rows: repeat(0);
    height: max-content;
    
  }

  .list-port li{
    height: 200px;
  }

  
.card-index-one{
  grid-column: 0 / span 0;
  grid-row: 0 / span 0; 
}

.itemCarr{
  grid-column: 1 / span 2;
  grid-row: 2 / span 0; 
  height: 300px;
}
  /****** CONTATOS ********/

  .contate-nos{
    height: 400px;
    margin-top: -20px;
  }

  .contate-nos section div{

    height: 260px;
    flex-direction: column;
  }

  .contate-nos .btn-all{

    margin-top: -100px;
  }

  .contate-nos section div input{

    width: 100%;
  }

  /****** FOOTER ********/

  footer p{
    text-align: center;
    font-size: 1rem;
  }

  footer h2{
    width: 100%;
    text-align: center;
    left: 0%;
  }


}

/*@media all and (max-width: 450px){

}*/

@media all and (max-width: 375px){

  /****** BANNER ********/

  .banner h1{

    font-size: 3.5rem;
    width: 100%;
    text-align: center;
  }
  /****** SOBRE ********/

  .sobre figure img{

    width: 210%;
    height: 380px;
  }

  .sobre figure div{
    width: 210%;
    border-radius: 5px;
  }

  .sobre figcaption{

    width: 100%;
    height: 50%;
    margin-top: 45px;
    display: flex;
  }

  /****** PORTFOLIO ********/
  

  /****** CONTATOS ********/

  .contate-nos{
    height: 400px;
    margin-top: -20px;
  }

  .contate-nos section div{

    height: 260px;
    flex-direction: column;
  }

  .contate-nos .btn-all{

    margin-top: -100px;
  }

  .contate-nos section div input{

    width: 100%;
  }

  /****** FOOTER ********/

  footer p{
    text-align: center;
    font-size: .8rem;
  }

}

@media all and (max-width: 320px){

  /****** BANNER ********/

  .inteCarr{
    display: none;
  }

  #home{
    height: 100vh;
  }
  
  .panel{
    height: 90vh;
  }

  .banner h1{

    font-size: 3rem;
    width: 100%;
    text-align: center;
  }
  /****** SOBRE ********/

  #about{
    height: 140vh;
  }

  .sobre figure img{

    width: 210%;
    height: 285px;
  }

  .sobre figure div{
    width: 210%;
    border-radius: 5px;
  }

  .sobre figcaption{

    width: 100%;
    height: 50%;
    margin-top: 45px;
    display: flex;
  }

  .sobre figcaption p{

    margin-top: -5px;
    font-size: 1rem;
    margin-left: 10px;
  }
  /****** ALL TITLES ********/

  .alltitles h1{

    font-size: 1.5rem;
  }

  /****** PORTFOLIO ********/

  .list-port{

    grid-template-columns: repeat(2, 10fr);
    grid-template-rows: repeat(0);
    
  }

  /****** FEEDBACKS ********/

  .carrtwo {
    margin-top: -40px;
  }

  .carrtwo figcaption p{

    font-size: .8rem;
  }

  /****** CONTATOS ********/

  .contate-nos{
    height: 400px;
    margin-top: -20px;
  }

  .contate-nos section div{

    height: 260px;
    flex-direction: column;
  }

  .contate-nos .btn-all{

    margin-top: -100px;
  }

  .contate-nos section div input{

    width: 100%;
  }

  /****** FOOTER ********/

  footer p{
    text-align: center;
    font-size: 1rem;
  }

}