/*========comman css========*/
* {
	margin: 0;
	padding: 0;
	scroll-behavior: smooth;
	opacity: 1 !important;
	animation-name: htmlOpacity;
	animation-duration: 1s;
}
body {
	font-family: arial;
	font-size: 15px;
	overflow-x: hidden;
	transition: all 1s;
}
img {
	width: 100%
}
#displaySize {
	max-width: 1170px;
	width: 98%;
	margin: auto;
}

@keyframes htmlOpacity {
	from { opacity: 0%;}
	to { opacity: 100%; }
}
/*=======================
Header Section
=====================*/

.headerMenu {
	background: #00000000;
	width: 100%;
	display: table;
	padding: 40px 0px;
	position: fixed;
	z-index: 1;
}
#mobileMenu {
	float: right;
	width: 100%;
}
#menuBerLogo img {
	width: 192px;
	padding: 10px;
	float: left;
}
#mobileMenuBerLogo {
	display: none;
    position: absolute;
    width: 130px;
    z-index: 1;
    top: 55px;
    margin: 15px 0px 0px 10px;
}
#mainMenu {
	float: right;
}
#mainMenu ul li {
	display: inline-block;
	font-family: arial black;
	padding: 15px;
	list-style: none;
	color: white;
}
#mainMenu ul li a{
	transition: all 0.5s;
}
#mainMenu ul li a {
	text-decoration: none;
	color: white;
}
#mainMenu ul li a:hover {
	color: orange;
	margin-bottom: 2px;
	border-bottom: 1px solid orange;
	border-radius: -4px;
}
#mainMenu ul ul:hover li a {
	color: black;
	border-bottom: 1px solid #33333300;
}
#mainMenu ul li:hover #mainMenu ul ul {
	transform: scaleY(1);
}
@keyframes asjf {
	0% { transform: translateY(1000px); }
	50% { transform: translateY(30px); }
	100% { transform: translateY(0px); }

}
/*========================
Sub Menu
=========================*/

#mainMenu ul ul {
	position: absolute;
	right: 171px;
	width: 340px;
	background: #0000006b;
	border: 1px solid black;
	margin-top: 25px;
	padding: 20px;
	border-radius: 10px;
	transform-origin: bottom;
	transform: scaleY(0);
}
#mainMenu ul li ul {
	transition: all 0.5s;
}
#mainMenu ul li:hover ul {
	transform: scaleY(1);
}
#mainMenu ul ul li {
	font-family: arial black;
	padding: 15px;
	list-style: none;
	transform: scale(1);
	color: white;
}
#mainMenu ul ul li:hover a{
	transform: scale(1.3);
	border-bottom: 1px solid #33333300;
	color: white;
}
/*=======================
 Page-Up Button Section
 =======================*/
.pageUpButton {
   
    position: fixed;
    z-index: 1;
    right: 4%;
    top: 90%;
    visibility: hidden;
}
.innerPageUpButton {
    font-size: 60px;
    text-align: right;
}
.innerPageUpButton a {
    color: #444;
}
.pageUpButton:hover {
	text-shadow: 0px 0 40px #67ff36;;
}
/*=======================
 Slider Section
 =======================*/
#sliderSection {
	width: 100%;
	position: relative;
}

.sliderItems img {
	display: none;
	width: 100%;
	height: 100%;
}


#innerSliderSection {
}

.active img {
	transform: scale(1);
	display: block;
	opacity: 1 !important;
	animation-name: sliderOpacity;
	animation-duration: 3s;
}


@keyframes sliderOpacity {
	from { opacity: 20%; }
	to { opacity: 100%; }
}


/*=======================
 About Section
 =======================*/
#aboutBer {
	width: 100%;
	overflow: hidden;
}
#aboutTitle {
	font-family: arial black;
	font-size: 53px;
	border-bottom: 1px solid black;
	text-align: center;
	margin-top: 60px;
}
#aboutP {
	margin-top: 10px;
	text-align: justify;
	margin-bottom: 30px;
}
#aboutPhotographer{
	display: inline block;
}
#photographerImg {
	width: 400px;
	height: 400px;
	float: left;
	border: 1px solid #888;
	box-shadow: 5px 5px 5px 5px #888;
	margin: 0px 5px 0px 15px;
	position: relative; 
}
#photographerHoverFlow {
	width: 400px;
	height: 300px;
	background: #ff525278;
	color: white;
	font-size: 27px;
	margin: auto;
	text-align: center;
	position: absolute;
	top: 55px;
	transition: .5s;
	transform-origin: center;
	transform: scaleY(0);
}
#photographerHoverFlow h3 {
	font-family: fake boss;
	outline: 2px solid black;
	font-size: 20px;
	padding: 20px;
	margin: 40px;
}
#photographerHoverFlow p a i{
	color: white;
	padding: 10px 30px;
	font-size: 45px;
	border: 1px solid #00ffff00;
}
#photographerImg:hover #photographerHoverFlow {
	transform: scaleY(1);
}
#photographerHoverFlow p a:hover i{
	border: 1px solid black;
	border-radius: 4px;
	color: black;
}
#photographerDetails {
	padding: 10px;
	width: 700px;
	overflow: hidden;
	float: right;
}
#photographerDetails h1 {
	cursor: pointer;
	font-family: arial black;
	font-size: 30px;
	background: white;
	padding: 5px;
	border-radius: 6px;
	border: 1px solid white;
}
#photographerDetails:hover h1 {
	color: #0374ff;
	border: 1px solid black;
}
#secondPhotographer {
	margin-top: 40px;
	overflow: hidden;
}

