@import url('https://fonts.googleapis.com/css?family=Ubuntu:400,700');

/* GENERAL */

:root{
  --pink: #ec268f;
  --pink2: #d9267a;
}

* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html,
body {
  height: 100%;
  font-family: 'Ubuntu', sans-serif;
  font-weight: 400;
}

h1,h2,h3{
  font-weight: 700;
}

a{
  color: #ec268f;
}

a:hover{
  color: #d9267a;
  text-decoration: none;
}

.text-pink{
  color: #d9267a;
}

.bg-pink{
  background-color: #d9267a;
}

.btn:focus{
  box-shadow: 0 0 0 0.2rem #ec268f!important;
}

.btn-primary{
  background-color: #ec268f;
  border-color: #ec268f;
}

.btn-primary:hover, .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle{
  background-color: #d9267a;
  border-color: #d9267a;
}

.dropdown-item.active, .dropdown-item:active{
  background-color: #ec268f;
}

.dropdown-item:focus{
  outline-color: #ec268f;
}

.form-control:focus {
  border-color: #ec268f;
  box-shadow: none!important;
}

.custom-file-input ~ .custom-file-label::after {
  content: "Buscar";
}

.custom-file-control.selected::after {
  content: "" !important;
}

.custom-file-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* portada */

#portada {
  height: 75vh;
  display: flex;
  padding: 0;
}

#ploton, #ppg {
  flex: 1;
  padding: 1rem;
  position: relative;
  overflow: hidden;
}

.bg{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #eee;
  transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -webkit-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  z-index: -1;
}

#ploton .logo{
  width: 40%;
  height: 100%;
  margin: 0 auto;
  background-image: url("../images/ploton.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  transition: all .5s ease-out;
  -moz-transition: all .5s ease-out;
  -webkit-transition: all .5s ease-out;
  -o-transition: all .5s ease-out;
}

#ppg .logo{
  width: 30%;
  height: 100%;
  margin: 0 auto;
  background-image: url("../images/ppg.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  transition: all .5s ease-out;
  -moz-transition: all .5s ease-out;
  -webkit-transition: all .5s ease-out;
  -o-transition: all .5s ease-out;
}

.enlace {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 888;
  top: 0;
  left: 0;
}

#ploton:hover .bg {
  background-color: #ec268f;
  transition: all .5s ease-out;
  -moz-transition: all .5s ease-out;
  -webkit-transition: all .5s ease-out;
  -o-transition: all .5s ease-out;
}

#ploton:hover .logo {
  transition: all .2s ease-out;
  -moz-transition: all .2s ease-out;
  -webkit-transition: all .2s ease-out;
  -o-transition: all .2s ease-out;
  transform: scale(1.2) rotate(-1deg);
  -moz-transform:scale(1.2) rotate(-1deg);
  -webkit-transform:scale(1.2) rotate(-1deg);
  -o-transform:scale(1.2) rotate(-1deg);
  -ms-transform:scale(1.2) rotate(-1deg);
}

#ppg:hover .bg {
  background-color: #ec268f;
  transition: all .5s ease-out;
  -moz-transition: all .5s ease-out;
  -webkit-transition: all .5s ease-out;
  -o-transition: all .5s ease-out;
}

#ppg:hover .logo {
  transition: all .2s ease-out;
  -moz-transition: all .2s ease-out;
  -webkit-transition: all .2s ease-out;
  -o-transition: all .2s ease-out;
  transform: scale(1.2) rotate(1deg);
  -moz-transform: scale(1.2) rotate(1deg);
  -webkit-transform: scale(1.2) rotate(1deg);
  -o-transform: scale(1.2) rotate(1deg);
  -ms-transform: scale(1.2) rotate(1deg);
}

.boton {
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  z-index: 1;
}

.boton i{
  transition: all .2s ease-out;
  -moz-transition: all .2s ease-out;
  -webkit-transition: all .2s ease-out;
  -o-transition: all .2s ease-out;
  transform: translate(100%, 100%) scale(1);
  -moz-transform:translate(100%, 100%) scale(1);
  -webkit-transform:translate(100%, 100%) scale(1);
  -o-transform:translate(100%, 100%) scale(1);
  -ms-transform:translate(100%, 100%) scale(1);
  opacity: 1;
}

