/*-------------------------------"Banner"---------------------------------*/

.Banner{
	padding-top:100px;
	background-image: url("../../../images/Banner-XL.png");
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-color:gray;
	height:35vw;
	
	-webkit-box-shadow: -10px 5px 70px 20px rgba(0,0,0,0.75);
	-moz-box-shadow: -10px 5px 70px 20px rgba(0,0,0,0.75);
	box-shadow: -10px 5px 70px 20px rgba(0,0,0,0.75);
}

@media only screen and (max-width: 1280px) 
{
	.Banner
	{
		background-image: url("../../../images/Banner-L-M.png");
		height:39vw;
		padding-top:93px;
	}
}

@media only screen and (max-width: 991px) 
{
	.Banner{
		background-image: url("../../../images/Banner-Mobiles.png");
		padding-top:68px;
		
	}
}
#BannerContainer
{
	width:60%;
}

#orthogonioPiso
{
	background-color:#1a1a1a;
	position:relative;
	top:20%;
	left:12.5%;
	
	width:21.1vw;
	height:60%;
	
}
#perigramaKoufio
{
	/*-float:left;-*/
	position:relative;
	top:-25%;
	left:9.25%;
	width:17.19vw;
	height:150%;
	
	border-radius: 0px 0px 0px 0px;
	-moz-border-radius: 0px 0px 0px 0px;
	-webkit-border-radius: 0px 0px 0px 0px;
	border: 7px solid #ff9800;
	
	-webkit-box-shadow: inset 0px 0px 35px 0px rgba(255,152,0,1);
-moz-box-shadow: inset 0px 0px 35px 0px rgba(255,152,0,1);
box-shadow: inset 0px 0px 35px 0px rgba(255,152,0,1);
	
}


#profPicDiv
{
	position:relative;
	width:14.9vw;
	left:5%;
	top:5%;
}
#profilePic
{
	width:100%;
	
}


@media only screen and (max-width: 1680px) 
{
	#profPicDiv
	{
		left:4.5%;
	}
}
@media only screen and (max-width: 1280px) 
{
	
	#orthogonioPiso
	{
		top:20%;
		left:4%;
		width:25vw;
		height:62%;
		
	}
	#perigramaKoufio
	{
		top:-25%;
		left:9.25%;
		width:20.5vw;
		height:148.5%;
	}
	#profPicDiv
	{
		width:17.4vw;
		left:5.3%;
		top:3.8%;	
	}
}
@media only screen and (max-width: 991px) 
{
	#profPicDiv
	{
		left:4.7%;
		top:4.2%;	
	}
}
/*----Δεξια--*/
.Ban-right
{
	color:#e6e6e6;
}
#Ban-FName
{
	font-size:2.6vw;
}

#Ban-Prof
{
	color:#ff9800;
	font-size:1vw;
	margin-left:1.3vw;
}

#Ban-hr{
	background-color:#ff9800;
	margin-top:10px;
	margin-bottom:1.9vw;
	margin-left:1.9vw;
	width:19vw;
	
	
}
#Ban-about
{
	width:28vw;
	margin-bottom:1.3vw;
	font-size:1.03vw;
}


#Ban-about i
{
	color:#ff9800;
}
#Ban-about i:first-child
{
	font-size:1.3vw;
}
#Ban-Sgn
{
	margin-left:9vw;
	color:#ff9800;
	/* font-family: 'Satisfy', cursive;*/
	font-family: 'Allura', cursive;
	font-size:1.82vw;
	
	transform: rotate(-3deg);
}
@media only screen and (max-width: 1280px) 
{
	#Ban-FName
	{
		font-size:2.7vw;
	}
	#Ban-about
	{
		width:32vw;
		font-size:1.23vw;
	}
}
@media only screen and (max-width: 1195px) 
{
	#Ban-FName
	{
		font-size:2.6vw;
	}
	
}
	/*------------------------------------------4 Mobiles------------------------------------------*/

