@charset "utf-8";
/* CSS Document */
body{
    background-color: #f6f8f9;
    overflow-x: hidden;
    direction: rtl;
    position: relative;
    box-sizing: border-box;
}
*{
    padding: 0;
    margin: 0;
    text-decoration:none;
}
a{
   color: inherit;
}
a:hover{
    color: inherit;
    text-decoration: none;
}
p,div,span,h3{
	margin: 0;
	padding: 0;
}
	.v-fourm{
		overflow: hidden;
		background-color:#fff;
		-webkit-box-shadow: 0 0 5px 1px #eee;
		box-shadow: 0 0 5px 1px #eee;		
		padding:10px 0px 10px 0px;
		padding-bottom: 30px;
		font-family:PNU;
		border-radius:10px;
		transition: all 0.3s ease;
		background-image: url('img/w_img/v-z.png');
		background-size: cover;
		background-position: bottom center;
		background-repeat: no-repeat;
		position: relative;
	}
	.v-fourm .square{
		position: absolute;
		z-index: 5;
		width:60px;
		height: 60px;
		background-color: #fff;
		left: -40px;
		bottom:-30px;
		transform: rotate(45deg);
	}
	.v-fourm:hover{
		-webkit-box-shadow: 0 0 10px 1px #bbb;
		box-shadow: 0 0 10px 1px #bbb;
		transform: scale(1.01) translateY(-8px);
	}
	.v-fourm div:nth-child(1){
		padding: 0 10px;
		position: relative;		
		border: 0;
	}
	.v-fourm div:nth-child(1) img[alt="m-img"]{
		width:100%;
		border-radius: 10px;
	}	
	.v-fourm div:nth-child(2){
		margin-top:10px;
		font-size: 18px;
		color: rgba(8,71,127,0.9);
		text-align: right;
		border-right: 2px solid rgba(8,71,127,1);
	}
	.v-fourm div:nth-child(2) p:nth-child(1){
		padding: 0;
		margin: 0;
		display: flex;
		align-items: center;
		padding: 5px 20px;
		color: rgba(8,71,127,1);
	}
	.v-fourm div:nth-child(2) p:nth-child(2){
		padding: 0px 20px;		
		color: red;
		font-size: 14px;
		text-align: left;
		opacity: 1;
		position: absolute;
		z-index: 6;
		bottom: 10px;
		left: 0px;
	}
	.v-fourm div:nth-child(2) p:nth-child(2) span:nth-child(2){
		color: #4A4949;
	}
	.v-fourm div:nth-child(2) img{
		display: inline-block;
		width: 30px;
		margin-left: 5px;		
	}

    /* SCROLL TO TOP ARROW */

    #return-to-top {
        position: fixed;
        z-index: 10;
        left: 10px;
        bottom: 10px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #fff;
		border: 1px solid #0099DD;
        vertical-align: middle;
        text-align: center;
        cursor: pointer;
    }
    #return-to-top:hover{
        background-color:rgba(255,255,255,0.8);
    }
    #return-to-top img{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
    /* END SCROLL TO TOP ARROW */  
