body {
    margin : 0 0 0 0;
}

._Krysore {
    width:100%;
    height:100%;
    float:left;
    border:0px solid red;
}


.Header {
    width:100%;
    height:121px;
    float:left;
    background-image:url(image/bg.png);
   background-repeat:no-repeat;
   background-size: 100% 121px;
    
}
.logo {
    width:242px;
    height:121px;
    float:left;
    background-image:url(image/logo.png);
    background-repeat:no-repeat;
    position:absolute;
    z-index:2;
}


.Menu {
    width:100%;
    height:35px;
    float:left;
    position:absolute;
    top:90px;
    z-index:0;
    background: #eeeeee; /* Old browsers */
    background: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #eeeeee 0%,#cccccc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
    box-shadow:1px 1px 1px 1px #bababa;
}

.MenuContain {
    width:calc(100% - 280px);
    height:35px;
    float:right;
    border:0px solid red;
}

.menutext {
    width:calc(25% - 1px);
    float:left;
    font: 200 16px/35px Arial;
    cursor:pointer;
    text-align:center;
    border-left:1px solid #bababa;   
 -webkit-transition-duration: 5s; /* Safari */
    transition-duration: 5s;
}

.menutext:hover {
    width:calc(25% - 1px);
    float:left;
    font: 200 16px/35px Arial;
    cursor:pointer;
    text-align:center;
    border-left:1px solid #bababa;   
    background: rgb(255,255,255); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(243,243,243,1) 50%, rgba(237,237,237,1) 51%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 );
    transition-duration: 5s;
}

.menutextactive {
    width:calc(25% - 3px);
    float:left;
    font: 200 16px/35px Arial;
    cursor:pointer;
    text-align:center;
    border-left:1px solid #bababa;   
    background: rgb(255,255,255); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(243,243,243,1) 50%, rgba(237,237,237,1) 51%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 );
    transition-duration: 5s;
}
 .menutext:last-child {
    width:calc(25% - 3px);
    border-right:1px solid #bababa;  
    transition-duration: 5s;
}

.gjuhet {
    width:60px;
    height:100%;
    float:right;
    border:0px solid red;
}
.al {
    width:25px;
    height:25px;
    float:left;
    background-image:url(image/al.png);
    background-position:center;
    border:0px solid blue;
    position:absolute;
    top:55px;
    right:45px;
    border-radius:4px;
    box-shadow:0px 1px 1px 1px #bababa;
    cursor:pointer;
}
.en {
    width:25px;
    height:25px;
    float:left;
    background-image:url(image/en.png);
    background-position:center;
    border:0px solid blue;
    position:absolute;
    top:55px;
    right:10px;
    border-radius:4px;
    box-shadow:0px 1px 1px 1px #bababa;
    cursor:pointer;
}

.info {
    margin-top:10px;
    width:100%;
    height:310px;
    float:left;
    border:0px solid rgba(237,237,237,1);
}




.footer {
    margin-top:10px;
    width:100%;
    height:30px;
    float:left;
    background-color:rgba(237,237,237,1);
    text-align:center;
    font: 200 10px/15px Arial;
    border-bottom:2px solid #bababa;
}

.Tekst {
    width:100%;
    float:left;
    border:0px solid blue;
    margin-top:20px;
}

.TitullInfo {
    width:calc(100% - 20px);
    height:30px;
    float:left;
    margin-left:10px;
    text-align:center;
    font: 700 16px/30px Arial;
    border:0px solid red;
    text-decoration:underline;
}


.TekstInfo {
    width:calc(100% - 20px);
    float:left;
    margin-left:10px;
    text-align:left;
    font: 200 13px/16px Arial;
    border:0px solid red;
}


.Katalog {
     
    width:270px;
    height:300px;
    box-shadow:1px 1px 1px 1px #bababa;
    margin:10px 10px 10px 10px;
    float:left;
    border:0px solid red;
    transition-duration:0.7s;
    margin-left:32px;
}

.Katalog:hover {
     
    width:270px;
    height:300px;
    box-shadow:1px 1px 60px 1px #bababa;
    margin:10px 10px 10px 10px;
    float:left;
    border:0px solid red;
    transition-duration:0.5s;
    background-color:#cccccc;
    cursor:pointer;
    margin-left:32px;
}


.KatalogPershkrim {
    text-align:center;
     font: 700 14px/20px Arial;
}




#makeMeScrollable
{
    width:100%;
    height: auto;
    position: relative;
    box-shadow:0px 1px 1px 1px #bababa
}
		
/* Replace the last selector for the type of element you have in
your scroller. If you have div's use #makeMeScrollable div.scrollableArea div,
if you have links use #makeMeScrollable div.scrollableArea a and so on. */
#makeMeScrollable div.scrollableArea img
{
    position: relative;
    float: left;
    margin:5px 5px 0px 5px;
    padding: 0;
    /* If you don't want the images in the scroller to be selectable, try the following
    block of code. It's just a nice feature that prevent the images from
    accidentally becoming selected/inverted when the user interacts with the scroller. */
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;

}
/* You can alter this CSS in order to give Smooth Div Scroll your own look'n'feel */

