@import url(https://fonts.googleapis.com/css?family=Varela+Round);
@import url(https://fonts.googleapis.com/css?family=Lato);
@import url(https://fonts.googleapis.com/css?family=Allerta+Stencil);
@import url(https://fonts.googleapis.com/css?family=Raleway:300);





ul {
   margin: 0;
   padding: 0;
}

 .container {
   margin: 0 auto;
   padding: 120px 40px 120px 40px;
   overflow: hidden!important;
}


@media only screen and (max-width: 600px) {
  .container {
    padding-right: 10px;
    padding-left: 10px;
  }
}


@media only screen and (min-width: 1400px) {
  #theater.container {
    padding-left: 0px;
    padding-right: 0px;
  }
}

@media only screen and (min-width: 1400px) {
  #tv.container {
    padding-left: 0px;
    padding-right: 0px;
  }
}

@media only screen and (min-width: 1400px) {
  #music.container {
    padding-left: 0px;
    padding-right: 0px;
  }
}

@media only screen and (min-width: 1400px) {
  #metaglotisi.container {
    padding-left: 0px;
    padding-right: 0px;
  }
}


#sticky-social {
   left: 0;
   position: fixed;
   top: 150px;  
}

#sticky-social a { 
   display: block;
   height: 35px;
   font: 16px "Open Sans", sans-serif;
   line-height: 35px;
   position: relative;
   text-align: center;
   width: 35px;
}



body {
  background-color: #564E4B;
}


