/*
 Theme Name: 	Celestial Privileged Matrimony
 Theme URI: 	http://millionclues.com/
 Description: 	Custom Theme for Celestial Privileged Matrimony
 Author:		Arun Basil Lal
 Author URI:	http://millionclues.com/
 Version:      	1.0
 License:    	Private license
 Text Domain:	celestial
*/

/****************************/
/*			Index			*/
/****************************/
/* Typography				*/
/* Elements					*/
/* Sidebar 					*/
/* Audio Controller 		*/
/* Contact Form 			*/
/* jQuery Helpers			*/
/* Mobile Styles 			*/
/****************************/

/****************************/
/* 		Reference List		*/
/****************************/
/* Gold Color	: #CFA25E	*/
/* Purple Color	: #572A79	*/
/* Darker Purple: #3D1150	*/
/****************************/

/* Typography */

@font-face {
    font-family: 'butlerregular';
    src: url('includes/butler/butler_regular-webfont.woff2') format('woff2'),
         url('includes/butler/butler_regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'butlerultralight';
    src: url('includes/butler/butler_ultra_light-webfont.woff2') format('woff2'),
         url('includes/butler/butler_ultra_light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body {
	font-family: butlerregular, "Times New Roman", Times, Serif;
}

h1, h2, h3, h4, h5 {
	font-family: butlerultralight, "Times New Roman", Times, Serif;
	letter-spacing: 1px;
}

.poppins, .sidenav ul li {
	font-family: 'Poppins', sans-serif;
}

h2 {
	font-size: 80px;
}

.tiny {
	font-size: 13px;
}

.gold {
	color: #CFA25E;
}

/* Elements */

body {
	margin: 0;
	overflow-x: hidden;
	color: #fff;
	background: #3D1150;
}

.container-fluid {
	padding: 30px 40px;
	height: 100vh !important;
}

.fullscreen {
    display: flex;
    justify-content: center;
    align-items: center;
	border: 1px solid #CFA25E;
	padding: 20px;
	height: calc(100vh - 60px);
}

.fullheight {
	display: flex;
    justify-content: center;
    align-items: stretch;
	height: calc(50%);
}

span.goldline {
	width: 55px;
	border-bottom: 1px solid #CFA25E;
	display: inline-block;
	margin-bottom: 4px;
}

.btn {
	border-radius: 0px !important; 
	padding: 8px 30px !important;
}

.btn-outline-light:hover, .btn-outline-light:active {
	background-color: transparent;
	color: #CFA25E;
	border-color: #CFA25E;
    cursor:pointer;
}

#homepage, #footer {
	background-image: url('../Celestial/assets/img/homepage.jpg');
	background-size: cover;
}

#who-we-are {
	background: url('../Celestial/assets/img/who-we-are.jpg');
	background-position: right top;
	background-size: cover;
}

#who-we-are-flower {
	margin-left: -100px;
}

#who-we-are-mobile {
	background: url('../Celestial/assets/img/who-we-are-mobile.jpg');
	background-position: right top;
	background-size: cover;
}

#what-we-do {
	background-image: url('../Celestial/assets/img/what-we-do.jpg');
	background-position: right top;
	background-size: cover;
}

#what-we-do-mobile {
	background-image: url('../Celestial/assets/img/what-we-do-mobile.jpg');
	background-position: right top;
	background-size: cover;
}

#only-for-you {
	background-image: url('../Celestial/assets/img/only-for-you.jpg');
	background-position: right top;
	background-size: cover;
}

#only-for-you-mobile {
	background-image: url('../Celestial/assets/img/only-for-you-mobile.jpg');
	background-position: right top;
	background-size: cover;
}

#get-invited {
	background-image: url('../Celestial/assets/img/get-invited.jpg');
	background-position: 60% 0%;
	background-size: cover;
}

