@font-face {
    font-family: Roboto; /* Гарнитура шрифта */
    src: url('http://eng.usg.lg.ua/system/Roboto-Regular.ttf') format('truetype'), url('/system/Roboto-Regular.ttf') format('truetype'); /* Путь к файлу со шрифтом */
   }
   @font-face {
    font-family: Open-sans; /* Гарнитура шрифта */
    src: url('http://eng.usg.lg.ua/system/OpenSans-Regular.ttf') format('truetype'), url('/system/OpenSans-Regular.ttf') format('truetype'); /* Путь к файлу со шрифтом */
   }
   @font-face {
    font-family: IBMPlexSans; /* Гарнитура шрифта IBMPlexSans-Medium*/
    src: url('http://eng.usg.lg.ua/system/IBMPlexSans-Regular.ttf') format('truetype'), url('/system/IBMPlexSans-Regular.ttf') format('truetype'); /* Путь к файлу со шрифтом */
   }
   
#gallery-bg {
	background: url(images/img05.jpg) repeat-y left top;
}

#gallery-bgtop {
	background: url(images/img04.jpg) no-repeat left top;
}

#gallery-bgbtm {
	background: url(images/img06.jpg) no-repeat left bottom;
	padding: 50px 40px;
}


#foobar
{
	width: 100%;
	height: 590px;
	position: relative;
/*	background:red;*/
}

#foobar .navigation
{
	position: absolute;
	display: block;
	z-index: 105;
	color: #ffffff;
	bottom: 0px;
	right: 0px;
	margin: 10px;
	padding: 10px;
background-color:  rgba(255,255,255,.0) !important;
        opacity: 0.75;
}
#foobar .previous
{
    height: 30px;  
    display: inline-block;
    }
 #foobar .previous:hover
{
    height: 30px;
    display: inline-block;
 background-color:  rgba(30,30,30,.5) !important;   
    }
#foobar .next
{
    height: 30px;  
    display: inline-block;
    }
#foobar .next:hover
{
    height: 30px;
    display: inline-block;
 background-color:  rgba(30,30,30,.5) !important;   
    }

#foobar .navigation a
{
	color: #ffffff;
	text-decoration: none;
	outline: none;
}

#foobar .viewer
{
	min-width: 1400px;
    width:100%;
	height: 590px; 
	/*background-color: #000000;
        opacity: 0.9;   
    */
}


#foobar .viewer .reel .slide
{
	position: relative;
/*	width: 100%;*/
	height: 590px;
}
#foobar .nalojenie
{ 
	position: absolute;
	display: block;
    top: 0px;
    left: 0px;
    right: 0px;
	width: 100%;
	height: 590px;   
    z-index:100;
    background: #000000;
      opacity: 0.15;
}

#foobar .galerylinea{
 width: 100%; 
 opacity: 1 !important; 
 position: absolute;
	display: block;
top: 300px !important;
background-color:  rgba(255,255,255,.0) !important;
 padding-left: 0px !important; 
 font-family: IBMPlexSans !important; 
 font-size: 46px !important; 
 text-align: left !important; 
 text-indent: 0px !important;    
 z-index:101;
 height: 300px !important;
}
#foobar .galerylinea a{
color: white !important;
 font-family: IBMPlexSans !important; 
	display: block;   
    text-decoration: none;
    }

#foobar .viewer .reel .slide span
{
	position: absolute;
	display: block;
	width: 100%;
	padding: 20px;
	background-color: #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #3A3D40;
	bottom: 0px;
	left: 0px;
        opacity: 0.50;
}



#foobarsm
{
	width: 100%;
	height: 130px;
	position: relative;

}

#foobarsm .navigationsm
{
	position: absolute;
	display: block;
	z-index: 100;
	color: #ffffff;
	bottom: 0px;
	right: 0px;
	margin: 10px;
	padding: 10px;
	
	background-color: #303030;
        opacity: 0.75;
}

#foobarsm .navigationsm a
{
	color: #ffffff;
	text-decoration: none;
	outline: none;
}

#foobarsm .viewersm
{
	width: 100%;
	height: 130px;
}

#foobarsm .viewersm .reelsm .slidesm
{
	position: relative;
	width: 100%;
	height: 130px;
}

#foobarsm .viewersm .reelsm .slidesm span
{
	position: absolute;
	display: block;
	width: 100%;
	padding: 20px;
	background-color: #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;

	bottom: 0px;
	left: 0px;
    opacity: 0.50;
}