/* Import fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;900&display=swap');

/* main settings */
* {
    margin:0;
    padding:0;
    box-shadow: none;
    border-radius: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
}

/* html and main view */
html{
    margin: 0;
    padding: 0;
    background-color: whitesmoke;
}

body{
    overflow-x: hidden;
}

main{
    /* width: 100%; */
    margin:0;
    padding:0;
    /* min-height: 65vh; */
}

button, .btn{
    border-radius: 0;
    box-shadow: none;
}

.d-flex1{
    display:flex!important;
}

a{
    box-shadow: none!important;
}

a {
    text-decoration: none;
}

.row a{
    width:fit-content;
    padding:0;
    margin:0;
}

iframe{
    margin-top:10px;
    margin-bottom:10px;
}

a i {
    text-decoration: none;
    font-size: 0.8rem;
}

/* button primary */
.btn-primary{
    background-color: #0d6efd;
}

.btn-primary2{
    background-color: transparent;
    color:#0d6efd;
    font-weight:900;
    text-align:left;
}

.btn-primary2.active{
    background:transparent;
    color: #0a58ca;
    font-weight:900;
    text-align:left;
}



.btn-primary2:hover{
    color: #0a58ca;
    background:transparent;
    font-weight:900;
    text-align:left;
}

.btn-group-sm>.btn, .btn-sm {
    border-radius: 0;
}

/* cursor class */
.link{
    cursor: pointer;
}

.imgfilter {
    border: 0.1px solid #0d6efd;
    border-top:none;
    background-color: #0d6efd;
    padding:0;
    margin:0;
}

/* cursor and cursor follower scss */
.cursor {
    position: absolute;
    background-color: #fff;
    width: 6px;
    height: 6px;
    border-radius: 100%;
    z-index: 15;
    transition: 0.3s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform,
        0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity;
    user-select: none;
    pointer-events: none;
    transform: scale(1);
    display:none;
}

.cursor.active {
    opacity: 0.5;
    transform: scale(0);
}

.cursor.hovered {
    opacity: 0.08;
}

.cursor-follower {
    position: absolute;
    background-color: rgba(0, 50, 255, 0.7);
    width: 20px;
    height: 20px;
    border-radius: 100%;
    z-index: 15;
    transition: 0.6s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform,
        0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity;
    user-select: none;
    pointer-events: none;
    transform: translate(5px, 5px);
    display:none;
}

.cursor-follower.active {
    opacity: 0.7;
    transform: scale(3);
    mix-blend-mode: exclusion;
}

.cursor-follower.hovered {
    opacity: 0.08;
}

/* logo */
.logoarea{
    position:fixed;
    z-index: 10;
}

.logo{
    position: relative;
    display: flex;
    top:15px;
    left:15px;
    z-index: 5;
    width: 170px;
    height: 170px;
    background-color: #0055ff;
    transform: rotate(-1deg);
    cursor: pointer;
    overflow: hidden;
}

.mainlogo{
    width:100%;
    height:100%;
    background-image: url('../images/CrUninte-hand-trnsp-500.png');
    background-color: #0055ff;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transform: rotate(-1deg);
    cursor: pointer;
}

.logoset{
    display: block;
    position: relative;
    top:15px;
    left:30px;
    width: auto;
    height:auto;
    z-index: 2;
    transform: rotate(1deg);
}

.logo2{
    position: relative;
    top:0px;
    left:-185px;
    z-index: 0;
    width: 82px;
    height: 82px;
    background-image: url('../images/logo3.jpg');
    background-size: contain;
    background-position: center;
    margin:0 0 3px 6px;
    display: none;
    opacity:0;
    cursor: pointer;
}

.logo3{
    position: relative;
    top:3px;
    left:-185px;
    z-index: 0;
    width: 82px;
    height: 82px;
    background-image: url('../images/logo2.jpg');
    background-size: contain;
    background-position: center;
    margin:3px 0 0 6px;
    display: none;
    opacity:0;
    cursor: pointer;
}

