/* MODAL:FICHAS*/
.modal {
  will-change: visibility, opacity;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 1000;
  visibility: hidden;
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  transition-delay: $modal-delay;
}
.modal--active {
  visibility: visible;
  opacity: 1;
}
.modal--align-top {
  align-items: flex-start;
}
.modal__bg {
  background: transparent;
}
.modal__dialog {
  max-width: 600px;
  padding: 1.2rem;
}
.modal__content {
  will-change: transform, opacity;
  position: relative;
  float:left;
  padding: 1.4rem;
  background: #035473;
  border:#ffffff solid 5px;
  font-family: 'Yanone Kaffeesatz', sans-serif;
  opacity: 0;
  height:auto;
}
.modal__content--active {
  opacity: 1;
  background-color:#035473 !important;
}
.modal__close {
  z-index: 1100;
  cursor: pointer;
}
.modal__trigger {
  position: relative;
  display: inline-block;
  clear:left;
  float:left;
  text-align:center;
  padding: 7px;
  width:85px;
  margin: 10px 0px;
  font-family: 'Yanone Kaffeesatz', sans-serif;
  font-weight: 700;
  font-size:16px;
  line-height: 1;
  cursor: pointer;
  background-color: #fff;
  color:#005661;
  border-radius:15px;
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.26);
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

@media (max-width: 640px) {
.modal__trigger {
	visibility:hidden;
}
}
.modal__trigger--active {
  z-index: 10;
}
.modal__trigger:hover {
  background: #ffffff;
  color: #6499a8;
}
#modal__temp {
  will-change: transform, opacity;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  -webkit-transform: none;
          transform: none;
  opacity: 1;
  transition: opacity 0.1s ease-out, -webkit-transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  transition: opacity 0.1s ease-out, transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  transition: opacity 0.1s ease-out, transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
/* DEMO:Specific CSS*/
h1{
    font-family: 'Yanone Kaffeesatz', sans-serif;
	font-weight:700;
	font-size: 24px;
	color: #458299;
    text-transform: uppercase
}
img {
  max-width: 100%;
}
.demo-btns header {
  padding: 7vh 10vw;
  background: #fff;
  display: flex;
  align-items: center;
}
.demo-btns header h1 {
  margin: 0;
  color:#e23912;
  font-weight: 300;
}
.demo-btns .info {
  background: #f44336;
  padding: 3vh 10vw;
  height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: column wrap;
}
.demo-btns p {
  text-align: center;
  color: #fff; !important
}
.demo-btns .link {
  font-size: 20px;
}
.demo-btns .modal__trigger {
  margin-right: 3px;
}
@media (max-width: 640px) {
  .demo-btns .modal__trigger {
    margin-bottom: 0.8rem;
  }
}
.demo-close {
  position: absolute;
  top: 0;
  right: 0;
  margin: 1.2rem;
  padding: 0.6rem;
  background: rgba(0,0,0,0.3);
  border-radius: 50%;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.demo-close svg {
  width: 24px;
  fill: #fff;
  pointer-events: none;
  vertical-align: top;
}
.demo-close:hover {
  background: rgba(0,0,0,0.6);
}
/*INTRO:MAINBANNER*/
	#introBasic {
		height: 60vh;
		position: relative;
		text-align: center;
		overflow: hidden;
		background-image: url(../img/content/_cover.jpg);
		background-size: cover;
		background-position: center;
		padding-top:100px;
        -webkit-clip-path: polygon(0% 0%, 100% 0, 100% 85%, 50% 100%, 0 85%);
        clip-path: polygon(0% 0%, 100% 0, 100% 85%, 50% 100%, 0 85%);
	}
	#introBasic .content {
		max-width: 100%;
		padding: 6%;
		margin: auto;
		text-align:center;

	}	
	#introBasic h2 {
		margin-bottom: 10px;
		font-size: 18px;
		font-weight: 200;
		color: #fff;
	}	
	#introBasic h1 {
		font-size: 60px;
		font-weight: 600;
		letter-spacing: -1px;
		color: #003E6B;
		margin-bottom: 20px;
        line-height: 55px;
		font-family: var(--especialFont);
        text-align: left;
	}	
	#introBasic p {
		color: #003E6B;
		line-height: 28px;
        max-width: 450px;
		font-weight: 400;
        text-align: left;
	}	
	#introBasic .arrow {
		width: 50px;
		height: 50px;
		display: inline-block;
		margin-left:50%;
		left:-25px;
		border-radius: 50%;
		border: 2px solid #000;
		background-size: 20px;
		background-repeat: no-repeat;
		background-position: center center;
		background-image: url(img/ui/arrow_down.svg);		
	}	
@media (max-width:501px) {
	#introBasic h1 {
		font-size: 36px;
        line-height: 38px;
	}