button{
  background-color: transparent;
  transition: ease-in-out 0.15s border;
  border: 1px solid #D7D7D7;
  border-radius: 10px;
  padding: 20px;
  width: 100%;
  cursor: pointer;
  &:hover{
    border-color: #71c100;
    border-width: 1px;
  }
  &:active{
    border-color: #FFF !important;
  }
}
.secondary-button{
  height: 42px;
  display: inline-block;
  width: 130px;
  & a{
    color: #fff;
    text-decoration: none;
  }
}

.backToTopContainer{
  margin-bottom: 5vh;
}

.contactDetails{
  align-items: center;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 80%;
  max-width: 1200px;
  margin: auto;
  padding-top: 40px;

  & div {
    border-right: unset;
    padding-right: unset;
  }
  & .divider{
    width:1px;
    height: 100px;
    justify-self:center;
    background-color:#D3D3D3;
  }

  & h3{
    font-size: 1rem;
    font-weight: normal;
    margin-top: 0;
  }
  & a{
    color: #000;
    font-size: 1.2rem;
    font-weight: bold;
    text-decoration: none;
  }
  & a:hover{
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration: solid underline #000 2px;
  }
  & a:active{
    text-decoration: underline;
    color: #74b641;
    text-decoration: solid underline #74b641 2px;
  }
}

.contactDetailsFlexBox{
  column-gap: 10px;
  & > div:first-child{
    width: 48%
  }
  & > div:last-child{
    width: 51%
  }
}

#contactDetailsBox{
  background-image: url("../assets/100YongeSt.png");
}

#contactDetailsBox, .contactDetailsBox{
  /*width: 569px !important;*/
  border: 1px solid #D7D7D7;
  border-radius: 10px;
  background-size: cover;
  height: 480px;
  display: flex;
  align-items: flex-end;
  transition: all 1s ease-in-out;
  & div{
    backdrop-filter: blur(5px);
    background-color: rgba(0,0,0,0.2);
    border-top: 1px solid #FFF;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    color: #FFF;
    height: fit-content;
    width: 100%;
    padding: 20px;
    & p{
      font-weight: bold;
    }
    & p:last-of-type{
      font-weight: 100;
      font-size: 0.8rem;
    }
    & button{
      background: none;
      color: #FFF;
      border: 1px solid #FFF;
      border-radius: 25px;
      width: auto;
      padding: 5px 10px;
    }
  }
}

.contactDetailsButtonList{
  height: 480px;
  display: flex;
  flex-direction: column;
  row-gap: 10px;
  & > div{
    display: flex;
    font-size: 1rem;
    font-weight: bold;
    text-align: left;
    padding-left: 40px;
    height: 20%;
    border-radius: 10px;
    border: 1px solid #D7D7D7;
    align-self: center;
    cursor: pointer;
    flex-wrap: wrap;
    width: calc(100% - 40px);
    align-items: center;
  }
  & div:hover{
    border-color: #71c100;
  }
}

.contactUsAccessibility{
  display: flex;
  width: 80%;
  justify-self: center;
  margin-top: 55px;
  & > div:last-child{
    width: 56%
  }
  & > div:first-child{
    align-self: start;
    width: auto;
    & h1{
      align-self: start;
      margin: 0;
    }
  }
}

.contactUsLinks{
  display: flex;
  flex-flow: row wrap;
  column-gap: 10px;
  row-gap: 15px;
  width: 100%;
  & a{
    color: black;
    text-decoration: none;
  }
  & > div {
    border: 1px solid #D3D3D3;
    border-radius: 10px;
    column-gap: 20px;
    display: flex;
    height: 48px;
    padding: 10px 20px;
    max-width: 320px;
    width: 42%;
    font-weight: bold;
    align-items: center;
    cursor: pointer;
    &:hover{
      border-color: #71c100;
    }
    &:active{
      border-color: #FFF;
      & img{
        filter: invert(0.5);
      }
    }
  }
}
.contactUsLinksImgContainer{
  width: 21px;
  text-align: center;
}

.SendUsAMessage {
  display: flex;
  flex-direction: column;
  justify-items: center;
  margin: 55px auto 0 auto;
  width: 50%;
  & h1{
    font-weight: bold;
    margin: 0;
  }
  & h1, h3{
    color: #161616;
    text-align: center;
  }
  & p{
    text-align: center;
  }
}
.sendUsAMessageAlignFix{
  display:flex;
  justify-content: center;
  justify-items: center;
  width:100%;
}

