*{
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
@font-face {
        font-family: "OpenSans";
        src: url("media/OpenSans.ttf");
}
body{
	margin: 0;
	font: 1rem 'OpenSans', sans-serif;
}

a:link {
    color: #000;
    text-decoration: none;
}
a:visited {
    color: #222;
}
a:active {
    color: #111;
}
a::-moz-focus-inner, input[type="submit"]::-moz-focus-inner {
     border: 0 !important;
}
a:active, a:focus {
     outline: none;
}
p {
  text-align: justify;
}
#em {
	width:1em;
}
footer {
  position: sticky;
  top: 100vh;
	text-align: left;
	padding: 2em;
}
footer span {
	color: #555;
	padding: 0 .5em;
}

code {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.progress-bar {
  top: 0;
	z-index: 1000;
	position: fixed;
	width: 100%;
	overflow: hidden;
	height: 0;
	transition: .125s ease height;
}
.progress-bar#loading {
	height: .125em;
}
.progress-bar div {
	content: '';
	position: absolute;
	height: 100%;
	background: #00e;
}
.progress-bar div{
	width: 0%;
	transition: .125s linear width;
}
@-webkit-keyframes progress {
	0% {
		left: 100%;
		transform: translateX(0);
	}
	100% {
		left: 0;
		transform: translateX(-100%);
	}
}
.notify {
	text-align: center;
	bottom: -7em;
	right: 2.5em;
	padding: 1em;
	position: fixed;
	max-width: 20em;
  border: 1px solid #3a386a;
	border-radius: 2em;
	box-shadow: 0 1px 4px 1px rgba(0,0,0,.2);
	opacity: 0;
	transition: bottom ease .5s, opacity ease .5s;
  user-select: none;
  color: #3a386a;
}
.notify#ativo {
  background: rgba(255, 255, 255, .9);
}
.notify#link {
  background: rgba(190, 16, 0, .8);
}
.notify#ativo, .notify#link {
	opacity: 1;
	bottom: 2.5em;
}
.notify a {
  color: #fff !important;
}

.all, .content, footer{
	margin:0 auto;
	max-width: 70rem;
}
.all {
  transition: ease opacity  .125s;
	z-index: 2;
	max-height: 100%;
  min-height: calc(100vh - 21rem);
}

a:link {
  color: #3a386a;
}
a:visited {
  color: #3a386a;
}
a:active {
  color: #3a386a;
}
.pill a:link{
  display: inline-block;
  margin: .5em 0;
  padding: .5em .75em;
  border: solid 1px #3a386a;
  border-radius: 1.5em;

  transition: background-color ease .125s;
}
.pill a:visited {
  border-color: #3a386a;
}
.pill a:active {
  border-color: #3a386a;
}
.material {
	display: none;
	flex-flow: row wrap;
	justify-content: center;
	align-items: stretch;
	align-content: flex-start;
}
.material#ativo {
	display: block !important;
}
.material article {
	overflow: visible;
	flex-grow: 1;
	flex-shrink: 0;
	max-width:100%;
	margin:.5rem;
}
.material article > img {
	border-radius: .125rem;
	box-shadow: 0 0 2px 1px rgba(0,0,0,.2);
}
.material div {
	line-height: 1.5rem;
}
.material > div {
  	padding: 0 .5em;
}
.material p {
  line-height: 1.5rem;
}

hr {
  opacity: 0;
}

h1, h2, h3, h4 {
	padding:0;
	font-weight: lighter;
}
h1 {
	font-size: 1.5em;
}
h2 {
  text-align: center;
	font-size: 1.25em;
}
h3 {
	font-size:1.125em;
}

@supports ((backdrop-filter: blur(10px))) or (-webkit-backdrop-filter: blur(10px)) {
  #wrapNav {
      border-bottom: 1px solid rgba(255,255,255,.5);
      box-shadow: none !important;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      background-color: rgba(255,255,255,.75) !important;
  }
}
nav {
	display: flex;
	flex-basis: 3.5em;
	overflow: hidden;
	width: 100%;

  margin:0 auto;
  max-width:30em;
}



nav > a {
	z-index: 7;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	cursor:pointer;
	opacity: .6;
}
nav > a:hover {
	opacity: .75;
}
nav > a:before{
	content:'';
	width:1.5rem;
	height:1.5rem;
}
nav > a:link, nav > a:visited  {
  color: #000;
}

