body {

  overflow-x: hidden;
}

.topi {

  background-color: #f7f7f7;
  padding-top: 12px;
  padding-bottom: 12px;
  font-size: 18px;
  color: rgb(0, 0, 0); 
  left: 50px;
}

.box {
  transition: transform 0.6s ease;
  opacity: 0;
  transform: translateX(10%);
}

.box.show {
  transform: translateX(0);
	opacity: 1;
	animation-name: fadeInOpacity;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
  animation-duration: 1s;
}

@keyframes fadeInOpacity {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.backce {
  background-image: url('../images/backce.jpg');
  height: 891px;
}

.topi {
position: absolute;
top: 0px;

}

.navbar-default {
  border: none;

} 

.bgimage {
  background-image: url('../images/img1.jpg');
  background-position: center center;
  background-size: cover;
  height: 500px;
  margin-top: 90px;
}


.hapsiraballina {
  background-position: center center;
  padding-top: 0px;
  background-size: cover;
  height: 0px;
  margin-top: 20px;
}

.hapsiraballinapyetje {
  background-position: center center;
  padding-top: 0px;
  background-size: cover;
  height: 0px;
  margin-top: 80px;
}

.neimg {
  background-image: url('../images/perne.jpg');
  background-position: center center;
  background-size: cover;
  height: 308px;
  margin-top: 350px;
  border-radius: 10%;
  margin-bottom: 350px;
}


.orarimage {
  background-image: url('../images/orari.jpg');
  background-position: center center;
  background-size: cover;
  height: 500px;
  margin-top: 90px;
}

.foto {
  background-image: url('../images/ec.jpg');
  background-position: center center;
  background-size: cover; height: 100%; width: 350px;
}

.logo {
    background-image: url('../images/logo.jpg');
    background-position: center center;
    margin-top: 0px;
    height: 99px;
    width: 300px;
    background-color: white;

  }

  .flag {
    background-image: url('../images/usflag2.jpg');
    background-position: center center;
    background-size: 100%; height: 32px; width: 54px;
    height: 32px;
    width: 54px;
    background-color: white;
    margin-top: -5px;

  }

  .flagalb {
    background-image: url('../images/albflag.jpg');
    background-position: center center;
    background-size: 100%; height: 32px; width: 54px;
    height: 32px;
    width: 54px;
    background-color: white;
    margin-top: -5px;

  }

  .perballe {
    background-image: url('../images/lokacioni.jpg');
    background-position: center center;
    background-size: 100%; height: 32px; width: 54px;
    height: 524px;
    width: 853px;
    background-color: white;
    margin: auto;
    margin-top: 40px;
  }

  .navbar-default .navbar-nav {
    margin-top: -80px;
    margin-left: 450px;

  }

  .navbar-default .navbar-nav>li .flag:hover {
    color:  rgb(255, 255, 255);
    background-color:  #18773c;
}

.navbar-brand { font-size: 2em; }

.textballina{height: 100%; font-family:sans-serif; font-size:18px; font-weight: 100; color: #424242; text-align: justify; background-color:#ffffff;margin-top: 40px; }
.textperne{height: 700px; padding-top: 250px; padding-bottom: 0px;padding-left: 0px; font-size:1.2em; color:#000000; text-align: center; background-color:#ffffff; margin-bottom: 0px;}
.textsherbimet{height: 50px; padding-top: 70px; padding-bottom: 0px;padding-left: 0px; font-size:1.2em; color:#000000; text-align: center; background-color:#ffffff; margin-bottom: 160px;}
.textkontakt{height: 50px; padding-top: 250px; padding-bottom: 0px;padding-left: 0px; font-size:1.2em; color:#000000; text-align: center; background-color:#ffffff; margin-bottom: 160px;}
.textlot { padding-bottom: 20px;}
.textloti { padding-bottom: 40px;}
.orari{height: 30px; padding-top: 0px; padding-bottom: 0px;padding-left: 0px; font-size:1.4em; color: #ffffff; text-align: center; background-color:#18773c; margin-bottom: 20px; margin-top:20px;}
.h2c {background-color: #ffffff;color: #b59357; margin-top: -40px; padding: 10px;}
.h2pos{font-family: myFirstFont; font-size: 4.50em; position: absolute; margin-top: -200px; margin-left: 150px; color: white}
.textmurati{height: 100%; padding-top: 0px; padding-bottom: 0px; font-size:1.1em; color: #000000; text-align: justify; background-color:#ffffff; margin-bottom: 0px;}
.text21vite{height: 100%; padding-top: 0px; padding-bottom: 0px; font-size:1.4em; color: #000000; text-align: justify; background-color:#ffffff; margin-bottom: 0px;}
.biokutia {padding-top: 10px;}
.textballina2 {

  border-width: thin; 
  height: 100%;
  font-size:2.5em;
  color:#05001a;
  text-align: center; 
  background-color:  #ffffff; 
  padding-top: 50px; 
  margin-top: 0px; 
  margin-bottom:30px;}
.hapsirabout{height: 100%; font-size:1.4em; color: #ffffff; text-align: justify; background-color:#ffffff; padding: 50px;padding-top: 50px;} 

.navbar-default .navbar-brand {color: #ffffff;}


.navbar-default .navbar-nav>li>a { 
  font-family: myFirstFont ;
  font-size: 1.50em; 
  color: #08002f; 
  padding-right: 15px; 
  padding-left: 15px; 
  padding-top: 20px;
  padding-bottom: 20px;
    
  border-color: none;
  border-bottom: hidden;
  border-width: 8px;
  position:relative;
}


.navbar-default .navbar-nav>li {
  padding-right: 1px; 
  padding-left: 1px;
}
  

.navbar-default {
	top: 0px;
	padding-bottom: 20px;
  background-color: #ffffff;
  border-color: #ffffff;
  
}

.navbar-default .navbar-nav {
  background-color: #ffffff;
  margin-bottom: -15px;
  margin-right: 0px;
}


.navbar-default .navbar-nav>.active>a:hover {
    color: #004d1;
    border-bottom: solid;
    border-width: 2px;
    border-color:#b59357;
}

.navbar-default .navbar-nav>li>a:hover {
    color: #b59357;
    border-color:  #b59357;
    border-bottom: solid;
    border-width: 8px;
    width:100%;
    background-position: 100% 0;
    /*-moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in;*/
    transition : border .2s ease-out;
}


.navbar-default .navbar-nav>.active>a {
  color: #b59357;
  border-color:  #b59357;
  background-color: #ffffff;
  border-bottom: solid;
  border-width: 8px;
}

.navbar-default .navbar-nav>.active>a:hover {
  color:#b59357;
  background-color: #ffffff;
  border-bottom: solid;
  border-width: 8px;
  border-color:  #b59357;
}

.linkrr:hover {
  color: #0719c0;
}


.page-footer {
	padding-top: 30px;
	padding-bottom: 40px;
	color: #ffffff;
    background-color:#866b54;
    border-color: #e7e7e7;
}

.footer {
  margin-top: 900px;
  width: 100%;
  padding-top: 30px;
  padding-bottom: 40px;
  margin-left: 0px;
	color: #ffffff;
    background-color:#866b54;
    border-color: #e7e7e7;
}

.container-fluid {
	padding-top: 30px;
	padding-bottom: 40px;
	color: #ffffff;
    background-color:#866b54;
    border-color: #e7e7e7;
}


.h3 .ngjyra {color:  white;}

.row { padding-bottom: 20px;}


.message {height:200px;}

.btn-default {
    color: #115d1b;
    background-color: #004d1;
    border-color: #ccc;
    font-size:1.2em;
}

.btn-default:hover {
  color: #ffffff;
  background-color: #b59357;
  border-color: #ccc;
}


@keyframes flickerAnimation { /* flame pulses */
  0%   { opacity:0; }
  20%  { opacity:1; }
}


@font-face {
  font-family: myFirstFont;
  src: url(../fonts/SourceSansPro-Bold.ttf);
}


@keyframes example {
  0%   { opacity:0; left:100px; top:0px;}
  20%  { opacity:1; left:0px; top:0px; }
}

/* The element to apply the animation to */

.baneritop {
  background-image: url('../images/top.jpg');
  margin-top: 50px;
  background-repeat: no-repeat;
  height: 300px;
  width:100%;
}

#myCarousel {
  padding-top: 50px;
  background-color: #97816c;
  

}

@media screen and (max-width: 800px) {
  
  #myCarousel {
    margin-top: 50px;
    display:none;
  }

  .backce {
    background-image: url('../images/backcesmall.jpg');
    height: 891px;
    background-repeat: no-repeat;
  }


.navbar-default .navbar-nav {
  margin-top: -80px;
  margin-left: 0px;
}

.logo {
    background-image: url('../images/logo.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100%; height: 100%; width: 100px;
    margin-top: -70px;
    margin-left: 0px;
    height: 99px;
    width: 300px;
    background-color: white;
  }

  .navbar-default .navbar-nav {
    margin-top: 30px;
  }

  .navbar-default {
    padding-top: 100px;
    padding-bottom: 0px;
    background-color: #ffffff;
    border-color: #ffffff;
} 

.hapsiraballina {
  background-position: center center;
  padding-top: 100px;
  background-size: cover;
  height: 0px;
  margin-top: 20px;
}

.navbar-nav {
  height: 300px;
}

.navbar-default .navbar-nav>li>a { 
  font-family: myFirstFont ;
  font-size: 1.50em; 
  color: #08002f; 
  padding-right: 15px; 
  padding-left: 15px; 
  padding-top: 15px;
  padding-bottom: 10px;
    
  border-color: none;
  border-bottom: hidden;
  border-width: 8px;
  position:relative;
}

.navbar-default .navbar-nav>.active>a:hover {
  color: #004d1;
  border-bottom: solid;
  border-width: 2px;
  border-color:#b59357;
}

.navbar-default .navbar-nav>li>a:hover {
  color: #b59357;
  border-color:  #b59357;
  border-bottom: solid;
  border-width: 8px;
  width:100%;
  background-position: 100% 0;
  /*-moz-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in;*/
  transition : border .2s ease-out;
}


.navbar-default .navbar-nav>.active>a {
color: #b59357;
border-color:  #b59357;
background-color: #ffffff;
border-bottom: solid;
border-width: 8px;
}

.navbar-default .navbar-nav>.active>a:hover {
color:#b59357;
background-color: #ffffff;
border-bottom: solid;
border-width: 8px;
border-color:  #b59357;
}


}

#googleMap {
  width: 100%;
  height: 400px;
  padding-bottom: 200px;

}

/* Hamburger menu */

#nav-icon4 {
  width: 60px;
  height: 45px;
  top: -40px;
  position: relative;
  margin: 0px 0px 0px;
  margin-bottom: -30px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}

 #nav-icon4 span {
  display: block;
  position: absolute;
  height: 7px;
  width: 100%;
  background: #0d085f;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}


/* Icon 4 */



#nav-icon4 span:nth-child(1) {
  top: 0px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-icon4 span:nth-child(2) {
  top: 18px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-icon4 span:nth-child(3) {
  top: 36px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-icon4.open span:nth-child(1) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  top: -3px;
  left: 8px;
}

#nav-icon4.open span:nth-child(2) {
  width: 0%;
  opacity: 0;
}

#nav-icon4.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 39px;
  left: 8px;
}

.navbar-default .navbar-toggle {
  position: relative;
    float: right;
    padding: 0px 0px;
    margin-top: 0px;
    margin-right: 15px;
    margin-bottom: 0px;
    background-color: transparent;
    background-image: none;
    border: 0px solid transparent;
    border-radius: 0px;
}

.navbar-default .navbar-toggle:hover {
  background-color: white;
}

.navbar-default .navbar-toggle:focus {
  background-color: white;
}