/* --------------------------------------------------------
Style Sheet for What to Expect at the Emergency Department

version: 1.0
last modified: 02.04.2020 by Tamra Ross
author: Tamra Ross
email: tamra@cobwebdesign.ca
website: http://cobwebdesign.ca/
----------------------------------------------------------*/


/* -----------------------------------------------------------
CONTENTS:
	=Text styles
LAYOUT STYLES
	=Position Styles
	=Navbar
	=Masthead
CONTENT STYLES
	=Content Section Styles
	=Scroller styles
	=Section styles
	=Jumbotron styles
	=Accordion styles
	=Navbar
	=Footer styles
	=Big button styles

------------------------------------------------------------*/




body {
  font-family: 'Lato';
  padding-top: 50px;
}

.bold {
	font-weight: 800;
}


h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Catamaran';
  font-weight: 800 !important;
}


/* ***************************** 
       text styles
******************************* */

.lead {
	font-weight: 400;	
}

.copyright, .copyright a {
	font-size: .9em;
	color: #6c757d;
	font-weight: 800;
}

.temprange {
	font-weight: 700;
	font-size: .9em;
}

.text-faded {
  color: rgba(255, 255, 255, 0.7);
}


.text-purple {
	color: #662d91;
}

a {
}

a:hover, a:focus, a:active {
}

.visitlink {
	font-weight: 500;
	font-size:  1.5rem;
	color: #6c757d;
}

.visitlink-icon {
	font-size:  1.0rem;
}


.visitlink a:hover, .visitlink a:focus, .visitlink a:active, 
	.visitlink a:visited {
	text-decoration: none;
	color: #6c757d;
}

.reslink a, .reslink a:hover, .reslink a:focus, .reslink a:active, 
	.reslink a:visited {
	text-decoration: underline;
	color: #ffffff;
}

.reslink {
	line-height: 45px;
}

/* ***************************** 
      	Position Styles
******************************* */

.vcenter {
	position: relative;
	top: 50%;
	transform: translateY(-50%);	
}

/* special class for vcentering text on instructions cards */
.instruct-center {
	position: relative;
	top: 50%;
	transform: translateY(-50%);	
}

@media (max-width: 576.98px) {

	.instruct-center {
		position: relative;
		top: 0;
		transform: none;
	}
}


.cover {
  object-fit: cover;
}

.pan {
  height: 300px;
  padding: 0px;
  overflow: hidden;
  object-fit: cover;
  padding-left: 0px;
  margin-left: 0px;
}

.pan-frame {
  animation-name: example2;
  animation-duration: 30s;
  animation-iteration-count: infinite;
}



@keyframes example2 {
  0%   {margin-left:-0px; padding-left:0px;}
  25%  {margin-left:0px; margin-right: -800px; padding-left:0px;}
  50%  {margin-left:-800px; margin-right: 0px; padding-left:0px;}
  100% {margin-left:-0px; padding-left:0px;}
}

.bg-pale {
	background-color:  #eef;
}



/* ***************************** 
      	Navbar
******************************* */

.nav-item {
	text-align: center;	
	position: relative;
	display: table;
	vertical-align: middle;
}

.navbar-nav{
	align-items: center;

}

.nav-separator{
	color: #666;
	text-align: middle;

}
.nav-separator img{
	height: 30px;
	width: 2px;

}

.navbar .navbar-nav {

}

.navbar .navbar-collapse {

}



/* ***************************** 
      	Masthead
******************************* */

