/*
Theme Name:CF
Theme URL:https://controlflow.co.uk/
Description:Control Flow Technologies Group
Author:CF
Template:twentytwenty
Version:1.0.0
Text Domain:twentytwenty-child
*/ 
@charset "utf-8";
/* CSS Document */
.pattern-right:after{
	display: block;
    width: 50px;
    height: 18px;
    content: "";
    background:url("./images/pattern-border.webp")repeat;
	margin: 10px auto 0 auto;
}
.pattern-left:before{
	display: block;
    width: 50px;
    height: 18px;
    content: "";
    background:url("./images/pattern-border.webp")repeat 0 0;
	margin: 0 auto 6px auto;
}
.pattern-bottom:after {
    display: block;
    width: 50px;
    height: 18px;
    content: "";
    background: url(./images/pattern-border.webp) repeat;
    margin-top: 10px;
}
.pattern-left-small:before{
	content: "";
	width: 18px;
	height: 18px;
	display: block;
	margin: 0 auto 10px auto;
	background:url("./images/pattern-border.webp")repeat;
}
/*slider start*/
.splide-slider-wrapper .splide__track{
	padding: 0;
	margin: 0;
}
.splide-slider-wrapper .splide__track{
  /*aspect-ratio: 16 / 9;*/
  background: #f0f0f0;
}
.splide-slider-wrapper .splide__track>ul{
	padding: 0;
	margin: 0;
}
.splide-slider-wrapper .splide__track>ul>li{
	/*padding: 0;
	margin: 0;
	background: none;*/
}
.splide__slide img:first-child{
	display: block;
	width: 100%;
	height: auto;
}
.splide-slide-title{
	font-family: 'Roboto-Bold';
	font-weight: normal;
	color: #fff;
	padding-left: 3px;
	font-size: 1.2rem;
	line-height: 1.8rem;
	text-transform: uppercase;
	margin-bottom: 0;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 3;
	background:rgba(255, 114, 0, 0.8);
	padding: 6px 12px;
}
.splide-custom-nav{
	margin-right: 0;
	width: 100%;
	padding: 30px 12px 8px;
	justify-content: space-between;
	align-items: center;
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 6;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.65+100 */
	background: -webkit-linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%);
	background: -o-linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%);
	background: linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

}
.splide-custom-nav span{
	font-family: 'Roboto-Bold';
	font-weight: normal;
	display: inline-block;
	font-size: 1.2rem;
	line-height: 1.8rem;
	cursor: pointer;
}
.slider-btn em{
	font-style: normal;
	display: block;
	color: #fff;
}
.slider-btn em{
	position: relative;
}
.arrow-left{
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23fff' d='M4.3 9.6L13.6.3c.2-.1.3-.2.5-.2s.4.1.5.2l1 1c.1.2.2.3.2.5s-.1.3-.2.4l-7.8 7.9 7.8 7.7c.1.2.2.3.2.5s-.1.4-.2.5l-1 1c-.2.1-.3.2-.5.2-.1 0-.3-.1-.4-.1l-9.3-9.3c-.1-.2-.2-.3-.2-.5s.1-.4.1-.5z'/%3E%3C/svg%3E") no-repeat ;
	background-size: 12px auto;
	background-position: 0 2px;
}
.arrow-right{
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11.7 20'%3E%3Cpath fill='%23fff' d='M11.6 10.1c0 .2-.1.3-.2.5l-9.3 9.3c-.1 0-.3.1-.4.1-.2 0-.3-.1-.5-.2l-1-1c-.1-.1-.2-.3-.2-.5s.1-.3.2-.5L8 10.1.2 2.2C.1 2.1 0 2 0 1.8s.1-.3.2-.5l1-1c.1-.1.3-.2.5-.2s.3.1.5.2l9.3 9.3c0 .1.1.3.1.5z'/%3E%3C/svg%3E") no-repeat;
	background-size: 7px auto;
	background-position: 20px 2px;
}
.arrow-left em{
	margin-left: 15px;
}
.arrow-right em{
	right: 14px;
    margin-right: 0px;
}
.slider-nav-two{
	position: relative;
	background: none;
	justify-content: flex-start;
}
.slider-nav-two span{
	display: block;
	 width: 84px;
	 height: 11px;
}
.slider-nav-two .arrow-left{
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 99.2 9.4' fill='%23383838'%3E%3Cpath d='M5.5.8c0 .1 0 .2-.1.2L1.7 4.7l3.7 3.7c.1.1.1.1.1.2s0 .2-.1.2l-.5.5c0 .1-.1.1-.2.1s-.2 0-.2-.1L.1 4.9C0 4.8 0 4.8 0 4.7s0-.2.1-.2L4.5.1c.1-.1.1-.1.2-.1s.2 0 .2.1l.5.5c.1 0 .1.1.1.2z'/%3E%3Cpath d='M1.7 4.1h97.5v1.2H1.7z'/%3E%3C/svg%3E") no-repeat;
	webkit-transition: all .3s;
	-khtml-transition: all .3s;
	-moz-transition: all .3s;
	-ms-transition: all .3s;
	-o-transition: all .3s;
	transition: all .3s;
}
.slider-nav-two .arrow-right{
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 99.2 9.4' fill='%23383838'%3E%3Cpath d='M93.8.6l.5-.5c0-.1.1-.1.2-.1s.2 0 .2.1l4.4 4.4c.1.1.1.1.1.2s0 .2-.1.2l-4.4 4.4c-.1.1-.1.1-.2.1s-.2 0-.2-.1l-.5-.5c-.1-.1-.1-.1-.1-.2s0-.2.1-.2l3.7-3.7L93.8 1c-.1-.1-.1-.1-.1-.2s0-.2.1-.2z'/%3E%3Cpath d='M0 4.1h97.5v1.2H0z'/%3E%3C/svg%3E") no-repeat;
	margin-left: 20px;
	webkit-transition: all .3s;
	-khtml-transition: all .3s;
	-moz-transition: all .3s;
	-ms-transition: all .3s;
	-o-transition: all .3s;
	transition: all .3s;
}
/*slider end*/
.image-style-1{
	border: none !important;
	box-shadow: none !important;
	position: relative;
}
.image-style-1 .dotted-img-frame, .image-style-1:after{
	width: 100%;
	display: block;
	position: absolute;
	content: '';
	top: 0;
	left:0;
	z-index: 2;
	background: url("./images/infrastructure-sec-bg.webp") no-repeat 50% 50%;
	background-size: cover;
    height: 100%;
}
.image-style-1 img:first-child{
	margin: 0 auto;
	width: 100%;
	height: auto;
	display: block;
	border-radius: 50%;
	padding: 9% 5% 5% 9%;
}


