/*
* HTML5 Boilerplate
*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*/
/* ==========================================================================
overwrite
========================================================================== */
#wrapper img {
border-radius:0;
box-shadow:none;
}
/* ==========================================================================
fonts
========================================================================== */
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
/*FONT*/
@font-face {
font-family:'Gotham-Light';
src: url('webfonts/Gotham-Light.eot');
src: url('webfonts/Gotham-Light.eot?#iefix') format('embedded-opentype'), url('webfonts/Gotham-Light.woff') format('woff'), url('webfonts/Gotham-Light.ttf') format('truetype'), url('webfonts/Gotham-Light.svg#Gotham-Light') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family:'Gotham-Bold';
src: url('webfonts/Gotham-Bold.eot');
src: url('webfonts/Gotham-Bold.eot?#iefix') format('embedded-opentype'), url('webfonts/Gotham-Bold.woff') format('woff'), url('webfonts/Gotham-Bold.ttf') format('truetype'), url('webfonts/Gotham-Bold.svg#Gotham-Bold') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family:'Gotham-Book';
src: url('webfonts/Gotham-Book.eot');
src: url('webfonts/Gotham-Book.eot?#iefix') format('embedded-opentype'), url('webfonts/Gotham-Book.woff') format('woff'), url('webfonts/Gotham-Book.ttf') format('truetype'), url('webfonts/Gotham-Book.svg#Gotham-Book') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family:'Gotham-Medium';
src: url('webfonts/gotham-medium.eot');
src: url('webfonts/gotham-medium.eot?#iefix') format('embedded-opentype'), url('webfonts/gotham-medium.woff') format('woff'), url('webfonts/gotham-medium.ttf') format('truetype'), url('webfonts/gotham-medium.svg#gotham-medium') format('svg');
font-weight: normal;
font-style: normal;
}
/*/FONT*/
/* ==========================================================================
Base styles: opinionated defaults
========================================================================== */
html, button, input, select, textarea {
color: #323d45;
-webkit-appearance:none;
}
body {
font-size: 1em;
line-height: 1.4;
font-family:'Lato', sans-serif;
color:#323d45;
margin:0;
background:#f3f7f4;
min-width:1200px;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
}
/*
* Remove text-shadow in selection highlight: h5bp.com/i
* These selection rule sets have to be separate.
* Customize the background color to match your design.
*/
::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}
::selection {
background: #b3d4fc;
text-shadow: none;
}
/*
* A better looking default horizontal rule
*/
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
/*
* Remove the gap between images and the bottom of their containers: h5bp.com/i/440
*/
img {
vertical-align: middle;
}
a {
color:#25BDA5;
text-decoration:none;
outline:none;
}
body a:focus {
outline:none;
}
p {
font-weight:300;
}
/*
* Remove default fieldset styles.
*/
fieldset {
border: 0;
margin: 0;
padding: 0;
}
/*
* Allow only vertical resizing of textareas.
*/
textarea {
resize: vertical;
}
/* ==========================================================================
Chrome Frame prompt
========================================================================== */
.chromeframe {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
/* ==========================================================================
sprite image
========================================================================== */
.icon, .social-link a, #content div.checker span, .icon-or, .flexslider .flex-direction-nav a, .step-title span, #colorbox div.checker span, #content div.radio span, #colorbox div.radio span, #fancybox-wrap div.checker span {
background:url(images/sprite.png) no-repeat -999em -999em;
}
/* ==========================================================================
header
========================================================================== */
header#branding {
background:#323d45;
height:60px;
}
header#branding .inner {
width:1063px;
margin:0 auto;
}
#logo {
float:left;
margin-top:14px;
}
#access {
float:left;
margin-left:240px;
}
#access ul {
display:block;
margin:0;
padding:0
}
#access ul li {
float:left;
margin:20px 14px;
}
#access ul li a, .popup-login ul li a {
color:#fff;
font-family:'Gotham-Medium';
font-size:11px;
text-transform:uppercase;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#access ul li a:hover, #access ul li.current-menu-item a, .popup-login ul li a.active {
color:#38e5ca;
}
.top-right {
float:right;
position:relative;
}
/*popup login*/
.popup-wraptop {
width:241px;
padding:10px 17px 2px 19px;
background:#323d45;
float:left;
position:absolute;
top:60px;
right:0;
z-index:9;
color:#fff;
display:none;
}
.popup-wraptop ul {
padding:0;
list-style:none;
margin:0;
}
.popup-wraptop ul li {
margin-bottom:17px;
width:100%;
float:left;
}
.popup-wraptop ul li span {
font-size:11px;
}
.popup-wraptop ul li input {
font-size:14px;
color:#555e65;
margin:0;
}
.popup-wraptop .btn {
color:#fff;
border:none;
}
#wrapper .popup-wraptop .btn.green {
min-width:120px;
}
#wrapper .popup-wraptop .red {
min-width:172px;
}
#branding .btn:hover {
color:#fff;
}
.popup-wraptop ul li.forget-pw {
margin-top:-7px;
}
.popup-wraptop ul li.forget-pw a {
color:#fff;
text-decoration:underline;
font-size:12px;
font-family:'Lato', sans-serif;
text-transform:none;
}
.popup-wraptop input[type=text], .popup-wraptop input[type=password] {
width:100%;
}
.popup-forgot {
display:none;
}
.popup-forgot h4 {
font-size:14px;
margin:0 0 10px;
}
/* ==========================================================================
home page
========================================================================== */
/*home slide*/
#home-slide {
width:100%;
text-align:center;
position:relative;
background:#f3f7f4;
}
#home-slide ul {
display:block;
list-style:none;
width:100%
}
#home-slide img {
display:block;
margin:0 auto;
max-width:100%;
}
.slide-content {
position:absolute;
top:80px;
left:50%;
width:414px;
padding:20px;
float:left;
margin-left:-227px;
}
#home-slide .slide-content img {
margin-bottom:71px;
}
.slide-content p {
font-size:18px;
color:#282828;
font-weight:300;
line-height:30px;
}
.slide-content .btn {
margin-top:90px;
}
.home .green-block a.btn-black {
font-size:13px;
}
.home .btn.flipbook {
margin-top:20px;
}
/*green wrap*/
.home .green-wrap, .green-wrap {
width:100%;
padding:76px 0;
background:#3ae5ca url(images/green-bg.jpg) no-repeat 50% 0;
}
.home .green-wrap {
height:368px;
}
.green-block {
width:800px;
margin:0 auto;
padding-left:10px;
}
.green-wrap h2 {
color:#fff;
}
.green-wrap h3 {
font-size:30px;
font-weight:300;
line-height:45px;
}
.green-block p {
font-size:18px;
line-height:30px;
}
.green-block .row {
margin:40px 0;
float:left;
width:800px;
}
.green-block .one_half p {
font-size:20px;
}
.green-block .one_half {
width:300px;
float:left;
margin:0 30px;
clear:none !important
}
.green-block a.btn-black {
margin:10px auto 33px;
min-width:162px;
}
.star img {
margin-top:-48px;
}
/*column*/
.entry-content .col-1 {
width:440px;
padding:53px 61px 34px 40px;
display:inline-block;
text-align:center;
vertical-align:top;
}
.entry-content .col-1.second {
padding-right:0;
}
.home-image {
display:block;
background:url(images/circle-line-bg.png) no-repeat 50% 75px;
}
/*black wrap*/
.home .black-wrap, .black-wrap {
width:100%;
padding:46px 0;
background:#323d45 url(images/black-bg.jpg) no-repeat 50% 0;
}
.give .black-wrap {
height:304px;
}
.black-block {
width:800px;
margin:0 auto;
padding-left:10px;
position:relative;
}
.black-wrap h2 {
color:#fff;
font-size:46px;
}
.black-wrap h3 {
font-size:30px;
font-weight:300;
line-height:45px;
}
.black-block p {
font-size:18px;
line-height:30px;
color:#fff;
}
.black-block .row {
margin:40px 0;
float:left;
width:800px;
}
.black-block .one_half p {
font-size:14px;
}
.black-block .one_half {
width:300px;
float:left;
margin:0 30px;
clear:none !important
}
.black-block a.btn-black {
margin:10px auto 33px;
min-width:162px;
}
.star img {
margin-top:-48px;
}
.give .list-wrap {
background:#f3f7f4;
}
/*column*/
.entry-content .col-1 {
width:440px;
padding:53px 61px 34px 40px;
display:inline-block;
text-align:center;
vertical-align:top;
}
.entry-content .col-1.second {
padding-right:0;
}
.home-image {
display:block;
background:url(images/circle-line-bg.png) no-repeat 50% 75px;
}
/* ==========================================================================
main content
========================================================================== */
#wrapper {
font-family:'Lato', sans-serif;
background:#f3f7f4;
overflow:hidden;
}
.inner, #main, .object-wrap {
width:1063px;
margin:0 auto;
position:relative;
}
.object-wrap {
width: 100%;
}
#main {
padding:0;
}
.home #main {
}
#main.about, #main.host {
width:100%;
text-align:center;
padding:0;
}
.contact #main {
padding-top:74px;
}
h1.page-title, .title-detail h1 {
font-size:56px;
text-align:center;
font-weight:300;
color:#38e5ca;
margin:0 0 44px;
text-transform:none;
}
#primary {
width:100%;
margin:0;
}
#wrapper article {
border:none;
margin-bottom:40px;
}
.home #wrapper article {
margin-bottom:23px;
}
.home h1 {
font-size:46px;
font-weight:300;
color:#fff;
margin-bottom:16px;
}
#main .entry-content h2, .green-wrap h2, .title-detail h2, .black-wrap h2 {
font-size:36px;
font-weight:300;
line-height:46px;
}
.home .entry-content h2 {
margin:33px 0 34px;
}
.home .entry-content p, .join .entry-content p {
margin-bottom:41px;
font-size:18px;
line-height:30px;
font-weight:300;
}
/*contact*/
.contact {
background:#f3f7f4;
}
.contact-detail {
text-align:center;
width:790px;
margin:0 auto 45px
}
.contact-detail h3 {
margin-bottom:36px;
font-size:16px;
}
.form-wrapper h3, .bk-consultant h3 {
font-size:16px;
font-weight:700;
margin-bottom:35px;
line-height:20px;
letter-spacing: 1px;
}
.contact-detail p {
font-size:18px;
font-weight:300;
line-height:30px;
}
.object-img {
position:absolute;
top:0;
left:-5px;
}
.about .object-img {
left:97px;
}
/*about page*/
#wrapper .about .green-wrap {
margin-bottom:32px;
}
.about .inner, .host .inner {
width:890px;
}
.about .green-block {
width:775px;
}
.about .title-detail, .host .title-detail, .join .title-detail {
padding:83px 0 18px;
}
.about .title-detail {
height:282px;
}
.title-detail p {
font-size:18px;
line-height:30px;
}
.title-detail .btn-black {
margin-top:50px;
}
.about .green-wrap, .host .green-wrap, .join .green-wrap {
height:auto;
padding:93px 0;
}
.title-detail h2 {
/* width:785px;
*/
margin:0 auto 30px;
line-height:50px;
}
#main.about .entry-content h2 {
margin:32px 0 36px;
}
/*.title-detail{padding-left:100px;}*/
.about .col-1 {
width:400px;
padding:50px 20px;
}
.about .col-full, .host .col-full {
width:846px;
padding:50px 0;
}
.about p, .host p {
font-size:18px;
}
.about .margin-b {
margin-bottom:100px;
}
.abt-center {
margin:110px 0 120px;
}
.about.shop .entry-content {
padding-top:140px;
}
/*host page*/
.host .col-full {
width:auto;
}
.host .title-detail h2 {
width:auto;
font-size:46px;
line-height:50px;
}
.host .title-detail .btn-black {
min-width:142px;
}
.host .title-detail {
height:450px;
}
.host .title-detail .inner {
width:610px;
}
.host .object-img {
left:-150px;
}
.table-wrap {
width:847px;
padding:50px 0 100px;
margin:0 auto;
}
.entry-content .table-wrap h4 {
font-size:14px;
font-weight:300;
margin:35px 0 30px;
}
.entry-content .table-wrap h4 b {
font-weight:700;
}
.table-wrap p {
font-size:13px;
}
.entry-content .table p {
font-size:14px;
font-weight:700;
margin-top:25px;
}
.table {
background:#e7eee8;
overflow:hidden;
margin-bottom:2px;
}
.entry-content .table table {
border:none;
}
.entry-content .green table {
color:#fff;
}
.entry-content .table td {
font-size:20px;
padding:0 20px;
line-height:30px;
font-weight:300;
border:none;
}
.col-mid {
width:610px;
margin:0 auto;
}
.entry-content .table-detail p {
margin-bottom:0;
}
.entry-content .download-pdf h2 {
margin:140px 0;
}
.download-pdf .btn-green {
margin-bottom:20px;
}
.table-detail {
padding:40px 0 0;
}
/*join page*/
#main.join {
width:100%;
text-align:center;
}
.join .title-detail {
background:#e73e86;
}
#wrapper .join article.title-detail {
margin-bottom:0;
padding-bottom:52px;
}
.join .title-detail h1 {
color:#fff;
}
.join .title-detail .inner {
width:800px;
}
.join .object-img {
left:0px;
}
.title-detail .btn-wrap, .green-wrap .btn-wrap {
float:none;
padding:70px 0 0;
width:auto;
text-align:center;
}
.title-detail .btn-wrap a, .green-wrap .btn-wrap a {
margin:0 10px;
}
.btn-wrap p {
display:inline;
}
.entry-content .gray-box h3, .entry-content .gray-box h4, .flexslider li h3, .flexslider li h4 {
font-size:20px;
margin:0;
font-weight:400;
line-height:24px;
}
.entry-content .gray-box h4 {
font-size:16px;
margin:0 0 20px;
}
.gray-box {
width:248px;
background:#e7eee8;
margin:0 auto 53px;
padding:30px 0 0;
overflow:hidden;
}
.price-box {
display:block;
background:url(images/white-circle-bg.png) no-repeat 50% 0;
height:113px;
margin-bottom:28px;
}
.price-box span {
display:inline-block;
margin-top:28px;
font-size:30px;
font-weight:400;
}
.join .entry-content .gray-box p, .popup-wrap .inner .gray-box p {
font-size:14px;
margin:0 30px 24px;
line-height:24px;
}
.small-circle {
display:block;
background:url(images/black-circle-line.png) no-repeat 50% 55px;
margin-bottom:30px;
}
.small-circle.large {
display:block;
background:url(images/black-circle-line-large.png) no-repeat 50% 75px;
margin-bottom:30px;
}
#wrapper .join .green-wrap {
margin-bottom:100px;
}
.join .green-block {
width:690px;
}
/*col list*/
.slider .inner {
width:960px;
}
.entry-content .flexslider li {
list-style:none;
margin:0;
padding:0;
width:320px;
}
.flexslider li .content {
padding:50px 50px 0;
}
.flexslider li h4 {
font-size:16px;
font-weight:300;
margin-bottom:20px;
}
.flexslider li b, .flexslider li strong, .join .entry-content .flexslider li p, .list li strong, .list li p {
display:block;
font-size:14px;
line-height:24px;
}
.flexslider li b, .flexslider li strong, .list li strong {
font-weight:400;
}
.flexslider li, .list li p {
font-weight:300;
}
.flexslider .flex-direction-nav a {
width:18px;
height:18px;
}
#wrapper .flex-direction-nav .flex-next {
background-position:-18px -72px;
right:-80px
}
#wrapper .flex-direction-nav .flex-prev {
background-position:0 -72px;
left:-80px
}
.slides p {
text-align: left;
}
/*give*/
.give .list-wrap .inner {
width:980px;
}
.give .object-img {
left: 0px;
}
.give .title-detail {
padding-left:0;
background:#66d3d0;
height:387px;
}
.give .title-detail h1 {
color:#fff;
}
#wrapper .give article.title-detail {
margin-bottom:0;
padding-bottom:40px;
}
.give .title-detail .inner {
width:790px;
}
.give .green-wrap h2, .host .green-wrap h2, .join .green-wrap h2 {
font-size:46px;
}
.give .green-wrap {
margin-top:90px;
}
.give .green-block a.btn-black {
min-width:96px;
}
.give .green-block {
width:840px;
position:relative;
}
.green-block .popup-img, .black-block .popup-img {
position:absolute;
top:-150px;
left:-10px;
}
.list {
text-align:center;
}
.list li {
list-style:none;
display:inline-block;
width:350px;
}
.list li.first {
clear:left;
float:none;
display:block;
width:460px;
margin:auto;
}
.list li .content {
padding:50px;
}
.give .col-full {
margin:0 auto;
width:630px;
}
.give .col-full h2 {
margin-bottom:36px;
}
.give .col-full .home-image {
margin:10px 0 45px;
}
.list-wrap a.btn-green {
margin-top:30px
}
/*faq page*/
.faq article {
overflow:hidden;
}
.faq .col-full {
padding-bottom:0;
width:auto;
}
.faq .entry-content h2 {
margin-bottom:40px;
}
.faq .title-detail {
padding:75px 0 40px 100px;
}
.faq .title-detail .inner {
width:960px;
}
.faq .title-detail h2 {
width:auto;
}
.faq .green-wrap {
background:#38e5ca;
padding:0;
height:65px;
}
.sub-nav {
width:1070px;
margin:15px auto;
}
.sub-nav ul {
float:left;
margin:10px 0 0 120px;
}
.sub-nav li {
list-style:none;
float:left;
margin:0 15px;
}
.sub-nav li a {
font-family:'Gotham-Medium';
font-size:13px;
text-transform:uppercase;
color:#323d45;
}
.sub-nav li a:hover, .sub-nav li.current-menu-item a {
color:#fff;
}
.faq .entry-content h4 {
margin-bottom:40px;
font-size:16px;
font-weight:700;
}
.faq .one_half {
text-align:left;
width:410px;
margin:0px 12px 40px;
}
.faq .one_half p {
font-size:14px;
line-height:24px;
}
.faq .one_half a {
color:#38e5ca;
}
.faq .one_half strong {
display:block;
}
/*form wrapper*/
.form-wrapper {
overflow:hidden;
}
.form-wrapper .inner {
width:544px;
margin:0 auto;
padding-left:10px;
}
.form-wrapper ul {
list-style:none;
padding:0;
margin:0 0 50px;
}
.form-wrapper ul li {
margin-bottom:14px;
float:left;
}
.form-wrapper ul li.margin40 {
margin-bottom:40px;
}
.row .col-1 {
display:inline-block;
width:255px;
margin:0 5px;
vertical-align:top;
}
.row .col-1 label, .interests span span {
width:215px;
display:inline-block;
font-size:14px;
min-height:0;
}
.row .col-1 li, .interests span {
min-height:38px;
margin-bottom:10px;
display:block;
}
.row .col-1 textarea {
width:254px;
height:184px;
resize:none;
margin:0;
}
.row .content {
margin:0 5px;
}
.form-wrapper textarea.full {
width:526px;
height:106px;
margin:0;
}
.form-wrapper .row {
margin:50px 0;
float:left;
}
.form-wrapper .btn {
margin-left:16px;
}
span.form-element {
float:left;
display:block;
}
span.small {
width:115px;
}
/*signup*/
.popup {
display:none;
}
#inline_content {
width:833px;
margin:auto;
border:6px solid #323d45;
background:#f3f7f4;
text-align:center;
font-family:'Lato', sans-serif;
}
.form-popup {
width:833px;
display:block;
}
.step-title {
height:169px;
background:#38e5ca;
text-align:center;
}
.step-title ul {
display:block;
margin:0;
float:left;
margin:40px 0 0 150px;
}
.step-title ul li {
display:inline-block;
width:170px;
color:#fff;
font-size:12px;
-moz-opacity: 0.40;
opacity: 0.40;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=40);
}
.step-title ul li.active {
-moz-opacity: 1;
opacity: 1;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=100);
}
.step-title ul li a {
color:#fff;
}
.step-title ul li span {
width:69px;
height:47px;
display:block;
background-position:-216px 0;
font-size:20px;
font-weight:700;
margin:0 auto 10px;
padding-top:23px;
color:#fff;
}
.step-title ul li.active span {
background-position:-144px 0;
color:#38e5ca
}
#inline_content h1, .form-popup h1 {
font-size:46px;
font-weight:400;
margin:65px 0;
}
.form-popup h1 {
font-weight:300;
}
#inline_content h4 {
font-size:16px;
font-weight:700;
}
#inline_content .form-wrapper .inner {
width:655px;
}
.form-wrapper .inner ul {
width:550px;
margin:30px auto 50px;
display:block;
clear:both;
overflow:hidden;
line-height:18px;
}
.form-wrapper .inner .paywrap ul {
width:570px;
padding-left:20px;
}
.form-wrapper .inner ul li {
width:100%;
text-align:left;
}
.form-wrapper .inner ul li p {
text-align:center;
margin-top:20px;
}
.form-wrapper .inner ul li .one_half p {
text-align:left;
margin:10px 0 10px 28px;
font-size:14px;
font-weight:400;
}
.popup-wrap .inner h4 {
font-size:16px;
margin-bottom:45px;
}
.popup-wrap .inner p {
margin-bottom:20px;
font-weight:300;
font-size:16px;
line-height:24px;
}
.popup-wrap .one_half {
width:250px;
padding:0 20px 0 0;
display:inline-block;
}
li div.radio {
float:left;
margin:2px 10px 0 0
}
.one_half label {
width:88%;
display:inline-block;
vertical-align:top;
text-align:left;
}
.one_half label strong {
display:block;
font-weight:400;
}
.popup-wrap li label {
font-size:14px;
font-weight:300;
}
.popup-wrap li a {
font-weight:400;
color:#38e5ca
}
.popup-wrap li.margin-t {
margin-top:30px;
}
.popup-wrap .btn-wrap {
width:627px;
margin:0 auto;
float:none;
}
.form-popup h1 {
font-weight:300;
}
#inline_content input {
border-color:#ccc;
}
/*step2*/
/*#step2,#step3{display:none;}*/
.form-wrapper .gray-box {
margin:30px auto 50px;
}
.form-wrapper .gray-box h3, .form-wrapper .gray-box h4 {
font-size:20px;
margin:0;
font-weight:400;
line-height:24px;
}
#inline_content .form-wrapper .gray-box h4 {
font-size:16px;
font-weight:300;
margin-bottom:20px;
}
.form-wrapper .price-box span {
margin-top:38px;
}
.check-list {
width:544px;
margin:0 auto 50px;
}
.form-wrapper .inner ul.check {
width:250px;
display:inline-block;
padding:0;
margin:0;
vertical-align:top;
}
.form-wrapper .inner ul.check li {
background:url(images/check-icon.png) no-repeat 0 5px;
padding-left:30px;
margin-right:20px;
width:auto;
font-weight:300;
font-size:14px;
}
.form-list {
padding-top:20px;
}
.form-list ul {
background:url(images/ul-line.png) no-repeat 7px 100%;
margin-bottom:20px;
}
.form-wrapper .inner .form-list ul {
margin:0 auto 20px;
}
.form-wrapper .inner .form-list ul li p {
text-align:left;
margin:0 0 0 7px;
font-weight:400;
font-size:12px;
}
/*step3*/
#step3 .step-title ul li.active span {
color:#323d45
}
.visa-card {
width:528px;
text-align:left;
margin:40px auto
}
.popup-wrap {
position:relative;
}
.popup-wrap .paywrap li label {
display:block;
margin:0 0 8px 10px;
font-size:12px;
}
.popup-wrap .paywrap li label span {
color:#f85352;
}
#register_message_new {
color:#38e5ca;
position:absolute;
left:22%;
font-size:24px;
bottom:120px;
}
#inline_content .btn {
min-width:126px;
}
/*form*/
input[type=text], input[type=email], input[type=password], select, .form-wrapper textarea {
border:1px solid #e0e2e3;
height:42px;
padding:10px;
box-sizing:border-box;
-moz-box-sizing:border-box;
font-family:'Lato', sans-serif;
outline:none;
font-size:12px;
color:#929496;
margin:0 7px;
float:left;
border-radius:0;
}
input.full {
width:525px;
}
.form-wrapper input[type=submit], .form-wrapper button, .form-wrapper input[type=reset] {
border:none;
}
.size1 {
width:100px;
}
.size2 {
width:129px;
}
.size3 {
width:185px;
}
.size4 {
width:214px;
}
.size5 {
width:256px;
}
.size6 {
width:384px;
}
.size7 {
width:346px
}
.size8 {
width:166px;
}
.size-1 {
width:272px;
}
.size-2 {
width:214px;
}
.size-2 input {
width:200px;
}
.size-3 {
width:116px;
position:relative;
}
.size-3 input {
width:76px;
}
.size-4 {
width:112px;
}
.size-5 {
width:106px;
}
/*button*/
.btn-wrap {
padding:54px 0;
text-align:right;
width:524px;
float:left;
}
.btn, .btn-black, .btn-green, #wrapper .btn, .btn-white, #colorbox .btn, #fancybox-wrap .btn {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
display:inline-block;
height:35px;
padding:0 15px;
line-height:35px;
text-transform:uppercase;
font-size:12px;
min-width:96px;
text-align:center;
color:#fff;
font-weight:700;
outline:none;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.green-wrap .btn-black, .green-wrap .btn-white, .title-detail .btn-black, .title-detail .btn-green, #wrapper .slide-content .btn {
font-size:14px;
}
#colorbox .btn, #fancybox-wrap .btn {
min-width:126px;
box-sizing:border-box;
-moz-box-sizing:border-box;
}
a.btn:hover, a.btn-green:hover, a.btn-black:hover {
color:#fff;
}
.red, #wrapper .red, #colorbox .red, #fancybox-wrap .red {
background:#f85352;
}
.red:hover, #wrapper .red:hover, #colorbox .red:hover, #fancybox-wrap .red:hover {
background:#da4444;
}
.green, .btn-green, #wrapper .green, #colorbox .green, #fancybox-wrap .green {
background:#38e5ca;
color:#fff;
}
.green:hover, .btn-green:hover, #wrapper .green:hover, #colorbox .green:hover, #fancybox-wrap .green:hover {
background:#2dccb3;
}
#wrapper .table-wrap .green:hover {
background:#38e5ca;
}
.btn-green {
min-width:102px;
}
.btn-white {
background:#f3f7f4;
color:#4eccbc
}
.green-wrap .btn-white:hover {
color:#4eccbc;
background:#e7eee8;
}
.black, .btn-black, #wrapper .black {
background:#323d45;
}
.black:hover, .btn-black:hover, #wrapper .black:hover {
background:#283137;
}
/*error*/
.error_class_register {
float:left;
clear:left;
margin-left:10px;
color:#f85352
}
#wrapper span.wpcf7-not-valid-tip, #fancybox-wrap span.wpcf7-not-valid-tip {
position: static;
clear:both;
float:left;
width:auto;
color:#f85352;
background:none;
border:none;
margin-left:10px;
}
#wrapper .wpcf7-form-control-wrap, #fancybox-wrap .wpcf7-form-control-wrap {
float:left;
}
#wrapper div.wpcf7-validation-errors, #fancybox-wrap div.wpcf7-validation-errors, #wrapper div.wpcf7-mail-sent-ok, #fancybox-wrap div.wpcf7-mail-sent-ok {
border:none;
width:800px;
margin:0 auto;
text-align:center;
color:#f85352;
margin-bottom:20px;
}
#content {
min-height:500px;
}
.error404 .entry-header .entry-title {
font-size:46px;
color:#f85352;
margin:50px 0;
}
/*success*/
#wrapper div.wpcf7-mail-sent-ok, #fancybox-wrap div.wpcf7-mail-sent-ok {
color:#38e5ca
}
/*colorbox*/
#colorbox {
top:35px !important;
}
/*fancybox*/
#fancybox-wrap {
top:45px !important;
}
#fancybox-wrap #fancybox-close {
width:24px;
height:24px;
background:url(images/close-icon.png) no-repeat;
right:10px;
top:4px;
}
#fancybox-wrap .fancybox-bg {
display:none;
}
#fancybox-wrap #fancybox-outer {
background:none;
}
#fancybox-wrap #fancybox-content {
border:6px solid #323d45 !important;
background:#f3f7f4;
min-width:833px;
}
.bk-consultant {
width:833px;
height:169px;
background:#323d45;
text-align:center;
}
.form-popup .bk-consultant input.full {
float:none;
}
.form-popup {
font-family:'Lato', sans-serif;
}
.bk-consultant h3 {
color:#fff;
padding-top:40px;
}
.form-popup .form-wrapper textarea.full {
margin-bottom:35px;
}
.form-popup .content p {
margin:25px 0 10px;
font-size:14px;
font-weight:300;
}
.form-popup .captcha-text {
float:left;
width:183px;
height:32px;
background:#fff;
text-align:center;
padding-top:8px;
}
.captcha-wrap input[type=text] {
height:40px;
width:185px;
}
#fancybox-wrap .bk-consultant .wpcf7-form-control-wrap {
float:none;
}
/*uniform*/
#content .col-1 .checker, #fancybox-wrap .checker {
float:left;
margin:2px 10px 0 0;
}
#colorbox .checker {
float:left;
margin:0 10px 0 0;
}
#content div.checker span, #colorbox div.checker span, #fancybox-wrap div.checker span {
background-position:0 -36px;
width:20px;
height:20px;
}
#content div.checker span.checked, #colorbox div.checker span.checked, #fancybox-wrap div.checker span.checked {
background-position:-36px -36px;
}
#content div.radio span, #colorbox div.radio span {
background-position:-72px -36px;
}
#content div.radio span.checked, #colorbox div.radio span.checked {
background-position:-108px -36px;
}
/*select*/
#colorbox div.selector {
background:#fff;
border:1px solid #ccc;
height:40px;
padding-left:20px;
min-width:auto;
width:234px;
margin:0 7px;
}
#colorbox div.selector span {
background:url(images/select-arrow.png) no-repeat 100% 50%;
line-height:40px;
height:40px;
min-width:auto;
width:auto;
color:#555e65;
font-size:14px;
}
#colorbox div.selector select {
width:100%;
height:40px;
}
#colorbox div.selector select option {
height:20px;
padding:3px 0 2px 18px;
background:#fff;
}
#colorbox .size-4 div.selector {
width:84px;
padding-left:10px;
}
#colorbox .size-5 div.selector {
width:74px;
padding-left:10px;
}
div.selector .required {
color:#323d45;
}
/* ==========================================================================
footer
========================================================================== */
#colophon {
background:#323d45;
color:#fff;
font-weight:300;
max-width:100%;
padding:0;
margin:0;
text-align:left;
}
#colophon .footer-logo {
margin:3px 0 44px;
}
#colophon a {
color:#fff;
}
#colophon p {
margin:20px 0 28px;
}
#colophon .inner {
width:1111px;
padding:50px 0;
font-weight:300;
}
#colophon .col {
display:inline-block;
width:327px;
vertical-align:top
}
#colophon .col-1 {
font-size:13px;
padding-left:20px;
line-height:24px;
width:324px;
float:none;
}
#colophon .col-2 {
font-size:14px;
margin:20px 0;
width:342px;
}
#colophon .col-2 ul {
margin:0;
padding:0;
list-style:none;
}
#colophon .col-2 div {
display:inline-block;
width:44.6%;
vertical-align:top;
}
#colophon .col-2 ul li {
line-height:24px;
}
#colophon .col-3 {
width:405px;
font-size:12px;
}
#colophon .col-3 p {
line-height:18px;
}
/*social link*/
.social-link ul {
display:block;
padding:0;
margin:0;
list-style:none;
}
.social-link ul li {
display:inline-block;
margin-right:8px;
}
.social-link a {
width:25px;
height:25px;
float:left;
text-indent:-999em;
}
.social-link a.icon-facebook {
background-position:-36px 0;
}
.social-link a.icon-twitter {
background-position:-72px 0;
}
.social-link a.icon-pinterest {
background-position:-72px -72px;
}
.social-link a.icon-instagram {
background-position:-108px -72px;
}
.social-link a.icon-mail {
background-position:-108px 0;
}
/* ==========================================================================
icons
========================================================================== */
.icon-user {
float:right;
width:18px;
height:18px;
background-position:0 0;
margin-top:20px;
text-indent:-999em;
}
.icon-love {
width:16px;
height:14px;
display:inline-block;
background-position:-72px -36px
}
.icon-or {
width:60px;
height:60px;
float:left;
background-position:-342px 0;
text-indent:-999em;
margin:0 8px 0 7px;
}
.icon-help {
width:16px;
height:16px;
background-position:-54px -72px;
float:left;
margin:15px 0 0 0;
position:absolute;
right:10px;
top:25px;
}
/*sup*/
h2 sup {
font-size:20px;
}
p sup {
font-size:14px;
}
/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 1025px) {
#fancybox-wrap #fancybox-close {
right:-116px;
}
}
@media only screen and (min-width : 1921px) {
.home .black-wrap, .black-wrap {
background-position:right;
}
.give .object-wrap, .join .object-wrap {
width:100%;
}
.give .object-img {
left:0;
}
.join .object-img {
left:0;
}
}
/* ==========================================================================
Helper classes
========================================================================== */
/*
* Image replacement
*/
.ir {
background-color: transparent;
border: 0;
overflow: hidden;
/* IE 6/7 fallback */
*text-indent: -9999px;
}
.ir:before {
content:"";
display: block;
width: 0;
height: 150%;
}
/*
* Hide from both screenreaders and browsers: h5bp.com/u
*/
.hidden {
display: none !important;
visibility: hidden;
}
/*
* Hide only visually, but have it available for screenreaders: h5bp.com/v
*/
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
/*
* Extends the .visuallyhidden class to allow the element to be focusable
* when navigated to via the keyboard: h5bp.com/p
*/
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
/*
* Hide visually and from screenreaders, but maintain layout
*/
.invisible {
visibility: hidden;
}
/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* `contenteditable` attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.clearfix:before, .clearfix:after {
content:" ";
/* 1 */
display: table;
/* 2 */
}
.clearfix:after {
clear: both;
}
/*
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.clearfix {
*zoom: 1;
}
/* ==========================================================================
EXAMPLE Media Queries for Responsive Design.
These examples override the primary ('mobile first') styles.
Modify as content requires.
========================================================================== */
@media only screen and (min-width: 35em) {
/* Style adjustments for viewports that meet the condition */
}
@media print, (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {
/* Style adjustments for high resolution devices */
}
/* ==========================================================================
Print styles.
Inlined to avoid required HTTP connection: h5bp.com/r
========================================================================== */
@media print {
* {
background: transparent !important;
color: #000 !important;
/* Black prints faster: h5bp.com/s */
box-shadow: none !important;
text-shadow: none !important;
}
a, a:visited {
text-decoration: underline;
}
a[href]:after {
content:" (" attr(href)")";
}
abbr[title]:after {
content:" (" attr(title)")";
}
/*
* Don't show links for images, or javascript/internal links
*/
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after {
content:"";
}
pre, blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group;
/* h5bp.com/t */
}
tr, img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
@page {
margin: 0.5cm;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3 {
page-break-after: avoid;
}
}