/*!
Theme Name: 	Bootsrap on WordPress
Theme URI: 		https://bootstraponwordpress.com/
Description: 	Bootstrap 5 on Wordpress
Version: 		4.3.0
Author: 		Babobski
Author URI: 	https://www.babobski.nl
Tags: 			babobski, bootstrap, basic theme
*/

html { font-size: 16px; } 
.vert-center { position: relative; top: 50%; transform: translateY(-50%); }
.spacer { clear: both; }

.montserrat {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

h1, h2, h3, h4, h5, h6 {
	font-family: "Montserrat", sans-serif;
	font-weight: 400;
	text-transform: uppercase;
	color: #747779;
}

p, li {
	font-family: "Montserrat", sans-serif;
	font-weight: 400;
	color: #747779;
	font-size: 1.125rem;
}

.simple-top-bar {
	width: 100%;
	background-color: white;
	padding-top: 1rem;
	padding-bottom: 1rem;
	margin-bottom: 3rem;
}

.stp-logo {
	width: 25%;
	display: table;
	margin-left: 0;
	margin-right: auto;
}

.stp-logo img {
	width: 100%;
	height: auto;
}

.stp-bottom-bar {
	width: 100%;
	height: 0.3875rem;
	background-color: #747779;
}

.video-blocks {
	padding-top: 5%;
	padding-bottom: 3.75%;
	background-color: white;
}

.single-video {
	width: 100%;
	position: relative;
	padding: 3%;
	margin-bottom: 4rem;
}

.single-video:before {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 0.3875rem;
	content: " ";
	background-color: #ffc72c;
}

.single-video:after {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 0.3875rem;
	content: " ";
	background-color: #ffc72c;
}

.sv-01 {
	width: 40%;
	float: left;
}

.sv-02 {
	width: 60%;
	float: left;
	padding-right: 15%;
	padding-top: 2.125%;
}

.thumbnail-box {
	width: 84%;
	margin-right: 16%;
	aspect-ratio: 1920 / 1080;
	background-size: cover;
	background-position: center center;
	position: relative; 
}

.play-button {
    position: absolute;
    content: " ";
    width: 20%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background-color: transparent;
    margin-top: 17.5%;
    left: 50%; 
    margin-left: -10%;
    border: 4px solid white;
}

.play-button i {
    font-size: 2.5rem;
    color: white;
    display: table;
    margin-left: auto;
    margin-right: auto;
	position: relative; 
}

.pb-inner {
	position: absolute;
	left: 0;
	top: 0;
	border-radius: 50%;
	background-color: white;
	background-image: url('images/circle-logo.png');
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
    width: 100%;
    height: 100%;
	opacity: 0;
	transform: rotate(0deg);
	transition: all 0.75s ease; -webkit-transition: all 0.75s ease; -moz-transition: all 0.75s ease; -o-transition: all 0.75s ease;
}

.thumbnail-box:hover .pb-inner {
	opacity: 1;
	transform: rotate(360deg);
	transition: all 0.75s ease; -webkit-transition: all 0.75s ease; -moz-transition: all 0.75s ease; -o-transition: all 0.75s ease;
}

.thumbnail-box:hover .play-button i {
	color: #747779;
}

.pum-theme-25, .pum-theme-default-theme {
    background-color: #000000a6 !important;
}

.pum-content iframe {
	width: 100% !important;
}

.pum-theme-25 .pum-content + .pum-close, .pum-theme-default-theme .pum-content + .pum-close {
    top: 0px !important;
    padding: 1% 1% !important;
    font-size: 26px !important;
    line-height: 1 !important;
    border: 0 !important;
    box-shadow: 0 0 0 transparent !important;
    text-shadow: 0px 0px 0px transparent !important;
    background-color: #ffc72c !important;
	transition: all 0.75s ease; -webkit-transition: all 0.75s ease; -moz-transition: all 0.75s ease; -o-transition: all 0.75s ease;
}

.pum-theme-25 .pum-content + .pum-close:hover, .pum-theme-default-theme .pum-content + .pum-close:hover {
	background-color: #747779 !important;
	color: #ffc72c !important;
	transition: all 0.75s ease; -webkit-transition: all 0.75s ease; -moz-transition: all 0.75s ease; -o-transition: all 0.75s ease;
}

.page-title {
	padding-top: 2%;
	padding-bottom: 0.25%;
}

.page-title h2 {
    text-transform: uppercase;
    font-weight: 400;
    font-size: 3.75rem;
    margin-bottom: 0;
    color: #747779;
}

.footer {
	width: 100%;
	height: 1.5rem;
	background-color: #fec72c; 
}

.faq-section {
	padding-top: 1.5%;
	padding-bottom: 7.5%;
	background-color: white;
}

.top-text {
	margin-bottom: 3rem;
}

.top-text h2 {
    text-transform: uppercase;
    font-weight: 400;
    font-size: 2.5rem;
    margin-bottom: 0;
    color: #747779;	
}

.accordion-button {
	border-left: 0.5rem solid #747779;
}

.accordion {
    --bs-accordion-border-radius: 0;
    --bs-accordion-inner-border-radius: 0;
}

.accordion-flush>.accordion-item {
    margin-bottom: 1rem;
}

.accordion-button::after {
    opacity: 0.7;
}

.accordion-button:not(.collapsed) {
	background-color: white;
	border-left: 0.5rem solid #ffc72c;
}

.accordion-body {
    padding: 2%;
}

.accordion-body p {
	font-size: 1.125rem;
	color: #747779;
}

.accordion-button {
    border-left: 0.5rem solid #747779;
    color: #747779;
    font-size: 1.5rem;
}

.accordion-button:not(.collapsed) {
    color: inherit;
    background-color: white;
    box-shadow: 0 0 0 transparent;
}

.home-sections { 
	padding-top: 3%;
	padding-bottom: 3%;
	text-align: center;
}

.block-type-1 {
	width: 40%;
	display: inline-block;
	margin-left: 2.5%;
	margin-right: 2.5%; 
	vertical-align: top;
}

.bt1-box {
	width: 100%;
	aspect-ratio: 1920 / 1080;
	background-size: cover;
	background-position: center center;
	margin-bottom: 1rem;
	position: relative;
}

.bt1-inner {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: transparent;
	transition: all 0.75s ease; -webkit-transition: all 0.75s ease; -moz-transition: all 0.75s ease; -o-transition: all 0.75s ease;
}

.bt1-box:hover .bt1-inner, .block-type-2:hover .bt1-inner {
	background-color: #00000078; 
	transition: all 0.75s ease; -webkit-transition: all 0.75s ease; -moz-transition: all 0.75s ease; -o-transition: all 0.75s ease;
}

.more-ind {
    width: 12%;
    aspect-ratio: 1 / 1;
    border: 4px solid white;
    border-radius: 50%;
    text-align: center;
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
	opacity: 0;
	transition: all 0.75s ease; -webkit-transition: all 0.75s ease; -moz-transition: all 0.75s ease; -o-transition: all 0.75s ease;
}

.bt1-box:hover .more-ind {
	opacity: 1;
	transition: all 0.75s ease; -webkit-transition: all 0.75s ease; -moz-transition: all 0.75s ease; -o-transition: all 0.75s ease;
}

.more-ind i {
	font-size: 1.5rem;
	color: white;
}

.block-type-2 {
	width: 78%;
	display: inline-block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 4rem;
	background-color: #747779;
	padding: 2%;
}

.bt2-left {
	width: 32%;
	float: left;
}

.bt2-right {
	width: 68%;
	float: left;
	text-align: left;
	padding: 1rem 5%;
}

.bt2-left-thumb {
	width: 100%;
	aspect-ratio: 1920 / 1080;
	background-size: cover;
	background-position: center center;
	background-color: dimgray;
	position: relative;
} 

.bt2-right h3 {
	color: white;
}

.home-sections a {
	text-decoration: none;
}

.block-type-2:hover .more-ind {
	opacity: 1;
	transition: all 0.75s ease; -webkit-transition: all 0.75s ease; -moz-transition: all 0.75s ease; -o-transition: all 0.75s ease;
}

.text-area {
	background-color: white;
	padding-top: 3%;
	padding-bottom: 3%;
}

.pre-visit .home-sections {
	padding-top: 1%;
}

.pre-visit .text-area {
	padding-bottom: 1%;
}






















/*==========  Boostrap 5 Non-Mobile First Method  ==========*/

@media only screen and (max-width: 3180px) {

html { font-size: 16px; }

}

@media only screen and (max-width: 2520px) {

html { font-size: 16px; }

}

@media only screen and (max-width: 1860px) {

html { font-size: 16px; }
.play-button i { font-size: 1.25rem; }
.page-title h2 { font-size: 2.75rem; }


}

@media only screen and (max-width: 1199px) {

html { font-size: 15px; }
.sv-02 { width: 60%; padding-right: 0; padding-top: 0; }

}

@media only screen and (max-width: 991px) {

html { font-size: 14px; }
.h3, h3 { font-size: calc(1.1rem + .2vw); }


}

@media only screen and (max-width: 767px) {

html { font-size: 13px; }
.block-type-1 { width: 100%; display: block; margin-left: 0; margin-right: 0; vertical-align: top; margin-bottom: 3rem; }
.bt1-box {  margin-bottom: 0.5rem; }
.block-type-2 { width: 100%; margin-top: 3rem; }
.bt2-left { width: 100%; float: none; margin-bottom: 0.5rem; }
.bt2-right { width: 100%; float: none; text-align: center; padding: 0.5rem 5% 1rem 5%; }
.stp-logo { width: 40%; }
.stp-bottom-bar { height: 0.1875rem; }
.sv-01 { width: 100%; float: none; }
.sv-02 { width: 100%; float: none; padding-right: 16%; padding-top: 1rem; }
.thumbnail-box { width: 100%; margin-right: 0; }
.single-video { width: 100%;padding: 4.25%; }
.single-video:before  { height: 0.25rem; }
.single-video:after { width: 0.25rem; }

}

@media only screen and (max-width: 575px) {

html { font-size: 12px; }
.top-text h2 { font-size: 1.75rem; }
.accordion-button { font-size: 1.125rem; }
.accordion-body p { font-size: 1rem; }
.page-title h2 { font-size: 2rem; }

}