@import url("http://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css");
@import url("http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css");
@import url("http://fast.fonts.net/t/1.css?apiType=css&projectid=7b9fd750-55e4-4fa3-9151-21697d73a091");
@font-face {
	font-family: ApercuPro;
	src: url('http://www.meccanicarota.it/font/apercupro-medium');
	src: url('http://www.meccanicarota.it/font/apercupro-medium?#iefix') format("embedded-opentype"), url('http://www.meccanicarota.it/font/apercupro-medium') format("woff"), url('http://www.meccanicarota.it/font/apercupro-medium') format("truetype"), url('http://www.meccanicarota.it/font/apercupro-medium#ApercuPro-Medium') format("svg");
	font-weight: 500;
	font-style: normal
}
@font-face {
	font-family: ApercuPro;
	src: url('http://www.meccanicarota.it/font/apercupro-bold');
	src: url('http://www.meccanicarota.it/font/apercupro-bold?#iefix') format("embedded-opentype"), url('http://www.meccanicarota.it/font/apercupro-bold') format("woff"), url('http://www.meccanicarota.it/font/apercupro-bold') format("truetype"), url('http://www.meccanicarota.it/font/apercupro-bold#ApercuPro-Bold') format("svg");
	font-weight: 700;
	font-style: normal
}
body, html {
	position: relative
}

@media(min-width:1024px) {
body, html {
	height: 100%
}
}
body {
	background: #000;
	color: #000
}

@media(min-width:1024px) {
body {
	overflow: hidden
}
}
.browserupgrade {
	margin: .2em 0;
	background: #ccc;
	color: #000;
	padding: .2em 0
}
.table {
	display: table
}
.table, .table .cell {
	width: 100%;
	height: 100%
}
.table .cell {
	display: table-cell;
	vertical-align: middle;
	text-align: center
}
.content {
	position: relative;
	width: 100%;
	font: 0/0 ApercuPro, sans-serif
}

@media(min-width:1024px) {
.content {
	width: 100%;
	height: 100%
}
.content:hover .block .bg .img {
	opacity: .15
}
.content:hover .block:hover .bg .img {
	opacity: .5
}
.content:hover .block:hover .bg .img:after {
	opacity: 1
}
.content:hover .block:hover h1:after {
	width: 40px
}
.content:hover .block:hover h2 {
	display: block
}
}

@media(min-width:1024px)and (min-width:1024px) {
.content:hover .block:hover h2 {
	-webkit-transform: translateY(0);
	transform: translateY(0);
	opacity: 1
}
}
.content .block {
	position: relative;
	display: inline-block;
	width: 100%;
	height: 300px;
	box-sizing: border-box;
	padding: 0;
	overflow: hidden;
	background-color: #090909
}

@media(min-width:1024px) {
.content .block {
	height: 50%;
	width: 33.3333333333%
}
}
.content .block .img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: .15;
	-webkit-transition: opacity .4s ease;
	transition: opacity .4s ease;
	background-position: 50%;
	background-repeat: no-repeat;
	background-size: cover;
	z-index: 1
}

@media(min-height:640px)and (orientation:landscape), (min-width:640px)and (orientation:portrait) {
.content .block .img {
	opacity: .7
}
}

@media(min-width:1024px) {
.content .block .img {
	opacity: .6
}
}

@media(max-width:639px) {
.content .block .img {
	opacity: .7
}
}
.content .block .info {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	overflow: hidden
}
.content .block .info h1 {
	color: #d0b270;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-transform: translateY(-50px);
	transform: translateY(-50px);
	-webkit-transition: -webkit-transform .8s ease;
	transition: -webkit-transform .8s ease;
	transition: transform .8s ease;
	transition: transform .8s ease, -webkit-transform .8s ease;
	font: 700 14px/15px ApercuPro, sans-serif;
	letter-spacing: 4.3px;
	text-transform: uppercase;
	margin: 0 auto;
	padding: 0;
	text-align: center;
	width: 80%;
	max-width: 330px;
	cursor: pointer
}

@media(min-height:640px)and (orientation:landscape), (min-width:640px)and (orientation:portrait) {
.content .block .info h1 {
	-webkit-transform: translateY(-50px);
	transform: translateY(-50px)
}
}

@media(min-width:1024px) {
.content .block .info h1 {
	-webkit-transform: translateY(0);
	transform: translateY(0)
}
}
.content .block .info .pcont {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	-webkit-transform: translateY(-10px);
	transform: translateY(-10px);
	opacity: 1;
	-webkit-transition: opacity .8s ease, -webkit-transform .8s ease;
	transition: opacity .8s ease, -webkit-transform .8s ease;
	transition: transform .8s ease, opacity .8s ease;
	transition: transform .8s ease, opacity .8s ease, -webkit-transform .8s ease
}

