@charset "UTF-8";
/* CSS Document */


.circleBase {
    border-radius: 50%;
    behavior: url(PIE.htc); /* remove if you don't care about IE8 */
}
.type3 {
	width: 800px;
	height: 500px;
	background: #FFF;
	float: center;
	border: 15px solid #000;
	position:relative;
	margin-left: 170px;
	

}

.body
{
	width: 1400px;
	float: left;
}
	
	.container                              
	{ 
	position: relative; width: 1200px; margin: 0 auto; padding: 0;
	}
	
.flashcontainer
	{
width: 600px;
height: 500px;
padding-left: 150px;
padding-top:50px;
float: left;


	}
	.textcontainer
	{
width: 600px;
height: 500px;
padding-left:100px;
padding-right: 20px;
font-family: "Times New Roman", Times, serif;
font-size:13px;
text-align:center;
float: left;


	}

	

	.project-grid { padding-top: 72px; }
	.work-heading { text-align: center; }
		.work-heading p { 
			color: #777777;
			font-family:"ff-tisa-web-pro",serif;
			font-size: 21px;
			font-weight: 300;
			letter-spacing: 0.04em;
			line-height: 34px;
			margin-bottom: 0px;
			padding: 0 200px 72px;
			text-transform: none; 
			text-decoration: none;
		}
	
	
@-webkit-keyframes shake {
    0%, 100% {-webkit-transform: translateX(0) rotate(0deg) translateY(0);}
    15%, 35%, 55%, 75%, 95% {-webkit-transform: translateX(-1px) rotate(-2deg) ;}
    25%, 45%, 65%, 85% {-webkit-transform: translateX(1px) rotate(2deg); }
    10%, 30%, 50%, 70%, 90% {-webkit-transform: translateY(1px);}    
    20%, 40%, 60%, 80% {-webkit-transform: translateY(-1px); }
}
@-moz-keyframes shake {
    0%, 100% {-moz-transform: translateX(0) rotate(0deg) translateY(0);}
    15%, 35%, 55%, 75%, 95% {-moz-transform: translateX(-1px) rotate(-2deg) ;}
    25%, 45%, 65%, 85% {-moz-transform: translateX(1px) rotate(2deg); }
    10%, 30%, 50%, 70%, 90% {-moz-transform: translateY(1px);}    
    20%, 40%, 60%, 80% {-moz-transform: translateY(-1px); }  
}

@-o-keyframes shake {
     0%, 100% {-o-transform: translateX(0) rotate(0deg) translateY(0);}
    15%, 35%, 55%, 75%, 95% {-o-transform: translateX(-1px) rotate(-2deg) ;}
    25%, 45%, 65%, 85% {-o-transform: translateX(1px) rotate(2deg); }
    10%, 30%, 50%, 70%, 90% {-o-transform: translateY(1px);}    
    20%, 40%, 60%, 80% {-o-transform: translateY(-1px); }  
}

@keyframes shake {
    0%, 100% {transform: translateX(0) rotate(0deg) translateY(0);}
    15%, 35%, 55%, 75%, 95% {transform: translateX(-1px) rotate(-2deg) ;}
    25%, 45%, 65%, 85% {transform: translateX(1px) rotate(2deg); }
    10%, 30%, 50%, 70%, 90% {transform: translateY(1px);}    
    20%, 40%, 60%, 80% {transform: translateY(-1px); }  
}
.shake {
    -webkit-animation-name: shake;
    -moz-animation-name: shake;
    -o-animation-name: shake;
    animation-name: shake;
    -webkit-animation-duration: 2s;
    -moz-animation-duration: 2s;
    -o-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;    
    -o-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-transition-timing-function:linear;    
}

p {
    text-align: center; margin-top: 4.5em; font-family:"1942 report";
  }
 
 @font-face
{
font-family: "1942 report";
src: url(1942.ttf);
}
h1, h2, h3 {
		letter-spacing: 1px;
		text-transform: uppercase;
		}
	h1 a, h2 a, h3 a {
	font-weight: normal;
}
	h2 {
	color: #FCC;
	font-size: 12px;
	font-family: "brandon-grotesque", sans-serif;
	font-weight: 400;
	line-height: 24px;
	margin-bottom: 24px;
}
	
	h1 {
	color: #000 ;
	font-size: 60px;
	font-family: "1942 report" ;
	font-weight: bold;
	letter-spacing: 2.5px;
	line-height: 60px;

}

