/* Artfully masterminded by ZURB  */

/* -------------------------------------------------- 
   Table of Contents
-----------------------------------------------------
:: Shared Styles
::   #logo #logoimage #slider .button.bon
:: Page Name 1
:: Page Name 2
*/


/* -----------------------------------------
   Shared Styles
----------------------------------------- */

fieldset.contact, input.contact, textarea.contact {
    border-radius: 10px;
}

textarea.contact {
    min-height: 100px;
}


#logo { 
        margin-top: 30px;
        border-radius: 10px; 
        width: 75%;
}

#logo.button {
        background-color: rgb(211, 211, 211);
}

#slider { 
        margin-top: 20px; 
}

/* adapt top-bar items in small device */
.top-bar-section ul li > a {
  padding: 15px;
}

.top-bar.radius {
        border-radius: 10px;
}

.top-bar-section ul.radius, .top-bar-section ul.radius > *:last-child > a, .top-bar-section ul.radius > *:last-child > button {
    -webkit-border-radius: 0;
    border-radius: 0;
    -moz-border-radius-topright: 10px;
    -moz-border-radius-bottomright: 10px;
    -webkit-border-top-right-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px; 
}

table.radius {
        border-radius: 15px;
        border-bottom-left-radius: 15px;
        border-bottom-right-radius: 15px;
}

.button.bon.blue:hover {
    background-color: rgb(168, 214, 254);
    box-shadow: 0px 0.3em 0.3em rgba(255, 254, 255, 0.6) inset, 0px -0.1em 0.3em rgba(0, 0, 0, 0.15) inset, 0px 0.1em 3px rgb(82, 144, 197), 0px 0.2em 1px rgb(50, 105, 153), 0px 0.5em 5px rgba(0, 0, 0, 0.2);
}

.button.bon.blue {
    color: rgb(50, 53, 154) !important;
    background-color: rgb(77, 139, 255);
    box-shadow: 0px 0.3em 0.3em rgba(255, 254, 255, 0.6) inset, 0px -0.1em 0.3em rgba(0, 0, 0, 0.15) inset, 0px 0.1em 3px rgb(82, 144, 197), 0px 0.1em 1px rgb(50, 105, 153), 0px 0.5em 5px rgba(0, 0, 0, 0.2);
}

.button.bon.orange:hover {
    background-color: rgb(255, 214, 138);
    box-shadow: 0px 0.3em 0.3em rgba(255, 254, 255, 0.6) inset, 0px -0.1em 0.3em rgba(0, 0, 0, 0.15) inset, 0px 0.1em 3px rgb(204, 132, 0), 0px 0.2em 1px rgb(153, 99, 0), 0px 0.5em 5px rgba(0, 0, 0, 0.2);
}

.button.bon.orange {
    color: rgb(128, 83, 0) !important;
    background-color: rgb(255, 165, 0);
    box-shadow: 0px 0.3em 0.3em rgba(255, 254, 255, 0.6) inset, 0px -0.1em 0.3em rgba(0, 0, 0, 0.15) inset, 0px 0.1em 3px rgb(204, 132, 0), 0px 0.1em 1px rgb(153, 99, 0), 0px 0.5em 5px rgba(0, 0, 0, 0.2);
}

.button.bon.green:hover {
    background-color: rgb(194, 235, 146);
    box-shadow: 0px 0.3em 0.3em rgba(255, 254, 255, 0.6) inset, 0px -0.1em 0.3em rgba(0, 0, 0, 0.15) inset, 0px 0.1em 3px rgb(106, 173, 30), 0px 0.2em 1px rgb(80, 130, 22), 0px 0.5em 5px rgba(0, 0, 0, 0.2);
}

.button.bon.green {
    color: rgb(26, 131, 22) !important;
    background-color: rgb(130, 221, 44);
    box-shadow: 0px 0.3em 0.3em rgba(255, 254, 255, 0.6) inset, 0px -0.1em 0.3em rgba(0, 0, 0, 0.15) inset, 0px 0.1em 3px rgb(106, 173, 30), 0px 0.1em 1px rgb(80, 130, 22), 0px 0.5em 5px rgba(0, 0, 0, 0.2);
}

