OwlCyberSecurity - MANAGER

Edit File: _sections.scss

// main: style.scss

/* Section Stuffs
------------------------------*/
.section-padding {
	@include rem('padding', 50px 0px);
}
.section-padding-lg {
	@include rem('padding', 70px 0px);
}
.section-padding-larger {
	@include rem('padding', 100px 0px);
}
.section-padding-empty {
	@include rem('padding', 0px);
}

.section-meta {
	background-color: $meta;
}

.onepage-section, .screenr-section  {
	position: relative;
	overflow: hidden;
	// &:before {
	// 	position: absolute;
	// 	top: 0px; left: 0px; right: 0px; bottom: 0px; display: block;
	// 	content: " ";
	// 	z-index: 1;
	// }
	.container {
		position: relative;
		z-index: 5;
	}
}

.section-inverse {
	background: #222222;
	.section-title-area {
		.section-title {
			color: rgba(255, 255, 255, 0.99);
		}
		.section-subtitle {
			color: rgba(255, 255, 255, 0.7);
		}
		.section-subtitle::after {
			background: rgba(255, 255, 255, 0.8);
		}
	}
}

.section-inverse-extended {
	background: #333333;
	.section-title-area {
		.section-title {
			color: rgba(255, 255, 255, 0.99);
		}
		.section-subtitle {
			color: rgba(255, 255, 255, 0.7);
		}
		.section-subtitle::after {
			background: rgba(255, 255, 255, 0.8);
		}
	}
}

.section-inverse {
	color: rgba(255, 255, 255, 0.5);
	h1,h2,h3,h4,h5,h6 {
		color: rgba(255, 255, 255, 0.9);
	}
	p {
		color: rgba(255, 255, 255, 0.5);
	}
}

.section-title-area {
	margin-bottom: 40px;
	text-align: center;
	.section-title {
		font-family: $font_heading;
		font-size: 28px;
		letter-spacing: 0px;
		text-transform: uppercase;
		font-weight: 600;
		position: relative;
		margin-bottom: 0px;
		@include for(medium-screens) {
			font-size: 36px;
		}
	}
	.section-subtitle {
		font-size: 12px;
		display: inline-block;
		position: relative;
		@include rem('margin', 0px 0px 10px 0px);
		text-transform: uppercase;
		letter-spacing: 2px;
		// &:after {
		// 	content: "";
		// 	display: block;
		// 	width: 100%;
		// 	height: 2px;
		// 	background: $border;
		// 	position: absolute;
		// 	bottom: -6px;
		// }
		@include for(medium-screens) {
			font-size: 14px;
		}
	}
}
.section-desc {
	@include rem('font-size', 20px);
	@include rem('margin-top', 40px);
}
.section-content {
	padding-top: 10px;
}

