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

* {
    margin:0;
    padding:0;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-font-smoothing:antialiased;
    -moz-font-smoothing:antialiased;
    -o-font-smoothing:antialiased;
    font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

*:focus {
    outline: none;
}
.gray {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color:rgb(148, 148, 125);
    font-size: .9rem;
    letter-spacing: .2em;
    margin: 4em 0 -3em 0;
}
.size {
    font-size: 3rem;
}

.none {
    display: none;
}

/*
.bordered {
    border: dashed 2px red;
}

.bord-lime {
    border: solid 2px rgb(69, 252, 18);
}

.bord-org {
    border: solid 6px rgb(252, 131, 18);
}


.bord-purp {
    border: solid 4px rgb(182, 18, 252);
}
  */

.max-250 {
    max-width: 250px;
}

#Tumbaco-Bed-and-Breakfast {
                                                      
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border: none;
    margin: .8em 0 .5em 0;
}

article {
    margin: .75em 0em;
}

.more-info {
    margin: 1.75em auto 1em auto;
    width: 150px;
    padding: .15em .15em;
    border: 1px solid #a218a2;
    border-radius: 1rem;
    background-color: #adac70;
    color: #0d4455;  
    /* color: #551e0d;  */
    letter-spacing: .10rem;
    box-shadow: rgba(0, 0, 0, 0.45) 0px 19px 38px, rgba(0, 0, 0, 0.72) 0px 15px 12px;
    font-weight: 600;
 
  }
  
  .more-info:hover {
  color:#72045e;
  border: 1px solid yellow; 
  box-shadow: none;
  text-decoration: none;
  }


.round-box {
    border:  solid 1px #FC9;
    border-radius: 2rem;
    padding: 1em;
    width:  100%;
    max-width: 350px;
    margin-top: .5em;
}


html {
    scroll-behavior: smooth;
   }
   

#under-constr {
    color: #F7F7FF;
   /* font-size: 34px; */
        /* font-size: clamp(1.5rem, 3vw, 2.8rem);  */
  /*  letter-spacing: .006em;  */
    font-weight: 400;
    text-shadow: 1px 1.5px #000;
    text-align: center;

    line-height: 1em;
    font-size: 1.8rem;
}

.social-media {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    padding: 1.75em;
    justify-content: space-between;
    margin: 1.5em;
    border: 2px solid #639;
    border-radius: 10px;
}

.social-media img{
    width: 130px;
    height: auto;
    padding: 2em;
}

.social-media img:hover{ 
    padding:  .5em;
} 


.ctr {
    display: block;
    margin:0 auto;
}
header h1 {
    color:rgb(247, 247, 146);
    font-family: 'Times New Roman', Times, serif;
    font-weight: 400;

    font-size: clamp(1.35rem, 2vw, 2.7rem); 

    letter-spacing: .5px;
    text-align: center;
    text-shadow: 1.25px 1.75px #000;
}
header h2 {
    color:rgb(244, 213, 139);
    font-family: 'Times New Roman', Times, serif;
    font-weight: 400;

   /* font-size: clamp(1.5rem, 2.5vw, 4rem); */
    font-size: 33px;  
    letter-spacing: .95px;
    text-align: center;
    text-shadow: 1.25px 1.75px #000;
}

  .amenities-list {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: clamp(0.8rem, -2.16rem + 8.96vw, 1.2rem);
    /*font-size: .8rem;  */
    letter-spacing: .05rem;
    text-align: left;
    color:#c2c787;
    font-weight: 400;
    line-height: 1.7rem;
    text-shadow: .09rem .09rem #000;
  }


.logo-column-1 {
display: grid;
}

#logo-box {
 display: grid;
 grid-template-columns: 1fr 1fr 1fr; 
 justify-content: center;
}

.text-box-a p{

    padding: 1em;
    font-size: 21px;
    letter-spacing: 1.65px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;7.5    line-height: 1.75rem;
    line-height: 1.75rem;
    margin: 1em .25em 1em 1em;
    color:#dcdf8f;
    text-align: left;
}
.text-box-b p{
   
    padding: 1em;
    font-size: 21px;
    letter-spacing: 1.65px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    line-height: 1.75rem;
    margin: 1em 1em 1em .15em;
    color:#dcdf8f;
    text-align: left;
}
#logo-col h3{
font-family: 'Times New Roman', Times, serif;
font-weight: 400;
letter-spacing: .05em;
font-size: 32px;
color: #f1523e;
text-shadow: 1.7px 1.9px #000;
text-align: center;
}

#logo-col h4{
    font-family: 'Times New Roman', Times, serif;
    font-weight: 400;
    letter-spacing: .05em;
    font-size: 30px;
    color: #d96b30;
    text-shadow: 1.7px 1.9px #000;
    text-align: center;
    line-height: 1.55em;
    }

    #logo-col p{
        font-family: 'Times New Roman', Times, serif;
  
        letter-spacing: .05em;
        font-size: 25px;
        color: #fbab7f;
        text-shadow: 1px 1.3px #000;
        text-align: center;
        line-height: 1.5em;
        }    

.logo-column-1{
 display: grid;  
 grid-template-rows: auto;
 align-content: center; 
                          /*  border: 2px solid rgb(156, 247, 10);   */
         max-width: 350px;
         justify-content: center;   
         padding-left: .15em;
                                      /*  border:  3px dashed #0CF;  */
}

