/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */


@font-face {
  font-family: 'VodafoneB';
  src: url('../fonts/VodafoneRg_Bd.ttf')  format('truetype'); /* Safari, Android, iOS */
}


* {
    -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
}

* {
	-webkit-user-drag: none;
	-moz-user-drag: none;
	-ms-user-drag: none;
	user-drag: none;
}

*:focus {
    outline: none;
}

html{
	background-color: #111;
	width: 100%;
	height: 100%;
}


body {
    -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
    -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */

	/*background-color: #004e95;*/
	
    /*background-image:linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
    background-image:-webkit-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
    background-image:-ms-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
    background-image:-webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(0, #A7A7A7),
        color-stop(0.51, #E4E4E4)
    );*/
    background-attachment:fixed;
    font-family:'VodafoneB',HelveticaNeue-Light, 'HelveticaNeue', Helvetica, Arial, sans-serif;
    font-size:12px;
    
	
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#007abe+0,00417c+82 */
background: #000000; /* Old browsers */
/*background: -moz-linear-gradient(-45deg, #000000 0%, #1b1b1b 82%); /* FF3.6-15 */
/*background: -webkit-linear-gradient(-45deg, #000000 0%,#1b1b1b 82%); /* Chrome10-25,Safari5.1-6 */
/*background: linear-gradient(135deg, #000000 0%,#1b1b1b 82%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#1b1b1b',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */


	
	
	
	
	height:100%;
	width:100%;
	
	/*height:1080px;
	width:1920px;*/
	
    margin:0px;
    padding:0px;
    /*text-transform:uppercase;*/
    
	/*overflow: hidden;*/
	display: none;
	transform-origin: left top;
	position: fixed;
	
	

}

#videomain{
	
	background-image: url(../img/bgvideomain.png)
}
#supercontainer{
	height:1080px;
	width:1920px;
	transform-origin: left top;
	position: fixed;
    margin:0px;
    padding:0px;
	touch-action: manipulation;
}



video::-webkit-media-controls-start-playback-button {
  /*display: none !important;*/
}


video::-webkit-media-controls-timeline{
	
	/*height: 100px!important;*/
	
}

video::-webkit-media-controls-panel{
	
}

input[type=range]::-webkit-slider-runnable-track {
	
	/*-webkit-appearance: none;
	height: 350px!important;
	display: block!important;
	background: #ff0000!important;
	
	transform: matrix3d(1,0,0.00,0,0.00,3,0.00,0,0,0,1,0,0,0,0,1);
	-webkit-transform: matrix3d(1,0,0.00,0,0.00,3,0.00,0,0,0,1,0,0,0,0,1);*/
	
}



input[type="range"]::-webkit-slider-thumb{
	
}


video::-webkit-media-controls-fullscreen-button {
    display: none;
}


.btn {
  background: #c55e9d;
  font-family: Arial;
  color: #ffffff;
  font-size: 40px;
  padding: 20px 0px 20px 0px;
  text-decoration: none;
  border-bottom: solid 1px #ffffff;
	
}

.btn:hover {
  background: #c55e9d;
  text-decoration: none;
}





/* Portrait layout (default) */
.app {
	
    background: url(../img/logo-slide.png) no-repeat center top;
    position: absolute;
    /*left: 50%;
    top: 50%;*/
    height: 1080px;
    width: 1920px;
    text-align: center;
   /* margin: -20px 0px 0px -150px;*/
    background-size: 100% auto;
    background-repeat: no-repeat;
	/*background-color: #004e95;*/
	/*background: #0066cc; /* Old browsers */
	/*background: -moz-linear-gradient(top, #0066cc 0%, #005093 100%); /* FF3.6-15 */
	/*background: -webkit-linear-gradient(top, #0066cc 0%,#005093 100%); /* Chrome10-25,Safari5.1-6 */
	/*background: linear-gradient(to bottom, #0066cc 0%,#005093 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0066cc', endColorstr='#005093',GradientType=0 ); /* IE6-9 */
}

/* MENU layout */
#menu {
	position:absolute;
	height:100%;
    width:100%;
	display: none;
}

#start {
	position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
	/*background-color: aqua;*/
}

#admin {
	position:absolute;
    width:100%;
    /*left:50%;
	margin-left: -125px;*/
    text-align:center;
	font-size: 14px;
	z-index: 1;
	
}
#datidb {
	display: none;
	position:absolute;
	background-color:#ffffff;
    height:100%;
    width:100%;	
}
#guardadati, #scrividati, #tornahome, #cancellatabella {
	/*font-size:14px;*/
	width:100%;
    /*left:50%;
	margin-left: -125px;*/
    text-align:center;
	font-size: 24px;
}
/* LAYOUT DEL VIDEO (default) */
#videomovie{
	display: none;
	position: absolute;
	z-index: 0;
	height: 100%;
	width: 100%;
}

