/*
 * - 2019 -
 * Responsive additions
 */

 {
	box-sizing: border-box;
  }
  
  div, table {
	  max-width: 100% !important;
  }
  
  #login img {
	  width: 11.11% !important;
	  height: auto !important;
  }
  
  #content {
	/*  max-width: 70vw !important; */
  }
  
  #links {
	  max-width: 30vw !important;
  }
  
    @media only screen and (max-width: 1000px) {
	
	#banner{ width:100%; 	background-color:#0055DC; }
	#banner img{ width:100%; height:auto; }

	#navuusi { top:0px; z-index:999; }
	.navlink{ font-size:14px; height:30px; width:auto; border:0px; padding-top:10px; }
	.navlink:first-child::before { padding-right:2px; content: " |"; }
	.navlink::after { content: " |"; }

	.navlink div{ display:none; }
	.navlink a{ font-size:15px; }

	  #links {
		  width: 100vw !important;
		  max-width: inherit !important;
		  float: none !important;
	  }

	#links li.title {
		height:40px;
		line-height:40px;
		font-size:14px;
	}

	#facebookAlue{ display:none; }
	#fbMobi div{ display:block; list-style-type: none;}

	.facebook{
		font-size:13px;
	}

	.facebookLista{
		font-size:14px;
		line-height:22px;
	}

}

    @media only screen and (max-width: 780px) {

	body{ font-size:13px; }

	 table.stripes td { max-width:250px; overflow:hidden; font-size:15px; width:auto; line-height:20px; }
	 table.stripes td.tapahtumaSP{ max-width:50px; }
	 table.stripes td pre{ white-space: normal; font-size:14px; }
	 table.stripesStat td{max-width:80px; overflow:hidden; font-size:14px; width:auto; } 

	table.stripes td.rowAdm{ padding-left:5px; font-size:13px; }

	.gen{ font-size:15px; }

	table.stripes td.lomakeSubmit { width:100%; }

	 #nav a,#links li {
	  font-size:14px;
	  }
	 

	 #content p.ess table.stripes {
		 /* width: 100%; */
	  }
  
	  #content p.ess table.stripes:nth-child(1) {
		  margin-bottom: 10px;
	  }
  
	  #content p.ess table.stripes:nth-child(2) {
		  margin-top: 10px !important;
		  clear: both;
		  float: none;
	  }

	  div.title {
		height: auto !important;
		/* padding: 5px !important; */
		padding-left:10px;
		text-indent: 0 !important;
		font-size:14px;
	}


	form[name="liity"] table, 
	form[name="liity"] tbody, 
	form[name="liity"] tr,
	form[name="liity"] td {
		display: block !important;
		height: auto !important;
		margin: 0 !important;
	}

	form[name="liity"] input,
	form[name="liity"] textarea {
		max-width: 100% !important;
		vertical-align: middle;
	}

	form[name="liity"] tr {
		display: flex !important;
		clear: both;
	}

	form[name="liity"] td[colspan="2"] {
		width: 100% !important;
	}

	form[name="liity"] td {
		min-height: 40px !important;
		vertical-align: middle;
	}

	form[name="liity"] .form-group label {
		vertical-align: sub;
	}

	form[name="liity"] td.row1 {
		display: table-cell !important;
		float: left;
		width: 40%;
	}

	form[name="liity"] td.row2 {
		display: table-cell !important;
		float: left;
		width: 60%;
	}

	form[name="liity"] .hobbies td {
		width: 33% !important;
	}

	form[name="liity"] .hobbies td .gen {
		display: block;
		word-break: break-all;
	}

	form[name="dynaForm"] table, 
	form[name="dynaForm"] tbody, 
	form[name="dynaForm"] tr,
	form[name="dynaForm"] td {
		display: block !important;
		height: auto !important;
		margin: 0 !important;
	}

	form[name="dynaForm"] input,
	form[name="dynaForm"] textarea {
		max-width: 100% !important;
		vertical-align: middle;
	}

	form[name="dynaForm"] tr {
		display: flex !important;
		clear: both;
	}

	form[name="dynaForm"] td[colspan="2"] {
		width: 100% !important;
	}

	form[name="dynaForm"] td {
		min-height: 40px !important;
		vertical-align: middle;
	}

	form[name="dynaForm"] .form-group label {
		vertical-align: sub;
	}

	form[name="dynaForm"] td.row1 {
		display: table-cell !important;
		float: left;
		width: 40%;
	}

	form[name="dynaForm"] td.row2 {
		display: table-cell !important;
		float: left;
		width: 60%;
	}

	form[name="dynaForm"] td.row2 b {
		display: block;
	}

	form[name="dynaForm"] .hobbies td {
		width: 33% !important;
	}

	form[name="dynaForm"] .hobbies td .gen {
		display: block;
		word-break: break-all;
	}

	#nav2 a{ font-size:14px; line-height:22px; }
  }

