/*--------------general styles-------------*/
html { height: 100%; }

*,
*:after,
*:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}
body {
    font-size: 15px;
    color:#8f81ff;
	color:#709fe0;
    overflow: scroll;
    overflow-x: hidden;
	font-family: 'Chewy', cursive;
}
.clear{
	clear: both;
}
a{
	color: #262158;
	text-decoration: none;
}
.inner-wrapper h1{
	font-family: 'Raleway', sans-serif;
	font-size: 30px;
	color: #709fe0;
	margin: 0px 0px 20px;
	padding-bottom: 10px;
	font-weight:600;
	text-align: center;
	text-transform: uppercase;
	padding-top:80px;
}
	.paintings-title{
		padding-top: 20px;
}
.portfolio,
.paintings{
	padding-bottom:100px;
}
.container{
	width: 100%;
	position: relative;
}
.full-page{
	background: linear-gradient(217deg, rgb(13 0 59), rgba(255,0,0,0) 70.71%), linear-gradient(127deg, rgb(71 0 122 / 61%), rgb(24 123 105 / 0%) 70.71%), linear-gradient(336deg, rgb(22 4 45), rgb(0 33 35) 70.71%);
}
.full-page p{
	font-family: 'Raleway', sans-serif;
	font-size: 24px;
	line-height: initial;
}
.highlight{
	background-image: url("../images/Highlight.png");
}
.inner-wrapper{
	font-family: 'Raleway', sans-serif;
	width: 90%;
	margin: 0 auto;
	position: relative;
	/*min-height: 700px;*/
	max-width: 1100px;
}
.paintings h2, p{
	text-align: center;
	}
.paintings img{
	width: 100%;
	margin: 50px auto;
}
header{
	width:100%;
	height:60px;
	position: fixed;
	top: 0;
	z-index: 999;
	background-color: #100d2b;
}
.inner-header{
	width:90%;
	max-width: 1400px;
	height: 60px;
	margin: 0 auto;
}
.container > header h1 span {
	display: block;
	font-size: 20px;
	font-weight: 300;
}
.page-nav{
    text-align:center;
	display: block;
	line-height: 30px;
	padding: 20px 0px 10px;
	float: right;
}
.page-nav ul li{
	float:left;
}
.page-nav a{
	display: inline-block;
	line-height: 20px;
	text-decoration: none;
	font-size: 20px;
	font-weight: 100;
	text-align: right;
	padding-left:40px;
	font-family: 'Raleway', sans-serif;
	color: #5557c1;
    text-transform: uppercase;
}
.page-nav a:hover {
    color: #8587fa;
	-webkit-transition: all 0.2s ease-in-out 0s;
	-moz-transition: all 0.2s ease-in-out 0s;
	-o-transition: all 0.2s ease-in-out 0s;
	-ms-transition: all 0.2s ease-in-out 0s;
	transition: all 0.2s ease-in-out 0s;
}
.page-nav a.active{
	color: #709fe0;
}

