/************************************************
 * RESET
 ************************************************/
body, header, footer, section, nav, aside, article {
    display: block;
}

html, body, div, span, applet, object, iframe, h1, h2, h3,
h4, h5, h6, p, blockquote, pre, a, abbr, acronym,
address, big, cite, code, del, dfn, em, font, img, ins,
kbd, q, s, samp, small, strike, strong, tt,
var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}

body {
    line-height: 1;
}

a, a:link, a:visited, a:hover, a:active {
    text-decoration: none
}

table {
    border-collapse: separate;
    border-spacing: 0;
}

th, td {
    text-align: left;
    font-weight: normal;
}

img, iframe {
    border: none;
    text-decoration: none;
}

ol, ul {
    list-style: none;
}

input, textarea, select, button {
    font-size: 100%;
    font-family: inherit;
}

select {
    margin: inherit;
}

hr {
    margin: 0;
    padding: 0;
    border: 0;
    color: #000;
    background-color: #000;
    height: 1px
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

/************************************************
 * FONTS
 ************************************************/
@font-face {
    font-family: RobotoSlab;
    src: url('../font/RobotoSlab-Light.ttf');
}
@font-face {
    font-family: RobotoSlab;
    src: url('../font/RobotoSlab-Regular.ttf');
    font-weight: bold;
}
@font-face {
    font-family: RobotoSlab;
    src: url('../font/RobotoSlab-Bold.ttf');
    font-weight: 900;
}

@font-face {
    font-family: 'icomoon';
    src:url('../font/icomoon.eot?-hdi7k7');
    src:url('../font/icomoon.eot?#iefix-hdi7k7') format('embedded-opentype'),
    url('../font/icomoon.woff?-hdi7k7') format('woff'),
    url('../font/icomoon.ttf?-hdi7k7') format('truetype'),
    url('../font/icomoon.svg?-hdi7k7#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.icon-menu:before {
    content: "\e9bd";
}
.icon-facebook:before {
    content: "\ea90";
}
.icon-instagram:before {
    content: "\ea92";
}
.icon-twitter:before {
    content: "\ea96";
}
.icon-youtube:before {
    content: "\ea9d";
}


/************************************************
 * GENERIC
 ************************************************/
body{
    font-family: RobotoSlab;
    font-size: 12px;
    background-color: #fff;
}
body, a{
    color: #504f50;
}
b, strong, a:hover{
    color: #00666f;
}
b, strong{
    font-weight: 900;
}
aside{
    width: 240px;
    float: left;
}
article{
    width: calc(100% - 250px);
    float: right;
}
#title{
    display: block;
    font-size: 2em;
    height: 50px;
    color: #00666f;
}
.wrapper{
    width: 100%;
    width: calc(100% - 20px);
    max-width: 1000px;
    margin: auto;
    padding: 0 10px;
}
.left{
    float: left;
}
.right{
    float: right;
}
.clear{
    clear: both;
}

.desktop{
    display: block;
}
.mobile{
    display: none;
}

/* content */
.content{
    float: right;
    width: calc(100% - 250px);
    text-align: justify;
    font-size: 1.4em;
    line-height: 1.4em;
}
.content ul{
    margin-top: 15px;
}
.content p{
    margin-bottom: 15px;
}
.article header{
    width: 230px;
    float: left;
    text-align: right;
    font-size: 1.4em;
}
.article header h1{
    font-size: 1.5em;
}
.image-blog{
    position: relative;
    width: 117px;
    height: 101px;
}
.image-blog img{
    position: absolute;
    top: 0;
    left: 0;
}
.loader{
    background: url('../img/loader_64.gif') no-repeat center;
}

blockquote.quote{
    display: block;
    padding-top: 80px;
    color: #00666f;
    font-size: 2em;
    line-height: 1.4em;
    width: 100%;
    text-align: center;
    font-style: italic;
}
.quote cite{
    display: block;
    text-align: right;
    color: #969596;
    padding-right: 115px;
}

.error, .ok{
    padding: 8px 15px;
    margin-bottom: 15px;
    font-size: 1.2em;
}
.error{
    background: #e9c6c7;
    border: 1px solid #d4515c;
    color: #d4515c;
}
.ok{
    background: #93c4c9;
    border: 1px solid #00666f;
    color: #00666f;
}
@media screen and (max-width:710px) {
    .article header, .content{
        width: 100%;
        float: none;
    }
    .article header{
        text-align: left;
    }
}

@media screen and (max-width:850px) {
    aside, article{
        width: 100%;
        float: none;
    }
    aside{
        margin: 30px 0;
        border-top:1px solid #d5d5d5;
        padding-top: 30px;
    }
}
@media screen and (max-width:710px) {
    .desktop{
        display: none;
    }
    .mobile{
        display: block;
    }
    .article header h1{
        margin-bottom: 40px;
    }
}

/************************************************
 * HEADER
 ************************************************/
#main-header{
    position: absolute;
    z-index: 3000;
    background: url('../img/menu-bg.png') no-repeat top center;
    width: 100%;
    height: 56px;
}
#main-header nav{
    padding: 0 0 0 10px;
}
#persever-clinica{
    background: url('../img/persever-clinica.png') no-repeat;
    width: 164px;
    height: 156px;
    position: absolute;
    z-index: 250;
    text-indent: -90000px;
    top: 0;
    left: calc(50% - 82px);
}
ul#menu{
    text-align: center;
    font-size: 1.3em;
    line-height: 1.3em;
    font-weight: bold;
    width: 87.5%;
    float: left;
}
ul#menu > li{
    width: 22%;
    display: table;
    height: 56px;
    position: relative;
}
ul#menu > li:first-child{
    display: none;
}
ul#menu > li.right{
    width: 16%;
}
ul#menu li a{
    color: #fff;
}
ul#menu > li > a{
    display: table-cell;
    vertical-align: middle;
    box-sizing: border-box;
    width: 100%;
    padding: 7px 5%;
}
ul#menu > li > a.current, ul#menu > li > a:hover{
    background: url('../img/menu-current.png') repeat-x top;
}
#lang{
    float: right;
    width: 12.5%;
    height: 56px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background: url('../img/lang-bg.png') no-repeat top right;
}
#lang select {
    color: #bbb;
    font-size: 1.2em;
    font-weight: bold;
    padding: 5px;
    width: 130%;
    border: none;
    box-shadow: none;
    background-color: transparent;
    background-image: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
