/* --------------- --------------- --------------- --------------- STATIC BACKGROUNDS --------------- --------------- --------------- --------------- */
/*used in index.php*/

.indexbg
{
    background: 			url("../vid/Waves.jpg") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: 	cover;
    -o-background-size: 	cover;
    background-size: 		cover;
}

/* --------------- INDEX PAGE SETTINGS --------------- */

/* FOREGROUND */

/* AVATAR SETTINGS */
.index .foreground .avatar
{

    height:					200px;
    width:					200px;

    top:					50%;
    left:					50%;
    position:				fixed;

    border-style: 				solid;
    border-width:				2px;
    border-color:				white;
    border-radius: 				50%;

    margin-top:				-250px;
    margin-left:				-100px;

    opacity:				1;
    transition:				all 0.3s;

}

/* AVATAR HOVER SETTINGS */
.index .foreground .avatar:hover
{

    border-color:				black;

}

/* NAME SETTINGS */
.index .foreground .name
{

    width:					1000px;

    left:					50%;
    top:					50%;
    position:				fixed;

    font-size: 				3em;
    text-align:				center;
    margin-top:				-40px;
    margin-left:				-500px;

}

/* TAGLINE SETTINGS */
.index .foreground .tagline
{

    width:					1000px;

    left:					50%;
    top:					50%;
    position:				fixed;

    color: 					rgba(255,255,255,0.8);
    font-size: 				20px;
    text-shadow:				2px 2px 6px black;
    text-align:				center;
    letter-spacing: 			0.2em;

    margin-top:				25px;
    margin-left:				-500px;

}

/* SOCIAL ICON HOLDER SETTINGS */
.index .foreground .social
{

    /*background:				rgba(0, 0, 0, 0.5);
    border-radius:				10px 10px 10px 10px;		To use or not to use, that is the question */

    width:					256px;
    height:					25px;

    left:					50%;
    top:					50%;
    position:				fixed;

    margin-top:				70px;
    margin-left:				-128px;
    text-align:				center;
    letter-spacing:				20px;

    padding-top:				5px;
    padding-bottom:				5px;

}

/* PORTFOLIO BUTTON SETTINGS */
.index .foreground .portfolioButton
{

    background:				rgba(0, 0, 0, 0.75);

    width:					200px;

    left:					50%;
    top:					50%;
    position:				fixed;

    color:					white;
    font-size: 				15px;
    text-decoration:			none;
    text-shadow:				2px 2px 6px white;
    text-align:				center;
    text-transform:				uppercase;

    margin-top:				130px;
    margin-left:				-100px;

    padding-top:				10px;
    padding-bottom:				10px;

    border-style: 				solid;
    border-radius:				20px 20px 20px 20px;
    border-width:				2px;
    border-color:				white;

    transition:				all 0.3s;

}

/* PORTFOLIO BUTTON HOVER SETTINGS */
.index .foreground .portfolioButton:hover
{

    background:				rgba(255, 255, 255, 0.9);

    color:					black;
    text-shadow:				2px 2px 6px black;

    border-color:				black;

}

/* BACKGROUND */

/* BACKGROUND VIDEO SETTINGS */
.index .background video
{
    /* video is 1920 wide 1080 high */
    height:					100%;
    width:					100%;

    top:					0px;
    bottom:					0px;
    position:				fixed;

    object-fit: 			fill;
    z-index:				-1;

}

/* alternatative video code:  i'M STILL TRYING TO FIGURE THIS OUT AND MAKE IT WORK WITH MULTIPLE RESOLUTIONS/BROWSERS.

    width:					100%;

    margin-top:				-540px;

    top:					50%;
    position:				fixed;


    z-index:				-1;

*/