/*******************************
        Mobile Breakpoints
*******************************/
/* --- Desktop Browser --- */
/* --- Width <= 767px --- */
@media
only screen
and (max-width: 767px) {
	/*-------------------
		Typography
	--------------------*/
	body {
		/* font size = 16px */
		font-size: 100%;
		line-height: 1.375em;
	}
	p {
		/* equivalent to 16px */
		font-size: 1em;
		/* equivalent to 20px */
		line-height: 1.25em;
	}
	h1.ui.header, h1.ui.header:only-of-type {
		/* equivalent to 32px */
		font-size: 2em;
		/* equivalent to 20px */
		line-height: 1.25em;
	}
	h2.ui.header {
		/* equivalent to 26px */
		font-size: 1.625em;
		/* equivalent to ~18px */
		line-height: 1.15384615em;
	}
	h3.ui.header {
		/* equivalent to 22px */
		font-size: 1.375em;
		/* equivalent to ~18px */
		line-height: 1.13636364em;
	}
	h4.ui.header {
		/* equivalent to 18px */
		font-size: 1.125em;
		/* equivalent to ~18px */
		line-height: 1.11111111em;
	}
	h5.ui.header {
		font-size: 1em;
		line-height: 1.25em;
		font-weight: bold;
	}
	i.huge.icon {
		font-size: 2em;
	}
	/*-------------------
			Segment
	--------------------*/
	/* remove padding for mobile */
	.ui.typographic.container .ui.basic.segment {
		padding-left: 0em;
		padding-right: 0em;
	}
	/* Stripe - First Panel */
	.ui.stripe.segment {
		padding: 3em 0em;
	}
	/*-------------------
		Top Menu
	--------------------*/
	/* hide all items in the menu */
	.ui.secondary.pointing.menu.web .item {
		display: none;
	}
	/* show toc item */
	.ui.secondary.pointing.menu.web .toc.item,
	/* show logo item */
	.ui.secondary.pointing.menu.web .logo.item {
		display: block;
	}
	/* align logo to mobile content in the menu */
	.logo {
		margin-left: 1em;
	}
	/*-------------------
			Nameplate
	--------------------*/
	/* make the nameplate button fluid */
	.panel.nameplate .ui.segment .ui.basic.inverted.button {
		width: 100%;
		margin-top: 1em;
	}
	/* show 100% of the hero height */
	.hero {
		min-height: 50vh;
		height: 50vh;
	}
	.ui.segment .hero .ui.text.container {
		padding: 1em;
		margin-left: 1em !important;
		margin-right: 1em !important;
	}
	.hero h3.ui.header {
		/* equivalent to 16px */
		font-size: 1em;
		/* equivalent to 20px */
		line-height: 1.25em;
	}
	/* crop/position images for mobile devices */
	#hero-infrastructure {
		background-position: 0% 0%;
	}
	#hero-services {
		background-position: 80% 0%;
	}
	#hero-business-model {
		background-position: 75% 0%;
	}
	/*-------------------
			Signup
	--------------------*/
	/* Signup - Step */
	#signup-intro .container.step {
		/* change direction on mobile */
		flex-direction: row;
		align-items: flex-start; /* align the text to the top of the images*/
	}
	/* Signup - Container Items */
	#signup-intro .container.step .ui.container {
		margin-top: 0;
		margin-left: 2em !important;
		margin-right: 0 !important;
	}
	/* Signup - Step - H3 Header*/
	#signup-intro .container.step h3 {
		margin-top: 0;
		/* remove margins on mobile */
	}
	/* Signup - Button */
	.panel #btn_get-started.ui.button{
		margin-top: 0em;
	}
	/* Stripe - First Panel */
	.panel.first  .ui.stripe.segment {
		padding: 3em 0em 3em 0em;
	}
	/*-------------------
			Jobs
	--------------------*/
	.panel #btn_browse-jobs.ui.button{
		margin-top: 0em;
	}
}

