@charset "utf-8";
/* CSS Document */
a:hover, a:focus {
text-decoration : none;
}
.row {
	margin-right: 0;
	margin-left: 0;
}

.newportfolio_new_port_caption:hover {
	    background: #000;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}

@media (min-width: 1221px){
.newportfolio_image-border {
	padding: 5px;
    display: inline-block;
    margin: 10px;
    border: 1px solid #ccc;
    width: 31.3333333%;
}
}
.newportfolio_image-border {
	padding: 5px;
    display: inline-block;

    border: 1px solid #ccc;

}
.newportfolio_hovereffect {
/*  width: 100%;*/
 
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;
      cursor: pointer;
}
.newportfolio_our-technologies {
    padding: 30px 0;
    background: #ddf1fa;
    text-align: center;
	margin-top: 40px;
}
.newportfolio_our-technologies ul{
	padding:0;
}
.newportfolio_our-technologies ul li {
	text-align: left;
	list-style: none;
	font-size: 16px;
    letter-spacing: 0.8px;
}
.newportfolio_our-technologies ul li:before {
	float: left;
	content: "\2713";
	display: block;
	width:1em;
	height:1em;
	color: #27abe3;
    font-weight: bold;
    padding: 0 4em 0 0;
}
.special {
	font-size: 16px;
	letter-spacing: 0.8px;
}
.newportfolio_our-technologies h2 {
    margin-top: 20px;
    margin-bottom: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 700;
    color: #27a6dd;
}
.newportfolio_our-technologies h4 {
	font-size: 16px;
    margin-top: 2em;
    font-weight: bold;
    color: #2f5a75;
    line-height: 1.2em;
}
.newportfolio_hovereffect .newportfolio_overlay {
  width: 100%;
  height:100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  opacity: 0;
  filter: alpha(opacity=0);
  background-color: rgba(0,0,0,0.75);
  -webkit-transition: all 0.4s cubic-bezier(0.88,-0.99, 0, 1.81);
  transition: all 0.4s cubic-bezier(0.88,-0.99, 0, 1.81);
}

.newportfolio_hovereffect img {
  display: block;
  position: relative;
  -webkit-transition: all 0.4s cubic-bezier(0.88,-0.99, 0, 1.81);
  transition: all 0.4s cubic-bezier(0.88,-0.99, 0, 1.81);
  height: 250px;
  max-height:250px;
}

.newportfolio_hovereffect h2 {
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  position: relative;
  font-size: 17px;
  /*background: #26abe3;*/
  -webkit-transform: translatey(-100px);
  -ms-transform: translatey(-100px);
  transform: translatey(-100px);
  -webkit-transition: all 0.4s cubic-bezier(0.88,-0.99, 0, 1.81);
  transition: all 0.4s cubic-bezier(0.88,-0.99, 0, 1.81);
  padding: 5px;
}

.newportfolio_hovereffect .newportfolio_info {
  text-decoration: none;
  display: inline-block;
  text-transform: uppercase;
  color: #fff;
  border: 1px dashed #fff;
  background-color: transparent;
  opacity: 1;
  filter: alpha(opacity=0);
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  margin: 50px 0 0;
  padding: 7px 18px;
  font-size:2em;
}

.newportfolio_hovereffect .newportfolio_info:hover {
  box-shadow: 0 0 5px #fff;
}

.newportfolio_hovereffect:hover img {
  -ms-transform: scale(1.2);
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
 
}

.newportfolio_hovereffect:hover .newportfolio_overlay {
  opacity: 1;
  filter: alpha(opacity=100);
	z-index:99;
}

.newportfolio_hovereffect:hover h2,.hovereffect:hover a.newportfolio_info {
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-transform: translatey(50px);
  -webkit-transform: translatey(50px);
  transform: translatey(50px);
}

.newportfolio_hovereffect:hover a.newportfolio_info {
  -webkit-transition-delay: .2s;
  transition-delay: .2s;
}
.newportfolio_logo_image-border {
	height:300px;
	padding: 0px !important;
}


* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}


