/* ========================================================================
 * ========================================================================
 * 
 *  Main CSS for Claro Pay - August, 2019
 *  All rights reserved.
 *
 * ======================================================================== 
 * ======================================================================== */


/* ========================================================================
 * Definition: Body basic elements;
 * ======================================================================== */
html{ width:100%; height:100%; padding:0; margin:0; }
body {
  margin: 0;
  width: 100%;
  height: 100%;

  cursor: default;
  
  color: #828282;
  font-size: 14px;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  background-color: #f2f2f2;
}
.content {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}


h1 {
  margin: 15px 0 10px;
  color: #000000;
  font-size: 18px;
  font-weight: 700;
  font-family: Nunito, sans-serif;
}
h3 {
  margin: 10px 10px 5px 20px;
  color: #50626c;
  font-size: 13px;
  font-weight: 700;
  font-family: Roboto, sans-serif;
}
p { margin: 10px 0; }

.margin_null { margin: 0; }


/* ------ Main section header ------ */
.video_header {
  padding: 0 0 10px;
  background-color: #ffffff;

  -webkit-box-shadow: 0px 3px 30px 0px rgba(1,32,36,0.15);
  -moz-box-shadow: 0px 3px 30px 0px rgba(1,32,36,0.15);
  box-shadow: 0px 3px 30px 0px rgba(1,32,36,0.15);
}

