html, body {

  overflow-y: scroll;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.blurwindow{color:#505050;background-color:rgba(255, 255, 255, .8)!important;-webkit-backdrop-filter: blur(10px)!important;backdrop-filter: blur(10px)!important;-webkit-box-shadow: 0px -2px 25px 0px rgba(0,0,0,0.17)!important;
-moz-box-shadow: 0px -2px 25px 0px rgba(0,0,0,0.17)!important;
box-shadow: 0px -2px 25px 0px rgba(0,0,0,0.17)!important;z-index: 5;margin-bottom: 100px!important;}
.proc{

    display: block;
    position: relative;
}
.proc:after{
    clear: both;
    content: "";
    display: block;
}

.innerproducts{
    
   float: left;
    width: 24.99%;
  
    padding:20px;
    min-height: 300px;
    border-radius:10px;
  
    display: grid;
    
}
.divproducts {padding:15px; background: white;display:block;max-width:200px;width:100%;min-height:25px}



@media (max-width:500px){
    .innerproducts{
        width: 49%;
           max-height: 300px!important;
        }
        
        .divproducts, .innerproducts{max-height: 200px!important;}
}

.text-left{text-align:left}.text-right{text-align:right}.text-center{text-align:center}
footer.row {
  text-align: center;
}

.menu-rights {
  padding: 35px 0;
}

.menu-rights p {
  font: 300 15px/1 "Poppins", sans-serif;
  margin: 0;
}

@media (min-width: 480px) {
  .small-divide {
    display: none;
  }
}

.footer-menu {
  display: table;
  margin: 0 auto 19px;
}

.footer-menu li {
  font: 300 15px/1 "Poppins", sans-serif;
  float: left;
}

@media (max-width: 479px) {
  .footer-menu li {
    display: table;
    float: none;
    margin: 0 auto;
  }
}

@media (max-width: 479px) {
  .footer-menu li + li {
    margin-top: 5px;
  }
}

.footer-menu li + li:before {
  content: '\2022';
  float: left;
  padding: 0 13px;
  line-height: 15px;
  display: block;
}

@media (max-width: 600px) {
  .footer-menu li + li:before {
    padding: 0 5px;
  }
}

@media (max-width: 479px) {
  .footer-menu li + li:before {
    display: none;
  }
}

.footer-menu li a {
  padding: 0;
  float: left;
}

.social-links {
  padding: 43px 0 36px;
  border-bottom: 1px solid;
}

.social-links ul {
  display: table;
  margin: 0 auto;
}

.social-links ul li {
  float: left;
}

.social-links ul li + li {
  margin-left: 15px;
}

@media (max-width: 499px) {
  .social-links ul li + li {
    margin-left: 10px;
  }
}

.social-links ul li a {
  width: 48px;
  height: 48px;
  font-size: 22px;
  line-height: 52px;
  border-radius: 100%;
  padding: 0;
}

@media (max-width: 360px) {
  .social-links ul li a {
    width: 40px;
    height: 40px;
    font-size: 18px;
    line-height: 40px;
  }
}

.social-links ul li a i {
  margin-left: 2px;
}



body{ background-color:#ffffff; margin:0; padding:0;line-height:20px; font-size:1em; color:#5c5c5c; font-family:'Helvetica', sans-serif;  -ms-word-wrap:break-word; word-wrap:break-word; }
*{ margin:0; padding:0; outline:none;}
img{ border:none; margin:0; padding:0; height:auto; max-width:100%;}
.wp-caption, .wp-caption-text, .sticky, .gallery-caption, .aligncenter{ margin:0; padding:0; max-width:100% !important;}
p{ margin:0; padding:0;}
a{ text-decoration:none; color:#0084ffa;}
a:hover{ color:#333;}
ol,ul{ margin:0; padding:0;}
ul li ul, ul li ul li ul, ol li ol, ol li ol li ol{ margin-left:10px;}

pre{white-space: pre-wrap;       /* Since CSS 2.1 */white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */white-space: -pre-wrap;/* Opera 4-6 */white-space: -o-pre-wrap;/* Opera 7 */word-wrap: break-word;       /* Internet Explorer 5.5+ */}
.clear{ clear:both;}
.alignnone{ width:100% !important;}
img.alignleft, .alignleft{ float:left; margin:0 15px 0 0; padding:5px; border:1px solid #cccccc;}
img.alignright, .alignright{ float:right; margin:0 0 0 15px; padding:5px; border:1px solid #cccccc;}
.left{ float:left;}
.right{ float:right;}
.pagination{display:table; clear:both;}
.pagination ul{list-style:none; margin:20px 0;}
.pagination ul li{display:inline; float:left; margin-right:5px;}
.pagination ul li span, .pagination ul li a{background:#646262; color:#fff; padding:5px 10px; display:inline-block;}
.pagination ul li .current, .pagination ul li a:hover{background:#34c6f6;}

h1,h2,h3,h4,h5,h6{font-family: Helvetica Neue, Helvetica, Arial, sans-serif!important; margin:0 0 20px!important; padding:0!important; line-height:1.1!important;  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;}
h1{ font-size:3em!important;;font-weight: 200!important;color:#7d7d7d;}
h2{ font-size:3em!important;;font-weight: 400!important;color:#565656;}
h3{ font-size:2em!important;;font-weight: 200!important;color:#565656;}
h4{ font-size:2em!important;;font-weight: 100!important;color:#565656;}
h5{ font-size:1.3em!important;;font-weight: 400!important;color:#565656;margin-top: 10px!important;}
h6{ font-size:1em!important;;font-weight: 200!important;color:#565656;}

.tech-specs-row .tech-spec {
  border-top-color: #f4f5f6;

}

.tech-specs-row h4 {
  color: #374048;
}

.tech-specs-row ul li {
  color: #82898f;
}

.tech-specs {
  padding: 78px 0 85px;
}

.tech-specs-row:first-child {
  padding-top: 13px;
}

.tech-specs-row .tech-spec {
  padding: 35px 15px;
  border-top: 1px solid;
  min-height: 250px;
}

@media (max-width: 991px) {
  .tech-specs-row .tech-spec {
    min-height: auto;
  }
}

.tech-specs-row h4 {
  font: 20px/1 "Poppins", sans-serif;
  margin: 0 0 8px;
}

.tech-specs-row ul {
  display: inline-block;
}

.tech-specs-row ul li {
  font: 300 15px/25px "Poppins", sans-serif;
}

.blacktext{color: black;}
.help-tip{

	text-align: center;
	background-color: #ffffff;
	cursor: default;
}

.help-tip:before{
	font-weight: bold;
	
	color:#fff;
}

.help-tip:hover p{
	display:block;
	transform-origin: 100% 0%;

	-webkit-animation: fadeIn 0.3s ease-in-out;
	animation: fadeIn 0.3s ease-in-out;

}

.help-tip p{	/* The tooltip */
	display: none;
	text-align: left;
	background-color: #ffffff;
	padding: 20px;
	min-width: 100%;
	
	border-radius: 3px;

	
	color: #FFF;
	font-size: 13px;
	line-height: 1.4;
	z-index: 1000000;

}

.help-tip p:before{ /* The pointer of the tooltip */
	position: absolute;
	
	width:0;
	height: 0;
	border:6px solid transparent;
	border-bottom-color:#1E2021;

}

.help-tip p:after{ /* Prevents the tooltip from being hidden */
	width:100%;
	
	height:40px;
	content:'';
	position: absolute;
	top:-40px;
	left:0;
}

/* CSS animation */

@-webkit-keyframes fadeIn {
	0% { 
		opacity:0; 
		transform: scale(0.6);
	}

	100% {
		opacity:100%;
		transform: scale(1);
	}
}

@keyframes fadeIn {
	0% { opacity:0; }
	100% { opacity:100%; }
}


/* make keyframes that tell the start state and the end state of our object */

@-webkit-keyframes fadeIn { from { opacity:0; opacity: 1\9; /* IE9 only */ } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; opacity: 1\9; /* IE9 only */ } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; opacity: 1\9; /* IE9 only */ } to { opacity:1; } }

.fade-in {
	opacity:0;  /* make things invisible upon start */
	-webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
	-moz-animation:fadeIn ease-in 1;
	animation:fadeIn ease-in 1;
-webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
	-moz-animation:fadeIn ease-in 1;
	animation:fadeIn ease-in 1;
	-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;

	-webkit-animation-duration:1s;
	-moz-animation-duration:1s;
	animation-duration:1s;
}

.fade-in.one {
-webkit-animation-delay: 0.1s;
-moz-animation-delay: 0.1s;
animation-delay: 0.1s;
}

.fade-in.two {
-webkit-animation-delay: 0.2s;
-moz-animation-delay:0.2s;
animation-delay: 0.2s;
}

.fade-in.three {
-webkit-animation-delay: 0.3s;
-moz-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.fade-in.four {
-webkit-animation-delay: 0.4s;
-moz-animation-delay: 0.4s;
animation-delay: 0.4s;
}
.fade-in.five {
-webkit-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
animation-delay: 0.5s;
}

.fade-in.six {
-webkit-animation-delay: 0.6s;
-moz-animation-delay: 0.6s;
animation-delay: 0.6s;
}

.fade-in.seven {
-webkit-animation-delay: 0.7s;
-moz-animation-delay: 0.7s;
animation-delay: 0.7s;
}

.fade-in.eight {
-webkit-animation-delay: 0.8s;
-moz-animation-delay: 0.8s;
animation-delay: 0.8s;
}

.fade-in.twelve {
-webkit-animation-delay: 1.4s;
-moz-animation-delay: 1.4s;
animation-delay: 1.4s;
}

	.dotdotdotpad{padding-top: 15px;}
.xcontainer {
  text-align:center;
  color: #111111;
  padding-top: 8em;

  flex-direction: row;
  display: flex;
  height: 300px; /* Or whatever */
}

#x {
  font-size: 55px;
  font-weight:900;
}

#xhello {
  margin-top:.5em;
  font-size: 30px;
  font-weight:500;
}

.watchcontainer {
  text-align:center;
  margin-top: 8em;
}

#imagination {
  font-size: 55px;
  font-weight: 900;
}

#shopwatch {
  font-size: 27px;
  font-weight: 500;
}

.macgrid {
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-row-gap: 1em;
  grid-column-gap: 1em;
 
}

/* ROW ONE */

.imac {
  text-align:center;
  background-color:rgba(22, 22, 22, .9);
  -webkit-backdrop-filter: blur(10px)!important;backdrop-filter: blur(10px)!important;
  color: #FAFAFA;
  border-radius: 3px;
}

.getadvice {
  text-align:center;
  background-color:rgba(242, 242, 242, 0.9);
  -webkit-backdrop-filter: blur(10px)!important;backdrop-filter: blur(10px)!important;
 border-radius: 3px;
}

#imac {
  margin-top: 3em;
}

.iphone8 {
  text-align:center;
  background-color:rgba(245, 244, 239, 0.9);
   -webkit-backdrop-filter: blur(10px)!important;backdrop-filter: blur(10px)!important;
    border-radius: 3px;
}

.headtext {
  font-size: 40px;
  font-weight: 700;
  padding-top:1.2em;
    padding-botom: 10px;
    line-height: 30px;
}

.subheadtext {
  font-size: 20px;
  font-weight: 200;
  padding: 10px;
}

#iphone8pic {
  margin-top: 3em;

}

#tv {

}

/* ROW TWO */

.iwatch {
  text-align:center;
  font-size: 20px;
}

.fourk {
  background-color:#020814;
  text-align:center;
  color:white;
  font-size: 20px;
}

/* ROW THREE */

.ipadpro {
  text-align:center;
}

.topimg {
  margin-top: 3em;
}

/* FIND BETTER IMAGE, STYLING */
#sway {
  width: 100%;
}

	input[type=radio] + label > img {
    transition: 100ms all;
}
.input-hidden {
  position: absolute;
  left: -9999px;
  
}
label {
display: inline-block;

}
 

.fadeout {
    position: relative; 
    bottom: 4em;
    height: 4em;
    background: -webkit-linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
    ); 
    background-image: -moz-linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
    );
    background-image: -o-linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
    );
    background-image: linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
    );
    background-image: -ms-linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
    );
} 


