/* general styles */

@import url('https://fonts.googleapis.com/css?family=Raleway&display=swap');
/* general styles */

@import url('https://fonts.googleapis.com/css?family=Raleway&display=swap');



body, html {
height: 100%;
margin: 0;
padding: 0;
font-family: "Raleway", sans-serif;;
line-height: 2.2em;
font-weight: 300;
color: #a5a4a4;
}

body{
background-color: #eaedf4;
}


.container{
  margin-top: 2vh;
}

.bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4{
  position: relative;
  opacity: 0.85;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

html {
  scroll-behavior: smooth;
}

.bgimg-1 {
background-image: url("../images/me.png");

min-height:680px;
}


.aboutme{color:black;}


/******************* nav ******************/

.nav{
background-color: black;
padding: calc(2vh)

}
.nav a {
 
color: white;
margin-left:8%
}
.nav>a>img{
height:50px;
}

.gradient-bg {
  background: linear-gradient(135deg, #2c2c2c, #4b4b4b, #6e6e6e);
}


.rising_nav{
margin: 0 auto;
width:100%;
background-color: #ece6dd;
line-height:230%;
}

.rising_nav>a>img{
width:25%;
padding:4% 0% 2% 5%;
margin: 0 auto;
}

.rising_nav>h1{
width:35%;
display: inline-block;

text-align: right;
font-size:5em;
padding:7% 5%;
margin: 0 auto;
align-content: flex-end;
color:#ba4b27;
}

.colorblock{
width: 100%;
height:15px;
margin: 0;
background-color:#ba4b27;
}

/******* Rising Phonenix showcase *************/

.showCase-container{    text-align: center; 
}

.showCase{
width:21%;
    
display:inline-block;
margin:3% 1%;
border: 2px solid #ba4b27;
text-align: center;
}
.showCase img{
max-width: 100%; /* Image will not exceed the div's width */
height: auto; /* Height adjusts proportionally to maintain aspect ratio */
display: block; /* Removes any extra space below the image */
}





/******************* motion_OPM_VA ******************/
.opmva {
    padding: 0% 0 5% 0;/* You must set a specified height */  
}

.opmvawrap {
text-align: center;
background-color:#003567;
}

.opmvawrap >video{border-style: solid 3px;}
.courseLine{
height: .5px; background-color:cornflowerblue;
margin: 2em;}

.pj_content{
width: 40%;
float: left;
margin: 0 0 0 2em;
}

.pj_content >h3, p{
color: white;
}
.opmvawrap >.second_video{background-color:#003567;}


.opm_va_section2{
background-image: url("../images/opm_va_section2.png");
height:920px; /* You must set a specified height */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}

.opm_va_section3{
background-image: url("../images/opm_va_section3.png");
height:920px; /* You must set a specified height */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}

.opm_va_section4{
background-image: url("../images/opm_va_section4.png");
height:920px; /* You must set a specified height */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}

.opm_va_section5{
background-image: url("../images/opm_va_section5.png");
height:920px; /* You must set a specified height */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}

.opm_va_section2 >.content{
    width:80%;
    text-align: center;
    margin: 0 auto;
padding-top:2%;}


.second_video{
padding: 5.2% 0 5.2% 0;
    background-color:#022240;}

/******************* AF *******/

.intro {
background-image: url("../images/AF_extend.png");
height:920px; /* You must set a specified height */
background-position: center; /* Center the image */
background-size:cover;
background-repeat: no-repeat; /* Do not repeat the image */
}




.afwrap{
width:100%;
margin: 0 auto;
   }


.afwrap > h4{
width: 100%; 

 }



.section2{
background-image: url("../images/AF_game.png");
height:920px; /* You must set a specified height */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}


.section2 >aside{
float: right;
}




.section3{
background-image: url("../images/AF_Asset.png");
height:900px; /* You must set a specified height */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
}

.section3 > h1{
position: relative;
margin: 0% auto;
text-align: center;
padding:4% 0% 0% 0%;
}





.section4{
background-image: url("../images/AF_handbook_3.png");
height:920px; /* You must set a specified height */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}


.section4>aside{
float: right;
padding-right: 10%;

}



.section5{
background-image: url("../images/AF-score.png");
height:1100px; /* You must set a specified height */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
}



.section6{
background-image: url("../images/AF-mobile.png");
height:1100px; /* You must set a specified height */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
}


.section7{
background-image: url("../images/Af_map.png");
height:900px; /* You must set a specified height */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
}




.section5>h1{
position: relative;
margin: 0% auto;
text-align: center;
padding:4% 0% 0% 0%;
color:white; 
}


.section6>h1{
position: relative;
margin: 0% auto;
text-align: center;
padding:4% 0% 0% 0%;
color:white;
    
}


.section7>h1{
position: relative;
margin: 0% auto;
text-align: center;
padding:4% 0% 0% 0%;
color:black;
    
}





/******************* noaa page ******************/

.noaa_intro {
background-image: url("../images/Noaa_2.png");
height:1100px; /* You must set a specified height */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
}

.noaa_section2{
background-image: url("../images/Noaa_1.png");
height:900px; /* You must set a specified height */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}



.noaa_section3{
background-image: url("../images/NOAA_contetnt2.png");
height:2500px; /* You must set a specified height */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}

.noaa_section2 >aside{
float: right;
}

.noaa_section2 >h1{
margin: 0 auto;
padding-top:4%;
text-align: center;
}


.noaa_section4>aside{
float: right;
}


/******************* UI OPMVA  ******************/

.opmva_intro {
background-image: url("../images/OPM_VA_1@0.5x.png");
height:950px; /* You must set a specified height */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
}

.opmva_section2{
height:900px; 
    background-color:azure;
}

.cast {
margin: 0 auto;
position: absolute;
z-index:0;
text-align: center;
margin: 0 auto;
}

.laptop{
text-align: center;
left:19%;
top:6.1%;
position: absolute;
z-index:200;
}


.opmva_section3{
background-image: url("../images/OPM3@0.3x.png");
height:3500px; /* You must set a specified height */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}

.opmva_section4{
background-image: url("../images/OPM4@0.3x.png");
height:2500px; /* You must set a specified height */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}

.opmva_section5{
background-image: url("../images/OPM5@0.3x.png");
height:2500px; /* You must set a specified height */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}

.opmva_section6{
background-image: url("../images/opm_va_section3.png");
height:1550px; /* You must set a specified height */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}

.opmva_section7{
background-image: url("../images/opm_va_section2.png");
height:1250px; /* You must set a specified height */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}



.opmva_section2 >h1{
width: 100%;
margin:0 auto;
padding-top:4%;
padding-bottom:2%;
text-align: center;
}


.opmva_section4>aside{
float: right;
}


.opmva_section3,.opmva_section4,.opmva_section5, .opmva_section6>h1{
position: relative;
margin: 0% auto;
text-align: center;
padding:4% 0% 0% 0%;
color:white; 
}



/******************* UI sapro  ******************/

.sapro_intro {
background-image: url("../images/sapro_1@0.5x.png");
height:950px; /* You must set a specified height */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
}

.sapro_section2{
height:900px; 
    background-color:azure;
}

.saprocast{
margin: 0 auto;
position: absolute;
z-index:0;
text-align: center;
margin: 0 auto;

}

.saprolaptop{
text-align: center;
left:19%;
top:-9.1%;
position: absolute;
z-index:200;
}


.sapro_section3{
background-image: url("../images/sapro@0.5x.png");
height:3500px; /* You must set a specified height */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}


.sapro_section2 >h1{
width: 100%;
margin:0 auto;
padding-top:4%;
padding-bottom:7%;
text-align: center;
}



.cast{
text-align: center;
margin:0 auto;
padding:5% 5% 15% 5%;
}

.sapro_section4>aside{
float: right;
}


.sapro_section3,.sapro_section4, .sapro_section5, .sapro_section6>h1{
position: relative;
margin: 0% auto;
text-align: center;
padding:4% 0% 0% 0%;
color:white; 
}




/******************* UI ctos ******************/

.ctos_intro {
background-image: url("../images/CTOS_Prototype@0.5x.png");
height:950px; /* You must set a specified height */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
}



.ctos_section2{
background-image: url("../images/CTOS_Prototype_content@0.5x.png");
height:3500px; /* You must set a specified height */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}


.ctos_section2 >h1{
width: 100%;
margin:0 auto;
padding-top:4%;
padding-bottom:7%;
text-align: center;
}



.cast{
text-align: center;
margin:0 auto;
padding:5% 5% 15% 5%;
}

.sapro_section4>aside{
float: right;
}


/******************* UI usal ******************/

.usal_intro {
background-image: url("../images/usal@0.5x.png");
height:950px; /* You must set a specified height */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
}



.usal_section2{
background-image: url("../images/usal_s2@0.5x.png");
height:3500px; /* You must set a specified height */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}


.usal_section2 >h1{
width: 100%;
margin:0 auto;
padding-top:4%;
padding-bottom:7%;
text-align: center;
}


/******************* Salisbury University Demo ***************/
/* Main device wrapper */


.laptop-wrap {
  max-width: 100%;
}



/* Laptop image on top */
.su_opmescast img {
  position: relative;
  z-index: 2;
  display: block;
  margin: 0 auto;
}


.su_video {
  position: absolute;
  z-index: 2;
  top: 20.0%;    /* tweak these four values */
  left: 15%;   /* until it fits the laptop screen */
  
object-fit: cover;
}

.su_iphone{
 position: absolute;
z-index: 2;
/* tweak these four values */

left:60%; 

}


/* Video underneath, positioned over the screen area */



.su_video_ipone {
  position: absolute;
  z-index:2;
  top: 27.7%;    /* tweak these four values */
  left:75%;   /* until it fits the laptop screen */
object-fit: cover;
}




/******************* UI opmes  ******************/

.opmes_intro {
background-image: url("../images/opmes@0.5x.png");
height:950px; /* You must set a specified height */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
}

.opmes_section2{
height:850px; 
 background-color:azure;
}

.opmes_section3{
background-image: url("../images/opmes2@0.5x.png");
height:3500px; /* You must set a specified height */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}

.opmescast{
margin: 0 auto;
position: absolute;
z-index:0;
text-align: center;
margin: 0 auto;

}

.opmeslaptop{
text-align: center;
left:19%;
top:-9.1%;
position: absolute;
z-index:200;
}


.opmes_section2>h1{
width: 100%;
margin:0 auto;
padding-top:3%;
padding-bottom:6%;
text-align: center;
}

.opmes_section3 >h1{
width: 100%;
margin:0 auto;
padding-top:5%;
padding-bottom:6%;
text-align: center;
}



.cast{
text-align: center;
margin:0 auto;
padding:5% 5% 15% 5%;
}

.opmes_section4>aside{
float: right;
}




/******************* UI cdc ******************/

.cdc_intro {
background-image: url("../images/CDC@0.5x.png");
height:950px; /* You must set a specified height */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
}

.cdc_section2{
height:850px; 
 background-color:azure;
}

.cdc_section3{
background-image: url("../images/cdc2@0.5x.png");
height:3500px; /* You must set a specified height */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}

.cdccast{
margin: 0 auto;
position: absolute;
z-index:0;
text-align: center;
margin: 0 auto;

}

.cdclaptop{
text-align: center;
left:19%;
top:-9.1%;
position: absolute;
z-index:200;
}


.cdc_section2>h1{
width: 100%;
margin:0 auto;
padding-top:3%;
padding-bottom:6%;
text-align: center;
}

.cdc_section3 >h1{
width: 100%;
margin:0 auto;
padding-top:5%;
padding-bottom:6%;
text-align: center;
}





.cdc_section4>aside{
float: right;
}






/******************* AAMC page ******************/

.aamc_intro {
background-image: url("../images/AAMC_1@0.5x.png");
height:1100px; /* You must set a specified height */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
}

.aamc_section2{
background-image: url("../images/AAMC_2@0.5x.png");
height:1300px; /* You must set a specified height */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}



section2 >aside{
float: right;
}

.aamc_section2 >h1{
margin: 0 auto;
padding-top:3%;
text-align: center;
}


.aamc_section4>aside{
float: right;
}





/******************* contact page ******************/

.contact{
padding: 0;
margin: 0 auto;

}


.contact> h1{
color: black;
width:40%;
padding:2% 2% 0% 2%;
line-height:98%;
 
}


.contact> h4{
color: #211b1b;
width:40%;
padding:0% 2%;
line-height: 160%;
font-weight: 100;
 }

/******************* contact page ******************/


/*.container{
width:80%;       
}*/


.about{
margin: 0 auto;   
}

.about>h3{
font-size:30px; 
padding:1em;
color:black;
}


.content>h1{
margin: 0 auto;
text-align: center;
padding-top:5%;
}


.aboutme{
 width:95%; 
 margin: 0 auto;
font-size:1.5em;
}


.bgimg-2 {
  background-image: url("../images/project%20bg.png");
  min-height: 300px;
}


.aetc_hero {
  background-image: url("../images/AF_handbook_3.png");
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 300px;
}

.Canvas_hero {
  background-image: url("../images/SalisburyUniversity_course.png");
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 300px;
}

.textcontent{

    background-color: black;
}

.pj_ex{
  background-color: black;
  padding: 3%;
  width: 80%;
  margin:0 auto;
}
.pj_ex h4{
 color:white;
text-align-last: left;
margin-top: 8%;
}

.pj_ex ul{
   color:white;
text-align-last: left;
}
.pj_ex li{
   color:white;
text-align-last: left;
}


.pj_ex p{
color:white;
text-align-last: left;
text-align: left;      /* keep readable */

  margin: 0 auto;        /* center block nicely */
}
.profolio{
 text-align: center;
}

.w3-content{
margin: 0 auto;
text-align: center;
}


.bgimg-4 {
background-image: url("/images/bg3.png");
min-height:300px;
}

.projectTitle h2{

text-align:center;
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  padding: 2%;
  background-color: black
}






.bgimg-4>.caption{
top:20%;
}

.caption {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; /* important */
}

.caption span.border {
    display: inline-block;
    color: white;
    padding: 30px;
    font-size: 35px;
    letter-spacing: 15px;
}

.dotspace{
  padding-bottom:50px;   
 }


h3 {
  letter-spacing: 5px;
  text-transform: uppercase;
  font: 20px "Lato", sans-serif;
  color: #111;
}

.numbertext{
 margin:2em 1em; 
color:black;
    
}


/*******************************************
slideshow
margin: 10px 0;
********************************************/

.conent{
 text-align: center;
 margin: 0 auto;
}

.mySlides {
display:none;
}

.uiBox{
display: inline-block;
margin-bottom: 2em;
}

.uiBox img {
  transition: transform 0.3s ease;
}


.content-image {
  width: 100%;
  height: 300px; /* control image height */
  background-image: url("../images/airforce.png");
  background-size: cover;
  background-position: center;
  border-radius: 8px;
}

/* Slideshow container */
.slideshow-container {
  width:90%;
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -60px;
  color: gray;
  font-weight: bold;
  font-size: 40px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right:-100px;
  border-radius: 3px 0 0 3px;
}

.prev {
  left:-100px;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(255, 255, 255, 0.8);
    
color: #030303;
}

/* Caption text */

.center{
padding: 0;
margin-left: 320px;
text-align: center;
vertical-align: middle;
margin-bottom: 20px;
}


.napkin
{text-align: center;
margin-left: 280px;
}

.text> h4{
font-size:14px;
color:#05539f;
text-align: center;
margin: 0px auto;
}

.mySlides> h5{
text-align: center;
color:gary;
margin:5px auto;
}



.mySlides> h6{
width:20%;
text-align: center;
color:#909090;
margin:0px auto;
font-size:14px;
background-color: #e6e6e6;
padding:3px 0;

border-radius:5px;
}


/* The dots/bullets/indicators */
.slideshow-container{
margin: 10 auto;
text-align: center;
}
.sub_menu{
 margin:30px 40px;   
    
}

.items {
  cursor: pointer;
  padding: 5px 20px;
  margin: 5px 15px;
  display: inline-block;
  color:white;
 background-color:#2f82a3;
 font-weight: 700;
  transition: background-color 0.6s ease;
 border-radius:10px;
}

.active, .items:hover {
  
  color:white;
 background-color:#1a5269;
  font-weight: 900;
}

.notes
{ 
font-size:14px;
display: inline-block;
line-height:1.5; 
color:darkgray;
     border: 1px solid darkgray;   /* the box */
  padding: 10px 12px;           /* space inside the box */
  margin: 10px 0;               /* space outside the box */
  border-radius: 4px;           /* optional: rounded corners */
}


/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 1em}
}




@media only screen and (min-width: 600px) {
 .aboutme{
 width:100%; 
 margin: 0 auto;
font-size:1.5em;
}   
}