body {
 font-family: 'Asap Condensed', sans-serif;
 overflow-x:hidden;
 background:url("../images/portbackground.png") center top no-repeat fixed;
 color:black;
 letter-spacing:1.3px;
}

button:focus {outline: none;}

 .mobile-tag , .tagline1{ font-family: 'Grand Hotel', cursive; color:black; font-size: 25px; }
.tagline{ font-family: 'Grand Hotel', cursive; color:black; font-size: 25px; }
.mobile-tag{display:none;}
.tagline p{
  margin: 10px 0 0 10px;
  white-space: nowrap;
  overflow: hidden;
  width: 32em;
  animation: type 8s steps(60, end); 
}

.tagline p:nth-child(2){
  animation: type2 8s steps(60, end);
}


@keyframes type{ 
  from { width: 0; } 
} 

@keyframes type2{
  0%{width: 0;}
  50%{width: 0;}
  100%{ width: 100; } 
} 

@keyframes blink{
  to{opacity: .0;}
}


/***side nav****/
.white{color:white !important;}
.menu{ font-size:16px; cursor:pointer; color:#685d5d; background-color:black;padding:5px 10px; z-index:998; margin:20px; position:fixed; right:0; letter-spacing:3px;}

.menu:hover{color:white;}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 999;
  top: 0;
  right: 0;
  background-color: #111111ed;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 80px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 16px;
  color: #818181;
  display: block;
  transition: 0.3s;
  letter-spacing: 3px;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 16px;letter-spacing: 3px;}
}

/*****banner****/

#banner img{height:auto;width:100%;}
#banner {margin-top:0;}

/**** * ****/
.heading a {background-color:black; color:white; border-radius:15px; font-size:16px;  padding:6px 11px;text-align:center; border:1px solid white;text-decoration:none;letter-spacing: 3px;}

.heading img{width:60px;height:auto;}

.head-category img{width:58%;}

.ser-head a{color:white;font-size:14px; letter-spacing:2px; }
.ser-head {background-color:black; color:white; width:59%; text-align:center; border-radius:50px;padding:2px 0px;}
.ser-head img{width:60px;height:auto;}

/***********/
#index-background {margin-top:-101px; 
background:url("../images/BACKGROUND.jpg") center top no-repeat fixed;
color:white; 
padding-bottom:40px;
 background-size: cover;   
}

#index-services a{text-decoration:none;}

#index-services img{height:auto;width:100px;margin:15px;}

.box{padding:5px; margin:10px 0;cursor:pointer;height:140px; }

/*#index-services a p{background-color:black; color:white; border-radius:50px; font-size:14px;  padding:5px 22px;margin:10px 26px;text-align:center; letter-spacing:2px;}*/


/***** index about for mobile view***/
#mobile-about{display:none;}
#mobile-about p {color:black;}

/*************/
.carousel-wrap {
  margin: 22px auto;
  padding: 0 4%;
  width: 95%;
  position: relative;
}

/* fix blank or flashing items on carousel */
.owl-carousel .item {
  position: relative;
  z-index: 100; 
  -webkit-backface-visibility: hidden; 
}

/* end fix */
.owl-nav > div {
  margin-top: -26px;
  position: absolute;
  top: 50%;
  color: #cdcbcd;
}

.owl-nav i {
  font-size: 52px;
}

.owl-nav .owl-prev {
  left: -30px;
}

.owl-nav .owl-next {
  right: -30px;
}

/**** copyright******/

#copyright { padding:5px;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: black;
  color: white;
  text-align: center;
  z-index:999999;
  font-size:12px;
  letter-spacing:2px;
}

/***portfolio*******/
.port-details img{width:51%;}
.btn-name {

    width: 138px;
    height: 35px;
    background-color: #1c1b17;
    color: white;
    border: 1px solid white;
    margin-top: 8px;
    margin-left: -14px;
    z-index: -1;
    border-radius: 12px;}
  .btn-name h6{ font-weight:bold;}
