* {
  box-sizing: border-box;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

[class*="col-"] {
  float: left;
  boder: 1px solid red;
}

/* For mobile phones: */
[class*="col-"] {
  width: 100%;
}

@media only screen and (min-width: 701px) {
  /* For tablets: */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}

@media only screen and (min-width: 1000px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}

/* General: */

.site {
display: flex;
min-height: 100vh;
flex-direction: column;
}

#main {
	transition: margin-right 0.1s;
}

img {
  max-width: 100%;
  height: auto;
}

body{
background-color: #7fbf7f;
margin: 0;
font-family: Bahnschrift;
}

body a{
text-decoration: none;
color:black;	
}

body a:hover{
color: white;
}

hr#thick {
width: 25%;
border: 2px solid black;
text-align: left;
margin-left: 0;
border-top: 1px black;
}

p {
font-size: 18;
}

h1 {
margin-top: 50px;
}

.center {
margin-left: auto;
margin-right: auto;
}

/* Hero image & Header: */

#heroimage {
position: absolute;
z-index:0;
}

.hero-image-home {
background: url("/immagini/header/header_home.jpg");
background-color: #cccccc;
background-position: center;
height: 63%;
background-size: cover;
}

.hero-image-chisiamo {
background: url("/immagini/header/header_chisiamo.jpg");
background-color: #cccccc;
background-position: center;
height: 63%;
background-size: cover;
}

.hero-image-cammini {
background: url("/immagini/header/header_cammini.jpg");
background-color: #cccccc;
background-position: center;
height: 63%;
background-size: cover;
}

.hero-image-attrezzatura {
background: url("/immagini/header/header_attrezzatura.jpg");
background-color: #cccccc;
background-position: center;
height: 63%;
background-size: cover;
}

.hero-image-contatti {
background: url("/immagini/header/header_contatti.jpg");
background-color: #cccccc;
background-position: center;
height: 63%;
background-size: cover;
}

.hero-image-loghi {
background: url("/immagini/header/header_loghi.jpg");
background-color: #cccccc;
background-position: center;
height: 63%;
background-size: cover;
}

@media only screen and (min-width: 1000px) {
   div.hero-image-home {
    height:441px;
  }
}

@media only screen and (min-width: 1000px) {
   div.hero-image-chisiamo {
    height:441px;
  }
}

@media only screen and (min-width: 1000px) {
   div.hero-image-cammini {
    height:441px;
  }
}

@media only screen and (min-width: 1000px) {
   div.hero-image-attrezzatura {
    height:441px;
  }
}

@media only screen and (min-width: 1000px) {
   div.hero-image-contatti {
    height:441px;
  }
}

@media only screen and (min-width: 1000px) {
   div.hero-image-loghi {
    height:441px;
  }
}

div#vuoto {
margin-top: 80px;
}

@media only screen and (max-width: 1022px) {
  div#vuoto {
    display: none;
  }
}

@media only screen and (min-width: 600px) {
  div.header {
    position: relative;
	text-align: center;
	margin-top: 40px;
  }
}

@media only screen and (min-width: 1500px) {
  div.header {
    position: relative;
	text-align: center;
	margin-top: 70px;
  }
}

div#logo {
width: 15%;
margin: 10px 0px 0px 30px;
float:left;
max-width: 150px;
}

div#logo:hover {
filter: brightness(130%);
}

div#logo:active {
filter: brightness(50%);
}

#logo area {
outline: 0;
}

@media only screen and (min-width: 1500px) {
  div#logo {
    margin: 40px 0px 0px 40px;
  }
}

#nome {
text-align: center;
color: white;
font-size: 50;
padding: 0;
margin: 0;
}

@media only screen and (min-width: 700px) {
  #nome {
    font-size:70px;
  }
}

@media only screen and (min-width: 1500px) {
  #nome {
    font-size:100px;
  }
}

#tagline {
text-align: center;
margin: 0px;
font-size: 25px;
}

@media only screen and (min-width: 700px) {
  #tagline {
    font-size:30px;
  }
}

@media only screen and (min-width: 1500px) {
  #tagline {
    font-size:40px;
  }
}

/* Barra di navigazione: */

#navigation{
overflow: hidden;
background-color:#2F4F4F;
height: 40px;
}

#navigation ul{
list-style-type: none;
text-align: center;
margin: 5;
padding: 0;
white-space: nowrap;
font-size: 20px;
list-style-type: none;
}

#navigation li{
display: inline;
margin: 15;
padding: 0;
}

#navigation li a{
text-decoration: none;
padding: 0px 0.3em;
background: none;
color:silver;
}

