/*
Theme Name: St. Paul the Apostle Grand Rapids - Landing
Version: 1.0
Author: Diocesan
*/

:root{
    --clr-primary: #00205c;
    --clr-secondary: #006937;
}

body, html {
    padding: 0;
    margin: 0;
    font-family: "Open Sans", sans-serif;
}


a{
    text-decoration: none;
}

.landingTopInfo {
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px 10px;
    text-align: center;
    margin: 0 auto;
    z-index: 2;
    max-width: 400px;
    width: 20vw;
    -webkit-animation-delay: 0.5s;
    -moz-animation-delay: 0.5s;
    animation-delay: 0.5s;
}

.landingTopInfo p {
    line-height: 16px;
}

@-webkit-keyframes fadeIn {
   from { opacity:0; transform:translateY(0); } to { opacity:1; transform:translateY(-20px); }
 }
@-moz-keyframes fadeIn {
   from { opacity:0; transform:translateY(0); } to { opacity:1; transform:translateY(-20px); }
 }
@keyframes fadeIn {
   from { opacity:0; transform:translateY(0); } to { opacity:1; transform:translateY(-20px); }
 }
 
.fadein{
  opacity:0;
  opacity: 1 \9; /*just in case ie*/
  -webkit-animation:fadeIn ease-in 1;
  -moz-animation:fadeIn ease-in 1;
  animation:fadeIn ease-in 1;

  -webkit-animation-fill-mode:forwards;
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:.6s;
  -moz-animation-duration:.6s;
  animation-duration:.6s;
}

.landingTopInfo img.landingLogo{
  content:url("/wp-content/themes/spagr-landing/images/churchSchoolLogoWhite.png");
  width:80%;
  margin:0 auto;
}

.landingBottomInfo {
    position: absolute;
    bottom: 25px;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center;
    color: #fff;
    -webkit-animation-delay: 1.5s;
    -moz-animation-delay: 1.5s;
    animation-delay: 1.5s;
    z-index: 2;
}

.landingBottomInfo a{
  color: #fff;
}

.landingWrapper{
  display: flex;
  height: 100vh;
}

.admin-bar .landingWrapper{
  height:calc(100vh - 32px);
}

.landingHalf{
  width:50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  background-size:cover;
  background-size: auto 110%;
  background-position: center;
  background-repeat: no-repeat;
  transition: background-size .3s ease-in-out;
}

.landingHalf:after{
  content:"";
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  opacity:.7;
  z-index: 0;
}

.landingHalf.landingLeft:hover, .landingHalf.landingRight:hover{
  background-size: auto 100%;
}

.landingHalf.landingLeft .landingInfo:hover .landingHalfMessage, .landingHalf.landingRight .landingInfo:hover .landingHalfMessage{
  margin:15px 0;
}

.landingLeft:after{
  background-color: #00205C;
}

.landingRight:after{
  background-color: #0F5953;
}

.landingInfo {
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    color:#ffffff;
    text-align: center;
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    animation-delay: 1s;
}

.landingHalfTitle, .landingHalfSubtitle{
  font-size:46px;
  line-height: 58px;
  font-weight: 800;
  transition: transform .9s ease;
}

.landingHalfSubtitle{
  font-weight: 400;
}

.landingHalfMessage{
  font-size:27px;
  line-height: 37px;
  margin:10px 0;
  transition: margin .3s ease-in-out;
}

.landingHalfButton a{
  display: block;
  width: max-content;
  font-size: 18px;
  line-height: 18px;
  font-weight: 700;
  color:#ffffff;
  text-transform: uppercase;
  padding:10px 40px;
  background:transparent;
  border:2px solid #ffffff;
  border-radius:13px;
  margin:10px 0;
}

.landingLeft .landingHalfButton a:hover{
  background:var(--clr-secondary);
  border-color: var(--clr-secondary);
}

.landingRight .landingHalfButton a:hover{
  background:var(--clr-primary);
  border-color: var(--clr-primary);
}

.landingHalfImage {
    width: 100%;
    height: 100%;
    position: absolute;
    background-size:cover;
    background-size: auto 110%;
    background-position: center;
    background-repeat: no-repeat;
    transition: background-size .3s ease-in-out;
}

.landingHalf.landingLeft .landingInfo:hover ~ .landingHalfImage, .landingHalf.landingRight .landingInfo:hover ~ .landingHalfImage{
  background-size: auto 100%;
}

@media screen and (max-width:1024px){
  .landingTopInfo{
    top:20px;
    width: 50vw;
  }
  
  .landingTopInfo img{
    width:125px;
  }
}

@media screen and (max-width:768px){
  .landingInfoWrapper {
    height: 140px;
  }
  
  .landingWrapper {
    height: calc(100vh - 140px);
    flex-direction: column;
    position: relative;
  }
  
  .admin-bar .landingWrapper {
      height: calc(100vh - 172px);
  }
  
  .landingTopInfo{
    position: relative;
    top:0px;
    width: 100%;
    max-width: 100%;
  }
  
  .landingTopInfo img.landingLogo{
    width: 180px;
    content:url("/wp-content/themes/spagr-landing/images/churchSchoolLogoColor.png");
  }
  
  .landingHalfImage{
    background-size:cover;
  }
  
  .landingTopInfo p {
    display: none;
    }
    
    .landingBottomInfo {
        position: relative;
        bottom: 0;
        color: #000;
        -webkit-animation-delay: .5s;
        -moz-animation-delay: .5s;
        animation-delay: .5s;
    }
    
    .landingBottomInfo a{
      color: #000;
      line-height: 12px;
    }
    
    .landingHalfTitle, .landingHalfSubtitle{
      font-size:20px;
      line-height: 24px;
    }
    
    .landingHalfMessage{
      font-size:16px;
      line-height:16px;
    }
    
    .landingHalfButton a{
      font-size: 14px;
    }
    
    .landingHalf{
      width:100%;
      height:60%;
    }
    
    .fadeIn{
      opacity: 1;
      -webkit-animation:none;
      -moz-animation:none;
      animation:none;
    }
    
    .landingHalf.landingLeft {
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 70%, 0 100%);
        clip-path: polygon(0% 0, 100% 0%, 100% 70%, 0 100%);
        margin-bottom:-32px;
        position: absolute;
        top: 0;
    }
    
    .landingHalf.landingRight {
        -webkit-clip-path: polygon(0 30%, 100% 0, 100% 100%, 0 100%);
        clip-path: polygon(0% 30%, 100% 0%, 100% 100%, 0 100%);
        margin-top: -32px;
        position: absolute;
        bottom: 0;
    }
    
    .landingHalf.landingLeft .landingInfo ~ .landingHalfImage, .landingHalf.landingRight .landingInfo ~ .landingHalfImage{
      background-size: cover;
    }
}

@media screen and (max-width:400px){
  .landingTopInfo{
    padding:5px 25px;
  }
  .landingTopInfo img{
    width:150px;
  }
}