@import url('https://fonts.googleapis.com/css?family=Ubuntu:400,700');

*, *:before, *:after {
    box-sizing: border-box;
}
body * {
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
body {
	font-family: 'Open Sans', sans-serif;
	background: #fff;
}
#bg {
  position: fixed; 
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%;
  z-index: -1;
}
#bg img {
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  min-width: 50%;
  min-height: 50%;
}
p {
	font-size: 13px;
	line-height: 18px;
}
.container {
	width:100%;
	max-width:960px;
	margin: 0 auto;
}
h1, h2, h3, h4, h5, h6 {
	font-family: 'Roboto Slab', serif;
	color: #f40e63;
}
h1 {
    font-size: 35px;
    margin-bottom: 10px;
    text-align: center;
    margin-top: 50px;
    width: 100%;
    font-family: 'Ubuntu', sans-serif;
    text-transform: uppercase;
    color: #fff;
}
b{
    font-weight: bold;
}
h2 {
	font-size: 30px;
	margin-bottom: 10px;
    text-align: center;
    font-family: 'Ubuntu', sans-serif;
    color: #fd0071;
    text-transform: uppercase;
}
span.tagline {
	font-family: 'Yellowtail', cursive;
	color: #fff;
	font-size: 24px;
	margin-bottom: 15px;
	display: block;
}
header {
	height: 586px;
}
header .panel {
    text-align: center;
    margin:0 auto;
    width: 96%;
    max-width: 960px;
    background-color: #227da5;
    background-color: rgba(0, 123, 162, 0.7);
    padding: 25px 12px;
    position: relative;
    top: 136px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    z-index: 10;
}
.header-container {
    overflow: hidden;
    padding: 0 5%;
    width: 100%;
    margin-top:5px;
    margin: auto;
}
.logo {
    float: left;
    width:50%;
    max-width: 400px;
}
.logo img {
    width: 100%;
    margin-top: 10px;
}
.panel-content {
	color: #fff;
	text-align: left;
	padding-right: 320px;
}
.panel-content h1 {
    color: #fff;
    margin-bottom: 0;
	font-size: 40px;
	font-weight: 400;
	line-height: 1.2;
	text-shadow: 0 2px 2px rgba(8, 90, 115, 0.75);
}
.panel-content p {
    margin:10px 0px;
    line-height: 24px;
    font-size:16px;
}
.btn-register,
.hubp-submit-container .hubp-submit {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    -webkit-background-clip: padding;
    -moz-background-clip: padding;
    background-clip: padding-box;
    background-color: #fd0071;
    -webkit-box-shadow: 0 1px 1px #b70245;
    -moz-box-shadow: 0 1px 1px #b70245;
    box-shadow: 0 1px 1px #b70245;
	background-size: 100%;
    background: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #a6004e), color-stop(100%, #d70060));
    background: -webkit-linear-gradient(bottom, #a6004e 0%, #d70060 100%);
    background: -moz-linear-gradient(bottom, #a6004e 0%, #d70060 100%);
    background: -o-linear-gradient(bottom, #a6004e 0%, #d70060 100%);
    background: -ms-linear-gradient(bottom, #a6004e 0%, #d70060 100%);
    background: linear-gradient(bottom, #a6004e 0%, #d70060 100%);
    white-space: nowrap;
    height: 40px;
    line-height: 40px;
    display: inline-block;
    font-family: 'Ubuntu', sans-serif;
    color: #fff;
    text-decoration: none;
    padding: 0 20px;
    margin-top: 10px;
}
.btn-register:hover,
.hubp-submit-container .hubp-submit:hover {
    background-size: 100%;
    background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #a6004e), color-stop(100%, #d70060));
    background: -webkit-linear-gradient(top, #a6004e 0%, #d70060 100%);
    background: -moz-linear-gradient(top, #a6004e 0%, #d70060 100%);
    background: -o-linear-gradient(top, #a6004e 0%, #d70060 100%);
    background: -ms-linear-gradient(top, #a6004e 0%, #d70060 100%);
    background: linear-gradient(top, #a6004e 0%, #d70060 100%);
}
header .form {
    float: left;
    height: auto;
    width: 40%;
    border-radius: 5px;
    padding: 20px;
    text-align: left;
    position: absolute;
    left: 20%;
    top: 135px;    
}
.banner-content {
    width: 50%;
    margin-bottom: 3%;
}
.hubp-form-container {
	background: transparent;
}
.hubp-form-container {
    width: 373px;
    margin: 0 auto;
    margin-bottom: 10px;
    padding: 1px;
}
.hubp-group {
    padding-bottom: 10px;
}
#hubp-form label {
	font-size:20px;
    color: #fff;
    margin-bottom: 10px;
}

#hub_photo_block_shrt ul li {
	display: inline-block;
	width: 131px;
    height: 171px;
}
#hub_photo_block_shrt ul li a {
	display: block;
	text-decoration: none;

}
#hub_photo_block_shrt ul li span {
	display: block;
	font-family: 'Roboto Slab', serif;
	color: #f40e63;
	font-size: 13px;
	line-height: 18px;
}
#hub_photo_block_shrt ul li a img {
	width:100%;
	border-radius: 68px;
	border: 2px solid #d8dee0;
}
.hubp-btn {
    width:40px;
    height:50px;
    padding: 0px;
}
.hubp-btn-male {
    background: url(../img/male.png) no-repeat top center;
}
.hubp-btn-female {
    background: url(../img/female.png) no-repeat top center;
}
.hubp-btn-male.hubp-active {
    background: url(../img/male-selected.png) no-repeat top center;
}
.hubp-btn-female.hubp-active {
    background: url(../img/female-selected.png) no-repeat top center;
}
.hubp-steps-ind div {
    background-color: #fff;
    color: #fff;
    text-align: center;
    font-size: 0px;
    width: 12px;
    height: 12px;
    border-radius: 12px;
    display: inline-block;
    margin: 0 2px;
    cursor: pointer;
}
.hubp-steps-ind .hubp-ind-active {
    background-color: #fd0071 !important;
    color: #fd0071;
}
#hubp-form input {
	width:230px;
}
.hubp-terms {
	font-size: 12px;
	line-height: 14px;
    color: #fff;
    text-align: center;
}
.hubp-terms a {
	text-decoration: none;
	color:#fd0071;
}
.hubp-terms a:hover {
    text-decoration: none;
    color:#ff86bc;
}
footer a {
    text-decoration: none;
    color:#fd0071;
}
footer a:hover {
    text-decoration: none;
    color:#ff86bc;
}
section {
	padding: 30px 0 30px 0;
	text-align: center;
	display: block;
	overflow: hidden;
    background:rgba(255, 255, 255, 0.94);
}
.photoblock{
    background: none;
}
.about{
    background: white;

}

.testimonials {
	background: white;
}
.testimonials p {
	font-size: 13px;
	line-height: 18px;
	margin:10px 0px;
}
span.name {
	width: 140px;
    margin: 0 auto;
    padding-top: 15px;
    padding-bottom: 15px;
    display: block;
    font-style: italic;
    border-top: 2px solid #fff;
    font-size: 14px;
}
.slide-controls span {
	display: inline-block;
}
.slide-controls span a {
	width:50px;
	height: 50px;
	display: block;
}
#photo-prev a,
#test-prev a {
	background: url(../img/left-arrow.png) no-repeat top center;
}
#photo-next a,
#test-next a {
	background: url(../img/right-arrow.png) no-repeat top center;
}
.box {
	float: left;
	padding:20px;
}
.box-33 {
	width:33.33%;
}
.box-50 {
	width:50%;
}
.box-icon img {
	width:100%;
	max-width: 300px;
	margin:0 auto;
}
.box-content h3 {
	color: #222;
}
.box-content p {
	font-size: 13px;
    line-height: 18px;
    margin: 10px 0px;
}

footer {
	padding:10px 0px;
	background: #222;
	color: #fff;
	font-size:13px;
}
@media (max-width: 980px) {
    .banner-content {
    width:100%;
    margin-bottom: 3%;
    }   
}
@media (max-width: 639px){
        #bg img{
        width: 115%;
    }
    .logo {
        float: none;
        margin:10px 5%;
        width:90%;
    }
    h1 {
    font-size: 35px;
    margin-bottom: 10px;
    text-align: center;
    margin-top: 10px;
    width: 100%;
    font-family: 'Ubuntu', sans-serif;
    text-transform: uppercase;
    color: #fff;
}
}

@media (max-width: 500px) {
	.panel-content {
	    padding-right: 0px;
	}
	header {
		height: auto;
		padding-bottom: 20px;
	}
	header .panel {
		top:0px;
	}
	header .form {
	    float: none;
	    position: relative;
	    left: 0px;
	    top: 10px;
	    margin: 0 auto;
	}

}