@charset "utf-8";
/* CSS Document */
@font-face {
    font-family: 'Roboto';
    src: url('Roboto-ThinItalic-webfont.eot');
    src: url('Roboto-ThinItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-ThinItalic-webfont.svg#RobotoThinItalic') format('svg'); (under the Apache Software License). 
    font-weight: 200;
    font-style: italic;
}
@font-face {
  font-family: 'Moderne';
  src: url('../fonts/moderne-sans.ttf') format('truetype');
  font-style: normal;
  font-weight: normal;
}
body{
	font-family:roboto;
	height:1080px;
	display: grid;

}
.headersecc{
	font-size: 4.5vw;
	font-weight:600;
}
.optssecc{
	font-size: 3.5vw;
	font-weight:900;
}
input[type="text"]{
	font-family:moderne;
	font-size:40px;
	width:95%;
	height:40px;
	margin:10px 1%;
	color:rgba(59, 153, 252, 1);
	border-radius:15px;
}
input[type="text"]:focus{
	border-color: #aaa;
	box-shadow: 0 0 10px 10px rgba(59, 153, 252, .7);
	box-shadow: 0 0 0 3px -moz-mac-focusring;
}
#initial{
	overflow:hidden;
	transition:height 1.5s;
}
#nostro{
	margin-top:160px;
}
#ofer{
		overflow: hidden;
    	background-color: aqua;
	    text-align: center;
}
.gral{
		overflow: hidden;
	    text-align: center;
}
#workers{
	height:0px;
	transition:height 0.5s;
}
#noworkers{
	height:0px;
	transition:height 0.5s;
}
#family{
	height:0px;
	transition:height 1s;
}
#optuniver{
	height:0px;
	transition:height 1s;
}
#sz{
	display:none;
}
#sende{
	display:none;
	height: 180px;
    width: 100%;
    font-family: 'Monospace';
    font-size: 55pt;
	background-color:#02a724;
	color:white;
	border:0px;
}
#sender{
	height: 180px;
    width: 100%;
    font-family: 'Monospace';
    font-size: 55pt;
	background-color:#02a724;
	color:white;
	border:0px;
}
.redet{
	color:red;
}
/**************************************************************************/
.select-css {
  display: block;
  font-size: 3.5vw;
  font-family: 'Verdana', sans-serif;
  font-weight: 900;
  color: #444;
  line-height: 1.3;
  padding: .4em 1.4em .3em .8em;
  width: 95%;
  height:90px;
  max-width: 100%; 
  box-sizing: border-box;
 margin: 20px auto;
  /**border: 1px solid #aaa;*/
  box-shadow: 0 1px 0 1px rgba(0,0,0,.03);
  border-radius: .3em;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: #fff;
  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
    linear-gradient(to bottom, #ffffff 0%,#f7f7f7 100%);
  background-repeat: no-repeat, repeat;
  background-position: right .7em top 50%, 0 0;
  background-size: .65em auto, 100%;
}
.select-css::-ms-expand {
  display: none;
}
.select-css:hover {
  border-color: #888;
}
.select-css:focus {
  border-color: #aaa;
  box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
  box-shadow: 0 0 0 3px -moz-mac-focusring;
  color: #222; 
  outline: none;
}
.select-css option {
  font-weight:normal;
}
#container{
	overflow:hidden;
	height:0px;
	transition:height 2s;
}
#nostro{
	width:1000px;
	height:4000px;
	transition height 0.5s;
}
#folio{
		position:fixed;
		border-style:solid;
		background-color:white;
		height: 24.5cm;
		width:18.5cm;
		background-size:contain;
		z-index:0;
		opacity:1;
		border-radius:30px;
		transition: height 0.5s;
		overflow:hidden;
	}
#landi{
		position:fixed;
	background-image: url('../img/landposter2.png');
		background-repeat: no-repeat;
		background-size: cover;
		height: 100%;
		width:100%;
	z-index:3;
	}
#land{
		position:fixed;
		background-image: url('../img/landposter.png');
		background-repeat: no-repeat;
		background-size: cover;
		height: 100%;
		width:100%;
		z-index:2;
	top:0px;
	opacity:1;
	transition: height 0.5s;
	}
