a{
	text-decoration: none;
}
.no-stretch {
  width: 100%;
  height: auto;
  object-fit: contain; 
}
img{
	width: 100%;
	height: auto;
	object-fit: contain; 
}


.btn{
    background: #4571C0;
    box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
    padding: 6px 16px;
    border-radius: 4px;
    letter-spacing: .02857em;
    color: #fff;
    transition: background-color 250ms cubic-bezier(.4,0,.2,1) 0s,box-shadow 250ms cubic-bezier(.4,0,.2,1) 0s,border 250ms cubic-bezier(.4,0,.2,1) 0s;
}
.btn:hover{
    border-color: #4571C0;
    background: #fff;
}
.header-section{
	margin: 0 0 50px;
}
.header-section h2{
	line-height: 1.167;	
	max-width: max-content;
    margin: 0 auto 20px !important;
    position: relative;
    padding-bottom: 20px;
}
.text-wrapper h2{
	max-width: max-content;
    margin: 0 auto 20px !important;
    position: relative;
    padding-bottom: 20px;
}
.header-section h2::before, .text-wrapper h2::before{
    content: '';
    position: absolute;
    bottom: -7px;
    border-bottom: 2px solid #000;
    width: 90%;
    height: 2px;
    left: 0;
    right: 0;
    margin: 0 auto;
}
.header-section h2:after, .text-wrapper h2::after{
    content: '';
    position: absolute;
    bottom: 0;
    border-bottom: 2px solid #000;
    width: 100%;
    height: 2px;
    left: 0;
    right: 0;
    margin: 0 auto;
}
.header-section p{
	margin: 20px auto;
	color: #414141;
    font-size: 25px;
    max-width: 1180px;
}
.bg-color{
	background: #f0f4f5;
}
.eyebg-color{
    background: #e3e3e3;
}
/*end global css*/


.navbar{
	border-bottom: 0.5px solid #d1cfcf;
    padding: 18px 0;
}
.navbar .nav-item{
	margin: 6px;
}
.navbar .navbar-nav .nav-link{    
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: .00938em;
    border-bottom: 2px solid #fff;
    color: #000;
}
.navbar .nav-item .nav-link:active{
	border-bottom: 2px solid #4571c0;
    color: #4571c0;
}
.navbar .nav-item .nav-link:hover{
	border-bottom: 2px solid #4571c0;
}
.navbar .navbar-nav .nav-link img{
	width: 30px;
	height: 16px;
}
.navbar-expand-lg .navbar-collapse{
	justify-content: flex-end;
}
.nav-item.dropdown:hover .dropdown-menu {
    display: block;
}
.dropdown-menu{
	padding: 0;
}
.dropdown-menu li:hover a.dropdown-item{
	background: #4571c0;
    color: #fff;;
}
.dropdown-menu li a.dropdown-item{
	padding: 0.5rem 1rem;
	transition: all .3s ease-in-out;
}
.dropdown-toggle::after{
	vertical-align: middle;
}
.navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .show>.nav-link{
	color: #4571c0;
	border-bottom: 2px solid #4571c0;
}
/*end header*/

.footer{
	background: #333;
}
.footer .footer-top{
	padding: 30px 0;
}
.footer .footer-top h3{
	font-weight: bold;
    font-size: 24px;
    color: #fff;
    margin: 0 0 10px;
}
.footer .footer-top a{
	display: inline-block;
	padding: 10px 0;
	color: #fff;
	font-size: 16px;
	text-decoration: none;
}
.footer .footer-inner a{
    display: block;
}
.footer .footer-inner.social a{
    display: inline-block;
    padding: 10px; 
}
.footer .footer-inner.social span:first{
    margin-left: -10px;
    display: inline-block;
}
.footer .footer-inner.social a i{
    font-size: 30px;
}
.footer .footer-bottom{
	padding: 30px;
	background: #262626;
    text-align: center;
}
.footer .footer-bottom small, .footer .footer-bottom a{
    font-size: .75rem;
    font-weight: 400;
    line-height: 1.66;
    letter-spacing: .03333em;
    color: #fff;
    text-align: center;
}
.footer .footer-bottom a:hover{
	text-decoration: underline;
}
/*end footer*/

