/*==========================================================================
****************************************************************************
                                                                           *
    Title: Lotos                                                           *
    Author: Jamel Interactive                                              *
    Date: October 2012                                                     *
                                                                           *
****************************************************************************
============================================================================




/* Grid fields
--------------------------------------------------------------------------*/

#grid-fields {
	min-width: 100%;
	overflow: hidden;
	float: left;
	height: 640px;
	padding: 110px 0 0;
	margin: 0 0 -10px;
	clear: both;
	position: relative;
	background: url(/images/grid-fields-bg-blue.png) 0 110px repeat-x;
}

#grid-fields a {
	display: block;
	width: 100%;
	height: 100%;
	background: url(/images/icons.png) -999999px -999999px no-repeat;
	cursor: pointer;
	color: #fff;
	z-index: 3;
	overflow: hidden;
	position: relative;
}

#grid-fields a:hover {
	text-decoration: none;
}

#grid-fields a * {
	cursor: pointer;
}

#grid-fields .hover {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	border: solid 3px #fff;
	z-index: 2;
	-moz-box-shadow: 0 0 6px #737373;
	-webkit-box-shadow: 0 0 6px #737373;
	-o-box-shadow: 0 0 6px #737373;
	box-shadow: 0 0 6px #737373;
	display: none;
}

#grid-fields .player,
#grid-fields .player iframe {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	display: none;
}

#grid-fields .player iframe {
	display: block;
}

#grid-fields .grid > div > .hover {
	border: 0 none;
	z-index: -1;
}

#grid-fields .grid a > .hover {
	-moz-box-shadow: 0 none;
	-webkit-box-shadow: 0 none;
	-o-box-shadow: 0 none;
	box-shadow: 0 none;
}

#grid-fields img {
	height: 100%;
	width: 100%;
	z-index: 1;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

#grid-fields h3 {
	padding: 15px 20px;
	margin: 0;
	font: 16px/19px Arial, sans-serif;
}

#grid-fields h4 {
	padding: 0 20px;
	margin: 0;
	font: 18px/20px Arial, sans-serif;
}

#grid-fields .job h3 {
	font-size: 14px;
	padding: 15px 20px 10px;
}

#grid-fields .job .more {
	position: absolute;
	left: 20px;
	bottom: 15px;
}

#grid-fields .job {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	color: #fff;
}

#grid-fields .job > span {
	display: block;
	padding: 5px 20px 0;
	color: #fff;
}

#grid-fields .job a {
    background: none;
    color: #dddad5;
    cursor: pointer;
    display: inline;
    height: auto;
    overflow: visible;
    position: static;
    width: auto;
}

#grid-fields .job a:hover {
	text-decoration: underline;
}

#grid-fields p {
	padding: 0 20px;
	margin: 0;
	font: 13px/15px Arial, sans-serif;
	filter: alpha(opacity=70);
	opacity: 0.7;
	overflow: hidden;
}

#grid-fields #grid-fields-wrapper {
	float: left;
	position: relative;
	margin-right: -999999px;
}

#grid-fields #grid-fields-middle {
	width: 1040px;
	height: 100%;
	margin: 0 auto;
	position: relative;
}

#grid-fields #grid-fields-middle .prev,
#grid-fields #grid-fields-middle .next {
	width: 180px;
	height: 180px;
	text-indent: -999999px;
	position: absolute;
	top: 230px;
	z-index: 6;
	cursor: pointer;
	background: url(/images/grid-fields-controls.png) 0 0 no-repeat;
}

#grid-fields #grid-fields-middle .prev {
	left: -200px;
	background-position: 0 0;
}

#grid-fields #grid-fields-middle .next {
	right: -200px;
	background-position: -180px 0;
}