#lang select:focus {
    outline: none;
}
#menu-toggle{
    display: none;
}

ul#menu li:hover .submenu{
    display:block;
}
.submenu{
    display: none;
    position: absolute;
    top: 56px;
    width: 170px;
    left: 0px;
}
.submenu ul{
    padding: 5px 25px 20px 25px;
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
}
.submenu ul > li{
    display: block;
    width: 100%;
    height: auto;
    border-bottom: 1px solid #00666f;
}
.submenu ul > li:last-child{
    border-bottom: none;
}
.submenu a{
    display: block !important;
    text-align: center;
    margin: 10px 0 !important;
}
.submenu a:hover{
    color: #00666f !important;
}

@media screen and (max-width:850px) {
    ul#menu{
        padding-left: 100px;
        width: calc(87% - 130px);
        font-size: 1.2em;
    }
    ul#menu li{
        float: left;
        width: 25% !important;
    }
    #lang{
        width: calc(12% + 30px);
    }
    #persever-clinica{
        left: 8px;
        width: 100px;
        background-size: contain;
    }
}
@media screen and (max-width:710px) {
    #persever-clinica, ul#menu{
        display: none;
    }
    ul#menu > li:first-child{
        display: block;
    }
    ul#menu > li > a{
        display: block;
    }
    #main-header nav, #main-header .wrapper{
        padding: 0;
        margin: 0;
        width: 100%;
    }
    #main-header{
        position: fixed;
        background: none;
        height: 40px;
        z-index: 1000;
    }
    ul#menu{
        padding: 0;
        width: 100%;
        background-color: #fff;
        border-bottom: 1px solid #00666f;
    }
    ul#menu li{
        float: none;
        width: 100% !important;
        text-align: left;
        height: 35px;
    }
    ul#menu li li{
        height: auto;
    }
    ul#menu > li > a.current, ul#menu > li > a:hover{
        background: #00666f;
        color: #ffffff !important;
    }
    ul#menu a{
        padding: 5px 15px;
        color: #00666f !important;
    }
    ul#menu h1 a{
        display: block;
        padding: 5px 15px;
        height: 25px;
        width: calc(100% - 30px);
    }
    #menu-toggle, #lang{
        background-color: #00666f;
        height: 40px;
        float: left;
    }
    #menu-toggle{
        display: block;
        padding: 0 10px;
        width: calc(80% - 20px);
        line-height: 40px;
        color: #fff;
        font-size: 1.5em;
    }
    .submenu{
        display: block;
        position: relative;
        top: auto;
        width: 100%;
        left: 0px;
    }
    .submenu ul{
        box-sizing: border-box;
        padding-left: 50px;
        background: #ffffff;
    }
    .submenu ul > li:last-child{
        border-bottom: 1px solid #00666f;
    }
    .submenu a{
        text-align: left;
    }
    #lang{
        width: 20%;
    }
    #lang select{
        width: 100%;
        height: 40px;
    }
}