/* Full Screen Slider
------------------------------*/
.swiper-slider {
	width: 100%;
	display: block;
	position: relative;
	overflow: hidden;
	//padding-top: 30%;
	//padding-bottom:  1%;
	&.fixed {
		//position: fixed;
		//top: 0px;
	}
	z-index: 0;

.swiper-container {
		width: 100%;
		height: 100%;
		display: block;
	//position: absolute;
	//top: 0px;
	//left: 0px;
	//bottom: 0px;

}

.swiper-slide {
		display: block;
		overflow: hidden;
		position: relative;
		background-position: center center;
		background-repeat: no-repeat;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		background-color: #222222;

.swiper-intro-inner {
				padding-top: 25%;
				padding-bottom: 25%;
			}
			.overlay {
				z-index: 3;
				position: absolute;
				top: 0px;
				left: 0px;
				right: 0px;
				bottom: 0px;
				opacity: 0.45;
				background: #000;

}
			.swiper-slide-actions {
				@include rem('margin-top', 30px);
			}

&.slide-align-left {
				.swiper-slide-intro {
					text-align: left;
				}
			}
			&.slide-align-right {
				.swiper-slide-intro {
					text-align: right;
				}
			}

&.slide-align-bottom_left, &.slide-align-bottom_center, &.slide-align-bottom_right {
				.swiper-slide-intro {

position: absolute;;
					top: auto;
					@include rem('bottom', 50px);
					width: 100%;
					max-width: 100%;
					.swiper-intro-inner{
						@include rem('max-width', 1140px);
						margin: 0 auto;
						@include rem('padding-bottom', 65px);
					}
				}
			}

&.slide-align-bottom_left {
				.swiper-slide-intro{
					text-align: left;
				}
			}

&.slide-align-bottom_right {
				.swiper-slide-intro{
					text-align: right;
				}
			}

}
	// Animataion
	.swiper-intro-inner {
		h1, h2, h3, h4,
		p, div,
		.swiper-slide-actions {
			-webkit-transform: translateY(100%);
	 		-moz-transform: translateY(100%);
	 		-ms-transform: translateY(100%);
	 		-o-transform: translateY(100%);
	 		transform: translateY(100%);
			-webkit-transition: 500ms linear;
			-moz-transition: 500ms linear;
			transition: 500ms linear;
			visibility: hidden;
		}

h1, h2, h3, h4 {
			color: #ffffff;
			text-transform: uppercase;
			-webkit-transition-delay: 0ms; /* Safari */
	    	transition-delay: 0ms;
		}

p, div {
			-webkit-transition-delay: 300ms; /* Safari */
			transition-delay: 300ms;
		}
	}

.swiper-slide-actions {
		-webkit-transition-delay: 600ms; /* Safari */
		transition-delay: 600ms;
	}

.activated {
		.swiper-intro-inner {
			h1, h2, h3, h4, p, div {
				-webkit-transform: translateY(0px);
		 		-moz-transform: translateY(0px);
		 		-ms-transform: translateY(0px);
		 		-o-transform: translateY(0px);
		 		transform: translateY(0px);
				visibility: visible;
			}
		}

}
	.swiper-button-prev,
	.swiper-button-next {
		background-image: none;
		background-color: rgba( 0, 0, 0, .2 );
		padding: 0px;
		@include rem('height', 60px);
		@include rem('width', 50px);
		overflow: hidden;
		i {
			@include rem('width', 50px);
			@include rem('font-size', 40px);
			@include rem('line-height', 58px);
			color: #fff;
			vertical-align: middle;
			text-align: center;
		}
		.slide-count {
			@include rem('height', 60px);
		    left: 0;
		    position: absolute;
   			top: 0;
   			@include rem('width', 50px);
			color: #fff;
			visibility: hidden;
		}
		&.active {
			.slide-count {
				visibility: visible;;
			}
		}
		.slide-current {
		    @include rem('height', 10px);
		    @include rem('left', 10px);
		    @include rem('line-height', 10px);
		    position: absolute;
		    @include rem('top', 10px);
		}
		.sep {
			position: absolute;
			-ms-transform: rotate(25deg); /* IE 9 */
		   -webkit-transform: rotate(25deg); /* Chrome, Safari, Opera */
		   transform: rotate(25deg);
		   width: 1px;
		   background: #fff;
		   display: block;
		   @include rem('height', 35px );
		   @include rem('height', 35px );
		   @include rem('top', ( 60px - 35px ) / 2 );
		   @include rem('left', ( ( 50px / 2 ) - 1px ) );

}
		.slide-total {
		    height: 10px;
		    @include rem('left', 31px);
		    @include rem('line-height', 10px);
		    position: absolute;
		    @include rem('bottom', 10px);
		}

&.swiper-button-disabled {
			display: none;
		}
		&:hover {
			background-color: rgba( 0, 0, 0, .5 );
		}
	}
	.swiper-button-prev {
		.slide-count {
			right:0px;
			left: auto;
		}
	}
	.swiper-button-prev{
		left: 0px;
		text-align: left;
		-webkit-border-top-right-radius: 4px;
		-webkit-border-bottom-right-radius: 4px;
		-moz-border-radius-topright: 4px;
		-moz-border-radius-bottomright: 4px;
		border-top-right-radius: 4px;
		border-bottom-right-radius: 4px;
	}
	.swiper-button-next {
		right: 0px;
		-webkit-border-top-left-radius: 4px;
		-webkit-border-bottom-left-radius: 4px;
		-moz-border-radius-topleft: 4px;
		-moz-border-radius-bottomleft: 4px;
		border-top-left-radius: 4px;
		border-bottom-left-radius: 4px;
		text-align: right;
	}

.btn-next-section {
		text-align: center;
		position: absolute;
		left: 50%;
		z-index: 11;
		color: #fff;
		cursor: pointer;
		@include rem('width', 60px);
		@include rem('height', 60px );
		@include rem('bottom', 30px  );
		@include rem('margin-left', - ( 60px / 2 ) );

-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		border-radius: 4px;
		&:hover {
			background-color: rgba( 0, 0, 0, .5 );
		}
		&:before, &:after {
			@include rem('width', 30px);
			@include rem('height', 1px);
			background: #fff;
			content: " ";
			display: block;
			position: absolute;
		}
		&:before {
			/* Safari */
			-webkit-transform: rotate(-135deg);
			/* Firefox */
			-moz-transform: rotate(-135deg);
			/* IE */
			-ms-transform: rotate(-135deg);
			/* Opera */
			-o-transform: rotate(-135deg);
			@include rem('bottom', ( 60px / 2 ) );
			@include rem('left', ( 5px ) );
		}
		&:after {
			/* Safari */
			-webkit-transform: rotate(135deg);
			/* Firefox */
			-moz-transform: rotate(135deg);
			/* IE */
			-ms-transform: rotate(135deg);
			/* Opera */
			-o-transform: rotate(135deg);
			@include rem('bottom', ( 60px / 2 ) );
			@include rem('right', ( 5px ) );
		}
	}

.swiper-container.over-1-3 {
		.btn-next-section {
			-webkit-transition-delay: 200ms; /* Safari */
			transition-delay: 200ms;

-webkit-transition: 400ms linear;
			-moz-transition: 400ms linear;
			transition: 400ms linear;

-webkit-transform: translateY(100px);
			-moz-transform: translateY(100px);
			-ms-transform: translateY(100px);
			-o-transform: translateY(100px);
			transform: translateY(100px);
			visibility: hidden;;
		}
	}

&.full-screen {
		.swiper-slide-intro {
			height: 100%;
			display: table;
		}
		.swiper-intro-inner {
			padding-top: 0px !important;
			padding-bottom: 0px !important;
			display: table-cell;
			vertical-align: middle;
		}
	}
}