#landier{
		position:fixed;
		background: url('../img/landposter2.png') no-repeat fixed;
		height: 100%;
		width:100%;
		z-index:2;
	top:0px;
		background-size:contain;
	opacity:1;
	transition: height 0.5s;
	}
#header{
		background: url('../img/logo.png') no-repeat fixed;
		height: 189px;
		background-size:contain;
		position:fixed;
		top:0px;
		width:100%;
	}
#header2{
		background: url('../img/logoced.png');
		height: 140px;
		background-position:center center;
		background-size:contain;
		background-repeat: no-repeat;
	}
#wanto{
	position: relative;
    font-family: roboto;
    font-size: 50px;
    background-color: #edffb4;
    top: 40%;
    width: 100%;
    height: 100px;
}
#txtfolier{
	font-family: 'Roboto', sans-serif;
	font-size:30pt;
	margin-block-end: 0;
    margin-block-start: 0px;
	
}
#folier{
	font-family: 'Roboto', sans-serif;
	font-size:30pt;
	color:red;
	margin-block-end: 0;
    margin-block-start: 0px;
	
}
#namer{
	font-family: 'Roboto', sans-serif;
	font-size:30pt;
	margin-block-end: 0;
    margin-block-start: 0px;
	
}
#cater{
	font-family: 'Roboto', sans-serif;
	font-size:30pt;
	color:coral;
	margin-block-end: 0;
    margin-block-start: 0px;
}
#seccioner{
	font-family: 'Roboto', sans-serif;
	font-size:30pt;
	margin-block-end: 0;
    margin-block-start: 0px;
}
#cter{
	font-family: 'Roboto', sans-serif;
	font-size:30pt;
	margin-block-end: 0;
    margin-block-start: 0px;
}
#oker{
	position:absolute;
	text-align:center;
	top:29cm;
	font-family: 'Roboto', sans-serif;
	color: crimson;
	font-size:30pt;
	margin-block-end: 0;
    margin-block-start: 0px;
	animation-name:anime;
	animation-duration:3s;
	animation-iteration-count:infinite;
}
#oker2{
	position:absolute;
	text-align:center;
	top:32cm;
	font-family: 'Roboto', sans-serif;
	color: crimson;
	font-size:30pt;
	margin-block-end: 0;
    margin-block-start: 0px;
}
#svv{
	position: relative;
    font-family: roboto;
    font-size: 50px;
	background-color:green;
    width: 100%;
    height: 100px;
	animation-name:anim;
	animation-duration:3s;
	animation-iteration-count:infinite;
}
#backer{
	position: relative;
    font-family: roboto;
    font-size: 50px;
	background-color:green;
	color:white;
	top:33cm;
    width: 100%;
    height: 100px;
}
@keyframes anim{
    0% {background-color: #ff0;} /*Amarillo*/
  100% {background-color: green;} /*Otra vez amarillo*/
}
@keyframes anime{
    0% {color: #ff0;} /*Amarillo*/
   25% {color: #f80;} /*Naranja*/
   50% {color: #000;} /*Negro*/
   75% {color: #f80;} /*Otra vez naranja*/
  100% {color: #ff0;} /*Otra vez amarillo*/
}
#backback{
	position:absolute;
	background-color:white;
	overflow-y: scroll;
	z-index: 1;
}
td{
	width:50%;
	height:118px;
}
#clock{
	position: relative;
	font-size:52px;
	top:40%;
	height:210px;
	background-color:cornsilk;
}
#wkr2{
		font-size:70px;
	}
.tpar{
	height:74px;
	width:74px;
}
/********************************************************************************************/
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
	
	
 input[type="text"]{
	 height:80px;
	}
	#fam{
		height:60px;
		width:60px;
	}
	#work{
		height:60px;
		width:60px;
	}
	#wkr{
		font-size:35px;
	}
	#wkr2{
		font-size:70px;
	}
	#invi{
		height:60px;
		width:60px;
	}
	#inv{
		font-size:35px;
	}
	#vitados{
		height:0px;
		transition:height 0.5s;
	}
	#carr{
		height:60px;
		width:60px;
	}
	#car{
		font-size:35px;
	}
}

@media screen and (max-width: 991px) {
	
}
@media screen and (max-width: 767px) {
	
} 
@media screen and (max-width: 479px) {
	
}
@media print {
	
}