﻿#start-slideshow            {width:100%; margin:0 auto;}
.flexslider                 {overflow:hidden; width:100%; margin:0 auto !important;}
.flexslider .slides li      {background-size:cover; background-position:center;}
.flexslider .slides li a    {display:block; height:100%; width:100%;position:relative; z-index: 2;}

#start-content                      {margin:0 auto;}

#start-puffs						{overflow:hidden;}
#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; 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: 860px) {
    .flexslider .slides  li     {height:400px !important;}
    
    #start-content              {width:97%; height:auto; margin:0; padding:0 1.5% 0 1.5%;}
    #start-puffs                {width:66%; height:auto; margin:0 0 2% 0;}
    #start-news                 {width:32%; height:auto; margin:0 0 2% 0;}    
}

@media screen and (max-width: 600px) {
    #start-puffs                        {width:100%;}
    #start-puffs .puffitem .rub, 
    #start-puffs .puffitem a .rub       {font-size:12px;}
    #start-puffs .puffitem .content p, 
    #start-puffs .puffitem a .content p {line-height:14px; font-size:11px;}
    #start-puffs .puffitem .image, 
    #start-puffs .puffitem a .image     {height:120px;}
    
    #start-news         {width:100%; margin-top:2%;}
    #start-news h3      {padding:0 0 1.5% 0;}
    #start-news ul li   {margin:0 0 1.5% 0;}
    #start-news ul li a {background-color:#f7f7f7; padding:1.2% 1.2% 1.2% 2%;}
}