#navigation li a:hover{
color: white;
}

#navigation li#activelink a{
background-color: none;
color: white;
}

@media only screen and (max-width: 1065px) {
  div#navigation {
    display: none;
  }
}

.sticky {
position: fixed;
z-index: 1;
top: 0;
width: 100%;
}

.sticky + .content{
padding-top: 30px;
}

.content{
margin: 20 50 50 50;
flex: 1;
}

#ita {
vertical-align: middle;
}

#ita:hover {
filter: brightness(130%);
}

#ita:active {
filter: brightness(50%);
}

#eng {
vertical-align: middle;
margin-right: 20px;
}

#eng:hover {
filter: brightness(130%);
}

#eng:active {
filter: brightness(50%);
}

/* Side menu: */

#openNav{
	position: sticky;
	font-size:40px;
	border:none;
	padding:5px;
	vertical-align:middle;
	overflow:hidden;
	text-decoration:none;
	color:white;
	background-color:inherit;
	text-align:center;
	cursor:pointer;
	outline:0;
}

.sticky2 {
position: fixed;
z-index: 0;
top: 0;
width: 100%;
}

div.sidemenu {
	position:relative;
	float: right;
	margin: 0px 30px 0px 0px;
	z-index: 0;
	height:10px;
	width:30px;
}

@media only screen and (min-width: 1065px) {
   div.sidemenu {
    display: none;
  }
}

.sidebar{
	height:100%;
	width:200px;
	background-color:#2F4F4F;
	position:fixed;
	z-index:2;
	overflow:auto;
	max-width:250px;
	transition:0.5s;
}

.bar-item{
	color:white;
	padding-left:5px;
}

@media only screen and (min-width: 550px) {
  .bar-item {
    font-size:18px;
  }
}

@media only screen and (min-width: 600px) {
  .bar-item {
    font-size:20px;
  }
}

@media only screen and (min-width: 700px) {
  .bar-item {
    font-size:25px;
  }
}

#mySidebar a{
text-decoration: none;
background: none;
color:silver;
display:block;
}

#mySidebar a:hover{
color: white;
}

#mySidebar #activelink{
background-color: none;
color: white;
}

#mySidebar #ita {
width:35%;
max-width:50px;
}

#mySidebar #eng {
width:35%;
max-width:50px;
}

.button {
	font-size:50px;
	border:none;
	padding:5px;
	vertical-align:middle;
	overflow:hidden;
	text-decoration:none;
	color:white;
	background-color:inherit;
	text-align:center;
	cursor:pointer;
	outline:0;
}

.animate-right{
animation:animateright 0.3s}

@keyframes animateright{
	from{right:-300px;opacity:0} 
	to{right:0;opacity:1}
}

/* Chi siamo: */

#radioanimati {
color: blue;
}

#radioanimati:hover {
color: white;
}

#radioanimati:visited {
color: purple;
}

/* I nostri cammini: */

video {
padding: 0px 50px 40px 0px;
}

.video {
    position: relative;
    width: 100%;
    height: auto;
    padding-bottom: 56.25%;
	margin-right: 50px;
	border:3px solid black;
}

.video iframe,
.video object,
.video embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media screen and (min-width: 999.5px) {
  .description {
	margin: 0px 20px 0px 20px;
	padding-bottom: 10px;
  }
}

@media screen and (max-width: 999.5px) {
  .description {
	margin: 20px 0px 0px 0px;
	padding-bottom: 20px;
  }
}

@media only screen and (min-width: 1400px){
  .links {
	display:none;
  }
}

.links2 {
padding: 0px 0px 0px 20px;
}

@media only screen and (max-width: 1400px){
  .links2 {
	display:none;
  }
}

@media screen and (min-width: 1400px) {
  .pics {
	margin-top: 30px;
  }
}

/*attrezzatura: */

.center {
  margin-left: auto;
  margin-right: auto;
}

/* Footer: */

div.footer {
background: black;
}

.text3{
color: white;
text-align: center;
bottom:0px;
}

#cookie{
text-align: center;
bottom:0px;
}

#greenhosting{
color:lightgreen;
}

#greenhosting:hover{
color:orange;
}

#mail {
text-align: center;
bottom:0px;
} 

#mail a{
color:white;
}

#icons {
    display: block;
    margin-left: auto;
    margin-right: auto }
	
.icone area {
outline: 0;
}

@media screen and (min-width: 601px) {
  .icons {
	margin: 30px 0px 0px 0px;
  }
}

.centered {
margin-left: 100px;
}