@import url('https://fonts.googleapis.com/css2?family=Castoro&display=swap');

.content {
    font-family: 'Castoro', serif;
    max-width:1535px;
    width:90%;
    margin: 0 auto;
}

.title {

    grid-area: title;
    font-weight: bold;
    color: #440d10;
    background-color: transparent;
    height: 60px;
    font-size: 60px;
    margin: 0 auto;
    /**text-shadow: -1px -1px 1px #ccc, 1px 1px 1px #666;
    -webkit-text-stroke: 1px #999; **/

}

.sub_ttl {
    grid-area: sub;
    height:50px;
    text-align: center;
    font-size: 32px;
    color: #333;
    font-style: italic;
    /** text-shadow: -1px -1px 1px #ccc, 1px 1px 1px #666;
    -webkit-text-stroke: 1px #999; **/

}
.padd1 { grid-area: padd1; }
.rvw {
  grid-area: rvw;
  height:220px;
  width:100%; z-index: -2;
  font-family: "Arial", "Tahoma", sans-serif;
  padding-bottom:7px;
}
.padd2 { grid-area: padd2; }
.img1 { grid-area: img1;}
.img2 { grid-area: img2;}
.img3 { grid-area: img3;}
.img4 { grid-area: img4;}
.msg1 {

    grid-area: msg1;
    font-weight: bold;
    color: #440d10;
    background-color: transparent;
    height: 90px;
    font-size: 60px;
    padding-top:10px;
    margin: 0 auto;
    /** text-shadow: -1px -1px 1px #ccc, 1px 1px 1px #666;
    -webkit-text-stroke: 1px #999; **/

}
.img5 { grid-area: img5;}
.cont1 { grid-area: cont1; font-size: 26px; padding-top:10px;}
.c1txt {padding-top: 10px; font-size: 13px; padding-bottom: 10px; font-family: "Arial", "Tahoma", sans-serif;}
.img6 { grid-area: img6;}
.cont2 { grid-area: cont2; font-size: 26px; padding-top:10px;}
.c2txt {padding-top: 10px; font-size: 13px; padding-bottom: 10px; font-family: "Arial", "Tahoma", sans-serif;}
.cont3 { grid-area: cont3; font-size: 22px; font-weight:bold; padding-top:10px;}
.cont3 p {font-family: "Arial", "Tahoma", sans-serif; font-size:12px; font-weight: normal; text-align: justify;}
.cont4 { grid-area: cont4; font-size: 22px; font-weight:bold; padding-top:10px;}
.map { grid-area: map;}
.addr { grid-area: addr; height:400px;}
.sweet { grid-area: sweet; height:150px;}


