Your IP : 216.73.216.111


Current Path : /home/icmq6107/clients/naddaf/wp-content/themes/crowdngo/sass/template/
Upload File :
Current File : /home/icmq6107/clients/naddaf/wp-content/themes/crowdngo/sass/template/_event.scss

.layout-event{	
	.row{
		~ .navigation{
			.apus-pagination{
				padding-bottom: 0;				
			}
		}
	}
	.col-sm-12{		
		.event-grid{			
			padding-top: 43px;	
			margin-bottom: 0px;	
			border-top: 1px solid $border-color;		
		
			@include media(tablet) {
				padding-top: 30px;
			}

			@include media(desktop) {
				padding-top: 60px;
				margin-bottom: 30px;				
			}
		}
		&:first-child{
			.event-grid{
				border: none;
				padding-top: 0px;
			}			
		}
		&:last-child{
			.event-grid{				
				margin-bottom: 0px;
			}
		}
	}
}

.event-grid{	
	.startdate{
		text-align: center;
		position: relative;
		@include justify-content(center);
		@include flexbox();
		@include align-items(center);	
		&:after{
			top: 0;
			position: absolute;						
			min-height: 98px;			
			background-color: $border-color;
			@include rtl-right(0);
			@include size(1px,100%);

			@include media(tablet) {
				content: '';
			}

		}	
		.startdate-wrapper{
			outline: none;
		}
		div{
			display: block;
			font-family: $headings-font-family;
			font-weight: $font-weight-medium;
			font-size: 18px;
			line-height: 1;
			color: $headings-color;			
			&.day{
				font-size: 54px;
				font-weight: $headings-font-weight;
				position: relative;
				padding-bottom: 10px;
				margin-bottom: 10px;
				@include inline-block();

				@include media(tablet) {
					padding-bottom: 15px;
					margin-bottom: 15px;
				}

				&:after{
					content: '';
					background-color: $theme-color;		
					position: absolute;
					bottom: 0;
					margin: 0 auto;
					position: absolute;
					@include rtl-left(0);
					@include rtl-right(0);
					@include size(100%,3px);
				}
			}
			&.month{
				text-transform: capitalize;				
				line-height: 28px;
				> *{
					@include rtl-margin-left(5px);
					@include inline-block();
					&:first-child{
						@include rtl-margin-left(0px);
					}
				}
			}
		}
	}
	.event-thumb{
		overflow: hidden;
		position: relative;
		.entry-thumb{
			overflow: hidden;
			.post-thumbnail{
				.image-wrapper{
	                position: relative;
	                display: block;
	                &:before{
	                    top: 0;
	                    position: absolute;
	                    visibility: hidden;
	                    content: "";
	                    z-index: 1;
	                    background-color: $theme-color;                             
	                    pointer-events: none;
	                    @include square(100%);
	                    @include opacity(0);
	                    @include rtl-left(0);               
	                    @include transition($linear);  
	                }
	                &:after{
	                    content: "";                  
	                    z-index: 2;      
	                    background-color: $white;
	                    background-image: url('../images/unlink.png');
	                    background-position: center center;
	                    background-repeat: no-repeat;
	                    visibility: hidden;
	                    pointer-events: none;
	                    position: absolute;
	                    left: 0;
	                    right: 0;
	                    bottom: 0;
	                    top: 0;
	                    margin: auto;
	                    @include transform(scale(0));
	                    @include opacity(0);
	                    @include background-size(26px,24px);
	                    @include border-radius(50px);       
	                    @include square(55px);                                        
	                    @include transition($linear);
	                }	                
	            }
			}
		}
	}
	.entry-title{		
		font-size: 20px;
		line-height: 30px;
		margin: 10px 0 0 0;			
		text-align: center;
		@include media(tablet) {						
			margin-top: 0;
			@include rtl-text-align-left();
		}
	}
	.event-grid-content{
		padding: 30px 0;		
		display: block;

		@include media(tablet) {
			@include display-grid();
			@include grid-template-columns(18% 82%);	
		}

		@include media(desktop) {
			@include grid-template-columns(25% 75%);	
		}

		.time-location{			
			color: $entry-blog-date-color;						
			@include clearfix();
			i{
				@include rtl-margin-right(10px);
				font-size: 14px;
				color: $theme-color;
			}
			> *{				
				line-height: 1.8;
				padding-bottom: 10px;
				float: none;
				text-align: center;
    			@include rtl-margin-right(0);

				@include media(tablet) {
					@include rtl-margin-right(15px);
					@include rtl-float-left();     
					@include rtl-text-align-left(); 
    			}

				&:last-child{
					@include rtl-margin-right(0px);					
				}
			}
		}
		.event-metas{
			padding-top: 20px;
			@include align-self(center);
			@include rtl-padding-left(0);			

			@include media(tablet) {				
				padding-top: 0px;
				@include rtl-padding-left(38px);						
			}

		}	
	}
	@include hover-focus-active() {
		.event-thumb{
			.entry-thumb{
				.post-thumbnail{
					.image-wrapper{
						&:before{                        
				            pointer-events: auto;
				            visibility: visible;
				            @include opacity(.82);
				        }                    
				        &:after{
				            visibility: visible;
				            pointer-events: auto;
				            @include opacity(1);
				            @include transform(scale(1));
				        }
					}
				}
			}
		}
    }
}
.event-list{	
	&:first-child{
		margin-top: 0;
	}
	.event-listing{
		position: relative;
		overflow: hidden;		
		margin-top: 30px;
		border: 1px solid $border-color;	
		@include transition($linear);
		@include border-radius-separate(10px,10px,0,0);	

		@include media(tablet) {
			@include border-radius-separate(10px,0,10px,0);	
		}

		@include hover() {
			border-color: $theme-color;
			@include border-radius(10px);
			.entry-thumb{
				.image-wrapper{
					&:before{                        
			            pointer-events: auto;
			            visibility: visible;
			            @include opacity(.82);
			        }                    
			        &:after{
			            visibility: visible;
			            pointer-events: auto;
			            @include opacity(1);
			            @include transform(scale(1));
			        }
				}
			}
		}
		.flex-middle{
			@include flex-direction(column);
			@include media(tablet) {
				@include flex-direction(row);
			}
		}
		.flex-top{
			@include flex-direction(column);
			@include align-items(flex-start);
			@include media(tablet) {
				@include flex-direction(row);
			}			
			.event-metas{			
				@include rtl-padding(28px, 30px, 30px, 0px);
			}
		}		
		.event-post-thumbnail{
			position: relative;
			overflow: visible;
			margin-bottom: 0;			
		}
		.description{
			margin-bottom: 10px;
		}
		.entry-thumb{
			.image-wrapper{
				position: relative;
				display: block;
				&:before{
                    top: 0;
                    position: absolute;
                    visibility: hidden;
                    content: "";
                    z-index: 1;
                    background-color: $theme-color;                             
                    pointer-events: none;
                    @include square(100%);
                    @include opacity(0);
                    @include rtl-left(0);               
                    @include transition($linear);                      
                    @include border-radius-separate(10px, 10px, 0, 0);
					@include media(tablet) {
						@include border-radius-separate(10px, 0, 10px, 0);						
					}
                }
                &:after{
                    content: "";                  
                    z-index: 2;      
                    background-color: $white;
                    background-image: url('../images/unlink.png');
                    background-position: center center;
                    background-repeat: no-repeat;
                    visibility: hidden;
                    pointer-events: none;
                    position: absolute;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    top: 0;
                    margin: auto;
                    @include transform(scale(0));
                    @include opacity(0);
                    @include background-size(26px,24px);
                    @include border-radius(50px);       
                    @include square(55px);                                        
                    @include transition($linear);
                }
				img{
					@include border-radius-separate(10px, 10px, 0, 0);
					@include media(tablet) {
						@include border-radius-separate(10px, 0, 10px, 0);
					}
				}		
			}
		}
		.entry-title{
			margin-top: 0;
			font-size: 20px;
			line-height: 30px;
			font-weight: $font-weight-medium;
			margin-bottom: 10px;
		}
		.time-location{
			i{
				font-size: 14px;
				@include rtl-margin-right(5px);
				color: $theme-color;
			}
		}
		.startdate{
			position: absolute;			
			bottom: 0;
			color: $white;			
			padding: 9px 20px;
			@include rtl-left(0);
			text-align: center;
			background-color: $theme-color;    
			min-width: 80px;
			font-size: 20px;
			line-height: 1;
			font-family: $headings-font-family;
			font-weight: $headings-font-weight - 100;
			> *{
				display: block;
			}
			.day{
				margin-bottom: 10px;
				font-size: 28px;		
				position: relative;
				padding-bottom: 5px;
				&:after{
					content: "";
					background-color: $white;
					@include size(100%,2px);
					position: absolute;
					bottom: 0;
					@include rtl-left(0);
				}		
			}
		}
		.event-metas{			
			padding: 30px;
			@include media(tablet) {				
				@include rtl-padding(0, 30px, 0, 0);				
			}	
		}
	}
	&:first-child{		
		.event-listing{			
			margin-top: 0;
			padding-top: 0px;
		}
	}
	&:last-child{
		.event-listing{
			margin-bottom: 0;
			padding-bottom: 0;				
		}		
	}
	~ .paging-navigation{
		.apus-pagination{
			padding-top: 50px;			
		}
	}
}
.event-listing{
	.time-location{
		.event-listing-flex{
			margin-top: 5px;
			@include flexbox();
			@include flex-direction(column);
			@include media(tablet) {
				margin-top: 0px;
			}
			@include media(desktop) {
				margin-top: 0px;
				@include flex-direction(row);
			}
		}
	}
}
.detail-post{
	.simple_event{	
		.author-info{
			margin-bottom: 67px;			
		}
		#comments {    
			border-top: 0;
			padding-top: 0;		
			.comment-list{
				margin-bottom: 35px;
			}	
		}
		#commentform{
			margin-bottom: 0px;
		}
		#respond{
			.logged-in-as{				
				margin-top: 0;
			}
			.title{
				position: relative;		
				margin-bottom: 10px;
				&:after{
					top: 15px;
					content: '';
					position: absolute;
					background-color: $border-color;
					@include size(100%,1px);				
					@include rtl-margin-left(0);				
				}
				span{
					@include inline-block();				
					@include rtl-padding(0, 20px, 0, 0);
					background-color: $white;
					z-index: 1;
					position: relative;		
					@include media(tablet) {
						@include rtl-padding(0, 50px, 0, 0);
					}		
				}
			}
		}
		.apus-countdown{												
			.times{
				text-align: center;
				> div{
					padding-top: 5px;
					padding-bottom: 5px;
					margin-bottom: 30px;				
				}
			}
		}
		.apus-google-map{
			min-height: 394px;
			margin-bottom: 30px;
		}
		.post-thumbnail{
			margin-bottom: 40px;
		}	
		.social-share{
			margin-bottom: 30px;	
			text-align: center;
			@include flexbox();		
			@include align-items(center);
			@include justify-content(center);		
			@include flex-direction(column);
			
			@include media(tablet) {
				margin-bottom: 70px;	
				@include flex-direction(row);
				@include rtl-text-align-left();
			}	

			.label{
				color: $headings-color;
				font-size: 18px;
				margin: 0px;			
				font-weight: $font-weight-medium;			
				@include rtl-padding(2px, 0, 10px, 0px);

				@include media(tablet) {
					@include rtl-padding(2px, 15px, 0px, 0px);
				}

			}
			.apus-social-share{
				a{
					@include inline-block();
				}			
			}
		}
		.entry-title{
			font-size: 26px;
			line-height: 36px;
			font-weight: $font-weight-medium;
			margin-bottom: 20px;
			margin-top: 0;

			@include media(tablet) {
				font-size: 30px;
				line-height: 40px;
				margin-bottom: 24px;
				margin-top: 5px;
			}

			@include media(desktop) {
				font-size: 32px;
				line-height: 42px;				
			}

		}
		.entry-title-small{
			font-size: 22px;
			font-weight: $font-weight-medium;
			line-height: 30px;
			margin-bottom: 25px;
		}
		.metas{
			padding-bottom: 24px;
			margin-bottom: 40px;
			border-bottom: 1px solid $border-color;		

			@include media(tablet) {
				margin-bottom: 60px;				
			}

			.list-metas{
				list-style: none;
				margin: 0px;
				padding: 0px;		
				text-align: center;	
				@include clearfix();
				li{
					margin: 0 15px;
					color: $entry-blog-date-color;
					@include inline-block();
					i{
						color: $theme-color;
						font-size: 13px;
						@include rtl-margin-right(8px);
					}
					&:first-child{
						@include rtl-margin-left(0);
					}
					&:last-child{
						@include rtl-margin-right(0);
					}
				}
			}
		}
	}
}