h1 a:link { 
text-decoration:none; 
color: #000;
} 
h1 a:visited {
text-decoration:none;
color: #000;
}
h1 a:active {
text-decoration:none;
} 
	
/*Image boxes*/


.wrap div {
	float: left;
	border: none;
	margin: 10px 10px 0 0;
}
.wrap a {
	display: table-cell;
	width: 100px;
	height: 100px;
	text-align: center; /* qui e non su precedente, iCab3 */
	vertical-align: middle;
	font: "1942 report";
	color: #000;
	text-decoration: none;
}
.wrap img {
	border: none;
	vertical-align: middle;
}
/*\*//*/
* html .wrap a {
	display: block;
}
* html .wrap span {
	display: inline-block;
	vertical-align: middle;
	height: 100%;
	width: 1px;
}
* html .wrap a {
	font-size: 1px;
}
/* non serve solito shift background-position: 11px 11px per IE/Mac, forse perche' su inline-block? */
.wrap div {
	border-collapse: collapse; /* Op7 */
}
.clear {
	clear: both;
	margin: 0;
	padding: 1em 0;
	font-family:"1942 report";
}
.wrap a:hover {
	background-color: transparent;
	font:"1942 report";
	

}

[if lt IE 8]><style>
.wrap a {
	display: block;
}
.wrap span {
	display: inline-block;
	vertical-align: middle;
	height: 100%;
}
.wrap {
	_height: 0;
	zoom: 1;
	
}
<![endif]
[if lt IE 5.5000]><style>
/* per clickabilita' img no dimensioni su anchor */
.wrap div {
	width: 221px;
}
.wrap a {
	width: auto;
	height: auto;
}
.wrap span {
	height: 100px;
}


	

#circle { background-color: #FFF;
          height: 150px; width: 150px; border-radius: 120px;
		  position: relative;
            top: -10px;
            left: 30px;
			margin-top: 100px;
			margin-left: 100px;} 
			
			
#circle2 { background-color: #FFF;
          height: 150px; width: 150px; border-radius: 120px;
		  position: relative;
            top: -10px;
            left: 30px;
			margin-top: 100px;
}

#circle3 { background-color: #FFF;
          height: 150px; width: 150px; border-radius: 120px;
		  position: relative;
            top: -10px;
            left: 30px;
			float: right;
			margin-left: 300px;
			margin-bottom: 25px;
			margin-top: -205px;
			margin-right: 50px;
}	
#circle4 { background-color: #FFF;
          height: 150px; width: 150px; border-radius: 120px;
		  position: relative;
            top: -10px;
            left: 30px;
			float: right;
			margin-top: -450px;
		    margin-right: 200px;
			
}
#circle5 { background-color: #FFF;
          height: 150px; width: 150px; border-radius: 120px;
		  position: relative;
            top: -10px;
            left: 30px;
			float: left;
			margin-top:-300px;
			
}
#circle6 { background-color: #FFF;
          height: 150px; 
		  width: 150px; 
		  border-radius: 120px;
		  position: relative;
            top: -10px;
            left: 30px;
			float: right;
			margin-top: -250px;
			margin-right: 100px;
			
			
}

#circle7 { 
          height: 150px; 
		  width: 150px;
		  position: relative;
		  float: right;	
		  margin-right: 300px;
}

		  
#myDiv img
{
max-width:100%; 
max-height:100%;
margin:auto;
display:block;
}
	
/*hover effects */
.grow {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: -webkit-transform;
  transition-property: transform;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.grow:hover {
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}

img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */

}
img:hover
{
opacity:1.0;
filter:alpha;
(opacity=100); /* For IE8 and earlier */
-webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}


/* Pulse */
.pulse {
	background: 3px solid #999;
	border: 3px solid #999;
	-webkit-border-radius: 30px;
	height: 142px;
	width: 139px;
	position: absolute;
	left:637px;
	top:186px;
	-webkit-animation: pulse 3s ease-out;
	-webkit-animation-iteration-count: infinite;
	opacity: 0.0
}

@-webkit-keyframes pulse 
  {       
    0% {-webkit-transform: scale(0); opacity: 0;}
    8% {-webkit-transform: scale(0); opacity: 0;}
    15% {-webkit-transform: scale(0.1); opacity: 1;}
    30% {-webkit-transform: scale(0.5); opacity: 1;}
    100% {opacity: 0; -webkit-transform: scale(1);}
  }