#newportfolio_slideshow{
 	height:600px;
  	width: 100%;
  	overflow: hidden;
	position: relative;
}
.newportfolio_align {
	text-align:justify;
}
.newportfolio_slideShow {
  height: 100%;
  width: 75%;
  min-width: 750px;
  margin: 25px auto;
  overflow: visible;
}
.newportfolio_slideShow__container {
  height: 100%;
  width: 100%;
  list-style: none;
  display: block;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  font-size: 0;
  line-height: 0;
  position: relative;
}
.newportfolio_slideShow__slide {
  height: 100%;
  width: 100%;
  display: inline-block;
  position: relative;
}
.newportfolio_slideShow__image {
  display: block;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  background-size: contain;
  background-position: center;
  position: relative;
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
		  background-repeat: no-repeat;
}
.newportfolio_slideShow__image::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(225deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.0) 100%);
}
.newportfolio_slideShow__titleWrap {
  font-size: 1rem;
  position: absolute;
  left: 4rem;
  bottom: 4rem;
  padding-bottom: 2rem;
  padding-left: 2rem;
  color: #fff;
}
.newportfolio_text {
	    font-size: 1.6em !important;
		background:#ff5722 !important;
		color:#fff !important;
}
.newportfolio_text:hover {
		background:#fff !important;
		color:#ff5722 !important;
}
.newportfolio_slideShow__slideTitle {
  font-weight: 300;
  z-index: 500;
  color: #fff;
  font-size: 5em;
  text-transform: uppercase;
  letter-spacing: 2px;
  line-height: 1;
  margin: 0 0 .5rem;
  opacity: 0;
  display: none;
}
.newportfolio_slideShow__slideSubTitle {
  font-size: 1.5em;
  text-transform: uppercase;
  font-family: sans-serif;
  padding-left: .5rem;
  font-weight: 300;
  letter-spacing: 1px;
  opacity: 0;
  display: none;
}
.newportfolio_slideShow__next, .newportfolio_slideShow__prev {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  font-size: 5em;
  line-height: 1em;
  color: #fff;
}
.newportfolio_slideShow__next i, .newportfolio_slideShow__prev i {
  display: block;
  float: left;
  color: #fff;
}
.newportfolio_slideShow__next {
  right: 1rem;
  cursor: pointer;
  background: #00000082;
    border-radius:0 0.2em 0.2em 0;
    padding: 0.2em;
}
.newportfolio_slideShow__prev {
  left: 1rem;
  cursor: pointer;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
  -webkit-transform-origin: center;
          transform-origin: center;
		  background: #00000082;
    border-radius: 0.2em 0 0 0.2em;
    padding: 0.2em;
}
.newportfolio_slideShow__prev.is-inactive {
  opacity: 0.3;
  cursor: default;
}


.what-we-do h4 {
    padding-left: 0px !important;
    color: #e8731f;
}

.newportfolio_what-we-do h2 {
    font-size: 36px;
    margin-top: 0;
	    margin-bottom: 44px;
}
.newportfolio_icon-d{
	width:100% !important;
}
.newportfolio_icon-t > img {
	width:40%;
	text-align:center;
}
.newportfolio_icon-t {
	      float: left;
    padding:  0;
	    margin: 5px 0;
		border-radius : 2.5em;
}
.newportfolio_icon-techno {
	text-align:center;
	}
.newportfolio_technologies {
	display:block;
	position:relative;
	margin-bottom:44px;
}
.newportfolio_blue {
	color: #27a6dd !important;
	font-size: 36px !important;
}
.newportfolio_orange {
	color: #e8731f !important;
	font-size: 36px !important;
}
h6.newportfolio_orange, h6.newportfolio_blue {
	font-size:1.4em !important;
}
.newportfolio_sect {
	    margin-top: 40px !important;
}
.newportfolio_make-up {
	border-top:1px solid #ccc;
	border-bottom : 1px solid #ccc;
	    padding: 40px 0;
    margin: 40px;
}
.newportfolio_free {
	    margin-bottom: 40px;
}
hr {
    margin-top: 0;
    margin-bottom: 0px;
    border: 0;
    border-top: 1px solid #eee;
}
.newportfolio_tech_name {
	font-weight: bold;
    color: #5a4e4a;
    font-size: 1.2em;
}
.newportfolio_tech_name1{
font-weight: bold;
    color: #5a4e4a;
    font-size: 1em;
}
.newportfolio_tech_name:before{
color: #333;
    padding-left: 40px;
    background: url(../image/icon/check.svg) left 6px no-repeat;
    margin-bottom: 8px;
	content:"";
}
.newportfolio_technologies {
	text-align:center;
}
.what-we-do h2 {
    font-size: 36px !important;
    margin-top: 0 !important;
    margin-bottom: 45px !important;
}
.newportfolio_list1 {
	    display: block;
    float: left;
    width: 12%;
}
.newportfolio_list_ul {
	display:inline-block;
	list-style:none;
}
.newportfolio_red {
	color:#F00;
}
@media (min-width: 992px)
{
.what-we-do .what-we-do-content:before {
    width: 1px;
    height: 100%;
    content: "";
    position: absolute;
    right: 50px;
    top: 2px;
    background: #e5e5e5;
}
}
@media (max-width: 992px)
{
	.inner-page-banner {
    padding: 20px 0;
    margin-top: 120px;
}
}