.iPad #grid-fields #grid-fields-middle .prev,
.iPad #grid-fields #grid-fields-middle .next,
.iPhone #grid-fields #grid-fields-middle .prev,
.iPhone #grid-fields #grid-fields-middle .next,
.android #grid-fields #grid-fields-middle .prev,
.android #grid-fields #grid-fields-middle .next {
	display: block !important;
}

#grid-fields .multi {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;
}

#grid-fields .multi li {
	float: left;
	position: relative;
}

#grid-fields .multi ul {
	height: 100%;
	width: 999999px;
	position: absolute;
	top: 0;
	left: 0;
}

#grid-fields .grid {
	width: 1050px;
	height: 640px;
	float: left;
	margin: 0;
	position: relative;
	overflow: hidden;
}

#grid-fields .grid.current {
	overflow: visible;
}

#grid-fields .grid > div {
	width: 200px;
	height: 200px;
	float: left;
	margin: 10px 10px 0 0;
	position: absolute;
	top: 0;
	left: 0;
	background: transparent;
}

#grid-fields .grid .box-1x1 { width: 200px; height: 200px; }
#grid-fields .grid .box-1x2 { width: 200px; height: 410px; }
#grid-fields .grid .box-1x3 { width: 200px; height: 620px; }
#grid-fields .grid .box-2x1 { width: 410px; height: 200px; }
#grid-fields .grid .box-2x2 { width: 410px; height: 410px; }
#grid-fields .grid .box-2x3 { width: 410px; height: 620px; }
#grid-fields .grid .box-3x1 { width: 620px; height: 200px; }
#grid-fields .grid .box-3x2 { width: 620px; height: 410px; }
#grid-fields .grid .box-3x3 { width: 620px; height: 620px; }
#grid-fields .grid .box-4x1 { width: 830px; height: 200px; }
#grid-fields .grid .box-4x2 { width: 830px; height: 410px; }
#grid-fields .grid .box-4x3 { width: 830px; height: 620px; }
#grid-fields .grid .box-5x1 { width: 1040px; height: 200px; }
#grid-fields .grid .box-5x2 { width: 1040px; height: 410px; }
#grid-fields .grid .box-5x3 { width: 1040px; height: 620px; }

#grid-fields .grid .box-1x1 .multi .wrap > li { width: 200px; height: 200px; }
#grid-fields .grid .box-1x2 .multi .wrap > li { width: 200px; height: 410px; }
#grid-fields .grid .box-1x3 .multi .wrap > li { width: 200px; height: 620px; }
#grid-fields .grid .box-2x1 .multi .wrap > li { width: 410px; height: 200px; }
#grid-fields .grid .box-2x2 .multi .wrap > li { width: 410px; height: 410px; }
#grid-fields .grid .box-2x3 .multi .wrap > li { width: 410px; height: 620px; }
#grid-fields .grid .box-3x1 .multi .wrap > li { width: 620px; height: 200px; }
#grid-fields .grid .box-3x2 .multi .wrap > li { width: 620px; height: 410px; }
#grid-fields .grid .box-3x3 .multi .wrap > li { width: 620px; height: 620px; }
#grid-fields .grid .box-4x1 .multi .wrap > li { width: 830px; height: 200px; }
#grid-fields .grid .box-4x2 .multi .wrap > li { width: 830px; height: 410px; }
#grid-fields .grid .box-4x3 .multi .wrap > li { width: 830px; height: 620px; }
#grid-fields .grid .box-5x1 .multi .wrap > li { width: 1040px; height: 200px; }
#grid-fields .grid .box-5x2 .multi .wrap > li { width: 1040px; height: 410px; }
#grid-fields .grid .box-5x3 .multi .wrap > li { width: 1040px; height: 620px; }

#grid-fields .grid .top-left {
	width: 180px;
	height: 180px;
	top: 10px;
	left: 10px;
	position: absolute;
	z-index: 2;
}

#grid-fields .grid .light-text * {
	color: #fff;
}

#grid-fields .grid .dark-text * {
	color: #1f3652;
}

