:root{
	--mm-orange: #F47F20;
    --mm-orange-transparent: #F47F20bc;
    --mm-blue: #28C0F0;
}

html{
	font-family: 'Open Sans', sans-serif;
    scroll-behavior:smooth;
    width: 100%;
}

#hotdesk-body{
	background:url('./mediamark-covid/hotdesk-bg.png');
}

#itkn-body{
	background:url('./images/headphones.jpg');
    background-position: center center;
}

#itkn-body, #hotdesk-body{
	background-size:cover;
	background-attachment: fixed;
	margin: 0;
	padding: 0;	
    width: 100%;
}

h1, h2, h3, h4, h5, h6{
	font-family: 'Bebas Neue', 'Open Sans', sans-serif;
	text-align: center;
	margin: 0;
	padding: 40px 0;
}

p{
	font-size: 14pt;
}

#itkn-body #hero h1, #itkn-body #hero h3, #itkn-body #hero h5{
	text-align: left;
}

h1{
	font-size: 80pt;
}

h2{
	font-size: 60pt;
}

h3{
	font-size: 50pt;
}

h4{
	font-size: 40pt;
}

h5{
	font-size: 22pt;
	font-weight: 100;
}

hr{
	border: none;
	border-top: 1px solid #888;
	width: 50%;
}

#links{
	background: rgb(54, 195, 238);
    display: flex;
    justify-content: space-evenly;
    padding-bottom: 0px;
}

#links a{
	font-family: 'Bebas Neue', 'Open Sans', sans-serif;
    color: white;
    text-decoration: none;
    font-size: 18pt;
    background: rgb(54, 195, 238);
	padding: 10px;
    border-top: 4px solid rgb(54, 195, 238);
    border-bottom: 4px solid rgb(54, 195, 238);
    text-align: center;
}

#links a:hover{
	border-top: 4px solid white;
    border-bottom: 4px solid white;
}

#link-egta{
	color: white;
	padding: 5px;
}

.link-ncs{
	color: black;
	padding: 5px;
}

#link-egta:hover{
	color: black;
	background: white;
}

.link-ncs:hover{
	color: white;
	background: black;
}

.flex{
	display: flex;
	justify-content: space-evenly;
    flex-wrap: wrap;
}

.rsvp-flex-item{
	/*width: 50%;*/
}

.section{
	width: 100%;
    padding-bottom: 20px;
}

.section p{
	width: 600px;
	margin: 0 auto;
	padding-bottom: 20px;
	text-align: center;
}

#hotdesk-body #logo{
	width: 400px;
	margin: 0 auto;
	display: block;
}

#itkn-body #logo{
	width: 300px;
	position: relative;
	top: 110px;
	left: 110px;
}

#hero{
	background: transparent;
	color: white;
}

#hero h1, #hero h3, #hero h5{
	padding: 0;
	padding-left: 30px;
}

#itkn-body #hero h1{
	margin-top: 70px;
}

#hero h3{
	line-height: 45pt;
	font-weight: 100;
	padding-bottom: 50px;
}

#information, #rsvp{
	background: #fff;
}

#information img{
	width: 700px;
	margin: 0 auto;
	display: block;
}

#speakers{
	background: #eeedee;
}

.bio-flex-item h5{
	width: 290px;
	padding: 0;
}

.bio-flex-item h4{
	padding: 0;
	margin: 10px 0;
	border-top: 4px solid #000;
	border-bottom: 4px solid #000;
}

.bio-text{
	margin: -380px 0 0 0 !important;
	opacity: 0;
	color: white;
	position: absolute;
}

.bio-text:hover{
	opacity: 1;
}

.bio-text p{
	width: 270px !important;
	height: 360px !important;
	padding: 10px;
	
	font-family: 'Bebas Neue', 'Open Sans', sans-serif;
	font-size: 18pt;
	font-weight: 100;
}

#bio1{
	background: rgba(54, 195, 238,0.7);
}

#bio2{
	background: rgba(156,53,215,0.7);
}

#bio3{
	background: rgba(213,97,40,0.7);
}

#bio4{
	background: rgba(17,140,65,0.7);
}

