@charset "UTF-8";
/* CSS Document */

.mySlides {display:none;}


/*CSS grid*/

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.0);
}


/*layout stuff*/
header, footer {
    margin-left:16px;
}

.spot1 { 
    grid-area: one;    
}
.spot2 {
    grid-area: two; 
}
.spot3 { 
    grid-area: three;
}
.spot4 { 
    grid-area: four;
}
.spot5 { 
    grid-area: five;
}
.spot6 { 
    grid-area: six;
}
.spot7 { 
    grid-area: seven;
}
.spot8 { 
    grid-area: eight;
}
.spot9 { 
    grid-area: nine;
}
.spot10 { 
    grid-area: ten;
}
.spot11 { 
    grid-area: eleven;
}
.spot12 { 
    grid-area: twelve;
}
.spot13 { 
    grid-area: thirteen;
}
.spot14 { 
    grid-area: fourteen;
}
.spot15 { 
    grid-area: fifteen;
}
.spot16 { 
    grid-area: sixteen;
}
.spot17 { 
    grid-area: seventeen;
}
.spot18 { 
    grid-area: eighteen;
}
.spot19 { 
    grid-area: nineteen;
}
.spot20 { 
    grid-area: twenty;
}
.grid-container {
  display: grid;
  grid-template-areas:
    'one two'
    'three four'
    'five six'
    'seven eight'
    'nine ten'
    'eleven twelve'
    'thirteen fourteen'
    'fifteen sixteen'
    'seventeen eighteen'
    'nineteen twenty';
    grid-gap: 10px;
    padding: 12px;
    margin-left:10%;
    margin-right:10%;
}



/*tablet view*/
@media only screen and (min-width:768px) {
    .grid-container {
        grid-template-areas:
            'header header header'
            'one two three'
            'four five six'
            'seven eight nine'
            'ten eleven twelve'
            'thirteen fourteen fifteen'
            'sixteen seventeen eighteen'
            'nineteen twenty .';
    }
}


/*desktop view*/
@media only screen and (min-width:1200px) {
    .grid-container {
        grid-template-areas:
            'header header header header'
            'one two three four'
            'five six seven eight'
            'nine ten eleven twelve'
            'thirteen fourteen fifteen sixteen'
            'seventeen eighteen nineteen twenty';
    }
}


/*inner gallery text*/
#blurb {
    width:80%;
    margin:50px auto auto;
}

/*about and contact layout*/
main {
    width:75%;
    margin:0px auto;
}

#contact {
    background-color:gainsboro;
    padding:20px 20px 20px 0px;
}

.medium {
    margin-left:15px;
}
.big {
    margin-left:25px;
}