/*
:root {
    --blue: #010156;
    --indigo: #6812f3;
    --purple: #6f42c2;
    --pink: #e93f8e;
    --red: #a51f18;
    --orange: #fd7e17;
    --yellow: #ad6200;
    --green: #448344;
    --teal: #5abfdd;
    --cyan: #30638d;
    --white: #fff;
    --gray-100: #f9fafb;
    --gray-200: #eaedf0;
    --gray-300: #dfe3e7;
    --gray-400: #ced4da;
    --gray-500: #adb5bd;
    --gray-600: #6d757e;
    --gray-700: #484f56;
    --gray-800: #353b41;
    --gray-900: #22262a;
    --primary: #010156;
    --secondary: #6d757e;
    --success: #448344;
    --info: #30638d;
    --warning: #ad6200;
    --danger: #a51f18;
    --light: #f9fafb;
    --dark: #353b41;
    --primary-rgb: 1,1,86;
    --secondary-rgb: 109,117,126;
    --success-rgb: 68,131,68;
    --info-rgb: 48,99,141;
    --warning-rgb: 173,98,0;
    --danger-rgb: 165,31,24;
    --light-rgb: 249,250,251;
    --dark-rgb: 53,59,65;
    --white-rgb: 255,255,255;
    --black-rgb: 0,0,0;
    --body-color-rgb: 34,38,42;
    --body-bg-rgb: 255,255,255;
    --font-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    --font-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    --gradient: linear-gradient(180deg,hsla(0,0%,100%,.15),hsla(0,0%,100%,0));
    --body-font-family: var(--cassiopeia-font-family-body,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");
    --body-font-size: 1rem;
    --body-font-weight: 400;
    --body-line-height: 1.5;
    --body-color: #22262a;
    --body-bg: #fff;
    --border-width: 1px;
    --border-style: solid;
    --border-color: #dfe3e7;
    --border-color-translucent: rgba(0,0,0,.175);
    --border-radius: 0.25rem;
    --border-radius-sm: 0.2rem;
    --border-radius-lg: 0.3rem;
    --border-radius-xl: 0.3rem;
    --border-radius-2xl: 0.3rem;
    --border-radius-pill: 50rem;
    --link-color: var(--cassiopeia-color-link);
    --link-hover-color: var(--cassiopeia-color-hover);
    --code-color: #e93f8e;
    --highlight-bg: #fbeea8
}
*/

html {
    cursor: url('/images/website/cursor.png') 0 0, default;
}

/* Import font from Google - Go to fonts.google.com, select a font and look for the import command */
@import url('https://fonts.googleapis.com/css2?family=Georama:wght@100&display=swap');
/* Use the imported font on the page: On Google you can also find the CSS instruction for using the font. If you put this in the body element then the font will be used on the whole website. */
body {
    font-family: 'Roboto', sans-serif;
    background-image: url('/images/website/background.png');
}

@font-face {
    font-family: 'painting_with_chocolate-webfont';
    src: url('../fonts/painting_with_chocolate-webfont.woff2') format('woff2'),
        url('../fonts/painting_with_chocolate-webfont.woff') format('woff');
        font-weight: normal;
        font-style: normal;
}

h3 {
    font-family: painting_with_chocolate-webfont;
    text-transform: uppercase;
}

:root {
    --color-1:#ffffff;
    --color-2:#000000;/*
    --color-3:#F50A13;
    --color-4:#DF0B8E;*/
    --color-3:#B5070D;
    --color-4:#AB096D;
    --color-1-2:#959595;
    --color-2-2:#595959;
    --color-3-2:grey;
    
    
    --color-main1: #f3000a;
    --color-main2: #dd0087;
    --color-font1: #ffffff;
    --color-font2: #000000;    
    --color-m1-f1: #b30006;
    --color-m2-f1: #ad006b;
    --color-m1-f2: #ff6166;
    --color-m2-f2: #ff4dbb;
    
    
    --color-3: var(--color-m1-f1);
    --color-4: var(--color-m2-f1);
    /*
    a {
        color: var(--color-2-2);
    }
    */
}

@supports (display: grid) {
    .site-grid {
        grid-template-areas:
            ". t2 t2 t2 t2 ."
            ". t1l1 t1 t1 t1r1 ."
            ". l1 c0t1 c0t1 r1 ."
            ". l1 comp comp r1 ."
            ". l1 c0b1 c0b1 r1 ."
            ". b1 b1 b1 b1 ."
            ". b2 b2 b2 b2 ."
             /*
             ". top-a top-a top-a top-a ."
             ". top-b top-b top-b top-b ."
             ". side-l comp comp side-r ."
             ". bot-a bot-a bot-b bot-b ."
             ". banner banner banner banner ."
             */
       }
}

