/* Base*/
html {background: transparent url("bg1.jpg") 0 0 no-repeat fixed;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
  background-size: cover;
  }
body {
  background-color: transparent;
  color: var(--text, black);
  font-family: Lato;
}
.content-box {max-width: 980px;
  margin: 0 auto;
  background-color: var(--box, #dfa3ca63);
  padding: 20px 40px 70px;
  border-radius: 50px 100px;
  min-height: 670px;
  }
.l-box {padding: 1em; margin:1em;}
.l-content {padding:10px; margin:10px;}
.pure-menu-link {
	font-size: 110%;
	color: var(--menu, #ad108d);
	}
.pure-menu-link:hover
 {
    background-color: #fff9;
 }  
.footer {font-size: 80%;
	text-align: center;

}
/*links page*/
.dot {list-style: none;}
.links {
color: var(--menu, #ad108d);
background-color: #fff;
font-size: 120%;
border-radius: 10px 50px;
padding: 1.3em 3em;
margin: 0.6em;
border: 3px var(--menu, #ad108d);
border-style: dashed;
}
.links:hover {background-image: linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1));}
.links-des {margin-left: 4em;}

/* dark/light mode switch*/

:root[color-mode="light"] .light--hidden {
  display: none;
}
:root[color-mode="dark"] .dark--hidden {
  display: none;
}
:root[color-mode="light"] {
	background: transparent url("bg1.jpg") 0 0 no-repeat fixed;
	-webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
  background-size: cover;
--text: black;
--box: #dfa3ca63;
--menu: #ad108d;
}
:root[color-mode="dark"] {
	background: transparent url("bg2.jpg") 0 0 no-repeat fixed;
	 -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
  background-size: cover;
--text: white;
--box: #a3a7df63;
--menu: #0ee1ba;
}
.dm-button {
background-color: transparent;
font-size: 90%;
border-radius: 10px;
 color: var(--text, black);
}
.dm-button:hover {
	background-image: linear-gradient(transparent,rgba(0,0,0,.05) 50%,rgba(0, 0, 0, 0));
}
/* gallery*/
.right {overflow:hidden;}
.left {display: flex;
  align-items: center;
  flex: auto;
  justify-content: center;
}
.column {
  float: left;
 /* width: 25%; */
  padding: 10px;
}
.column img {
  opacity: 0.8;
  cursor: pointer;
  height: 10em;
}
.column img:hover {
  opacity: 1;
}
.row:after {
  content: "";
  display: table;
  clear: both;
}
.img-container {
  position: relative;
  display: none;
}
.closebtn {
  position: absolute;
  top: 10px;
  right: 15px;
  color: white;
  font-size: 35px;
  cursor: pointer;
}

//////////* gallery end*//////////////

/* menus */
.custom-can-transform {overflow: hidden;}
.custom-wrapper {
	      background-color: transparent;
          margin-bottom: 1em;
          -webkit-font-smoothing: antialiased;
          overflow: hidden;
          -webkit-transition: height 0.5s;
          -moz-transition: height 0.5s;
          -ms-transition: height 0.5s;
          transition: height 0.5s;
      }
.custom-wrapper.open {max-height: 19em;}
.custom-toggle {
          width: 50px;
          height: 50px;
          position: absolute;
          top: 0;
          right: 0;
          display: none;
      }
.custom-toggle .bar {
		background-color: white;
          display: block;
          width: 30px;
          height: 5px;
          border-radius: 100px;
          position: absolute;
          top: 18px;
          right: 7px;
          -webkit-transition: all 0.5s;
          -moz-transition: all 0.5s;
          -ms-transition: all 0.5s;
          transition: all 0.5s;
      }
.custom-toggle .bar:first-child {
          -webkit-transform: translateY(-6px);
          -moz-transform: translateY(-6px);
          -ms-transform: translateY(-6px);
          transform: translateY(-6px);
      }
.custom-toggle.x .bar {
          -webkit-transform: rotate(45deg);
          -moz-transform: rotate(45deg);
          -ms-transform: rotate(45deg);
          transform: rotate(45deg);
      }
.custom-toggle.x .bar:first-child {
          -webkit-transform: rotate(-45deg);
          -moz-transform: rotate(-45deg);
          -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
      }
.custom-menu-3 {text-align: right;}

@media (max-width: 50em) {
		
.custom-menu-3 {text-align: left;}	
.custom-wrapper.open {max-height: 20em;}
.custom-wrapper {max-height:4em;}
.custom-toggle {display: block;}
.content-box {border-radius: 0; min-height: auto;}
.l-box {padding: 2px; margin:2px;}
.l-content {padding:5px; margin:5px;}
		
						}