#squareFX {
	position: fixed;
	display: none;
	z-index: 11;
	background: #fff;
	top: 0;
	right: 0;
}
#ativo{
	opacity: 1;
}
#ativo:hover{
	opacity: 1;
}
header {
  height: 10em;
  width: 100%;
	z-index: 9;
}
#header-logo {
  display: block;
  background: url(media/logo-inline.svg) center no-repeat;
	background-size: auto 8em;
	width: 8em;
  height: 100%;
  margin: 0 auto;
}
#header-logo, #alt-header {
  cursor: pointer;
}
#wrapNav {
  z-index: 999;
	overflow: hidden;

  box-sizing: border-box;
  width: 100%;
  height: 3.5em;

  position: sticky;
  top: 0;
  bottom: auto;
  transition: .125s box-shadow ease-out, .125s background-position ease;

  background: rgba(255, 255, 255, .98) url(media/logo-inline.svg) calc(50% - 29.5em) 3.5em no-repeat;
  background-size: 0em;
}
.shadow {
  box-shadow:0 1px 4px rgba(0,0,0,.125), 0 1px 1px rgba(0,0,0,.125);
}

/*content types */
.cover img {
  width: 100%;
  border-radius: .125rem;
	box-shadow: 0 0 2px 1px rgba(0,0,0,.2);
}
.home #cover > div {
  display: block;
  background-color: #eee;
  background-size: cover;
  background-position: 50% 50%;
  width: 70rem;
  height: 39.375rem;

  border-radius: .125rem;
	box-shadow: 0 0 2px 1px rgba(0,0,0,.2);
  margin-left: -.5em;
}
.has-video {
  cursor: pointer;
  width: 70rem;
  height: 39.375rem;
}
.has-video iframe {
  box-shadow: rgba(0, 0, 0, 0.26) 0px 2px 5px;
  box-sizing: border-box;
  background: rgb(238, 238, 238) url("/core/media/truchet.svg") repeat scroll center center;
  width: 70rem;
  height: 39.375rem;
  margin: 0 0 0 -.5rem;
}
.has-video span {
  position: relative;
  display: block;
  height: 0;
  overflow: visible;
  top: calc(19.687rem - 2.25rem);
}
.has-video:hover span::before {
  filter: none;
  opacity: 1;
}
.has-video span::before {
    content: "";
    margin: 0px auto 0.125em;
    height: 4.5rem;
    width: 4.5rem;
    display: block;
    background: rgba(0, 0, 0, 0) url("/core/media/icons-48.svg") repeat scroll 0% 0%;
    background-size: 100%;
    background-position: left -216px;
    filter:  grayscale(100%) brightness(100%) contrast(100%);
    opacity: .9;
    transition: filter ease .125s, opacity ease .125s;
}

.tripod {
  width: 100%;
  padding: 0 !important;
}
.tripod div {
  padding: 0 .5em;
  box-sizing: border-box;
  width: 100%;
}
.tripod > div::before {
    content: "";
    margin: 0px auto 0.125em;
    height: 3rem;
    width: 3rem;
    display: block;
    background: rgba(0, 0, 0, 0) url("/core/media/icons-48.svg") repeat scroll 0% 0%;
}
.tripod h2 {
  text-align: center;
  padding: 0px;
  margin: 0px;
}

.tripod #mission::before {
  background-position: left -0px;
}
.tripod #vision::before {
  background-position: left -48px;
}
.tripod #values::before {
  background-position: left -96px;
}

.digest {
  text-align: center;
}
.digest img {
  max-width: 100%;
  max-height: 7em;
  margin: 0 auto;
}
.digest h2 {
  display: inline-block;
  margin-right: .5em;
}


#tiles {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

#tiles a {
  border: none !important;
  color: #000;

  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

#tiles img {
    display: block;
    padding: 0.5em 0px;
    margin-top: -1em;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 10rem;
}

#sponsor {
  text-align: center;
}

#sponsor .large a {
  max-height: 15rem;
}

#sponsor .medium a {
  max-height: 10rem;
}

#sponsor .small a {
  max-width: 9em;
}
#products-few {
  align-items: top;
  flex-wrap: wrap;
}
#sponsors-few {
  align-items: center;
}
#sponsors-few, #products-few {
  display: flex;
  justify-content: space-around;
}
#sponsors-few a, #products-few a {
  border: none !important;

  width: 18%;
}
#sponsors-few a, #products-few #rate1 {
  opacity: .8;
  transition: opacity ease .125s;
}
#sponsors-few a, #products-few #rate1 {
  filter:  grayscale(100%) brightness(100%) contrast(100%);
}
#products-few a {
  transition: opacity ease .125s;
}
#products-few #rate1:hover {
  opacity: 1;
}

