/* NOTE: contaner with main image and selector's container */ div.MagicToolboxContainer { text-align: center; } /* div.MagicToolboxContainer.minWidth { min-width: 250px; } */ .Magic360, .Magic360-container { border:none !important; } /* NOTE: main image styles */ div.MagicToolboxContainer > a { margin: 0 auto; } /* NOTE: contaner with message under Magic 360 */ div.MagicToolboxMessage { text-align: center; } /* NOTE: magicscroll makes the image smaller if there is a margin */ /* .MagicScrollItem a { margin: 0 !important; } */ div.MagicToolboxContainer.selectorsLeft, div.MagicToolboxContainer.selectorsRight { display: -ms-flex; display: -webkit-flex; display: flex; } div.MagicToolboxContainer.selectorsLeft .MagicToolboxSelectorsContainer, div.MagicToolboxContainer.selectorsRight .MagicToolboxSelectorsContainer { min-height: 300px; } div.MagicToolboxContainer.selectorsLeft .MagicToolboxMainContainer, div.MagicToolboxContainer.selectorsRight .MagicToolboxMainContainer { flex-grow: 1; } div.MagicToolboxContainer.selectorsLeft .MagicToolboxMainContainer, div.MagicToolboxContainer.selectorsRight .MagicToolboxMainContainer { /*font-size:0px;*/ } div.MagicToolboxContainer.selectorsLeft .MagicToolboxSelectorsContainer a, div.MagicToolboxContainer.selectorsRight .MagicToolboxSelectorsContainer a { margin:0 0 10px 0; } div.MagicToolboxContainer.selectorsLeft .MagicToolboxSelectorsContainer { } div.MagicToolboxContainer.selectorsRight .MagicToolboxSelectorsContainer { } div.MagicToolboxContainer.selectorsLeft .MagicToolboxMainContainer { width: auto; padding-left: 10px; } div.MagicToolboxContainer.selectorsRight .MagicToolboxMainContainer { width: auto; padding-right: 10px; } div.MagicToolboxContainer.selectorsLeft .MagicToolboxSelectorsContainer, div.MagicToolboxContainer.selectorsRight .MagicToolboxSelectorsContainer { position: relative; display: flex; flex-direction: column; flex-shrink: 0; } @media only screen and (min-width: 768px) { div.MagicToolboxContainer.selectorsLeft .MagicToolboxSelectorsContainer .MagicScroll, div.MagicToolboxContainer.selectorsRight .MagicToolboxSelectorsContainer .MagicScroll { height: 100%; flex:1; } } div.MagicToolboxContainer.selectorsLeft .MagicToolboxSelectorsContainer .MagicScroll a, div.MagicToolboxContainer.selectorsRight .MagicToolboxSelectorsContainer .MagicScroll a { margin: 0; } @media only screen and (max-width: 767px) { div.MagicToolboxContainer.selectorsLeft, div.MagicToolboxContainer.selectorsRight { flex-direction: column; } div.MagicToolboxContainer.selectorsLeft .MagicToolboxSelectorsContainer, div.MagicToolboxContainer.selectorsRight .MagicToolboxSelectorsContainer { order:2; width: 100% !important; margin-bottom:10px; min-height: 0px; flex:auto; flex-basis: auto !important; display: block !important; } div.MagicToolboxContainer.selectorsLeft .MagicToolboxSelectorsContainer a, div.MagicToolboxContainer.selectorsRight .MagicToolboxSelectorsContainer a { margin:10px 5px; } div.MagicToolboxContainer.selectorsLeft .MagicToolboxMainContainer, div.MagicToolboxContainer.selectorsRight .MagicToolboxMainContainer { order:1; padding:0px; } div.MagicToolboxContainer.selectorsLeft .MagicToolboxSelectorsContainer:after, div.MagicToolboxContainer.selectorsRight .MagicToolboxSelectorsContainer:after { content: none; } div.MagicToolboxContainer.selectorsLeft .MagicToolboxSelectorsContainer .MagicScroll, div.MagicToolboxContainer.selectorsRight .MagicToolboxSelectorsContainer .MagicScroll { height: auto; } div.MagicToolboxContainer.selectorsLeft .MagicToolboxSelectorsContainer .MagicScroll, div.MagicToolboxContainer.selectorsRight .MagicToolboxSelectorsContainer .MagicScroll { margin: 10px 0 0 0; } } div.MagicToolboxContainer.placeholder { /*height: 100%;*/ /*width: 100%;*/ width: auto !important; height: auto !important; } div.MagicToolboxContainer.placeholder span.align-helper { display: inline-block; height: 100%; vertical-align: middle; } div.MagicToolboxContainer.placeholder img { display: inline-block; vertical-align: middle; height: auto; width: auto; max-height: 100%; max-width: 100%; } .fotorama__stage__shaft:focus .fotorama__stage__frame.fotorama__active.magic360-stage-frame:after { display: none; } .m360-icon.m360-icon-fullscreen-open { z-index: 100000; } /* NOTE: to align the Magic360 container vertically */ .fotorama__html .fotorama__select { height: 100%; width: 100%; position: relative; } .fotorama__html .fotorama__select .MagicToolboxContainer { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; } .products-list .product-items .MagicToolboxContainer { padding: 0 30px 30px 0; display: table-cell; }