#grid-fields .grid .top-right {
	width: 180px;
	height: 180px;
	top: 10px;
	right: 10px;
	position: absolute;
	z-index: 2;
}

#grid-fields .grid .bottom-left {
	width: 180px;
	height: 180px;
	bottom: 10px;
	left: 10px;
	position: absolute;
	z-index: 2;
	background-image: url(/images/blank.gif) !important;
}

#grid-fields .grid .bottom-right {
	width: 180px;
	height: 180px;
	bottom: 10px;
	right: 10px;
	position: absolute;
	z-index: 2;
}

#grid-fields .grid .center {
	width: 200px;
	height: 200px;
	position: absolute;
	z-index: 2;
}

#grid-fields .current {
	z-index: 5;
}

#grid-fields .current .fade {
	display: none;
}

#grid-fields .grid .fade {
	width: 100%;
	height: 100%;
	margin: 0;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	opacity: 0.8;
	filter: alpha(opacity: 80);
	background: url(/images/grid-fields-bg-blue.png) 0 0 repeat-x;
}

#grid-fields .pager {
	position: absolute;
	bottom: 10px;
	right: 10px;
	height: 60px;
	width: 30px;
	z-index: 3;
}

#grid-fields .pager .prev-tile,
#grid-fields .pager .next-tile {
	width: 30px;
	height: 30px;
	cursor: pointer;
	position: absolute;
	top: 0;
	left: 0;
}

#grid-fields .pager span {
	width: 30px;
	height: 30px;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	background: url(/images/grid-pager.png) no-repeat;
}

#grid-fields .pager .next-tile {
	top: 30px;
}

#grid-fields .pager .prev-tile .out {
	background-position: 0 0;
}

#grid-fields .pager .next-tile .out {
	background-position: 0 -30px;
}

#grid-fields .pager .prev-tile .over {
	background-position: -30px 0;
	opacity: 0;
	filter: alpha(opacity=0);
	-moz-transition: opacity .25s ease-in-out;
	-webkit-transition: opacity .25s ease-in-out;
	-o-transition: opacity .25s ease-in-out;
	transition: opacity .25s ease-in-out;
}

#grid-fields .pager .next-tile .over {
	background-position: -30px -30px;
	opacity: 0;
	filter: alpha(opacity=0);
	-moz-transition: opacity .25s ease-in-out;
	-webkit-transition: opacity .25s ease-in-out;
	-o-transition: opacity .25s ease-in-out;
	transition: opacity .25s ease-in-out;
}

#grid-fields .pager .prev-tile:hover .over,
#grid-fields .pager .next-tile:hover .over {
	opacity: 1;
	filter: alpha(opacity=100);
}

#grid-fields .chart {
	width: 390px;
	height: 180px;
	float: left;
	margin: 10px 0 0 10px;
	position: relative;
	z-index: 2;
}

#grid-fields .rates {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #0f2d40;
}

#grid-fields .rate .top {
	position: absolute;
	top: 15px;
	left: 0;
	right: 0;
}

#grid-fields .rate .bottom {
	position: absolute;
	bottom: 19px;
	left: 0;
	right: 0;
}

#grid-fields .rate h3 {
	padding: 2px 20px;
	color: #fff;
	line-height: 16px;
}

#grid-fields .rate p {
	filter: alpha(opacity=100);
	opacity: 1;
	color: #79a3c2;
	padding: 2px 20px 25px;
	font: 14px/14px Arial, sans-serif;
}

#grid-fields .fluctuations {
	overflow: hidden;
	padding: 0 0 0 20px;
}

#grid-fields .fluctuations .block {
	float: left;
	margin: 0 10px 0 0;
}

#grid-fields .fluctuations span {
	color: #79a3c2;
	padding: 4px 0 6px;
	display: block;
	font: 14px/14px Arial, sans-serif;
}

