@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/oswald/v35/TK3_WkUHHAIjg75cFRf3bXL8LICs13FvsUZiYA.ttf) format('truetype');
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/oswald/v35/TK3_WkUHHAIjg75cFRf3bXL8LICs169vsUZiYA.ttf) format('truetype');
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/oswald/v35/TK3_WkUHHAIjg75cFRf3bXL8LICs1_FvsUZiYA.ttf) format('truetype');
}
@font-face {
  font-family: 'Oswald';
  font-style: medium;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/oswald/v35/TK3_WkUHHAIjg75cFRf3bXL8LICs18NvsUZiYA.ttf) format('truetype');
}
@font-face {
  font-family: 'Oswald';
  font-style: semi-bold;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/oswald/v35/TK3_WkUHHAIjg75cFRf3bXL8LICs1y9osUZiYA.ttf) format('truetype');
}
@font-face {
  font-family: 'Oswald';
  font-style: bold;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/oswald/v35/TK3_WkUHHAIjg75cFRf3bXL8LICs1xZosUZiYA.ttf) format('truetype');
}


/* Fonts */
@media screen and (min-width: 25em){
	html { font-size: calc( 16px + 2 * (100vw - 1200px) / (800 - 400) ); }
}

/* Safari <8 and IE <11 */
@media screen and (min-width: 25em){
	html { font-size: calc( 16px + 2 * (100vw - 1200px) / (800 - 400) ); }
}

@media screen and (min-width: 50em){
	html { font-size: calc( 16px + 2 * (100vw - 1200px) / (800 - 400) ); }
}

h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6,
.display-1,.display-2,.display-3,.display-4,
.btn, 
.title {
	font-family: 'Oswald', sans-serif !important;
	font-weight: bold !important;
}
.font {
	font-family: 'Oswald', sans-serif !important;
	font-weight: 400 !important;
}
.font strong {
	font-weight: 700 !important;
}
.nav-link {
	font-weight: normal;
}
.font2 {
	font-family: 'Roboto', sans-serif !important;
}
.badge {
	font-weight: normal !important;
}
.w-100 {
	width: 100%;
}
html, body {
	min-height: 100vh;
	background-color: #fff;
	font-family: 'Roboto', sans-serif;
}
area:focus,
area:active {
	outline: none;
}
.fixed-top {
	right: 0;
}
.navbar {
	padding: 4.5rem 3.7rem 2rem 3.7rem !important;
	height: 8rem;
}
body {
	padding-top: 6rem;
}

.content {
	position: relative;
	margin: 0 auto;
}
.navbar {
	font-size: 78%;
}
.navbar::after {
	content: " ";
    display: block;
    width: 100%;
    height: 12px;
    background-image: url(../img/sdg-color-line.svg);
    position: fixed;
    left: 0;
    top: 0;
	background-position: 0px 0px;
	background-size: 66.6rem auto;
    background-repeat: repeat-x;
}
.navbar > .container {
	padding-top: 5px;
}
.navbar-brand img {
	 width: 27vw;
}
@media (max-width:991px) {
	.navbar-brand {
		 width: 67%;
		 overflow: hidden;
	}
	.navbar-brand img {
		 width: 100%;
	} 
	.navbar {
		padding: 2.4rem 2rem 1rem 2rem !important;
		height: 5rem;
	}
	body {
		padding-top: 5rem;
	}
}
.navbar .dropdown-menu a,
.navbar-nav a {
	font-weight: bold  !important;
}
.nav-link {
    padding-right: .5rem !important;
	font-weight: 700;
    padding-left: .5rem !important;
	color: #9c9d9e !important;
}
.active .nav-link {
	color: #a1a1a1 !important;
}
.navbar-nav .dropdown-menu {
    position: absolute !important;
    float: left !important;
}
.navbar .dropdown-menu a {
	padding: .25rem 1.5rem;
	font-weight: 400;
}
.area {
	position: absolute;
	text-align: center;
}
.area0 a {
	display: block;
	padding: 10px;
	font-weight: bold;
}
.font {
	font-family: 'Open Sans Condensed', sans-serif sans-serif !important;
}
.area1 a,
.area2 a,
.area3 a,
.area4 a,
.area5 a {
	display: block;
	height: inherit;
}
.area1,
.area0 {
	background: transparent;
	text-align: left;
}
.navbar-dark .navbar-nav .nav-link {
	color: #fff;
}
.stand-nav {
	position: absolute;
	float: right;
	right: 0;
	margin-right: 32px;
	top:75px;
}
.stand-nav .btn{
	box-shadow: 0 12px 12px rgba(0,0,0,.24);
}
.navbar {
	box-shadow: none;
}