/*******************************
        Mobile Devices
*******************************/
/* --- 9:16 --- */
/* --- Apple iPhone 6, 7, 8 --- */
/* --- Apple iPhone 6 Plus --- */
/* --- Samsung Galaxy S7 --- */
/* --- Samsung Galaxy S5 --- */
/* --- Samsung Galaxy Note 3 --- */
/* --- Samsung Galaxy S7 --- */
/* --- One Plus One --- */
/* --- 9:18.5 --- */
/* --- Samsung Galaxy S9, S8, S9+, S8+ --- */
/* --- Samsung Galaxy S3, S4 mini, S5, S6, S7, S7 edge --- */
@media
/* Portrait */
only screen
and (min-width: 320px)
and (max-width: 767px)
and (max-height: 960px)
and (orientation: portrait) {
	/*-------------------
	       Nameplate
	--------------------*/
	.hero {
		min-height: 75vh;
		height: 75vh;
	}
	/*change font size and spacing for mobile devices */
	.hero h1.ui.header, h1.ui.header:only-of-type {
		/* equivalent to 32px */
		font-size: 2em;
		/* equivalent to 20px */
		line-height: 1.25em;
	}
	.hero h3.ui.header {
		/* equivalent to 22px */
		font-size: 1.375em;
		/* equivalent to ~18px */
		line-height: 1.13636364em;
	}
	/*reduce margin of the nameplate button */
	.panel .ui.button {
		margin-top: 1em;
	}
	/*-------------------
					Segment
	--------------------*/
	/* remove padding for mobile */
	.ui.typographic.container .ui.basic.segment {
		padding-left: 0em;
		padding-right: 0em;
	}
	/* Stripe - First Panel */
	.ui.stripe.segment {
		padding: 3em 0em;
	}
	/*-------------------
					Signup
	--------------------*/
	/* Signup - Button */
	.panel #btn_get-started.ui.button{
		margin-top: 0em;
	}
	/* Stripe - First Panel */
	.panel.first  .ui.stripe.segment {
		padding: 3em 0em 3em 0em;
	}
	/*-------------------
					Jobs
	--------------------*/
	.panel #btn_browse-jobs.ui.button{
		margin-top: 0em;
	}
}

@media
/* Landscape */
only screen
and (min-width: 568px)
and (max-width: 960px)
and (min-height: 320px)
and (max-height: 767px)
and (orientation: landscape) {

	/*-------------------
        Nameplate
  --------------------*/
	.hero {
		min-height: 80vh;
		height: 80vh;
	}

	.ui.segment .hero .ui.text.container {
		padding: 1em;
	}

	/*change font size and spacing for mobile devices */
	.hero h1.ui.header, h1.ui.header:only-of-type {
		/* equivalent to 32px */
		font-size: 2em;
		/* equivalent to 20px */
		line-height: 1.25em;
	}

	.hero h3.ui.header {
		/* equivalent to 16px */
		font-size: 1em;
		/* equivalent to 20px */
		line-height: 1.25em;
	}

	/*reduce margin of the nameplate button */
	.panel .ui.button {
		margin-top: 1em;
	}

}

/*******************************
        Tablet Breakpoints
*******************************/
/* --- Desktop Browser --- */
/* --- Width = 768px - 991px --- */
@media
only screen
and (min-width: 768px)
and (max-width: 991px) {

	/*-------------------
        Typography
  --------------------*/
	body {
		/* font size = 16px */
		font-size: 100%;
		line-height: 1.375em;
	}

	p {
		/* equivalent to 16px */
		font-size: 1em;
		/* equivalent to 22px */
		line-height: 1.375em;
	}

	h1.ui.header, h1.ui.header:only-of-type {
		/* equivalent to 40px */
		font-size: 2.5em;
		/* equivalent to 18px */
		line-height: 1.125em;
	}

	h2.ui.header {
		/* equivalent to 32px */
		font-size: 2em;
		/* equivalent to 20px */
		line-height: 1.25em;
	}

	h3.ui.header {
		/* equivalent to 24px */
		font-size: 1.5em;
		/* equivalent to 20px */
		line-height: 1.25em;
	}

	h4.ui.header {
		/* equivalent to 18px */
		font-size: 1.125em;
		/* equivalent to ~20px */
		line-height: 1.22222222em;
	}

	h5.ui.header {
		font-size: 1em;
		line-height: 1.375em;
		font-weight: bold;
	}
	i.huge.icon {
		font-size: 3em;
	}

	/*-------------------
        Top Menu
  --------------------*/
	/* smaller spacing between menu items */
	.ui.secondary.pointing.menu.web .item:not(.logo) {
		padding-left: 0.5em;
		padding-right: 0.5em;
		min-width: 6.5em;
		/*added ak - compensate for bolding resizing the active item*/
	}

	/* stack menu buttons and make them smaller */
	.ui.secondary.pointing.menu.web .button-group.item {
		padding-left: 0em;
		flex-direction: column;
		padding-top: 0em;
		padding-bottom: 0.8em;
	}

	/* justify menu buttons and remove padding margins */
	.ui.secondary.pointing.menu.web .button-group.item .ui.button {
		width: 100%;
		padding-top: 0.6em;
		padding-bottom: 0.6em;
		margin-bottom: 0.5em;
	}

	/* remove margins on menu buttons and last button */
	.ui.secondary.pointing.menu.web .button-group.item .ui.button:last-child {
		margin-left: 0em;
		margin-bottom: 0em;
	}

	/*-------------------
        Nameplate
  --------------------*/
	#hero-infrastructure {
		background-position: 60% 50%;
	}

	#hero-services {
		background-position: 80% 50%;
	}

	#hero-business-model {
		background-position: 75% 50%;
	}

}