/*
 | //lea.verou.me/css3patterns
 | Because white bgs are boring.
*/

.Colordivs {
	display: block;
    width: 100%;
max-width: 600px;

}  


.colorpics {
	    

   	width: 90px;  
    display: inline-block;
    border-collapse:collapse;
    margin: auto;
    padding: 5px;

}


div.gallery {
    border: 0px solid #ccc;

     display: inline-grid;
    border-collapse:collapse;
     margin: 6px 0;
}


div.gallery img {
    width: 100%;
    height: auto;
     display: inline-grid;
    border-collapse:collapse;
     margin: 0px 0;
}

 #menucontainer{width: 100%;padding-left: 10%;padding-right: 10%}
.responsive3 {
    padding: 0;
    border-collapse:collapse;
    float: left;
    width: 12%;
     margin: 6px 0;
}
@media only screen and (max-width: 700px) {
.paddleftbig{margin-left: 0%!important}
.paddleftbig{max-height: 500px!important}
  #nopaddonmobile{margin-right: 0px!important}   
}

@media only screen and (max-width: 500px) {
 #menucontainer{width: 100%;padding: 0px!important}
 .paddleftbig{margin-left: 0%!important}
 .paddleftbig{max-height: 500px!important}
 #nopaddonmobile{margin-right: 0px!important}
}
.realfooter {
    height:auto;  
     width: 100%;    
    position: fixed;
    z-index: 100000000000000!important;
    bottom: 0px;
    left: 0px;
   background-color:rgba(248, 248, 248, .9);
   -webkit-backdrop-filter: blur(10px);
   backdrop-filter: blur(10px);
-webkit-box-shadow: 0px -3px 12px -1px rgba(0,0,0,0.08);
-moz-box-shadow: 0px -3px 12px -1px rgba(0,0,0,0.08);
box-shadow: 0px -3px 12px -1px rgba(0,0,0,0.08);
    

} 
.col1 { 
    background-color: #ffffff; 
    float: left;
    z-index: 10000000000;
}
.col2 { 
    background-color: #ffffff; 
    float: none;
    margin-top: 0;
    margin-bottom: 0;z-index: 10000000000;
}
.col3 { 
    float: right;
z-index: 10000000000;
}