body,
p {
	  font-family:' Varela Round', sans-serif;
    line-height: 30px;
    color: #f1f1f1;
    font-size: 16px;
  }
  

  p {
    font-size: 16px;
    color: #f1f1f1; 
    text-align: justify;
  }


  @media only screen and (max-width: 767px) { 
  p {
    text-align: left;
  }
} 

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
  	font-family:' Varela Round', sans-serif;
    color:#f1f1f1; 
    letter-spacing: 8px;    
    margin: 10px 0 30px 0;
    line-height: 30px;
    font-weight: 600;
  }

  h1 {
    font-size: 34px;
  }

  @media only screen and (max-width: 600px) and (min-width: 381px) {
    h1 {
      font-size: 30px; 
      letter-spacing: 4px; 
    }
  }

   
  @media only screen and (max-width: 380px) {
    h1 {
      font-size: 27px;
      letter-spacing: 2px; 
    }
  }



  li {
  	letter-spacing: 1px;
  	font-family:' Varela Round', sans-serif;
    font-size: 15px;
    font-weight: 600;  
    line-height: 34px; 
  }


  dd, 
  dl {
    letter-spacing: 1px;
    font-family:' Varela Round', sans-serif;
    font-size: 15px;
    font-weight: 600; 
    line-height: 34px;
  }

  ul {
    list-style: square; 
  }


 


  .fa-youtube {
    color: red;
  }  

  .fa-youtube:hover,  .fa-youtube:focus {
    color:rgba(250,0,0,0.4); 
  } 


  .fa-ul {
    margin-left: 0px;
  }



  
  
  #wowslider-container1 {
    width: 100%;
    height: 100%;
  }
 

  
  .item {
    padding-bottom: 0%;
  }

  
  

  .carousel {
    margin-top: 69px;
  }
 
  .carousel-inner img {  
    width: 100%;
    height: 100%; auto;   
  }

  .carousel-inner {
    width: 100%;
    height: 100%;
  }

  .carousel-caption h2 {
    background-color: #6B6868;
    color: #ffffff;
    padding: 20px;
    opacity: 0.5;
  }

  @media only screen and (max-width: 480px) {
    .carousel-caption {
      display: none; 
    }
  }


 

  @media only screen and (max-width: 991px) {
      .header {
        margin-top: 80px;
        padding-bottom: 0px;
        text-align: center;
        font-size: 30px;        
      }
  }


  .header a {
    color: #ffffff;
  }

 
  #myNavbar li {
    font-size: 12px;
    letter-spacing: 4px;
    font-family:'Raleway:300', sans-serif;
    font-weight: bold; 
  } 

 .navbar-brand {
    font-size: 20px; 
    font-weight: bold;
  }


  @media only screen and (max-width: 860px) {
    .navbar-brand {
    font-size: 16px; 
    font-weight: bold;
    letter-spacing: 2px;
    }
  }

 .navbar-nav .active {
    background-color: #29292c !important;
    color: black !important;
  }   

  #myNavbar .dropdown-menu {
    width: 25px;
    height: auto;
    background-color: #535050; 
    border: none;
    font-size: 12px;
    font-weight: bold;          
  }

  #myNavbar .dropdown-menu .active {
    background-color: #29292c !important;
  } 

  #myNavbar .dropdown-menu :hover {
    background-color: #29292c !important; 
    font-weight: bold;
  }


  #myNavbar .dropdown-menu li a {
    line-height: 30px;
    font-weight: bold;
    padding-left: 8px; 
    letter-spacing: 3px;     
  }
  
  
   #myNavbar .dropdown-menu li a:hover {
    font-weight: bold;
  }

  .navbar {
      height: 70px;
      font-family: 'Varela Round', sans-serif;
      margin-bottom: 0;
      background-color: #605d5d; 
      border: 0;
      font-size: 12px !important;
      letter-spacing: 4px;
      opacity: 0.97; 
  }
  .navbar li a, .navbar .navbar-brand { 
      color: #ffffff !important;
      line-height: 40px;
  }
  .navbar-nav li a:hover {
      color: black !important;
  }
  .navbar-nav li.active a {
      color: #fff !important;
      background-color: #29292c !important;
      font-weight: bold;
  }
  .navbar-default .navbar-toggle {
      border-color: transparent;
      margin-top: 30px; 
      margin-right: 0px;
  }

  .collapse {
    background-color: #605d5d; 
    opacity: 1;        
    overflow: hidden!important;
    height: 100% !important; 
    width: 100%;        
  }

  

  .nav-tabs li a {
    color: #ffffff; 
    font-weight: bold;     
  }

  .visible-xs {
    margin-top: 0px;
  }


 
  
  .bg-1 {
      background: #6B6868;
      color: #ffffff;
  }

  .bg-1 h3 {color: #ffffff;}
  .bg-1 p {font-style: italic;}

  


  .img-thumbnail.person {
    background-color: black;
    text-decoration: none;
  }

  .img-responsive.person {
    background-color:rgba(0,0,0,1);
  }

  .thumbnail {
      padding: 0 0 15px 0;
      border: none;
      border-radius: 0;
  }
  .thumbnail p {
      margin-top: 15px;
      color: #555555;
  }


  .btn.sweet-info:hover, .btn.sweet-info:focus {
      border: 1px solid #333333;
      background-color: #ffffff;
      color: #000000;
  }

  .btn {
      padding: 10px 20px;
      background-color: #333333;
      border: 1px solid #333333;
      color: #f1f1f1;
      border-radius: 0;
      transition: .2s;
      font-weight: bold;
  }

  .btn:hover, .btn:focus {
      border: 1px solid #333333;
      background-color: #ffffff;
      color: #000000;
      font-weight: bold;
  }

  .embed-responsive-item {
    padding: 0px;
    margin-left: 0px;
    margin-right: 0px;    
  }
  .embed-responsive {
    padding-left: 0px;
    padding-right: 0px;
  }



  .modal-content {
  	background-color: #605d5d; 
  }





  .animated.zoomIn {
  	animation-duration: 6s ease-in-out;
    animation-delay: 0.5s;
    animation-iteration-count:1; 
    -webkit-animation-duration: 6s ease-in-out;
    -webkit-animation-delay:0.5s;
    -webkit-animation-iteration-count:1; 
  }
  

  .animated.slideInLeft {
    
    animation-duration: 6s ease-in-out;
    animation-delay: 0.1s;
    animation-iteration-count: 1;
    -webkit-animation-duration: 6s ease-in-out;
    -webkit-animation-delay: 0.1s;
    -webkit-animation-iteration-count:1;
  }                                   
 
  .animated.slideInRight {
     animation-duration: 6s ease-in-out;
    animation-delay: 0.1s;
    animation-iteration-count:1; 
    -webkit-animation-duration: 6s ease-in-out;
    -webkit-animation-delay: 0.1s;
    -webkit-animation-iteration-count:1; 
  }                            


 .textOverImage {
	transition: 0.6s ease-in-out;
  -webkit-transition: 0.6s ease-in-out;
  -moz-transition: 0.6s ease-in-out;
  -o-transition: 0.6s ease-in-out;
  -ms-transition: 0.6s ease-in-out;
	background-position: center;
  background-repeat: no-repeat;
	width: 400px; 300px;
  height: 400px;
	margin: 10px;
  background-size: 100%;
}
 
 .textOverImage:hover {
 	background-size: 120%;
 }

 .textOverImage:after {
 	content: attr(data-text);
 	background-color: rgba(0,0,0,0.0);
 	color: #fff;
  position: relative;
 	opacity: 0;
 	transition: 0.6s ease-in-out;
  -webkit-transition: 0.6s ease-in-out;
  -moz-transition: 0.6s ease-in-out;
  -o-transition: 0.6s ease-in-out;
  -ms-transition: 0.6s ease-in-out;
 	overflow: hidden;
 	padding: 10px;
  top: 0%;
  bottom: 0;
  left: 0;
  right: 0;
 	font-size: 20px;
 } 
  

 .textOverImage:hover:after {
 	opacity: 1;
  top: 80%;
 	padding: 30px;
 } 




.textOverImage2 {
  transition: 0.6s ease-in-out;
  -webkit-transition: 0.6s ease-in-out;
  -moz-transition: 0.6s ease-in-out;
  -o-transition: 0.6s ease-in-out;
  -ms-transition: 0.6s ease-in-out;
  background-position: center;
  background-repeat: no-repeat;
  width:100%;
  height: auto;
  margin: 0px;
  background-size: 100%;    
} 
 
 .textOverImage2:hover {
  background-size: 120%;
 }

 

/* Kentriko ZOOM */


.thumbnail {
  overflow: hidden !important;
  height: 100%;
  width: 100%;
  max-width: 400px;
  padding: 0px;
  border-radius: 0px;
  transition: 0.6s ease-in-out;
  -webkit-transition: 0.6s ease-in-out;
  -moz-transition: 0.6s ease-in-out;
  -o-transition: 0.6s ease-in-out;
  -ms-transition: 0.6s ease-in-out;
  background-position: center;
  background-repeat: no-repeat;
  margin: 0px; 10px;
  background-size: 100%;
  background-color: inherit; 
  border: none;
}

.thumbnail img {
  transition: 0.6s ease-in-out;
  -webkit-transition: 0.6s ease-in-out;
  -moz-transition: 0.6s ease-in-out;
  -o-transition: 0.6s ease-in-out;
  -ms-transition: 0.6s ease-in-out;  
}

.thumbnail img:hover {
  -moz-transform: scale(1.2);
  -webkit-transform: scale(1.2);
  -o-transition: scale(1.2);
  -ms-transition: scale(1.2);
  transform: scale(1.2);
  overflow: hidden !important;
}


@media only screen and (max-width: 767px) {
  .thumbnail {
    margin-bottom: 15px;
  }
}




/*End Kentriko ZOOM */



/***Thumbnails gallery***/
.thumbnails  a {
  float: center;
  vertical-align:top; 
  margin: 0px;
  width: auto; 300px;
  max-width: 400px;
  height: 100%;
  padding: 0px;
  overflow: hidden !important;
}

img {
  width: 400px; 300px;
  max-width: 400px;
  height: 100%;
}

.thumbnails img {
  display: block;
  margin: 0px;
  width: 400px; 300px;
  max-width: 400px;
  height: auto;
} 


.img a {
   display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%; 
    height: 100%;
    max-height: auto; 
} 


@media only screen and (min-width: 992px) and (max-width: 1024px){
  .img a{
    width: 100%;
    height: 100%;
    max-height: auto;
    overflow: hidden !important;
  }
}


@media only screen and (min-width: 768px) and (max-width: 991px){
  .img a{
    width: 100%; 90%;
    height: 100%;
    max-height: auto;
    overflow: hidden !important;
  }
}

@media only screen and (max-width: 768px){
  .img a{
    margin-bottom: 15px;
  }
}





  @media only screen and (max-width: 480px){
    .container#gallery{
      padding-top: 60px;
      width: 350px; 400px;
      max-width: 400px;
      height: 100%;
      padding-right: 0px;
      padding-left: 0px;
      margin: 0px;
      overflow: hidden !important;
    }
  }

  @media only screen and (max-width: 480px){
    .container#gallery1{
      padding-top: 120px; 60px;
      width: 350px; 400px;
      max-width: 400px;
      height: 100%;
      padding-right: 0px;
      padding-left: 0px;
      margin: 0px;
      overflow: hidden !important;
    }
  }


  #gallery .row {
    margin: 0px;
    padding: 0px;
  }

  #gallery1 .row {
    margin: 0px;
    padding: 0px;
  }


 .gallerynew {
  margin-left: 0px;

 }

 .gallerynew2 {
  margin-left: 0px;

 }

 .gallerynew3 {
  margin-left: 0px;

 }