/*=======================
Join us section
 =======================*/
#joinUsSection {
	background: black;
	width: 96%;
	margin: 30px 0px 10px 0px;
	padding: 50px 20px;
	display: inline-block;
	border-radius: 4px;
}
.innerLeft{
	color: white;
	font-family: cursive;
	font-size: 25px;
	margin-left: 100px;
	float: left;
	padding: 10px;
}
.innerRight button {
	outline: none;
	background: white;
	padding: 15px 40px;
	margin-right: 100px;
	float: right;
	color: #6fa9ff;
	font-size: 23px;
    font-family: monospace;
}
#joinUsSection:hover .innerRight button {
	transform: translateX(-40px);
}
.innerRight button:hover {
	box-shadow: 0px 0px 11px 7px #6fa9ff;
}
.innerRight button i {
	width: 20px;
}
/*=======================
portfolio section
 =======================*/
#portfolio {
	background: #d2d2d2;
	position: relative;
	overflow: hidden;
}
#portfolio h3 {
	font-family: arial black;
	font-size: 53px;
	border-bottom: 1px solid black;
	text-align: center;
	margin-top: 70px;
	padding: 5px 0px;
}
#sliderArea {
	margin-top: 50px;
}
.item {
	position: relative;
}
.sliderCaption {
	position: absolute;
	border-radius: 4px;
	padding: 10px;
	font-family: arial black;
	bottom: 75%;
	right: 5%;
}
.innerSlider {
	display: inline;
}
#leftSlider {
	width: 47%;
	float: left;
    margin-left: 30px;
}
#rightSlider {
	width: 47%;
	float: right;
    margin-right: 30px;
}
.portfolioSectionButton {
	width: 100%;
	background: black;
	margin: 30px 0px;
	transition: all .5s;
}
.portfolioSectionButtonStatus {
	text-align: center;
	font-family: monospace;
	color: white;
	text-decoration: none;
	padding: 25px;
}
.portfolioSectionButton a {
	text-decoration: none;
}
.portfolioSectionButton:hover {
	transform: translateY(15px);
	box-shadow: 0px 0px 11px 7px #6fa9ff;
}
/*=======================
 CONTACT SECTION
 =======================*/

#contactSection {
	max-width: 1170px;
	width: 100%;
	display: inline-block;
	margin-top: 70px;
	margin: 50px 0px;
}
#contact {
	float: left;
	width: 45%;
	padding: 10px;
}
#contactTitle {
	font-family: cursive;
	margin: 20px 0px;
	padding: 15px;
	border-radius: 4px;
	text-align: center;
	border: 1px solid white;
}
#contact:hover #contactTitle {
	border: 1px solid black;
}
#contactDetails {
	color: #888;
	font-size: 19px;
	font-family: monospace;
}
#contactDetails p {
	margin: 20px 0px;
}
#contactDetails p i {
	width: 30px;
}
#mailto a {
	text-decoration: none;
	color: #888;
}
#sendMessage {
	width: 30%;
	border: 1px dashed black;
	padding: 30px;
	color: #444;
	padding: 10px;
	float: right;
}
#sendMessageTitle {
	margin-bottom: 20px;
	text-align: center;
	font-family: arial black;
}
#inputBox input {
	width: 99%;
	padding: 9px 0px;
	text-align: center;
	margin: 7px 0px;
	border-radius: 4px;
	border: 1px solid black;
}
#gender {
	padding: 0px 0px 10px 10px;
}
#gender span {
	font-weight: bold;
}
.submit {
	background: black;
	color: white;
	border-radius: 4px;
	margin-top: 10px;
	transition: all 1s;
	border: 1px solid black;
	font-family: arial black;
}
.submit:hover {
	background: white;
	color: black;
}
.mobileModeSendMessage {
	display: none;
}


/*=======================
 FOOTER SECTION
 =======================*/
#footerSection {
	background: #989898;
 	color: white;
	font-family: cursive;
	padding: 30px 30px 30px 80px;
 }
/*=======================
 END / Thank You /
 =======================*/