@media(min-height:640px)and (orientation:landscape), (min-width:640px)and (orientation:portrait) {
.content .block .info .pcont {
	-webkit-transform: translateY(-10px);
	transform: translateY(-10px);
	opacity: 1
}
}

@media(min-width:1024px) {
.content .block .info .pcont {
	opacity: 0;
	-webkit-transform: translateY(60px);
	transform: translateY(60px)
}
}
.content .block .info .pcont p, .content .block .info .pcont div {
	box-sizing: border-box;
	font: 16px/24px ApercuPro, sans-serif;
	margin: 0 auto;
	padding: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-align: center;
	width: 80%;
	max-width: 330px;
	overflow: hidden
}
.content .block .info .pcont p {
	color: #fff
}
.content .block .info .pcont div {
	font-weight: 400;
	color: #d0b270;
	text-transform: lowercase;
	margin-top: 10px
}
.content .block:hover .img {
	opacity: .15
}
.content .block:hover .info h1 {
	-webkit-transform: translateY(-50px);
	transform: translateY(-50px)
}
.content .block:hover .info .pcont {
	-webkit-transform: translateY(-10px);
	transform: translateY(-10px);
	opacity: 1
}
.content .block a {
	border: none;
	outline: none
}
.content .block.golf {
	top: 210px
}
.content .block.golf .img {
	background-image: url('img/macchina.jpg')
}

@media(min-width:1024px) {
.content .block.golf {
	top: 0
}
}
.content .block.corporate .img {
	background-image: url('http://www.meccanicarota.it/getmedia/7f4658c3-e21a-47f2-b45d-965564a47e7f/corporate')
}
.content .block.hotels .img {
	background-image: url('img/azienda.jpg')
}
.content .block.international .img {
	background-image: url('img/pistoni.jpg')
}
.content .block.portfolio .img {
	background-image: url('http://www.meccanicarota.it/getmedia/7c646c58-bdc8-4377-b878-2112290c5742/portfolio')
}
.content .block.winery .img {
	background-image: url('img/contattaci.jpg')
}
.content .block.entertainmeent .img {
	background-image: url('http://www.meccanicarota.it/getmedia/006218c5-6afa-4292-8197-4ba3cfb8a8e1/entertainment')
}
.content .block.rota {
	top: -300px;
	height: 210px;
	background-color: #000
}

@media(min-width:1024px) {
.content .block.rota {
	top: 150px;
	height: 50%
}
}
.content .block.rota .logo {
	position: relative;
	margin: 0 auto;
	width: 70%;
	max-width: 465px;
	height: 100%;
	background-color: transparent;
	background-image: url('img/logo.png');
	background-position: 50% 35%;
	background-repeat: no-repeat;
	background-size: contain;
	z-index: 1
}

@media(min-width:1024px) {
.content .block.rota .logo {
	max-width: none;
	background-position: 50%
}
}

@media(max-width:1023px) {
.content .block.rota .logo {
	width: 35%
}
}

@media(max-width:750px) {
.content .block.rota .logo {
	width: 45%
}
}

@media(max-width:550px) {
.content .block.rota .logo {
	width: 55%
}
}