/*******************************
        Tablet Devices
*******************************/
/* --- 4:3 --- */
/* --- Apple iPad Air 2 --- */
/* --- Apple iPad Mini 2 --- */
@media
/* --- Landscape --- */
only screen
and (aspect-ratio: 4/3)
and (min-width: 1024px)
and (min-height: 768px)
and (max-height: 991px)
and (orientation: landscape) {

	/*-------------------
        Nameplate
  --------------------*/
	.hero {
		min-height: 85vh;
		height: 85vh;
	}

	/*change font size and spacing for mobile devices */
	.hero h3.ui.header {
		/* equivalent to 28px */
		font-size: 1.75em;
		/* equivalent to 20px */
		line-height: 1.25em;
	}

	/*reduce margin of the nameplate button */
	.panel .ui.button {
		margin-top: 1em;
	}

	/* adjust bullets bottom margin */
	.glide__bullets {
		bottom: 4vh;
	}
}

@media
/* --- Portrait --- */
only screen
and (aspect-ratio: 3/4)
and (min-width: 768px)
and (max-width: 991px)
and (min-height: 1024px)
and (orientation: portrait) {

	/*-------------------
        Nameplate
  --------------------*/
	.hero {
		min-height: 65vh;
	}

	/*change font size and spacing for mobile devices */
	.hero h3.ui.header {
		/* equivalent to 24px */
		font-size: 1.5em;
		/* equivalent to 20px */
		line-height: 1.25em;
	}

	/*reduce margin of the nameplate button */
	.panel .ui.button {
		margin-top: 1em;
	}

}

/*******************************
    Small Monitor Breakpoint
*******************************/
/* --- Desktop Devices --- */
/* --- Width = 992px - 1199px --- */
@media
only screen
and (min-width: 992px)
and (max-width: 1199px) {

	/*-------------------
        Typography
  --------------------*/
	body {
		/* font size = 16px */
		font-size: 100%;
		line-height: 1.375em;
	}

	p {
		/* equivalent to 16px */
		font-size: 1em;
		/* equivalent to 22px */
		line-height: 1.375em;
	}

	h1.ui.header, h1.ui.header:only-of-type {
		/* equivalent to 48px */
		font-size: 3em;
		/* equivalent to ~17px */
		line-height: 1.05em;
	}

	h2.ui.header {
		/* equivalent to 36px */
		font-size: 2.25em;
		/* equivalent to 20px */
		line-height: 1.25em;
	}

	h3.ui.header {
		/* equivalent to 28px */
		font-size: 1.75em;
		/* equivalent to 20px */
		line-height: 1.25em;
	}

	h4.ui.header {
		/* equivalent to 18px */
		font-size: 1.125em;
		/* equivalent to ~20px */
		line-height: 1.22222222em;
	}

	h5.ui.header {
		font-size: 1em;
		line-height: 1.375em;
		font-weight: bold;
	}

	/*-------------------
        Nameplate
  --------------------*/
	#hero-infrastructure {
		background-position: 60% 0%;
	}

	#hero-services {
		background-position: 80% 0%;
	}

	#hero-business-model {
		background-position: 75% 0%;
	}
		/*-------------------
        About
	--------------------*/
	#about .ui.stripe.segment .ui.container.segment .row p {
		margin-bottom: 7em !important;
	}
	#about .ui.stripe.segment .ui.container.segment:last-child .row p {
		margin-bottom: 1em !important;
	}
}

