/* CSS Document */
/* 1.BASICS */

body {
	text-align: center;
	margin: 0px;
}
a:link {
	-webkit-transition: all 0.2s ease 0s;
	-moz-transition: all 0.2s ease 0s;
	-ms-transition: all 0.2s ease 0s;
	-o-transition: all 0.2s ease 0s;
	transition: all 0.2s ease 0s;
	color: #fff;
	text-decoration: none;
}
a:visited {
	color: #ffffff;
}
a:hover {
	color: #1AAFA8;
}

/* width */
::-webkit-scrollbar {
	width: 1px;
	height: 15px;
}
/* Track */
::-webkit-scrollbar-track {
	box-shadow: inset 20px 0 115px #888;
	height:5px;
	width: 40px;
}
/* Handle */
::-webkit-scrollbar-thumb {
	background: #035;
	border-radius: 0px;
	width:280px;
	height:120px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
	background: #0a0;
	cursor: pointer;
	transform: scale(1.4);
}


.button_green{
	transition:0.3s;
	padding:5px;
	width:160px;  
	height:30px; 
	background-color:limegreen; 
	border-radius:20px;
	}

.button_green:hover{
	cursor: pointer;
	transform: scale(1.2);	
}

.bg{
	background-image: url(http://standsbg.gr/pics/large/0012.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	height:100%;
}
/* 2.MOVE */
.ty1, .ty2{
	cursor: pointer;
	transition: 0.5s;
}
.ty1:hover{
	transform: translateY(-5px);
}
.ty2:hover{
	transform: translateY(-10px);
}
.tx1, .tx2{
	cursor: pointer;
	transition: 0.5s;
}
.tx1:hover{
	transform: translateX(5px);
}
.tx2:hover{
	transform: translateX(10px);
}
/* 3.BOXES */
.b0{
	filter:drop-shadow(0 0 5px #999);
	position:relative;
	display:inline-block;
	width:300px;
	height:300px;
	background-color: rgba(230,250,230,0.9);
	line-height:150%;
	margin:auto;

}
.b1{
	filter:drop-shadow(0 0 5px #999);
	position:relative;
	display:inline-block;
	width:300px;
	height:300px;
	background-color: rgba(230,250,230,0.9);
	padding:20px;
	line-height:150%;
	border-radius:10px;
	border-style: solid;
	border-width:2px;
	border-color:#999;
	margin:auto;
}
/* 4.CORNERS */
.r1{
	border-radius:5px;
}
.r2{
	border-radius:10px;
}
.r3{
	border-radius:15px;
}
/* 5.FONTS */
.fu{
	font-family: 'Ubuntu', sans-serif;
}
.fr{
	font-family: 'Roboto', sans-serif;
}
.fc{
	font-family: 'Tinos', serif;
}
.fd{
	font-family: 'Didact Gothic', sans-serif;
}
.fm{
	font-family: 'Fira Sans Condensed', sans-serif;
}
.s1 {
	font-size: 1pt;
}
.s2 {
	font-size: 2pt;
}
.s4 {
	font-size: 4pt;
}
.s3 {
	font-size: 3pt;
}
.s5 {
	font-size: 6pt;
}
.s6 {
	font-size: 6pt;
}
.s7 {
	font-size: 7pt;
}
.s8 {
	font-size: 8pt;
}
.s9 {
	font-size: 9pt;
}
.s10 {
	font-size: 10pt;
}
.s11 {
	font-size: 11pt;
}
.s12 {
	font-size: 12pt;
}
.s13 {
	font-size: 13pt;
}
.s14 {
	font-size: 14pt;
}
.s15 {
	font-size: 15pt;
}
.s16 {
	font-size: 16pt;
}
.s17 {
	font-size: 17pt;
}
.s18 {
	font-size: 18pt;
}
.s19 {
	font-size: 19pt;
}
.s20 {
	font-size: 20pt;
}
.s21 {
	font-size: 21pt;
}
.s22 {
	font-size: 22pt;
}
.s23 {
	font-size: 23pt;
}
.s24 {
	font-size: 24pt;
}
.s25 {
	font-size: 25pt;
}
.s30 {
	font-size: 30pt;
}
.s40 {
	font-size: 40pt;
}
.s50 {
	font-size: 50pt;
}
.cw {
	color: #fff;
}
.cb {
	color: #000;
}
.cg {
	color: #888;
}
.cdg {
	color: #333;
}
.clg {
	color: #bbb;
}
.c1 {
	color:red;
}
.c2 {
	color: crimson;
}
.c3 {
	color:greenyellow;
}
.c4 {
	color:darkturquoise;
}

.b {
	font-weight:bold;
}

/* 6.SCALES */
.sc1{
	transition: 0.5s;
}
.sc1:hover {
	cursor:pointer;
	transform: scale(1.05);
}
.sc2{
	transition: 0.5s;
}
.sc2:hover {
	cursor:pointer;
	transform: scale(1.10);
}
.sc3{
	transition: 0.5s;
}
.sc3:hover {
	cursor:pointer;
	transform: scale(1.15);
}
.sc4{
	transition: 0.5s;
}
.sc4:hover {
	cursor:pointer;
	transform: scale(1.20);
}
.sc5{
	transition: 0.5s;
}
.sc5:hover {
	cursor:pointer;
	transform: scale(1.25);
}
.sc6{
	transition: 0.5s;
}
.sc6:hover {
	cursor:pointer;
	transform: scale(1.25);
}
.sc7{
	transition: 0.5s;
}
.sc7:hover {
	cursor:pointer;
	transform: scale(1.5);
}
.sc8{
	transition: 0.5s;
}
.sc8:hover {
	cursor:pointer;
	transform: scale(1.75);
}
.sc9{
	transition: 0.5s;
}
.sc9:hover {
	cursor:pointer;
	transform: scale(2);
}
.sc10{
	transition: 0.5s;
}
.sc10:hover {
	cursor:pointer;
	transform: scale(2.5);
}
.sc11{
	transition: 0.5s;
}
.sc11:hover {
	cursor:pointer;
	transform: scale(3)
}
.sc12{
	transition: 0.5s;
}
.sc12:hover {
	cursor:pointer;
	transform: scale(4)
}
.sc13{
	transition: 0.5s;
}
.sc13:hover {
	cursor:pointer;
	transform: scale(5)
}
.sc14{
	transition: 0.5s;
}
.sc14:hover {
	cursor:pointer;
	transform: scale(6)
}
.sc15{
	transition: 0.5s;
}
.sc15:hover {
	cursor:pointer;
	transform: scale(7)
}
.sc100{
	transition: 0.5s;
}
.sc100:hover {
	cursor:pointer;
	transform: scale(10);
	opacity:0;
}
/* 7.SEPARATORS */
.sh{
	width:100%;
	position: relative;
	height:1px;
	background-color: #aaa;
	margin-top:10px;
	margin-bottom:10px;
}
.sv{
	/*filter:drop-shadow(6px 6px 1px #aaa);*/
	position:relative;
	display:inline-block;
	width:1px;
	top:5px;
	height:25px;
	user-select:none;
	background-color:#aaa;
	transform:scale(1);
	margin-left:20px;
	margin-right:20px;
}
/* 8.BULLETS */
.bl1, .bl2, .bl3, .bl4{
	position: relative;
	display: inline-block;
	margin-left: 10px;
	margin-right: 10px;
	z-index: 100;
	border-radius: 6px;
	vertical-align:4px;
	background-color:#999;
}
.bl1{
	width: 4px;
	height: 4px;
}
.bl2{
	width: 6px;
	height: 6px;
}
.bl3{
	width: 8px;
	height: 8px;
}
.bl4{
	width: 10px;
	height: 10px;
}
.inv{
	visibility: hidden;
}
.vis{
	visibility: visible;
}
.abs{
	position:absolute;
}
.rel{
	position:relative;
}
.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.centerx {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.centery {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.center_sc {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: 0.5s; 
}

.center_sc:hover {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)scale(1.2);
}

.hov{
	cursor: pointer;
}
.rt{
	transition: 0.5s;
}
.rt:hover {
	cursor:pointer;
	transform: scale(1.05)rotate(180deg);
}

@keyframes vibrator {
	0% {
		transform: scale(1);
	}
	25%{
		transform: scale(1.005);
	}
	50% {
		transform: scale(1);
	}
	75% {
	transform: scale(0.995);
	}
	100% {
	transform: scale(1);
	}
}	
.vibrator {
	animation-name: vibrator;
	animation-duration: 0.8s;
	animation-iteration-count: infinite;	
	animation-timing-function: linear;
}	


@keyframes slider {
	0% {
		transform: translateX(0px);
	}
	30%{
		transform: translateX(0px);
	}
	75% {
		transform: translateX(-130px);
	}
	100% {
		transform: translateX(0px);
	}
}	
.slider {
	animation-name: slider;
	animation-duration: 5s;
	animation-iteration-count: infinite;		
}	
.scale150 {
	transition:  0.7s;
	}
.scale150:hover {
	transform: rotate(360deg)scale(1.4);
	}
.pad1 {
	/* background-color:#222;
	*/
	text-align: left;
	text-decoration: none;
	text-indent: 0px;
	line-height: 185%;
	padding-top: 10px;
	padding-right: 20%;
	padding-bottom: 50px;
	padding-left: 20%;
	font-weight: normal;
}
.pad1_mob {
	/* background-color:#222;
	*/
	text-align: left;
	text-decoration: none;
	text-indent: 0px;
	line-height: 170%;
	padding-top: 20px;
	padding-right: 6%;
	padding-bottom: 10px;
	padding-left: 6%;
	font-weight: normal;
}
.pad2 {
	/* background-color:#222;
	*/
	text-decoration: none;
	text-indent: 0px;
	line-height: 165%;
	padding-top: 20px;
	padding-right: 20px;
	padding-bottom: 20px;
	padding-left: 20px;
	font-weight: normal;