.chk {font-family: FontAwesome; color:#440d10; padding-left:20px;}
.chk span {font-family: "Arial", "Tahoma", sans-serif; font-size:14px; font-weight: normal;}
.home_container
{
    padding-top: 50px;
    display: grid;
    grid-template-areas:
      'title title title title title title title title title title title title'
      'sub sub sub sub sub sub sub sub sub sub sub sub'
      'padd1 rvw rvw rvw rvw rvw rvw rvw rvw rvw rvw padd2'
      'img1 img1 img1 img2 img2 img2 img3 img3 img3 img4 img4 img4'
      'msg1 msg1 msg1 msg1 msg1 msg1 msg1 msg1 msg1 msg1 msg1 msg1'
      'img5 img5 img5 cont1 cont1 cont1 img6 img6 img6 cont2 cont2 cont2'
      'cont3 cont3 cont3 cont3 cont3 cont3 cont4 cont4 cont4 cont4 cont4 cont4'
      'map map map map map map map map addr addr addr addr'
      'sweet sweet sweet sweet sweet sweet sweet sweet sweet sweet sweet sweet';
    grid-auto-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 3px;
    background-color: transparent;
    padding: 3px;
}

.rttl { grid-area: rttl; font-size:20px; color:#440d10; font-weight: bold; width: 100%; height:20%;}
.rloc { grid-area: rloc; font-size:20px; width: 100%; text-align: right; height:20%;}
.rtxt { grid-area: rtxt; font-size:14px; width: 100%; text-align: justify; font-style: italic; height:60%;}
.rrvr { grid-area:rrvr; font-size:20px; width: 100%; color:#440d10; font-weight: bold; height:20%; }
.rrt { grid-area: rrt; font-size:20px; width: 100%; text-align: right; height:20%;}
.rtb {
  grid-area: rtb;
  height: 26px;
  background-color:#440d10;
  color:#fff;
  font-size:22px;
  font-weight: bold;
  text-align: center;
  font-family: 'Castoro', serif;
  text-shadow: -1px -1px 1px #666, 1px 1px 1px #333;
}
.padd3 { grid-area: padd3; }
.padd4 { grid-area: padd4; }
.pretxt {font-size: 13px; font-weight: normal; color:#333;}

.rvw_cont
{
    width:100%;
    display: grid;
    grid-template-areas:
    'rtb rtb rtb rtb rtb rtb rtb rtb rtb rtb rtb rtb'
    'rttl rttl rttl rttl rttl rttl rloc rloc rloc rloc rloc rloc'
    'padd3 rtxt rtxt rtxt rtxt rtxt rtxt rtxt rtxt rtxt rtxt padd4'
    'rrvr rrvr rrvr rrvr rrvr rrvr rrt rrt rrt rrt rrt rrt';
    grid-auto-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    border-radius: 7px;
    border:2px solid #440d10;
    box-shadow: 2px 3px 2px rgba(0, 0, 0, 0.5);
    background-image: url('../../assets/images/flagx6001920.jpg');
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: 100% 500px;

}

#slideshow {
  position: relative;
  width: 100%;
  height:100%;

}

#slideshow > div {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
}

.txta {grid-area: txta;}
.imga {grid-area: imga;}
.imga img, .imgb img, .imgc img, .imgd img, .imge img, .imgf img
{
  width:100%;
  height:100%;
  display: block;
}
.imgb {grid-area: imgb;}
.imgc {grid-area: imgc;}
.imgd {grid-area: imgd;}
.imge {grid-area: imge;}
.imgf {grid-area: imgf;}

.cont4 {
    display: grid;
    grid-template-areas:
      'txta txta txta'
      'imga imgb imgc'
      'imga imgb imgc'
      'imga imgb imgc'
      'imga imgb imgc'
      'imgd imge imgf'
      'imgd imge imgf'
      'imgd imge imgf'
      'imgd imge imgf';
    grid-auto-columns: 1fr 1fr 1fr;
    grid-gap: 10px;
    background-color: transparent;
    padding: 10px;
}

.cont4 img {
    max-width: 100%;
    max-height: 100%;
    display: block;
}

.addr_box {
    width:80%;
    margin: 50px auto;
    background-color: #440d10;
    height:250px;
}

.addr_txt {
    width:60%;
    height:60%;
    padding-top:20%;
    margin:0 auto;
    font-family: "Arial", "Tahoma", sans-serif;
    font-size:14px;
    font-weight: normal;
    color:#fff;
}

.addr_txt span {
    font-family: 'Castoro', serif;
    font-size: 24px;
    font-weight: bold;
}

.mrker {
    float: left;
    font-size: 60px;
    color:red;
    font-family: FontAwesome;
}

.abox {
    float:right;
}

.sweet img {
    margin:0 auto;
    width:100%;
}


.home_container img {
    z-index: -3;
    max-width: 100%;
    max-height: 100%;
    display: block;

}

.hovereffect {

    width: 100%;
    height: 100%;
    float: left;
    overflow: hidden;
    position: relative;
    text-align: center;
    cursor: default;
}

    @media screen and (max-width: 1050px) {
      .title {font-size: 48px;}

  }


  @media screen and (max-width: 800px) {
      .title {font-size: 36px;}

  }

  @media screen and (max-width: 720px) {
      .content {width: 90%;}
      .title {font-size: 28px; height:50px}


  }
  }

  .hovereffect .overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
  }

  .hovereffect img {

    display: block;
    position: relative;
    -webkit-transition: all 0.4s ease-in;
    transition: all 0.4s ease-in;
  }

  .hovereffect:hover img {
    z-index: -3;
    filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feColorMatrix type="matrix" color-interpolation-filters="sRGB" values="0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0 0 0 1 0" /><feGaussianBlur stdDeviation="3" /></filter></svg>#filter');
    filter: grayscale(1) blur(3px);
    -webkit-filter: grayscale(1) blur(3px);
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
  }

  .hovereffect h2 {

    z-index: -2;
    text-align: center;
    position: relative;
    font-size: 17px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.6);
    z-index: 0;
    text-decoration: none;
  }

  .hovereffect a.info {
    z-index: 0;
    display: inline-block;
    text-decoration: none;
    padding: 7px 14px;
    border: 1px solid #440d10;
    margin: 50px 0 0 0;
    background-color: transparent;
    text-decoration: none;
  }

  .hovereffect a.info:hover {
    box-shadow: 0 0 5px #440d10;
  }

  .hovereffect a.info, .hovereffect h2 {
    -webkit-transform: scale(0.7);
    -ms-transform: scale(0.7);
    transform: scale(0.7);
    -webkit-transition: all 0.4s ease-in;
    transition: all 0.4s ease-in;
    opacity: 0;
    filter: alpha(opacity=0);
    color: #440d10;
    text-transform: uppercase;
  }

  .hovereffect:hover a.info, .hovereffect:hover h2 {

    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }


