* {
    font-family: 'Source Sans Pro', sans-serif;
    margin: 0;
    border: 0;
}

/* ------------------------------------------------------------------------- START OF WEB STYLE ------------ */
body {
    background-color:#F7F7F7;
    font-size: .9em;
}

strong {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 600;
    font-style: normal;
}

a {
    color: #5f7985;
}

.no-wrap {
    white-space: nowrap;
}

/* ---------------------------------------------------   COLORS  --------------------------- */

.colors {
    width:100%;
    height:5px;
    z-index:10;
    position:fixed;
}

#col1, #col2, #col3, #col4, #col5, #col6, #col7, #col8, #col9, #col10 {
    float:left;
    width:10%;
    height:5px;
}

#col1{
    background: #25f0b9;
}

#col2{
    background: #28e9e2;
}

#col3{
    background: #25aef4;
}

#col4{
    background: #2f72f9;
}

#col5{
    background: #273af3;
}

#col6{
    background: #7d2bf9;
}

#col7{
    background: #c32dfa;
}

#col8{
    background: #fc29d2;
}

#col9{
    background: #f91973;
}

#col10{
    background: #f91919
}

/* --------------------------------------------------------------- HEADER --------*/

.total-header {
    padding: 3em 0;
    width: 100%;
    background:#2C2201;
    box-shadow: 0 0 15px rgba(0, 0, 0, .2);
    -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, .2);
    -moz-box-shadow: 0 0 15px rgba(0, 0, 0, .2);
}

.header-wrapper {
    width: 90%;
    margin: 0 auto;
    text-align: center;
}

.say-hi {
    color:#52ADD7;
    font-weight:900;
    font-size:3em;
    display: block;
}

.photo {
    width: 12.5em;
    height: 12.5em;
    margin: 2em auto;
    background-image: url('../img/pics/paloma.jpg');
    background-size: cover;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-top-radius: 50%;
    box-shadow: 0 0 15px rgba(0, 0, 0, .4);
    -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, .4);
    -moz-box-shadow: 0 0 15px rgba(0, 0, 0, .4);
    display: inline-block;
}

.header-text {
    font-size: 1.1em;
    text-align:center;
    color:#7593a1;
    width: 90%;
    display: inline-block;
}

.header-text h1 {
    font-size: 1.25em;
    line-height: 1.4em;
    font-weight:400;
}

.header-contact {
    margin: 1em 0 0;
}

.header-contact p {
    font-size: 1em;
}

.fa {
    padding-right: .5em;
}

.hide {
    display:none;
}

/* ------------------------------------------------------- END OF HEADER --------- */

/* -------------------------------------------------------    SERVICES   ---------------*/

.body-wrapper {
    margin: 0 auto;
    width:100%;
    box-shadow: 0 0 15px rgba(0, 0, 0, .4);
    -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, .4);
    -moz-box-shadow: 0 0 15px rgba(0, 0, 0, .4);
}

.services-container {
    padding: 3em 0;
}

.container {
    width:100%;
}

.bio {
    padding: 3em 0;
    background-color: #5f7985;
}

.row {
    margin:0 auto;
    width: 90%;
}

.column {
    width:100%;
    padding: 0;
    float:left;
    text-align: center;
}

.icon-box {
    margin: 3em auto 1em;
    width: 6em;
    height: 6em;
    background: #fefefe;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-top-radius: 50%;
    clear: both
}

.border {
    border: 2px solid rgba(228, 228, 228, 1);
}

.adults {
    background-image: url('../img/pics/pareja.svg');
    background-size: cover;
}

.children {
    background-image: url('../img/pics/pelota.svg');
    background-size: cover;
}

.company {
    background-image: url('../img/pics/maleta.svg');
    background-size: cover;
}

.column-text-wrapper {
    width: 90%;
    display: inline-block;
}

.column p, .one-column p {
    margin: 1em 0 0;
    font-size:1.15em;
    line-height:1.4em;
    font-weight:400;
    text-align: justify;
    color: #6e7076;
}

.column h2 {
    text-align: center;
    margin: 1em 0 0;
    color:#73909d;
}

.one-column h2  {
    text-align: center;
    color: #73909d;
    font-size: 2em;
    padding-bottom: 0.5em;
}