.logo4{
    position: relative;
    top:3px;
    left:-185px;
    z-index: 0;
    width: 82px;
    height: 82px;
    background-image: url('../images/logo4.png');
    background-size: contain;
    background-position: center;
    margin:3px 0 0 6px;
    display: none;
    opacity:0;
    cursor: pointer;
}

/* spotlight of the week and spotlight */
.spotlight{
    width:100%;
    height:65vh;
    position: relative;
    top:0px;
    left:0;
    margin:0;
    z-index: 0;
    display: flex;
    background-size: cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    -webkit-background-size:cover;
    background-position: center;
    background-repeat: no-repeat;
}

#canvas-webgl{
    height:75vh!important;
}

.p-canvas-webgl {
    position: fixed;
    z-index: 1;
    top: -40px;
    left: 0;
    padding-top:40px;
}

.displaycanva{
    display:block;
}

.removecanva{
    display:none;
}

.spotcontent{
    width: 30%; /* Can be in percentage also. */
    height: fit-content;
    padding: 30px;
    position: absolute;
    right:15px;
    bottom:15px;
    align-items: flex-end;
    vertical-align:middle;
    display: flexbox;
    color: #0d6efd;
}

.spotoveraly{
    position:absolute;
    width:100%;
    height: 100%;
    top:0;
    left:0;
    background-color: rgba(255, 255, 255, 1);
    z-index: 1;
}

.spottext{
    position:relative;
    width:100%;
    height: 100%;
    top:0;
    left:0;
    z-index: 2;
}

.scdetails{
    text-align:left!important;
    float:left;
}
/* spotlight of the week icon */
.sicon{
    /*background-image: url(../images/spotlight-logo-blue.svg);*/
    background-position:top left;
    background-size: 10%;
    background-repeat: no-repeat;
}
/* spotlight of the week headline */
.spotcontent h4{
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
}

/* nav and tab */
nav{
    position: inherit;
    background-color: black;
    color:white;
    font-size: 1rem;
    z-index: 10;
    top:0px;
    left:0;
    width: 100%;
    height: 80px;
    transform: translateY(0);
}

.list-group-item{
    color:white;
    border-radius: 0!important;
}

.list-group-item:hover{
    background-color: #0000ff;
    color:#FFF;
}

.list-group-item:hover a{
    color:#FFF;
}

.list-group-item a{
    text-decoration: none;
    color: white;
}

.list-group-item a:hover{
    text-decoration: none;
    color: #FFF;
}

.list-group li{
    list-style: none;
}

.list-group-nav{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    float:left;
}

.area1{
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    float:left;
}

.area2{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    float:left;
}

.list-group-nav li{
    padding-right: 2em;
    line-height: 1.5em;
    font-size:12px;
    color: whitesmoke;
    background:none;
    border: none;
}

/* .list-group-nav-t li{
    padding-right: 2em;
    line-height: 1.5em;
    font-size:12px;
    color: whitesmoke;
    background:none;
    border: none;
} */

.list-group{
    float:left;
}

.list-group ul{
    padding-left:0;
}

/* .list-group-grid{
    display: grid;
    grid-template-columns: .4fr .8fr 1fr .7fr;
} */

.megamenu{ padding: 1rem; background:rgb(33,37,41); color:whitesmoke; }

.navbar-toggler{
    border:none;
}

.nav-tabs {
    border-bottom: 0.2px solid #0d6efd;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: #fff;
    background-color: #0d6efd;
    font-weight: 500;
    border: 0.5px solid #0d6efd;
}

.nav-tabs .nav-link {
    margin-bottom: -1px;
    background: #dee2e6;
    border: 0.5px solid #fff;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom: 0;
}

.nav-link {
    display: block;
    padding: 0.5rem 0.5rem;
    color: #000;
    text-decoration: none;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
}

a.nav-link{
    font-weight: 900;
}

li.nav-item{
    font-weight: 900;
}

.navbar{
    padding-top:0.1rem;
    padding-bottom:0.1rem;
    position:sticky;
    top:0;
}

.navbar-brand{
    font-size: .8rem!important;
}

.navbar-dark .navbar-toggler {
    border:0;
}

.navbar-toggler:focus {
    text-decoration: none;
    outline: 0;
    box-shadow: none!important;
}

