/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 24 Σεπ 2018, 7:39:38 μμ
    Author     : matrix
*/

/*Contact Modal styling*/
#contactHeaderLabel,#loginHeaderLabel{
    font-family: 'Lora';
    font-weight: bolder;
    font-size: 50px;
    border: none;
    color: #ffffff;
}
@media only screen and (max-width: 768px) {
    #contactHeaderLabel,#loginHeaderLabel{
    font-family: 'Lora';
    font-weight: bolder;
    font-size: 30px;
    border: none;
    color: #ffffff;
}
}
#contactNameLabel,#contactEmailLLabel,#contactTextareaLabel,#loginNameLabel,#loginPasswordLabel,#contactPhoneLabel{
    font-weight: bolder;
    font-size: 25px;
}
#modalTextarea,#contactEmail,#contactName,#loginPassword,#loginName,#contactPhone{
    color: #000;
    font-weight:600;
}
.modal-content{
     background: rgb(206, 224, 224);
     border:none;
}
#modalHeader{
    background:rgba(33,37,41, 0.7);
    margin: 0px;
    padding: 0px; 
    border:none;
}
#contactEmailHelp{
    color:black;
    font-weight:bold;
    background-color:rgb(210, 236, 247);
}
.form-control:focus {
    border-color:navajowhite;
    box-shadow:5px 5px 5px 5px #7B3B0D ;
}
#contact{
    font-size: 1.3rem;
}
.contactBtn{
    background-color: #86D2BC ;
}



/*Styling for header image Title and navigation-bar*/

 .navbar a{
    font-size: 16px !important;
}
.bg-image-full {
  background: no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
   min-height: 250px;
 filter: grayscale(40%);
 margin-bottom: 20px;
 
}

@media (min-width: 992px) {
.bg-image-full {
  background: no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
   min-height: 610px;
 filter: grayscale(40%);
}}
@media (min-width: 1024px) {
.bg-image-full {
  background: no-repeat  scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
   min-height: 810px;
 filter: grayscale(40%);
}}
@media (max-width: 600px) {
.bg-image-full {
  background: no-repeat;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  background-size: contain;
  -o-background-size: contain;
   min-height: 210px;
 filter: grayscale(40%);
 margin-top:4px;
}}


/*style for add class with jquery and js in contact form for content check*/
.jqueryErrorContactName, .jqueryErrorContactEmail,.jqueryErrorContactTextarea, .jqueryErrorContactPhone {
    border-color: red ;
    border-width: 2px;
    box-shadow: 5px 5px red;
}

/*style for add class with jquery and js in login form for content check*/
.jqueryErrorLoginName{
    border-color: red ;
    border-width: 2px;
    box-shadow: 5px 5px red;
}
.jqueryErrorLoginPassword{
    border-color: red ;
    border-width: 2px;
    box-shadow: 5px 5px red;
}


/*style for login*/
#modalFooterRegister > a{
    float: right;
    color:#000;
    text-decoration : none;
    padding: 7px;
    margin: 0px;
    font-weight:700;
    font-size: 20px;
}
#modalFooterRegister > a:hover{
    background-color: rgba(134,210,188, 0.5);
    border-radius:5px;
}
#passwordLogin,#loginName{
    color: #000;
    font-weight:600;
}
#login{
    font-size: 1rem;
}
.loginBtn{
    background-color: #86D2BC ;
}

/*style for revealing password in login form */
#revealPassLogin{
    float: right;
    margin-right: 10px;
    margin-top: -30px;
    position: relative;
    z-index: 3;
}
/*style for index page intro description*/
@media (max-width: 992px) {
  .page-section{
    margin-top: 2rem;
    
} 
}
/*logo carousel*/ 
.logoCarousel {
    align-items: center;
	background: #E3E3E3;
	display: flex;
	height: 200px;
	justify-content: center;
}
@-webkit-keyframes scroll {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(calc(-350px * 7));
            transform: translateX(calc(-350px * 7));
  }
}

@keyframes scroll {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(calc(-350px * 7));
            transform: translateX(calc(-350px * 7));
  }
}
.slider {
  background: white;
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.125);
  height: 100px;
  margin: auto;
  overflow: hidden;
  position: relative;
  width: 1024px;
}
.slider::before, .slider::after {
  background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
  content: "";
  height: 100px;
  position: absolute;
  width: 55px;
  z-index: 2;
}
.slider::after {
  right: 0;
  top: 0;
  -webkit-transform: rotateZ(180deg);
          transform: rotateZ(180deg);
}
.slider::before {
  left: 0;
  top: 0;
}
.slider .slide-track {
  -webkit-animation: scroll 40s linear infinite;
          animation: scroll 40s linear infinite;
  display: flex;
  width: calc(350px * 14);
}
.slider .slide {
  height: 100px;
  width: 300px;
  margin: 0px 15px;
}
.slider .slide-track:hover, .slide-track:hover{
     animation-play-state: paused;
}
@media (max-width:768px){
    .slider::before, .slider::after {
         width: 43px;  
        }
}
/*style for index page we are proud*/
.proud{
    font-size: 1rem;
}
@media (min-width: 768px) {
   .proud{
    font-size: 20px;
} 
}
/*style for index page we are proud*/
.history{
    font-size: 0.9rem;
    text-align: justify;
    line-height: 1.3;
}
@media (min-width: 768px) {
   .history{
    font-size: 20px;
    text-align: justify;
} 
}
.underconstruction {
     padding-top:20px;
  background: no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
   min-height: 250px;
 filter: grayscale(40%);
 
}
@media (min-width: 992px) {
.underconstruction {
  background: no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
   min-height: 610px;
 filter: grayscale(40%);
 
}}
/*this is for swiper styling*/
.swiper-container {
      width: 100%;
      padding-top: 50px;
      padding-bottom: 50px;
    }
.swiper-slide {
      background-position: center;
      background-size: cover;
      width: 300px;
      height: 300px;
    }
@media only screen and (max-width: 768px)  {
    .swiper-container{
        padding-top: 0px;
    }  }
/*style for close mark on  modals*/
#closeMark{
    font-size: 2rem;
    color:rgb(206, 224, 224);
}
#closeButton:hover > #closeMark{
    color:#ffffff;      
}
/*this is for scroll to top button*/
#back-to-top {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 30px; /* Place the button at the bottom of the page */
  right: 20px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: #0069d9; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 10px 15px;
  border-radius: 50%; /* Rounded corners */
  font-size:30px; /* Increase font size */
  -webkit-transition: .3s;
  -moz-transition: .3s;
  transition: .3s;  
}     

@media (max-width: 768px) {
  #back-to-top{font-size: 20px; /* Increase font size */}
    
}