*,
*::before,
*::after{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html{
  height:100%;
  width:100%;
  font-size:62.5%;
}

body{
  height:100%;
  font-size:1.4rem;
  font-family: Arial, Helvetica, sans-serif;
}

.wrapper{
  max-width: 1180px;
  width:100%;
  margin:0 auto;
  padding:0 1rem;
  height:100%;
}

nav{
 
  
  height:84px;
}

nav > .wrapper{
  display:flex;
  align-items: center;
}



.hero{
  height:70vh;
  min-height:580px;
  background: url("../img/randy.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  position: relative;
}

.loginButton{
  border-radius: 10px;
  background-color: rgb(190, 4, 9);
  width: 170px;
  height: 54px;
  color:#fff;
  display:flex;
  margin-left:auto;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
}

.loginButton a{
  text-decoration: none;
  color:inherit;
}

/* change colour of hover on the login button */


.loginButton:hover
{text-decoration: none;
background-color: rgb(149, 1, 1);}

.form{
  display: block;
  animation: 1.2s 0.5s ease-in forwards formAppear;
  background: rgb(255, 255, 255);
  opacity:0;
  color:#000;
  position: absolute;
  top:50%;
  transform: translateY(-50%);
  width:320px;
  border-radius: 15px;
}

.register{
  background:rgb(190, 4, 9);
  font-size:2.4rem;
  text-align: center;
  color:#fff;
  padding:2rem;
  border-top-right-radius: 15px;
  border-top-left-radius: 15px;
  text-transform: uppercase;
  font-weight: 800;
}

.meet{
  text-align: center;
  font-size:2.1rem;
  margin:0.1rem;
}


#hubp-form label{
  text-align: center;
  font-size:1.5rem;
	margin:0.1rem;
  color:rgb(0,0,0);
}
#hubp-form label-note{
  text-align: center;
  font-size:1.3rem;
 color:rgb(0, 0, 0);
}
.hubp-terms{
  margin:1rem auto;
  text-align: center;
}

.banner{
  background:#141313;
  width:100%;
  height:6rem;
  padding:3rem;

}

.banner > .wrapper{
  align-items: center;
  justify-content: center;
  display:flex;
}

.banner h1{
  font-size:4.2rem;
  color:#fff;
  z-index:1;
}

.banner span{
  color:rgba(191,27,243,100);
}

.members{
  padding:2rem 0;
}

.members h2{
  text-align: center;
  margin-bottom:2rem;
  font-size:2.8rem;
}

.banner2{
  height:20vh;
  background:#000;
}

.banner2 span{
  font-weight:800;
}

.banner2 h1{
  font-size:5rem;
}

.description{
  padding:5rem 1rem;
  text-align: center;
}

.description h2{
  font-size:3.2rem;
  margin-bottom:2rem;
}

.description h3{
  font-size:3rem;
  color:rgb(190, 4, 9);
  margin-bottom:2rem;
  font-weight:800;
}

.description p{
  font-size:2.2rem;
  line-height:35px;
  width:70%;
  margin:0 auto;
}

.description .joinButton{
  margin:5rem auto;
}


.joinButton{
  border-radius: 10px;
  background-color: rgb(190, 4, 9);
  width: 210px;
  height: 64px;
  text-align: center;
  margin-left: auto;
  color:#fff;
  display:flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
}
/* change colour of hover on the join free buttons */

.joinButton:hover
{text-decoration: none;
background-color: rgb(149, 1, 1);}

.joinButton a{
  text-decoration: none;
  color:inherit;
}





.offer{
  height:35vh;
  display:flex;
}



.item{
  width:25%;
  height:100%;
  background: rgb(165, 12, 16);
  display:flex;
  flex-direction: column;
  padding-top:5rem;
  align-items: center;
}

.item:nth-of-type(even){
  background-color: rgb(190, 4, 9);
}

.item img{
  height:120px;
}

.item p{
  padding:1rem;
  text-align: center;
  font-size:2.2rem;
  color:#fff;
}

.mobileFriendly h1{
  font-size:10rem;
  font-weight: 800;
	margin-top: 1rem;
}

.mobileFriendly h3{
  font-size:5rem;
}

.mobileFriendly span{
  color: rgb(190, 4, 9);
}

.mobileFriendly{
  padding:1rem 1rem 15rem 1rem;
  background: url("../img/mobile-hand.jpg");
  background-size: 340px;
  background-repeat: no-repeat;
  background-position: 105% 50px;

}

#txt1{
  display: inline-block;
}

#txt2{
  color: rgb(190, 4, 9);
  display: inline-block;
  margin-left:2rem;
}

#txt4,#txt5,#txt6{
  margin-top:1rem;
  display: inline-block;
}

#txt4{
  position: relative;
  top:-40px;
  margin-right:30px;
}

#txt6{
  color: rgb(190, 4, 9);
  margin-left:1rem;
}

.mobileFriendly p{
  width:60%;
  margin:3rem 0;
  font-size:2.6rem;
}

.banner3{
  height:15rem;
}

.content {
	height: auto;
	margin: 0 auto;
}
.content:after {
	content: "";
	clear: both;
	display: block;
}

