/* Search with Getty button */ #customBtn { display: inline-block; background: white; color: #444; width: 190px; border-radius: 5px; border: thin solid #888; box-shadow: 1px 1px 1px grey; white-space: nowrap; } #customBtn:hover { cursor: pointer; } span.label { font-family: serif; font-weight: normal; } span.icon { /*background: url('/custom/images/logo.png') transparent 5px 50% no-repeat;*/ display: inline-block; vertical-align: middle; width: 42px; height: 42px; } span.buttonText { display: inline-block; vertical-align: middle; padding-left: 42px; padding-right: 42px; font-size: 14px; font-weight: bold; /* Use the Roboto font that is loaded in the */ font-family: 'Roboto', sans-serif; } /* Modal Window styles */ .getty-modal-picker p { font-size: 16px; line-height: 26px; letter-spacing: 0.5px; color: #484848; } /* Popup Open button */ .getty-modal-picker .open-button{ color:#FFF; background:#0066CC; padding:10px; text-decoration:none; border:1px solid #0157ad; border-radius:3px; } .getty-modal-picker .open-button:hover{ background:#01478e; } .getty-modal-picker .popup { position:fixed; top:0px; left:0px; background:rgba(0,0,0,0.75); width:100%; height:100%; display:none; z-index: 9999; /* Make sure the modal popup is at the front of everything else */ } /* Popup inner div */ .getty-modal-picker .popup-content { width: 90%; margin: 0 auto; box-sizing: border-box; padding: 40px; margin-top: 100px; box-shadow: 0px 2px 6px rgba(0,0,0,1); border-radius: 3px; background: #fff; position: relative; } /* Popup close button */ .getty-modal-picker .close-button { width: 25px; height: 25px; position: absolute; top: -10px; right: -10px; border-radius: 20px; background: rgba(0,0,0,0.8); font-size: 20px; text-align: center; color: #fff; text-decoration:none; } .getty-modal-picker .close-button:hover { background: rgba(0,0,0,1); } @media screen and (max-width: 720px) { .getty-modal-picker .popup-content { width:90%; } } /* Hide the selected getty image input field */ /* .selected-getty-image-input { display: none!important; } */ /* The lightbox container should be the most front-facing element */ .lity { z-index: 10000!important; } /* Each thumbnail image should look like a link, to make the user click it to open the lightbox */ .image_picker_image { cursor: pointer; } ul.thumbnails.image_picker_selector li .thumbnail:hover{ background: #0088cc; } /* Add some style to the hover effect and view buttons of each thumbnail */ /* .thumbnail { position: relative; margin-top: 50px; width: 500px; height: 300px; } */ .img-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0); transition: background 0.5s ease; } .thumbnail:hover .img-overlay { display: block; background: rgba(0, 0, 0, .3); } /* .image_picker_image { position: absolute; width: 500px; height: 300px; left: 0; } */ .img-button { position: absolute; width: 100%; left:0; bottom: 20px; text-align: center; opacity: 0; transition: opacity .35s ease; } .img-button a { width: 200px; padding: 12px 48px; text-align: center; color: white; border: solid 2px white; z-index: 1; } .thumbnail:hover .img-button { opacity: 1; }