.t2 {
    grid-area: t2;
    background-color: var(--color-1);
    /*border-bottom: 0.5rem solid;*/
}

.t2.border-gradient-custom {
  border: 0.5rem solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(to right, var(--color-main1), var(--color-main2), var(--color-main1));
  border-top: 0;
  border-right: 0;
  border-left: 0;
}

.blogapogallery-item {
    background-color: white;
}

.image_fulltext {    
    margin: auto;
    aspect-ratio: 1 / 1;
    position: relative;
    width: 100%;
    /*
    background-image: url('/images/website/pink_px.png');
    background-size: 0.25rem 50%;
    background-position: 50% 100%;
    background-repeat: no-repeat;
    */
}

.image_fulltext img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    /*
    border-style: solid;
    border-image: radial-gradient(#8b5a2b, #ffa54f, #8b5a2b) 30;
    */
}

.no_image_fulltext {
    /*
    border-style: solid;
    border-image: radial-gradient(#8b5a2b, #ffa54f, #8b5a2b) 30;
    */
    background-color: white;
    aspect-ratio: 1 / 1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: painting_with_chocolate-webfont;
}

.t2 #mod-custom117 {
    font-size:24px;
    text-transform: uppercase;
}

.t2 .navbar-brand {
    height: 100/*200*/px;
}

.t2 .navbar-brand img {
    max-height: 100px/*100%*/;
    width: auto;
}

.t2 nav.navbar {
    flex-grow: 1;
    justify-content: flex-end
}

.t2 li a {
    text-decoration: none!important;
}

.t2 li {
    padding: 1rem!important;
}
.t2 li.level-1 {
    border-radius: 0.5rem;
}

.t2 li > button:focus {
    outline: initial!important;
    outline-offset: initial!important;
}

.t2 {
    background-image: 
        linear-gradient(to right, rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0.5)), 
        url('/images/website/test6.png')
    ;
}

.t2 .metismenu.mod-menu .mm-collapse {
    background-image: 
        linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.75)), 
        url('/images/website/test6.png')
    ;
    border-radius: 0.5rem;
    right: 0;
}

.metismenu.mod-menu .metismenu-item:not(.level-2) > ul {
    margin-inline-end: 0;
}

span.icon-menu {
    color: var(--color-main2);    
}

.blogapogallery div.row {
    padding-top: 4rem;
    /*
    background-image:
        url('/images/website/ceiling-light.png'),
        radial-gradient(circle at 50% 0%, white, white 5rem, #FFF0F9),
        url('/images/website/test.svg')
    ;
    background-repeat:
        no-repeat,
        no-repeat,
        repeat
    ;
    background-position:
        50% calc(0% + 0.25rem),
        0% 0%,
        0% 0%
    ;      
    background-size:
        auto calc(4rem - 1rem),
        auto auto,
        auto auto
    ;
    */
}

div.blogapogallery-item div.test {
    background-color: transparent !important;
}

div.blogapogallery-item div.p-2 {
    background-color: white;
}

.blogapogallery-item div.p-2 {
    /*
    border: 0.25rem solid;
    border-image: radial-gradient(var(--color-3), var(--color-4), var(--color-3)) 30;
    border-radius: 0.25rem;
    */
    width: max-content;
    margin: auto;
}

.t2 li {
    padding-left: 2rem!important;
    padding-right: 2rem!important;
}

.t2 li:not(.active) {
    background-image:
        url('/images/website/tube_cap.svg'),
        url('/images/website/tube_mid.png'),
        url('/images/website/tube_bot.svg')
    ;    
    background-repeat:
        no-repeat
    ;
    background-position:
        left 0.5rem top 50%,
        left calc(1.5rem) top calc(0.5rem),
        right 0.5rem top 50%
    ;
    background-size:
        1rem calc(100% - 1rem),
        calc(100% - 3rem) calc(100% - 1rem),
        calc(1rem) calc(100% - 0.5rem)
    ;    
}


.t2 li.active {
    background-image:
        url('/images/website/tube_cap_pink.svg'),
        url('/images/website/tube_mid.png'),
        url('/images/website/tube_bot.svg')
    ;    
    background-repeat:
        no-repeat
    ;
    background-position:
        left 0.5rem top 50%,
        left calc(1.5rem) top calc(0.5rem),
        right 0.5rem top 50%
    ;
    background-size:
        1rem calc(100% - 1rem),
        calc(100% - 3rem) calc(100% - 1rem),
        calc(1rem) calc(100% - 0.5rem)
    ;    
}