.top-edge{
	background: url("../images/edge.png") no-repeat top;
	background-size: contain;
	Width:100%;
	display: block;
	height: 120px;
}
.phobies,
.tekken,
.mahjong,
.military{
	margin: 100px 0;
}
.phobies li,
.tekken li,
.mahjong li,
.military li{
	display: inline-block;
	Height: 500px;
}
.mahjong li h2{
	margin-top:30px;
}
.right-text{
	font-family: 'Raleway', sans-serif;
	float: left;
	width: 38%;
	margin-left:2%;
}
.left-text{
	font-family: 'Raleway', sans-serif;
	width: 38%;
	margin-right:2%;
}
.right-text h,
.right-text p{
	font-family: 'Raleway', sans-serif;
	font-size: 22px;
    line-height: 1.4;
	text-align: left;
}
.left-text h2,
.left-text p{
	font-family: 'Raleway', sans-serif;
	font-size: 22px;
    line-height: 1.4;
	text-align: right;
}
.left-text h2,
.right-text h2{
	font-size: 28px;
    font-weight: 600;
    margin-bottom: 20px;
}
.left-pic{
	float: left;
	width: 60%;
}
.right-pic{
	float: right;
	width: 60%;	
}
.left-pic img,
.right-pic img{
	width: 100%;
}
.details{
	display: block;
	text-align: center;
    margin-top: 15px;
    border: 0;
    width: 200px;
    height: 44px;
    background-color: transparent;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    outline-style: none;
}
.phobies .details,
.tekken .details{
    float: left;
}
.mahjong .details,
.military .details{
	float: right;
}
.btn-lable{
	color:#fff;
	font-size:18px;
}
.details#view-paintings{
	float:none;
	margin: 0 auto;
}
.about a#about-sec,
.contact a#contact,
.index a#index,
.art a#art,
.webdesign a#webdesign{
	color:#FF0004;
}
.support-note span{
	color: #ac375d;
	font-size: 16px;
	display: none;
	font-weight: bold;
	text-align: center;
	padding: 5px 0;
}
.no-cssanimations .support-note span.no-cssanimations,
.no-csstransforms .support-note span.no-csstransforms,
.no-csstransforms3d .support-note span.no-csstransforms3d,
.no-csstransitions .support-note span.no-csstransitions{
	display: block;
}
footer{
	color: #fff;
	padding: 20px;
	background-color: rgb(16 13 43);
	margin-top: 100px;
	bottom: 0;
	z-index: 999;	
}
footer p{
	text-align: center;
    margin-bottom: 20px;
    font-size: 1.5rem;
	color: #3672ce;
}
footer .copyright{
	font-size: 1rem;
	color:#2d356a;
}
.inner-footer{
	font-family: 'Raleway', sans-serif;
    width: 90%;
    margin:0px auto;
    position: relative;
    max-width: 1400px;
}
footer .signiture{
	position:absolute;
  	transform: rotate(-90deg) scaleX(1);
	font-weight: 700;
	right: -10%;
    top: 40%;
}
.signiture p:nth-child(1){
	font-size: 4rem;
	margin-bottom: 0;
	color: #1e1a41;
}
.signiture p:nth-child(2){
	font-size: 2.6rem;
	margin-bottom: 0;
	color: #1e1a41;
}
footer .footer-col-1,
footer .footer-col-2,
footer .footer-col-3{
    width: 33%;
    float: left;
    margin: 80px 0px 0px;
}
.footer-nav ul li{
	text-align: left;
}
.footer-nav ul li a{
	line-height: 60px;
    font-weight: 700;
    font-size: 1.3rem;
    text-transform: uppercase;
	color:#2d356a;
}
.footer-nav ul li a:hover{
	color: #466b8f;
}
.footer-photo{
    margin: 30px auto;
    opacity: 0.5;
    display: block;
}
.sara{
	width:160px;
	height: 30px;
	position: fixed;
	bottom: 0;
	right:5%;
	background-image:url(../images/sticky-logo.png);
	text-indent: 100%;
	z-index: 800;
}
.mobile-menu{
	display:none;
}
.new-page-nav{
	display:none;
}
.row .text-left h2,
.row .text-right h2{
	margin: 15px 0;
    font-size: 1.4rem;
}
.img-left{
    float: left;
    width: 60%;
}
.text-left{
    float: left;
    width: 38%;
	padding-left: 2%;
	text-align:right;
}
.text-right{
	float: right;
	width: 38%;
	padding-left: 2%;
}
.img-right{
	float: right;
    width: 60%;
}
.img-left img,
.img-right img{
	max-width: 680px;
    object-fit: scale-down;
}
.row{
	margin:40px 0;
	min-height: 200px;
}