@media only screen and (max-width: 1200px){
	.gallerynew2{
		margin-left: 0px;
	}
}
 
 
@media only screen and (max-width: 768px){
	.gallerynew3{
		margin-left: 0px;
	}
}




  #photos {
    width: 100%;
  }


  #info {
    width: 100%;
  }



  #faidra {
    margin-top:0px;
    background: url(../images/faidra.jpg) repeat fixed top;  
    width: 100%;
    height: 100%;
  }

  
  @media only screen and (min-width: 768px){
    #faidra1 {
    margin-left: 0px;
    }
  }



  #endoftheworld {
    margin-top:0px;
    background: url(../images/endoftheworld.jpg) repeat fixed top;  
    width: 100%;
    height: 100%;
  }

  
  @media only screen and (min-width: 768px){
    #endoftheworld1 {
    margin-left: 0px;
    }
  }


  #atairiastozevgari {
    margin-top:0px;
    background: url(../images/atairiastozevgari.jpg) repeat fixed top;  
    width: 100%;
    height: 100%;
  }

  
  @media only screen and (min-width: 768px){
    #atairiastozevgari1 {
    margin-left: 0px;
    }
  }

  #atairiastozevgari a {
    color: #ffffff;
  }



  
  #kambanellis {
    margin-top:0px;
    background: url(../images/kambanellis.jpg) repeat fixed top;  
    width: 100%;
    height: 100%;
  }

  
  @media only screen and (min-width: 768px){
    #kambanellis1 {
    margin-left: 0px;
    }
  }


  #ismenemexico {
    margin-top:0px;
    background: url(../images/ismenemexico.jpg) repeat fixed top;  
    width: 100%;
    height: 100%;
  }

  
  @media only screen and (min-width: 768px){
    #ismenemexico1 {
    margin-left: 0px;
    }
  }


  #ismene {
    margin-top:0px;
    background: url(../images/ismeneposternew2.jpg) repeat fixed top;  
    width: 100%;
    height: 100%;
  }

  
  @media only screen and (min-width: 768px){
    #ismene1 {
    margin-left: 0px;
    }
  }


  #newstria {
    margin-top:0px;
    background: url(../images/newstriaposter.jpg) repeat fixed top;  
    width: 100%;
    height: 100%;
  }

  
  @media only screen and (min-width: 768px){
    #newstria1 {
    margin-left: 0px;
    }
  }


  #salome {
    margin-top:0px;
    background: url(../images/salomenew2.jpg) repeat fixed top;  
    width: 100%;
    height: 100%;
  }


   @media only screen and (min-width: 768px){
    #salome1 {
    margin-left: 0px;    
    }
  }


  @media only screen and (max-width: 480px){
    #salome h5{
    letter-spacing: 2px;    
    }
  }

  @media only screen and (max-width: 480px){
    #salome p{
    letter-spacing: normal;    
    }
  }

  


  #medea {
    margin-top:0px;
    background: url(../images/medeaposter.jpg) repeat fixed top;  
    width: 100%;
    height: 100%;
  }

  
  @media only screen and (min-width: 768px){
    #medea1 {
    margin-left: 0px;
    }
  }


  #tv {
    margin-top:0px;
    background: url(../images/graybackground.jpg) repeat fixed top;  
    width: 100%;
    height: 100%;
  }


  #tv .row {
    margin-right: 200px;
    margin-left: 200px;
  }


  @media only screen and (max-width: 1366px) {
    #tv .row {
    margin-right: 0px;
    margin-left: 0px;
    }
  }


  
  .bg-new {
  	background-color: rgba(250,250,250,0.6);
  	padding: 10px;
    padding-top: 30px;
  	margin-left: 60px;
  	margin-top: 0px;
  }

  @media only screen and (max-width: 768px) {
  	.bg-new{
  		margin-left: 0px;
  	}
  }


  .link2 {
    color: rgba(0,0,0,0.6);
  }


  .link2:hover,  .link2:focus {
    color: black;
  }



  @media only screen and (max-width: 991px) {
    .photosindex {
      padding-top: 50px;
    }
  }

  @media only screen and (max-width: 991px) {
    .videopayuta {
      padding-top: 20px;
    }
  }

  @media only screen and (max-width: 991px) {
    .videopoppins {
      margin-top: 30px;
    }
  }




  #contact {
  	letter-spacing: 1px;    
  }

 
  .form-group {
    width: 100%;
    margin-bottom: 10px;
    height: 100%; 40px;
    margin-left: 0px; -15px;
    margin-right: 0px; 
    color: rgba(0,0,0,0.8); 
  }
 
  .textarea {
    height: 120px;
    resize: none;
  }


  #name {
    margin-top: 10px; 
  }

  #map {
      
    width: 100%;
    height: 400px;
    -webkit-filter: grayscale(80%);
    filter: grayscale(80%);
  }  
  
  
  .form-control {
    border-radius: 0;
  }

  #contact input, #contact textarea {
  width: 100%;
  background-color: #6B6868;
  border: 1px solid #999999;
  color: #ffffff;
}