#rsvp-details h5{
	font-size: 32pt;
	padding: 5px 0;
}

#rsvp-details span, #pink{
	color: #ff1ac6;
}

#rsvp label{
	font-family: 'Bebas Neue', 'Open Sans', sans-serif;
	font-size: 22pt;
}

#rsvp input{
	padding: 10px;
	font-size: 16pt;
}

#rsvp input[type=text], #rsvp input[type=email]{
	width: 100%;
}

#rsvp input[type=submit]{
	font-family: 'Bebas Neue', 'Open Sans', sans-serif;
	font-size: 22pt;
	padding: 5px 10px;
	cursor: pointer;
	background: black;
	color: white;
	border: 1px solid white;
}

#rsvp input[type=submit]:hover{
	background: white;
	color: black;
	border: 1px solid black;
}

#rsvp .wpcf7-list-item{
	display: block;
}

#rsvp .wpcf7-not-valid-tip{
	color:red;
    display:block;
}

#rsvp .wpcf7-mail-sent-ok{
	font-family: 'Bebas Neue', 'Open Sans', sans-serif;
    font-weight: 100;
	margin: 0 auto;
	width: 600px;
	color:green;
    font-size:32pt;
}

#rsvp .screen-reader-response{
	display: none;
}

#rsvp .wpcf7-validation-errors{
	display:none;
}

#rsvp-details p{
	text-align: center;
}

#rsvp-form p{
	text-align: center;
}

#rsvp-form p a{
	color: #00b1e6;
    text-decoration: none;
    font-family: 'Bebas Neue', 'Open Sans', sans-serif;
    font-size: 22pt;
}

#rsvp-form p a:hover{
	color:#ff379e;
}

#social{
	background: rgba(255,255,255,0.8);
	padding-bottom: 100px;
}

#social a{
	display: block;
	color: black;
	font-size: 45pt;
	padding: 10px;
}

#social a:hover{
	color: white;
}

#social-hashtag{
	color: #1abaeb;
}

#mediamark-link{
    background: rgba(255,255,255,0.6);
    padding: 10px 5px;
    
    position: fixed;
    bottom: 10px;
    right: 10px;
}

#mediamark-link img{
	width: 200px;
}

a#rsvp-link{
    position: fixed;
    right: 10px;
    top: 10px;
    background: rgba(255,255,255,0.8);
    padding: 10px 5px;
    color: black;
    text-decoration: none;
}

#rsvp-link h3{
	padding: 0;
    padding-top: 30px;
    font-size: 32pt;
}

#post-webinar{
	background: #eeedee;
    padding-top: 50px;
}

#post-webinar hr{
	margin-top: 50px;
    width: 80%;
}

#post-webinar iframe{
	margin: auto 0;
}

.takeout-content{
	width: 50%;
    min-width: 300px;
}

.takeout-content h3{
	padding: 0;
    padding-left: 50px;
    text-align: left;
    
}

.takeout-content ul li{
	padding: 10px 0;
}

i{
	width: 100%;
    text-align: center;
}

#covid{
	background: #fff;
} 

.section .infographics p{
	margin: inherit;
}

.infographics img{
	width: 40%;
    min-width: 500px;
    padding: 1%;
}

#telecoms{
	background: #ffffffbc;
}

#telecoms>img{
	margin: 0 auto;
    display: block;
    padding: 50px 0;
}

#trifactor{
	background: #eeedee;
    text-align: center;
}

#trifactor img:hover{
	width: 450px;
    padding:15px 0 16px 0;
}

#trifactor img{
	width: 500px;
    transition: all linear 0.3s;
}

#trifactor a{
	color: white;
    background: #7AC547;
    display: block;
    margin: 10px 0;
}

#trifactor .content{
	width: 700px;
    margin: 0 auto;
}

#trifactor .content h5{
	padding: 10px;
}

#trifactor a, #covid a{
	text-decoration: none;
}

#covid, #hotdesk{
	min-height: 100vh;
}

#covid .packages a, #hotdesk .packages a{
	width: 300px;
    height: 300px;
    background: #FA8A76;
    color: white;
    padding: 20px;
    margin:1%;
    transition: all linear 0.3s;
}

