/*
* Pocketgrid
*/

html {
    font-size: 62.5%;
}

*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    max-width: 1600px;
    /* hoeft niet eens per se denk ik */
    margin: 0 auto;
    font-family: 'Muli', sans-serif;
    color: #000000;
    /* Eventuel Cinta: Achtergrondafbeelding met alleen CSS */
    background-color: #ffffff;
    /* Eventueel: Cinta: Achtergrondafbeelding hele website */
}

.handschrift {
    font-family: 'Handlee', cursive, 'Open Sans', sans-serif;
    font-size: 30px;
    text-align: right;
    padding-right: 15px;
    padding-top: 10%;
    color: #999;
}

@media (min-width: 1000px) {
    .handschrift {
        font-family: 'Handlee', cursive, 'Open Sans', sans-serif;
        font-size: 30px;
    }
}

@media (min-width: 1200px) {
    .handschrift {
        font-family: 'Handlee', cursive, 'Open Sans', sans-serif;
        font-size: 40px;
    }
}

.gewoon {
    width: 75%;
    max-width: 1280px;
    margin: 0 auto;
}


/*Hamburger*/

i.fa.fa-bars.fa-2x {
    color: #80230F;
}

.headerbreed {
    background: yellow;
}

.header {
    padding: 0 10px 0 10px;
}

.headerlinks {
    text-align: center;
    padding: 5px 0 0 0;
}


/* Buttons */

.infobutton {
    background-color: #D99A27;
    border-radius: 6px;
    border: 1px solid #F7CE96;
    display: inline-block;
    color: #FFFFFF !important;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    /*font-weight: bold;*/
    padding: 6px 14px;
    text-decoration: none;
    border-bottom: 0px dashed !important;
}

.infobutton:hover {
    background-color: #F7CE96;
    color: #000000 !important;
}

.infobutton:hover a {
    color: #000000 !important;
}

.infobutton:active {
    position: relative;
    top: 1px;
}


/* Mobiel */

.content {
    padding: 0 0 1.25em 10px;
    font-size: 1.4rem;
}


/* Tablet versie: */

@media (min-width: 480px)and (max-width: 989px) {
    /* 640, 960 */
    .headerlinks {
        width: 30%;
        padding: 5px 0 0 0;
    }
    .headerrechts {
        width: 70%;
        vertical-align: middle;
        padding-left: 20px;
    }
    .content {
        width: 80%;
        font-size: 1.7rem;
    }
    .links {
        width: 20%;
    }
    .linkerkolom {
        padding-left: 1.0rem;
    }
}


/* Desktop version:   header and nav side-by-side, content and links side-by-side */

@media (min-width: 990px) {
    /* > 960 */
    .headerlinks {
        width: 35%;
        padding: 5px 0 0 1.5rem;
    }
    .headerrechts {
        width: 65%;
        padding-left: 20px;
    }
    .content {
        width: 75%;
        padding: 0 26px 0 1px;
        font-size: 1.7rem;
    }
    .links {
        width: 25%;
    }
}

.terzijde1 {
    font-size: 1.3rem;
    margin: 10px 0 10px 0;
    padding: 6rem 2.5rem 1.9rem 1rem;
}

.terzijde2 {
    font-size: 1.3rem;
    padding: 0.6rem 2.6rem 0.6rem 0;
    margin-bottom: 10px;
}


/* Typografie algemeen
–––––––––––––––––––––––––––––––––––––––––––––––––– */

h1,
h2,
h3 {
    line-height: 1.45;
}

p {
    line-height: 1.50;
}

.content h1 {
    font-size: 3rem;
    /* van http://materializecss.com/helpers.html Kopje afkorten */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #896E69;
}

.content h1:hover {
    /* van http://www.willmaster.com/library/web-development/hover-to-view-hidden-text-overflow.php */
    overflow: visible;
    width: auto;
    white-space: normal;
}

.content h2 {
    font-size: 1.8rem;
}

.content h3 {
    font-size: 1.8rem;
}

.content a {
    color: #D99A27;
    font-weight: bold;
    text-decoration: none;
}


/* Hier bij niet gebruik Flowtype de font-sizes bij tablet en desktop */

img {
    max-width: 100%;
    height: auto;
    border-radius: 5px 5px;
}

.content img {
    max-width: 100%;
    height: auto;
    border-radius: 10px 25px;
    background: #ffffff;
    padding: 0px;
    -webkit-box-shadow: 7px 7px 10px 0px rgba(50, 50, 50, 0.63);
    box-shadow: 7px 7px 10px 0px rgba(50, 50, 50, 0.63);
}


/*Om te voorkomen dat de opsommingstekens door een afbeelding zichtbaar zijn */

.content ul {
    overflow: hidden;
}

.content li {
	line-height: 1.50;
}

.content td {
    vertical-align: top;
}


/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */

hr {
    margin-top: 1rem;
    margin-bottom: 2.2rem;
    border-width: 0;
    border-top: 1px solid #E1E1E1;
}

