@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Ropa+Sans:ital@0;1&family=Staatliches&display=swap');


html{
    margin: 0;
    scroll-behavior: smooth;
}
body{
    min-height: 100vh;
    background-color: rgb(18, 24, 35);
    margin: 0;
    max-width: 80%;
    margin: auto;
    /* max-width: 1180px; */
    
}
.bg_layer{
    min-height: 100vh;
    position: fixed;
    left: 0px;
    top: 0px;
    height: 100vh;
    width: 100vw;
    z-index: -1;
}
.bg_layer_1{
    background-image: url("images/bg_solid.png");
    background-size: 200px 200px;
    animation: bg_1_scroll 30s linear 0s infinite;
    opacity: 0.6;

}
@keyframes bg_1_scroll{
from{background-position-y: 0px;}
to{background-position-y: 200px;}
}
@keyframes bg_2_scroll{
from{background-position-y: 0px;}
to{background-position-y: 200px;}
}

.divider{
    margin: 20px 0px;
    width: 100%;
    display: block;
}

.bg_layer_2{
    background-image: url("images/bg_layer_2.png");
    background-size: 200px 200px;
    animation: bg_1_scroll 15s linear 0s infinite;
}

.header_image{
    padding: 30px 0px 20px 0px;
    max-height: 150px;
    margin: auto;
    display: block;
}

.phrase{
    text-align: center;
    /* background-color: rgb(62, 62, 87); */
    /* background-image: linear-gradient(0deg, rgba(127, 161, 176, 0.344), transparent); */
    background-blend-mode: luminosity;
    border-bottom: 1px solid rgb(128, 128, 128);
    border-top: 1px solid white;
    backdrop-filter: blur(10px);
    border-radius: 5px;
    margin: auto;
    padding: 4px;
    display: block;
    color: whitesmoke;
    font-size: 35px;
    box-shadow: 0px 5px 5px black;
    text-shadow: 0px 5px 5px black;
    margin-bottom: 10px;
    font-family: 'Bebas Neue', cursive;
    padding-top: 6px;
}





.signup_link{
	text-decoration: none !important;
}
.signup_icon{
	height: 105px;
    position: absolute;
    right: 20px;
/*    top: 50%;*/
    top: 9%;
    transform: translate(0, -50%);
	transition: right 0.3s ease;
	
	-webkit-animation: wiggle 2s infinite; /* Safari 4+ */
	-moz-animation:    wiggle 2s infinite; /* Fx 5+ */
	-o-animation:      wiggle 2s infinite; /* Opera 12+ */
	animation:         wiggle 2s infinite; /* IE 10+, Fx 29+ */
	image-rendering: auto;
}
.signup_label:hover > .signup_icon{
	right: 30px;
}
@keyframes wiggle {
  0% {transform:rotate(15deg);}
  50% {transform:rotate(-15deg);}
  100% {transform:rotate(15deg);}
}