#get-invited-mobile {
	background-image: url('../Celestial/assets/img/get-invited-mobile.jpg');
	background-position: 60% 0%;
	background-size: cover;
}

.socialmediaicons {
	margin-right: 10px;
}

.magicSpiral {
	background-image: url('../Celestial/assets/img/magic-spiral-150.png');
	background-repeat: no-repeat;
	position: fixed;
	top: -45px;
	right: -45px;
	width: 150px;
	height: 150px;
}

.magicMenu {
	background-image: url('../Celestial/assets/img/menu.png');
	background-repeat: no-repeat;
	background-position: center; 
	background-color: #3D1150;
	position: fixed;
	top: 10px;
	right: 10px;
	width: 30px;
	height: 30px;
	border: 1px solid #CFA25E;
	border-radius: 50px;
	padding: 20px;
}

/* Sidebar */

.sidenav {
	position: fixed;
	right: 13px;
	top: calc(40%);
	text-align: right;
}

.sidenav ul {
	list-style: none;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
}

.sidenav ul li {
	margin-bottom: 10px;
	font-size: 12px;
	float: right;
}

.sidenav a {
	color: #fff;
}

.sidenav a.circle {
	font-size: 10px;
	border: 1px solid #CFA25E;
	border-radius: 100px;
	padding: 3px 8px;
	background: #3D1150;
	margin-left: 5px;
}

.sidenav a:hover {
	text-decoration: none;
}

.sidenav a.homepageLiveLink {
	padding: 4px 10px;
}

.sidenav li span {
	display: none;
}

.sidenav li.live span, .sidenav li:hover {
	display: inline-block;
}

.sidenav span.navMenuLabel, .sidenav span.liveLink, .sidenav span.homepageLiveLink {
	opacity: 0;
	display: inline-block;
}

.sidenav li.live span.navMenuLabel, .sidenav li.live span.liveLink, .sidenav span.liveLink:hover, .sidenav span.navMenuLabel:hover, .sidenav li.livehover span.navMenuLabel, .sidenav li.livehover span.liveLink {
	opacity: 1;
}

/* Audio Controller */

.audioController {
	position: fixed;
	bottom: 30px;
	right: 30px;
}

.audioButton {
	background-image: url('../Celestial/assets/img/audio-on-20.png');
	background-repeat: no-repeat;
	width: 20px;
	height: 18px;
	opacity: 0.5;
	margin: 0 3px 6px 0;
}

.pause {
	background-image: url('../Celestial/assets/img/audio-off-20.png');
}

.audioButton:hover {
	opacity: 1;
	cursor: pointer;
}

/* Contact Form */

.wpcf7 input {
	background: transparent;
	border: 0px;
	border: none;
	border-bottom: 1px solid #fff;
	padding: 10px;
	color: #CFA25E;
	text-align: center;
	font-size: 18px;
}

.wpcf7 input:focus {
	border: none;
	border-bottom: 1px solid #fff;
	outline: none;
}

.contact-form-button {
	border: 1px solid #fff !important;
	padding: 8px 30px !important;
	color: #fff !important;
	margin-top: 20px;
}

.contact-form-button:hover, .contact-form-button:active {
	background-color: transparent !important;
	color: #CFA25E !important;
	border-color: #CFA25E !important;
    cursor:pointer;
}

.wpcf7-response-output {
	color: #CFA25E;
	border: 1px solid #CFA25E !important;
}

/* jQuery Helpers */

.homerow {
	opacity: 0;
	border: 0px;
}

.logo, .flyFromBottomHome {
	transition: transform 2s;
    top: 0px;
    left: 0px;
}

.violetOverlay {
	animation: overlayON 5s 1;
}

@keyframes overlayON {
    from { 
		background-size: 0% 100%; 
	} to {
		background-size: 100% 100%;
	}
}

