/*
Theme Name: GetOrganized Theme
Theme URI:
Description: Created by Arno Derks (19-7-2017), Modern look
Version: 1.0
Author: Arno Derks
Author URI: https://www.linkedin.com/in/arno-derks/
Tags: ingrid van der locht, modern look, GetOrganized
Nieuwe look voor de website van Ingrid van der Locht
*/
/* General styling */
* {
margin: 0;
font-family: 'Rubik', sans-serif;
}
html, body {
min-height: 100%;
}
body {
font-family: 'Rubik', sans-serif;
font-size: 15px;
font-weight: 300;
}
#wrapper {
color: #4a4042;
}
p {
color: #000;
}
a, a:hover, a:focus {
color: #4a4042;
}
h1, h2 {
font-size: 44px;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 300;
}
a:hover {
color: inherit;
}
input, textarea {
color: #fff;
display: inline-block;
background-color: transparent;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
border: 1px solid #fff;
padding: 15px;
}
input[type="email"] {
padding-left: 25px;
font-style: italic;
width: 385px;
}
button[type="submit"], input.over-input[type="submit"] {
position: absolute;
top: 9px;
right: 15px;
border: 1px solid #fff;
background-color: transparent;
color: #fff;
width: 35px;
height: 35px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
text-decoration: none;
padding: 0px;
}
button[type="submit"]:hover, input[type="submit"]:hover {
text-decoration: underline;
}
input:focus, button:focus, textarea:focus {
border-color: #fff;
box-shadow: none;
outline: none;
}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
font-style: italic;
color: #fff;
opacity: 1;
}
input:-moz-placeholder, textarea:-moz-placeholder {
font-style: italic;
color: #fff;
opacity: 1;
}
input::-moz-placeholder, textarea::-moz-placeholder {
font-style: italic;
color: #fff;
opacity: 1;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
font-style: italic;
color: #fff;
opacity: 1;
}
input::-ms-input-placeholder, textarea::-ms-input-placeholder {
font-style: italic;
color: #fff;
opacity: 1;
}
/* MENU */
header {
border-bottom: 2px solid #f1dfde;
}
.navbar {
padding-top: 22px;
padding-bottom: 22px;
}
nav .logo {
height: 75px;
}
ul.nav {
display: block;
margin-top: 8px;
text-align: right;
}
ul.nav li {
display: inline-block;
position: relative;
}
ul.nav li:last-child a {
padding-right: 0px;
}
ul.nav a {
font-size: 18px;
color: #4a4042;
display: block;
padding: 20px 22px 0px 22px;
}
ul.nav li.active a {
color: #e3bebc;
}
ul.nav li.active:after {
display: inline-block;
background-color: #e3bebc;
height: 15px;
width: 30px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
content: '';
position: absolute;
top: 0;
right: 0;
left: 0;
margin: auto;
margin-top: -30px;
}
/* END MENU */
/* CONTENT */
h1 {
font-weight: 300;
color: #e3bebc;
font-size: 44px;
}
/* frontpage */
.front-bg {
position: relative;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 735px;
}
.front-page-main-block {
position: absolute;
left: 0;
right: 0;
top: 45%;
font-size: 29px;
color: #4a4042;
width: 350px;
height: 240px;
margin: auto;
margin-top: -120px;
}
.front-page-main-block h1 {
color: #4a4042;
}
.front-page-main-block div.text {
color: #4a4042;
}
.blocks {
margin-top: 40px;
}
.block {
margin-bottom: 40px;
}
.block .border {
position: relative;
font-size: 19px;
border: 1px solid #e3bebc;
padding: 50px;
}
.block h3 {
color: #e3bebc;
font-weight: 300;
font-size: 28px;
}
.block:hover .border {
background-color: #e3bebc;
}
.block:hover h3 {
color: #fff;
}
.block div.text {
color: #4a4042;
}
.block a {
color: #e3bebc;
font-size: 25px;
background-color: #fff;
position: absolute;
display: inline-block;
bottom: -20px;
left: 0;
right: 0;
margin: auto;
text-align: center;
width: 40px;
height: 40px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
border: 1px solid #e3bebc;
}
.block a:hover {
text-decoration: none;
}
.front-text {
text-align: center;
margin-top: 100px;
margin-bottom: 170px;
font-size: 16px;
}
.front-text h2 {
font-size: 44px;
font-weight: 300;
color: #e3bebc;
margin-bottom: 40px;
}
.front-text div.text {
color: #4a4042;
line-height: 30px;
}
.ebook-bg {
background-color: #e3bebc;
padding: 85px 0px;
margin-bottom: 135px;
text-align: center;
}
.ebook-bg form {
display: inline-block;
position: relative;
margin-top: 35px;
}
.ebook-bg form p {
margin-bottom: 0px;
}
.blogs {
margin-bottom: 90px;
}
.blogs h2 {
text-align: center;
margin-bottom: 30px;
color: #e3bebc;
}
.blogs .blog {
border: 1px solid #e3bebc;
position: relative;
padding: 15px;
margin-bottom: 40px;
}
.blogs .blog h5 {
height: 46px;
overflow: hidden;
}
.blogs .blog .img {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 155px;
margin-bottom: 10px;
}
.blogs .blog a {
color: #fff;
font-size: 25px;
z-index: 5;
position: absolute;
bottom: -17px;
left: 0;
right: 0;
text-align: center;
margin: auto;
display: inline-block;
width: 35px;
height: 35px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background-color: #e3bebc;
border: 1px solid #e3bebc;
}
.blogs .view-wrap {
text-align: center;
}
.blogs a.view-more {
margin-left: auto;
margin-right: auto;
display: inline-block;
padding: 15px 25px;
border: 1px solid #e3bebc;
text-transform: uppercase;
text-align: center;
-webkit-border-radius: 35px;
-moz-border-radius: 35px;
border-radius: 35px;
}
.newsletter .background {
background-color: #e3bebc;
margin-bottom: 110px;
padding: 63px;
padding-bottom: 47px;
}
.newsletter h2 {
color: #fff;
font-size: 38px;
margin-bottom: 30px;
}
.newsletter h2 p {
color: inherit;
margin-bottom: 0px;
}
.newsletter h2 a {
color: inherit;
}
.newsletter form {
display: inline-block;
position: relative;
margin-top: 20px;
}
.newsletter form p {
margin-bottom: 0px;
}
.newsletter input[type="email"] {
width: 500px;
}
.newsletter div.info .border {
border: 1px solid #e3bebc;
padding: 40px;
}
.newsletter h2.info {
color: #4a4042;
margin-bottom: 5px;
}
.newsletter div.info a {
font-size: 18px;
}
.newsletter div.info.particulier {
margin-bottom: 21px;
}
.contact-bg {
height: 560px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
position: relative;
}
.contact-bubble {
width: 280px;
height: 280px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background-color: #fff;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
text-align: center;
}
.contact-bubble span {
display: inline-block;
margin-top: 60px;
font-size: 25px;
color: #e3bebc;
}
.contact-bubble div.text {
display: inline-block;
line-height: 28px;
margin-top: 5px;
color: #4a4042;
}
.contact-bubble img {
position: absolute;
left: -21px;
top: 54px;
bottom: 0;
margin: auto;
}
/* end frontpage */
/* blog archive */
.blogs.archive h1 {
text-align: center;
margin-bottom: 50px;
margin-top: 50px;
color: #e3bebc;
}
.blogs .blog div.blog-text {
height: 64px;
overflow: hidden;
}
.blogs .pagination {
float: right;
}
.blogs .pagination li {
width: 50px;
height: 50px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border: 1px solid #e3bebc;
background-color: #fff;
text-align: center;
margin-left: 15px;
}
.blogs .pagination li:hover {
background-color: #e3bebc;
}
.blogs .pagination li:hover a {
color: #fff;
}
.blogs .pagination li a {
color: #4a4042;
line-height: 33px;
width: auto;
height: auto;
background-color: transparent;
border: 0px;
}
.blogs .pagination li.active {
background-color: #e3bebc;
}
.blogs .pagination li.active span {
color: #fff;
line-height: 33px;
background-color: transparent;
border: 0px;
}
.blogs .pagination li span.page-link.dots {
background-color: transparent;
color: #4a4042;
border: 0px;
margin-top: 10px;
}
select {
color: #4a4042;
margin-left: 10px;
display: inline-block;
background-color: transparent;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
border: 1px solid #e3bebc;
padding: 13px 15px;
margin-bottom: 1rem;
}
/* end blog archive */
/* blog single */
.blog-single img {
margin-top: 20px;
width: 100%;
}
.blog-single h1 {
margin-top: 60px;
margin-bottom: 40px;
}
.blog-single .center {
text-align: center;
margin-top: 20px;
}
.blog-single .center span a:not(:empty), .blog-single .center a.overview {
display: inline-block;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
border: 1px solid #e3bebc;
padding: 15px;
background-color: #fff;
text-align: center;
color: #e3bebc;
margin-bottom: 20px;
text-transform: uppercase;
}
.blog-single .blog-text {
margin-bottom: 90px;
}
/* end blog single */
/* contact page */
.contact h1 {
text-align: center;
margin-top: 90px;
margin-bottom: 50px;
}
.contact .contact-text {
text-align: center;
margin-bottom: 65px;
}
.contact form {
margin-bottom: 85px;
}
.contact form input, .contact form textarea, .search-form input {
color: #e3bebc;
border: 1px solid #e3bebc;
padding: 10px 20px;
width: 100%;
margin-bottom: 10px;
}
.contact form textarea {
resize: none;
line-height: normal;
}
.contact form .send-form {
text-align: center;
}
.contact form input[type="submit"] {
margin-top: 20px;
display: inline-block;
width: auto;
background-color: #e3bebc;
color: #4a4042;
border-color: #e3bebc;
text-transform: uppercase;
}
.contact form input[type="submit"]:hover {
color: #fff;
cursor: pointer;
}
.contact input::-webkit-input-placeholder, .contact textarea::-webkit-input-placeholder, .search-form input::-webkit-input-placeholder {
color: #e3bebc;
}
.contact input:-moz-placeholder, .contact textarea::-moz-placeholder, .search-form input:-moz-placeholder {
color: #e3bebc;
}
.contact input::-moz-placeholder, .contact textarea::-moz-placeholder, .search-form input::-moz-placeholder {
color: #e3bebc;
}
.contact input:-ms-input-placeholder, .contact textarea::-ms-input-placeholder, .search-form input:-ms-input-placeholder {
color: #e3bebc;
}
.contact input::-ms-input-placeholder, .contact textarea::-ms-input-placeholder, .search-form input::-ms-input-placeholder {
color: #e3bebc;
}
.contact img {
width: 80%;
height: auto;
}
.contact .personal-text {
font-size: 27px;
color: #4a4042;
position: relative;
}
.contact .quote {
position: relative;
}
.contact .quote:before, .contact .quote:after {
content: open-quote;
position: absolute;
top: -28px;
left: -16px;
color: #e3bebc;
font-size: 80px;
z-index: -1;
}
.contact .quote:after {
content: close-quote;
top: auto;
left: auto;
right: -14px;
bottom: -54px;
}
.contact .name {
color: #e3bebc;
font-style: italic;
}
/* end contact page */
/* page custom template */
.page-bg {
height: 500px;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.page-custom h1, .page-custom h2 {
margin-top: 100px;
margin-bottom: 50px;
text-align: center;
}
.page-custom .page-content-main {
text-align: center;
line-height: 2;
margin-bottom: 100px;
}
.page-custom img {
margin: auto;
display: block;
}
.page-custom .page-block-1 {
background-color: #e3bebc;
border: 1px solid #e3bebc;
margin-bottom: 20px;
}
.page-custom .page-block-1 h2 {
color: #fff;
}
.page-custom .page-block-2 {
border: 1px solid #e3bebc;
}
.page-custom .page-block-2 h2 {
color: #e3bebc;
}
.page-custom .page-block-3 h2 {
color: #e3bebc;
}
/* end page custom template */
/* normal page */
.index-page h1 {
margin-top: 80px;
}
.index-page .content {
margin-bottom: 80px;
}
/* end normal page */
/* search page */
.search-page h1 {
margin-top: 80px;
}
.search-page .results {
margin-bottom: 80px;
}
.search-page .search-form {
margin-top: 20px;
}
.search-form {
margin-top: 80px;
margin-bottom: 80px;
position: relative;
}
.search-form input, .search-form input.over-input[type="submit"] {
color: #e3bebc;
border: 1px solid #e3bebc;
}
/* end search page */
/* END CONTENT */
/* FOOTER */
.footer-bg {
position: relative;
background-color: #E3BEBC;
}
.footer-bg:before, .footer-bg:after, footer:before {
content: '';
display: inline-block;
background-color: #4a4042;
width: 20px;
height: 20px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
position: absolute;
bottom: -10px;
left: 50%;
margin-left: 20px;
}
.footer-bg:after {
margin-left: -40px;
}
footer:before {
margin: auto;
left: 0;
right: 0;
}
footer {
padding-top: 65px;
padding-bottom: 65px;
color: #4a4042;
}
footer h4 {
font-size: 22px;
color: #fff;
font-weight: 300;
}
footer ul {
padding: 0;
margin: 0;
}
footer li {
display: block;
padding: 5px 0px;
line-height: normal;
}
footer a {
color: #4a4042;
}
footer .menu-contact i {
color: #4a4042;
margin-right: 5px;
}
footer a.social {
background-color: #4a4042;
display: inline-block;
font-size: 15px;
width: 30px;
height: 30px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
margin-right: 15px;
text-align: center;
padding-top: 7px;
margin-top: 7px;
}
footer i {
color: #fff;
}
.footer-bg-2 {
background-color: #EED8D7;
}
.footer-bg-2 ul {
margin: 0;
padding: 0;
}
.footer-bg-2 ul li {
display: inline-block;
padding: 19px 0px 19px 0px;
}
.footer-bg-2 ul li:before {
content: '\2022';
margin-right: 5px;
margin-left: 5px;
}
.footer-bg-2 ul li:first-child:before {
display: none;
}
.footer-bg-2 ul li:first-child {
padding-left: 0px;
}
.footer-bg-2 ul li a {
color: #4a4042;
}
/* END FOOTER */
/* RESPONSIVE */
@media (max-width: 1199px) {
/* frontpage */
.block .border {
padding: 20px;
}
/* end frontpage */
}
@media (max-width: 991px) {
/* header */
ul.nav a {
padding: 20px 10px 0px 10px;
}
/* end header */
/* footer */
/* end footer */
/* frontpage */
.block .border {
padding: 10px;
min-height: 200px;
}
.newsletter input[type="email"] {
width: 100%;
}
.newsletter div.info .border {
padding: 10px;
min-height: 208px;
}
/* end frontpage */
}
@media (max-width: 767px) {
/* header */
nav .logo {
height: auto;
width: 100%;
}
ul.nav a {
padding: 8px 3px 0px 3px;
}
/* end header */
/* footer */
footer .footer-resp {
margin-top: 20px;
}
/* end footer */
/* frontpage */
.block .border {
padding: 10px;
min-height: auto;
}
.block div.text {
margin-bottom: 20px;
}
.blogs .blog h5 {
height: 44px;
overflow: hidden;
}
.newsletter {
margin-bottom: 40px;
}
.newsletter .background {
margin-bottom: 40px;
}
.newsletter div.info .border {
padding: 40px;
min-height: auto;
}
/* end frontpage */
/* blog archive */
.blogs .pagination {
float: left;
margin-bottom: 40px;
}
.blogs .pagination li:first-child {
margin-left: 0px;
}
/* end blog archive */
}
@media (max-width: 575px) {
/* wp admin bar */
#wpadminbar {
position: fixed!important;
}
/* end wp admin bar */
/* general */
body {
margin-top: 104px;
}
input[type="email"] {
width: 85%;
}
button[type="submit"], input.over-input[type="submit"] {
right: 12%;
}
/* end general */
/* header */
header {
margin-top: -104px;
position: fixed;
background-color: #fff;
z-index: 100;
width: 100%;
}
header.show {
padding-bottom: 35px;
}
.navbar {
padding-top: 0px;
padding-bottom: 0px;
}
.navbar .container {
margin-left: 0px;
margin-right: 0px;
}
header.show .border-resp {
border-bottom: 1px solid #e3bebc;
}
.border-resp:after {
content: ' ';
width: 100%;
display: block;
}
nav .logo {
max-height: 55px;
width: auto;
margin: 23px auto 23px auto;
display: block;
float: left;
}
nav .fa-bars {
float: right;
font-size: 45px;
color: #e3bebc;
margin-top: 30px;
}
ul.nav {
display: none;
text-align: center;
}
ul.nav li {
display: block;
}
ul.nav a {
padding: 8px 3px 0px 3px;
margin-bottom: 0px;
width: 100%;
border-bottom: 1px solid #e3bebc;
}
ul.nav li.active:after {
display: none;
}
/* end header */
/* footer */
footer .footer-resp-mobile {
margin-top: 20px;
}
/* end footer */
/* frontpage */
.front-bg {
height: 386px;
}
.front-page-main-block {
width: auto;
margin-left: 15px;
margin-right: 15px;
}
.newsletter .background {
padding: 20px;
}
.newsletter button[type="submit"], .newsletter input.over-input[type="submit"] {
right: 4%;
}
/* end frontpage */
}
/* END RESPONSIVE */