@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@500&family=Poppins:wght@200&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');


:root {
  --red_1: #990003;
  --red_3: #e50005;

  --grey_1: #404040;
  --grey_2: #68676c;
  --grey_3: #737373;
  --grey_4: #c1c1c1;

  --normal_1: #fff;
  --normal_2: #000;


  --font_principal: 'Montserrat', sans-serif;
  --font_2: 'Poppins', sans-serif;
  --font_3: Arial, Helvetica, sans-serif;
  --font_4: 'Open Sans', sans-serif;
  --font_5: 'Lato', sans-serif;
}

*,
html {
  margin: 0;
  padding: 0;
}


*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  margin: 0;
  overflow-x: hidden !important;
  font-family: var(--font_principal);
}

body::-webkit-scrollbar {
  width: 10px;
  background-color: rgba(133, 132, 132, 0.2);
}

body::-webkit-scrollbar-thumb {
  background-color: rgba(133, 132, 132, 0.3);
  height: 10px;
  /* color of the scroll thumb */
  border-radius: 0px;
  /* roundness of the scroll thumb */
  border: 1px solid rgba(133, 132, 132, 0.4);
  /* creates padding around scroll thumb */
}

li {
  list-style: none;
}

a {
  text-decoration: none !important
}

span {
  font-weight: 600;
}

div.container_princ {
  margin: auto;
  max-width: 1440px;
  height: auto;
}


a.active_link {
  background-color: var(--grey_3);
  color: #f0efef;
}

.menu_lateral {
  position: absolute;
  top: 0;
  z-index: 10 !important;
  position: sticky;
}

.nav_menu {
  padding: 3rem 0 0 0;
}

.nav_menu>li>a {
  padding: 15px 0;
}


.nav_menu_lateral {
  display: flex;
  flex-direction: column;
  height: auto;
}

nav::-webkit-scrollbar {
  width: 10px;
  background-color: rgba(133, 132, 132, 0.2);
}

nav::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 1);
  max-height: 2% !important;
  /* color of the scroll thumb */
  border-radius: 0px;
  /* roundness of the scroll thumb */
  border: 1px solid var(--red_3);
  /* creates padding around scroll thumb */
}

.w3-container,
.w3-panel {
  width: 100%;
  line-height: 2rem;
}

.nav_menu_lateral>.close_menu_lat {
  background-color: var(--red_3);
  color: var(--normal_1);
  width: 100%;
  text-align: left;
}

/***************faixa central de alunos ****************/
.title_alunos {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: 0 0;
  height: 24vh;
  max-height: 75px;
  width: 100%;
  padding: 10px 0 !important;
  text-align: center;
  margin-bottom: 1rem;
  background: var(--red_3);
  background-attachment: scroll;
  color: var(--normal_1);
  z-index: 5 !important;
  max-width: 1440px;
}

.title_alunos>h5 {
  font-size: 23px;
  font-weight: 600;
}

/*************** Slides ****************/
.icons_importants {
  height: auto;
  padding-left: 0 2rem;
  width: 100%;
  margin: 0 10px;
  z-index: 2;
  color: #e50005;
  padding-top: 6.5rem;
}

.icons_importants>a:hover {
  text-decoration: underline !important;
  color: #e50005;
}

.imagem_topo {
  height: 20vh;
  max-height: 250px;
  width: 97%;
  margin-bottom: 1rem;
  background-color: rgba(240, 240, 240, 0.1);
  ;
}

.swiper-button-next,
.swiper-button-prev {
  color: var(--grey_3) !important;
}

.autoplay-progress>svg>circle {
  color: var(--red_3) !important;
  background-color: var(--red_3) !important;
}

.slide1,
.slide2,
.slide3,
.slide4 {
  height: auto;
  width: 100%;
  margin: auto;
}

.slide1 {
  background: url(graduacao/img/capa1.png) no-repeat center center;
  background-size: 100%;
  background-color: rgba(240, 240, 240, 0.5);
  ;
}

.slide2 {
  background: url(graduacao/img/capa2.png) no-repeat center center;
  background-size: 100%;
  background-color: rgba(240, 240, 240, 0.5);
  ;
}

/***************CARDS DESTAQUE ****************/
.box>a {
  text-decoration: none;
}

.box_destaque {
  height: auto;
  max-height: 150px;
  margin: 10px 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  max-height: 180px;
}

.box_destaque>h4 {
  line-height: 1.7rem;
  font-size: 18px;
  padding-left: 1.5rem;
}



/*************** CONTEÚDO TEXTO ****************/
.box_conteudo {
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: .5rem 10px 5rem;
  background: url(graduacao/img/ondinha.svg) no-repeat bottom;
  background-size: 96%;
}

.box_conteudo>.area_urso {
  background: url(graduacao/img/urso_cartao_acesso.png) no-repeat center;
  background-size: 45%;
  width: 100%;
  height: 30vh;
  max-height: 500px;
  order: 2;
}

.box_conteudo>.area_urso>img {
  width: 80%;
}

.box_conteudo>.box_ttext {
  order: 1;
  width: 100%;
  padding: 10px;
}

.box_conteudo>.box_ttext>h5 {
  font-size: 20px;
  padding: 10px 0 20px;
  color: var(--grey_1);
  font-weight: 600;
}

.box_conteudo>.box_ttext>p {
  font-size: 14px;
  color: var(--grey_1);
  margin-top: 10px;
  line-height: 1.6rem;
  letter-spacing: 0px;
  text-align: justify;
}


