/* ==========================================================================
   [Start] All Style Footer Top & Footer Bottom
========================================================================== */
#cshero-footer-feature-top {
	background-color: #1f1f1f;
	color: #5d5d5d;
	.cshero-footer-feature-inner {
		background-color: #161616;
		padding: 36px 0;
	}
	.feature-top-item {
		width: 33.33%;
		float: left;
		padding: 0 40px;
		border-right: 2px solid #1f1f1f;
		&:last-child {
			border-right: none;
		}
		.media {
			.media-left {
				position: relative;
				padding-right: 42px;
				span {
					color: #fff;
				    font-size: 40px;
				    position: relative;
				    top: 4px;
				}
				&:before {
					background-color: $primary_color;
					content: "";
				    height: 22px;
				    position: absolute;
				    right: 20px;
				    top: 15px;
				    width: 2px;
				}
			}
			.media-body {
				span {
					color: #fff;
					font-size: 14px;
					display: block;
				}
				color: #828282;
				a {
					color: #828282;
					&:hover {
						color: $primary_color;
					}
				}
			}
		}
	}
}
#cshero-footer-top {
	padding: 70px 0 67px;
	position: relative;
	background-color: #1f1f1f;
	color: #807f7f;
	font-size: 14px;
	.widget-title {
		color: #fff;
	    font-size: 16px;
	    font-weight: normal;
	    margin-bottom: 13px;
	}
	a {
		color: #807f7f;
		&:hover {
			color: $primary_color;
		}
	}
	.media-left {
		padding-right: 28px;
		img {
			position: relative;
			top: 50px;
		}
	}
	ul.menu {
		li {
			line-height: 26px;
			width: 50%;
			float: left;
			a {
				font-size: 13px;
			}
		}
	}
	.cshero-footer-top1 .media-body {
		padding-right: 35px;
	}
	.cshero-footer-top3 {
		ul.menu li {
			width: 33.33%;
		}
	}
}
#cshero-footer-bottom {
	background-color: #1c1c1c;
	color: #f9f9f9;
	font-size: 14px;
	line-height: 23px;
	padding: 30px 0;
	.title-social {
		padding-right: 25px;
		display: inline-block;
	}
	.cs-social {
		display: inline-block;
		vertical-align: top;
		padding-top: 2px;
		li {
			padding: 0 4px;
			a {
				background-color: #161616;
			    color: #9e9e9e;
			    display: block;
			    height: 42px;
			    line-height: 42px;
			    text-align: center;
			    width: 42px;
			    &:hover {
			    	color: $primary_color;
			    }
			}
		}
	}
	.title-newsletter {
		left: 15px;
	    padding: 0;
	    position: absolute;
	    top: 0;
	}
	.tnp-widget {
		display: inline-block;
	    margin: 0;
	    padding-left: 125px;
	    padding-top: 2px;
	    vertical-align: top;
	    width: 100%;
	}
}
#cs-copyright {
	background-color: #1f1f1f;
	padding: 34px 0;
	font-size: 13px;
	color: #9b9b9b;
	a {
		color: $primary_color;
		&:hover {
			color: #fff;
		}
	}
}
.cshero-footer2 {
	#cshero-footer-feature-top .cshero-footer-feature-inner {
		background-color: $primary_color;
		.feature-top-item {
			border-right-color: #1f1f1f;
			.media {
				.media-left:before {
					background-color: #fff;
				}
				.media-body {
					color: #1f1f1f;
					a {
						color: #1f1f1f;
						&:hover {
							color: #fff;
						}
					}
				}
			}
		}
	}
}
.cshero-footer4 #cs-copyright {
	border-top: 1px solid #1c1c1c;
}
.cshero-footer7 {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	#cshero-footer-top, #cs-copyright, #cshero-footer-bottom {
		background-color: rgba(31,31,31,0.98);
	}
	#cshero-footer-bottom {
		position: relative;
		&:before {
			background-color: rgba(22,22,22,0.2);
			content: "";
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
		}
		.container {
			position: relative;
			z-index: 99;
		}
	}
}
#back_to_top.on{
    bottom: 30px;
    right: 20px;
    width: 42px;
    height: 42px;
    overflow: hidden;
    position: fixed;
    text-decoration: none;
    z-index: 9999;
    font-size: 0;
    color: transparent;
    background-color: rgba(51, 51, 51, 0.9);
    border: 1px solid #333;
    cursor: pointer;
    @include transition(0.3s ease-in-out 0s); 
    &:hover {
	    background-color: $primary_color;
	    border-color: $primary_color;
	    @include transition(all 150ms linear 0ms); 
	}
	&:after{
	    color: #ffffff;
	    content: '\f106';
	    font-size: 18px;
	    line-height: 42px;
	    font-family: 'FontAwesome';
	    text-align: center;
	    display: block;
	    position: absolute;
	    top: 0;
	    right: 0;
	    bottom: 0;
	    left: 0;
	    @include transition(all 150ms linear 0ms);    
	}
}
.body-border-wrapper #back_to_top.on {
	bottom: 50px;
	right: 50px;
}
.cms-get-touch {
	margin: 25px 0;
	p {
		padding: 9px 0 10px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
		color: #fff;
		margin: 0;
		i {
			padding-right: 4px;
			color: $secondary_color;
		}
		a {
			color: $primary_color;
			&:hover {
				color: #fff;
			}
		}
		&:first-child {
			border-top: 1px solid rgba(255, 255, 255, 0.1);
		}
	}
}
/* Request Form */
.quote-form-popup-wrapper {
	background-color: rgba(34, 34, 34, 0.95);
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10000;
    opacity: 0;
    filter: alpha(opacity=0);
    @include transition(all 300ms linear 0ms); 
    visibility: hidden; 
    .quote-form-popup-inner {
    	left: 0;
	    margin: auto;
	    max-width: 370px;
	    position: absolute;
	    right: 0;
	    top: 50%;
	    @include transform(translate(0px, -50%));
	    padding-top: 36px;
	    width: 100%;
	    .form-close {
	    	color: #fff;
		    font-size: 18px;
		    position: absolute;
		    right: 0;
		    top: 5px;
		    z-index: 1;
		    cursor: pointer;
		    &:hover {
		    	color: $primary_color;
		    }
	    }
    	.request-form .request-form-content {
    		@include box-shadow(none);
    	}
    }
    &.open {
    	visibility: visible;
    	opacity: 1;
    	filter: alpha(opacity=1);
    }
}

