//my css

html {
	height: 100%;
	-webkit-overflow-scrolling: touch;
	overflow-y: scroll;
}

source{
	autostart:0;
}

.wrapper {
	text-align:center;
}

#wrapper-horiz {
    padding-left: 0;
    transition: all 0.5s ease;
}

.button-custom {
	background-color: #ABABAB;
	color: white;
	width: 500px;
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 10px;
	margin-top: 20px;
	padding: 10px;
	letter-spacing: 6px;
	cursor: auto;
}

.button-custom:hover {
	background-color: #01A4AB;
	color: white;
}

.btn-main-menu-toggle {
	position: fixed;
	display: none;
	top: 0px;
	right: -1%;
	z-index: 3;
	margin: 10px;
	background-color: #01A4AB;
	color: white;
	font-size: 20px;
}

body {
	margin: 10%;
	text-align: left;
	color:#4A4A4A;
	font-family: calibri;
	font-size: 22px;
	line-height:40px;
	background-color:#eaeaea;

	overflow-y: scroll;
	height: 100%;	
}

.myBody {
	margin: 10%;
	color:#7D7D7D;
	font-family: calibri;
	font-size: 22px;
	line-height:40px;
	background-color:#f0f0f0;
}

.text-custom{
	text-align: justify;
	margin-top: 3%;
	margin-bottom: 50px;
	line-height: 33px;
}

.nav-idiomes {
	position: fixed;
	top:6px;
	right: 30px;
	z-index: 5;
	height: 17px;
	margin-right: 10px;
	padding: 1px;
}

.idiomes {
	height: 100%;
}

.idiomes:hover {
	height: 110%;
	border: solid 2px #01A4AB;
}

h1 {
	text-align: right;
	color: #00767A;
	font-size: 115px;
	font-family: calibri;
	margin-top: -10px; 
	margin-bottom: -30px;
	
}

h2 {
	text-align: right;
	color: #01A4AB;
	font-family: calibri;
	font-size: 70px;
}

h3 {
	font-family: calibri;
	font-size: 30px;
	letter-spacing: 3px;
	color: black;
}

.dl-link {
	color: #01A4AB;
}

.dl-link:hover {
	text-decoration: underline;
	color: #01A4AB;
}

h1.title-main-page { letter-spacing: -5px; }
h2.title-main-page { letter-spacing: 3px; word-spacing: 20px; }

h1.title-main-page-en { font-size: 70px; letter-spacing: 9px; word-spacing: 25px; }
h2.title-main-page-en { font-size: 115px; letter-spacing: -3px; }

h1.title-exp-fac { font-size: 70px; }
h2.title-exp-fac { font-size: 115px; letter-spacing: 1px; }

h1.title-exp-fac-en { letter-spacing: 7.5px; }
h2.title-exp-fac-en {  }

h1.title-gim-man-1 { font-size: 70px; letter-spacing: 9px; }
h2.title-gim-man-1 { font-size: 115px; letter-spacing: -4px; }

h1.title-gim-man-1-en { letter-spacing: 4.6px; }
h2.title-gim-man-1-en {  }

h1.title-gim-man-2 { font-size: 70px; letter-spacing: 9.5px; }
h2.title-gim-man-2 { font-size: 115px; letter-spacing: -3px; }

h1.title-gim-man-2-en { letter-spacing: 4.5px; }
h2.title-gim-man-2-en {  }

h1.title-gim-vis { font-size: 70px; }
h2.title-gim-vis { font-size: 115px; letter-spacing: 5px; }

h1.title-gim-vis-en { letter-spacing: 8.5px; }
h2.title-gim-vis-en {  }

#nav-custom {
	background-color: white;
	border-bottom:solid 5px #01A4AB;
	position: fixed;
	width: 100%;
	top: 0px;
	left: 0px;
}

.nav-main-menu {
	z-index: 1;
}

#nav-wrapper {
	width: 100%;
	margin:0px auto;
	text-align: center;
	
}

#nav-custom ul {
	list-style-type:none;
	padding:0px;
	margin:0px;
	
}

#nav-custom ul li {
	display: inline-block;
	color: #01A4AB;
}

#nav-custom ul li a:hover {
	background-color: #01A4AB;
	color: white;
}

