/*
Theme Name: Coral-Light-Child
Theme URL: http://unionmusic.0439101.netsolhost.com/wp-content/themes/coral-light-child/screenshot.jpg
Description: Coral Light Child Theme
Author: Tom Matthew
Author URL: http://twotonmusic.com/
Template: coral-light
Version: 1.0.0
Text Domain:coral-light-child
*/
/*color palette
	red - #FA0012
	light blue - #0996E0
	blue - #281DF5
	green - #0FFFA2
	purple - #CB14FF
  light gray - #F7F7F7 */

#header-um-grid {
    display: grid;
    grid-template-columns: 160px 430px 430px;
    width: 1020px;
    background-color: white;
    border: 1px solid lightgray;
    margin-left: auto;
    margin-right: auto;
    padding: .5em 0 .5em;
    justify-items: end;
    }

.header-text {
  font-family: 'Montserrat', sans-serif;
  text-align: center;
  display: block;
}
#header-text-grid {
  display: grid;
  grid-template-rows: 50px 14px 22px 22px 22px 20px;
  grid-template-areas:
    'tagline'
    '.'
    'street'
    'city'
    'phone';
}
#tagline {
  grid-area: tagline;
  align-content: end;
  font-size: 1.2em;
  padding: 1em .2em 0 .2em;
}
#street{
  grid-area: street;
}
#city{
  grid-area: city;
}
#phone{
  grid-area: phone;
}

#header-rs-grid {
  display: grid;
  grid-template-rows: 100px 50px;
  grid-template-areas:
    'social-media-grid'
    'search1';
  width: 100%;
}
#social-media-icons-grid {
  grid-area: social-media-grid;
  display: grid;
  grid-template-columns: 1fr 60px 60px 60px;
  grid-template-areas:
  '. facebook-icon instagram-icon .';
  align-items: end;
  justify-items: end;
}
.social-media-link {
  padding-left: 1em;
}
.social-media-icon  {
  width: 50px;
  max-width: none;
  margin-bottom: 20px;
}
#facebook-icon {
  grid-area: facebook-icon;
}
#instagram-icon {
  grid-area: instagram-icon;
}
#search1{
  grid-area: search1;
}
#search2 {
  width: 100%;
  display: none;
}
#myslideshow {
  padding: 0;
}
.grid-container {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.site-footer {
  max-width: 1020px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1em;
}
@media (min-width: 1024px) {
.sm-clean ul a.current {
    background: #FA0012;
  }
  .sm-clean ul a, .sm-clean ul a:hover, .sm-clean ul a:focus, .sm-clean ul a:active, .sm-clean ul a.highlighted {
    font-size: 1em;
  }
}
@media screen and (max-width: 1079px) {
  #content {
    margin: 10px;
  }
    #header-um-grid {
        width: auto;
        grid-template-columns: 160px 1fr 1fr;
        margin: 10px;
        justify-items: center;
        }
  }
@media screen and (max-width: 970px) {
  .header-text { font-size: .9em;}
  #tagline {font-size: 1em;}
  }
@media screen and (max-width: 820px) {
  #header-um-grid {
      grid-template-columns: 160px 330px 1fr;
    }
@media screen and (max-width: 770px) {
        #search1 { display: none;}
        #search2 { display: block;
            margin-top: 10px;
            height: 60px;}
        #header-um-grid {
          grid-template-columns: 160px 1fr;
          grid-template-rows: 160px 50px;
        }
        #social-media-icons-grid {
          margin-top: 2px;
          grid-template-columns: 10px 1fr 1fr 10px;
          align-items: center;
          grid-template-areas:
            '. facebook-icon instagram-icon .';

        }
        #header-rs-grid {
          display: grid;
          grid-template-rows: 60px;
          grid-template-areas:
            'social-media-grid';
        }
        .header-text { font-size: 1em;}
        #tagline {font-size: 1.2em;}
}
@media screen and (max-width: 600px) {
  #header-text-grid {
    display: grid;
    grid-template-rows: 50px 14px 20px 22px 22px 22px;
    grid-template-areas:
      'tagline'
      '.'
      '.'
      'street'
      'city'
      'phone';
  }
      .header-text { font-size: 1em;}
      #tagline { font-size: 1.2em;}
  }
@media screen and (max-width: 410px) {

        .header-text { font-size: .8em;}
        #tagline { font-size: 1em;}
    }
@media screen and (max-width: 366px) {
        #city {font-size: .7em;}
        }
