/*
  Bootstrap Carousel Fade Transition (for Bootstrap 3.3.x)
  CSS from:       http://codepen.io/transportedman/pen/NPWRGq
  and:            http://stackoverflow.com/questions/18548731/bootstrap-3-carousel-fading-to-new-slide-instead-of-sliding-to-new-slide
  Inspired from:  http://codepen.io/Rowno/pen/Afykb 
*/

.divSuomi div label{
    display:block;
    text-align: left;
}

 .divSuomi div a{
    float: left;
    margin-left:0px !important;
    margin-right:20px !important;
}
.divEtusivu ul li a{
    background-color: #618db6;
    color: #fff;
    cursor: pointer;
    display: block;
    padding: 11px;
    text-decoration: none;
    width: 200px;
}
.divLomake p{
    color: #5f5f5f;
    margin-top: 10px;
    padding-left: 16px;
    padding-bottom: 7px;
    
}
.tab-content > .active{
    background-color: #ffffff;
    border: 1px solid #ddd;
    padding: 10px 10px 10px 20px;
}
.nav-tabs > li > a{
    background-color: #cfcfcf;
    color: #5f5f5f;
    font-size: 14px;
    height: 55px;
    text-decoration: none;
}
.tab-content h3{
    color: #5f5f5f;
} 
.ulLomake{
    margin:0px;
    padding:0px;
}
.ulLomake li{
    list-style-type: none;
    margin-top:10px;
    font-size: 14px;
}
.liRadio{
    padding-left:255px;
    color:#5f5f5f;
}
.liRadio input{
    margin-right: 5px;
}
.ulLomake li label{
    color: #5f5f5f;
    height: 33px;
    width: 250px;
}
.ulLomake li input[type="text"],.ulLomake li select{
    border: 1px solid #5f5f5f;
    border-radius: 10px;
    color: #5f5f5f;
    padding: 5px 10px;
    vertical-align: top;

}
.divLocations{
      border: 1px solid #f1f1f1;
    display: inline-block;
    height: 401px;
    margin: 5px;
    padding: 10px;
    vertical-align: top;
    width: 200px;
}
.btn-primary {
    background-color: #3e8fba;
    border-color: none;
    color: #fff !important;
    text-decoration: none !important;
    height: 32px;
}
#liitteet div label{
    color: #5f5f5f;
}
.divSuomi div a{
     cursor: pointer;
    margin: 5px;
    text-decoration: none;
}
.divSuomi div a img{
    height:20px !important;
    border: 1px solid #DADADA !important;
}
.divLomake h1{
    color: #5f5f5f;
    font-size: 24px;
    margin-bottom: 0 !important;
    padding-bottom: 0;
    padding-left: 15px;
    padding-top: 0;
    text-align: left;
}

.carousel-fade .carousel-inner .item {
  opacity: 0;
  transition-property: opacity;
}

.carousel-fade .carousel-inner .active {
  opacity: 1;
}

.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  opacity: 0;
  z-index: 1;
}

.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}

.carousel-fade .carousel-control {
  z-index: 2;
}
.divBannertext{
    background: rgba(0, 0, 0, 0) url("../layout_images/haku-viiva.png") no-repeat scroll 50% 100%;
    color: #fff;
    font-size: 32px;
    height: 122px;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    text-align: center;
    text-transform: uppercase;
    top: 23%;
    width: 100%;
  
}

.spanHaku{
        background: transparent url("../layout_images/haku.png") no-repeat scroll left top;
    display: block;  
    height: 20px;
    width: 20px;
}
.btn-default{
    background-color: transparent !important;
    border: 0px solid !important;
}

.divLomake{
background-color: #f4f4f4;
    border-radius: 10px;
    left: 0;
    margin: 20px auto 0;
    max-width: 760px;
    min-height: 26px;
    padding: 10px;
    position: absolute;
    right: 0;
    width: 100%;
}