.beauty,.middlesjection,.bottomsjection,.toppart,.thepicdic {
width:200px;	 
padding: 0px !important;
margin: 0px !important;
}

.sanmarinodiv{
width:100%;
max-width: 300px;
margin: auto;
display: block;
}
.piccontainter {
	

    height: 100px;
    overflow-x: auto;
    white-space: nowrap;
}

.Colordivs {
	display: block;
    width: 100%;


}  


.theotherColordivs {
	display: block;
    width: 100%;

  
    margin: auto;
}       
    
.fencepics {
	width: 100%;
	max-width: 600px;
    display: inline;
    border-collapse:collapse;
    margin: auto;
}

.colorpics {
	    

   	width: 90px;  
    display: inline-block;
    border-collapse:collapse;
    margin: auto;
    padding: 5px;

}
.gradepics {
	min-width:190px;
   	width: 30%;   
    display:inline-block;
    border-collapse:collapse;
    margin: auto;

}
.gradepic2 {
	    
   	width: 100%;   
    display: inline;
    border-collapse:collapse;
    margin: auto;

}
.colorstyles {
	    
   	min-width: 24%;   
   	max-width: 24%;  
    display: inline;
    border-collapse:collapse;
    margin: auto;

}
.tab {
	    float:left;
display:inline-block;
    border: 1px solid #ccc;
    border-radius:17px;
        background-color: #f1f1f1;
        margin: 5px;
   
    
}

