/*
 _____     ______     ______   ______     __    __     ______     ______     ______    
/\  __-.  /\  __ \   /\__  _\ /\  __ \   /\ "-./  \   /\  __ \   /\  ___\   /\  __ \   
\ \ \/\ \ \ \  __ \  \/_/\ \/ \ \  __ \  \ \ \-./\ \  \ \  __ \  \ \___  \  \ \  __ \  
 \ \____-  \ \_\ \_\    \ \_\  \ \_\ \_\  \ \_\ \ \_\  \ \_\ \_\  \/\_____\  \ \_\ \_\ 
  \/____/   \/_/\/_/     \/_/   \/_/\/_/   \/_/  \/_/   \/_/\/_/   \/_____/   \/_/\/_/ 

datamasa.fi
-
White 		#fff
hover		#fff
-
portfolio.datamasa.fi
Light blue	#6d99dc
hover		#7db1ff
-
tools.datamasa.fi
light purple#846ddc
hover		#997fff
-
game.datamasa.fi
Light red	#dc4444
hover		#ff5050
-
html.datamasa.fi
Light Green	#66e040
hover		#75ff4a
-

---------------------------------------------------------------------------------------------------END BIG
-------------------------------------------------END SMALL


*/
/*Ilmoitus laatikko*/
#popup{
	display:none;
	border:1px solid #6d99dc;
	color:#FFF;
	padding:15px;
}
#popup-close{
	padding:5px;
	color:#6d99dc;
}

/*BODY*/
	/*Script uses this class = script on page*/