/*
  WHAT IS NEW IN 3.3: "Added transforms to improve carousel performance in modern browsers."
  Need to override the 3.3 new styles for modern browsers & apply opacity
*/
@media all and (transform-3d), (-webkit-transform-3d) {
    .carousel-fade .carousel-inner > .item.next,
    .carousel-fade .carousel-inner > .item.active.right {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.prev,
    .carousel-fade .carousel-inner > .item.active.left {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.next.left,
    .carousel-fade .carousel-inner > .item.prev.right,
    .carousel-fade .carousel-inner > .item.active {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
}

.navbar-toggle{
    background-color: #000;
    margin-top: 0px; 
}
.divRadio{
    display:inline-block;
    margin-left: 20px;
    height: 40px;
}
.divRadio label{
    margin-right: 20px;
}

@font-face {
  font-family: 'AllerDisplay';
  src: url('fontti/AllerDisplay.ttf')  format('truetype'); /* Safari, Android, iOS */
 
}

body {
	font-size: 16px;
	color: #000;
        margin: 0px;
	background: url('../layout_images/bg.jpg') repeat-x center top #fff;
        font-family: 'Colaborate Light', arial;
        min-width: 425px;
}

.inputt{
    border: 1px solid #A7A7A7;
    padding: 5px;
    border-radius: 5px;
    width: 100px;
}

.submitt{
    background: url('../layout_images/search.png') no-repeat;
    width: 39px;
    border:0px;
    height: 39px;
}
.main_heading{
    clear:both;
    margin-top: 20px;
}

.divTiedote,.divTiedote:hover{
    background-color: #f5f5f5;
    display: block;
    height: 100px;
    margin-top: 10px;
    text-align: center;
}

.ptiedote{
    color: #000;
    float: left;
    font-size: 24px;
    height: 100%;
    padding-left: 20px;
    padding-top: 20px;
    text-align: left;
    width: 88%;
}
.atiedote a:hover{
    color: #fff !important;
    background-color: #07ADD5;
}

.atiedote a{
    color: #fff !important;
    display: block;
    font-size: 18px;
    height: 100%;
    padding-top: 35px;
}

.atiedote{
    background-color:#3E8FBA;
    float: left;
    width: 12%; 
    height: 100%;
}

.divTiedote a h2{
    padding-bottom:10px;
}

.navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .open > a:hover, .navbar-inverse .navbar-nav > .open > a:focus{
    background: none;
    color: #fff;
    padding-bottom:10px;
}
.dropdown a{
     text-transform: uppercase;
     font-family: 'Colaborate';
     font-size: 14px;
     padding: 12px 5px !important;
}
.dropdown a:hover{
     color:#F3E500 !important;
     background: url("../layout_images/hover.gif") repeat scroll 0 0 rgba(0, 0, 0, 0);
}
.dropdown-menu{
    background-color: #fff;
    padding:0px !important;

}
.dropdown-menu li{
    border-bottom: 2px solid #fff;
}
.dropdown-menu li a{
    text-transform: uppercase;
    color: #000;
    font-size: 14px;
    text-decoration: none;
    padding: 5px 5px 5px 20px !important;
    
}
.dropdown-menu li a:hover{
    background-color: #A0E609;
    color:#fff !important;
}
#divYhttiedot{
   background-color: #fff;
    left: 120px;
    padding: 30px 30px 10px;
    position: absolute;
    top: 40px;
    width: 324px;
    z-index: 9999;
     -khtml-opacity:.80; 
 -moz-opacity:.80; 
 -ms-filter:"alpha(opacity=80)";
  filter:alpha(opacity=80);
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.8);
  opacity:.80; 
}
.divYlaosa{
    height: 120px;
    padding-left: 100px;
}

.viiva_vasen{
    border-left: 1px solid #edebec;
    height: 70% !important;
    margin-top: 15px;
}
.viiva_vasen div{
    margin-top: 20px !important;
}
.viiva_vasen div label{
    float:left;
    margin-bottom:0px;
  
}
.divYlaosa .row .col-sm-5, .divYlaosa .row .col-sm-3,.divYlaosa .row .col-sm-4,.divYlaosa .row{
    height: 100%;
}
.divYlaosa .row .col-sm-4 div label, .divYlaosa .row .col-sm-3 div label{
    color: #5f5f5f;
}

.divYlaosa .row .col-sm-4 div label{
    text-align: left;
    font-weight: normal;
    margin-left: 10px;
    text-transform: uppercase;
    font-size: 15px;
}
.divYlaosa .row .col-sm-3 div,.divYlaosa .row .col-sm-4 div{
   margin-top: 35px;
    padding-right: 30px;
    text-align: right;
}

.labelSmall{
    font-size: 12px;
}

#divYhttiedot div p{
    text-align: right;
}
.business-header{
    max-height: 600px;
    overflow: hidden;
    width: 100%;
     margin-top: 295px;
}
.navbar{
    margin-bottom:0px;
}