/************************************************
 * SLIDER
 ************************************************/
#slider{
    position: relative;
    top: 0;
    width: 100%;
    margin-bottom: 40px;
	overflow: hidden;
}
#slider, #slider .slider-slide, #slider .stripes{
    height: 430px;
}
#big-slider #slider, #big-slider .slider-slide, #big-slider .stripes{
    height: 550px;
}
#slider .stripes{
    position: absolute;
    top: 0;
    width: 100%;
    background: url('../img/slider-repeat.png') repeat;
    z-index: 1;
}
#big-slider .stripes{
    z-index: 0;
}
#slider .slider-text{
    position: absolute;
    bottom: 15%;
    left: 10%;
    width: 25%;
    font-size: 2em;
}
#slider .slider-text span{
    display: block;
    background: url('../img/slider-tree.png') no-repeat top left;
    width: 82px;
    height: 65px;
}
#slider .slider-text p{
    padding: 20px;
    background: rgba(255,255,255, 0.4);
}
#slider .slider-text strong{
    display: block;
    color: #00666f;
}
#slider img{
    widthx: 100%;
}
#slider-footer{
    position: absolute;
    z-index: 250;
    bottom: 0px;
    width: 100%;
}
#slider-footer span{
    position: absolute;
    bottom: 0px;
    z-index: 10;
    display: block;
    width: 100%;
    height: 8px;
    background-color: rgba(0,0,0,0.4);
}
#slider .slider-slide{
    background-size: cover;
    background-position: center;
}
#slider-footer div{
    position: relative;
    z-index: 20;
    background: #fff;
    font-size: 1.2em;
    font-weight: bold;
    display: table-cell;
    padding: 15px 25px;
    bottom: 8px;
}
#big-slider #slider-footer div{
    width: 290px;
    margin: 0 auto;
    text-align: center;
    color: #fff;
    font-size: 1.4em;
    bottom: 0px;
    display: block;

    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;

    background: #1e444a; /* Old browsers */
    background: -moz-linear-gradient(left,  #1e444a 0%, #00666f 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#1e444a), color-stop(100%,#00666f)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  #1e444a 0%,#00666f 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  #1e444a 0%,#00666f 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  #1e444a 0%,#00666f 100%); /* IE10+ */
    background: linear-gradient(to right,  #1e444a 0%,#00666f 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e444a', endColorstr='#00666f',GradientType=1 ); /* IE6-9 */
}
#slider .loader{
    position: absolute;
    z-index: 100000;
    top: 170px;
    left: calc(100%/2 - 25px);
    width: 50px;
    height: 50px;
    background-size: 50px;
}
@media screen and (max-width:850px) {
    #slider .loader{
        top: 130px;
    }
}
@media screen and (max-width:710px) {
    #slider{
        top: 40px;
        margin-bottom: 70px;
    }
    #slider .slider-text{
        width: 80%;
        bottom: 40px;
        font-size: 1.4em;
    }
    #slider .slider-text p{
        padding: 5px;
    }
    #slider .loader{
        top: 100px;
    }
}