#mod-custom110 {
    /*background-image: radial-gradient(circle farthest-side, white, white 100%, transparent 100%);*/
    /*height: 100%;*/
}

/*<tmp*/

.t2 li:not(.active):not(:hover) > a, .t2 li:not(.active):not(:hover) > button {
    color: var(--color-2)!important;
}
.t2 li:not(.active):hover > a, .t2 li:not(.active):hover > button {
    color: var(--color-2)!important;
}
.t2 li.active:not(:hover) > a, .t2 li.active:not(:hover) > button {
    color: var(--color-4)!important;
}
.t2 li.active:hover > a, .t2 li.active:hover > button {
    color: var(--color-4)!important;
}

.t2 li > button {
    text-decoration: initial!important;
}

.t1l1 {
    grid-area: t1l1;
}

.t1 {
    grid-area: t1;
}

.t1r1 {
    grid-area: t1r1;
}

.c0t1 {
    grid-area: c0t1;
}

.c0t1 figure, .c0t1 ul {
    margin: 0;
}

.c0t1 img {
   max-height:25vh;
   width:auto;
}

.c0b1 {
    grid-area: c0b1;
}

.b1 {
    grid-area: b1;
}

.b2 {
    grid-area: b2;
}


a.btn, a.btn-filtre-medium div {
    background-color: var(--color-3);
    background-image: linear-gradient(to right, var(--color-3), var(--color-4), var(--color-3));
    color: white;
}


a.btn-filtre-medium div {
    padding: 0.6rem 1rem;
    /*font-family: ;*/
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    border-radius: 0.25rem;
    box-shadow: inset 0 1px 0 hsla(0,0%,100%,.15),0 1px 1px rgba(0,0,0,.075);
    border: 1px solid transparent;
    cursor: pointer;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    -webkit-transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
    -o-transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    vertical-align: middle;
}


/*a.btn-filtre-medium div,*/ .blogapogallery {
    margin-bottom: 0!important;
    position: relative;
    left: 50%;
    -ms-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
}

a.btn-f2 {
    background-color: var(--color-m1-f2);
    background-image: linear-gradient(to right, var(--color-m1-f2), var(--color-m2-f2), var(--color-m1-f2));
    color: white;
}

.b1 a {
    background-color: var(--color-3);
    background-image: linear-gradient(to right, var(--color-3), var(--color-4), var(--color-3));
    color: white;
    padding: 1rem;
    border-radius: 0.5rem;
    text-decoration: none!important;
}

.t1 {
    background-color: black;
    color: white;
    text-align: center;
    background-image: url('/images/website/bg_black.jpg');
    background-size: cover;
}

.c0t1 > div:not(:last-child) {
    margin-bottom: 1.5rem;
}

.container-component {
    margin: 1.5rem 0;
}

img.filtre-medium {
    width: 100px;
}

div.pagination-apogallery ul.pagination {
    display: inline-flex;
}
    
ul.bottom-menu li.nav-item a {
    text-align: center;
    display: block;
}

/*
.grid-child.container-component::before {    
      content: "";
      background-image: url('http://localhost/kaliart/images/realisations/IMG_20210210_134640.jpg');
      background-size: cover;
      position: absolute;
      top: 0px;
      right: 0px;
      bottom: 0px;
      left: 0px;
      opacity: 0.20;
}
*/

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  /*left: 0;
  top: 0;*/
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
  margin: auto;
  display: block;
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  /*width: 80%;*/
  /*max-width: 700px;*/
}

/* Caption of Modal Image */
#caption {
  margin: auto;
  display: block;
  /*width: 80%;
  max-width: 700px;*/
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation */
.modal-content, #caption {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #ffffff;/*#f1f1f1;*/
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/*
.page-item.active {
    background-image: 
        radial-gradient(var(--color-3), var(--color-4), var(--color-3))
    ; 
}
.page-item:not(.active) {
    background-image: 
        radial-gradient(var(--color-3), var(--color-4), var(--color-3))
    ; 
}
*/

.page-link {
    color: var(--color-4);
    border-radius: 100%;
}

.page-item.active .page-link {
    background-image: radial-gradient(circle closest-side, var(--color-4), var(--color-3));
    border-radius: 100%;
    border: unset;
}

.page-item.active .page-link:hover {
    color: white;
}

.page-item:not(.active) .page-link:hover {
    color: var(--color-4);
}

.navbar-toggler {
    background-color: white;
    margin: 0.5rem;
}

.btn:hover {
    color: white;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
}