#products-few img {
  display: block;
  border-radius: 1em;
}

#sponsors-few a:hover,  #products-few a:hover {
  filter: none;
  opacity: 1;
}
.card {
  overscroll-behavior: contain;
  overflow: hidden;

  display: none;
  z-index: 100;

  left: 0px;
  right: 0px;
  transition: background-color .25s ease;
  background-color: rgba(0, 0, 0, 0);
  justify-content: center;
}
.card#ativo {
  background-color: rgba(0, 0, 0, .125);
}
.card#ativo article {
  margin-bottom: 0;
  top: 10rem;
  opacity: 1;
}
.card article {
  transition: margin-bottom .25s ease-out, top .25s ease-out, opacity .25s ease-in;
  box-sizing: border-box;
  background: #fff;

  opacity: 0;
}
.sponsor-card h2 {
  text-align: left;
}
.product-card {
  text-align: center;
}
.product-card img {
  border-radius: 1.5em;
}
.product-card p {
  text-align: center;
}
.product-card h3 {
  font-size: 1.25em;

  position: relative;
  background: #fff;

  width: 6rem;
  margin: 0;
  margin-bottom: -2.5rem;
  line-height: 1rem;
  color: #3a386a;
}


.product-card #url {
  border-radius: 2em;
  border: 1px solid #3a386a !important;
  padding: .5em 1em;
  display: inline-block;
}

#member {
  text-align: center;
}
#member #tiles {
  display: flex;
}
#member #tiles div {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  min-width: 15em;
  margin-bottom: 1em;
}
#member > div {
  display: inline-block;
}
#member img {
  border-radius: 100%;
  padding: 0;
  margin: 0 0 .5em 0;
  max-width: 8em;

  box-shadow: rgba(0, 0, 0, 0.5) 0px 1px 3px 0px;
}
#member h3 {
  font-size: 1em;
  margin: 0
}
#member h4 {
  font-size: .9em;
  margin: 0
}
#member #linkedin, #member #facebook {
  border-radius: 1.5rem;
  border: 0.1em solid rgb(58, 56, 106) !important;
  position: absolute;
  background-color: rgba(255, 255, 255, .8) !important;
  margin-top: 5.5em;
  margin-left: 1em;

  box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 3px 0px;
}
#member #linkedin:before {
  content:'';
  width: 1.5rem;
  height: 1.5rem;
  padding: .5rem;
  background: url(/core/media/icons.svg) right -6rem no-repeat content-box;
}
#member span a:nth-child(odd) {
  z-index: 2;
}
#member span a:nth-child(even) {
  margin-left: 2.25em !important;
  transition: .125s ease margin-left;
}
#member span:hover a:nth-child(even) {
  margin-left: 3em !important;
}

#member #facebook:before {
  content:'';
  width:1.5rem;
  height:1.5rem;
  padding: .5rem;
  background: url(/core/media/icons.svg) right -10.5rem no-repeat content-box;
}
#member .dmb, #member .dir {
  display: block;
}

.promote {
  display: flex;

  background-size: contain;
  background-repeat: no-repeat;
}




.info div > a:before, .card span > a:before, .login:before {
  overflow: hidden;
  content: '';
  display: inline-block;
  height: 1.5rem;
  width: 1.5rem;
  margin-right: .5em;
  margin-bottom: -.375rem;
}
.contact a, .card a {
  text-align: left;
  word-wrap: break-word;
  padding: .25em 0;
  border: none !important;
}
.contact a:link, .card a:link{
    display: flex;
}

.contact h1 {
  color: rgb(58, 56, 106);
  margin: 0;
  font-size: 1.25em;
  text-align: center;
}
.contact #address:before {
  background: url(/core/media/icons.svg) right -13.5rem no-repeat content-box;
}
.contact #phone:before, .card #phone:before{
  background: url(/core/media/icons.svg) right -12rem no-repeat content-box;
}
.contact #email:before {
  background: url(/core/media/icons.svg) right -9rem no-repeat content-box;
}
.contact #facebook:before {
  background: url(/core/media/icons.svg) right -10.5rem no-repeat content-box;
}
.contact #instagram:before {
  background: url(/core/media/icons.svg) right -15rem no-repeat content-box;
}
.contact #linkedin:before {
  background: url(/core/media/icons.svg) right -6rem no-repeat content-box;
}
.card #url:before{
  background: url(/core/media/icons.svg) right -7.5rem no-repeat content-box;
}