.button.bon.red:hover {
    background-color: rgb(254, 168, 128);
    box-shadow: 0px 0.3em 0.3em rgba(255, 254, 255, 0.6) inset, 0px -0.1em 0.3em rgba(0, 0, 0, 0.15) inset, 0px 0.1em 3px rgb(216, 38, 97), 0px 0.2em 1px rgb(183, 20, 74), 0px 0.5em 5px rgba(0, 0, 0, 0.2);
}

.button.bon.red {
    color: rgb(153, 0, 51) !important;
    background-color: rgb(255, 76, 76);
    box-shadow: 0px 0.3em 0.3em rgba(255, 254, 255, 0.6) inset, 0px -0.1em 0.3em rgba(0, 0, 0, 0.15) inset, 0px 0.1em 3px rgb(216, 38, 97), 0px 0.1em 1px rgb(255, 26, 26), 0px 0.5em 5px rgba(0, 0, 0, 0.2);
}

.button.bon.black:hover, .button.bon.black:active a {
    background-color: rgb(98, 98, 98) !important;
    box-shadow: 0px 0.3em 0.3em rgba(255, 254, 255, 0.6) inset, 0px -0.1em 0.3em rgba(0, 0, 0, 0.15) inset, 0px 0.1em 3px rgb(52, 52, 52), 0px 0.2em 1px rgb(20, 20, 20), 0px 0.5em 5px rgba(0, 0, 0, 0.2);
}

.button.bon.black {
    color: rgb(255, 255, 255) !important;
    background-color: rgb(0, 0, 0);
    box-shadow: 0px 0.3em 0.3em rgba(255, 254, 255, 0.6) inset, 0px -0.1em 0.3em rgba(0, 0, 0, 0.15) inset, 0px 0.1em 3px rgb(52, 52, 52), 0px 0.1em 1px rgb(26, 26, 26), 0px 0.5em 5px rgba(0, 0, 0, 0.2);
}

.button.bon:hover {
    background-color: rgb(211, 211, 211);
    color: rgb(102, 102, 102);
    box-shadow: 0px 0.3em 0.3em rgba(255, 254, 255, 0.6) inset, 0px -0.1em 0.3em rgba(0, 0, 0, 0.15) inset, 0px 0.1em 3px rgb(153, 153, 153), 0px 0.2em 1px rgb(114, 114, 114), 0px 0.5em 5px rgba(0, 0, 0, 0.2);
}

.button.bon.glass {
    text-shadow: 0px -1px 0px rgba(255, 255, 255, 0.5), 0px 0.18em 0.15em rgba(0, 0, 0, 0.18);
}

.button.bon:focus {
    outline: medium none;
    color: rgb(102, 102, 102);
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
}

.button.bon:active {
    color: rgb(102, 102, 102);
    box-shadow: 0px 0.3em 0.3em rgba(255, 255, 255, 0.6) inset, 0px -0.1em 0.3em rgba(0, 0, 0, 0.2) inset, 0px 0.1em 1px rgba(0, 0, 0, 0.4), 0px 0.2em 6px rgba(0, 0, 0, 0.2);
    transform: translateY(0.2em);
}


.button.bon { border-top: 1px solid rgba(255, 255, 255, 0.8);
    border-left: 1px solid rgba(255, 255, 255, 0.8);
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    background-image: radial-gradient(ellipse farthest-corner at center top , rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
    transition: background 0.2s ease-in-out 0s;
    color: rgb(102, 102, 102);
    background-color: rgb(191, 191, 191);
    box-shadow: 0px 0.3em 0.3em rgba(255, 254, 255, 0.6) inset, 0px -0.1em 0.3em rgba(0, 0, 0, 0.15) inset, 0px 0.1em 3px rgb(153, 153, 153), 0px 0.1em 1px rgb(114, 114, 114), 0px 0.5em 5px rgba(0, 0, 0, 0.2);  }


/* -----------------------------------------
   Page Name 1
----------------------------------------- */




/* -----------------------------------------
   Page Name 2
----------------------------------------- */