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

html { font-size: 16px; }
h1, h2, h3, h4, h5, h6, button { font-family: 'Fjalla One', sans-serif; text-transform: uppercase; }
p, li { font-family: 'Open Sans', serif; font-size: 1.125rem; }
h1, h2, h3, h4, h5, h6 { margin-bottom: 1rem; }
.vert-center { position: relative; top: 50%; transform: translateY(-50%); }
a, a:hover, a:focus, a:active { text-decoration: none;}
a { color: #d20001; }
a:hover { color: #980c0d; }
img { max-width: 100%; }

.top-header {
	text-align: center;
	padding: 2.625rem 4rem 2.3875rem;
	position: relative;
	background-image: url('images/header-bg.jpg');
	background-size: cover;
	background-position: center top;
}

.date-bar {
	position: absolute;
	top: 0;
	right: 0;
	background-image: url('images/date-stripe.png');
	background-size: 100% 100%;
	font-family: 'Fjalla One', sans-serif;
	font-size: 1.0625rem;
	color: white;
	padding: 0.3125rem 6% 0.25rem;
	font-style: italic;
	text-transform: uppercase;
}

.navbar {
	padding: 0 1rem;
	background-color: #d20001;
	transition: all 0.25s ease; -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; -o-transition: all 0.25s ease;
}

.navbar-nav {
    margin-left: auto;
    margin-right: auto;
}

.navbar-expand-xl .navbar-nav .nav-link {
    padding-right: 1.25rem;
    padding-left: 1.25rem;
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
	color: white;
	background-color: transparent;
	font-family: 'Fjalla One', sans-serif;
	text-transform: uppercase;
	transition: all 0.25s ease; -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; -o-transition: all;
	font-size: 1.125rem;
}

.navbar-expand-xl .navbar-nav li.current-menu-item .nav-link, .navbar-expand-xl .navbar-nav .nav-link:hover {
	background-color: black;
	transition: all 0.25s ease; -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; -o-transition: all 
}

.home-main {
	background-image: url('images/home-main.jpg');
	background-size: cover;
	background-position: center top;
    padding-top: 12.5%;
    padding-bottom: 12.5%;
	text-align: center;
}

.home-main h2 {
	background-size: 100% 100%;
	width: 100%;
	text-align: center;
	padding: 1.5rem 1rem;
	font-size: 6rem;
	color: white;
	background-image: url(images/h2bg80.png);
	background-size: 100% 100%;
	margin-bottom: 0;
	letter-spacing: -0.125rem;
}

button.white {
	background-color: white;
	color: #d20001;
	padding: 0.5625rem 1.875rem;
	border: 0;
	border-radius: 0;
	font-size: 1.75rem;
	transition: all 0.25s ease; -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; -o-transition: all;
	cursor: pointer;
}

button.white.black {
	background-color: black;
	color: white;
	transition: all 0.25s ease; -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; -o-transition: all;
}

.white-text {
	padding-top: 4rem;
	padding-bottom: 4rem;
	background-color: white;
	text-align: left;
}

.white-text h1 {
	color: #d20001;
	width: 100%;
	text-align: center;
}

.white-text button {
	margin-left: auto;
	margin-right: auto;
	display: table;
}

.why-attend-tug {
	text-align: center;
	padding-top: 6rem;
	padding-bottom: 6rem;
	background-color: dimgray;
	background-image: url('images/why-attend-bg.jpg');
	background-size: cover;
	background-position: center top;
}

.reason-to-attend {
	width: 23%;
	margin: 0 1% 4rem;
	box-shadow: 0 0 1rem black;
	float: left;
}

.reason-top {
	background-color: #d20000;
	padding: 0.5rem 1rem;
	text-align: center;
}

.reason-top i {
	font-size: 5rem;
	color: black;
	margin-bottom: 0.75rem;
}

.reason-top h5 {
	color: white;
	font-size: 1.75rem;
	margin-bottom: 0;
}

.reason-bottom {
	background-color: white;
	padding: 3rem 1.55rem 2.25rem;
	background-image: url('images/reason-top-bg.png');
	background-size: 100% auto;
	background-position: center top;
	background-repeat: no-repeat;
}

.reason-bottom p {
	margin-bottom: 0;
}

img.why-attend-h1 {
    margin-bottom: 3rem;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

button.white.black.red {
	background-color: #d20001;
	color: white;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

button.white:hover, button.white.black:hover, .button.white.black.red:hover {
	background-color: #960a0a;
	color: white;
	transition: all 0.25s ease; -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; -o-transition: all;
}

.countdown {
	padding-top: 8rem;
	padding-bottom: 8rem;
	background-color: #d20001;
	background-image: url('images/countdown-bg.jpg');
	background-size: cover;
	background-position: center top;
}

.countdown h2 {
	color: white;
	font-size: 4rem;
	margin-bottom: 4rem;
}

.clocker {
    width: 100%;
    background-color: #ffffff38;
    padding: 4rem;
    text-align: center;
    box-shadow: 1rem 1rem 4rem #00000045;
	margin-bottom: 4rem;
}

.countdown button {
	margin-left: auto;
	margin-right: auto;
	display: table;
}

.countdown .flip-clock-divider .flip-clock-label {
    color: white;
	font-size: 1rem;
	font-family: 'Fjalla One', sans-serif; 
	text-transform: uppercase;
}



.countdown .flip-clock-divider { float: none; }
.countdown .flip-clock-wrapper ul { position: relative; float: none; display: inline-block; }

.white-text h2, .complete-solution h2, .customers h2, .vendor-reg h2 {
	font-size: 3rem;
	width: 100%;
	text-align: center;
}

.call-button {
	width: 48%;
	margin: 0 1% 4rem;
	background-color: #d20001;
	padding: 4rem 2rem;
	color: white;
	text-align: center;
	font-size: 1.3875rem;
	float: left;
	font-family: 'Fjalla One', sans-serif; 
	font-style: italic;
	background-image: url('images/call-button.jpg');
	background-size: cover;
	background-position: center center;
}

.call-button.email {
	background-image: url('images/email-button.jpg');
}

.footsie {
	padding: 1rem 2rem;
	background-color: black;
	text-align: center;
}

.footsie p {
	color: white;
	font-weight: bold;
	font-style: italic;
	margin-bottom: 0;
	font-size: 1rem;
}

.footsie p span {
	display: inline-block;
	margin: 0 0.5rem;
	color: #d20000;
}

.footsie a {
	color: white;
}

.site-by {
	text-align: right;
	margin-bottom: 1rem;
}

.footer-across, .site-by {
	display: block;
}

.footer-across {
	margin-bottom: 1rem;
}

.site-by a {
	padding: 0.75rem 1rem;
	background-color: transparent;
	transition: all 0.25s ease; -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; -o-transition: all 
}

.site-by a:hover {
	padding: 0.75rem 2.25rem;
	background-color: #8dc53e;
	color: #121212;
	transition: all 0.25s ease; -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; -o-transition: all 
}

.footsie a {
  white-space: nowrap;
}

.countdown .flip-clock-wrapper { margin: 0 !important; }

.ci-main {
	background-image: url('images/ci-bg.jpg');
}

.ci-main h2 {
	font-size: 4rem;
	background-image: url('images/h2bg80black.png')
}

.ci-main h2 span {
	display: block;
	width: 100%;
	font-size: 2.5rem;
}

.event-packet {
	display: inline-block;
	float: right;
	width: auto;
	padding: 1.25rem;
	background-color: #f2f2f2;
	text-align: center;
	margin-left: 3rem;
	margin-bottom: 3rem;
	transition: all 0.25s ease; -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; -o-transition: all 0.25s ease;
	background-size: cover;
	background-position: center center;
}

.event-packet-inner {
	width: 14rem;
	padding-top: 131%;
	background-color: #d20001;
	margin-bottom: 0.75rem;
	transition: all 0.25s ease; -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; -o-transition: all 0.25s ease;
	background-image: url('images/packet-cover.jpg');
	background-size: cover;
	background-position: center center;
}

.event-packet p {
	font-weight: bold;
	margin-bottom: 0;
	font-size: 0.9375rem;
	margin-bottom: 0;
	color: #121212;
	transition: all 0.25s ease; -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; -o-transition: all 0.25s ease;
}

.white-text-ci h2 {
	width: 100%;
	color: #d20001;
}

.event-packet:hover {
	background-color: #d20001;
	transition: all 0.25s ease; -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; -o-transition: all 0.25s ease;
}

.event-packet:hover .event-packet-inner {
	background-color: dimgray;
	transition: all 0.25s ease; -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; -o-transition: all 0.25s ease;
}

.event-packet:hover p {
	color: white;
	transition: all 0.25s ease; -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; -o-transition: all 0.25s ease;
}

.cost {
	background-color: #d20001;
	padding-top: 6rem;
	padding-bottom: 6rem;
	text-align: center;
}

.cost h5 {
	font-size: 3.75rem;
	margin-bottom: 0;
	color: white;
}

.cost h4 {
    font-size: 8rem;
    color: white;
    position: relative;
    z-index: 2;
}

.cost h4:before {
    position: absolute;
    width: 8.5rem;
    content: 'As Low As';
    padding: 0.25rem 0.75rem;
    color: white;
    left: 0rem;
    top: 0.5rem;
    background-color: black;
    font-family: 'Fjalla One', sans-serif;
    text-transform: uppercase;
    font-size: 1.3625rem;
    z-index: 1;
}

.complete-solution {
	padding-top: 6rem;
	padding-bottom: 6rem;
	background-color: dimgray;
	background-image: url('images/abstract.jpg');
	background-size: cover;
	background-position: center top;
}

.complete-solution h2 {
	color: #d20001;
	text-align: left;
}

.complete-solution p {
	color: white;
}

.complete-solution ul li {
    font-family: 'Fjalla One', sans-serif;
    text-transform: uppercase;
	font-size: 1.5rem;
	color: white;
}

.customers {
	background-image: url('images/customers-bg.jpg');
	background-size: cover;
	background-position: center center;
	text-align: center;
	padding-top: 6rem;
	padding-bottom: 6rem;
}

.customers img {
	width: 100%;
	margin-bottom: 2rem;
}

.still-have {
	padding-top: 6rem;
	padding-bottom: 6rem;
	text-align: center;
}

.still-have h3 {
	font-size: 3.5rem;
	color: #d20001;
}

.reg-main {
	background-image: url('images/reg-main.jpg');
}

.register-online .white-text h2 {
	color: #d20000;
}

.register-online .white-text hr {
	margin: 3rem 0;
}

.register-online .white-text span, .register-online .vendor-reg span {
	display: block;
	text-align: center;
	font-size: 4rem;
	color: #d20001;
	margin-bottom: 1rem;
	font-family: 'Fjalla One', sans-serif;
}

.vr-block {
	width: 90%;
	margin-left: 5%;
	margin-right: 5%;
	border: 2px solid #d20001;
	padding: 2rem 4rem;
	text-align: center;
}

.vendor-reg {
	background-color: black;
	padding-top: 6rem;
	padding-bottom: 6rem;
	text-align: center;
}

.vendor-reg h2 {
	color: #d20001;
	margin-bottom: 3rem;
}

.vendor-reg h3 {
	font-size: 2.5rem;
	color: #d20001;
}

.vendor-reg p {
	color: white;
}

.why-main {
	background-image: url('images/why-attend.jpg');
}

.why-main img {
    height: 7rem;
    position: relative;
    top: -0.25rem;
    margin-left: 0.5rem;
}

.why-attend .white-text h2 {
	color: #d20001;
}

.reasons {
	background-color: #33383c;
	background-image: url('images/why-attend-bg.jpg');
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: center top;
	padding-top: 6rem;
	padding-bottom: 6rem;
}

.reason-box {
	width: 100%;
	background-color: black;
	display: block;
    border-bottom: 1rem solid #33383c;
}

.reason-left {
	background-color: #d20001;
	text-align: center;
	padding: 2rem 1rem;
	width: 28%;
	float: left;
}

.reason-left i {
	font-size: 4rem;
	color: black;
	margin-bottom: 0.75rem;
}

.reason-left h3 {
	font-size: 1.75rem;
	color: white;
}

.reason-right {
	background-color: white;
	padding: 2rem 3rem 2rem 4rem;
	text-align: left;
	width: 72%;
	float: left;
	background-image: url('images/reason-left-bg.png');
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-position: left center;
}

.reason-right p:last-child {
	margin-bottom: 0;
}

.sub-reason {
    width: 100%;
    display: block;
    height: 1.5rem;
    background-color: transparent;
}

.reasons table {
	background-color: #ffffffe3;
	border: 1px solid black;
	border-collapse: collapse;
	width: 100%;
	font-size: 1rem;
	margin-bottom: 2rem;
}

.reasons table tr:first-child {
	font-size: 1.75rem;
	font-weight: bold;
	background-color: #d20001;
	color: white;
	font-family: 'Fjalla One', sans-serif;
	text-transform: uppercase;
}

.reasons table tr:first-child td {
	font-family: 'Fjalla One', sans-serif;
}

.reasons table td {
	padding: 0.5rem 1rem;
	border: 1px solid black;
	border-collapse: collapse;
	font-family: 'Open Sans', serif;
}

.reasons table p:last-child {
	margin-bottom: 0;
}

.reasons table p, .reasons table li {
	font-size: 1rem;
}

.sticky {
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 5;
	box-shadow: 0rem 1rem 1rem black;
	transition: all 0.25s ease; -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; -o-transition: all 0.25s ease;
}

img.logo-red {
	margin-left: 2rem;
	margin-right: 0;
	width: 100%;
}



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

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

html { font-size: 15px; }
.navbar-toggler { padding: .25rem .75rem; margin-left: auto; margin-right: auto; margin-top: 0.5rem; margin-bottom: 0.5rem; border: 3px solid black; }
.navbar-collapse { padding-bottom: 3rem; }
.countdown .flip-clock-wrapper { padding-left: 2.5%; }
.countdown .flip-clock-wrapper { margin: 0 0 4rem 0 !important; }
.ci-main h2 { font-size: 3.5rem; letter-spacing: -0.0625rem; }
.ci-main h2 span { font-size: 2rem; }
.cost h4 { font-size: 6rem; }

}

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

html { font-size: 14px; }
.home-main h2 { font-size: 4rem; }
button.white { font-size: 1.25rem; }
.reason-bottom { padding: 3rem 0.5rem 2.25rem; }
.reason-bottom p { font-size: 0.9325rem; }
.flip-clock-wrapper ul { margin-bottom: 4rem !important; }
.call-button { padding: 4rem 1rem; font-size: 1.25rem; }
.ci-main h2 { font-size: 2.875rem; letter-spacing: -0.03rem; }
.cost h4 { font-size: 5rem; }
.cost h4:before { width: 6.5rem; padding: 0.25rem 0.5rem; font-size: 1.25rem; }
.white-text h2, .complete-solution h2, .customers h2 { font-size: 2.25em; }
.why-main img { height: 5rem; }



}

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

html { font-size: 13px; }
.top-header img {max-width: 60%; margin-top: 1.25rem; }
.reason-to-attend { width: 48%; }
.reason-bottom { padding: 3rem 1rem 2.25rem; }
.reason-bottom p { font-size: 1rem; }
.clocker { padding: 4rem 5rem; }
.ci-main h2 { font-size: 2.25rem; letter-spacing: -0.15rem; }
.ci-main h2 span { font-size: 1.5rem; }
.cost h4:before { left: 18%; }
.cb-01 { margin-bottom: 3rem; }

}

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

html { font-size: 12px; }
.top-header img {max-width: 80%; }
.home-main h2 { letter-spacing: 0; }
.home-main { padding-top: 21.5%; padding-bottom: 21.5%; }
.countdown h2, .white-text h2 { font-size: 2.25rem; text-align: center; width: 100%; }
.call-button { width: 100%; margin: 0 0 1rem; }
.call-button.email { margin-bottom: 4rem; }
.event-packet-inner { width: 8rem; padding-top: 100%; }
.event-packet { margin-left: 1rem; margin-bottom: 1rem; max-width: 46%; }
.event-packet-inner { width: 100%; padding-top: 120%; }
.cost h4:before { left: 6%; }
.cost h5 { font-size: 2.75rem; }
.reason-left h3 { font-size: 1.125rem; }
.reason-left { padding: 1rem 0.5rem; }
.reason-left { width: 33%; }
.reason-right { padding: 2rem 1rem 2rem 2.5rem; width: 67%; }
.reason-right p { font-size: 1rem; }
img.logo-red { margin-left: 0rem; }
	
}