/*
137, 177, 81 green
244, 221, 190 crema
113, 90, 46 marrone
32, 26, 2 nero

*/



body
{
font-family: 'Raleway', sans-serif;
}

.test.img-responsive{
height: 300px;
width: 250px;

}

.gray-box{


  height: 220px;
  width: 220px;
  margin-top: 60px;
  font-size: 2em;
  text-align: center;
  padding: 80px;
  border-radius: 50%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  background-image: url('icon-final-proj-01.png');
}

.gray-box1{


  height: 220px;
  width: 220px;
  margin-top: 60px;
  font-size: 2em;
  text-align: center;
  padding: 80px;
  border-radius: 50%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  background-image: url('week1-01.png');
}

.gray-box2{


  height: 220px;
  width: 220px;
  margin-top: 60px;
  font-size: 2em;
  text-align: center;
  padding: 80px;
  border-radius: 50%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  background-image: url('week2.png');
}

.gray-box3{


  height: 220px;
  width: 220px;
  margin-top: 60px;
  font-size: 2em;
  text-align: center;
  padding: 80px;
  border-radius: 50%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  background-image: url('g4934.png');
}

.gray-box4{


  height: 220px;
  width: 220px;
  margin-top: 60px;
  font-size: 2em;
  text-align: center;
  padding: 80px;
  border-radius: 50%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  background-image: url('week4_1.png');
}

.gray-box5{


  height: 220px;
  width: 220px;
  margin-top: 60px;
  font-size: 2em;
  text-align: center;
  padding: 80px;
  border-radius: 50%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  background-image: url('week5.png');
}

.gray-box6{


  height: 220px;
  width: 220px;
  margin-top: 60px;
  font-size: 2em;
  text-align: center;
  padding: 80px;
  border-radius: 50%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  background-image: url('week6.png');
}

.gray-box7{


  height: 220px;
  width: 220px;
  margin-top: 60px;
  font-size: 2em;
  text-align: center;
  padding: 80px;
  border-radius: 50%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  background-image: url('week7.png');
}

.gray-box8{


  height: 220px;
  width: 220px;
  margin-top: 60px;
  font-size: 2em;
  text-align: center;
  padding: 80px;
  border-radius: 50%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  background-image: url('week8.png');
}

.gray-box9{


  height: 220px;
  width: 220px;
  margin-top: 60px;
  font-size: 2em;
  text-align: center;
  padding: 80px;
  border-radius: 50%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  background-image: url('week9-10');
}

.gray-box11{


  height: 220px;
  width: 220px;
  margin-top: 60px;
  font-size: 2em;
  text-align: center;
  padding: 80px;
  border-radius: 50%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  background-image: url('week11.png');
}

.gray-box12{


  height: 220px;
  width: 220px;
  margin-top: 60px;
  font-size: 2em;
  text-align: center;
  padding: 80px;
  border-radius: 50%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  background-image: url('week12.png');
}

.gray-box13{


  height: 220px;
  width: 220px;
  margin-top: 60px;
  font-size: 2em;
  text-align: center;
  padding: 80px;
  border-radius: 50%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  background-image: url('week13.png');
}

.gray-box14{


  height: 220px;
  width: 220px;
  margin-top: 60px;
  font-size: 2em;
  text-align: center;
  padding: 80px;
  border-radius: 50%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  background-image: url('week14.png');
}

.gray-box15{


  height: 220px;
  width: 220px;
  margin-top: 60px;
  font-size: 2em;
  text-align: center;
  padding: 80px;
  border-radius: 50%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  background-image: url('week15.png');
}


.gray-box16{


  height: 220px;
  width: 220px;
  margin-top: 60px;
  font-size: 2em;
  text-align: center;
  padding: 80px;
  border-radius: 50%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  background-image: url('week16.png');
}

.gray-box17{


  height: 220px;
  width: 220px;
  margin-top: 60px;
  font-size: 2em;
  text-align: center;
  padding: 80px;
  border-radius: 50%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  background-image: url('week17.png');
}

.gray-box18{


  height: 220px;
  width: 220px;
  margin-top: 60px;
  font-size: 2em;
  text-align: center;
  padding: 80px;
  border-radius: 50%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  background-image: url('week18.png');
}

.gray-box19{


  height: 220px;
  width: 220px;
  margin-top: 60px;
  font-size: 2em;
  text-align: center;
  padding: 80px;
  border-radius: 50%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  background-image: url('week19.png');
}

.gray-box20{


  height: 220px;
  width: 220px;
  margin-top: 60px;
  font-size: 2em;
  text-align: center;
  padding: 80px;
  border-radius: 50%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  background-image: url('week20.png');
}