@media only screen and (max-width: 1024px){
	.preload .page-nav {
		-webkit-transition: none !important;
		-moz-transition: none !important;
		-o-transition: none !important;
		transition: none !important;
	}
	.page-nav {
		height: 0;
		clear: both;
		overflow: hidden;
		-webkit-transition: height 0.5s ease;
		-moz-transition: height 0.5s ease;
		-o-transition: height 0.5s ease;
		transition: height 0.5s ease;
		width:100%;
		padding:0;
		z-index: 999;
	}
	.mobile-menu {
		display: block;
		opacity: 0.6;
		float: right;
		margin-top:15px;
		border: 0;
		width: 45px;
		height: 40px;
		background-color: transparent;
		background-image: url(../images/menu2.png);
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		cursor: pointer;
		outline-style: none;	
		text-indent: 250%;    	
	}
	.show-menu + .page-nav {
		height: 394px; /* set to a value large enough to contain the menu */
	}
	.page-nav li {
		float: none;
		background-color: rgb(16 13 43);
		width: 100% !important;
		border-bottom: 2px solid #211d4c;
	}
	.page-nav li a {
		border-left: none;
		border-right: none;
		color: #867ae0;
		width: 100%;
		line-height: 46px;
		font-size: 1.3em;
		font-weight: 400;
		padding-right:5px;
	}
	.page-nav a:focus,
	.page-nav a:hover,
	.page-nav a:active{
		color: #0082af;
    	background-color: rgb(20 6 66);
		-webkit-transition: all 0.2s ease-in-out;
		-moz-transition: all 0.2s ease-in-out;
		-o-transition: all 0.2s ease-in-out;
		-ms-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
	}
	.page-nav a.active{
	color: rgba(51,102,255,1);
	background-color: rgb(20 6 66);
	}
	.about a#about,
	.contact a#contact,
	.index a#index,
	.art a#art,
	.services a#services,
	.webdesign a#webdesign{
		color: rgba(100,100,100,1);
		-webkit-transition: all 0.2s ease-in-out;
		-moz-transition: all 0.2s ease-in-out;
		-o-transition: all 0.2s ease-in-out;
		-ms-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
	}
	.goto{
		padding-top: 80px!important;
	}
	.phobies li,
	.tekken li,
	.mahjong li,
	.military li {
		width:100%;
		float:none;
		height: auto;
    	margin-top: 30px;
	}
	.phobies,
	.tekken,
	.mahjong,
	.military{
		margin-bottom:80px;
		margin-top:0;
	}
	.left-text,
	.right-text{
		width:100%;
	}
	.left-text h2,
	.right-text h2,
	.left-text p, 
	.right-text p{
		text-align: center;
	}
	.mahjong,
	.military{
   		display: -webkit-box;
  		display: -moz-box;
  		display: -ms-flexbox;
  		display: -moz-flex;
  		display: -webkit-flex;
  		display: flex;
  		-moz-flex-flow: wrap;
 		-webkit-flex-flow: wrap;
  		flex-flow: wrap;
	}
	.mahjong li.left-text,
	.military li.left-text{
  		order: 2;
	}
	.mahjong li h2 {
    	margin-top: 0;
	}
	.phobies .details,
	.tekken .details,
	.mahjong .details,
	.military .details{
		float: none;
		margin:10px auto;
		font-size: 20px;
	}

}


/*________________________social media___________________________*/

.social-media {
	width: 250px;
	position: relative;
	height:60px;
	margin:0 auto;		
}
.social-meida> ul{
	padding:0;
	margin:0;
}
.social-meida ul li{
	flaot:left;
	display: inline-block;
	list-style-type: none;
}
.social-media a {
	display: inline-block;
	height: 40px;
	text-decoration: none;	
	background-repeat: no-repeat;
	position: relative;
	text-indent: 100%;
	overflow: hidden;
	color:#fff;
}
.social-media a{
	background: url(../images/social-media.png) no-repeat top left;
	display: inline-block;
	position: absolute;
	width: 40px;
	height: 40px;	
}
.social-media .linkdin{
	background-position: -192px 0; 
	left:50px;
}
.social-media .instagram {
	background-position: -96px 0;
    left: 100px;
}
.social-media .email {
    background-position: 0 0;
    left: 150px;
}
.social-media .linkdin:focus,
.social-media .linkdin:hover,
.social-media .linkdin:active{
	background-position: -240px 0;
}
.social-media .instagram:focus,
.social-media .instagram:hover,
.social-media .instagram:active {
	background-position: -144px 0;
}
.social-media .email:focus,
.social-media .email:hover,
.social-media .email:active {
	background-position: -48px 0;
}

/*--------------end of socila media-------------*/