#hotdesk .packages a{
	background: var(--mm-orange);
    text-decoration:none;
    margin: 4%;
    height: auto;
}

#hotdesk .packages a:hover{
	background: var(--mm-orange-transparent);
}

#hotdesk .packages h4{
	font-size: 30pt;
    padding: 20px 0;
}

#hotdesk .packages p{
	width: 100%;
    text-align: center;
}

#covid .packages a:hover{
	background: #FA8A76bc;
}

#covid i, #hotdesk i{
	font-size: 72pt;
}

#covid .kantar a{
	width: 250px;
    height: 250px;
	background: rgb(156,53,215) !important;
    color: white;
    padding: 20px;
    margin:1%;
    transition: all linear 0.3s;
}

.kantar h4{
	font-size: 25pt;
    padding: 15px 0 !important;
}

.kantar p{
	width: 100%;
}

#programmatic{
	background: #26ABE3;
    text-align: center;
}

#programmatic img{
	width: 80%;
    max-width: 1080px;
    margin: 0 auto;
}


/*Jacaranda*/
@font-face {
    font-family: 'Gotham Narrow Black';
    font-style: normal;
    font-weight: normal;
    src: local('./images/Gotham Narrow Black'), url('./images/GothamNarrow-Black.woff') format('woff');
}

#jacaranda h1{
	padding: 50px 0 0 40px;
}

#jacaranda{
	background-color: #78278B;
	background-image: url('https://www.mediamark.co.za/wp-content/themes/onepress/microsites/jac-breakfast/jac-logo-white.png');
	background-position: center center;
	background-repeat:  no-repeat;
    background-size: 400px;
    min-height: 100vh;
    position: relative;
}

#jacaranda h2, #jacaranda h3{
	color: white;
	width: 100%;
	text-align: center;
    padding: 0;
    font-family: 'Gotham Narrow Black', 'Bebas Neue', 'Open Sans';
}

#jacaranda h3{
	padding-bottom: 50px;
    font-size: 32pt;
}

#jacaranda i{
	color: white;
	font-size: 72pt;
	position: relative;
	transition: all ease-in 0.2s;
}

#jacaranda i:hover{
	transform:translateY(10px);
}

#jacaranda #down-chevron{
	width: 100%;
	position: absolute;
	bottom: 40px;
	align-items: center;
    justify-content: center;
}

#east-coast-radio img{
	width:100%;
}

#east-coast-radio{
	background: white;
}

#gagasi{
	text-align: center;
	background: #E72C35;
}

/**
1.	Facebook Live:

Looking for an emotive and authentic way to connect with your consumers? Let us show you how… click here.

2.	Quarantine Dreams 
Being in lockdown can be challenging, but our listeners are craving some lighthearted fun. Your brand can do this with two exciting campaign ideas. Click here to see how: 

3.	eCommerce 
Avoid the long queues and empty shelves, allow your consumers to purchase your products online - click here to find out how.

4.	Live Read
Let your brand be heard in a meaningful manner… click here to find out how.

5.	#StayAtHomeChallenge 
Make staying at home fun and entertain listeners and customers alike. Click here to unlock the fun xxxx.

6.	Rolls ROI 
Our presenters are trusted and loved by the audience - let them deliver ROI for you with customised content specific to YOUR brand. Click here for the Rolls ROI-ce of ideas.
**/



/****Virtual Hotdesks****/

#hotdesk{
	background: #ffffff00;
    color: white;
}

.o-bold{
	color: var(--mm-orange);
    font-weight: bold;
}

#information .brands{
	align-items: center;
}

#information .brands .brand-image{
	width: 200px;
}

#information .brands img{
    position: relative;
    width: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

#cta{
	background: white;
}

#hotdesk .itkn{
	max-width: 1500px;
	margin: auto;
}

#hotdesk .itkn a{
	 margin:2%;
     width: 200px;
     background: white;
     color: var(--mm-orange);
}

#hotdesk .itkn a:hover{
	background: #FFFFFFbc;
}