.ph-container{
	max-width: 1400px;position: relative;margin: auto;
}
.header{
    position: sticky;
    top: 0;
    z-index: 900;
    width: 100%;
    display: grid;
    grid-template-columns:320px 1fr;
    background-color:rgba(0,96,151,0.9);
    padding:0px 5px;
    vertical-align: middle;
    border: 0px;
}
#header-margin{
    margin-top: 40px;
}
.header div:nth-child(1){
    margin: 5px;
	font-family: PNU;
	font-size: 25px;
	color: #fff;
}
.header div:nth-child(1) p{
	font-size:20px;
    display: inline-block;
    vertical-align: middle;
	margin: 0;
}
.header div:nth-child(1){
    vertical-align: middle;
    padding-right: 10px;
}
.header div:nth-child(1) p img[data="1"]{
	max-width: 40px;
	background-color: #fff;
	padding: 5px 0;
	border-radius: 50%;
}
.header div:nth-child(1) p img[data="2"]{
    max-width: 250px;
    position: relative;
    bottom: -5px;
    right: -10px;
}
.header div:nth-child(2) {
    direction: ltr;
    font-family: PNU;
    color: #006097;
    vertical-align: middle;
    display: grid;
    grid-template-columns: repeat(9,1fr);
}
.header div:nth-child(2) div{
    display: inline-block;
    text-align: center;
    margin: 0;
    vertical-align: top;
}
.header .merja-section{
    position: relative;
    padding: 5px 0;
    text-align: center;
    border-left: 1px solid #ddd;
    overflow: hidden;
}
.header div:nth-child(2) div:nth-child(1){
    border:0px;
}
.header div:nth-child(2) div:nth-child(9){
    border-left: 1px solid #ddd;
}
.header .merja-section p{
    display: block;
}
.header .merja-section img{
    width: 35px;
    transition: all 0.3s ease;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.header .merja-section .secTitle{
	font-size: 16px;
    transition: all 0.3s ease;
    color:#ddd;
    position: relative;
    bottom: -100px;
	text-align: center;
}

.header .merja-section:hover .secTitle{
    transform: translateY(-95px);
}
.header .merja-section:hover img{
	transition: all 0.4s ease-out;
    top: -150px;
}
.header .merja-section .en{
    position: absolute;top:50%;left:50%;transform: translate(-50%,-50%);color: #fff;padding:2px 20px;
}
.header .merja-section:hover .secTitle{
    display: block;
}


	.search{
		margin: auto;
		margin-bottom: 40px;
		max-width: 600px;
		position: relative;
	}
	.search div{
		width: 100%;
		max-width: 100%;
		padding: 5px 10px;
		text-align: center;
	}
	.search div:nth-child(1){
		position: relative;
		margin: auto;
		display: grid;
		grid-template-columns:  1fr 70px;
		width: 100%;
	}
	.search div:nth-child(1) input[type="text"]{
		border-radius: 0 35px 35px 0;
		background-color: #fff;
		color: rgba(0,96,151,0.5);
		border: 2px solid #1890bd;
		padding: 8px 10px;
		padding-right: 20px;
		font-family: PNU;
		font-size: 18px;
		margin-left: 10px;
		max-width: 100%;
		outline: none;
		user-select: none;		
	}
	.search div:nth-child(1) input[type="submit"]{
		border-radius: 35px 0 0 35px;
		background-color: inherit;
		border: 0;
		font-family: ph-bold;
		background-color: #1890bd;
		color: #fff;
		padding-bottom: 0px;
		position: relative;
		right: -10px;
		font-family: PNU;
		font-size: 18px;
	}
@media only screen and (max-width:985px){
	.imgView{
		height: auto;
		max-height: 100%;
		display: block;
	}
}	

	#fixedList{
		position: fixed;
		z-index: 999;
		top: 0;bottom:0;
		left: 0;right: 0;
		background-color: #eee;
		vertical-align: middle;
		align-items: center;
		align-self: center;
		display: none;
		overflow-y: scroll;
	}
    #fixedList .left-side{
		margin: 20px 30px;
}
	#fixedList .footer2{
		align-self: center;
		margin: 20px auto;
		margin-top: 60px;
		align-self: center;
		margin: 20px auto;
		margin-top: 60px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);		
	}
	#fixedList .footer2 div{
		margin: 5px;
	}