.content .panel {
  position: relative;
  display:block;
  width: 29.06%;
  height: 300px;
  margin: 0 3.4% 0 0;
  padding: 0;
  float: left;
}

.content .panel1 {
	background: url("../img/bbw-cross.jpg") no-repeat center top;
	background-size: cover;
}
.content .panel2 {
	background: url("../img/bdsm-cross.jpg") no-repeat center top;
	background-size: cover;
}
.content .panel3 {
	background: url("../img/3some-cross.jpg") no-repeat center top;
	background-size: cover;
}

.content .panel .bottom {
	background: rgba(255,255,255,.6);
	width: 100%;
	position: absolute;
	bottom: 0;
	margin: 0;
	padding: 23px 0;
	-webkit-transition: all 200ms ease-in-out 100ms;
	-moz-transition: all 200ms ease-in-out 100ms;
	-ms-transition: all 200ms ease-in-out 100ms;
	-o-transition: all 200ms ease-in-out 100ms;
	transition: all 200ms ease-in-out 100ms;
}
.content .panel .bottom img {
	display: block;
	width: 263px;
	height: auto;
	margin: 0 auto;
	padding: 0;
}

.content .panel:hover .bottom {
	padding: 40px 0;
	-webkit-transition: all 200ms ease-in-out 100ms;
	-moz-transition: all 200ms ease-in-out 100ms;
	-ms-transition: all 200ms ease-in-out 100ms;
	-o-transition: all 200ms ease-in-out 100ms;
	transition: all 200ms ease-in-out 100ms;
}

.other h2{
  font-size:3.8rem;
  margin:2rem;
  text-align: center;
}

.other h3{
  font-size:2.2rem;
  margin:5rem auto;
  text-align: center;
  width:70%;

}

.other{
  padding-bottom:50px;
}

.payment img{
  height:42px;
  margin-right: 20px;
}

.payment{
  background:rgb(190, 4, 9);
  padding:2rem;
  text-align: center;
}

footer{
  background:#2e2e2e;
  padding:2rem;
}
.wrappermobile a {
	color: #fff;}
.wrappermobile a:hover {
	color: #ff0000;	}
.wrappermobile {
		background-color: :black;
	}

footer > .wrappermobile{
  display:flex;
  align-items: center;
}

footer ul{
  list-style: none;
}

footer li{
  display:inline-block;
  color:#fff;
  font-size:1.8rem;
  margin-right: 1rem;
}

footer li::after{
  content:"";
  height:25px;
  width:1px;
  display:inline-block;
  background:#fff;
  position: relative;
  top:7px;
  left:8px;
}

footer img{
  height:32px;
  margin-left:auto;
  cursor: pointer;
}

.hideDesktop{
  display: none;
}

.hideDesktopFlex{
  display: none;
}


@media(max-width:768px){
	.hero{
	background:url("../img/hero-bgmobile1.jpg");
	background-position: center center;
	background-size: cover;
	}

  .hubp-form-wrapper{
    margin:0 auto;
  }

  .hubp-submit-container .hubp-submit{
    width:80%;
  }

  .mobileFriendly{
    display: none;
  }

  .content .panel{
    max-width: 500px;
    width:90%;
    margin:2rem auto;
    height:300px;
    float:none;
  }
/* 
  .hero > .wrapper{
    display: flex;
    justify-content: center;
    align-items: center;

  } */



  .banner h1{
    font-size: 2.4rem;
  }

  .banner2{
    height:15vh;
  }

  .banner2 h1{
    font-size: 2.1rem;
  }

  .item{
    height:40vh;
  }

  .item img{
    height:84px;
  }

  .item p{
    font-size: 1.4rem;
  }

  .description h2{
    font-size:2.8rem;
  }

  .description h3{
    font-size: 2.4rem;
  }

  .description p{
    width:100%;
    line-height:initial;
    font-size: 1.6rem;
  }

  .hideMobile{
    display: none;
  }


  .nav{
    width:100%;
  }

  nav a{
    margin: 0 auto;
  }

  .banner3 h1{
    font-size:2rem;
  }

  .banner h1{
    font-size: 2.8rem;
  }

  .joinButton{
    height:64px;
    width:120px;
  }

  footer ul li{
    font-size: 1.8rem;
  }

  .hideDesktop{
    display: block;
  }

  .hideDesktopFlex{
    display: flex;
  }

  .loginButton{
    margin:2rem auto;
  }

  .form{
    left:50%;
    transform: translate(-50%,-42%);
  }
}

@media(max-width:480px){




  .banner h1{
    font-size: 1.8rem;
  }

  .item img{
    height:54px;
  }


  .item{
    height:30vh;
    padding-top:1rem;
  }

  .item p{
    font-size: 1.2rem;
  }

  .joinButton{
    height:54px;
    width:86px;
  }

  .banner3 h1{
    font-size:1.6rem;
  }


  .banner h1{
    font-size: 1.8rem;
  }

  footer ul li{
    font-size: 1.1rem;
    text-align: center;
  }

  footer ul{
    display: block;
    width:100%;
    margin:0 auto;
  }

  footer .wrapperfooter{
    flex-direction: column;
  }

  footer img{
    margin: 20px auto;
  }

  
}

@keyframes formAppear{
  to{
    opacity:0.85;
  }
};