/*
Theme Name: Digital Dragon
Theme URI: http://www.digitaldragongames.fanafzar.com/
Author: کوروش سیف اشرفی
Author URI: https://koori.gigfa.com/
Description: Digital Dragon is a leading developer and publisher in the Middle East with headquarters in Tehran. Digital Dragon is an independent video game publisher focused on producing high quality PC and mobile titles. Our main goals are to help developers make a better product, handle proper communications of their game to make sure it is delivered to the target audience with the right level of support.
Version: 1.0
Tags: digital dragon, game, Shadow Blade, Memoranda, Fruitcraft, Epic of Kings, developer, company, Tehran, Iran, بازی, دیجیتال دراگون گیم
Text Domain: Digital Dragon

Digital Dragon Games, like Games, Iranian team for game.
*/
@font-face {
    font-family: 'open_sansregular';
    src: url('fonts/OpenSans-Regular-webfont.eot');
    src: url('fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-Regular-webfont.woff') format('woff'),
         url('fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
  font-family: 'icon';
  src: url('fonts/untitled-font-1.eot');
  src: url('fonts/untitled-font-1.woff2') format('woff2'),
       url('fonts/untitled-font-1.woff') format('woff'),
       url('fonts/untitled-font-1.ttf') format('truetype'),
       url('fonts/untitled-font-1.svg#untitled-font-1') format('svg'),
       url('fonts/untitled-font-1.eot?#iefix') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}

*{
	margin: 0;
}

html{
	/*overflow-x: hidden;*/
}

body{
	font-family: 'open_sansregular' , sans-serif;
	letter-spacing: 0.1px;
	background: #efefef;
}

body header{
	width: 100%;
    margin: 0 auto;
}

body header nav{
	position: fixed;
	width: 100%;
	top: 0px;
	background-color: #ffffff;
	z-index: 1;
	border-bottom: solid 1px #ddd;
}

body header nav ul{
	margin: 20px 10% 20px 0%;
	float: right;
}

body header nav ul li{
	float: left;
	margin: 0px 0px 0px 20px;
}

body header nav ul li:hover{

}

body header nav ul li a{
    padding: 15px;
    display: block;
    text-decoration: blink;
    color: black;
    font-size: 17px;
}

body header nav ul li:hover a{
	color: hsla(187, 68%, 43%, 0.75);
}

body header nav ul li a.selected{
	color: #0097ab;
	
	text-decoration: underline;
}

body header nav ul li.select{

}

body header nav img{
	margin-left: 10%;
    height: 87px;
    position: fixed;
}

body section{
	overflow-x: hidden;

}

body div#home{
	/*position: relative;
	top: 50px;*/
	padding-top: 88px;
}

/*body section > div{

}*/

body div#games{
	background-image: url('images/game.png');
    background-repeat: no-repeat;
    background-position: 100% 25%;
    background-size: 9%;
}

body div.pad{
	padding: 100px;
}

body h2.title{
	text-align: center;
	padding-bottom: 100px;
	margin: 0;
	text-shadow: #cacbdc 3px 3px 2px;
	font-size: 40px;
}

body div.middle{
	width: 80%;
    margin: 0 auto;
}

body div#games{
	background-color: #1d1d1d;
	color: #f3f3f3;
}

body div#games h2{
	text-shadow: #58585f 3px 3px 2px;
}

body div#games div.middle > div{
	width: 47%;
    display: inline-block;
    /*text-align: center;*/
    margin: 1%;
    vertical-align: top;
    position: relative;
    top: 0;
    /*margin-top: 100px;*/
    border: solid 1px #8697ab;
    cursor: default;
    cursor: -moz-grab;
    cursor: -webkit-grab; 
    cursor: grab;
    overflow: hidden;
}

body div#games div.middle > div img{
	width: 100%!important;
	max-height: 380px;
	filter: brightness(100%);
	transition:  0.5s ease-in-out;
	-webkit-filter: brightness(100%);
	-webkit-transition: .5s ease-in-out;
	-moz-filter: brightness(100%); 
	-moz-transition: .5s ease-in-out;
	-o-filter: brightness(100%); 
	-o-transition: .5s ease-in-out;  
	display: block;  
}