#CasaTazin-logo-1 {
    width: 100%;
    max-width: 100px;
    height: auto;
    padding: 1em;
    margin-bottom: 0px;
  /*  border: 3px solid red;   */
}

.Res-noBird {
    background-image: url(https://casatazin.com/CasaTazin-Art/CasaTazin-ResBlnk-bckk-u.svg);
background-size: cover;
width: 250px;
height: auto;
margin: 2.5em 1em 0em 1em;
}

/*
.res-txt-btn p{
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 36px;
letter-spacing: 1.25rem;
text-align: center;
text-shadow: 1.25px 1.5px #000;
color: #0CF;
background-image: url(https://casatazin.com/CasaTazin-Art/CasaTazin-ResBlnk-bckk-u.svg);
background-size: cover;
width: 250px;
height: auto;
margin-top: 1.5em;
}
.res-txt-btn:hover {
    color: rgb(252, 246, 130);
    background-image: url(https://casatazin.com/CasaTazin-Art/CasaTazin-ResBlnk-bckk-d.svg);
}
*/

                                                                                                .reserv-btn {
    display:  grid;
    background-image: url(casatazin.com.CasaTazin-Art/CasaTazin-txt-Reservations-u.svg);
    background-repeat: no-repeat;
    background-position: center;
    width: 300px;
    height: auto;
    padding: 3em 1em 1em 1em;
    align-self: center;
}


*:hover {
    text-decoration: none;
}



.smart-pic{
   /* width: 100px;  */
    margin: 0 auto;
    width: 100%;
    max-width: 450px;
    height: auto;

   /*  height: 100px; */
   /* background-color: red; */
    position: relative;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 1;
    /*Shorthand property of animation ~ animation: example 4s 1;*/
  }
  
  @keyframes example {
    10% {
      opacity: 1;
    }
    20% {
      opacity: 1;
    }
    30% {
      opacity: 0;
    }
    40% {
      transform: scale(1.2);
    }
    60% {
      transform: scale(1);
    }
    100% {
      transform: opacity(1);
    }
  }




.room-show {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}


.slide {
   background: #fff; 
   /*background: none;  */

    height: 350px;
    overflow: hidden;
    position: relative;
    width: 100%;

    border: 2px solid #fff;
    margin-top: .5em;
}

.slide > div {
    animation: slide 16s infinite;
    background-position: center center;
    background-size: cover;
    height: 100%;
    opacity: 0;
    position: absolute;
    width: 100%;
}

/*
.slide > div:nth-child(1) {
    animation-delay: 4s;
}  */



.slide > div:nth-child(2) {
    animation-delay: 4s;
}

.slide > div:nth-child(3) {
    animation-delay: 8s;
}

.slide > div:nth-child(4) {
    animation-delay: 12s;
}


.slide > div:nth-child(5) {
    animation-delay: 16s;
}


@keyframes slide {
    10% {
        opacity: 1;
    }
    20% {
        opacity: 1;
    }
    30% {
        opacity: 0;
    }
    40% {
        transform: scale(1.2);
    }
}


/*
@keyframes slide {
    10% {
        opacity: 1;
    }
    20% {
        opacity: 1;
    }
    30% {
        opacity: 0;
    }
    40% {
        transform: scale(1.2);
    }
    60% {
        transform: scale(1);
    }
    100% {
        transform: opacity(1);
    }
}

/*----------*/



/* jssor slider loading skin spin css */
.jssorl-009-spin img {
    animation-name: jssorl-009-spin;
    animation-duration: 1.6s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes jssorl-009-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


.jssora106 {display:block;position:absolute;cursor:pointer;}
.jssora106 .c {fill:#fff;opacity:.3;}
.jssora106 .a {fill:none;stroke:#000;stroke-width:350;stroke-miterlimit:10;}
.jssora106:hover .c {opacity:.5;}
.jssora106:hover .a {opacity:.8;}
.jssora106.jssora106dn .c {opacity:.2;}
.jssora106.jssora106dn .a {opacity:1;}
.jssora106.jssora106ds {opacity:.3;pointer-events:none;}

.jssort101 .p {position: absolute;top:0;left:0;box-sizing:border-box;background:#000;}
.jssort101 .p .cv {position:relative;top:0;left:0;width:100%;height:100%;border:2px solid #000;box-sizing:border-box;z-index:1;}
.jssort101 .a {fill:none;stroke:#fff;stroke-width:400;stroke-miterlimit:10;visibility:hidden;}
.jssort101 .p:hover .cv, .jssort101 .p.pdn .cv {border:none;border-color:transparent;}
.jssort101 .p:hover{padding:2px;}
.jssort101 .p:hover .cv {background-color:rgba(0,0,0,6);opacity:.35;}
.jssort101 .p:hover.pdn{padding:0;}
.jssort101 .p:hover.pdn .cv {border:2px solid #fff;background:none;opacity:.35;}
.jssort101 .pav .cv {border-color:#fff;opacity:.35;}
.jssort101 .pav .a, .jssort101 .p:hover .a {visibility:visible;}
.jssort101 .t {position:absolute;top:0;left:0;width:100%;height:100%;border:none;opacity:.6;}
.jssort101 .pav .t, .jssort101 .p:hover .t{opacity:1;}







body {
    background-image: url(img/vert-1c.svg);
    background-repeat: repeat-x;

    /*
    background: rgb(32,80,43);
background: linear-gradient(180deg, rgba(32,80,43,1) 0%, rgba(98,117,56,1) 4%, rgba(117,11,48,1) 27%, rgba(83,7,23,1) 43%, rgba(46,2,11,1) 71%);    */

/*
background: rgb(117,37,4);
background: linear-gradient(180deg, rgba(117,37,4,1) 0%, rgba(139,18,56,1) 2%, rgba(117,42,11,1) 6%, rgba(83,7,23,1) 20%, rgba(46,2,11,1) 97%); */

/*
background: rgb(85,26,2);
background: linear-gradient(180deg, rgba(85,26,2,1) 0%, rgba(139,18,56,1) 2%, rgba(117,42,11,1) 6%, rgba(83,7,23,1) 20%, rgba(46,2,11,1) 97%);   */

background: rgb(85,26,2);
background: linear-gradient(180deg, rgba(85,26,2,1) 0%, rgba(139,18,56,1) 2%, rgba(117,42,11,1) 6%, rgba(83,7,23,1) 16%, rgba(46,2,11,1) 42%, rgba(31,3,53,1) 70%, rgba(2,32,74,1) 100%); 
}

.img-border {
border: solid 1.5px #999;
}

.guest-rooms p,h4 {
    color:#0CF;
    padding:.5em .75em;
   /* font-size: clamp(.2rem, 1.75rem + .5vw, 1.75rem) ;  */
   font-size: clamp(1rem, -1.5rem + 4vw, 1.6rem);
}
.maxed-width {
    width: 100%;
    display: block;
}

.flexed {
    display: flex;
}


    .grided {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding: 1em;
}   

.width { 
    width: 100%;
    height: auto;
}

.wide-300 {
    width: 100%;
    height: auto;
    max-width: 300px;
}

.wide-200 {
    width: 100%;
    max-width: 200px;
    height: auto;
    padding: 1em;
}
#art-top {
    display: flex;
    justify-content: center;
                          /*   border: 1 px solid orange;   */                   
}

.wht {
    color: #fff;
}



#art-box-1 {
    display: grid;
   /* grid-template-rows: repeat(4fr);  */
   grid-template-rows: repeat(2fr);

    width:100%;
    max-width: 700px;
    background-image: url(travel-design/BCK-art-f1-1.jpg) ;
    background-repeat: no-repeat;
    background-size: contain;
    height: auto;

align-self: center;
  
}


#art-box-1 h2{
    text-align: center;

}

#art-box-nav {
    width: 100%;
    max-width: 700px; 

}

#art-box-nav ul {
    display: flex;
   justify-content: space-between;  
    border: 1.25px solid rgb(46, 3, 57);
    padding: 1.2em ;

   /* margin-top: .75em;   */


  /*  max-width: 80%;  */
    list-style: none;


    
/*
background: linear-gradient(to bottom,  rgba(100,109,3,1) 0%,rgba(44,68,23,1) 3%,rgba(44,68,23,1) 4%,rgba(44,68,23,1) 6%,rgba(104,107,48,1) 31%,rgba(145,141,81,1) 50%,rgba(119,105,25,1) 51%,rgba(104,107,48,1) 59%,rgba(80,84,8,1) 77%,rgba(6,14,63,1) 98%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#3a071e+0,3c6b84+3,374077+12,3a071e+31,542b56+50,542b56+50,7a486a+51,5e293d+77,420a24+95,704535+100 */

/*
background: linear-gradient(to bottom,  rgba(58,7,30,1) 0%,rgba(60,107,132,1) 3%,rgba(55,64,119,1) 12%,rgba(58,7,30,1) 31%,rgba(84,43,86,1) 50%,rgba(84,43,86,1) 50%,rgba(122,72,106,1) 51%,rgba(94,41,61,1) 77%,rgba(66,10,36,1) 95%,rgba(112,69,53,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#260206+0,773313+3,3a071e+14,3a071e+23,3a071e+31,542b56+50,542b56+50,7a486a+51,5e293d+77,420a24+95,704535+100 */

background: linear-gradient(to bottom,  rgba(38,2,6,1) 0%,rgba(119,51,19,1) 3%,rgba(58,7,30,1) 14%,rgba(58,7,30,1) 23%,rgba(58,7,30,1) 31%,rgba(84,43,86,1) 50%,rgba(84,43,86,1) 50%,rgba(122,72,106,1) 51%,rgba(94,41,61,1) 77%,rgba(66,10,36,1) 95%,rgba(112,69,53,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

}

#three-x {
    display: flex;  
    justify-content: space-between;
    gap: .5em;
  
}
.marg-top-8 {
    margin-top: 4em;

    width: 100%;
    max-width: 255px;
}
.max-60 {
    width: 100%;
}
.marg-rt {
    margin-right: auto;
}
.marg-left {
    margin-left: auto;
}

.font-h2 {
 /*   color: #a995b0;  */
 color: #fdaf14;
   /* font-size: 1.8rem; */

    font-size: clamp(.2rem, 1.75rem + 1vw, 1.75rem) ;  

    letter-spacing: .15rem;
 /*   padding-top: .5em;  */
    font-family: 'Times New Roman', Times, serif;
    text-align: center;
font-weight: 400;
text-shadow: 1px .7px #000;
}





#art-box-nav li:hover {
color: red;
border: 2px solid rgb(250, 4, 225);
background: linear-gradient(to bottom,  rgb(125, 100, 1) 0%,rgb(224, 185, 11) 3%,rgba(237,217,139,1) 38%,rgba(237,217,139,1) 38%,rgba(244,239,217,1) 53%,rgba(226,211,122,1) 75%,rgb(168, 138, 4) 97%,rgba(234,229,194,1) 100%);
}

#art-box-nav li {
font-size: 1rem;
letter-spacing: .10rem;
text-align: center;
color: rgb(53, 53, 2);
padding: .25em;
border: 2px solid rgb(246, 156, 87);
border-radius: 1.25rem;
width: 15em;
text-decoration: none;
font-weight: 700;
margin:  0 1em;

/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#efdb88+0,d3bd5d+3,edd98b+38,edd98b+38,f4efd9+53,e2d37a+75,d3bd5d+97,eae5c2+100 */
background: linear-gradient(to bottom,  rgba(239,219,136,1) 0%,rgba(211,189,93,1) 3%,rgba(237,217,139,1) 38%,rgba(237,217,139,1) 38%,rgba(244,239,217,1) 53%,rgba(226,211,122,1) 75%,rgba(211,189,93,1) 97%,rgba(234,229,194,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

}




.fnt-wt {
    font-weight: 500;
    font-size: 90%;
    padding: 2% 4% 2% 2%;
    background-color: #fff;
    border: 1px solid #993;
    border-radius: 15px;
    text-align: center;
    margin-right: 2%;
    color: #303;
}



#container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: c;
    margin: 2%  auto 0 auto;
    width: 100%;
    max-width: 96%;
    height: auto;
    border: 1px solid #F63;
    padding: 10px;
    max-width: 1200px;
    /* margin-top: 2%;  */
    /*
    background-image: url(img/vert-1b.svg);
    background-repeat: repeat-x;   */
    margin-bottom: 20px;

    /*
    background: rgb(85,26,2);
background: linear-gradient(180deg, rgba(85,26,2,1) 0%, rgba(139,18,56,1) 2%, rgba(117,42,11,1) 6%, rgba(83,7,23,1) 16%, rgba(46,2,11,1) 42%, rgba(31,3,53,1) 70%, rgba(2,32,74,1) 100%);    */

/*
background: rgb(85,26,2);
background: linear-gradient(180deg, rgba(85,26,2,1) 0%, rgba(139,18,56,1) 2%, rgba(103,1,60,1) 4%, rgba(96,1,54,1) 7%, rgba(46,2,11,1) 24%, rgba(31,3,53,1) 70%, rgba(2,32,74,1) 100%); */



background: rgb(85,26,2);
background: linear-gradient(180deg, rgba(85,26,2,1) 0%, rgba(154,91,6,1) 3%, rgba(103,1,60,1) 11%, rgba(82,11,50,1) 15%, rgba(46,2,11,1) 25%, rgba(31,3,53,1) 51%, rgba(4,0,10,1) 66%, rgba(3,1,15,1) 80%, rgba(74,15,2,1) 100%); 



}

#blu-box {
    
     background-image: linear-gradient(-90deg, #CF77F3 0%, #009BFF 47%, #2AC9DB 100%);
     box-shadow: 3px 7px #CCC;
}

#blu-box {
    box-shadow: 3px 7px #E2E2E2;
}

.boxd {
            font:"Century Gothic", "Arial Narrow", Arial, Helvertica, sans-serif;
            font-weight: 400;
            font-size: 14px;
            letter-spacing: 2px;
            margin:0 auto;
            text-align: center;
        background-color:#06C;
        border: 1px solid #0CF;
        width: 100%;
        height: auto;
        max-width: 980px;
        overflow: hidden;
        }
        
        .center {
        margin: 0 auto;
        text-align: center;
        }
        
        #aq-one {
            margin-top: -40%;
            margin: 0 auto;
            z-index: 10;
            position: relative;
            width: 100%;
            height: auto;
            max-width: 500px;
            padding: 3% 3% 0 3%;
            
        }
        
        .aq-width {
            margin: 0 auto;
            width: 100%;
            height: auto;
            padding: 1% 3% 1% 3%;
            max-width: 600px;
        }

.italic-org {
 font-size: 14px;
 font-style: italic;
 color: #FC6;
 font-weight: 400;
 padding: 0 2% 0 2%;
}

.ctr {
    margin: 0 auto;
    text-align: center;
    display: block;
    float: none;
    clear: both;
}


#top-row img{
    margin: 0 auto;
    width: 100%;
    height: auto;
    max-width: 800px;
    /*background-image:url(img/frost-u.png);*/
    background-position:center;
    background-repeat: no-repeat;
    backround-size: 100%;
    margin-top: .75%;
    
}

#lime-svg {
    width: 100%;
    max-width: 70%;
    padding: 0 1.3em;
   /* margin: 0 auto;  */
  /*  display: flex;  */
  /*  justify-self: center;  */
}
    /*-----------========*/


    .wrapper {
        container-type: inline-size;
      }
      
      .columns {
        display: grid;
        gap: 2rem;
      }
      
      @media (min-width: calc(30ch * 3)) {
        .columns {
          grid-template-columns: repeat(3, 1fr);
        }
      }
      
      /* =========================
         GENERAL STYLES 
         NOT RELATED TO THE DEMO
      ============================ */
      
      *,
      *::before,
      *::after {
        box-sizing: border-box;
      }
      
      :root {  
        --clr-primary: #ee6352;
        --clr-secondary: #d16e8d;
        --clr-accent: #F7F7FF;
        --clr-gradient: linear-gradient(-90deg, var(--clr-primary), var(--clr-secondary));
        --ff-title: bungee, sans-serif;
        --ff-body: canada-type-gibson,sans-serif;
        --fw-body: 300;
        --fw-bold: 800;
        --fw-title: 400;
        --fw-number: 800;
      }
      
      body {
        min-height: 100vh;
        font-family: var(--ff-body);
        font-weight: var(--fw-body);
        font-size: 1.25rem;
      }
      
      a {
        color: inherit;
      }
      
      a:hover,
      a:focus {
        color: var(--clr-accent);
      }
      
      :focus {
        outline: 5px solid var(--clr-accent);
        outline-offset: 3px;
      }
      
      .wrapper {
        padding: 2rem;
      }
      
      
      .title,
      .credits {
        text-align: center;
        text-transform: uppercase;
        padding: 1em 0 2em;
        margin: 0;
        background: var(--clr-gradient);
        position: relative;
        z-index: 1000;
      }
      
      .title {
        font-size: calc(1rem + 3vw);
        font-family: var(--ff-title);
        font-weight: var(--fw-title);
        color: white;
        text-shadow: 3px 5px 10px rgba(0,0,0, .2);
        clip-path: polygon(0 0, 100% 0%, 100% 60%, 0% 100%);
      }
      
      .title span {
          font-weight: var(--fw-number);
          color: rgb(242, 245, 175);
          display: inline-block;
          position: absolute;
          left: 0;
          right: 0;
          font-size: 5em;
          top: -30%;
          z-index: -1;
          opacity: .25
        }
      
      .credits {
        font-family: var(--ff-title);
        width: 100%;
        margin: 0;
        padding: 6em 0 1em;
        clip-path: polygon(0 60%, 100% 0, 100% 100%, 0% 100%);
        color: rgba(rgb(217, 234, 172), .7);

      }
      
      .credits p:last-child {
        font-size: .8em;
      } 

