@charset "UTF-8";
/* CSS Document for TOP MAIN .s1 */
/* ===== Basic styles - Mobile first ===== */

*::before,
*::after {
	box-sizing: border-box; }

*::before,
*::after {
	box-sizing: border-box; }

html, body {
	margin:0;
	padding:0;
	height:100%;
	box-sizing: border-box;
	color:#7a7a7a;
	font-family: 'Lato', sans-serif; }

.mt20 {
	margin-top:20px !important; }

.mb20 {
	margin-bottom:20px !important; }

button {
    background-color: transparent;
    border: 0 none;
    color: #fff;
    cursor: pointer;
    font-size: 15px;
    margin: 10px 0 0 0;
    overflow: hidden;
    padding: 8px 14px;
    position: relative;
    text-transform: uppercase;
    z-index: 0; }

button .bg-animation {
    background-color: #a5cc33;
    border-radius: 50%;
    height: 0;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.3s ease 0s;
    width: 0;
    z-index: -1; }

button:hover .bg-animation {
	height: 200px;
	width: 200px; }

button .bg-btn {
    background-color: #96bf1c;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -2; }

/* Header --- --- */
header {
	background-color: rgba(0,0,0,0.5);
	float: left;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	z-index: 1000;
	text-align: center; }

header .navbar {
	float: left;
	margin: 15px 0 0 15px;
	width: 30px;
	height: 30px;
	cursor: pointer; }

header h1.logo {
	background-image:url(../images/dr-giovanni-saredi.png);
	background-repeat: no-repeat;
	background-size: 100%;
	padding: 0;
	width: 185px;
	margin: 0 auto;
	height: 80px;
	opacity: 0;
	display: none; }

header .tools {
	float: right;
	margin: 5px;
	width: 90px;
	height: 45px; }

header .tools .item-tool {
	display: block;
	cursor: pointer; }

header .tools .item-tool img {
	width: 35px;
	height: 35px;
	float: left;
	margin: 5px; }

/* NavBar --- --- */
nav {
	display:none;
	float:left;
	width:100%;
	position:fixed;
	overflow:auto;
	left:0;
	top:0;
	height:100%;
	background-color:rgba(255, 255, 255, 1);
	z-index:1500;
	transform: translateY(0px) !important; }

nav ul {
	left: 50%;
    list-style: outside none none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%; }

nav ul li {
    font-size: 30px;
    font-weight: 500;
    list-style: outside none none;
    margin: 0;
    padding: 0.05% 0;
    position: relative;
    text-align: center;
    text-decoration: none;
	float:left;
	width:100%;
	transition:all ease .3s;
	text-transform: uppercase; }

nav ul li span {
	color: #C6FF00; }

nav ul li.sub {
	margin: 10px 0; }

nav ul li a {
	color:#808080;
	text-decoration:none; }

nav ul li ul {
	display: block;
    float: left;
    left: inherit;
    position: relative;
    text-align: center;
    top: inherit;
    transform: translate(0px);
    width: 100%; }

nav ul li ul li {
	float: left;
    font-size: 25px;
    margin: 2px 0;
    padding: 0;
    width: 100%; }

nav ul li ul li a {
	color:#666; }

nav ul li ul li:first-child {
	display:none; }

nav img.close {
	float:left;
	margin:0;
	border:0;
	width:30px;
	height:30px;
	position:absolute;
	right:20px;
	top:20px;
	z-index:1000;
	cursor:pointer; }

/* Welcome page --- --- */
.welcome-page {
	background-image:url(../images/welcome-page.jpg);
	background-position: center top;
	background-size: cover;
	background-repeat: no-repeat;
	width: 100%;
	position: relative;
	height: 100%;
	overflow: hidden; }

.welcome-page .layer,
.common .layer {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.55);
	z-index: 1; }

.welcome-page .container-wp {
	position: absolute;
    text-align: center;
    top: 50%;
	left:50%;
    transform: translate(-50%,-50%);
    width: 89%;
	z-index: 10; }

.welcome-page .container-wp .txt1 {
	font-size: 25px;
	font-weight: 400;
	color: #fff;
	text-align: center;
	margin:0 0 20px 0; }

.welcome-page .container-wp .txt1 span,
.welcome-page .container-wp .txt2 span {
	color: #c6ff00; }

.welcome-page .container-wp .txt2 {
	font-size: 26px;
	color: #333;
	font-weight: 900;
	margin: 0;
	text-align: center;
	color: #fff; }

.welcome-page .container-wp .txt3 {
	border: 1px solid #fff;
	margin: 0 auto;
	padding: 2% 3%;
	width: auto;
	display: inline;
	line-height: 55px;
	color: #fff;
	text-transform: uppercase;
	font-size: 20px; }

.welcome-page video {
	display: none; }

/* Section --- --- */
.common {
	width: 100%;
	position: relative;
	overflow: hidden; }

.common figure {
	background-size: cover;
	position: absolute;
	background-position: center;
	background-repeat: no-repeat;
	left:0;
	margin:0;
	top:0;
	width:100%;
	height:100%;
	z-index:0; }

.efx.common figure {
	animation: myanimation 1200s infinite; }

@keyframes myanimation {
   0% { transform:scale(1);  }
   50% { transform:scale(6); }
   100% { transform:scale(5);  }
 }

.common .container-common {
	position: relative;
	width: calc(100% - 40px);
	padding: 55px 20px;
	z-index: 1;
	text-align: center; }

.common .container-common h1.title {
	font-size: 32px;
	color: #FFF;
	margin: 0;
	text-transform: uppercase;
	font-weight: 900;
	text-align: center;
	width: 100%; }

.common .container-common .line {
	width: 100%;
	margin: 5px 0px 20px;
	text-align:center; }

.common .container-common .line span {
	border-top: 1px solid #FFF;
	width: 50px;
	display: inline-block; }

.common .container-common .txt {
	width: 100%;
	font-size: 20px;
	color: #FFF;
	white-space: normal;
	font-weight: 200;
	margin:0; }

.common .container-common .txt1 {
	width: 100%;
	font-size: 18px;
	color: #FFF;
	white-space: normal;
	font-weight: 200;
	margin: 0; }

.common .container-common .partner {
	width: 100%;
	text-align: center;
	font-size: 20px;
	margin: 30px 0;
	font-weight: 700;
	color: #FFF;
	text-transform: uppercase; }

.common .container-common .lg-partner {
	display: inline-block;
	margin: 0 5px;
	width: 120px; }

/* Ristrazione --- */
.ristorante figure {
	background-image:url(../images/per-qualsiasi-cosa-ristorazione-lite.jpg); }

.ristorante.common .container-common h1.title span {
	color: #ffec53; }

.ristorante .container-common .txt strong {
	color: #ffec53; }

/* Caffe --- */
.caffe figure {
	background-image:url(../images/per-qualsiasi-cosa-caffe-lite.jpg); }

.caffe.common .container-common h1.title span {
	color: #da7b01; }

.caffe .container-common .txt strong {
	color: #da7b01; }

.caffe .container-common .bx-cialde .item .txt span {
	color: #da7b01;
	font-weight: 400;
	margin:0 0 5px 0; }

.caffe .container-common .bx-cialde {
	width: 100%;
	margin: 20px 0 0 0;
	display: inline-block; }

.caffe .container-common .bx-cialde .item {
	width: 100%;
	margin: 10px 0; }

.caffe .container-common .bx-cialde .item img {
	display: inline-block;
	vertical-align: top;
	width: 80px;
	height: 80px;
	margin: 0 20px 0 0; }

.caffe .container-common .bx-cialde .item .txt {
	display: inline-block;
	vertical-align: top;
	width: calc(100% - 120px);
	color: #FFF;
	font-size: 16px;
	text-align: left; }

/* Stampa --- */
.grafica figure {
	background-image:url(../images/per-qualsiasi-cosa-grafica-lite.jpg); }

.grafica.common .container-common h1.title span {
	color: #fc167c; }

.grafica .container-common .txt strong {
	color: #fc167c; }

/* Car --- */
.car figure {
	background-image:url(../images/goi-fruit.jpg); }

.car .container-common h1.title span {
	color: orange; }

.car .container-common .txt strong {
	color: orange; }

/* Oli --- */
.oli figure {
	background-image:url(../images/per-qualsiasi-cosa-oli-lite.jpg); }

.oli .container-common h1.title span {
	color: #d3eb0c; }

.oli .container-common .txt strong {
	color: #d3eb0c; }

/* Web --- */
.web figure {
	background-image:url(../images/per-qualsiasi-cosa-siti-web-lite.jpg); }

.web .container-common h1.title span {
	color: #97C21D; }

.web .container-common .txt strong {
	color: #97C21D; }

/* Ricamo --- */
.ricamo figure {
	background-image:url(../images/per-qualsiasi-cosa-ricamo-professionale-lite.jpg); }

.ricamo .container-common h1.title span {
	color: #831eff; }

.ricamo .container-common .txt strong {
	color: #831eff; }




/* Footer --- --- */
footer {
    background-color: #272727;
    float: left;
    padding: 30px 20px;
	margin:0;
    width: calc(100% - 40px); }

footer .half-sx {
	float:left;
	width:100%;
	margin:0; }

footer .half-sx p.txt {
	float:left;
	width:100%;
	margin:0;
	font-size:15px;
	color:#999;
	text-align:center;
	font-weight:200; }

footer .half-dx {
	float:left;
	width:100%;
	margin:0; }

footer .half-dx p.credits {
	float:right;
	width:100%;
	margin:0;
	font-size:15px;
	color:#999;
	text-align:center;
	font-weight:200; }

footer .half-dx p.credits a {
	color:#00ADE7;
	text-decoration:none; }

/* == Media queries (breakpoint) == */
/* -----------------------------------
IPHONE PORTRAIT
----------------------------------- */
@media only screen and (min-width: 600px){

/* Section --- --- */
.common {
	height: 100%;
	overflow: hidden; }

.common .container-common {
	position: absolute;
	top: 50%;
	padding:0 40px;
	width: calc(100% - 80px);
	transform: translateY(-50%);
	z-index: 2; }

.common .container-common .line {
	width: 100%;
	margin: 10px 0 20px;
	text-align:center; }

.common .container-common .line span {
	width: 100px; }

.common .container-common h1.title {
	font-size: 40px;
	text-align: center; }

.common .container-common .txt {
	font-size: 20px;
	text-align: left; }

.common .container-common .txt1 {
	font-size: 20px;
	text-align: left; }

.common .container-common .lg-partner {
	font-size: 20px;
	width: 100px; }

.caffe .container-common .bx-cialde .item .txt {
	font-size: 20px; }

}

/* == Media queries (breakpoint) == */
/* -----------------------------------
IPAD LANDSCAPE + NETBOOK
----------------------------------- */
@media only screen and (min-width: 820px){
/* Header --- --- */
header {
	background-color: rgba(0,0,0,0.0); }

header h1.logo {
	margin: 0;
    padding: 0;
    width: 260px;
	display: inline-block;
	height: 124px; }

header .navbar {
    margin: 35px 0 0 35px;
	height: 50px;
	width: 50px; }

header .tools {
	margin: 35px 10px 0 0;
	width: auto; }

header .tools .item-tool {
    height: 50px;
    margin: 0 30px;
    width: 50px;
	display: block;
	float: right; }

header .tools .item-tool img {
	height: 50px;
    width: 50px; }

/* Welcome page --- --- */
.welcome-page {
	background-image: none; }

.welcome-page .container-wp {
	position: absolute;
    text-align: center;
    top: 50%;
	left: 50%;
    transform: translate(-50%,-50%);
    width: 55%;
	z-index:1; }

.welcome-page .container-wp .txt1 {
	font-size: 1.35vw;
	margin: 0; }

.welcome-page .container-wp .txt2 {
	font-size: 3.8vw;
	margin: 0; }

.welcome-page .container-wp .txt3 {
	font-size: 1.8vw;
	padding: 1%;
	line-height: 100px; }

.welcome-page .mouse-scroll {
    border: 0 none;
    bottom: 20px;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
	  z-index: 100;}

.welcome-page .mouse-scroll .rev-scroll-btn {
    border-color: rgba(255, 255, 255, 0.9);
    border-radius: 23px;
    border-style: solid;
    border-width: 1px;
    cursor: pointer;
    min-height: 56px;
    min-width: 36px;
    z-index: 9; }

.welcome-page .mouse-scroll .rev-scroll-btn span {
    animation: 2.5s linear 0s normal none infinite running scrollBtn;
    background: white none repeat scroll 0 0;
    border-radius: 50%;
    display: block;
    height: 8px;
    left: 50%;
    margin: -4px 0 0 -4px;
    position: absolute;
    top: 29%;
    width: 8px; }

/* Animation */
@-webkit-keyframes scrollBtn {
	0% {top: 29%; opacity:0; }
	10% { top: 50%; opacity:1; }
	30% { top: 50%; opacity:1; }
	70% { top: 50%; opacity:0; }
	100% { top: 50%; opacity:0; }
}

@-moz-keyframes scrollBtn {
	0% {top: 29%; opacity:0; }
	10% { top: 50%; opacity:1; }
	30% { top: 50%; opacity:1; }
	70% { top: 50%; opacity:0; }
	100% { top: 50%; opacity:0; }
}

@keyframes scrollBtn {
	0% {top: 29%; opacity:0; }
	10% { top: 50%; opacity:1; }
	30% { top: 50%; opacity:1; }
	70% { top: 50%; opacity:0; }
	100% { top: 50%; opacity:0; }
 }

.welcome-page video {
    background: rgba(0, 0, 0, 1) no-repeat scroll 0 0 / cover ;
    height: auto;
    left: 50%;
    min-height: 100%;
    min-width: 100%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: opacity 1s ease 0s;
    width: auto;
    z-index: -100;
	display: block; }

/* Section --- --- */
.common {
	height: 100%;
	overflow: hidden; }

.common .container-common {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 80%;
	transform: translate(-50%,-50%);
	z-index: 2; }

.common .container-common .line {
	margin: 30px 0px 40px;
	text-align: left;
	width: 70px; }

.common .container-common h1.title {
	font-size: 5vw;
	text-align: left;
	letter-spacing: -2px;
	transition:all ease 2000s; }

.efx.common .container-common h1.title {
	animation: letter 100s infinite; }

@keyframes letter {
   0% { letter-spacing: -2px; }
   50% { letter-spacing: 12px; }
   100% { letter-spacing: -2px; }
 }


.common .container-common .txt {
	font-size: 2vw;
	text-align: left; }

.common .container-common .txt1 {
	font-size: 2vw;
	text-align: left; }

.common .container-common .partner {
	text-align: left; }

.common .container-common .lg-partner {
	float: left;
	width: 150px;
	margin: 0 10px; }

/* Ristorante --- */
.ristorante figure {
	background-image:url(../images/per-qualsiasi-cosa-ristorazione.jpg); }

/* Caffe --- */
.caffe figure {
	background-image:url(../images/per-qualsiasi-cosa-caffe.jpg); }

.caffe .container-common .bx-cialde .item .txt {
	font-size: 1.8vw; }

/* Stampa --- */
.grafica figure {
	background-image:url(../images/per-qualsiasi-cosa-grafica.jpg); }

/* Car --- */
.car figure {
	background-image:url(../images/goi-fruit.jpg); }

/* Oli --- */
.oli figure {
	background-image:url(../images/per-qualsiasi-cosa-oli.jpg); }

/* Web --- */
.web figure {
	background-image:url(../images/per-qualsiasi-cosa-siti-web.jpg); }

/* Ricamo --- */
.ricamo figure {
	background-image:url(../images/per-qualsiasi-cosa-ricamo-professionale.jpg); }


/* Footer --- --- */
footer .half-sx {
	float: left;
	width: calc(100% - 350px); }

footer .half-sx p.txt {
	text-align: left; }

footer .half-dx {
	float: right;
	width: 350px; }

footer .half-dx p.credits {
	text-align: right; }

}

/* == Media queries (breakpoint) == */
/* -----------------------------------
IPAD LANDSCAPE + NETBOOK
----------------------------------- */
@media only screen and (min-width: 1008px){

}

/* == Media queries (breakpoint) == */
/* -----------------------------------
IPAD LANDSCAPE + NETBOOK
----------------------------------- */
@media only screen and (min-width: 1150px){

/* NavBar --- --- */
nav ul li {
    font-size: 35px;
    transition: all 0.3s ease 0s;
	padding: 0.1% 0; }

nav ul li ul li {
    font-size: 28px;
	transition:all ease .3s; }


}

/* == Media queries (breakpoint) == */
/* -----------------------------------
DESKTOP
----------------------------------- */
@media only screen and (min-width: 1280px){

}

/* == Media queries (breakpoint) == */
/* -----------------------------------
DESKTOP
----------------------------------- */
@media only screen and (min-width: 1520px){

.common .container-common {
	width: 60%; }

.common .container-common h1.title {
	font-size: 4vw;
	text-align: left; }

.common .container-common .txt {
	font-size: 1.5vw;
	text-align: left; }

.common .container-common .txt1 {
	font-size: 1vw;
	text-align: left; }

.caffe .container-common .bx-cialde .item .txt {
	font-size: 1.1vw; }

}

/* == Media queries (breakpoint) == */
/* -----------------------------------
DESKTOP
----------------------------------- */
@media only screen and (min-width: 1920px){

/* NavBar --- --- */
nav ul li {
	font-size:50px;
	transition:all ease .3s;
	padding: 0.2% 0; }

nav ul li ul li {
    font-size: 33px;
	transition:all ease .3s; }

/* Section --- -- */
.common .container-common .partner {
	font-size: 30px; }

}