/**
 * @file
 *
 * WYS public web main CSS
 *
 * © Web Your Services Oy
 */

/*
 * Layout
 */

body {
  font-family: Calibri, Arial, sans-serif;
}

.main {
  transition: margin-left .5s;
  padding: 20px;
  text-align: center;
}

.intro { /* Intro */
  padding: 20px;
  text-align: center;
}
.intro img {
  max-width: 25vw;
  max-height: 100px;
}

.section { /* Generic section */
  margin: auto;
  max-width: 60vw;
  text-align: left;
  vertical-align: top;
}
@media screen and (max-width: 1024px) { /* Mobile section */
  .section {
    max-width: 100%;
  }
}

a { /* Links */
  color: #3A6983;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/*
 * Elements
 */

h2 {
  border-bottom: 1px solid #aaa;
}

.map {
  border: 1px solid #aaa;
  margin: 20px 0px 10px 0px;
  width: 60vw;
}

.swiper-container { /* Swiper */
  height: 300px;
  width: 60vw;
}
@media screen and (max-width: 1024px) { /* Mobile swiper */
  .swiper-container {
    width: 100%;
  }
}

.swiper-slide {
	background-color: #fff;
}
.swiper-slide-content {
  padding: 20px 55px 0px 55px;
}
.swiper-slide h3 {
  margin-top: 0px;
}

.swiper-slide .icon {
	color: #aaa;
	font-size: 100px;
	float: right;
	padding: 10px;
	text-align: center;
}
@media screen and (max-width: 1024px) { /* Mobile */
  .swiper-slide .icon {
		display: none;
	}
}

/* Statuses */

.success {
  color: #009900;
  font-size: bold;
}
.error {
  color: #ff0000;
  font-size: bold;
}


/* Message */

.message {
  margin-bottom: 10px;
  position: fixed;
  bottom: 5px;
  right: 5px;
}

.message .ui-state-highlight {
  color: #ff6600;
}
body .message .ui-state-highlight {
  background: #FFE4D4 none;
  border-color: #ff6600;
}

/* Item list */

.items {
  font-size: 150%;
}
.items .item {
  display: inline-block;
  padding-bottom: 15px;
  padding-right: 15px;
}
.items .item img {
  max-height: 20px;
  line-height: 0px;
}
.items .item a:hover {
  text-decoration: none;
}
.items .item a:hover .text {
  text-decoration: underline;
}

.items .sub { /* Items subgroup */
  border: 0px none;
  border-bottom: 1px solid #ddd;
  margin: 5px 0px 15px 0px;
  padding: 0px;
}

/*
 * Menu
 */

.open a { /* Opener */

  color: #818181;
  font-size: 36px;
  font-weight: bold;
  text-decoration: none;
  transition: 0.3s;

  left: 25px;
  position: fixed;
	top: 25px;

  z-index: 98;

}
.open a:hover {
  color: #3A6983;
}

.menu {

  background-color: #3A6983;
  height: 100%;
  margin-left: -200px;
  overflow-x: hidden;
  padding-top: 50px;
  transition: 0.5s;
  width: 200px;

  left: 0;
  position: fixed;
  top: 0;
  z-index: 99;

}

.menu a { /* Links */

  color: #aaa;
  text-decoration: none;
  font-size: 25px;
  padding: 8px 8px 8px 15px;
  text-align: center;

	display: block;

}
.menu a:hover {
  color: #fff;
}

.menu .close {

  font-size: 36px;

	position: absolute;
  top: 0;
  right: 10px;

}

body.navigating #menu { /* Opened menu */
  /*width: 200px;*/
  margin-left: 0px;
}
/*body.navigating #main {
  margin-left: 200px;
}*/

@media screen and (max-height: 450px) { /* Low height menu */
  .menu {
    padding-top: 15px;
  }
  .menu a {
    font-size: 18px;
  }
}
@media screen and (max-width: 1024px) { /* Mobile menu */
  .menu {
    position: fixed;
  }
}
@media screen and (max-width: 1024px) { /* Mobile when navigating */
  body.navigating #main {
    margin-left: 0px !important;
  }
}

/* UI */

body .ui-widget,
body .ui-widget input,
body .ui-widget button {
  font-family: Arial, Verdana, FreeSans, sans-serif !important;
  font-size: 12pt !important;
}

/*
 * Footer
 */

.footer {
  border-top: 1px solid #aaa;
  margin: 20px auto 10px auto;
  max-width: 60vw;
  padding-top: 5px;
  white-space: nowrap;
}

.footer .copyright {
  color: #848484;
  float: left;
}

.footer .details {
  color: #848484;
  float: right;
}

/* Fieldsets XXX DEPRECATED WHEN CALC REMOVED */
fieldset {
  border: 1px solid #999;
  margin: 5px 0px 15px 0px;
  padding: 10px 15px;
}
fieldset fieldset {
  background-color: #eee;
  border: 1px solid #ccc;
}
fieldset fieldset legend {
  background-color: #eee;
  border: 1px solid #ccc;
  border-bottom: 0px none;
  padding: 2px 5px;
  margin: 15px 0px 0px -11px;
}
fieldset.results.disabled {
  opacity: 0.2;
}
fieldset.results ul {
  list-style-type: none;
  padding-left: 25px;
}
fieldset.disclaimer {
  color: #666;
  font-size: 8pt;
}
fieldset.settings fieldset .item {
  display: inline-block;
}
fieldset.settings fieldset label {
  display: inline-block;
}
fieldset.settings fieldset select,
fieldset.settings fieldset input {
  display: inline-block;
  margin-right: 15px;
}
fieldset.settings fieldset .item.checkbox {
  margin-right: 15px;
}
fieldset.settings fieldset .item.checkbox input {
  margin-right: 5px;
}

/*
 * Print
 */

@media print {

  /* DEPRECATED BELOW */

  .info,
  i.fa-external-link,
  input[type=submit],
  button,
  .message,
  .disclaimer {
    display: none !important;
  }
  .settings select {
    border: 0px none;
  }
  .settings fieldset .item {
    display: block !important;
    /*margin-bottom: 10px;*/
    margin-left: 15px;
  }
  .settings.lanes {
    page-break-after: always;
  }
  fieldset {
    border: 0px none !important;
    padding: 0px;
  }
  fieldset > legend {
    display: block;
    margin: 15px 0px 10px 0px;
  }
  fieldset fieldset legend {
    border: 0px none !important;
    display: block;
    font-weight: bold;
    padding: 0px;
    margin: 15px 0px 10px 0px;
  }

}