.circlur-btn svg {
  overflow: visible  !important;
}

.circlur-btn path {
  opacity: var(--show, 0) !important;
  transition: opacity 0.2s !important;
}
.circular-wrapper{
	position: absolute !important;
	top: 20px !important;
	left: 20px !important;
	display: block !important;
	border-radius: 50% !important;
}
 .circular-wrapper.top-right{
	right: 10px !important;
	top: 10px !important;
	 left: auto !important;
}
 .circular-wrapper.top-left{
	right: 10px !important;
	top: 10px !important;
	 left: auto !important;
}
 .circular-wrapper.bot-right{
	right: 10px !important;
	bottom: 10px !important;
	top: auto !important;
	left: auto !important;
}
 .circular-wrapper.bot-left{
	left: 10px !important;
	bottom: 10px !important;
	 top: auto !important;
}
 .circular-wrapper.center{
	left: 50% !important;
	top: 50% !important;
	transform: translate(-50%, -50%) !important;
}
.circlur-btn{
	background: #142236 !important;
	display: block !important;
	width: 70px !important;
	height: 70px !important;
	border-radius: 50% !important;
	padding: 5px !important;
		animation: spin 20s linear infinite !important;
}
.circlur-btn textPath{
	fill: #fff !important;
	font-family: 'Poppins-Regular', sans-serif !important;
	font-weight: normal !important;
	font-size: 1.4rem !important;
}
.circuler-btn-icon{
	display: block !important;
	width: 40px !important;
	height: 40px !important;
	border-radius: 50% !important;
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) !important;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.alignright, .alignleft {
    height: auto;
    text-align: center;
    display: inline-block;
    margin-bottom: 12px !important;
	position: relative !important;
	max-width: 400px !important;
}
.aligncenter {
    height: auto;
    text-align: center;
    display: inline-block;
    margin-bottom: 12px !important;
	position: relative !important;
}
.alignright img, .alignleft img{
	width: 100% !important;
	height: auto !important;
	display: block !important;
}
.aligncenter img{
	display: block !important;
}