/* ================*/


#top-row h1{
    text-align: center;
    font-family: "Century Gothic", "Arial Narrow", Arial, Helvertica, sans-serif;
    /* font-size: 2rem;  */
    font-size: clamp(1.2rem, 1.75rem + 1vw, 1.75rem) ;  

    font-weight: 400;
    letter-spacing: .15rem;
/*  color: #FC9;  */
color: rgb(43, 231, 252);
    text-shadow: .95px 1.2px #333; 
    padding: 0em 3% .25em 3%;
    margin-top: -.2em;
}


#row-2 {
    margin: 0 auto;
    width: 100%;
    height: auto;
    max-width: 800px;
    background-image:url(img/frost-e.png);
    backround-size: 100%;
    background-position:center;
    margin-top: 0;
    border-top: 1px solid #fff;
    
}




#row-2 h2{
    text-align: center;
    font-family: "Century Gothic", "Arial Narrow", Arial, Helvertica, sans-serif;
    font-size: 21px;
    font-weight: 400;
    letter-spacing: 2px;
    color: #636;
    padding: 3%;
    padding-bottom: 2%;
}


.red-box {
    margin:  0 auto;
    display: table; /* Make the container element behave like a table */
    width: 100%; /* Set full-width to expand the whole page */
    padding: 0 0 2% 0;
    max-width: 1220px;  
    margin-top: -5% 0 3% 0 ;
}

