/* * CSS for Varieties pages * Revised 20190309, MJAD - msl * Revised 20251119, MJAD - updated Download Button styles */ /* FLUID VIDEO WRAPPER (16:9) */ .video-wrapper { display:block !important; clear:both; position:relative; padding-bottom:56.25%; padding-top:25px; height:auto; } .video-wrapper iframe { position:absolute; top:0; left:0; width:100%; height:100%; } .video-wrapper iframe video { width:100% !important; height:auto !important; } /* ************************************************** * * VARIETY SEARCH */ #section-plant-browser { z-index:99998; } .section-variety-hdr { margin-top:94px !important; } .search { display:flex; justify-content:space-between; margin:1em auto; padding:0; } .browse { width:100%; height:36px; margin-bottom:0 !important; padding:0; color:#fff; background-color:rgba(102, 102, 102, 1) !important; -moz-border-radius:3px 3px 0px 0px; -webkit-border-radius:3px 3px 0px 0px; border-radius:3px 3px 0px 0px; -moz-transition:background-color 0.3s ease-in-out; -webkit-transition:background-color 0.3s ease-in-out; transition:background-color 0.3s ease-in-out; cursor:pointer; } .browse-open { -moz-border-radius:3px 3px 0px 0px !important; -webkit-border-radius:3px 3px 0px 0px !important; } .browse:hover { color:#fff !important; background-color:#333 !important; } .browse-bg { background-position:96% center; background-size:16px 16px; background-repeat:no-repeat; background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIyLjAuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA0NDggNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0NDggNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU+CjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0yMDcsMzgxLjVMMTIuNywxODcuMWMtOS40LTkuNC05LjQtMjQuNiwwLTMzLjlsMjIuNy0yMi43YzkuNC05LjQsMjQuNS05LjQsMzMuOSwwbDE1NC43LDE1NGwxNTQuNy0xNTQKCWM5LjQtOS4zLDI0LjUtOS4zLDMzLjksMGwyMi43LDIyLjdjOS40LDkuNCw5LjQsMjQuNiwwLDMzLjlMMjQxLDM4MS41QzIzMS42LDM5MC44LDIxNi40LDM5MC44LDIwNywzODEuNUwyMDcsMzgxLjV6Ii8+Cjwvc3ZnPgo="); } .browse h4 { font-size:11px !important; line-height:36px !important; font-weight:800 !important; font-family:'Gotham Bold', Helvetica, Arial, sans-serif !important; letter-spacing:0.02em !important; text-transform:uppercase !important; padding-left:4% !important; } .browse-links { width:100%; height:auto; max-height:80vh; overflow-y:auto !important; -ms-overflow-style: -ms-autohiding-scrollbar; margin:0 !important; padding:0; color:#fff; background-color:rgba(102, 102, 102, 0.9); display:none; -moz-border-radius:0 0 3px 3px; -webkit-border-radius:0 0 3px 3px; border-radius:0 0 3px 3px; } .browse-links ul { margin:0; padding:0; max-height:80%; overflow-y:auto !important; -ms-overflow-style: -ms-autohiding-scrollbar; } .browse-links ul li { margin:0; padding:0; color:#fff; -moz-transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; cursor:pointer; } .browse-links ul li a { display:block; color:#fff; font-size:12.5px; line-height:13px; margin-bottom:10px; padding-left:4%; } .browse-links ul li:last-child { } .browse-links ul li:hover { color:#fff; background:#333; } .browse-type .select-type, .browse-series .select-series, .browse-genus .select-genus { font-size:14px; font-weight:400; line-height:24px; height:24px !important; font-family:'Gotham', Helvetica, Arial, sans-serif; letter-spacing:0.02em; text-transform:uppercase; color:#fff !important; background-color:transparent; border:0 !important; outline:none; margin:0 !important; padding:0 0 0 5px !important; -webkit-appearance:none; -moz-appearance:none; appearance:none;-webkit-user-select:none;-moz-user-select:none; } .browse-series option, .browse-genus select { color:#fff !important; background-color:#999 !important; } .search-col { width:100%; height:36px; margin-bottom:0 !important; padding:0; color:#fff; background-color:rgba(102, 102, 102, 1) !important; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; -moz-transition:background-color 0.3s ease-in-out; -webkit-transition:background-color 0.3s ease-in-out; transition:background-color 0.3s ease-in-out; } .search-col:hover { color:#fff !important; background-color:#333 !important; } .search-form { background:transparent; } .search-form .wrap { background:transparent; } .searchform .search-field { color:#fff; font-size:11px; line-height:36px !important; font-weight:800 !important; font-family:'Gotham Bold', Helvetica, Arial, sans-serif !important; letter-spacing:0.02em !important; color:#fff !important; background:transparent; border:0 !important; margin:0 0 0 10px !important; padding:0; border-style:solid; box-shadow:none; -webkit-appearance:none; -moz-appearance:none; appearance:none;-webkit-user-select:none;-moz-user-select:none; -moz-opacity:1; -webkit-opacity:1; opacity:1; } .search-bg { background-position:96% center; background-size:16px 16px; background-repeat:no-repeat; background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDMwLjIgMzAuMiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMzAuMiAzMC4yOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8Zz4NCgk8cGF0aCBzdHlsZT0iZmlsbDojRkZGRkZGIiBkPSJNMjAuMiwzLjVjLTQuNi00LjYtMTIuMS00LjYtMTYuNywwcy00LjYsMTIuMSwwLDE2LjdjNC4xLDQuMSwxMC41LDQuNSwxNS4xLDEuM2MwLjEsMC41LDAuMywwLjksMC43LDEuM2w2LjcsNi43YzEsMSwyLjYsMSwzLjUsMGMxLTEsMS0yLjYsMC0zLjVsLTYuNy02LjdjLTAuNC0wLjQtMC44LTAuNi0xLjMtMC43QzI0LjcsMTQsMjQuMyw3LjYsMjAuMiwzLjV6IE0xOC4xLDE4LjFjLTMuNCwzLjQtOSwzLjQtMTIuNSwwYy0zLjQtMy40LTMuNC05LDAtMTIuNWMzLjQtMy40LDktMy40LDEyLjUsMEMyMS41LDksMjEuNSwxNC42LDE4LjEsMTguMXoiLz4NCjwvZz4NCjwvc3ZnPg=="); } @media only screen and (max-width:1024px) { #main-header .container { padding-left:15px !important; padding-right:15px !important; } .browse-links ul li a { font-size:12.5px; line-height:25px; height:25px; } } @media only screen and (max-width: 840px) { .browse-links ul li a { font-size:12px; line-height:24px; height:24px; } .search .browse-type, .search .browse-series, .search .browse-genus, .search .search-form { float:none; margin:5px; } } /* ************************************************** * * PAGINATION */ .pagination-wrapper { position:relative; clear:both; overflow:hidden; width:84% !important; height:48px !important; margin:0 auto !important; padding:10 0 !important; text-align:right; } .pagination { position:relative; clear:both; font-size:11px; line-height:13px; float:right; padding-right:20px; } .pagination span { font-family:Arial, Helvetica, sans-serif; display:block; float:left; margin:2px 2px 2px 0; padding:6px 9px 5px 9px; text-decoration:none; width:auto; color:#666; background:#fff; } .pagination a { font-family:Arial, Helvetica, sans-serif; display:block; float:left; margin:2px 2px 2px 0; padding:6px 9px 5px 9px; text-decoration:none; width:auto; color:#666; background:#eee; -webkit-transition:background .15s ease-in-out; -moz-transition:background .15s ease-in-out; -ms-transition:background .15s ease-in-out; -o-transition:background .15s ease-in-out; transition:background .15s ease-in-out; } .pagination a:hover { color:#fff; background:#333 !important; } .pagination .current { padding:6px 9px 5px 9px; color:#666; background:#9abc6f; } .pagination .current:hover { color:#fff; background:#333 !important; } /* ************************************************** * * ALL VARIETIES PAGE */ .varieties { display:block; position:relative; clear:both; text-align:center; } .varieties section { padding:20px; } .section-varieties { display:flex; flex-wrap:wrap; justify-content:center; width:auto; clear:both; margin:0 auto !important; padding:30px 0 0 0; text-align:center; } .varieties h4 { text-align:center; } .varieties .plant-block { position:relative; display:inline-block; float:left; width:280px; height:300px; margin:10px; padding:10px; text-align:center; background-color:transparent; -moz-opacity:1; -webkit-opacity:1; opacity:1; -moz-transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; cursor:pointer; } .varieties .plant-thumb { width:260px; height:260px; margin:0px; padding:10px; overflow:hidden; background-color:#fff; border:1px solid #ccc; -moz-box-shadow: 0 0 12px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 0 12px rgba(0, 0, 0, 0.2); box-shadow: 0 0 12px rgba(0, 0, 0, 0.2); -moz-transition:all 0.3s; -webkit-transition:all 0.3s; transition:all 0.3s; } .varieties .plant-thumb div { position:relative; left:10px; top:10px; width:240px; height:240px; margin:0px; padding:10px; overflow:hidden; background-color:#fff; background-position:center center; background-repeat:no-repeat; background-size:cover; } .varieties .plant-caption { bottom:0px; left:0px; display:block; font-size:11px; line-height:1; padding:10px; text-align:center; } .varieties .plant-block a { color:#666; font-size:13px; font-family:Arial, Helvetica, sans-serif; } .varieties .plant-block:hover .plant-thumb { -moz-opacity:0.7; opacity:0.7; } .varieties .plant-block:hover a { color: #9abc6f; } .varieties .plant-series, .varieties .plant-variety { font-weight:bold; font-style:normal; } .varieties .plant-genus { font-weight:normal; font-style:italic; } @media only screen and (max-width: 1024px) { .container-varieties { width:880px; } } @media only screen and (max-width: 840px) { .varieties { margin:140px auto 0px !important; } .varieties .browse-type, .varieties .browse-series, .varieties .browse-genus, .varieties .searchform { float:none !important; margin:5px auto !important; } .varieties .container-varieties { width:100% !important; margin:0 !important; } .varieties .plant-block { display:block !important; float:none !important; margin:10px auto !important; } } /* ************************************************** * * SINGLE VARIETY PAGE */ .variety { display:block; position:relative; clear:both; } .variety header { width:100%; height:250px; background-position:center center; background-repeat:no-repeat; background-size:cover; overflow:hidden; } .variety section { width:100%; margin:0; padding:0; } .variety .container { position:relative; width:75%; max-width:98%; margin:40px auto; padding:0 !important; } .variety .row { width:100%; clear:both; } .variety .col { display:block; float:left; } /* left column, images */ .variety .col-images { width:49%; padding:0 1% 0 0; } .variety .plant-photo-large { position:relative; clear:both; width:100%; height:640px; background:#fff; border:1px solid #999; display:flex; text-align:center; align-items:center; } .variety .plant-photo-large img { width:auto; max-height:600px; padding-top:10px; padding-bottom:10px; margin-left:auto; margin-right:auto; } .variety .plant-photo-large .plant_att_lnk { margin-left:auto; margin-right:auto; } .variety a.dl { display:block; clear:both; margin-bottom:20px; padding:0 auto; color:#fff; background:#999; font-weight:800; font-size:12px; line-height:36px; height:36px; letter-spacing:1px; text-align:center; cursor:pointer; } .variety a.dl:hover { color:#000; background-color:#666; } .attachment .col-images img { width:100%; height:auto !important; padding-bottom:20px; } .attachment .col-images .disclaimer { width:100%; font-size:9px; font-style:italic; text-align:center; } .variety .row-plant-photos { display:block; margin-bottom:20px; } .variety .row-plant-photos p { display:block; width:100%; clear:both; font-weight:bold; font-size:13px; line-height:1; font-family:Arial, Helvetica, sans-serif; text-align:left; margin:0; padding:0; } .variety .row-plant-photos ul { display:-ms-flex; display:-webkit-flex; display:flex; clear:both; list-style:none; flex-direction:row; flex-wrap:wrap; width:100%; margin:10px 0; padding:0; } .variety .row-plant-photos li { list-style:none; display:inline-block; float:left; margin:0 10px 10px 0; padding:1; -moz-opacity:1; -webkit-opacity:1; opacity:1; cursor:pointer; -moz-transition:all 0.4s; -webkit-transition:all 0.4s; transition:all 0.4s; } .variety .row-plant-photos li img { width:120px; height:auto; } .variety .row-plant-photos li:hover { -moz-opacity:0.7; -webkit-opacity:0.7; opacity:0.7; } .variety .row-plant-videos { display:block; position:relative; width:100%; margin-bottom:20px; } .variety .row-plant-videos p { clear:both; font-weight:bold; font-size:13px; line-height:1; font-family:Arial, Helvetica, sans-serif; text-align:left; margin:0; padding:0; } .variety .video-wrapper { display:block; position:relative; clear:both; width:100%; max-width:640px; height:auto !important; margin:10px 0 20px; padding:0; -moz-transition:all 0.4s; -webkit-transition:all 0.4s; transition:all 0.4s; cursor:pointer; } .variety .video-wrapper iframe { -moz-opacity:1; -webkit-opacity:1; opacity:1; -moz-transition:all 0.6s; -webkit-transition:all 0.6s; transition:all 0.6s; cursor:pointer; } .variety .video-wrapper video { width:100% !important; height:auto !important; } .et_pb_video_box { width:100% !important; height:auto !important;} .et_pb_video_box iframe { -moz-opacity:0; -webkit-opacity:0; opacity:0; -moz-transition:all 0.6s; -webkit-transition:all 0.6s; transition:all 0.6s; cursor:pointer; } .et_pb_video_overlay { position:absolute; z-index:10; top:0; left:0; width:100%; height:100%; background-repeat:no-repeat; background-position:center; -webkit-background-size:cover; -moz-background-size:cover; background-size:cover; cursor:pointer; } .et_pb_video_play:before { font-size:72px; font-family:'ETmodules'; content:"\49"; } .et_pb_video_play { display:block; position:absolute; z-index:100; top:50%; left:50%; margin-left:-36px; color:#fff;-webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .et_pb_video_play:hover { color:#000; } .et_pb_video_overlay_hover { position:absolute; z-index:100; width:100%; height:100%; background:rgba(0, 0, 0, 0); -webkit-transition all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out; -o-transition:all 0.5s ease-in-out; transition:all 0.5s ease-in-out; } .et_pb_video_overlay_hover:over { color:#000; background:rgba(0, 0, 0, 0.5); } /* right column, specs */ .variety .col-specs { width:50%; padding:0 0 0 1%; } .variety .plant-desc-wrapper { display:inline-block; float:left; width:48%; margin:0; text-align:left; } .variety .plant-desc-header { display:block; clear:both; margin:0 0 20px 0; background:#fff; } .variety .plant-name { color:#666; font-size:18px; line-height:1; font-weight:800; font-family:Arial, Helvetica, sans-serif; float:none; text-align:left; margin:0; padding:0; } .variety .plant-genus { color:#666; font-size:16px; line-height:1.6; font-weight:800; font-style:italic; font-family:Arial, Helvetica, sans-serif; float:none; text-align:left; margin:0; padding:0; } .variety .plant-long-desc { color:#666; font-size:15px; line-height:1.4; font-weight:normal; text-align:left !important; } .variety .plant-long-desc h1, .variety .plant-long-desc h2, .variety .plant-long-desc h3, .variety .plant-long-desc h4, .variety .plant-long-desc h5 { text-align:left !important; } .variety .plant-long-desc ul { margin-bottom:16px; } .variety .plant-long-desc li { list-style:disc; list-style-position:inside; text-align:left !important; } .variety .plant-specs { width:100%; border:none; text-align:left !important; } .variety .plant-specs th, .variety .plant-specs td { font-size:13px; line-height:1.2; font-family:Arial, Helvetica, sans-serif; text-align:left; border:none; padding:2px 0px; } .variety .plant-specs th { vertical-align:top; width:140px; } .variety .plant-specs td { vertical-align:bottom !important; } .variety .photo-disclaimer { width:100%; clear:both; margin:20px 0 !important; padding:20px; border:1px solid #ccc; } .variety p small { font-size:85%; } .variety .btn-block { width:100%; clear:both; margin:20px 0 !important; } .variety .btn-info { color:#fff; background:#999; font-size:14px; height:48px; line-height:48px; font-weight:500 !important; font-family:Arial, Helvetica, sans-serif; letter-spacing:0.05em; text-align:center; margin:0; padding:24px 12px 24px 24px; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -ms-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; } .variety .btn-info:hover { color:#fff; background:#4fc6db; } .variety .btn-info > .arrow { width:24px; height:24px; border-width:6px; border-style:double; border-color:#fff; border-width:0 0 2px 2px; display:inline-block; position:relative; margin:0 0 -6px 16px; padding:0px; } .variety .btn-info > .arrow-left { -moz-transform:rotate(45deg); -webkit-transform:rotate(45deg); transform:rotate(45deg); } .variety .btn-primary { color:#000 !important; background-color:#fff !important; margin:20px 0 !important; padding:12px 24px !important; border:2px solid #000 !important; font-size:14px !important; font-weight:bold !important; font-family:'Gotham Bold', Arial, sans-serif !important; text-transform:uppercase !important; letter-spacing:1px !important; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing: border-box; -moz-transition:all 0.3s; -webkit-transition:all 0.3s; transition:all 0.3s; cursor:pointer; } .variety .btn-download { padding-bottom:12px; } .variety .btn-download .chevron-down { clear:both; display:block; width:100%; min-height:60px; overflow:hidden; background-color:reg; background-position:center; background-size:cover; background-repeat:no-repeat; -moz-transition:all 0.3s; -webkit-transition:all 0.3s; transition:all 0.3s; background-image:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA0NDggNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0NDggNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZD0iTTIwNywzODEuNUwxMi43LDE4Ny4xYy05LjQtOS40LTkuNC0yNC42LDAtMzMuOWwyMi43LTIyLjdjOS40LTkuNCwyNC41LTkuNCwzMy45LDBsMTU0LjcsMTU0bDE1NC43LTE1NCBjOS40LTkuMywyNC41LTkuMywzMy45LDBsMjIuNywyMi43YzkuNCw5LjQsOS40LDI0LjYsMCwzMy45TDI0MSwzODEuNUMyMzEuNiwzOTAuOCwyMTYuNCwzOTAuOCwyMDcsMzgxLjVMMjA3LDM4MS41eiIvPjwvc3ZnPg=='); } .variety .btn-primary:hover { background-color:#9abc6f !important; } .variety .btn-wrapper { display:block; clear:both; overflow:hidden; width:100%; margin:40px 0 50px; } .variety .btn-jpg { display:inline-block; float:left; font-size:14px; line-height:1.2; width:140px; height:140px; margin:0 10px 0 0; padding:10px; color:#fff; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; background-color:#666; background-position:50px 80px; background-size:40px; background-repeat:no-repeat; background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIyLjAuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA0NDggNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0NDggNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU+CjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0yMDcsMzgxLjVMMTIuNywxODcuMWMtOS40LTkuNC05LjQtMjQuNiwwLTMzLjlsMjIuNy0yMi43YzkuNC05LjQsMjQuNS05LjQsMzMuOSwwbDE1NC43LDE1NGwxNTQuNy0xNTQKCWM5LjQtOS4zLDI0LjUtOS4zLDMzLjksMGwyMi43LDIyLjdjOS40LDkuNCw5LjQsMjQuNiwwLDMzLjlMMjQxLDM4MS41QzIzMS42LDM5MC44LDIxNi40LDM5MC44LDIwNywzODEuNUwyMDcsMzgxLjV6Ii8+Cjwvc3ZnPgo="); -moz-border-radius:2px; -webkit-border-radius:2px; text-align:center; border-radius:2px; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -ms-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; } .variety .btn-text { display:inline-block; width:auto; color:#fff; font-size:14px; line-height:16px; cursor:pointer; font-weight:500 !important; font-family:Arial, Helvetica, sans-serif; letter-spacing:0.05em; margin:20px auto; } .variety .filesize { font-size:12px; } .variety .btn-jpg:hover { background-color:#000; font-size:14px; line-height:1.2; width:140px; height:140px; margin:0 10px 0 0; padding:10px; background-position:50px 90px; } .variety .btn-tif:hover { background-color:#000; font-size:14px; line-height:1.2; width:140px; height:140px; margin:0 10px 0 0; padding:10px; background-position:50px 90px; } /* Pulse */ @-webkit-keyframes hvr-pulse { 25% { -webkit-transform: scale(1.1); transform: scale(1.1); } 75% { -webkit-transform: scale(0.9); transform: scale(0.9); } } @keyframes hvr-pulse { 25% { -webkit-transform: scale(1.1); transform: scale(1.1); } 75% { -webkit-transform: scale(0.9); transform: scale(0.9); } } .hvr-pulse { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .hvr-pulse:hover, .hvr-pulse:focus, .hvr-pulse:active { -webkit-animation-name: hvr-pulse; animation-name: hvr-pulse; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .attachment .btn-wrapper { display:block; clear:both; overflow:hidden; width:100%; margin:40px 0 50px; } .attachment .btn-jpg { display:inline-block; float:left; font-size:14px; line-height:1.2; width:140px; height:140px; margin:0 10px 0 0; padding:10px; color:#fff; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; background-color:#666; background-position:50px 80px; background-size:40px; background-repeat:no-repeat; background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIyLjAuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA0NDggNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0NDggNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU+CjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0yMDcsMzgxLjVMMTIuNywxODcuMWMtOS40LTkuNC05LjQtMjQuNiwwLTMzLjlsMjIuNy0yMi43YzkuNC05LjQsMjQuNS05LjQsMzMuOSwwbDE1NC43LDE1NGwxNTQuNy0xNTQKCWM5LjQtOS4zLDI0LjUtOS4zLDMzLjksMGwyMi43LDIyLjdjOS40LDkuNCw5LjQsMjQuNiwwLDMzLjlMMjQxLDM4MS41QzIzMS42LDM5MC44LDIxNi40LDM5MC44LDIwNywzODEuNUwyMDcsMzgxLjV6Ii8+Cjwvc3ZnPgo="); -moz-border-radius:2px; -webkit-border-radius:2px; text-align:center; border-radius:2px; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -ms-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; } .attachment .btn-tif { display:inline-block; float:left; font-size:14px; line-height:1.2; width:140px; height:140px; margin:0 10px 0 0; padding:10px; color:#fff; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; background-color:#666; background-position:50px 80px; background-size:40px; background-repeat:no-repeat; background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIyLjAuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA0NDggNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0NDggNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU+CjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0yMDcsMzgxLjVMMTIuNywxODcuMWMtOS40LTkuNC05LjQtMjQuNiwwLTMzLjlsMjIuNy0yMi43YzkuNC05LjQsMjQuNS05LjQsMzMuOSwwbDE1NC43LDE1NGwxNTQuNy0xNTQKCWM5LjQtOS4zLDI0LjUtOS4zLDMzLjksMGwyMi43LDIyLjdjOS40LDkuNCw5LjQsMjQuNiwwLDMzLjlMMjQxLDM4MS41QzIzMS42LDM5MC44LDIxNi40LDM5MC44LDIwNywzODEuNUwyMDcsMzgxLjV6Ii8+Cjwvc3ZnPgo="); -moz-border-radius:2px; -webkit-border-radius:2px; text-align:center; border-radius:2px; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -ms-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; } .attachment .btn-text { display:inline-block; width:auto; color:#fff; font-size:14px; line-height:16px; cursor:pointer; font-weight:500 !important; font-family:Arial, Helvetica, sans-serif; letter-spacing:0.05em; margin:20px auto; } .attachment .filesize { font-size:12px; } .attachment .btn-jpg:hover { background-color:#000000; font-size:14px; line-height:1.2; width:140px; height:140px; margin:0 10px 0 0; padding:10px; background-position:50px 90px; } .attachment .btn-tif:hover { background-color:#000000; font-size:14px; line-height:1.2; width:140px; height:140px; margin:0 10px 0 0; padding:10px; background-position:50px 90px; } .attachment p small { text-align:left !important; font-size:85%; } @media only screen and (max-width:479px) { #main-content .container { padding-top:0; } .variety header { height:125px; } .variety .container { width:100% !important; margin:20px 0; padding:0 !important; } .variety .row { display:block; width:100%; justify-content:center; text-align:center; } .variety .col-images { display:block; float:none; clear:both; width:90%; margin:0px auto 20px; padding:0; } .variety .col-specs { display:block; float:none; clear:both; width:90%; margin:0px auto 20px; padding:0; text-align:left !important; } }