@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');






.navbar-brand {
    color: #fff;
    cursor: pointer;
	position: relative;
	right: -20px;
  z-index: -100;
}

.navbar-brand img{
  size: relative;
  position: relative;
  
}


header{
	position: sticky;
	top:0; left: 0; right:0;
	background: #000;
	box-shadow: 0 5px 10px rgba(0,0,0,.1);
	padding: 20px 7%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	z-index: 1000;
}

header .navbar ul li{
	position: relative;
	float: left;
	
	
}

header .navbar ul li a{
	display: inline-block;
  font-size: 20px;
	padding:20px;
	color: #fff;
  
	
	
}

header .navbar ul li span{
  font-weight: 100;
}





#menu-bar{
	display: none;
}

header label{
	font-size: 20px;
	color: #fff;
	cursor: pointer;
	display: none;
	
}


@media(max-width:991px){
	header{
		padding:20px;
	}
	
	header label{
	display: initial;
}

header .navbar{
	position: absolute;
	top:100%; left:0; right:0;
	background: #000;
	border-top: 1px solid rgba(0,0,0,.1);
	display:none;
}

header .navbar ul li{
	width:100%;
}



#menu-bar:checked ~ .navbar{
	display: initial;
}


}

body{
       
	background-color: #000;
    
}



*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}


  
.intro{
        background: url('images/background.jpg') no-repeat center top;
        background-size: cover;
        width: 100%;
        height: 100%;
        position: relative;
    }
    
  .intro .overlay {
        position: absolute;
        min-height: 100%;
        min-width: 100%;
        left: 0;
        top: 0;
        background: rgba(0, 0, 0, 0.6);
    }	   
    
    .description {
        left: 50%;
        position: absolute;
        top: 45%;
        transform: translate(-50%, -55%);
        text-align: center;
    }
    .description h1 {
        color: #fff;
        font-size: 4rem;
        font-weight: bolder;
        padding-bottom: 10px;
        
    }
    
    .description h1 span{
      font-weight: 100;
    }
    .description p {
        color: #ffffff;
        font-size: 1.3rem;
        line-height: 1.5rem;
        font-weight: 100;
        
    }
    .description button {
        border:1px solid #6ab446;
        background:#6ab446;
        border-radius: 0;
        color:#fff;
    }
    .description button:hover {
        border:1px solid #fff;
        background:#fff;
        color:#000;
    }      

    .split{
      width: 100%;
      height: 15px;
      background-color: black;
      position: relative;
      text-align:center;
  }

    .split p{
      color: green;
      padding-bottom: 10px;
      font-size: relative;
      font-weight: 300;
    }

    





    .lowerthird{
      width: 100%;
      height: relative;
      position: relative;
      background-color: rgb(1, 1, 1);
      background-position: relative;
      
      
  }

  

  
  .lowerthird .box{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
     }
     
     .lowerthird .box .dream{
       display: flex;
       flex-direction: column;
       width: 32.5%;
       
       
     }
     
     .lowerthird .box .dream img{
       width: 100%;
       height: 100%;
       padding-bottom: 15px;
       border-radius: 5px;
       display: absolute;
     }

     .lowerthird .box .dream h1{
      color: rgb(255, 255, 255);
      display: flex;
      align-items: center;
      justify-content: center;
      vertical-align: center;
      padding-bottom: 2rem;
      
     } 

     .lowerthird .box .dream a{
      width: 100%;
      height: 100%;
      padding-bottom: 15px;
      border-radius: 5px;
      display: absolute;
     }

     .lowerthird .box .dream span{
      font-weight: 100;
     }

      .family{
      padding-left: 15px;
     }

      .sports{
        padding-right: 7.5px;
      }

      .wedding{
        padding-left: 7.5px;
        padding-right: 7.5px;
      }

      .sports2{
        padding-right: 15px;

      }

      

           

     .bottompage{
      width: 100%;
      height: relative;
      position: relative;
      background-color: black;
      background-position: relative;
      text-align: center;
      padding-top: 20px;
      padding-bottom: 50px;
     
     }

     .bottompage h1 {
      color: white;
      font-size: relative;
      font-weight: bolder;
      padding-bottom: 5px;
      
      
  }
  
  .bottompage h1 span{
    font-weight: 200;
    
  }

  .bottompage img{
    box-align: center;
  }
     

     @media only screen and (max-width: 769px){
      .lowerthird .box{
     flex-direction: column;
    }
  
  .lowerthird .box .dream{
    width: 100%;
  }
  
  
  
  
  
  }
  
  @media only screen and (max-width: 643px){
  .intro .description{
    width: 100%;
  }
  .intro .description h1{
    font-size: 2em;
  
  }
  .intro .description p{
      font-size: 1em;
    
    }