.hovereffect {
  width: 100%;
  height: 100%;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;
}

.hovereffect .overlay {
  z-index: -2;
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  left: 0;
  background-color: rgba(255, 255, 255, 0.7);
  top: -200px;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: all 0.1s ease-out 0.5s;
  transition: all 0.1s ease-out 0.5s;
}

.hovereffect:hover .overlay {
  opacity: 1;
  filter: alpha(opacity=100);
  top: 0px;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

.hovereffect img {
  display: block;
  position: relative;
}

.hovereffect h2 {
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  position: relative;
  font-size: 17px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.6);
  -webkit-transform: translateY(-200px);
  -ms-transform: translateY(-200px);
  transform: translateY(-200px);
  -webkit-transition: all ease-in-out 0.1s;
  transition: all ease-in-out 0.1s;
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;

}

.hovereffect:hover h2 {
  -webkit-transform: translateY(0px);
  -ms-transform: translateY(0px);
  transform: translateY(0px);
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

.hovereffect a.info {
  display: inline-block;
  text-decoration: none;
  padding: 7px 14px;
  text-transform: uppercase;
  margin: 50px 0 0 0;
  background-color: transparent;
  -webkit-transform: translateY(-200px);
  -ms-transform: translateY(-200px);
  transform: translateY(-200px);
  color: #000;
  border: 1px solid #000;
  -webkit-transition: all ease-in-out 0.3s;
  transition: all ease-in-out 0.3s;
}

.hovereffect a.info:hover {
  box-shadow: 0 0 5px #fff;
}

.hovereffect:hover a.info {
  -webkit-transform: translateY(0px);
  -ms-transform: translateY(0px);
  transform: translateY(0px);
  box-shadow: 0 0 5px #000;
  color: #000;
  border: 1px solid #000;
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}


  .button {
    font-family: "Arial", "Tahoma", sans-serif;
    float: left;
    display: block;
    color:#ccc;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    background-color: #440d10;
    border-radius: 7px;
    box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.5);
    /*border:2px solid #ccc;*/
    transition:0.3s;
 }

 .button:hover {
    color: #440d10;
    background-color: #ccc;
    /*border:2px solid #440d10;*/

 }


