/* -----------------------------------------------------------------------------
// This file contains styles that are specific to the Single Project Page .
// -----------------------------------------------------------------------------
*/
.single-project-content {
	.single-image {
		img {
			margin-bottom: 20px;
		}
	}
}

.single-project-banner {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: $blue;
	text-align: center;
	padding: 50px 0;
	&.single-project-banner--2 {
		margin-bottom: 20px;
	}	
	h1 {
		font-family: $brownbold-font;
	}
	h1, span {
		color: $white;
	}
}
.single-project-title {
	h1 {
		@include font-size-rem(32px);
		
	}
	h1, .show-projects {
		display: inline-block;
		vertical-align: middle;
	}
}
.next-project {
	span {
		@include font-size-rem(16px);
		font-family: $brownlight-font;
	}
	h1 {
		@include font-size-rem(40px);
	}
}
.return-projects {
    position: absolute;
    display: none;
    background: rgba(255, 255, 255, 0.43);
    z-index: 99;    
	a {
		@include color-opacity($blue, $opacity: 0.5);
		display: block;
		@include on-event($self: false) {
			transform: translateX(-5px);
		}
		img {
			display: inline-block;
	    	vertical-align: middle;					
		}		
	}

}
.single-project__info {
	margin-bottom: 20px;
	[class*="col-"] {
	    padding-right:0;
	    padding-left:0;
	}
	.row {
		margin: 0;
	}
	.info {
		position: relative;
		padding: 0;
		padding-top: 15px;
		padding-left: 10px;
    	border: 1px solid #777CD6;
    	text-align: left;
	    min-height: 55px;
    	word-wrap: break-word;
		&:after {
			content: '';
			position: relative;
			@include abs-pos(auto, auto, -1px, 30px);
			width: 27px;
			height: 5px;
			background-color: $blue;
		}	    
		&.info-1 {
			min-height: 100px;
			border-bottom: 0;
			border-right: 1px solid #777CD6;
			p {
				@include font-size-rem(22px);	
			}			
		}
		&.info-2 {
			border-right: 0;
			border-bottom: 0;
		}
		&.info-3 {
			border-bottom: 0;
		}
		&.info-4 {
			border-right: 0;
		}
		&.info-5 {
			border-bottom: 1px solid #777CD6;
		}
		p {
			color: $blue;
			@include font-size-rem(14px);
			margin-bottom: 0;			
		}
	}
}

.show-projects {
	width: 30px;
}

.projects-list-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	@include background-opacity($blue, $opacity: 0.95);
	z-index: 999999;
	@include opacity(0);
	visibility: hidden;
	transition: 0.3s all ease;
    overflow: hidden;
    transform: translate3d(0,0,0);	
	&.active {
		@include opacity(1);
		visibility: visible;		
	}
	.project-list-wrap {
	    position: relative;
	    overflow-y: auto;
	    height: calc(100vh - 50px);	
	    @extend %custom-scrollbar;
	}
	.tcon-click {
		position: absolute;
		top: 5%;
		right: 5%;
	}	
	.projects-list {
		li {
			list-style: none;
			a {
				@include font-size-rem(22px);
				line-height: 32px;
				color: #BCBED9;
				@include on-event($self: false) {
					color: $white;
				}
			}
		}	
	}	
}


$tcon-size: 40px !default;
$tcon-transition: .3s !default;
$tcon-jstransform: 'tcon-transform' !default;

$tcon-plus-bg: transparent !default;
$tcon-circle-radius: 80% !default;
$tcon-plus-radius: ($tcon-size / 8) !default;
$tcon-plus-color: white !default;
$tcon-remove-color: white !default;

.tcon {
  appearance: none;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  height: $tcon-size;
  transition: $tcon-transition;
  user-select: none;
  width: $tcon-size;
  background: transparent;
  outline: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent;

  > * {
    display: block;
  }

  &:hover,
  &:focus {
    outline: none;
  }
  &::-moz-focus-inner {
    border: 0;
  }
}
 .tcon-click {
  	z-index: 99;
  }

.tcon-remove {
  height: $tcon-size;
  position: relative;
  transform: scale(.75);
  // width: $tcon-size;
  width: 25px;
    display: inline-block;
    vertical-align: middle;


  &::before,
  &::after {
    content: "";
    display: block;
    height: 12%;
    width: 85%;
    position: absolute;
    top: 37%;
    left: 8%;
    transition: $tcon-transition;
    background: $tcon-remove-color;
  }

  &::before {
    transform: rotate(45deg);
  }

  &::after {
    transform: rotate(-45deg);
  }
}
.tcon-transform {
	width: 40px;
}
.tcon-remove--chevron-down {
  &.#{$tcon-jstransform} {
    &::before {
      left: 5%;
      transform: rotate(-135deg);
      width: 59%;
    }

    &::after {
      left: auto;
      // right: 10%;
      right: 2%;
      transform: rotate(135deg);
      width: 60%;
    }
  }
}
.tcon-visuallyhidden {
	position: relative;
    font-size: 16px;
    color: white;
    top: 17px;
    left: -5px;
}

/* Responsive*/
@include breakpoint(sm_down) {
	.single-project__info {
		position: relative;
	    margin-right: -7px;
	    margin-left: -7px;
	    margin-top: -86px;
	    // z-index: 9999;
	    .single-project-banner {
    		padding: 22px 0;
    		.single-project-title {
			    position: relative;
			    z-index: 999999;    			
    			h1 {
    				@include font-size-rem(24px);
    			}    			
    		}
	    }
	    .info {
	    	&:after {
	    		height: 2px;
	    	}
	    }
	}	
}
@include breakpoint(sm_up) {
	.single-project-banner {
		padding: 80px 0;
	}
	.single-project-banner--2 {
		padding: 82px 0;
	}
	.single-project-title {
		h1 {
			@include font-size-rem(62px);
			
		}
	}
}
@include breakpoint(md_up) {
	.single-project-content {
		padding-top: 80px;
		max-width: 1000px;
	}
	.single-project-title {
		h1 {
			@include font-size-rem(100px);
			
		}
	}	
}

@media (min-width: 1024px) {
	.single-project__info {
		.info {
			position: relative;
	 		padding: 15px 10px;
	    	padding-bottom: 0;
	    	border: 1px solid #777CD6;
	    	text-align: left;
		    height: 55px;    
			&.info-1, &.info-5 { 
				height: 100px;
				padding: 0;
				padding-top: 15px;
				padding-left: 10px;
				border-bottom: 0;
			}
			&.info-1 {
				border-right: 0;
				p {
					@include font-size-rem(28px);	
				}			
			}
			&.info-2 {
				border-right: 0;
				border-bottom: 1px solid #777CD6;
			}
			&.info-3 {
				border-right: 0;
				border-bottom: 1px solid #777CD6;
			}
			&.info-4 {
				border-right: 1px solid #777CD6;
			}
			&.info-5 {
				height: 100px;
			}
			p {
				@include font-size-rem(16px);
			}			
		}
	}
}

@media (min-width: 1141px) {
	.return-projects {
	    top: 14%;
	    left: 1%;	
	    display: block;
		a {
			@include font-size-rem(10px);
			img {
				width: 20px;				
			}		
		}

	}	
}