body {
/*main part of theme*/
	background-color: Black;
	font-family: Arial Black, Arial, "Helvetica Neue", Helvetica, sans-serif;
	text-align: center;
	color:#FFF;
/*End*/
/*on Start state of fade out*/
	opacity: 1;
	transition: 1s opacity;
/*End*/
}	
body.fade-out {
    opacity: 0;
    transition: none;
}
body.Im-out {
    opacity: 0;
    transition: 0.5s opacity;
}
/**/
/*---------------------------------------------------------------------------------------------------END OF BODY*/
/* MAIN CONTENT BOX*/
div.organizer { /*Make content middle*/
	min-height:500px;
	margin:auto;
	padding:10px; /*top,right,bottom,left*/
	width: 50%;
	clear: both; /*no content on right or left*/
/*TEST THE BORDERSborder-style: solid; border-color:white;TEST THE BORDERS*/
}
.tabcontent {
}
.tabcontent h2 {
	color: #fff;
	text-shadow: 0px 1px 0px #999, 0px 1px 0px #888, 0px 2px 0px #777, 0px 3px 0px #666, 0px 4px 0px #555, 0px 5px 0px #444, 0px 6px 0px #333, 0px 7px 6px #001135;
	font-size: 35px;
	width:auto;
}
/**/
/*---------------------------------------------------------------------------------------------------END OF MAIN CONTENT BOX*/
/* SUB CONTENT */
/*MIDDLE THE BOXES*/
.tabcontent > .subDefault {
	position:relative;
	margin: auto;
    width: 50%;
	min-width:250px;
	max-width:500px;
	height:250px;
	padding: 10px;
/*TEST THE BORDERSborder-style: solid; border-color:white;TEST THE BORDERS*/
}
.tabcontent > .subDefault a{
	text-decoration:none;
	color:black;
}
.tabcontent > .subDefault  h3{
	text-transform:uppercase;
	color:black;
	text-shadow: 1px 1px rgba(0,0,0,0.5);
}
.tabcontent > .subDefault p{
	color:black;
	font-size:70%;
	/*text-shadow: 1px 1px 2px 2px white;*/
}
/*-------------------------------------------------end of MIDDLE OF THE BOXES*/
/* 1.BOX */
.tabcontent > .subDefault > .topLeft {
/*POSITION*/
	position: absolute;
    top: 5%;
    left: 8%;
/*STYLE*/
	width:40%;
	height:40%;
	border-radius:5px;
	background-color:#fff;					/*MAIN PAGE COLOR*/
	-webkit-transition: width 1s, height 1s, font-size 1s, background-color 1s, top 1s, left 1s;/*for safari*/
	transition: width 1s, height 1s, font-size 1s, background-color 1s, top 1s, left 1s;
}
.tabcontent > .subDefault > .topLeft:hover {	/*HOVER*/
	background-color:#6d99dc;					/*SPECIFIC COLORING*/
	width:50%;
	height:50%;
	font-size:125%;
	top:0%;
	left:0%;

}
/*-------------------------------------------------1.BOX*/
/* 2.BOX */
.tabcontent > .subDefault > .topRight {
/*POSITION*/
	position: absolute;
    top: 5%;
    right: 8%;
/*STYLE*/
	width:40%;
	height:40%;
	border-radius:5px;
	background-color:#fff;					/*MAIN PAGE COLOR*/
	-webkit-transition: width 1s, height 1s, font-size 1s, background-color 1s, top 1s, right 1s;/*for safari*/
	transition: width 1s, height 1s, font-size 1s, background-color 1s, top 1s, right 1s;
}
.tabcontent > .subDefault > .topRight:hover {	/*HOVER*/
	background-color:#846ddc;							/*SPECIFIC COLORING*/
	width:50%;
	height:50%;
	font-size:125%;
	top:0%;
	right:0%;
}
/*-------------------------------------------------2.BOX*/
/* 3.BOX */
.tabcontent > .subDefault > .botLeft {
/*POSITION*/
	position: absolute;
    bottom: 5%;
    left: 8%;
/*STYLE*/
	width:40%;
	height:40%;
	border-radius:5px;
	background-color:#fff;					/*MAIN PAGE COLOR*/
	-webkit-transition: width 1s, height 1s, font-size 1s, background-color 1s, bottom 1s, left 1s;/*for safari*/
	transition: width 1s, height 1s, font-size 1s, background-color 1s, bottom 1s, left 1s;
}
.tabcontent > .subDefault > .botLeft:hover {	/*HOVER*/
	background-color:#dc4444;					/*SPECIFIC COLORING*/
	width:50%;
	height:50%;
	font-size:125%;
	bottom:0%;
	left:0%;
}
/*-------------------------------------------------3.BOX*/
/* 4.BOX */
.tabcontent > .subDefault > .botRight {
/*POSITION*/
	position: absolute;
    bottom: 5%;
    right: 8%;
/*STYLE*/
	width:40%;
	height:40%;
	border-radius:5px;
	background-color:#fff;					/*MAIN PAGE COLOR*/
	-webkit-transition: width 1s, height 1s, font-size 1s, background-color 1s, bottom 1s, right 1s;/*for safari*/
	transition: width 1s, height 1s, font-size 1s, background-color 1s, bottom 1s, right 1s;
}
.tabcontent > .subDefault > .botRight:hover {	/*HOVER*/
	background-color:#66e040;					/*SPECIFIC COLORING*/
	width:50%;
	height:50%;
	font-size:125%;
	bottom:0%;
	right:0%;

}
/*-------------------------------------------------4.BOX*/
/*---------------------------------------------------------------------------------------------------END OF SUB CONTENT*/
/* FOOTER */
div.tab {
	position: fixed;
	bottom: 0;
	width: 100%;
	margin-top: 30px;
    background-color: #000;
}
div.tab a {
	text-transform:uppercase;
	color:#fff;
	text-decoration:none;
}
div.tab a:hover {
    color: #fff;
}
/*---------------------------------------------------------------------------------------------------END OF FOOTER*/
/* OTHER */
.g-recaptcha{/*reCaptcha uses this*/

}
#contactForm {
	/*width:350px;
	min-width:250px;
	position:relative;
	margin: auto;
    width: 50%;
	padding: 10px;*/
}
input[type=text], input[type=email], select {
    width: 100%;
	min-width:250px;
    padding: 12px 20px;
    margin: 8px 0;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}
textarea[type=text], select {
	width: 100%;
	min-width:250px;
	height:200px;
    padding: 12px 20px;
    margin: 8px 0;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}
