:root {
  --pinion-main-color:#973C97;
  --pinion-mid-color: #C76CC7;
  --pinion-lite: #FFACFF;
  --pinion-white: #F8ECF8;
  --pinion-grey: #626262;
}
html {
  box-sizing: border-box;
  scroll-behavior: smooth;
}
body {
  box-sizing: border-box;
  margin: 0;
  font-family: 'Roboto';  /* add fallback */
}
h1 {
  color: var(--pinion-white);
  font-family: 'Satoshi', sans-serif;
  font-size: 4.2rem;
  font-weight: 300;
  line-height: 0.9;
}
h2 {
  color: var(--pinion-white);
  font-family: 'Satoshi', sans-serif;
  font-size: 2.8rem;
  font-weight: 300;
  margin-block-start: 0 !important;
  line-height: 1;
  padding-top: 1.6rem;
}
h3 {
  color: var(--pinion-white);
  font-size: 1.6rem;
  font-weight: 200;
  margin-block-start: 0 !important;
  text-align: left;
}
h4 {
  color: var(--pinion-white);
  font-size: 1.4rem;
  font-weight: 200;
  margin-block-start: 0 !important;
  text-align: left;
}
p {
  color: var(--pinion-white);
  font-size: 1.4rem;
  font-weight: 200;
  line-height: 1.2;
  text-align: left;
}
a {
  color: white;  /* not pinion-white as that does not match the logo background */
  font-size: 1.2rem;
  font-weight: 200;
  text-align: left;
}
img {
  max-width: 100%;
  height: auto;
}
.trans-2s {
  -webkit-transition: width 2s;
  -moz-transition: width 2s;
  transition: width 2s;
}

/* --------------------------------------- */
/* fixed position header with navbar/ menu */
.main {
  padding-top: 96px;
}
.navbar {
  z-index: 2;                  /* ensure navbar is visible above/ over video iframes  */
  display: block;
  position: fixed;
  top: 0;
  height: 117px;              /* has to match value in JS:  document.getElementById("el-navbar-row").style.height = "117px"; */
  width: 100%;
  background-color: white;  /* change to pinion-white if we change the background of the logo PNG */
  /* overflow: hidden; */
  -webkit-transition: height 2s;
  -moz-transition: height 2s;
  transition: height 2s;
}
.pinion-button {
  align-items: center;
  background-color:  var(--pinion-lite);
  border: 1px solid  var(--pinion-main-color);
  border-radius: .4rem;
  box-shadow: rgba(0, 0, 0, 0.4) 0 6px 16px;
  box-sizing: border-box;
  color: var(--pinion-main-color);
  cursor: pointer;
  display: inline-flex;
  font-size: 1.4rem;
  font-weight: 200;
  justify-content: center;
  line-height: 1.25;
  margin: 0 0 1rem 0;
  min-height: 3rem;
  padding: calc(.675rem - 1px) calc(1rem - 1px);
  text-decoration: none;
  text-transform: uppercase;
  transition: all 250ms;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
  vertical-align: baseline;
  width: auto;
}
.pinion-button:hover,
.pinion-button:focus {
  border-color: rgba(0, 0, 0, 0.15);
  box-shadow: rgba(0, 0, 0, 0.4) 0 6px 16px;
  color: rgba(0, 0, 0, 0.65);
}
.pinion-button:hover {
  transform: translateY(-1px);
}

/* ------------------------------------------------------ */
/* Pure CSS responsive horizontal-to-vertical menu layout */
/* horizontal menu styles                                 */

ul {
  padding-inline-start: 0;  /* override the user agent stylesheet */
}
.valign {
  position: relative;
  top: 25%;
  transform: translateY(-50%);
  padding-left: 2.2rem;
}
.menu { 
  display: flex; 
  list-style: none; /* Remove bullets */
  list-style-type: none;
  margin: 0;
  /* padding-inline-start: 0;  override the user agent stylesheet */
} 
.menu a {    
  color: var(--pinion-main-color);
  font-weight: 200;
  font-size: 1.6rem;
  text-align: left;
  text-decoration: none;
  text-transform: uppercase;
}
.menu-sub a {
  color: var(--pinion-main-color);
  font-weight: 200;
  font-size: 1.1rem;
  text-align: left;
  text-decoration: none;
  text-transform: none;
}
.menu-item {
  margin-left: 0.6rem; /*10px margin */
  margin-right: 0.6rem;
}
.menu-item,
.menu-sub-item { 
  flex: 1; 
  height: 3rem;
  text-align: left; 
  padding-left:  0.6rem;
  padding-right: 0.6rem;
  border-radius: 0;
}
.menu-sub-item { 
  height: 2.4rem;
  padding-right: 0.4rem;
  width: 100%;
  background-color: var(--pinion-white);  /* always as display controlled by hover */
}
.menu-item:hover,
.menu-item:focus
{
  transform: translateY(-1px);
  background-color: var(--pinion-white);
  box-shadow: rgba(0, 0, 0, 0.4) 0 .6rem 1rem;
  border-radius: .4rem;
} 
.menu-sub-item:hover,
.menu-sub-item:focus {
  background-color: white;
}
.menu-item a:hover,
.menu-item a:focus,
.menu-sub-item a:hover,
.menu-sub-item a:focus {
  color: rgba(0, 0, 0, 0.65);
} 

