/*
 Theme Name:   107 ideas
 Theme URI:    https://107ideas.com/
 Description:  Custom theme for 107 ideas
 Author:       107 ideas
 Author URI:   https://107ideas.com/
 Template:     bricks
 Version:      1.1
 Text Domain:  hundredseven
*/

:root {
    --white: #f2f2d5;
    --black: #2c3d31;
    --blue: #308892;
    --purple: #d85be0;
    --pink: #efbdd1;
    --orange: #db8430;
    --yellow: #f0da47;
    --red: #f76055;
    --beige: #ccc9b2;
    --darkblue: #4766bd;
    --yellow: #f0da47;
    --green: #399524;
    --steelblue: #567675;
}

* {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

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

html {
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	background: var(--black) url('img/noise.png') 0 0 repeat;
	background-size: 175px 175px, cover;
	background-attachment: scroll;
}

a {
	background-color: transparent;
	font-weight: normal;
	text-decoration: none;
}

a:active, a:hover {
	outline: 0;
}

h1, h2, h3, h4 {
	font-family: "Grauna", Helvetica, Arial, sans-serif;
	line-height: 0.7em;
	text-align: center;
	font-weight: normal !important;
	margin: 0 0 0.2em 0;
}

small {
	font-size: 10px;
}

sub, sup {
	font-size: 10px;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sup {
	top: -5px;
}

sub {
	bottom: -3px;
}

img {
	border: 0;
	display: block;
}

figure {
	margin: 14px 40px;
}

hr {
	height: 0;
	border-style: none;
	border-bottom: 7px solid var(--black);
	margin: 0 auto;
}

pre {
	overflow: auto;
}

code, kbd, pre, samp {
	font-family: monospace;
	font-size: 14px;
}

button, input, optgroup, select, textarea {
	color: inherit;
	font: inherit;
	margin: 0;
}

button {
	overflow: visible;
}

button, select {
	text-transform: none;
}

button, html input[type="button"], input[type="reset"], input[type="submit"] {
	border: none;
	outline: none;
	border-radius: 0;
	-webkit-appearance: none;
	-moz-appearance: none;
	-o-appearance: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	-o-box-shadow: none;
	box-shadow: none;
	cursor: pointer;
}

button[disabled], html input[disabled], button[disabled]:hover, html input[disabled]:hover {
	cursor: default;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter: alpha(opacity=50);
	-moz-opacity: 0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
}

button::-moz-focus-inner, input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

input {
	outline: none;
	border: none;
	border-radius: 0;
	-webkit-appearance: none;
	-moz-appearance: none;
	-o-appearance: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	-o-box-shadow: none;
	box-shadow: none;
	line-height: normal;
}

input[type="checkbox"], input[type="radio"] {
	box-sizing: border-box;
}

input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

fieldset {
	border: none;
	margin: 0;
	padding: 0;
}

legend {
	border: 0;
	padding: 0;
}

textarea {
	border: none;
	outline: none;
	border-radius: 0;
	-webkit-appearance: none;
	-moz-appearance: none;
	-o-appearance: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	-o-box-shadow: none;
	box-shadow: none;
	overflow: auto;
}

optgroup {
	font-weight: bold;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

td, th {
	padding: 0;
}

.clear {
	clear: both;
}

h1.main_title {
    font-size: 5vw;
}
h1.main_title span {
    color: #ef532d;
    color: var(--blue);
}

/* slider */

.splide__track {
    border-radius: 21px;
    overflow: hidden;
}

#togglebar {
	position: fixed;
	display: block;
	z-index: 9999;
	width: 150px;
	height: 150px;
	top: calc(50% - 75px);
    left: -75px;
    transform: rotateZ(45deg);
    border-top-right-radius: 42px;
	overflow: hidden;
	background: var(--black) url('img/noise.png') 0 0 repeat;
	background-size: 175px 175px;
	background-attachment: scroll;
}

#toggle {
	position: absolute;
	width: 42px;
	height: 42px;
	border: 1px solid var(--white);
	top: calc(50% - 75px);
	margin-top: 24px;
	right: 24px;
	font-size: 0;
	color: transparent;
	z-index: 300;
	background: var(--white) url('img/noise.png') 0 0 repeat;
	background-size: 175px 175px;
	background-attachment: scroll;
	border-radius: 40px;
	transition: all 0.3s ease-in-out;
	transform: none;
	cursor: pointer;
	will-change: transform;
	transform: rotateZ(-45deg);
}

#toggle span {
    position: absolute;
    width: 20px;
    height: 5px;
    background-color: var(--black);
    border-radius: 7px;
    left: 10px;
    transform: rotate(0deg);
	transition: all 0.3s ease-in-out;
	will-change: left, top, width, transform;
}

#toggle span:nth-child(1) {
    top: 10px;
}

#toggle span:nth-child(2) {
    top: 17px;
}

#toggle span:nth-child(3) {
    top: 24px;
}

#toggle:hover span:nth-child(1),
#brx-header.active #toggle span:nth-child(1), 
#brx-header.active #toggle:hover span:nth-child(1), 
#brx-header.active #toggle:active span:nth-child(1) {
    transform: rotate(45deg);
    top: 13px;
    width: 16px;
    left: 17px;
}

#toggle:hover span:nth-child(2),
#brx-header.active #toggle span:nth-child(2), 
#brx-header.active #toggle:hover span:nth-child(2), 
#brx-header.active #toggle:active span:nth-child(2) {
    width: 22px;
    left: 8px;
}

#toggle:hover span:nth-child(3),
#brx-header.active #toggle span:nth-child(3), 
#brx-header.active #toggle:hover span:nth-child(3), 
#brx-header.active #toggle:active span:nth-child(3) {
    transform: rotate(-45deg);
    top: 21px;
    width: 16px;
    left: 17px;
}

#toggle:hover span,
#brx-header.active #toggle:hover span {
    transition: all 0.15s ease-in-out;
}

#brx-header.active #toggle, #brx-header.active #toggle:hover, #brx-header.active #toggle:active {
	transform: rotate(-225deg);
}

/* Buttons */

.bricks-button {
    position: relative !important;
    margin-top: 5px !important;
    top: 0 !important;
    box-shadow: inset 0px -7px 0px 0px var(--blue) !important;
    transition: all .2s !important;
    padding-bottom: 17px !important;
    border-radius: 28px !important;
}

.bricks-button:hover {
    color: var(--white) !important;
}

.bricks-button:active {
    margin-top: 4px !important;
    top: 4px !important;
    box-shadow: inset 0px -3px 0px 0px var(--blue) !important;
    padding-bottom: 13px !important;
}

.submit-button-wrapper {
    height: 70px;
}

/* Logo */

svg#logo :not([fill="none"]) {
	-webkit-transition: all 0.25s ease-in-out;
	-moz-transition: all .25s ease-in-out;
	-o-transition: all .25s ease-in-out;
	-ms-transition: all .25s ease-in-out;
	transition: all .25s ease-in-out;
}

svg#logo.active :not([fill="none"]) {
    fill: var(--white) !important;
}

/* Menu */

#menu {
    display: block;
	position: fixed;
	overflow: hidden;
	z-index: 9998;
	height: 100dvh;
	width: 100vw;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	transform: translateX(-100vw);
	color: var(--white);
	/* Transition */
	-webkit-transition: all 0.25s ease-in-out;
	-moz-transition: all .25s ease-in-out;
	-o-transition: all .25s ease-in-out;
	-ms-transition: all .25s ease-in-out;
	transition: all .25s ease-in-out;
	margin: 0;
	padding: 0;
}

#brx-header.active #menu {
	transform: translateX(0);
}

#menu-content {
	position: absolute;
	display: flex;
	justify-content: center;
	width: 100vw;
	height: 100%;
	overflow-y: scroll;
	padding: 42px 42px 42px 142px;
}

/* Nav */

nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	line-height: 0;
}

