@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:700');
body{margin:0px;padding-top:89px;}
h1 {font-size:50px;color:#FFFFFF;font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";margin-top: 0px;margin-bottom:0px,}
h1 span{color:#D5A92E;font-style: italic;}
h2 {color:#fff;font-size: 80px;}
.clear {clear:both}
.fa-whatsapp{font-size: 40px;color:#25D366}

#nav{background-color:#134B70;position:fixed;left:0px;top:0px;width: 100%;z-index:9999;box-shadow: 0px 0px 5px #000;}
#nav ul{text-align: left;margin-top: 20px;}
#nav ul li a{padding: 15px 15px}
#logo{width:20%;display:block;float: left}
.menu{width: 80%;float: left;text-align: left;}
#burger{color:#fff;font-size: 35px;position: absolute;top:50%;transform:translateY(-50%);right:50px;display:none;}
#cross {font-size: 35px;color:#fff;position: absolute;top:24px;right:52px;display:none;}
#burger:hover,#cross:hover {cursor:pointer}


.shownav #nav{top:50%;left:50%;transform:translate(-50%,-50%);width: 100%;height:100%;padding: 70px 0px 70px 0px;}
.shownav #nav ul li{width: 100%;margin:0px;text-align: center}
.shownav #logo{width:100%;text-align: center}
.shownav .menu{width:100%;}
.shownav #cross{display: block}

#banner{text-align: center;position:relative;overflow:hidden;max-height: 650px;}
#banner img{width:100%;}
#banner .banner_content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;max-width:90%;width:800px;}
#banner h1.big{font-size:100px;}
#banner .gold{color:goldenrod}
#banner p{font-size: 20px;color: #ffffff}
#banner em{color:#fff;font-weight:600;background-color: #D5A92E }
#sunnies{width:100%;height:100%;background-color:rgba(0,0,0,0.4);position:absolute;left:0px;top:0px;z-index:1;}

#elenco{width:400px;margin:0px auto;position:relative;z-index:2;color:white}
#elenco ul li{margin-bottom:10px;font-size: 23px;list-style: none;}
#elenco a{text-decoration: none;color:#B1B2B3;}
#elenco a:hover{color:#EAC459;}

#bloglayout{display: flex;justify-content: space-around;flex-wrap:wrap;text-align: center; color:#FFF;background-color:#134B70;padding-top:80px; padding-bottom: 60px;}
#bloglayout > div{background-color: #508C9B; flex-basis: 30%;max-width: 500px;margin-top:20px;margin-bottom:20px;overflow: hidden;border-radius: 25px;box-shadow: 0px 0px 15px #03346E;}
#bloglayout > div:hover{box-shadow: 0px 0px 25px;color:#EEEEEE;}
#bloglayout > div img{max-width:100%;}
#bloglayout > div.active{box-shadow: 0px 0px 205px;color:#EAC459;background-color: #134B70;}
#bloglayout a{color:#fff;text-decoration: none;}

#pagecontent{color:#134B70;margin-right: auto;margin-left: auto;max-width: 1200px;padding:20px}
#pagecontent img{max-width:100%;}
#pagecontent h1{color:#134B70}
#pagecontent .imgright{float: right;width:500px;padding:10px 0px 10px 20px;}
#pagecontent .imgleft{float:left;width:500px;padding:10px 20px 10px 0px;}

/*footer sections*/
.chat{display: flex;background-color:#134B70; padding:50px 150px 150px 150px; font-size: 40px;color:#fff;text-align: center;}
.chat > div{align-self:center;flex-basis: 50%}
.me {width: 200px;border-radius: 500px;overflow: hidden;}
.me img {width: 100%;}
.chat img:hover{box-shadow: 0px 0px 25px;}
.greek{background-image: url('https://rafah.it/IMG/greek.JPG');background-size: 230px 100px;height: 100px}
.menu{
padding: 10px 0px 10px 0px;
transform-origin: 100% 50%;
}
.menu ul{
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
.menu li{
display: inline-block;
margin: 0 15px;
}
.menu a{
font-size: 22px;
text-transform: uppercase;
text-decoration: none;
color: #fff;
display: block;
position: relative;
padding: 4px 0;
}
.menu a::before{
content: "";
width: 100%;
height: 6px;
position: absolute;
left: 0;
bottom: 0;
background: #fff;
transition: 0.5s transform ease;
transform: scale3d(0,1,1);
transform-origin: 0 50%;
}
.menu a:hover::before{
transform: scale3d(1,1,1);
}
.menu-1 a::before{
background: #0d5eaf ;
transform-origin: 50% 100%;
}
.menu-1 a:hover::before{
transform-origin: 0 50%;
} 

@media screen and (max-width: 900px) {
  h1 {font-size:30px;}
	nav{display:none;}
	#burger{display:block;}
	.menu-1 a::before,.menu a::before{background-color: transparent;transform:none;transition:none}
	.shownav nav{display:block;}
	.shownav #burger{display:none}
  #elenco ul li{margin-bottom:0px;font-size: 18px;}
  #bloglayout > div{flex-basis: 46%;}
  #banner img{min-width:900px;}
	#banner p{font-size: 16px;}
	.chat{font-size: 30px;text-align: center;}
}

@media screen and (max-width: 400px) {
	#pagecontent .imgright, #pagecontent .imgleft{padding:10px 0px 10px 0px;}
	#banner h1.big{font-size:50px;}
	.chat{display: flex;background-color:#134B70; padding:50px 0px 50px 0px; font-size: 40px;color:#fff;text-align: center;}
}

body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}
  form label{color:#fff}
input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #fff;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

input[type=submit] {
  background-color: #134B70;
  color: white;
  padding: 15px 23px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit] {
  background-color: #fff;
  color:#134B70;
  font-size:20px;
}

.container {
  border-radius: 5px;
  background-color: #134B70;
  padding: 20px;
} 




* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}



/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}