*{
    margin: 0;
    font-family: 'Roboto', sans-serif;
    box-sizing: border-box;
}

h1{
    font-size: 40px;
    font-weight: normal;
}

h2{
    font-size: 36px;
    border-bottom: 1px rgb(71, 71, 71) solid;
    font-weight: normal;
    padding-bottom: 14px;
}

h3{
    font-size: 25px;
    font-weight: normal;
}

p{
    font-size: large;
    font-weight: normal;
}

body{
    width: 100%;
    background-color: whitesmoke;
}

header{
    background-color: black;
    background-image: linear-gradient(rgb(14, 14, 14), rgb(59, 59, 59));
    color: white;
    padding: 35px 0 35px 0;

}

.titleHeader{
    margin: 0px auto;
    width: 800px;
}

.sectionTitle{
    padding-bottom: 35px;
}

/**** Start of main nav menu */
nav{
    position: fixed; /* Set the navbar to fixed position */
    top: 0; 
    width: 100%; 
    text-align: center;
    background-color: rgb(34, 34, 34);
    height: 70px;
    line-height: 70px;
    z-index: 1000;
}

nav a{
    color: whitesmoke;
    font-size: 18px;
    font-weight: normal;
    padding: 10px 60px;
    text-decoration: none;
}

nav a:hover{
    background-color:rgb(60, 60, 60);
}

nav ul{
    list-style-type: none;
    padding: 0;             /* without this hovering colors won't highlight whole line*/
}

nav>ul>li{
    display: inline-block;
    position: relative;
}

/* Used for drop down menus */
nav ul li ul{
    width: 100%;
    position: absolute;
    top: 70px;
    z-index: 999;
    text-align: left;
    background-color: rgb(44, 44, 44);
}


nav ul li ul li a{
    color: white;
    padding: 10px;
    display: block;
}

nav ul li ul li:hover a:hover{
    background-color: rgb(60, 60, 60);
} 

nav ul li ul{
    display: none;
}

nav ul li:hover ul{
    display: block;
}
/* END Used for drop down menus */


main{
    /* width: 1000px; */ 
    width: 100%;
    margin: 0px auto;
    margin-top: 70px;
}

.container{
    /*margin-top: 35px;*/
    /*padding-bottom: 35px;*/
    width: 100%;
}

.content{
    width: 1000px; 
    margin: 0px auto;
}

.container p{
    padding: 15px 0 15px 0;
}

.introSect, .skillSect, .workSect, .projectsSect, .contactSect{
    padding: 45px 0 25px 0; /* Will need to delete this if not used, currently testing */
    padding: 85px 25px; 
    width: 100%;
    text-align: center;

}

/**** hero/intro section *****/
.introSect{
    /*padding: 0 0 25px 0;*/
    padding: 0;

    /*background-color:rgb(250, 250, 250);*/

    position: relative; 
    text-align: right; 

    height: 800px;
    border-bottom: 1px rgb(170, 170, 170) solid;
    box-shadow: 15px 1px 5px #888888;
}

.introSect img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position:left bottom ;
    padding: 0;
    margin: 0;
}

.introTextContainer{
    position: absolute; 
    top: 0;     
    bottom: 0;  
    left: 0;    
    right: 0;   
    background-color: rgba(31, 31, 31, 0.5); 

    color:whitesmoke;

}


.introtext{

    width: 850px;
    height: 450px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    background-color: rgba(3, 3, 3, 0.5); 
    /* font-family: 'Open Sans', sans-serif;  */
    /* font-family:'Roboto', sans-serif; */
    /* font-family: 'Montserrat', sans-serif; */
    font-family: 'Lato', sans-serif;
    
}

.introtext h2{
    padding-top: 80px;
    font-size: 70px;
    text-align: center;
    font-weight: bold;
    border-bottom: 0;
}

.introtext p{
    font-size: 20px;
    line-height: 40px;
    padding: 20px 35px;
}

.heroButton{
    color: white; 
    transition-duration: 0.4s;
	display: inline-block; 
	width: 250px; 
	font-size: 20px; 
    font-weight: bold;
	border: 5px solid white; 
	text-decoration: none;
	padding: 20px 70px; 

    text-align: center;
}

.heroButton:hover{
    background-color: white;
    color: black;
}

/**** Hero Section END ****/

/**** Start Of SLIDE SHOW ****/

/*
img {vertical-align: middle;}
*/

.mySlides {display: none;}

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

.slideImage{
    height: 600px;
    vertical-align: middle;
}

.slideImage img{
    height: 100%;
    object-fit: cover;
}

/* Caption text */
.text {
  color: #f2f2f2;
  background-color: rgba(31, 31, 31, 0.5); 
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #717171;
}

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

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

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

/***** END OF SLIDESHOW *****/

/********* START OF SKILL SECT **********/
.skillSect{
    background-image: url("../images/white_wall_hash.webp");
}

.formContainer{
    width: 100%;
    display: grid;
    grid-gap: 20px;
    grid-template-areas:
        'fName'
        'fEmail'
        'fMessage'
        'fButtons';

    margin: 0 auto;
}