#nav-custom ul li a {
	display:block;
	padding: 7px;
	color: #01A4AB;
	text-decoration:none;
	font-size: 20px;
	z-index: 20;
	
}

#copyright-custom {
	background-color: #f7f7f7;
	position: fixed;
	width: 100%;
	bottom: 0px;
	left: 0px;
	font-size: 15px;
	color: black;
	padding: 0px;
	margin:0px;
	
}

.credits {
	text-decoration:none; 
	color:black;
}

.credits:hover {
	text-decoration: none;
	color: #01A4AB;
}

.logoUPF{
	position: fixed;
	top:0px;
	left:0px;
	height: 55px;
	padding: 5px;
	z-index: 3;
	border: 1px solid white;
	border-bottom: 0px ;
	border-right: none;
}

.logoUPF:hover {
	border: solid 1px #01A4AB;
	height: 56px;
}

.imagen {
    position: relative;
    width: 100%;
    height: auto;
    border: 5px solid #01A4AB;
}

.imagen-short, 
.imagen-long {
    position: relative;
    max-width: 100%;
    height: auto;
    border: 5px solid #01A4AB;
}

.container-custom {
    margin-top: 80px;
    margin-left: auto;
    margin-right: auto;
    width: 500px;
}

.container-custom button:focus{
	box-shadow: 0 0 5px rgba(81, 203, 238,0.5);
}

.col-custom {
    padding: 0px;
    margin: 0px;
    margin-right: -5px;
    margin-bottom: -5px;
}

.container-rows-custom > .row > .col-md-4.col-custom > .imagen,
.container-rows-custom > .row > .col-md-3.col-custom > .imagen,
.container-rows-custom {
	border: 2.5px solid #01A4AB;
	background-color: #01A4AB;
	padding: 0.5px;
}

.container-rows-custom > .row,
.container-rows-custom > .row > .col-custom  {
	margin: 0px;
}

#next-arrow{
	color: #01A4AB;
    margin-right: -35px;
    margin-bottom: 100px;
    margin-top:20px;
}

#next-arrow-gim-man {
	color: #01A4AB;
    margin-right: -10px;
    margin-bottom: 100px;
    margin-top:20px;

}

#prev-arrow {
	color: #01A4AB;
    margin-left: -40px;
    margin-top:20px;
    margin-bottom: 100px;
}


.row-custom-gim-man, .row-custom-gim-man-P3 {
	position: relative;
	float: left;
	width: 100%;
	height: auto;
	clear: both;
}

.include-margin {
	margin-bottom: 70px;
}

.row-custom-gim-man .span4 {
	position: relative;
	float: left;
	width: 25.9%;
}

.row-custom-gim-man .span6 {
	position: relative;
	float: left;
	width: 74.1%;
}

.row-custom-gim-man-P3 .span4 {
	position: relative;
	float: left;
	width: 25.95%;
}

.row-custom-gim-man-P3 .span6 {
	position: relative;
	float: left;
	width: 74%;
}

.btn-gimvis-border-1 {
	border: none;
	border-top: 5px solid #01A4AB;
	border-left: 5px solid #01A4AB;
}

.btn-gimvis-border-2 {
	border: none;
	border-top: 5px solid #01A4AB;
	border-left: 5px solid #01A4AB;
	border-right: 5px solid #01A4AB;
}

.btn-gimvis-border-3 {
	border: none;
	border-top: 5px solid #01A4AB;
	border-left: 5px solid #01A4AB;
	border-bottom: 5px solid #01A4AB;
}

.btn-gimvis-border-4 {
	border: none;
	border: 5px solid #01A4AB;
}

.buttons-gim-vis-1 {
	position: relative;
	float: left;
	width: 33.33%;
	background-color: white;
	margin: 0px;
	padding: 30px;
	font-size: 35px;
	font-family: calibri;
	color: #01A4AB;
}

.buttons-gim-vis-1:hover, 
.buttons-gim-vis:hover {
	background-color: #01A4AB;
	color:white;
	border-color: #01A4AB;
	cursor: pointer;
}

.row-centered {
    text-align:center;
}

.intro-video {
	max-width: 700px;
	width: 100%;
	height: auto;
	margin-top: 3%;
	text-align: center;

}