#bs-example-navbar-collapse-2{
    float:right;
}
.divNav{
     background: url('../layout_images/menubar.jpg') repeat-x;
     min-height: 63px !important;
}
.col-sm-12{
    padding:0px !important;
}
.divTapahtumat{
    width: 100%;
    background-color: #BCE4F6;
    border-radius: 10px;
    padding: 40px 20px 20px;
    margin-top: 20px;
    margin-bottom: 70px;
}
.divAjankohtaista{
    width: 100%;
    background-color: #EBF9E8;
    border-radius: 10px;
    padding: 40px 20px 20px;
}
.divAjankohtaista h1, .divTapahtumat h1{
    background-color: #006eb9;
    border-radius: 10px;
    color: #fff;
    font-family: "Calibri";
    font-size: 22px;
    font-weight: bold;
    margin-left: 20px;
    padding: 10px;
    text-align: center;
    text-transform: uppercase;
    width: 200px;
}
.divAjankohtaistalink, .divTapahtumalink {
    width: 100%;
    height: 39px; 
    text-align: right;
   
}
.divAjankohtaistalink a, .divTapahtumalink a{
    width: 39px;
    height: 39px; 
    background: url('../layout_images/luelisaa.png') no-repeat;
    display:block;    
    float:right;
    
}
.ulAjankohtaista,.ulTapahtumat, .liRivi ul,.ulHenkilosto{
    margin:0px;
    padding:0px;
}

.divLyhytsisalto{
    height: 173px;
}
.liRivi{
    display: inline-block;
    list-style-type: none;
    margin-left: 20px;
    margin-top: 30px;
    max-width: 330px;
    vertical-align: top;
    width: 100%;
}

.liRivi ul li{
    display:inline-block;
    vertical-align: top;
    max-width: 275px;
}
.liKuva{
    width: 150px;
}
.liKuva img{
    width: 150px;
    border-radius: 10px;
    max-height: 225px;
}
.liLyhytsisalto{
  width: 150px;
  margin-left: 20px;
  font-size: 12px;
}
.ulHenkilosto .liRivi ul .liKuva{
    margin-right: 20px;
}
.ulHenkilosto .liRivi{
    display: block !important;
    max-width: none !important;
}
.ulHenkilosto .liRivi ul{
 background-color: #bce4f6;
    border-radius: 10px;
    display: inline-block;
    height: 265px;
    margin-bottom: 20px;
    margin-left: 20px;
    padding: 20px;
    position: relative;
    vertical-align: top;
    width: 44%;
} 

.liPainike{
   left: 427px;
    position: absolute;
    top: 205px;
}
.overlay {
 background: rgba(0, 0, 0, 0.7) none repeat scroll 0 0;
    bottom: 0;
    height: 100%;
    left: 0;
    opacity: 0;
    position: fixed;
    right: 0;
    top: 0;
    transition: opacity 500ms ease 0s;
    visibility: hidden;
    width: 100% !important;
    z-index: 9999;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
   background: #fff none repeat scroll 0 0;
    border-radius: 5px;
    margin: 200px auto;
    padding: 20px;
    position: relative;
    transition: all 5s ease-in-out 0s;
    width: 30%;
}

