/* Set the height for the page */
html, body, #body, #page{
    height: 			auto;
    min-height: 		100%;
}

/* User hovers over social media icon */
.social_media:hover{
	cursor:				pointer;
}

/* Eliminate the whitespace at the bottom of the page */
.jumbotron{
	height:				100%;
	margin-bottom: 		0px;	
}

.jumbotron p{
	margin-bottom:		0px;
}

/* 
	Large picture used for homepage background 
	Not sure why I needed to use position here and not on homepage
*/
.jumbotron.fiber-optics{
	background-image: 	url("/images/fiber_network/fibernetwork_banner.jpg");
	background-position: center center;
    background-size: 	cover;
    height: 			597px;
	margin-top:			79px;
}

/* White text lines */
.jumbotron .text-wrapper p {
	color: 				white;
    display: 			inline-block;
    margin: 			10px auto;
	position: 			relative;
    top: 				-50%;
}

/* Upper white text line */
.jumbotron .text-wrapper p.first-line {
	font-family: 		Gentona-Medium;
	font-size: 			58px;
    line-height: 		61px;
}

/* Lower white text line */
.jumbotron .text-wrapper p.second-line {
	font-family:		Gentona-Light;
	font-size: 			41px;
	line-height:		46px;
}

/* Spacing between letters in centered white text */
.jumbotron .text-wrapper {
    letter-spacing: 	1px;
}

/* Outer div for white text box */
#text_box{
    left: 				50%;	
	position: 			absolute;
    top: 				50%;
}

#red-footer{
	background-color: 	#EF4051;
	margin:				0;
	padding: 			2% 5%;
}

/* White text inside of red footer */
#red-footer p{
    font-family: 		Gentona-Light;
    font-size: 			19px;	
	line-height:		24px;
	padding:			0 4%;
}

/* 'Experience the strength of our backbone' */
#lower-half p.first-line{
	font-family:		Gentona-Medium;
	font-size:			41px;
	line-height:		43px;
} 

/* Text below 'experience the strength...' */
#lower-half p.second-line{
	font-family:		Gentona-Light;
	font-size:			19px;
	line-height:		27px;
	padding:			0 8% 2%;
}
/* Lower half of page */
#lower-half{
    margin-bottom:		100px;
}


/* Image of fiber backbone */
#backbone_img{
	margin:				0 auto;
}

#anchor-arrow{
	bottom:				25px;
}

/* ************* */
/* Media Queries */

@media(min-width:1201px) {
	
	/* Outer div for white text */
    #text_box{
		margin-left: 	-600px;
        width: 			1200px; 
    }
}

@media(max-width:1200px) {
    /* Outer div for white text */
	#text_box{
		margin-left: 	-400px;
        width: 			800px; 
    }
	/* White text in center */
    .jumbotron .text-wrapper p {
        font-size: 		45px;
        line-height: 	45px;
    }
	
	.jumbotron .text-wrapper p.second-line{
		font-size:		35px;
	}
}

@media(max-width: 1000px) {
    /* Outer div for white text */
	#text_box {
		margin-left: 	-400px;
        width: 			800px; 
    }
	/* White text in center */
    .jumbotron .text-wrapper p {
        font-size: 		45px;
        line-height: 	35px;
    }
	
	/* 'Strength of our backbone' text */
	#lower-half p.first-line{
		font-size:		34px;
	}
	
	/* Text underneath backbone title */
	#lower-half p.second-line{
		padding:		0% 10%;
	}
}

/* Navbar scaling begin */
@media ( max-width: 991px ) and ( min-width: 900px ) {
	.container{
		width:			915px;
	}
}

@media ( max-width: 899px ) and ( min-width: 847px ) {
	.container{
		width:			865px;
	}
}
@media ( max-width: 846px ) and ( min-width: 800px ) {
	.container{
		width:			815px;
	}
}

@media ( max-width: 799px ) and ( min-width: 769px ) {
	/* White text box in center of first page */
	#text_box{
		width:			790px;
	}
	
	.container{
		width:			785px;
	}
}
/* Navbar scaling end */


@media(min-width: 768px) {
	/* White text box in center of first page */
    #text_box {
        height: 		200px;
        margin-top: 	-100px;
        position: 		relative;
        top: 			55%;
    }	
}

@media(max-width: 767px) {
    
    .jumbotron .text-wrapper p {
        float: 			right;
        height: 		inherit;
        margin: 		10px auto;
    }
	
	.jumbotron .text-wrapper p.first-line{
		font-size:		48px;
	}
	
	.jumbotron .text-wrapper p.second-line{
		font-size:		31px;
	}

	/* White text box in center of first page */
    #text_box {
		height: 		200px;
        margin-top: 	-100px;
		margin-left: 	-200px !important;
        position: 		relative;
        top: 			45%;
        width: 			410px !important; 
    }
	
	/* Red footer of text for fiber optics */
	#red-footer p{
		font-size:		17px;
		padding:		1% 10%;
	}
	
	/* 'Strength of our backbone' text */
	#lower-half p.first-line{
		font-size:		28px;
	}
	
	/* Text underneath backbone title */
	#lower-half p.second-line{
		font-size:		14px;
		padding:		0% 5%;
	}
}


@media(max-width: 600px) {
    
	.jumbotron .text-wrapper p {
        font-size: 		35px;
    }
	
	/* White text box in center of first page */
    #text_box {
		margin-left: 	-150px !important;
        width: 			300px !important; 
    }
	
	/* White paragraph in red row in upper portion */
	#red-footer p{
		font-size:		16px;
		padding:		1% 9%;
	}
	
	/* 'Strength of our backbone' text */
	#lower-half p.first-line{
		font-size:		24px;
	}
	
	/* Text underneath backbone title */
	#lower-half p.second-line{
		font-size:		12px;
		padding:		0% 1%;
	}
}

@media (max-width: 480px){
	#red_footer p{
		padding:		1% 3%;
	}
}