nav ul li a {
	display: inline-block;
	text-decoration: none;
}

#primary nav {
}

#primary nav ul {
	padding-bottom: 21px;
}

#primary nav ul li {
	margin: 0;
}

#primary nav ul li a {
	position: relative;
	font-size: 8vw;
	line-height: calc(4px + 1.6ex);
	font-weight: normal;
	margin: 0 0 0.2em 0;
	padding: 14px 14px;
	/* Transition */
	-webkit-transition: .25s;
	-moz-transition: .25s;
	-o-transition: .25s;
	-ms-transition: .25s;
	transition: .25s;
}

#primary nav ul li a, #primary nav ul li a:link, #primary nav ul li a:visited {
	color: var(--white);
}

#primary nav ul li a:hover, #primary nav ul li a:active {
	color: var(--black);
}

/* Pagina */

main#brx-content {
	width: 100vw;
	padding: 0;
	overflow: hidden;
}

.featured {
	position: absolute;
	right: 42px;
	bottom: 42px;
}

/* Colors */

.white {
	background: var(--white) url('img/noise.png') 0 0 repeat;
	background-size: 175px 175px, cover;
	background-attachment: scroll;
}

.red {
	background: url('img/noise.png') 0 0 repeat, linear-gradient(to right, var(--red), #e83a2d);
	background-size: 175px 175px, cover;
	background-attachment: scroll;
}

.pink {
	background: url('img/noise.png') 0 0 repeat, linear-gradient(to right, var(--pink), #efc5bd);
	background-size: 175px 175px, cover;
	background-attachment: scroll;
}

.blue {
	background: url('img/noise.png') 0 0 repeat, linear-gradient(to right, #3e7756, var(--blue));
	background-size: 175px 175px, cover;
	background-attachment: scroll;
	color: #f2f2d4;
}

.orange {
	background: url('img/noise.png') 0 0 repeat, linear-gradient(to right, var(--orange), #e8a360);
	background-size: 175px 175px, cover;
	background-attachment: scroll;
}

.beige {
	background: url('img/noise.png') 0 0 repeat, linear-gradient(to right, var(--beige), #e2cca2);
	background-size: 175px 175px, cover;
	background-attachment: scroll;
}

.darkblue {
	background: url('img/noise.png') 0 0 repeat, linear-gradient(to right, var(--darkblue), #5d67c1);
	background-size: 175px 175px, cover;
	background-attachment: scroll;
}

.yellow {
	background: url('img/noise.png') 0 0 repeat, linear-gradient(to right, var(--yellow) 60%, #dfd296 100%);
	background-size: 175px 175px, cover;
	background-attachment: scroll;
}

.green {
	background: url('img/noise.png') 0 0 repeat, linear-gradient(to right, var(--green) 60%, #80a54f 100%);
	background-size: 175px 175px, cover;
	background-attachment: scroll;
}

.steelblue {
	background: url('img/noise.png') 0 0 repeat, linear-gradient(to right, var(--steelblue), #839782);
	background-size: 175px 175px, cover;
	background-attachment: scroll;
	color: var(--white);
}

.purple {
	background: url('img/noise.png') 0 0 repeat, linear-gradient(to right, var(--purple), #f38bd0);
	background-size: 175px 175px, cover;
	background-attachment: scroll;
}

.gray {
    background: url('img/noise.png') 0 0 repeat, linear-gradient(to right, #394a3e, var(--black));
	background-size: 175px 175px, cover;
	background-attachment: scroll;
	color: var(--white);
}

.black {
    background: var(--black) url('img/noise.png') 0 0 repeat;
	background-size: 175px 175px, cover;
	background-attachment: scroll;
	color: var(--white);
}

/* Footer */

.heart {
  --heart-size: 21px;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: var(--heart-size);
  height: calc(var(--heart-size) * 0.9);
  animation: heartbeat 5s infinite;
  margin-left: -3.5px;
}

.heart::before,
.heart::after {
  position: absolute;
  content: "";
  left: 50%;
  top: 0;
  width: 50%;
  height: 80%;
  background: #e83a2d;
  border-radius: calc(var(--heart-size) / 2) calc(var(--heart-size) / 2) 0 0;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}

.heart::after {
  left: 0;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}

@keyframes heartbeat {
  0%   { transform: scale(0.75); }
  20%  { transform: scale(1); }
  40%  { transform: scale(0.75); }
  50%  { transform: scale(1); }
  80%  { transform: scale(0.75); }
  100% { transform: scale(0.75); }
}

#brx-footer a {
    color: var(--black);
}

.black #brx-footer nav ul li a,
.gray #brx-footer nav ul li a,
.steelblue #brx-footer nav ul li a {
    color: var(--white);
}

@keyframes heartbeat {
    
    0% {
        transform: scale(0.75);
    }
    5% {
        transform: scale(1);
    }
    10% {
        transform: scale(0.75);
    }
    15% {
        transform: scale(1);
    }
    30% {
        transform: scale(0.75);
    }
    100% {
        transform: scale(0.75);
    }
}

/* Media Queries */

@media only screen and (max-width: 767px) {
    
    html {
        scroll-padding-top: 0;
    }
    
    main#brx-content {
	    width: 100%;
	}
	
	.brx-header #brx-header {
        width: 100px !important;
        height: 100px !important;
    }
    
    #brx-header.active {
        transform: none !important;
        position: fixed !important;
        top: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        overflow: visible !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    #togglebar {
        position: absolute;
	    width: 100px !important;
	    height: 100px !important;
	    top: -50px;
        left: calc(50% - 50px);
        transform: rotateZ(45deg);
        border-radius: 0;
        border-bottom-right-radius: 36px;
    }
    
    #toggle {
    	width: 36px;
    	height: 36px;
    }
    #toggle span {
        left: 7px;
    }
    
    #toggle span:nth-child(1) {
        top: 8px;
    }
    
    #toggle span:nth-child(2) {
        top: 15px;
    }
    
    #toggle span:nth-child(3) {
        top: 22px;
    }
    
    #toggle:hover span:nth-child(1),
    #brx-header.active #toggle span:nth-child(1), 
    #brx-header.active #toggle:hover span:nth-child(1), 
    #brx-header.active #toggle:active span:nth-child(1) {
        top: 11px;
        left: 15px;
    }
    
    #toggle:hover span:nth-child(2),
    #brx-header.active #toggle span:nth-child(2), 
    #brx-header.active #toggle:hover span:nth-child(2), 
    #brx-header.active #toggle:active span:nth-child(2) {
        left: 6px;
    }
    
    #toggle:hover span:nth-child(3),
    #brx-header.active #toggle span:nth-child(3), 
    #brx-header.active #toggle:hover span:nth-child(3), 
    #brx-header.active #toggle:active span:nth-child(3) {
        top: 19px;
        left: 15px;
    }

    #menu {
        width: 100vw;
        top: 0;
	    left: 0;
	    height: 100dvh;
    }
    
    #menu-content {
    	padding: 128px 42px 70px 42px;
    }
    
    #primary nav ul li a {
	    font-size: 42px;
    }
    
    h1.main_title {
        font-size: 10vw !important;
    }
    
    h1 {
        font-size: 3rem !important;
        text-align: left;
    }
    
    h2, h3 {
        font-size: 2.0rem !important;
        text-align: left;
    }
    
    h4 {
        font-size: 1.6rem !important;
        text-align: left;
    }
    
    h5, h6 {
        font-size: 1.6rem !important;
        text-align: left;
    }
}

@media only screen and (min-width: 768px) {
    #brx-header {
        transform: none !important;
        position: fixed !important; /* of sticky/relative — zie hieronder */
        top: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1599px) {
    
    #primary nav ul li a {
        font-size: 7vw;
        line-height: calc(4px + 1.2ex);
    }
}

@media only screen and (min-width: 1600px) {
    
    #primary nav ul li a {
	    font-size: 140px;
    }
}