@font-face { font-family:iransans; src: url('../fonts/iransans.otf'); src: url('../fonts/iransans.eot') format('eot'), url('../fonts/iransans.woff') format('woff'), url('../fonts/iransans.ttf') format('truetype'), url('../fonts/iransans.woff2') format('woff2'); font-display: swap; }

*, ol, ul, li,p {padding:0; margin:0; transition:all 0.3s ease;}

body { font-family: iransans ,sans-serif; text-align: justify; line-height: 35px;}

h1,h2,h3,h4,h5,h6 { font-family: iransans ,sans-serif; }

a, a:not([class]) { text-decoration:none; }

body.itemid-109 { background:#111; color:#fff; }

body.itemid-109 a,body.itemid-109 .page-header { color:#FFD63B; }

body.itemid-109 .page-header::before, body.itemid-109 .page-header::after { border-color:#FFD63B; }

body.itemid-109 .com-content-article__body {text-align: center;
font-size: 1.2rem;
line-height: 70px; }

body.itemid-109 .com-content-article__body svg {
  width: 30px;
  height: 30px;
  margin-left: 10px;
}

.itemid-107 main{  max-width: 600px;  margin: 0 auto;  text-align: justify;}

.itemid-107 main img {width:100%; margin-bottom:20px; } 

.itemid-101 main { text-align: center;max-width: 400px;margin: 0 auto 30px;border: 1px solid #1c1c1c;padding: 30px;border-radius: 30px; }
.itemid-101 main img { max-width:200px; }

/*********** HEADER **********/

.container-header { display: flex; flex-direction: column; padding: 0 1em; background:#1c1c1c;}

.container-header .navbar-brand { margin:auto; }

.brand-logo img { max-width:100px; }

body.wrapper-fluid header .grid-child { padding:0; width:auto;}

.container-header .grid-child { margin:0; }

.metismenu.mod-menu .metismenu-item { margin:0; border-top: 1px solid #373737;}
.metismenu.mod-menu .metismenu-item a { font-size: 14px; width:100%;} 
.metismenu.mod-menu .metismenu-item.active a, .metismenu.mod-menu .metismenu-item a:hover { text-decoration:none; color:#FFD63B;}

#MainMenu.open {  max-height: 600px; }
#MainMenu {  max-height: 0;  overflow: hidden;  transition: all 0.7s ease;}
.metismenu.mod-menu .metismenu-item > a:focus, .metismenu.mod-menu .metismenu-item > button:focus { outline: none; }
.moduletable.menubox {  width: 100%;  text-align: center;}

/**** Nav Icon ***/
#navbtn
{
    position: absolute;
    top: 29px;
    left: 10px ;
    display: block;
    width: 30px;
    height: 30px;
    transform: translateY(-50%);
    transition: 0.3s ease transform;
    cursor: pointer;
z-index:100;
direction: ltr;
}

#navbtn div
{
    width: 6px;
    height: 3px;
    background-color: #fff;
    margin-left: 0;
    margin-bottom: 6px;
    border-radius: 4px;
    transition: 0.3s ease width, 0.3s ease margin-left, 0.3s ease margin-bottom, 0.3s ease background-color;
}

#navbtn div:first-child
{
    width: 22px;
}

#navbtn.close:hover div:first-child {
    width: 8px;
}

#navbtn div:nth-child(2)
{
    width: 15px;
}

#navbtn div:last-child
{
    width: 8px;
    margin-bottom: 0;
}

#navbtn.close:hover div:last-child {
    width: 22px;
}

#navbtn.open
{
    transform: translateY(-50%) rotateZ(-90deg);
}
#navbtn.open div
{
    width: 6px;
    margin-left: 12px;
    margin-bottom: 3px;
    background-color: #FFD63B;
}

/************ FOOTER ************/
.footerbox { margin:0 auto; text-align:center;}
[dir="rtl"] .footer, .container-footer { background:#1c1c1c; }
.footer a { color:#FFD63B; }

.footerlogo {  border: 8px solid #fff;  max-width: 200px;}

.socialfooter img, .socialfooter svg {width: 40px;height: 40px;display: block; opacity:0.7; }

.socialfooter img:hover, .socialfooter svg:hover {opacity:1; }

.socialfooter {  display: flex;  justify-content: center;  grid-gap: 2em;  margin: 30px 0; direction:ltr;}

.infofooter { display: flex;flex-direction: column;direction: ltr;grid-gap: 1em;}
.infofooter span { }
.infofooter svg { padding: 3px;width: 35px;height: 35px;margin-right: 8px;}




.button-54 {
  font-size: 13px;
  letter-spacing: 2px;
  text-decoration: none;
  text-transform: uppercase;
  color: #FDCA00;
  cursor: pointer;
  border: 3px solid;
  padding: 0.25em 0.5em;
  box-shadow: 1px 1px 0px 0px, 2px 2px 0px 0px, 3px 3px 0px 0px, 4px 4px 0px 0px, 5px 5px 0px 0px;
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
background-color: #000;
}

.button-54:active {
  box-shadow: 0px 0px 0px 0px;
  top: 5px;
  left: 5px;
}

.aboutlogo { background:#1c1c1c; border-radius:10px; margin:0 0 20px 0; }

.page-header h1{
  align-items: center;
  display: grid;
  width: 100%;
  text-align: center;
font-size:22px;
}

.weave, .page-header {
  display: flex;
  width: 120px;
  height: 120px;
  border: 4px solid transparent;
  border-radius: 36px;
  margin: 40px auto;
  position: relative;
  color: #1c1c1c;
  text-align: center;
  font: 700 30px/115px "Quicksand", sans-serif;
}
.weave:before, .weave:after, .page-header:before, .page-header:after {
  display: block;
  width: 120px;
  height: 120px;
  border: 4px solid #1c1c1c;
  border-radius: 36px;
  content: "";
  position: absolute;
  top: -4px;
  left: -4px;
}
.weave:before, .page-header:before {
  -moz-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
}
.weave:after, .page-header:after {
  -moz-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  -webkit-transform: rotate(60deg);
  transform: rotate(60deg);
}


/************ TABS *************/



.tabcontent ul {
    margin: 17px 0px;
    font-size: 14px;
max-height: 550px;
overflow-y: auto;
}

.tabcontent li {
  border-bottom: 1px solid #f1f1f1;
  padding: 10px 6px 10px 70px;
  position: relative;
}

.tabcontent .mod-articles-category-category {
  color: #fff;
  font-size: 11px;
  text-align: center;
  position: absolute;
  left: 6px;
  border: 1px solid #d3d3d3;
}

.tabcontent .mod-articles-category-category a {
  padding: 0 3px;

}

.tabcontent .mod-articles-category-category a:hover {
  background-color: #e5383b;
  color: #f7f7f7;
text-decoration: none;
}

.tabcontent .mod-articles-category-date {
  font-size: 11px;
  color: #B1A7A6;
}

/* Style the tab */
.tab {
  overflow: hidden;
  border-bottom: 1px solid #FFD63B;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
}

/* Style the buttons inside the tab */
.tab button {
display: flex;
flex-direction: column;
  background-color: inherit;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 20px;
  transition: 0.3s;
  font-size: 1rem;
color:#111;
opacity:0.6;
}

.tab button svg { width: 100%;
height: auto; max-width:150px;}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #FFD63B;
color:#111;
opacity:1;
}

/* Create an active/current tablink class */
.tab button.active {
 background-color: #FFD63B;
color: #111;
opacity:1;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 40px 12px;
  border-top: none;
margin-top:0;

}

/*********** VIDEO ********/
.videoholder { display: grid;
grid-template-columns: 1fr;
grid-gap: 2em; margin-top:50px;}

.videobox {
  position: relative;
  height: 0;
  overflow: hidden;
  padding-bottom: 56.25%;
}
.videobox iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}



/************* RESPONSIVE ****************/

@media screen and (min-width: 600px) {
.container-header { display: flex; flex-direction: row-reverse; padding: 0 1em;}
.metismenu.mod-menu { display: flex;  flex-direction: row;}
.metismenu.mod-menu .metismenu-item { border:0; }
.metismenu.mod-menu .metismenu-item a { width:auto; }
#navbtn { display: none; }
#MainMenu {  max-height: inherit;  overflow: visible;}
.container-header .grid-child.container-nav { margin-left:auto; }
.videoholder { grid-template-columns: 1fr 1fr 1fr;}


/********** MENU **********/

.metismenu.mod-menu .metismenu-item { padding:0}
.metismenu.mod-menu .metismenu-item a { padding:44px 2em; }

.container-header .metismenu > li > a::after {
  background: transparent;
  bottom: 0;
  content: "";
  display: block;
  height: 6px;
  left: 50%;
  margin: auto;
  opacity: 1;
  position: absolute;
  right: 50%;
  -webkit-transition: all .2s ease,background-color .2s ease;
  -o-transition: all .2s ease,background-color .2s ease;
  transition: all .2s ease,background-color .2s ease;
}

 .container-header .metismenu > li > a::before {
  background: transparent;
  top: 0;
  content: "";
  display: block;
  height: 6px;
  left: 50%;
  margin: auto;
  opacity: 1;
  position: absolute;
  right: 50%;
  -webkit-transition: all .2s ease,background-color .2s ease;
  -o-transition: all .2s ease,background-color .2s ease;
  transition: all .2s ease,background-color .2s ease;
}

.container-header .metismenu > li.active > a::after, .container-header .metismenu > li.active > a::before, .container-header .metismenu > li:hover > a::before, .container-header .metismenu > li:hover > a::after{
  background: #ffd63b;
  left: 0;
  right: 0;
}
}


:root {
  --cassiopeia-color-primary: #912b3b;
  --cassiopeia-color-link: #30638d;
  --cassiopeia-color-hover: #57a9bb;
}