/* Extra small devices (portrait phones, less than 576px)*/
/* No media query since this is the default in Bootstrap*/

/* Extra small devices (phones, 576px and below)*/
@media (max-width: 576px) {
	div#footer {
		flex: 1;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-around;
	}

	#cards ul li {
		max-width: 100%;
	}

	#top {
		height: 100vh;
	}

	.sticky-top {
		display: none !important;
	}

	#logo {
		display: none;
	}

	div#mobile-logo {
		width: 40%;
		margin-top: 50px;
		padding: 0px;
		z-index: 10;
		display: block;
	}

	div#mobile-logo img {
		max-width: 100%;
		filter: brightness(0) invert(1);
	}

	#watermark {
		display: none;
	}

	.shape {}

	header {
		width: 100%;
		max-height: 100vh;
		padding: 0px 10px 0px 50px;
	}

	#heading {
		background: none;
		box-shadow: none;
		padding: 0px 0px;
		z-index: 1;
		float: none;
		margin: 2% 0 10% 0;
		width: 100%;
		max-width: 100%;
		max-height: 100vh;
	}

	#heading h1 {
		text-align: right;
		max-width: 100%;
		font-size: 12vw;
	}

	#heading p {
		max-width: 100%;
		font-size: 6vw;
		text-align: right;
	}

	.d-inline-flex {
		flex: 1;
		flex-direction: column;
	}

	#rotation, #slider, #tx {
		height: 300px;
	}

	#tx p {}

	.cb-slideshow li:nth-child(1) span {
		background-size: 350%;
		background-position: 45%;
	}

	.cb-slideshow li:nth-child(2) span {
		background-size: 350%;
		background-position: 30%;
	}

	.cb-slideshow li:nth-child(3) span {
		background-size: 350%;
		background-position: 20%;
	}

	.cb-slideshow li:nth-child(4) span {
		background-size: 500%;
		background-position: 25%;
	}

	.marquee-content {
		-webkit-animation: scrolling var(--marquee-animation-duration) linear infinite;
		animation: scrolling var(--marquee-animation-duration) linear infinite;
	}

	.marquee-content li {
		width: 100%;
	}

	#banner-erms, #banner-edi, #banner-webprint, #banner-services, #banner-about, #partners {
		margin-top: 50px;
	}

	.list li {
		list-style: none;
		width: 100%;
	}
	.autocompleter,
	.autocompleter-hint {
		width: 100%;
	}
	#tpsubmit {
		max-width: 100%;
	}

	#tpsubmit input {
		width: 100%;
	}
	#tpsubmit input[type="submit"] {
		width: 100%;
	}

	.flow-chart {
		display: none;
	}

	.flow-list {
		display: block;
	}

	#event-timeline {
		display: none;
	}

	.timeline {
		display: block;
	}

	.jumbotron {
		margin-top: 50px !important;
	}

	#back {
		margin-top: 100px !important;
	}

	#partners {
		margin-top: 50px;
	}

	#partners .p-3 {
		padding: 20px 0px !important;
	}
}