body div#games div.middle > div:hover img{
	filter: brightness(50%);
	transition:  0.5s ease-in-out;
	-webkit-filter: brightness(50%);
	-webkit-transition: 0.5s ease-in-out;
	-moz-filter: brightness(50%);
	-moz-transition: 0.5s ease-in-out;
	-o-filter: brightness(50%);
	-o-transition:0.5s ease-in-out;
	-moz-transform: scale(1.05);
	-webkit-transform: scale(1.05);
	transform: scale(1.05);
	-ms-transform: scale(1.05);
	/*-moz-transform: rotate(3deg) scale(1.1);
	-webkit-transform: rotate(3deg) scale(1.1);
	transform: rotate(3deg) scale(1.1);
	-ms-transform: rotate(3deg) scale(1.1);*/
}

body div#games div.middle > div .game_detail{
	position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    opacity: 0;
    transition:  0.5s ease-in-out;
	-webkit-transition: 0.5s ease-in-out;
	-moz-transition: 0.5s ease-in-out;
	-o-transition:0.5s ease-in-out;
}

body div#games div.middle > div .game_detail span{
	margin: 1px;
}

body div#games div.middle > div:hover .game_detail{
	opacity: 1;
	transition:  0.5s ease-in-out;
	-webkit-transition: 0.5s ease-in-out;
	-moz-transition: 0.5s ease-in-out;
	-o-transition:0.5s ease-in-out;
}

body div#games div.middle > div cite.game_detail{
	top: 10%;
    font-size: 30px;
    font-weight: bold;
    color: #fff;
    top: 10%;
}

body div#games div.middle > div dfn.game_detail{
    top: 25%;
    font-family: 'icon';
}

body div#games div.middle > div time.game_detail{
    font-size: 20px;
    color: #ff9f20;
    bottom: 25%;
}

body div#games div.middle > div span.game_detail{
    bottom: 10%;
}

body div#games div.middle > div span.game_detail a{
    text-decoration: blink;
    color: #fff;
    background-color: rgba(158, 158, 158, 0.25);
    padding: 4px 7px;
    border: solid 1px #fff;
    border-radius: 7px;
    cursor: pointer;
}

body div#games div.middle > div:hover span.game_detail a:hover{
	background-color: rgba(158, 158, 158, 0.75);
	text-shadow: #000 0 1px 1px;
}

body div#publishing ul.tab {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-left: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Float the list items side by side */
body div#publishing ul.tab li {float: left;}

body div#publishing ul.tab li:hover{
	cursor: pointer;
}

/* Style the links inside the list items */
body div#publishing ul.tab li a {
    display: inline-block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of links on hover */
body div#publishing ul.tab li a:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
body div#publishing ul.tab li a:focus, .active {
    background-color: #ccc;
}

/* Style the tab content */
body div#publishing .tabcontent {
    display: none;
    padding: 6px 12px;
    -webkit-animation: fadeEffect 1s;
    animation: fadeEffect 1s;
}

@-webkit-keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

body div#publishing{
	background-image: url('images/publish.png');
    background-repeat: no-repeat;
    background-position: 0px 25%;
    background-size: 9%;
	opacity: 0;
}

body div#publishing ul.tab{

}

body div#publishing ul.tab li{
	border-top: 1px solid #ccc;
	border-right	: 1px solid #ccc;
}

body div#publishing ul.tab li a.tablinks{

}

body div#publishing div.tabcontent{
	border: 1px solid #ccc;
	line-height: 28px;
	text-align: left;
}

body div#publishing div.tabcontent h3{
	line-height: 40px;
}

body div#publishing div.tabcontent ol {
	list-style: decimal;
    margin-left: 1em;
    font-size: 90%;
}

body div#publishing div.tabcontent ul {
	list-style: disc;
    margin-left: 1em;
    font-size: 90%;
}

body div#publishing div.tabcontent ol li{
	line-height: 22px;
	margin: 5px 0;
}

body div#about{
	background-image: url('images/about.png');
    background-repeat: no-repeat;
    background-position: 100% 75%;
    background-size: 9%;
    background-color: #1d1d1d;
    color: #f3f3f3;
}

body div#about h2{
	text-shadow: #58585f 3px 3px 2px;
}