@media all and (min-width: 769px) {
    .navbar .has-megamenu{position:static!important;}
    .navbar .megamenu{left:0; right:0; width:100%; margin-top:0;  }
}	

.dropdown-menu[data-bs-popper] {
    margin-top:20px;
    border-radius: 0;
    border:none;
}

.nav-item{
    line-height: 60px;
}

.nav-item p{
    line-height:1rem;
}

.dropdown-menu{
    font-size:.8rem;
}

.profile {
    display: inline-block;
    border: none;
    cursor: pointer;
    background-image: url(../images/profile.svg);
    background-repeat: no-repeat;
    min-height: 20px;
    min-width: 20px;
    margin-right: 8px;
    margin-bottom: -4px;
    margin-top:20px;
}

.bookmark {
    display: inline-block;
    border: none;
    cursor: pointer;
    background-image: url(../images/bookmark.svg);
    background-repeat: no-repeat;
    min-height: 20px;
    min-width: 20px;
    margin-right: 8px;
    margin-bottom: -4px;
}

.container-fluid{
    max-width: 100%;
}

.dropdown-menu-dark{
    width:400px;
    padding:15px;
}

.tab-content>.active {
    display: block;
    border: 1px solid #0d6efd;
    border-top:0;
    padding: 15px;
    background: #0d6efd;
}

/* forms */
.search {
    position: relative;
    box-shadow: 0 0 40px rgba(51, 51, 51, .1)
}

.search input {
    height: 60px;
    text-indent: 25px;
    border: 2px solid #d6d4d4
}

.search input:focus {
    box-shadow: none;
    border: 2px solid blue
}

.search .fa-search {
    position: absolute;
    top: 20px;
    left: 16px
}

.search button {
    position: absolute;
    top: 5px;
    right: 5px;
    height: 50px;
    width: fit-content;
    background: blue
}

.has-search .form-control {
    padding-left: 2.375rem;
}

.has-search .form-control-feedback {
    position: absolute;
    z-index: 2;
    display: block;
    width: 2.375rem;
    height: 2.375rem;
    line-height: 2.375rem;
    text-align: center;
    pointer-events: none;
    color: #aaa;
}

/* search button */
.box{
    width: auto;
    height: 40px;
    background: #2b303b!important;
}

.container-2{
    width: auto;
    vertical-align: middle;
    white-space: nowrap;
    position: relative;
    background: #2b303b!important;
}

.container-2 input#tsearch{
    width: 50px;
    height: 40px;
    background: none;
    border: none;
    font-size: 1rem;
    float: left;
    color: #262626;
    padding-left: 35px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    color: #fff;
    -webkit-transition: width .55s ease;
    -moz-transition: width .55s ease;
    -ms-transition: width .55s ease;
    -o-transition: width .55s ease;
    transition: width .55s ease;
}

.article img{
    width:auto;
    max-width:100%;
}

.container-2 input#tsearch::-webkit-input-placeholder {
    color: whitesmoke;
}

.container-2 input#tsearch:-moz-placeholder { /* Firefox 18- */
    color: whitesmoke;  
}

.container-2 input#tsearch::-moz-placeholder {  /* Firefox 19+ */
     color: whitesmoke;  
}

.container-2 input#tsearch:-ms-input-placeholder {  
    color: whitesmoke;  
}

/*.container-2 .icon{*/
/*    position: absolute;*/
/*    top: 50%;*/
/*    margin-left: 17px;*/
/*    margin-right: 17px;*/
/*    margin-top: 10px;*/
/*    z-index: 1;*/
/*    color: whitesmoke;*/
/*} */

.container-2 .icon{
    position: absolute;
    top: 50%;
    margin-left: 17px;
    margin-right: 17px;
    margin-top: 10px;
    z-index: 1;
    color: whitesmoke;
} 

.container-2 input#tsearch:active{
    outline:none;
    width: 150px;
}

.container-2 input#tsearch:focus{
    outline:none;
}

.container-2:hover input#tsearch{
    width: 150px;
}  

.container-2:hover .icon{
    color: #93a2ad;
}

/* devider */
.devider{
    clear: both;
    height:30px;
}