.slide_content {
	@include rem('font-size', 22px);
	@include media-breakpoint-down(sm) {
		@include rem('font-size', 18px);
	}

.btn {
        margin: 10px;
    }

.btn-secondary-outline {
        border-color: #FFF;
        color: #FFF;
        &:hover {
            background: #FFFFFF;
            color: #333333;
        }
    }
	h1, h2, h3, h4, h5, h6 {
		font-weight: 100;
		letter-spacing: 1px;
		@include rem('margin-bottom', 20px);
		strong {
			font-weight: 900;
		}
	}
	p {
		@include rem('margin-bottom', 20px);
	}
	h1 {
		line-height: 1.3;
		@include rem('font-size', 35px);
		@include media-breakpoint-up(md) {
			@include rem('font-size', 50px);
		}
	}

}

.swiper-slide-intro {
	position: relative;
	width: 100%;
	z-index: 4;
	@include rem('max-width', 1140px);
	margin: 0 auto;
	color: #fff;
	text-align: center;
	//@include rem('font-size', 22px);
}

@include media-breakpoint-down(md) {
	.header-layout-fixed {
		.swiper-slide-intro {
			.swiper-intro-inner {
				//padding-top: 85px;
				padding-left: 30px;
				padding-right: 30px;
			}

}
	}
}