#contact input:focus, #contact textarea:focus {
  box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  background-color: #333333 !important;
}

#contact input:hover, #contact textarea:hover {
  box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  background-color: #333333 !important;
}



#contact  #sendmessage {
  color: #18d26e;
  border: 1px solid #18d26e;
  display: none;
  text-align: center;
  padding: 15px;
  font-weight: 600;
  margin: 15px;
}

#contact  #errormessage {
  color: red;
  display: none;
  border: none; 1px solid red;
  text-align: center;
  padding: 15px;
  font-weight: 600;
  margin: 15px;
}

#contact #sendmessage.show, #contact #errormessage.show, #contact .show {
  display: block;
}

#contact .validation {
  color: red;
  display: none;
  margin: 0 0 20px;
  font-weight: 400;
  font-size: 13px;
}

#contact .btn-send {
  color: #ffffff;
  font-weight: bold;
  font-size: 15px;
  background-color: #333333;
  border-color: #333333;
}


#contact .btn-send:hover, #contact .btn-send:focus {
  background-color: #ffffff; 
  border-color: #333333;
  color: #000000;
  font-weight: bold;
}


.form-group input::placeholder, .form-group textarea::placeholder {
  color: #ffffff; 
  font-size: 14px; 
  line-height: 1.3em;   
}