/*----------------------------------------------------  BIO  --------------------*/

.bio h2, .bio p, .open-more-info {
    color:#fff;
}

.one-column {
    padding: 0;
}

.open-more-info {
    display: inline-block;
    cursor: pointer;
    border-bottom: 1px dotted #5f7985;
}

.open-more-info:hover{
    color: #FFF;
    border-bottom: 1px dotted #F7F7F7;
}

.open-more-info:active{
    border-bottom: 1px dotted #2C2201;
}

.more-info {
    padding: 1em;
    display:none;
}

/*--------------------------------------------------------- CONTACT ----------------*/

.contact-form {
    background: #666;
}

.contact-form-wrapper {
    width: 90%;
    margin: 0 auto;
    padding:3em 0;
}

.contact-form-wrapper h2{
    color:#F7F7F7;
    text-align: center;
    font-size: 2em;
    padding-bottom: 0.5em;
}

form, .result {
    max-width: 90%;
    margin:0 auto;
    padding:2em;
}

.result {
    font-size: 1.75em;
    color: white;
    line-height: 1em;
    text-align: center;
    background-color: #EB9A87;
    box-sizing: border-box;
    display: none;
}

.contact-input {
    font-size: 1.25em;
    color: white;
    line-height: 1em;
    background-color: transparent;
    border: 2px solid #5f7985;
    transition: all 0.3s;
    padding: 1em;
    margin-bottom: 1.5em;
    width: 100%;
    box-sizing: border-box;
    outline: 0;
}

.contact-input::placeholder {
    color: #999;
}

.contact-input:focus {
    border:2px solid #349FEC;
}

textarea {
    height: 10em;
    line-height: 1.2em;
    resize:vertical;
}

[type="submit"] {

    width: 100%;
    background:#5f7985;
    border-radius:0;
    border:0;
    cursor:pointer;
    color:#F7F7F7;
    font-size:2em;
    padding-top:.5em;
    padding-bottom:.4em;
    transition: all 0.3s;
    margin-top:0;
    font-weight:700;
}

[type="submit"]:hover {
    background:#349FEC;
}

/* ----------------------------------------------------------- FOOTER ------------*/

footer {
    background: #525252;
}

.footer-wrapper {
    width: 90%;
    padding: 1em 0 1em;
    margin: 0 auto;
    text-align: center;
    color: #E7E7E7;
    font-size: .9em;
    line-height: 1.2em;
}

/*----------------------------------- CLEARFIX ---------------------*/

/* CLEARFIX */

.clearer {
    height:1px;
    overflow:hidden;
    clear:both;
    margin-top:-1px;
}

/*---------------------------------- MEDIA QUERIES ---------------------------*/

@media (min-width: 768px) {

    .say-hi {
        font-size: 4.5em;
    }

    .photo {
        width: 14em;
        height: 14em;
    }

    .header-text {
        font-size: 1.333334em;
    }

    .one-column h2, .contact-form-wrapper h2 {
        font-size: 3em;
    }

    .column p, .one-column p {
        font-size: 1.25em;
    }

    .total-header {
        padding: 6em 0;
    }

    .services-container {
        padding: 6em 0;
    }

    .bio {
        padding: 6em 0;
    }

    .column {
        width: 33.33%;
        box-sizing: border-box;
    }

    .icon-box {
        width: 8em;
        height: 8em;
    }

    .column-text-wrapper {
        width: 100%;

    }

    .column-text-wrapper p {
        text-align: justify;
    }

    .column:first-child {
        padding: 0 2em 0 0;
    }

    .column:nth-child(2) {
        padding: 0 1em;
    }

    .column:nth-child(3) {
        padding: 0 0 0 2em;
    }

    .contact-form-wrapper {
        padding: 6em 0;
    }

    .form {
        max-width: 45%;
    }

}

@media (min-width: 1400px) {

    .say-hi {
        font-size: 6em;
    }

    .photo {
        width: 15em;
        height: 15em;
    }

    .icon-box {
        width: 10em;
        height: 10em;
    }

    .header-wrapper, .header-text, .row, .contact-form-wrapper {
        width: 1200px;
    }

    .contact-form-wrapper {
        width: 700px;
    }
}