#grid-fields .fluctuations strong {
	color: #fff;
	padding: 7px 15px;
	background: #305a6a;
	display: block;
	font: 14px/14px Arial, sans-serif;
}

#grid-fields .rate .count {
	color: #fff;
	position: absolute;
	top: 60px;
	left: 0;
	right: 0;
	width: 100%;
	text-align: center;
	font: 48px/55px Arial, sans-serif;
}

#grid-fields .rate .percent {
	color: #fff;
	position: absolute;
	top: 6px;
	left: 8px;
	text-align: center;
	font: 14px/20px Arial, sans-serif;
}

#grid-fields .rate .percent img {
	position: relative;
	top: 2px;
	padding-right: 10px;
    bottom: auto;
    display: inline;
    height: auto;
    left: auto;
    right: auto;
    width: auto;
}

#grid-fields .right {
	width: 190px;
	height: 180px;
	float: right;
	margin: 10px 10px 0 0;
	position: relative;
	z-index: 2;
}

#grid-fields .left {
	width: 190px;
	height: 180px;
	float: left;
	margin: 10px 0 0 10px;
	position: relative;
	z-index: 2;
}

#grid-fields .html5-video,
#grid-fields .html5-video .video {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

#grid-fields .html5-video a {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

#grid-fields .html5-video .video {
	overflow: hidden;
	background: url(/media/animacja_rajdy_lotos.png) 0 0 no-repeat;
}

#grid-fields .html5-video #flash-video,
#grid-fields .html5-video #flash-video object {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}

#grid-fields .company-menu {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #fff;
	overflow: hidden;
}

#grid-fields .company-menu h2 {
	margin: 0 10px;
	padding: 15px 10px;
	font: 14px/16px Arial, sans-serif;
	border-bottom: solid 1px #ccc;
	color: #596575;
}

#grid-fields .company-menu ul {
	padding-top: 15px;
}

#grid-fields .company-menu li {
	display: block;
	padding: 5px 20px;
}

#grid-fields .company-menu a {
	background: none;
	color: #596575;
	display: inline-block;
	height: auto;
	overflow: visible;
	position: relative;
	width: auto;
	font: 14px/15px Arial, Verdana, Tahoma, sans-serif;
}

#grid-fields .company-menu a .external {
	background-position: 4px -586px;
}

#grid-fields .animation {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

#grid-fields .animation a {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

#grid-fields .animation video {
	width: 100%;
	height: 100%;
	display: block;
}

#grid-fields .refiningMargin-tile {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #1d4e89;

}
#grid-fields .refiningMargin-tile .container {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;


	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	padding: 23px 20px;
	z-index: 2;
}
#grid-fields .refiningMargin-tile span.caption {
	color: white;
	font-size: 16px;
}
#grid-fields .refiningMargin-tile span.date {
	color: #79a3c2;
	font-size: 14px;
	padding-top: 2px;
}
#grid-fields .refiningMargin-tile span.value {
	color: white;
	font-size: 48px;
	flex: 1;
	text-align: center;
	line-height: 100px;
}




.theme-green #grid-fields { background: url(/images/grid-fields-bg-green.png) 0 0 repeat-x; }
.theme-green #grid-fields .grid .fade,
.theme-brown #grid-fields .grid .fade,
.theme-navyblue #grid-fields .grid .fade { background: url(/images/blank.gif) repeat; }
.no-grid-navigation .fade { background: url(/images/blank.gif) repeat !important; }
.theme-green #grid-fields #grid-fields-middle .prev,
.theme-green #grid-fields #grid-fields-middle .next,
.theme-brown #grid-fields #grid-fields-middle .prev,
.theme-brown #grid-fields #grid-fields-middle .next,
.theme-navyblue #grid-fields #grid-fields-middle .prev,
.theme-navyblue #grid-fields #grid-fields-middle .next,
.no-grid-navigation .next,
.no-grid-navigation .prev { display: none !important; }