.cta {
    background: #80230f;
    color: #FFFEFF !important;
    border-radius: 0.8em;
    font-size: 1.5rem;
    padding: 0.4em 0.5em 0.4em 0.5em;
    /* 2 en 8 px */
    -webkit-transition: background-color .5s;
    transition: background-color .5s;
    text-decoration: none;
}


/* a.cta:hover{ position: relative;
             top: -4px;}  */

a.cta:hover {
    color: #ffffff !important;
    background-color: #C99E10;
    -webkit-transition: background-color .5s;
    transition: background-color .5s;
    text-decoration: none;
}

.cta a {
    text-decoration: none;
}

.logo {
    text-indent: -9999px;
    color: #FFFFFF;
    margin-top: 40px;
    display: inline-block;
    vertical-align: top;
}

.hmenu {
    background-color: #0D324D;
}


/* ----------------------------------------------FOOTER */

.footer {
    background-color: #896E69;
    color: #f9f9ff;
    font-size: 1.1rem;
    border-radius: 5px;
    margin-bottom: 10px;
}

.footer a {
    text-decoration: none;
    color: #f9f9ff;
    font-weight: 800;
}

.footer h2 {
    color: #F9f9ff;
    font-size: 1.8rem;
    line-height: 0.2rem;
}

.footer h3 {
    color: #F9f9ff;
    font-size: 1.8rem;
    line-height: 0.2rem;
}

.footer h4 {
    font-size: 1.8rem;
    line-height: 0.2rem;
    color: #C9F9FF;
}

.footervak1,
.footervak2,
.footervak3 {
    padding: 1.0rem 0.8rem 1.4rem 0.8rem;
}


/*
 *
 *
 * Footer formulieren
 *
 */

.indicates-required {
    font-size: 0.9rem;
}

.footer .button {
    background-color: white;
    color: #d99a27;
    border: 1px solid #af933e;
    -webkit-transition: background-color .5s;
    transition: background-color .5s;
}

.footer .button:hover {
    background-color: #dbc172 !important;
    border: 1px solid #af933e;
    color: #fff !important;
}

.footer input,
.footer textarea {
    margin-bottom: 10px !important;
}


/*
 *
 *
 * Footer speciaal tablet en hoger
 *
 */

@media only screen and (min-width: 768px) {
    /* 768px */
    .footervak1,
    .footervak2,
    .footervak3 {
        width: 33.333333%;
    }
    .footer {
        font-size: 1.4rem;
    }
}


/* CAPTION http://www.seblod.com/community/forums/fields-plug-ins/how-to-display-image-caption-from-image-title-attribute

AFSTEMMEN MET SLIDERCAPTION */

.caption {
    font-size: 1.4rem;
    color: red;
    font-style: italic;
    padding-bottom: 2.5rem;
}


/*
 *
 *
 * DIVERSEN
 *
 */

.numaga {
    text-align: center;
    padding: 10px;
    margin: 0;
    border-top: 1px solid #ddd;
    color: #999;
    font-size: 1.2rem;
    text-shadow: 0px 1px 1px #fff;
    position: relative;
    top: 0;
    left: 0;
    background: #fff;
    letter-spacing: 0.1em;
}

.numaga a:link,
.numaga a:visited,
.numaga a:active {
    color: #999;
    text-decoration: none;
}

.adres {
    text-align: right;
    padding-right: 15px;
    font-size: 1rem;
    color: #999;
}

.adres a {
    color: #999;
}

@media (min-width: 768px) {
    .adres {
        font-size: 1.5rem;
        padding-top: 10%;
    }
}


/*
 *
 *
 * Responsive Google maps; voor de code: <div class="google-maps">
 *
 */

.google-maps {
    position: relative;
    padding-bottom: 75%;
    /* This is the aspect ratio */
    height: 0;
    overflow: hidden;
}

.google-maps iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 90% !important;
    height: 90% !important;
    border-radius: 8px;
    /* eigen toevoeging */
}


/*
 *
 *
 * Niet op ....
 *
 */

@media (max-width: 479px) {
    .no-phone {
        display: none;
    }
}

@media (min-width: 480px)and (max-width: 990px) {
    .no-tablet {
        display: none;
    }
}


/* Code voor de mobiele telefoon */

@media only screen and (min-width: 601px) {
    .hide-on-med-and-up {
        display: none !important;
    }
}

@media only screen and (max-width: 600px) {
    .show-on-med-and-up {
        display: none !important;
    }
}

#ui-preview {
    border: 5px solid #ddd;
    margin: 30px 0;
    display: block;
}


/* DOCUMENT-ICONEN */


/* a[href$='.doc'], a[href$='.docx'] {    background: transparent url(/images/links/icon_word.gif) center right no-repeat;    padding-right: 18px;}a[href$='.xls'], a[href$='.xlsx'] {    background: transparent url(/images/links/icon_excel.gif) center right no-repeat;    padding-right: 18px;}a[href$='.zip'] {    background: transparent url(/images/links/icon_zip.gif) center left no-repeat;    padding-left: 18px;} */

a[href$='.pdf'] {
    background: transparent url(../images/links/pdficon-2.gif) center left no-repeat;
    padding-left: 18px;
}

