/*
Theme Name: TheGem Child
Description: Multi-Purpose Wordpress Theme
Author: Codex Themes.
Theme URI: http://codex-themes.com/thegem/
Author URI: http://codex-themes.com/thegem/
Template: thegem
Version: 1.0
Tags: one-column, two-columns, left-sidebar, right-sidebar, responsive-layout, custom-background, custom-colors, custom-header, custom-menu, featured-images, flexible-header, full-width-template, theme-options, translation-ready, dark, light
License: GNU General Public License
License URI: license.txt
*/

/*Général*/
#page {
    background: white !important;
    overflow: inherit;
}
/*HEADER*/

.of-header {
    border-bottom: none !important;
    text-align: center;
}
.of-header .of-identite{
    text-align: center;
    margin: 0 auto;
}


#site-header {
    border-bottom: 5px solid #E2001A;
    -webkit-box-shadow: inset 0 20px 20px -20px rgba(182, 182, 182, 0.75) !important;
    -moz-box-shadow: inset 0 20px 20px -20px rgba(182, 182, 182, 0.75) !important;
    box-shadow: inset 0 20px 20px -20px rgba(182, 182, 182, 0.75) !important;
}
#site-header .site-title {
    padding: auto;
}
.header-style-3 #primary-menu.no-responsive > li{
    padding: 20px 3px;
}

#pre-header {
    text-align: center;
}
#pre-header .container {
    padding-top: 20px;
    padding-bottom: 20px;
}

#pre-header p, #pre-header img, #pre-header a {
    display: table-cell;
    vertical-align: middle;
}

#pre-header p {
    font-size: 12px;
    font-family: arial;
}

#pre-header .tw-logo {
    height: 18px;
}
#ban-of {
    float: left;
    display: inline-block;
    padding-top: 5px;
}
#ban-of .of-logo {
    fill: #e2001a;
    height: 18px;
    margin-top: 3px;
}
#tw_agreelogo{
    float: right;
}
#tw_agreelogo img {
    height: 35px;
}
/*Barre de recherche du header*/
#pre-header .vertical-minisearch {
    display: inline-block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);

}
#pre-header input#searchform-submit {
    display: none;
}
#pre-header #searchform-input {
    background: #f5f5f5;
    border-radius: 20px;
    padding: 5px 10px;
    width: 400px;
}

#primary-menu.no-responsive > li.megamenu-enable.megamenu-style-default > ul > li span.megamenu-column-header {
    margin-bottom: 0 !important;
}
@media (min-width: 1024px) {
    li.menu-item.menu-item-search {
        display: none !important;
    }

}
@media (max-width: 1023px) {
    #pre-header #searchform-input {
        display: none !important;
    }
    #ban-of {
        float: inherit;
        width: 100%;
    }
    #ban-of:first-child {
        margin-top : 5px;
    }
    #pre-header .container {
        padding-top: 10px;
        padding-bottom: 5px;
    }
}

/*FOOTER*/
.footer-title {
    font-size: 1.4rem;
    color: #878787;
    text-transform: uppercase;
}

.footer-list {
    font-family: Arial,Helvetica,sans-serif;
    font-size: 1.2rem;
    list-style-type: none;
}

.footer-list a {
    color: #fff;
}

.appellation-block {
    box-shadow: inset 0 -90px 50px -50px black;
}

.shortcode-x-offerts {
    border: 1px solid lightgray;
    border-radius: 5px;
    display: flex;
    padding: 20px;
}

.shortcode-x-offers-block {
    width: 50%;
    padding: 3px;
    display: block;
}

.shortcode-x-offers-block div {
    margin-top: 10px;
}

.shortcode-x-offers-form {
    width: 50%;
    padding: 3px;
    display: grid;
}

