@charset "UTF-8";
/* CSS Document */

.blue-section {padding:30px 0px; margin-top: 0px; margin-bottom: 0px; background-color:#4389CE;color:#fff;}
.red-section {padding:30px 0px; margin-top: 0px; margin-bottom: 0px; background-color:#AF3F3A;color:#fff;}
.row {margin-top:0px; margin-bottom:0px;}
.banner-wrap {width:100%;background-size:cover;}


@media (min-width: 300px) {
.banner-wrap {width:100%;margin-left: -20px;padding:200px 0px 0px 0px;background-size:cover;}
.banner-tease h1 {color:#fff;font-size:24px;font-weight:normal;}
.headTease {font-size:1.2em;}
.main-title {font-size:2.0em;}
.pad-top {padding-top:20%;}
.banner-pic {
	display:block;
	min-height:235px;
	background-position: -240px !important;
}
}

@media (max-width:370px) {
	.banner-pic {
		display:block;
		min-height:235px;
		background-position: -340px !important;
	}

	.centertext p {
		text-align: center;
		font-size:18px !important;
	}
	.text-background-brown {
		background-color:rgba(186,124,52,.50);
		padding:3px 3px 3px 0px;
	}
	.wwell {
		background-position:-270px !important;
	}
	.boy {
		background-position:-100px !important;
	}
	.community {
		background-position:-300px !important;
	} 
}
@media (min-width: 480px) {
.banner-wrap {width:100%;margin-left: -20px;padding:170px 0px 0px 0px;background-size:cover;}
.banner-tease h1 {color:#fff;font-size:24px;font-weight:normal;}
.headTease {font-size:1.2em;}
.pad-top {padding-top:20%;}
.centertext p {
	text-align: center;
	font-size:18px !important;

}

.banner-pic {
	display:block;
	background-position: -200px !important;
	
}
.wwell {
	background-position:0px !important;
}
.boy {
	background-position:0px !important;
}
.community {
	background-position:0px !important;
}

}
@media (min-width: 600px) {
.banner-wrap {width:100%;margin-left: -20px;padding:270px 0px 0px 0px;background-size:cover;}
.banner-tease h1 {color:#fff;font-size:32px;font-weight:normal;}
.headTease {font-size:1.4em;}
.pad-top {padding-top:20%;}
.main-title {font-size:2.6em;}
.centertext p {
	text-align: center;
	font-size:1.9rem !important;

}
.banner-pic {
	display:block;
	min-height:435px;
	background-position: -200px !important;

}


}


@media (min-width: 768px) {
.banner-wrap {width:100%;margin: 0px 0px;padding:240px 0px 0px 0px;background-size:cover;}
.banner-tease h1 {color:#fff;font-size:46px;font-weight:normal;}
.headTease {font-size:1.6em;}
.pad-top {padding-top:18%;}
.main-title {font-size:2.6em;}
.banner-pic {
	display:block;
	background-position: left !important;
}
.text-background-brown {
background:none;
padding:3px 3px 3px 0px;
}
}

@media (min-width: 992px) {
.banner-wrap {padding-top:200px !important;}
.headTease {font-size:2em;}	
.main-title {font-size:2.6em;}
}

@media (min-width: 1200px) {
	.banner-wrap {padding-top:80px !important;}
	.headTease {font-size:2em;}
	.main-title {font-size:2.6em;}
	.banner-pic {
	display:block;
	background-position: left !important;
}
}



.box {
    
    padding: 10px 25px;
    text-align: right;
    display: block;
    margin: 60px 0px;
}


.box-icon {
    background-color: #57a544;
    border-radius: 50%;
    display: table;
    height: 100px;
    margin: 0 auto;
    width: 100px;
    margin-top: -61px;

}

.box-icon-red {
    background-color: #AF3F3A;

}

.box-icon-blue {
    background-color: #4389CE;

}



.icon-red {
    background-color: #AF3F3A;

}

.box-icon span {
    color:#fff !important;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.info h4 {
    font-size: 26px;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.info > p {
    color: #717171;
    font-size: 16px;
    padding-top: 10px;
    text-align: justify;
}

.girl-text {color:#fff;font-size:1.65em !important;text-align:center;}
.girl-text-title {color:#fff;font-size:2.1em !important;text-align:center;}
.red-section {background-color:#b44c4b !important;}
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#a0d8ef+0,ddf1f9+65,feffff+100 */

.centertext p {
	text-align: center;
	font-size:1.8vw;

}




section {
  float:left;
  width:100%;
  background:#fff;
  position:relative;

}



/* the important styles */

.arrow-wrap {
  position:absolute;
  z-index:1020;
  left:50%;
  top:-6em;
  margin-left:-5em;
  background:#2D6484;
  width:10em;
  height:10em;
  padding:4em 2em;
  border-radius:50%;
  font-size:0.5em;
  display:block;
  box-shadow:0px 0px 5px 0px #333;

}
@media (min-width:768px) {
		.arrow-wrap {border-radius:50% !important;}
		
		}	

.arrow {
  float:left;
  position:relative;
  width: 0px;
height: 0px;
border-style: solid;
border-width: 3em 3em 0 3em;
border-color: #ffffff transparent transparent transparent;
  -webkit-transform:rotate(360deg);
  transform:rotate(360deg) 
}

.arrow:after {
  content:'';
  position:absolute;
  top:-3.2em;
  left:-3em;
  width: 0px;
height: 0px;
border-style: solid;
border-width: 3em 3em 0 3em;
border-color: #2D6484 transparent transparent transparent;
  -webkit-transform:rotate(360deg);
  transform:rotate(360deg)
}


.hint {
  position:absolute;
  top:0.9em;
  width:100%;
  left:0;
  font-size:2em;
  font-style:italic;
  text-align:center;
  color:#fff;
  opacity:0;
}


.arrow-wrap:hover .hint {
  opacity:1;
}


  @-webkit-keyframes arrows {
    0% { top:0; }
    10% { top:12%; }
    20% { top:0; }
    30% { top:12%; }
    40% { top:-12%; }
    50% { top:12%; }
    60% { top:0; }
    70% { top:12%; }
    80% { top:-12%; }
    90% { top:12%; }
    100% { top:0; }
  }
  
  .arrow-wrap .arrow {
    -webkit-animation: arrows 2.8s 0.4s;
    -webkit-animation-delay: 3s;
  }