/*---------------------
General
---------------------*/
a						{font-weight:normal; color:#333; text-decoration:underline;}
a:hover					{text-decoration:none;}

h1, h2, h3				{font:bold 14px Arial, Sans-serif; color:#000;}
h1						{font-size:30px; margin:0 0 10px 0; font-weight:bold;}
h2						{font-size:22px; margin:25px 0 5px 0;}
h3						{font-size:18px; margin:25px 0 5px 0;}
h4						{margin:25px 0 5px 0; font-weight:bold; line-height:1.5;}
p						{margin:0 0 10px 0;}

::selection             {background:#d0e8ff;}
::-moz-selection        {background:#d0e8ff;}

table,
table tr,
table tr td				{font:normal 12px/1.5 Arial, Verdana, Sans-serif;}

img, table				{border:0;}
html 					{margin:0; padding:0;}
body { margin: 0; padding: 0; COLOR: #4f4f4f; font-size: 12px; font-family: Arial, Verdana, "Lucida Sans", "Lucida Grande", Sans-serif; line-height: 1.5; background-color: #353535;}

/*---------------------
Body layout
---------------------*/
#wrapper 					{margin:0 auto;}
.inner                      {max-width: 1000px; margin:0 auto;}

#logo                       {position:absolute; left:0; top:20px; height: 60px;}
#logo img                   {display:block; height: 100%;}

.header 						{background-color:#2980b9;}
.header .inner                {min-height:100px; position:relative;}

.header #contact				{position:absolute; right:20px; top:10px;}

.topmenu                    { overflow: hidden; }
.header #responsive-menu-btn  {display:none;}

.topmenu ul                  {margin:0; padding:0;}
.topmenu ul li               {display:inline-block; }
.topmenu ul li a             {font-weight: 700; font-size: 18px; color: #FFF; text-decoration: none; padding: 10px 20px; display: block;}
.topmenu ul li.on a          {background-color: #fff; color: #2980b9; }
.topmenu ul li a:hover       {text-decoration:none;}
.topmenu ul li a.haschild    {display:none;}
.topmenu ul li ul            {display:none;}

.header #nav ul#responsive            {display:none;}
.header .contactPuffs {
    position: absolute;
    right: 0;
}
/*---------------------
Page layout
---------------------*/
.clearfix:after 			{content:"."; display:block; height:0; clear:both; visibility:hidden;}
* html .clearfix 			{height: 1%;}


.content .inner             {min-height:450px; overflow:hidden; padding:40px 0;}
.contentright   			{width:75%; margin:0; padding:0; float:right; overflow:hidden;}

/*---------------------
Start page
---------------------*/
#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				{height:100%; 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 0 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 0 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;}

/*---------------------
Submenu vertical
---------------------*/ 
/*.leftmenu                           {float:left; width:25%;}*/
.leftmenu ul					    {width:auto; margin:0; padding:0 0 10px 0; list-style:none; overflow:hidden;}
.leftmenu ul li				        {width:100%; margin:0; padding:0; border-bottom:1px dotted #999;}
/*.leftmenu ul li:last-child          {background:none; border:0;}*/
.leftmenu ul li a				    {width:100%; margin:0; padding:0; font:normal 12px/40px Arial; color:#555; text-decoration:none; display:block;}
.leftmenu ul li a:hover             {color:#333;}
.leftmenu ul li.on a			    {color:#333; font-weight:bold;}
.leftmenu ul li.on-childs           {/*background:none; */border:0;}
.leftmenu ul li.on-childs a	        {color:#555; font-weight:bold; line-height:40px;}

.leftmenu ul li.on-childs ul            {margin:0 0 0 -10px !important;}
.leftmenu ul li.on-childs ul li         {/*background:none; */border:0;}
.leftmenu ul li.on-childs ul li a       {font-weight:normal !important; line-height:40px !important; font-size:12px; color:#555;}
.leftmenu ul li.on-childs ul li a:hover {color:#333;}
.leftmenu ul li.on-childs ul li.on a    {color:#333; font-weight:bold !important;}

/*---------------------
Submenu horizontal
---------------------*/ 
.fullmenu                           {background-color:#cccccc;}
.fullmenu ul					    {width:auto; text-align:center; margin:0; padding:0; list-style:none; overflow:hidden;}
.fullmenu ul li				        {display:inline-block; margin:0 10px; padding:0; }
.fullmenu ul li:last-child          {background:none; border:0;}
.fullmenu ul li a				    {margin:0; padding:5px 10px; font:normal 12px/40px Arial; color:#555; text-decoration:none; display:block;}
.fullmenu ul li a:hover             {color:#333;}
.fullmenu ul li.on a, .fullmenu ul li.on-childs a			    {color:#333; font-weight:bold;}


/*---------------------
Footer layout
---------------------*/
#footer					{ padding:40px 0; position:relative; font-size:11px; line-height:16px; color:#fff;}
#footer .inner          {min-height:40px; _height:40px; }
#footer a				{font-weight:normal; color:#fff; text-decoration:none;}
#footer a:hover         {text-decoration:underline;}
#footer .left			{float:left; padding:0; margin:0; text-align:left;}
#footer .right			{float:right; padding:0; margin:0; text-align:right; display:none;}
#footer .right .rss img, 
#footer .right .facebook img, 
#footer .right .twitter img	    {margin:0 0 3px 2px; padding:0; border:0;}

#footer .links                  {margin-bottom:10px; }
#footer .links .left		    {float:left; width:16%; display:block; overflow:hidden; margin:0 0.6% 1% 0; text-align:left; clear:right;}
#footer .links .left li         {list-style-type:none; margin-left:0; padding-left:0;}
#footer .links .left.first	    {padding-left:0px;}
#footer .links .left p a		{color:#fff; display:block; line-height:20px; font-size:10px; font-family:Arial, Verdana, sans-serif;}
#footer .links .left p a strong	{color:#fff; font-size:12px;}

@media screen and (max-width: 860px)
{
    h1  {font-size:24px;}
    h2  {font-size:18px;}
    h3  {font-size:14px;}
    
    .header 						        {width:auto; height:auto; height:50px; margin:0; padding:0; position:relative;}
    .header .inner                        {height:auto; z-index:999;}
    #logo                               {position:absolute; left:10px; top:10px;}
    #logo img                           {height:30px; max-height: 100%;}
    
    .header #nav					        {position:static; top:0; left:0; height:auto; min-height:50px; width:100%; padding:0; margin:0; z-index:9; display:none;}
    .header .topmenu                      {display:none;}

    
    
    .content					{width:auto; height:auto; min-height:100px; margin:0; padding:0;}
    .content .inner             {min-height:100px; padding-bottom:2%;}
    
    
    .content .inner	            {/*width: auto; */height:auto; margin:0; padding:10px; }
    .contentright               {float:none; width:100%;}

    #footer					    {width:auto; margin:0; padding:2% 0 0 0; clear:left; position:relative; font-size:11px; line-height:16px;}
    #footer .links              {display:none;}
    
    .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 0 0;}
    #start-news                 {width:32%; height:auto; margin:0 0 0 0;}
    
	table.responsive-table, 
	table.responsive-table thead, 
	table.responsive-table tbody, 
	table.responsive-table th, 
	table.responsive-table td, 
	table.responsive-table tr           {display:block; border:0;}
	table.responsive-table thead tr     {position:absolute; top:-9999px; left:-9999px;}
	table.responsive-table tr           {border:1px solid #ccc;}
	table.responsive-table td           {padding:4px 6px;}
	table.responsive-table td           {border:none; border-bottom:1px solid #ddd; position:relative; padding-left:50%; white-space:normal; text-align:left !important;}
 	table.responsive-table td:before    {position:absolute; top:6px; left:6px; width:45%; padding-right:10px; white-space:nowrap; text-align:left; font-weight: bold;}
	table.responsive-table td:before    {content:attr(data-title);}
}

@media screen and (max-width: 600px)
{
    h1  {font-size:20px;}
    h2  {font-size:16px;}
    h3  {font-size:14px;}
    #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%;}
    
}

@media screen and (max-width: 480px)
{
    h1  {font-size:18px;}
    h2  {font-size:14px;}
    h3  {font-size:12px;}
}