/*
Theme Name: Zajdno Smo ORG
Theme URI: https://www.elegantthemes.com/gallery/divi/
Description: Divi Child Theme
Author: Vuk
Author URI: https://rv3.co.uk
Template: Divi
Version: 1.0.20
*/
/* =Theme customization starts here
------------------------------------------------------- */
#main-header{
display: none;
}
#main-footer{
display: none;
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* VARIABLES */
:root {
--max-width-full: 1500px;
--max-width-medium: 800px;
/* light */
/*
--text-color: rgba(0 0 0 / 90%);
--scrollbar-bg: rgb(1 2 3 / 40%);
--theme-bg-color: rgb(255 255 255 / 31%);
--card-bg-color: rgb(255 255 255);
*/
}
@media (prefers-color-scheme: dark){
:root{
/*
--text-color: rgba(255 255 255 / 90%);
--scrollbar-bg: rgb(255 253 253 / 57%);
--theme-bg-color: rgba(16 18 27 / 90%);
--card-bg-color: rgb(16 18 27);
*/
}/* root */
}/* media */
.rv3Container{
width: 100%;
position: relative;
}
.rv3Container .page .main_title{
display: none;
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
margin: 0;
padding: 0;
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
body{
font-family: "Poppins",sans-serif;
color: rgba(0,0,0,.9);
font-size: 16px;
font-weight: 300;
line-height: 1.4;
background-color: #fff;
}
img{
display: block;
width: 100%;
}
hr {
border: 0;
height: 6px;
float:none;
clear:both;
background-image: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 25%,rgba(0,0,0,1) 50%,rgba(0,0,0,0.75) 75%,rgba(0,0,0,0) 100%);
/* background-image: linear-gradient(to right, #ED4A53 0%, #F3901F 23%, #8AC446 50%, #049AD7 75%, #6E5791 100%); */
margin: 4.2rem 0;
}
hr.minor{
height: 0.20rem;
background-image: unset;
background-color: #3d3b5b;
margin: 0;
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
a{
box-shadow: inset 0 -1px 0 rgba(218,218,229,.9);
color: rgba(0,0,0,.9);
text-decoration: none;
text-shadow: none;
transition: all 0.9s ease-out;
}
a:focus, a:hover {
box-shadow: inset 0 -2em 0 rgba(218,218,229,.9);
outline-width: 0;
color: #000;
transition: all .3s ease-in;
}
a.btn{
display: inline-block;
font-size: 1.25rem;
border: 2px solid rgba(0,0,0,0.25);
border-radius: 2rem;
color: rgba(0,0,0,0.85);
background-color: rgba(255,255,255,0.9);
font-weight: 300;
padding: 0.5rem 0.75rem;
vertical-align: middle;
text-decoration: none;
margin: 0 0.25rem 0.25rem 0;
box-shadow: unset;
}
a.btn:hover{
border: 2px solid rgba(51,153,255,.9);
color: rgba(255,255,255,0.9);
background-color: rgba(0,0,0,0.99);
box-shadow: unset;
cursor: pointer;
}
a.btn.tag{
padding-left: 2.4rem;
background-image: url('data:image/svg+xml,\
');
background-repeat: no-repeat;
background-position: left 0.4rem center;
background-size: 1.6rem;
}
a.btn.tag:hover{
background-image: url('data:image/svg+xml,\
');
}
a.btn[target=_blank] {
padding-right: 2.4rem;
background-image: url('data:image/svg+xml,\
');
background-repeat: no-repeat;
background-position: right 0.4rem center;
background-size: 1.6rem;
}
a.btn[target=_blank]:hover {
background-image: url('data:image/svg+xml,\
');
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
h1, h2, h3, h4, h5, h6 {
font-weight: 500;
color: rgba(0,0,0,.9);
}
h1{
font-size: clamp(2rem, 10vw, 3.05rem);
line-height: 1.25;
}
h2{
font-size: 2.4rem;
line-height: 1.2;
}
h3{
font-size: 1.5rem;
line-height: 1.25;
}
p{
margin: 0.7rem 0 0.7rem;
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
section {
padding: 1rem 2rem;
position: relative;
max-width: var(--max-width-full);
margin: 0 auto;
}
section div.text p:first-child{
margin: 1.4rem 0 0.7rem;
}
section div.text p:last-child{
margin: 0.7rem 0 1.4rem;
}
section div.text h1,
section div.text h2,
section div.text h3,
section div.text h4,
section div.text h5,
section div.text h6 {
margin-top: 1.4rem;
}
section.medWidth {
max-width: var(--max-width-medium);
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
section.bdNav{
position: fixed;
display: flex;
justify-content: space-around;
align-items: center;
top: 0;
left: 0;
width: 100%;
max-width: unset;
height: 4rem;
padding: 0;
background-color: rgba(255,255,255,0.125);
z-index: 1000;
opacity: 0.75;
transition: all 0.9s ease-out;
}
section.bdNav:hover{
background-color: rgba(0,0,0,0.75);
opacity: 1;
transition: all .3s ease-in;
}
section.bdNav:hover ul li a{
color: rgb(255,255,255,0.75);
}
section.bdNav:hover ul li a:hover{
color: rgb(255,255,255,0.9);
}
section.bdNav a{
box-shadow: none;
display: block;
}
section.bdNav ul{
list-style: none !important;
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 0 !important; /* WordPress crap */
}
section.bdNav ul li{
margin-right: 2rem;
font-size: 18px;
font-weight: 400;
color: rgb(0,0,0,0.9);
}
section.bdNav ul li:hover{
color: rgb(255,255,255,1);
cursor: pointer;
}
section.bdNav ul li.search{
width: 2rem;
height: 2rem;
overflow: hidden;
}
section.bdNav ul li.search img{
width: 2rem;
height: 2rem;
}
section.bdNav:hover ul li.search img{
filter:invert(1);
}
section.bdNav .logo a svg{
height: 2rem;
}
section.bdNav .logo a img{
min-width: 64px;
filter: invert(0);
max-height: 64px;
}
section.bdNav:hover .logo a img{
filter: invert(1);
}
section.bdNav .ctrlMobile{
width: 2rem;
height: 2rem;
display: none;
}
section.bdNav .ctrlMobile .bar{
position: relative;
width: 1.5rem;
height: 0.25rem;
background-color: rgba(255,255,255,0.5);
margin: 0.25rem;
transition: 0.4s all ease;
}
section.bdNav .ctrlMobile:hover .bar{
background-color: rgba(255,255,255,0.95);
}
section.bdNav .bdSearch{
position: absolute;
width: 100%;
top: 100%;
align-items: center;
display: none;
}
section.bdNav .bdSearch.on{
display: flex;
}
section.bdNav .bdSearch input[type="text"]{
display: block;
width: 100%;
font-size: 1.2rem;
font-family: inherit;
padding: .25rem 2rem;
background-color: #fff;
border-radius: 2rem;
border: 2px solid #090;
transition: all 1.2s ease-out;
background-image: url(media/btnSearchOn.png);
background-position: left 4px center;
background-repeat: no-repeat;
background-size: 1.5rem;
transition: all 1.2s ease-out;
}
section.bdNav .bdSearch input[type="text"]:focus{
outline: none;
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
section.bdHero{
display: flex;
align-items: center;
height: 500px;
min-height: 100vh;
padding: 0;
margin: 0;
max-width: unset;
color: #fff;
}
section.bdHero img.title{
opacity: 0.52;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
object-fit: cover;
}
.bdSlider{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
/*
.bdSlider .slide:nth-child(5) {
background-image: url(media/YourScans_Screen01-1024x683.jpg);
animation-delay: -8s;
}
*/
section.bdHero h1{
font-weight: 300;
}
section.bdHero div.content{
position: relative;
max-width: var(--max-width-full);
margin: 0 auto;
padding-left: 2rem;
padding-right: clamp(0px, 50%, calc(var(--max-width-full) / 2 ));
}
section.bdHero h1{
font-weight: 300;
background-color: rgba(255,255,255,0.9);
border-radius: 0.25rem;
padding: 0.5rem;
}
section.bdHero a.hero{
position: absolute;
bottom: 0;
text-align: center;
width: 100px;
left: calc(50% - 50px);
color: rgba(255,255,255,0.7);
text-decoration: none;
box-shadow: unset;
}
section.bdHero a.hero:hover{
color: rgba(0,0,0,.9);
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
section.bdSubection{
position: relative;
display: flex;
justify-content: flex-start;
align-items: center;
color: #fff;
max-width: unset;
}
section.bdSubection.tinted{
background-image: linear-gradient(270deg, #8864C2 0%, #1A95D2 100%);
}
section.bdSubection.height1-3rd{
min-height: 33vh;
}
section.bdSubection.height2-3rds{
min-height: 66vh;
}
section.bdSubection img.title{
opacity: 0.3;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
object-fit: cover;
}
section.bdSubection.fullOpacity img.title{
opacity: 1;
}
section.bdSubection div.content{
position: relative;
max-width: var(--max-width-full);
margin: 0 auto;
padding-left: 2rem;
padding-right: clamp(0px, 50%, calc(var(--max-width-full) / 2 ));
}
section.bdSubection h1{
font-size: 2.2rem;
margin-bottom: 0.7rem;
}
section.bdSubection p{
font-size: 1.5rem;
line-height: 1.4;
letter-spacing: 0.25px;
font-weight: 40;
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
section.bdTags ul{
list-style: none !important;
padding: 0 !important;
display: flex;
flex-wrap: wrap;
}
section.bdTags ul li{
background-color: rgba(0,0,0,0.05);
margin: 0 1rem 0.25rem;
font-size: 1.1rem;
font-weight: 500;
border-radius: 2rem;
padding: 0.5rem 0.75rem 0.5rem 1.25rem;
border: 1px solid rgba(0,0,0,0.5);
transition: all 1.2s ease;
position: relative;
}
section.bdTags ul li span.counter{
border-radius: 2rem;
background-color: #000;
color: #fff;
padding: 0 0.5rem;
margin: 0 0 0 0.5rem;
}
section.bdTags ul li.selected{
background-color: rgba(0,0,0,0.9);
color: rgba(255,255,255,0.9);
}
section.bdTags ul li.selected span.counter,
section.bdTags ul li:hover span.counter{
background-color: #fff;
color: #000;
}
section.bdTags ul li:hover{
background-color: rgba(0,0,0,0.9);
border: 1px solid rgba(0,0,0,0.9);
color: rgba(255,255,255,0.9);
cursor: pointer;
transition: all 0.4s ease;
}
section.bdTags ul li a{
box-shadow: unset;
color: inherit;
}
section.bdTags ul li.selected a{
color: inherit;
}
section.bdTags ul li a:hover,
section.bdTags ul li a:focus{
color: inherit !important;
}
section.bdTags ul.current li{
}
section.bdTags ul.current li a:after{
border-left: 6px solid rgba(0, 0, 0, 0);
border-right: 6px solid rgba(0, 0, 0, 0);
border-top: 6px solid #fff;
content: "";
display: inline-block;
height: 0;
vertical-align: baseline;
width: 0;
margin: 6px 0 0 6px;
}
section.bdTags ul.current li:hover a:after{
border-top: 6px solid #f93;
}
section.bdTagged{
display: flex;
justify-content: center;
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
section.bdGrid{
display: grid;
}
section.bdGrid.twoColumn{
grid-template-columns: 1fr 1fr;
column-gap: 5rem;
row-gap: 4rem;
}
section.bdGrid.twoColumn a{
box-shadow: unset !important;
color: unset !important;
opacity: 0.8;
}
section.bdGrid.twoColumn a:focus,
section.bdGrid.twoColumn a:hover{
box-shadow: unset !important;
color: unset !important;
opacity: 1;
}
section.bdGrid.twoColumn h3{
text-transform: uppercase;
font-weight: bold;
font-size: 1rem;
}
section.bdGrid.twoColumn h3 a{
margin-right: 0.25rem 1rem 0 0.25rem;
padding: 00.25rem;
display: inline-block;
}
section.bdGrid.twoColumn h3 a:hover{
background-color: #000;
color: #fff !important;
}
section.bdGrid img{
border-radius: 0.5rem;
border: 0.25rem solid rgba(0,0,0,0);
transition: border 1s ease;
}
section.bdGrid a:hover img{
border: 0.25rem solid #999;
transition: border 0.3s ease;
}
section.bdGrid.threeColumn{
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 3rem;
}
section.bdGrid.typo6{
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
grid-gap: 1rem;
}
section.bdGrid .item{
position: relative;
border-radius: 2rem;
}
section.bdGrid .item .text{
margin-bottom: 4rem;
}
section.bdGrid .item:hover{
background-color: rgba(255,255,255,0.125);
}
section.bdGrid .item:hover .imgOnly img{
border: 0.25rem solid #fff;
transition: border 0.3s ease;
}
section.bdGrid.imgTextDouble{
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 2rem;
align-items: start;
align-content: start;
}
section.bdGrid .item a.btn{
position: absolute;
bottom: 0;
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
section.bdFlex{
display: flex;
}
section.bdFlex.image-text{
flex-direction: row;
min-width: unset;
justify-content: center;
align-items: center;
max-width: 100vw;
padding: 0;
}
section.bdFlex.image-text img{
width:64%
}
section.bdFlex.image-text .content{
width:36%;
padding: 2rem;
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
section.bdFooter{
background-color: rgba(204,204,204,0.9);
text-align:center;
padding: 3rem 0 1rem;
max-width: unset;
}
section.bdFooter a.social{
display: inline-block;
width: 3rem;
height: 3rem;
padding: 0.5rem;
background-color: unset;
border-radius: 50%;
border: 1px solid #eee;
}
section.bdFooter a.social:hover{
background-color: #000;
box-shadow: unset;
}
section.bdFooter a.social:hover img{
filter: invert(1);
}
section.bdFooter p.made{
text-align: right;
padding-right: 1rem;
}
section.bdFooter p.made img{
height: 1rem;
width: auto;
display: inline-block;
vertical-align: middle;
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
.bdHighlight{
background-image: linear-gradient(to right, #ED4A53 0%, #F3901F 23%, #8AC446 50%, #049AD7 75%, #6E5791 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
border: 1px solid #f00;
border-radius:0.5rem;
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* FEATURED gallery */
.bdFeaturedGallery{
z-index: 2;
max-width: 100%;
margin: 3rem auto;
}
.bdFeaturedGallery .item{
display: block;
height: 24rem;
min-width: 24rem;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
margin-right: 1rem;
}
.bdFeaturedGallery .item a{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: none;
}
.bdFeaturedGallery .item .content{
color: rgba(255,255,255,0.9);
position: absolute;
background-color: rgba(0,0,0,0.5);
left: 0;
right: 0;
}
.bdFeaturedGallery .item .content h3,
.bdFeaturedGallery .item .content h4,
.bdFeaturedGallery .item .content p{
margin: 0;
padding: 0;
color: inherit;
}
.bdFeaturedGallery .item .content h3,
.bdFeaturedGallery .item .content h4{
font-weight: 400;
}
.bdFeaturedGallery .item .content.top{
top: 0;
/* border-radius: 2rem 2rem 0 0; */
}
.bdFeaturedGallery .item .content.middle{
/* vertically center */
top: 50%;
transform: translateY(-50%);
}
.bdFeaturedGallery .item .content.bottom{
bottom: 0;
/* border-radius: 0 0 2rem 2rem; */
}
.bdFeaturedGallery .item .content.center{
text-align: center;
}
.flickity-page-dots{
bottom: -4rem;
}
.flickity-page-dots .dot{
background-image: rgba(0,0,0,0.5);
opacity: 0.75;
}
.flickity-page-dots .dot.is-selected {
background-image: rgba(0,0,0,0.9);
width: 30px;
border-radius: 5px;
}
.bdPictureGallery{
z-index: 2 !important;
}
.bdPictureGallery .picItem{
display: block;
height: auto;
/* set min-width,
allow images to determine cell width */
min-width: 150px;
max-width: 100%;
width: unset;
margin-right: 1rem;
/* vertically center */
top: 50%;
transform: translateY(-50%);
aspect-ratio: 16/9;
}
.bdPictureGallery.is-fullscreen{
top: 4rem;
height: calc(100% - 4rem);
width: 100% !important;
left: 0 !important;
}
.bdPictureGallery.is-fullscreen .picItem {
height: auto;
max-height: 100%;
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
.bdFileList{
}
/*
.bdFileList a{
background-image: url(media/16-9-ratio.jpg);
background-repeat: no-repeat;
background-size: 32px;
background-position: left 2px center;
box-shadow: unset;
}
*/
.bdFileList a{
display: block;
box-shadow: unset;
}
.bdFileList a img{
display: inline-block;
width: 48px;
height: 48px;
padding: 2px;
margin-right: 4px;
object-fit: cover;
vertical-align: top;
}
.bdFileList a div{
display: inline-block;
max-width: 28vw;
}
.bdFileList a p{
margin: 0 !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.2;
}
.bdFileList a p.desc{
font-size: smaller;
}
.bdFileList a:nth-child(even) {
background: rgba(255,255,255,0.1);
}
.bdFileList a:focus,
.bdFileList a:hover{
color: inherit;
background: rgba(0,0,64,0.125);
}
/* Media Query for Mobile Devices */
@media (max-width: 640px) {
section.bdNav{
align-items: flex-start;
justify-content: space-between;
}
section.bdNav .logo{
margin: 0.25rem;
}
section.bdNav .logo a svg{
height: 1rem;
}
section.bdNav .ctrlMobile{
display: block;
cursor: pointer;
}
section.bdNav .ctrlMobile.on{
}
section.bdNav .ctrlMobile.on .bar:nth-of-type(1){
transform-origin: top left;
transform: rotate(45deg);
left: 0.25rem;
}
section.bdNav .ctrlMobile.on .bar:nth-of-type(2){
opacity: 0;
}
section.bdNav .ctrlMobile.on .bar:nth-of-type(3){
transform-origin: bottom left;
transform: rotate(-45deg);
left: 0.25rem;
}
section.bdNav ul{
display: none;
margin: 0.25rem;
background-color: inherit;
}
section.bdHero div.content{
padding-right: 2rem;
}
section.bdGrid.twoColumn {
grid-template-columns: 1fr;
column-gap: 1rem;
row-gap: 3rem;
}
section.bdSponsors a{
margin: 0.25rem;
padding: 0.25rem;
}
section.bdGrid.typo6,
section.bdGrid.threeColumn,
section.bdGrid.imgTextDouble{
grid-template-columns: 1fr;
}
section.bdFlex.right{
flex-direction: column !important;
}
section.bdFlex.left{
flex-direction: column-reverse !important;
}
section.bdFlex.right img,
section.bdFlex.left img
{
width: 100vw;
}
section.bdFlex.right .content,
section.bdFlex.left .content
{
width: 90vw;
}
}
/* Media Query for low resolution Tablets, Ipads */
@media (min-width: 481px) and (max-width: 767px) {
section.bdHero div.content{
padding-right: 2rem;
}
}