.red1 {
    display: table-cell; /* Make elements inside the container behave like table cells */
    width: 200px;
    text-align: left;
    margin: 0 auto;
    padding: 0 23px 0 0px;
    margin-top: 0px;    
    font-size: 16px;
}

.red-mid {
    display: table-cell; /* Make elements inside the container behave like table cells */
    width: 60%;
    max-width: 350px;
    margin: 0 auto; 
    margin-top: 0px;
    padding: 0% 0% 0% 2%;   
}

.red3 {
    display: table-cell; /* Make elements inside the container behave like table cells */
    width: 20%; 
    text-align: left;
    margin: 0 auto;
    padding: 0 0% 0 6%;
    margin-top: 0px;
    font-size: 16px;    
}



.col-container {
    margin:  0 auto;
    display: table; /* Make the container element behave like a table */
    width: 100%; /* Set full-width to expand the whole page */
    padding: 0;
    max-width: 980px;
    border: 1px solid #996;
    
}

#gen-info {
    margin: 0 auto;
    display: table; /* Make the container element behave like a table */
    width: 100%;
    height: auto;
    padding: 2%;
    border: 2px solid #639;
    max-width: 980px;
    margin-top: 2%;
    margin-bottom: 5%;
    padding-bottom: 2%;
}

.col1 {
    display: table-cell; /* Make elements inside the container behave like table cells */
    width: 47%;
    text-align: left;
    margin: 0 auto;
    padding: 0 0px 0 0px;
    margin-top: 0px;
    
}