/* animation  */
.animation{
	-webkit-animation-duration: 0.3s;
	animation-duration: 0.3s;
	 -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

 @-webkit-keyframes slideDownIn {
	0% {
	    -webkit-transform: translateY(-20px);
	    -webkit-opacity:0;
    }
    
	100% {	
	    -webkit-transform: translateY(0);
	    -webkit-opacity:1;
	}
	0% {
	    -webkit-transform: translateY(-20px);
	    -webkit-opacity:0;
    }
}

@keyframes slideDownIn {
	0% {
		transform: translateY(-20px);
		opacity:0;
	}
	
	100% {
		transform: translateY(0);
		opacity:1;
	}
    0% {
		transform: translateY(-20px);
		opacity:0;
	}
}

.slideDownIn {
	-webkit-animation-name: slideDownIn;
	animation-name: slideDownIn;
}

/* contents  */
.table-responsive{
    display:grid; 
    grid-template-columns:repeat(4, 1fr) !important; 
    column-gap: 2px;
    row-gap:2px;
    padding:0px;
    position: inherit; 
    z-index:1; 
    overflow: hidden;
    grid-auto-flow: dense;
}

.card{
    border-radius: 0;
    border: none;
}

.card-footer{
    font-size:.65rem;
    text-transform: uppercase;
    font-weight: bold;
    background: none;
}

h5 span{
    font-weight: bolder;
    font-size:19px;
    margin:0px 5px;
}

.card-body h5{
    font-weight: 900;
    font-size:14px;
}

.card-body p{
    font-size: 16px;
    line-height: 18px;
    font-weight: 300;
}

.card-type{
    border-radius: 0px;
}

.highlight{
    background-color: #0055ff;
    padding: 0px 5px;
    -webkit-box-shadow: 1px 0px 0px #0055ff, -1px 0px 0px #0055ff;
    box-shadow: 1px 0px 0px #0055ff, -1px 0px 0px #0055ff;
    -webkit-box-decoration-break:clone;
    -moz-box-decoration-break:clone; 
    box-decoration-break: clone;
}

.highlight2{
    background-color: #000;
    padding: 0px 5px;
    /*-webkit-box-shadow: 1px 0px 0px #000, -1px 0px 0px #000;*/
    /*box-shadow: 1px 0px 0px #000, -1px 0px 0px #000;*/
    -webkit-box-decoration-break:clone;
    -moz-box-decoration-break:clone; 
    box-decoration-break: clone;
}

.highlight3{
    background-color: #0055ff;
    color:#fff;
    padding: 0px 5px;
    -webkit-box-shadow: 1px 0px 0px #0055ff, -1px 0px 0px #0055ff;
    box-shadow: 1px 0px 0px #0055ff, -1px 0px 0px #0055ff;
    -webkit-box-decoration-break:clone;
    -moz-box-decoration-break:clone; 
    box-decoration-break: clone;
    position: fixed;
    font-size: 18px;
    top:10px;
    left:10px;
}


.interest{
    font-size: .65rem;
    line-height: 1.1;
    font-weight: bold;
    position: relative;
    right:10px;
    text-align: right;
    vertical-align: top;
}

b, strong {
    font-weight: bolder;
    padding: 6.5px 0;
    font-weight:900;
}

.typeof{
    font-size: .65rem;
    font-weight: bold;
    color:white;
    float:left;
    position: relative;
    padding:0px;
    left:5px;
    display: flex;
    vertical-align: top;
}

.headline{
    text-transform:capitalize;
}

.first-line{
    display: flex;
    vertical-align: top;
    align-items: flex-start;
    margin-bottom:15px;
}

.overlay{
    background: rgb(0,0,0,0);
    width: 100%;
    position:absolute;
    padding: 5px;
    bottom:0;
    z-index: 2;
}



.overlay3{
    background: rgb(0,0,0,1);
    width: 100%;
    position:absolute;
    padding: 5px;
    bottom:0;
    z-index: 2;
}

.overlay2{
    width: 100%;
    height:30%;
    position:absolute;
    padding: 0px;
    top:0;
    left:0;
    z-index: 2;
    background-image: url(../images/spotlight.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top left;
}

.overlayTheme{
    width: 100%;
    height:30%;
    position:absolute;
    padding: 0px;
    top:0;
    left:0;
    z-index: 2;
    background-image: url(../images/ukraine.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top left;
}


/* Pagination */
.pagination{
    margin: 20px auto;
    width: fit-content;
}

.pagination .current{
    
    padding: 4px 10px; 
    /*color: #000;*/
    color:#fff;
    font-weight:900;
    margin: 1px 0px 9px 6px;
    display: block;
    text-decoration: none;
    float: left;
    text-align: center;
    /*background-color: #FFF;*/
    /*border: 1px solid #0d6efd;*/
    background-color: #0d6efd;
    border: 1px solid #0d6efd;
}

.pagination .page-numbers{
    padding: 4px 10px; 
    color: #FFF;
    margin: 1px 0px 9px 6px;
    display: block;
    text-decoration: none;
    float: left;
    text-align: center;
    background-color: #0d6efd;
    border: 1px solid #0d6efd;
}

/* footer area */
footer{
    background: rgb(33,37,41);
    position: relative;
}

.footer {
    padding: 24px 15px 14px 15px;
    transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -webkit-transition: all 0.25s ease;
    -ms-transition: all 0.25s ease;
    font-size: calc(0.875rem - 0.05rem);
    font-family: "Rubik", sans-serif;
    font-weight: 400; 
    margin:0;
    display:flex;
}

.footer1, .footer2{
    display: flex;
}

.footer3 img{
    width:100%;
    align-items: center;
}

.footer1 i{
    font-size:2rem;
}

.footer1 h1{
    font-size:24px;
    font-weight:300;
    margin-top:10px;
}

.footer1 h4{
    font-size:14px;
    font-weight:300;
    margin-top:10px;
}

.footer1 h2{
    font-size:20px;
    font-weight:700;
    margin-top:10px;
}

.footer1 .grid i{
    font-size: 1.3rem;
}

.footer2 h5{
    font-weight: 300;
}

.footer2 i, .footer2 span{
    font-size:1.8rem;
}

.footer2 p{
    line-height:1rem;
    font-weight: 300;
}

/* additional styles */
.content-details{
    width:100%;
}
.cdesc p, .cdesc ul, .cdesc span{
    padding-left:26%!important;
}

.cdesc1{
    padding:15px;
}
.cdesc1 p, .cdesc1 ul, .cdesc1 span{
    padding-left:34.33%!important;
}

.cdesc1 small{
    display:block;
    padding-left:34.33%!important;
}

.cdesc1 img, .cdesc1 video{
    width:100%!important;
}

.cdesc img, .cdesc video{
    width:100%!important;
    height:auto;
}

.excerpt{
    font-weight:900;
}

.excerpt p{
    font-weight:900;
}


.chevron {
    position: absolute;
    width: 2.1rem;
    height: 0.48rem;
    opacity: 0;
    bottom:100px;
    transform: scale(0.3);
    -webkit-animation: move-chevron 3s ease-out infinite;
    animation: move-chevron 3s ease-out infinite;
}
  
.chevron:first-child {
    -webkit-animation: move-chevron 3s ease-out 1s infinite;
    animation: move-chevron 3s ease-out 1s infinite;
}
  
.chevron:nth-child(2) {
    -webkit-animation: move-chevron 3s ease-out 2s infinite;
    animation: move-chevron 3s ease-out 2s infinite;
}
  
.chevron:before,
.chevron:after {
    content: "";
    position: absolute;
    top: 0;
    height: 100%;
    width: 50%;
    background: #FFF;
}
  
.chevron:before {
    left: 0;
    transform: skewY(30deg);
}
  
.chevron:after {
    right: 0;
    width: 50%;
    transform: skewY(-30deg);
}
  
  @-webkit-keyframes move-chevron {
    25% {
        opacity: 1;
    }
    33.3% {
        opacity: 1;
        transform: translateY(2.28rem);
    }
    66.6% {
        opacity: 1;
        transform: translateY(3.12rem);
    }
    100% {
        opacity: 0;
        transform: translateY(4.8rem) scale(0.5);
    }
}
  
  @keyframes move-chevron {
    25% {
        opacity: 1;
    }
    33.3% {
        opacity: 1;
        transform: translateY(2.28rem);
    }
    66.6% {
        opacity: 1;
        transform: translateY(3.12rem);
    }
    100% {
        opacity: 0;
        transform: translateY(4.8rem) scale(0.5);
    }
}

/*.heart{*/
/*    color:white!important;*/
/*}*/

@keyframes blinker {
    0%, 100% { font-size:20px; }
    25% { font-size: 22px; }
    50% { font-size: 20px; }
    75% { font-size: 22px;}
  }


.heart2 {
    overflow: hidden;
    background: #000;
    list-style: none;
    white-space:nowrap;
    margin-left: 10px;
    border-radius: 25px;
    display: inline-block;
    direction:rtl;
    position:absolute;
    right:0;
    margin:10px;
    display: flex;
    vertical-align: middle;
    align-items: center;
    z-index:9;
}
.heart2 a {
    opacity: 0;
    color: #FFF;
    max-width: 0;
    display: inline-block;
    text-decoration: none;
    transition: max-width 1s ease-out .1s, opacity 1s ease-out .1s, color;
}
.heart2 a:hover {
    color: #fff;
}
.heart2 a span {
    content:'Save';
    float:left;
    display: block;
    padding-left: 0em;
    padding-right: 10px;
    font-size:1rem;
}

.heart2 a span:before {
    content:'Save';
    font-weight: 900;
    float:right;
    display: block;
    padding-left: 20px;
    padding-right:0px;
    font-size:1rem;
}
.heart2 b {
    color: #FFF;
    line-height:21px;
    font-size: 20px;
    display: inline-block;
    padding:8px;
    height:36px;
    width:36px;
    transition:all .5s;
}

.heart2:hover b{
    font-size:22px;
    animation: blinker 1s 1 ease-in-out;
    transition:all .5s;
}
/* .heart:hover {} */
.heart2:hover a {
    opacity: 1;
    max-width: 150px;
    transition: max-width .5s ease-out .1s, opacity 1s ease-out .1s, color .2s;
}

.heart2.active a span:before {
    content:'Saved';
    font-weight: 900;
    float:right;
    display: block;
    padding-left: 20px;
    padding-right:0px;
    font-size:1rem;
}



.heart2.active a{
    opacity: 1;
    max-width: 150px;
    transition: max-width .5s ease-out .1s, opacity 1s ease-out .1s, color .2s;
}

.grid1{
    grid-row: span 1; grid-column: span 2;background:none;
}

.grid2{
    background:none;
}

.size1{
    width:100%; padding-bottom:50%!important;
}

.size2{
    width:100%; padding-bottom:100%!important;
}

.nowrap{
    white-space: nowrap;
}

.maxwidth{
    width:400px;
}

.articledflex{
    display:flex !important;
}

.footerdflex{
    display:flex !important;
    margin:0 auto !important;
    height: fit-content;
}

.footerdflex2{
    display:flex !important;
    margin:0 auto !important;
}

.footerlogo{
    margin:25px;
    align-items: center;
    vertical-align: middle;
}

.footerlogo img{
    padding:5%;
}

.footerlogo2{
    margin:45px;
    vertical-align: middle;
}

.flfirst{
    width:60%;
    display: flex;
}
.flsecond{
    width:25%;
}

.left{
    float:left;
}

.right{
    float:right;
}

.footerlogo2 img{
    height:80px;
    width: auto;
}

.eutext{
    color:white;
    font-size:9px; 
    font-weight:300;
    margin-top:10px;
    overflow: hidden;
    opacity: 0;
}



/* new style menu */
ul.ks-cboxtags {
    list-style: none;
    /*padding: 20px;*/
}
ul.ks-cboxtags li{
  display: inline;
}
ul.ks-cboxtags li label{
    display: inline-block;
    background-color: rgb(33,37,41);
    border: 0px;
    color: white;
    border-radius: 0px;
    white-space: nowrap;
    margin: 3px 0px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: all .2s;
}

ul.ks-cboxtags li label {
    padding: 8px 12px;
    cursor: pointer;
}

ul.ks-cboxtags li label::before {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 12px;
    padding: 2px 6px 2px 2px;
    content: "\f067";
    transition: transform .3s ease-in-out;
}

ul.ks-cboxtags li input[type="checkbox"]:checked + label::before {
    content: "\f00c";
    transform: rotate(-360deg);
    transition: transform .3s ease-in-out;
}

ul.ks-cboxtags li input[type="checkbox"]:checked + label {
    border: 0px;
    background-color: #0d6efd;
    color: #fff;
    transition: all .2s;
}

ul.ks-cboxtags li input[type="checkbox"] {
  display: absolute;
}
ul.ks-cboxtags li input[type="checkbox"] {
  position: absolute;
  opacity: 0;
}
ul.ks-cboxtags li input[type="checkbox"]:focus + label {
  border: 0px;
}

.job-button {
    background-color: #34cc99;
    color: white;
    font-size: 14px;
    padding: 5px 5px;
    border: none;
    cursor: pointer;
    opacity: 1;
    position: fixed;
    bottom: 23px;
    right: 28px;
    z-index: 12;
    border-radius: 50%;
    width:70px;
    height:70px;
  }
  
  /* The popup form - hidden by default */
  .job-popup {
    position: fixed!important;
    bottom: 55px;
    right: 28px;
    border: 1px solid #000;
    z-index: 11;
    background-color: #34cc99;
    width:270px;
    height:400px;
    padding:15px;
    overflow-y: scroll;
    -ms-overflow-style: none; 
    scrollbar-width: none;
  }

  .jobcard {
    grid-area: 1 / 3 / 2 / 3; background:#34cc99; 
    color:#000;
    background-color: #34cc99;
    /* overflow-y: scroll;
    -ms-overflow-style: none; 
    scrollbar-width: none; */
    width:100%;
    height:0;
    padding-top:100%;
    overflow: hidden;
  }

  .jobinside {
    /* position: absolute; */
    /*margin-top: 30px;*/
    /* margin-bottom: 100px; */
    height: calc(100% - 80px);
    overflow-y: scroll;
    
    margin-right: 10px;
}

  .jobinside::-webkit-scrollbar {
    width:5px;
    margin-right: 10px;
  }
  .jobinside::-webkit-scrollbar-track {
    background: #0d6efd;
    border: 2px solid transparent;
    background-clip: content-box; 
    
  }

  .jobinside::-webkit-scrollbar-thumb {
    border: 1px solid #0d6efd;
    background: #0d6efd;
  }

  

  .job-popup::-webkit-scrollbar {
    display: none;
  }
  
 .cancel {
    background-color: red;
  }
  
  .show{
    display: block;
    opacity: 1;
  }

  .hide{
    display:none;
    opacity: 0;
  }

  .logo2 .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
  
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
  }
  
  .logo2:active .tooltiptext {
    visibility: visible;
    transform: scale(0.5);
  }

  .logo3 .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
  
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
  }
  
  .logo3:active .tooltiptext {
    visibility: visible;
    transform: scale(0.5);
  }

  .logo4 .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
  
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
  }
  
  .logo4:active .tooltiptext {
    visibility: visible;
    transform: scale(0.5);
  }
  
  .addjobs{
    font-size: 10px!important;
    /* float: right; */
    /* text-align: right; */
    position: absolute;
    top: 18px;
    right: 19px;
    color: black;
  }
  
 .list-group-div{
    /*max-height: calc(100vh - 80px);*/
    max-height:30vh;
    overflow-y: scroll;
}
.list-group-div::-webkit-scrollbar {
    width:5px;
    margin-right: 10px;
  }
  .list-group-div::-webkit-scrollbar-track {
    background: #0d6efd;
    border: 2px solid transparent;
    background-clip: content-box; 
    
  }

  .list-group-div::-webkit-scrollbar-thumb {
    border: 1px solid #0d6efd;
    background: #0d6efd;
  }