/***********/
.tab-box{background-color:#fdfdfd6b; }
#category .tab-content {border:2px solid white; border-top:none; }
#category .tab-menu img{width:60px;}
#category .tab-pane img{width:100%; height:165px;}
#category .tab-pane{background-color: #969a9b;}
#category .nav-tabs a{color:black;}
#category .nav-link {
    background-color: #bbb;
    padding: 0 1rem;
    border: 2px solid #9a9e9f;
    border-bottom: none;
}
#category .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active
{
   color: black;
   background-color: #969a9b !important;
   border:2px solid white !important;
   border-bottom-color:transparent;
   margin-bottom:-2px;
   border-bottom:none !important;
}

.tab-menu p {
    margin-top: 0;
    margin-bottom: 0.5rem;
    text-align:center;
}

.nav-tabs .nav-link {  border: 0px solid transparent;  }

.nav-tabs {border-bottom: 2px solid white;}

.nav-tabs .nav-item { margin-bottom: 0px;}

/*************contact us**********/

.addr p{padding-left:34px;margin-top:-25px; color:black;}
.contact-details .form-control{background-color:#e1dfdf; border:0px solid;}
.contact-details label {font-size:12px;}
.contact-info i{color:#353534;}
.bcolor{font-weight:bold;}

.box1 img{width:100%;}

/*** go to back ***/

.go-to-back .btn{

	position: fixed; 
	bottom: 40px; 
	right: 21px; 
	z-index: 9999; 
	border: 1px solid white; 
	outline: none; 
	background-color: black; 
	color: white; 
	cursor: pointer; 
	border-radius: 50px; 
	font-size: 18px;
	height:40px;
	width:40px;}
	
	
	/****** social******/
	
	

/* Social Icon Styling */
/* Matt Stubenhofer -- https://www.github.com/mstub */

.social-wrapper {
    display: flex;
    align-items: left;
   /* justify-content: center;
    height: 20vh;*/
}

.social-wrapper i {
    padding: 0px 20px;
    color: #171717;
    cursor: pointer;
    transition: all ease-in-out 150ms;
    text-shadow: 0px 7px 10px rgba(0, 0, 0, 0.7);
}

.social-wrapper i:hover {
    margin-top: -10px;  
    transform: translate(0, -8);
}

#facebook:hover {
    color: #4867AA;
    text-shadow: 0px 16px 10px rgba(36, 101, 135, 0.3);
}

#twitter:hover {
    color: #1DA1F2;
    text-shadow: 0px 16px 10px rgba(29, 202, 255, 0.3);
}

#instagram:hover {
    color: #8a3ab9;
    text-shadow: 0px 16px 10px rgba(233, 89, 80, 0.3);
}

#codepen:hover {
    color: #190811;
    text-shadow: 0px 16px 10px rgba(25, 8, 17, 0.3);
}

#linkedin:hover {
    color: #0077B5;
    text-shadow: 0px 16px 10px rgba(0, 160, 220, 0.3);
}

#meetup:hover {
    color: #e51937;
    text-shadow: 0px 16px 10px rgba(236, 81, 104, 0.3);
}

#fcc:hover {
    color: #006400;
    text-shadow: 0px 16px 10px rgba(0, 126, 0, 0.3);
}

#github:hover {
    color: #c9510c;
    text-shadow: 0px 16px 10px rgba(189, 44, 0, 0.3);
}

#twitch:hover {
    color: #6441A4;
    text-shadow: 0px 16px 10px rgba(100, 65, 164, 0.3);
}

#email:hover {
    color: #dd4b39;
    text-shadow: 0px 16px 10px rgba(221, 75, 57, 0.3);
}

/**** Trademark page ****/

