/*
templete-name: meiplay;
The owner of the templete: ahmed samy;
Template-version: 1.0.0;
Date created: 14/2/2020
*/
/*global*/
*
{
	box-sizing: border-box;
}

body
{	
	font-family: 'Basic', sans-serif;
	letter-spacing: 0.7px;
	color: var(--cbody);
	background-color: var(--cbk);
}

.custom-btn
{
	position: relative;
	padding: 22.5px 40px;
	font-weight: lighter;
	border-radius: 0;
	font-size: 16px;
	transition: .7s;
	border: none !important;
	outline: none !important;
}

.custom-btn a
{
	color: inherit
}

.custom-btn a:hover
{
	color: inherit;
}

.custom-btn::before
{
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: 4px;
	transition: .7s;
    pointer-events: none
}

.custom-btn:hover::before
{
	width: 100%
}

.p-r
{
	line-height:1.5;
	letter-spacing: 0.8px;
	font-size: 16px
}
/*global*/

/*loading*/
.loading
{
    background: var(--cbk);
    overflow: hidden;
    text-align: center;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999999;
}

.loading .loader {
    position: relative;
    width: 75px;
    height: 100px;
}
.loading .loader .loader__bar {
    position: absolute;
    bottom: 0;
    width: 10px;
    height: 50%;
    background: #fff;
    transform-origin: center bottom;
    box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
}
.loading .loader .loader__bar:nth-child(1) {
    left: 0px;
    transform: scale(1, 0.2);
    animation: barUp1 4s infinite;
}
.loading .loader .loader__bar:nth-child(2) {
    left: 15px;
    transform: scale(1, 0.4);
    animation: barUp2 4s infinite;
}
.loading .loader .loader__bar:nth-child(3) {
    left: 30px;
    transform: scale(1, 0.6);
    animation: barUp3 4s infinite;
}
.loading .loader .loader__bar:nth-child(4) {
    left: 45px;
    transform: scale(1, 0.8);
    animation: barUp4 4s infinite;
}
.loading .loader .loader__bar:nth-child(5) {
    left: 60px;
    transform: scale(1, 1);
    animation: barUp5 4s infinite;
}
.loading .loader .loader__ball {
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 50%;
    animation: ball 4s infinite;
}

.loading .loader.stop .loader__bar,
.loading .loader.stop .loader__ball
{
    animation-play-state: paused
}

@keyframes ball {
    0% {
    transform: translate(0, 0);
    }
    5% {
    transform: translate(8px, -14px);
    }
    10% {
    transform: translate(15px, -10px);
    }
    17% {
    transform: translate(23px, -24px);
    }
    20% {
    transform: translate(30px, -20px);
    }
    27% {
    transform: translate(38px, -34px);
    }
    30% {
    transform: translate(45px, -30px);
    }
    37% {
    transform: translate(53px, -44px);
    }
    40% {
    transform: translate(60px, -40px);
    }
    50% {
    transform: translate(60px, 0);
    }
    57% {
    transform: translate(53px, -14px);
    }
    60% {
    transform: translate(45px, -10px);
    }
    67% {
    transform: translate(37px, -24px);
    }
    70% {
    transform: translate(30px, -20px);
    }
    77% {
    transform: translate(22px, -34px);
    }
    80% {
    transform: translate(15px, -30px);
    }
    87% {
    transform: translate(7px, -44px);
    }
    90% {
    transform: translate(0, -40px);
    }
    100% {
    transform: translate(0, 0);
    }
}
@keyframes barUp1 {
    0% {
    transform: scale(1, 0.2);
    }
    40% {
    transform: scale(1, 0.2);
    }
    50% {
    transform: scale(1, 1);
    }
    90% {
    transform: scale(1, 1);
    }
    100% {
    transform: scale(1, 0.2);
    }
}
@keyframes barUp2 {
    0% {
    transform: scale(1, 0.4);
    }
    40% {
    transform: scale(1, 0.4);
    }
    50% {
    transform: scale(1, 0.8);
    }
    90% {
    transform: scale(1, 0.8);
    }
    100% {
    transform: scale(1, 0.4);
    }
    }
@keyframes barUp3 {
    0% {
    transform: scale(1, 0.6);
    }
    100% {
    transform: scale(1, 0.6);
    }
}
@keyframes barUp4 {
    0% {
    transform: scale(1, 0.8);
    }
    40% {
    transform: scale(1, 0.8);
    }
    50% {
    transform: scale(1, 0.4);
    }
    90% {
    transform: scale(1, 0.4);
    }
    100% {
    transform: scale(1, 0.8);
    }
}
@keyframes barUp5 {
    0% {
    transform: scale(1, 1);
    }
    40% {
    transform: scale(1, 1);
    }
    50% {
    transform: scale(1, 0.2);
    }
    90% {
    transform: scale(1, 0.2);
    }
    100% {
    transform: scale(1, 1);
    }
}

/*loading*/

/*to-up*/
.to-up
{
	position: fixed;
	right: 20px;
	overflow: hidden;
	bottom: 20px;
	z-index: 99999;
	transition: .5s;
	opacity: 0;
	visibility: hidden;
}