body div#about div.description{
	text-align: center;
	line-height: 28px;
}

/*body div#about div.slider{
	width: 94%;
    margin-left: 3%;
    margin-top: 50px;
}

body div#about div.slider p{
	word-break: break-all;
	padding: 0 30px;
}

.slick-slide{
	text-align: center;
}

.slick-slide img{
	margin: 0 auto;
	width: 150px;
	height: 150px;
	border-radius: 999px;
	border: solid 1px #a3b3af;
}*/

body div#about hr{
	opacity: 0;
}

body div#contact{
	background-image: url('images/contact.png');
    background-repeat: no-repeat;
    background-position: 75% 100%;
    background-size: 15%;
}

body div#contact form{
	display: table;
	margin: 0 auto;
	padding-bottom: 100px;
}

body div#contact form table {
	
}

body div#contact form label{
	*/display: block;*/
	width: 300px;
	margin: 0 auto;
	position: relative;
	top: 19px;
}

body div#contact form input{
	height: 25px;
	width: 300px;
	display: block;
	margin: 2px auto;
	border: none;
	background-color: #efefef;
	border-bottom: solid 1px #444;
	/*text-indent: 60px;*/
}

body div#contact form textarea{
	height: 306px;
	margin: 1px 0;
	border-width: 1px;
 	border-radius: 7px;
	overflow: auto;
	width: 400px;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #999999;
  padding-left: 5px;
  padding-top: 5px;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #3ea5b3;
  padding-left: 5px;
  padding-top: 5px;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #3ea5b3;
  padding-left: 5px;
  padding-top: 5px;
}
:-moz-placeholder { /* Firefox 18- */
  color: #3ea5b3;
  padding-left: 5px;
  padding-top: 5px;
}

footer{
	background-color: #333;
}

footer div#logo_footer{
	text-align: center;
    margin: 20px;
}

footer aside{
	text-align: center;
	padding: 0px 0px 20px 0px;
	color: #cacbdc;
}

section div.scroll:nth-child(odd){
	opacity: 0;
	-moz-transition: all 700ms ease-out;
	-webkit-transition: all 700ms ease-out;
	-o-transition: all 700ms ease-out;
	transition: all 700ms ease-out;
	-moz-transform: translate3d(150px, 0px, 0px);
	-webkit-transform: translate3d(150px, 0px, 0px);
	-o-transform: translate(150px, 0px);
	-ms-transform: translate(150px, 0px);
	transform: translate3d(150px, 0px, 0px);
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
}

section div.in-view:nth-child(odd){
	opacity: 1!important;
	-moz-transform: translate3d(0px, 0px, 0px);
	-webkit-transform: translate3d(0px, 0px, 0px);
	-o-transform: translate(0px, 0px);
	-ms-transform: translate(0px, 0px);
	transform: translate3d(0px, 0px, 0px);
}
section div.scroll:nth-child(even){
	opacity: 0;
	-moz-transition: all 700ms ease-out;
	-webkit-transition: all 700ms ease-out;
	-o-transition: all 700ms ease-out;
	transition: all 700ms ease-out;
	-moz-transform: translate3d(-150px, 0px, 0px);
	-webkit-transform: translate3d(-150px, 0px, 0px);
	-o-transform: translate(-150px, 0px);
	-ms-transform: translate(-150px, 0px);
	transform: translate3d(-150px, 0px, 0px);
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
}

section div.in-view:nth-child(even){
	opacity: 1!important;
	-moz-transform: translate3d(0px, 0px, 0px);
	-webkit-transform: translate3d(0px, 0px, 0px);
	-o-transform: translate(0px, 0px);
	-ms-transform: translate(0px, 0px);
	transform: translate3d(0px, 0px, 0px);
}

@media only screen and (max-width:  1124px){
	body div#games div.middle > div {
	width: initial;
    display: block;
	}
	body div#publishing ul.tab li a{
		font-size: 80%;
	}
	body div#contact{
		background-size: 25%;
	}
	body div#games, body div#publishing, body div#about{
		background-size: 15%;
	}
	body header nav ul{
		text-align: right;
		background-color: #fff;
	}
	body header nav ul:before{
		font-family: 'icon';
		content: 'i';
    	color: #1d1d1d;
    	font-size: 45px;
	}
	body header nav ul li{
		display: none;
		float: none;
		margin: 0px 20px 0px 20px;
	}
	body header nav{
		height: 87px;
	}
}

