The Bliss.css

														/*Home Page*/
										
.HomeImages			/*Cover Images slide animation*/
{
	width:100%;
	height:600px;
	padding-top:185px;
	display:none;
	animation:fading 10s infinite;
}

@keyframes fading
{
	0%{opacity:0}
	50%{opacity:1}
	100%{opacity:0}
}										

#para
{						/*paragraph under the cover image*/
	color:#282529;
	font-size:30px;
	font-weight:bold;
	font-style: italic;
	font-display: all;
	text-align: center;
}

.image 					/*the 5 images displaying our services*/
{
	opacity: 1;
	display: block;
	height:350px;
	width:350px;
	transition: .5s ease;
	padding: 70px;
}

.middle 				/*div class used between image and text*/
{
	transition: .5s ease;
	opacity: 0;
	position: absolute;
	top: 50%;
	left: 240px;
	transform: translate(-50%, -50%);
	text-align: center;
}

.container 				/*whole div tag for the 5 images*/
{
	position: relative;
	width:50%;
} 

.container:hover .image 
{
	opacity: 0.3;
}

.container:hover .middle
{
	opacity: 1;
}

.text 					/*text appearing in the middle of the 5 images*/
{
	background-color: #884dff;
	color: white;
	font-size: 25px;
	padding: 16px 32px;
}


#homeIMG				/*padding for the top 3 images*/
{
	padding: 80px;
}

.anim					/*for the animation*/
{
	padding-top:240px ;
}



															/*Common styles for header, body, footer*/