.newportfolio_head_set
{
	text-align:center;
}
.newportfolio_para {
	    font-size: 1.4em !important;
    text-align: center;
    font-weight: 700;

}
.newportfolio_fond{position:relative;padding:100px 0;top:0;left:0; right:0;bottom:0;
 background-color:#ffffff;
}

.newportfolio_style_prevu_kit
{
    display:inline-block;
    
    width:300px;
    height:264px;
    position: relative;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1); 
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1); 
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1);
    transition: all 200ms ease-in;
    transform: scale(1);   
	border:1px solid #eee;
}
.newportfolio_style_prevu_kit:hover
{
    box-shadow: 0px 0px 47px #ddd;
    z-index: 2;
   position:relative;
      -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1.5); 
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1.5); 
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1.5);
    transition: all 200ms ease-in;
    transform: scale(1.5);   
    
}
#newportfolio_logo_portfolio {
	position:relative;
}
/*designing*/
	.newportfolio_dt-laptop-slider{  
  			  
			background:url(../image/icon-technology/macbook.png);
  			background-repeat: no-repeat;
  			background-position: top;
			background-size: contain;
			 -webkit-transition: all 2s ease;
    		 -moz-transition: all 2s ease;
     		 -ms-transition: all 2s ease;
         	 transition: all 2s ease;
    	
   			transform: scale(1);
		}
	
		.newportfolio_laptop-screen{
  			margin: 0 auto;
  			width: 539px;
		  	height: 480px;
  			overflow: hidden;
  			position: relative;
		
		}
			
		.newportfolio_app-shot{
  			position:absolute;
  			animation:round 16s infinite;
  			opacity:0;
  			
  			margin-left: auto;
  			margin-right: auto;
  			display: block; 
			top:13%; 
			width:100%;
			height:330px;
		}
		@keyframes round{   
  			25%{opacity:1;}
  			40%{opacity:0;}
		} 
		.newportfolio_laptop-screen img:nth-child(1){animation-delay:0s; }
		.newportfolio_laptop-screen img:nth-child(2){animation-delay:4s; }
		.newportfolio_laptop-screen img:nth-child(3){animation-delay:8s; }
		.newportfolio_laptop-screen img:nth-child(4){animation-delay:12s;}
		.newportfolio_safe_case {
			color: #FFF3B7 !important;
			text-decoration:underline;
        }
        
		.newportfolio_click-sect {
		opacity: 0.8;
        text-transform: uppercase;
        position: relative;
   	    margin: 0 2em 2em;
        
        display: inline;

    color: #fff;
    cursor: pointer;
    bottom: 0;
    z-index: 1;
    text-align: center;
  
		}
		.btn-primary{
			background-color: #286090;
    border-color: #204d74;
	color: #fff;
		}
		.btn-primary:hover {
    background-color: #fff;
    border-color: #204d74;
    color:#204d74;
}
		.newportfolio_actions button {
			width: 20%;
    		margin: 0.4em;
	    	letter-spacing: 0.05em;
		}
		.newportfolio_click-sect span {
			    position: relative;
   				top: 0.7em;
    			bottom: 0;
		}
		
.mySlides {
  display: none;
}

.cursor {
  cursor: pointer
}

/* Next & previous buttons *//*

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */ 
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

.caption-container {
  text-align: center;
  background-color: black;
  padding: 2px 16px;
  color: white;
}

.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

img.hover-shadow {
  transition: 0.3s
}

.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}
a.lightbox img {
height: 150px;
border: 3px solid white;
box-shadow: 0px 0px 8px rgba(0,0,0,.3);
margin: 94px 20px 20px 20px;
}

/* Styles the lightbox, removes it from sight and adds the fade-in transition */

.lightbox-target {
position: fixed;
    z-index: 999991;
top: 50px;
width: 100%;
background: rgba(0,0,0,.7);

opacity: 0;
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
overflow: hidden;
}

/* Styles the lightbox image, centers it vertically and horizontally, adds the zoom-in transition and makes it responsive using a combination of margin and absolute positioning */

.lightbox-target img {
margin: auto;
position: absolute;
top: 0;
left:0;
right:0;
bottom: 0;
max-height: 0%;
max-width: 0%;
border: 3px solid white;
box-shadow: 0px 0px 8px rgba(0,0,0,.3);
box-sizing: border-box;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}

