/* --------- Gallery Specifications ---------- */

#gallery {
    background-image: url('../images/background-image.png');
    background-color: #C5DFFF;
}

.headerPadding, .galleryHeader {
    margin: 0 auto;
}

.headerPadding {
    background-color: white;
    padding: 9px;
    box-shadow: 5px 5px 6px #56697F;
    width: 50%;
    margin-top: 12px;
}

.galleryHeader {
    font-size: 3rem;
    font-family: 'Prata', serif;
    color: #25467F;
    text-shadow: 1px 1px 1px white;
    text-align: center;
    background-color: #C5DFFF;
    opacity: .90;
    width: 100%;
}

#imageGallery {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
	max-width: 90%;
	text-align: center;
}

figure {
    width: 20%;
    margin: 1.5%;
}

figure img, figcaption {
    box-shadow: 5px 5px 6px #56697F;
    margin: 0 auto;
    width: 100%;
}

figure img {
    display: inline-block;
	padding: 9px;
	background: white;
	margin: 18px 0px 0px;
}

figcaption {
    text-align: center;
    font-family: 'Lusitana', serif;
    padding: 2.5%;
    word-wrap: normal;
    background-color: #005DCC;
    color: white;
    opacity: .90;
    display: inline-block;
}

@media only screen and (max-device-width: 568px){
    #imageGallery {
	   display: block;
    }
    figure {
        width: 88%;
        margin: 1.5%;
    }
    figure img {
        display: block;
    }
    .galleryHeader{
        font-size: 2rem;
        padding: 2% 0%;
    }
    .headerPadding {
        width: 70%;
    }
}

/*
@media only screen and (min-device-width: 569px) and (max-device-width: 1025px){
    #imageGallery {
	   display: block;
    }
    figure {
        width: 88%;
        margin: 1.5%;
    }
    figure img {
        display: block;
    }
    .galleryHeader {
        padding: 2% 0%;
        margin: auto;
    }
    .figcaption {
        margin-bottom: 7%;
        font-size: 1.5rem;
    }
}
*/

/* ----------- Nexus 5x ----------- */
/* Portrait */

@media only screen
    and (device-width: 412px) 
    and (device-height: 732px)
    and (orientation:portrait) {
    html, body {     
        width: 102% !important;
    }
}

/* ----------- Nexus 6p ----------- */
/* Landscape */
@media only screen
    and (min-width: 412px)
    and (max-width: 732px)
    and (orientation:landscape){
    body {
        width: 105% !important;
    }
}

/* ----------- iPhone 6 ----------- */
/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { 
      body {
        width: 100% !important;
    }
      #imageGallery, figure img {
        display: -webkit-flex;
        display: flex;
        flex-wrap: wrap;
        max-width: 90%;
      }
      figure img {
    display: inline-block;
      }
}

/* --------- app.js Specifications ---------- */

.button-right, .button-left {
    width: 5%;
    height: 5%;
    display: inline-block;
}

.button-right {
    float:right;
}

.button-left {
    float:left;
}