@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,600;0,700;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Saira+Condensed:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jockey+One&family=Oswald:wght@200..700&display=swap');

/* <weight>: Use a value from 200 to 700
 <uniquifier>: Use a unique and descriptive class name

.oswald-<uniquifier> {
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
.jockey-one-regular {
  font-family: "Jockey One", sans-serif;
  font-weight: 400;
  font-style: normal;
}
*/

body { margin: 0; padding: 0; background-color: #fff!important; /*background-image:url("images/bg.png"); background-repeat: repeat-x;*/  }
div#container {  width:100%; margin: 0;  padding: 0; display: block; height: auto; }

div#content {  width:100%; margin: 60px 0 0 0!important;  padding: 0!important; display: block; height: auto;  }
/*
div.content_inner_100 {  width:100%; margin: 100px 0 0 0!important; min-height: 200px; padding: 0; display: block; height: auto; }
div.wide_100{ width: 70%; margin: 0 15%; padding: 40px 0;}*/

div.content_inner_100 {  width:60%; margin: 30px 20%;/* margin: 100px 20% 30px 20%; min-height: 200px; padding: 40px 0;*/ display: block; height: auto; 
font-family: "Inter", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal;	
	font-size: 1em; line-height: 1.6em; color: #222; }
div.wide_100{ width: 100%; margin: 0; padding: 20px 0;}
div.wide_100:after {  clear: both;   content: "";  display: block;} 

div.txt-box-left {width: 100%; font-display: block; padding: 0 0 0 80px; margin: 30px 0; border-left: solid 30px #bed1de; }
div.txt-box-right {width: 100%; font-display: block; padding: 0 80px 0 0; margin: 30px 0; border-right: solid 30px #bed1de; }

div.wide_75 {   width: 80%!important; margin: 0 10%!important; padding: 0!important;  text-align: left!important;
border: none!important;}
.wide_75 img.top { width:100%; display: block; padding: 0 0 30px 0; margin: -115px 0 0 0;  }

/*div.wide_100-text { width: 70%!important; margin: 0 15%!important; padding: 0!important;text-align: left!important;}*/

div.navi_top{ width:100%;  background-color:transparent; padding: 0 1% 0 40%; height: 20px; margin: 0; position:absolute; top: 40px; right:0; z-index: 2!important; }

div#header { width:100%; margin:0; padding: 10px 0 0 0; /*display:block;*/ display:none; position:relative;  }
div#header_top { width:100%; height: 30px; min-height: 50px; margin:5px 0 0 0; padding:0;  position: relative; background-image: none; display:none; }
div.top-logo { width: 250px; display: block;  position: absolute; top: 10px; left: 30px; z-index:2;}

div.box { width: 100%; height: 400px; display:block; position: relative; padding: 0; margin: -65px 0 0 0;  float:left; background-image: url("images/hygsight-top-bg2.jpg"); background-repeat: no-repeat; background-size: cover; background-position: top right; z-index: 1; /*text-align: center;*/}
img#hmu { padding: 0; position: absolute; bottom: 0; right: 3%; width: auto; height: auto; z-index: 3;}
div#slogan { padding: 20px 20px; position: absolute; top: -90px; left: 5%; z-index: 4; width: 45%; height: auto; background-image:url("images/bg-white-25.png");}

div#slogan h1 { font-family: "Oswald", sans-serif; font-optical-sizing: auto; font-weight: 500; font-style: normal;
font-size: 1.6em; color: #333;  }

/*h1 {font-family: 'Poppins', sans-serif; font-size: 2em; font-weight: 400; color: #009bde; line-height: 1.3em;}
h2 { font-family: 'Poppins', sans-serif; font-size: 1.5em; font-weight: 400; line-height:  1.2em;  color: #03335b;}
*/
h1 {font-family: "Oswald", sans-serif; font-optical-sizing: auto; font-weight: 600; font-style: normal; color: #333; font-size: 2.8em;}
h2 {font-family: "Oswald", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; color: #555; font-size: 1.6em; line-height:  1.2em;}

h2.white{ color: #fff;}
h3 { font-family: "Inter", sans-serif; font-optical-sizing: auto; font-weight: 600; font-style: normal; color: #333; font-size: 1.1em;}
b, strong { font-family: "Inter", sans-serif; font-optical-sizing: auto; font-weight: 500; font-style: normal; color: #333; font-size: 1em;}
h4 { font-family: 'Poppins', sans-serif; font-weight: 400;  font-size: 1.15em!important;  line-height:  1.2; color: #222;  }

a.more-bw:link, a.more-bw:visited { display: block; color: #fff; width: auto; margin: 10px 0 0 15%; padding: 8px 10%;  background-color:#222; float:right; 
	text-decoration: none; border-top-left-radius: 12px; border-top-right-radius: 12px; border-bottom-right-radius: 12px; }
a.more-bw:hover {background-color: #fff; color: #222; text-decoration: none;  }

a.more-blueb:link, a.more-blueb:visited { display: block; color: #fff; width: auto; margin: 10px 0 0 15%; padding: 8px 10%;  background-color:#009bde; float:right; 
	text-decoration: none; border-top-left-radius: 12px; border-top-right-radius: 12px; border-bottom-right-radius: 12px; }
a.more-blueb:hover {background-color: #222; color: #fff; text-decoration: none;  }

a.more-bluew:link, a.more-bluew:visited { display: block; color: #fff; width: auto; margin: 10px 0 0 15%; padding: 8px 10%;  background-color:#009bde; float:right; 
	text-decoration: none; border-top-left-radius: 12px; border-top-right-radius: 12px; border-bottom-right-radius: 12px; }
a.more-bluew:hover {background-color: #fff; color: #222; text-decoration: none;  }

a.more:link, a.more:visited { display: block; color: #fff; width: auto; margin: 10px 0 ; padding: 8px 10%;  background-color:#009bde; 
	text-decoration: none; border-top-left-radius: 12px; border-top-right-radius: 12px; border-bottom-right-radius: 12px; }
a.more:hover {background-color: #222; color: #fff; text-decoration: none;  }

a.more-program:link, a.more-program:visited { display: block; color: #fff; width: 220px!important; margin: 10px 0 0 15%; padding: 8px 5%;  background-color:#009bde; float:right; 
	text-decoration: none; border-top-left-radius: 12px; border-top-right-radius: 12px; border-bottom-right-radius: 12px; }
a.more-program:hover {background-color: #222; color: #fff; text-decoration: none;  }

/*a.dl:link, a.dl:visited { display: block; color: #fff; width: auto; margin: 0 0 15px 10%; padding: 6px 5%;  background-color:#E48482; float:right; 
	text-decoration: none; text-transform: uppercase; font-size: .85em;}
a.dl:hover {background-color: #69B9B4; text-decoration: none;  }*/

a.body:link, a.body:visited { color: #1291ca; font-weight: bold; text-decoration: underline; padding: 2px 5px;  }
a.body:hover {color: #fff; background-color: #009bde; text-decoration: none;  }

a.material:link, a.material:visited { color: #009bde; text-decoration: underline; padding: 2px 5px 2px 20px ; margin: 5px 0; background-image:url(//onnitv.fi/images/arrow.png); background-repeat: no-repeat;}
a.material:hover {color: #222; text-decoration: none;  }

a.wide:link, a.wide:visited { display: block; clear:both; color: #fff; font-size: 1.2em; width: 100%; margin: 20px 0; padding: 14px 10%;  background-color:#E48482; text-decoration: none; text-align: center;}
a.wide:hover {background-color: #69B9B4; text-decoration: none;  }

/*
div.grid-wrapper {  width: 70%; margin: 30px 15% 40px 15%; display: block; padding: 50px 0 0 0!important; text-align: left;}
div.grid {  display: block; float:left; width: 33.33%; margin-top: 5px;}
div.grid-left { width: 28%; height: 60px; vertical-align:middle;  padding: 15px 0; text-align: center; display: block; float:left; background-color: #14597C; font-size: 1.2em; color: #fff; }
div.grid-right { width: 70%; height: 60px; margin: 0 2% 0 0; vertical-align:middle; padding: 15px 10px; display: block; float:right; background-color: #DFE7FF; font-size: 1.1em; color: #222;}
div.logot {width: 100%; max-width:none; margin: 0; padding: 40px 0 80px 0!important; text-align: left;}
div.logo-frame {display: block; float: left; width: 22%!important; margin: 10px 1.5%; padding: 0; text-align: center;}
img.logo { width: 90%!important; margin: 0 auto; padding: 5px 5%; max-width: 200px!important;}
*/



img.img-right { float:right; width: 40%; padding: 15px 0 45px 5%; margin: 0 0 0 3%;}
img.img-left { float:left; width: 40%; padding: 15px 5% 45px 0; margin: 0 3% 0 0; }
/*div.info-left, div.info-right { width: auto; padding: 5px 10% 5px 0; display:block; float:left;}*/
div.clr { padding: 15px 0; border-bottom: 1px dotted #bed1de;}
div.clear { padding: 5px 0; }
p.medium {font-size: 1.15em; text-align: left; line-height: 1.5;}
p.small {font-size: .95em; text-align: left; line-height: 1.5;}
div.channels {  display: block; float:left; width: 100%!important; padding: 10px 0;}
div.grid-2 {  display: block; float:left;  padding: 5px 0; margin: 0 2% 0 0; width: 31.33%; background-color: #d4d4d4;}
div.grid-2-left { width: 68%; height: 70px; vertical-align:middle;  padding: 10px 3%; display: block; float:left; line-height: 1.1em;  }
div.grid-2-right { width: 22%; height: 70px; margin: 0 2%; vertical-align:middle; padding: 10px 0; text-align: center; display: block; float:right; background-color: #009bde; font-size: 2em; font-weight: 700; color: #fff;}


/*-----------------------------------------------------------------------------------------*/
/*---------PLAYER --- ----------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------*/

div.player-container {width: 80%; height:auto; margin:0 auto; border: none; padding-top:10px; text-align: left;}

/*-----------------------------------------------------------------------------------------*/
/* -------------------FOOTER---------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------*/
div#footer { background-color: #bed1de; margin-top: 50px;font-family: "Inter", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal;	font-size: .9em; line-height: 1.6em; color: #222; }
div.footer-content { width: 80%;  margin: 0 auto!important; padding: 40px 0 80px 0!important;  display: block; color: #222; }
div.footer-content:after  {  clear: both;   content: "";  display: block;}

div.footer-left { display: block; float:left; width: 35%; padding: 20px 3% 20px 0;  text-align: left;}
div.footer-center { display: block; float:left; width: 35%; padding: 20px 3% 20px 0;  text-align: center!important;}
div.footer-right { display: block; float:left; width: 24%; padding: 20px 0; text-align: left;}

img.logo-footer { width: 130px; padding: 0 0 10px 0;}
img.logo-fb, img.logo-ig { padding: 15px 20px 0 0;}
a.footer:link, a.footer:visited { color: #fff!important; text-decoration: underline;  }
a.footer:hover { text-decoration: none;  color: #fff!important; }
ul.list li {list-style-type: square; margin-left: 25px!important; line-height: 1.8em; }


/** -----------------------------------------------------------------------------------------*/
/* ------  L O G I N   ------------------------------------------------------------*/

div.intra_login_form { min-width: 500px;  background-color:#D8D8D8; border-radius: 20px; margin: 50px auto 20px auto!important; text-align: left;}
h1.login_form { margin: 15px 0;}	
div.intra_login_form_label {text-transform: lowercase; text-transform: capitalize!important; font-family: 'Poppins', sans-serif; font-size: 1em; line-height: 1.6em; }
div.intra_login_form_object { padding: 12px 0; }
input.intra_login_form_input_text { border-radius: 0; background-color: #fff;}
input.intra_login_form_input_text:hover {box-shadow:inset 0px 0px 0px 1px #444; }
input.intra_login_form_send_button { display: block; color: #fff; width: auto; margin: 20px 0 0 0; padding: 8px 10%;  background-color:#009bde; border-top-left-radius: 12px; border-top-right-radius: 12px; border-bottom-right-radius: 12px;  border-bottom-left-radius: 0;text-decoration: none; font-family: 'Poppins', sans-serif; font-size: 1em;}
input.intra_login_form_send_button:hover { background-color: #222; text-decoration: none; cursor:pointer;  }
div.intra_login_form_pw_recovery_link  { display:none;}


/** -----------------------------------------------------------------------------------------*/
/* ------  L O G O U T   ------------------------------------------------------------*/

div.navi_pw_site_logout, div.navi_intranet_logout {margin: 0; padding: 15px;   position:absolute; top: 0; right: 0; z-index:3!important;  background-color: #1291ca; border-radius: 0; border-bottom-left-radius: 20px;}
div.navi_pw_site_logout a, div.navi_intranet_logout a  { color: #fff!important; font-size: .85em!important; margin-left: 10px!important; }
div.navi_pw_site_logout a:hover, div.navi_intranet_logout a:hover { text-decoration: underline!important;}
img.icon_logout {margin: 0 10px -8px 0!important; }

/** -----------------------------------------------------------------------------------------*/
/* ------  A R T I K K E L I T   ------------------------------------------------------------*/

div.navi_left {display:block; width: 100%!important; padding: 40px 5% 20px 10%!important; margin: 30px 0 15px 0!important; float: left; position: relative;}
div.navi_left h1 { margin: 0 0 25px 0!important;}
div.pw_articles{display:block; width: 100%; padding: 30px 0!important; margin: 20px 0; }

a.navi_pw_articles_link:link, a.navi_pw_articles_link:visited { color: #fff; display:block; float:left; width:auto; margin: 5px 10px 5px 0; padding: 8px 15px;  background-color:#009bde; text-decoration: none; border-top-left-radius: 8px; border-top-right-radius: 8px; border-bottom-right-radius: 8px;  }
a.navi_pw_articles_link:hover { background-color: #222; color: #fff; text-decoration: none; } 




span.navi_pw_articles_link_date {display: none;}

div.content_inner_80 { width: 100%; padding: 0 10%; margin: 0; }
div.content_inner_80 .wide_100 { width: 100%!important; padding: 0!important; margin: -100px 0 20px 0!important;/* text-align: center;*/ }
div#sharelinks {border:none!important;}
h1.news_title{}
h4.pw_articles_title { font-family: 'Poppins', sans-serif; font-size: 1.4em; font-weight: 400; line-height:  1.2; color: #009bde;}
div.material { display:block; width:100%;  margin: 0;  padding: 40px 0; text-align: left; }
div.material-front { display:block; width:100%!important;  margin: 0!important;  padding: -50px 0 40px 0!important; text-align: left; }
h4.dl { clear: both; margin: 40px 0 20px 0; font-size: 1em!important; font-weight: 500; }





/** -----------------------------------------------------------------------------------------*/
/* ------ Y O U T U B E / VIMEO  E M B E D  ----------------------------------------------*/
div.video-etu  { width: 70%!important; display: block; text-align:center; /*padding: 15px 2.5%;*/ margin: 0 auto 5px auto;  /*background-color: #DFE7FF; border-radius: 7px; line-height: 1.3em;*/ }
div.video-login  { width: 70%!important; display: block; text-align:center; margin: 0 auto 5px auto;   position:absolute; top: 140px;  }
div.video  { width: 32.33%!important; display: block; float:left!important; padding: 5px 2%; margin: 0 .5% 5px .5%;   height: 420px!important;}
div.video-twoinrow  { width: 45%!important; display: block; float:left!important; padding: 5px 8%; margin: 0 2.5% 5px 2.5%;   height: 420px!important;}


.videoWrapper {
	margin: 10px 0 ;
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
	}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
}


img.thumb {width: 22%!important; margin: 0 3% 20px 0!important; float:left!important; padding: 0!important;}

iframe.form-lomake { height: 950px; width: 100%; border: 0;}

/* login sivu sisältö-----------------------------------------------------*/
div.login-info-text { width: 100%; margin: 0 auto;}
/** ----------bannerit------------------------------*/

.bannertop {  width: 100%;  padding: 10px 0; margin: 3px auto; display: block!important; text-align: center; vertical-align: middle; background-color: #fff !important; height: 500px;}
div.banneri { width: 100%!important; height: 500px; padding: 10px auto; display:block; border-top: 3px solid #ddd; border-bottom: 3px solid #ddd;}