.cs-boxed #cshero-footer-bottom {
	font-size: 13px;
	.cs-social li {
		padding: 0 1px;
	}
}

/* Login + Register */
.cms-login-wrap, .cms-register-wrap { 
	&.cms-popup {	
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1003;
		background-color: rgba(34,34,34,0.95);
		opacity: 0;
		visibility: hidden;
		@include transition(all 300ms linear 0ms);
	}
	&.open {
		opacity: 1;
		visibility: visible;
	}
}
.cms-form-login, .cms-form-register {
	.more-sign-up, .more-sign-in {
	  font-size: 13px;
	  color: #222;
	  text-transform: uppercase;
	  text-align: center;
	  padding: 22px 0 0;
	  letter-spacing: 0.02em;
	  font-weight: 700;
	  &.white {
	  	color: #fff;
	  }
	  a {
	    color: $primary_color;
	    border-bottom: 2px solid $primary_color;
	    &:hover {
	      opacity: 0.5;
	    }
	  }
	}
	.cms-modal-dialog.dialog-popup {
	  left: 50%;
	  margin: 0;
	  max-width: 370px;
	  width: 100%;
	  position: absolute;
	  top: 50%;
	  @include transform(translate(-50%, -50%));
	}
	.cms-modal-content {
	  background-color: #fff;
	  padding: 0;
	  margin-bottom: 10px;
	  @include box-shadow(0 2px 3px rgba(0, 0, 0, 0.1));
	  overflow: hidden;
	  .cms-modal-header {
	    background-color: $primary_color;
	    padding: 30px 40px;
	    .cms-modal-left {
	    	float: left;
	    	font-size: 40px;
	    	color: #fff;
	    	padding-top: 7px;
	    }
	    .cms-modal-right {
	    	float: left;
	    	padding-left: 33px;
	    	position: relative;
	    	&:before {
	    		height: 22px;
	    		width: 2px;
	    		background-color: #ff8600;
	    		position: absolute;
	    		top: 19px;
	    		left: 12px;
	    		content: "";
	    	}
	    	span {
	    		color: #fff;
	    		font-size: 14px;
	    	}
	    	h3 {
	    		font-size: 22px;
	    		color: #fff;
	    		font-weight: 700;
	    		margin-bottom: 0;
	    	}
	    }
	  }
	  .cms-modal-body {
	    padding: 0;
	    background-color: #f9f9f9;
	    .profile-content {
	      padding: 20px;
	      text-align: center;
	      .user-avatar {
	        display: none;
	      }
	      .user-name {
	        font-size: 16px;
	        font-weight: 700;
	        color: $primary_color;
	        text-transform: uppercase;
	      }
	    }
	    .input {
	      margin-bottom: 32px;
	    }
	    .forget {
	      color: $primary_color;
	      font-style: italic;
	      font-weight: 600;
	      &:hover {
	        opacity: 0.6;
	      }
	    }
	    label {
	      font-style: italic;
	      color: #7c7f85;
	      font-weight: 500;
	    }
	    .login-form, .register-form {
	      .check {
	        position: relative;
	        top: -1px;
	      }
	      .fields-content {
	        padding: 40px 40px 20px;
	      }
	      .fields-footer {
	        padding: 0 40px 40px 40px;
	      }
	    }
	    span.wpcf7-not-valid-tip {
	      font-size: 10px;
	      line-height: 1;
	      margin-bottom: 10px;
	    }
	  }
	}
}
#page-sign-up, #page-sign-in {
	padding-bottom: 80px;
	.cms-modal-content {
		max-width: 370px;
		margin: auto;
	}
}