/* Style the buttons inside the tab */
.tablinks {
    background-color: #ebebeb;
    width:100px;
    display:inline;
    border: none;
    outline: none;
    cursor: pointer;
    transition: 0.3s;
    padding: 10px;
    margin: 15px;
    font-size: 14px;
    color: black;
    font-weight: 100;
}
.tablinky{
	display:inline-block;
	padding:5px;
	margin: 5px;
	}
.tabbar {
    background-color: #ebebeb;
    width: 80%;
    max-width: 600px;
    border: none;
    outline: none;
    cursor: pointer;
    border-radius:5px;
    transition: 0.3s;
    
    margin: 5px;
    font-size: 17px;
    height:auto;
}

/* Change background color of buttons on hover */
.tablinks:hover {
    background-color: #dde3f0;
    color: #000000;
}



/* Style the tab content */
.tabcontent {

  display: block;
   width: 100%;
   

}

.fencecontent {

 width: 100%;
 max-width: 600px;
 margin: auto;
	border: none;
    border-top: none;
    margin: auto;
}



div.gallery {
    border: 0px solid #ccc;

     display: inline-grid;
    border-collapse:collapse;
     margin: 6px 0;
}


div.gallery img {
    width: 100%;
    height: auto;
     display: inline-grid;
    border-collapse:collapse;
     margin: 0px 0;
     font-size: xx-large;
     color: #545454;
}
.