.show-video-1 {
	position: absolute; 
	float: left; 
	margin-left: 4%;
    margin-bottom: 2.7%;
    width: 15.7%;
    height: 15.8%;
	border: 1px solid transparent; 
	background-color: transparent; 
	bottom: 5px; 
	left: 5px;
	z-index: 99;
	border-radius: 100%;
	cursor: default;
}

.show-video-2 {
	position: absolute; 
	float: right; 
	margin-right: 3%;
    margin-bottom: 2.7%;
    width: 15.7%;
    height: 15.8%;
	border: 1px solid transparent; 
	background-color: transparent; 
	bottom: 5px; 
	right: 5px;
	z-index: 99;
	border-radius: 100%;
	cursor: default;
}

.show-video-1:hover, 
.show-video-2:hover {
	cursor: pointer;
	background-color: rgba(0,0,0,0.3); 
}

.credits-title {
	 font-size: 45px;
}
.credits-subtitle {
	font-size: 35px;
}

.container-download {
	position: relative;
	width: 100%;
	height: auto;
	padding: 20px;
	clear: both;
}

.download-title
{
	position: relative;
	width: 100%;
	height: auto;
	clear: both;
	margin-bottom: 40px;
}

.download-title-main
{
	color: #00767A;
	font-size: 85px;
}

.download-title-sub
{
	color: #01A4AB;
	font-size: 108px;
}

.download-sub-title
{
    text-align: right;
    position: relative;
    height: 100px;
    letter-spacing: 5px;
    font-weight: 300;
}

.container-download-facial
{
	border-right: 5px solid #00767A;
}

.container-download-sub
{
	padding-left: 40px;
}

.download-main-sub-title
{
	position: relative;
    font-size: 30px;
    color: #000;
    text-align: center;
    padding: 10px;
    margin-bottom: 20px;
}

.color-blau-fosc
{
	color: #00767A;
}

.color-blau-clar
{
	color: #01A4AB;
}

.download-sub-label-title
{
	position: relative;
	width: 100%;
	height: 100%;
}

/* ######################## */

@media (max-width: 1060px) {
  .container-title {
	  position: relative;
	  float: left;
	  width: 100%;
	  min-height: 40px;
	  height: auto;
	  margin-top: 40px;
  }
}

@media (max-width: 1000px) {

	body {
		padding: 40px !important;
	}

  .main-menu-list { display: none; }
  .btn-main-menu-toggle { display: inline; }
  .logoUPF { position: absolute; }
  #nav-custom ul { 
  	position: relative; 
  	float: left; 
  	width: 100%; 
  	margin-top: 54px;
  	clear: both;
  }
  #nav-custom ul li { 
  	position: relative; 
  	float: left; 
  	width: 100%; 
  	text-align: center;
  }

  .nav-idiomes {
	    position: absolute;
	    left: 0px;
	    top: 0px;
	    right: 0px;
	    margin: auto;
	    z-index: 5;
	    height: 17px;
	    width: 68px;
	}
	.container-custom {
		width: auto;
	}

	.row-custom {
		width: auto;
	}

	.logoUPF{
		height: 50px;
		z-index: 3;
		border: none;
		padding-top: 8px;
	}

	.logoUPF:hover {
		border: solid 1px #01A4AB;
		height: 52px;
	}

	h1 { font-size: 70px; }
	h2 { font-size: 50px; }

	h1.title-main-page { letter-spacing: 0px; }
	h2.title-main-page { word-spacing: 4px; letter-spacing: 1px; }

	h1.title-main-page-en { font-size: 50px; letter-spacing: 5px; word-spacing: 2px; }
	h2.title-main-page-en { font-size: 70px; letter-spacing: 0px; }

	h1.title-exp-fac { font-size: 50px; letter-spacing: -1px; }
	h2.title-exp-fac { font-size: 70px; letter-spacing: 3.8px; }

	h1.title-exp-fac-en { letter-spacing: 6.5px; }
	h2.title-exp-fac-en { letter-spacing: -2px }

	h1.title-gim-man-1 { font-size: 50px; letter-spacing: 0.8px; }
	h2.title-gim-man-1 { font-size: 70px; }

	h1.title-gim-man-1-en { letter-spacing: 8.3px; }
	h2.title-gim-man-1-en { letter-spacing: -0.5px; }

	h1.title-gim-man-2 { font-size: 50px; letter-spacing: 1.5px; }
	h2.title-gim-man-2 { font-size: 70px; }

	h1.title-gim-man-2-en { letter-spacing: 7.5px; }
	h2.title-gim-man-2-en { letter-spacing: -1px; }

	h1.title-gim-vis { font-size: 50px; letter-spacing: -2px; }
	h2.title-gim-vis { font-size: 70px; }

	h1.title-gim-vis-en {  }
	h2.title-gim-vis-en { letter-spacing: -1.5px; }
}