/*   modal */

.buttons_modais {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 45vh;
  max-height: 350px;
  width: 96%;
  margin: auto;
  padding: 0 0 5rem 0 !important;
  background-color: #fff;
}


.ipiranga {
  width: 100%;
  height: 20vh;
  background: url(graduacao/img/ipiranga_mini.png) no-repeat center;
}


.pompeia {
  margin-top: 20px;
  width: 100%;
  height: 20vh;
  background: url(graduacao/img/pompeia_mini.png) no-repeat center;
}

.ipiranga>h5,
.pompeia>h5 {
  width: 80%;
  margin: 1.5rem auto;
  text-align: center;
  font-weight: 600;
  background-color: rgba(29, 29, 29, 0.7);
  color: #fff;
}

.w3-modal {
  margin-top: 9rem;
  margin-left: 0;
  height: auto;
}

.w3-modal-content>header>h2 {
  font-size: 1.5rem;
}

.po_modal,
.ip_modal {
  margin: 1rem 0;
  width: 30rem;
  display: flex;
  flex-direction: row;
  padding-bottom: 20rem;
}

.po_modal>img,
.ip_modal>img {
  width: 76%;
  padding: 10px;
}

.text_ini {
  padding: 0 2rem;
}

.text_ini>p {
  font-size: 14px;
  color: var(--grey_1);
  margin-top: 10px;
  line-height: 1.6rem;
  letter-spacing: 0px;
  text-align: justify;

}

.text_ini>h5 {
  text-align: center;
  font-size: 25px;
  padding: 10px 0 40px;
  color: var(--grey_1);
  font-weight: 600;
}

/*****************************/

@media (min-width: 665px) {
  .title_alunos {
    margin: 0;
  }

  .title_alunos>h5 {
    font-size: 28px;
  }

  .imagem_topo {
    height: 55vh;
    margin: .5rem;
  }

  /* Cards Destaques*/

  .box_destaque {
    display: flex;
    flex-direction: column;
    align-items: normal;
    justify-content: left;
    height: 20vh;
  }

  .box_destaque>h4 {
    padding-top: 10px;
    padding-left: 0;
  }

  /* Conteúdo texto*/
  .box_conteudo>.area_urso {
    background-size: 28%;
    height: 30vh;
  }

  .box_conteudo>.box_ttext>h5 {
    font-size: 25px;
    padding: 10px 0 25px;
  }

  /* Modal*/

  .ipiranga>h5,
  .pompeia>h5 {
    width: 35%;
  }


  .po_modal,
  .ip_modal {
    width: 44rem;
    display: flex;
  }

  .po_modal>img,
  .ip_modal>img {
    width: 72%;
    padding: 20px;
  }
}


@media (min-width: 990px) {
  .title_alunos {
    margin: 5px 0 0;
  }

  .nav_menu_lateral {
    display: none;
  }

  .menu_lateral {
    position: absolute;
    top: 4.5rem;
    z-index: 2 !important;
  }

  .icons_importants {
    margin: 0 2rem;
    padding-top: 5.5rem;
  }

  .box_destaque>h4 {
    padding-top: 5px;
    padding-left: 0;
  }

  /*** CONTEÚDO TEXTO ***/
  .box_conteudo {
    height: auto;
    display: flex;
    flex-direction: row;
    padding: 0rem 0 4rem 0;
    background-size: 96%;
  }

  .box_conteudo>.area_urso {
    background: url(graduacao/img/urso_cartao_acesso.png) no-repeat center 4rem;
    background-size: 45%;
    width: 45%;
    height: 50vh;
    max-height: 500px;
    order: 1;
  }

  .box_conteudo>.area_urso>img {
    width: 80%;
  }

  .box_conteudo>.box_ttext {
    width: 50%;
    padding: 10px;
    order: 2;
  }

  .box_conteudo>.box_ttext>h5 {
    font-size: 20px;
    padding: 15px 0;
  }

  .box_conteudo>.box_ttext>p {
    font-size: 14px;
    margin-top: 10px;
    line-height: 1.6rem;
    letter-spacing: 0.5px;
  }


  .box_conteudo>.box_ttext>p.end_top {
    margin-bottom: 8rem;
  }

  .buttons_modais {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    height: 30vh;
    max-height: 350px;
    width: 96%;
    margin: auto;
    padding: 0 0 5rem !important;
  }

  .ipiranga {
    width: 40%;
    height: 20vh;
    background: url(graduacao/img/ipiranga_mini.png) no-repeat center;
  }


  .pompeia {
    width: 40%;
    height: 20vh;
    margin-bottom: 1.4rem;
    background: url(graduacao/img/pompeia_mini.png) no-repeat center;
  }

  .ipiranga>h5,
  .pompeia>h5 {
    width: 85%;
  }


  .po_modal,
  .ip_modal {
    margin: 1rem 0;
    width: 60rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

  .po_modal>img,
  .ip_modal>img {
    width: 76%;
    padding: 10px;
  }



}


@media (min-width: 1001px) {
  .title_alunos>h5 {
    font-size: 30px;
    padding-right: 15rem;
  }

  .w3-modal {
    margin-top: 4rem !important;
    margin-left: 0;
  }

  .w3-modal-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: auto;
    position: relative;
    right: -5rem;
  }
}

@media (min-width: 1024px) {
  .title_alunos>h5 {
    padding-right: 5rem;
  }

  .box_destaque {
    height: 25vh;
  }

  .box_destaque>h4 {
    padding-top: 10px;
  }
}