.violetOverlay:after {
	content: " ";
	z-index: -10;
	display: block;
	position: absolute;
	height: 100%;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(to right, rgb(26,8,38), transparent);
	background: -webkit-linear-gradient(left, rgb(26,8,38), transparent);
	background-size: inherit;
	background-repeat: no-repeat;
}

/* Mobile Styles */

@media screen and (max-width: 576px) {
	
	h2 {
		font-size: 40px;
	}
	
	h3 {
		font-size: 0.75rem;
	}
	
	.logo img {
		max-width: 90%;
		height: auto;
	}
	
	#who-we-are {
		background: linear-gradient(to right, rgb(26,8,38), transparent), url('../Celestial/assets/img/who-we-are.jpg');
		background-position: right top;
		background-size: cover;
	}
	
	#what-we-do {
		background-image: linear-gradient(to right, rgb(26,8,38), transparent), url('../Celestial/assets/img/what-we-do.jpg');
		background-position: right top;
		background-size: cover;
	}

	#only-for-you {
		background-image: linear-gradient(to right, rgb(26,8,38), transparent), url('../Celestial/assets/img/only-for-you.jpg');
		background-position: right top;
		background-size: cover;
	}

	#get-invited {
		background-image: linear-gradient(to right, rgb(26,8,38), transparent), url('../Celestial/assets/img/get-invited.jpg');
		background-position: 60% 0%;
		background-size: cover;
	}
	
	.wpcf7 input {
		font-size: 14px;
	}
	
	.footer-logo {
		width: 120px;
	}
	
	.container-fluid {
		min-height: 100vh;
		height: auto;
	}
	
	p.contact-email {
		font-size: 10px;
	}
}

@media screen and (min-width: 577px) and (max-width: 768px) {
	
	h3 {
		font-size: 1.2rem;
	}
	
	.w-sm-75 {
		width: 75% !important;
	}
	
	.w-sm-100 {
		width: 100% !important;
	}
	
	.carousel-indicators {
		bottom: 0px !important;
	}
	
	.what-we-do-mobile-row img {
		width: 50px;
		margin-bottom: 10px;
	}
	
	.what-we-do-mobile-row h3 {
		font-size: 15px;
	}
	
	.carousel-indicators li {
		width: 80px;
		height: 2px;
		color: #CFA25E;
	}
}

@media screen and (min-width: 769px) {
	.w-md-50 {
		width: 50%;
	}
}

.align-box{align-items: center;justify-content: center;display: flex;}
.features-grid.clearfix { display: flex;}
.grids { box-shadow: 0px 11px 18px rgb(39, 16, 60); padding: 10px 10px; -webkit-transition: all 0.2s; transition: all 0.2s;background: #401352; border: .5px solid #3f1c5e; height: 120px; }
.grids h4 { -webkit-text-stroke: 1px #CFA25E; -webkit-text-fill-color: #c99d5d; font-size: 34px; font-weight: bold;}
.grids h3 {font-size: 18px !important;}
.main-head {font-size: 28px !important;padding:0; margin: 0; }
.celestial-img img { width: 40px; margin-bottom: 11px;}




@media screen and (min-width: 768px) and (max-width: 992px) {
.features-grid.clearfix{flex-direction:row;}  
.grids {height:120px;}
.grids h4{font-size:28px; }
.grids h3 { font-size: 16px !important; line-height: 26px;}
  
 }


@media screen and (min-width: 640px) and (max-width: 768px) {
.features-grid.clearfix{flex-direction:row;}  
.grids {height:auto;}
.grids h4{font-size:28px; }
.grids h3 { font-size: 16px !important; line-height: 26px;}
  
 }


@media screen and (min-width: 200px) and (max-width: 640px) {
 .main-head {font-size:15px !important; }
.grids {height:auto;}
 .grids h4{display:none; }
 .features-grid.clearfix{flex-direction:column; justify-content: center;align-content: center;}
 .grids h3{font-size:15px !important; }
.align-box{margin-top:5px;}
.celestial-img img {display: none;}


 }