#ploton:hover .boton i, #ppg:hover .boton i {
  transition: all .2s ease-out;
  -moz-transition : all .2s ease-out;
  -webkit-transition : all .2s ease-out;
  -o-transition : all .2s ease-out;

  transform: translate(250%, 100%) scale(1);
  -moz-transform:translate(250%, 100%) scale(1);
  -webkit-transform:translate(250%, 100%) scale(1);
  -o-transform:translate(250%, 100%) scale(1);
  -ms-transform:translate(250%, 100%) scale(1);
  opacity: 1;
}

#ploton:hover .boton,#ppg:hover .boton {
  color: #fff;
}

@media (max-width: 768px){
  #portada {
    flex-direction: column;
  }
}

/* head */

.head-bar {
  background: #ec268f;
  font-size: .8rem;
}

.head-bar a {
  color: #f8f9fa;
}

.head-bar a:hover {
  color: #fff;
  text-decoration: none;
}

.navbar-brand img{
  max-height: 70px;
  max-width: 70vw;
}

.nav-item {
  text-align: center;
}

header a{
  color: #fff;
}

/* footer */

/* utils */

section {
  min-height: 50vh;
}

.placeholder {
  width: 100%;
	height: 0;
	padding-bottom: 100%;
	display: flex;
	position: relative;
	background-size: cover;
	background-position: center center;
  background-repeat: no-repeat;
  align-content: center;
}

.placeholder-50 {
  width: 100%;
	height: 0;
	padding-bottom: 50%;
	display: flex;
	position: relative;
	background-size: cover;
	background-position: center center;
  background-repeat: no-repeat;
  align-content: center;
}

.page-item.active .page-link {
  background-color: #ec268f;
  color: #343a40;
  border: none;
}

/* zoom */

.zoom-overlay {
  z-index: 1031;
  background-color: rgba(0,0,0,.75)
}

.zoom-img, .zoom-img-wrap {
  z-index: 1032;
}

.zoom-img, .zoom-img-wrap img {
  max-width: 1000px!important;
}

select{
  text-transform: capitalize;
}

.categoria .titulo {
  bottom: 10%;
  left: 0;
  right: 0;
}

.categoria .overlay {
  top:0;
  left:0;
  opacity:0;
  transition: all cubic-bezier(0.075, 0.82, 0.165, 1) .5s;
  -moz-transition: all cubic-bezier(0.075, 0.82, 0.165, 1) .5s;
  -webkit-transition: all cubic-bezier(0.075, 0.82, 0.165, 1) .5s;
  -o-transition: all cubic-bezier(0.075, 0.82, 0.165, 1) .5s;
}

.categoria:hover .overlay {
  opacity: .75;
  transition:all cubic-bezier(0.075, 0.82, 0.165, 1) .5s;
  -moz-transition: all cubic-bezier(0.075, 0.82, 0.165, 1) .5s;
  -webkit-transition: all cubic-bezier(0.075, 0.82, 0.165, 1) .5s;
  -o-transition: all cubic-bezier(0.075, 0.82, 0.165, 1) .5s;
}

.swiper-pagination {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, -40px, 0);
}

.swiper-pagination-bullet {
  width: 15px;
  height: 15px;
  border-radius: 0;
  background: #fff;
  opacity: 0.6;
  margin: 0 .35rem;
}

.swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: #ec268f;
  opacity: 1;
}

.swiper-pagination-bullets-dynamic {
  width: auto!important;
  margin: 0 auto;
}

.swiper-button-next {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23fff'%2F%3E%3C%2Fsvg%3E")
}

.swiper-button-prev {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23fff'%2F%3E%3C%2Fsvg%3E")
}
/* queries */

@media (max-width:768px){
  footer{
    font-size: .75rem;
  }
  footer h5{
    font-size: 1rem;
  }
}

@media (min-width:576px) {
  .card-columns {
    column-count: 2;
    -webkit-column-count: 2;
    -moz-column-count: 2;
  }
}


@media (min-width:768px) {
  .card-columns {
    column-count: 2;
    -webkit-column-count: 2;
    -moz-column-count: 2;
  }
}

@media (min-width:992px) {
  .card-columns {
    column-count: 3;
    -webkit-column-count: 3;
    -moz-column-count: 3;
  }
}