@media screen and (max-width: 1200px) {
    .cont1 {font-size: 20px;}
    .c1txt {font-size: 12px;}
    .cont2 {font-size: 20px;}
    .c2txt {font-size: 12px;}
    .cont3 {font-size: 18px;}
    .cont3 p {font-size: 11px;}
    .cont4 {font-size: 18px;}
    .chk span {font-size: 12px;}
    .sweet {height:150px;}
}

@media screen and (max-width: 1050px) {
    .title {font-size: 48px;}
    .msg1 {font-size: 48px;}
    .cont1 {font-size: 18px;}
    .c1txt {font-size: 10px;}
    .cont2 {font-size: 18px;}
    .c2txt {font-size: 10px;}
    .chk span {font-size: 12px;}
    .sweet {height:150px;}

}

@media screen and (max-width: 800px) {
    .title {font-size: 36px;}
    .msg1 {font-size: 36px;}
    .cont1 {font-size: 14px;}
    .c1txt {font-size: 9px;}
    .cont2 {font-size: 14px;}
    .c2txt {font-size: 9px;}
    .sweet {height:120px;}
    .sub_ttl {font-size:26px; height:34px;}
}

@media screen and (max-width: 720px) {
    .content {width: 90%; padding-top:0px;}
    .title {font-size: 33px; height:30px}
    .msg1 {font-size: 24px; height:30px}
    .cont1 {font-size: 14px;}
    .c1txt {font-size: 9px;}
    .cont2 {font-size: 14px;}
    .c2txt {font-size: 9px;}
    .map {height: 300px;}
    .sub {font-size: 24px;}
    .rvw {height:220px;}
    .home_container
    {
        padding-top: 50px;
        display: grid;
        grid-template-areas:
        'title title title title title title'
        'sub sub sub sub sub sub'
        'rvw rvw rvw rvw rvw rvw'
        'img1 img1 img1 img2 img2 img2'
        'img3 img3 img3 img4 img4 img4'
        'msg1 msg1 msg1 msg1 msg1 msg1'
        'img5 img5 img5 cont1 cont1 cont1'
        'cont2 cont2 cont2 img6 img6 img6 '
        'cont3 cont3 cont3 cont3 cont3 cont3'
        'cont4 cont4 cont4 cont4 cont4 cont4'
        'map map map map map map'
        'addr addr addr addr addr addr'
        'sweet sweet sweet sweet sweet sweet';
        grid-auto-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-gap: 3px;
        background-color: transparent;
        padding: 3x;
    }
.imga, .imgb, .imgc, .imgd, .imge, .imgf {height:150px;}
    .cont4 {
        display: grid;
        grid-template-areas:
          'txta txta'
          'imga imgb'
          'imgc imgd'
          'imge imgf';
        grid-auto-columns: 1fr 1fr;
        grid-gap: 10px;
        background-color: transparent;
        padding: 10px;
    }

.rttl {font-size:14px;}
.rloc {font-size:12px;}
.rtxt {font-size:10px;}
.rrvr  {font-size:12px;}
.rrt  {font-size:12px;}
.rtb  {font-size:18px;}
.sub_ttl {font-size:18px; height:30px; padding-top:10px;}
.padd2 { display:none; }
.padd1 { display:none; }
.padd4 { display:none; }
.padd3 { display:none; }
.pretxt {font-size:9px;}
.sweet { grid-area: sweet; height:80px;}
.addr {height:300px;}

}

@media screen and (max-width: 440px) {

  .title {font-size: 26px; height:28px}
  .sub_ttl {font-size:15px;}
  .rvw {height:0px; display:none;}
  .rttl {font-size:13px;}
  .rloc {font-size:11px;}
  .rtxt {font-size:9px;}
  .rrvr  {font-size:11px;}
  .rrt  {font-size: 11px;}
  .rtb  {font-size:15px;}
  .header img {max-width:50%;}
}

@media screen and (min-height: 1000px) {
  .content{
      min-height:1500px;
  }

}