@charset "utf-8";
/* بسم الله الرحمن الرحیم */

/* IRANSans Fonts */
@font-face{font-family:IRANSans;font-style:normal;font-weight:700;src:url(fonts/IRANSansWeb_Bold.eot);src:url(fonts/IRANSansWeb_Bold.eot?#iefix) format("embedded-opentype"),url(fonts/IRANSansWeb_Bold.woff2) format("woff2"),url(fonts/IRANSansWeb_Bold.woff) format("woff"),url(fonts/IRANSansWeb_Bold.ttf) format("truetype")}@font-face{font-family:IRANSans;font-style:normal;font-weight:500;src:url(iransans/IRANSansWeb_Medium.eot);src:url(iransans/IRANSansWeb_Medium.eot?#iefix) format("embedded-opentype"),url(fonts/IRANSansWeb_Medium.woff2) format("woff2"),url(fonts/IRANSansWeb_Medium.woff) format("woff"),url(fonts/IRANSansWeb_Medium.ttf) format("truetype")}@font-face{font-family:IRANSans;font-style:normal;font-weight:300;src:url(iransans/IRANSansWeb_Light.eot);src:url(iransans/IRANSansWeb_Light.eot?#iefix) format("embedded-opentype"),url(fonts/IRANSansWeb_Light.woff2) format("woff2"),url(fonts/IRANSansWeb_Light.woff) format("woff"),url(fonts/IRANSansWeb_Light.ttf) format("truetype")}@font-face{font-family:IRANSans;font-style:normal;font-weight:200;src:url(iransans/IRANSansWeb_UltraLight.eot);src:url(iransans/IRANSansWeb_UltraLight.eot?#iefix) format("embedded-opentype"),url(fonts/IRANSansWeb_UltraLight.woff2) format("woff2"),url(fonts/IRANSansWeb_UltraLight.woff) format("woff"),url(fonts/IRANSansWeb_UltraLight.ttf) format("truetype")}@font-face{font-family:IRANSans;font-style:normal;font-weight:400;src:url(iransans/IRANSansWeb.eot);src:url(iransans/IRANSansWeb.eot?#iefix) format("embedded-opentype"),url(fonts/IRANSansWeb.woff2) format("woff2"),url(fonts/IRANSansWeb.woff) format("woff"),url(fonts/IRANSansWeb.ttf) format("truetype")}
/* IRANSansX Fonts */
@font-face{font-family:IRANSansX;font-style:normal;font-weight:100;src:url(fonts/IRANSansX-Thin.woff) format("woff"),url(fonts/IRANSansX-Thin.woff2) format("woff2")}@font-face{font-family:IRANSansX;font-style:normal;font-weight:200;src:url(fonts/IRANSansX-UltraLight.woff) format("woff"),url(fonts/IRANSansX-UltraLight.woff2) format("woff2")}@font-face{font-family:IRANSansX;font-style:normal;font-weight:300;src:url(fonts/IRANSansX-Light.woff) format("woff"),url(fonts/IRANSansX-Light.woff2) format("woff2")}@font-face{font-family:IRANSansX;font-style:normal;font-weight:500;src:url(fonts/IRANSansX-Medium.woff) format("woff"),url(fonts/IRANSansX-Medium.woff2) format("woff2")}@font-face{font-family:IRANSansX;font-style:normal;font-weight:600;src:url(fonts/IRANSansX-DemiBold.woff) format("woff"),url(fonts/IRANSansX-DemiBold.woff2) format("woff2")}@font-face{font-family:IRANSansX;font-style:normal;font-weight:800;src:url(fonts/IRANSansX-ExtraBold.woff) format("woff"),url(fonts/IRANSansX-ExtraBold.woff2) format("woff2")}@font-face{font-family:IRANSansX;font-style:normal;font-weight:900;src:url(fonts/IRANSansX-Black.woff) format("woff"),url(fonts/IRANSansX-Black.woff2) format("woff2")}@font-face{font-family:IRANSansX;font-style:normal;font-weight:950;src:url(fonts/IRANSansX-ExtraBlack.woff) format("woff"),url(fonts/IRANSansX-ExtraBlack.woff2) format("woff2")}@font-face{font-family:IRANSansX;font-style:normal;font-weight:1000;src:url(fonts/IRANSansX-Heavy.woff) format("woff"),url(fonts/IRANSansX-Heavy.woff2) format("woff2")}@font-face{font-family:IRANSansX;font-style:normal;font-weight:700;src:url(fonts/IRANSansX-Bold.woff) format("woff"),url(fonts/IRANSansX-Bold.woff2) format("woff2")}@font-face{font-family:IRANSansX;font-style:normal;font-weight:400;src:url(fonts/IRANSansX-Regular.woff) format("woff"),url(fonts/IRANSansX-Regular.woff2) format("woff2")}

/* Typography */
body{font-family:IRANSans,IRANSansX!important;font-weight:300; color:#121212 !important}h1,h2,h3,h4,h5,h6,input,textarea{font-family:IRANSans!important}h1{font-weight:700}.text-small{font-size:.8em}.text-xsmall{font-size:.6em}.text-large{font-size:1.2em}.text-xlarge{font-size:1.4em}.text-underline{text-decoration:underline}.text-ultralight{font-weight:200}.text-light{font-weight:300}.text-regular{font-weight:400}.text-medium{font-weight:500}.text-bold{font-weight:700}blockquote{font-weight:500;padding:10px;border:1px dashed #666}.farsiparagraph{font-size:1em;float:right;padding-right:20px;padding-top:10px;padding-bottom:10px}.englishparagraph{font-size:1em;float:left;direction:ltr;padding-left:20px;padding-top:10px;padding-bottom:10px}p{font-family:IRANSans!important;font-weight:500;}
html{font:16px IRANSans, Tahoma,  arial,sans-serif;direction:rtl;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%overflow-y: scroll;}

/*.ltr{direction:ltr}.text-right{text-align:right}.text-center{text-align:center}.text-left{text-align:left}*/
/*.dropdownmenu{padding-right:70px;}
.dropdownmenu ul, .dropdownmenu li {
	margin: 0;
	padding: 0;
}
.dropdownmenu ul {
	background: gray;
	list-style: none;
	width: 100%;
}
.dropdownmenu li {
	float: right;
	position: relative;
	width:auto;
}
.dropdownmenu a ,  .dropdownmenu span {
	
	color: #000 !important;
	display: block;
	font: bold 12px/20px IRANSansX;
	padding: 10px 25px;
	text-align: center;
	text-decoration: none;
	-webkit-transition: all .25s ease;
	-moz-transition: all .25s ease;
	-ms-transition: all .25s ease;
	-o-transition: all .25s ease;
	transition: all .25s ease;
}
.dropdownmenu li:hover a , .dropdownmenu li:hover span {
	background: #7685be;
	color: #ffffff !important;
}
.dropdownmenu li > ul  {
	right: 0;
	opacity: 0;
	position: absolute;
	top: 35px;
	visibility: hidden;
	z-index: 1;
	width:170%;
}
 .dropdownmenu li:hover ul {
	opacity: 1;
	top: 40px;	/* adjust this as per top nav padding top & bottom comes */
/*	visibility: visible;
	
}
.dropdownmenu li ul li {
	float: none;
	width: 100%;
}
.dropdownmenu li ul a:hover{
	background:  #1e81b0 ;/*rgba(245, 245, 245, 0.75); #DF4B05    #e7e7f2*/
}  
/*.dropdownmenu li ul a{
	background-color:#7685be;
}

#dropdownmenus{display:none !important;}


@media (min-width: 1200px) {
	
	#dropdownmenus{display:block !important;}
	
	a[href="#my-mmenu"]{display:none !important;}
	
	
}
*/

.dropdownmenu ul {
    all: unset;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    
}
.dropdownmenu ul li {
    float: right;
	position: relative;
	width:auto;
}
.dropdownmenu ul li a {
    color: #000 !important;
	display: block;
	font: bold 12px/20px IRANSansX;
	padding: 10px 25px;
	text-align: center;
	text-decoration: none;
	-webkit-transition: all .25s ease;
	-moz-transition: all .25s ease;
	-ms-transition: all .25s ease;
	-o-transition: all .25s ease;
	transition: all .25s ease;
}

/* Style the submenus */
.dropdownmenu ul li ul {
    position: absolute;
    display: none;
    flex-direction: column;
}

.dropdownmenu ul ul li {
    width: max-content;
    min-width: 100%;
    max-width: 200px;
}

.dropdownmenu ul a {
    all: unset;
    color: #fff;
    cursor: pointer;
}
.dropdownmenu ul a:hover {
    /*background: rgba(0, 0, 0, 0.7);*/
	background: #7685be;
	color: #ffffff !important;
}

.dropdownmenu ul li:hover > ul {
    display: flex; /* Show submenus on hover */
}

/* Style the third-level submenu */
.dropdownmenu ul ul ul {
    top: 0px;	/* adjust this as per top nav padding top & bottom comes */
    right: 100%;
	background:  #1e81b0 ;
}
	
.dropdownmenu{padding-right:70px;}
.dropdownmenu ul, .dropdownmenu li {
	margin: 0;
	padding: 0;
}
.dropdownmenu ul {
	
	list-style: none;
	width: 140%;
}
.dropdownmenu li {
	float: right;
	position: relative;
	width:auto;
}

.dropdownmenu li:hover a , .dropdownmenu li:hover span {
	background: #7685be;
	color: #ffffff !important;
}

 
.dropdownmenu li ul a{
	background-color:#7685be;
}
		
.dropdownmenu li ul a:hover{
	background:  #1e81b0 ;/*rgba(245, 245, 245, 0.75); #DF4B05    #e7e7f2*/
} 
.dropdownmenu li ul a:hover ul a{
	background:  #1e81b0 ;/*rgba(245, 245, 245, 0.75); #DF4B05    #e7e7f2*/
} 		
		

#dropdownmenus{display:none !important;}


@media (min-width: 1200px) {
	
	#dropdownmenus{display:block !important;}
	
	a[href="#my-mmenu"]{display:none !important;}
	
	
}	
/*************Slide 2 **************/
.swiper-container {
      width: 100%;
      height: 100%;
    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
	
	.swiper-container3{width: 62%;margin: 0 !important;}
.swiper-container3 .swiper-slide h4{width: 100%;height: 100%;}
.swiper-container3 .swiper-slide h4>img{width: 100%;height: auto;}
/*.swiper-container3 .swiper-slide h4{width: 100%;height: 100%;background-color: #90b0c8;}
.swiper-container3 .swiper-slide:nth-child(2n)>h4{width: 100%;height: 100%;background-color: #ffb914;}*/



/*.swiper-container3 .swiper-slide:nth-child(6)>h4{width: 100%;height: 100%;background-color: #90b0c8;}
.swiper-container3 .swiper-slide:nth-child(7)>h4{width: 100%;height: 100%;background-color: #ffb914;}
.swiper-container3 .swiper-slide:nth-child(8)>h4{width: 100%;height: 100%;background-color: #90b0c8;}
.swiper-container3 .swiper-slide:nth-child(9)>h4{width: 100%;height: 100%;background-color: #ffb914;}
.swiper-container3 .swiper-slide:nth-child(9)>h4{width: 100%;height: 100%;background-color: #ffb914;}*/



.swiper-container3 .swiper-button-next{outline: none;background-image: url(img/ar.png) !important;top:81%;left: 24px !important;width: 48px;height: 48px;background-size: 48px 48px;right: 92.8% !important;transform: rotate(180deg);-webkit-transform: rotate(180deg);}
.swiper-container3 .swiper-button-prev{outline: none;background-image: url(img/ar.png) !important;top:81%;left: 24px !important;width: 48px;height: 48px;background-size: 48px 48px;right: 85% !important;}

.swiper-container3 .swiper-pagination{color: #fff !important;bottom: 25% !important;
    right: 91% !important;
    width: auto !important;
}	
		
@media only screen and (max-width:1440px ) {
	
	.swiper-container3 .swiper-pagination{bottom: 32% !important;right:87% !important;}
	.swiper-container3 .swiper-button-next{right: 89%;top: 79%;}
	.swiper-container3 .swiper-button-prev{top: 79%;right: 79%;}
	
		}
@media only screen and (max-width:750px ) {
	.swiper-container3 .swiper-button-prev{display: none;}
	.swiper-container3 .swiper-button-next{display: none;}
	.swiper-container3 .swiper-pagination{bottom: 16% !important;right: 64% !important;width: 74px !important;font-size: 14px;}
	
		}
		
.app_ban{width:83%;margin: 66px auto 0;height: auto;position: relative;}



.app_ban .app_txt>h4{position: absolute;width: 62%;z-index: 1;right: 0;top: 50%;transform:translateY(-50%);-webkit-transform:translateY(-50%);}
.app_ban .app_txt>h4>img{width: 100%;}
.app_ban .app_txt{position: absolute;top: 50%;right: 10%;transform:translateY(-50%);-webkit-transform:translateY(-50%);width:45%;text-align: right;z-index: 5;}
.app_ban .app_txt>h3>span{font-size: 18px;color:#ffffff;}
.app_ban .app_txt>h3>p{font-size: 48px;color: #fff;margin: 37px 0 37px;text-transform: uppercase;}
.app_ban .app_txt>h3>font{font-size: 20px;color: #ffffff;line-height: 26px;display: none;}
.app_ban .app_txt>h3>a{display: block;width: 158px;height: 43px;border: 1px solid #fff;font-size: 16px;color: #fff;text-align: center;line-height: 45px;margin-top: 52px;position: relative;z-index: 1;transition: all .5s;}
.app_ban .app_txt>h3>a:after{content: "";display: block;position: absolute;top: 0;left: 0;z-index: -1;width: 0;height: 100%;transition: all .5s;background-color:#fff;}
.app_ban .app_txt>h3>a:hover:after{width: 100%;}
.app_ban .app_txt>h3>a:hover{color: #003487;}
.swiper-container3{width: 62%;margin: 0 !important;}
.swiper-container3 .swiper-slide h4{width: 100%;height: 100%;}
.swiper-container3 .swiper-slide h4>img{width: 100%;height: auto;}
/*.swiper-container3 .swiper-slide h4{width: 100%;height: 100%;background-color: #90b0c8;}
.swiper-container3 .swiper-slide:nth-child(2n)>h4{width: 100%;height: 100%;background-color: #ffb914;}*/



/*.swiper-container3 .swiper-slide:nth-child(6)>h4{width: 100%;height: 100%;background-color: #90b0c8;}
.swiper-container3 .swiper-slide:nth-child(7)>h4{width: 100%;height: 100%;background-color: #ffb914;}
.swiper-container3 .swiper-slide:nth-child(8)>h4{width: 100%;height: 100%;background-color: #90b0c8;}
.swiper-container3 .swiper-slide:nth-child(9)>h4{width: 100%;height: 100%;background-color: #ffb914;}
.swiper-container3 .swiper-slide:nth-child(9)>h4{width: 100%;height: 100%;background-color: #ffb914;}*/



.swiper-container3 .swiper-button-next{outline: none;background-image:  url(img/ar.png) !important;top:81%;left: 24px !important;width: 48px;height: 48px;background-size: 48px 48px;right: 92.8% !important;transform: rotate(180deg);-webkit-transform: rotate(180deg);}
.swiper-container3 .swiper-button-prev{outline: none;background-image: url(img/ar.png) !important;top:81%;left: 24px !important;width: 48px;height: 48px;background-size: 48px 48px;right: 85% !important;}

.swiper-container3 .swiper-pagination{color: #fff !important;bottom: 25% !important;
    right: 91% !important;
    width: auto !important;
}
.swiper-container-v{position: absolute !important;content: "";width:62%;left:0;top: 0;display: block;height: 100%;z-index: 1 !important;}
.swiper-container-v img{width: 100%;transition:all .5s;}
.swiper-container-v img:hover{transform:scale(1.03);}
.swiper-slide{background-color: transparent;}

@media only screen and (min-width: 240px) and (max-width: 768px){
	.app_ban .app_txt>h3>p{font-size: 14px;color: #fff;margin: 14px 0 0px;text-transform: uppercase;}
	.swiper-container3 .swiper-pagination{right: 70% !important;}
	
}
/*********************************/
.page--gallery-list .gallery-hero__swiper .swiper-wrapper {
    opacity: 1;
    -webkit-transition-timing-function: linear !important;
    -o-transition-timing-function: linear !important;
    transition-timing-function: linear !important
}

.page--gallery-list .gallery-hero__swiper .swiper-slide {
    width: auto;
    max-width: 100%;
    transition: opacity .3s ease
}

@media (min-width: 1280px) {
    .page--gallery-list .gallery-hero__swiper .swiper-slide {
        max-width: 960px
    }
}

.page--gallery-list .gallery-hero__swiper.is-loading {
    overflow: hidden;
    height: 320px
}

.page--gallery-list .gallery-hero__swiper.is-loading .loading-card, .page--gallery-list .gallery-hero__swiper.is-loading .gallery-detail-modal.is-loading .color-gallery, .gallery-detail-modal.is-loading .page--gallery-list .gallery-hero__swiper.is-loading .color-gallery {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding-bottom: 0
}

.page--gallery-list .gallery-hero__swiper.is-loading .swiper-wrapper {
    white-space: nowrap
}

.page--gallery-list .gallery-hero__swiper.is-loading .swiper-wrapper .swiper-slide {
    opacity: 0;
    display: inline-block;
    max-width: 100%;
    margin-right: 12px
}

@media (min-height: 832px) {
    .page--gallery-list .gallery-hero__swiper.is-loading {
        height: 400px
    }
}

.page--gallery-list .gallery-hero .hero-card {
    display: block;
    position: relative
}

.page--gallery-list .gallery-hero .hero-card .hero-img  a > img {
    max-height: 200px
}

.page--gallery-list .gallery-hero .hero-card .hero-link {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

.page--gallery-list .gallery-hero .btn-scroll {
    position: relative;
    margin-top: 3.25rem;
    padding-bottom: 3.25rem;
    font-size: .875rem;
    font-weight: 700;
    letter-spacing: .05em
}

.page--gallery-list .gallery-hero .btn-scroll::before {
    content: "";
    position: absolute;
    top: 2rem;
    bottom: 0;
   /* left: 50%; */
    right: 50%;
    width: 2px;
    background-color: currentColor;
    transform: translateX(-50%)
}

.page--gallery-list .gallery-hero .btn-scroll:focus, .page--gallery-list .gallery-hero .btn-scroll:active {
    box-shadow: none
}

.page--gallery-list .section--gallery-list {
    padding-top: 3.25rem
}

.page--gallery-list .section--gallery-list .filter-group .custom-checkbox-btn {
    margin-bottom: 6px
}

.page--gallery-list .section--gallery-list .filter-group .custom-checkbox-btn .custom-control-label {
    padding-top: .75rem;
    padding-bottom: .75rem
}

.page--gallery-list .section--gallery-list .filter-group .custom-checkbox-btn + .custom-checkbox-btn {
    margin-left: 3px
}

@media (min-width: 640px) {
    .page--gallery-list .section--gallery-list .filter-group .custom-checkbox-btn {
        min-width: 7rem
    }

    .page--gallery-list .section--gallery-list .filter-group .custom-checkbox-btn + .custom-checkbox-btn {
        margin-left: 6px
    }
}

@media (min-width: 960px) {
    .page--gallery-list .section--gallery-list .filter-group .custom-checkbox-btn {
        min-width: 10rem
    }

    .page--gallery-list .section--gallery-list .filter-group .custom-checkbox-btn + .custom-checkbox-btn {
        margin-left: 12px
    }
}

.page--gallery-list .section--gallery-list .gallery-grid {
    margin-left: -6px;
    margin-right: -6px
}

.page--gallery-list .section--gallery-list .gallery-grid .grid-item, .page--gallery-list .section--gallery-list .gallery-grid .grid-sizer {
    width: 50%;
    padding: 0 6px;
    margin-bottom: 12px
}

.page--gallery-list .section--gallery-list .gallery-grid.is-loading {
    display: flex;
    flex-wrap: wrap
}

.page--gallery-list .section--gallery-list .gallery-grid.is-loading .grid-sizer {
    display: none
}

@media (min-width: 640px) {
    .page--gallery-list .section--gallery-list .gallery-grid .grid-item, .page--gallery-list .section--gallery-list .gallery-grid .grid-sizer {
        width: 33.3333%
    }
	.page--gallery-list .gallery-hero .hero-card .hero-img  a > img {
    max-height: 110px;
}
}

@media (min-width: 960px) {
    .page--gallery-list .section--gallery-list .gallery-grid .grid-item, .page--gallery-list .section--gallery-list .gallery-grid .grid-sizer {
        width: 25%
    }
	.page--gallery-list .gallery-hero .hero-card .hero-img  a > img {
    max-height: 140px;
}
	
}

@media (min-width: 1280px) {
    .page--gallery-list .section--gallery-list .gallery-grid .grid-item, .page--gallery-list .section--gallery-list .gallery-grid .grid-sizer {
        width: 20%
    }
	.page--gallery-list .gallery-hero .hero-card .hero-img  a > img {
    max-height: 170px;
}


.page--gallery-list .gallery-hero .hero-card .hero-img  a > img {
    max-height: 200px;
}

	}
/*.hero-img .overlay {
  position: absolute; 
  bottom: 0; 
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5); /* Black see-through */
 /* color: #f1f1f1; 
  width: 100%;
  transition: .5s ease;
  opacity:0;
  color: white;
  font-size: 20px;
  padding: 20px;
  text-align: center;
}

.hero-imgr:hover .overlay {
  opacity: 1;
}*/
	

/*************************************************/
.page--technical-manage .section-categories .btn-category {
    min-width: 8rem; font-size: 17px;
}

@media (min-width: 640px) {
    .page--technical-manage .section-categories .btn-category {
        min-width: 12rem
    }
}

@media (min-width: 960px) {
    .page--technical-manage .section-categories .btn-category {
       /* min-width: 0/*/
    }
}
.m-1 {
    margin: .25rem !important
}
.mr-n1, .mx-n1 {
    margin-right: -0.25rem !important
}

.mb-n1, .my-n1 {
    margin-bottom: -0.25rem !important
}

.btn-category {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    border-color: #e9ecef
}

.btn-category:hover, .btn-category:focus, .btn-category:active {
    border-color: #ce122b
}

.btn-category.is-active, .color-compare.is-active-clickable-dropzones .color-compare__interact .btn-category.color-dropzone {
    color: #ce122b;
    border-color: #ce122b
}

/*

.page--color-list .color-toast-wrapper {
    position: relative;
    z-index: 2;
    margin: 0 12px 1rem;
    transform: translateY(-2.25rem);
    transition: transform .3s ease
}

@media (min-width: 640px) {
    .page--color-list .color-toast-wrapper {
        margin-left: auto;
        margin-right: auto
    }
}

.page--color-list .color-toast-wrapper.is-fixed {
    padding-bottom: 60.5px;
    transform: none
}

@media (min-width: 960px) {
    .page--color-list .color-toast-wrapper.is-fixed {
        padding-bottom: 79px
    }
}

.page--color-list .color-toast-wrapper.is-fixed .color-toast {
    position: fixed;
    z-index: 10;
    top: 60px;
    left: 0;
    right: 0;
    max-width: 100%;
    margin: 0;
    background-color: rgba(255, 255, 255, .92);
    backdrop-filter: blur(2px);
    border: 0;
    border-radius: 0
}

.page--color-list .color-toast-wrapper.is-fixed .color-toast .toast-body {
    padding-top: .5rem;
    padding-bottom: .5rem
}

@media (min-width: 960px) {
    .page--color-list .color-toast-wrapper.is-fixed .color-toast {
        top: 80px
    }

    .page--color-list .color-toast-wrapper.is-fixed .color-toast .toast-body {
        padding-bottom: 1rem
    }
}

.page--color-list .sections > .section + .section {
    margin-top: 3rem
}

@media (min-width: 960px) {
    .page--color-list .sections > .section + .section {
        margin-top: 4rem
    }
}

.page--color-list .color-list {
    margin-bottom: -12px
}

.page--color-list .color-list > [class^=col-] {
    padding-bottom: 12px
}

@media (min-width: 1280px) {
    .page--color-list .color-list {
        margin-left: -18px;
        margin-right: -18px
    }

    .page--color-list .color-list > [class^=col-] {
        padding: 0 18px 12px
    }
}

.layout--rtl.page--color-list .page-content .color-list .color-brief-card .card-title {
    justify-content: flex-end
}

.page--color-list .color-brief-card .card-thumbnail {
  border-color: #D0D6DC;
}

@media (min-width: 1560px) {
    .color_item{width:20% !important;max-width:20% !important;flex:0 0 20%;}
}
.color_item:hover .card-action-group{box-shadow: 0px 0px 10px 3px #888;}

.color-brief-card {
    position: relative;
    display: block;
    border: 0;
    border-radius: 0
}

.color-brief-card .card-thumbnail {
    overflow: hidden;
    position: relative;
    padding-bottom: 133%;
    background: no-repeat 50% 50%;
    background-size: cover;
    border: 1px solid #e9ecef
}

.color-brief-card .card-thumbnail > img {
    display: none;
    box-shadow: 0 0 1px 1px rgba(0, 0, 0, .12)
}

.color-brief-card .card-thumbnail .card-label {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 12px;
	
}

.color-brief-card .card-action-group {
    position: relative
}

.color-brief-card .card-action-group .card-action {
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: 0;
    left: 0
}

.color-brief-card .card-action {
    display: flex;
    color: #fff;
    background-color: rgba(18, 18, 18, .64)
}

.color-brief-card .card-action .btn {
    opacity: .72;
    flex: auto;
    color: inherit;
    padding: .75rem 0;
    font-size: .625em;
    font-weight: 300;
    letter-spacing: .05em;
    text-transform: uppercase;
    transition: opacity .3s ease
}

.color-brief-card .card-action a.btn-text {
    display: block;
    margin-top: -2px;
	/*height: 43px;
    font-size: 16px;
    color: #fff;
   text-align: center;
   line-height: 45px;
   /*margin-top: 24px;
   position: relative;
   z-index: 1;
   transition: all .5s;
}

.color-brief-card .card-action .btn:hover, .color-brief-card .card-action .btn:focus, .color-brief-card .card-action .btn:active {
    opacity: 1;
    box-shadow: none
}

.color-brief-card .card-action .btn + .btn {
    position: relative
}

.color-brief-card .card-action .btn + .btn::before {
    content: "";
    position: absolute;
    left: -0.0625rem;
    top: 1rem;
    bottom: 1rem;
    width: 1px;
    background-color: #787878
}

.color-brief-card .card-body {
    padding: .75rem 0
}

.color-brief-card .card-label {
    display: inline-block;
    padding: .5em 1em;
    color: #ce122b;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .05em;
    line-height: 1.25;
    background-color: #fff
}

.color-brief-card .card-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    color: #121212;
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.35
}

.color-brief-card .card-title__text {
    margin-right: .25em;
	font-size: 24px;
}

.color-brief-card .card-title .card-code {
    opacity: .8;
    color: inherit;
    font-family: inherit;
    font-size: 20px;
    /*font-weight: 300;*/
    /*font-weight: 300;
    letter-spacing: 0;
	position: absolute;
    left: 0;
}

.color-brief-card .card-link {
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

@media (min-width: 640px) {
    .color-brief-card .card-action-group .card-action {
        overflow: hidden;
        opacity: 0;
        z-index: -1;
        transition: opacity .2s ease
    }

    .color-brief-card .card-action-group .card-action .btn {
        transform: translateY(100%);
        transition: transform .2s ease
    }

    .color-brief-card:hover .card-action-group .card-action, .color-brief-card:focus .card-action-group .card-action, .color-brief-card:active .card-action-group .card-action {
        opacity: 1;
        z-index: 1
    }

    .color-brief-card:hover .card-action-group .card-action .btn, .color-brief-card:focus .card-action-group .card-action .btn, .color-brief-card:active .card-action-group .card-action .btn {
        transform: translateY(0)
    }
}

@media (min-width: 960px) {
    .color-brief-card .card-thumbnail .card-label {
        right: 24px
    }
}

@media (max-width: 374.58px) {
    .color-brief-card .card-action {
        flex-direction: column
    }

    .color-brief-card .card-action .btn {
        display: flex;
        justify-content: center;
        align-items: center;
        padding-top: .5rem;
        padding-bottom: .5rem
    }

    .color-brief-card .card-action .btn-text {
        margin: 0 0 0 4px
    }

    .color-brief-card .card-action .btn + .btn {
        border-top: 1px solid #787878
    }

    .color-brief-card .card-action .btn + .btn::before {
        display: none
    }
}

@media (hover: none)and (pointer: coarse) {
    .color-brief-card .card-action-group .card-action {
        opacity: 1;
        z-index: 1
    }

    .color-brief-card .card-action-group .card-action .btn {
        transform: translateY(0)
    }
}

.color-brief-card--sm .card-body {
    padding-top: .5rem;
    padding-bottom: .5rem
}

.color-brief-card--sm .card-title {
    font-size: .875rem;
    letter-spacing: -0.0375em;
    line-height: 1.5
}

.color-brief-card--sm .card-title .card-code {
    font-size: .875em
}
	
	
	

/*.color-info-card {
    background-color: transparent;
    border: 0;
    border-radius: 0
}

.color-info-card .card-header {
    margin-bottom: 1rem;
    padding: 0;
    background-color: transparent;
    border: 0;
    border-radius: 0
}

.color-info-card .card-title {
    margin-bottom: 0;
    color: #121212;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0
}

.color-info-card .card-title .card-code {
    opacity: .8;
    color: inherit;
    font-family: inherit;
    font-size: .75em;
    font-weight: 300;
    text-transform: uppercase
}

.color-info-card .card-table {
    margin-bottom: 1rem;
    line-height: 1.5;
    word-break: keep-all;
    border-top: 1px solid #121212
}

.color-info-card .card-table__row {
    display: flex;
    border-bottom: 1px solid #121212
}

.color-info-card .card-table__header, .color-info-card .card-table__body {
    margin: 0;
    padding-top: .625rem;
    padding-bottom: .625rem
}

.color-info-card .card-table__header {
    flex: 0 0 5.5rem;
    width: 5.5rem;
    max-width: 5.5rem;
    font-weight: 700
}

.color-info-card .card-table__body {
    flex: auto;
    padding-left: .75rem;
    padding-right: .75rem
}

.color-info-card .card-table__row-block {
    display: block
}

.color-info-card .card-table__row-block .card-table__header, .color-info-card .card-table__row-block .card-table__body {
    width: auto;
    max-width: 100%
}

.color-info-card .card-table__row-block .card-table__body {
    margin-top: -0.375rem;
    padding-top: 0;
    padding-right: 0;
    padding-left: 0
}

.color-info-card .card-downloads {
    display: flex;
    justify-content: center;
    padding: 1rem .5rem
}

.color-info-card .card-downloads > a {
    flex: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: .5rem .25rem;
    color: inherit;
    font-size: .875em;
    line-height: 1.3;
    text-align: center;
    transition: background .3s ease, color .3s ease
}

.color-info-card .card-downloads > a.icon--before::before, .color-info-card .card-downloads > a.swiper-button::before {
    margin: 0 0 .5em 0
}

.color-info-card .card-downloads > a + a {
    border-left: 1px solid #e9ecef
}*/

	
	
.show {
  display: block;
}	

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}