@import url("normalize.css");
@import url("../fonts/webfonts/fontawesome-all.css");
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700,900');
@import url('https://fonts.googleapis.com/css?family=Courgette');



body {
    font-family:"Montserrat", sans-serif;
    font-size:1rem;
    font-weight:400;
    color:white;
}

a {
  text-decoration:none;
  color:white;
}

.jumberton {
  display:grid;
  grid-template-columns:4rem repeat(11, 1fr);
  height:100vh;
}

.jumberton-navigation-column {
  grid-column:1;
  grid-row:span 3;
  background-color:rgba(19,3,38,1);
  
}

.jumberton-content {
  grid-column:2/span 11;
  grid-row:span 3;
  background-size:auto;

  display:grid;
  grid-template-columns:repeat(12,1fr);
}

.first {
    background-image:url("../img/Layer 7.png");
}

.header-title {
    grid-column:span 12;
    grid-row:2;
    align-self:center;  
}

.header-title h2{
    font-size:calc(4rem + 4vw);
    font-weight:700;
    text-transform:uppercase;
    text-align:center;
    line-height:0;
    color:white;
    margin:0;
}

.circle-title {
  /*center
 
    position:relative;
    top:-22.5vh;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
    */
    margin:0 auto;
    width:8rem;
    height:8rem;
    box-shadow: 0 0 0 0.5rem white, 0 0 0 1rem rgba(135,34,75,0.25);
    border-radius:50%;
    background-color:rgba(135,34,75,1);
    background-image:url("../img/Layer 7.png");
    background-size:contain;
    color:white;
    display:grid;
    align-items:center;

    transform: rotate(-5deg);
}

.circle-title-second {
  background-image:url("../img/Layer 14.png");
}

.title-part {
    font-size:2rem;
    font-family: 'Courgette', cursive;
    margin:0 auto;
    vertical-align:middle; 
}

.jumberton-txt {
    grid-row:3;
    grid-column:span 6;
    align-self:center;    
}

.jumberton-txt-content {
  width:75%;
  margin:0 auto;
}

.jumberton-date {
    grid-row:3;
    grid-column:span 6;
    justify-self:end;
    align-self:center;
    margin:0 2rem;
}



/*HAMBURGER*/

#menuToggle
{
  display: block;
  position: relative;
  top: 1rem;
  left: 1rem;
  
  z-index: 1;
  user-select: none;
}

.menu-item {
  margin:1rem 0;
}

#menuToggle input
{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  
  cursor: pointer;
  
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
}

#menuToggle span
{
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  
  background: white;
  border-radius: 3px;
  
  z-index: 1;
  
  transform-origin: 4px 0px;
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: white;
}

#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}

.menu-small
{
  display:flex;
  flex-direction:column;
  align-items:center;
  position: absolute;
  width: 50vw;
  margin: -100px 0 0 -50px;
  padding: 50px;
  padding-top: 125px;
  
  background: rgba(0,0,0,0.4);
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */
  
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menuToggle input:checked ~ .menu-small
{
  transform: none;
}

.slider {
  background-color:rgba(19,3,38,1);
  background-image:url("../img/Layer 13.png");
  background-size:contain;
  background-repeat:no-repeat;
  background-position:right;
}


.slider-content {
  display:grid;
  grid-template-columns:repeat(12,1fr) 2rem;
  grid-column-gap:1rem;
  color:black;
  width:90%; 
}

.slider-content a {
  color:black;
}

.slider-title {
  grid-column:2/span 11;
  height:10vh;
  display:grid;
  align-items:center;
}

.slider-title h3 {
  color:white;
  text-transform:uppercase;
  font-weight:400;
  font-size:1rem;
  align-self:center;
  padding-left:4rem;
  
}

.slider-card {
  grid-column:span 3;
  background-color:white;
  margin-bottom:10vh;
}

.slider-card-image {
  clip-path: polygon(50% 0%, 100% 0, 100% 60%, 100% 100%, 5% 100%, 0% 95%, 0 0);
}

.slider-card img {
  width:100%;
}

.slider-card-text {
  width:75%;
  margin:0 auto;
  height:35vh;
  overflow:hidden;
  clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 5%);
}



.slider-card-text h3 {
  text-transform:uppercase;
  font-size:1.414rem;
  font-weight:400;
}

.slider-card-info {
  background-color:rgba(0,0,0,0.025);
  height:5vh;
  margin-top:1rem;
  display:grid;
  grid-template-columns:3fr 1fr;
  align-items:center;
}

.dot-toggler {
  text-align:right;
}

figure {
  margin:0;
}

i {
  margin:0 1rem;
  color:rgba(0,0,0,0.25);
}

.second {
  background-image:url("../img/Layer 14.png"); 
}

.txt {
  background-color:rgba(19,3,38,1);
}

.txt-content {
  width:75%;
  margin:0 auto;
  padding:1rem;
  column-count:2;
}

.txt-content p, .we-offer-content-block p {
  font-size:0.707rem;
  line-height:2;
  color:rgba(214,214,214,1);
}

.we-offer {
  display:grid;
  grid-template-columns:4rem 1fr;
  background-color:rgba(19,3,38,1);
}

.we-offer-content {
  grid-column:2;
  display:grid;
  grid-template-columns:repeat(12,1fr) 2fr;
  grid-gap:1rem;
}

.we-offer-content-block {
  grid-column:span 3;
  margin-bottom:10vh;
}

.last-goodbye {
  background-image:url("../img/Layer 28.png");
  background-size:cover;
}

.jumberton-content-title {
  grid-row:2;
  grid-column:7/span 5;
}

.jumberton-content-title h3 {
  font-size:3rem;
  margin:0;
}

.jumberton-content-title p {
  font-size:0.707rem;
  color:rgba(214,214,214,1);
}

small {
  font-size:1rem;
  text-transform:uppercase;
}

footer {
  background-color:rgba(19,3,38,1);
  font-size:0.707rem;
  line-height:2;
  padding:10vh 0;
}

footer h4 {
  font-size:1rem;
  text-transform:uppercase;
  color:#0d4363;
}

.footer-content {
  display:grid;
  grid-template-columns:repeat(12,1fr) 2fr;
  justify-items:center;
  grid-column-gap:1rem;
  width:85%;
  margin:0 auto;
}

.footer-content-item {
  grid-column:span 4;
}

ul {
  list-style:none;
  margin:0;
  padding:0;
}


@media screen and (max-width: 768px) {
  .slider-card, .we-offer-content-block {
    grid-column:span 6;
    
  }

}

@media screen and (max-width: 425px) {


  .jumberton-txt {
    grid-column: span 12;
    align-self:start;
  }

  .jumberton-date, .circle-title {
    display:none;
  }

  .header-title h2 {
    font-size:4rem;
    text-align:left;
    line-height:1;
  }

  .header-title {
    width:75%;
    margin:0 auto;
  }

  .slider-card, .we-offer-content-block {
    grid-column:span 12;
  }

  .footer-content {
    justify-items: stretch;
  }

  .footer-content-item:first-child {
    grid-column:span 13;
  }

  .footer-content-item:nth-child(2) {
    grid-column:span 6;
  }

  .footer-content-item:nth-child(3) {
    grid-column:span 7;
  }

  .we-offer-content-block {
    margin-bottom:1rem;
  }

  .txt-content {
    column-count:1;
  }

  footer {
    padding:1rem 0;
  }

}

@media screen and (max-width: 375px) {
  .header-title h2 {
    font-size:3rem;
  }

  .jumberton-content-title h3 {
    font-size:2rem;
  }
}