@media (max-width: 687px) {
	.button-custom	{
		width: 260px;
		letter-spacing: 2px;
	}
	h1 { font-size: 40px; margin-top: 60px; }
	h2 { font-size: 30px; }

	h1.title-main-page { letter-spacing: 1.5px; }
	h2.title-main-page {  }

	h1.title-main-page-en { font-size: 30px; letter-spacing: 2px; }
	h2.title-main-page-en { font-size: 40px; }

	h1.title-exp-fac { font-size: 30px; letter-spacing: 0px; }
	h2.title-exp-fac { font-size: 40px; letter-spacing: 4px; }

	h1.title-exp-fac-en { letter-spacing: 8.5px; }
	h2.title-exp-fac-en { letter-spacing: 1px; }

	h1.title-gim-man-1 { font-size: 30px; letter-spacing: 2.9px; }
	h2.title-gim-man-1 { font-size: 40px; letter-spacing: 1.5px }

	h1.title-gim-man-1-en { letter-spacing: 5.4px; }
	h2.title-gim-man-1-en {  }

	h1.title-gim-man-2 { font-size: 30px; }
	h2.title-gim-man-2 { font-size: 40px; letter-spacing: -0.3px; }

	h1.title-gim-man-2-en { letter-spacing: 6.5px; }
	h2.title-gim-man-2-en { letter-spacing: 0px; }

	h1.title-gim-vis { font-size: 30px; letter-spacing: 0px; }
	h2.title-gim-vis { font-size: 40px; letter-spacing: 6px; }

	h1.title-gim-vis-en { letter-spacing: 7px; }
	h2.title-gim-vis-en { letter-spacing: 0px; }

	body {
		margin: 0%;
		margin-top: 8%;
	}

	.text-custom {
		font-size: 18px;
		line-height: 20px;
	}
	#copyright-custom {
		font-size: 10px;
	}
}

@media (max-width: 434px){

	h1 { font-size: 30px; }
	h2 { font-size: 25px; }

	h1.title-main-page {  }
	h2.title-main-page { word-spacing: 1px; letter-spacing: 0px; }

	h1.title-main-page-en { font-size: 25px; letter-spacing: 0.4px; }
	h2.title-main-page-en { font-size: 30px; }
	
	h1.title-exp-fac { font-size: 25px; letter-spacing: -0.3px; }
	h2.title-exp-fac { font-size: 30px; }
	
	h1.title-exp-fac-en { letter-spacing: 6.7px; }
	h2.title-exp-fac-en { letter-spacing: 0px; }

	h1.title-gim-man-1 { font-size: 25px; letter-spacing: 0.8px; }
	h2.title-gim-man-1 { font-size: 30px; letter-spacing: 0.8px; }

	h1.title-gim-man-1-en { letter-spacing: 6px; }
	h2.title-gim-man-1-en {  }

	h1.title-gim-man-2 { font-size: 25px; letter-spacing: 0.2px; }
	h2.title-gim-man-2 { font-size: 30px; letter-spacing: 0.1px; }

	h1.title-gim-man-2-en { letter-spacing: 7px; }
	h2.title-gim-man-2-en {  }

	h1.title-gim-vis { font-size: 25px; }
	h2.title-gim-vis { font-size: 30px; letter-spacing: 6.5px; }

	h1.title-gim-vis-en { letter-spacing: 7.2px; }
	h2.title-gim-vis-en {  }

	.text-custom {
		font-size: 14px;
	}
	.button-custom {
		width: 170px;
		letter-spacing: 0px;
		font-size: 14px;
	}
	.credits-title {
		font-size: 35px;
	}
	.credits-subtitle {
		font-size: 22px;
	}
}