#info-1 {   
    display: table-cell; /* Make elements inside the container behave like table cells */   
    margin: 0 auto;
    height: auto;
    text-align: left;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 16px;
    letter-spacing: 1px;
    color: #333;
    background-image: url(travel-designs/bkSliv-gld-gry-1.svg);
    background-size: 100%;
    background-repeat: repeat-y;
    padding: 5px 5px 10px 15px;
    border: 1px solid #000;
    
}

.col-mid {
    display: table-cell; /* Make elements inside the container behave like table cells */
    width: 2%;
    max-width: 20px;
    margin: 0 auto; 
    margin-top: 0px;
    padding: 0% 0% 0% 2%;   

}

.col2 {
    display: table-cell; /* Make elements inside the container behave like table cells */
    width: 47%; 
    text-align: left;
    margin: 0 auto;
    padding: 0 0% 0 6%;
    margin-top: 0px;
    font-size: 16px;    
}

#info-2 {
    display: table-cell; /* Make elements inside the container behave like table cells */   
    margin: 0 auto; 
    text-align: left;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 16px;
    letter-spacing: 1px;
    color: #333;
    padding: 5px 5px 10px 15px;
    border: 1px solid #000; 
    height: auto;
        background-image: url(travel-designs/bkSliv-gld-gry-1.svg);
        background-size: 100%;
    background-repeat: repeat-y;
}