.shortcode-x-offerts img {
    width: 150px;
    height: 75px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.bouteilles {
    margin-right: 275px;
}

.bouteilles img {
    width: 250px;
    height: 200px;
    position: absolute;
    float: left;
    bottom: -11px;
}

.shortcode-x-offerts input {
    text-align: left;
    border: none !important;
    padding: 0px;
    width: auto;
    height: auto;
}

.shortcode-x-offerts button {
    text-align: center;
    color: white;
    background: #E2001A;
    border-color: #E2001A;
    border-style: none;
    padding: 5px 12px;
    border-radius: 5px;
    height: 40px;
    width: max-content;
}

.submit-newsletter-partner {
    display: flex;
    flex-direction: row;
    border: 1px solid lightgrey;
    border-radius: 5px;
    margin-left: auto;
    margin-right: auto;
    padding: 5px;
    height: fit-content;
}

.submit-newsletter-partner input {
    background-color: white;
}

.shortcode-x-offerts button:hover {
    background: #B40015;
    color: white;
}

.shortcode-x-offerts .title {
    color: #E2001A;
}

.best_wines_on_twil {
    height: 150px;
    border-radius: 5px;
    text-align: center;
    padding: 20px;
    color: white;
    background-size: cover;
    width: 300px;
    margin-right: auto;
}

.best_wines_on_twil a {
    background: #E2001A;
    padding: 10px;
    border-radius: 5px;
    color: white;
}

.best_wines_on_twil a:hover {
    background: #B40015;
    color: white;
}

.best_offers {
    border: 1px solid lightgrey;
    border-radius: 5px;
    width: 300px;
    margin-right: auto;
    padding: 10px;
    padding-bottom: 20px;
}

.best_offers_horizontal {
    border-radius: 5px;
    padding: 10px;
}

.best_offers_wines {
    display:flex;
}

.best_offers_title {
    font-size: 17px;
    color: black;
    font-weight: bold;
    margin: 0px;
    line-height: 17px;
    font-family: Arial;
}

.best_offers_wine {
    display: flex;
    margin: 10px 0px;
    width: 275px;
    text-align: left;
}

.best_offers img {
    float: left;
}

.best_offers_infos {
    float: left;
    padding-left: 10px;
    margin-top: auto;
    margin-bottom: auto;
}

.best_offers_infos h3 {
    font-size: 16px;
    line-height: 22px;
    font-weight: normal;
    font-family: Arial;
    margin: 0px;
}

.best_offers_infos a {
    color: black;
    font-size: 14px;
    text-decoration: underline;
}

.best_offers_current_price {
    color: black;
    display: flex;
    font-size: 14px;
}

.best_offers_price {
    color: black;
    position: relative;
    font-size: 12px;
    margin-left: 5px;
    text-decoration: line-through;
}

.voir_plus {
    color: #e2001a;
    border: 1px solid #e2001a;
    padding: 5px 30px;
    border-radius: 25px;
    height: fit-content;
    margin: auto;
}

.voir_plus:hover {
    background-color: #E2001A;
    color: white;
}

.subtitle {
    color: grey;
    font-size: 12px;
}

.best_offers_note {
    color: grey;
    font-size: 14px;
    margin-bottom: 5px;
}

.best_offers_img {
    width: 80px;
    min-width: 80px;
    height: 220px;
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: center center;
    border-radius: 5px;
}

.button_link,.button_link_container a{
    color: #e2001a;
    border: 1px solid #e2001a;
    padding: 10px;
    border-radius: 25px;
}

.button_link:hover {
    background-color: #E2001A;
    color: white;
}

.text-center{
    text-align:center;
}
.round-link-container{
    margin:5px 0;
}
.post-tags-list a , .round-link-container a{
    color: #333;
    border: 1px solid  #e2001a;
    padding: 5px;
    border-radius: 5px;
    margin-right:5px;
    margin-bottom:7px;
    display: inline-block;
}

.post-tags-list a:hover , .round-link-container a:hover{
    color:#B40015;
    border: 1px solid  #B40015;
    padding:5px;
    border-radius:5px;
    margin-right:5px;
    margin-bottom:7px;
}

.breadcrumbs .bc-devider:before{
    content:'\e617';
    font-size:10px;
}

.breadcrumbs {
    font-size: 15px;
    margin-top: 10px;
}

.container .breadcrumbs .current {
    border-bottom: none;
}

.magazine_author {
    display: flex;
    align-items: center;
    color: black;
    font-size: 12px;
}

.magazine_author img {
    height: 40px;
    width: 40px !important;
    border-radius: 25px;
    margin-right: 10px;
}

.magazine_title h3 {
    font-family: Arial;
    font-size: 19px;
    line-height: 20px;
    margin: 0px;
    color: black;
}

.magazine_text {
    font-family: Arial;
    font-size: 16px;
    color: gray;
}

.magazine_tag {
    color: white;
    background-color: #e2001a;
    border-radius: 25px;
    padding: 0px 9px;
    position: absolute;
    bottom: -12px;
    font-size: 14px;
}

.bloc_appellation_title h3 {
    font-family: Arial;
    font-size: 20px;
    color: white;
    margin-bottom: 0px;
    line-height: 25px;
}

.overflow {
    overflow: inherit !important;
}

.archive_custom_title {
    margin-top: 20px !important;
}

.archive_custom {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 40px;
    font-family: Arial;
    color: black;
}

.archive_posts {
    display: flex;
}

.archive_posts img {
    border-radius: 5px;
}

.archive_post_text {
    padding-left: 30px;
}

.archive_post_text h2 {
    margin: 0px;
    margin-bottom: 5px;
    font-family: Arial;
    font-size: 22px;
    line-height: 25px;
}

.archive_posts .round-link-container a {
    display: inline-block;
}

.archive_separator {
    border: 2px solid lightgray;
    border-radius: 6px;
    margin: 20px 0px 40px 0px;
}

.archive_custom nav {
    text-align: center;
}

.author_bio_section {
    padding: 15px;
    border: 1px solid lightgrey;
    border-radius: 5px;
    font-family: Arial;
}

.author_name{
    font-size:16px;
    font-weight: bold;
}

.author_details img {
    border-radius: 50%;
    float: left;
    margin: 0 10px 10px 0;
}

.newsletter-partner-msg {
    text-align: center;
}

.block-text h2 {
    margin-bottom: auto;
}

.border-round {
    border-radius: 5px;
}

.block_list_appellation {
    display: flex;
    text-align: left;
}

.block_list_appellation ul {
    list-style: none;
    width: 30%;
}

.block_list_appellation a {
    color: #878787;
}

.button_list_appellation {
    color: #e2001a;
    border: 1px solid #e2001a;
    padding: 10px 30px;
    border-radius: 25px;
    width: fit-content;
    margin: auto;
}

.button_list_appellation:hover {
    background-color: #E2001A;
    color: white;
}

.no-height {
    height: auto !important;
}

/** Animation chargement des commentaires **/
.loader-comment {
    border: 6px solid #f3f3f3;
    border-radius: 50%;
    border-top: 6px solid #E2001A;
    width: 35px;
    height: 35px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/** end **/


/**********
Rate it
*********/
.rateit {
    display: -moz-inline-box;
    display: inline-block;
    position: relative;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.rateit .rateit-range {
    position: relative;
    display: -moz-inline-box;
    display: inline-block;
    height: 16px;
    outline: none;
}

.rateit .rateit-range * {
    display: block;
}

/* for IE 6 */
* html .rateit, * html .rateit .rateit-range {
    display: inline;
}

/* for IE 7 */
* + html .rateit, * + html .rateit .rateit-range {
    display: inline;
}

.rateit .rateit-hover, .rateit .rateit-selected {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
}

.rateit .rateit-hover-rtl, .rateit .rateit-selected-rtl {
    left: auto;
    right: 0;
}

.rateit .rateit-hover {
    color: rgb(239, 197, 41);
}

.rateit .rateit-hover-rtl {
    background-position: right -32px;
}

.rateit .rateit-selected {
    color: rgb(191,66,66);
}

.rateit .rateit-selected-rtl {
    background-position: right -16px;
}

.rateit .rateit-preset {
    color: rgb(239, 107, 34);
}

.rateit button.rateit-reset {
    width: 16px;
    height: 16px;
    display: -moz-inline-box;
    display: inline-block;
    float: left;
    outline: none;
    border: none;
    padding: 0;
}

.rateit .rateit-reset span {
    display: none;
}

.rateit button.rateit-reset:hover, .rateit button.rateit-reset:focus {
    background-position: 0 -16px;
}


.rateit-font {
    font-size: 24px;
    line-height: 1em;
}

.rateit-font .rateit-range {
    background: none;
    height: auto;
}

.rateit-font .rateit-empty {
    color: #ccc;
}

.rateit-font .rateit-range > div {
    background: none;
    overflow: hidden;
    cursor: default;
}

.rateit.rateit-font .rateit-reset {
    font-size: inherit;
    background: none;
    width: 0.6em;
    height: 0.6em;
    margin-top: 0.2em;
    background: gray;
    border-radius: 50%;
    position: relative;
}

.rateit.rateit-font .rateit-reset span {
    display: block;
    font-weight: bold;
    color: white;
    height: calc(50% - 0.045em);
    top: 0;
    position: absolute;
    border-bottom: 0.09em solid white;
    width: 72%;
    margin-left: 14%;
}


.rateit.rateit-font .rateit-reset:hover, .rateit.rateit-font button.rateit-reset:focus {
    background: #a71640; /* Old browsers */
    background: radial-gradient(ellipse at center, #a71640 55%,#f6836b 77%,#a71640 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    background-position: 0 0;
}

div.bigstars div.rateit-range
{
    background: url(img/stars/etoile-grise-claire.svg);
}

div.bigstars div.rateit-hover
{
    background: url(img/stars/etoile-jaune.svg);
}

div.bigstars div.rateit-selected
{
    background: url(img/stars/etoile-jaune.svg);
}

div.bigstars div.rateit-reset
{
    background: url(img/stars/star-gold32.png);
    width: 28px;
    height: 28px;
}

div.bigstars div.rateit-reset:hover
{
    background: url(img/stars/etoile-grise.svg);
}

.rate-info {
    color: #1f384e;
    margin: 2px 0 0 5px;

}

.rate-info div {
    text-align: center;
}
/****
End rateit
****/

/* UI */
.pad-l-15{
    padding-left: 15px;
}

.dis-none {
    display: none;
}

@media (max-width: 1023px) {
    .dis-none-md-sm-xs {
        display: none;
    }
    .fl-right-md-sm-xs {
        float: right;
    }
    .fl-left-md-sm-xs {
        float: left;
    }
    .ban-of {
        width: 100%;
    }


}

@media (max-width: 767px) {
    .bouteilles {
        display: none;
    }

    .shortcode-x-offerts {
        display: block;
        padding: 0px;
    }

    .shortcode-x-offers-block {
        width: auto;
    }

    .shortcode-x-offerts input {
        width: 150px;
    }

    .best_offers_wines {
        display: block;
        text-align: center;
    }

    .best_offers {
        width: auto;
    }

    .title-img-xs {
        background-position: center right;
    }

    .visible-xs {
        display: block !important;
    }

    .hidden-xs {
        display: none;
    }

    .archive_post_text {
        margin-top: 20px;
    }

    .archive_posts {
        flex-wrap: wrap;
    }
}

.visible-xs {
    display: none;
}

/* SOMMAIRE  */
#shortcode_index_titles ul{
    list-style: none;
    padding: 0;
}
#shortcode_index_titles ul li {
    cursor: pointer;
}
#shortcode_index_titles ul li:hover {
    text-decoration: underline;
}

/*FONTS*/
@font-face {
    font-family: 'thegem-icons';
    src:url('/wp-content/themes/thegem/fonts/thegem-icons.eot');
    src:url('/wp-content/themes/thegem/fonts/thegem-icons.eot?#iefix') format('embedded-opentype'),
    url('/wp-content/themes/thegem/fonts/thegem-icons.woff') format('woff'),
    url('/wp-content/themes/thegem/fonts/thegem-icons.ttf') format('truetype'),
    url('/wp-content/themes/thegem/fonts/thegem-icons.svg#thegem-icons') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'thegem-socials';
    src:url('/wp-content/themes/thegem/fonts/thegem-socials.eot');
    src:url('/wp-content/themes/thegem/fonts/thegem-socials.eot?#iefix') format('embedded-opentype'),
    url('/wp-content/themes/thegem/fonts/thegem-socials.ttf') format('truetype'),
    url('/wp-content/themes/thegem/fonts/thegem-socials.woff') format('woff'),
    url('/wp-content/themes/thegem/fonts/thegem-socials.svg#thegem-socials') format('svg');
    font-weight: normal;
    font-style: normal;
}


#pub_banniere_haute, #pub_banniere_basse {
    margin:10px auto;
    text-align: center;
}

