/* Copyright 2016-2020 AbriSham
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE)
 */

@import url('../../main/css/colors.css');

/*****	fonts	*****/
@import url('../../../new/frontend/web/nadiya_assets/fonts/ERPxFonts/ERPxFonts.css');

/***** Colors *****/
:root{

--bg:#000f2e;
--bg-light:#5a9bd5;
--bg-light-fade:#5a9bd5cc;
--bg-dark:#082d71;
--orange:#fe9900;
}

/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */


body {
  padding-top: 7rem;
  padding-bottom: 3rem;
  color: #332e2e;
}
hr{border-top: 2px solid #fff5}
body{
	background-color:var(--bg);
	background-image:url(../images/sgv-bg-2.png);
	background-position: bottom center;
	background-size: cover;
	}

/* NAVBAR
-------------------------------------------------- */
/*****	Top Menu	*** AliAli ***/
nav.bg-light{
	background-color:var(--bg-light-fade) !important;
	padding: .8rem 1rem;
	box-shadow: 0 3px 10px #0002;
	background-image: url(../images/bg-nav.png);
}

/*	Logo	*/
.navbar-brand{
	background:transparent url('../images/logo-main-front.png') right center no-repeat;
	width: 303px;
	height: 88px;
	background-size: contain;
}

@media (min-width:767px){
	.navbar-left{margin-right: auto !important;}
}
@media (max-width:767px){
	.user-nav
	{
		margin-right:0rem !important;
	}
}

/*.navbar-nav*/
/*{*/
	/*margin-right:0rem !important;*/
/*}*/
@media (min-width: 481px){
	.login-page{padding-top:9rem}
	.navbar-brand{background-size: 303px;width:303px;}
}
@media (max-width: 840px){
	
	.home-btn{display:none}
	}
@media (min-width: 481px) and (max-width: 840px){.navbar{padding:1rem 1rem}}
@media (max-width: 480px){.navbar{padding:0 1rem}.navbar-brand{background-size: 175px;width:175px;}}

.home-btn i{
	line-height: .85rem;
	padding-right: .64rem;
	margin-top: -.14rem;
	transform: scale(1.3,1.2);
	
}
.home-btn:hover{transform: scale(1.1);transition:all .25s;}
.home-btn{
	transition:all .5s;
    width: 3.5rem;
    line-height: 0;
    background: var(--bg-light);
    margin: -.75rem 0 0 1rem;
    padding: 1.14rem;
	color:#fffc!important;
}
.navbar-dark .navbar-nav .nav-link {
	color: rgba(255,255,255,0.85);
	transition: all .7s;
	text-shadow: 0 0 5px #0007;
}
.navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus {
	color: var(--bg-dark);/*var(--orange)*/
	text-shadow: 0 2px 6px #0007;
	transition: all .2s;
}
.dropdown-item:hover, .dropdown-item:focus{color: var(--bg-light)}
#formLogin .form-inline label{color:#212529}

#searchModal .modal-dialog{margin: 3.5rem auto 1.75rem}

.dropdown-toggle:after{vertical-align:0}
.red{color:var(--red)}

#loginModal .modal-title{position:absolute}
input#user,input#password{margin-bottom:5px}
#searchModal .container-fluid{padding:15px}
.col-48x48 {
    width: 48px;
    height: 48px;
}
.circle,.img-circle {border-radius: 50%;}

.user-nav .img-circle {box-shadow: 0 0 0 2px var(--orange);transition:all .7s}
.user-nav:hover .img-circle {box-shadow: 0 0 0 7px var(--orange);transition:all .2s}
.user-nav .caret,.user-nav .dropdown-toggle:after {display:none}
.user-nav .dropdown-toggle span {
    display: block;
    float: left;
    height: 32px;
    left: 60px;
    margin: 0;
    overflow: hidden;
    position: absolute;
    text-align: left;
    top: 15px;
    width: 135px;
	color: #fffc;
}
.user-nav .dropdown-toggle i {
    position: absolute;
}
.user-nav .dropdown-menu {
    min-width: 195px;
}
.navbar-left{width: 205px;height: 54px;}
.navbar-left .dropdown-menu{left: 0;right: auto}
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
	margin-bottom: 3rem;
	box-shadow: 0 7px 14px 1px #0005;
}
@media (min-width: 841px)						{.carousel{margin-top: 2.25rem}}
@media (min-width: 576px) and (max-width: 840px){.carousel{margin-top: 2rem	}}
@media (min-width: 481px) and (max-width: 575px){.carousel{margin-top: 1.5rem}}
@media (max-width: 480px)						{.carousel{margin-top: -.5rem}}

@media (max-width: 992px){
	.navbar>.container{max-width: none;}
}
@media (max-width: 767px){
	.carousel-caption a,
	.carousel-caption a > h1 {font-size: 1.25rem !important}
	.carousel-caption {bottom: -1rem !important}
	.carousel-indicators{bottom:-3rem; padding-right:0}
}

/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  bottom: 3rem;
  z-index: 10;
}