.event-single-thumbnail{
	img{
		@include border-radius-separate(20px,20px,0,0);
	}
}

.donation-widget-event{
	.event-grid{
		&.event-grid-modify{
			.entry-title{				
				font-size: 18px;
				line-height: 28px;
				margin-bottom: 15px;
				font-weight: $font-weight-medium;
			}
			.post-thumbnail{
				.image-wrapper{
					margin-bottom: 20px;
				}
			}
			.event-address{
				.fa{
					color: $theme-color;
					@include rtl-margin-right(14px);
					@include rtl-margin-left(1px);
				}
			}
			.startdate{
				position: static;
				@include rtl-text-align-left();
				@include justify-content(flex-start);			
				&:after{
					content: none;
				}
			}
			.startdate-finishdate{			
				> div{
					margin-bottom: 5px;
					position: relative;
					@include rtl-padding-left(30px);
					&:before{
						content: '\f133';						
						font-family: $font-awesome;					
						color: $theme-color;	
						font-size: 14px;
						@include rtl-left(1px);														
						@include vertical-align(absolute);
					}
					&:first-child{
						@include rtl-margin-left(0);
					}
					&:last-child{
						@include rtl-margin-right(0);
					}
					* {
						@include rtl-margin-right(5px);						
					}
				}
			}
		}	
	}
	.slick-carousel{
		.slick-dots{
			display: none !important;
		}
	}
}