#pub_pave_article{
    float: left;
    margin-right: 15px;
    margin-bottom: 10px;
}

.amp-button {
    background-color: #222;
    border: none;
}

/* Magnific Popup CSS */
.mfp-bg {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1042;
    overflow: hidden;
    position: fixed;
    background: #0b0b0b;
    opacity: 0.8; }

.mfp-wrap {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1043;
    position: fixed;
    outline: none !important;
    -webkit-backface-visibility: hidden; }

.mfp-container {
    text-align: center;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    padding: 0 8px;
    box-sizing: border-box; }

.mfp-container:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle; }

.mfp-align-top .mfp-container:before {
    display: none; }

.mfp-content {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin: 0 auto;
    text-align: left;
    z-index: 1045; }

.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
    width: 100%;
    cursor: auto; }

.mfp-ajax-cur {
    cursor: progress; }

.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
    cursor: -moz-zoom-out;
    cursor: -webkit-zoom-out;
    cursor: zoom-out; }

.mfp-zoom {
    cursor: pointer;
    cursor: -webkit-zoom-in;
    cursor: -moz-zoom-in;
    cursor: zoom-in; }

.mfp-auto-cursor .mfp-content {
    cursor: auto; }

.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none; }

.mfp-loading.mfp-figure {
    display: none; }