.left-side {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    grid-column-gap: 5px;
    grid-row-gap: 5px;
}
    .footer2{
        width: 100%;
        display: flex;
        justify-content: center;
        border-top: 0px solid #fff;
        flex-wrap: wrap;
    }
    .footer2 div{ 
        position: relative;
        padding: 0px;
        padding-top: 10px;
        width: 90px;
        height: 90px;
        border-radius: 15px;
        text-align: center;
        background-color: #eee;
        border: 2px solid #fff;
        transition: all 0.3s ease;
        z-index: 2;
    }
    .footer2 div img{
        width: 40px;
        position: relative;
        margin: auto;
        transition: all 0.3s ease-out;
    }
    .footer2 div:hover img{
        transform: scale(0.8);
    }
    .footer2 div:hover{
        background-color:rgba(238,238,238,0);
        border-color: rgba(238,238,238,0);
        transform: translateY(-10px);
    }
    .footer2 div p{
        margin: 0;
        font-family: ph-bold;
        color: #2c2c2c !important;
        transition: all 0.3s ease;
        font-size: 16px;
        position: relative;        
    }
    .footer2 div:hover p{
        color: #b31616;
    }
    .footer2 div img[src="img/w_img/pens.png"]{
        width: auto;
        max-height: 40px;        
    }
	.f-fourms {
		padding-right: 0px;
		vertical-align: middle;
		font-family: ph-bold;
		font-size: 18px;
		color: #337ab7;
		display: grid;
		grid-template-columns: 30px 1fr;
		align-self: center;
		vertical-align: middle;
		user-select: none;
	}
    .f-fourms p:nth-child(1){
        background-color: #337ab7;
        margin: 0;
        text-align: center;
        position: relative;
        border-radius:50%;
        height: 30px;
        transition: all 0.5s ease;
    }
    .f-fourms p:nth-child(1) img{
        position: relative;
        margin: auto;
        padding:5px;
        position: absolute;
        top: 50%;left: 50%;
        transform: translate(-50%,-50%);
		max-width: 90%;
    }
    .f-fourms p:nth-child(2){
        padding: 0px 5px;
        text-align: right;
        height: 100%;
    }
    .f-fourms p:nth-child(2) a{
        position: relative;
    }
    .f-fourms:hover p:nth-child(1){
      background-color:#437512 !important;
    }  
    .f-fourms:hover p:nth-child(2){
      color:#437512 !important;
    }     
    .f-fourms:hover p:nth-child(1){
        transform: rotateY(180deg) scale(0.8);
    } 

/*body scroll*/
#fixedList::-webkit-scrollbar {
  width: 3px;
  height: 5px;
}
#fixedList::-webkit-scrollbar-button {
  width: 77px;
  height: 0px;
}
#fixedList::-webkit-scrollbar-thumb {
  background: #058ad6;
  border: 76px none #ffffff;
  border-radius: 0px;
}
#fixedList::-webkit-scrollbar-thumb:hover {
  background: #058ad6;
}
#fixedList::-webkit-scrollbar-thumb:active {
  background: #006097;
}
#fixedList::-webkit-scrollbar-track {
  background: #ffffff;
  border: 0px none #ffffff;
  border-radius: 50px;
}
#fixedList::-webkit-scrollbar-track:hover {
  background: #ffffff;
}
#fixedList::-webkit-scrollbar-track:active {
  background: #ffffff;
}
#fixedList::-webkit-scrollbar-corner {
  background: transparent;
}
.hamburger {
    position: fixed;
    top:10px;
    left: 5px;
    z-index: 1000;
    padding: 220px auto 5px auto;
    height: 50px;
    padding-top: 1px;
    border-radius: 3px;
	display: none;
}

/*INDEX*/
	.index-container{
		position: relative;
		margin: auto;
		max-width: 1750px;
		display: grid;
		grid-template-columns: 320px 1fr;
    }
.mainL{
	display: none;
}
	.h-f ,.h-v {
		position: relative;
		z-index: 8;
		display: grid;
		grid-template-columns: 25px 1fr;
		background-color: #fff;		
		border: 1px solid #0280c9;
		border-right: 5px solid #0280c9;
		transition: all 0.3s ease;
		margin: 3px;
		border-radius: 5px;
		cursor: pointer;
		user-select: none;
		padding: 4px 2px;
	}
