@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;700&display=swap');
.celeste { background-color: #55c5d0; }
.celeste-txt { color: #55c5d0; }
.verdewapp { background: #25d366; }

* { font-weight: 100; font-family: "Roboto", sans-serif; font-size: 16px; }

.logo {
    display: none;
    position:fixed;
    top: 0; left: 50%;
    transform: translateX(-50%);
    background-color: white;
    height: 220px; width: 220px;
    z-index: 1000;
    text-align: center;
}
.logo img { max-width: 180px; margin-top: 20px; }

section {
    min-height: 100vh; 
    margin: 0;
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

/*  NAV  */
nav {  border-top: 5px solid #357B81; background-color: #ffffff;  }
nav ul a { color: #000; transition: 2s; }
nav .brand-logo img { margin: 5px 0 0 20px; max-width: 48px; }

/*  INICIO  */
.ppal {
    margin: 0; padding: 0;
    background-color: #357B81;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 1000'%3E%3Cg %3E%3Ccircle fill='%23357B81' cx='50' cy='0' r='50'/%3E%3Cg fill='%23377f85' %3E%3Ccircle cx='0' cy='50' r='50'/%3E%3Ccircle cx='100' cy='50' r='50'/%3E%3C/g%3E%3Ccircle fill='%23388289' cx='50' cy='100' r='50'/%3E%3Cg fill='%233a868c' %3E%3Ccircle cx='0' cy='150' r='50'/%3E%3Ccircle cx='100' cy='150' r='50'/%3E%3C/g%3E%3Ccircle fill='%233b8990' cx='50' cy='200' r='50'/%3E%3Cg fill='%233d8d94' %3E%3Ccircle cx='0' cy='250' r='50'/%3E%3Ccircle cx='100' cy='250' r='50'/%3E%3C/g%3E%3Ccircle fill='%233e9198' cx='50' cy='300' r='50'/%3E%3Cg fill='%2340949c' %3E%3Ccircle cx='0' cy='350' r='50'/%3E%3Ccircle cx='100' cy='350' r='50'/%3E%3C/g%3E%3Ccircle fill='%234298a0' cx='50' cy='400' r='50'/%3E%3Cg fill='%23439ca4' %3E%3Ccircle cx='0' cy='450' r='50'/%3E%3Ccircle cx='100' cy='450' r='50'/%3E%3C/g%3E%3Ccircle fill='%23459fa8' cx='50' cy='500' r='50'/%3E%3Cg fill='%2346a3ab' %3E%3Ccircle cx='0' cy='550' r='50'/%3E%3Ccircle cx='100' cy='550' r='50'/%3E%3C/g%3E%3Ccircle fill='%2348a7af' cx='50' cy='600' r='50'/%3E%3Cg fill='%234aaab3' %3E%3Ccircle cx='0' cy='650' r='50'/%3E%3Ccircle cx='100' cy='650' r='50'/%3E%3C/g%3E%3Ccircle fill='%234baeb8' cx='50' cy='700' r='50'/%3E%3Cg fill='%234db2bc' %3E%3Ccircle cx='0' cy='750' r='50'/%3E%3Ccircle cx='100' cy='750' r='50'/%3E%3C/g%3E%3Ccircle fill='%234eb6c0' cx='50' cy='800' r='50'/%3E%3Cg fill='%2350bac4' %3E%3Ccircle cx='0' cy='850' r='50'/%3E%3Ccircle cx='100' cy='850' r='50'/%3E%3C/g%3E%3Ccircle fill='%2352bdc8' cx='50' cy='900' r='50'/%3E%3Cg fill='%2353c1cc' %3E%3Ccircle cx='0' cy='950' r='50'/%3E%3Ccircle cx='100' cy='950' r='50'/%3E%3C/g%3E%3Ccircle fill='%2355C5D0' cx='50' cy='1000' r='50'/%3E%3C/g%3E%3C/svg%3E");
    background-attachment: fixed;
    background-size: contain;
    text-align: center;
}
.ppal h1,.ppal h2, .ppal h3, .ppal p { color: white; line-height: 111%; margin:1%; padding: 0; }
.ppal h1 { font-size: 3.53rem; }
.ppal h2 { font-size: 2.81rem; }
.ppal h3 { font-size: 1.91rem; }
.ppal a { font-weight: bold;}

/*  EMPRESA  */
.text { font-size: 1.2rem; margin-bottom: .8rem; }
.separador { border-bottom: 2px solid #55c5d0; padding: 0 0 2rem 0;}

/*  GALERIA  */
.carousel .carousel-item { width: 400px;}

.btn, .btn-large, .btn-small, .btn-flat {
    text-transform:capitalize; font-weight: bold;
}

#galeria .card-content h5,
#galeria .card-content p  { font-weight: bold; }

.pict { overflow: hidden;}
.pict img { max-width: 100%; }

/*  FORM  */
button { width: 90%; font-weight: 400; }
/* label color */
.input-field label { color: #000;}
/* label focus color */
.input-field input[type=text]:focus+label {color: #55c5d0;}
/* label underline focus color */
.input-field input[type=text]:focus {
    border-bottom: 1px solid #55c5d0;
    box-shadow: 0 1px 0 0 #55c5d0;
}
/* valid color */
.input-field input[type=text].valid {
    border-bottom: 1px solid #000;
    box-shadow: 0 1px 0 0 #000;
}
/* invalid color */
.input-field input[type=text].invalid {
    border-bottom: 1px solid rgb(255, 0, 0);
    box-shadow: 0 1px 0 0 rgb(255, 1, 1);
}
/* icon prefix focus color */
.input-field .prefix.active {
    color: #55c5d0;
}

.instalink, .instaqr { margin: 0; padding: 0; }
.instalink a { color: #405de6; font-weight: bold; font-size: 1.2rem;}
.instaqr img { max-width: 200px; }

.desaparecer { display: none; }

/* FOOTER */

.page-footer { background-color: #55c5d0; }

.wapp { position: fixed; bottom: 20px; right: 20px; }
.btnwapp span { font-size: 32px; line-height: 52px;}

@media only screen and (min-width: 900px){
    #logoppal { max-width: 260px; margin: 50px 0 40px 0; }
}
@media only screen and (max-width: 900px){

    nav .brand-logo img { margin: 0; }
    #inicio p { margin-top: 1.5rem;}
    #inicio p a { font-size: 1rem; margin: .2rem; }
    #logoppal { max-width: 180px; margin: 0 0 40px 0; }
    .ppal h1 { font-size: 1.91rem; }
    .ppal h2 { font-size: 1.6rem; }
    .ppal h3 { font-size: 1.6rem; }
    .pict { max-width: 100%; overflow: hidden; }

    .carousel .carousel-item { width: 80%;}
}

/*  ICOMOON  */
@font-face {
    font-family: 'arb';
    src:  url('fonts/arb.eot?65ql0c');
    src:  url('fonts/arb.eot?65ql0c#iefix') format('embedded-opentype'),
      url('fonts/arb.ttf?65ql0c') format('truetype'),
      url('fonts/arb.woff?65ql0c') format('woff'),
      url('fonts/arb.svg?65ql0c#arb') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
  }
  
  [class^="icon-"], [class*=" icon-"] {
    font-family: 'arb' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  .icon-images:before {content: "\e90e";}
  .icon-location2:before {content: "\e948";}
  .icon-instagram:before {content: "\ea92";}
  .icon-whatsapp:before {content: "\ea93";}