/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {
	.jumbotron {
		margin-top: 50px !important;
	}

	#back {
		margin-top: 100px !important;
	}

	.marquee-content {
		-webkit-animation: scrolling var(--marquee-animation-duration) linear infinite;
		animation: scrolling var(--marquee-animation-duration) linear infinite;
	}

	.marquee-content li {
		width: 100%;
	}

	.sticky-top {
		display: none !important;
	}

	#banner-erms, #banner-edi, #banner-webprint, #banner-services, #banner-about, #partners {
		margin-top: 50px;
	}

	.list li {
		list-style: none;
		width: 100%;
	}

	#tpsubmit {
		max-width: 100%;
	}

	#tpsubmit input {
		width: 100%;
	}

	#tpsubmit input[type="submit"] {
		width:100%;
	}

	.flow-chart {
		display: none;
	}

	.flow-list {
		display: block;
	}

	#event-timeline {
		display: none;
	}

	.timeline {
		display: block;
	}

	div#footer {
		flex: 1;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-around;
	}

	#logo {
		margin-top: 8%;
	}

	#cards ul li {
		max-width: 100%;
	}

	#top {
		height: 100vh;
	}

	.topnav {
		display: none !important;
	}

	.sticky-top {
		display: none !important;
	}

	.d-inline-flex {
		flex: 1;
		flex-direction: column;
	}

	#rotation, #slider, #tx {
		height: 200px;
	}

	#tx p {
		padding: 10px 15px;
	}

	#event-timeline {
		display: none;
	}

	.timeline {
		display: block;
	}

	.cb-slideshow li:nth-child(1) span {
		background-size: cover;
		background-position: bottom;
	}

	.cb-slideshow li:nth-child(2) span {
		background-size: cover;
		background-position: 50%;
	}

	.cb-slideshow li:nth-child(3) span {
		background-size: cover;
		background-position: bottom;
	}

	.cb-slideshow li:nth-child(4) span {
		background-size: cover;
		background-position: bottom;
	}

	#watermark {
		display: none;
	}

	#heading {
		margin: 40% 0 10% 0;
		width: 80%;
	}

	#heading h1 {
		max-width: 100%;
		font-size: 5vw;
	}

	#heading p {
		max-width: 100%;
		font-size: 3vw;
	}
}

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
	div#footer {
		flex: 1;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-around;
	}

	#back {
		margin-top: 50px !important;
	}

	#cards ul li {
		max-width: 50%;
	}

	.window {
		display: none;
	}

	#logo {
		margin-top: 6%;
	}

	#top {
		height: 100vh !important;
	}

	.sticky-top {
		display: none !important;
	}

	.topnav {
		display: flex !important;
	}

	#banner-erms, #banner-edi, #banner-webprint, #banner-services, #banner-about, #partners {
		margin-top: 50px;
	}

	.d-inline-flex {
		flex: 1;
		flex-direction: column;
	}

	#rotation, #slider, #tx {
		height: 150px;
	}

	#tx p {
		padding: 10px 15px;
	}
	.autocompleter,
	.autocompleter-hint {
		width: 50%;
	}
	#tpsubmit {
		max-width: 100%;
	}

	#tpsubmit input {
		width: 50%;
	}
	#tpsubmit input[type="submit"] {
		width: 25%;
	}
	.flow-chart {
		display: none;
	}

	.flow-list {
		display: block;
	}

	.list li {
		list-style: none;
		width: 50%;
	}

	#event-timeline {
		display: none;
	}

	.timeline {
		display: block;
	}

	.cb-slideshow li:nth-child(1) span {
		background-size: cover;
		background-position: bottom;
	}

	.cb-slideshow li:nth-child(2) span {
		background-size: cover;
		background-position: 50%;
	}

	.cb-slideshow li:nth-child(3) span {
		background-size: cover;
		background-position: bottom;
	}

	.cb-slideshow li:nth-child(4) span {
		background-size: cover;
		background-position: bottom;
	}

	.marquee-content {
		-webkit-animation: scrolling var(--marquee-animation-duration) linear infinite;
		animation: scrolling var(--marquee-animation-duration) linear infinite;
	}

	.marquee-content li {
		width: 50%;
	}

	#heading {
		margin: 25% 0 10% 0;
	}

	#heading h1 {
		max-width: 100%;
		font-size: 5vw;
	}

	#heading p {
		max-width: 100%;
		font-size: 3vw;
	}
}

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
	div#footer {
		flex: 4;
		flex-direction: row;
	}

	#back {
		margin-top: 50px !important;
	}

	#cards ul li {
		max-width: 33%;
	}

	.window {
		display: none;
	}

	.sticky-top {
		display: flex !important;
	}

	.topnav {
		display: flex !important;
	}

	#banner-erms, #banner-edi, #banner-webprint, #banner-services, #banner-about, #partners {
		margin-top: 0;
	}

	#top {
		height: 85vh;
	}

	.d-inline-flex {
		flex: 1;
		flex-direction: row;
	}
	.autocompleter,
	.autocompleter-hint {
		width: 50%;
	}
	#tpsubmit {
		max-width: 100%;
	}

	#tpsubmit input {
		width: 50%;
	}
	#tpsubmit input[type="submit"] {
		width: 25%;
	}
	.flow-chart {
		display: block;
	}

	.flow-list {
		display: none;
	}

	.list li {
		list-style: none;
		width: 33%;
	}

	#event-timeline {
		display: flex;
	}

	.timeline {
		display: none;
	}

	#logo {
		margin-top: 0;
	}

	.marquee-content {
		-webkit-animation: none;
		animation: none
	}

	.marquee-content li {
		width: 33%;
	}

	#heading {
		margin: 14% 0 10% 0;
	}

	#heading h1 {
		max-width: 100%;
		font-size: 4vw;
	}

	#heading p {
		max-width: 100%;
		font-size: 2vw;
	}
}