/* Styles the close link, adds the slide down transition */

.lightbox-close {
display: block;
width:50px;
height:50px;
box-sizing: border-box;
background: white;
color: black;
text-decoration: none;
position: absolute;
top: -80px;
right: 50px;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}

/* Provides part of the "X" to eliminate an image from the close link */

.lightbox-close:before {
content: "";
display: block;
height: 30px;
width: 1px;
background: black;
position: absolute;
left: 26px;
top:10px;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}

/* Provides part of the "X" to eliminate an image from the close link */

.lightbox-close:after {
content: "";
display: block;
height: 30px;
width: 1px;
background: black;
position: absolute;
left: 26px;
top:10px;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
}

/* Uses the :target pseudo-class to perform the animations upon clicking the .lightbox-target anchor */

.lightbox-target:target {
opacity: 1;
top: 0;
bottom: 0;
}

.lightbox-target:target img {
max-height: 100%;
max-width: 100%;
}

.lightbox-target:target a.lightbox-close {
top: 50px;
}


/*-web deign page-*/
#myImg1, #myImg2, #myImg3, #myImg4, #myImg5, #myImg6, #myImg7 {
    border-radius: 0px;
    cursor: pointer;
    transition: 0.3s;
	z-index:99;
	}



#myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 9999; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

/* Caption of Modal Image */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* Add Animation */
.modal-content, #caption {    
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}

/* The Close Button */


/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 9999;
  padding-top: 50px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: black;
}
.modal::-webkit-scrollbar { 
     display: none;
}

body.crawl::-webkit-scrollbar {
   display: none;
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe00;
  margin: auto;
  padding: 0;
  width: 90%;
  max-width: 1366px;

}


/* The Close Button */
.close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
      opacity: 1;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
} 
/* 100% Image Width on Smaller Screens */
@media (max-width: 991px){
    .newportfolio_laptop-screen {
       width: 416px;
       height: 380px;
    }
	.newportfolio_app-shot{
		top: 12%;
    width: 100%;
    height: 255px;}
}
@media (max-width: 750px){
    .newportfolio_laptop-screen {
    width: 395px;
    height: 380px;
}
	.newportfolio_app-shot {
    top: 12%;
    width: 100%;
    height: 232px;
}
}
@media (max-width: 700px){
    .newportfolio_laptop-screen {
    width: 355px;
    height: 380px;
}
	.newportfolio_app-shot {
    top: 11%;
    width: 100%;
    height: 220px;
}
}
@media (max-width: 649px){
.newportfolio_app-shot {
    top: 13%;
    width: 100%;
    height: 202px !important;
}
	.newportfolio_laptop-screen {
    width: 326px !important;
    height: 296px !important;
}
}
@media (max-width: 767px){
    .inner-page-banner {
        padding: 20px 0;
        margin-top: 150px;
    }
	.newportfolio_actions button {
    width: 40%;
    margin: 0vw 1vw 0 4vw;
    letter-spacing: 0.05em;
    float: left;
    text-align: center;
    left: 0;
    right: 0;
		font-size : 2.5vw;
}
	.newportfolio_list_ul {
    display: inline-block;
    list-style: none;
    left: 0;
    margin: 0;
    padding: 0;
}
	.newportfolio_image-border {
    padding: 5px;
    display: inline-block;
    border: 1px solid #ccc;
    margin: 10px;
    max-width: 100%;
    text-align: center;
    left: 0;
    right: 0;
}
	.newportfolio_list1 {
		width:25% !important;
	}
}
@media (min-width: 992px)
{.inner-page-banner {
    padding: 20px 0;
    margin-top: 150px;
}
}
@media (max-width: 650px){
    .newportfolio_laptop-screen {
        width: 375px;
    	height: 275px;
}
	.newportfolio_app-shot {
    top: 13%;
    width: 100%;
    height: 228px;
}
}


@media (max-width: 620px){
   .newportfolio_dt-laptop-slider {
            background: none;
		}
	.newportfolio_app-shot {
		-webkit-box-shadow: -2px -5px 110px -2px rgba(0,0,0,0.75);
		-moz-box-shadow: -2px -5px 110px -2px rgba(0,0,0,0.75);
		box-shadow: -2px -5px 110px -2px rgba(0,0,0,0.75);
	}
	.newportfolio_laptop-screen {
               width: 245px;
    		   height: 287px;
				padding:1em;
		}
	.newportfolio_app-shot {
    top: 10%;
    width: 90%;
    height: 150px;
	}
}

@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
}