#aq-eml {
    margin: 0 auto;
    width: 100%;
    height: auto;
    max-width: 140px;
    float: none;
    clear: both;
    display: block;
    padding: 0% 3% 1% 3%;
}

/*

}   */



                                #Tumbaco-Bed-and-Breakfast {
                                    border: solid 1px #fea914;
}

.green-txt {
    color: rgb(106, 231, 106);
    font-size: 1.5rem;
    letter-spacing: .1rem;
    text-align: center;
}

footer {    
    margin: 0 auto;
    width:100%;
    height: auto;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
    letter-spacing: 1px;
    text-align: center;
        /*background-image: url(travel-designs/bkSliv-gld-gry-1ctr.svg);*/
    background-image: url(travel-designs/bkSliv-gld-gry-1.svg);
    background-size: 100%;
    background-repeat: repeat-y;
    color: rgb(182, 206, 179);
    border: 1px solid #300;
    border-radius: 15px;
    padding: 10px;
    
    /*max-width: 475px;  */
    max-width: 95%;
    
}

.fnt-ctr {
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;

   font-size: clamp(1.5rem, 2.5vw, 4rem); 

   /* font-size: 95%; */
    padding-top: 2%;
    color: #303;
}


#info-2b {
    margin: 0 auto;
    width: 130px;
    height: auto;
    padding-bottom: 10px;
    background: none;
    border: none;
}

.two {
    margin: 0 auto;
    width: 100%;
    height: auto;
    max-width: 200px;
    padding: 10px;
    display: block;
    
}

.six {
    margin: 0 auto;
    width: 100%;
    height: auto;
    max-width: 600px;
    padding: 10px;
    display: block;
    
}


.column-btns {
    float: left;
    width: 33.3%;
    padding: 10px;
    height: 100%;
    
    
}
/* Clear Float after*/
.row:after {
    content: "";
    display: table;
    clear: both;
    max-width: 600px;
}


.tbl-width{
    margin: 0 auto;
    width: 100%;
    height: auto;
    border: solid 2px #639;
    max-width:600px;
}

.tbl-rw {
        margin: 0 auto;
    width: 100%;
    height: auto;
    padding: 0px;
/*    border: solid 1px #F0C;  */ 
max-width:600px;
}


footer {
    color:#999;

}

*:focus {
    outline: none;
}
.contact {
    border: none;
    border:0px;
    outline: none;
   
}

.contact:hover{ 

  background-size: 205px;
  background-color: rgb(55, 31, 239);
} 

.bck-drk {

   /* background-color: #300;  */

    background: rgba(91, 14, 42, 0.9) ;
    padding: 0 .25em; 
    border-bottom: 3.5px solid #aa792f;
    border-top: 3.5px solid #25010f;
    margin-top: .24em;
    line-height: 1.9em;
    

}


                                            /*------*/


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


    #container {
        margin: 0 auto;
      width: 96%;  
  /*  width: 100%;   */
    
        height: auto;
        border: 1px solid #F63;
        padding: 10px;
        max-width: 980px;
        margin-top: 2%;
        background-image: url(img/vert-1b.svg);
        background-repeat: repeat-x;
        margin-bottom: 20px;
    }

    #art-box-nav ul {
        display: flex;
                            flex-direction:column;
                            gap: 1.5em;
       justify-content: space-between;  
                            align-items: center;  
        border: 1.25px solid rgb(46, 3, 57);
        padding: 1.55em ;
        margin-top: .75em;
      /*  max-width: 80%;  */
        list-style: none;
    }
    
    .social-media {
        display: flex;
        flex-direction: column;
       /* grid-template-rows: 1fr ;   */
        width:100%;
        max-width: 275px;
      /*  width: 50%; */
     /*  align-self: center; */
        padding: 1.5em;
     /*   justify-content: space-between;   */
        margin: .5em;
        border: 2px solid #639;
        border-radius: 15px;

        justify-self: center;
/*
        width: 100%;
        height: auto;  */
    }
    
    .social-media img{
     /*   width: 100%; */
       /* height: auto;  */
     /*   max-width: 200px; */
     /*   height: auto;  */
        padding: 1.75em;
      /*  margin: 0 auto;  */
    }
    
    .social-media img:hover{ 
        padding:  .35em;         
    } 
    


