CZ_OpenSpice/static/main/scss/_site-blocks.scss

.site-blocks-cover {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: top;
	background-position: center center;
	overflow: hidden;
	position: relative;
	.lead {
		font-family: $font-family-2;
		font-size: 1.3rem;
		color: lighten($black, 10%);
	}
	&.overlay {
		position: relative;
		&:before {
			position: absolute;
			content: "";
			left: 0;
			bottom: 0;
			right: 0;
			top: 0;
			z-index: 2;
			background: rgba($black, 0);
			// @include media-breakpoint-down(md) {
			// 	background: rgba($white, .5);
			// }
		}
	}
	
	&, & > .container > .row {
		min-height: 600px;
		height: calc(100vh);
	}
	&.inner-page-cover {
		&, & > .container > .row {
			min-height: 400px;
			height: calc(20vh);		
		}
	}
	.text-intro {
		position: relative;
		z-index: 2;
	}
	h1 {
		font-size: 3rem;
		font-family: $font-family-2;
	}
	.img-face {
		position: absolute;
		right: -5%;
		bottom: 0;
		z-index: 1;
		@include media-breakpoint-down(md) {
			right: -25%;
		}
	}
	
}
.section-title {
	position: relative;
	padding-bottom: 20px;
	&:after {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		height: 2px;
		background: $primary;
		width: 50px;
	}
	&.text-center {
		&:after {
			left: 50%;
			transform: translateX(-50%);
		}	&:after {
			background: $primary;
		}
	}
	&.text-white {

	}
}
.position-relative {
	position: relative;
}

.service {
	padding: 30px;
	background: $white;
	box-shadow: 0 1px 2px 0px rgba($black, .1);
	transition: .3s all ease-in-out;
	top: 0;
	position: relative;
	.svg-icon {
		margin-right: 20px;
		img {
			width: 150px;
		}
	}
	&:hover {
		box-shadow: 0 8px 50px -5px rgba($black, .1);
		top: -2px;
	}
	.service-number {
		flex: 0 0 60px;
		span {
			position: relative;
			width: 50px;
			height: 50px;
			line-height: 50px;
			border-radius: 50%;
			background: #e3d3c1;
			display: inline-block;
			color: $white;
			text-align: center;	
		}
	}
	.service-about {
		*:last-child {
			margin-bottom: 0;
		}
		h3 {
			font-size: 1.2rem;
			margin-bottom: 10px;
		}
	}
}

.gal-item {
	margin-bottom: 30px;
}

.filters {
	.btn {
		border-color: transparent;
		font-size: .8rem;
		margin: 5px;
		letter-spacing: .2rem;
		background: rgba($dark, .05);
		color: $dark;
		padding: 5px 20px;
		border-radius: 30px!important;
		border: none!important;
		text-transform: uppercase;
		&:hover, &:focus, &:active {
			border-color: transparent!important;
			background: rgba($dark, .3)!important;
			color: $black;
		}
		&.active {
			background: $primary!important;
			color: $white!important;
			border-color: $primary!important;
			// box-shadow: 0 4px 15px -3px rgba($primary, .5)!important;
		}
	}
}


/* Isotope Transitions
------------------------------- */
.isotope,
.isotope .item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
      -ms-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.isotope .item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
      -ms-transition-property:     -ms-transform, opacity;
       -o-transition-property:         top, left, opacity;
          transition-property:         transform, opacity;
}
  
  
/* responsive media queries */

@media (max-width: 768px) {
 
}

.item { 
  border: none;
  margin-bottom: 30px;
  border-radius: 4px;
  a {
  	display: block;
  	overflow: hidden;
  	position: relative;
  	border-radius: 4px;
	  img {
	  	position: relative;
	  	transform: scale(1.0);
	  	transition: .3s all ease-in-out;
	  }
  }
  .item-wrap {
  	display: block;
  	position: relative;
  	&:after {
  		z-index: 2;
			position: absolute;
			content: "";
			top: 0; left: 0; right: 0; bottom: 0;
			background: rgba($black, .4);
			visibility: hidden;
			opacity: 0;
			transition: .3s all ease-in-out;
  	}
  	> span {
  		position: absolute;
  		top: 50%;
  		left: 50%;
  		z-index: 3;
  		transform: translate(-50%, -50%) scale(0.0);
			color: $white;
			font-size: 1.7rem;
			opacity: 0;
			visibility: hidden;
			// margin-top: 10px;
			transition: .3s all ease;
  	}
  	&:hover {
  		&:after {
  			opacity: 1;
  			visibility: visible;
  		}
  		span {
  			margin-top: 0px;
  			opacity: 1;
  			visibility: visible;
  			transform: translate(-50%, -50%) scale(1.0);
  		}
  	}
  }

  &:hover {
  	a {
			img {
				transform: scale(1.05);
	  		transition: .3s all ease-in-out;
			}
		}
  }
}