.h-v:hover , .s-h-f:hover{
	transform: translateX(-8px);
}
	.h-f p:nth-child(2) ,.h-v p:nth-child(2){
		color: #006097;
		font-family: PNU;
		padding: 4px 5px;;
	}
	.s-h-f ,.s-h-v {
		position: relative;
		z-index: 10px;
		display: grid;
		grid-template-columns: 25px 1fr;
		background-color: #c0eafa;
		border-right: 0px solid #333;
		transition: all 0.3s ease;
		margin: 3px 0;
		border-radius: 5px;
		cursor: pointer;
		margin-right: 10px;
		user-select: none;
	}
	.s-h-f p:nth-child(2) ,.s-h-v p:nth-child(2){
		padding: 2px 5px;
		color: #006097;
		font-family: PNU;
		padding: 4px 5px;
	}
	.v-container{
		display:grid;
		grid-template-columns: repeat(3,1fr);
		grid-template-rows:auto;
		grid-column-gap: 15px;
		grid-row-gap:30px;
		padding: 0 10px;
		height: auto;
		align-self: baseline;
	}



/*archive*/
	.a-container{
		padding: 0 10px;
		height: auto;
		align-self: baseline;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	.a-container .a-contain{
		position: relative;
		overflow: hidden;
		width: 24%;
		min-width: 250px;
		margin: 0px 5px;
		margin-bottom: 30px;
	}
.a-container .a-contain div:nth-child(1){
	position: relative;
	border-radius: 10px;
	overflow: hidden;
}
	.a-container div div img[data="main-img"]{		
		width: 100%;
		transition: all 1s;
	}
	.a-container div:hover div img[data="main-img"]{
		transform: scale(1.1);
	}
	.a-container div div img[data="play"]{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		transition: all 0.3s ease;
		background-color: #333;
		border-radius: 50%;
		user-select: none;
		max-width: 40px;
	}
	.a-container div div:hover img[data="play"]{
		opacity: 0.8;
		border: 1px solid #ddd;
		-webkit-box-shadow: 0 0 5px 1px #eee;
		box-shadow: 0 0 5px 1px #eee;
	}
	.a-container div div:nth-child(2) p{
		margin: 0;
		padding: 0px;
		font-family: PNU;
		margin-top: 2px;
	}
	.a-container div .f-name{
		color: rgba(134,129,129,1.00);
		font-size: 11px;
	}
	.a-container .details{
		display: flex;
		justify-content: space-between;
		margin-top: 5px;
	}
	.a-container .details p{
		color: #0280c9;
		vertical-align: middle;
		display: flex;
	}
	.a-container .details p img{
		width: 20px;
		display: inline-block;
		margin-left:3px;
	}
	.a-container .title a:hover,.v-container .f-name a:hover{
		color: #0280c9;
	}
.a-container .web_mode_night_color2 a:hover{
	color: #ddd
}
/*archive*/


	#pageN,#fId{
		display: none;
	}
	.more{
		width: 250px;
		border:2px solid #0280c9;
		padding: 5px 10px;
		position: relative;
		margin: 20px auto;
		text-align: center;
		border-radius: 25px;
		color:#0280c9;
		font-family:ph-bold;
		font-size: 20px;
		transition: all 0.2s ease-out;
		cursor: pointer;
		margin-bottom: 30px;
	}
.more:hover{
	background-color: #fff;
}
	#loading2{
		width: 60px;
		position: relative;
		margin: auto;
		display: none;
	}
/* WATCHING */
	.watchingVideo{
		max-width: 1400px;
		position: relative;
		margin:auto;
		margin-bottom: 10px;
		display: grid;
		grid-template-columns:5fr 2fr;
		align-self: baseline;
		padding: 10px;
	}
	.watchingVideo #right{
		padding: 0 10px;
		max-width: 100%;
		overflow: hidden;
	}
	.watchingVideo #right h3{
		color: #006097;
		font-family: PNU;
		font-size: 18px;
		margin-bottom: 10px;
		line-height: normal;
	}
