/* CSS Document */

/* TOC 
 * RESET STYLES
 * FONT FACE (IF USED)
 * HTML
 * BODY
 * HEADER
 * NAVIGATION
 * PAGE
 * FOOTER
 * FORMS
 * PLUGINS
 * PRINT STYLES
 * MEDIA QUERIES
---------------------------------------------------------------------------*/

/* RESET STYLES
---------------------------------------------------------------------------*/
html { overflow-y: scroll; }
body {
	margin: 0;
	font-size: 18px;
	min-height:100%;
	font-family: 'proxima_novaregular';
	color: #000;
	overflow:hidden;
	background:#fff;
} 
body:before{ display:none;} 
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
	display: block;
	clear:both;
}
button, input, select, textarea {
	font-family: 'proxima_novaregular';
	color: #000;
} 
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after { /* Safari Reset as Safari does not recognise quotes property */
	content: '';
	content: none;
} 

p {
	margin:0;
	padding:10px 0;
	line-height:24px;
}
a {
	margin:0;
	padding:0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
	text-decoration:none;
	color:#00bbc8;
	font-family: 'Neutraface 2 Text';
}
a:hover, a:active {
	outline: 0;
}
a img {
	border:0 none;
}

ul, li { list-style:none; margin:0;}

.clickable, label, input[type=button], input[type=submit], button {
	cursor: pointer; /* hand cursor on clickable elements */
}
button, input, select, textarea {
	margin: 0; /* Webkit browsers add a 2px margin outside the chrome of form elements */
}
button { /* make buttons play nice in IE */
	width: auto;
	overflow: visible;
}