input[type=submit] {
    width: 100%;
	min-width:250px;
    background-color: #fff;
    color: black;
	text-transform:uppercase;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
	-webkit-transition: display 1s;/*for safari*/
	transition: display 1s;
}

input[type=submit]:active {
    background-color: #fff;
}
.BGgreen {
 background-color:green !important;

}
/*---------------------------------------------------------------------------------------------------END OF OTHER*/
/*---------------------------------------------------------------------------------------------------*/
/*----------------------------------------*//* FOR MOBILE *//*---------------------------------------*/
/*---------------------------------------------------------------------------------------------------*/
/*@media only screen and (min-width: 150px) and (max-width: 600px;)*/
@media only screen and ( max-width: 767px){ /*start of mobile*/
/* MAIN CONTENT BOX*/	
div.organizer {
	min-height:500px;
	margin:auto;
	padding:10px; /*top,right,bottom,left*/
	width: 60%;
}	

/*-------------------------------------------------END OF MAIN CONTENT BOX*/
/*SUB CONTENT inside MAIN CONTENT BOX*/
/*MIDDLE THE BOXES*/
.tabcontent > .subDefault {
	position:relative;
	margin: auto;
	padding: 10px;
    width: 100%;
	height: 80%;
}
/*-------------------------------------------------END OF MIDDLE THE BOXES*/
/* 1.BOX */
.tabcontent > .subDefault > .topLeft {
/*POSITION*/
	position:relative;
    top: 0%;
    left: 0%;
/*STYLE*/
	width:100%;
	height:40%;
	background-color:#6d99dc;				/*HOVER COLOR*/
	font-size:125%;
}
.tabcontent > .subDefault > .topLeft:hover { /*CopyPaste*/
	position:relative;
    top: 0%;
    left: 0%;
	width:100%;
	height:40%;
	background-color:#6d99dc;
	font-size:125%;
}
/*-------------------------------------------------END OF 1.BOX*/
/* 2.BOX */
.tabcontent > .subDefault > .topRight {
/*POSITION*/
	position:relative;
    top: 0%;
    right: 0%;
/*STYLE*/
	width:100%;
	height:40%;
	background-color:#846ddc;					/*HOVER COLOR*/
	font-size:125%;
}
.tabcontent > .subDefault > .topRight:hover {/*CopyPaste*/
	position:relative;
    top: 0%;
    right: 0%;
	width:100%;
	height:40%;
	background-color:#846ddc;					
	font-size:125%;
}
/*-------------------------------------------------END OF 2.BOX*/
/* 3.BOX */
.tabcontent > .subDefault > .botLeft {
/*POSITION*/
	position:relative;
    bottom: 0%;
    left: 0%;
/*STYLE*/
	width:100%;
	height:40%;
	background-color:#dc4444;					/*HOVER COLOR*/
	font-size:125%;
}
.tabcontent > .subDefault > .botLeft:hover {/*CopyPaste*/
	position:relative;
    bottom: 0%;
    left: 0%;
	width:100%;
	height:40%;
	background-color:#dc4444;
	font-size:125%;
}
/*-------------------------------------------------END OF 3.BOX*/
/* 4.BOX */
.tabcontent > .subDefault > .botRight {
/*POSITION*/
	position:relative;
    bottom: 0%;
    right: 0%;
/*STYLE*/
	width:100%;
	height:40%;
	background-color:#66e040;					/*HOVER COLOR*/
	font-size:125%;
}
.tabcontent > .subDefault > .botRight:hover {/*CopyPaste*/
	position:relative;
    bottom: 0%;
    right: 0%;
	width:100%;
	height:40%;
	background-color:#66e040;	
	font-size:125%;
}
/*-------------------------------------------------END OF 4.BOX*/
/*-------------------------------------------------END OF SUB CONTENT*/	
/*-------------------------------------------------*/
/* FOOTER */
div.tab a:hover {
	/*disable*/
}
/*-------------------------------------------------END OF FOOTER*/
/* OTHER */
.g-recaptcha{
	
}

/*-------------------------------------------------END OF OTHER*/	
}/*don't delete*/
/*---------------------------------------------------------------------------------------------------END OF MOBILE*/