@charset "UTF-8";
/* CSS Document */


			* {
			  margin: 0;
			  padding: 0;
			  box-sizing: border-box;
			}
       body{
            margin: 0px !important;
            padding: 0px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            font-family: Arial, sans-serif;
		    width: 100vw;
			height: 100vh;
			overflow: hidden;
        }

	.screen {
	  display: none;
	  width: 100%;
	  height: 100%;
	}

	.screen.active {
	  display: block;
	}

	button.fullscreen {
		max-width:500px;
	}


		a{
			text-decoration: none;
		}

	#intro {
	  width: 100%;
	  min-height: 100vh;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	}

	.content {
	  background: url("../images/atr-background.jpg") no-repeat center center;
	  background-size: cover;
	  width: 100%;
	  min-height: 100vh;
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: center;
	  padding: 48px 0;
	  margin: 0px;
	}

	.content-inner {
	  width: 100%;
	}
		.all-buttons-container{
			max-width:50%;
			margin:48px auto;
		}

        .button-container {
          	margin:32px auto;
            z-index: 10;
			display: block;
			text-align: center;
        }

		.get-started-button-container {
  position: relative;
  max-width: 25%;
  margin: 48px auto;
  height: 60px;
}

button.fullscreen, button.begin {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
		
		button.begin{
		visibility: hidden;
		}

        button {
            background-color: #002855;
            border: none;
            color: white;
            padding: 12px 24px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 24px;
			font-weight: normal;
            cursor: pointer;
            border-radius: 12px;
            transition: background-color 0.3s;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
			width:100%;
        }

		button.home, button.home a{
			color:#ffffff;
			font-size:20px;
			padding:8px 16px;
		}

		button.menu {
			  position: fixed;
			  bottom: 25%;
			  left: 50%;
			  transform: translate(-50%, -50%);
			  max-width: 500px;
			  visibility: hidden;
			  z-index: 100;
			  transition: opacity 0.5s ease, visibility 0.5s ease;
			  opacity: 0;
	}


        button:hover {
            background-color: #008FBE;
        }

        button:active {
            background-color: #C8D300;
        }


		h1{
			font-family:Arial, Gotham, "Helvetica Neue", Helvetica,  "sans-serif";
			font-weight:bold;
			color:#002855;
			text-align: center;
			margin:40px auto;
			max-width:75%
		}

		h1{
			font-size:88px;
		}

		h1.menu{
			font-size:64px;
		}
		
		img{
			display:block;
			align:center;
			margin:20px auto;
		}
		
		p{
			font-size:24px;
			text-align: center;
			max-width:720px;
			margin:16px auto;
			color:#002855;
		}

		.video-container {
            position: relative;
            width: 1920px;
            max-width: 100%;
            aspect-ratio: 16 / 9;
			background: url('../images/video-poster-image.jpg') no-repeat center center;
  			background-size: cover;
        }

   video {
            width: 100%;
            height: 100%;
            display: block;
            background-color: #000;
        }

		.toolbar-container{
			width:100%;
			height:80px;
			position:fixed;
			bottom:0;		
		}

		.logo-container{
			position: absolute;
			left: 40px;
		}

		.home-button-container{
			position:absolute;
			right: 40px;
			bottom:0px;
		}

/********	SCENARIO 1 BUTTONS ********/

		.sc01-bt01{
			position:absolute;
			left:12%;
			bottom:15%;
			width:750px;
			height:160px;
			cursor:pointer;
			visibility: hidden;
		}

		.sc01-bt02{
				position:absolute;
				left:.35%;
				bottom:49.5%;
				width:85px;
				height:100px;
				cursor:pointer;
				visibility: hidden;
			}

		.sc01-bt03{
				position:absolute;
				right:1%;
				bottom:22%;
				width:75px;
				height:90px;
				cursor:pointer;
				visibility: hidden;
			}

		.sc01-bt04{
				position:absolute;
				right:7.5%;
				top:25.5%;
				width:125px;
				height:90px;
				cursor:pointer;
				visibility: hidden;
			}

		.sc01-bt05{
					position:absolute;
					left:13%;
					top:16.5%;
					width:120px;
					height:90px;
					cursor:pointer;
					visibility: hidden;
				}

/********	SCENARIO 2 BUTTONS ********/

		.sc02-bt01{
			position:absolute;
			left:12%;
			bottom:7%;
			width:750px;
			height:160px;
			cursor:pointer;
			visibility: hidden;
		}

		.sc02-bt02{
				position:absolute;
				left:.35%;
				bottom:46.5%;
				width:85px;
				height:90px;
				cursor:pointer;
				visibility: hidden;
			}

		.sc02-bt03{
				position:absolute;
				left:.35%;
				bottom:59%;
				width:75px;
				height:80px;
				cursor:pointer;
				visibility: hidden;
			}

		.sc02-bt04{
				position:absolute;
				left:18%;
				top:8.5%;
				width:100px;
				height:80px;
				cursor:pointer;
				visibility: hidden;
			}

		.sc02-bt05{
					position:absolute;
					left:13%;
					top:19%;
					width:120px;
					height:80px;
					cursor:pointer;
					visibility: hidden;
				}

/********	SCENARIO 3 BUTTONS ********/

.sc03-bt01{
			position:absolute;
			left:12%;
			bottom:7%;
			width:750px;
			height:160px;
			cursor:pointer;
			visibility: hidden;
		}

		.sc03-bt02{
				position:absolute;
				left:.35%;
				bottom:46.5%;
				width:85px;
				height:90px;
				cursor:pointer;
				visibility: hidden;
			}

		.sc03-bt03{
				position:absolute;
				left:.35%;
				bottom:59%;
				width:75px;
				height:80px;
				cursor:pointer;
				visibility: hidden;
			}

		.sc03-bt04{
				position:absolute;
				right:16%;
				top:21%;
				width:100px;
				height:80px;
				cursor:pointer;
				visibility: hidden;
			}

		.sc03-bt05{
					position:absolute;
					left:17%;
					top:9%;
					width:120px;
					height:80px;
					cursor:pointer;
					visibility: hidden;
				}