@charset "UTF-8";

.no-right-click {
    pointer-events: none;
}

.btn-lg { border-radius: 100px; }
.btn-primary { background-color: #482CDA; border-color: #482CDA; }
.btn-primary:hover { background-color: #B2239D; border-color: #B2239D; }
.btn-outline-dark { color: #C32293; border-color: #C32293; }
.btn-outline-dark:hover { background-color: #B2239D; border-color: #B2239D; }

.parallax { background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; }

/*--Fade In Styles--*/
body,html, h1 { margin: 0; padding: 0; }
.tag { opacity: 0; transform: translate(0, 10vh); transition: all 1s; -webkit-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; -o-transition: all 1s; }
.tag.visible { opacity: 1; transform: translate(0, 0); }
.fade-in { animation: fadeIn 1s; -webkit-animation: fadeIn 1s;  -moz-animation: fadeIn 1s;  -ms-animation: fadeIn 1s;  -o-animation: fadeIn 1s; animation-fill-mode: forwards; }
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.white-text { color: #FFF; }

.spacer { border: 2px solid #B2239D; max-width: 63px; margin: auto; }
.spacer-white { border-color: #FFF; }

.bi { font-size: 25px; }




/* Navigation Styles */
.nav-item a:hover, .nav-item a:hover:active { color: #C42192; }
@media (max-width: 992px) {
	.navbar-collapse .navbar-nav { text-align: center; }	
	.navbar-collapse .social-icon { text-align: center; }
}
@media (max-width: 576px) {
	.navbar-brand img { max-width: 85%; }
	.navbar-brand { max-width: 70% }
}
	




/* Body Styles */
.bg-light { background-color: #edeeff; }

.gradient-bg { background-image: url(../images/gradient-bg.png); background-repeat: no-repeat; background-position: top center; background-size: contain; }
@media (max-width: 700px) {
	.gradient-bg { background-image: url(../images/gradient-bg-mobile.png); }
}


.breadcrumb-white .breadcrumb-item a { color: #FFF; }
.breadcrumb-white .breadcrumb-item.active { color: #ffffffbd; }

@media (min-width: 992px) {
	.badge { font-size: 14px; }
}

.profile-img { max-width: 482px; width: 100%; }
@media (max-width: 360px) {
	.profile-img { max-width: 280px; }
}

.about { background-color: #FFF; background-image: url(../images/about-bg.png); background-repeat: no-repeat; background-position: bottom center; background-size: cover;}

.projects { background-color: #FFF; background-image: url(../images/white-bg.png); background-repeat: no-repeat; background-position: top center; background-size: cover; }

.projects .container { max-width: 1800px; }

.slider-indicators { bottom: -45px; }
.slider-indicators>* { background-color: #D81F86; height: .4rem; border-radius: 10px; }

.gallery-section { position: relative; top: -100px; }

.project-thumbnails img { width: 100%; }

.overlay-container { position: relative; }

.overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; opacity: 0; transition: .5s ease; background: linear-gradient(135deg, #1e30f3 0%, #e21e80 100%); }
.overlay:hover, .overlay:hover:active { opacity: 0.85; }

.overlay-text { color: #FFF; font-size: 30px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; font-weight: bold; }

/* Change cursor to pointer for Artwork name overlay */
.overlay-clickable { cursor: pointer; }


.skill-icon { display: inline-block; border-radius: 10px; }

.container-wide { max-width: 1800px; }

.lightbox img { cursor: pointer; }

.billboards img { width: 100%; }

.web-preview {  max-height: 800px; overflow: scroll; overflow-x: hidden; border: solid 1px #CCC; background-color: #FFF; border-radius: 5px; }
@media (max-width: 992px) {
	.web-preview {  max-height: inherit; overflow: inherit; }
}

.contact { position: relative; top: -100px; }
.contact-form { height: 1000px; }

@media (max-width: 576px) {
	.lead { font-size: 16px; }
}



/* Footer Styles */
.top-button { display: none; position: fixed; bottom: 30px; right: 30px; z-index: 99; border: none; outline: none; cursor: pointer; color: #FFF; border-radius: 500px; padding: 18px; border: 1px solid #CD208D;  }
.top-button:hover { background: #B2239D!important; }
@media (max-width: 992px) {
	.top-button { padding: 10px; }
	.top-button img { max-width: 25px; }
}


footer { border-top: 1px solid #dee0f7; }


.slide-in {
  animation-duration: 2s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-right: 100%;
  }

  to {
    margin-right: 0%;
    width: 100%;
  }
}