*{ margin:0; padding:0; box-sizing:border-box;}
img{ border:none; max-width:100%;}
h1, h2, h3, h4, h5, h6 {
	margin:0;
	padding:0;
	font-family: 'Neutraface 2 Text';
	font-weight:normal;
	color:#000;
	padding:10px 0;
	line-height:normal;
}
h1 { font-size:50px; }
h1 span{ color:#00bbc8;}
h2 { font-size:50px; }
h3 { font-size:25px; }
h4 { font-size:22px; padding:0; color:#00bbc8; font-family: 'Neutraface 2 Text Demi';}
h5 { font-size:20px; }
h6 { font-size:18px; }

.wrapper{ margin:0 auto; width:95%;}
.wrapper-half{ margin:0 auto; width:980px; max-width:95%;}
.center{ text-align:center;}

.btn{ background:#00bbc8; color:#fff; border-radius:1000px; font-family: 'Neutraface 2 Text'; padding:10px 40px; display:inline-block;}
.btn-arrow{ color:#00bbc8; transition:all .5s ease; font-family: 'Neutraface 2 Text'; padding:10px 20px; position:relative; display:inline-block;}
.btn-arrow:before{ transition:all .5s ease; background:#ccecf3; border-radius:1000px; content:''; width:42px; height:100%; position:absolute; top:0; left:0;}
.btn-arrow:hover:before{ width:100%;}
.btn-arrow img, .btn-arrow-dark img{ vertical-align:middle;}
.btn-arrow-dark{ color:#fff; transition:all .5s ease; font-family: 'Neutraface 2 Text'; padding:10px 20px; position:relative; display:inline-block;}
.btn-arrow-dark:before{ transition:all .5s ease; background:#00bbc8; border-radius:1000px; content:''; width:42px; height:100%; position:absolute; top:0; left:0;}
.btn-arrow-dark:hover:before{ width:100%;}
.btn:hover{ color:#fff;}

.btn-arrow  span, .btn-arrow-dark span{ position:relative; z-index:1;}

.container{ float:left; width:100%; padding:60px 0;}

.header-bc{ float:left; width:100%; position:absolute; top:0; left:0; z-index:200;}
.header{ float:left; width:100%; margin:20px 0; position:relative;}
.logo{ float:left; position:relative; z-index:1;}
.head-donate{ float:right; position:relative; z-index:1; top:11px;}
.head-donate .phn{ background:url(../images/phone-white.png) no-repeat 15px center #00bbc8; padding-right:20px; padding-left:40px;}
.head-menu{ float:left; width:100%; position: absolute; top:20px; left:0; text-align:center;}
.head-menu ul{ margin:0; padding:0;}
.head-menu ul li{ display:inline-block; margin:0 15px; padding:0; font-family: 'Neutraface 2 Text Demi';}
.head-menu ul li a{ color:#fff;}
.head-menu ul li a:hover{ color:#00bbc8;}

.down-arrow{ position:absolute; bottom:20px; margin-left:-23px; cursor:pointer; left:50%;}

.banner{ float:left; width:100%; height:700px; position:relative;}
.banner:before{ position:absolute; top:0; left:0; background:rgba(0,0,0,.8); content:''; width:100%; height:100%;}
.banner-text{ float:left; width:100%; height:700px; position:relative;}
.banner-text > div > div{ display:table-cell; vertical-align:middle; height:100%;}
.banner-text > div{ display:table; width:50%; height:100%;}
.banner-text > div > div h1{  color:#fff;}

.mission-section{ float:left; width:100%; min-height:500px; background:#ccecf3; display:table; overflow:hidden;}
.left-mission{ display:table-cell; width:50%; padding:60px 2.5%;}
.right-mission{ display:table-cell; width:50%; position:relative;}

#scroll{ float:left; width:100%;}
strong{ font-family: 'proxima_novabold';}
.big{ font-size:22px;}

.blog-section ul{ margin:0 0; float:left; width:100%; padding:20px 0;}
.blog-section ul li{ transition:all .5s ease; display:inline-block; width:23.5%; margin:0.5%; vertical-align:top; background:#f7f7f7; padding:1%; font-size: 15px; line-height:22px; min-height:130px; text-align:center; font-weight: bold;}

.blog-section ul li:hover{ background:#00bbc8; color:#fff;}

.blog-section ul li div{ display:table-cell; vertical-align:middle; width:1000px;height:130px;}

.double-col.blog-section ul li{ background:#fff; width:23.5%;}

.system.contact-secion-bc { background:#00bbc8;}
.system.contact-secion-bc h2, .system.contact-secion-bc p, .system.contact-secion-bc h3{ color:#fff;}

.blog-section ul li:hover{ background:#00CAC8;}

.blog-section ul li .blog-image{ float:left; width:100%; height:300px;}
.blog-section ul li .blog-text{ float:left; width:100%; padding:20px;}
.blog-section ul li .blog-text-clock{ color:#656565; font-family: 'Neutraface 2 Text';}
.blog-section ul li .blog-text-main{}
.blog-section ul li .blog-text-main h3{}
.blog-section ul li .blog-text-main p{}
.blog-section ul li .blog-text-btn a{ overflow:hidden; display:inline-block;}
.blog-section ul li .blog-text-btn a img{ vertical-align:middle;}
.blog-section ul li .blog-text-btn a span{ margin-left:-90px; overflow:hidden; transition:all .5s ease;}
.blog-section ul li .blog-text-btn a:hover span{ margin-left:0;}

.blog-section ul .slick-list{ padding:60px 0;}



.right-mission:before{ border-bottom: 25rem solid rgba(0,0,0,0);
border-left: 5rem solid #ccecf3;
border-top: 25rem solid rgba(0,0,0,0);
content: "";
height: 0;
left: 0;
position: absolute;
top: 0;
width: 0;}
.blog-section-b{ float:left; width:100%; position:relative;}
.blog-section{ position:relative; z-index:2;}

.about-im{ float:left; width:100%; position:relative;}
.yellow1, .yellow2, .yellow3, .yellow4{ position:absolute; z-index:1; top:-120px; background:#00bbc8; left:-60px; width:170px; height:170px; border-radius:1000px;}
.yellow2{ right:-60px; left:auto; width:200px; height:200px;}
.yellow3{ right:-40px; bottom:100px; top:auto; left:auto; width:180px; height:180px;}
.yellow4{ left:20px; top:150px;}

.pink1, .pink2, .pink3, .pink4{ position:absolute; top:10px; background:#b03820; left:70px; width:60px; height:60px; border-radius:1000px;}
.pink2{ right:260px; left:auto; width:30px; height:30px; top:-170px;}

.pink4{ right:260px; left:auto; width:30px; height:30px; top:100px;}
.pink3{ right:auto; left:200px; width:200px; height:200px; top:auto; bottom:-100px;}


.about-area-left{ width:500px; height:500px; float:left; border-radius:1000px;}
.about-area-right{ float:right; width:66%;}

body{ max-width:2000px; margin:0 auto; position:relative;}


.banner-text p{ color:#fff;}

.footer-bc{ float:left; width:100%; background:#000; padding:60px 0; position:relative;}
.footer{ float:left; width:100%;}
.footer .social{ float:right;}
.footer .social li{ display:inline-block; margin-left:15px;}
.footer .copyright{ float:left; color:#fff; margin-top:6px;}

.contact-secion-bc{ float:left; width:100%; background:#f7f7f7; position:relative;}
.contact-section{ margin-top:50px; float:left; width:100%;}
.contact-section .contact-section-left{ float:left; width:30%; padding:20px; background:#fff;}
.contact-section .contact-section-left > div{ margin:25px 0;}
.contact-section .contact-section-left p{ padding:5px;}
.contact-section .contact-section-left .location{ background:url(../images/location.png) no-repeat left 10px; padding:0 0 0 30px;}
.contact-section .contact-section-left .phone{ background:url(../images/phone.png) no-repeat left 10px; padding:0 0 0 30px;}
.contact-section .contact-section-left .email{ background:url(../images/mail.png) no-repeat left 10px; padding:0 0 0 30px;}


.contact-section .contact-section-right{ float:right; width:67%;}
.wd100{ float:left; width:100%; margin-bottom:25px;}

input, textarea{ background:#fff; color:#000; font-size:16px; height:50px; padding:0 10px; border:none; width:100%;}
input[type="submit"]{ width:auto; background:#00bbc8;}
textarea{ height:195px; padding:10px;}

.header-bc.sticky-header{ position:fixed; background:#fff;  box-shadow:0 0 5px 0px rgba(0,0,0,0.2);}
.header-bc.sticky-header .header{ margin:10px 0;}
.header-bc.sticky-header .logo img{ height:64px;}
.header-bc.sticky-header .head-menu ul li a{ color:#000;}
.header-bc.sticky-header .head-menu ul li a:hover{ color:#00bbc8;}

.menu-mobile{ float:right; display:none;}

.wpcf7-response-output{ clear:both;}

.client-logo-area{ text-align:center;}
.client-logo-area ul{ float:left; width:100%; margin-top:20px;}
.client-logo-area ul li{ margin:20px; display:inline-block;}
.client-logo-area ul li img{ vertical-align:top; height:50px;}

.testi-slide{ float:left; width:100%;}
.testi-slide .testi-slide-area{}
.testi-slide .testi-slide-area p{ font-size: 22px; line-height: 32px;}
.testi-slide .testi-slide-area .client-name{ color:#00bbc8; font-family:'proxima_novabold'; font-size:15px; line-height:18px;}

.testi-slide.slick-slider{ margin-bottom:0;}

.wd50{ float:left; width:48%;}
.fr{ float:right;}

.patton-im-parallex{ float:left; width:100%; height:500px; position:relative; z-index:1; }

#services.blog-section-b{ padding-bottom:50px;}

@media only screen and (min-width: 1000px) {
	.patton-im-parallex{ background-attachment: fixed !important;}
}

@media only screen and (max-width: 1600px) {
	.about-area-right{width:59%;}
}
@media only screen and (max-width: 1400px) {
		.about-area-right{width:55%;}
}
@media only screen and (max-width: 1300px) {
		.about-area-right{width:50%;}
}
@media only screen and (max-width: 1100px) {
		.about-area-right{width:45%;}
}

@media only screen and (max-width: 1000px) {
	
	.patton-im-parallex{ height:300px;}
	
	.left-mission, .right-mission{ width:100%; float:left;}
	.right-mission{ height:400px;}
	.right-mission:before{ display:none;}
	.blog-section ul li{ width:100%; margin:5px 0; float:left; min-height:100px;}
	.blog-section ul li div{ height:100px;}
	.double-col.blog-section ul li{ width:100%;}
	
	.blog-section ul li:hover{ margin:20px 0;}
	.blog-section ul{ padding:0;}
	.container{ padding:30px 0;}
	
	.yellow1, .yellow2, .yellow3, .yellow4{ display:none;}
	.pink1, .pink2, .pink3, .pink4{ display:none;}
	
	.about-area, .mission-section{ text-align:center;}
	.about-area-left{ display:inline-block; float:none;}
	.about-area-right{width:100%;}
	.banner-text > div{ width:100%;}
	
	.footer { text-align:center;}
	.footer .social{ width:100%;}
	.footer .copyright{ width:100%; margin-top:10px;}
	
	.contact-section .contact-section-right{ width:100%; margin-top:20px;}
	.contact-section .contact-section-left{ width:100%;}
	
	.about-area-right{ margin-top:30px;}
}

@media only screen and (min-width: 780px) {
	.desk-none{ display:none;}
}

@media only screen and (max-width: 780px) {
	.head-menu, .head-donate{ display:none;}
	.banner-text > div{ width:100%;}
	
	h1 { font-size:30px; }
	h2 { font-size:30px; }
	h3 { font-size:20px; }
	h4 { font-size:18px; }
	h5 { font-size:16px; }
	h6 { font-size:15px; }
	
	.banner, .banner-text{ height:550px;}
	p{ line-height:normal;}
	
	.menu-mobile{ display:block; margin-top:8px; cursor:pointer;}
	.header-bc{ background:#fff;}
	.header-bc.sticky-header{ position:absolute;}
	.header, .header-bc.sticky-header .header{ margin:10px 0 0;}
	.logo img, .header-bc.sticky-header .logo img{ height:50px;}
	.logo { margin-bottom:10px;}
	
	.head-menu{ width:105%; float:left; position:static; background:#00bbc8; margin:0 0 0 -2.5%;}
	.head-menu ul li{ width:100%; padding:0; border-bottom:1px solid #07b2bf; margin:0;}
	.header-bc.sticky-header .head-menu ul li a, .head-menu ul li a{ color:#fff; display:block;  padding:10px 0;}
	.header-bc.sticky-header .head-menu ul li a:hover, .head-menu ul li a:hover{ background:#07b2bf; color:#fff;}
	
	
}

@media only screen and (max-width: 600px) {
	.about-area-left{ width:250px; height:250px;}
	
	.client-logo-area ul li img{ height:30px;}
	.client-logo-area ul li{ margin: 10px;}
}