.watchingVideo #right h3 span{
	color: #d76868;
}
	.watchingVideo #right h4{
		color:#d76868;
		background-color: #fff;
		font-family: ph-bold;
		display: inline-block;
		font-size: 16px;
		font-size: 20px;
		font-weight: bold;
		margin-bottom: 20px;
		padding: 10px 20px;
		border-radius: 30px;
		border: 2px solid #d76868;
		user-select: none;
	}
	.watchingVideo #left{
		padding: 0 10px;
		/*background-color: #fff;*/
		border-radius: 5px;
		max
	}
	.watchingVideo #left h3{
		color: #d76868;
		margin: 5px auto;
		margin-bottom: 15px;
		padding: 0;
		font-family:ph-bold;
		user-select: none;
	}
	.watchingVideo #left .related-v{
		display: grid;
		grid-template-columns: 140px 1fr;
		font-family: PNU;
		margin-bottom: 10px;
		max-width: 100%;
		align-items: center;
	}	
	.watchingVideo #left .related-v div:nth-child(1){
		position: relative;
	}

	.watchingVideo #left .related-v div:nth-child(1) img[child="2"]{
		position: absolute;
		width: 30px;
		z-index: 2;
		top: 5px;
		left: 5px;
		border-radius: 5px;
		background-color: #006097;
	}
	.watchingVideo #left .related-v div:nth-child(1):hover img[child="2"]{
		opacity: 0.8;
		border: 1px solid #ddd;
		-webkit-box-shadow: 0 0 10px 1px #B0B0B0;
		box-shadow: 0 0 10px 1px #B0B0B0;		
	}
	.watchingVideo #left .related-v div:nth-child(2){
		padding: 3px;
		padding-right: 7px;
		align-self: center;
	}
	.watchingVideo #left .related-v div:nth-child(2) p:nth-child(1){
		font-size: 12px;
	}
	.watchingVideo #left .related-v div:nth-child(2) p:nth-child(1):hover{
		color:#006097;
	}	
.related-v .web_mode_night_color1 p a:hover{
	color: #ddd;
}
	.watchingVideo #left .related-v div:nth-child(2) p:nth-child(2){
		font-size: 8px;
		margin-top: 5px;
		color: #6C6C6C
	}
	.watchingVideo #left .related-v div:nth-child(2) p:nth-child(2) span:nth-child(1){color: #0280c9;}
	#like-seen{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 5px;
		
	}
	#seen img{
		width: 25px;
		display: inline-block;
		margin-left: 0px;
	}
	#seen p{
		display: inline-block;
		color: #0280c9;
		font-family: PNU;
		font-size: 14px;
	}
	#like{
		direction: rtl;
		padding: 5px;
		display: inline-grid;
		grid-template-columns: 1fr 30px;
		grid-column-gap: 10px;
		color: #006097;
		font-size: 14px;
		font-family: ph-bold;
		margin-top: 10px;
		align-items: center;
	}
	#like p:nth-child(2){
		padding-right: 5px;		
	}
	#like p:nth-child(2) img{
		transition: all 0.1s ease-out;
		position: relative;
		opacity: 0.6;
	}
	#like p:nth-child(2) img:hover{
		opacity: 0.8;
		transform: rotate(-10deg) scale(1.2);
	}
	#topLike{
		display: grid;
		grid-template-columns: repeat(4,1fr);
		grid-column-gap: 10px;
		grid-row-gap: 10px;
		margin-bottom: 20px;
		max-width: 100%;
	}
	#topLike div{
		position: relative;
		border-radius:10px;
		overflow: hidden;
		max-width: 100%;
	}
	#topLike div img[class="img-responsive"]{
		width: 100%;
		height: auto;
	}
	#topLike div img[src="img/w_img/videocamera3.png"]{
		position: absolute;
		top: 50%;
		left: 50%;
		z-index: 2;
		transform: translate(-50%,-50%);
		max-width: 40px;
		height: auto;
	}
	#topLike div p{