/* Section: Features
------------------------------*/
.section-features {
	.card {
		border: none;
	}
}

.features-content {

.features__item {
		@include media-breakpoint-down(md) {
			margin-bottom: 0px;
			display: inherit;
			width: 100%;
		}
		border-radius: 0px;
		background: $primary;
		color: rgba(255,255,255, 0.9);
		@include rem('font-size', 16px);
		h3 {
			color: rgba(255,255,255, 0.9);
			@include rem('margin-bottom', 20px);
			line-height: 1.3;
		}
		.features__item-media {
			text-align: center;
			&.icon {
				padding-top: 70px;
			}
			.fa-7x {
				font-size: 7em;
			}
		}
		.features__item-content {
			p:last-of-type {
				margin-bottom: 0px;
			}
			text-align: center;
			@include rem('padding', 60px 50px);
			.features__item-content-button {
				text-align: center;
				margin-top: 30px;
			}
			.btn-secondary-outline {
				border-color: #fff;
				color: #FFF;
				@include rem('padding', 5px 29px 7px);
				&:hover {
					color: $text;
					background-color: #FFF;
					border-color: #FFF;
				}
			}
		}
	}
}

/* Section: About
------------------------------*/
.section-about {
	.section-title-area {
		text-align: left;
		margin-bottom: 0px;
		.section-desc {
			margin-top: 20px;
		}
	}
	.section-about-content {
		padding-left: 30px;
	}
}

/* Section: Videolightbox
------------------------------*/
.section-videolightbox {
	text-align: center;
	.videolightbox__icon {
		@include rem('margin-top', 40px);
	}
	.videolightbox__heading {
		@include rem('font-size', 38px);
		letter-spacing: 0px;
		font-weight: 500;
		strong {
			font-weight: 800;
		}
	}
	.video_icon {
		background: rgba(0, 0, 0, 0.2) none repeat scroll 0 0;
	    border: 4px solid #fff;
	    border-radius: 100px;
	    height: 50px;
	    line-height: 1;
	    padding: 10px;
	    width: 50px;
		display: inline-block;;
		i {
			color: #fff;
		    font-size: 20px;
		    margin-left: 6px;
			margin-top: 0px;
			line-height: 1;
		}
		&:hover {
			background: #FFFFFF;
			i {
				color: #000;
			}
		}
	}
}

/* Section: Services
------------------------------*/
.services-content {
	p {
		color: $text;
	}
	.card {
		margin-top: 20px;
		margin-bottom: 10px;
	}
	.card-block, .card-img-overlay {
		@include rem('padding', 28px 30px 30px);
	}
	.card-title {
		margin-bottom: 15px;
	}
	.service__media-icon .service-card-content {
		padding-right: 80px;
	}
	.service-card-icon {
		position: absolute;
		top: 30px;
		right: 30px;
		i {
			color: $primary;
		}
	}
	.service-button {
		margin-top: 20px;
		display: block;
		font-size: 17px;
	}
	.card-img-overlay {
		background: rgba(0,0,0,0.7);
	}
}
.card-img-overlay {
	.card-title {
		a {
			color: #fff;
			&:hover {
				color: #777;
			}
		}
	}
}

/* Section: News
------------------------------*/
.section-news {
	 @include for( medium-screens  ) {
		.content-grid[data-layout="4"] {
			article:nth-child(4n+1) {
				clear: left;
			}
		}

.content-grid[data-layout="3"] {
			article:nth-child(3n+1) {
				clear: left;
			}
		}
		.content-grid[data-layout="2"] {
			article:nth-child(2n+1) {
				clear: left;
			}
		}
	}

@include for( screens-medium ) {
		.content-grid {
			article {
			 	width: 100%;
			}
		}
	}
	.entry-grid-elements {
		border: 1px solid $border;
		border-top: 3px solid $primary;
		padding: 25px 30px 25px 30px;
		background: #FFF;
		color: $text;

}
	.entry-grid-title {
		@include rem('font-size', 20px);
		line-height: 1.5;
		font-weight: 400;
		font-family: $font_heading;
		margin-bottom: 15px;
		a {
			color: #444444;
		}
	}
	.entry-thumb {
		img {
			width: 100%;
			height: auto;
		}
	}
	.entry-grid-cate {
		margin-bottom: 4px;
		a {
			color: #999999;
			font-weight: bold;
			font-size: 12px;
		}
	}
	.entry-grid-more {
		margin-top: 20px;
		a {
			color: #333333;
			text-transform: uppercase;
		}
	}
}
.content-grid {
	article {
		margin-bottom: 30px;
	}
}
.content-grid-loadmore {
	text-align: center;
	margin-top: 5px;
	margin-bottom: 10px;
	display: block;
	i {
		margin-left: 8px;
	}
}

