html, body
{
	max-width: 100%;
	overflow-x: hidden;
}

/* NAVBAR */
.navbar
{
	background-color: transparent;
	left: 0;
	top: 0;
	width: 100%;
	z-index: 5;
}
.navbar-nav
{
	width: 100;
}
.navbar-nav .active
{
	color: #C3317D !important;
}
.navbar-nav a:hover
{
	color: #C3317D !important;
}
@media (max-width: 767px)
{
	.navbar-collapse
	{
		background-color: #000;
	}
}
.position-fixed.scrolled
{
	background-color: #000 !important;
	color: white !important;
	transition: background-color 300ms linear;
	z-index: 1000;
}
.navbar-nav.scrolled
{
	color: black !important;
	z-index: 7;
}
.navbar-toggler
{
	background-color: #C3317D !important;
	border-color: #C3317D !important;
}

/* MAIN VIDEO FRONT PAGE */

video
{
	height: 100vh;
	left: 0;
	object-fit: cover;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: -100;
}
.fa-long-arrow-alt-down{
	bottom: 0;
	position: absolute;
	font-size: 30px;
}

/* HEADERS */

.viewport-header
{
	align-items: center;
	display: flex;
	height: 100vh;
	justify-content: center;
	position: relative;
	text-align: center;
	width: 100%;
}
.viewport-header h1
{
	color: white;
	font-family: 'Montserrat Subrayada', sans-serif;
	font-size: 8vw;
	text-align: center;
}
.viewport-header h1:hover
{
	color: #c3317cbb;
	transition: all 5s ease-in-out;
}

.main-header
{
	background-color: #000;
	height: 100vh;
	text-align: center;
	width: 100%;
}
.about-header
{
	align-items: center;
	color: #fff;
	display: flex;
	flex-direction: column;
	font-family: 'Montserrat Subrayada', sans-serif;
	font-size: 8vw;
	justify-content: center;
	min-height: 100vh;
	text-transform: capitalize;
	z-index: 1;
}
.aboutpage-header
{
	font-family: 'Montserrat Subrayada', sans-serif;
}
.heading-text.scrolled
{
	background-image: none;
	color: transparent !important;
	transition: color 800ms linear;
	z-index: -1;
}
@media screen and (max-width: 768px)
{
	.viewport-header h1, .heading-text, .about-header
	{
		font-size: 12vw;
	}
}

/* SIDE TEXT ON HEADERS */

.side-text.scrolled
{
	color: #000 !important;
	transition: color 800ms linear;
}

.side-text h1
{
	color: #fff;
	float: left;
	font-family: 'Montserrat' Georgia, serif;
	font-size: 12px;
	font-weight: 400;
	left: -140px;
	letter-spacing: 2px;
	position: fixed;
	text-transform: capitalize;
	top: 300px;
	transform: rotate(-90deg);
}
@media screen and (max-width: 768px)
{
	.side-text
	{
		left: -205px !important;
	}
}
@media screen and (max-width: 768px)
{
	.side-text.scrolled h1
	{
		display: none;
	}
}


/* ABOUT PAGE AND IMAGES*/

.aboutme
{
	height: 100%;
	padding: 5%;
	width: 100%;
}
.about-abstract-image
{
	height: 500px;
	transition: all 5s ease-in-out;
	width: 100%;
}
.about-abstract-image:hover
{
	transform: rotate(0.5turn);
	transition: all 5s ease-in-out;
}

/* TYPEWRITER */

.typingtext
{
	background-color: #fff;
	color: #000;
	font-family: 'Montserrat', sans-serif;
}
.typewriter
{
	align-items: center;
	display: flex;
	height: 150px;
	justify-content: center;
}
.typewriter h1
{
	font-weight: bold;
	overflow: hidden;
	padding: 1rem;
	text-align: center;
}
.typewriter h1 span.typed-text
{
	color: #C3317D;
	font-weight: bold;
}
.typewriter h1 span.cursor
{
	animation: blink 1s infinite;
	background-color: #C3317D;
	display: inline-block;
	margin-left: 0.1rem;
	width: 3px;
}
.typewriter h1 span.cursor.typing
{
	animation: none;
}
@keyframes blink
{
	0%
	{
		background-color: #C3317D;
	}
	49%
	{
		background-color: #C3317D;
	}
	50%
	{
		background-color: transparent;
	}
	99%
	{
		background-color: transparent;
	}
	100%
	{
		background-color: #C3317D;
	}
}

/* PORTFOLIO BUTTON ON HOME PAGE */

.button-background
{
	background: #fff;
	display: flex;
	justify-content: center;
}
.firstbutton
{
	background-color: #000 !important;
	font-family: 'Montserrat Subrayada', sans-serif;
	margin-bottom: -15px;
}

/* HOME PAGE WRAPPER WITH SLIDES */