.form-group input::-webkit-input-placeholder, .form-group textarea::-webkit-input-placeholder {
  color: #ffffff;
  font-size: 14px; 
  line-height: 1.3em;    
}

.form-group input:-moz-placeholder, .form-group textarea:-moz-placeholder {
  color: #ffffff;
  font-size: 14px; 
  line-height: 1.3em;       
}

.form-group input::-moz-placeholder, .form-group textarea::-moz-placeholder {
  color: #ffffff;
  font-size: 14px; 
  line-height: 1.3em;   
}

.form-group input:-ms-input-placeholder, .form-group textarea:-ms-input-placeholder {
  color: #ffffff;
  font-size: 14px; 
  line-height: 1.3em;   
}

.form-group input::-ms-input-placeholder, .form-group textarea::-ms-input-placeholder {
  color: #ffffff;
  font-size: 14px; 
  line-height: 1.3em;     
}

@media only screen and (max-width: 991px) {
  form {
    padding-top: 50px;
  }
}  

input[type=text] {
  width: 100%;
  height: 50px; 
}

input[type=email] {
  width: 100%;
  height: 50px; 
}

input[type=submit] {
  width: 100%;
  height: 50px; 
}



  #footer {
    width: 100%;
    letter-spacing: 2px;
    background-color: #605d5d; 
    color: #ffffff; 
    border: 1px solid gray;
  }

  .footer-content {
    padding-top: 80px;
    padding-bottom: 70px;
  }


  

  footer p {
    font-size: 14px;
    text-align: center;
  }

  footer a {
      color: #ffffff;
      line-height: 40px;
      font-weight: bold;
  }
  footer a:hover {
      color: #000000;
      text-decoration: none;
  }  
 

  
  .up-arrow {
    text-align: center;
  }
  

 .glyphicon-chevron-up {
  	padding-top: 10px;
    text-align: center;
  }



  .footer-third {
    padding-top: 0px;
    margin-top: 0px;
	}

  


  @media only screen and (max-width: 991px){
    .footer-second {
      padding-bottom: 40px;
    }
  }  


  @media only screen and (max-width: 991px){
    .footer-adress {
      padding-bottom: 40px;
    }
  } 