.login:before{
  background: url(/core/media/icons.svg) right -16.5rem no-repeat content-box;
}


@media only screen and (min-width:74em) {
  #map {
    border-radius: .125rem;
  }
}
@media only screen and (min-width:45em){
	.all{
		margin: 0 auto;
		margin-top: 2em;
	}
	.shadow {
		background: rgba(255, 255, 255, .98) url(media/logo-inline.svg) calc(50% - 29.5em) no-repeat !important;
		background-size: auto 3.5em !important;
	}
  #hamburguer, #ham-close {
    display: none;
  }
  nav {
  	height: 100%;
    flex-flow: row nowrap;
    align-items: flex-start;
    justify-content: space-around;
  }
	nav > a {
    width: 7rem;
		transition: border .1s, opacity .1s;
		line-height: 1rem;
		font-size: .9em;
		padding: 1.4em 0 1.275em 0;
		border-bottom: .125em solid rgba(58, 56, 106, 0);
  	text-align: center;
	}
	nav > a:before{
		display: none;
	}
	nav #ativo {
		border-bottom: .125em solid rgba(58, 56, 106, 1);
	}
  #alt-header {
    display: none;
    left: calc(50% - 34.5rem);
    width: 10em;
    height: 3.5em;
    position: absolute;
  }
  .shadow #alt-header {
    display: block;
  }

  #products-few a {
    max-width: 14%;
  }

  /*contents*/
  a.home {
    display: none;
  }
  .tripod {
    display: flex !important;
    justify-content: space-between;
  }

  .card article {
    padding: 0 2% !important;
    box-sizing: border-box;
    display: flex;
    align-items: stretch;
    width: 100%;
  }
  .product-card article{
    flex-direction: column;
  }
  .sponsor-card article > span {
    display: flex;
    align-items: center;
  }
  .sponsor-card article div {
    padding: 0 0 0 5%;
    width: 75%;

    display: flex;
    flex-flow: column;
    justify-content: space-around;

  }
  .promote {
    height: calc(20vw + 10vh);
    flex-direction: row-reverse;
    align-items: center;

    background-position: 40% center;
  }
  .card#ativo, .card#switching {
    display: flex !important;
  }
  .card {
    position: sticky;
    top: 3.5em;
    align-items: center;
    height: calc(-3.5rem + 100vh);
    margin-bottom: calc(3.5rem - 100vh);
  }
  .card article {
    max-width: 50em;
    width: 100vw !important;
    margin: 0 1em;
    padding: 2.5em !important;
    border-radius: .25em;

    margin-bottom: -150vh;

    box-shadow: rgba(0, 0, 0, 0.25) 0px 0.25em 2em;
  }
  .sponsor-card img {
    max-width: 20em;
    max-height: 10em;
  }
  .contact {
    z-index: 99;
    position: fixed;
    height: 20rem;
    right: 1%;
    top: calc(50vh - 8rem);
    transition: .125s ease top;
  }
  .info {
    padding: 1em;
    background: #fff;
    border: 1px solid rgba(58, 56, 106, .2);
    border-radius: 2em;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px 0px;
  }

}

@media only screen and (min-width:45em)  and (max-width:99.99em) {
  .contact {
    top: calc(100vh - 3rem);
  }
  .info {
    border-color: rgba(58, 56, 106, .5) !important;
    border-radius: 1.5em 1.5em 0 0;
  }
  .contact:hover{
    top: calc(100vh - 17.5rem);
  }

  nav {
    transition: ease margin-right .25s;
    margin-right: calc(50% - 15em);
    width: 30em;
  }
  .shadow nav {
    margin-right: 0;
  }
  #wrapNav{
		background-position: calc(.5rem + 5%) 3.5em;
	}
	.shadow {
		background-position: calc(.5rem + 5%) 0 !important;
	}
  #alt-header {
    left: calc(.5rem + 5%);
  }
}



@media only screen and (max-width:75.99em) {
  .has-video iframe {
    width: calc(1em + 100%) !important;
    height: calc(-.5em + 56.25vw) !important;
  }
  .has-video span {
    top: calc(-.25em + 28.625vw - 2.25rem);
  }
  .home #cover > div {
    border-radius: 0;
    width: calc(1em + 100%) !important;
    height: calc(-.5em + 56.25vw) !important;
  }
}

