/* ----------------------------------------- */ /* Content Template: loop-item-in-archives-gradient - start */ /* ----------------------------------------- */ .postcard-archive { position: relative; display: block; height: 600px; margin-bottom: 30px; } @media only screen and (max-width: 1440px) { .postcard-archive { height: 400px; } } .postcard-archive-category { position: absolute; top: 0px; display: block; content: ""; z-index: 3; padding: 30px; } .postcard-archive-category p{ text-transform: uppercase; font-weight: bold; letter-spacing: 2px; line-height: normal; border:1px solid #fff; padding: 5px; color: #fff !important; font-size: 11px; } .postcard-archive-bg { background-image: url([types field='album-cover' size='full' url='true'][/types]); background: #000; background-size: cover; height: 100%; width: 100%; -webkit-filter: grayscale(100%) blur(0); filter: grayscale(100%) blur(0); -webkit-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .postcard-archive:hover .postcard-archive-bg { -webkit-filter: grayscale(0) blur(0); filter: grayscale(0) blur(0); transition: 0.4s ease-in-out; } .postcard-archive-details-bg { background: rgba(133,40,49,.5); position: absolute; bottom: 0px; width: 100%; z-index: 4; height: auto; } .postcard-archive.blue .postcard-archive-details-bg { background: rgba(8,44,69,.5); transition: 0.4s ease-in-out; } .postcard-archive.blue:hover .postcard-archive-details-bg { background: rgba(0, 0, 0, 0.8); transition: 0.4s ease-in-out; } .postcard-archive:hover .postcard-archive-details-bg { background: rgba(0, 0, 0, 0.8); transition: 0.4s ease-in-out; } .postcard-archive-details { padding: 40px; } .postcard-archive:after { display: block; content: ""; background: rgb(255,77,94); background: -moz-linear-gradient(0deg, rgba(255,77,94,1) 0%, rgba(255,92,133,1) 100%); background: -webkit-linear-gradient(0deg, rgba(255,77,94,1) 0%, rgba(255,92,133,1) 100%); background: linear-gradient(0deg, rgba(255,77,94,1) 0%, rgba(255,92,133,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff4d5e",endColorstr="#ff5c85",GradientType=1); height: 100%; width: 100%; position: absolute; bottom: 0; opacity: 0.8; -webkit-transition: all 0.4s ease-out; -o-transition: all 0.4s ease-out; transition: all 0.4s ease-out; z-index:1; } .postcard-archive:hover:after { display: block; content: ""; -webkit-transition: all 0.4s ease-out; -o-transition: all 0.4s ease-out; transition: all 0.4s ease-out; opacity: 0; } .postcard-archive-details h2 { color:#fff; font-weight: bold; margin-bottom:10px; } .postcard-archive-details h2 a:hover { color:#d1d1d1 !important; } .postcard-archive-details p { color:#fff !important; font-weight: bold; font-size: 22px; line-height: 35px; margin-bottom: 0; } .postcard-archive-details p a { color:#fff !important; font-weight: bold; } .postcard-archive.blue:after { display: block; content: ""; background: rgb(38,104,190); background: -moz-linear-gradient(0deg, rgba(38,104,190,1) 0%, rgba(24,138,214,1) 100%); background: -webkit-linear-gradient(0deg, rgba(38,104,190,1) 0%, rgba(24,138,214,1) 100%); background: linear-gradient(0deg, rgba(38,104,190,1) 0%, rgba(24,138,214,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#2668be",endColorstr="#188ad6",GradientType=1); height: 100%; width: 100%; position: absolute; bottom: 0; opacity: 0.8; -webkit-transition: all 0.4s ease-out; -o-transition: all 0.4s ease-out; transition: all 0.4s ease-out; z-index:1; } .postcard-archive.blue:hover:after { display: block; content: ""; -webkit-transition: all 0.4s ease-out; -o-transition: all 0.4s ease-out; transition: all 0.4s ease-out; opacity: 0; } .page-link { position: relative; display: block; padding: 10px; margin-left: -1px; line-height: 1.25; color: #fff; background-color: #2668be; border: none; font-size: 20px; } .page-link:hover { position: relative; display: block; padding: 10px; margin-left: -1px; line-height: 1.25; color: #fff; background-color: #188ad6; border: none; font-size: 20px; } /* ----------------------------------------- */ /* Content Template: loop-item-in-archives-gradient - end */ /* ----------------------------------------- */