.banner{
	padding: 50px 0;
}
.banner .banner-wrap h1{
	margin: 0;
}
.banner .banner-wrap p{
	margin-top: 30px;
    font-size: 20px;
}  
.banner .banner-wrap img{
    width: 100%;
}    
.text-sec{
	border-top: 1px solid #f0f1f3;
    padding: 50px 0;
    background: #f0f4f5;
}
.text-sec .text-wrapper h2{
	margin: 0 0 30px;
}
.text-sec .text-wrapper p{
	font-size: 16px;
	line-height: 1.5;
    letter-spacing: .00938em;
	margin: 0 0 30px;
}
.col3-sec{
	padding: 50px 0;
}
.col3-sec .icon-wrap{
	display: flex;
    overflow: hidden;
    position: relative;
    font-size: 1.25rem;
    align-items: center;
    flex-shrink: 0;    
    line-height: 1;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border-radius: 50%;
    justify-content: center;
    background: #fff;
    box-shadow: 0 3px 6px rgb(0 0 0 / 16%);
    opacity: 1;
    width: 80px;
    height: 80px;
    margin: auto;
}
.col3-sec .col3-wrap h3{
    color: #000;
    font-size: 24px;      
    margin: 18px 0 0;
}
.col3-sec .col3-wrap p{
	margin: 20px 0 0;
    color: #414141;
    font-size: 16px;    
}
.img-with-text{
	padding: 50px 0;
}
.img-with-text .img-text .l-img{
	padding: 0 30px;
}
.img-with-text .img-text .content{
	padding: 30px;
}
.img-with-text .img-text .content h3{
	margin: 0;
}
.img-with-text .img-text .content p{
	color: #414141;
    margin: 26px 0 0;
    font-size: 18px;
    line-height: 1.4;
}
/*projects page*/
.project-banner{
	padding: 100px 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}