/* Section: Clients
------------------------------*/
.section-clients {
	.section-title-area {
		margin-bottom: 20px;
	}
}
.clients-wrapper {
	&:after {
		@include clearfix();
	}
	margin-left: -15px;
	margin-right: -15px;
}
.client-col {
	float: left;
	img {
		max-width: 100%;
		height: auto;
	}
	padding: 15px;
}
@include for(medium-screens) {
	.client-4-cols {
		.client-col {
			width: ( 100%/4 );
			&:nth-child(4n+1) {
				clear: left;
			}
		}
	}
	.client-5-cols {
		.client-col {
			width: ( 100%/5 );
			&:nth-child(5n+1) {
				clear: left;
			}
		}
	}
	.client-6-cols {
		.client-col {
			width: ( 100%/6 );
			&:nth-child(6n+1) {
				clear: left;
			}
		}
	}
}

@include for(screens-medium) {
	.client-4-cols,
	.client-5-cols,
	.client-6-cols {
		.client-col {
			width: ( 100%/2 );
			&:nth-child(2n+1) {
				clear: left;
			}
		}
	}
}

/* Section: Contact
------------------------------*/

.section-contact {
	textarea,
	input[type="date"],
	input[type="datetime"],
	input[type="datetime-local"],
	input[type="email"],
	input[type="month"],
	input[type="number"],
	input[type="password"],
	input[type="search"],
	input[type="tel"],
	input[type="text"],
	input[type="time"],
	input[type="url"],
	input[type="week"] {
		width: 100%;
	}
	.contact-submit {
		text-align: center;

}
	.wpcf7-submit {
		padding: 20px 40px;
		font-size: 16px;
		width: 100%;
	}
	.large-label {
		text-transform: uppercase;
		font-weight: bold;
		letter-spacing: 1.5px;
		display: inline-block;
		margin-bottom: 5px;
		@include rem('font-size', 13px);
		color: #222222;
	}
}

.section-inverse {
	.large-label {
		color: rgba(255, 255, 255, 0.99);
	}
}

.contact-details {
	padding: 0px;
	text-align: center;
	&:after{
		@include clearfix();
	}
	@include for( medium-screens ) {

}

li {
		padding: 0px 15px;
		list-style: none;
		display: inline-block;
	}

.contact-detail {
		@include rem('margin-bottom', 40px);

}

i {
		color: $primary;
		margin-right: 6px;
	}
	a:hover {
		text-decoration: none;
	}
	a .contact-detail-value, .contact-detail-value {
		color: $text;
		font-size: 20px;
		position: relative;
		top: -5px;
		&:hover {
			text-decoration: none;
			color: $primary;
		}
	}
}