body
{
	background-color: #89a4e8;
	background-image: linear-gradient(to bottom right, #89a4e8, #F9E0FF);
	background-size:cover;
}

.fixedHead 				/*logo, navigation bar, cart icon*/
{
	position:fixed;
	background-image: linear-gradient(to bottom right, #89a4e8, #F9E0FF);
	width:100%;
	z-index:1;		/*to make the header part on top of the animation*/ /*can use only if position=fixed*/
}

#logo 					/*big logo in fixed position*/
{
	width:110px;
	height:110px;
	margin-top:7px;
	margin-left:10px;
}


#navigationBar			/*navigation bar*/
{
	width:100%;
	background-color:black;
	display:flex;
	margin-top:15px;
}

.navButtons 			/*for the buttons for the 8 seperate pages*/
{
	height:44px;
	width:12.5%;
	color:#c8c4f4;
	background-color:black;
	font-size:18px;
	font-family:trebuchet ms;
	font-weight:bold;
	border:0px;
	border-right: 1px solid white;
	border-radius:0px;
	cursor:pointer;
}

.navButtons:hover
{
	color:black;
	background-color:#f1f1f1;
}

#coverimage				/*cover image*/
{
	width:100%;
	height:600px;
	margin-top:185px;
}

.categories 			/*for td, category cells*/
{
	width:20%;
	height:65px;
	text-align:center;
}

.category 				/*for anchor tag used for different categories*/
{
	border:0px;
	border-radius:20px;
	font-family:trebuchet ms;
	font-size:20px;
	text-decoration:none;
	font-weight:bold;
	color:black;
	background-color:#f1f1f1;
	cursor:pointer;
	padding:10px 25px 10px 25px; /*top,right,bottom,left*/
}

.category:hover
{
	color:#f1f1f1;
	background-color:black;
}

fieldset 				/*to seperate products of different categories*/
{
	border:3px solid black;
	padding-left:0px;
	padding-right:0px;
	padding-top:40px;
	padding-bottom:40px;
}

legend 					/*to include category name on fieldset*/
{
	background-color:black;
	padding:10px 25px 10px 25px;
	border-radius:20px;
	font-size:25px;
	font-family:trebuchet ms;
	color:#f1f1f1;
	margin-left:40px;
	font-weight:bold;
}

.productDetails 		/*div tag including image, name, description, price, cart*/
{
	margin-left:20px;
	margin-right:20px;
	border:2px solid black;
}

.productImage			/*product image*/
{
	margin-left:22px;
	margin-right:22px;
	width:280px;
	height:280px;
	margin-top:15px;
}

.productName			/*product name*/
{
	margin-left:22px;
	font-size:26px;
	font-family:trebuchet ms;
	color:black;
	font-weight:bold;
}

.productDescription		/*product description*/
{
	margin-left:22px;
	margin-right:22px;
	font-size:15px;
	font-family:trebuchet ms;
	color:black;
	text-align:justify;
}

.productPrice			/*product price*/
{
	margin-left:22px;
	font-size:25px;
	font-family:trebuchet ms;
	color:black;
	font-weight:bold;
}

#priceWithCart 			/*table used for the price and cart*/
{
	margin-left:0px;
	margin-bottom:10px;
}

#cart 					/*cart icon inside product details*/
{
	background:url("Images/cart.png");
	height:40px;
	width:40px;
	border:0px;
	cursor:pointer;
	background-color:transparent;
	background-size:cover;
}

#cart:hover
{
	background-image:url("Images/after cart.png");
}

#call 					/*call icon in photography and music page*/
{
	background-image:url("Images/ContactUs.png");
	height:40px;
	width:40px;
	border:0px;
	cursor:pointer;
	background-color:transparent;
	background-size:cover;
}

#call:hover
{
	background-image:url("Images/AfterContact.png");
}

#footerContainer		/*footer section*/
{
	margin-top:130px;
	height:200px;
	width:100%;
	background-color:#89a4e8;
}

#footerLogo				/*big logo at center in footer*/
{
	width:250px;
	height:250px;
	margin-top:-185px;
}

#footerLink				/*contact, about links used in footer*/
{
	font-size:22px;
	color:black;
	font-family:trebuchet ms;
}

*{						/*for the whole page to avoid any border around*/
	padding:0px;
	margin:0px;
}


														/*Contact us page*/

#contacthead				/*contact form, contact us*/
{
	font-size:30px;
	font-family:trebuchet ms;
	font-weight:bold;
	padding:10px;
	width:500px;
}

#contactboxes				/*left side form used to collect details*/
{
	font-size:17px;
	font-family:trebuchet ms;
	padding:10px;
	width:500px;
	border: 1px solid grey;
	border-radius:4px;
}

.bothButtons			/*send message button*/
{
	font-size:18px;
	border:0px;
	color:white;
	padding:10px;
	margin-top:5px;
	margin-bottom:5px;
	cursor:pointer;
	background-color:#1c5fa3;
}

#contactDetails				/*right side contact details*/
{
	line-height:1.6;
	margin-left:230px;
	margin-top:-55px;
	font-size:20px;
	font-family:trebuchet ms;
}

#location					/*address contact*/
{
	list-style-image: url("Images/location.png");
	color:#4183d1;
	font-weight:bold;
	
}

#phone						/*phone contact*/
{
	list-style-image: url("Images/phone.png");
	color:#4183d1;
	font-weight:bold;
}

#mail						/*email contact*/
{
	list-style-image: url("Images/mail.png");
	color:#4183d1;
	font-weight:bold;
}

#website					/*website contact*/
{
	list-style-image: url("Images/website.png");
	color:#4183d1;
	font-weight:bold;
}

.socialmedia				/*social media icons*/
{
	width:32px;
	height:32px; 
	background-size:cover;
	background-color:transparent;
	border:0px;
	cursor:pointer;
}


												/*Payment Page*/
												
.cartHeads				/*cart headers*/
{
	font-size:25px;
	text-align:center;
	font-family:trebuchet ms;
	font-weight:bold;
	padding:15px;
}


												/*About page*/

#coverimg
{
    width:100%;
	height:430px;
	margin-top:185px;
}

.gettoknow
{
	text-align:center;
	font-size:40px;
	font-family:lucida handwriting;
	color:#121112;
	font-weight:bold;
	padding:27px;
}

.started
{
	font-size:20px;
	height:26px;
	width: 200px;
	text-align: left;
	margin-left:665px;
	background-color:#eed4ff;
	color:#260230;
	text-align:center;
	font-weight:bold;
}

.year
{
	width: 200px;
	padding: 20px;
	background-color:#260230;
	color:white;
	font-size:80px;
	text-align:center;
	margin-left:665px;
}

.topics
{
	font-family:papyrus;
	font-weight: bold;
	text-align: center;
	font-size: 50px;
	color:#9f2bc2;
}

.whytopics
{
	font-family:lucida console;
	text-align:center;
	background-color:#feedff;
	padding:10px;
	color:#9700cf;
}

.whydesc
{
	font-size:25px;
	text-align:center;
	color:#353336;
	font-family:Courier New;
	font-weight:bold;
}

.whypara
{
	text-align:justify;
	margin:20px;
	font-family:Georgia;
	line-height:25px;
	color:#520575;
}

.column 
{
	float: left;
	width: 33.3%;
	padding: 70px;
}

.card 
{
	box-shadow: 0 12px 14px 0 rgba(0, 0, 0, 0.2);
}

.card:hover
{
	box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.25);
}
 
.container::after, .row::after 
{
	content: "";
	clear: both;
	display: table;
}

.meetcrew
{
	text-align:center;
	font-size:17px;
	font-family:lucida console;
	color:gray;
	font-weight:bold;
}

.teamdesc
{
	font-size:20px;
	text-align:center;
	color:#460759;
	font-family:lucida console;
	line-height:30px;
	padding-left:300px;
	padding-right:300px;
	padding-top:30px;
	padding-bottom:30px;
}

.teamimg
{
	margin-left:580px;
	margin-bottom:80px;
	margin-top:30px;
	height:350px;
	width:350px;
}

.donedesc
{
	font-size:22px;
	text-align:center;
	color:#353336;
	font-family:Courier New;
	font-weight:bold;
	padding-left:250px;
	padding-right:200px;
	line-height:30px;
}

.acontainer 
{
	position: relative;
}

.aimage 
{

	height:400px;
	width:400px;
	padding:50px;
}

.overlay 
{
	position: absolute;
	top: 50px;
	left: 50px;
	background-color: #89a4e8;
	overflow: hidden;
	width: 0;
	height: 300px;
	transition: .5s ease;
}

.acontainer:hover .overlay 
{
	width:300px;
	height:300px;
	opacity:0.9;
}

.atext 
{
	color:white;
	font-size: 25px;
	position: absolute;
	top: 70%;
	left:5%;
	font-weight:bold;
	font-family:arial;
	text-align:left;
	white-space: nowrap;
}