/* Declare heights because of positioning of img element */
@media (min-width: 1401px) 						   {.carousel-item{height: 32rem }}
@media (min-width: 1281px) and	(max-width: 1400px){.carousel-item{height: 32rem }}
@media (min-width: 1025px) and	(max-width: 1280px){.carousel-item{height: 32rem }}
@media (min-width:  992px) and	(max-width: 1024px){.carousel-item{height: 27rem }}
@media (min-width:  841px) and	(max-width:  991px){.carousel-item{height: 24rem }}
@media (min-width:  768px) and	(max-width:  840px){.carousel-item{height: 24rem }}
@media (min-width:  576px) and	(max-width:  767px){.carousel-item{height: 18rem }}
@media (min-width:  401px) and	(max-width:  575px){.carousel-item{height: 16rem }}
@media 							(max-width:  400px){.carousel-item{height: 13rem }}

.carousel-item > img {
	position: absolute;
	top: 0;
	left: 0;
	min-width: 100%;
	height: 100%;
}
.carousel-caption a,
.carousel-caption a>h1{
	color: #fff;
	text-shadow: 0 0 2px #000, 0 0 5px #000a;
	font-size:1.75rem
}
.carousel-caption p{
	text-shadow: 0 0 2px #000, 0 0 5px #000a;
}
.carousel-caption a:hover,
.carousel-caption a:focus,
.carousel-caption a:hover>h1,
.carousel-caption a:focus>h1{
	color: #000;
	text-shadow: 0 0 1px #fff, 0 0 2px #fffc, 0 0 5px #fffa;
	text-decoration: none;
}


/* MARKETING CONTENT
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
  margin-bottom: 1.5rem;
  text-align: center;
}
.marketing h2 {
  font-weight: 400;
  color: #0056b3;
  text-shadow: 0 0 3px #0003;
}
.marketing .col-lg-4 p {
  margin-right: .75rem;
  margin-left: .75rem;
}


/* Featurettes
------------------------- */

.featurette-divider {
  margin: 5rem 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.featurette-heading {
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.05rem;
}


/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 40em) {
  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 1.25rem;
    font-size: 1.06rem;
    line-height: 1.4;
  }

  .featurette-heading {
    font-size: 50px;
  }
}

@media (min-width: 62em) {
  .featurette-heading {
    margin-top: 5rem;
  }
}

.bd-placeholder-img {
	font-size: 1.125rem;
	text-anchor: middle;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	}

@media (min-width: 768px) {
	.bd-placeholder-img-lg {
		font-size: 3.5rem;
		}
	}

.p-25{padding:25px}