/************************************************
 * APPOINTMENT
 ************************************************/
.dots{
    background: url('../img/dot.png') repeat-x;
    width: 100%;
    height: 3px;
}
#appointment{
    margin-top: 30px;
    display: block;
}
#appointment .text{
    padding: 20px 5px;
    font-size: 1.1em;
    line-height: 1.4em;
}
#appointment .title{
    display: block;
    font-size: 1.8em;
    margin-bottom: 10px;
    color: #00666f;
}

/************************************************
 * FOOTER
 ************************************************/
#main-footer{
    padding-top: 60px;
    color:#8b8b8b;
}
#footer-content{
    margin-top: 30px;
    padding: 15px 0;
    background-color: #ededed;
    border-top:1px solid #282729;
}
#footer-content .wrapper{
    position: relative;
    top: -67px;
}
#tree{
    background: url('../img/sprite.png') no-repeat 0px 0px;
    width: 190px;
    height: 70px;
    position: relative;
    top: -15px;
}
.box-footer-border{
    border-right: 1px solid #d5d5d5;
}
[class^="box-footer"]{
    width: 24%;
    width: calc(25% - 1px);
    float: left;
    min-height: 160px;
}
[class^="box-footer"] ul{
    padding: 10px 10px 10px 20px;
    font-size: 1.1em;
}
[class^="box-footer"] ul li{
    margin-bottom: 5px;
}
[class^="box-footer"] ul li.space{
    margin-top: 20px;
}
[class^="box-footer"] ul a{
    color:#8b8b8b;
}
[class^="box-footer"] ul a:hover{
    color:#282729;
}
#logo{
    background: url('../img/sprite.png') no-repeat 0px -80px;
    width: 190px;
    height: 40px;
    text-indent: -90000px;
    margin-bottom: 20px;
}
#address{
   font-size: 1.5em;
   color:#282729;
}
#address a{
    display: block;
    color:#282729;
}
#address address{
    margin-top: 20px;
}
#social{
    float: right;
    padding-left: 20px;
    width: calc(25% - 40px);
    font-size: 1.1em;
}
#social ul a{
    display: block;
    background: #8b8b8b;
    color: #ededed;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    font-size: 16px;
    text-align: center;
    width: 25px;
    height: 25px;
    line-height: 25px;
}
#blog-link{
    display: block;
    position: relative;
    top: -40px;
    padding: 55px 0 0 0;
    color: #00666f;
    font-size: 1.3em;
    background: url('../img/blog.png') no-repeat top right;
}
#social ul{
    padding: 5px 0;
}
#social li{
    float: left;
    font-size: 1.6em;
    margin-right: 5px;
}
#clear-mobile{
    display: none;
}
@media screen and (max-width:955px) {
    #blog-link{
        background-size: 50px;
    }
}
@media screen and (max-width:710px) {
    #clear-mobile{
        display: block;
    }
    [class^="box-footer"]{
        width: 100%;
        float: none;
        padding-bottom: 10px;
        min-height: 0px;
        border-top: 1px solid #d5d5d5;
    }
    .box-footer-border{
        border-right: none;
    }
    [class^="box-footer"] ul{
        padding: 10px 0 0 0;
        font-size: 1.1em;
        text-align: center;
    }
    [class^="box-footer"] ul a{
        display: block;
    }
    #address, #social{
        width: 50%;
        border-top: none;
    }
    #address{
        float: left;
    }
    #social{
        padding-left: 0px;
        width: 50%;
        float: right;
        font-size: 1.1em;
    }
    #blog-link{
        width: 200px;
        background-size: auto;
    }
}
@media screen and (max-width:500px) {
    #address, #social{
        width: 100%;
        float: none;
    }
    #social{
        border-top: 1px solid #d5d5d5;
        padding-top: 50px;
        margin-bottom: 25px;
    }
}
/************************************************
 * COOKIES
 ************************************************/