@media only screen and (max-width:  960px){
	body div#publishing .tabcontent{
		padding: 6px 25px;
	}
	body div#publishing div.tabcontent ol{
		margin-left: 3em;
	}
	body div#contact form > div table{
		width: 100%;
	}
	body div#contact form > div {
		display: block;
    	height: initial;
	}
	body div#contact form label{
		*/display: block;
	    	margin: 10px 0;*/
	}
	body div#contact form input{
		height: 40px;
	}
	.g-recaptcha > div{
		*/margin: inherit!important;*/
	}
	body div#contact form textarea {
		margin: 0px 0px 30px 0px;
	}
	body div#publishing ul.tab li{
		border: 1px solid #ccc
	}
}

body div#page_games{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 2;
	display: -webkit-box;
	-webkit-box-pack: center;
	-webkit-box-align: center;
	display: -moz-box;
	-moz-box-pack: center;
	-moz-box-align: center;
	display: flex;
	justify-content: center; /* align horizontal */
	align-items: center; /* align vertical */
	display: none;
}

body div#page_games > div{
	width: 80%;
	height: 80%;
	overflow: auto;
	background-color: #f5f5f5;
	border-radius: 9px;
}

body div#page_games > div img#loading{
	display: block;
	margin: 0 auto;
}

@media only screen and (max-device-width:  960px){
	body div#games div.middle > div {
	width: initial;
    display: block;
	}
}

@media only screen and (max-width:  768px){
	body div.middle {
	    width: inherit;
	}
}

@media only screen and (max-device-width:  768px){
	body div.middle {
	    width: inherit;
	}
	body div#publishing .tabcontent{
		padding: 6px 25px;
	}
	body div#publishing div.tabcontent ol{
		margin-left: 3em;
	}
}

@media only screen and (max-width:  600px){
	body div#publishing .tabcontent{
		font-size: 80%;
	}
	body div#about div.description{
		text-align: left;
	}
	body header nav ul{
		display: none;
	}
}

@media only screen and (max-device-width:  600px){
	body div#publishing .tabcontent{
		font-size: 80%;
	}
	body div#about div.description{
		text-align: left;
	}
	body div#contact form > div table{
		width: 100%;
	}
	body div#contact form > div {
		display: block;
    	height: initial;
	}
	body div#contact form label{
		*/display: block;
    		margin: 10px 0;/*
	}
	body div#contact form input{
		height: 40px;
	}
	.g-recaptcha > div{
		*/margin: inherit!important;*/
	}
	body div#contact form textarea {
		margin: 0px 0px 30px 0px;
	}
	body div#contact{
		background-size: 25%;
	}
}

@media only screen and (max-device-width:  425px){
	body header nav ul{
		text-align: right;
		background-color: #fff;
	}
	body header nav ul:before{
		font-family: 'icon';
		content: 'i';
    	color: #1d1d1d;
    	font-size: 58px;
	}
	body header nav ul li{
		display: none;
		float: none;
		margin: 0px 20px 0px 20px;
	}
	
}

aside .widget_sp_image-image-link img{
	margin: 5px;
	transition: all 1s;
	opacity: 0.5
}

aside .widget_sp_image-image-link img:hover{
	opacity: 1;
    transform: rotate(360deg);
}
.g-recaptcha {
    height: inherit!important;
}
.g-recaptcha > div{
	margin: 0 auto;
}
body div#page_games > div span#close{
    position: relative;
    left: 98%;
    font-family: 'icon';
    cursor: pointer;
    top: 12px;
    display: none;
}
details div.middle{
	width: 100%;
}
details summary{cursor: pointer;}
details div.scroll{
	opacity: 1!important;
	-moz-transform: translate3d(0px, 0px, 0px)!important;
	-webkit-transform: translate3d(0px, 0px, 0px)!important;
	-o-transform: translate(0px, 0px)!important;
	-ms-transform: translate(0px, 0px)!important;
	transform: translate3d(0px, 0px, 0px)!important;
}