/* Section: Parallax
------------------------------*/
.section-parallax {
	background: none;
	position: relative;
	overflow: hidden;
	> section, .onepage-section, .section-inverse{
		background: none;
	}

.parallax-bg {
		&:before {
			content: " ";
			position: absolute;
			top: 0px; left: 0px; right: 0px; bottom: 0px;
			background: rgba( 0, 0, 0 ,.3 );
			display: block;
			width: 100%;
			height: 100%;
			z-index: 2;
		}
		&:after {
		}

position: absolute;
		top: 0px; bottom: 0px; left: 0px; right:0px;
		width: 100%;
		height: 120%;
		display: block;

-webkit-background-size: cover;
		-moz-background-size: cover;
		background-size: cover;
		background-repeat: no-repeat;
		background-attachment: scroll;
		//background-position: top center;
		img {
			position: absolute;
			left: 0;
			bottom: 0;
			min-width: 100%;
			min-height: 100%;
			width: auto;
			height: auto;
			max-width: 9999999px;
		}
	}

}
.parallax_bg_overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: 5;
	opacity: 0.4;
}

.parallax-content {
	z-index: 10;
	position: relative;
	padding: 100px 0px;
	text-align: center;
	h1,h2,h3,h4,h5,h6 {
		color: #FFFFFF;
		line-height: 1.5;
	}
	p, a {
		color: #FFFFFF;
	}
}

/* Section: Counter
------------------------------*/
.counter-item {
	background-color: #171717;
	padding: 25px 30px 30px 30px;
	position: relative;
	color: #FFFFFF;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	margin-bottom: 30px;
	&.counter-item-bg1 { background-color: #0099e5}
	&.counter-item-bg2 { }
	&.counter-item-bg3 { background-color: #ff4c4c}
	&.counter-item-bg4 { background-color: #34bf49}
	.counter-title {
		color: #FFF;
		text-transform: none;
		font-weight: 100;
		font-size: 22px;
		margin-bottom: 15px;
		display: block;
	}
	.counter__number span{
		font-size: 43px;
		line-height: 30px;
		font-weight: 100;
		letter-spacing: -2px;
	}
	i {
		position: absolute;
		right: 30px;
		bottom: 30px;
		color: rgba( 255, 255, 255, .5);
	}
}

/* Section: Gallery
------------------------------*/

.gallery-grid .g-item {
	padding: 10px;
	float: left;
}

// Zoom effect
.g-zoom-in {
	.g-item {
		display: block;
		overflow: hidden;
		.inner-content {
			display: block;
			width: 100%;
			height: 100%;
			overflow: hidden;
		}
		img {
			display: block;
			overflow: hidden;
			-webkit-transition: all 0.5s linear;
			transition: all 0.5s linear;
		}
		&:hover {
			img {
				-ms-transform: scale(1.5, 1.5); /* IE 9 */
				-webkit-transform: scale(1.5, 1.5); /* Safari */
				transform: scale(1.5, 1.5);
			}
		}
	}
}

.g-layout-full-width.container {
	width: 100%;
	max-width: none;
	padding: 0px;
}
@include for( small-screens ) {
	@for $i from 1 through 6 {
		.g-col-#{$i} {
			.g-item {
				width: (100% / $i);
				&:nth-child( #{$i}n+1 ) {
					clear: left;
				}
			}
		}
	}
}

@media screen and (min-width: $small_phone) and (max-width: $phone) {
	@for $i from 1 through 6 {
		.g-col-#{$i} {
			.g-item {
				width: (100% / $i);
				&:nth-child( #{$i}n+1 ) {
					clear: left;
				}
			}
		}
	}
}

@include for( screens-tiny ){
	@for $i from 1 through 6 {
		.g-col-#{$i} {
			.g-item {
				width: (100% / $i);
				&:nth-child( #{$i}n+1 ) {
					clear: left;
				}
			}
		}
	}
}

.gallery-justified {
	width: 100%;
	position: relative;
	overflow: hidden;

img {
		max-width: none;
		position: absolute;
		top: 50%;
		left: 50%;
		margin: 0;
		padding: 0;
		border: none;
	}
}
.gallery-justified > a,
.gallery-justified > div {
	position: absolute;
	display: inline-block;
	overflow: hidden;
	float: left;
	//filter: "alpha(opacity=10)";
	//opacity: 0.1;
}

.gallery-masonry {
	width: 100%;
	position: relative;
	display: block;
	&:affter{
		@include clearfix-after();
	}
	.inner {
		display: block;
	}
}