.gray-box-lock{


  height: 220px;
  width: 220px;
  margin-top: 60px;
  font-size: 2em;
  text-align: center;
  padding: 80px;
  border-radius: 50%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  background-image: url('week-close-01.png');
}




.text-area{
  margin-top: 100px;
  font-size: 18px;
  text-align: left;
  color: rgba(32, 26, 2, 1);
  margin-bottom: 80px;

}

.text-area-centered{

  font-size: 16px;
  text-align: center;
  padding-top: 30px;
  font-style: italic;
  color: rgba(32, 26, 2, 1);

}

.welcome-box{
  text-align: center;
  height: auto;;
  width: auto;
  margin-top: 100px;
}

.welcome-box p{
  color: rgba(32, 26, 2, 1);
  font-size: 18px;
}

.snail{

  background-image: url("icon-snail-square.png");
  background-repeat: no-repeat;
  height: 40px;
  width: 40px;
  position: absolute;
  margin-left: 10px;
  margin-top: 10px;
  transform: rotate(45deg) translateX(120px) rotate(90deg);;
  -webkit-animation: orbit 30s linear infinite;
  -moz-animation: orbit 30s linear infinite;
  -o-animation: orbit 30s linear infinite;
  animation: orbit 30s linear infinite;

}

.snail2{

    background-image: url("icon-snail-square.png");
    background-repeat: no-repeat;
    height: 40px;
    width: 40px;
    position: absolute;
    margin-left: 10px;
    margin-top: 10px;
    transform: scaleY(-1) rotate(45deg) translateX(120px) rotate(90deg);;
    -webkit-animation: orbit2 30s linear infinite;
    -moz-animation: orbit2 30s linear infinite;
    -o-animation: orbit2 30s linear infinite;
    animation: orbit2 30s linear infinite;

}

.titoli{

  /*background-color: red;*/
  height: 40px;
  margin-top: 35px;
  font-size: 2em;
  text-align: center;
  padding: 0px;

}

.immagini{

  width: 100%;

  height: 200px;
}


.footer-style{
  text-align: center;
  background-color: red;


}

.sottotitoli{

/*  background-color: green;*/
  height: 33px;
  font-size: 1.5em;
  text-align: center;

}

.navbar{
  /*width: 500px;*/

}