/*******************************
    Large Monitor Breakpoint
*******************************/
/* --- Desktop Devices --- */
/* --- Width > 1200px --- */
@media
only screen
and (min-width: 1200px) {

	/*-------------------
        Typography
  --------------------*/
	body {
		/* font size = 16px */
		font-size: 100%;
		line-height: 1.375em;
	}

	p {
		/* equivalent to 16px */
		font-size: 1em;
		/* equivalent to 22px */
		line-height: 1.375em;
	}

	h1.ui.header, h1.ui.header:only-of-type {
		/* equivalent to 48px */
		font-size: 3em;
		/* equivalent to ~17px */
		line-height: 1.05em;
	}

	h2.ui.header {
		/* equivalent to 36px */
		font-size: 2.25em;
		/* equivalent to 20px */
		line-height: 1.25em;
	}

	h3.ui.header {
		/* equivalent to 28px */
		font-size: 1.75em;
		/* equivalent to 20px */
		line-height: 1.25em;
	}

	h4.ui.header {
		/* equivalent to 18px */
		font-size: 1.125em;
		/* equivalent to ~20px */
		line-height: 1.22222222em;
	}

	h5.ui.header {
		font-size: 1em;
		line-height: 1.375em;
		font-weight: bold;
	}

	/*-------------------
        Nameplate
  --------------------*/
	.hero {
		min-height: 60%;
	}

	#hero-infrastructure {
		background-position: 50% 0%;
	}

	#hero-services {
		background-position: 50% 0%;
	}

	#hero-business-model {
		background-position: 50% 0%;
	}
	/*-------------------
        About
	--------------------*/
	#about .ui.stripe.segment .ui.container.segment .row p {
		margin-bottom: 9em !important;
	}
	#about .ui.stripe.segment .ui.container.segment:last-child .row p {
		margin-bottom: 1em !important;
	}
}

/*******************************
      Large Display Devices
*******************************/
/* --- 16:9 --- */
@media
/* Landscape */
only screen
and (aspect-ratio: 16/9)
and (min-width: 1200px)
and (max-width: 1600px)
and (min-height: 720px)
and (orientation: landscape) {

	/*-------------------
        Nameplate
  --------------------*/
	.hero {
		height: 85vh;
	}

	/*change font size and spacing for mobile devices */
	.hero h1.ui.header, h1.ui.header:only-of-type {
		/* equivalent to 48px */
		font-size: 3em;
		/* equivalent to ~17px */
		line-height: 1.05em;
	}

	.hero h3.ui.header {
		/* equivalent to 28px */
		font-size: 1.75em;
		/* equivalent to 20px */
		line-height: 1.25em;
	}

	/*reduce margin of the nameplate button */
	.panel .ui.button {
		margin-top: 1em;
	}

	/* adjust bullets bottom margin */
	.glide__bullets {
		bottom: 10vh;
	}
}

@media
/* Portrait */
only screen
and (aspect-ratio: 9/16)
and (min-width: 720px)
and (min-height: 1200px)
and (max-height: 1600px)
and (orientation: portrait) {

	/*-------------------
        Nameplate
  --------------------*/
	.hero {
		min-height: 60vh;
	}

	/*change font size and spacing for mobile devices */
	.hero h1.ui.header, h1.ui.header:only-of-type {
		/* equivalent to 48px */
		font-size: 3em;
		/* equivalent to ~17px */
		line-height: 1.05em;
	}

	.hero h3.ui.header {
		/* equivalent to 28px */
		font-size: 1.75em;
		/* equivalent to 20px */
		line-height: 1.25em;
	}

	/*reduce margin of the nameplate button */
	.panel .ui.button {
		margin-top: 1em;
	}

}

/* --- 5:8 --- */
/* --- Amazon Kindle Fire HDX 8.9 --- */
@media
/* Landscape */
only screen
and (aspect-ratio: 5/8)
and (min-width: 1200px)
and (max-width: 1600px)
and (orientation: landscape) {

	/*-------------------
        Nameplate
  --------------------*/
	.hero {
		height: 85vh;
	}

	/*change font size and spacing for mobile devices */
	.hero h1.ui.header, h1.ui.header:only-of-type {
		/* equivalent to 48px */
		font-size: 3em;
		/* equivalent to ~17px */
		line-height: 1.05em;
	}

	.hero h3.ui.header {
		/* equivalent to 28px */
		font-size: 1.75em;
		/* equivalent to 20px */
		line-height: 1.25em;
	}

	/*reduce margin of the nameplate button */
	.panel .ui.button {
		margin-top: 1em;
	}

}

@media
/* Portrait */
only screen
and (aspect-ratio: 8/5)
and (min-height: 1200px)
and (max-height: 1600px)
and (orientation: portrait) {

	/*-------------------
        Nameplate
  --------------------*/
	.hero {
		min-height: 50vh;
	}

	/*change font size and spacing for mobile devices */
	.hero h1.ui.header, h1.ui.header:only-of-type {
		/* equivalent to 40px */
		font-size: 2.5em;
		/* equivalent to 18px */
		line-height: 1.125em;
	}

	.hero h3.ui.header {
		/* equivalent to 24px */
		font-size: 1.5em;
		/* equivalent to 20px */
		line-height: 1.25em;
	}

	/*reduce margin of the nameplate button */
	.panel .ui.button {
		margin-top: 1em;
	}

}