@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: local('Roboto'), local('Roboto-Regular') format('ttf');
}

@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 400;
    src: local('Roboto Italic'), local('Roboto-Italic') format('ttf');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    src: local('Roboto Medium'), local('Roboto-Medium') format('ttf');
}

@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 500;
    src: local('Roboto Medium Italic'), local('Roboto-MediumItalic') format('ttf');
}

@font-face {
    font-family: 'Roboto';
    font-style: bold;
    font-weight: 700;
    src: local('Roboto Bold'), local('Roboto-Bold') format('ttf');
}


@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 700;
    src: local('Roboto Bold Italic'), local('Roboto-BoldItalic') format('ttf');
}


@font-face {
    font-family: 'Roboto';
    font-style: oblique;
    font-weight: 900;
    src: local('Roboto Black'), local('Roboto-Black') format('ttf');
}


@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 900;
    src: local('Roboto Black Italic'), local('Roboto-BlackItalic') format('ttf');
}




.carousel-indicators li {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin: 0px;
    text-indent: 0;
    cursor: pointer;
    border: none;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: inset 1px 1px 1px 1px rgba(0,0,0,0.5);    
}


.carousel-indicators .active {
    width: 12px;
    height:12px;
    margin: 0px;
    background-color: #000;
}


@keyframes latidos {
    from { transform: none; }
    50% { transform: scale(1.15); }
    to { transform: none; }
}

.corazon {

  animation: latidos 1.2s infinite;
  transform-origin: center;
}


@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    src: local('Lato'), local('Lato-Regular') format('ttf');
}

@font-face {
    font-family: 'Lato';
    font-style: italic;
    font-weight: 400;
    src: local('Lato Italic'), local('Lato-Italic') format('ttf');
}

@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 500;
    src: local('Lato Medium'), local('Lato-Medium') format('ttf');
}

@font-face {
    font-family: 'Lato';
    font-style: italic;
    font-weight: 500;
    src: local('Lato Medium Italic'), local('Lato-MediumItalic') format('ttf');
}

@font-face {
    font-family: 'Lato';
    font-style: bold;
    font-weight: 700;
    src: local('Lato Bold'), local('Lato-Bold') format('ttf');
}


@font-face {
    font-family: 'Lato';
    font-style: italic;
    font-weight: 700;
    src: local('Lato Bold Italic'), local('Lato-BoldItalic') format('ttf');
}


@font-face {
    font-family: 'Lato';
    font-style: oblique;
    font-weight: 900;
    src: local('Lato Black'), local('Lato-Black') format('ttf');
}


@font-face {
    font-family: 'Lato';
    font-style: italic;
    font-weight: 900;
    src: local('Lato Black Italic'), local('Lato-BlackItalic') format('ttf');
}


@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    src: local('Lato'), local('Lato-Regular') format('ttf');
}

@font-face {
    font-family: 'Lato';
    font-style: italic;
    font-weight: 400;
    src: local('Lato Italic'), local('Lato-Italic') format('ttf');
}

@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 500;
    src: local('Lato Medium'), local('Lato-Medium') format('ttf');
}

@font-face {
    font-family: 'Lato';
    font-style: italic;
    font-weight: 500;
    src: local('Lato Medium Italic'), local('Lato-MediumItalic') format('ttf');
}

@font-face {
    font-family: 'Lato';
    font-style: bold;
    font-weight: 700;
    src: local('Lato Bold'), local('Lato-Bold') format('ttf');
}


@font-face {
    font-family: 'Lato';
    font-style: italic;
    font-weight: 700;
    src: local('Lato Bold Italic'), local('Lato-BoldItalic') format('ttf');
}


@font-face {
    font-family: 'Lato';
    font-style: oblique;
    font-weight: 900;
    src: local('Lato Black'), local('Lato-Black') format('ttf');
}


@font-face {
    font-family: 'Lato';
    font-style: italic;
    font-weight: 900;
    src: local('Lato Black Italic'), local('Lato-BlackItalic') format('ttf');
}


.product{
 background-color: #d6e6f1;
 height: 100vh;
}
.product .main-img img{
    max-width: 500px;
    margin:auto;
    display: block;
}
.product .thumb-img {
    text-align: center;

}
.product .thumb-img .box{
    display: inline-block;
    height: 50px;
    width:50px;
    border:2px solid #8ea1af;
    margin:2px;
    cursor: pointer;
}
.product .thumb-img .box.active{
    border-color:#545454;
    
}
.product .thumb-img .box img{
      max-width: 100%;
      max-height: 100%;
}