html,body
{
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  border: 0;
  font-family: Fira Sans;
  font-size: 20px;
  color: snow;
}

body{
background:linear-gradient(#0D2F43, #1C4F6C, #0D2F43);
background-size: cover;
background-position: center !important;
background-repeat: no-repeat !important;
background-attachment: fixed;
}

h1,h2,h3
{
  text-align: center;
  color: orange;
}

h1
{
	margin: 10px auto; 
	font-size: 42px; 
	text-shadow: 2px 2px 5px #404040; 
	font-family: Satisfy;
}

h2
{
	margin: 5px auto;
	font-size: 38px;
	text-shadow: 2px 2px 5px #404040;
	color: snow; font-family: Satisfy;
}

h3
{
	margin: 5px auto;
	font-size: 28px;
	word-wrap: break-word;
	font-weight: 400;
	font-family: Satisfy;
}

a, u {text-decoration: none; color: yellow;}

li {padding: 10px;}

.sfondoGradientBianco {background:linear-gradient(#1C4F6C00, #ffffff, #1C4F6C00);}

.JolbeyRental
{
	text-align: center;
	margin: 10px auto;
	font-size: 42px;
	font-family: Satisfy;
	text-shadow: 2px 2px 5px #404040;
}

.immagine
{
	border-style: solid;
	border-radius: 5px;
}

.sezioneTrasparente
{
  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
  justify-content: center;
  width: 100%;
  min-height: 400px;
  margin: 0 auto;
  box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.2) inset;
  background-attachment: fixed !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.sfondo1{background: url("../img/casina-sul-mare.jpg");}
.sfondo2{background: url("../img/isola-infohub.jpg");}
.sfondo3{background: url("../img/sentiero-montagna-sul-mare.jpg");}
.sfondo4{background: url("../img/faro-casa.jpg");}
.sfondo5{background: url("../img/land-rental.jpg");}

ul.nav-ul
{
  width: 100%;
  height: 80px;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.1) inset;
  letter-spacing: 2px;
  position: fixed;
  background-color: #16425cad;
}

.nav-ul-R
{
  height: 80px;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.1) inset;
  letter-spacing: 2px;
  float: right;
}

li.nav-buttons 
{
  min-width: 120px;
  height: 100%;
  float: left;
  font-size: 16px;
}

li.nav-title 
{
  display: block;
  max-width: 70%;
  height: 100%;
  padding: 0 20px 0 20px;
  float: left;
}

li.nav-title img
{
  display: block;
  max-width: 100%;
  height: 100%;
  vertical-align: middle;
}

li a.nav-link
{
  display: block;
  height: 100%;
  color: white;
  text-align: center;
  padding: 20px;
  text-decoration: none;
  border-radius: 3px;
  border-right: 1px solid #e6e6e6;
  transition: 0.5s;
}

li a.nav-link:hover:not(.active)
{
  background-color: #e6e6e6;
  color: #1a1a1a;
  box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.1) inset;
  transform: scale(1.1,1.1);
  transition: 0.5s;
}

li a.nav-link.active
{
  background-color: #e6e6e6;
  color: #1a1a1a;
  font-weight: bold;
  box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.1) inset;
}

.nav-toggle
{
  display: none;
  width: 60px;
  height: 60px;
  float: right;
  border-style: solid;
  border-color: black;
  border-radius: 4px;
  background: snow;

}

.nav-toggle div
{
  width: 35px;
  height: 2px;
  background-color: black;
  margin: 12px auto;
  border-radius: 10px;
  text-align: center;
  vertical-align: middle;
}

.mobileMenu
{
  display: none;
  width: 100%;
  height: auto;
  padding: 0;
  margin: 0 auto;
  margin-top: 80px;
  position: fixed;
}

.mobileMenu ul
{
  list-style: none;
  width: 100%;
  padding: 0;
  margin: 0 auto;
  text-align: center;
  background-color: #1C4F6C;
}

.mobileMenu li
{
  width: 100%;
  padding: 15px 0 15px 0;
  margin: 0 auto;
  border: 1px;
  border-radius: 3px;
  box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.2) inset;
}

.mobileMenu a
{
  font-family: Roboto Slab;
  font-size: 32px;
  color: white;
  text-decoration: none;
}