.navbar-nav li:hover>.dropdown-menu {
  display: block;
}

/*Curtain*/
.curtain {
	background-color: #000;
	position: fixed;
	left:0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 111;
	width: 100%;
	height: 100%;
}
.curtain-logo {
	text-align: center;
	max-width: 80%;
	left: 10%;
	top: 25%;
	position: relative;
}
.curtain-logo img {
	max-width: 80%;
}
@media(max-width:767px) {
	.curtain-logo img {
		max-width: 180px;
	}
}

.modal-video .modal-dialog {
	max-width: 1140px;
	margin: 30px auto;
}
.modal-video .modal-body {
	position:relative;
	padding:0px;
}
.modal-video .close {
	position:absolute;
	right:-30px;
	top:0;
	z-index:999;
	font-size:2rem;
	font-weight: normal;
	color:#fff;
	opacity:1;
}
.modal-video .nav-tabs .nav-link {
	color: #fff;
}
.modal-video .nav-tabs .nav-link.active {
	color: #333;
}
.text-muted {
	color: #ddd !important;
}
a.text-muted:hover {
	color: inherit !important;
}
.cursor-pointer {
	cursor: pointer;
}
.btn .badge.icon-vote {
	position: absolute;
	display: inline-block;
	bottom: 4px;
	top: auto;
	background-color: rgba(0,0,0,.1);
	box-shadow: none;
	color: #333 !important;
	font-size: 10px;
	font-weight: bold !important;
	padding: 2px 3px;
	right: 2px;
}

/* Footer */
footer {
	z-index: 2;
	bottom: 0;
	position: relative;
	background: #fff;
}

.announce {
	bottom: 0;
	text-decoration: none !important;
}

/* Backgrounds */
.background-imagemap {
	min-width: 1200px;
	min-height: 600px;	
	width: 100%;
	max-height: 100vh;
	overflow: hidden;
	position: fixed;
}
.mobile .background-imagemap {
	min-width: 0;
	min-height: 0;	
	width: 100%;	
}
.background-imagemap img {
	height: 100%;
	width:100%;
}


/* Agenda */
.agenda-modal,
.agenda-backdrop {
	position: absolute;
	left:0;
	top:0;
	width: 100%;
	z-index:3;
}
.agenda-modal,
.agenda-container {
	min-height: 100vh;
}
.agenda-backdrop {
	background-color: rgba(0,0,0,.55);
	z-index:2;
	width: 100%;
	height: 100%;
	position: fixed;
}
.agenda {
	z-index: 4;
	width:1000px;
	margin: 0 auto;
	height: auto;
	padding: 75px 0;
}
@media(min-width:1366px) {
	.agenda {
		max-width: 1300px !important;
		width: 90%;
	}
}
@media(min-width:1600px) {
	.agenda {
		max-width: 1400px !important;
		width: 90%;
	}
}
@media(min-width:1900px) {
	.agenda {
		max-width: 1600px !important;
		width: 90%;
	}
}
@media(min-width:2400px) {
	.agenda {
		max-width: 1900px !important;
		width: 90%;
	}
}
@media(max-width:1140px) {
	.agenda {
		max-width: 95% !important;
	}
}
@media(max-width:991px) {
	.agenda {
		padding: 0 !important;
	}
	.agenda-modal {
		position: relative;
	}
}
.agenda .agenda-nav {
	overflow-y: auto;
}
.content-border {
	outline: 3px solid #333;
}
.agenda-content,
.agenda-session {
	overflow-x: hidden;
	overflow-y: auto;
}
.session-speakers,
.session-info {
	overflow-y:auto;
}
.btn-xs {
	font-size: 70% !important;
	padding: 2px 7px !important;
}
.session-link {
	cursor: pointer;
}
.session-link.active {
	
}
.speaker {
	cursor: pointer;
	margin-bottom: 5px;
}
.speaker:hover {
	background-color: #fff !important;
	box-shadow: 0 0 5px rgba(0,0,0,.2) !important;
	transition: all .5s;
}
.agenda-content > .tab-pane {
	display: none !important;
}
.agenda-content  > .tab-pane.active {
	display: flex !important;
}
.clock {
	position: absolute;
	right:0;
	margin-top: -30px;
	font-size: 90%;
	font-weight: bold;
}
.hall-title {
	font-size: 90%;
	font-weight: bold;
}
.agenda-nav .text-primary {
	color: #333 !important;
}
.agenda-nav .active .text-primary {
	color: #007bff !important;
}
.branding {
	background: url(../img/01/branding.jpg) no-repeat right center;
	background-size: cover;
}
.nav-tabs .nav-link,
.nav-pills .nav-link {
	color:#333;
	font-weight: normal;
}
.nav-pills .nav-link.active {
	color:#333;
	background-color: #eee;
}
.text-muted {
    color: #999 !important;
}