@media only screen and (max-width: 991px) 
{
	.Banner
	{
		padding-top:110px;
		height:820px;
	}
	#BannerContainer
	{
		
		height:80%;
		padding:0;
	}
	#left
	{
		
		margin-left:25%;
		margin-right:25%;
	}
		#orthogonioPiso
		{
			top:10%;
			left:0;
			width:28vw;
			height:80%;
			
		}
		#perigramaKoufio
		{
			top:-20%;
			left:10%;
			width:22.5vw;
			height:140%;
		}
		#profPicDiv
		{
			width:18.6vw;
			left:5.5%;
			top:5.2%;	
		}
	.Ban-right
	{
		text-align:center;
	}
		#Ban-FName
		{
			display:none;
			
		}
		#Ban-Prof
		{
			font-size:3vw;
			margin-top:30px;
			margin-left:0;
			
		}
		#Ban-hr{
			
		margin-left:15%;
		width:70%;
		
		}
		#Ban-about
		{
			margin-bottom:1.3vw;
			width:85%;
			margin-left:7.5%;
			font-size:1.9vw;
		}
		#Ban-about i:first-child
		{
			font-size:2.5vw;
		}
		#Ban-Sgn
		{
			
			width:85%;
			margin-left:7%;
			font-size:3.5vw;
		}
}

@media only screen and (max-width: 639px) and (max-height: 927px) 
{
	.Banner
	{
		padding-top:130px;
		height:828px;
	}
}
@media only screen and (max-width: 499px) and (max-height: 820px) 
{
	.Banner
	{
		padding-top:120px;
		height:730px;
	}
}
@media only screen and (max-width: 414px) and (max-height: 915px) 
{
	.Banner
	{
		padding-top:130px;
		height:825px;
	}
}
@media only screen and (max-width: 414px) and (max-height: 855px) 
{
	.Banner
	{
		padding-top:125px;
		height:770px;
	}
}
@media only screen and (max-width: 414px) and (max-height: 800px) 
{
	.Banner
	{
		padding-top:105px;
		height:710px;
	}
}
@media only screen and (max-width: 414px) and (max-height: 740px) 
{
	.Banner
	{
		height:648px;
	}
}

@media only screen and (max-width: 375px) and (max-height: 740px) 
{
	.Banner
	{
		height:653px;
	}
}
@media only screen and (max-width: 375px) and (max-height: 670px) 
{
	.Banner
	{
		padding-top:90px;
		height:587px;
	}
}

@media only screen and (max-width: 332px) and (max-height: 991px) 
{
	.Banner
	{
		height:580px;
	}
}
@media only screen and (max-width: 332px) and (max-height: 653px) 
{
	.Banner
	{
		height:574px;
	}
}
/*--- check point ---*/
@media only screen and (max-width: 800px) 
{
	
	#left
	{
		
		margin-left:0;
		margin-right:0;
	}
		#orthogonioPiso
		{
			top:10%;
			left:20.5%;
			width:35vw;
			height:80%;
			
		}
		#perigramaKoufio
		{
			top:-19%;
			left:8.2%;
			width:29.5vw;
			height:138%;
		}
		#profPicDiv
		{
			width:25vw;
			left:5.2%;
			top:5.3%;	
		}
}