.row
{
  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
  justify-content: center;
  width: 100%;
  height: auto;
  margin: 0 auto;
  padding: 0;
}

.rowVert
{
  display: flex;
  flex-flow: row wrap;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 0;
}

.rowFullH
{
  display: flex;
  flex-flow: row wrap;
  align-items: end;
  justify-content: center;
  width: 100%;
  height: 100vh;
  overflow: auto;
  margin: 0 auto;
  padding: 0;
}

.col
{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto;
  padding: 0;
}

.colTop
{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
  padding: 0;
}

.inlineFlex{ display: inline-flex; }
.alignSelfCenter {align-self: center;}
.alignCenter {align-items: center;}

.flexCenter
{
  align-items: center;
  justify-content: center;
}

.floatLeft {float: left;}
.floatRight {float: right;}

.whiteSpaceNormal {white-space: normal;}

/* FLexbox fix */
*
{
  max-width: 100%;
  min-height: 1px;
  box-sizing:border-box;
}

.col100{width: 100%;}
.col95{width: 95%;}
.col90{width: 90%;}
.col85{width: 85%;}
.col80{width: 80%;}
.col75{width: 75%;}
.col70{width: 70%;}
.col66{width: 66%;}
.col65{width: 65%;}
.col60{width: 60%;}
.col55{width: 55%;}
.col50{width: 50%;}
.col45{width: 45%;}
.col40{width: 40%;}
.col35{width: 35%;}
.col33{width: 33%;}
.col30{width: 30%;}
.col25{width: 25%;}
.col20{width: 20%;}
.col15{width: 15%;}
.col10{width: 10%;}
.colDiv12{width: 8.333333%;}
.col5{width: 5%;}

.mainContainer
{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  border-radius: 5px;
}

.toggleButton{outline: none !important;}
.deleteToggle{outline: none !important;}

.toggleShow button
{
  width: 80%;
  background-color: rgba(150, 20, 20, 0.8);
  color: white;
  outline: none !important;
  transition: 0.5s;
}

.toggleShow button:hover
{
  box-shadow: 0 0 10px 4px rgba(200, 30, 30, 0.9);
  transform: scale(1.1,1.1);
  transition: 0.5s;
}

.breakWordAll{word-break: break-all;}

.displayNone{display: none !important;}

.alignLeft{text-align: left;}
.alignCenter{text-align: center;}
.alignRight{text-align: right;}

.alignSelf-FlexStart{ align-self: flex-start; }
.alignSelf-FlexEnd{ align-self: flex-end; }
.alignSelf-Center{ align-self: center; }

.alignItems-FlexStart{ align-items: flex-start; }
.alignItems-FlexEnd{ align-items: flex-end; }
.alignItems-Center{ align-items: center; }

.flexDirectionRow{ flex-direction: row; }
.flexDirectionColumn{ flex-direction: column; }

.blockLeft
{
  display: block;
  text-align: left;
}

.blockRight
{
  display: block;
  text-align: right;
}

.blockCenter
{
  display: block;
  text-align: center;
  margin: auto;
}

.blockJustify
{
  display: block;
  text-align: justify;
}

.centerText{text-align: center;}

.height100{height: 100%;}

.padding0{padding: 0px !important;}
.padding5{padding: 5px !important;}
.padding10{padding: 10px !important;}
.padding20{padding: 20px !important;}
.padding30{padding: 30px !important;}
.padding40{padding: 40px !important;}
.padding50{padding: 50px !important;}

.paddingTop0{padding-top: 0px !important;}
.paddingTop5{padding-top: 5px !important;}
.paddingTop10{padding-top: 10px !important;}
.paddingTop20{padding-top: 20px !important;}
.paddingTop30{padding-top: 30px !important;}
.paddingTop40{padding-top: 40px !important;}
.paddingTop50{padding-top: 50px !important;}

.paddingBottom0{padding-bottom: 0px !important;}
.paddingBottom5{padding-bottom: 5px !important;}
.paddingBottom10{padding-bottom: 10px !important;}
.paddingBottom20{padding-bottom: 20px !important;}
.paddingBottom30{padding-bottom: 30px !important;}
.paddingBottom40{padding-bottom: 40px !important;}
.paddingBottom50{padding-bottom: 50px !important;}

