html {
  scroll-behavior: smooth;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
	-webkit-tap-highlight-color: transparent;
}

footer
{
	position:absolute;
	width:100%;
}

@font-face {
  font-family: 'GothamNarrow';
  src: url('../font/GothamNarrow-Light.eot'); /* IE9 Compat Modes */
  src: url('../font/GothamNarrow-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../font/GothamNarrow-Light.woff2') format('woff2'), /* Super Modern Browsers */
       url('../font/GothamNarrow-Light.woff') format('woff'), /* Pretty Modern Browsers */
       url('../font/GothamNarrow-Light.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('../font/GothamNarrow-Light.svg#svgFontName') format('svg'); /* Legacy iOS */
}

body {
  font-family: 'GothamNarrow' !important;
}

img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}

.bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

 @media (min-width: 768px) {
    .bd-placeholder-img-lg {
        font-size: 3.5rem;
    }
}

.card{
	transition: 0.3s;
}
	  
.card:hover{
	box-shadow:0 1rem 3rem rgba(0,0,0,.175)!important;
}

.fixed-top
{
	transition: 200ms linear;
}		
  
.fixed-top.scrolled {
	background-color: #4f91b4 !important;
}

.arrowbutton{
	transition: 0.4s;
	opacity:0.4;
}

.arrowbutton:hover
{
	opacity:1;
	
}

.arrowbutton img{
	transition: 0.4s;
}

.arrowbutton img:hover
{
	transform:translateY(10px);
}

body{
  background-image:linear-gradient(rgba(0, 0, 0, 0), rgba(210, 162, 255, 0.15)), url('../image/backdrop2.jpg') !important;
  background-repeat: no-repeat !important;
	background-attachment: fixed !important;
	background-position:right bottom !important;
	background-size: cover !important;
	animation: fadeInAnimation ease 2s;
}

.headermain
{
	opacity:1;
	background-image:linear-gradient(rgba(0, 0, 0, 0), rgba(210, 162, 255, 0.15)), url('../image/bannerx.jpg');
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position:right bottom !important;
	background-size: cover;
	animation: fadeInAnimation ease 2s;
}

@media (max-width: 992px) {
  .headermain
  {
    background-image:linear-gradient(rgba(0, 0, 0, 0), rgba(210, 162, 255, 0.15)), url('../image/bannerx-lite.jpg') !important;
  }
}

.nlink{
	transition: 0.4s;
	opacity:0.6;
}

.nlink:hover
{
	opacity:1;
	
}

#pictimeIntegration{
  min-height: 100vh;
}

section
{
	transition: opacity 0.2s;
}

main, .jumbotron div { 
    animation: fadeInAnimation ease 1s;
    animation-iteration-count: 1; 
    animation-fill-mode: forwards; 
} 

#sidebar{
  background: #1A1025 !important;
}

#sidebarCollapse {
  background: #1A1025;
  border-color:#1A1025;
}

#sidebarCollapse:hover {
  background: #2d1749;
  border-color:#2d1749;
}

.btn-dark {
  background: #1A1025 !important;
  border-color: #1A1025 !important;
}

.btn-dark:hover, .btn-dark:active, .btn-dark:focus{
  background: #2d1749 !important;
  border-color:#2d1749 !important;
}

.btn-outline-dark {
  border-color: #1A1025 !important;
  color:#1A1025 !important;
}

.btn-outline-dark:hover, .btn-outline-dark:active, .btn-outline-dark:focus{
  background: #2d1749 !important;
  border-color:#2d1749 !important;
  color:#FFF !important;
}

.sectionFade{
  -webkit-transform: translateY(50px);
  transform: translateY(50px);
  -webkit-transition-delay: .3s;
  -o-transition-delay: .3s;
  transition-delay: .3s;
  -webkit-transition: .4s;
  -o-transition: .4s;
  transition: .4s;
  opacity: 0;
}

.inView {
  opacity: 1;
  -webkit-transform: translateY(0px);
  transform: translateY(0px);
}
  
@keyframes fadeInAnimation { 
    0% { 
        opacity: 0; 
    } 
    100% { 
        opacity: 1; 
     } 
} 

@keyframes fadeInAnimationRight { 
    0% { 
        opacity: 0; 
		transform:translateX(100px);
    } 
    100% { 
        opacity: 1; 
		transform:translateX(0);
     } 
} 

@keyframes SlideInAnimationRight { 
    0% { 
        opacity: 0; 
		transform:translateX(100px);
    } 
    100% { 
        opacity: 0.2; 
		transform:translateX(0);
     } 
} 

.typewriter h1 {
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid orange; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  animation: 
    typing 3.5s steps(40, end),
    blink-caret .75s step-end infinite;
}

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: #292b2c; }
}


.projectcard
{
	display:none;
}

.projectcard.live{
	display: block !important;
}

.projectcard.live h1{
	animation: fadeInAnimationRight ease 1s;
}

.projectcard.live img, .projectcard.live video{
	animation: SlideInAnimationRight ease 1s;
	position:absolute; 
	z-index:-1;
	opacity:0.2;
	text-align:right;
      -webkit-mask-image:-webkit-linear-gradient(top, rgba(0,0,0,1), rgba(0,0,0,0));
	 /* -webkit-mask-image:-webkit-linear-gradient(right, rgba(0,0,0,1), rgba(0,0,0,0));
      mask-image:-webkit-linear-gradient(bottom right, rgba(0,0,0,1), rgba(0,0,0,0));*/
}


.projectcard.live h2{
	animation: fadeInAnimationRight ease 1.2s;
}

.projectcard.live p, .projectcard.live a{
	animation: fadeInAnimationRight ease 1.4s;
}

.projectbutton{
  border-radius: 25px !important;
}


#sidebarCollapse
{
	animation: pulse 1.5s infinite;
}

.text-primary {
  color: #634588 !important;
}

a.text-primary:hover, a.text-primary:focus {
  color: #9e81c2 !important; }

@keyframes pulse {
  0% {
	transform:scale(0.9);
  }
  70% {
    transform:scale(1);
  }
    100% {
    transform:scale(.9);
  }
}