* {
    box-sizing: border-box;
}

select {
 -webkit-appearance: none;
 color: black;
 overflow-x: visible;
      
      }
input {
  display: block;
  margin: 0;
  width: 100%; 
  line-height: 40px; font-size: 24px;
  border: 1px solid #bbb;
  color: #5d5d5d;
  border-radius:5px;
padding:20px;
width:100%;
display:inline-block;
margin-bottom: 20px;
}

.content-section {
  --scroll-length: 1.5;
  height: calc( var(--scroll-length) * 100vh );
  width: 100%;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;

  .content .subheading, 
  .content .paragraph {
    opacity: 1; 
    opacity: calc( 1 + var(--viewport-y) );
    
  }
 
}
.content-section2 {
  --scroll-length: 1.5;
  height: calc( var(--scroll-length) * 100vh );
  width: 100%;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;

  .content .subheading, 
  .content .paragraph {
    opacity: 1; 
    opacity: calc( 1 + var(--viewport-y) );
    
  }
 
}
.figure {
  width: 100%;
  height: 100vh;
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
  
  

  > img { // 🥕
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
    object-position: center center;
    
  }
}

.content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  display: grid;
  margin: auto;
  grid-template-rows: 1fr 1fr;
  color: white;
  
  font-size: 2.5vmin;
  

  * {
    text-shadow: 0 0 4vmin rgba(black, 0.25);
  }

  > .header {
    grid-row: 1 / 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }

  > .paragraph {
    grid-row: 3 / 4;
    line-height: 1.5;
  }
  
   > .paragraphy {
    grid-row: 4 / 4;
    line-height: 1.5;
  }
} 

.heading {
  font-size: 2.75em;
  margin: 0;
}

.subheading {
  font-size: 1.25em;
  font-weight: 600;
  margin-bottom: .5em;
}

/* ---------------------------------- */

.figure {
  --scale: calc(.8 + 
    (.2 * var(--scroll-length) * var(--visible-y))
  );
  position: sticky;
  top: 0;
  left: 0;
  margin: 0;
  display: block; 
  overflow: hidden;
  will-change: transform;
  transform: scale(var(--scale));


  &:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: rgba(black, 1);
    opacity: calc( var(--visible-y) );
    
  }

  > img {
    display: block;
    will-change: transform;
    transform: scale(calc(1 / var(--scale)));
    
  }
}

/* ---------------------------------- */


.input[type=edit] {
		border: 2px solid red;
    background-color: white;
    font-size: x-large;
    color: #7fb5ff;
         -webkit-appearance: none;
             border-radius: 10px;
              text-align: center;
              width: 100%;
               
               
}
.input[type=edit]:focus {

		border: 2px solid red;
    background-color: white;
    font-size: x-large;
    color: #7fb5ff;
         -webkit-appearance: none;
             border-radius: 10px;
              text-align: center;
              width: 100%;
         
}

.input[type=text] {

	 font-size: x-large;
    background-color: white;
         -webkit-appearance: none;
         border-radius: 10px;
          text-align: center;
         
}
.input[type=email] {
border-radius:3px;
padding:20px;
width:100%;
display:inline-block;
	 font-size: x-large;
    background-color: white;
         -webkit-appearance: none;
         border-radius: 10px;
          text-align: center;
         
}


*,
*:before,
*:after {
  position: relative;
  box-sizing: border-box;
}

