/*
M A I N
Project: UI Pixels
Tested On: Chrome, Safari, Firefox
Version: 1.0
Author: Huseyin Emanet
Author URI: https://huseyinemanet.com
File ID: style.css
All files, unless otherwise stated, are released under the GNU General Public License
version 3.0 (http://www.gnu.org/licenses/gpl-3.0.html)
*/
* {
font-family: "Josefin Sans", sans-serif;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
}
html,
body {
height: 100%;
}
body {
background-color: #f1f8fa;
color: #12414b;
font-weight: 400;
font-style: normal;
}
a {
color: #63c5da;
}
a:hover {
color: #12414b;
}
a,
a:hover,
a:active,
a:focus {
text-decoration: none;
outline: 0;
}
::selection {
background: #63c5da;
color: #fff;
}
::-moz-selection {
background: #63c5da;
color: #fff;
}
img {
user-select: none;
-webkit-user-select: none;
user-drag: none;
-webkit-user-drag: none;
}
#page-wrap {
min-height: 100%;
margin-bottom: -372px;
}
#page-wrap:after {
content: "";
display: block;
height: 372px;
}
.container {
/* max-width: 1080px; */
}
.no-overflow {
overflow: hidden;
}
#page-wrap .bg-inverse {
background-color: #63c5da !important;
}
#page-wrap .navbar-inverse .navbar-toggler {
border-color: rgba(255, 255, 255, .5);
}
.header {
background-color: #fff;
height: 80px;
overflow: hidden;
border-bottom: 1px solid #EBF3F5;
}
.logo {
display: block;
overflow: hidden;
height: 80px;
-webkit-user-select: none;
-webkit-backface-visibility: hidden;
}
.logo:hover {
opacity: .8;
}
.logo svg {
fill: #12414b;
width: 125px;
height: 33px;
margin: 24px 0 0 5px;
float: left;
}
#tagline {
color: #80aeb8;
font-size: 14px;
float: left;
margin: 30px 0 0 10px;
}
.search-button {
background: #63c5da;
border-radius: 0 0 5px 5px;
height: 41px;
width: 45px;
border: 0;
outline: 0;
cursor: pointer;
padding: 0;
transition: all .1s linear;
display: block;
margin-left: auto;
margin-right: auto;
text-indent: -9999px;
}
.search-button:hover {
background-color: #55acbf;
height: 45px;
box-shadow: 0 5px 10px 0 rgba(99, 196, 218, .3);
}
.search-button:focus {
outline: 0;
}
.search-button svg {
fill: #fff;
display: block;
margin: auto;
}
.others {
padding-top: 15px;
}
.others:after {
content: "";
display: block;
clear: both;
}
.others ul {
display: inline-block;
border-radius: 5px;
overflow: hidden;
margin: 4px 20px 0 0;
float: right;
}
.others ul > li {
float: left;
}
.others ul > li:first-child {
border-right: 1px solid #cce3ea;
}
.others ul > li a {
background-color: #bad6df;
display: block;
padding: 6px 16px;
font-weight: 600;
font-size: 16px;
color: #fff;
transition: all .1s linear;
}
.others ul > li a:hover {
background-color: #a7c3cd;
}
.others ul > li a svg {
fill: #fff;
vertical-align: middle;
display: inline-block;
margin-right: 5px;
}
.others ul > li a.facebook-page:hover {
background-color: #546EB5;
}
.others ul > li a.twitter-page:hover {
background-color: #41A0F6;
}
.others .btn {
float: right;
}
.mobile-menu-button {
background: none;
border: 0;
padding: 0;
margin: 0;
height: auto;
-webkit-appearance: none;
}
.btn-submit {
background-color: #f78163;
color: #fff;
font-weight: 600;
font-size: 14px;
box-shadow: 0 5px 10px 0 rgba(247, 129, 99, .3);
border-radius: 4px;
text-transform: uppercase;
padding: .813rem 1.2rem;
}
.btn-submit:hover {
background-color: #ee6c4c;
color: #fff;
box-shadow: 0 5px 10px 0 rgba(247, 129, 99, .8);
transform: translateY(-2px);
}
.btn-submit:active,
.btn-submit:focus {
color: #fff;
box-shadow: 0 5px 10px 0 rgba(247, 129, 99, .8);
}
.nav-link {
color: #fff;
font-weight: 600;
}
.nav-link:hover,
.nav-link:active {
color: #fff;
}
.main-categories {
background-color: #fff;
-webkit-user-select: none;
}
.single .main-categories ul {
padding-top: 22px;
padding-bottom: 22px;
}
.main-categories ul {
margin: 0;
padding: 50px 0;
list-style: none;
display: table;
margin-left: auto;
margin-right: auto;
}
.main-categories ul > li {
display: inline-block
}
.main-categories ul > li:not(:last-child) {
margin-right: 5px;
}
.main-categories ul > li a {
background-position: 15px 50%;
background-repeat: no-repeat;
color: #12414b;
font-size: 12px;
line-height: 46px;
display: block;
border-radius: 5px;
padding: 0 14px 0 50px;
height: 45px;
text-transform: uppercase;
font-weight: 600;
transition: all .1s linear;
}
.main-categories ul > li a:hover,
.main-categories ul > li.list-item-active a,
.main-categories ul > li.current-menu-item a {
background-color: #63c5da;
color: #fff;
box-shadow: 0 5px 10px 0 rgba(99, 196, 218, .3);
}
.modal .main-categories ul > li a {
color: #fff;
padding-left: 60px !important;
}
.modal .main-categories ul > li a:hover,
.modal .main-categories ul > li.list-item-active a,
.modal .main-categories ul > li.current-menu-item a {
background-color: transparent;
color: #12414b;
}
.modal .main-categories ul > li.menu-item-5901:hover a,
.modal .main-categories ul > li.current-menu-item.menu-item-5901 a {
background-image: url('data:image/svg+xml;utf8,');
}
.modal .main-categories ul > li.menu-item-5902:hover a,
.modal .main-categories ul > li.menu-item-5902 a {
background-image: url('data:image/svg+xml;utf8,');
}
.modal .main-categories ul > li.menu-item-5903 a {
background-image: url('data:image/svg+xml;utf8,');
}
.modal .main-categories ul > li.menu-item-5904 a {
background-image: url('data:image/svg+xml;utf8,')
}
.modal .main-categories ul > li.menu-item-5905 a {
background-image: url('data:image/svg+xml;utf8,');
}
.modal .main-categories ul > li.menu-item-5906 a {
background-image: url('data:image/svg+xml;utf8,');
}
.modal .main-categories ul > li.menu-item-5907 a {
background-image: url('data:image/svg+xml;utf8,');
}
.modal .main-categories ul > li.menu-item-6025 a {
background-image: url('data:image/svg+xml;utf8,')
}
/* Home */
.main-categories ul > li.menu-item-5901 a {
background-image: url('data:image/svg+xml;utf8,');
}
.main-categories ul > li.menu-item-5901:hover a,
.main-categories ul > li.current-menu-item.menu-item-5901 a {
background-image: url('data:image/svg+xml;utf8,');
}
/* Mockups */
.main-categories ul > li.menu-item-5902 a {
background-image: url('data:image/svg+xml;utf8,');
}
.main-categories ul > li.menu-item-5902:hover a,
.main-categories ul > li.current-menu-item.menu-item-5902 a {
background-image: url('data:image/svg+xml;utf8,');
}
/* UI Kits */
.main-categories ul > li.menu-item-5903 a,
.main-categories ul > li.current-post-ancestor a {
background-image: url('data:image/svg+xml;utf8,');
}
.main-categories ul > li.menu-item-5903:hover a,
.main-categories ul > li.current-menu-item.menu-item-5903 a {
background-image: url('data:image/svg+xml;utf8,');
}
/* App Design */
.main-categories ul > li.menu-item-5904 a {
background-image: url('data:image/svg+xml;utf8,');
padding-left: 40px;
}
.main-categories ul > li.menu-item-5904:hover a,
.main-categories ul > li.current-menu-item.menu-item-5904 a {
background-image: url('data:image/svg+xml;utf8,');
}
/* Website Templates */
.main-categories ul > li.menu-item-5905 a {
background-image: url('data:image/svg+xml;utf8,');
}
.main-categories ul > li.menu-item-5905:hover a,
.main-categories ul > li.current-menu-item.menu-item-5905 a {
background-image: url('data:image/svg+xml;utf8,');
}
/* Sketch App Resources */
.main-categories ul > li.menu-item-5906 a {
background-image: url('data:image/svg+xml;utf8,');
}
.main-categories ul > li.menu-item-5906:hover a,
.main-categories ul > li.current-menu-item.menu-item-5906 a {
background-image: url('data:image/svg+xml;utf8,');
}
/* Icons */
.main-categories ul > li.menu-item-5907 a {
background-image: url('data:image/svg+xml;utf8,');
}
.main-categories ul > li.menu-item-5907:hover a,
.main-categories ul > li.current-menu-item.menu-item-5907 a {
background-image: url('data:image/svg+xml;utf8,');
}
/* Others */
.main-categories ul > li.menu-item-6025 a {
background-image: url('data:image/svg+xml;utf8,');
padding-left: 55px;
}
.main-categories ul > li.menu-item-6025:hover a,
.main-categories ul > li.current-menu-item.menu-item-6025 a {
background-image: url('data:image/svg+xml;utf8,');
}
.cat-item-number {
font-weight: 400;
}
.page-template-template_contribute .main-categories,
.page-template-template_about .main-categories,
.page-template-template_contact .main-categories,
.page-template-template_fullwidth .main-categories {
display: none;
}
.mobile-select-categories {
padding: 20px 0 0;
margin-bottom: -30px;
}
.mobile-select-categories select {
display: block;
width: 100%;
height: 60px;
-webkit-appearance: none;
border-radius: 10px;
background: #63c5da url("../../static/images/icons/icon-select-arrow.svg") 90% 50% no-repeat;
background-size: 22px 12px;
color: #fff;
padding: 0 20px;
border: 0;
font-size: 14px;
font-family: "Josefin Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 600;
box-shadow: 0 5px 10px 0 rgba(99, 196, 218, .3);
outline: 0;
transition: box-shadow, background-color .2s linear;
}
.mobile-select-categories select:focus {
background: #56bbd1 url("../../static/images/icons/icon-select-arrow-up.svg") 90% 50% no-repeat;
background-size: 22px 12px;
box-shadow: 0 5px 10px 0 rgba(99, 196, 218, .8);
}
.page-title {
font-weight: 400;
font-size: 30px;
margin: 0;
padding: 0 0 3rem;
text-align: center;
}
.page-title strong {
font-weight: 600;
}
.page-title a {
color: #f78163;
font-weight: 600;
font-size: 18px;
text-decoration: underline;
display: inline-block;
padding-left: 4px;
}
.page-title a:hover {
color: #ee6c4c;
}
.post-title {
font-weight: 600;
font-size: 40px;
}
.posts {
padding: 50px 0 30px;
}
b,
strong {
font-weight: 600;
}
.text-truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.posts .card.duru-card {
min-height: auto;
}
.posts .card {
border: 0;
margin-bottom: 30px;
padding: 15px;
border-radius: 5px;
position: relative;
transition: all .2s linear;
min-height: 350px;
}
.posts .card:hover {
transform: translateY(-5px);
box-shadow: 0 0 25px 0 rgba(99, 196, 218, .25);
}
.posts .card figure {
overflow: hidden;
max-height: 240px;
margin: 0;
}
.posts .card .card-img-top {
border-radius: 0;
}
.posts .card .card-block {
padding-top: 1rem;
padding-bottom: 0;
}
.posts .card .card-title {
font-weight: 600;
font-size: 18px;
color: #12414b;
letter-spacing: 0;
margin: 0;
}
.posts .card .card-advertisement-title {
font-weight: 600;
font-size: 24px;
letter-spacing: 0;
}
.posts .card .card-advertisement-title span {
font-weight: 400;
font-size: 18px;
color: #12414b;
display: inline-block;
padding-left: 8px;
}
.advertisement-logo {
position: absolute;
right: 15px;
bottom: 37px;
}
.posts .card .card-text {
font-size: 12px;
color: #12414b;
margin: 0 0 6px;
}
.post-ads {
display: none;
}
.card-file-type {
padding-top: 5px;
}
.card-file-type span {
display: inline-block;
margin-left: 10px;
vertical-align: middle;
}
.card-file-type span:first-child {
margin-left: 0;
}
.doc-type {
background-repeat: no-repeat;
background-position: 0 0;
text-indent: -9999px;
width: 18px;
height: 18px;
}
.doc-type-illustrator {
background-image: url("../images/icons/icon-illustrator.png");
}
.doc-type-photoshop {
background-image: url("../images/icons/icon-photoshop.png");
}
.doc-type-sketch {
background-image: url("../images/icons/icon-sketch.png");
}
.doc-type-adobexd {
background-image: url("../images/icons/icon-adobexd.png");
}
.doc-type-figma {
background-image: url("../images/icons/icon-figma.png");
}
.doc-type-invisionstudio {
background-image: url("../images/icons/icon-invisionstudio.png");
}
.doc-type-framer {
background-image: url("../images/icons/icon-framer.png");
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.doc-type {
background-size: cover;
}
.doc-type-illustrator {
background-image: url("../images/icons/icon-illustrator@2x.png");
}
.doc-type-photoshop {
background-image: url("../images/icons/icon-photoshop@2x.png");
}
.doc-type-sketch {
background-image: url("../images/icons/icon-sketch@2x.png");
}
.doc-type-adobexd {
background-image: url("../images/icons/icon-adobexd@2x.png");
}
.doc-type-figma {
background-image: url("../images/icons/icon-figma@2x.png");
}
.doc-type-invisionstudio {
background-image: url("../images/icons/icon-invisionstudio@2x.png");
}
.doc-type-framer {
background-image: url("../images/icons/icon-framer@2x.png");
}
}
.post-nav {
padding-bottom: 2.5rem;
}
.post-nav .page-link {
background-color: transparent;
display: inline-block;
font-size: 16px;
line-height: 26px;
padding-left: 14px;
padding-right: 14px;
border: 1px solid #cee0e6;
}
.post-nav .page-link:hover {
background-color: #fff;
color: #12414b;
border-color: #cee0e6;
box-shadow: 0 5px 10px 0 rgba(99, 196, 218, .3);
}
.post-nav .page-link:hover svg {
fill: #12414b;
}
.post-nav nav a {
color: #12414b;
transition: color .1s linear;
}
.post-nav nav a:hover {
color: #63c5da;
}
#content .img-fluid:first-child {
margin-bottom: 1.25rem;
}
/* #content p {
font-size: 18px;
color: #427f8c;
line-height: 26px;
} */
.post-tags {
padding-top: 1rem;
padding-bottom: 2.5rem;
}
.post-tags .btn-secondary {
font-size: 14px;
color: #427f8c;
line-height: 20px;
border-radius: 20px;
border: 1px solid #cee0e6;
padding-left: 12px;
padding-right: 12px;
}
.post-tags .btn-secondary:hover {
background-color: #fff;
border-color: #cee0e6;
box-shadow: 0 5px 10px 0 rgba(99, 196, 218, .3);
transform: translateY(-2px);
}
.post-tags label {
font-size: 14px;
color: #427f8c;
padding-right: 5px;
}
.btn-download,
.btn-coffee {
font-weight: 600;
font-size: 16px;
color: #fff;
border-radius: 5px;
display: block;
text-transform: uppercase;
margin-bottom: 1.25rem;
padding: 19px 0;
}
.btn-download {
background: #63c5da;
box-shadow: 0 5px 10px 0 rgba(99, 196, 218, .3);
}
.btn-download:hover {
background-color: #56bbd1;
box-shadow: 0 5px 10px 0 rgba(99, 196, 218, .8);
}
.btn-download:active,
.btn-download:focus,
.btn-coffee:active,
.btn-coffee:focus {
color: #fff;
}
.btn-download:hover,
.btn-coffee:hover {
color: #fff;
transform: translateY(-2px);
}
.btn-coffee {
background-color: #bfb59b;
box-shadow: 0 5px 10px 0 rgba(171, 156, 118, .3);
}
.btn-coffee:hover {
background: #aba082;
box-shadow: 0 5px 10px 0 rgba(171, 156, 118, .8);
}
.widget {
margin-bottom: 30px;
}
.share-post {
padding-top: 1rem;
}
.share-post label {
color: #427f8c;
margin-bottom: 0;
vertical-align: top;
line-height: 40px;
font-weight: 600;
padding-right: 1rem;
}
.share-post ul {
display: inline-block;
margin-bottom: 0;
}
.share-post ul > li {
float: left;
margin-left: 10px;
margin-bottom: 10px;
}
.share-post ul > li:first-child {
margin-left: 0;
}
.share-post a {
background: #fff;
border: 1px solid #cee0e6;
border-radius: 5px;
height: 40px;
display: block;
text-align: center;
line-height: 38px;
padding: 0 15px;
transition: all .1s linear;
}
.share-post a svg {
fill: #bad6df;
vertical-align: middle;
display: inline-block;
margin-right: 3px;
transition: all .1s linear;
}
.share-post a span {
color: #427f8c;
display: inline-block;
vertical-align: middle;
font-size: 14px;
}
.share-post a:hover {
transform: translateY(-2px);
box-shadow: 0 5px 10px 0 rgba(99, 196, 218, .3);
}
.share-post a.share-facebook:hover svg {
fill: #546eb5;
}
.share-post a.share-twitter:hover svg {
fill: #41A0F6;
}
.share-post a.share-googleplus:hover svg {
fill: #D5523F;
}
.share-post a.share-pinterest:hover svg {
fill: #C42220;
}
.share-post a.share-linkedin:hover svg {
fill: #2877B8;
}
.post-newsletter-form {
background: #bad6df;
color: #fff;
border-radius: 5px;
padding: 20px 25px 30px;
}
.post-newsletter-form form {
position: relative;
}
.post-newsletter-form label {
display: block;
font-weight: 600;
font-size: 18px;
cursor: pointer;
text-align: center;
}
.post-newsletter-form input {
height: 60px;
padding: 0 90px 0 20px;
border: 0;
border-radius: 5px;
font-family: "Josefin Sans", sans-serif;
}
.post-newsletter-form input:focus {
box-shadow: 0 0 0 3px rgba(0, 0, 0, .07);
}
.post-newsletter-form input::-webkit-input-placeholder {
color: #80aeb8;
}
.post-newsletter-form input::-moz-placeholder {
color: #80aeb8;
}
.post-newsletter-form input:-ms-input-placeholder {
color: #80aeb8;
}
.post-newsletter-form input:-moz-placeholder {
color: #80aeb8;
}
.post-newsletter-form button {
border-radius: 100px;
cursor: pointer;
position: absolute;
top: 7px;
right: 10px;
padding: 9px 19px;
}
.post-newsletter-form button svg {
fill: #fff;
}
.sponsors {
background-color: #fff;
border-radius: 5px;
padding: 25px 0 20px;
text-align: center;
}
.sponsors p {
font-size: 12px;
text-align: center;
display: block;
margin: .7rem 0 0;
-webkit-user-select: none;
}
#recent-freebies h4 {
font-size: 24px;
font-weight: 600;
margin: 0 0 15px;
}
#recent-freebies li {
margin-bottom: 30px;
}
#recent-freebies a {
text-align: center;
display: block;
}
#recent-freebies img {
display: block;
}
#recent-freebies p {
color: #12414b;
font-size: 12px;
margin: 10px 0 4px;
max-width: 100px;
margin-left: auto;
margin-right: auto;
}
#recent-freebies h5 {
color: #12414b;
font-size: 16px;
font-weight: 600;
margin: 0;
}
.related-posts {
background: #e7f2f5;
margin: 2rem 0 -23.2rem;
padding: 4rem 0 22rem;
}
.related-posts h2 {
font-weight: 600;
font-size: 30px;
margin: 0;
text-align: center;
}
.subscribe {
background: #63c5da;
border-radius: 5px;
margin-top: 80px;
margin-bottom: 80px;
padding: 45px 50px;
}
.subscribe form {
position: relative;
}
.subscribe label {
font-weight: 600;
font-size: 27px;
color: #fff;
letter-spacing: -1px;
margin: 0;
padding: 7px 0 0;
cursor: pointer;
}
.subscribe input {
-webkit-appearance: none;
background: #fff;
color: #80aeb8;
font-family: "Josefin Sans", sans-serif;
font-size: 18px;
border-radius: 5px;
border: 0;
outline: 0;
height: 60px;
padding: 0 140px 0 20px;
}
.subscribe input:focus {
box-shadow: 0 0 0 3px rgba(0, 0, 0, .07);
}
.subscribe button {
font-family: "Josefin Sans", sans-serif;
font-size: 14px;
font-weight: 600;
position: absolute;
top: 7px;
right: 10px;
z-index: 2;
cursor: pointer;
}
::-webkit-input-placeholder {
color: #80aeb8;
}
::-moz-placeholder {
color: #80aeb8;
}
:-ms-input-placeholder {
color: #80aeb8;
}
:-moz-placeholder {
color: #80aeb8;
}
.page-template-template_about article p,
.page-template-template_contact article p,
.page-template-template_contribute article p,
.error404 article p,
.search-no-results article p,
.page-template-template_fullwidth article p {
color: #427f8c;
font-size: 18px;
line-height: 26px;
text-align: center;
}
.page-template-template_about article svg {
margin-top: 1rem;
}
.page-template-template_contact fieldset,
.page-template-template_contribute fieldset,
.wpcf7-form {
max-width: 500px;
margin: 40px auto 0;
}
.has-float-label {
display: block;
position: relative;
}
.has-float-label label,
.has-float-label > span {
color: #80aeb8;
position: absolute;
left: 20px;
top: 8px;
cursor: text;
font-size: 12px;
opacity: 1;
margin: 0;
transition: all .1s linear;
}
.has-float-label select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.has-float-label input,
.has-float-label textarea {
background-color: #fff;
height: 60px;
border: 1px solid #cee0e6;
border-radius: 5px;
margin-bottom: 20px;
padding: 15px 20px 0 20px;
font-family: "Josefin Sans", serif;
font-weight: 600;
font-size: 18px;
}
.has-float-label textarea {
height: 120px;
min-height: 120px;
padding-top: 25px;
}
.has-float-label input::-webkit-input-placeholder,
.has-float-label textarea::-webkit-input-placeholder {
font-family: "Josefin Sans", serif;
font-weight: 600;
font-size: 18px;
color: #12414b;
opacity: 1;
transition: all .1s linear;
}
.has-float-label input::-moz-placeholder,
.has-float-label textarea::-moz-placeholder {
opacity: 1;
transition: all .1s linear;
}
.has-float-label input:-ms-input-placeholder,
.has-float-label textarea:-ms-input-placeholder {
opacity: 1;
transition: all .1s linear;
}
.has-float-label input::placeholder,
.has-float-label textarea::placeholder {
opacity: 1;
transition: all .1s linear;
}
.has-float-label input:placeholder-shown:not(:focus)::-webkit-input-placeholder,
.has-float-label textarea:placeholder-shown:not(:focus)::-webkit-input-placeholder {
opacity: 0;
}
.has-float-label input:placeholder-shown:not(:focus)::-moz-placeholder,
.has-float-label textarea:placeholder-shown:not(:focus)::-moz-placeholder {
opacity: 0;
}
.has-float-label input:placeholder-shown:not(:focus):-ms-input-placeholder,
.has-float-label textarea:placeholder-shown:not(:focus):-ms-input-placeholder {
opacity: 0;
}
.has-float-label input:placeholder-shown:not(:focus)::placeholder,
.has-float-label textarea:placeholder-shown:not(:focus)::placeholder {
opacity: 0;
}
.has-float-label input:placeholder-shown:not(:focus) + *,
.has-float-label textarea:placeholder-shown:not(:focus) + * {
font-size: 18px;
top: 16px;
left: 20px;
}
.has-float-label input:focus,
.has-float-label textarea:focus {
outline: none;
/* border-width: 2px; */
border-color: #63c5da;
box-shadow: inset 0 0 0 1px #63c5da;
}
/* Contribution File Uploads */
.page-template-template_contribute fieldset h6 {
font-weight: 600;
font-size: 18px;
color: #427f8c;
margin-top: 1rem;
}
.file-desc {
font-size: 12px;
line-height: 14px;
color: #427f8c;
max-width: 160px;
display: block;
padding-bottom: 1rem;
}
.custom-file {
display: block;
max-width: 120px;
text-align: center;
margin-bottom: 1rem;
}
.custom-file-input {
min-width: inherit;
cursor: pointer;
}
.custom-file-control {
background: #fff;
box-shadow: 0 5px 10px 0 rgba(99, 196, 218, .3);
border-radius: 100px;
border: 0;
font-size: 14px;
color: #12414b;
letter-spacing: 0;
line-height: 27px;
cursor: pointer;
}
.custom-file-control::before {
display: none;
}
.custom-file-control:lang(en)::after {
cursor: pointer;
}
.btn-contact-submit {
background-color: #63c5da;
box-shadow: 0 5px 10px 0 rgba(99, 196, 218, .3);
cursor: pointer;
font-family: "Josefin Sans", sans-serif;
font-size: 16px;
color: #fff;
font-weight: 600;
text-transform: uppercase;
height: 60px;
padding: 0 28px;
}
.btn-contact-submit:hover,
.btn-contact-submit:active,
.btn-contact-submit:focus {
background-color: #56bbd1;
box-shadow: 0 5px 10px 0 rgba(99, 196, 218, .8);
transform: translateY(-2px);
}
.search-no-results article form,
.error404 article form {
position: relative;
margin-top: 1rem;
}
.search-no-results .form-control,
.error404 article .form-control {
height: 60px;
border: 1px solid #cee0e6;
border-radius: 5px;
padding: 0 20px 0 60px;
font-weight: 600;
font-family: "Josefin Sans", sans-serif;
font-size: 18px;
}
.search-no-results .form-control:focus,
.error404 article .form-control:focus {
border-width: 2px;
border-color: #63c5da;
}
.search-no-results article .btn,
.error404 article .btn {
background-color: transparent;
position: absolute;
left: 15px;
top: 0;
width: 60px;
height: 60px;
z-index: 2;
}
.tooltip-inner {
background-color: #63c5da;
text-transform: capitalize;
padding: 10px 15px 8px;
font-size: 15px;
font-weight: 600;
}
.tooltip.bs-tether-element-attached-top .tooltip-inner::before,
.tooltip.tooltip-bottom .tooltip-inner::before {
border-bottom-color: #63c5da;
}
.page-template-template_contribute article .page-link {
display: inline-block;
}
.page-template-template_contribute article p {
font-size: 18px;
color: #427f8c;
line-height: 26px;
margin: 0;
}
.footer {
background: url("../images/base/footer-bg.png") 50% 0 no-repeat;
min-height: 372px;
color: #fff;
overflow: hidden;
}
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
.footer {
background-image: url("../images/base/footer-bg@2x.webp");
background-size: cover;
}
}
.footer-wrapper {
padding-top: 210px;
}
.footer-logo {
fill: #fff;
display: block;
margin-top: 35px;
}
.footer-logo svg {
display: block;
width: 161px;
height: 43px;
}
.footer-logo:hover {
opacity: .8;
}
.footer h2 {
font-size: 16px;
font-weight: 600;
text-transform: uppercase;
padding-bottom: 10px;
}
.footer p {
font-size: 16px;
line-height: 22px;
}
.footer p.copyright {
font-size: 12px;
line-height: 20px;
}
.footer p.copyright a {
color: #fff;
}
.footer p.copyright a:hover {
font-weight: 600;
}
.footer ul {
overflow: hidden;
margin: 0;
padding: 0;
list-style: none;
}
.footer ul > li {
width: 50%;
float: left;
}
.footer ul > li a {
font-size: 16px;
color: #fff;
line-height: 32px;
display: block;
}
.footer ul > li a:hover {
font-weight: 600;
}
.site-counter {
text-align: center;
position: relative;
}
#windmill {
background: url("../images/base/windmill_body.png") 0 0 no-repeat;
width: 78px;
height: 81px;
margin: auto;
position: relative;
margin-top: -50px;
margin-bottom: 25px;
background-size: cover;
}
#windmill-fans {
background: url("../images/base/windmill_fan.png") 0 0 no-repeat;
width: 85px;
height: 86px;
display: block;
position: absolute;
z-index: 5;
top: -36px;
left: 38px;
background-size: cover;
-webkit-animation: spin 5s infinite linear;
-moz-animation: spin 5s infinite linear;
animation: spin 5s infinite linear;
}
@-webkit-keyframes spin {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
@-moz-keyframes spin {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
keyframes spin {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
#windmill {
background-image: url("../images/base/windmill_body@2x.png");
}
#windmill-fans {
background-image: url("../images/base/windmill_fan@2x.png");
}
}
.site-counter p {
font-weight: 600;
font-size: 30px;
margin: 0;
padding: 0;
}
.site-counter span {
font-size: 14px;
line-height: 22px;
}
.pagination {
margin-bottom: 0;
}
.page-item.active .page-link {
background: #63c5da;
border-color: #63c5da;
color: #fff;
box-shadow: 0 5px 10px 0 rgba(99, 196, 218, .3);
}
.pagination-lg .page-link,
.page-link {
padding: 9px 17px 8px;
font-size: 18px;
border-radius: 5px;
line-height: 25px;
}
.page-link {
margin-left: 13px;
background: #fff;
color: #12414b;
border: 1px solid #cee0e6;
min-width: 45px;
min-height: 45px;
transition: all .1s linear;
}
.page-link:hover,
.page-link:focus {
background: #63c5da;
border-color: #63c5da;
color: #fff;
transform: translateY(-2px);
box-shadow: 0 5px 10px 0 rgba(99, 196, 218, .3);
}
.page-link svg {
display: inline-block;
vertical-align: initial;
margin: 0 2px;
}
.page-link:hover svg,
.page-link:focus svg {
fill: #fff;
transition: all .1s linear;
}
.modal-backdrop {
background: #63c5da;
}
.modal-backdrop.show {
opacity: .95;
}
.modal-dialog {
max-width: none;
}
.modal .close {
opacity: 1;
position: absolute;
top: 30px;
right: 50px;
cursor: pointer;
z-index: 3;
outline: 0;
}
.modal .close svg {
fill: #fff;
}
.modal .close:hover svg {
fill: rgba(255, 255, 255, .8);
}
.modal-body .form-control {
background: transparent;
color: #fff;
border: 0;
border-radius: 0;
border-bottom: 1px solid #fff;
box-shadow: none;
font-weight: 400;
font-size: 30px;
padding: 0 0 10px;
text-align: center;
font-family: "Josefin Sans", sans-serif;
max-width: 600px;
margin: auto;
}
.modal-body .form-control::-webkit-input-placeholder {
opacity: .8;
font-family: "Josefin Sans", sans-serif;
font-size: 30px;
color: #fff;
}
.modal-body .form-control::-moz-placeholder {
opacity: .8;
font-family: "Josefin Sans", sans-serif;
font-size: 30px;
color: #fff;
}
.modal-body .form-control:::-ms-input-placeholder {
opacity: .8;
font-family: "Josefin Sans", sans-serif;
font-size: 30px;
color: #fff;
}
.full-height {
width: 100%;
position: relative;
top: 50%;
-ms-transform: perspective(1px) translateY(-50%);
-webkit-transform: perspective(1px) translateY(-50%);
transform: perspective(1px) translateY(-50%);
}
.modal-body .main-categories {
background-color: transparent;
}
.modal-body .main-categories ul > li {
display: block;
margin: 0;
}
.truncate {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* WordPress Contact Form 7 Styling */
.wpcf7-form .wpcf7-validation-errors {
border: 0;
background: #f76363;
color: #fff;
padding: 8px 0;
border-radius: 3px;
}
.wpcf7-form .wpcf7-mail-sent-ok {
border: 0;
background: #58c38a;
color: #fff;
padding: 8px 0;
border-radius: 3px;
}
.wpcf7 form.invalid .wpcf7-response-output {
margin-left: 0;
margin-right: 0;
background: #ffb900;
padding: 12px 20px 10px;
border: 0;
text-align: left;
border-radius: 4px;
}
.wpcf7 form.sent .wpcf7-response-output {
margin-left: 0;
margin-right: 0;
background: #46b450;
color: #fff;
padding: 12px 20px 10px;
border: 0;
text-align: left;
border-radius: 4px;
}
/* Structural and keyboard accessibility enhancements. Original control colors retained. */
.resource-intro { padding: 37px 0; text-align: center; }
.resource-intro + .posts { padding-top: 0; }
.resource-intro h1 { font-size: clamp(24px, 3vw, 34px); line-height: 1.3; color: #12414b; margin: 0; }
.skip-link { position: absolute; left: 16px; top: -100px; z-index: 2000; padding: 12px; background: #fff; color: #12414b; }
.skip-link:focus { top: 12px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid #12414b; outline-offset: 4px; }
.modal.show { display: block; background: rgba(99, 197, 218, .95); overflow-y: auto; }
body.no-overflow { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }