﻿
/*---------------------
Start page
---------------------*/
#start-slideshow            {width:100%; margin:0 auto;}
.flexslider                 {overflow:hidden; width:100%; margin:0 auto !important; min-height:500px; max-height:100%;}
.flexslider .slides li      {background-size:cover; background-position:center; height:auto !important; line-height:unset !important; padding-bottom:37.44%; overflow: visible !important; }
.flexslider .slides li a    {display:block; height:100%; width:100%;}

.start-text                 {background-color:#ffffff; width:100%;}
.start-text .inner          {min-height:100px; width:60%; margin:0 auto; text-align:center;}

#start-content                      {width:960px; height:225px; margin:10px auto 0 auto; padding:0;}

#start-puffs						{width:627px; height:225px; margin:0; padding:0; overflow:hidden; float:left;}
#start-puffs .puffitem				{width:48.5%; height:100%; margin:0 3% 0 0; padding:0; float:left; text-align:left; overflow:hidden; position:relative;}
#start-puffs .puffitem.last			{margin-right:0;}

#start-puffs .puffitem a                                                {display:block; width:100%; height:100%; text-decoration:none;}
#start-puffs .puffitem .rub, #start-puffs .puffitem a .rub              {transition-duration:0.2s; -webkit-transition-duration:0.2s; width:100%; display:block; margin:0 0 1% 0; padding:0; font-size:14px; font-weight:bold; color:#333; text-align:left;}
#start-puffs .puffitem .image, #start-puffs .puffitem a .image          {width:100%; height:145px; display:block; margin:0 0 2.5% 0; text-align:center; background-color:#fff; overflow:hidden;}
#start-puffs .puffitem .image img, #start-puffs .puffitem a .image img  {transition-duration:0.2s; -webkit-transition-duration:0.2s; width:100%; display:block; opacity:1.0; filter:alpha(opacity=100);}
#start-puffs .puffitem .content, #start-puffs .puffitem a .content      {transition-duration:0.2s; -webkit-transition-duration:0.2s; width:100%; /*background:rgba(0,0,0,.6); color:#fff; text-shadow:0 -1px 0 rgba(0,0,0,.3);*/}
#start-puffs .puffitem .content p, #start-puffs .puffitem a .content p  {transition-duration:0.2s; -webkit-transition-duration:0.2s; /*padding:0; margin:0;*/ line-height:16px; font-size:12px; color:#444;}

#start-puffs .puffitem:hover .rub                                               {transition-duration:0.2s; -webkit-transition-duration:0.2s; color:#000;}
#start-puffs .puffitem:hover .content, #start-puffs .puffitem:hover .content p  {transition-duration:0.2s; -webkit-transition-duration:0.2s; color:#222;}
#start-puffs .puffitem:hover img, #start-puffs .puffitem a:hover img            {transition-duration:0.2s; -webkit-transition-duration:0.2s; opacity:0.8; filter:alpha(opacity=80);}

#start-news                         {width:32.5%; height:225px; margin:0; padding:0; float:right; text-align:left; overflow:hidden;}
#start-news h3                      {padding:0 0 2.6% 0; margin:0; display:block; font-size:16px; line-height:18px;}
#start-news ul                      {list-style:none; margin:0; padding:0; width:100%; overflow:hidden;}
#start-news ul li                   {width:100%; padding:0; margin:0 0 3% 0;}
#start-news ul li a                 {transition-duration:0.2s; -webkit-transition-duration:0.2s; display:block; text-decoration:none; padding:1.5% 1.5% 1.5% 3%; margin:0; border-left:2px solid #ccc;}
#start-news ul li a .date           {display:block; font-size:10px; color:#888;}
#start-news ul li a .title          {display:block; color:#444; width:100%; max-width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
#start-news ul li a:hover           {transition-duration:0.2s; -webkit-transition-duration:0.2s; border-left:2px solid #2980b9; background-color:#f5f5f5;}
#start-news ul li a:hover .date     {color:#666;}
#start-news ul li a:hover .title    {color:#000;}

@media screen and (max-width: 1200px) {
    .flexslider {
     min-height:150px;
    }
}

@media screen and (max-width: 1024px)
{    
    .start-text .inner          {width:90%;}
    .flexslider .slides li      {padding-bottom:59%; }
    
}

@media screen and (max-width: 600px)
{
    
}

@media screen and (max-width: 480px)
{
}