.paddingLeft0{padding-left: 0px !important;}
.paddingLeft5{padding-left: 5px !important;}
.paddingLeft10{padding-left: 10px !important;}
.paddingLeft20{padding-left: 20px !important;}
.paddingLeft30{padding-left: 30px !important;}
.paddingLeft40{padding-left: 40px !important;}
.paddingLeft50{padding-left: 50px !important;}

.paddingRight0{padding-right: 0px !important;}
.paddingRight5{padding-right: 5px !important;}
.paddingRight10{padding-right: 10px !important;}
.paddingRight20{padding-right: 20px !important;}
.paddingRight30{padding-right: 30px !important;}
.paddingRight40{padding-right: 40px !important;}
.paddingRight50{padding-right: 50px !important;}

.paddingV0{padding-top: 0px !important; padding-bottom: 0px !important;}
.paddingV5{padding-top: 5px !important; padding-bottom: 5px !important;}
.paddingV10{padding-top: 10px !important; padding-bottom: 10px !important;}
.paddingV20{padding-top: 20px !important; padding-bottom: 20px !important;}
.paddingV30{padding-top: 30px !important; padding-bottom: 30px !important;}
.paddingV40{padding-top: 40px !important; padding-bottom: 40px !important;}
.paddingV50{padding-top: 50px !important; padding-bottom: 50px !important;}

.paddingH0{padding-left: 0px !important; padding-right: 0px !important;}
.paddingH5{padding-left: 5px !important; padding-right: 5px !important;}
.paddingH10{padding-left: 10px !important; padding-right: 10px !important;}
.paddingH20{padding-left: 20px !important; padding-right: 20px !important;}
.paddingH30{padding-left: 30px !important; padding-right: 30px !important;}
.paddingH40{padding-left: 40px !important; padding-right: 40px !important;}
.paddingH50{padding-left: 50px !important; padding-right: 50px !important;}

.margin0{margin: 0px !important;}
.margin0Auto{margin: 0 auto !important;}
.margin5Auto{margin: 5px auto !important;}
.margin10Auto{margin: 10px auto !important;}
.margin20Auto{margin: 20px auto !important;}
.margin30Auto{margin: 30px auto !important;}
.margin40Auto{margin: 40px auto !important;}
.margin50Auto{margin: 50px auto !important;}

.margin0{margin: 0px !important;}
.margin5{margin: 5px !important;}
.margin10{margin: 10px !important;}
.margin20{margin: 20px !important;}
.margin30{margin: 30px !important;}
.margin40{margin: 40px !important;}
.margin50{margin: 50px !important;}

.marginTop0{margin-top: 0px !important;}
.marginTop5{margin-top: 5px !important;}
.marginTop10{margin-top: 10px !important;}
.marginTop20{margin-top: 20px !important;}
.marginTop30{margin-top: 30px !important;}
.marginTop40{margin-top: 40px !important;}
.marginTop50{margin-top: 50px !important;}

.marginBottom0{margin-bottom: 0px !important;}
.marginBottom5{margin-bottom: 5px !important;}
.marginBottom10{margin-bottom: 10px !important;}
.marginBottom20{margin-bottom: 20px !important;}
.marginBottom30{margin-bottom: 30px !important;}
.marginBottom40{margin-bottom: 40px !important;}
.marginBottom50{margin-bottom: 50px !important;}

.marginRight0{margin-right: 0px !important;}
.marginRight5{margin-right: 5px !important;}
.marginRight10{margin-right: 10px !important;}
.marginRight20{margin-right: 20px !important;}
.marginRight30{margin-right: 30px !important;}
.marginRight40{margin-right: 40px !important;}
.marginRight50{margin-right: 50px !important;}

.marginLeft0{margin-left: 0px !important;}
.marginLeft5{margin-left: 5px !important;}
.marginLeft10{margin-left: 10px !important;}
.marginLeft20{margin-left: 20px !important;}
.marginLeft30{margin-left: 30px !important;}
.marginLeft40{margin-left: 40px !important;}
.marginLeft50{margin-left: 50px !important;}

