body, html {
  height: 100%;
}

 /* For mobile phones: */
[class*="bigtitle"] {
  padding-top: 8em;
  padding-left: 0.5em;
}

@media only screen and (min-width: 200px) {
  /* For kaios phones: */
  .bigtitle {
	  padding-top: 5em;
	  padding-left: 0em;
	  font-size: 200%;
  }
}

@media only screen and (min-width: 300px) {
  /* For phones like samsung Note3: */
  .bigtitle {
	  padding-top: 3em;
	  padding-left: 0em;
	  font-size: 500%;
  }
}

@media only screen and (min-width: 400px) {
  /* For phones like iphoneXs: */
  .bigtitle {
	  padding-top: 3em;
	  padding-left: 0.1em;
	  font-size: 600%;
  }
}

@media only screen and (min-width: 600px) {
  /* For tablets: */
  .bigtitle {
	  padding-top: 2em;
	  padding-left: 0.05em;
	  font-size: 1000%;
  }
}

@media only screen and (min-width: 800px) {
  /* For ipad pro: */
  .bigtitle {
  	padding-top: 40%;
  	padding-left: 2%;
  	font-size: 1200%;
  }
} 

@media only screen and (min-width: 850px) {
  /* For desktop: */
  .bigtitle {
  	padding-top: 25%;
  	padding-left: 3%;
  	font-size: 1500%;
  }
} 
/* */

.bg {
  /* The image used */
  /*background-image: linear-gradient(rgba(0,0,0,.63), rgba(0,0,0,.63)), url("../img/DSCF4573.JPG");*/
  background-image: linear-gradient(rgba(0,0,0,.63), rgba(0,0,0,.63)), url("../img/background.png");
  height: 100%;

  background-position: center;
  background-repeat: no-repeat;
  background-size: cover; 
}

.bigtitle {	
	color: white; 
	font-family: 'Trocchi', serif; 
	font-weight: normal; 
	margin: 0;
}

.title{
	margin-top: 5%;
	font-size: 250%;
}

.footer{
	margin-top: 5%;
	background-color: #f5f7fa;
	color: black;
}

.little{
	font-size: 10px;
}

.quickinfo{
	background-color: #083803;
	color: white;
	padding-left: 2%;
	padding-top: 2%;
	padding-bottom: 2%;
	font-weight: bold;
	font-size: 1.9em;
}

.quickinfo a{
	color: white;
}

.quickinfo a:visited{
	color: white;
}

.quickinfo img{
	max-width: 1em;
	max-height: 1em;
}

.row.row-no-margin {
  margin-left: 0px;
  margin-right: 0px;
}

.col-no-padding {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.hide{
	display:none;
}


/* ribbon */
.ribbon {
   position: absolute;
   right: -5px; top: -5px;
   z-index: 1;
   overflow: hidden;
   width: 75px; height: 75px; 
   text-align: right;
}
.ribbon span {
   font-size: 10px;
   color: #fff; 
   text-transform: uppercase; 
   text-align: center;
   font-weight: bold; line-height: 20px;
   transform: rotate(45deg);
   width: 100px; display: block;
   background: #79A70A;
   background: linear-gradient(#9BC90D 0%, #79A70A 100%);
   box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
   position: absolute;
   top: 19px; right: -21px;
}
.ribbon span::before {
   content: '';
   position: absolute; 
   left: 0px; top: 100%;
   z-index: -1;
   border-left: 3px solid #79A70A;
   border-right: 3px solid transparent;
   border-bottom: 3px solid transparent;
   border-top: 3px solid #79A70A;
}
.ribbon span::after {
   content: '';
   position: absolute; 
   right: 0%; top: 100%;
   z-index: -1;
   border-right: 3px solid #79A70A;
   border-left: 3px solid transparent;
   border-bottom: 3px solid transparent;
   border-top: 3px solid #79A70A;
}
.red span {background: linear-gradient(#F70505 0%, #8F0808 100%);}
.red span::before {border-left-color: #8F0808; border-top-color: #8F0808;}
.red span::after {border-right-color: #8F0808; border-top-color: #8F0808;}

.blue span {background: linear-gradient(#2989d8 0%, #1e5799 100%);}
.blue span::before {border-left-color: #1e5799; border-top-color: #1e5799;}
.blue span::after {border-right-color: #1e5799; border-top-color: #1e5799;}