.signup_label{
	padding: 28px 16px;
    text-decoration: none;
    position: relative;
    border-top: 2px dashed #ffffff;
    border-bottom: 2px dashed #ffffff;
    background-image: radial-gradient(ellipse at top, #2879b3, #190e31);
}
.signup_label > div:nth-child(1){
  color: #ffffff;
  font-family: 'Bebas Neue', cursive;
  /* font-weight: 700; */
  font-size: 290%;
  transition: padding 0.3s ease;
  text-shadow: 0px 1px 4px #e4f0ff;
  line-height: 1em;
}
.signup_label:hover > div:nth-child(1){
  padding-left: 25px;
  transition: padding 0.3s ease;
  text-shadow: 0px 0px 4px #e25623;
  color: #ffeb00;
}

.signup_label > div:nth-child(2){
    font-family: 'Nanum Gothic', sans-serif;
    color: #64a2ff;
    /* font-weight: 700; */
    font-size: 106%;
    text-shadow: 0px 0px 2px;
    transition: padding 0.3s ease;
    line-height: 1em;
}
.signup_label:hover > div:nth-child(2){
	padding-left: 14px;
	transition: padding 0.3s ease;
}

.signup_label .signup_label_particles{
  background-image: url("images/particle_background.png");
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  animation: signup_label_particles 5s linear 0s infinite;
}

.signup_label .signup_label_particles_2{
  background-image: url("images/particle_background.png");
  height: 100%;
  position: absolute;
  background-position-x: 64px;
  top: 0px;
  left: 0px;
  width: 100%;
  animation: signup_label_particles 10s linear 0s infinite;
}

@keyframes signup_label_particles{
  from{
    background-position-y:  0px;
  }
  to{
    background-position-y: -512px;
  }
}

.mySlides {display:none;}

.about_academy_segment{
    display: grid;
    grid-template-columns: auto auto 30%;
    column-gap: 10px;
}

.prog_top_section{
    position: relative;
}
.prod_vid_grid{
    display: grid;
    grid-template-columns: auto auto;
}
.prod_vid_grid > video{
    width: 100%;
}
.prod_art_grid{
    display: grid;
}
.prod_art_grid > img{
    width: 100%;
}
.program_section{
    display: grid;
    grid-template-columns: max-content auto;
    column-gap: 5px;
}
.our_programs{
    font-family: "Staatliches", sans-serif;
    /* writing-mode: vertical-rl; */
    COLOR: WHITESMOKE;
    FONT-SIZE: 77px;
    /* text-orientation: upright; */
    line-height: 72px;
    text-shadow: 5px 0px 4px black;
    color: #2878b1;
    text-align: center;
    margin: 20px 0px;
    text-shadow: 0px -1px 0px #9ac7e8;
}

.button_list_bottom_cap{
    width: 200px ;
}
.prog_info_title{
    font-family: "Staatliches", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 25px;
    color: whitesmoke;
}
.program_list{
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: max-content;
}
.program_btn{
    /* position: relative; */
    min-width: 200px;
    height: max-content;
    overflow: hidden;
    cursor: pointer;
    /* position: relative; */
    font-family: "Staatliches", sans-serif;
    font-weight: 400;
    font-style: normal;
    /* min-height: 150px; */
    /* background-color: #2879b3; */
    /* flex: auto; */
    font-size: 25px;
    /* padding: 10px; */
    color: whitesmoke;
    background-image: radial-gradient(ellipse at top left, #2879b3ad, #164e7643);
    backdrop-filter: blur(5px);
}
.program_btn > img{
    position: absolute;
    top: 0px;
    opacity: 0.3;
    /* left: -50%; */
    
    height: 100%;
    z-index: -1;
    transition: opacity 0.5s ease-out;
    /* left: 0px !important; */
    /* transform: translate(-50%, 0%); */
}
.program_btn:hover > img{
    opacity: 1;
    transition: opacity 0.2s ease-out;
}

.program_btn > div{
    padding: 10px;
    padding-left: 10px;
    background-image: linear-gradient(180deg, transparent, transparent);
    transition: padding 0.5s ease-out, color 0.1s ease-out, background-image 0.8s ease-in-out;
    text-shadow: 0px 4px 4px black;
}
.program_btn:hover > div{
    padding-left: 20px;
    color: orangered;
    background-image: linear-gradient(180deg, black, transparent);
    transition: padding 0.2s ease-out, color 0.1s ease-out;
}

.program_btn > span{
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 20px;
    font-weight: 100;
    opacity: 0.0;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    transition: opacity 0.5s ease-out, letter-spacing 0.2s ease-out;
    text-shadow: 0px 4px 6px black, 0px -4px 6px black, 0px 4px 6px black ;
    letter-spacing: normal;
}
.program_btn:hover > span{
    opacity: 1;
    transition: opacity 0.2s ease-out 1.0s, letter-spacing 0.2s ease-out;
}

.program_btn > span:hover{
    color: greenyellow;
    transition: color 0.2s ease-out, letter-spacing 0.2s ease-out;
    letter-spacing: 2px;
}

.prog_bg_image{
    height: 100%;
    position: absolute;
    right: 0px;
    top: 0px;
    z-index: -2;
}

.prog_bg_fade{
    background-image: linear-gradient(90deg, #061017, #0f2b40, transparent);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.program_info{
    overflow: hidden;
    backdrop-filter: blur(20px);
    background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.495), #2d4f698a);
    backdrop-filter: blur(5px);
    position: relative;
}
.program_text_block{
    padding: 20px;
}
.program_info div:nth-child(1){
    font-family: "Ropa Sans", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 30px;
  color: rgb(137, 149, 159);
}
.program_info div:nth-child(2){
    font-family: "Staatliches", sans-serif;
    font-size: 40px;
    color: white
}
.program_info div:nth-child(3){
font-family: "Ropa Sans", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  color: rgb(214, 227, 237);
  max-width: 50%;
  border-top: 1px solid white;
  padding-top: 10px;
}

.top_video_banner{
    height: 300px;
    overflow: hidden;
    position: relative;
    border-radius: 5px;
    margin-bottom: 10px;
    box-shadow: 0px 5px 5px black;
}

.top_video_banner > video{
    width: 100%;
    transform: translate(0%, -30%);
}

.top_video_text{
    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.75), rgba(0,0,0,0.75), transparent);
    padding: 10px 20px;
    color: whitesmoke;
    text-shadow: 0px 5px 5px black;
    margin-bottom: 10px;
    font-family: 'Bebas Neue', cursive;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    animation: top_text_fade_in 4s ease-out 0s 1;
    height: 100%;
}

@keyframes top_text_fade_in{
    0%{opacity:0;}
    80%{opacity: 0; padding: 10px 0px;}
    100%{opacity: 1; padding: 10px 20px;}
}

.top_video_text > div:nth-child(2){
    font-size: 80px;
    line-height: 65px;
}

.footer{
    /* text-align: center; */
    /* background-color: rgb(62, 62, 87); */
    /* background-image: linear-gradient(0deg, rgba(127, 161, 176, 0.344), transparent); */
    background-blend-mode: luminosity;
    /* border-bottom: 1px solid rgb(128, 128, 128); */
    border-top: 1px solid white;
    backdrop-filter: blur(10px);
    border-radius: 5px;
    /* margin: auto; */
    padding: 4px;
    /* display: block; */
    color: whitesmoke;
    font-size: 35px;
    box-shadow: 0px 5px 5px black;
    text-shadow: 0px 5px 5px black;
    margin-bottom: 10px;
    /* font-family: 'Bebas Neue', cursive; */
    font-family: Arial, Helvetica, sans-serif;
    padding-top: 6px;
    font-size: 20px;
    display: grid;
    grid-template-columns: auto max-content;
    padding: 20px;
}



.about{
    border-top: 1px solid white;
    backdrop-filter: blur(10px);
    border-radius: 5px;
    background-color: #1025358a;
    /* margin: auto; */
    padding: 4px;
    display: block;
    color: rgb(192, 206, 211);
    font-size: 20px !important;
    box-shadow: 0px 5px 5px black;
    text-shadow: 0px 5px 5px black;
    margin-bottom: 10px;
    /* font-family: 'Bebas Neue', cursive; */
    padding: 20px;
    font-size: 25px;
    font-family: Arial, Helvetica, sans-serif;
}

.adr_cont{
    text-align: right;
}