/*
 Theme Name:   Petra digitaal en Analoog
 Theme URI:    
 Description:  Thema voor Petra digitaal en Analoog
 Author:       Sjaak Verwijs
 Author URI:   https://www.svwebdesign.nl
 Template:     generatepress
 Version:      1

Donker paars - #A987B7
Midden paars - #d4c3db
Licht paars - #F1ECF5
Grijs - #545c72
*/
@font-face {
    font-family: 'Avenir Book';
    src: url('fonts/Avenir-Book.eot');
    src: url('fonts/Avenir-Book.eot?#iefix') format('embedded-opentype'),
        url('fonts/Avenir-Book.woff2') format('woff2'),
        url('fonts/Avenir-Book.woff') format('woff'),
        url('fonts/Avenir-Book.ttf') format('truetype'),
        url('fonts/Avenir-Book.svg#Avenir-Book') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Avenir Medium';
    src: url('fonts/Avenir-Medium.eot');
    src: url('fonts/Avenir-Medium.eot?#iefix') format('embedded-opentype'),
        url('fonts/Avenir-Medium.woff2') format('woff2'),
        url('fonts/Avenir-Medium.woff') format('woff'),
        url('fonts/Avenir-Medium.ttf') format('truetype'),
        url('fonts/Avenir-Medium.svg#Avenir-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'All Things Pink Skinny';
    src: url('fonts/AllThingsPinkSkinny.eot');
    src: url('fonts/AllThingsPinkSkinny.eot?#iefix') format('embedded-opentype'),
        url('fonts/AllThingsPinkSkinny.woff2') format('woff2'),
        url('fonts/AllThingsPinkSkinny.woff') format('woff'),
        url('fonts/AllThingsPinkSkinny.ttf') format('truetype'),
        url('fonts/AllThingsPinkSkinny.svg#AllThingsPinkSkinny') format('svg');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

html {overflow-x: hidden;}
body {margin:0px; font-family: 'All Things Pink Skinny'; color:#545c72;}
.top-bar .inside-top-bar {font-family: 'Avenir Book'; padding-bottom: 0px;}
h1 {font-size: 48px;}
h2 {font-size:40px;}
h3 {font-size:32px;}
.top-bar .inside-top-bar a, .top-bar .inside-top-bar a:visited {text-decoration: none; font-size:16px;}
.top-bar .inside-top-bar a:hover {text-decoration: underline;}
.inside-header {padding-top: 0px;}
.main-navigation .main-nav ul li a, .main-navigation .main-nav ul li a:visited {font-size: 20px; font-weight: 600;}
.main-navigation .main-nav ul ul li a {font-size:18px;}

.separate-containers .site-main {margin:0px;}
.separate-containers .inside-article {font-family: 'Avenir Book'; padding: 0px;}
h1, h2, h3 {font-family: 'Avenir Medium';}
.wp-block-button .wp-block-button__link {border-radius: 0px; font-family: 'All Things Pink Skinny'; font-size:20px;}
.kop {font-size:27px; font-weight: 400; color:#A987B7;}
.imgborder img {border:1px solid #A987B7;}
.contactblok {padding: 20px; padding-left: 100px;}
.contactblok p {margin-bottom: 10px;}
.contactblok a, .contactblok a:visited {text-decoration: none;}
.contactblok a:hover {text-decoration: none;}

.review {padding:10px;}

/* pagina breunaartje */
.bru1 {font-size:40px; margin-bottom: 0px;}
.bru2 {font-size:40px; font-family: 'Avenir Medium'; margin-bottom: 0px;}
.bru3 {font-size: 26px;}
.bru4 {font-size:24px; text-transform: uppercase;}
.bru5 {font-size:24px;}
.bru6 {font-size:24px; margin-bottom: 0px;}
.bru7 {font-size:24px;}
.bru7 a, .bru7 a:visited {color:#A987B7; text-decoration: none;}
.bru7 a:hover {text-decoration: underline;}
.bru8 {font-size:22px;}
.bru9 {font-size:22px; margin-bottom: 0px;}
.bruknop a, .bruknop a:visited {font-size: 30px !important;}
.brutabel table, .brutabel th, .brutabel td {border:none;}
.brutabel th {text-align: left;}
.brutabel th, .brutabel td {color:#A987B7; font-size:24px; padding: 3px; width:30%;}
.brutabel th:last-child {width:40%;}
.brutabel thead {border-bottom: 2px solid #A987B7;}
.brutabel2 table {border:none;}
.brutabel2 th {text-align: left;}
.brutabel2 th, .brutabel2 td {color:#A987B7; font-size:24px; padding: 3px; border:none;}
.brutabel2 thead {border-bottom: 1px solid #545c72;}
.brutabel2 th:first-child, .brutabel2 td:first-child {text-align: center; width:20%;}
.brutabel2 th:last-child, .brutabel2 td:last-child {width:80%;}
.brublokuitgaven {padding-left: 40px; padding-right: 40px;}
.brugroeponder .wp-block-columns {margin-bottom: 0px;}

/* pagina breunaartje contactformulier */
table.brucontacttable {width:100%; border:none;}
table.brucontacttable td {width:50%; border:none; vertical-align: top; padding:20px; padding-left: 50px;}
table.brucontacttable td.brucontacttd1 {background-color:#A987B7; color:#fff; font-size:20px; padding-left: 30px; padding-right: 30px;}
table.brucontacttable td.brucontacttd1 .wpcf7-list-item-label {display: inline-block; margin-left: 30px; margin-top:-30px;}
table.brucontacttable input, table.brucontacttable textarea {border:1px solid #A987B7; background-color: #fff; width:100%; padding:3px;}
table.brucontacttable textarea {height:100px;}
table.brucontacttable input[type=radio], table.brucontacttable input[type=checkbox] {width:20px;}
table.brucontacttable input[type=submit] {background-color:#A987B7; color:#fff; border:none; font-family: 'All Things Pink Skinny'; width:200px; font-size:24px; margin-top:10px;}
.wpcf7 form.sent .wpcf7-response-output, .wpcf7 form.invalid .wpcf7-response-output {border:3px solid #A987B7 !important; background-color: #fff !important;}

/* contactformulier */
.contactform {width:100%; border:none;}
.contactform td {border:none; padding: 10px 0px; padding-right: 10px;}
.contactform input {border:1px solid #A987B7; background-color: #fff; width:100%;}
.contactform .contactformbtn1 {background-color:#A987B7; color:#fff; border:none; font-family: 'All Things Pink Skinny'; width:200px; font-size:20px;}
.contactform .contactformbtn2 {background-color: #545c72; color:#fff; border:none; font-family: 'All Things Pink Skinny'; width:200px; font-size:20px;}
.contactform .contactformbtn2:hover {background-color: #545c72;}

/* portfolio */
.portfolio {position:relative; display:block; background-color:#fff; border:1px solid #A987B7; padding:10px; padding-bottom: 5px;}
.portfolio .overlay {display:none;}
.portfolio:hover .overlay {
    width:100%;
    height:100%;
    background:#fff;
    position:absolute;
    top:0;
    left:0;
    display:block;
    text-align:center;
    opacity: 0;
    transition: opacity .5s ease-in-out;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}
.portfolio:hover .overlay:hover {opacity: 1; transition: opacity .5s ease-in-out;}
.portfolio .overlaytop {position:absolute; top:-20px; left:50%; margin-left:-140px; width:280px; background-color:#A987B7; color:#fff; display:block; padding:10px; font-size:16px;}
.portfolio .overlay img {max-height:280px; width:auto; margin-top:30px; vertical-align: middle;}

.portfoliovideo {padding:20px; width:100%; max-width:530px; float:right;}
.portfoliotext {text-align:left; padding:20px; width:100%; max-width:530px; text-align:center;}
.wpcp-carousel-wrapper.wpcp-wrapper-235, .wpcp-carousel-wrapper.wpcp-wrapper-248 {max-width: 500px; float: right;margin-right: 20px;}
.wcp-video-iframe-wrapper {max-height: 500px !important;}

/* footer */
.inside-site-info {padding:20px 0px; align-items: flex-start !important; justify-content: left !important;}
.copyright-bar {font-family: 'Avenir Medium'; font-size:13px; display: block; text-align: left !important; position: relative; width:100%;}
footer:not(.footer-bar-active) .copyright-bar {margin: 0px !important;}
.copyright-bar a, .copyright-bar a:visited {text-decoration: none;}
.copyright-bar a:hover {text-decoration: underline;}
.copyright-bar-right {position: absolute; right:-60px; top:-62px; width:230px; height:80px; display:block;}
.copyright-bar-right img {max-width: 110px;}

.mobile {display:none;}
@media only screen and (max-width: 768px) {
    .mobile {display:block;}
    .nomobile {display:none;}
    .gp-icon svg {height: 2em; width: 2em;}
    .imgmobile {text-align: center;}
    .imgmobile img {margin-left: 1%; margin-right: 1%; max-width: 98%;}
    .kop {font-size:22px;}
    .wp-block-buttons > .wp-block-button {margin: 0 auto;}
    .contactform .contactformbtn1 {margin-bottom: 20px;}
    .contactblok {padding-left: 35px;}
    .review {margin-top: 50px !important;}

    .bru1, .bru2 {font-size: 24px;}
    .bru3, .bru4, .bru5, .bru6, .bru7, .bru8, .bru9 {font-size: 20px;}
    .brutabel th, .brutabel td {font-size: 16px;}
    .brutabel2 th, .brutabel2 td {font-size: 16px;}
    .bruknop a, .bruknop a:visited {font-size: 24px !important;}
    .brublokuitgaven {padding-left: 10px; padding-right: 10px;}

    table.brucontacttable td {display:block; width:100%; padding-left: 20px;}
    table.brucontacttable td table.naamtabel td {display: table-cell;}
    table.brucontacttable td.brucontacttd1 {padding-left: 10px; padding-right: 10px;}
    table.brucontacttable td.brucontacttd3 {text-align: center; padding:10px;}

    .portfoliovideo {float: none;}
    .wpcp-carousel-wrapper.wpcp-wrapper-235, .wpcp-carousel-wrapper.wpcp-wrapper-248  {float: none;margin-right: 0px;}

    .copyright-bar {padding: 10px; padding-top: 30px;}
    .copyright-bar-right {right:0px;}
}