.marginV0{margin-bottom: 0px !important; margin-top: 0px !important;}
.marginV5{margin-bottom: 5px !important; margin-top: 5px !important;}
.marginV10{margin-bottom: 10px !important; margin-top: 10px !important;}
.marginV20{margin-bottom: 20px !important; margin-top: 20px !important;}
.marginV30{margin-bottom: 30px !important; margin-top: 30px !important;}
.marginV40{margin-bottom: 40px !important; margin-top: 40px !important;}
.marginV50{margin-bottom: 50px !important; margin-top: 50px !important;}

.marginH{margin-left: 0px !important; margin-right: 0px !important;}
.marginH5{margin-left: 5px !important; margin-right: 5px !important;}
.marginH10{margin-left: 10px !important; margin-right: 10px !important;}
.marginH20{margin-left: 20px !important; margin-right: 20px !important;}
.marginH30{margin-left: 30px !important; margin-right: 30px !important;}
.marginH40{margin-left: 40px !important; margin-right: 40px !important;}
.marginH50{margin-left: 50px !important; margin-right: 50px !important;}

.borderRadius3{border-radius: 3px !important;}
.borderRadius5{border-radius: 5px !important;}
.borderRadius10{border-radius: 10px !important;}
.borderRadius15{border-radius: 15px !important;}
.borderRadius20{border-radius: 20px !important;}
.borderRadius25{border-radius: 25px !important;}
.borderRadius30{border-radius: 30px !important;}

.minWidth50{ min-width: 50px !important; }
.minWidth80{ min-width: 80px !important; }
.minWidth100{ min-width: 100px !important; }
.minWidth150{ min-width: 150px !important; }
.minWidth200{ min-width: 200px !important; }
.minWidth250{ min-width: 250px !important; }
.minWidth300{ min-width: 300px !important; }

.linkA{color: #C83232;}
.linkA:hover{color: #32C832;}

.blackText{color: black !important;}
.whiteText{color: rgb(230,230,230) !important;}
.redText{color: #C83232 !important;}
.greenText{color: #32C832 !important;}
.blueText{color: #639fe2 !important;}
.yellowText{color: #f4ec4e !important;}

.boxShadowGrigio{ box-shadow: 0 0 50px 5px rgb(30,30,30) inset; }

.fontSize10{font-size: 10px !important;}
.fontSize12{font-size: 12px !important;}
.fontSize14{font-size: 14px !important;}
.fontSize16{font-size: 16px !important;}
.fontSize18{font-size: 18px !important;}
.fontSize20{font-size: 20px !important;}
.fontSize22{font-size: 22px !important;}
.fontSize24{font-size: 24px !important;}
.fontSize26{font-size: 26px !important;}
.fontSize28{font-size: 28px !important;}
.fontSize30{font-size: 30px !important;}
.fontSize32{font-size: 32px !important;}
.fontSize34{font-size: 34px !important;}
.fontSize36{font-size: 36px !important;}
.fontSize38{font-size: 38px !important;}
.fontSize40{font-size: 40px !important;}
.fontSize42{font-size: 42px !important;}

.fontBold{font-weight: bold;}
.fontNormal{font-weight: normal;}

.textShadowDark{text-shadow: 2px 2px 5px #404040;}
.textShadowLight{text-shadow: 1px 1px 5px #e6e6e6;}

.width400 { width: 400px; }

.toggleShow{display: none;}
.deleteToggleButton{display: none;}

.footer
{
	margin-top: 30px;
	padding-top: 30px;
	padding-bottom: 30px;
	border-style: solid;
	border-radius: 3px;
	background-color: #194964;
	border-color: #153c53;
}

@media only screen and (max-width: 992px)
{
  .col100, .col95, .col90, .col85, .col80, .col75, .col70, .col66, .col65, .col60, .col55, .col50,
  .col45, .col40, .col35, .col33, .col30, .col25, .col20, .col15, .col10, .colDiv12, .col5 {width: 100%;}

  .hideMobile {display: none;}
  .nav-buttons{display: none;}
  .nav-toggle{display: block;}

  html,body{font-size: 16px;}
  h1{font-size: 36px;}
  h2{font-size: 32px;}
  h3{font-size: 22px;}
  .JolbeyRental{font-size: 36px;}
  .logo_tribale {align-self: center;}
}