@media only screen and (max-width:44.99em) {
  @supports ((backdrop-filter: blur(10px))) or (-webkit-backdrop-filter: blur(10px)) {
    header {
        border-bottom: 1px solid rgba(255,255,255,.5);
        box-shadow: none !important;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        background-color: rgba(255,255,255,.75) !important;
    }
  }
	header {
    display: flex;
    background-color: white;
    top: 0;
    position: fixed;
    transition: .125s box-shadow ease, .125s height ease;
	}
  header span {
    min-width: 3.5rem;
    display: block;
  }
  #header-logo {
      background-size: 8em;
      transition: .125s background-size ease;
  }
  .all {
    margin-top: 10.5em;
  }
  .shadow {
    height: 3.5em;
  }
  .shadow #header-logo {
    background-size: 3.5em;
  }
  #wrapNav {
    position: fixed;
    top: 0px;
    bottom: 0px;
    height: 100vh;
    left: -45em;
    transition: left 0.25s ease-out 0s;
  }
  #wrapNav.show-ham {
    left: 0;
  }
  #hamburguer, #ham-close {
    display: block;
    cursor: pointer;
    padding: 1rem;
    min-width: 1.5rem;
    width: 1.5rem;
    height: 1.5rem;
    text-align: center;
    font-size: 1.5em;
    line-height: 1.5rem;
    top: 0;
    left: calc(50% - 28.5rem);


  }
  #hamburguer {
    transition: .125s margin-top ease;
    margin-top: 2em;
  }
  .shadow #hamburguer {
    margin-top: 0;
  }
  #hamburguer:before {
    content: '≡';
  }
  #ham-close:before {
    content: '×';
  }
  nav {
    max-width: 30em;
    flex-flow: column nowrap;
    margin-top: -3.5em;
    max-height: calc(100vh - 1em);
    padding-top: calc(-9.5em + 50vh);
  }
	nav > a {
    filter:grayscale(100%);
		transition: opacity .1s, font-size .1s linear;
		line-height: 1.125rem;
		height: 3.5rem;
    color: rgb(58, 56, 106);
  }
  nav > a:visited {
    color: rgb(58, 56, 106);
  }
	nav > a:before {
		display:inline-block;
		margin:0 auto;
		padding: .5rem .5em .5em 1em;
    margin-bottom: -.75em !important;
    background-position: left;
	}
  nav > a#ativo:before {
    background-position-x: right;
  }
  nav > a#ativo {
    filter:none;
  }
	#squareFX {
		left: 0;
		bottom: 3.5em;
	}
  .all {
    min-height: calc(100vh - 19rem) !important;
  }
	.material {
		background: #fff;
	}
	.material article {
		margin: .25em .5em;
	}

  .notify {
    left: 10%;
    right: 10%;
    max-width: none;
  }
  .notify#ativo {
    bottom: 2em;
  }

  /*contents*/
  .tripod > div::before {
    margin-left: 0px;
    margin-bottom: -2.25rem;
  }
  .tripod h2 {
    text-align: left;
    margin: 0 0 0 3.5rem;
  }
  #sponsors-few, #products-few {
    flex-wrap: wrap;
  }
  #sponsors-few a, #products-few a {
    width: 40%;
  }
  .more {
    position: absolute;
    right: calc(15% - 2em);
    margin-top: -2.75em !important;
  }

  .promote {
    height: calc(100vh - 10rem);
    justify-content: center;
    align-items: flex-end;
    text-align: center;

    background-position: center 25%;
  }

  .promote span {
    position: absolute;
    bottom: .5em;
    margin-bottom: 0vh;
  }

  .card {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    position: fixed;
    overflow: auto;
    top: 0;
    bottom: -10em;
  }
  .card#ativo, .card#switching {
    display: block !important;
  }
  .card article {
    position: absolute;
    top: 100vh;
    width: 100%;
    padding: 5% 5%;
    padding-bottom: calc(10em + 5%);
    min-height: calc(100vh - 10em);

    box-shadow: rgba(0, 0, 0, 0.25) 0px -0.25em 2em;
  }
  .card span {
    display: block;
    text-align: center;
  }
  .product-card img {
    width: 100%;
  }
  .sponsor-card img {
    max-width: 20em;
    width: 75%;
  }
  .info {
    text-align: center;
    margin: 1em 1em 0 1em;
    padding: .5em 0;
    border-top: 1px solid rgb(58, 56, 106);
    border-bottom: 1px solid rgb(58, 56, 106);
  }
  .info > div {
    display: inline-block;
  }
}