.event-list-small{
	margin-bottom: 35px;

	@include media(desktop) {
		margin-bottom: 45px;
	}

	.event-listing{		
		.entry-title{			
			font-weight: $font-weight-medium;			
			margin: 15px 0 0 0;
			font-size: 20px;
			line-height: 30px;
			text-align: center;
			@include media(tablet) {								
				margin: 0;
				@include rtl-text-align-left();
			}
		}
		.event-metas{			
			width: 100%;
			position: relative;						
			padding: 10px 0 0 0;
			@include media(tablet) {
				@include rtl-padding(5px, 5px, 5px, 35px);
			}

			&:before{		
				content: normal;
				background-color: $border-color;				
				position: absolute;
				top: 0px;
				@include rtl-left(0);
				@include size(1px,100%);

				@include media(tablet) {
					content: "";
				}

			}
		}
		.event-listing-flex{
			@include flex-direction(column);
			@include media(tablet) {
				@include flex-direction(row);
			}
		}
		.event-post-date{
			min-width: 160px;
			padding: 0 20px;

			@include media(tablet) {				
				min-width: 138px;
			}

			@include media(desktop) {
				min-width: 160px;
			}

			.startdate{			
				text-align: center;	
				> *{
					display: block;
					text-align: center;
					font-size: 18px;
					color: $headings-color;
					font-family: $headings-font-family;
					font-weight: $font-weight-medium;
				}
				.day{
					font-size: 54px;
					position: relative;
					line-height: 1;
					padding-bottom: 15px;
					font-weight: $headings-font-weight;
					display: inline-block;
					&:after{
						content: "";
						background-color: $theme-color;						
						bottom: 0px;
						@include center-align(absolute);
						@include size(100%,3px);						
					}
				}
				.month{
					padding-top: 15px;
					line-height: 28px;
				}
			}
		}		
		.startdate-finishdate{
			@include flexbox();
			@include align-items(center);
			@include flex-direction(column);

			@include media(tablet) {
				@include flex-direction(row);
			}

			> *{
				@include rtl-margin-right(0);				
				color: $entry-blog-date-color;					
				line-height: 32px;		

				@include media(tablet) {
					@include rtl-margin-right(10px);				
				}


				&:last-child{
					@include rtl-margin-right(0px);
				}
			}
		}
	}
}

.widget{
	&.widget-events{
		margin-bottom: 0;
		.row{
			div[class*="col-"]{
				&:last-child{
					.event-list-small{
						margin-bottom: 0px;
					}					
				}				
			}
		}
		.event-grid{
			.event-grid-content{				
				padding-top: 30px;				
				@include media(desktop) {
					padding-top: 50px;
				}				
			}
		}
	}
}

.sidebar{
	.donation-widget-event{
		.slick-carousel{
			.slick-dots{
				display: inline-block !important;				
				@include rtl-margin-left(12px);				
			}
		}
	}
	.event-grid{
		.event-thumb{
			.entry-thumb{
				.post-thumbnail{
					.image-wrapper{
						&:after {
							@include square(45px);								
							@include background-size(20px,20px);				
						}
					}
				} 				
			} 			
		} 		
	} 
}