@font-face {
 font-family: 'Inter';
 src: url(/themes/custom/asmong/fonts/Inter-VariableFont_opsz,wght.ttf);
}
:root{
  --tuerkis:rgb(59, 179, 194);
  --tuerkis-dark:#0b7f82;
  --tuerkis-l:rgba(59, 179, 194, 0.7);
  --tuerkis-mlight:rgba(59, 179, 194, 0.5);
  --tuerkis-slight:rgba(59, 179, 194, 0.3);
  --tuerkis-xslight:rgba(59, 179, 194, 0.04);
  --text:#3A3A3A;
  --text-l:#4A4A4A;
  --back:#fff;
  --link:rgba(59, 179, 194, 0.7);
  --box-shadow:6px 8px 5px rgba(25, 39, 62, 0.08);
  --shadow: 0 18px 50px rgba(15, 72, 78, 0.10);
  --red-l:rgba(228, 27, 19, 0.7);  
  --red:rgb(228, 27, 19);  
  --yellow-l:rgba(253, 197, 0, 0.7);  
  --yellow:rgb(253, 197, 0);  
  --green-l:rgba(0, 156, 80, 0.7);  
  --green:rgb(0, 156, 80);
  --grey-xslight:rgba(146, 146, 146, 0.05);  
  --grey-slight:rgba(146, 146, 146, 0.3);  
  --grey-mlight:rgba(146, 146, 146, 0.5);  
  --grey-l:rgba(146, 146, 146, 0.7);  
  --grey:rgb(146, 146, 146);  
  --purple-l:rgba(121, 33, 130, 0.7);  
  --purple:rgb(121, 33, 130);  
  --brown-l:rgba(168, 105, 44, 0.7);  
  --brown:rgb(168, 105, 44); 
  --black-slight:rgba(0,0,0,0.3); 
  --black-mlight:rgba(0,0,0,0.3);  
  --black-l:rgba(0, 0, 0, 0.7);  
  --black:rgb(0, 0, 0);  
  --blue-l:rgba(0, 167, 224, 0.7);  
  --blue:rgb(0, 167, 224); 
  --dgreen:rgb(0, 92, 86);
  --dgreen-l:rgba(0, 92, 86,0.7);
  --nw:960px;
  --transall:all 0.5s linear;
  --border-t:1px solid var(--tuerkis-mlight);
  
}

html{
	font-size:calc(15px + 0.3125vw);	
}
body{
  font-family:Inter;
  font-weight:normal;
  font-size: 1rem;
  color:var(--text);
  margin:0;
  line-height: 1em;
}
h1,h2,h3,h4,h5,h6{
  font-weight:500;
  color:var(--text);
  margin:0.5em 0;
  line-height:1.35em;
}
a,a:hover,a:focus{
	color:var(--tuerkis);
	text-decoration:none;
}
button a,
.button a,
a.button{
  color: var(--text);
}
p{
  margin:0 0 1em;
}
p,li,span{
  line-height:1.35em;
}
img{
	width:100%;
	height:auto;
}
.alert {
	padding: 15px;
	margin-bottom: 20px;
	border: 1px solid transparent;
	border-radius: 4px;
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	font-size:0.7rem;
}
.alert p{
	margin:0;
}
.alert .close{
	background:none;
	border:none;
	cursor:pointer;
}
.alert-success {
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}
.alert-dismissable, .alert-dismissible {
  padding-right: 35px;
}
.edit{
	position:absolute;
	right:5px;
	top:5px;
	width:auto;
	height:auto;
	display:none;
	z-index:5;
}
.views-row{
  position:relative;
}
.views-row:hover .edit{
	display:block;
}
.edit a{
	font-size:0.5rem;
	color:var(--text);
	padding:0.25em 0.5em;
	border-radius:3px;
	background-color:var(--back);
	border:1px solid var(--text);
	display:inline-block;
}
.container-fluid,
.main-container-inner{
	display:flex;
	gap:15px;
}
.nav-tabs {
  border-bottom: 1px solid #ddd;
}
.nav {
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
  display:flex;
  gap:15px;
}
.nav > li > a {
  position: relative;
  display: block;
  padding: 10px 15px;
  font-size:0.85rem;
  margin-bottom:-1px;
}
.nav-tabs > li > a.is-active, .nav-tabs > li > a.is-active:hover, .nav-tabs > li > a.is-active:focus {
  color: #555555;
  cursor: default;
  background-color: #fff;
  border: 1px solid #ddd;
  border-bottom-color:#fff;
}
.container{
	padding:0 15px;
	width:100%;
	max-width:calc(100% - 30px);
	margin:0 auto;
}
.m-container{
	margin:0 auto;
	max-width:1040px;
}
.main-container{
	padding:50px 0 100px;
  min-height: 50vh;
}
.button{
	background-color:var(--tuerkis-xslight);
	border-color:var(--tuerkis-l);
	padding:0.5em;
	cursor:pointer;	
	border-radius:8px;
	transition:var(--transall);
}
.button:hover{
	background-color:var(--tuerkis);
	color:#fff;
	transition:var(--transall);
}
/* ==========================================================================
   top-header
   ========================================================================== */