.prev_img { position: relative; width: 100%; }
.prev_img:before, .prev_img.video:after {
  position: absolute;
  display: block;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.prev_img:before { background-color: rgba(0,0,0,.6); }
.prev_img.video:after {
  background-image: url(../images/icono_play.png);
  background-position: center;
  background-size: 70px 70px;
  background-repeat: no-repeat;
}
.prev_img img { display: block; width: 100%; }


h1.header, p.header { padding: 0 15px; }
h1.detail { padding: 20px 100px 10px 20px; }
p.detail { padding: 0 20px; line-height: 1.5; }
p.min {
  padding: 0 20px;

  color: #838383;
  font-size: 12px;
  line-height: 1.5;
}


.category_section { margin: 30px 0; }


/* ------ Carousel custom style ------ */
.category_carousel, .detail_carousel {
  position: relative;
  margin: 0 auto;
  margin-top: 10px;
  width: 98%;
  height: 100%;

  overflow: hidden;
}
.category_carousel .swiper-slide,
.detail_carousel .swiper-slide {
  height: auto;

  background-color: #ffffff;
  -webkit-box-shadow: 0px 0px 30px 0px rgba(1,32,36,0.15);
  -moz-box-shadow: 0px 0px 30px 0px rgba(1,32,36,0.15);
  box-shadow: 0px 0px 10px 0px rgba(1,32,36,0.15);

  outline: none;

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;

  align-items: flex-start;
}
.category_carousel .swiper-slide:first-child,
.detail_carousel .swiper-slide:first-child { margin-left: 16px; }
.category_carousel .swiper-slide:last-child,
.detail_carousel .swiper-slide:last-child { margin-right: 10px; }

.category_carousel .swiper-slide a,
.detail_carousel .swiper-slide a { width: 100%; color: #828282; }
.category_carousel .swiper-slide a:hover,
.detail_carousel .swiper-slide a:hover { text-decoration: none; }


/* --- Carousel: Category section --- */
.category_carousel .swiper-slide {
  width: 35%;
  border-radius: 10px 10px 4px 4px;
  -webkit-justify-content: center;
  justify-content: center;
}
.category_carousel .swiper-slide img {
  display: block;
  width: 100%;

  border-radius: 4px 4px 0 0;
}
.category_carousel .swiper-slide p { margin: 6px 10px; line-height: 1.4; }

@media all and (min-width: 800px) {
  .category_carousel .swiper-slide {
    width: 30%;
  }
}


/* --- Carousel: Detail section --- */
.detail_carousel .swiper-slide {
  width: 80%;
  border-radius: 4px;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
}
.detail_carousel .swiper-slide img {
  display: inline-block;
  vertical-align: middle;
  width: 100px;
  height: 100%;
  margin-right: 10px;

  border-radius: 4px 0 0 4px;
}
.detail_carousel .swiper-slide .desc {
  display: inline-block;
  vertical-align: middle;
  width: 60%;
  margin: 8px 0;
}
.detail_carousel .swiper-slide h3 { margin: 0 0 6px; }
.detail_carousel .swiper-slide p { margin: 0px; line-height: 1.4; }


@media all and (min-width: 600px) {
  .detail_carousel .swiper-slide {
    width: 60%;
  }
  .detail_carousel .swiper-slide img { max-height: 120px; }
}
@media all and (min-width: 800px) {
  .detail_carousel .swiper-slide {
    width: 45%;
  }
  .detail_carousel .swiper-slide .desc { width: 70%; }
}
@media all and (max-width: 450px) {
  .detail_carousel .swiper-slide .desc { width: 50%; }
}


/* ------ Main Video Preview ------ */
.preview_video {
  display: none;

  position: absolute;
  width: 100%;
  top: 0;
  left: 0;

  text-align: center;
  background-color: #000000;
  z-index: 1000;
}
.preview_video iframe { margin: 7px auto 2px; width: 96%; height: 200px; }
.preview_video iframe.video { width: 100%; height: auto; min-height: 200px; }

.close_video {
  margin: 10px 10px 10px 0;
  display: inline-block;

  background-color: #000000;
  border: none;
  padding: 5px;
}
.close_video img { display: block; width: 16px; }

@media all and (min-width: 600px) {
  .preview_video iframe { height: 350px; }
}


/* ========================================================================
 * Definition: Frenquetly Asked Questions;
 * ======================================================================== */
.faq_body { padding-top: 20px; }
.faq_body h1 {
  margin-top: 0;
  font-size: 24px;
  line-height: 1.3;
}


/* ------ FAQ options list ------ */
.faq_list {
  margin: 20px 0;
  padding: 0;
  list-style-type: none;
}
.faq_list li { border-bottom: 1px solid rgba(205,205,205,.5); }
.faq_list li a {
  position: relative;
  display: block;
  padding: 15px 30px 15px 15px;

  color: #50626c;
  font-size: 13px;
  font-weight: 700;
  font-family: Roboto, sans-serif;
}
.faq_list li a:hover, .faq_list li a:active { text-decoration: none; }
.faq_list li a:visited { color: #50626c; }

.faq_list li a img {
  display: block;
  position: absolute;
  top: 19px;
  right: 15px;

  width: 7px;
}


/* ------ FAQ section list ------ */
.faq_section { margin: 20px 0 10px; }
.faq_section .faq_list {
  margin: 15px 20px 0;
  background-color: #ffffff;

  -webkit-box-shadow: 0px 0px 30px 0px rgba(1,32,36,0.15);
  -moz-box-shadow: 0px 0px 30px 0px rgba(1,32,36,0.15);
  box-shadow: 0px 0px 30px 0px rgba(1,32,36,0.15);

  border-radius: 5px;
}


/* ------ FAQ question detail ------ */
.faq_rating {
  margin: 15px 20px 0;
  content: "";
  display: inline-block;
  width: 50px;
  height: 50px;

  background-color: transparent;
  
  background-repeat: no-repeat;
  background-size: contain;
  border: none;
  opacity: .3;
}
.faq_rating:focus { outline: none; }
.faq_rating.selected { opacity: 1; }

.faq_rating.good { background-image: url(../images/rate_goodN.png); }
.faq_rating.bad { background-image: url(../images/rate_badN.png); }

.faq_rating.good.selected { background-image: url(../images/rate_goodA.png); }
.faq_rating.bad.selected { background-image: url(../images/rate_badA.png); }

.faq_moreLink { margin: 50px 20px 30px; }


/* ------ Buttons ------ */
.button {
  display: inline-block;
  width: 100%;
  max-width: 300px;
  min-height: 36px;
  padding: 3px 5px;

  font-size: 13px;

  border: 1px solid transparent;
  border-radius: 20px;
}
.button_black {
  color: #ffffff;
  background: rgb(32,32,32);
  background: linear-gradient(180deg, rgba(32,32,32,1) 0%, rgba(14,14,14,1) 100%);
  border-color: #000000;
}
.button_black:hover, .button_black:active { background-color: #000000; }
.button_cancel {
  color: #50626c;
  background-color: transparent;
  border-color: #cdcdcd;
}
.button_cancel:hover, .button_cancel:active { background-color: #cdcdcd; }


/* ========================================================================
 * Definition: Custom modal style;
 * ======================================================================== */
.modal-dialog { margin: 160px 1.25rem 40px; }
@media (min-width: 576px) {
  .modal-dialog {
      max-width: 500px;
      margin: 160px auto 40px;
  }
}
.modal-content { border: none; border-radius: 5px; }

.modal-footer { padding: 20px; border: none; justify-content: center; }
.modal-footer .button { max-width: 120px; margin: 0 15px; }

@media (max-width: 330px) {
  .modal-footer .button { margin: 0 5px; }
}
/* ========================================================================
 * Definition: Menu Icon for FAQ;
 * ======================================================================== */
i.menu-icon{
  width: 16px;
  height: 16px;
  display: inline-block;
  vertical-align: middle;
  background-image: url(../images/menuicon.png);
  background-repeat: no-repeat;
  background-size: cover;
}
ul li{
  font-size: 12px;
  padding-right: 30px;
}
ol li{
  font-size: 12px;
  padding-right: 30px;
}
@media (max-width: 576px) {
  h1.detail {
    padding: 20px 10px 10px 20px;
  }
}

#btninfo {
	background-color: black;
	color: white; 
	display: flex; 
	align-items: center;
	text-align: center;
	vertical-align: middle;
	display: flex;
	justify-content: center;
	text-decoration: none;
	user-select: none;
}