.emailForm{
  width: 100%;
  max-width: 579px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  /*grid-auto-flow: column;*/
  justify-self: center;
  justify-items: center;
  column-gap: 10px;
  row-gap: 10px;

  p{
    grid-column: 1 / -1;
    justify-self: center;
    text-align: center;
  }

  button{
    grid-column: 1 / -1;
    justify-self: center;
  }

  input, textarea{
    border-radius: 5px;
    border: 1px solid #D3D3D3;
    height: 42px;
    width: 100%;
    max-width: 285px;
    font-family: 'Manrope', sans-serif;
    text-indent: 10px;
    & ::placeholder{
      color: #9C9C9C;
    }
  }
  & .fullRow{
    width: 100%;
    max-width: 579px;
    grid-column: 1 / -1;
  }
  select{
    width: 100%;
    max-width: 285px;
  }

  textarea{
    resize: none;
    height: 173px;
    padding-top: 15px;
  }

}

.bannerText{
  text-shadow: 0 0 2px black;
}


#LocationTitle{
  margin-top: 0;
}

.contactAddressIcon{
  display: none;
}

.contactDetailsFlexBoxMobile{
  display: none;
}

.contactAddressIconActive{
  transform: rotate(90deg);
}

/******START******/
.contactUsBanner{
  & p{
    font-weight: normal;
  }
}

/******END*******/


.mobileAddressLinks{
  padding-top: 5px;
}

#ContinualOfficeMobile{
  background-image: url("../assets/100YongeSt.png")
}
#ContinualWarehouseMobile{
  background-image: url("../assets/2100Steeles2.png")
}
#ScotiaPlazaMobile{
  background-image: url("../assets/scotiaPlaza.png")
}
#RoyalYorkMobile{
  background-image: url("../assets/royalYork.png")
}
#FinanceMobile{
  background-image: url("../assets/245-Vic.png")
}


.contactDetailsBoxMobile{
  display: none;
  height: 321px;
  width: calc(100% + 40px);
  margin: 0 0 0 -11px;
  border-radius: 0 0 10px 10px;
  & div{
    width: unset !important;
  }
}

.mobileAddressTitle{
  display: grid;
  height: 66px;
  font-size: 16px;
  font-weight: 500;
  align-items: center;
}

.LocationAddress{
  font-size: 14px;
}

.contactDetailsBoxMobileActive{
  display: grid !important;
  margin-top: 5px;
}

@media  (max-width: 1310px) {
  .contactUsLinks {
    & > div {
      width: 272px;
    }
  }

}
@media  (max-width: 600px){

  .SendUsAMessage{
    width: 80%;
    & h1{
      font-size: 32px;
    }
  }

  .emailForm{
    grid-template-columns: 1fr;
    input, select, textarea{
      width: 100%;
      max-width: unset;
    }
  }

  .dualFlexBox{
    width: 80%;
    flex-direction: column;

    & > div:first-child {
      width: 100%;
      & h1{
        justify-self: center;
        text-align: center;
      }

    }
    & > div:last-child {
      width: 100%;
    }
  }

  .contactUsLinks{
    justify-content: center;
    & div{
      width: 80%;
      max-width: unset;
    }
  }

  .contactDetails {
    align-items: unset;
    flex-direction: column;
    row-gap: 20px;
    & div {
      border-right: unset;
      margin-bottom: 15px;
      & h3{
        margin-bottom: 0;
      }
    }
    & .divider {display: none;}
    & div:last-child {
      margin-bottom: 0;
    }
  }

  #contactDetailsBox{
    margin-bottom: 10px;
  }

}


@media  (max-width: 980px){
  .contactDetails{
  }
}

@media  (max-width: 441px) {

  .mobileAddressLinks{
    padding: 0;
  }

  .contactDetailsBox{
    display: none;
  }

  h1{
    font-size: 32px;
    line-height: 0.8;
  }

  .SendUsAMessage {
    & h1{
      text-align: unset;

    }
  }

  .contactDetailsFlexBox{
    display:none;
  }

  .contactDetailsFlexBoxMobile{
    display: flex;
  }

  .contactDetailsButtonList{

    & > div{
      min-height: 59px;
      width: 100%;
      padding-left: 10px;
      display: grid;
      grid-template-columns: 1fr auto;
    }
    & > div:focus{
      background-color: #71c100;
      .contactAddressIcon{
        background-color: #71c100;
      }
    }
  }
  .contactUsLinks {
    & div {
      font-size: 13px;
      width: 100%;
    }
  }
  .contactDetailsButtonList{
    height: auto;
  }
  .contactAddressIcon{
    display: flex;
    justify-content: center;
    width: 30px;
  }

  .contactAddressIcon:focus{
    background-color: #71c100;
  }
  .contactUsLinksImgContainer{
      width: 20px !important;

  }

  .dualFlexBox {
    & > div:first-child {
      & h1 {
        justify-self: left;
        text-align: left;
      }
    }
  }
}