/* Row
-------------------------------------------------------------- */
.roll-row {
    clear: both;
    display: block;
    position: relative;
    padding: 0px 0;
    /*padding: 60px 0;*/
}

.roll-row .container {
    position: relative;
    z-index: 2;
}

.overlay {
    z-index: 1;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url(https://farmaciaislacartuja.es/images/overlay.png);
    background-size: cover;
}

.single-page .services .overlay {
    background-color: #000;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: alpha(opacity=80);
    -moz-opacity: 0.8;
    -khtml-opacity: 0.8;
    opacity: 0.8;
}

.roll-row h1,
.roll-row h1.small-thin,
.roll-row h1.small-light,
.roll-row h1.small-regular,
.roll-row h1.small-bold,
.roll-row h1.thin,
.roll-row h1.light,
.roll-row h1.bold {
    margin-top: 0;
    line-height: normal;
} 

.roll-row .content-row {
    position: relative;
    z-index: 30;
}

/*.intro-icon{
    display: inline-block;
    height: 44px;
    z-index: 9;
    margin-bottom: 30px;
}
.intro-icon:before{
    font-size: 44px;
    margin-top: 8px;
    position: relative;
    display: inline-block;
}*/

.image_post_title {
    height: 250px;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    margin-bottom: 50px;
    position: relative;

}
.image_post_title_servicios {
    height: 250px;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    margin-bottom: 0px;
    position: relative;
    margin-left: 2%;
    margin-right: 2%;
}



/* Content Boxes with Icons
-------------------------------------------------------------- */
.image_post_header{
    height: 350px;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    margin-bottom: 50px;
    position: relative;
}
.title_bg_post_header {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 300px;
    text-align: center;
    padding: 10px;
    height: 80px;
    font-size: 3em;
    font-weight: 900;
    color: #fff;
    background-color: rgba(1,1,1,.5);
    padding-top: 30px;
}
.roll-content-box1 {
    text-align: left;
    padding: 19px;
    height: 350px;
    position: relative;
}

.roll-services h1.small-light {
    font-size: 33px;
    color: #fff;
    margin-bottom: 80px;
}

.roll-content-box1 img {
    margin-bottom: 31px;
}

.roll-content-box1 h3 {
    font-size: 21px;
    line-height: normal;
    margin-top: 0;
    margin-bottom: 30px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.roll-content-box1 p {
    font-size: 14px;
    line-height: 25px;
    color: #666666;
    text-align: left;
}

.roll-content-box2 {
    position: relative;
    padding: 50px 20px 20px 20px;
    height: 340px;
    margin: 20px 0;
}

.roll-content-box2:hover {
    background-color: #eeeeee;
}

.roll-content-box2 .title {
    margin-bottom: 16px;
}

.roll-content-box2 .title:after,
.roll-content-box2 .title:before,
.roll-content-box2 p:after,
.roll-content-box2 p:before, 
.roll-content-box1 .hi-icon-wrap:after, 
.roll-content-box1 .hi-icon-wrap:before,
.roll-content-box1 p:after, 
.roll-content-box1 p:before{
    background: #eee;
    content: '';
    position: absolute;
    -webkit-transition: all ease 400ms;
    transition: all ease 400ms;
}

.roll-content-box2 .title:after,
.roll-content-box1 .hi-icon-wrap:after{
    width: 3px;
    height: 50px;
    top: 0;
    left: 0;
}

.roll-content-box2 .title:before,
.roll-content-box1 .hi-icon-wrap:before{
    width: 50px;
    height: 3px;
    top: 0;
    left: 0;
}

.roll-content-box2 p:after,
.roll-content-box1 p:after{
    width: 50px;
    height: 3px;
    bottom: 0;
    right: 0;
}

.roll-content-box2 p:before,
.roll-content-box1 p:before{
    width: 3px;
    height: 50px;
    bottom: 0;
    right: 0;
}

.roll-content-box2:hover .title:before,
.roll-content-box2:hover p:after{
    width: 100%;
}
.roll-content-box2:hover .title:after,
.roll-content-box2:hover p:before{
    height: 100%;
}

.roll-content-box2 .title .icon-servicio{
    font-size: 65px;¡
}

.roll-content-box2 .title h3 {
    display: block;
    position: relative;
    top: 6px;
    font-size: 24px;
    line-height: normal;
    letter-spacing: 0.4px;
}

.roll-content-box2 p {
    font-size: 16px;
    color: #666;
}

/* Effect 5 */
.intro-icon {
    display: inline-block;
    font-size: 0px;
    /*cursor: pointer;*/
    margin: 30px 30px;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    text-align: center;
    position: relative;
    z-index: 1;
    color: #000;
}

.intro-icon:after {
    pointer-events: none;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    content: '';
    -webkit-box-sizing: content-box; 
    -moz-box-sizing: content-box; 
    box-sizing: content-box;
}

.intro-icon:before {
    margin-top: -8px;
    speak: none;
    font-size: 40px;
    line-height: 90px;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    display: block;
    -webkit-font-smoothing: antialiased;
}

.hi-icon-effect-5 .intro-icon {
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 1);
    overflow: hidden;
    -webkit-transition: background 0.3s, color 0.3s, box-shadow 0.3s;
    -moz-transition: background 0.3s, color 0.3s, box-shadow 0.3s;
    transition: background 0.3s, color 0.3s, box-shadow 0.3s;
}

.hi-icon-effect-5 .intro-icon:after {
    display: none;
}

.roll-content-box1:hover .intro-icon {
    background: rgba(255, 255, 255,1);
}
.roll-content-box1:hover .intro-icon:before {
    -webkit-animation: toRightFromLeft 0.3s forwards;
    -moz-animation: toRightFromLeft 0.3s forwards;
    animation: toRightFromLeft 0.3s forwards;
}

@-webkit-keyframes toRightFromLeft {
    49% {
        -webkit-transform: translate(100%);
    }
    50% {
        opacity: 0;
        -webkit-transform: translate(-100%);
    }
    51% {
        opacity: 1;
    }
}
@-moz-keyframes toRightFromLeft {
    49% {
        -moz-transform: translate(100%);
    }
    50% {
        opacity: 0;
        -moz-transform: translate(-100%);
    }
    51% {
        opacity: 1;
    }
}
@keyframes toRightFromLeft {
    49% {
        transform: translate(100%);
    }
    50% {
        opacity: 0;
        transform: translate(-100%);
    }
    51% {
        opacity: 1;
    }
}

.hi-icon-wrap .hi-icon-wrap:after{

}
/* Accordion - Toggle
-------------------------------------------------------------- */
.roll-accordion .roll-toggle {
    padding: 10px 0 9px 0;
    border-bottom: 1px solid #e5e5e5;
}

.roll-accordion .roll-toggle .toggle-title {
    position: relative;
    cursor: pointer;
}

.roll-accordion .roll-toggle .toggle-title i {
    position: absolute;
    font-size: 20px;
}

.roll-accordion .roll-toggle .toggle-title h4 {
    letter-spacing: 0;
    word-spacing: 0;
    margin-top: 6px;
    margin-left: 34px;
}

.roll-accordion .roll-toggle .toggle-content {
    padding: 29px 0 24px 32px;
}

.roll-accordion .roll-toggle .toggle-content p {
    color: #666666;
}

.roll-accordion .roll-toggle .toggle-content p.like {
    text-align: right;
    margin-top: 17px;
}

.roll-accordion .roll-toggle .toggle-content p.like a {
    opacity: 0.4;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
    filter: alpha(opacity=40);
    -moz-opacity: 0.4;
    -khtml-opacity: 0.4;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.roll-accordion .roll-toggle .toggle-content p.like a:hover {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    -khtml-opacity: 1;
}

.roll-accordion .roll-toggle .toggle-content p.like a i {
    font-size: 20px;
    position: relative;
    left: -2px;
}

.roll-accordion .roll-toggle .toggle-content p.like a.yes i {
    margin-right: 11px;
}

.roll-accordion .roll-toggle .toggle-content p.like a.no i {
    top: 2px;
}

/* Recent works
-------------------------------------------------------------- */
.roll-recent-work {
    /*width: 100%;*/
    display: block;
    margin-bottom: 66px;
}

.roll-recent-work h1 {
    font-size: 33px;
    text-align: center;
    margin-bottom: 47px;
}

.roll-recent-work .recent-work-item {
    max-height: 300px;
    /*width: 25%;*/
    /*float: left;*/
    /*display: inline-block;*/
    /*text-align: left;*/
    /*position: relative;*/
    /*overflow: hidden;*/
}

.roll-recent-work .recent-work-item .description,
.roll-recent-work .recent-work-item .readmore,
.roll-recent-work .recent-work-item .overlay {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    position: absolute;
}

.roll-recent-work .recent-work-item:hover .description,
.roll-recent-work .recent-work-item:hover .readmore {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    -khtml-opacity: 1;
}

.roll-recent-work .recent-work-item:hover .description {
    top: 23px;
    left: 31px;
}

.roll-recent-work .recent-work-item .description {
    top: -30px;
    left: 31px;
    z-index: 2;
}

.roll-recent-work .recent-work-item .description h3 {
    font-size: 16px;
    line-height: normal;
    color: #fff;
    letter-spacing: 0.3px;
    margin-bottom: 0;
}

.roll-recent-work .recent-work-item .description p {
    font-size: 14px;
    color: #fff;
}

.roll-recent-work .recent-work-item .readmore {
    bottom: 27px;
    left: -20px;
    z-index: 2;
}
.roll-recent-work .recent-work-item:hover .readmore {
    left: 36px;
}

.roll-recent-work .recent-work-item .overlay {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #89BD23;
}

/* Clients
-------------------------------------------------------------- */

ul.clients {
    display: inline-block;
    width: 100%;
    text-align: center;
}

ul.clients li {
    display: inline-block;
    line-height: 116px;
    width: 120px;
    height: 120px;
    margin: 15px 25px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

/*ul.clients li:hover {
    background-color: rgba(137, 189, 35, .3);
    border-color: transparent;
    border-radius: 50%;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;
    -webkit-box-shadow: 0px 0px 2px 5px rgba(137, 189, 35, .1);
    -moz-box-shadow: 0px 0px 2px 5px rgba(137, 189, 35, .1);
    box-shadow: 0px 0px 2px 5px rgba(137, 189, 35, .1);
}*/

/* What can we do for you Section
-------------------------------------------------------------- */

.page-title-container{
    margin-top: 0px;
     /*margin-top: 150px;*/
}

.services-page .whatwecando {
    padding: 88px 0 20px 0;
}

.roll-whatwecando h1.small-light {
    font-size: 33px;
    margin-bottom: 34px;
    text-transform: capitalize;
    letter-spacing: 0.7px;
}

.roll-whatwecando p {
    font-size: 16px;
    line-height: 28px;
    letter-spacing: 0.3px;
}

/* About-2
-------------------------------------------------------------- */

h1.small-light.why-choose-us {
    margin-top: 18px;
    margin-bottom: 30px;
    letter-spacing: 1.2px;
}

h1.small-light.our-demo {
    margin-bottom: 49px;
}

/* Flex slider
-------------------------------------------------------------- */

.roll-team .item {
    position: relative;
    overflow: hidden;
    background-color: #fff;
    margin-bottom: 40px;
    cursor: e-resize;
}

.roll-team .item .avatar {
    position: relative;
    margin-bottom: 21px;
    text-align: center;
    height: 220px;
}

.roll-team .item .avatar i{
    font-size: 125px;
    vertical-align: middle;
    margin-top: 56px;
    color: #ABAAAA;
}

.roll-team .item .avatar img{
    display: block;
    margin: 0 auto;
}

.roll-team .item .info {
    padding: 3px 25px;
    border: 1px solid #000;
    color: #FFF;
    opacity: 0.9;
    background-color: #8C8C8C;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
    -khtml-opacity: 0.7;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.roll-team .item .info > div {
    display: inline-block;
}

.roll-team .item .info .name {
    display: block;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 0.8px;
    word-spacing: 4px;
}

.roll-team .item .info .pos {
    display: block;
    font-size: 14px;
    line-height: 18px;
    word-spacing: -1px;
    font-style: italic;
    letter-spacing: 0;
}

.owl-carousel .owl-item:hover .info{
    opacity: .7;
}

/*Main Slider 1*/
.roll-slider .flexslider.main-slider .slides img.more {
    width: 58px;
    display: block;
}

.shadow {
    text-shadow: 2px 2px 2px #323232;
}

.roll-slider .flexslider.main-slider .slides div.spec {
    padding: 5%;
    text-align: center;
    width: 673px;
    background: rgba(137, 189, 35, .5);
    position: absolute;
    right: 0;
    bottom:0;
    z-index: 3;
    border: 2px solid #fff;
    border-bottom: none;
}

.roll-slider .main-slider.nav-in {
    height: 650px;
    padding-bottom: 0;
}

.menu-under-slide .roll-slider .main-slider {
    height: 650px;
}

.roll-slider .main-slider .slides {
    overflow: hidden;
}

.roll-slider .main-slider .overlay {
    z-index: 1;
}

.roll-slider .main-slider .flex-viewport,
.roll-slider .main-slider ul.slides,
.roll-slider .main-slider ul.slides li,
.roll-slider .main-slider ul.slides li div.img,
.roll-slider .main-slider ul.slides li div.content,
.roll-slider .main-slider ul.slides li div.row,
.roll-slider .main-slider ul.slides li div.col-md-12 {
    height: 100% !important;
}

.roll-slider .main-slider ul.slides li div.img {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.roll-slider .main-slider ul.slides li div.col-md-12 div.text {
    position: absolute;
    top: 31%;
    z-index: 2;
}

.roll-slider .main-slider ul.slides li div.content .big-text {
    color: #fff;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 50px;
    font-weight: lighter;
    line-height: 60px;
    margin-bottom: 17px;
    letter-spacing: 0;
}

.roll-slider .main-slider ul.slides li div.content .big-text span {
    font-family: "HelveticaNeue-Bold", "Helvetica Neue Bold", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 68px;
    font-weight: bold;
}

.roll-slider .main-slider ul.slides li div.content .small-text {
    color: #fff;
    font-family: "HelveticaNeue-Bold", "Helvetica Neue Bold", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
    line-height: 25px;
    margin-bottom: 20px;
}

.roll-slider .main-slider .flex-control-nav {
    bottom: 0;
    z-index: 3;
}

.roll-slider .main-slider .flex-control-paging li a.flex-active {
    cursor: default;
}

.roll-slider .main-slider .flex-control-paging li a {
    width: 45px;
    height: 11px;
    display: block;
    background: #eee;
    cursor: pointer;
    text-indent: -9999px;
}

/*Main Slider 2*/
.roll-slider {
    background-color: #4c4c4c;
    overflow: hidden;
    margin-top: 75px;
}

/* Animation Flex slider
-------------------------------------------------------------- */
.roll-animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes roll-slideInLeft {
    0% {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }

    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes roll-slideInLeft {
    0% {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }

    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.flex-active-slide .roll-slideInLeft {
    -webkit-animation-name: roll-slideInLeft;
    animation-name: roll-slideInLeft;
}

@-webkit-keyframes roll-slideInRight {
    0% {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        visibility: visible;
    }

    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes roll-slideInRight {
    0% {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        visibility: visible;
    }

    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.flex-active-slide .roll-slideInRight {
    -webkit-animation-name: roll-slideInRight;
    animation-name: roll-slideInRight;
}

@-webkit-keyframes roll-slideInUp {
    0% {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        visibility: visible;
    }

    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes roll-slideInUp {
    0% {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        visibility: visible;
    }

    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.flex-active-slide .roll-slideInUp {
    -webkit-animation-name: roll-slideInUp;
    animation-name: roll-slideInUp;
}

@-webkit-keyframes roll-slideInDown {
    0% {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
        visibility: visible;
    }

    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes roll-slideInDown {
    0% {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
        visibility: visible;
    }

    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.flex-active-slide .roll-slideInDown {
    -webkit-animation-name: roll-slideInDown;
    animation-name: roll-slideInDown;
}

@-webkit-keyframes roll-fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes roll-fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.flex-active-slide .roll-fadeIn {
    -webkit-animation-name: roll-fadeIn;
    animation-name: roll-fadeIn;
}

@-webkit-keyframes roll-fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes roll-fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.flex-active-slide .roll-fadeInLeft {
    -webkit-animation-name: roll-fadeInLeft;
    animation-name: roll-fadeInLeft;
}

@-webkit-keyframes roll-fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes roll-fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.flex-active-slide .roll-fadeInRight {
    -webkit-animation-name: roll-fadeInRight;
    animation-name: roll-fadeInRight;
}

@-webkit-keyframes roll-fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes roll-fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.flex-active-slide .roll-fadeInUp {
    -webkit-animation-name: roll-fadeInUp;
    animation-name: roll-fadeInUp;
}

@-webkit-keyframes roll-fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes roll-fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.flex-active-slide .roll-fadeInDown {
    -webkit-animation-name: roll-fadeInDown;
    animation-name: roll-fadeInDown;
}

/* Contact form
-------------------------------------------------------------- */
.contact-page .page-title h1.title.thin {
    margin: 78px 0 86px 0;
}
.contact-form{
    margin-top: 100px;
}
.dir{
    margin: 15px 0;
    font-size: 24px;
    line-height: 28px;
}
.dir i{
    font-size: 30px;
    margin-right: 15px;
    width: 40px;
    padding-top: 3px;
    height: 40px;
    text-align: center;
    border-radius: 5px;
}
.contacto{margin-top: 100px;}
.roll-contact-form .input-wrap input, 
.roll-contact-form-express .input-wrap input, 
#formulario_citas input, 
.roll-contact-form .message-wrap textarea,
.roll-contact-form-express .message-wrap textarea,
#formulario_citas textarea{
    width: 100%;
    background-color: #e5e5e5;
    margin-top: 30px;
    padding: 27px;
    font-size: 18px;
    border: 1px solid #e5e5e5;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;
}

.roll-contact-form .message-wrap textarea,
#formulario_citas textarea,
.roll-contact-form-express .message-wrap textarea{
    max-width: 100%;
    min-width: 100%;
}

.roll-contact-form .input-wrap input,
#formulario_citas input,
.roll-contact-form-express .input-wrap input {
    height: 70px;
}

.roll-contact-form-express .message-wrap textarea,
#formulario_citas textarea,
.roll-contact-form .message-wrap textarea {
    height: 223px;
}

.roll-contact-form .send-wrap button#submit,
#formulario_citas button#submit,
.roll-contact-form-express .send-wrap button#submit {
    background: none;
    border: 0;
    padding: 0;
    margin: 36px 0;
}
.roll-contact-form label.error,
#formulario_citas label.error,
.roll-contact-form-express label.error {
    display: block; 
    font-style: italic; 
    font-size: 13px; 
    line-height: 30px;
}

.roll-contact-form .loading,
#formulario_citas .loading,
.roll-contact-form-express .loading {
    display: inline-block; 
    width: 16px; 
    height: 16px; 
    background: url(https://farmaciaislacartuja.es/contact/ajax-loader.gif) no-repeat center center;
}

/* Effect 2: 3D rolling links, idea from http://hakim.se/thoughts/rolling-links */

nav.cl-effect-2 a {
    position: relative;
    display: inline-block;
    outline: none;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 400;
    text-shadow: 0 0 1px rgba(255,255,255,0.3);
    font-size: 1.35em;
}

.cl-effect-2 button{
    outline: none;
    border: none;
    padding: 0;
    background-color: transparent;
    margin: 15px 0; 
}

.cl-effect-2 a {
    line-height: 44px;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    perspective: 1000px;
}

.cl-effect-2 a span {
    position: relative;
    display: inline-block;
    padding: 0 14px;
    -webkit-transition: -webkit-transform 0.3s;
    -moz-transition: -moz-transform 0.3s;
    transition: transform 0.3s;
    -webkit-transform-origin: 50% 0;
    -moz-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.cl-effect-2 a span:before {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    content: attr(data-hover);
    -webkit-transition: background 0.3s;
    -moz-transition: background 0.3s;
    transition: background 0.3s;
    -webkit-transform: rotateX(-90deg);
    -moz-transform: rotateX(-90deg);
    transform: rotateX(-90deg);
    -webkit-transform-origin: 50% 0;
    -moz-transform-origin: 50% 0;
    transform-origin: 50% 0;
}

.cl-effect-2 a:hover span,
.cl-effect-2 a:focus span {
    -webkit-transform: rotateX(90deg) translateY(-22px);
    -moz-transform: rotateX(90deg) translateY(-22px);
    transform: rotateX(90deg) translateY(-22px);
}