body {
  background: rgb(255,255,255);
  }

  #icons {
    position:fixed;
    bottom:10px;
    left:50%;
    transform: translate(-50%, -50%);
    margin:0;
    padding:0;
    display:flex;
  }
  
  #icons li {
    list-style: none;
  }
  
  #icons li a {
    position: relative;
    width:60px;
    height:60px;
    display:block;
    text-align:center;
    margin:0 10px;
    border-radius: 50%;
    padding: 6px;
    box-sizing: border-box;
    text-decoration:none;
    box-shadow: 0 10px 15px rgba(0,0,0,0.3);
    background: linear-gradient(0deg, #ddd, #fff);
    transition: .5s;
  }
  
  #icons li a:hover {
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    text-decoration:none;
  }
  
  #icons li a .fab {
    width: 100%;
    height:100%;
    display:block;
    background: linear-gradient(0deg, #fff, #ddd);
    border-radius: 50%;
    line-height: calc(60px - 12px);
    font-size:24px;
    color: #262626;
    transition: .5s;
  }
  
  #icons li:nth-child(1) a:hover .fab {
    color: #3b5998;
  }
  

  #icons li:nth-child(2) a:hover .fab {
    color: #007bb6;
  }
  
  #icons li:nth-child(3) a:hover .fab {
    color: #e4405f;
  }
  img {
    max-width: 100%;
    max-height: 100%;
}
#back-to-homepage
{
font-size: 16px;
font-style: normal;
text-decoration: none;
color:rgb(40, 114, 120 ,1.0);
}
.formlabel
{
  font-size: 12px;
  font-style: italic;
  font-weight: 200;
  color: lightgrey;
}
#back-icon
{
  width: 30px;
  height: 30px;
}
.container-back
{
  padding: 15px;
}
#container-lista-alunni
{
  display: none;
}
#container-lista-pdf
{
  display: block;
}
.form-sizer
{
  width:60%;
}
.not-visible
{
  display: none;
}
.visible{
  display: block;
}
.landscape
{
    width: 100%;
    height: 350px;
}

  #logo
  {
    width: 200px;
    height: 190px;
  }

  #carouselExampleIndicators
  {
    width: 100%;
    height: 350px;
  }

  .allcolumn
  {
    margin-top: 20px;
    background-color: rgb(255, 255, 255);
  }
.image-logo
{
  padding-top:100px;
}

.login
{
  transition: all .2s ease-in-out; 
padding-top: 20px;
  background-color: #c9e6e3;
}
  .spacer
  {

    transition: all .2s ease-in-out; 
    border: 2px rgb(40, 114, 120 ,1.0) solid;
    border-radius: 8px;
  }

  .spacer:hover
  {
   border-color: rgb(40, 114, 120 ,0.6);
   background-color: #2AADA2;
   color:white;
  }


  .centered
  {
    text-align: center;
    padding-top: 15px;
  }


  .column-icon
  {
    width: 35%;
    height: 30%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 15px;
  }

  .menu-downed
  {
    padding-top: 20px;
    margin: auto auto;
  }
.list-item
{
    padding-left:2rem;
}
.list-item-link
{
    transition: all .2s ease-in-out; 
    font-size: 14px;
    font-weight: 400;
    color: #2AADA2;
}
.list-item-link:hover
{
    font-size: 15px;
    font-weight: 500;
    color:#287278;
    text-decoration: underline;
}
.align-left
{
  text-align: left;
  line-height: 110%;
  margin-bottom: 5px;
}
.italic
{
  font-style: italic;
  font-size: smaller;
}
.box-decorated
{
  border-left: 4px #2AADA2 solid;
}
.active-link
{
  font-size: 15px;
  font-weight: 500;
  color:#287278;
  text-decoration: underline;
}

.bordered
{
  border-radius: 3px;
  border: 2px #ffffff solid;
  transition: all 0.5s ease; 
  margin-bottom: 20px;
  background-color: #287278;
  color: white;
}

.bordered:hover{
  border-color: #0c3438;
  

}
.column-paragraph
{
    font-size: 13px;
    font-weight: 300;
}

#verifyButton
{
  width: 100px;
}
.color-1
{
    margin-left: 20px;
}

.corner-right
{
    position: fixed;
    bottom: 10px;
    right: 10px;
}

.privacy
{
    float: left;
    padding: 5px;
    margin-left: 10px;
}
.privacy-link
{
    font-size: 12px;
    color: black;
    text-decoration: none;

}

#loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 80px;
  height: 80px;
  margin: -76px 0 0 -76px;
  border: 12px solid #2AADA2;
  border-radius: 50%;
  border-top: 12px solid #287278;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Add animation to "page content" */
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}

@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 } 
  to { bottom:0px; opacity:1 }
}

@keyframes animatebottom { 
  from{ bottom:-100px; opacity:0 } 
  to{ bottom:0; opacity:1 }
}

#fullcontent {
  display: none;
  text-align: center;
}

.menu{
  height: 80px;
}
.shadow-inset{
  -webkit-box-shadow: inset 0px 10px 6px -2px rgba(0,0,0,0.86); 
box-shadow: inset 0px 10px 6px -2px rgba(0,0,0,0.86);
}

#myCarousel
{
  width: 90%;
  margin: 0 auto;
}

.stickyicon-list {   
  position: fixed;   
  bottom: 0px;   
  left:0px;
  z-index: 1;
  transform: translateY(-50%);     
  }         
  .stickyicon-list a {   
  display: block;   
  text-align: center;   
  padding: 8px;   
  transition: all 0.5s ease;   
  color: white;   
  font-size: 20px;   
  }         
  /* HOver affect on sticky social media icons */   
  .stickyicon-list a:hover {   
  color: #000;   
  width:10px;   
  }   
     
  /* Now we have to design each icon of social media */         
  .facebook {   
  background: #3b5998;   
  color: white;  
  }         
  .twitter {   
  color: white;   
  background: #00acee;   
  }   
  .linkedin {   
  background: #0e76a8;   
  color: white;   
  }         
  .google {   
  color: white;   
  background: #db4a39;   
  }   
  .instagram {   
  background: #3f729b;   
  color: white;   
  }         
  .youtube {   
  color: white;   
  background: #c4302b;    
  }   
/*
  .cl-effect-1 a::before,
.cl-effect-1 a::after {
  display: inline-block;
  opacity: 0;
  -webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
  -moz-transition: -moz-transform 0.3s, opacity 0.2s;
  transition: transform 0.3s, opacity 0.2s;
}

.cl-effect-1 a::before {
  margin-right: 5px;
  content: '[';
  -webkit-transform: translateX(20px);
  -moz-transform: translateX(20px);
  transform: translateX(20px);
}

.cl-effect-1 a::after {
  margin-left: 5px;
  content: ']';
  -webkit-transform: translateX(-20px);
  -moz-transform: translateX(-20px);
  transform: translateX(-20px);
}

.cl-effect-1 a:hover::before,
.cl-effect-1 a:hover::after,
.cl-effect-1 a:focus::before,
.cl-effect-1 a:focus::after {
  opacity: 1;
  -webkit-transform: translateX(0px);
  -moz-transform: translateX(0px);
  transform: translateX(0px);
}
*/