.to-up.show
{
	opacity: 1 !important;
	visibility: visible;
}

.to-up .custom-btn
{
	background: var(--crd);
	color: var(--cwh);
	padding: 10px 15px;
	transition: .5s;
}

.to-up .custom-btn::before
{
	display: none
}

.to-up .custom-btn:hover
{
	background: var(--cbk);
}
/*to-up*/

/*themes*/
.themes
{
	position: fixed;
	top: 20%;
	left: -350px;
	background: var(--cwh);
	padding: 10px 20px 0;
	width: 350px;
	z-index: 9999999;
	transition: .5s;
	border-radius: 0 2px 2px 0;
	padding: 20px
}

.themes.show
{
	left: 0px;
}

.themes h3
{
	color: var(--cbk)
}

.themes .color
{
	width: 30px;
	height: 30px;
	display: inline-block;
	border-radius: 50%;
	cursor: pointer;
	transition: .5s;
	margin-bottom: 15px
}

.themes .color.one
{
	background: #E62B4A;
}

.themes .color.two
{
	background: #F1C30F;
}

.themes .color.three
{
	background: #E4644B;
}

.themes .color.four
{
	background: #4CA52F;
}

.themes .color.five
{
	background: #00BCD5;
}

.themes .color.six
{
	background: #ADBC45;
}

.themes .color.seven
{
	background: #FF5EE1;
}

.themes .color.eight
{
	background: #067B82;
}

.themes .color.active
{
	border: 5px double #00000090;
}

.themes .color.active,
.themes .color:hover
{
	transform: translateY(-4px);
}

.themes .icon
{
	position: absolute;
	top: 50%;
	right: -68px;
	transform: translateY(-50%);
	background: var(--crd);
	padding: 15px 13px;
	border-radius: 0 8px 8px 0;
	cursor: pointer;
	transition: .5s;
}

.themes .icon:hover
{
	transform: translateY(-50%) translateX(5px);
}

.themes .icon .demo-icon
{
	font-size: 30px;
	color: var(--cwh);
}
/*themes*/

/*header*/
/*nav*/
header nav
{
	border-bottom: 2px solid rgba(255, 255, 255, .10);
	background-color: transparent;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	transition: .5s;
	z-index: 99999;
}

/*logo*/
header nav .logo
{
	padding: 40px 0;
}

header nav .logo img
{
	cursor: pointer;
}
/*logo*/

/*ul navb*/
header nav ul
{
	margin: 0;
	padding: 0;
}

header nav ul li
{
	position: relative;
	display: inline-block;
	margin: 0 15px;
	font-size: 16px;
	line-height: 2.1;
	color: var(--cwh);
	padding: 40px 0;
	cursor: pointer;
}

header nav ul li a
{
	color: var(--cwh);
	line-height: .8;
}

header nav ul li a::before
{
	content: "";
	position: absolute;
	bottom: 50%;
	transform: translateY(8px);
	left: 0;
	height: 1px;
	background: var(--cwh);
	width: 0;
	transition: .5s;
}

header nav ul li a:hover::before
{
	width: 100%;
}

header nav ul .drop-down
{
	position: absolute;
	top: 100%;
	left: -78px;
	transform: translateY(4px);
	background: var(--cbk);
	visibility: hidden;
	opacity: 0;
	transition: .5s;
	width: auto;
	padding: 10px 0
}

header nav ul .drop-down::after
{
	content: "";
	position: absolute;
	top: 2px;
	left: 50%;
	width: 15px;
	height: 15px;
	transform: rotate(45deg) translatex(-50%);
	background: var(--cbk);
}

header nav ul li:first-of-type .drop-down
{
	left: -65px;
}

header nav ul .drop:hover .drop-down
{
	visibility: visible;
	opacity: 1;
}

header nav ul .drop-down li
{
	padding: 0;
	margin: 15px 60px;
	font-size: 14px;
}

header nav ul .drop-down li a
{
	width: 100%
}
/*ul navb*/

/*menu-search*/
/* search */
header nav .menu-search
{
	line-height: 2.1;
	padding: 40px 0;
}

header nav .menu-search .overlay
{
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: #111111;
	opacity: .99;
	display: none;
}

header nav .menu-search .overlay .off
{
	position: relative;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	text-align: center;
	background: var(--cwh);
	padding: 16.9px;
	cursor: pointer;
	margin-top: 40px;
}

header nav .menu-search .overlay .off:after
{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	background: transparent;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	transition: .5s;
	border: none;
	transform: translate(0px, 0px);
	box-sizing: content-box;
}

header nav .menu-search .overlay .off:hover::after
{
	border: 10px solid #33333380;
	transform: translate(-10px, -10px);
}

header nav .menu-search .overlay .icon-cancel
{
	color: var(--cbk);
	margin: 0 !important;
	font-weight: lighter;
}

header nav .menu-search .overlay .off:hover .icon-cancel
{
	color: var(--crd)
}