.popup h2 {
  margin-top: 0;
  color: #333;
  font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
  position: absolute;
  top: 0px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.popup .close:hover {
  color: orange;
}
.popup .content {
  max-height: 30%;
  overflow: auto;
}

.aNav{
    font-family: "Calibri";
    font-size: 24px;
    text-transform: capitalize;
    text-decoration: none !important;
    color: #fff !important;
}
.navbar-nav{
    margin-top: 9px;
}
.divLogo{
    float:left;
    margin-top: 27px !important;
}
.navbar{
    background-color: #fff;
    border: 0 none;
    height: 162px;
}

#phone{
    width: 218px;
    height: 51px;
    float:right;
    margin-right: 20px;
    background: url('../layout_images/puhelinnumero.png') no-repeat;
}


#logo{
    float:left;
    margin-right: 20px;
}

#logo a img{
    margin-top: 50px;
    margin-left: 20px;
}

.aLuelink{
    background: url('../layout_images/luelisaa.png') no-repeat;
    display:block;
    width: 70px;
    height: 25px;
    font-size: 0px;
    
}

#background{
    width: 1024px;
    margin: 0 auto;
}

.ulPalvelut{
  
    padding:0px;
      display: block;
    height: 200px;
    margin: 0 0 20px;
}

.ulPalvelut li{
    list-style-type: none;
    float:left;
    margin-left: 60px;
}

.sisalto, .sisalto table,  .sisalto td, td {
	font-family: 'Colaborate Light', "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000;
	line-height: 14px;
	font-weight:medium;
}
#palauteformi{
    max-width: 685px;
}

header img { 
	display: block; 
	margin-left: auto; 
	margin-right: auto;
}

.news_heading {
	text-transform: uppercase;
	color: #000;
	padding-top: 20px;
}

#container {
	background: url('../layout_images/contentbg.png') repeat-y;
	padding-bottom: 20px;
	padding-top: 20px;
}

#content {
	background-color: #ffffcc;
}

#content div {
	/*min-height: 400px;*/
}

#content_left {
	/*background-color: #c2d6cc;*/
	padding-left: 10px;
}

#content_left ul {
	list-style: none;
	padding-left: 0px;
}

#content_left ul li a{
	font-size:14px;  
	font-weight:bold;
	text-decoration:none; 
	color:#000; 
	letter-spacing:0px; 
        margin-bottom:5px !important; 
	border-right:solid 0px #c5c5c5; 
	border-left:solid 0px #fff;
	-moz-border-radius: 12px;
	-webkit-border-radius: 12px;
        display:block;
}

#content_left ul li a:hover, #content_left ul li.sfHover a { color:#f5cf74; text-decoration:none; -moz-border-radius: 12px;
	-webkit-border-radius: 12px;
}
#content_left ul li:hover, #content_left ul li.sfHover {
	color:#f5cf74; text-decoration:none; -moz-border-radius: 12px;
	-webkit-border-radius: 12px;
}

#content_center {
	padding-left: 20px;
	padding-right: 20px;
	margin-left: 0px;
	margin-right: 0px;	
	width: 985px;
        min-height: 600px;
}

.ulKuvagalleria{
    margin:0px;
    padding:0px;
}
.ulKuvagalleria li img{
    width: auto;
    height: 160px;
}
.ulKuvagalleria li{
    list-style-type: none;
    display: inline-block;
    margin-left: 20px;
    margin-bottom: 20px;
    vertical-align: top;
}

#content_right {
	padding-left: 10px;
}
.ulNavigationFooter{
    background: rgba(0, 0, 0, 0) url("../layout_images/bullet2.gif") no-repeat scroll 0 8px;
    margin: 40px 0 0;
    min-height: 100px;
    padding-left: 20px;
}
.ulNavigationFooterSome{
    float: right;
    padding: 0;
}

.ulNavigationFooterSome li{
    list-style-type: none;
    float:left;
    margin-left:10px;
}