.project-banner:before{
	content: '';
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	background: #0000006e;
}
.project-banner .pro-content{
	text-align: center;
	position: relative;
	z-index: 2;
}
.project-banner .pro-content h1{
	color: #fff;
	font-size: 3rem;    
    font-weight: 400;
    line-height: 1.167;    
    margin: 0 0 20px;
}
.project-banner .pro-content p{
	color: #fff;
	font-size: 20px;
	line-height: 25px;
	margin: 0 auto;
	max-width: 700px;
}
.pro-head{
	margin: 50px 0;
}
.pro-head h2{
	font-size: 48px;
	margin: 0;
}
.pbg-color{
	background: #c9c9c9;
	padding: 30px 0;
}
.wink_encode.encode{
	margin: 50px 0 0;
	position: relative;
	z-index: 0;
}
.wink_encode .row{
	align-items: center;	
	position: relative;	
}
.wink_encode .en-inner{
	position: relative;
	z-index: 2;
}
.wink_encode .encode h3{
	font-size: 23px;
	margin: 0 0 10px;
}
.wink_encode .encode p{
	font-size: 17px;
	line-height: 1.2;
	margin: 0 0 10px;
}
.tb-shap-animation1 {
    position: absolute;
    left: 64%;
    top: 30%;
    -webkit-animation: shapAnimation 20s alternate infinite linear;
    animation: shapAnimation 20s alternate infinite linear;
}
.tb-shap-animation-wrap.tb-style1 .tb-shap-animation1 {
    -webkit-animation: shapAnimation 20s alternate infinite linear;
    animation: shapAnimation 20s alternate infinite linear;
    left: 7%;
    top: -3%;
}
.tb-shap-animation-in {
    overflow: hidden;
    border-radius: 10px;
    border-bottom: 7px solid #e1dbf0;
    -webkit-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    transform: rotate(15deg);
}
.tb-shap-animation-wrap.tb-style1 .tb-shap-animation-in {
    border-radius: 0;
    border: none;
    height: 150px;
    width: 290px;
}
.tb-shap-animation-wrap.tb-style1 .tb-shap-animation-in b {
    height: 32px;
    position: absolute;
    width: 160px;
    bottom: 0;
    left: 106px;
    background: #FCDDF0;
}
.tb-shap-animation1 .tb-shap-animation-in span {
    position: absolute;
    height: 70px;
    width: 80px;
    border-radius: 10px;
    border: 7px solid #e1dbf0;
    -webkit-transform: rotate(63deg) skew(34deg);
    -ms-transform: rotate(63deg) skew(34deg);
    transform: rotate(63deg) skew(34deg);
    top: 35px;
    z-index: 1;
    left: -7px;
    border-left-width: 8px;
}
.tb-shap-animation-wrap.tb-style1 .tb-shap-animation1 .tb-shap-animation-in span {
        height: 180px;
    width: 630px;
    border-radius: 0;
    border: 32px solid #FCDDF0;
    -webkit-transform: rotate(62deg) skew(32deg);
    -ms-transform: rotate(62deg) skew(32deg);
    transform: rotate(62deg) skew(32deg);
    top: 256px;
    left: -30px;
    border-left-width: 36px;
}
@keyframes shapAnimation{
	0% {
    -webkit-transform: translate(0,0) rotate(0deg);
    transform: translate(0,0) rotate(0deg);
}
20% {
    -webkit-transform: translate(73px,-1px) rotate(36deg);
    transform: translate(73px,-1px) rotate(36deg);
}
40% {
    -webkit-transform: translate(141px,72px) rotate(72deg);
    transform: translate(141px,72px) rotate(72deg);
}
60% {
    -webkit-transform: translate(83px,122px) rotate(108deg);
    transform: translate(83px,122px) rotate(108deg);
}
80% {
    -webkit-transform: translate(-40px,72px) rotate(144deg);
    transform: translate(-40px,72px) rotate(144deg);
}
100% {
    -webkit-transform: translate(0,0) rotate(0deg);
    transform: translate(0,0) rotate(0deg);
}
}

#wink-forge{
	position: relative;
}
.simple-shape {
  	width: 100px;
  	height: 100px;
  	display: inline-block;
  	margin: 50px;
  	z-index: -1;	
}
.one.re-one{
	right: 0;
    top: 7%;
}
.one.wink-one{
	top: -23%;
    right: 39%;
}
.one {
  	background-color: #ffaabb;
  	-webkit-animation: simple-square-to-circle 2s 0s linear infinite alternate, simple-scale 1s 1s linear infinite alternate;
 	animation: simple-square-to-circle 2s 0s linear infinite alternate, simple-scale 1s 1s linear infinite alternate;
 	position: absolute;
    right: 40%;
    top: -4%;
    width: 200px;
    height: 200px;
}
.two {
  background-color: #aabbff;
  -webkit-animation: simple-rotate 2s 2s linear infinite alternate;
  animation: simple-rotate 2s 2s linear infinite alternate;
  position: absolute;
   right: 40%;
       top: 14%;
    width: 150px;
    height: 150px;
}
.four {
  	background-color: #c7e1ba;
  	-webkit-animation: simple-move 2s 2s linear infinite alternate;
  	animation: simple-move 2s 2s linear infinite alternate;
  	position: absolute;
    right: 4%;
	top: 15%;
}
.shp-animate{
  /* animation properties */
  animation-name: my-animation;
  animation-duration: 2s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  width: 230px;
  height: 100px;
  border-radius: 10px;
  position: absolute;
  left: 0; 
  right: 0; 
  margin-right: auto; 
  z-index: -1;

}