/* First level Dropdown */
.menu-sub li {
	float: none;
	display: list-item;
	position: relative;
}
/* Hide Dropdowns by Default */
.menu-sub {
	display: none;
	position: absolute; 
}
/* Display Dropdowns on Hover */
.menu li:hover > .menu-sub {
  display: inherit; 
  background-color: var(--pinion-white);
  padding-inline-start: 0;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

/* ------------------- */
/* image positioning   */
.img-centre {
  display: block;
  margin-right: auto;
}
.pinion-img {
  max-width: 100%;
  margin: 1.2rem 0 0 1.6rem;   /* align image left with videos      */
  width:80%;                   /* reduce size of images overall */
}
#pinion-logo {
  max-width: 33%;
  margin-top: 0rem;
  margin-bottom: 2rem;
}
#el-social-icons{
  margin-right: 0.5rem;
}
#el-signup{
  margin-top: 2rem;
}
.inline-icon {
  width: 8%;
  display: inline-block;
  margin-left: 1.6rem;
}
.pinion-icon-label {
/* color: var(--pinion-mid-color); -- defaults to <p> color */
  font-size: 1rem;
}
.vimeo-video {
  margin-top: 0;
  margin-left: -6rem;
  padding: 50% 0 0 0;
  position: relative;
}
/* --------------------------------------------------------------------------------------- */
/* Two column layout. Note nav menu is set differently by media queries                    */ 
/* Create two column layout (top-navs, columns, bottom-navs) that float next to each other */
.top-nav-column1
{
  width: 45vw;
  float: left;
}
.top-nav-column2
{
  float: left;
  width: 50vw;
   margin-top: 2rem;
  -webkit-transition: 2s;
  -moz-transition: 2s;
  transition: 2s;
}
/* 24-Nov-04 */
/* columns adjusted to 45vw */
/* margins reduced to 0.6rem */

.column1
{
  float: left;
  width: 45vw;
  margin-top: 2.4rem;
  margin-left: 1.6rem;
  margin-right: 0;
}
.column2
{
  float: left;
  width: 45vw;
  margin-top: 4.2rem;
  margin-left: 0.6rem;
  margin-right: 0;
}
.bottom-nav-column1 {
  float: left;
  width: 45vw;
  padding: 2rem 0 0 2rem;
}
.bottom-nav-column2 {
  float: left;
  width: 45vw;
  padding: 2rem 0 0 2rem;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  clear: both;
  display: table;
}

/* ------------------------------------------- */
/* ID and element tweaks and panel backgrounds */

#el-top-nav{
  display: flex;
}
#pinion-top-logo {
  -webkit-transition: 2s;
  -moz-transition: 2s;
  transition: 2s;
  margin-top: 0;
  margin-bottom: 2rem;
}
#pinion-logo {
  margin-top: -4px;
  -webkit-transition: 2s;
  -moz-transition: 2s;
  transition: 2s;
}
#id-easy {
  min-height: 560px;  /* ensures the first section has enough vertical space and the second section peaks below */
  padding-bottom: 2rem;
  background-image: url('Landing-2.png');
  background-size: cover;
}

#id-taptap {
  padding-bottom: 2rem;
  background-image: linear-gradient(240deg, var(--pinion-mid-color), var(--pinion-main-color));
}

#id-prototype { /* TEMP FOR BACKWARD COMPAT */
  padding-bottom: 2rem;
  background-image: linear-gradient(60deg, var(--pinion-mid-color), var(--pinion-main-color));
}

#id-whatwearebuilding {
  padding-bottom: 2rem;
  background-image: linear-gradient(60deg, var(--pinion-mid-color), var(--pinion-main-color));
  /*background-image: url('purpleRight.jpg');
  background-repeat: round;*/
}

#id-shareyourpinion {
  padding-bottom: 2rem;
  background-image: linear-gradient(240deg, var(--pinion-mid-color), var(--pinion-main-color));
}

#id-worktogether {
  padding-bottom: 2rem;
  background-image: linear-gradient(240deg, var(--pinion-mid-color), var(--pinion-main-color));
}
#img-crowd {
  width: 200%;
}

#id-contactus {
  background-image: linear-gradient(60deg, var(--pinion-mid-color), var(--pinion-main-color));
}