.frmName{
    grid-area: fName;
    width: 100%;
}

.frmEmail{
    grid-area: fEmail;
    width: 100%;
}

.skillListSect{
    /*
    text-align: left;
    display: grid;
    grid-template-columns: 1fr 1fr;

    justify-content: center;
    align-content: center;
    */

    margin: 0 auto;
    
    text-align: center;

    width: 100%;
    display: grid;
    grid-gap: 10px;
    grid-template-areas:
        'skillLang skillHL skillSoftware';

    border: 1px black solid;
    box-shadow: 5px 8px 5px #888888;
    background-color: white;
    padding: 25px 0px;
}

.skillListSect h3{
    padding-bottom: 18px;
}

.skillListSect ul{
    padding-left: 0;
    list-style: none;
}

.skillListSect ul li{
    padding: 5px 0 5px 0;
}

.skillLangList{
    grid-area: skillLang;
    width: 100%;
}

.skillHLList{
    grid-area: skillHL;
    width: 100%;
}

.skillSoftwareList{
    grid-area: skillSoftware;
    width: 100%;
}



/********* END OF SKILL SECT **********/


/********* Work SECT **************/


.workSect{
    min-height: 100%;
    background: linear-gradient(45deg, rgba(42, 69, 75, .6), rgb(14, 28, 38)), url("../images/white_wall_hash.webp");
    background-size: cover;
    box-shadow: inset 0 0 0 2000px rgba(14, 28, 38, 0.3);

    color: white;
}

.workSect h2{
    border-bottom: 1px white solid;
}


.videoWrapper{
    position: relative;
    padding: 0px 0px 56.25% 0px;
}


iframe{
    position: absolute;
    top: 0;
    left: 0;
}

/***** LegalLab Section **********/

.legalLab a img{
    width: 100%;
}

/******** LegalLab Section **********/

/******* END OF WORK SECT *********/


/***** Project Section  *******/

.projectItem{
    text-align: center;
    margin: 40px 0px;

    border: 1px black solid;
    box-shadow: 5px 8px 5px #888888;
    background-color: white;
    padding: 25px 25px;
}

.projectItem h3{
    padding-bottom: 25px;
}

.projectItem img{
    width: 100%;
}

.projectItem iframe{
    width: 100%;
    height: 100%;
}

.projectItemDetails h3{
    padding: 25px 0 25px 0;
    font-weight: bold;
    text-align: center;
}

.projectItemDetails p{
    padding: 0;
}

.projectItemDetails ul{
    padding-bottom: 20px;
    text-align: center;
    /*list-style-position: inside;*/
}

.projectItemDetails li{
    padding: 4px;
    list-style: none;
    padding-left: 0;
    margin-left: -1em;
    
}



.demoButton{
    
    text-decoration: none;

    font-size: 35px;
    transition-duration: 0.4s;
    background-color: #008CBA;
    color: white;
    cursor: pointer;
    border-radius: 16px;
    padding: 10px 30px;
}

.demoButton:hover{

    background-color: white; 
    color: black; 
    border: 2px solid #008CBA;
}



/***** END Project Section **********/

/************** CONTACT SECTION ************/

.contactSect{
    min-height: 100%;
    background: linear-gradient(45deg, rgba(42, 69, 75, .6), rgb(14, 28, 38)), url("../images/white_wall_hash.webp");

    /*
    background-color: black;
    background-image: linear-gradient(rgb(14, 14, 14), rgb(59, 59, 59));
    */
    background-size: cover;
    box-shadow: inset 0 0 0 2000px rgba(14, 28, 38, 0.3);

    color: white;
}

/***** RocketProject Section **********/

#countDownText{
    font-size: 35px;
    /* color: black; */
    color:white;
    white-space: pre-line;      /*Needed for js to add line breaks*/
    font-weight: bold;
    padding: 50px 0;
}

#rocketPiece{
    width:  50px;
    height: 50px;
    position: absolute;
}

.rocketSect{
    height: 400px;
    width: 400px;
    position: relative;
    text-align: center;
    margin: 0 auto;
    margin-top: 15px;
    margin-bottom: 15px;
    background-color: rgb(34, 34, 34);
    border-radius: 100px;
}

.buttonSect{
    text-align: center;
    margin-bottom: 0;
    padding-top: 0;

}

.rocketButton{
    font-size: 35px;
    transition-duration: 0.4s;
    background-color: #008CBA;
    color: white;
    cursor: pointer;
    border-radius: 16px;
    padding: 10px;
}

.rocketButton:hover{
    background-color: white; 
    color: black; 
    border: 2px solid #008CBA;
}

/***** END RocketProject Section **********/


/*****   Contact Form    **********/

.formGridMain{
    text-align: justify;
    width: 80%;
    margin: 0 auto;
    display: none;
}

.formContainer{
    width: 100%;
    display: grid;
    grid-gap: 20px;
    grid-template-areas:
        'fName fEmail'
        'fMessage fMessage'
        'fButtons fButtons';

    margin: 0 auto;
}

