/**
 *
 * Theme Name: Mediaani Bootstrap Theme
 * Theme URI: http://www.mediaani.fi/
 * Author: Mediaani - 
 * Author URI: http://www.mediaani.fi
 * Description: Mediaani Bootstrap Theme
 * Version: 1.0
 * License: GNU General Public License
 * License URI: license.txt
 *
 * TOC
 * 1. Layout
 * 2. Typograhpy
 * 3. Buttons
 * 4. Navigation
 * 5. Widgets
 * 6. Modules
 * 7. Helpers
 * 8. Forms
 * 9. IE overrides
 * 10. Misc.
 *
 */


/*-----------------------------------------------------------------------------
   Layout
-----------------------------------------------------------------------------*/


/* Body
-----------------------------------------------------------------------------*/


/* Header
-----------------------------------------------------------------------------*/

.Logo {
  float: left;
  display: block;
  width: 202px;
  height: 54px;
  margin: 20px 0 18px;
  padding: 0;
  background: transparent url('../images/logo-sunda.png') no-repeat 0 0;
  -webkit-background-size:100% auto;
  -moz-background-size:100% auto;
  -o-background-size:100% auto;
  background-size:100% auto;
  text-indent: -9999px;
}

.login,
.lang { color:#404040; background:none; font-size:14px; padding:10px; float:right; font-weight:600; }
.lang img { height:1.2em; width:auto; margin-right:3px; }
ul.dropdown-menu { min-width:0; }

a.verkkokauppa { clear:right; float:right; margin:0 0 1em; }
.TopLinks.mob,
a.verkkokauppa i { display:none; }

a.loginname { color:#404040; background:none; font-size:14px; padding:10px; float:right; font-weight:600; margin:0 0 1em; }


@media screen and (max-width: 991px) {
  header .container { width:auto; padding:0; }
  .Top { float:left; position:relative; left:5%; z-index:2; }
  .Logo { width:150px; height:40px; margin:15px 0; }
  .Top .lang,
  .Top .login,
  .Top .verkkokauppa { display:none; }
  .TopLinks.mob { display:block; float:left; width:100%; background:#f1f1f1; border-top:1px solid #e5e5e5; border-bottom:1px solid #e5e5e5; }
  .TopLinks.mob a.login,
  .TopLinks.mob a.lang { display:block; float:left; margin:12px 0 0; position:relative; left:5%; padding-left:0; padding-right:20px; }
  .TopLinks.mob a.verkkokauppa { margin:12px 0; background:#005364; position:relative; right:5%; }
  .TopLinks.mob a.verkkokauppa:hover { background:#036073; }
  .TopLinks.mob a.verkkokauppa span { display:none; }
  .TopLinks.mob a.verkkokauppa i { display:inline; }
}


/* Main
-----------------------------------------------------------------------------*/

img { max-width:100%; }
.prepend-top { margin-top:1.5em; }
.append-bottom { margin-bottom:1.5em; }

#main { 
  position: relative; 
  padding-bottom: 80px; /** sticky footer */ 
}

#Primary {
  padding:4em 15px;
}

.ImgTitle img { width:auto; height:80px; margin-bottom:0.5em; }

.bg-notice {
  padding:0.75em 1.5em;
  background:#f1f1f1;
  border-left:6px solid #1198d7;
  font-size:0.9em;
}

.ProdIco { max-width:120px; margin-bottom:10px; }

.Hinnasto { font-size:0.85em; background:#f9f9f9; border:1px solid #ddd; border-top:0; }
.Hinnasto > tbody > tr:nth-of-type(2n+1) { background-color: #e9f1f5; }
.Hinnasto th { background:#005364; color:#fff; }
.Hinnasto .btn { margin-bottom:0; padding:6px 12px; }


/* Aside
-----------------------------------------------------------------------------*/


.bg-info {
  padding:0.5em 2em 1.5em;
  background:#f1f1f1;
  border-top:6px solid #1198d7;
}


/* Footer
-----------------------------------------------------------------------------*/

footer { 
  position: relative;
  height: 80px;       /** sticky footer */
  margin-top: -80px;  /** sticky footer */
  clear: both;
  text-align: center;
  background: #1198d7;
  color:#fff;
  font-size:0.8125em;
}

footer ul { list-style:none; margin:0; padding:1em 0em; }
footer li { display:inline; }
footer li a { padding:0.5em 1em; }

footer a,
footer a:hover { color:inherit; }

@media screen and (max-width: 991px) {
  #main { padding-bottom:0; }
  footer { height:auto; margin-top:0px; padding-bottom:2em; }
  footer li { display:block; text-align:center; }
  footer li a { display:block; }
}


/*-----------------------------------------------------------------------------
   Typography
-----------------------------------------------------------------------------*/


/* Body
-----------------------------------------------------------------------------*/

body {
  font-family: 'Open Sans', sans-serif;
  color:#404040;
  font-size:16px;
}

@media screen and (max-width: 991px) {
  body { font-size:15px; }
}

@media screen and (max-width: 767px) {
  body { font-size:14px; } 
}


/* Headers
-----------------------------------------------------------------------------*/

h1, h2, h3, h4, h5, h6 {
  font-family: 'Open Sans', sans-serif;
  color:#1a1a1a;
  letter-spacing:-0.2px;
  margin:0 0 0.7em;
  padding-top:0.3em;
}

h1 { font-weight:300; margin-bottom:0.5em; }
h2 { font-size:26px; }
h3 { font-size:22px; }


/* Links
-----------------------------------------------------------------------------*/

a, a:link {  }

a:visited {  }
a:hover   {  }
a:focus   {  }

a:hover, a:active { outline: 0; }



/*-----------------------------------------------------------------------------
   Buttons
-----------------------------------------------------------------------------*/

.btn {
  background-color: #1198D7;
  padding:0.7em 1.4em;
  margin-bottom:1.5em;
  color:#fff;
  text-transform:uppercase;
  font-weight:700;
  font-size:0.875em;
  border:0;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 4px;
  -webkit-transition: background 0.25s ease;
  -moz-transition: background 0.25s ease;
  -o-transition: background 0.25s ease;
  -ms-transition: background 0.25s ease;
  transition: background 0.25s ease;
}
.btn:hover {
  background:#1ba7e8;
  color:#fff;
}
.btn-secondary { background:#005364; }
.btn-secondary:hover { background:#036073; }

.btn-secondary:focus { color:#ffffff; }


.btn-full {
  width:100%;
  padding:1em;
  font-size:0.95em;
}

.btn-full:focus { color:#ffffff; }


.btn .fa-shopping-cart { margin-right:5px; }



/*-----------------------------------------------------------------------------
   Navigation
-----------------------------------------------------------------------------*/

.MainNav {
  border:0;
  border-top:1px solid #e5e5e5;
  background:#f1f1f1;
  margin-bottom:0;
}

#MainNavigation ul { margin:0; padding:0; list-style:none; line-height:1.3; font-size:16px; }

.MainNavigation { text-align:center; }

.MainNavigation .selected { background-color:#1198d7; color: #ffffff }

.MainNavigation li a {
  background:none;
  color:#404040;
  outline:0;
  text-decoration:none;
}
.MainNavigation li ul {
  background:#fff;
}

@media screen and (min-width: 992px) {
  .MainNav { border-bottom:1px solid #e5e5e5; }
  .MainNavigation li a {
    transition-property: background, color;
    transition-duration: 0.25s;
    transition-timing-function: ease;
  }
  .MainNavigation li ul li a:hover { background-color:#f1f1f1; }
  .MainNavigation > li:hover > a { background-color:#1198d7; color:#fff; }
  .MainNavigation li ul {
    min-width:100%;
    -webkit-transition: opacity 0.25s ease;
    -moz-transition: opacity 0.25s ease;
    -o-transition: opacity 0.25s ease;
    -ms-transition: opacity 0.25s ease;
    transition: opacity 0.25s ease;
  }
}

@media screen and (max-width: 991px) {
  .MainNav { background:none; border-top:0; }
  #MainNavigation { padding:0; margin:0; background:#f1f1f1; border-top:0; }
  #MainNavigation ul { font-size:14px; text-align:left; }
  .MainNavigation > li { border-top:1px solid #e5e5e5; }
  .MainNavigation li a { padding:0.65em 5%; font-size:13px; }
  .MainNavigation > li > a { font-weight:600; }
  .MainNavigation li ul li a:focus { background-color:#f1f1f1; }
  .MainNavigation > li > a:focus { background-color:#1198d7; color:#fff; }
  .MainNavigation li ul { border-top:1px solid #e5e5e5; }
  .MainNavigation li ul li { border-bottom:1px solid #f9f9f9; }
  .MainNavigation li ul li:last-of-type { border-bottom:0; }
  .MainNavigation li ul li a { margin-left:1em; }
}

@media screen and (max-width: 991px) {
  .MainNav .navbar-toggle { right:5%; }
}

.MainNavigation .NavItem {
  display:inline-block;
  vertical-align:top;
  background:url('../images/ico-sprite.png') no-repeat 0 0;
  width:24px;
  height:20px;
  margin-top:1px;
  -webkit-background-size: 20px;
  -moz-background-size: 20px;
  -o-background-size: 20px;
  background-size: 20px;
}
.MainNavigation .NavItem.Doc { background-position:0 -37px; }
.MainNavigation .NavItem.Mobile { background-position:0 -74px; }
.MainNavigation .NavItem.Web { background-position:0 -110px; }

@media screen and (max-width: 991px) {
  .MainNavigation .NavItem {
    width:21px;
    height:17px;
    margin-top:1px;
    -webkit-background-size: 17px;
    -moz-background-size: 17px;
    -o-background-size: 17px;
    background-size: 17px;
  }
  .MainNavigation .NavItem.Doc { background-position:0 -31px; }
  .MainNavigation .NavItem.Mobile { background-position:0 -63px; }
  .MainNavigation .NavItem.Web { background-position:0 -94px; }
}


/*-----------------------------------------------------------------------------
   Modules
-----------------------------------------------------------------------------*/

.embed-container { position: relative; padding-bottom: 75%; height: 0; overflow: hidden; max-width: 100%; }
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


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

.Banner {
  background:url('../images/banner.jpg') no-repeat 50% 0 #1198d7;
  -webkit-background-size: auto 100%;
  -moz-background-size: auto 100%;
  -o-background-size: auto 100%;
  background-size: auto 100%;
  text-align:center;
  color:#fff;
  height:582px;
  position:relative;
  margin-top:-1px;
}

.BannerContent {
  width:100%;
  padding:0 5%;
  position: absolute;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
}

.Banner h1,
.Hero h1 { color:#fff; font-size:3.5em; font-weight:300; max-width:1040px; margin:0 auto 15px; }
.Banner p { font-size:1.375em; max-width:740px; width:80%; margin:0 auto; }
.Banner a {
  display:inline;
  position:absolute;
  bottom:1em;
  left:0;
  right:0;
  color:#fff;
  font-weight:600;
  font-size:1.125em;
  text-transform:uppercase;
  text-decoration:none;
  outline:0;
  -webkit-transition: bottom 0.25s ease;
  -moz-transition: bottom 0.25s ease;
  -o-transition: bottom 0.25s ease;
  -ms-transition: bottom 0.25s ease;
  transition: bottom 0.25s ease;
}
.Banner a i { display:block; text-align:center; font-size:1.77777778em; }

.Banner a:hover { bottom:1.4em; }

@media screen and (max-width: 1200px) {
  .Banner { height:480px; }
  .Banner h1,
  .Hero h1 { font-size:3em; }
  .Banner p { font-size:1.2em; }
}

@media screen and (max-width: 991px) {
  .Banner { height:380px; }
  .Banner h1,
  .Hero h1 { font-size:2.5em; }
  .Banner p { font-size:1.1em; }
  .Banner a { font-size:1em; }
}

@media screen and (max-width: 767px) {
  .BannerContent {
    padding:3em 15px 2em;
    position:static;
    transform:none;
  }
  .Banner { height:auto; }
  .Banner h1,
  .Hero h1 { font-size:2em; }
  .Banner p { font-size:1em; }
  .Banner a { position:static; display:block; margin-bottom:1em; }
}

@media screen and (max-width: 480px) {
  .Banner h1,
  .Hero h1 { font-size:1.7em; }
  .Banner p { width:100%; }
}


/* Featured
-----------------------------------------------------------------------------*/

.FeaturedHeading { font-size:1.25em; font-weight:400; line-height:1.5; width:80%; margin:0 auto 3em;  }
.ModFeatured.Titled h3 { margin:0; font-size:1.5em; }
.ModFeatured h3 a {
  display:block;
  background:#1198d7;
  color:#fff;
  text-decoration: none;
  font-weight:400;
  text-align:center;
  padding:0.83333333em 0;
  margin:0;
  -webkit-transition: background 0.25s ease;
  -moz-transition: background 0.25s ease;
  -o-transition: background 0.25s ease;
  -ms-transition: background 0.25s ease;
  transition: background 0.25s ease;
}
.ModFeatured h3 a:hover {
  background:#1ba7e8;
}
.ModFeatured-inner {
  padding:2em;
  border:1px solid #eaeaea;
}
.Titled .ModFeatured-inner {
  border-top:0;
  font-size:0.9em;
}
.WithBg .ModFeatured-inner { background:#fff; margin-bottom:1.5em; }
.ModFeatured .lead {
  font-size:1.6em;
}

.ModFeatured .lead_small {
  font-size:0.66em;
}


@media screen and (max-width: 991px) {
  .ModFeatured-inner { margin-bottom:2.5em; }
  .ModFeatured-inner.last { margin-bottom:0; }
}


/* Hero
-----------------------------------------------------------------------------*/

.Hero {
  padding:3em 0 4em;
  border-bottom:1px solid #e5e5e5;
  background:url('../images/sky.jpg') no-repeat 50% 0 #1198d7;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  position:relative;
  margin-top:-1px;
}
.Hero .FeaturedHeading {
  color:#fff;
}
.Hero .ModFeatured-inner {
  border:0;
  border-top:6px solid #1381b4;
}
.Hero .btn.Buy { margin-bottom:0; }


/* Content Bottom
-----------------------------------------------------------------------------*/

.ContentBottom {
  background:#f5f5f5;
  padding:4em 15px;
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
}

.kaannin .ModBottom-inner,
.Ad .ModBottom-inner { padding-left:2em;  }

.kokeile-kaannin { padding-right:10px; }

.ModBottom-inner h3 {
  font-weight:300;
  font-size:1.875em;
  color:#1a1a1a;
}

.service_buttonrow { text-align:left; margin:0.5em 0; z-index:2; position:relative; }
.service_buttonrow .btn {
  margin-right:1.2em;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  text-transform:none;
  padding:0.5em 1.4em;
}

.service_buttonrow .elems {
  margin-left: 0em;
  vertical-align: 40%;
  white-space: nowrap;
}

.audio_elemrow { text-align:left; margin:0em; z-index:2; position:relative; }

.audio_elemrow .statusfield {
  vertical-align: middle;
  font-size: 0.9em;
  padding-left: 2px;
}

.demo_buttonrow { text-align:center; margin:-0.8em 0; z-index:2; position:relative; }
.demo_buttonrow .btn {
  margin-bottom:0;
  -moz-border-radius: 5px 0 0 5px;
  -webkit-border-radius: 5px 0 0 5px;
  border-radius: 5px 0 0 5px;
  text-transform:none;
  padding:0.5em 1.4em;
}
.demo_buttonrow .btn-secondary {
  -moz-border-radius: 0 5px 5px 0;
  -webkit-border-radius: 0 5px 5px 0;
  border-radius: 0 5px 5px 0;
}
iframe.resultframe {
  max-width:100%;
  width:100%;
  height:120px;
  border: 1px solid #E5E5E5;
  background:#fafafa;
  overflow:hidden;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
}

iframe.service_resultframe {
  max-width:100%;
  width:100%;
  height:170px;
  border: 1px solid #E5E5E5;
  background:#fafafa;
  overflow:hidden;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  padding:0px;
}

iframe.techdemo_resultframe {
  max-width:100%;
  width:100%;
  height:0px;
  border: 0px;
  background:#ffffff;
  overflow:hidden;
  padding:0px;
}

iframe.licensetext {
  max-width:100%;
  width:100%;
  height:260px;
  border: 1px solid #E5E5E5;
  background:#fafafa;
  overflow:hidden;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
}


@media screen and (max-width: 991px) {
  .ContentBottom.Kokeile { text-align:center; }
  .ModBottom { margin-bottom:2.5em; }
  .ModBottom.last { margin-bottom:0; }
  .kaannin .ModBottom-inner,
  .Ad .ModBottom-inner { padding-left:0; }
}


/* Contact Bottom
-----------------------------------------------------------------------------*/

.ContactBottom { font-size:0.875em; padding:4em 15px; }

@media screen and (min-width: 768px) {
  .ContactBottom .Second p {margin-top:37px;}
}

@media screen and (max-width: 767px) {
  .ContactBottom { text-align:center; }
}


/*-----------------------------------------------------------------------------
   Forms
-----------------------------------------------------------------------------*/

input, textarea {
  width: 100%;
  background-color: #FFF;
  border: 1px solid #E5E5E5;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  padding:0 8px;
}

textarea { padding:5px 8px; }

textarea.service_textarea {
  height:170px;
  resize:none;
  font-size: 16px;
  padding: 0.4em 0.5em;
}

textarea.trresult {
  width: 100%;
  height: 170px;
  font-size: 16px;
  padding: 0.4em 0.5em;
  resize:none;
  border-width:0px;
}

div.trresult { 
	font-size: 16px;
	padding: 6px 8px; 
}


textarea.demo_textarea {
  resize:none;
  height:120px;
  font-size: 16px;
}


div.demoresult { 
	font-size: 16px;
	padding: 16px 8px 2px 8px; 
}

div.demoresult_small { 
	font-size: 15px;
	padding: 16px 8px 2px 8px; 
}

textarea.techdemo_textarea {
  height:100px;
  resize:none;
  font-size: 16px;
  padding: 0.4em 0.5em;
}

div.techdemo_result { 
	font-size: 16px;
	padding: 0px; 
}

.techdemo_small { 
	font-size: 14px;
}


.file-control {
  display: block;
  width: 100%;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
       -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
          transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

select.feedback {
	width: auto;
	margin-top: 6px;
}


/*-----------------------------------------------------------------------------
   IE overrides
-----------------------------------------------------------------------------*/


/* Sticky footer fix for
-----------------------------------------------------------------------------*/

.lte-ie7 #wrap {display:table; }


/* Form fix for lte IE8
-----------------------------------------------------------------------------*/

.lt-ie8 input, .lt-ie8 textarea { width: 94%; padding: 0 2%;}
.lt-ie8 textarea { width: 93%; }


/*-----------------------------------------------------------------------------
  Misc
-----------------------------------------------------------------------------*/

.InstallInfo li { margin-top: 0.3em; }

.ProductInfo li { margin-top: 0.2em; }

.DownloadLinks li { margin-top: 0.8em; }

.speaker
{
	border-width: 1px;
	border-style: solid;
	border-color: #FFFFFF;
}

.settings_label 
{
	display: inline;
	float: left;
	margin: 0px;
	padding: 0px;
	font-weight: normal;
	vertical-align: middle;
	text-align: left;
}

p.textarea_title {
  margin: 0em 0em 0.5em 0em;
}

.provider-logo {
	padding: 0px 0px 8px 0px;
}