#logo-box {
display: grid;
grid-template-columns: 1fr ;    
}
.text-box-a, .text-box-b {
    display: none;

                    /*    border: 4px dashed #2AC9DB;  */
}

    .logo-column-1 {
    display: grid;
    grid-template-rows: ;
    align-content: center;
   /*  margin: 0 auto;  */
justify-self: center;

                                      /*  border: 3px dashed #E2E2E2;  */

        #under-constr {
            font-size: 95%;
            letter-spacing: .5em;
        }
}  
}



@media screen and (max-width: 700px) {
#art-box-nav ul {
    display: flex;
                        flex-direction:column;
                        gap: 1.5em;
   justify-content: space-between;  
                        align-items: center;
    border: 1.25px solid rgb(46, 3, 57);
    padding: 1.55em ;
    margin-top: .75em;
  /*  max-width: 80%;  */
    list-style: none;
}
}




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

    .column-btns {
    margin: 0 auto;
    float: none;
    width: 37.3%;
    padding: 10px;
    height: 100%;
    max-width: 250px;
        
    min-width: 185px;
}

    .tbl-width{
    margin: 0 auto;
    width: 100%;
    height: auto;
    border: solid 2px #639;
   
    background-image: url(travel-designs/bkSliv-gld-gry-1.svg);
    background-size: 100%;
    background-repeat: repeat-y;
}

.tbl-rw {
    margin: 0 auto;
    width: 100%;
    height: auto;
    padding: 5px;
   /* border: solid 1px #F0C;  */
    max-width: 85%;
    background-image: url(travel-designs/bkSliv-gld-gry-3.svg);
    background-size: 100%;
    background-repeat: repeat-y;
}

}



@media screen and (max-width: 575px) {
.col1 {
    display: table-cell; /* Make elements inside the container behave like table cells */
    width: 45%;
    text-align: left;
    margin: 0 auto;
    padding: 0 0px 0 0px;
    margin-top: 0px;
    
}

#info-1 {   
    display: table-cell; /* Make elements inside the container behave like table cells */   
    margin: 0 auto;
    height: auto;
    text-align: left;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 16px;
    letter-spacing: 1px;
    color: #333;
    background-image: url(travel-designs/bkSliv-gld-gry-1.svg);
    background-size: 100%;
    background-repeat: repeat-y;
    padding: 5px 5px 10px 15px;
    border: 1px solid #000;
    
}

.col-mid {
    display: table-cell; /* Make elements inside the container behave like table cells */
    width: 2%;
    max-width: 20px;
    margin: 0 auto; 
    margin-top: 0px;
    padding: 0% 0% 0% 2%;   

}

.col2 {
    display: table-cell; /* Make elements inside the container behave like table cells */
    width: 41%; 
    text-align: left;
    margin: 0 auto;
    padding: 0 0% 0 6%;
    margin-top: 0px;
    font-size: 16px;    
}

#info-2 {
    display: table-cell; /* Make elements inside the container behave like table cells */   
    margin: 0 auto; 
    text-align: left;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 16px;
    letter-spacing: 1px;
    color: #333;
    padding: 5px 5px 10px 15px;
    border: 1px solid #000; 
    height: auto;
        background-image: url(travel-designs/bkSliv-gld-gry-1.svg);
        background-size: 100%;
    background-repeat: repeat-y;
}

.col-container {
    display: block;
    margin:  0 auto;
    /*display: table; /* Make the container element behave like a table */
    width: 100%; /* Set full-width to expand the whole page */
    padding: 0;
    max-width: 980px;
    border: 1px solid #996;
}

#gen-info {
    display: block;
    margin: 0 auto;
    /*display: table; /* Make the container element behave like a table */
    width: 100%;
    height: auto;
    padding: 2%;
    border: 2px solid #639;
    max-width: 980px;
    margin-top: 2%;
    margin-bottom: 5%;
    padding-bottom: 2%;
}



}