/* Files */
.file-buttons {
	vertical-align: middle !important;
}

/* FAQ */
.accordion .card {
	box-shadow: none;
}


/* Mobile */
html.mobile .content {
	width: 100% !important;
	min-width:0 !important;
	padding: 100px 0;
	
	z-index: 2;
	height: auto !important;
	min-height: 0 !important;
}
html.mobile .container {
	min-width: 0 !important;
}
@media (max-width:967px) {
	html.mobile .content {
		width: 100% !important;
		padding: 50px 0;
		height: auto !important
	}
	html.mobile .navbar-collapse {
		margin-top:10px;
		background-color:#eee;
	}
	html.mobile footer {
		position: relative !important;
	}
}

@media (max-width:1140px) {
	html.mobile .container {
		width: 100% !important;
	}	
}


.navbar .container {	
	align-items: flex-end;
}


@media (max-width:991px) {
	.navbar-nav {
		padding: 0 20px;
	}
	.navbar-collapse {
		background-color: #fff !important;
	} 
}
@media (min-width:992px) {
	.navbar .nav-item {
		padding-left: 32px;
	} 
}
.navbar .nav-item .nav-link {
	font-weight: 700 !important;
	padding-left: 0px !important;
	padding-right: 0px !important;
	position: relative;
}
.navbar .nav-item.active a.nav-link,
.navbar .nav-item a.nav-link:hover {
	color: #1a1a1a !important;
	background-color: #fff !important;
}

footer {
	background-color: #fff;
   /* background-image: url(../img/sdg-color-line.svg?v1);
    background-position: bottom center;
    background-repeat: repeat-x;
    background-size: 100vw auto;*/
	position: relative !important;
}
.footer-container {
	padding: 2rem 3rem 0 3em;
}
.footribbon {
    background-image: url(https://sdgactionzone.org/wp-content/uploads/2021/08/footribbon.svg);
    background-position: bottom center;
    background-repeat: repeat-x;
    background-size: 100vw auto;
    transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
    margin-top: 10px;
    margin-bottom: 0px;
    padding: 0px 30px 50px 30px;
}

.sdg-button {
	color:#000;
	line-height: 1.5rem;
	font-size: 1.5rem;
}
.sdg-button img  {
	float: left;
	margin: -4px 20px 0 0;
	width: 5rem;
}
.footer-btn:hover span {
	background-color: #0c0c0c;
	border-color: #0c0c0c;
	color: #f7ce00;
	transform: scale(0.9);
}
footer .img,
footer img {
	height:5rem;
	transition: all 1s;
}


.footer-title {
	font-family: "Oswald", "Roboto", Sans-serif;
	color: #d3d5d6;
}
.footer-title a {
	color: #9c9d9e !important;
}
.footer-title a:hover {
	color: #444444  !important;
}
footer hr {
    border-top: 1px solid rgba(51,51,51,0.81);
}
footer .text-light {
	color: rgb(145, 145, 145) !important;
}
footer .border-left {
	border-left: 1px solid rgba(51,51,51,0.81) !important;
	border-right: 1px solid rgba(51,51,51,0.81) !important;
}

@media (max-width:767px) {
	footer {
		padding: .5rem 1rem;
	}
	footer .hub {
		height: auto;
		width: 60%;
		transition: all 1s;
	}	
	.footer-title {
		font-size: .7rem !important;
	}
	.copyright {
		font-size: .6rem !important;
	}
	.sdg-button {
		line-height: 1.5rem;
	}
	.sdg-button img  {
		float: none;
		margin: 0 0 20px 0;
	}
}
.modal-header .close {
    padding: 18px;
	border: 1px solid #000;
	margin: -8px -8px  0 auto;
	float: right;
}
.modal-header .close svg {
    
    position: relative;
    display: block;
	width:14px;
	height:14px;
}
.copy {
	transition-property: all;
	font-size:120%;
	transform: scale(1) !important;
	transform-origin: center center;
	display:inline-block !important;
	font-weight: normal !important;
	color: #aaa !important;
	opacity: 1 !important;
}
.copy:hover {
	transform: scale(0.9) !important; 
	transition: transform .8s;
	color: #aaa !important;
	opacity: 1 !important;
}