/*
var myVideo = document.getElementById("videovodafone");

var controlloaccessi  = document.getElementById("rinnovoautomatico");

var rinnovoautomatico  = document.getElementById("rinnovoautomatico");

var wellness1  = document.getElementById("wellness1");
var wellness2  = document.getElementById("wellness2");
var wellness3  = document.getElementById("wellness3");
var wellnessflip1  = document.getElementById("wellnessflip1");
var wellnessflip2  = document.getElementById("wellnessflip2");

var fliptonicstaff  = document.getElementById("fliptonicstaff");
var evolutionfit  	= document.getElementById("evolutionfit");

var pianocorsi 			= document.getElementById("pianocorsi");
var iscrizionecorsi		= document.getElementById("iscrizionecorsi");
var gestioneliste	= document.getElementById("gestioneliste");
var prenotazioni	= document.getElementById("prenotazioni");

var merate  = document.getElementById("merate");
var ojmar   = document.getElementById("ojmar");

var teamsystempayintro   	= document.getElementById("teamsystempayintro");
var marcocasali   			= document.getElementById("marcocasali");
var gianlucabracciali   	= document.getElementById("gianlucabracciali");*/



#videomerate, #videoojmar, #videoteamsystempayintro, #videocontrolloaccessi,#videovs1_intervista1,#videovs1_intervista2,#videovs3_cambiafiltri,#videovs2_intervista1,#videomarcocasali,#videogianlucabracciali,#videoabbonamento,#videofliptonic,#videofliptonic2,#videoevolutionfit,#videoagendaavanzata, #videocrmcomunicazioni, #videogestionecrm, #videowellness1, #videowellness2,#videowellness3,#videowellnessflip1,#videowellnessflip2,#videowellnessflip3,#videopianocorsi,#videoiscrizionecorsi,#videogestioneliste,#videoprenotazioni, #videorinnovoautomatico, #videofliptonicstaff, #videosubscriptioneconomy, #videoappuntamentisingoli, #videoprelievoautomatico, #videostatisticheoccupazione{
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
}

#bottonetrasparente{
	/*background-color:rgba(208,69,72,0.70);*/
	/*display: block;*/
	display: none;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	z-index: 10;
}

#effectsvg{
	width: 1920px;
	height: 1080px;
	overflow: hidden;
	display: none;
	position: absolute;
	background: url(../img/bg-fondo1.png);
	background-repeat: no-repeat;
	background-size: contain;
}
.eff-svg{
	/*background-color:rgba(208,69,72,0.70);*/
	/*display: block;*/
	display: none;
	position: absolute;
	width: auto;
	height: 102%;
	top: 0;
	right: 0;
	/*z-index: 11;*/
}

#touchasset{
	display: none;
	position: absolute;
	z-index: 20;
	top: 0;
	left: 0;
	width: 100px;
	height: 100px;
	/*-moz-opacity: 0;
	-khtml-opacity: 0;
	opacity: 0*/
	z-index: 9999;
}

/*#videov2x, #videomoobike{
	position: absolute;
	height: 100%;
	width: 100%;
}
#videov2x source, #videomoobike source{
	background-color: #ffffff;
}*/
#bottonetrasparente{
	/*background-color:rgba(208,69,72,0.70);*/
	display: none;
	position: absolute;
	width: 100%;
	height: 700px;
	top: 0;
	z-index: 10;
}
#pulsantiera{
	display: none;
	position: absolute;
	width: 100%;
	height: 980px; /*altezza meno 100px*/
	top: 0;
	z-index: 1;
	/*background-color: rgba(240, 255, 255, 0.73);*/
}
#option1, #option2, #option3, #option4, #option5, #option6, #option7, #option8, #option9{
	position: absolute;
	/*width: 20vh;
	height: 21vh;*/
	width: 259px;
	height: 265px;
	
	right: 0px;
	bottom: 0px;
	-webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
	display: none;
	background-repeat: no-repeat;
	background-position: center center;
	background-color: transparent;
	/*background-color: #ff000066;*/
	cursor: pointer;
}

#option4{
	position: absolute;
			/*width: 20vh;
	height: 21vh;*/
	width: 259px;
	height: 265px;
	right: 0px;
	bottom: 280px;
	-webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
	display: none;
	background-repeat: no-repeat;
	background-position: center center;
	
}