.top-header-wrapper{
	position:sticky;
	z-index:1;
	top:0;	
	background-color:var(--back);
}
.toolbar-tray-open .top-header-wrapper{
	top:79px;
}
.top-header-wrapper .container-fluid{
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
	padding:0 15px;
}
.top-header-wrapper .logo{
	transition:all 0.5s linear;
	margin:10px 0 10px 5vw;
}
.top-header-wrapper .logo img{
	max-height:3rem;
	transition:max-height 0.5s linear;
}
.top-header-wrapper.top .logo img{
	max-height:35px;
	transition:max-height 0.5s linear;
}
.block-system-menu-blockaccount .menu{
	display:flex;
	gap:15px;
	justify-content:right;
}
.block-system-menu-blockaccount .menu li{
	list-style:none;
}
.block-system-menu-blockaccount .menu li a{
	font-size:0.8rem;
}
.block-system-menu-blockaccount .menu li a.phone{
	margin-right:40px;
}
/* ==========================================================================
   right-top-header
   ========================================================================== */
.right-top-header .block-system-menu-blockaccount .menu{
	margin:40px 0 0;
	padding:0;
	transition:margin 0.5s linear;
}
.top-header-wrapper.top .right-top-header .block-system-menu-blockaccount .menu{
	margin-top:10px;
	transition:margin 0.5s linear;
}
/* ==========================================================================
   middle-header
   ========================================================================== */

/* ==========================================================================
   navbar main-menu
   ========================================================================== */
header.navbar{
	background-color:#f8f8f8;
	border-top:1px solid #e7e7e7;
	border-bottom:1px solid #e7e7e7;
	position:sticky;
	z-index:1;
	top:50px;
}
.toolbar-tray-open header.navbar{
	top:129px;
}
header.navbar .block-system-menu-blockmain .menu{
	margin:0 auto;
  max-width: max-content;
	padding:0.4rem 0 0.5rem;
	display:flex;
	gap:20px;
}
header.navbar .block-system-menu-blockmain .menu li{
	list-style:none;
}
header.navbar .block-system-menu-blockmain .menu li a{
	color:var(--text-l);
	font-size:0.8rem;
}
/* ==========================================================================
   Browser Bar
   ========================================================================== */
.browser-bar {
  padding: 14px 18px;
  border-bottom: 1px solid #e4eded;
  display: flex;
  gap: 10px;
  align-items: center;
  background: #f8fbfb;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 20px 55px rgba(19, 70, 73, 0.12);
  margin: 0 0 40px;
}
.ball {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #d7e4e4;
}
.url {
  display: flex;
  flex-wrap: wrap;
  margin-left: 8px;
  flex: 1;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #e1ebeb;
  padding: 10px 14px;
  color: #6d8187;
  font-size: 14px;
}
/* ==========================================================================
   Footer
   ========================================================================== */
footer{
	background-color:var(--tuerkis-xslight);
	border-top:3px solid var(--tuerkis-l);
}
footer .block .menu{
	margin:0;
	padding:15px;
}
footer .block .menu li{
	list-style:none;
}
footer .block .menu li a{
	font-size:0.8rem;
}
.region-footer-bottom-left{
	display:flex;
	gap:50px;
	padding:15px 50px;
}
/* ==========================================================================
   Modal
   ========================================================================== */
#drupal-modal article p{
	font-size:0.75rem;
}
/* ==========================================================================
   Cards
   ========================================================================== */
.image-card, 
.mini-card, 
.category-card, 
.product-card, 
.detail-card, 
.note, 
.system-card{
background: #fff;
  border: 1px solid #e3eded;
  border-radius: 24px;
  box-shadow: var(--shadow);
}
.image-card {
  padding: 22px;
  min-height: 290px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #f4fbfb 0%, #fffdf7 100%);
}
.detail-card{
  padding: 22px;
}
.text-card{
  padding: 22px;
  height: max-content;
}
/* ==========================================================================
   Back to top
   ========================================================================== */
.back-to-top.bottom{
    position:fixed;
    right:2%;
    bottom:10%;
    width:60px;
    height:60px;
    z-index:199;
}
.back-to-top.bottom a{
    display: block;
    text-align: center;
}
.back-to-top.bottom a .icon{
    background: none;
    background-color: #fff;
    color:var(--tuerkis);
    border: 1px solid var(--tuerkis-l);
    border-radius: 5px;
    margin: 0;
    padding-top: 10px;
    font-size:2.5rem;
    opacity:0.5;
    -webkit-transition:all 0.5s linear;
    -o-transition:all 0.5s linear;
    transition:all 0.5s linear;
    width:60px;
    height:60px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    box-shadow: var(--shadow);
}
.back-to-top.bottom:hover a .icon{
    opacity:1;
    -webkit-transition:all 0.5s linear;
    -o-transition:all 0.5s linear;
    transition:all 0.5s linear;
    background-color:var(--tuerkis);
    color:#fff;
    border-color: var(--tuerkis);
}