.learn-more-btn{
	display: inline-block;
	color: #142236;
	font-size: 1.4rem;
	line-height:2.0rem;
	font-family: 'Poppins-SemiBold', sans-serif;
	font-weight: normal;
	position: relative;
}
.learn-more-btn::before {
    display: inline-block;
    width: 8px;
    height: 8px;
    top: 5px;
    right: -14px;
    content: "";
    border: solid #142236;
    border-width: 2px 0 0 2px;
    transform: rotate(135deg);
	position: absolute;
}

@media only screen and (min-width: 768px){
	.pattern-right:after{
		display: inline-block;
		margin-left: 18px;
		vertical-align: middle;
		margin-top: 0;
	}
	.pattern-left:before{
		display: inline-block;
		margin-right: 18px;
		margin-bottom: 0;
		vertical-align: middle;
	}
	
	.pattern-left-small:before{
		display: inline-block;
		margin-right: 18px;
		margin-bottom: 0;
		vertical-align: middle;
	}
	/*slider start*/
	.splide-slide-title{
		font-size: 1.6rem;
		line-height: 2.2rem;
	}
	
	/*slider end*/
	
	.circlur-btn{
		width: 80px !important;
		height: 80px !important;
		padding: 7px !important;
	}
	.alignleft .circular-wrapper{
		border: 4px solid rgba(255, 255, 255, 0.5) !important;
	}
	.alignleft{
		width: 34% !important;
		float:left !important;
		margin:0 25px 25px 0 !important;
		box-shadow: 8px 8px 0px 0px rgba(111, 151, 194, 0.2) !important;
	}
	.alignright {
		width: 34% !important;
		float:right !important;
        margin: 0 0 25px 25px !important;
		box-shadow: -8px 8px 0px 0px rgba(111, 151, 194, 0.2) !important;
    }
	.alignright img, .alignleft img{
		max-width: 100% !important;
	}
}
@media only screen and (min-width: 921px){
	.circlur-btn{
		width: 100px !important;
		height: 100px !important;
	}
	.circuler-btn-icon{
		width: 50px !important;
		height: 50px !important;
		background-size: 20px auto !important;
	}
	.alignright{
		margin:0 0 30px 30px !important;
		box-shadow: -10px 10px 0px 0px rgba(111, 151, 194, 0.2) !important;
		width: auto !important;
	}
	.alignleft{
		margin:0 30px 30px 0 !important;
		box-shadow: 10px 10px 0px 0px rgba(111, 151, 194, 0.2) !important;
		width: auto !important;
	}
}