#id-scroll-to-contactus {
  margin-top: -72px;
}
#id-pinionnation {
  padding-bottom: 2rem;
  background-image: linear-gradient(240deg, var(--pinion-mid-color), var(--pinion-main-color));
}

#id-joinbeta {
  padding-bottom: 2rem;
  background-image: linear-gradient(240deg, var(--pinion-mid-color), var(--pinion-main-color));
}

#id-signup {
  padding-bottom: 2rem;
  background-image: linear-gradient(60deg, var(--pinion-mid-color), var(--pinion-main-color));
}
#id-aboutus {
  padding-bottom: 2rem;
  background-image: linear-gradient(60deg, var(--pinion-mid-color), var(--pinion-main-color));
}

#id-social {
  padding-top: 2rem;
  padding-bottom: 2rem;
  background-color: var(--pinion-main-color);
}
#id-main-contact-form {
    margin-top: 1rem;
}
#id-workwithus {
  padding-bottom: 2rem;
  background-image: linear-gradient(60deg, var(--pinion-mid-color), var(--pinion-main-color));
}

#id-getintouch {
  padding-bottom: 2rem;
  background-image: linear-gradient(60deg, var(--pinion-mid-color), var(--pinion-main-color));
}

#bottom-nav {
  padding-bottom: 1.2rem;
}

/* footer menu and text */

.menu-item-bottom {
  padding-bottom: 2rem;
}
.menu-item-bottom a {
  margin-left: 0rem;
  margin-right: calc(8px + 1vw);
  font-size: 1.2rem;
}
.footer-terms {
  color: #954596;
  font-size:0.9rem;
}
.footer-terms a {
  color: #954596;
}

/* --------------------------------------------------------------------------------------------------------------------------- */
/* Layout for smaller screens - makes the two columns stack on top of each other instead of next to each other on a single row */
/* when on screens less than 1280px so that includes all tablets and phones */

@media screen and (max-width: 720px) { 
  h1 {
    font-size: 3.6rem;  /* helps responsiove ensure fit on phones */
  }
  .pinion-button{ 
    font-size: 1rem;
  }
}
@media screen and (max-width: 1279px) { 
  
  a {
    font-size: 1rem;
  }
  .main {
    padding-top: 200px;  /* for stacked menu layout, reduced 2024-10-26 for rounded tile layout, !! always check for phomne layouts !! */
  }
  .menu { 
    display: block; 
  } 
  .menu-item { 
    display: ruby-text; 
    width: auto;
    padding-left: 0;
    padding-right: 0;
    margin-left: 12rem;
    margin-right: 12rem;
    margin: 0;
  } 
  .menu a,
  .menu-sub a {    
   font-size: 1.5rem;
 }
  .column1,
  .column2,
  .top-nav-column1,
  .top-nav-column2, 
  .bottom-nav-column1,
  .bottom-nav-column2 
  {
    width: 90%;
  }
  .menu li:hover > .menu-sub {
    display: none; 
  }
  .column1,
  .column2 {
  margin-top: 0;
  margin-left: 1.2rem;
  }
  /* other tweaks JUST for stacked layout */
  .column1-full-width {
    width: 100%;
  }
  .column2-full-width {
    width: 100%;
  }
  .vimeo-video {
    margin-top: 2rem;
    margin-left: -3rem;
  }
  .no-left-margin {
    margin: 0;
  }
  .pinion-icon-label {
    margin-left: 1rem;
    font-size: 10px;
    /* color: var(--pinion-mid-color); -- defaults to <p> color */
  }
  .pinion-img {
    max-width: 100%;
    margin: 1.2rem 0 0 0rem;
    width: 70%;
}
  span {
    display: block;
  }
  #pinion-top-logo {
    display: inline;
    margin: auto;
  }
  #el-top-nav{
    display: block;
  }
  #termsSpacer {
    display: none;
  }
  #id-easy{
    background-size: 400%;
  }
  #id-prototype {
    background-image: linear-gradient(60deg, var(--pinion-mid-color), var(--pinion-main-color));
  }
  #id-shareyourpinion {
    background-image: linear-gradient(60deg, var(--pinion-mid-color), var(--pinion-main-color));
  }
  #id-contactus {
    background-image: linear-gradient(60deg, var(--pinion-mid-color), var(--pinion-main-color));
  }
  #id-aboutus {
    background-image: linear-gradient(60deg, var(--pinion-mid-color), var(--pinion-main-color));
  }
  #id-easy,
  #id-taptap,
  #id-whatwearebuilding,
  #id-shareyourpinion,
  #id-worktogether,
  #id-contactus,
  #id-signup,
  #id-aboutus,
  #id-workwithus,
  #id-getintouch {
    padding: 2rem;
  }
}