/**
	main CSS 
**/

* {
	box-sizing: border-box;
}
    

html {
	scroll-behavior: smooth;
}

:root {
    --speed: 0.25s;
    
    --class-item-bg-light:rgb(58, 48, 38) -webkit-linear-gradient(90deg, rgb(58, 48, 38) 0%, rgb(0, 0, 0) 14%, rgb(58, 48, 38) 66%, rgb(138, 129, 49) 100%, rgb(162, 151, 57) 100%, rgb(194, 181, 68) 100%);
			  
    --class-item-bg: black;
    --indicator-bg:#2196F3;
    --preview-btn-bg:#F4D06F;

}

/* Imported styles for landing page annex infos */
@import url(https://fonts.googleapis.com/css?family=Raleway:400,300|Raleway+Dots|Lato:300|Inconsolata|Montserrat);
/*----------------------------------------------- */


#faded{
	opacity: 0;
  }	

/*wall picture rounding*/
.wall_info_img{
    border-radius: 10%;
    box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.5);
}
    
/**utils**/
.a {text-decoration:none;}

.blink {
    animation: blinker 9.5s linear infinite;
    color: red;
    font-family: sans-serif;
}
@keyframes blinker {
    50% {
        opacity: 0;
    }
}

/* --- globals --*/
input[type="image"] {
    border: 0px  #ccc;
    border-radius: 5px;
    transition: transform 0.2s;
}

input[type="image"]:hover {
    transform: scale(1.1);
    border-color: #4CAF50;
}

/**Used fonts**/
div.FontMarket { 
    font-family:  "Cormorant Garamond",Georgia, serif;
}