#cookies{
    color: #fff;
    width: 100%;
    text-align: center;
    background-color: #76a9ae;
    padding: 10px 0px;
    position: fixed;
    bottom: 0px;
    z-index: 2000;
}
#cookies a{
    color: #00666f;
}
#cookies input[type="submit"]{
    background-color: #00666f;
    color: #fff;
    padding: 5px 10px;
    border: none;
    cursor: pointer;
}

/************************************************
 * HOME
 ************************************************/
#home .left{
    margin-right: 12px;
}
#home .right{
    margin-left: 12px;
}
#home .left, #home .right{
    width: calc(50% - 12px);
    text-align: justify;
    font-size: 1.3em;
    line-height: 1.5em;
}
ul.therapies{
    margin: 20px 0;
    font-size: 1.2em;
}
ul.therapies li{
    width: calc(25% - 12px);
    float: left;
    margin-right: 12px;
    line-height: 1.4em;
}
ul.therapies li:nth-child(5n){
    clear: both;
}
ul.therapies a{
    position: relative;
}
ul.therapies a span{
    display: none;
    position: absolute;
    top: 10px;
    bottom: 6px;
    left: 0px;
    right: 0px;
    background: rgba(0, 102, 111, 0.4);
}
ul.therapies li:hover a span{
    display: block;
}
ul.therapies a{
    display: block;
    color: #00666f;
    font-size: 1.3em;
    line-height: 1.3em;
    margin-bottom: 8px;
}
ul.therapies a.title{
    height: 50px;
    display: table-cell;
    vertical-align: bottom;
    overflow: hidden;
    padding-bottom: 4px;
    position: relative;
    width: 100%;
}
ul.therapies img{
    margin-top: 10px;
    width: 100%;
    border-bottom: 6px solid #00666f;
}
@media screen and (max-width:710px) {
    #home .left, #home .right{
        float: none;
        width: 100%;
        margin: 0 0 10px 0;
    }
    ul.therapies li{
        width: calc(50% - 12px);
        margin: 0 6px 30px 6px;
    }
}
@media screen and (max-width:500px) {
    ul.therapies li{
        width: 100%;
        margin: 0 0 30px 0;
    }
}

/************************************************
 * THERAPY
 ************************************************/
#therapies #text{
    font-size: 1.3em;
    line-height: 1.5em;
}
#therapies #text p{
    margin-bottom: 15px;
}

#therapy h1{
    font-weight: normal;
    margin-top: 15px;
}
#submenu{
    font-size: 1.5em;
    line-height: 1.3em;
}
#submenu a{
    display: block;
    color: #909090;
    margin-bottom: 25px;
}
#submenu a:hover, #submenu a.current, article h1{
    color: #00666f;
}
#video{
    width: 100%;
    height: 300px;
    margin-top: 30px;
}
#therapy .content p{
    text-align: left;
}

/************************************************
 * CONTACT
 ************************************************/