header.masthead {
  position: relative;
  overflow: hidden;
  padding-top: calc(5rem);
  padding-bottom: 4rem;
  background: linear-gradient(0deg, #ece2f0 0%, #ffffff 100%);
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: scroll;
  background-size: cover;
}

header.masthead .masthead-content {
  z-index: 1;
  position: relative;
}

header.masthead .masthead-content .masthead-heading {
    font-size: 3.25rem;
}

header.masthead .masthead-content .masthead-subheading {
    font-size: 1.5rem;
}

header.masthead .bg-circle {
  z-index: 0;
  position: absolute;
  border-radius: 100%;
  background: linear-gradient(0deg, #ece2f0 0%, #8b75b5 100%);
}

header.masthead .bg-circle-1 {
  height: 90rem;
  width: 90rem;
  bottom: -55rem;
  left: -55rem;
}

header.masthead .bg-circle-2 {
  height: 50rem;
  width: 50rem;
  top: -25rem;
  right: -25rem;
}

header.masthead .bg-circle-3 {
  height: 20rem;
  width: 20rem;
  bottom: -10rem;
  right: 5%;
}

header.masthead .bg-circle-4 {
  height: 30rem;
  width: 30rem;
  top: -5rem;
  right: 35%;
}

.logomarks {
	position: relative;
	margin-bottom: 40px;

/*	background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 35%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 65%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
/*	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 35%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 65%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
/*	background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 35%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 65%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
/*	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */
	
}

.logo-echo {
	max-height: 70px;
	margin-right: 20px;
}

.logo-arche {
	max-height: 50px;
	margin-right: 15px;
}

.logo-trekk {
	max-height: 55px;

}

/* *********************************** 
     	Content Section Styles
************************************ */

.content-section {
  padding-top: 5rem;
  padding-bottom: 3.5rem;
}

.content-section-heading h2 {
  font-size: 3rem;
}

.content-section-heading h3 {
  font-size: 1.5rem;
  text-transform: uppercase;
}

.lead2 {
	text-align: left;
}

.explanation {
	font-size: 1.0rem;
	margin-top: 5px;
}


/* *********************************** 
             Scroller Styles
************************************ */

.scroll-to-top {
  position: fixed;
  right: 15px;
  bottom: 15px;
  display: none;
  width: 50px;
  height: 50px;
  text-align: center;
  color: white;
  background: rgba(52, 58, 64, 0.5);
  line-height: 45px;
}

.scroll-to-top:focus, .scroll-to-top:hover {
  color: white;
}

.scroll-to-top:hover {
  background: #343a40;
}

.scroll-to-top i {
  font-weight: 800;
}


/* *********************************** 
           Section Styles
************************************ */

.content-triage {
	background: #662d91;	
}

.content-regisration {
	background: #ffffff;	
}

.content-waiting {
	background: #eef;	
}

.content-doctor {
	background: #beadd4;	
}

.content-discharge {
	background: #662d91;	
}

.content-COVID1 {
	background: #f4b0ca;
}

.content-COVID2 {
	background: #aa0c41;
	border: 15px solid white;
}

.content-COVID3 {
	background: #97195a;
	border: 15px solid white;
}

.content-COVID4 {
	background: #702081;
	border: 15px solid white;
}

.content-COVID5 {
	background: #f4b0ca;
	border: 15px solid white;
}


.card-text-light {
	color: #fff;	
}

.card .shaded-img {
	background: #FFF0CF;
}

.card-body {
	
}

.card-block {
	padding-right: 13px;
	padding-left: 5px;
}

#covid03 .card {

	background-color: #97195a;
	border: 0px;
	text-align: left;
}

#covid03 .card-title {

	margin-top: 0px;
	font-size: 1.25rem;
	font-family: 'Lato';
}

#covid03 .card-text {

	margin-top: 0px;
	font-size: 1.25rem;
	font-family: 'Lato';
}

#covid03 .card-body {

	margin: auto;
	padding-top: 0px;
}

#covid03 .card-img {
	padding: 0 10px 10px;
}



/* ************************************* 
        	Jumbotron Styles
************************************** */

.jumbotron {
	padding: 0;
	border-radius: 15px;
}

#jumbotron-alert {
	padding: 1rem;
	background: #420039;
}

#jumbotron-alert-2 {
	padding: 1rem;
	background: #420039;
}



/* ***************************** 
         	Navbar
******************************* */

.navbar .navlink {
		
}


/* ***************************** 
	Footer styles
******************************* */

footer.footer {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

#scrollbutton a {
	text-decoration: none;	
}

.angle-up {
	font-family: 'catamaran';
	font-weight: 800;
}


/* ***************************** 
	Big button styles
******************************* */

#big-buttons {
	
}

.fever-button {
	font-size: 1.5rem;
	width: 100%;
	margin-bottom: 15px;
	padding: 8px 0 8px 0 ;
}

.overlay {
    position: fixed; /* Sit on top of the page content */
    display: none; /* Hidden by default */
    width: 90%; /* Full width (cover the whole page) */
    height: 80%; /* Full height (cover the whole page) */
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0;
    margin-top: 90px;
    margin-bottom: 50px;
    background-color: rgba(0,0,0,0.8); /* Black background with opacity */
    z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer; /* Add a pointer on hover */
}

.overlay-text {
	position: absolute;
	width: 100%;
	height: 100%;
	margin: auto;
	top: 50%;
	transform: translateY(-50%);	
    font-size: 18px;
    padding: 30px 20px 130px 20px ;
    color: white;
    overflow-y: scroll;
}


@media (max-width: 767.98px) {
	#overlay-text {
		font-size: 15px;
		padding-right: 30px;
	}

}

.noscroll { 
  overflow: hidden;
}

[aria-hidden="true"]  { display: none; }
[aria-hidden="false"] { display: block; }