@font-face {
    font-family: Amen;
    src: url(../fonts/amon-font/ImnbF.TTF) ;
}   
div.FontAmen { 
    font-family:  Amen;
}

    /** Body **/


 body {
    // background: #3A3026 background: -webkit-linear-gradient(90deg, rgba(58, 48, 38, 1) 0%, rgba(0, 0, 0, 1) 14%, rgba(58, 48, 38, 1) 66%, rgba(138, 129, 49, 1) 100%, rgba(162, 151, 57, 1) 100%, rgba(194, 181, 68, 1) 100%, rgba(237, 221, 83, 1) 100%);

     background-color: var(--class-item-bg);
		
//    background: -moz-linear-gradient(90deg, rgba(58, 48, 38, 1) 0%, rgba(0, 0, 0, 1) 14%, rgba(58, 48, 38, 1) 66%, rgba(138, 129, 49, 1) 100%, rgba(162, 151, 57, 1) 100%, rgba(194, 181, 68, 1) 100%, rgba(237, 221, 83, 1) 100%);
  // filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#3A3026", endColorstr="#EDDD53", GradientType=1);
	
		max-width: 100%;
		max-height: 100vh;
		font-family: "Cormorant Garamond",Georgia, serif;
		font-weight: 500px;
    }
    
    /** Footer**/
    footer {
	background-color: #777;
	padding: 1px;
	color: white;
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
    }

    .leftSideFooter {
	float: left;
	text-align: left;
    }
    .rightSideFooter {
	float: right;
	text-align: right;
    }

   
    /* Style the header */
    header {
	background-color:  radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(0,0,0,1) 100%);
	padding: 10px;
	text-align: center;
	font-size: 35px;
	color: white;
	position: sticky;
	top: 0;
	z-index: 999;
    }

    .header-content {
/*    margin: 0;
    padding: 0;
    box-sizing: border-box;*/
	
    }
     .header-content-inner {
/*   margin: 0;
    padding: 0;
    box-sizing: border-box;*/
		 font-family: "Cormorant Garamond", Georgia, serif;
		 font-weight: 700px;
		 font-size: 18px;
  l    }

 .cormorant-garamond-font {
	 font-family: "Cormorant Garamond";
	 font-optical-sizing: auto;
	 font-weight: 200px;
	 font-style: normal;
	}    

    .header-content-inner img {
	float: left;
    }
    
    header .header-content .header-content-inner h1 {
	margin-top: 0;
	margin-bottom: 0;
	font-weight: 700;
  	font-family: "Cormorant Garamond", Georgia, serif;
   }
    
    header .header-content  .header-content-inner form {
	float: right;   
    }
    /**end of header**/

    h1 {text-align: center;}
    p {text-align: center;}
    div {text-align: center;}


	/*mail+popup container*/
    .container { 
	height: 30px;
	width: 750px;
	position: relative;
	text-align: center;
	border: 1px  black;
	background-color: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(0,0,0,1) 100%);
	font-family: "Cormorant Garamond", Georgia, serif;
    }

    .label_centered {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 140px;
    }
	
    .vertical-center {
	margin: 0;
	position: absolute;
	top: 50%;
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);

    }

	/********************/
    .content_box {
     //debug    border: 2px solid black;
     text-align: center;
     display: inline-block;
     position:absolute;
    // background-image: "images/EnChantier/work_in_progress.png" alt="Work in progress";
    }
    
	.content_box case {
            flex: 1;
	//debug		border: 2px solid rgb(96 139 168);
			border-radius: 5px;
			background-color: rgb(96 139 168 / 0.2);
			padding:50px;
	}

      .green {
       //debug   background-color: green;
      }
      .blue {
		  height: 250px;
       //debug background-color: blue;
      }
      .yellow {
  //debug      background-color: yellow;
      }




	/**********************/
	
    /*HTML links color*/
    
    a:link {
	color: white;
	background-color: transparent;
	text-decoration: none;
    }
    a:visited {
	color: white;
	background-color: transparent;
	text-decoration: none;
    }
    a:hover {
	color: red;
	background-color: transparent;
	text-decoration: underline;
    }
    a:active {
	color: yellow;
	background-color: transparent;
	text-decoration: underline;
    }
    
    
    /*Oen Source Box*/
    .OSrcbox {
	background: linear-gradient(to right, gold, black);
	color: white;
	--width: 250px;
	--height: calc(var(--width) / 3);
	width: var(--width);
	height: var(--height);
	text-align: center;
	line-height: var(--height);
	font-size: 15px;/*calc(var(--height) / 2.5);*/
	font-family: "Cormorant Garamond",Georgia, serif;
	border: 0px solid darkgoldenrod;
	border-radius: 2em;
	transform: perspective(500px) rotateY(-15deg);
	text-shadow: 6px 3px 2px rgba(0, 0, 0, 0.2);
	box-shadow: 2px 0 0 5px rgba(0, 0, 0, 0.2);
	transition: 0.5s;
	position: relative;
	overflow: hidden;
    }
    
    .OSrcbox:hover {
	transform: perspective(500px) rotateY(15deg);
	text-shadow: -6px 3px 2px rgba(0, 0, 0, 0.2);
	box-shadow: -2px 0 0 5px rgba(0, 0, 0, 0.2);
    }

    .Osrcbox:hover::before {
	left: 100%;
    }
    
    .OSrcbox::before {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background: linear-gradient(to right, transparent, white, transparent);
	left: -100%;
	transition: 0.5s;
    }
    
	.osrc_div {
		height: 200px;
		width: 200px;
		border: 1px solid #4CAF50;
}

    /*Contact Box*/
    .CtButton{
	cursor: pointer;
	position: absolute;
	display: flex-center;
	border: 1px solid hsl(0 0% 100% / 0.25);
	border-radius: 10px;
	overflow: hidden;
	display: grid;
	grid-template-columns: auto 3.5em;
	gap: 1.5em;
	font-family: "Cormorant Garamond", Georgia, serif;
	font-weight: 400;
	background:
	    hsl(280 0% 12%);
	color: hsl(0 0% 90%);
	padding: 0.5em 0.5em 0.5em 1.5em;
	place-items: center;
	box-shadow:
	    0 1px inset hsl(0 0% 100% / 0.5),
	    0 -10px 20px 10px hsl(0 0% 0% / 0.5) inset,
	    0 10px 20px 10px hsl(0 0% 50% / 0.25) inset,
	    0 1px hsl(0 0% 2% / 0.75);
	letter-spacing: 0.05ch;
    }
    button:focus-visible {
	outline-offset: 0.5em;
	outline-color: hsl(280 80% 80% / 0.5);
    }
    .icon {
	width: 100%;
	aspect-ratio: 1;
	border-radius: 100%;
    }
    .backdrop {
	position: absolute;
	inset: 0.5em;
    }
    .icon {
	overflow: hidden;
    }
    .icon svg {
	width: 50%;
	overflow: visible !important;
    }
    svg path:nth-of-type(2) {
	transform-box: fill-box;
	transform-origin: 50% 50%;
	transition:
	    fill var(--speed),
	    rotate var(--speed),
	    scale var(--speed),
	    translate var(--speed);
    }
    svg path:nth-of-type(1) {
	translate: 5rem 0;
	transform-box: fill-box;
	transition: translate var(--speed);
	opacity: 0.75;
    }
    button:is(:hover, :focus-visible) svg path:nth-of-type(2) {
	translate: 0 -50%;
	rotate: 290deg;
	scale: 0.65;
	fill: hsl(0 0% 20%);
	transition-timing-function: ease, ease, cubic-bezier(.2, .7, .9, 1.5);
    }
    button:is(:hover, :focus-visible) svg path:nth-of-type(1) {
	translate: 0 0;
    }
    .action {
	position: absolute;
	right: 0;
	height: 100%;
	background:
	    linear-gradient(transparent 50%, hsl(0 0% 30% / 0.5)),
	    hsl(0 0% 0%);
	box-shadow: 0 -1px inset hsl(0 0% 100% / 0.35);
	width: 3.5em;
	aspect-ratio: 1;
	transition: width var(--speed);
	border-radius: 100px;
    }
    .icon {
	color: hsl(0 0% 90%);
	display: grid;
	place-items: center;
	z-index: 2;
    }
    .text {
	display: inline-block;
	z-index: 2;
	padding: 0 2rem;
    }
    button:is(:hover, :focus-visible) .action {
	width: 100%;
    }
    
    /* Midle body products list*/
    #wrapper {
		background-image: url('../images/skmt/background/medu_ntr_bk_2.jpeg');
 		font-family: "Cormorant Garamond",Georgia, serif;
		opacity:0;
	}

	em {
		font-style: italic;
		font-weight: 600;
	}

    #div0 {
		display: inline-block;
		float: left;
		padding:15px;
  }
    #div1 {
		display: inline-block;
 		padding:15px;
		transition: transform .2s;
   }
    #div2 {
		display: inline-block;
		padding:15px;
    }
    #div3 {
		display: inline-block;
        padding:15px;
    }
    

  #div4 {
      display: inline-block;
      padding:15px;
  }

   .roundImg1 {
       	border-radius: 10%;     
	overflow: hidden;          /* Hide overflow */
   }
   .roundImg {
       border-radius: 10%;     
	   overflow: hidden;          /* Hide overflow */
	   transition-duration: 1s;
}   }
   .roundImg img {
       object-fit: cover;
       width: 100%;               /* Fill the container width */
       display: block;
  }
	/*zoom effect*/
	.roundImg:hover {
		-ms-transform: scale(1.8); /* IE 9 */
		-webkit-transform: scale(1.8); /* Safari 3-8 */
		transform: scale(1.8);

	}
   .fixed-size {
       width: 300px;
       height: 300px;
   }
   
   .box h2 {
       color:white;r
	   font-family: "Cormorant Garamond",Georgia, serif;
   }
   
    .box {
	color:white;
	-moz-border-radius-topright:5px;
	-moz-border-radius-topleft:5px;
	-webkit-border-top-right-radius:5px;
	-webkit-border-top-left-radius:5px;

	font-family: "Cormorant Garamond", Georgia, serif;
	font-weight: 400;
	font-size: 18px;

    }
    
    
    /* Popup container -  */
    .popup {
	position: relative;
	display: inline-block;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

	width: 200px;
	height: 100px;
	}
    
    /* The actual popup */
    .popup .popuptext {
	visibility: hidden;
	width: 400px;
	background-color: #555;
	color: #fff;
	text-align: center;
	border-radius: 6px;
	padding: 8px 0;
	position: absolute;
	z-index: 1;
	bottom: 125%;
	left: 50%;
	margin-left: -80px;
	box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.5);
    }
    
    /* Popup arrow */
    .popup .popuptext::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: #555 transparent transparent transparent;
    }
    
    /* Toggle this class - hide and show the popup */
    .popup .show {
	visibility: visible;
	-webkit-animation: fadeIn 1s;
	animation: fadeIn 1s;
    }
    
    /* Add animation (fade in the popup) */
    @-webkit-keyframes fadeIn {
	from {opacity: 0;} 
	to {opacity: 1;}
    }
    
    @keyframes fadeIn {
	from {opacity: 0;}
	to {opacity:1 ;}
    }

    /***************back to top button*******************/