@-moz-keyframes pulse 
  {       
    0% {-moz-transform: scale(0); opacity: 0;}
    8% {-moz-transform: scale(0); opacity: 0;}
    15% {-moz-transform: scale(0.1); opacity: 1;}
    30% {-moz-transform: scale(0.5); opacity: 1;}
    100% {opacity: 0; -moz-transform: scale(1);}
  }
/*buzz*/

.button {
  margin: .4em;
  padding: 1em;
  cursor: pointer;
  background: #e1e1e1;
  text-decoration: none;
  color: #666666;
  /* Prevent highlight colour when element is tapped */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/* Buzz */

.button {
  margin: .4em;
  padding: 1em;
  cursor: pointer;
  background: #FFF;
  text-decoration: none;
   
  /* Prevent highlight colour when element is tapped */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

@-webkit-keyframes buzz {
  50% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }

  100% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
}

@keyframes buzz {
  50% {
    -webkit-transform: translateX(3px) rotate(2deg);
    -ms-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }

  100% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    -ms-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
}

.buzz {
  display: inline-block;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.buzz:hover {
  -webkit-animation-name: buzz;
  animation-name: buzz;
  -webkit-animation-duration: .15s;
  animation-duration: .15s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

/* Hovering */

@-webkit-keyframes hovering {
  50% {
    -webkit-transform: translateY(-3px);
    transform: translateY(-3px);
  }

  100% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }
}

@keyframes hovering {
  50% {
    -webkit-transform: translateY(-3px);
    -ms-transform: translateY(-3px);
    transform: translateY(-3px);
  }

  100% {
    -webkit-transform: translateY(-6px);
    -ms-transform: translateY(-6px);
    transform: translateY(-6px);
  }
}

.hovering {
  display: inline-block;
  -webkit-transition-duration: .5s;
  transition-duration: .5s;
  -webkit-transition-property: -webkit-transform;
  transition-property: transform;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.hovering:hover {
  -webkit-transform: translateY(-6px);
  -ms-transform: translateY(-6px);
  transform: translateY(-6px);
  -webkit-animation-name: hovering;
  animation-name: hovering;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}
/* Wobble Vertical */

@-webkit-keyframes wobble-vertical {
  16.65% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }

  33.3% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }

  49.95% {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
  }

  66.6% {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
  }

  83.25% {
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes wobble-vertical {
  16.65% {
    -webkit-transform: translateY(8px);
    -ms-transform: translateY(8px);
    transform: translateY(8px);
  }

  33.3% {
    -webkit-transform: translateY(-6px);
    -ms-transform: translateY(-6px);
    transform: translateY(-6px);
  }

  49.95% {
    -webkit-transform: translateY(4px);
    -ms-transform: translateY(4px);
    transform: translateY(4px);
  }

  66.6% {
    -webkit-transform: translateY(-2px);
    -ms-transform: translateY(-2px);
    transform: translateY(-2px);
  }

  83.25% {
    -webkit-transform: translateY(1px);
    -ms-transform: translateY(1px);
    transform: translateY(1px);
  }

  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.wobble-vertical {
  display: inline-block;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-animation-name: wobble-vertical;
  animation-name: wobble-vertical;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}



html,body {margin:0; padding:10px; -webkit-backface-visibility:hidden;}

/* text-based popup styling */
.white-popup {
  position: relative;
  background: #FFF;
  padding: 25px;
  width:auto;
  max-width: 400px;
  margin: 0 auto; 
}





/* 
====== Move-horizontal effect ======

*/
.mfp-move-horizontal {
  
  /* start state */
  .mfp-with-anim {
    opacity: 0;
    transition: all 0.3s;
    
    transform: translateX(-50px);
  }
  
  &.mfp-bg {
    opacity: 0;
	  transition: all 0.3s;
  }
  
  /* animate in */
  &.mfp-ready {
    .mfp-with-anim {
      opacity: 1;
      transform: translateX(0);
    }
    &.mfp-bg {
      opacity: 0.8;
    }
  }
  
  /* animate out */
  &.mfp-removing {
    
    .mfp-with-anim {
      transform: translateX(50px);
      opacity: 0;
    }
    &.mfp-bg {
      opacity: 0;
    }
    
  }
  
}


/*