/* Links */		
a { text-decoration: underline; color: #2b2b2b; }
a:hover { text-decoration: underline; color: #fff; }
		
.a2 { text-decoration: underline; color: #2b2b2b; cursor: pointer; }
.a2:hover { text-decoration: underline; color: #666; }
		
.a3 { margin: 0px 10px 0px 10px; text-decoration: none; color: #e47c6f; cursor: pointer; font-weight: lighter; font-size: 14px; }
.a3:hover { text-decoration: underline; color: #e47c6f; }
		
.a4 { margin: 0px 0px 0px 0px; text-decoration: none; color: black; cursor: pointer; font-weight: lighter; font-size: 14px; }
.a4:hover { text-decoration: underline; color: black; }

h1 { font-size: 18px; color:#666; font-weight: normal; }
h2 { font-size: 11px; color:#666; font-weight: normal; margin-top: -18px; }
h23 { margin: 0px 10px 0px 10px; }

.text-name { color: #e47c6f; margin: 115px 10px 0px 10px; font-weight: bold; font-size: 20px; }
.text-carrec { color: #666; margin: 10px 10px 0px 10px; font-weight: normal; font-size: 14px; }

/* Tipografia */
.theserif { font-family: 'theserif',georgia; }
.thesans { font-family: 'thesans',arial; }


.b_right { }
.b_right:after { left: 30%; }

.b_small { }
.b_small:after { left: 35%; }

/* Buttons */
.round-button { position: absolute; font-family: 'thesans',arial; font-size:14px; font-weight:bold; text-align:center; color:#f5f5f5; text-decoration:none; display:block; width:35px; height:35px; line-height:35px; border: 2px solid #f5f5f5; border-radius: 50%; background: #bbb; box-shadow: 0 0 5px gray; cursor: pointer; }

.home-buttons { width:90px; height:90px; left: 90px; bottom: 130px; font-size:18px; font-weight:lighter; color:#f5f5f5; border-radius: 50%; line-height:90px; background: #ff9a00; position: absolute; z-index: 1005; cursor: pointer; text-align: center; }
#home-com { left: 550px; bottom: 130px; background:#d442a5; }
#home-perque { left: 815px; bottom: 190px; background:#70cfd1; }
#home-quan { left: 300px; bottom: 125px; background:#d2d339; }
#home-que { left: 40px; bottom: 170px; background:#ff9a00; }

.home-buttons2 { width:90px; height:35px; left: 90px; bottom: 130px; font-size:18px; font-weight:lighter; color:#f5f5f5; border-radius: 5%; line-height:35px; background: #f1f0ee; position: absolute; z-index: 1005; cursor: pointer; text-align: center; }

.home-buttons2:after { content: ""; position: absolute; right: 10px; border-width: 10px 10px 0 10px; bottom: -10px; border-style: solid; border-color: #f5f5f5 transparent; }

#home-arts { width:60px; left: 525px; bottom: 565px; background:#cf312e; z-index: 1025; opacity: 0; }
#home-arts:after { border-color: #cf312e transparent; z-index: 1025; }
#home-ciencia { width:90px; left: 173px; bottom: 500px; color:#cd408c; z-index: 1025; opacity: 0; }
#home-enginyeria { width:120px; left: 450px; bottom: 540px; color:#7ba002; z-index: 1025; opacity: 0; }
#home-mats { width:135px; left: 587px; bottom: 570px; color:#cd8754; z-index: 1025; opacity: 0; }
#home-tecnologia { width:120px; left: 298px; bottom: 515px; color:#64a0a1; z-index: 1025; opacity: 0; }

/*#home-arts { width:60px; left: 525px; bottom: 540px; background:#cf312e; z-index: 1025; opacity: 0; }
#home-arts:after { border-color: #cf312e transparent; z-index: 1025; }
#home-ciencia { width:90px; left: 100px; bottom: 500px; color:#cd408c; z-index: 1025; opacity: 0; }
#home-enginyeria { width:120px; left: 375px; bottom: 540px; color:#7ba002; z-index: 1025; opacity: 0; }
#home-mats { width:135px; left: 660px; bottom: 570px; color:#cd8754; z-index: 1025; opacity: 0; }
#home-tecnologia { width:120px; left: 225px; bottom: 515px; color:#64a0a1; z-index: 1025; opacity: 0; }*/

.video-buttons { font-family: 'thesans',arial; text-align:center; text-decoration:none; display:block; }
.video-button-name { width:90px; height:90px; left: 40px; bottom: 75px; font-size:18px; font-weight:lighter; color:#f5f5f5; border-radius: 50%; line-height:90px; background: #ff9a00; position: absolute; z-index: 1001; cursor: default; }
.video-button-up { width:50px; height:50px; left: 120px; bottom: 85px; font-size:14px; color:#f5f5f5; border-radius: 50%; line-height:50px; background: #555; opacity: 0.9; position: absolute; z-index: 1002;  cursor: pointer; }
.video-button-down { width:50px; height:50px; left: 120px; bottom: 85px; font-size:14px; color:#f5f5f5; border-radius: 50%; line-height:70px; background: #555; opacity: 0.9; position: absolute; z-index: 1002;  cursor: pointer; }
.video-button-close { width:50px; height:50px; right: 40px; bottom: 75px; font-size:24px; color:#777; border-radius: 50%; line-height:50px; background: #f0f0f0; opacity: 0.9; position: absolute; z-index: 1002;  cursor: pointer; }
.vb-arts {  background: #f1f0ee; background-image: url('../images/letters/a_small.png'); font-size:10px; line-height:135px; color: #cf312e; }
.vb-ciencia { background: #f1f0ee; background-image: url('../images/letters/s_small.png'); font-size:10px; line-height:135px; color:#cd408c;  }
.vb-enginyeria { background: #f1f0ee; background-image: url('../images/letters/e_small.png'); font-size:10px; line-height:135px; color:#7ba002; }
.vb-mats { background: #f1f0ee; background-image: url('../images/letters/m_small.png'); font-size:10px; line-height:135px; color:#cd8754; }
.vb-tecnologia { background: #f1f0ee; background-image: url('../images/letters/t_small.png'); font-size:10px; line-height:135px; color:#64a0a1; }
.vb-com { background: #d442a5; }
.vb-perque { background: #70cfd1; }
.vb-quan { background: #d2d339; }
.vb-que { background: #ff9a00; }

/* Estructura */
body { font-family: 'thesans',arial; font-size: 16px; line-height: 1.2em; color:#666; background: #f0f0f0; }		
#contingut { width: 940px; height: 670px; background-color: #fff; position:absolute; margin:auto; top:0; left:0; right:0; bottom:0; box-shadow: 1px 1px 2px #cccccc, 0 0 25px #cccccc, 0 0 5px #cccccc; }		
.lacaixa { width: 940px; height: 60px;  position: relative; z-index: 1000; }			
.titol { width: 940px; height: 60px; text-align: center; position: absolute; padding-top: 6px; }	
.logo-titol { position: absolute; }				
.logo-titol-1 { width: 160px; height: 60px; left: 10px; }					
.logo-titol-2 { width: 90px; height: 60px; right: 0; padding-top: 6px; font-size: 13px; line-height: 13px; color:#666; font-weight: lighter; }					
.logo-titol-3 { width: 60px; height: 50px; right: 100px; border-right: 1px dotted #666; margin-top: 5px; }					
.footer { position: absolute; bottom: 0px; }					
.footer-vid { position: absolute; bottom: 0px; z-index: 998; }				
.logo-footer { position: absolute; left: 370px; }					
.credits { width: 60px; height: 50px; left: 840px; margin-top: 11px; }			
#credits-bg { width: 940px; height: 610px; background-color: rgba(255, 255, 255, 1); position: absolute; bottom: 0; z-index: 1050; }

.videos {position: absolute; width: 940px; height: 528px; background-color: black; z-index: 1;}
#border-vid { position: absolute; width: 936px;	height: 540px; border-right: 2px solid #fff; border-left: 2px solid #fff; bottom: 70px; z-index: 998; }

.video-bg { width: 940px; height: 450px; background-color: rgba(255, 255, 255, 1); position: absolute; bottom: 0; z-index: 999; }
.video-bg-black { width: 940px; height: 610px; background-color: rgba(175, 175, 175, .75); position: absolute; bottom: 0; z-index: 998; }
.lines-bg { width: 940px; height: 540px; background-image: url('../images/info-bg.png'); background-repeat: no-repeat; position: absolute; bottom: 60px; z-index: 1001; opacity: .25; }

.intro-bg { width: 940px; height: 540px; background-image: url('../images/intro-bg.png'); position: absolute; bottom: 30px; z-index: 999; opacity: .75; }

.cont-col { position: absolute;	width: 188px;	height: 350px;	top: 225px;	left: 20%; z-index: 1002;}

.col1 {	left: 0%;}
.col2 {	left: 20%;}
.col3 {	left: 40%;}
.col4 {	left: 60%;}
.col5 {	left: 80%;}
.col1-3 { left: 10%;}
.col2-3 { left: 40%;}
.col3-3 { left: 70%;}
.col1-5 { width: 165px;	left: 2%;}
.col2-5 { width: 165px;	left: 21%;}
.col3-5 { width: 165px;	left: 40%;}
.col4-5 { width: 165px;	left: 60%;}
.col5-5 { width: 165px;	left: 80%;}

.info-img { width:100px; height:100px; left: 5px; top: 0px; border-radius: 50%; background: #ff9a00; position: absolute; z-index: 1005; cursor: default; overflow: hidden; border: 1px solid #e47c6f;}

.s-big { position: absolute; z-index: 1019; top: 205px; left: 95px; left: 168px; }
.t-big { position: absolute; z-index: 1018; top: 190px; left: 225px; left: 298px; }
.e-big { position: absolute; z-index: 1017; top: 165px; left: 365px; left: 440px; }
.a-big { position: absolute; z-index: 1020; top: 130px; left: 460px; }
.m-big { position: absolute; z-index: 1015; top: 140px; left: 640px; left: 567px; }

.hover-creix {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.hover-creix:hover, .hover-creix:focus, .hover-creix:active {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

@-webkit-keyframes hover-float {
  0% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }

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

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

@keyframes hover-float {
  0% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }

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

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

@-webkit-keyframes hover-float-float {
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}

@keyframes hover-float-float {
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}

.hover-float {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
}
.hover-float:hover, .hover-float:focus, .hover-float:active {
  -webkit-animation-name: hover-float-float, hover-float;
  animation-name: hover-float-float, hover-float;
  -webkit-animation-duration: .3s, 1.5s;
  animation-duration: .3s, 1.5s;
  -webkit-animation-delay: 0s, .3s;
  animation-delay: 0s, .3s;
  -webkit-animation-timing-function: ease-out, ease-in-out;
  animation-timing-function: ease-out, ease-in-out;
  -webkit-animation-iteration-count: 1, infinite;
  animation-iteration-count: 1, infinite;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-direction: normal, alternate;
  animation-direction: normal, alternate;
}