.modal-footer {
    position: sticky;
    bottom: 0;
    background: #fff;
}

.sign{
    width:100px;
    height:70px;
    position: absolute;
    bottom:15px;
    left:30px;
    
}

.note h5{
    font-weight:900;
}

.note p{
    font-size:0.7rem;
    text-align: left;
    width:70%;
}

.note {
    margin-top:15px;
    text-align: left;
}

.note img{
    width:100%;
    height:auto;
}


.artistid h5{
    font-weight:900;
}

.artistid p{
    font-size:0.7rem;
    text-align: center;
    width:100%;
}

.artistid {
    margin-top:15px;
    text-align: left;
}

.artistid img{
    width:80%;
    height:auto;
    margin:10px auto!important;
}


.quote {
    position: relative;
    letter-spacing: 0.03em;
    margin-bottom: 0.5rem;
    font-size:20px;
  }
  .quote:before {
    content: "“";
    position: absolute;
    left: -0.7em;
    font-weight:900;
  }
  .quote:after {
    content: "”";
    margin-right: -1rem;
    font-weight:900;
  }
  
  .quote--container {
    margin: 2rem auto 0rem;
    width: 25em;
    /*border-bottom: 1px solid #000;*/
    padding-bottom: 0.5rem;
  }
  
  .quote--highlight {
    color: #D24335;
  }
  
  .quote--author {
    font-family: "Open Sans Condensed";
    font-size: 0.8rem;
    text-align: right;
    font-weight: 300;
  }
  
  /*.mainoverlay{*/
  /*  background-color: rgba(0,0,0,0.7)!important;*/
  /*  visibility: visible!important;*/
  /*  width:100vw;*/
  /*  height:100vh;*/
  /*  position:fixed;*/
  /*  top:0;*/
  /*  left:0;*/
  /*  z-index: 10;*/
  /*}*/

  /*#mainoverlay{*/
  /*  background-color: rgba(0,0,0,0);*/
  /*  visibility: hidden;*/
  /*  width:100vw;*/
  /*  height:100vh;*/
  /*  position:fixed;*/
  /*  top:0;*/
  /*  left:0;*/
  /*  z-index: 10;*/
  /*}*/
  
  
  #aboutdescription1.active{
    display:block!important;
}