.CSSTableGenerator {
	margin:0px;padding:0px;
	width:100%;
	box-shadow: 10px 10px 5px #888888;
	border:1px solid #000000;

	-moz-border-radius-bottomleft:0px;
	-webkit-border-bottom-left-radius:0px;
	border-bottom-left-radius:0px;

	-moz-border-radius-bottomright:0px;
	-webkit-border-bottom-right-radius:0px;
	border-bottom-right-radius:0px;

	-moz-border-radius-topright:0px;
	-webkit-border-top-right-radius:0px;
	border-top-right-radius:0px;

	-moz-border-radius-topleft:0px;
	-webkit-border-top-left-radius:0px;
	border-top-left-radius:0px;
}.CSSTableGenerator table{
    border-collapse: collapse;
        border-spacing: 0;
	width:100%;
	height:100%;
	margin:0px;padding:0px;
}.CSSTableGenerator tr:last-child td:last-child {
	-moz-border-radius-bottomright:0px;
	-webkit-border-bottom-right-radius:0px;
	border-bottom-right-radius:0px;
}
.CSSTableGenerator table tr:first-child td:first-child {
	-moz-border-radius-topleft:0px;
	-webkit-border-top-left-radius:0px;
	border-top-left-radius:0px;
}
.CSSTableGenerator table tr:first-child td:last-child {
	-moz-border-radius-topright:0px;
	-webkit-border-top-right-radius:0px;
	border-top-right-radius:0px;
}.CSSTableGenerator tr:last-child td:first-child{
	-moz-border-radius-bottomleft:0px;
	-webkit-border-bottom-left-radius:0px;
	border-bottom-left-radius:0px;
}.CSSTableGenerator tr:hover td{

}
.CSSTableGenerator tr:nth-child(odd){ background-color:#89b151; }
.CSSTableGenerator tr:nth-child(even)    { background-color:#ffffff; }.CSSTableGenerator td{
	vertical-align:middle;


	border:1px solid #000000;
	border-width:0px 1px 1px 0px;
	text-align:left;
	padding:7px;
	font-size:15px;
	font-family:Arial;
	font-weight:normal;
	color:#000000;
}.CSSTableGenerator tr:last-child td{
	border-width:0px 1px 0px 0px;
}.CSSTableGenerator tr td:last-child{
	border-width:0px 0px 1px 0px;
}.CSSTableGenerator tr:last-child td:last-child{
	border-width:0px 0px 0px 0px;
}
.CSSTableGenerator tr:first-child td{
		background:-o-linear-gradient(bottom, #cccccc 5%, #cccccc 100%);	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #cccccc), color-stop(1, #cccccc) );
	background:-moz-linear-gradient( center top, #cccccc 5%, #cccccc 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#cccccc", endColorstr="#cccccc");	background: -o-linear-gradient(top,#cccccc,cccccc);

	background-color:#cccccc;
	border:0px solid #000000;
	text-align:center;
	border-width:0px 0px 1px 1px;
	font-size:15px;
	font-family:Arial;
	font-weight:bold;
	color:#000000;
}
.CSSTableGenerator tr:first-child:hover td{
	background:-o-linear-gradient(bottom, #cccccc 5%, #cccccc 100%);	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #cccccc), color-stop(1, #cccccc) );
	background:-moz-linear-gradient( center top, #cccccc 5%, #cccccc 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#cccccc", endColorstr="#cccccc");	background: -o-linear-gradient(top,#cccccc,cccccc);

	background-color:#cccccc;
}
.CSSTableGenerator tr:first-child td:first-child{
	border-width:0px 0px 1px 0px;
}
.CSSTableGenerator tr:first-child td:last-child{
	border-width:0px 0px 1px 1px;
}





#custom-bootstrap-menu.navbar-default .navbar-brand {
    color: rgba(255, 255, 255, 1);
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 0px;
    padding-bottom: 0px;

}
#custom-bootstrap-menu.navbar-default {
    font-size: 17px;
    background-color: rgba(87, 66, 49, 1);
    margin-top: 5px;




}
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a {
    color: rgba(255, 255, 255, 1);
  background-color: rgba(87, 66, 49, 1);

}
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:focus {
    color: rgba(255, 255, 255, 1);
  background-color: rgba(133, 117, 78, 1);

}
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a,
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:focus {
    color: rgba(255, 255, 255, 1);
    background-color: rgba(133, 117, 78, 1);

}
#custom-bootstrap-menu.navbar-default .navbar-toggle {
    /*border-color: #97a364;*/
    background-color: rgba(0, 0, 255, 1);
}
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus {
  /*  background-color: #97a364;*/
  background-color: rgba(0, 0, 255, 1);
}
#custom-bootstrap-menu.navbar-default .navbar-toggle .icon-bar {
    background-color: #97a364;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover .icon-bar,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus .icon-bar {
    background-color: rgba(50, 50, 50, 1);
}

/*
 * Set up the keyframes to actually describe the begining and end states of
 * the animation.  The browser will interpolate all the frames between these
 * points.  Again, remember your vendor-specific prefixes for now!
 */



 @-webkit-keyframes orbit {
 	from { 	-webkit-transform: rotate(0deg) translateX(120px) rotate(90deg); }
 	to   {  -webkit-transform: rotate(360deg) translateX(120px) rotate(90deg); }
 }

 @-moz-keyframes orbit {
 	from { 	-moz-transform: rotate(0deg) translateX(120px) rotate(90deg); }
 	to   {  -moz-transform: rotate(360deg) translateX(120px) rotate(90deg); }
 }

 @-o-keyframes orbit {
 	from { 	-o-transform: rotate(0deg) translateX(120px) rotate(90deg); }
 	to   {  -o-transform: rotate(360deg) translateX(120px) rotate(90deg); }
 }

 @keyframes orbit {
 	from { 	transform: rotate(0deg) translateX(120px) rotate(90deg); }
 	to   {  transform: rotate(360deg) translateX(120px) rotate(90deg); }
 }




 /* orbit 2*/




 @-webkit-keyframes orbit2 {
 	from { 	-webkit-transform: scaleY(-1) rotate(0deg) translateX(120px) rotate(90deg); }
 	to   {  -webkit-transform: scaleY(-1) rotate(360deg) translateX(120px) rotate(90deg); }
 }

 @-moz-keyframes orbit2 {
 	from { 	-moz-transform: scaleY(-1) rotate(0deg) translateX(120px) rotate(90deg); }
 	to   {  -moz-transform: scaleY(-1) rotate(360deg) translateX(120px) rotate(90deg); }
 }

 @-o-keyframes orbit2 {
 	from { 	-o-transform: scaleY(-1) rotate(0deg) translateX(120px) rotate(90deg); }
 	to   {  -o-transform: scaleY(-1) rotate(360deg) translateX(120px) rotate(90deg); }
 }

 @keyframes orbit2 {
 	from { 	transform: scaleY(-1) rotate(0deg) translateX(120px) rotate(90deg); }
 	to   {  transform: scaleY(-1) rotate(360deg) translateX(120px) rotate(90deg); }
 }