.ulNavigationFooter li{
    list-style-type: none;
    height: 16px;
}
.ulNavigationFooter li a, .ulNavigationFooter li p{
    color:#9B9B99;
    font-size: 14px;
    padding:4px;
}
.ulUppercase li a{
    text-transform: uppercase;
}
.ulUppercase li a:hover{
    color:#000 !important;
}

footer {
	background-color:#E7E7E7;
	display: block; 
	margin-left: auto; 
	margin-right: auto;
	width: 100%;	
        min-height: 250px;
        height: auto;
        margin-top: -30px;
}
.divFooter{
    margin-left: 70px;
    margin-top: 70px;
    max-width: 997px;
}
.liOtsikko{
background: rgba(0, 0, 0, 0) url("../layout_images/bullet.gif") no-repeat scroll left 50%;
    font-weight: bold;

}

.pFooter{
    color:#fff;
    font-size: 16px;
    padding-top: 10px;
    padding-left: 80px;
}

.divUutiset{
    height: 40px;
    margin-top: 20px;
    text-align: right;
}
.divFooter div div ul li{
    list-style-type: none; 
    text-transform: uppercase;
    color:#505050;
    line-height: 18px;
    font-size: 13px;
    padding-left: 15px;
}


footer a:link, a:visited {
	text-decoration:none;
}
footer a:hover {
	text-decoration:underline;
}

footer p  {
	padding-bottom:10px;
	font-size:12px;
	line-height: 16px;
}

footer p .bold {
	font-weight: 800;
}

#footer_left {
	margin-top: 40px;
	margin-left: 20px;
}

#footer_left p a:link, p a:visited {
	color:#1F371F;
	line-height:normal;
	font-weight:bold;
	text-decoration:underline;

}
#footer_left p a:hover {
	color:#000;
	font-weight:bold;
	text-decoration:underline;
	line-height:normal;	
}
.error{
    color: red !important;
    font-size: 10px;
    margin-left: 10px;
    width: auto !important
}

a:link, a:visited {
	color:#006FBA;
	line-height:normal;
	text-decoration:underline;

}
a:hover,p a:hover {
	color:#000 !important;
	text-decoration:underline;
	line-height:normal;	
}
.divNostot{
    border-bottom: 1px solid #ececec;
    border-top: 1px solid #ececec;
    margin-bottom: 40px;
    margin-top: 40px;
    padding-bottom: 60px;
    padding-top: 60px;
}

.divNosto img{
    max-width: 274px;
}
.divNosto h2{
     margin-bottom: 10px;
    margin-top: 10px;
    padding: 0;
}
.divNosto a, .divUutiset a{
    background-color: #3E8FBA;
    font-size: 18px;
    color:#fff;
    padding: 10px;
    text-decoration: none;
    text-transform: uppercase;
}

.divNosto a:hover, .divUutiset a:hover{
    text-decoration: none;
    background-color: #07ADD5;
    color: #fff !important;
}

.viiva{
    border-top: 1px solid #ECECEC;
    padding-top: 30px;
}
.viiva_sisalto{
       border-top: 1px solid #ececec;
    display: block;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 20px;
    margin-top: 20px;
    padding-top: 10px;
}

.sivu{
     background-color: #fff;
    margin-top: -60px;
    position: relative;
    max-width: 960px;
    z-index: 1;
}


h1, h2, h3, h4 {
font: 20px/22px;
line-height:26px;
margin:0 0 0 0;	padding:0 0 0 0;
padding-bottom:20px;
padding-top:5px;
 color: #505050;
 text-transform: uppercase;
}
.h2Iso{
    font-size: 32px;
    font-weight: bold;
}

h1 {
    text-transform: uppercase;
    color: #505050;
    display: block;
    font-size: 22px;
    font-weight: bold;
    letter-spacing: -1px;
    padding: 10px 40px;
    text-align: center;
    width: auto;
    margin-bottom: 20px !important;

}

h2 {
	font-size: 26px;
}