@media only screen and (min-width: 1025px){
	.pattern-right:after{
		width: 83px;
    	height: 18px;
	}
	.pattern-left:before{
		width: 83px;
    	height: 18px;
	}
	.pattern-bottom:after {
		width: 83px;
		height: 18px;
	}
	
	.pattern-left-small:before{
		display: inline-block;
	}
	.ani-fade, .ani-fade .list-item-ani{
		opacity: 0;
		transition: opacity 0.5s linear var(--delay, 0s); /*allow-discrete*/
	}
	.ani-fade.true, .ani-fade.true .list-item-ani{
		opacity: 1;
	}
	.no-js .ani-fade, .no-js .ani-fade .list-item-ani {
		opacity: 1;
	}
	.ani-fade-from-bottom{
		opacity: 0;
  		transform: translateY(50px);
  		transition: opacity 0.6s ease-out, transform 0.6s ease-out;
	}
	.ani-fade-from-top{
		opacity: 0;
  		transform: translateY(-50px);
  		transition: opacity 0.6s ease-out, transform 0.6s ease-out;
	}
	.ani-fade-from-bottom.true, .ani-fade-from-top.true{
		opacity: 1;
  		transform: translateY(0);
	}
	.no-js .ani-fade-from-bottom, .no-js .ani-fade-from-top{
		opacity: 1;
  		transform: translateY(0);
	}
	.ani-fade-from-left {
	  opacity: 0;
	  transform: translateX(-100px);
	  transition: opacity 0.6s ease, transform 0.6s ease;
	}
	.ani-fade-from-right {
	  opacity: 0;
	  transform: translateX(100px);
	  transition: opacity 0.6s ease, transform 0.6s ease;
	}
	.ani-fade-from-left.true, .ani-fade-from-right.true {
	  opacity: 1;
	  transform: translateX(0);
	}
	.no-js .ani-fade-from-left, .no-js .ani-fade-from-right {
	  opacity: 1;
	  transform: translateX(0);
	}
	.ani-rotate-left {
	  opacity: 0;
	  transform: rotate(-6deg);
	  transform-origin: center center;
	  transition: opacity 0.6s ease, transform 0.6s ease;
	}
	.ani-rotate-right {
	  opacity: 0;
	  transform: rotate(6deg);
	  transform-origin: center center;
	  transition: opacity 0.6s ease, transform 0.6s ease;
	}
	.ani-rotate-left.true, .ani-rotate-right.true {
	  opacity: 1;
	  transform: rotate(0deg);
	}
	.no-js .ani-rotate-left, .no-js .ani-rotate-right {
	  opacity: 1;
	  transform: rotate(0deg);
	}
	.slider-nav-two .arrow-left:hover{
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 99.2 9.4' fill='%23ff7200'%3E%3Cpath d='M5.5.8c0 .1 0 .2-.1.2L1.7 4.7l3.7 3.7c.1.1.1.1.1.2s0 .2-.1.2l-.5.5c0 .1-.1.1-.2.1s-.2 0-.2-.1L.1 4.9C0 4.8 0 4.8 0 4.7s0-.2.1-.2L4.5.1c.1-.1.1-.1.2-.1s.2 0 .2.1l.5.5c.1 0 .1.1.1.2z'/%3E%3Cpath d='M1.7 4.1h97.5v1.2H1.7z'/%3E%3C/svg%3E") no-repeat;
	}
	.slider-nav-two .arrow-right:hover{
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 99.2 9.4' fill='%23ff7200'%3E%3Cpath d='M93.8.6l.5-.5c0-.1.1-.1.2-.1s.2 0 .2.1l4.4 4.4c.1.1.1.1.1.2s0 .2-.1.2l-4.4 4.4c-.1.1-.1.1-.2.1s-.2 0-.2-.1l-.5-.5c-.1-.1-.1-.1-.1-.2s0-.2.1-.2l3.7-3.7L93.8 1c-.1-.1-.1-.1-.1-.2s0-.2.1-.2z'/%3E%3Cpath d='M0 4.1h97.5v1.2H0z'/%3E%3C/svg%3E") no-repeat;
		margin-left: 20px;
	}
    /*slider btn start*/
	 /*slider btn start*/
	
	.circlur-btn{
		width: 120px !important;
		height: 120px !important;
	}
	.circuler-btn-icon{
		width: 68px !important;
		height: 68px !important;
		background-size: 25px auto !important;
	}
	.circlur-btn:hover{
		animation-play-state: paused !important;
	}
	.alignright{
		margin:0 0 30px 40px !important;
		box-shadow: -13px 13px 0px 0px rgba(111, 151, 194, 0.2) !important;
	}
	.alignleft{
		margin:0 40px 30px 0 !important;
		box-shadow: 13px 13px 0px 0px rgba(111, 151, 194, 0.2) !important;
	}
	.learn-more-btn{
		font-size: 1.6rem;
		line-height:2.2rem;
	}
	.learn-more-btn::before {
		width: 8px;
		height: 8px;
		top: 6px;
		-webkit-transform: rotate(135deg);
		-webkit-transition: right .6s;
		-khtml-transition: right .6s;
		-moz-transition: right .6s;
		-ms-transition: right .6s;
		-o-transition: right .6s;
		transition: right .6s;
	}
	.learn-more-btn:hover{
		color: #6f97c2;
	}
	.learn-more-btn:hover::before{
		 border: solid #6f97c2;
		border-width: 2px 0 0 2px;
		right: -25px;
	}
}
@media only screen and (min-width: 1300px){
	
}

/*animation start*/
	/*.anim-ele{
		opacity:0;
		transition-property:opacity,transform;
		transition-duration:1s;
	}
	.fade-up{
		transform:translate3d(0,100px,0);	
		transition-timing-function:cubic-bezier(.175,.885,.32,1.275);
	}
	.anim-ele.ele-inview.fade-up{
		opacity:1;
    	transform:translateZ(0);
	}
	.anim-ele.fade-up2{
		transform:translate3d(0,100px,0);	
		transition-timing-function:ease-out;
	}
	.anim-ele.ele-inview.fade-up2{
		opacity:1;
    	transform:translateZ(0);
	}
	.anim-ele.ele-inview.fade{
		opacity:1;
	}*/