a[href $='.pdf'] {
    padding-right: 18px;
    background: transparent url(../../../images/iconpdf.gif) no-repeat center right;
}


/*
 *
 *
 * Social media; https://simplesharingbuttons.com/ Gemeenschappelijk is de CSS
 *
 */

ul.share-buttons {
    list-style: none;
    padding: 0;
}

ul.share-buttons li {
    display: inline;
}


/*
 *
 *
 * NAVIGATIE
 *
 */


/* KINDERMENU  */

.menu h4 {
    font-size: 2rem;
}

.kindermenu {
    vertical-align: top;
    padding-top: 1.88rem;
    font-size: 1.5rem;
}

.kindermenu a {
    text-decoration: none;
    color: #7F1C5F;
    font-weight: 400;
}

.kindermenu a:hover {
    color: #959595;
}

.kindermenu .menu-current a {
    color: #7E7E7E;
}

.kindermenu li {
    list-style: none;
}

.kindermenu ul {
    padding-left: 1px;
    margin-top: 1px;
}


/* ------------------------------------------Menu (welk dan ook))bovenin vast (responsief) */

.fixed-nav-bar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
    height: 50px;
    background-color: #00a087;
}


/* -------------------------------------------SMARTMENU voor IE8 */

#menu-button {
    font-size: 1.7rem;
    color: blue;
}

#main-menu.collapsed {
    display: none;
}

@media (min-width: 768px) {
    /* hide the button in desktop view */
    #menu-button {
        display: none;
    }
    /* always show the menu in desktop view */
    #main-menu.collapsed {
        display: block;
    }
}

@media (min-width: 768px) {
    #main-menu {
        position: relative;
        z-index: 9999;
    }
    #main-menu ul {
        width: 12em;
        /* fixed width only please - you can use the "subMenusMinWidth"/"subMenusMaxWidth" script options to override this if you like */
    }
}

.nieuwsbrief {
    border-left: 5px solid #8a9f8b;
    padding: 0 10px 0 5px;
    margin-left: 0.63rem;
}

.nieuwsbrief input {
    border: none;
}

ul.share-buttons {
    list-style: none;
    padding: 0;
}

@font-face {
    font-family: 'si';
    src: url('http://www.tantric-heart.nl/socicon.eot');
    src: url('http://www.tantric-heart.nl/socicon.eot?#iefix') format('embedded-opentype'), url('http://www.tantric-heart.nl/socicon.woff') format('woff'), url('http://www.massagefromtheheart.nl/socicon.ttf') format('truetype'), url('http://www.massagefromtheheart.nl/socicon.svg#icomoonregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family: si;
        src: url(http://www.tantric-heart.nl/socicon.svg) format(svg);
    }
}

.soc {
    overflow: hidden;
    margin: 0;
    padding: 0;
    list-style: none;
}

.soc li {
    display: inline-block;
    *display: inline;
    zoom: 1;
}

.soc li a {
    font-family: si!important;
    font-style: normal;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: .1s;
    transition: .1s;
    -webkit-transition-property: transform;
    -webkit-transition-property: -webkit-transform;
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    overflow: hidden;
    text-decoration: none;
    text-align: center;
    display: block;
    position: relative;
    z-index: 1;
    width: 35px;
    height: 35px;
    line-height: 35px;
    font-size: 19px;
    border-radius: 96px;
    margin-right: 12px;
    color: #ffffff;
    background-color: none;
}

.soc a:hover {
    z-index: 2;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.soc-icon-last {
    margin: 0 !important;
}

.soc-twitter {
    background-color: #4da7de;
}

.soc-twitter:before {
    content: '\e040';
}

.soc-facebook {
    background-color: #3e5b98;
}

.soc-facebook:before {
    content: '\e041';
}

.footer img .inline {
    display: inline;
}


/* Responsieve tabel */

.rwd-table {
    margin: 0.9rem 0.9rem;
    min-width: 300px;
    background: #ffffff;
    color: #000;
    overflow: hidden;
}

.rwd-table tr {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    border-color: #ffffff;
}

.rwd-table th {
    display: none;
}

.rwd-table td {
    display: block;
}

.rwd-table th,
.rwd-table td {
    text-align: left;
}

.rwd-table td:first-child {
    padding-top: .1em;
}

.rwd-table td:last-child {
    padding-bottom: .1em;
}

.rwd-table td:before {
    content: attr(data-th) ": ";
    font-weight: bold;
    width: 0.1em;
    display: inline-block;
}

.rwd-table th,
.rwd-table td:before {
    color: #ffffff;
}

@media (min-width: 480px) {
    .rwd-table td:before {
        display: none;
    }
    .rwd-table th,
    .rwd-table td {
        display: table-cell;
    }
    .rwd-table th:first-child,
    .rwd-table td:first-child {
        padding-left: 0;
    }
    .rwd-table th:last-child,
    .rwd-table td:last-child {
        padding-right: 0;
    }
    .rwd-table th,
    .rwd-table td {
        text-align: left;
    }
}