body {
  font-family: freight-display-pro, serif;
  font-weight: 400;
  color: #0C0E19;
  font-size:24px;
  line-height: 1.4em;
  

  /*background : -moz-radial-gradient(49.6% 38.49%, ellipse farthest-corner, rgba(255, 123, 172, 0.1) 0%, rgba(235, 191, 255, 0) 46.65%, rgba(255, 255, 255, 1) 100%);
  background : -webkit-radial-gradient(49.6% 38.49%, ellipse farthest-corner, rgba(255, 123, 172, 0.1) 0%, rgba(235, 191, 255, 0) 46.65%, rgba(255, 255, 255, 1) 100%);
  background : -webkit-gradient(radial,49.6% 38.49% ,0 , 49.6% 38.49%, 560.06 ,color-stop(0,rgba(255, 123, 172, 0.1) ),color-stop(0.4665,rgba(235, 191, 255, 0) ),color-stop(1,rgba(255, 255, 255, 1) ));
  background : -o-radial-gradient(49.6% 38.49%, ellipse farthest-corner, rgba(255, 123, 172, 0.1) 0%, rgba(235, 191, 255, 0) 46.65%, rgba(255, 255, 255, 1) 100%);
  background : -ms-radial-gradient(49.6% 38.49%, ellipse farthest-corner, rgba(255, 123, 172, 0.1) 0%, rgba(235, 191, 255, 0) 46.65%, rgba(255, 255, 255, 1) 100%);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Stlye=2);"
  background : radial-gradient(49.6% 38.49%, ellipse farthest-corner, rgba(255, 123, 172, 0.1) 0%, rgba(235, 191, 255, 0) 46.65%, rgba(255, 255, 255, 1) 100%);
  */
 

}

.hero-video {
  height: calc(100vh - 350px);
  min-height: 400px;
  max-width: 100%;
}

h1{
  font-size:44px;
  font-weight: 400;
  display: block;
  text-indent: -9999em;
  overflow: hidden;
  height:100px ;
  margin:24px auto;
  background-image: url(img/memory.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  max-width: 90%
}

h2{
  font-size:44px;
  margin:0 0 24px 0;
  font-weight: 400;

}

p{
margin:0 0 0 0;
font-size:24px;
max-width: 95%
}

#top p{
  margin:auto;
}

#logo {
  height:84px;
  width:140px;
  display: block;
  margin:0 auto 40px auto;
  background-image:url(img/pairpoint.svg);
  background-size: contain;
}

#samples{
  position: absolute;
  top:50vh;
  left:50vw;
  width:2500px;
  overflow: hidden;
  transform: translate(-50%,-50%);
  text-align: center;
  z-index: 1;
}

#samples img {
  text-align: center;
  display: inline-block;
  height: 100px;
  width:100px;
  margin:0 2vw;
}
#sample-spacer{
  width:250px;
  display: inline-block;
  margin:0 2vw;
}



#connected.panel {
  height:auto;
  //min-height: 100vh;
  //background-color:#0C0E19;
  color:#fff;
  padding: 48px 0px
}

#connected.panel .illus {
  width:36%;
}

#connected.panel .f-space {
  width:32%;
}

#connected.panel .info {
  width:32%;
  padding-top:30vh;
  //padding-bottom:10vh;
  align-self: flex-end;
  text-shadow: 10px 10px 36px #0C0E19;
  background:radial-gradient(circle, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 70%);
}


#mobile img{
  width:100%;
  max-width: 500px;
}

 #memories{
  height:100%;
  width: 100%;
  position: absolute;
  top:0vh;
  left:50vw;
  width:2500px;
  
  transform: translateX(-50%);
  text-align: center;
  z-index: -1;
  background-color:#0C0E19;
}

#memories img {
  text-align: center;
  display: inline-block;
  width:200px;
  height: auto;
  margin:0vh 3vw;
  transform:translateY(50%);
}

#memory-c {
  display: inline-block;
}
#memory-c img {
  width:350px;
  height: auto;
}

.panel{
  width: 100%;
  position: relative;
  min-height: 400px;
  margin-bottom: 48px;
  //padding: 48px calc(50vw - 625px);
  box-sizing: border-box;
}

#top.panel{
  min-height: 100vh;
  text-align: center;
}

.feature{
  max-width: 95%;
}

.feature{
  width:100%;
  display:flex;
  flex-direction: row;
  margin:auto;
}

.info {
  width:40%;
  min-width:420px;
  padding: 0 30px;
  box-sizing: border-box;
}

.feature.r {
 
  flex-direction: row-reverse;
}

.f-space {
  width:30%;
  min-width:420px;
}

.illus {
  width: 20%;
  text-align: center;
  transition: all 1s ;
}