.link-sch .rounded-circle img{transform: scale(1.8);}
.cat-links>div,
.ext-links>div{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
.cat-links a{
	background-color: rgba(0,0,0,.04);
	transition:all 1s;
	border: 1px solid rgba(110,110,110,.1);
	box-shadow: 0 5px 7px #0003;
	height:9rem;
	width:9rem
}
.cat-links a:hover{
	z-index: 1;
	transform:scale(1.25);
	transition:all .25s;
	box-shadow: 0 0 1px 10px #fff5;
}

.ext-links a{
	background-color:#fff;
	overflow:hidden;
	padding: 15px;
	transition:all 1s;
	border: 1px solid rgba(110,110,110,.4);
	box-shadow: 0 0 0 10px #fff5;
	height:10rem;
	width:10rem
}
.ext-links a:hover{
	padding: 5px;
	transition:all .25s;
	border: 1px solid rgba(110,110,110,.7);
	box-shadow: 0 0 0 10px #fff9;
}
.ext-links a:hover h2{color: var(--orange)}

.ext-links a,
.cat-links a{
	display: flex;
	justify-content: center;
	align-items: center;
	}

.cat-links h2{
	font-size: 2rem;
	text-align: center;
	display:none;
	}

.ext-links h2{
	float: right;
	display: block;
	position: absolute;
	top: 180px;
	font-size: 1rem;
	text-align: center;
}

.ext-links > :first-child{margin-right:12.5%}
@media (max-width:260px){
	.cat-links>div{
		flex: 0 0 100% !important;
		-ms-flex: 0 0 100% !important;
		max-width: 100% !important;
	}
}


@media (max-width:340px){
	.cat-links > div > a > img{
		height: 50px !important;
		width: 50px !important;
	}
	.cat-links > div > a{
		height: 6rem !important;
		width: 6rem !important;
	}
}

@media (max-width:576px){
	.ext-links > *{margin:0; margin-bottom: 80px;}
	.ext-links > :first-child{margin-right:0;}
	.ext-links > :last-child{margin:0;}
}

@media (max-width:991px){
	.ext-links a,
	.cat-links a{
		height:8rem;
		width:8rem
	}
	.cat-links{
		padding: 0 !important;
	}
	.ext-links h2{top: 150px;}
}

.cat-links{padding: 0 10rem;}
.cat-links>div>a{
	background-color:var(--bg-dark);
	overflow:hidden;
	padding: 15px;
	transition:all 1s;
	border: 1px solid var(--orange);
	box-shadow: 0 0 0 10px rgba(0,0,0,0);
	height:8rem;
	width:8rem;
	margin-bottom: 10px !important;
}
.cat-links>div{
	margin-bottom: 15px !important;
}

.cat-links>div a:hover{
	padding: 5px;
	transition:all .25s;
	border: 1px solid var(--orange);
	box-shadow: 0 0 0 10px rgba(0,0,0,.35);
}

.navar{
	padding: 2.5rem 0;
	margin: 2.5rem 0;
	/* background:	#10243f; */
	background: #ffffff25;
	border: 2px solid #fff4;
	box-shadow: 0 0px 7px #10243f77;
	transition:all .7s;
}

@media (min-width:992px){
	.navar:hover{transform: scale(1.35);transition:all .2s;padding:0 !important;margin:3.33rem 0}
}

.navar h2{
	font-weight:100;
	color: #0056b3;
	text-shadow: 0 0 5px #fffa;
	}
.navar p{font-weight: 500; /*text-shadow: 0 1px 3px #000,0 2px 25px #0009*/}


/*****	gallery-list-item	*****/

.featured-icons a{color: #0056b3;}
.featured-icons{
	font-size: .7rem;
	/*text-shadow: 0 0 1px #000;*/
	margin: .25rem 0 0;
	/* border-bottom: 1px solid #fff3; */
	padding-bottom: .25rem;
	height: 1.25rem;
	overflow: hidden;
}
.gallery-list-item {margin-bottom:2rem}
.gallery-list-item .title{
	font-size:.9rem;
	text-shadow: 0 0 1px #000;
	color:#fff;
	padding: .25rem;
	height: auto;
	overflow: hidden;
	text-align: right;
}
.top-featured,.featured{padding:.5rem; transition: background-color 0.5s;}
.top-featured img,.featured img{border-radius:5px}
.top-featured a , .featured a{color:#0056b3; text-decoration: none}
.top-featured h3 , .featured h3{font-size: 1.2rem}
.top-featured .sup-title{font-size: 1rem}
.featured .sub-title{margin-bottom: 0.3rem;font-size: 13px;}
.top-featured .summery{font-size: .9rem}
.top-featured:hover, .featured:hover , .gallery-list-item:hover .gallery-description{background-color:#fff3 !important;}

/*****	footer	*****/
footer{min-height: 77px;}
footer p{font-size:.85rem; margin-bottom:0;color: #fffe}
footer p a{text-shadow: 0px 0px 3px #00354f; color: #fff}
footer p small{font-size:.75rem}
.col-xs-3{
	-ms-flex: 0 0 25%;
	flex: 0 0 25%;
	max-width: 25%;
	position: relative;
	width: 100%;
	padding-right: 15px;
	padding-left: 15px;
	float:right
}
.col-xs-12{float:right}
.featured-box-1  h2 a:hover {color: var(--orange); text-decoration: none}
/****Footer****/
.copyright-name:before{
	content:"دهکده جهانی صالحین";
}


.tazkiye-box{
	background-color:rgba(0,0,0,0.1);
	border-radius: 5px;
	padding: 20px;
	width: 100%;
	/*min-height: 280px;*/
}

.gallery-list-item .gallery-description{
	background-color: rgba(0,0,0,0.1);
	padding: 10px;
	padding-bottom:20px;
	padding-top:15px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	height: 100%;
	position: relative;
}

.gallery-list-item .gallery-description-detail{
	color: #533064;
	position: absolute;
	bottom: 5px;
	left: 10px;
}

/*.featured {*/
	/*min-height: 10rem;*/
/*}*/
.feuture-news *{
	transition: all 0.5s;
	text-decoration: none;
}
.feuture-news a{
	display: block !important;
}

.feuture-news .gallery-list-item:hover img{
	transform: scale(1.2) rotate(5deg);
}
.feuture-news .gallery-list-item:hover .img-shadow{
	box-shadow: inset 3px 3px 100px 0 #0005 , inset -3px -3px 100px 0 #0005;
}
.feuture-news .gallery-list-item:hover .gallery-description-parent{
	margin-top: 0px !important;
}
.feuture-news .gallery-list-item:hover .gallery-description{
	padding-top: 7px !important;
}
.feuture-news .gallery-list-item img{
	transition: all 0.5s;
}

.img-shadow{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	transition: box-shadow 0.3s ease-in-out;
}

.gallery-description-parent{
	margin-top: -8px; height: 100%;
}


.login-body{
	background-color:#ffffff73 !important;padding: 20px;border-radius: 5px;
}

.top-featured:hover img + div , .featured:hover img + div{
	opacity:1;
	height: 90%;
	width: 90%;
}
.top-featured img + div , .featured img + div{
	transition: all 0.2s !important;
	border: solid 3px #ffffff82;
	opacity: 0;
	height: 105%;
	width: 105%;
	position: absolute;
	top: 50%;
	right: 50%;
	border-radius: 3px;
	transform: translate(50%,-50%);
}
footer h1{font-style: normal;margin: 3px 0 0 0;font-weight: 400;font-size: .65rem;color: #fff;}