@media only screen and (max-width: 600px) {

	 table.stripes td { max-width:100%; overflow:hidden; }
  
	table.stripes th.chat{ width:40%; font-size:14px; }  
	table.stripes td.chatR{ font-size:14px; }
	table.stripes td { font-size:14px; }


	  #banner { height:150px; }
	  #banner img {
		  object-fit: none !important;
		object-position: -320px -10px;
		position:relative; top:20px;
		height:120px;
	  }
  
	  #nav, #nav2 {
		  width: 95.6vw !important;
	  }
  
	  #nav td, #nav2 td {
		  white-space: normal;
		  text-align: left;
	  }
  
	  #content {
		  max-width: 100% !important;
		  margin-top: 10px;
	  }
	  
  
	  #links li br {
		  display: none;
	  }
  
	  #links li:nth-child(4) b {
		  clear: both;
		  display: block;
	  }
  
	  #links li:nth-child(4) a:after {
		  content: " | ";
	  }
  
	  #links li:nth-child(4) a:last-of-type:after {
		  content: "";
	  }
  
	  #links iframe {
		  height: 50px !important;
	  }
  
	  #links > br {
		  display: none;
	  }
  
	  #content p.ess table.stripes:nth-child(1) {
		  margin-bottom: 10px;
	  }
	  #content p.ess table.stripes:nth-child(2) {
		  margin-top: 10px !important;
		  clear: both;
		  float: none;
	  }

	  form[name="liity"] table, 
	  form[name="liity"] tbody, 
	  form[name="liity"] tr,
	  form[name="liity"] td {
		  display: block !important;
		  height: auto !important;
		  margin: 0 !important;
	  }
  
	  form[name="liity"] input,
	  form[name="liity"] textarea {
		  max-width: 100% !important;
		  vertical-align: middle;
	  }
  
	  form[name="liity"] tr {
		  display: flex !important;
		  clear: both;
	  }
  
	  form[name="liity"] td[colspan="2"] {
		  width: 100% !important;
	  }
  
	  form[name="liity"] td {
		  min-height: 40px !important;
		  vertical-align: middle;
	  }
  
	  form[name="liity"] .form-group label {
		  vertical-align: sub;
	  }
  
	  form[name="liity"] td.row1 {
		  display: table-cell !important;
		  float: left;
		  width: 40%;
	  }
  
	  form[name="liity"] td.row2 {
		  display: table-cell !important;
		  float: left;
		  width: 60%;
	  }
  
	  form[name="liity"] .hobbies td {
		  width: 33% !important;
	  }
  
	  form[name="liity"] .hobbies td .gen {
		  display: block;
		  word-break: break-all;
	  }

	  form[name="dynaForm"] table, 
	  form[name="dynaForm"] tbody, 
	  form[name="dynaForm"] tr,
	  form[name="dynaForm"] td {
		  display: block !important;
		  height: auto !important;
		  margin: 0 !important;
	  }
  
	  form[name="dynaForm"] input,
	  form[name="dynaForm"] textarea {
		  max-width: 100% !important;
		  vertical-align: middle;
	  }

	  form[name="dynaForm"] tr {
		  display: flex !important;
		  clear: both;
	  }
  
	  form[name="dynaForm"] td[colspan="2"] {
		  width: 100% !important;
	  }
  
	  form[name="dynaForm"] td {
		  min-height: 40px !important;
		  vertical-align: middle;
	  }
  
	  form[name="dynaForm"] .form-group label {
		  vertical-align: sub;
	  }
  
	  form[name="dynaForm"] td.row1 {
		  display: table-cell !important;
		  float: left;
		  width: 40%;
	  }
  
	  form[name="dynaForm"] td.row2 {
		  display: table-cell !important;
		  float: left;
		  width: 60%;
	  }
  
	  form[name="dynaForm"] .hobbies td {
		  width: 33% !important;
	  }
  
	  form[name="dynaForm"] .hobbies td .gen {
		  display: block;
		  word-break: break-all;
	  }
  }