.tm-buttons .btn  {background-color:#232b33; border:none; color:white; font-size:19px;font-weight:bold; word-spacing:7px; letter-spacing:2px;}
.f-box {background-color:#eeeded; border:1px solid black; padding:10px; margin-bottom:15px;}
/*****media queries**********/

@media only screen and (max-width:1920px){
}
@media only screen and (max-width:1366px){
}
@media only screen and (max-width:1280px){
}
@media only screen and (max-width:1024px){
}

@media only screen and (max-width:990px){
    .port-details img {width: 51%;}
    #index-services a p {
    font-size: 12px;
    padding: 8px 0px;
    margin: 0px;}
#index-services img {
    width: 90px;
    margin: 0px;}
 .ser-head {width: 89%;}
    
    .mobile-tag{display:block;}
   .tagline1{display:none;}
} 
@media only screen and (max-width:900px){
   /* #banner img {height: 200px !important;}*/
    .owl-nav .owl-prev { display:none;}
    .owl-nav .owl-next { display:none;}
 .ser-head {width: 114%;}
   /* #index-services a p {font-size: 11px; padding: 8px 0px; margin: 0px; font-weight:700!important;}*/
    #index-services img {width: 90px;  margin: 0px;}
}
@media only screen and (max-width:768px){
    
     .port-details img {width: 51%;} 
    
    
}
@media only screen and (max-width:767px){
    #topcontact{display:none;}
    #banner {margin-top:0;}
    .navbar-toggler-icon i{color:black;}
    #index-background {margin-top: -84px;}
    .display{display:none;}
    .pad-set{padding-top:3rem !important;}
    .heading a {font-size: 11px !important;}
    .box{height: 81px;padding:0;margin: 6px 0;}
    #category .tab-menu img { width: 35px;}
    #category p{font-size:13px;}
    .tab-menu p {margin-top: -5px;}
    #category .nav-link{width:100px;}
    .ser-head {width: 33%;}
    .ser-head a{font-size:11px; font-weight:700;}
    .heading1 img{width:53px;}
    #index-services img {width: 68px;}
    #mobile-banner{display:block !important;}
    #banner{display:none;}
    #aboutus{display:none;}
    #mobile-about{display:block;}
    .menu {margin: 3px; padding: 2px 6px;}
    #index-services{padding-top:10px !important; padding-bottom:0 !important; }
    #index-background {margin-top:0 !important;}
    .ser-head a{font-size:11px; font-weight:700; }
.ser-head { width:78%;}

}
@media only screen and (max-width:600px){
   .port-details img {width: 61%;} 
  
   iframe{height:250px;}
}

@media only screen and (max-width:576px){
    .col-xs-6{width:244px;}
    .port-details img {width: 81%;}
    #copyright {font-size: 11px;}
    
}

@media only screen and (max-width:575px){
    .col-xs-6{width:48% !important;}
    .port-details img {width: 80% !important;}
    #copyright {font-size: 11px;}
     .heading a {font-size: 12px !important;font-weight:bold !important;}
     #mobile-about .heading a{font-size:9px !important;}
    .mobile-tag{font-size:22px !important;}
}

@media only screen and (max-width:500px){
    .col-xs-6{width:48% !important;}
    .port-details img {width: 80% !important;}
    #copyright {font-size: 11px;}
   
     #category .nav-link{width:25% !important;}
     .mobile-tag{font-size:20px !important;} 
}
 

@media only screen and (max-width:480px){
    .port-details img {width:83%;}
    #copyright {font-size: 11px;}
    #category .nav-link{width:33% !important;}
}

@media only screen and (max-width:436px){ #copyright {font-size: 9px;}}

@media only screen and (max-width:414px){
    .port-details img {width: 93%;}
    #copyright {font-size: 11px;}
    .mobile-tag{font-size:18px !important;} 
    #copyright {font-size: 9px;}
}

@media only screen and (max-width:412px){
    .port-details img {width: 93%;}
    #copyright {font-size: 9px;}
    
}

@media only screen and (max-width:384px){
   
    #category p{font-size:10px;}
   .tab-menu p {
        margin-bottom: 0.1rem;}
        #copyright {font-size: 8px;}
}

 
@media only screen and (max-width:375px){
    
    .mobile-tag{font-size:15px !important;} 
     #copyright {font-size: 6px;}
}

@media only screen and (max-width:360px){
   
    
}

@media only screen and (max-width:320px){
    .mobile-tag{font-size:14px !important;}
    .port-details img {width: 95%;}
    #category p{font-size:8px;}
    #copyright {font-size: 6px;}
}