/* Invisible left hotspot */
div.scrollingHotSpotLeft
{
	/* The hotspots have a minimum width of 100 pixels and if there is room the will grow
    and occupy 15% of the scrollable area (30% combined). Adjust it to your own taste. */
	min-width: 75px;
	width: 20px;
	height: 100%;
	/* There is a big background image and it's used to solve some problems I experienced
    in Internet Explorer 6. */
	background-image: url(../images/big_transparent.gif);
	background-repeat: repeat;
	background-position: center center;
	position: absolute;
	z-index: 200;
	left: 0;
	/*  The first url is for Firefox and other browsers, the second is for Internet Explorer */
	cursor: url(../images/cursors/cursor_arrow_left.png), url(../images/cursors/cursor_arrow_left.cur),w-resize;
}

/* Visible left hotspot */
div.scrollingHotSpotLeftVisible
{
	background-image: url(../images/arrow_left.gif);				
	background-color: #fff;
	background-repeat: no-repeat;
	opacity: 0.35; /* Standard CSS3 opacity setting */
	-moz-opacity: 0.35; /* Opacity for really old versions of Mozilla Firefox (0.9 or older) */
	filter: alpha(opacity = 35); /* Opacity for Internet Explorer. */
	zoom: 1; /* Trigger "hasLayout" in Internet Explorer 6 or older versions */
}

/* Invisible right hotspot */
div.scrollingHotSpotRight
{
	min-width: 75px;
	width: 20px;
	height: 100%;
	background-image: url(../images/big_transparent.gif);
	background-repeat: repeat;
	background-position: center center;
	position: absolute;
	z-index: 200;
	right: 0;
	cursor: url(../images/cursors/cursor_arrow_right.png), url(../images/cursors/cursor_arrow_right.cur),e-resize;
}

/* Visible right hotspot */
div.scrollingHotSpotRightVisible
{
	background-image: url(../images/arrow_right.gif);
	background-color: #fff;
	background-repeat: no-repeat;
	opacity: 0.35;
	filter: alpha(opacity = 35);
	-moz-opacity: 0.35;
	zoom: 1;
}

/* The scroll wrapper is always the same width and height as the containing element (div).
   Overflow is hidden because you don't want to show all of the scrollable area.
*/
div.scrollWrapper
{
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100%;
}

div.scrollableArea
{
	position: relative;
	width: auto;
	height: 100%;
}
/*******************************FundSkrollMain**********************/

.DIVTitulli
{
    width:80%;
    height:30px;
    border:0px solid red;
    font:700 13px/40px Georgia;
    font-style: oblique; 
    text-align:center; 
    margin-left:10px; 
    border-bottom:1px solid grey; 
}
.DIVShkrimi
{
    width:99%;
    height:auto;  
    border:0px solid red;
    float:left;
    margin-top:5px;
    margin-left:10px;  
    text-align:left;
    font:300 12px/20px Verdana; 
}
.DIVkontaktet
{
    width:99%;
    height:auto;
    border:0px solid blue;
    float:left;
    margin-top:10px; 
    margin-left:10px;  
}
.DIVmbajkontaktet
{
    width:100%;
    height:auto;
    border:0px solid green;    
}
.DIVmbajDIVharten
{
    width:600px;
    height:600px;
    border:0px solid red;
    float:left;
}
.DIVmbajHartatdheshkrimet
{
    width:100%;
    height:100%;
    border:0px solid red;    
}
.hartavogel
{
    width:270px;
    height:300px;
    border:0px solid red;    
    float:left;
    margin-left:20px;
}
.shkrimeadresavogel
{
    width:270px;
    height:50px;    
    float:left;
    margin-left:20px;   
    font:300 12px/50px verdana;  
    border-left:1px dashed gray;
    border-right:1px dashed gray;
    border-bottom:1px dashed gray;
    text-align:center;
}
.hartamadhe
{
    width:560px;
    height:170px;
    border:0px solid blue;    
    float:left;
    margin-left:20px;
    margin-top:10px;        
}
.shkrimeadresamadhe
{
    width:560px;
    height:50px;
    border:0px solid blue;    
    float:left;
    margin-left:20px;  
    font:300 12px/50px verdana;
    border-left:1px dashed gray;
    border-right:1px dashed gray;
    border-bottom:1px dashed gray;
    text-align:center;    
}
.DIVmbajkontaktetdetaje
{
    width:600px;
    height:auto;
    border:0px solid green;
    float:left;
    margin-left:15px;    
}
.DIVkontaktetedhena
{
    width:600px;
    height:auto;
    border:0px solid blue;
    text-align:left;  
    float:left;
    font:300 13px/25px verdana; 
}
.DIVmbajrrjetsocial
{
    width:100%;
    height:auto;
    border:0px solid yellow;
    float:left;      
}
.DIVrrjetet
{
    width:100%;
    height:auto;    
}
.DIVfcb
{
    width:auto;
    height:auto;
    border:0px solid red;    
    float:left;
    border-right:1px solid gray;
    margin-top:5px;
}
.DIVtwitter
{
    width:auto;
    height:50px;
    border:0px solid red;    
    float:left; 
    margin-top:13px;
    margin-left:5px;    
}