#aboutdescription1{
    display:none;
}

#aboutdescription2.active{
    display:block!important;
}

#aboutdescription2{
    display:none;
}


.next{
    width:120px;
    overflow: hidden;
    position: relative;
    display: inline-block!important;
    transition: padding-left .3s
}

.next:hover{
    transform-origin: 100% 100%;
    padding-left:40px;
    transition: padding-left .3s
}

.previous{
    width:140px;
    overflow: hidden;
    position: relative;
    display: inline-block!important;
    transition: padding-right .3s
}

.previous:hover{
    transform-origin: 100% 100%;
    padding-right:40px;
    transition: padding-right .3s
}

/*.photocredit{*/
/*    position: relative;*/
/*    width: 200px;height: fit-content;*/
/*    left: 528px;background: #fff;*/
/*    padding: 10px;*/
/*    top: 55px;*/
/*    border-top: 1px solid #0d6efd;*/
/*    border-bottom:1px solid #0d6efd;*/
/*}*/

.photocredit {
    /* position: relative; */
    margin-left: 15px;
    width: 95%;
    height: fit-content;
    margin-bottom: 15px;
    left: 528px;
    background: #fff;
    text-align: center;
    font-size:12px;
    padding: 0px;
    /* padding-bottom: 15px; */
    top: 55px;
    /* border-top: 1px solid #0d6efd; */
    border-bottom: 1px solid #0d6efd;
}

.author {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.author-photo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
    overflow: hidden;
}

.author-photo img {
    width: 100%;
    height: auto;
}

.author-name {
    font-size: 0.8rem;
}

.authorarticles {
display: flex;
align-items: flex-start;
margin-bottom: 10px;
}

a .authorarticles {
    color:#2b303b;
    }

.article-photo {
width: 30%;
height: auto;
border-radius: 0%;
margin-left: 10px;
overflow: hidden;
}

.article-photo img {
width: 100%;
height: auto;
}

.artice-desc {

}