.view{
  padding-top:0;
}

button {
  display: block;
  margin:24px 0;
  font-family: proxima-nova, sans-serif;
  font-weight: 400;
  font-size:14px;
  letter-spacing: .2em;
  font-style: normal;
  text-transform: uppercase;
  border:1px solid #0C0E19;
  padding:20px 80px 20px 80px ;
  cursor: pointer;
  transition: all .5s;
}

button:hover {
  background-color:#0C0E19;
  color:#fff;
  //border:1px solid #fff;
}

#top.panel button {
  margin:24px auto;
}

#connected.panel button,.footer button{
  background-color:#0C0E19;
  color:#fff;
  border:1px solid #fff;
}

#connected.panel button:hover, .footer button:hover{
  color:#0C0E19;
  background-color:#fff;
  border:1px solid #0C0E19;
}
#pets.panel {
  padding:40px 0 40px 0;
}

.label {
  font-family: proxima-nova, sans-serif;
  font-weight: 700;
  font-size:12px;
  font-style: normal;
  text-transform: uppercase;
}

.small {
  font-family: freight-macro-pro, serif;
  font-weight: 400;
}

.footer{
  display: flex;
  height:auto;
  min-height: 100vh;
  width: 100vw;
  //text-align: center;
  background-color:#0C0E19;
  color:#fff;
  position: relative;
  flex-direction: column;
  justify-content: center;
  align-content: center;
}
.footer a {
  color:white;
}

.footer a:hover {
  color:#0C0E19;
}

.footer .f-title{
  margin:0 0 12px 0;
}

.footer .f-info{
  font-family: proxima-nova, sans-serif;
  font-size:15px;
}

.footer .feature {
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.footer .feature .info{
  align-self: center;
  
}

#footer-widget-container{
  display:flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
}

.footer-column {
    width: 20%;
    padding: 2%;
    box-sizing: content-box;
    line-height: 1em;
}

img.f-map {
    width: 300px;
    align-self: center;
    margin-bottom: 48px;
}

#videoshow, #inquire{

  display: none;
  position: fixed;
  top:0;
  left:0;
 
  height:100vh;
  width: 100vw;
  margin:0 0;
  background-color:#0C0E19;
  z-index: 99;



}

#videoshow iframe {
  width:90vw;
  height:50.6vw;
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
}

.close {
  height:24px;
  width:25px;
  display:block;
  position: absolute;
  top:24px;
  right:24px;
  border-radius: 16px;
  background-color:white;
  background-image: url(img/close.svg);
  background-size: contain;
  z-index: 100;
  opacity: .7;
  transition: opacity .5s;
}

.close:hover {
  opacity: 1;
}

button.np {
  padding:0 0 ;
  display: flex;
  height:60px;
  width:100%;
  text-align: center;
  
}

button a {
  text-decoration: none;
  line-height: 60px;
  width: 100%;
}

.footer  {
  color:white;
  text-align: center;
  padding: 48px;
}
/*smooth scrolling*/
*,
*::after,
*::before {
  box-sizing: border-box;
}



body {
  margin: 0;
}

/* Page Loader */
.js .loading::before {
  content: '';
  position: fixed;
  z-index: 100000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-bg);
}

.js .loading::after {
  content: '';
  position: fixed;
  z-index: 100000;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0.4;
  background: #000;
  animation: loaderAnim 0.7s linear infinite alternate forwards;
}

@keyframes loaderAnim {
  to {
    opacity: 1;
    transform: scale3d(0.5,0.5,1);
  }
}


[data-scroll] {
  will-change: transform;
}



.content {
  display: flex;
  flex-direction: column;
  position: relative;
  align-items: center;
  //padding: 12rem 0;
  counter-reset: figure; 
}



/*end smooth scrolling */

@media only screen and (max-width: 1280px) {
  #connected.panel .f-space {
   display:none;
  }
  #connected.panel .feature {
    justify-content: center;
  }

}
@media only screen and (max-width: 1080px) {
  .feature, .feature.r  {
    width:80vw;
    max-width: 600px;
    margin:auto;
    flex-direction: column-reverse;
  }
  .info {
    width: 100%;
  }
  .illus {
    width: 100%;
  }

  #connected.panel .info {
  width:100%;
  padding-top:0vh;
  align-self: flex-end;
  }

  #connected.panel .illus {
    width:100%;
  }

  #samples img {
  text-align: center;
  height: 100px;
  width:100px;
  margin:0 .5vw;
  }
  #sample-spacer{
    width:200px;
    margin:0 0vw;
  }

  #footer-widget-container{
  display:flex;
  flex-direction: column;
}
.footer-column {
    width: 90%;
    padding: 2%;
    box-sizing: content-box;
    margin:auto;
}



}