@media(max-width:480px) {
.content .block.rota .logo {
	width: 65%
}
}
.content .block.rota .social {
	position: absolute;
	bottom: 11.6%;
	left: 0;
	width: 100%;
	height: 20px;
	text-align: center;
	z-index: 2
}
.content .block.rota .social .fb, .content .block.rota .social .ig, .content .block.rota .social .tw {
	display: inline-block;
	width: 30px;
	height: 100%;
	background-position: 50%;
	background-repeat: no-repeat
}
.content .block.rota .social .fb {
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAATCAYAAACQjC21AAABCUlEQVQ4y63UO0qDQRQF4M8hBCsLsZA0WoTgA0RwGxZWFnYuwcYNuAxdhoWFgiBYWEgQAyKiFmIpVhYScm3+yBDy+pMcGObcxxzmwMydiwjYRQ1tk6GKe9yJiI2IeIvp0YoICfNYNT3aqCR0Shx6xhF2sI5NXBS1LXQqJcUOcduT/8yDMoLXPWLLxb40qWAr4/s4QaO3KZUQ/M54o5/YuDe8xA8+stwLzgtex9p/JSK2R7yvWkQYsq6y3jSO5a8R9YWylvfwisfCOiwWVusFV8ZyFweZzeMBPSlN+M0G/q40ochMBMdCmqHoA1J32ryPOUT78TzXrqCJU6wMmdhVPGVxE2f4zVzewB8ZSgfqYgWrMQAAAABJRU5ErkJggg==")
}
.content .block.rota .social .tw {
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAQCAYAAAAbBi9cAAABH0lEQVQ4y52UoUsEQRjFf7cshosGuSQGg4KI0XR/gOGaYNVgsPkPCBbh0kVRbBptclwSQVHRZDhZEUQxiphExPKzzB53y9267oMHM9+befPmY5iKSkHMAZvAJPAJdID9oM2j1tWWSg4X1MRBPKsn6pnaQN0IxV01GmHUNh/bqI1gpHqtrgwxus8x6agT6cLLTOQbtakuBSY5RmsqqDV1y/JYV4mARWCV8ngESK92WjJNolbTRADLwFGJNFfAF9Az+gj8D16AVjqJ+oSnIBY1OQa6vUrmvdTVvQK9aWffWpw56RyY+SPJXejpAGKgHjbPhvH4CJMH4BDYGSbGwC0wHTgGTPXpXeAVuAAOgPdRUSuZbyQCakAV+AHegO8i3f8FfMPrkleqQCIAAAAASUVORK5CYII=")
}
.content .block.rota .social .ig {
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAABuUlEQVQ4y5XUv0vWYRQF8I8vDiHhEGISBRImIdTQHE7S2A+IICKEIqi5iMCi0SGa+wMaI0hIihYLgoZ+QAURLtlQg0SESESEp+W+9PXlq9iBy/vy3Od7uM+5596+JHowhv3YjQ7WevId/MQS3uF7N9HfuHQYs0Wygj8tROpsW/0fxBNcwpokkkwkeZRkIclUkh11vlkM5h/mk+gm5pI82wJBMwbq90gVcqqDHTiIu7aOcbzA9XpmByc6GMIoXrV8NIl7eFtxC8NYxEM8rnsfsbfZgKUeoos4ViI/wACO4wr2YaZx9wsGJBkvEbc39BgrHW63iL5Q0Ty/muR9p8c/XZytp1/uqXYFN/ALh7QYsA1jG2gIz8vUE1slW67K2jBUgi9vlWwOqzjZkpvBSFliHfo3IHuKMziPA7hfXZ2ucZttGbF1ZCMlcBcXcA2nyxJK+JsNf3WxE78l2ZXkU5Kjm4zORJLRTfJzSeY7+FpiTm8yPh9aTN0crVHMd5lPlknvJBn6j2GfTPIyyesk/X2N5XiuOrVa2n3boJK1Gq3hetH2atRiX8+mHcRUGXJPLcG2TfsDn/GmOg/+AlphesqSiwoUAAAAAElFTkSuQmCC")
}
#overlay2 {
	display: none;
	cursor: default;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,.5);
	z-index: 9999;
	margin: 0
}

@media only screen and (min-width:1024px) {
#overlay2 {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	position: fixed;
	left: 0;
	top: 0
}
}

@media only screen and (max-width:1023px) {
body {
	overflow: auto
}
#overlay2 {
	overflow-x: auto
}
}
#overlay-content {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding: 0;
	background: #000;
	position: absolute;
	left: 0;
	top: 0;
	margin: 0
}
#overlay2 .content {
	padding: 0!important
}
.info h1 {
	text-shadow: 2px 2px 2px #000
}
#overlay-content .arrow-wrap, #overlay-content .arrow-wrap * {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box
}
#overlay-content .arrow-wrap {
	position: fixed;
	z-index: 10;
	left: 50%;
	bottom: 2em;
	margin-left: -5em;
	width: 10em;
	height: 10em;
	padding: 4em 2em;
	font-size: .5em;
	display: block;
	margin-left: -15px;
	width: 26px;
	height: 26px;
	padding: 0
}

@media only screen and (min-width:1024px) {
#overlay-content .arrow-wrap {
	display: none
}
}
#overlay-content .arrow {
	display: block;
	position: relative;
	width: 26px;
	height: 23px;
	overflow: hidden
}
#overlay-content .arrow:after {
	content: "";
	display: inline-block;
	font-family: "Ionicons";
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	text-rendering: auto;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	position: absolute;
	top: -12px;
	font-size: 30px;
	width: 26px;
	height: 20px;
	color: #fff
}
#overlay-content .hint {
	position: absolute;
	top: .6em;
	width: 100%;
	left: 0;
	font-size: 2em;
	font-style: italic;
	text-align: center;
	color: #fff;
	opacity: 0
}
#overlay-content .arrow-wrap:hover .hint {
	opacity: 1
}
@-webkit-keyframes arrows {
0% {
top:0
}
10% {
top:12%
}
20% {
top:0
}
30% {
top:12%
}
40% {
top:-12%
}
50% {
top:12%
}
60% {
top:0
}
70% {
top:12%
}
80% {
top:-12%
}
90% {
top:12%
}
100% {
top:0
}
}
#overlay-content .arrow-wrap .arrow {
	-webkit-animation: arrows 2.8s .4s;
	-webkit-animation-delay: 3s
}