#mapa{
    width: 100%;
    height: 450px;
}
#address-phrase, #contact form{
    width: 47%;
    float: left;
}
#address-phrase .address{
    line-height: 30px;
    font-size: 1.3em;
}
#contact form{
    color: #969596;
    padding-top: 50px;
    float: right;
}
#contact input, #contact textarea{
    border: none;
    height: 30px;
    background-color: #e3e4e4;
    margin-bottom: 15px;
    margin-top: 3px;
    font-family: RobotoSlab;
}
#contact input[type=text], #contact textarea{
    width: 100%;
}
#contact input[type=submit]{
    background: #00666f;
    color: #fff;
    cursor: pointer;
    padding: 0 30px;
    font-size: 1.2em;
}
#contact textarea{
    height: 80px;
}
.required::after{
    content: " *";
    color: #00666f;
}

@media screen and (max-width:710px) {
    #address-phrase, #contact form{
        width: 100%;
        float: none;
    }
}

/************************************************
 * BLOG
 ************************************************/
aside#blog-categories{
    font-size: 1.3em;
}
aside#blog-categories ul{
    padding-bottom: 20px;
}
aside#blog-categories li{
    line-height: 1.3em;
}
aside#blog-categories li:first-child{
    margin-bottom: 10px;
}
aside#blog-categories a{
    display: block;
    color: #909090;
}
aside#blog-categories a:hover, aside#blog-categories a.current{
    color: #00666f;
}
aside#blog-categories a.current{
    margin-top: 0px;
}
aside#blog-categories a.current{
    font-weight: bold;
}
#blog article li{
    margin-bottom: 20px;
}
#blog .image-blog{
    float: left;
}
#blog .text{
    width: calc(100% - 125px);
    float: right;
    border-bottom: 1px solid #e1e1e1;
    font-size: 1.2em;
    line-height: 1.4em;
}
#blog .text strong, #blog .text em{
    display: block;
}
#blog .text a{
    color: #00666f;
}
#blog .text em{
    font-style: italic;
}

#blog .text .title{
    font-size: 1.3em;
}
#blog .text p{
    padding: 10px 0 15px 0;
}
#blog .loader{
    width: 100%;
    height: 58px;
    background-size: 45px;
    display: none;
}
#load-more{
    display: block;
    width: 100%;
    text-align: center;
    padding: 20px 0;
    font-size: 1.3em;
}

/************************************************
 * POST
 ************************************************/
#post header a{
    display: block;
    color: #00666f;
}
#post header a.category{
    font-style: italic;
    margin: 5px 0;
}
#post header a.icon-facebook{
    margin-top: 10px;
    font-size: 1.5em;
}
blockquote.quote-blog{
    display: block;
    /*height: 100px;*/
    color: #00666f;
    margin: 20px 0 25px 0;
}
blockquote.quote-blog .image-blog{
    margin: 0 60px;
}
blockquote.quote-blog .text{
    font-size: 1.2em;
    font-style: italic;
    width: calc(100% - 240px);
}
blockquote.quote-blog.image-no .text{
    width: 100%;
}
blockquote.quote-blog p{
    text-align: center;
    /*height: 78px;*/
    line-height: 1em !important;
    margin: 15px 0;
}
.image-left .image-blog,
.image-right .text{
    float: left;
}
.image-left .text,
.image-right .image-blog{
    float: right;
}

@media screen and (max-width:950px) {
    blockquote.quote-blog .image-blog{
        margin: 0px;
    }
    blockquote.quote-blog .text{
        width: calc(100% - 140px);
    }
}
@media screen and (max-width:850px) {
    blockquote.quote-blog .image-blog{
        margin: 0 60px;
    }
    blockquote.quote-blog .text{
        width: calc(100% - 240px);
    }
}
@media screen and (max-width:450px) {
    blockquote.quote-blog .image-blog{
        margin: 0px;
    }
    blockquote.quote-blog .text{
        width: calc(100% - 140px);
    }
}

/************************************************
 * WHO WE ARE
 ************************************************/