@media only screen and (max-width: 768px) 
{
	
	#BannerContainer
	{
		width:65%;
		height:100%
	}
		#orthogonioPiso
		{
			top:10%;
			left:20%;
			width:60%;
			height:80%;
			
		}
		#perigramaKoufio
		{
			top:-19%;
			left:11%;
			width:30vw;
			height:138%;
		}
		#profPicDiv
		{
			left:5.5%;
			top:5.3%;
			
		}
		
		
		
		#Ban-Prof
		{
			font-size:3.5vw;
			
		}
		#Ban-about
		{
			
			margin-bottom:20px;
			width:100%;
			margin-left:0;
			font-size:2.4vw;
		}
		#Ban-about i:first-child
		{
			font-size:3vw;
		}
		#Ban-Sgn
		{
			
			width:85%;
			margin-left:6%;
			font-size:4.5vw;
		}
}
@media only screen and (max-width: 762px) and (max-height:412px) /*--- A52s Firefox ---*/
{
    #Ban-Prof
    {
        font-size:3.2vw;	
    }
    #Ban-about
    {
        font-size:2.2vw;
    }

}
@media only screen and (max-width: 761px) /*--- akurosh tou pano ---*/
{
    #Ban-Prof
    {
        font-size:3.5vw;
        
    }
    #Ban-about
    {
        font-size:2.4vw;
    }
}
@media only screen and (max-width: 600px) 
{
	#BannerContainer
	{
		width:80%;
		height:100%
	}
		#orthogonioPiso
		{
			top:10%;
			left:25%;
			width:50%;
			height:80%;
		}
		#perigramaKoufio
		{
			left:11.9%;
		}
	
		#Ban-Prof
		{
			font-size:3.5vw;
			
		}
		#Ban-about
		{
			
			margin-bottom:20px;
			width:100%;
			margin-left:0;
			font-size:3vw;
		}
		#Ban-about i:first-child
		{
			font-size:3.5vw;
		}
		#Ban-Sgn
		{
			
			width:85%;
			margin-left:6%;
			font-size:5.5vw;
		}
}		
@media only screen and (max-width: 531px) 
{
	
	#BannerContainer
	{
		width:80%;
		height:100%
	}
		#orthogonioPiso
		{
			top:10%;
			left:17.5%;
			width:65%;
			height:80%;
		}
		#perigramaKoufio
		{
			top:-19%;
			left:8.2%;
			width:42vw;
			height:138%;
		}
		#profPicDiv
		{
			width:35vw;	
		}
	.Ban-right
	{
		padding:0;
	}
		#Ban-Prof
		{
			font-size:4.5vw;
		}
		#Ban-about
		{
			
			margin-bottom:10px;
			width:100%;
			margin-left:0;
			font-size:3.2vw;
		}
		#Ban-about i:first-child
		{
			font-size:4vw;
		}
		#Ban-Sgn
		{
			
			width:85%;
			margin-left:6%;
			font-size:6vw;
		}
}


@media only screen and (max-width: 414px) 
{
	
	#BannerContainer
	{
		width:80%;
		height:100%
	}
		#orthogonioPiso
		{
			top:10%;
			left:20%;
			width:60%;
			height:80%;
			
		}
		#perigramaKoufio
		{
			top:-19%;
			left:6.5%;
			width:42vw;
			height:138%;
		}
		#profPicDiv
		{
			left:4%;
			width:35vw;
			top:5.3%;	
		}
	.Ban-right
	{
		padding:0;
	}
		#Ban-Prof
		{
			font-size:5vw;
			
		}
		#Ban-hr{
			
		margin-left:15%;
		width:70%;
		
		}
		#Ban-about
		{
			
			margin-bottom:10px;
			width:100%;
			margin-left:0;
			font-size:3.35vw;
		}
		#Ban-about i:first-child
		{
			font-size:4.1vw;
		}
		#Ban-Sgn
		{
			font-size:6.5vw;
		}
}
@media only screen and (max-width: 378px) and (max-height:707px) /*-- A52s Firefox --*/
{
    #Ban-Prof
    {
        font-size:4.7vw;
    }

}
@media only screen and (max-width: 378px) and (max-height:706px) /*-- Other (akurosh tou pano)--*/
{
    #Ban-Prof
    {
        font-size:5vw;
    }
}
@media only screen and (max-width: 280px) 
{
	#perigramaKoufio
	{
		left:6%;
		width:42.5vw;
		height:138%;
	}
	#profPicDiv
		{
			left:3.5%;
				
		}
}