@media only screen and (min-width: 1025px){
	.ani-fade, .ani-fade .list-item-ani{
		opacity: 0 !important;
		transition: opacity 0.5s linear  !important;
	}
	.ani-fade.true, .ani-fade.true .list-item-ani{
		opacity: 1 !important;
	}
	.no-js .ani-fade, .no-js .ani-fade .list-item-ani {
		opacity: 1 !important;
	}
	.ani-fade-from-bottom{
		opacity: 0 !important;
  		transform: translateY(50px) !important;
  		transition: opacity 0.6s ease-out, transform 0.6s ease-out !important;
	}
	.ani-fade-from-top{
		opacity: 0 !important;
  		transform: translateY(-50px) !important;
  		transition: opacity 0.6s ease-out, transform 0.6s ease-out !important;
	}
	.ani-fade-from-bottom.true, .ani-fade-from-top.true{
		opacity: 1 !important;
  		transform: translateY(0) !important;
	}
	.no-js .ani-fade-from-bottom, .no-js .ani-fade-from-top{
		opacity: 1 !important;
  		transform: translateY(0) !important;
	}
	.ani-fade-from-left {
	  opacity: 0;
	  transform: translateX(-20px);
	  transition: opacity 0.6s ease, transform 0.6s ease;
	}
	.ani-fade-from-right {
	  opacity: 0;
	  transform: translateX(20px);
	  transition: opacity 0.6s ease, transform 0.6s ease;
	}
	.ani-fade-from-left.true, .ani-fade-from-right.true {
	  opacity: 1;
	  transform: translateX(0);
	}
	.no-js .ani-fade-from-left, .no-js .ani-fade-from-right {
	  opacity: 1;
	  transform: translateX(0);
	}
	.ani-rotate-left {
	  opacity: 0;
	  transform: rotate(-70deg);
	  transform-origin: center center;
	  transition: opacity 0.6s ease, transform 0.6s ease;
	}
	.ani-rotate-right {
	  opacity: 0;
	  transform: rotate(6deg);
	  transform-origin: center center;
	  transition: opacity 0.6s ease, transform 0.6s ease;
	}
	.ani-rotate-left.true, .ani-rotate-right.true {
	  opacity: 1;
	  transform: rotate(0deg);
	}
	.no-js .ani-rotate-left, .no-js .ani-rotate-right {
	  opacity: 1;
	  transform: rotate(0deg);
	}
	.ani-from-top{
		transform: translateY(-101%);transition: transform 0.6s ease;will-change: transform;
	}
	.ani-from-top.true {
		transform: translateY(0) !important;
	}
	.no-js .ani-from-top{
		transform: translateY(0) !important;
	}
	.ani-zoom {
	  opacity: 0;
		transform-origin: center; 
	  transform: translate(-50%, -50%) scale(0.7); 
	  transition: opacity 0.6s ease, transform 0.6s ease;
	}
	.ani-zoom.true, .no-js .ani-zoom{
	  opacity: 1;
	  transform: translate(-50%, -50%) scale(1);
	}
	
	.ani-zoom2 {
	  opacity: 0;
	  transform-origin: center; 
	  transform: scale(0.7);
	  transition: opacity 0.6s ease, transform 0.6s ease;
	}
	.ani-zoom2.true, .no-js .ani-zoom2{
	  opacity: 1;
	  transform: scale(1);
	}
}
	/*animation end*/
/*video popup*/
.pix-vpop {
    /*margin: 6% auto 0;*/
    border: 6px solid #6f97c2;
    position: relative;
    width: 900px;
    max-width: 96%;
    max-height: 86%;
    background: #000;
}
.pix-vpop-c-btn {
    width: 30px;
    height: 28px;
    display: block;
    position: absolute;
    right: -6px;
    top: -6px;
    background: #ff0b0b;
    color: #fff;
    font-size: 1.8rem;
    line-height: 2.2rem;
    text-align: center;
    cursor: pointer;
    z-index: 1;
    border-bottom-left-radius: 55%;
    padding-left: 4px;
}
.vpop-iframe-wrap {
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
    height: 0;
}
.vpop-iframe-wrap iframe {
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute;
    margin-bottom: 0;
	display: block;
}
.vpop-iframe-wrap iframe, .vpop-iframe-wrap video {
    margin-bottom: 0;
    max-width: 100%;
    vertical-align: middle;
}
.icon2{
	cursor: pointer !important;
}
/*video popup end*/
.et-db #et-boc .et-l .et_pb_module blockquote {
    border-color: #6f97c2 !important;
}