header nav .menu-search .overlay .search
{
	position: absolute;
	top: 50%;
	left: 15%;
	width: 70%;
	border-bottom: 2px solid var(--cwrblack);
}

header nav .menu-search .overlay .search input
{
	border-radius: 0;
	background: transparent;
	font-size: 50px;
	padding: 50px 0;
	color: var(--cwh);
	display: inline-block;
	width: calc(100% - 80px);
	border: none;
	box-shadow: none;
}

header nav .menu-search .overlay .search button
{
	width: 70px;
	height: 70px;
	background: transparent;
	border: none
}

header nav .menu-search .overlay .search button:focus,
header nav .menu-search .overlay .search button:focus,
header nav .menu-search .overlay .search input:focus,
header nav .menu-search .overlay .search input:active
{
	border: none;
	outline: none;
	box-shadow: none;
}

header nav .menu-search .demo-icon
{
	color: var(--cwh);
	font-size: 28px;
	cursor: pointer;
	transition: .5s;
}

header nav .menu-search .demo-icon:hover
{
	color: var(--crd)
}

header nav .menu-search .demo-icon:last-of-type
{
	margin-left: 10px
}
/* search */

/* menu */
header nav .menu-search .menu
{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #111111;
	opacity: .99;
	display: none;
}

header nav .menu-search .menu .social
{
	padding: 10px 0;
	text-align: center;
}

header nav .menu-search .menu .social .demo-icon
{
	font-size: 16px
}

header nav .menu-search .menu .social span:hover .demo-icon
{
	color: var(--crd);
}

header nav .menu-search .menu .social span a
{
	color: var(--cwh);
	transition: .5s;
}

header nav .menu-search .menu .social span a:hover
{
	color: var(--crd)
}

header nav .menu-search .menu .social .off
{
	position: relative;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	text-align: center;
	background: var(--cwh);
	padding: 16.9px;
	cursor: pointer;
	margin: 10px auto;
}

header nav .menu-search .menu .social .off:after
{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	background: transparent;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	transition: .5s;
	border: none;
	transform: translate(0px, 0px);
	box-sizing: content-box;
}

header nav .menu-search .menu .social .off:hover::after
{
	border: 10px solid #33333380;
	transform: translate(-10px, -10px);
}

header nav .menu-search .menu .social .icon-cancel
{
	color: var(--cbk);
	margin: 0 !important;
	font-weight: lighter;
}

header nav .menu-search .menu .social .off:hover .icon-cancel
{
	color: var(--crd)
}

header nav .menu-search .menu ul.main
{
	margin: 0;
	padding: unset;
}

header nav .menu-search .menu ul li
{
	display: block;
	position: relative;
	font-size: 16px;
	padding: 0;
	line-height: 2.1;
	color: var(--cwh);
	margin: 0 0 15px;
}

header nav .menu-search .menu ul li a
{
	color: var(--cwh);
	line-height: .8;
	display: inline;
	position: relative;
}

header nav .menu-search .menu ul li a::before
{
	content: "";
	position: absolute;
	bottom: 50%;
	transform: translateY(8px);
	left: 0;
	height: 1px;
	background: var(--cwh);
	width: 0;
	transition: .5s;
}

header nav .menu-search .menu ul li a:hover::before
{
	width: 100%;
}

header nav .menu-search .menu ul .drop-down
{
	position: static;
	transform: translateY(0);
	background: transparent;
	visibility: visible;
	opacity: 1;
	transition: none;
	width: auto;
	padding-top: 10px;
	display: none;
}

header nav .menu-search .menu ul .drop-down::after
{
	display: none
}

header nav .menu-search .menu ul .drop-down li
{
	padding: 10px;
	margin: 0;
	font-size: 14px;
}

header nav .menu-search .menu ul .drop-down li a
{
	width: 100%
}

/* menu */
/*menu-search*/
/*nav*/
/*header*/

/* footer */
footer
{
	height: auto;
	background: url("../photo/footer/5_6c72936b75638ccfc277a344e51c4ce9.jpg") no-repeat center;
	background-size: cover;
	color: var(--cwrblack);
	line-height:1.5;
	letter-spacing:.7px;
}

footer .concat
{
	padding: 100px 0
}

footer .concat .one
{
	padding-right: 70px;
	margin-bottom: 30px;
}

footer .concat .one .logo img
{
	cursor: pointer;
}

footer .concat .one p
{
	margin-top: 60px
}

footer .concat .two
{
	padding-right: 50px;
	margin-bottom: 30px;
}

footer .concat .two h4,
footer .concat .three h4
{
	color: var(--cwh);
	margin-bottom: 60px;
	font-weight: 700;
}

footer .concat .three .demo-icon
{
	color: var(--cwh);
	font-size: 16px
}

footer .concat .three a,
footer .copy-right a
{
	color: inherit;
	transition: .3s;
}

footer .concat .three a:hover
{
	color: var(--cwh)
}

footer .copy-right
{
	padding: 20px 0;
}

footer .copy-right a:hover
{
	color: var(--crd)
}
/* footer */