/* Extra large above 1200*/
@media (min-width: 1200px) {
	#logo {
		margin-top: 0%;
	}

	#back {
		margin-top: 50px !important;
	}

	div#footer {
		flex: 4;
		flex-direction: row;
	}

	#cards ul li {
		max-width: 20%;
	}

	.sticky-top {
		display: flex !important;
	}

	.topnav {
		display: flex !important;
	}

	#banner-erms, #banner-edi, #banner-webprint, #banner-services, #banner-about, #partners {
		margin-top: 0;
	}

	.d-inline-flex {
		flex: 1;
		flex-direction: row;
	}

	.flow-chart {
		display: block;
	}

	.flow-list {
		display: none;
	}

	.list li {
		list-style: none;
		width: 33%;
	}

	#event-timeline {
		display: flex;
	}

	.timeline {
		display: none;
	}

	.marquee-content {
		-webkit-animation: none;
		animation: none
	}

	.marquee-content li {
		width: 33%;
	}
	#heading {
		margin: 8% 0 10% 0;
		width:60%;
	}

	#heading h1 {
		max-width: 100%;
		font-size: 3vw;
	}

	#heading p {
		max-width: 100%;
		font-size: 1.4vw;
	}
}

/**********************
	  mobile menu
	  ********************/
@media (max-width: 992px) {
	.topnav {
		display: none !important;
	}

	.call {
		width: 18px;
		height: 8px;
		position: absolute;
		right: 18px;
		display: block;
		margin: -4px auto 0;
		top: 15px;
	}

	.mail {
		width: 18px;
		height: 8px;
		position: absolute;
		right: 55px;
		display: block;
		margin: -4px auto 0;
		top: 16px;
	}

	.window {
		display: block;
	}

	.window .header {
		position: fixed;
		display: block;
		top: 0;
		left: 0;
		height: 50px;
		width: 100%;
		background: rgba(0, 0, 0, 0.8);
		overflow: hidden;
		transition: all 0.5s ease-out, background 1s ease-out;
		transition-delay: 0.2s;
		z-index: 7;
	}

	img#mobile-watermark {
		position: absolute;
		right: 0;
		top: 0;
		opacity: .1;
		z-index: -99;
		overflow: clip;
		-webkit-filter: brightness(150%);
		filter: brightness(150%);
		max-width: 100%;
		height: auto;
	}

	.window .header .burger-container {
		position: relative;
		display: inline-block;
		height: 50px;
		width: 50px;
		cursor: pointer;
		transform: rotate(0deg);
		transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
		user-select: none;
		-webkit-tap-highlight-color: transparent;
	}

	.window .header .burger-container #burger {
		width: 18px;
		height: 8px;
		position: relative;
		display: block;
		margin: -4px auto 0;
		top: 50%;
		z-index: 5;
	}

	.window .header .burger-container #burger .bar {
		width: 100%;
		height: 1px;
		display: block;
		position: relative;
		background: #fff;
		transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
		transition-delay: 0s;
	}

	.window .header .burger-container #burger .bar.topBar {
		transform: translateY(0px) rotate(0deg);
	}

	.window .header .burger-container #burger .bar.btmBar {
		transform: translateY(6px) rotate(0deg);
	}

	.window .header .icon {
		display: inline-block;
		position: absolute;
		height: 100%;
		line-height: 50px;
		width: 50px;
		height: 50px;
		text-align: center;
		color: #fff;
		font-size: 22px;
		left: 50%;
		transform: translateX(-50%);
	}

	.window .header .icon.icon-bag {
		right: 0;
		top: 0;
		left: auto;
		transform: translateX(0px);
		transition: transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
		transition-delay: 0.65s;
	}

	.window .header ul.menu {
		position: absolute;
		display: block;
		padding: 0px 48px 0;
		list-style: none;
	}

	.window .header ul.menu li.menu-item {
		border-bottom: 1px solid #333;
		margin-top: 5px;
		transform: scale(1.15) translateY(-30px);
		opacity: 0;
		transition: transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99), opacity 0.6s cubic-bezier(0.4, 0.01, 0.165, 0.99);
	}

	.window .header ul.menu li.menu-item:nth-child(1) {
		transition-delay: 0.49s;
		margin-top: 50px;
	}

	.window .header ul.menu li.menu-item:nth-child(2) {
		transition-delay: 0.42s;
	}

	.window .header ul.menu li.menu-item:nth-child(3) {
		transition-delay: 0.35s;
	}

	.window .header ul.menu li.menu-item:nth-child(4) {
		transition-delay: 0.28s;
	}

	.window .header ul.menu li.menu-item:nth-child(5) {
		transition-delay: 0.21s;
	}

	.window .header ul.menu li.menu-item:nth-child(6) {
		transition-delay: 0.14s;
	}

	.window .header ul.menu li.menu-item:nth-child(7) {
		transition-delay: 0.07s;
	}

	.window .header ul.menu li.menu-item a {
		display: block;
		position: relative;
		color: #fff;
		font-weight: 100;
		text-decoration: none;
		font-size: 22px;
		line-height: 2.35;
		font-weight: 200;
		width: 100%;
	}

	.window .header.menu-opened {
		height: 100vh;
		background-color: #000;
		transition: all 0.3s ease-in, background 0.5s ease-in;
		transition-delay: 0.25s;
	}

	.window .header.menu-opened .burger-container {
		transform: rotate(90deg);
	}

	.window .header.menu-opened .burger-container #burger .bar {
		transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99);
		transition-delay: 0.2s;
	}

	.window .header.menu-opened .burger-container #burger .bar.topBar {
		transform: translateY(4px) rotate(45deg);
	}

	.window .header.menu-opened .burger-container #burger .bar.btmBar {
		transform: translateY(3px) rotate(-45deg);
	}

	.window .header.menu-opened ul.menu li.menu-item {
		transform: scale(1) translateY(0px);
		opacity: 1;
	}

	.window .header.menu-opened ul.menu li.menu-item:nth-child(1) {
		transition-delay: 0.27s;
	}

	.window .header.menu-opened ul.menu li.menu-item:nth-child(2) {
		transition-delay: 0.34s;
	}

	.window .header.menu-opened ul.menu li.menu-item:nth-child(3) {
		transition-delay: 0.41s;
	}

	.window .header.menu-opened ul.menu li.menu-item:nth-child(4) {
		transition-delay: 0.48s;
	}

	.window .header.menu-opened ul.menu li.menu-item:nth-child(5) {
		transition-delay: 0.55s;
	}

	.window .header.menu-opened ul.menu li.menu-item:nth-child(6) {
		transition-delay: 0.62s;
	}

	.window .header.menu-opened ul.menu li.menu-item:nth-child(7) {
		transition-delay: 0.69s;
	}

	.window .header.menu-opened .icon.icon-bag {
		transform: translateX(75px);
		transition-delay: 0.3s;
	}

	.window .content {
		padding: 67px 4% 0;
		text-align: justify;
		overflow: scroll;
		max-height: 100%;
	}

	.window .content::-webkit-scrollbar {
		display: none;
	}

	.window .content h2 {
		margin-bottom: 0px;
		letter-spacing: 1px;
	}

	.window .content img {
		width: 95%;
		position: relative;
		display: block;
		margin: 75px auto 75px;
	}

	.window .content img:nth-of-type(2) {
		margin: 75px auto;
	}

	.window .header .menu-footer {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: end;
		color: white;
		top: 70%;
		width: 100%;
		text-align: center;
	}

	/****************************
mobile timeline
***************************/
	.timeline {
		border-left: 4px solid #4298C3;
		border-bottom-right-radius: 4px;
		border-top-right-radius: 4px;
		background: rgba(255, 255, 255, 0.03);
		color: rgba(255, 255, 255, 0.8);
		margin: 25px 0px 25px 40%;
		letter-spacing: 0.5px;
		position: relative;
		line-height: 1.4em;
		font-size: 1.03em;
		padding: 50px 25px;
		list-style: none;
		text-align: left;
		font-weight: 100;
		max-width: 65%;
	}

	.timeline h1, .timeline h2, .timeline h3 {
		letter-spacing: 1.5px;
		font-weight: 100;
		font-size: 1.4em;
	}

	.timeline .event {
		border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
		padding-bottom: 25px;
		margin-bottom: 50px;
		position: relative;
	}

	.timeline .event:last-of-type {
		padding-bottom: 0;
		margin-bottom: 0;
		border: none;
	}

	.timeline .event:before, .timeline .event:after {
		position: absolute;
		display: block;
		top: 0;
	}

	.timeline .event:before {
		left: -175px;
		color: rgba(255, 255, 255, 0.4);
		content: attr(data-date);
		text-align: right;
		font-weight: 100;
		font-size: 0.9em;
		max-width: 120px;
		white-space: pre;
	}

	.timeline .event:after {
		box-shadow: 0 0 0 4px #4298c3;
		left: -32px;
		background: #313534;
		border-radius: 50%;
		height: 11px;
		width: 11px;
		content: "";
		top: 5px;
	}

}