.heading,
.intro-heading {
  font-weight: 700;
}
@media screen and (max-width: 680px) {
	.paddleftbig{margin-left: 0%!important}
	.paddleftbig{max-height: 500px!important}
.responsive3 {
    padding: 0;
    border-collapse:collapse;
    float: left;
    width: 25%;
     margin: 6px 0;
}
 #nopaddonmobile{margin-right: 0px!important}
 #menucontainer{width: 100%;padding: 5px!important}
	.hideonmobile{display: none}
.paddleftbig{margin-left: 0%!important}
.paddleftbig{max-height: 500px!important}
}
body, html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: -.015em;
  font-family: "Helvetica Neue","Helvetica","Arial",sans-serif;
}

.head {
  padding: 40px;
  width: 100%;
  text-align: center;
}



.lead {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-size: xx-large
}


.lead {
  font-weight: 100 !important;
  
}

.lead {
  font-weight: 300 !important;
}

.animate, .as-accordion-close {
  transition: -webkit-transform .2s ease-out;
  transition: transform .2s ease-out;
  transition: transform .2s ease-out, -webkit-transform .2s ease-out;
}

.accordion {
  border-top: 1px solid #cdcdcd;
}
.accordion:nth-last-child(1) {
  border-bottom: 1px solid #cdcdcd;
}

.as-accordion-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #333;
  width: 100%;
  padding: 40px 0;
  cursor: pointer;
}
.as-accordion-head:hover {
  color: #0070c9;
}

.as-accordion-title {
  font-size: 3em;
  line-height: 1.14286;
  font-weight: 200;
  letter-spacing: 0;
}

.as-accordion-close {
  font-size: 50px;
  font-weight: 100;
  -webkit-transform: translateY(0px) rotate(45deg) scale(0.8);
          transform: translateY(0px) rotate(45deg) scale(0.8);
  line-height: 0;
}
.as-question-close {
  font-size: 50px;
  font-weight: 100;
  -webkit-transform: translateX(-3px) translateY(-2px) rotate(0deg) scale(1);
          transform: translateX(-3px) translateY(-2px) rotate(0deg) scale(1);
  line-height: 0;
}
.as-question-close.open {

          
          -webkit-transform: translateY(-3px) rotate(45deg) scale(0.8);
          transform: translateY(-3px) rotate(45deg) scale(0.8);
}

.as-accordion-close.open {
  -webkit-transform: translateX(-3px) translateY(-2px) rotate(0deg) scale(1);
          transform: translateX(-3px) translateY(-2px) rotate(0deg) scale(1);
}

.as-accordion-collapse {
  display: none;
  padding-bottom: 40px;
}

.intro-section {
  text-align: center;
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.content-section {
	
  --scroll-length: 1.5;
  height: calc( var(--scroll-length) * 85vh );
  width: 100%;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}
.content-section .content .subheading,
.content-section .content .paragraph {
  opacity: 1;
  opacity: calc( 1 + var(--viewport-y) );
}

.section {
  width: 100%;
  height: 100vh;
  margin: 0;
 
  
}
.section > img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center center;
     object-position: center center;
}


.content > .header2 {
  grid-row: 1 / 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  
}
.content > .paragraph {
  grid-row: 3 / 3;
  line-height: 1.5;
}

.heading {
  font-size: 2.75em;
  margin: 0;
}

.subheading {
  font-size: 2em;
  font-weight: 600;
  margin-bottom: 1em;
  color: !important;
  line-height: 1em;
}

/* ---------------------------------- */

.section {
  --scale: calc(.8 +
    (.2 * var(--scroll-length) * var(--visible-y) )
  );
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  left: 0;
  margin: 0;
  display: block;
  max-width: 100%;
  overflow: hidden;
  will-change: transform;
  -webkit-transform: scale(var(--scale));
          transform: scale(var(--scale));
}
.section:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-color: #ededed;
  opacity: calc(.0 - var(--visible-y));
}
.section > img {
  display: block;
  will-change: transform;
  -webkit-transform: scale(calc(1 / var(--scale) + .2));
          transform: scale(calc(1 / var(--scale) + .2));
}

/* ---------------------------------- */
.char {
  display: inline-block;
  opacity: calc(  1 + (  ( var(--viewport-y) * 1.5 ) - var(--char-percent) ) );
}


.heading,
.intro-heading {
  font-weight: 700;
}

html, body {
  
  overflow-y: scroll;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}