@keyframes my-animation {
  from {
    background-color: #ff7a59;
    width: 300px;
    top: 40%;
  }
  to {
    background-color: #d1ff09;
    width: 50px;
    top: 100px;
  }
}
@-webkit-keyframes simple-square-to-circle {
  100% {
    -webkit-border-radius: 50%;
  }
}

@keyframes simple-square-to-circle {
  100% {
    border-radius: 50%;
  }
}
@-webkit-keyframes simple-rotate {
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes simple-rotate {
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes simple-move {
  	100% {
    	-webkit-transform: translate(50px, 0);
  	}
}

@keyframes simple-move {
  	100% {
    	transform: translate(50px, 0);
  	}
}

/*wink forge page*/
.wink_encode.de-wink{
    padding: 50px 0;
}
.wink-overview{
    padding: 50px 0;
}
.wink-overview .card{
    height: 100%;
    border-radius: 10px;
}
.wink-overview .bshadow .card{
    box-shadow: 0 3px 50px rgba(0,0,0,.35);
}
.wink-overview .card .card-header{
    background: #376acc;
    color: #fff;
    text-align: center;
    border-radius: 10px 10px 0 0;
}
.wink-overview .card .card-body h3{
    font-size: 20px;
    color: #6F6F6F;
    margin: 0 0 10px;
}
.wink-overview .card .card-body p span{
    font-size: 14px;
    display: block;
    padding-bottom: 5px;
    line-height: 1.2;
}
.p-page .two, .p-page .one.re-one, .p-page .two, .p-page .four{
    top: unset;
}
.p-page .one{
    top: unset;
    right: 38%;
}
.p-page .one.re-one{
    right: 0;
}
.p-page .tb-shap-animation1{
    z-index: -1;
}
.wc-page .one{
    right: unset;
    left: 14%;
}
/*wink archive page*/
.archive.text-wrap{
    padding: 50px 0;
}
.archive.text-wrap h3{
    font-size: 18px;
    margin: 0 0 20px;
}
.archive.text-wrap p{
    margin: 0 0 20px;
}
.wall-list{
    padding: 50px 0 20px;
}
.wall-list ul{
    padding-left: 18px;
    margin-bottom: 0;
}
.wall-list ul li{
    padding-bottom: 10px;
}
/*wink live view page*/
.liveview-applink a{
    margin-right: 20px;
}
.liveview-btn a{
    margin: 50px 0;
}
/*solution page*/
.sol-overview{
    padding: 1px 0 50px;
}
.banner .banner-wrap strong{
    font-size: 14px;
    margin: 20px 0 0;
    display: inline-block;
}
.sol-video{
    padding: 0 0 50px;
}
.sol-video video{
    margin: 0 auto;    
}
.sol-imgtxt{
    padding: 50px 0;
}
.sol-imgtxt h3{
    margin: 0 0 20px;
}
.sol-imgtxt .sol-list{
    padding-left: 18px;
}  
/*Public eye page*/
.p-eye{
    padding: 50px 0;
}
.p-eye .content img{
    border-radius: 10px 10px 0 0;
}
.p-eye .card{
    box-shadow: 0 0 10px rgb(0 0 0 / 50%);
}
.p-contact{
    padding: 50px 0;
}
/*city cameras page*/
.gps-sec{
    padding: 50px 0;
}
/*content delivery page*/
.cd-baner span{
    font-size: 18px;
    margin: 20px 0 10px;
    display: block;
}
.banner.cd-baner p{
    font-size: 16px;
}
/*press marketing page*/
.press-link a{
    display: block;
    margin-bottom: 10px;
}
/*contct us page*/
.contact-us header p{
    font-size: 16px;
}
.contact-us .row .border-right{
    border-right: 1px solid #e3e0e0;
}
.contact-us .contact-box{
    margin: 10px auto;
    background: #ebebeb;
    padding: 10px;
    border-radius: 10px;
    height: 110px;
}
.contact-us h4{
    font-size: 18px;
    margin: 0 0 5;
    line-height: 1;
}
.contact-us .contact-emails{
    padding: 30px 0 0;
}
.contact-us .contact-emails h4{
    margin: 0;
}
.contact-us .contact-emails a{
    margin-bottom: 20px;
    display: inline-block;
}
.contact-us .contact-bottom{
    padding: 40px 0;
}
.contact-us .contact-bottom h6, .contact-us .contact-bottom p{
    font-size: 14px;
}
/*client portal*/
.client-portal{
    padding: 100px 0;
}
.client-portal .login-form{
    box-shadow: 0 0 10px rgb(0 0 0 / 50%);
    padding: 30px;
    border-radius: 10px;
    background: #fff;
    max-width: 600px;
    margin: 0 auto;
}


.mob-show{
    display: none;
}


@media(min-width: 767px){
    .sol-imgtxt .s-img{
        padding: 0 30px;
    }
    .contact-us .c-iner{
        padding: 0 20px;
    }
}

@media (max-width: 992px) {
    .desk-link{
        display: none;
    }
    .mob-show{
        display: block;
    }
    .navbar{
        padding: 5px 0;
    }
    .navbar-collapse {
        position: absolute;
        top: 100%;
        left: 100%;
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 15px;
        width: 70%;
        transition: all 0.4s ease;
        display: block;
        background: #fff;
        height: 100vh;
        overflow: auto;
    }
    .navbar-collapse.collapsing {
        height: auto !important;
        margin-left: 50%;
        left: 50%;
        transition: all 0.2s ease;
    }
    .navbar-collapse.show {
        left: 30%;
    }
    .navbar-light .navbar-toggler{
    	border: none;
    }
    .navbar-light .navbar-toggler:focus{
    	outline: none;
    	box-shadow: none;
    }
    .navbar-light .navbar-toggler-icon{
    	background-image: none;
    	font-size: 2rem;
    }
    .navbar-light .navbar-toggler-icon svg{
    	color: #4571c0;    
    	cursor: pointer;
    	fill: #4571c0;
	    display: inline-block;
    	font-size: 1.5rem;
    	transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    	flex-shrink: 0;
    	user-select: none;
    	width: 45px;
    	height: 45px;    	
	}
	.header-active{
		position: relative;
		overflow: hidden;
	}
	.header-active:before{
		content: '';
		top: 0;
	    left: 0;
	    right: 0;
	    bottom: 0;
	    display: flex;
	    z-index: -1;
	    position: fixed;
	    align-items: center;
	    justify-content: center;
	    background-color: rgba(0, 0, 0, 0.5);
	    -webkit-tap-highlight-color: transparent;
	}
	.navbar .nav-item .nav-link{    
    	width: max-content;
    	margin: auto;
	}
	.navbar-nav .dropdown-menu {    
    	width: 100%;
/*    	min-width: 12rem;*/
    	border: none;
    	padding: 0;
    	margin: 0;
    	text-align: center;
	}
    .sol-video video{
        width: 100%;
        max-width: 800px;
        height: auto;
    }
    .p-eye .row .col-md-6, .wf-card .row .col-md-4{
        margin-bottom: 25px;
    }
}

@media(max-width: 767px){
    .encode p{
        margin: 20px 0;
    }
    .encode a{
        display: inline-block;
        margin: 0 0 20px;
    }
	.footer .footer-top h3{
    	font-size: 20px;       
	}
	.footer .footer-top{
		text-align: center;
	}
	.footer .footer-top .footer-inner{
		margin: 0 0 40px;
	}
    .pro-head h2, .header-section h2{
        font-size: 32px;    
    }    
    .shp-animate, .simple-shape, .tb-shap-animation-wrap{
        display: none;
    }
    .client-portal{
        padding: 50px 0;
    }
    .client-portal .login-form{    
        padding: 20px;
    }