#option1{ 

    width: 629px;
    height: 735px;
    right: 624px;
    bottom: 70px;
 
}
#option2{ 

	width: 949px;
    height: 615px;
    right: 190px;
    top: 137px;

}
#option3{ 

	width: 859px;
    height: 695px;
    left: 570px;
    top: 250px;


}
#option4{ 
	width: 449px;
    height: 265px;
    left: 590px;
    top: 400px;
}
#option5{ 

	width: 449px;
    height: 385px;
    left: 1240px;
    top: 380px;

}
#option6{ 
	width: 519px;
    height: 285px;
    left: 620px;
    top: 310px;

}
#option7{ 
	width: 1759px;
    height: 735px;
    left: 70px;
    top: 170px;

}
#option8{ 
	width: 979px;
    height: 285px;
    left: 780px;
    top: 310px;

}
#option9{ 
	width: 279px;
    height: 485px;
    left: 770px;
    top: 310px;
}


.btop{opacity: 0!important}


#slides{
	position: absolute;
	display: none;
	top:0; left:0;
	z-index: 2;
	width: 1920px;
	height: 1080px;
	/*width: 100%;
	height: 100%;*/
}

#slide1, #slide2, #slide3, #slide4, #slide5, #slide6, #slide7, #slide8, #slide9{
	position: relative;
	display: none;
	top:0; left:0;
	/*height: 100%;
	width: 100%;*/
	width: 1920px;
	height: 1080px;
	vertical-align: middle;
	/*background-image: url(../img/t-slide3/fondoslide.png)*/
	background-color: transparent;
}
#slide1,#slide4{
	/*background-color: #ffffff;*/
	height: 1080px;
	background-color: transparent;
	/*background-color: #004e95;*/
}

#slide2{
	/*height: 100%;*/
	height: 1080px;
	background-color: transparent;
}
#slide3{
	/*height: 100%;*/
	height: 1080px;
	background-color: transparent;
}
#slide5{
	/*height: 100%;*/
	height: 1080px;
	background-color: transparent;
}
#slide6{
	/*height: 100%;*/
	height: 1080px;
	background-color: transparent;
}

.vi{
	position: absolute;
	top:0; left:0;
	/*height: 100%;
	width: 100%;*/
	
	width: 1920px;
	height: 1080px;
	
	vertical-align: middle;
	display: none;
}

.arrowleft, .arrowright, .grid{
	position: absolute;
	z-index: 3;
	display: none;
	top: -1px;
	opacity: 1
}
.arrowright{
	right: 285px;;
}
.arrowleft{
	left: 1364px;
}
.grid{
	right: 188px;
}



.arrowleft-ombra, .arrowright-ombra{display: block; opacity: 0.1}

#backtovideo{
	position: absolute;
    display: none;
    width: 185px; 
    height: 90px; 
    /*background-color: #E60000;*/
	background-image: url(../img/back.png);
    top: -1px;
    right: 0;
    font-size: 22px;
    color: #fff;
    font-family: 'VodafoneB', 'sans serif';
    line-height: 24px;
    /*box-shadow: -1px 1px 8px #000;*/
	z-index: 9999;
}


#choice{
	display:none;
	position: absolute;
	width: 50%;
	height: 100%;
	left:0%;
	background:url(../img/choice.png) no-repeat center center; /* 170px x 200px */
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
@media screen and (min-width: 320px) and (max-width: 2400px) and (orientation: portrait) {
  html {
    /*transform: rotate(-90deg);
    transform-origin: left top;
    width: 100vh;
    overflow-x: hidden;
    position: absolute;
    top: 100%;
    left: 0;*/
  }
}

/* Landscape layout (with min-width) */
@media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
    .app {
	   background-position: center center;
		/* padding: 75px 0px 75px 170px; */
		/* margin: -70px 0px 0px -300px;*/
		background-size: contain;
    }
}

h1 {
    font-size:24px;
    font-weight:normal;
    margin:0px;
    overflow:visible;
    padding:0px;
    text-align:center;
}

.event {
    border-radius:4px;
    -webkit-border-radius:4px;
    color:#FFFFFF;
    font-size:12px;
    margin:0px 30px;
    padding:2px 0px;
}

.event.listening {
    background-color:#ff3333;
    display:block;
}

.event.received {
    background-color:#4B946A;
    display:none;
}

@keyframes fade {
    from { opacity: 1.0; }
    50% { opacity: 0.4; }
    to { opacity: 1.0; }
}
 
@-webkit-keyframes fade {
    from { opacity: 1.0; }
    50% { opacity: 0.4; }
    to { opacity: 1.0; }
}
 
.blink {
    animation:fade 3000ms infinite;
    -webkit-animation:fade 3000ms infinite;
}