.wrapper
{
	width: 100%;
}
.main-slider
{
	background: linear-gradient(90deg, #fff 45%, #000 90%);
	height: auto;
	padding-bottom: 50px;
	width: 100%;
}

/* slider */
.slider
{
	padding-top: 15vh;
}

/* Left hand text */

.intro-box
{
	font-family: "Montserrat Subrayada", sans-serif;
	padding-left: 2% !important;
	padding-right: 1%;
	padding-top: 10vh;
}
.in-txt
{
	color: #5d5c69;
	font-family: "Montserrat", sans-serif;
	font-weight: 800;
	margin-top: 4vh;
}
@media screen and (min-width: 768px)
{
	.in-txt
	{
		margin-top: 1vh;
	}
}
.in-title
{
	color: #000;
	font-weight: 600;
	margin-bottom: 2vh;
	text-align: start;
}
.in-title:after
{
	background: #C3317D;
	content: "";
	display: block;
	height: 3px;
	margin-top: 0.5em;
	opacity: 0.8;
	width: 10%;
}
.in-b-txt
{
	color: #5d5c69;
	font-family: "Montserrat", sans-serif;
	font-weight: 400;
	margin-bottom: 6vh;
	margin-top: 2vh;
}

/* Right side text */

.s-down
{
	font-family: "Montserrat Subrayada", sans-serif;
	position: absolute;
	right: -9.5vw;
	top: 50%;
	transform: rotate(-90deg);
	transition: all 0.4s ease-in-out;
	-moz-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	-webkit-transition: all 0.4s ease-in-out;
}
@media screen and (max-width: 768px)
{
	.hide
	{
		display: none;
	}
}
@media screen and (max-width: 768px)
{
	.main-slider
	{
		background: linear-gradient(90deg, #fff 65%, #000 90%);
	}
}
@media screen and (max-width: 767px)
{
	.in-txt, .in-b-txt
	{
		padding-right: 80px;
	}
}

/* HOME PAGE CONTENT */

.bgimage1
{
	background: #fff;
	color: #000 !important;
	font-family: "Montserrat", sans-serif;
	height: auto;
	width: 100%;
}
.mainheader
{
	background-color: #fff;
	padding-bottom: 2%;
	padding-left: 5%;
	padding-top: 5%;
}
.maintitle
{
	background: #fff;
	font-family: "Montserrat Subrayada", sans-serif;
	width: 100%;
}
.img-fluid
{
	height: 300px !important;
}
.bgimage1 h1
{
	font-family: "Montserrat Subrayada", sans-serif;
	padding-bottom: 50px;
	padding-top: 50px;
}
.bgimage1 h3
{
	font-family: "Montserrat Subrayada", sans-serif;
}
.bgimage1 p
{
	font-family: "Montserrat", sans-serif;
}
.firstcard
{
	margin-bottom: 30px !important;
	margin-top: 50px;
}

.bgimage1
{
	color: white;
}

/* HOME PAGE CARD HOVER EFFECT */

.card1
{
	background: transparent !important;
	border: none !important;
	padding: 5%;
	width: 100%;
}
.card1:hover
{
	background: #c3317c85 !important;
	border-radius: 3%;
}

/* Zoom cards */

.carddesign
{
	background: white;
}
.carddesign h4
{
	font-family: 'Montserrat Subrayada', sans-serif;
	font-size: 2em;
	padding-top: 10%;
	text-align: center;
}
.carddesign p
{
	font-size: 1.3em;
	line-height: 1.1em;
}
.carddesign .card
{
	border: none !important;
	color: #D6D600;
	display: inline-block;
	height: 380px;
	overflow: hidden;
	width: 100%;
}
.carddesign .card-img
{
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	height: 100%;
	transition: all 0.3s ease-in-out;
	width: 100%;
}
.carddesign .card:hover .card-img,
.carddesign .card:focus .card-img
{
	opacity: 0.2;
	transform: scale(1.2);
	transition: 4s;
	-moz-transform: scale(1.2);
	-ms-transform: scale(1.2);
	-o-transform: scale(1.2);
	-webkit-transform: scale(1.2);
}
.carddesign .card:hover .card-img-overlay
{
	color: #000;
}
.card-img-overlay>h4,
.card-img-overlay>p
{
	visibility: hidden;
}
.card-img-overlay:hover h4,
.card-img-overlay:hover p
{
	visibility: visible;
}

/*FLIPCARDS*/
/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */

.flip-card
{
	background-color: transparent;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	border: none !important;
	height: 400px;
	 /* Remove this if you don't want the 3D effect */
	perspective: 1000px;
	width: 100%;
}

/* This container is needed to position the front and back side */

.flip-card-inner
{
	height: 100%;
	position: relative;
	text-align: center;
	transform-style: preserve-3d;
	transition: transform 2s;
	width: 100%;
}

/* Do an horizontal flip when you move the mouse over the flip box container  */

.flip-card:hover .flip-card-inner
{
	transform: rotateY(180deg);
}

/* Position the front and back side */

.flip-card-front,
.flip-card-back
{
	height: 100%;
	position: absolute;
	-webkit-backface-visibility: hidden;
	width: 100%;
	/* Safari */
	backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */

.flip-card-front
{
	color: black;
}
.flip-card-back
{
	background-color: #fff;
	color: #000;
	transform: rotateY(180deg);
}

/* BOTTOM BUTTONS ON HOME PAGE */

.lastbutton-background
{
	background: #fff;
	display: flex;
	justify-content: center;
	padding-bottom: 40px;
	padding-top: 20px;
}
.lastbutton
{
	background-color: #000 !important;
	font-family: 'Montserrat Subrayada', sans-serif;
	z-index: 1;
}

/* CAROUSEL */

.carousellarge
{
	align-content: center;
	background-color: #000;
	color: #fff !important;
	display: flex;
	height: 400px;
	justify-content: center;
}
.carouseltext
{
	font-family: 'Montserrat', sans-serif !important;
	padding-left: 15%;
	padding-right: 15%;
}

/* CONTACT FORM */

.contactme-form
{
	background: cover;
	background: url(images/Logolarge1noname.png) center no-repeat;
	background-attachment: fixed;
	height: auto;
	width: 100%;
}
.contactme-form h1
{
	font-family: 'Montserrat Subrayada', sans-serif;
}
.contactme-container
{
	background: #000;
	color: #fff;
	font-family: 'Montserrat', sans-serif;
}
.btn-send
{
	background: #C3317D !important;
	font-family: 'Montserrat Subrayada', sans-serif;
}

/* PORTFOLIO SWIPER DIV */

.anotherdiv
{
	background: #f2f2f2;
	background: #fff;
	font-family: 'Montserrat Subrayada', sans-serif;
	height: auto;
	padding-bottom: 50px;
	padding-top: 50px;
	text-align: center;
	width: 100%;
}
.anotherdiv p {
	font-family: 'Montserrat', sans-serif;

}


/* swiper */
.swipercontainer-large{
	background: #fff;
		  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
		  font-size: 14px;
		  color: #fff;
		  margin: 0;
		  padding: 0;
		height: auto;}
	
	
	.swiper-container {
		width: 100%;
		padding-top: 50px;
		padding-bottom: 50px;
	  }

	
	  .swiper-slide {
		background-position: left;
		background-size: 450px;
		background-repeat: no-repeat;
		width: 300px;
		height: 300px;
	
	  }
	 
	.content{
	  position: absolute;
	  bottom: 0;
	  height: 80px;
	  width: 100%;
	  background: #F5F5F5;
	  text-align: center;
	  align-items: center;
	  color: #000;
	
	}
	.content a{
		color: #000 !important;
		text-decoration: none;
	}
	
	.content h2, p {
		font-family: 'Montserrat Subrayada', sans-serif;
	}
	
	  .swiper-button-prev, .swiper-button-next
	{
	  border: none;
	  color: #C3317D;
	}
	.swiper-pagination-bullet-active
	{
	  background-color: #C3317D;
	}
	.swiper-scrollbar
	{
	  color: #C3317D !important;
	}
	
/* 404 PAGE */

.page_404
{
	align-content: center;
	background: #fff;
	display: flex;
	font-family: 'Montserrat', serif;
	height: 100vh;
	justify-content: center;
	padding-top: 6%;
}
.page_404 img
{
	width: 100%;
}
.four_zero_four_bg
{
	background-image: url(images/dribbble_1.gif);
	background-position: center;
	height: 400px;
}
.four_zero_four_bg h1
{
	font-family: 'Montserrat Subrayada', sans-serif;
	font-size: 80px;
}
.four_zero_four_bg h3
{
	font-size: 80px;
}
.link_404
{
	background: #C3317D;
	color: #000 !important;
	display: inline-block;
	font-family: 'Montserrat Subrayada', sans-serif;
	margin: 20px 0;
	padding: 10px 20px;
}
.contant_box_404
{
	margin-top: -50px;
}
.privacy-policy h1, h2, h3
{
	font-family: 'Montserrat Subrayada', sans-serif;
}

/* FOOTER */

footer
{
	background-color: transparent;
}
footer h1
{
	font-family: 'Montserrat Subrayada', sans-serif;
	font-size: 85px;
}
@media screen and (max-width: 768px)
{
	.footer h1
	{
		font-size: 50px;
		text-align: center;
	}
}
footer h5,
h4
{
	font-family: 'Montserrat Subrayada', sans-serif;
}
footer h3
{
	font-family: 'Montserrat Subrayada', sans-serif;
}
footer p
{
	font-family: 'Montserrat Subrayada', sans-serif;
}

/* FOOTER NOT ON HOME PAGE */

.footer-about
{
	background-color: #000;
}
@media screen and (max-width: 768px)
{
	.footer
	{
		text-align: center;
	}
}
.text-left
{
	color: #fff !important;
	text-align: left !important;
}
@media (max-width: 480px)
{
	.order-xs-1
	{
		order: 1 !important;
	}
}
@media (max-width: 480px)
{
	.order-xs-2
	{
		order: 2 !important;
	}
}