#who-we-are blockquote{
    width: 650px;
    padding: 5px 0;
    margin: 20px auto 50px auto;
    position: relative;
}
#who-we-are .subtitle{
    font-size: 2em;
    color: #00666f;
    font-weight: bold;
    margin-bottom: 20px;
}
[class^="image-on-"]{
    position: relative;
    padding-bottom: 30px;
}
.image-on-left{
    left: -80px;
}
.image-on-right{
    right: -80px;
}
[class^="image-on-"] h2{
    font-size: 2em;
    color: #00666f;
    margin-bottom: 20px;
    font-weight: lighter;
}
[class^="image-on-"] img{
    width: 400px;
}
[class^="image-on-"] div:not(.clear), #text-persever{
    font-size: 1.3em;
    line-height: 1.5em;
    width: calc(100% - 460px);
}
#text-persever{
    width: 100%;
    margin-bottom: 60px;
}
.image-on-left div:not(.clear){
    float: right;
}
.image-on-right div:not(.clear){
    float: left;
}
[class^="image-on-"] p{
    text-align: justify;
}
.image-on-left img{
    float: left;
}
.image-on-right img{
    float: right;
}
.image-on-right div{
    text-align: right;
}
@media screen and (max-width:1160px) {
    .image-on-left{
        left: 0px;
    }
    .image-on-right{
        right: 0px;
    }
    #who-we-are blockquote{
        margin: 0 0 0 230px;
    }
}
@media screen and (max-width:900px) {
    #who-we-are blockquote{
        margin: 0 30px 0 0;
        float: right;
        width: auto;
    }
}
@media screen and (max-width:710px) {
    [class^="image-on-"] img{
        width: 200px;
    }
    [class^="image-on-"] div:not(.clear){
        width: calc(100% - 220px);
        padding-top: 30px;
    }
    #who-we-are blockquote, .image-on-right{
        top: 0px;
    }
    #who-we-are blockquote{
        margin: 30px auto;
        float: none;
    }
}
@media screen and (max-width:500px) {
    [class^="image-on-"] img, [class^="image-on-"] div:not(.clear){
        float: none;
        width: 100%;
    }
}

/************************************************
 * SITE MAP
 ************************************************/
#quiet-space{
    position: relative;
}
#quiet-space img{
    display: block;
    left: -410px;
    top: 60px;
    width: 800px;
    position: absolute;
}
#quiet-space #text{
    float: right;
    width: calc(100% - 410px);
}
#quiet-space p{
    text-align: justify;
    font-size: 1.2em;
    line-height: 1.5em;
}
#quiet-space .quote-left{
    padding-right: 150px;
    width: calc(100% - 150px);
}
#quiet-space .quote-right{
    padding-left: 150px;
    width: calc(100% - 150px);
}
@media screen and (max-width:900px){
    #quiet-space .quote-left,
    #quiet-space .quote-right{
        padding-left: 0px;
        padding-right: 0px;
        width: 100%;
    }
}
@media screen and (max-width:710px){
    #quiet-space #text{
        width: 100%;
        left: 0px;
    }
    #quiet-space img{
        left: 0px;
        top: auto;
        width: 90%;
        padding: 20px 0;
        margin: 0px auto;
        position: relative;
    }
}
/************************************************
 * SITE MAP
 ************************************************/
.site-map{
    width: 50%;
    float: left;
    font-size: 1.2em;
    line-height: 1.2em;
}
@media screen and (max-width:710px){
    .site-map{
        width: 100%;
        float: none;
        margin-bottom: 20px;
    }
}

/************************************************
 * ERROR
 ************************************************/
#error p, #error a{
    display: block;
    text-align: center;
    font-size: 1.5em;
}
#error p{
    font-size: 2em;
    color: #00666f;
    width: calc(100% - 45px);
    max-width: 570px;
    min-height: 60px;
    padding-left: 45px;
    margin: 0 auto;
    background: url('../img/sprite.png') no-repeat 0px -140px;
}
#error a{
    color: #fff;
    background-color: #00666f;
    width: 220px;
    margin: 30px auto;
    padding: 15px 0;
    font-weight: lighter;
}