h3 {
	font-size:18px;
	line-height:20px;
	margin:0 0 0 0;	padding:0 0 0 0;
	padding-bottom:10px;
	padding-top:10px;
	font-weight:normal;
}

h4 {
	font-size:16px;
	line-height:18px;
	margin:0 0 0 0;	padding:0 0 0 0;
	padding-top:10px;
	padding-bottom:10px;
	font-weight:normal;
}

h5 {
	font-weight: 800;
	color: #000000;
}

h6 {
	font-weight: 800;
	color: #000000;
}

table {
	/*table-layout:fixed;*/
}
.navbar-toggle .icon-bar{
    padding:0px !important;
}

p, span, td {
    color: #505050;
    font-size: 14px !important;
    line-height: 20px;
    margin: 0;
    padding: 0 0 20px;
}


hr {
	color: #e5e5e5;
	height: 1px;
	border-style: solid;
	border-width: 1px 0 0 0;

}
table
	{
	width: 100%;
	border-collapse: collapse;
	color: black;
	font: 10pt verdana, arial;
	
	}

tr.subhead
	{
	background-color: #cccccc;
	}

th
	{
	padding: 0 3%;
	}

th.alt
	{
	background-color: black;
	color: white;
	padding: 3% 3% 2%;
	}

td
	{
	padding: 3px 3%;
	}

tr.alt
	{
	background-color: #eeeeee;
	}

h1
	{
	font: 32pt 'Colaborate Light', arial;
	margin: 0;
	}

h2
	{
        font: bold 18pt "Colaborate Light",arial;
	margin: 0;
        font-weight: bold;
	}

h3
	{
	font: 12pt 'Colaborate Light', arial;
	margin: 0;
	}

th a
	{
	color: #fff;
	font: 8pt 'Colaborate Light', arial;
	}

a
	{
	color: #fff;
	text-decoration: none;
	}

a:hover
	{
	color: #fff;
	text-decoration: underline;
	}

div.outer
	{
	width: 90%;
	margin: 15%;
	}

table.viewmenu td
	{
	background-color: #006699;
	color: white;
	padding: 0 5%;
	}

table.viewmenu td.end
	{
	padding: 0;
	}
        
        .valittu1,.valittu2,.valittu3{
            color:green !important;
        }

table.viewmenu a
	{
	color: white;
	font: 8pt verdana, arial;
	}

table.viewmenu a:hover
	{
	color: white;
	font: 8pt verdana, arial;
	}

a.tinylink
	{
	color: #00008b;
	font: 8pt verdana, arial;
	text-decoration: underline;
	}

a.link
	{
	color: #00008b;
	text-decoration: underline;
	}

div.buffer
	{
	padding-top: 7%;
	padding-bottom: 17%;
	}

.small
	{
	font: 8pt verdana, arial;
	}

table td
	{
	/*padding-right: 20%;*/
	}

table td.nopad
	{
	padding-right: 5%;
	}

/*cookie popup*/
/* Popup container */
.cookiepopup {
    position: relative;
    display: block;
    cursor: pointer;
}

/* The actual popup (appears on top) */
.cookiepopup .popuptext {
    visibility: hidden;
    width: 100%;
    background-color: #555;
    color: #fff;
    text-align: center;
    padding: 20px 0;
    position: fixed;
    z-index: 1;
    bottom: 0;
    font-family: 'Colaborate Light', arial;
    font-size: 23px;
}
.popuptext a{
    color: #fff !important;
    text-decoration: underline !important;
}
.popuptext button{
    color: #000;
    padding:0 20px;
   
}

/* Popup arrow */
.cookiepopup .popuptext::after {
    content: "";
    position: fixed;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.cookiepopup .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
     width: 100%;
}
.cookiepopup .hide {
      visibility: hidden;
    -webkit-animation: fadeOut 1s;
    animation: fadeOut 1s;
     width: 100%;
}    

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
} 

@-webkit-keyframes fadeOut {
    from {opacity: 1;}
    to {opacity: 0;}
}

@keyframes fadeOut {
    from {opacity: 1;}
    to {opacity:0 ;}
}