@media screen and (max-width: 550px) {
    .column-btns {
    margin: 0 auto;
    float: none;
    width: 69.3%;
    padding: 5px;
    height: 100%;
    display: block;
    max-width: 200px;
    
    min-width: 185px;
}

    .tbl-width{
    margin: 0 auto;
    width: 100%;
    height: auto;
   /* border: solid 2px #639;  */
    max-width:87%;
}


.tbl-rw {
    margin: 0 auto;
    width: 100%;
    height: auto;
    padding: 10px;
   /* border: solid 1px #F0C;  */
    max-width:95%;
    background-image: url(travel-designs/bkSliv-gld-gry-3.svg);
    background-size: 100%;
    background-repeat: repeat-y;
}

    #container {
    margin: 0 auto;
    width: 94%;
    height: auto;
    border: 1px solid #F63;
    padding: 10px;
    max-width: 980px;
    margin-top: 2%;
    background-image: url(img/vert-1b.svg);
    background-repeat: repeat-x;
    margin-bottom: 20px;

}

    #top-row {
    margin: 0 auto;
    width: 100%;
    height: auto;
    max-width: 800px;
   /* background-image:url(img/frost-u.png);  */
    background-position:center;
    background-repeat: no-repeat;
    backround-size: 100%;
    margin-top: .5%;
    margin-bottom: -2%;
}

#top-row h1{
    text-align: center;
    font-family: "Century Gothic", "Arial Narrow", Arial, Helvertica, sans-serif;
    font-size: 21px;
    font-weight: 400;
    letter-spacing: 4px;
    color: #FC9;
    text-shadow: .5px 1px #333;
    padding: 0 3% 5% 3%;
}


.col-container {
    display: block;
    margin:  0 auto;
    /*display: table; /* Make the container element behave like a table */
    width: 100%; /* Set full-width to expand the whole page */
    padding: 0;
    max-width: 980px;
    border: 1px solid #996;
}

#gen-info {
    display: block;
    margin: 0 auto;
    /*display: table; /* Make the container element behave like a table */
    width: 100%;
    height: auto;
    padding: 2%;
    border: 2px solid #639;
    max-width: 980px;
    margin-top: 2%;
    margin-bottom: 5%;
    padding-bottom: 2%;
}


.col1 {

    display: block;

    /*display: table-cell; /* Make elements inside the container behave like table cells */
    width: 100%;
    text-align: left;
    margin: 0 auto;
    padding: 0 23px 0 0px;
    margin-top: 0px;

    background-color: #FFFFE8;
    font-size: 16px;
}

#info-1 {

    display:block;

    /*display: table-cell; /* Make elements inside the container behave like table cells */
    margin: 0 auto;
    height: auto;
    text-align: left;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 16px;
    letter-spacing: 1px;
    color: #333;

    padding: 5px 5px 10px 15px;
    border: 1px solid #000;
    background-color: #FFFFE8;
}

.col-mid {
    display: block;
    /*display: table-cell; /* Make elements inside the container behave like table cells */
    width: 2%;
    max-width: 20px;
    margin: 0 auto;
    margin-top: 10px;
    padding: 0% 0% 0% 2%;

}

.col2 {
    display: block;
    /*display: table-cell; /* Make elements inside the container behave like table cells */
    width: 100%;
    text-align: left;
    margin: 0 auto;
    padding: 0 0% 0 6%;
    margin-top: 0px;
    font-size: 16px;
    margin-bottom: 5px;
}

#info-2 {

    display: table-cell; /* Make elements inside the container behave like table cells */
    margin: 0 auto;
    height: auto;
    text-align: left;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 16px;
    letter-spacing: 1px;
    color: #333;


    padding: 5px 5px 10px 15px;
    border: 1px solid #000;

    background-color: #FFFFE8;

}

.fnt-ctr {
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 95%;
    padding-top: 2%;
    color: #303;
}

#tel-eml {
    font-size: 10px;
    margin-bottom: 30px;

}

}

@media screen and (max-width: 530px) {
.grided {
    display: grid;
    grid-template-rows: 1fr;
}

/*
#Tumbaco-Bed-and-Breakfast {
                                            
                        display: grid;
                        grid-template-rows: 1fr;
                        margin: .8em 0 .5em 0;
}  */

 #Tumbaco-Bed-and-Breakfast {
     display: flex;
     flex-direction: column;
   
 }

 #Tumbaco-Bed-and-Breakfast p{
       font-size: 1.2rem;
       letter-spacing: .15rem;
       line-height: 1.6rem;
 }
 

/*
.round-box {
 font-size: 1.4rem;   
}    */

.flexed {
    flex-direction: row;
}

footer {
    font-size: 8px;
    line-height: 1.9em;
    padding: 1em;
}

}



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


    #art-box-nav {
        width: 270px;
       /* max-width: 700px; */
        margin:0 auto;
        display: block;
    }


/*
    #top-row {
    margin: 0 auto;
    width: 100%;
    height: auto;
    max-width: 800px;
   
    background-position:center;
    background-repeat: no-repeat;
    background-size: 100%;
    margin-top: .5%;
   */
}



footer {
    margin: 0 auto;
    width:100%;
    height: auto;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
    letter-spacing: 1px;
    text-align: center;
    background-image: url(travel-designs/bkSliv-gld-gry-1.svg);
    background-size: 100%;
    background-repeat: repeat-y;
    color: rgb(174, 180, 111);
   /*border: 1px solid #300;  */
    border-radius: 15px;
    padding: 10px 5px 10px 5px;

    max-width: 475px;

}

}

/*
@media screen and (max-width: 380px) {

    #top-row h1{
        font-size: 90%;
        font-weight: 500;
        letter-spacing: 1px;
    }

    #row-2 h2{
        font-size: 90%;
        font-weight: 500;
        letter-spacing: 1px;
    }


}
*/