#cshero-footer-bottom .social-button-free {
	display: none;
}

/* Popup + Menu */
.cshero-popup-menu {
	background-color: #191919;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    @include transition(all 200ms linear 0ms);
    .cshero-popup-menu-inner {
		position: absolute;
		max-width: 1170px;
		left: 0;
		right: 0;
		margin: auto;
		padding: 85px 0;
		height: 100vh;
	}
	.menu-popup-close {
		color: #fff;
	    font-size: 24px;
	    position: absolute;
	    right: 15px;
	    top: 85px;
	    cursor: pointer;
	    &:hover {
	    	color: $primary_color;
	    }
	}
	.menu-main-menu {
		left: 0;
	    margin: auto;
	    max-width: 300px;
	    position: absolute;
	    right: 0;
	    top: 50%;
	    @include transform(translate(0px, -50%));
	    width: 100%;
		li {
			padding: 12px 0;
			position: relative;
			a {
				font-size: 22px;
				line-height: 1;
				color: #fff;
				.title-attribute {
					display: none;
				}
			}
			&.current-menu-item a, a:hover {
				color: $primary_color;
			}
			ul.sub-menu {
				width: 100% !important;
				display: none;
				+ .cs-menu-toggle {
					background-color: rgba(255, 255, 255, 0.03);
				    color: #999;
				    cursor: pointer;
				    display: block;
				    font-size: 14px;
				    height: 24px;
				    line-height: 24px;
				    position: absolute;
				    right: 0;
				    text-align: center;
				    top: 10px;
				    width: 24px;
				    @include border-radius(2px);
				    @include transition(all 300ms linear 0ms);
				    &:before {
				      content: "\f105";
				      font-family: FontAwesome;
				    }
				    &:hover {
				      color: #fff;
				    }
				}
				> li {
					padding-bottom: 0;
					> a {
						font-size: 15px;
						color: rgba(255,255,255,0.8);
					}
					&.current-menu-item a, a:hover {
						color: $primary_color;
					}
				}
				&.submenu-open {
			        + .cs-menu-toggle {
						&:before {
							content: "\f107";
						}
			        }
			    }
			}
		}
	}
	&.open {
    	visibility: visible;
    	opacity: 1;
    }
}