WIDTH: 100%;
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3;
    background-color: rgb(7 84 129 / 80%);
    color: #ddd;
    font-family: PNU;
    font-size: 12px;
    padding: 10px;
    transform: scale(0);
    transition: all 0.3s ease-out;
    vertical-align: middle;
    DISPLAY: FLEX;
    align-items: center;
    text-align: center;
    ALIGN-SELF: center;
    ALIGN-SELF: stretch;
    justify-content: center;
	}
	#topLike div:hover p{
		transform: scale(1)
	}
	#share{
		cursor: pointer;
	}
	#background{
		position:fixed;
		top: 0;bottom: 0;
		left: 0;right: 0;
		background-color: rgba(241,235,235,0.9);
		z-index: 901;
		display: none;		
	}
	#shareCotent{
		width: 100%;
		max-width: 400px;
		display: grid;
		grid-template-columns: repeat(5,1fr);
		grid-column-gap: 10px;
		
		position: fixed;
		bottom: 0%;left: 50%;
		transform: translate(-0%,-50%) scale(0);
		z-index: 902;
		transition: all 0.3s ease-out;
	}
	#shareCotent p{
		width: 70px;
		height: 70px;
		border-radius: 50%;
		padding: 10px;
		background-color: rgb(2, 128, 201,0.3);
		transition: all 0.3s ease-out;
	}
	#shareCotent p:hover{
		transform: scale(1.2) translateY(-10px);
	}
    #shareCotent p{
		cursor: pointer;
    }
/*SEARCH*/
	.search-container{
		position: relative;
		margin: auto;
		padding: 10px;
		max-width: 1600px;
		display: grid;
		grid-template-columns: repeat(5,1fr);
		grid-column-gap: 15px;
		grid-row-gap: 30px;
	}
	.search-container .search-ch div:nth-child(1){
		position: relative;
		border-radius: 10px;
		overflow: hidden;
	}
	.search-container .search-ch .title{
		margin: 0;
		padding: 0px 0px;
		font-family: PNU;
		margin-top: 5px;
	}
	.search-container .search-ch .f-name{
		color: rgba(134,129,129,1.00);
        font-size: 11px;
		font-family: PNU;
	}
	.search-container .search-ch img[class="img-responsive" ]{
		width: 100%;
	}
	.search-container .search-ch img[data="play"] {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		background-color: #333;
		border-radius: 50%;
		user-select: none;
		max-width: 40px;
	}
	.search-container .search-ch .details{
		display: flex;
		justify-content: space-between;
		margin-top: 10px;
	}
	.search-ch .details p {
		font-family: ph-bold;
		font-size: 14px;
        color: #0280c9;
        vertical-align: middle;
        display: flex;
	}
	.search-ch .details p img {
		width: 20px;
		display: inline-block;
		margin-left: 3px;
	}
#resultEnd{font-family: ph-bold;max-width: 300px;;position: relative;margin: 10px; auto;display: block}

	#vMode{
		display: grid;
		grid-template-columns: 1fr 240px 1fr;
		align-items: center;
	}
	#vMode p:nth-child(odd){
		height: 3px;
		background-color: #eee;
	}
	#vMode p:nth-child(1){
		position: relative;
		left: -5px;
		z-index: 0;
	}
	#vMode p:nth-child(3){
		position: relative;
		right:-5px;
		z-index: 0;
	}	
	#vMode p:nth-child(2){
		width: 100%;
		border-radius: 20px;
		display: inline-block;
		background-color: #eee;
		padding: 2px 20px;
		position: relative;
		margin: auto;
	}
	#vMode:hover p{
	background-color: #fff;
	}
	#go-to-top{
		position: fixed;
		bottom: 30px;
		left: 10px;
		width: 35px;
		height: 35px;
		border-radius: 30%;
		border: 1px solid #006097;
		background-color: #fff;
		text-align: center;
		display: flex;
		align-items: center;
		z-index: 100;
		cursor: pointer;
		display: none;
		transition: all 0.5s ease;
	}
	#go-to-top:hover{
		background-color: #006097;
	}
	#go-to-top img{
		width: 30px;
		position: relative;
		margin: auto;
	}