.scrollTopBtn {
    cursor: pointer;
    position: fixed; 
    bottom: 100px; 
    right: 100px;
    font-size: 2rem;
    line-height: 1.5;
    outline: none;
    text-decoration: none;
    padding: 0;
    display: inline-block;
    align-items: center;
    justify-content: center;
    border:0;
    background: var(--indicator-bg);
    border-radius:8%;

}

 .top_div_navigate
 {
    border: none;
    padding: 10px 20px;
    color: white;
    font-size: inherit;
    font-family: inherit;
 //   background-color:  hsla(0, 0%, 0%, 0);
 background-color: var(--indicator-bg);//transparent;

 }
 .top_div_navigate:hover
 {
     background-color:red;
 }



.scrollTopBtn .t_learn-more {
     width: 12rem;
     height: auto;
     background: pink;//transparent;
     border:0;
 }

.scrollTopBtn .t_learn-more .t_circle {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: relative;
  display: block;
  margin: 0;
  width: 3rem;
  height: 4rem;
  background: cyan;//#282936;
  border-radius: 1.625rem;
}
 .scrollTopBtn .t_learn-more .t_circle .t_icon {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  background: red;//  #fff;
}
 .scrollTopBtn .t_learn-more .t_circle .t_icon .t_arrow {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  left: 0.625rem;
  width: 100.125px;
  height: 0.125rem;
  background: magenta;//none;
}
.scrollTopBtn .t_learn-more .t_circle .t_icon .t_arrow::before {
  position: absolute;
  content: "";
  top: -0.25rem;
  right: 0.0625rem;
  width: 0.625rem;
  height: 0.625rem;
  border-top: 0.125rem solid #fff;
  border-right: 0.125rem solid #fff;
  transform: rotate(45deg);
}
.scrollTopBtn .t_learn-more .t_button-text {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.75rem 0;
  margin: 0 0 0 1.85rem;
  color: #282936;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}
.scrollTopBtn:hover .t_circle {
  width: 100%;
}
.scrollTopBtn:hover .t_circle .t_icon .t_arrow {
  background: #fff;
  transform: translate(1rem, 0);
}
.scrollTopBtn:hover .t_button-text {
  color: #fff;
}




    /***************
       End of CSS 
   *****************/