/********************************
	MAIN STYLES PAGE
*********************************/
@import url("https://fonts.googleapis.com/css?family=Lato:400,300,500,700,900");



/********************************
	BASE ELEMENT STYLES
*********************************/
            *:before, *:after {
              -moz-box-sizing: border-box;
              -webkit-box-sizing: border-box;
              box-sizing: border-box;
            }

            body {
	            font-family:"Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
            	line-height: 1.6;
            	margin: 0;
                padding: 50px 0 0 0;
                font-size: 17px;
                position: relative;
            }

            h2{
                font-weight: bold;
            }
            h3,
            #clickme
            {
                color:#5e4485;
            }

            p {
                font-size: 1.15em;
                margin: 1% auto;
                font-weight: 500;
            }

            ul{
                list-style: none;
            }

            caption{
                font-weight: bold;
                text-transform: uppercase;
                color:black;
            }

            .navbar {
                margin-bottom: -5%;
                border-radius: 0;
                background-color: #5e4485;
                color:#FFF;
                padding: 1% 0;
                font-size: 1.2em;
                border:0;

            }

            .navbar{
                padding-bottom: -1%;
            }

            .navbar-brand{
                float:left;
                min-height: 57px;
                padding: 0 25px 0 25px;
                color:#FFF;
            }

            .navbar-inverse .navbar-nav .active a,
            .navbar-inverse .navbar-nav .active a:focus,
            .navbar-inverse .navbar-nav .active a:hover{
                color:#FFF;
                background-color: #5e4485;
            }

            #myNavbar{
                padding-top: 1%;
            }

            .logo{
                margin-bottom: 10px;
            }

            #title{
                color:#FFF;
            }

            .jumbotron{
                background-image: url("../img/KieraBanner.png");
                background-size:cover;
                background-position: center 0;
                padding-top: 10%;
                padding-bottom: 20%;
            }

            .headshot{
                margin-top:2%;
            }

            #videoBox{
                margin-top:7%;
                margin-bottom: 5%;
            }

            #videoStuff{
                margin-top:7%;
            }

            #skill{
                font-weight:bold;
                color:#5e4485;
            }l

            button#trigger{
                margin:25px auto 0;
                display:block;
                background-color:#5e4485;
                color:#fff;
            }

            button#trigger:focus,
            button#trigger:hover{
                color:yellow;
            }

            footer{
                width:100%;
                background-color:#5e4485;
                padding:5%;
                color:white;
                margin-top:5%;
            }

            a.fa{
                padding:12px;
                font-size: 30px;
                color:#FFF;
            }

            a.fa:hover{
                color:#d5d5d5;
                text-decoration:none;
           }

            #headshots:before,
            #resume:before,
            #contact:before{
                display: block;
                content:"";
                margin-top: -95px;
                height:95px;
                visibility: hidden;
            }









/************MEDIA QUERIES*********/

@media (min-width: 769px) {
	.wrap {
		min-height: calc(100vh - 149px);
	}



}

@media (max-width: 800px) {

}


@media (min-width: 1025px) {

	.main-head,
	.main-content,
  .card {
		width: 80%;
		max-width: 1150px;

	}


}