/*-- COOKIE --*/

#cookie_directive_container {
  bottom: 0;
  position: fixed;
}

#cookie_directive_container .navbar {
  height: 150px; auto;  
  opacity: 1; 
  z-index: 1;
}

@media only screen and (max-width: 768px) and (min-width: 481px) {
  #cookie_directive_container .navbar {
  height: 200px; 
  }
}

@media only screen and (max-width: 480px) and (min-width: 401px) {
  #cookie_directive_container .navbar {
  height: 250px; 
  }
}

@media only screen and (max-width: 400px) {
  #cookie_directive_container .navbar {
  height: 350px; 
  }
}

#cookie_directive_container p {
  color: #ffffff;
  top: 50%;  
  padding-right: 40px;
  padding-left: 40px;
  font-size: 15px;
  letter-spacing: 1px;
  margin-top: -100px; 
}

#cookie_directive_container .text-muted a {
   color: #ffffff;
   font-weight: bold;
}

#cookie_directive_container .text-muted a:hover {
   color: #333333; 
   font-weight: bold;
} 


#cookies a {
  color: #333333;
}

#cookies a:hover, #cookies a:focus {
  color: #ffffff;
}

@media only screen and (max-width: 1280px) and (min-width: 992px) {
  #cookies {
    padding-left: 80px; 
    padding-right: 80px; 
  }
}

@media only screen and (max-width: 991px) {
  #cookies {
    padding-left: 40px; 
    padding-right: 40px; 
  }
}