.mfp-hide {
    display: none !important; }

.mfp-preloader {
    color: #CCC;
    position: absolute;
    top: 50%;
    width: auto;
    text-align: center;
    margin-top: -0.8em;
    left: 8px;
    right: 8px;
    z-index: 1044; }
.mfp-preloader a {
    color: #CCC; }
.mfp-preloader a:hover {
    color: #FFF; }

.mfp-s-ready .mfp-preloader {
    display: none; }

.mfp-s-error .mfp-content {
    display: none; }

button.mfp-close,
button.mfp-arrow {
    overflow: visible;
    cursor: pointer;
    background: transparent;
    border: 0;
    -webkit-appearance: none;
    display: block;
    outline: none;
    padding: 0;
    z-index: 1046;
    box-shadow: none;
    touch-action: manipulation; }

button::-moz-focus-inner {
    padding: 0;
    border: 0; }

.mfp-close {
    width: 44px;
    height: 44px;
    line-height: 44px;
    position: absolute;
    right: 0;
    top: 0;
    text-decoration: none;
    text-align: center;
    opacity: 0.65;
    padding: 0 0 18px 10px;
    color: #FFF;
    font-style: normal;
    font-size: 28px;
    font-family: Arial, Baskerville, monospace; }
.mfp-close:hover,
.mfp-close:focus {
    opacity: 1; }
.mfp-close:active {
    top: 1px; }

.mfp-close-btn-in .mfp-close {
    color: #333; }

.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
    color: #FFF;
    right: -6px;
    text-align: right;
    padding-right: 6px;
    width: 100%; }

.mfp-counter {
    position: absolute;
    top: 0;
    right: 0;
    color: #CCC;
    font-size: 12px;
    line-height: 18px;
    white-space: nowrap; }

.mfp-arrow {
    position: absolute;
    opacity: 0.65;
    margin: 0;
    top: 50%;
    margin-top: -55px;
    padding: 0;
    width: 90px;
    height: 110px;
    -webkit-tap-highlight-color: transparent; }
.mfp-arrow:active {
    margin-top: -54px; }
.mfp-arrow:hover,
.mfp-arrow:focus {
    opacity: 1; }
.mfp-arrow:before,
.mfp-arrow:after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    left: 0;
    top: 0;
    margin-top: 35px;
    margin-left: 35px;
    border: medium inset transparent; }
.mfp-arrow:after {
    border-top-width: 13px;
    border-bottom-width: 13px;
    top: 8px; }
.mfp-arrow:before {
    border-top-width: 21px;
    border-bottom-width: 21px;
    opacity: 0.7; }

.mfp-arrow-left {
    left: 0; }
.mfp-arrow-left:after {
    border-right: 17px solid #FFF;
    margin-left: 31px; }
.mfp-arrow-left:before {
    margin-left: 25px;
    border-right: 27px solid #3F3F3F; }

.mfp-arrow-right {
    right: 0; }
.mfp-arrow-right:after {
    border-left: 17px solid #FFF;
    margin-left: 39px; }
.mfp-arrow-right:before {
    border-left: 27px solid #3F3F3F; }

.mfp-iframe-holder {
    padding-top: 40px;
    padding-bottom: 40px; }
.mfp-iframe-holder .mfp-content {
    line-height: 0;
    width: 100%;
    max-width: 900px; }
.mfp-iframe-holder .mfp-close {
    top: -40px; }

.mfp-iframe-scaler {
    width: 100%;
    height: 0;
    overflow: hidden;
    padding-top: 56.25%; }
.mfp-iframe-scaler iframe {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    background: #000; }

/* Main image in popup */
img.mfp-img {
    width: auto;
    max-width: 100%;
    height: auto;
    display: block;
    line-height: 0;
    box-sizing: border-box;
    padding: 40px 0 40px;
    margin: 0 auto; }

/* The shadow behind the image */
.mfp-figure {
    line-height: 0; }
.mfp-figure:after {
    content: '';
    position: absolute;
    left: 0;
    top: 40px;
    bottom: 40px;
    display: block;
    right: 0;
    width: auto;
    height: auto;
    z-index: -1;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    background: #444; }
.mfp-figure small {
    color: #BDBDBD;
    display: block;
    font-size: 12px;
    line-height: 14px; }
.mfp-figure figure {
    margin: 0; }

.mfp-bottom-bar {
    margin-top: -36px;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    cursor: auto; }

.mfp-title {
    text-align: left;
    line-height: 18px;
    color: #F3F3F3;
    word-wrap: break-word;
    padding-right: 36px; }

.mfp-image-holder .mfp-content {
    max-width: 100%; }

.mfp-gallery .mfp-image-holder .mfp-figure {
    cursor: pointer; }

@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
    /**
         * Remove all paddings around the image on small screen
         */
    .mfp-img-mobile .mfp-image-holder {
        padding-left: 0;
        padding-right: 0; }
    .mfp-img-mobile img.mfp-img {
        padding: 0; }
    .mfp-img-mobile .mfp-figure:after {
        top: 0;
        bottom: 0; }
    .mfp-img-mobile .mfp-figure small {
        display: inline;
        margin-left: 5px; }
    .mfp-img-mobile .mfp-bottom-bar {
        background: rgba(0, 0, 0, 0.6);
        bottom: 0;
        margin: 0;
        top: auto;
        padding: 3px 5px;
        position: fixed;
        box-sizing: border-box; }
    .mfp-img-mobile .mfp-bottom-bar:empty {
        padding: 0; }
    .mfp-img-mobile .mfp-counter {
        right: 5px;
        top: 3px; }
    .mfp-img-mobile .mfp-close {
        top: 0;
        right: 0;
        width: 35px;
        height: 35px;
        line-height: 35px;
        background: rgba(0, 0, 0, 0.6);
        position: fixed;
        text-align: center;
        padding: 0; } }

@media all and (max-width: 900px) {
    .mfp-arrow {
        -webkit-transform: scale(0.75);
        transform: scale(0.75); }
    .mfp-arrow-left {
        -webkit-transform-origin: 0;
        transform-origin: 0; }
    .mfp-arrow-right {
        -webkit-transform-origin: 100%;
        transform-origin: 100%; }
    .mfp-container {
        padding-left: 6px;
        padding-right: 6px; } }


.zoom {
    transition: transform .2s; /* Animation */
}

.zoom:hover {
    transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

.button-zoom {
    position: absolute;
    right: 35px;
    top: -130px;
    font-size: 30px;
    border: 1px solid black;
    border-radius: 50%;
    color: black;
    padding: 3px 6px;
}

/**** END POPUP ****/