* {
box-sizing: border-box;
}

:root {

--st-bg-header: #fff;

/* custom defaults */
--st-border-radius: 5px;

--st-default-outer-back: rgb(245,245,245);

/* --st-default-back: #fff; #FDFAF7; */
--st-default-back: #FDFAF7; /*#F1EDED;*/
/* --st-default-back: rgb(255,245,238); */

/* --st-default-border-color: #d3d3d3; */
--st-default-border-color: #efe0e9;

--st-default-link: #446EC2;
--st-default-button-link: #7190CC;
--st-default-link-hover: #135EBF; /* ; #5480C7*/
/* --st-default-link: #1876f2; */

/* obj colors */
--st-color-question: rgb(169,169,169);
--st-color-tags: rgb(245,245,245);

}

html {
    height: 100%;
}

body {
  padding: 10px 15px;
  margin: 0;
  font-family: "Open Sans", sans-serif;
  font-size: 1.0em;
  padding: 0px;
  background: linear-gradient(180deg, rgba(2,0,36,1) 0%, rgba(159,0,139,1) 0%, rgba(255,176,27,1) 100%, rgba(0,212,255,1) 100%);

}

.container{
  margin: 15px auto;
  padding-bottom: 10px;
  width: 95%;
  max-width: 400px;
  background-color: #FFFAFA !important;
  border-radius: 10px;
  height: calc(100% - 30px);
  position: relative;
}

.container .logo{
  width: 100%;
  text-align: center;
}

.container .logo img{
  width: 100px;
  border-radius: 50%;
  border: 3px inset #9f008b;
  margin: 10px 0 0;
  -webkit-box-shadow: 3px 3px 6px 0px rgba(227,161,29,1);
  -moz-box-shadow: 3px 3px 6px 0px rgba(227,161,29,1);
  box-shadow: 1px 1px 3px 0px rgba(227,161,29,1);
}

.container .instagram{
  width: 100%;
  text-align: center;
  color: #797979;
  text-align: center;
  font-size: 0.9em;
  font-style: italic;
}

.container .instagram-sub{
  text-transform: uppercase;
  color: #797979;
  text-align: center;
  font-size: 0.7em;
  margin: 5px 0 0;
}

.container h3{
    margin: 20px 0 0;
    width: 100%;
    text-align: center;
    font-size: 1.0em;
    font-style: normal !important;
    color: #9f008b;
}

.c-carousel{
  margin: 5px 0 10px;

}

.c-carousel__slides{
  margin: 15px 0;

  text-align: center;
  max-height: 360px;

  -ms-overflow-style: none !important;  /* IE and Edge */
  scrollbar-width: none !important;  /* Firefox */
}

.c-carousel::-webkit-scrollbar {
    display: none !important;  /* Safari and Chrome */
    width: 0 !important;   /* Remove scrollbar space */
    background: transparent !important;  /* Optional: just make scrollbar invisible */
}

.c-carousel__slides::-webkit-scrollbar {
    display: none !important;  /* Safari and Chrome */
    width: 0 !important;  /* Remove scrollbar space */
    background: transparent !important;  /* Optional: just make scrollbar invisible */
}

/* Optional: show position indicator in red */
.c-carousel::-webkit-scrollbar-thumb {
    background: #FFFAFA !important;
}

.c-carousel__slides::-webkit-scrollbar-thumb {
    background: #FFFAFA !important;
}


.c-carousel__slide{
  width: calc( 100% -20px ) !important;
  padding: 0 10px;
}

.glider-next{
    left: auto !important;
    right: 12px !important;
    top: 50% !important;
    font-size: 3em !important;
    color: #797979 !important;
}

.glider-prev {
  right: auto !important;
  left: 12px !important;
  top: 50% !important;
  font-size: 3em !important;
  color: #797979 !important;
}

.glider-next:hover, .glider-prev:hover{
  color: #fefefe !important;
}

.c-carousel__slide img{
  border-radius: 10px;
  width: calc( 100vw - 30px );
  max-height: 345px;
}

.c-carousel__slide span.info{
  position: relative;
  bottom: 65px;
  font-size: 12px;
  z-index: 2;
  display: inline;
  left: -5px;
  margin: 10px;
  background-color: #797979;
  color: #fff;
  padding: 4px
}

.container .botoes{
  text-align: center;
  width: 100%;
}

.container .botoes .botao{
  padding: 10px 10px;
  margin: 5px 0px;
  border-radius: 10px;
  background-color: #9f008b;
  width: calc( 100% - 20px );
  display: inline-block;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
}

.container .botoes .botao i{
  font-size: 16px !important;
}

.container .social{
  margin-top: 10px;
  text-align: center;
  width: 100%;
}

.container .social a{
  color: #9f008b;
  font-size: 2.3em;
  display: inline-block;
}

#share {
    display: none;
}

@media screen and ( max-height: 670px ) {

  .container .logo img{
    width: 80px;
    margin: 5px 0 0;
  }

  .container h3{
      margin: 10px 0 0;
      width: 100%;
  }

  .c-carousel__slides{
    height: calc( 100vh - 310px );
  }

  .c-carousel__slide img{
    height: calc( 100vh - 305px );
  }

  .container .social{
    bottom: 5px;
  }

  .container .social a{
    font-size: 1.5em;
  }
}

@media screen and (max-width: 450px) {
    #share {
        display: inline-block;
    }
}