@import url(https://fonts.googleapis.com/css?family=Oswald:400,700);
@import url(https://fonts.googleapis.com/css?family=Open+Sans);

body {
   margin: 0px;
   padding: 0px;
}

.navbar a {
   text-decoration: none;
   color: white;
   display: block;
}

.navbar {
   position: fixed;
   z-index: 500;
   margin: auto;
   width: 100%;
   top: 0;
   left: 0;
   background: #FFA17F; /* fallback for old browsers */
   background: -webkit-linear-gradient(to left, #FFA17F , #00223E); /* Chrome 10-25, Safari 5.1-6 */
   background: linear-gradient(to left, #FFA17F , #00223E); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
   opacity: .8;
}

.section {
   width: 100%;
}

ul {
   list-style: none;
   width: 100%;
   display: inline-flex;
}

li {
   line-height: .5;
   width: 25%;
   font-family: 'Oswald', sans-serif;
   font-size: 1.5rem;
}

.main_caption {
   position: relative;
   z-index: 10;
   margin: auto;
   align-content: center;
   text-align: center;
   font-weight: 300px;
   padding-top: 100px;
   line-height: .5rem;
   flex-shrink: 1;
}

h1 {
   font-family: 'Oswald', sans-serif;
   font-weight: 400;
   font-size: 3rem;
   color: #424242;
   background-color: transparent;
}

h3 {
   font-weight: 400;
   color: gray;
   font-family: 'Open Sans', sans-serif;
   background-color: transparent;

}

.longs img {
   position: relative;
   z-index: 1;
   margin-top: -8em;
   width: 100%;
   /*box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.2);*/
   box-shadow: 0 4px 7px 0px rgba(0, 0, 0, 0.2);

}





/*gallery page 2*/

.gallery_head,
.aboutMe_head {
   font-size: 5rem;
   z-index: 1;
   color: #3F51B5;
   padding-top: 10%;
   padding-bottom: 10%;
   text-align: center;
   font-family: 'Oswald', sans-serif;
}


.wrapper2 {
   flex: 1 1 auto;
   width: 100%;
   display: flex;
   flex-direction: column;
   margin: auto;
   margin-top: -1%;
   background: #616161; /* fallback for old browsers */
   background: -webkit-linear-gradient(to left, #616161 , #9bc5c3); /* Chrome 10-25, Safari 5.1-6 */
   background: linear-gradient(to left, #616161 , #9bc5c3); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */*/
}




.card {
   display: flex;
   height: 50%;
   width: 93%;
   max-width: 1200px;
   margin: auto;
   margin-bottom: 3%;
   padding: 15px;
   background-color: #fff;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}



.card img {
   height: inherit;
   width: 50%;
}


.caption {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
   width: 50%;
   position: relative;
   background-color: white;
   color: black;
   font-size: 2.5rem;
   text-align: center;
   font-family: 'Oswald', sans-serif;
   transition: all 2s ease;
}


.caption p {
   padding-left: 15px;
   padding-right: 15px;
   margin: 0px;
   font-size: 1rem;
   font-family: 'Open Sans', sans-serif;
   text-align: justify;
   flex-shrink: 1;

}

button {
    background-color: #053C5D;
    border: none;
    max-width: 200px;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    position:relative;
    bottom: 2px;
    font-size: 16px;
}

   /*right arrow*/
.caption.right:before {
   content: "";
   position: absolute;
   width: 0;
   height: 0;
   left: -28px;
   top: 25%;
   border-top: 30px solid transparent;
   border-bottom: 30px solid transparent;
   border-right:30px solid #fff;
   margin-top: 73px;
   transition: all 0.5s ease;
}

   /*left arrow*/
.caption.left:after {
   content: "";
   position: absolute;
   width: 0;
   height: 0;
   right: -28px;
   top: 25%;
   border-top: 30px solid transparent;
   border-bottom: 30px solid transparent;
   border-left: 30px solid #fff;
   margin-top: 73px;
   transition: all .75s ease;
}


a {
   text-decoration: none;
   color: black
}


.caption:hover {
   /*background-color: #3F51B5;*/
   /*background-color: gray;*/
   background-color: #d3d3d3;
}

.caption.left:hover:after {
   border-left-color: #d3d3d3;
}

.caption.right:hover:before {
   border-right-color: #d3d3d3;

}


/*

about me, page 3

*/

.about_headers {
   font-family: 'Oswald', sans-serif;
   font-weight: 400;
   font-size: 3rem;
   color: gray;
   padding: 10px;
   margin-top: 1%;
   margin-bottom: 1%;
}


.section3 {
   display:flex;
   width: 100%;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.section3 img {
   width: 100%;
   z-index: -5px;
}

.about_me {
   position: absolute;
   width: 45%;
   margin-top: 4%;
   margin-left: -95%;
   padding: 1rem;
   font-size: 1.15rem;
   color: #424242;
   opacity: 0.8;
   background-color: #fff;
   text-align: center;
   font-family: 'Open Sans', serif;
   margin-bottom: 1%;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
   z-index: 20px;
}

.about_me h3 {
   font-family: 'Oswald', sans-serif;
   font-weight: 400;
   font-size: 2.5rem;
   margin-top: 2px;
   margin-bottom: 15px;
   color: #424242;
}

.about_me p {
   margin-top: -4px;
   margin-bottom: 15px;
   font-family: 'Open Sans', sans-serif;
   text-align: justify;
}


/*

contact page

*/


.contact_head {
   font-size: 5rem;
   z-index: 1;
   color: #3F51B5;
   padding-top: 10%;
   padding-bottom: 10%;
   text-align: center;
   font-family: 'Oswald', sans-serif;
   background: #616161; /* fallback for old browsers */
   background: -webkit-linear-gradient(to left, #616161 , #9bc5c3); /* Chrome 10-25, Safari 5.1-6 */
   background: linear-gradient(to left, #616161 , #9bc5c3); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */*/
}

.section4 {
   background-image: url("../images/mb.jpg");
   background-repeat: no-repeat;
   background-size: cover;
   width: 100%;
   height: 100vh;
   display: flex;
   flex-direction:column;
   align-content: center;
   padding-bottom: 5%;
   justify-content: space-between;
   margin: auto;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.blurb {
   font-family: 'Open Sans', serif;
   width: 50%;
   margin: auto;
   font-size: 2rem;
   padding: 1rem;
   background-color: #fff;
   color: #424242;
   opacity: 0.6;
   text-align: center;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}



.blurb img {
   height: 77px;
   padding: 5px;
   padding-top: 15px;
}



/*

High Retina Screens

*/

@media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {

   .navbar {
      flex-direction: row;
      justify-content: space-between;
   }

   .card:nth-child(even) {
      display: flex;
      flex-direction: column-reverse;
   }

   .card:nth-child(odd) {
      display: flex;
      flex-direction: column;
   }

   .card {
      max-width: 850px;
      width: 90%;
      margin: auto;
      margin-bottom: 35px;
   }

   .caption {
      width: 100%;
      font-size: 3rem;
   }

   .caption p {
      font-size: 2rem;
   }

   .card img {
      width: 100%;
   }

   button {
       background-color: #053C5D;
       border: none;
       max-width: 200px;
       color: white;
       padding: 15px 32px;
       text-align: center;
       text-decoration: none;
       display: inline-block;
       position:relative;
       bottom: 2px;
       font-size: 16px;
   }

      /*right arrow*/
   .caption.right:before {
      content: "";
      position: absolute;
      width: 0;
      height: 0;
      left: 46%;
      top: -107px;
      border-left: 25px solid transparent;
      border-right: 25px solid transparent;
      border-bottom: 25px solid #fff;
      margin-top: 54px;
      transition: all 0.5s ease;
   }

      /*left arrow*/
   .caption.left:after {
      content: "";
      position: absolute;
      width: 0;
      height: 0;
      left: 46%;
      top: -107px;
      border-left: 25px solid transparent;
      border-right: 25px solid transparent;
      border-bottom: 25px solid #fff;
      margin-top: 54px;
      transition: all .75s ease;
   }

   .caption:hover {
      background-color: #d3d3d3;
   }

   .caption.left:hover:after {
      border-left-color: transparent;
      border-bottom-color: #d3d3d3;
   }

   .caption.right:hover:before {
      border-right-color: transparent;
      border-bottom-color: #d3d3d3;

   }


   .about_me {
    position: absolute;
    width: 80%;
    margin-top:10%;
    margin-left: -92%;
    padding: 1rem;
    font-size: 1.5rem;
    color: #424242;
    opacity: 0.8;
    background-color: #fff;
    text-align: center;
    font-family: 'Open Sans', serif;
    margin-bottom: 1%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    z-index: 20px;
}


   .blurb {
    font-family: 'Open Sans', serif;
    width: 80%;
    margin: auto;
    font-size: 3rem;
    padding: 1rem;
    background-color: #fff;
    color: #424242;
    opacity: 0.8;
    text-align: center;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}



}

/*Low Res Small Screen*/

@media  (max-width: 600px) {

   .navbar {
      display: flex;
      flex-direction: column;
      text-align: center;
   }

   .card:nth-child(even) {
      display: flex;
      flex-direction: column;
   }

   .card:nth-child(odd) {
      display: flex;
      flex-direction: column-reverse;
   }

   .card {
      width: 90%;
      margin: auto;
      margin-bottom: 25px;
   }

   .caption {
      width: 100%;
   }

   .caption p {
      font-size: 14px;
   }

   .card img {
      width: 100%;
   }

   button {
       background-color: #053C5D;
       border: none;
       max-width: 200px;
       color: white;
       padding: 15px 32px;
       text-align: center;
       text-decoration: none;
       display: inline-block;
       position:relative;
       bottom: 2px;
       font-size: 16px;
   }

      /*right arrow*/
   .caption.right:before {
      content: "";
      position: absolute;
      width: 0;
      height: 0;
      left: 46%;
      top: -107px;
      border-left: 25px solid transparent;
      border-right: 25px solid transparent;
      border-bottom: 25px solid #fff;
      margin-top: 54px;
      transition: all 0.5s ease;
   }

      /*left arrow*/
   .caption.left:after {
      content: "";
      position: absolute;
      width: 0;
      height: 0;
      left: 46%;
      top: -107px;
      border-left: 25px solid transparent;
      border-right: 25px solid transparent;
      border-bottom: 25px solid #fff;
      margin-top: 54px;
      transition: all .75s ease;
   }

   .caption:hover {
      /*background-color: #3F51B5;*/
      /*background-color: gray;*/
      background-color: #d3d3d3;
   }

   .caption.left:hover:after {
      border-left-color: transparent;
      border-bottom-color: #d3d3d3;
   }

   .caption.right:hover:before {
      border-right-color: transparent;
      border-bottom-color: #d3d3d3;

   }

}