.formContainer > div{
    /*background-color: rgba(255, 255, 255, 0.8);*/
    background-color: none;
    text-align: center;
    padding: 0;
    font-size: 30px;
  }

.frmName{
    grid-area: fName;
    width: 100%;
}

.frmEmail{
    grid-area: fEmail;
    width: 100%;
}

.frmName input, .frmEmail input, .frmMessage textarea{
    width: 100%;
    font-size: large;
}

.frmName input[type=text], .frmEmail input[type=email], .frmMessage textarea{
    padding: 14px 20px;
}

.frmMessage{
    grid-area: fMessage;
    width: 100%;
}

#umessage{
    resize: none;
}

.fieldSubmit{
    grid-area: fButtons;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
    margin: 0 auto;
    width: 400px;
    
}

.fieldSubmit input{
    font-size: large;
    padding: 16px;
    cursor: pointer;
    border-radius: 8px;
    
}

.frmSubButton{
    background-color: rgb(34, 34, 34);
    color: white;
    transition: background-color 0.6s ease;
}

.frmSubButton:hover{
    background-color: rgb(53, 53, 53);
    color: white;
}

.frmClearButton{
    background-color: whitesmoke;
    transition: background-color 0.6s ease;
}

.frmClearButton:hover{
    background-color: rgb(209, 209, 209);
}


/********* Contact Form End **********/


/************** CONTACT SECTION END ************/

footer{
    background-color: black;
    background-image: linear-gradient(rgb(14, 14, 14), rgb(59, 59, 59));
    color: white;
    padding: 35px 0 35px 0;
}

.footText{
    margin: 0px auto;
    width: 800px;
}

@media only screen and (max-width: 1000px){
    .titleHeader, main, .footText{
        width: 100%;
    } 

    .content{
        width: 100%; 
        margin: 0px auto;
    }

    .formGridMain{
        width: 100%;
    }

    .projectItemDetails li{
        padding: 4px;
        list-style: square;
    }
}

@media only screen and (max-width: 600px) {

    .content{
        width: 100%;
    }

    .titleHeader, main, .footText{
        width: 100%;
    } 

    /**** Start of main nav menu */
    nav{
        text-align: center;
        background-color: rgb(34, 34, 34);
        padding: 15px 0;
    }

    nav a{
        color: whitesmoke;
        font-size: 16px;
        font-weight: normal;
        padding: 10px 10px;
        text-decoration: none;
    }

    nav a:hover{
        background-color:rgb(60, 60, 60);
    }

    nav ul{
        list-style-type: none;
        padding: 0;             /* without this hovering colors won't highlight whole line*/
    }

    nav>ul>li{
        display: inline-block;
        position: relative;
    }

    nav ul li ul{
        width: 150px;
        top: 54px;
    }

    /**** END of main nav menu */

    /*** INTRO IMAGE START ****/

    .introSect img{
        object-position:center bottom ;
    }

    .introTextContainer{ 
        background-color: rgba(25, 25, 30, 0.83);    /* darken the image to make text easier to read */
    }
    

    .introtext{    
        width: 100%;
        height: 80%;
        background-color: transparent;
    }

    .introtext h2{
        padding-top: 0px;
        font-size: 75px;
        text-align: center;
        font-weight: bold;
    }

    /*** INTRO IMAGE END ****/

    /***** SKILL ****/

    .skillListSect{
        text-align: center;
        
        width: 100%;
        display: grid;
        grid-gap: 30px;
        grid-template-areas:
            'skillHL'    
            'skillLang'
            'skillSoftware';

        padding: 20px;
    }

    .skillListSect ul{
        list-style: none;
        padding-left: 0;
    
    }

    /******* SKILL END *******/


    /******** Start of Slideshow *********/

    .slideshow-container {
        max-width: 100%;
        position: relative;
        margin: auto;
    }

    .slideImage{
        height: 400px;
        vertical-align: middle;
    }

    /******** End of Slideshow ********/

    .projectItem{
        margin: 40px 0px;
        padding: 25px 25px;
    }

    .projectItem img{
        height: 350px;
        vertical-align: middle;
        object-fit: cover;
    }

    .projectItemDetails{
        margin: auto;
        text-align: justify;
        width: 100%;
        
    }

    .projectItemDetails ul{
        text-align: left;
    }
    
    .projectItem iframe{
        width: 100%;
        height: 350px;
    }

    .videoWrapper{
        height: 350px;
    }

    .demoButton{
        font-size: 30px;
    }

    /****** Rocket area ******/

    .rocketSect{
        width: 100%;
    }

    /****** end of rocket ****/

    /*****   Contact Form    **********/

    .formContainer{
        width: 100%;
        display: grid;
        grid-gap: 20px;
        grid-template-areas:
            'fName'
            'fEmail'
            'fMessage'
            'fButtons';
    
        margin: 0 auto;
    }

    .fieldSubmit{
        width: 100%;
    }

    .fieldSubmit input{
        padding: 26px;
    }

    /********* Contact Form End **********/

    footer{
        text-align: center;
    }
}