.slide-one-item {
	.slide {
		text-align: center;
		blockquote {
			position: relative;
			max-width: 700px;
			font-size: 1.2rem;
			color: $black;
			margin-left: auto;
			margin-right: auto;
			text-align: center;
			font-style: italic;
			color: $white;
			&:before {
				color: $white;
				font-size: 2.2rem;
				font-style: normal;
				font-family: 'icomoon';
				content: "\e244";
			}
			
		}
		cite {
			margin-top: 50px;
			font-size: 1rem;
			color: rgba($white, .5);
		}
	}

	.owl-dots {
		text-align: center;
		.owl-dot {
			display: inline-block;
			> span {
				margin: 7px;
				background: rgba($white, .3);
				display: inline-block;
				width: 7px;
				height: 7px;
				border-radius: 50%;
			}
			&:hover {
				> span {
					background: rgba($white, .5);
				}
			}
			&.active {
				> span {
					background: $white;
				}
			}
		}
	}
}

.blog_entry {
	img {
		border-top-left-radius: 4px;
		border-top-right-radius: 4px;
	}
	> div {
		border: 1px solid #eee;
		border-top: none;
	}
	h3 {
		font-size: 1.3rem;
		a {
			color: $black;
		}
	}
	.date {
		color: lighten($black, 60%);
		display: block;
		font-size: .9rem;
		margin-bottom: 15px;
	}
	.more {
		a {
			position: relative;
			color: $black;
			padding-bottom: 10px;
			&:before {
				content: "";
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				height: 2px;
				background: $black;
				transition: .3s all ease;
			}
			&:hover {
				&:before {
					background: $primary;
				}
			}
		}
	}
}


.sidebar-box {
	margin-bottom: 30px;
	padding: 25px;
	font-size: 15px;
	width: 100%;
	
	float: left;
	
	background: $white;
	*:last-child {
		margin-bottom: 0;
	}
	h3 {
		font-size: 18px;
		margin-bottom: 15px;
	}
}

.categories, .sidelink {
	li {
		position: relative;
		margin-bottom: 10px;
		padding-bottom: 10px;
		border-bottom: 1px dotted gray('300');
		list-style: none;
		&:last-child {
			margin-bottom: 0;
			border-bottom: none;
			padding-bottom: 0;
		}
		a {
			font-size: 18px;
			color: $black;
			display: block;
			&:hover {
				color: $primary;
			}
			span {
				position: absolute;
				right: 0;
				top: 0;
				color: #ccc;
			}
		}
		&.active {
			a {
				color: $black;
				font-style: italic;
			}
		}
	}
}


.comment-form-wrap {
	clear: both;
}

.comment-list {
	padding: 0;
	margin: 0;
	.children {
		padding: 50px 0 0 40px;
		margin: 0;
		float: left;
		width: 100%;
	}
	li {
		padding: 0;
		margin: 0 0 30px 0;
		float: left;
		width: 100%;
		clear: both;
		list-style: none;
		.vcard {
			width: 80px;
			float: left;
			img {
				width: 50px;
				border-radius: 50%;
			}
		}
		.comment-body {
			float: right;
			width: calc(100% - 80px);
			h3 {
				font-size: 20px;
			}
			.meta {
				text-transform: uppercase;
				font-size: 13px;
				letter-spacing: .1em;
				color: #ccc;
			}
			.reply {
				padding: 5px 10px;
				background: lighten($black, 90%);
				color: $black;
				text-transform: uppercase;
				font-size: 14px;
				&:hover {
					color: $black;
					background: lighten($black, 89%);
				}
			}
		}
	}
}

.search-form {
	
	.form-group {
		position: relative;
		input {
			padding-right: 50px;

		}
	}
	.icon {
		position: absolute;
		top: 50%;
		right: 20px;
		transform: translateY(-50%);
	}
}

.post-meta {
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .2em;
	a {
		color: $white;
		border-bottom: 1px solid rgba($white, .5);
	}
}

.form {
	.form-control {
		border: none;
		border-radius: 0px;
		border-bottom: 1px solid #eee;
		&:active, &:focus {
			border-color: $black;
		}
	}
}

.footer {
	font-size: .9rem;
	.footer-title {
		font-size: 1.1rem;
		margin-bottom: 30px;
	}
	ul {
		li {
			margin-bottom: 10px;
		}
	}
	a {
		color: darken(#eee, 40%);
		&:hover {
			color: $black;
		}
	}
}