﻿body {
  font-family: 'Roboto', sans-serif;

  background-color: #215599;
  
} 
.featuredImg{
	max-height:200px;
	margin-top:30px;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
}
.btn{
    color: #ff6e3e;
} 
.btn.focus, .btn:focus, .btn:hover{
	color:#215599;
}
.nav{
    background-color:black;
    min-height:80px;
}
.btn-container{
    display:inline-block;
}
#weather-info{
    min-width:341px;
}
#img-section{
    background-color:#215599;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
    width: 80%;
    margin: auto;
}
.white-links{
    min-width:300px;
    text-align:center;
    margin-top: 1.5em;

}
.white-links a{
    outline:1px solid black;
    border-radius:1px;
}
.white-links a{
    display:inline-block;
    border:white 1px solid;
    padding: 5px;
    margin:5px;
    font-size:1.2em;

}
.black-links p a{
    display:inline-block;
    border:black 1px solid;
    padding: 5px;
    margin:5px;
    font-size:1.2em;
    color:black;
}
#more-button p{
    float:right;
    margin-right:10%;
}

#gary-intro{
    padding:20px;
    margin-top:20px;
}

#name{
    text-align:center;
    font-size: 3em;
    color: #fff;
    opacity: 1;
}

.intro-text{
    font-family: 'Roboto', sans-serif;
    text-align:center;
    font-size: 2em;
    color:white;
    padding:0px;
    margin:0px;
}

.chevron-down-button {
    top: 20px;
    bottom: 0;
    left: 0;
    width: 15%;
    font-size: 30px;
    color: #fff;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
    filter: alpha(opacity=50);
    opacity: .50;
}
#middle-section{
	background-color:#fff;
}
#footer{
    background-color:black;
    padding-left:50px;
    color:white;
    margin-top:-20px;
    padding-bottom:20px;
    padding-top: 10px
}
#footer-social-links {
    margin-top:30px;
}

/*back to top button*/
        #top-link-block.affix-top {
            position: absolute; /* allows it to "slide" up into view */
            bottom: -82px;
            right:10px;
            
        }

        #top-link-block.affix {
            position: fixed; /* keeps it on the bottom once in view */
            bottom: 18px;
            right: 12px;           
        }

/*media queries for changes to appearance at various screen sizes.  Using standard breakpoints*/

@media (min-width: 993px){
    #name {
        font-size:4em;
        padding-bottom:30px; 
    }
    #facebook, #twitter, #linkedin{  /*change position to absolute at desktop size to enable mouseover grow*/
    position:absolute;               /*without effecting positioning of neighbors*/
    top:0px;
}
#twitter{
    left:70px;
}
#linkedin{
    left:125px;
}
}
@media (max-width: 992px) {
    #top-link-block{
        display:none;
    }
        .weather-div, .social {
        display: none;
    }

    #links {
        display: inline-block;
    }

    .btn {
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-top: 5px;
        margin-bottom: 5px;
    }

    .nav{
        margin-bottom:40px;
    }
}

    @media (max-width:768px) {
        #top-link-block{
        display:none;
    }
        .weather-div, .social {
            display: none;
        }

        #links {
            margin-left: auto;
            margin-right: auto;
            text-align: center;
        }

    }



        .img-container a img{
            margin:10px;
            padding:10px;
            max-height:150px;
            max-width:150px;
            border:grey solid 2px;
        }
        .page-header{
            margin-left:auto;
            margin-right:auto;
            text-align:center;
            color:white;
        }
        #img-section{
            padding-bottom:40px;
        }

        @media (max-width: 768px){
            .img-container{
                min-height:150px;
                min-width:150px;
                margin:0px;
                padding:0px;
            }            
        }
                @media (min-width: 993px){
            .img-row{
                max-width:70%;
                margin-left:auto;
                margin-right:auto;
            }
            
        }