/*--------------------------------------------------------------------------------------
Theme Name: APPXONE
Theme URI: http://devitfamily.com
Author URI: http://devitfamily.com
Description: 100% Responsive, Highly Customizable, SEO Friendly APPS Landing HTML template using Twitter Bootstrap Latest, Search Engine Friendly.
Author: BDEXPERT
Version: 1.0
----------------------------------------------------------------------------------------
   1. BASE CSS
    2. TOP AREA
        2.1 MAINMENU AREA
        2.2 WELCOME TEXT AREA
    3. FEATURES AREA
    4. FUN FACT AREA
    5. ABOUT AREA
        5.1 VIDEO AREA
    6. SCREENSHOT AREA
    7. PRICEING AREA
    8. DOWNLOAD AREA
    9. TESTMONIAL AREA
    10. SUBSCRIBER AREA
    11. FOOTER AREA
    12. SCROLL TO TOP
----------------------------------------------------------------------------------------*/


/*--------------------
   1. BASE CSS
----------------------*/

@import url('https://fonts.googleapis.com/css?family=Lato:400,400i|Montserrat:400,500,700');

@font-face {
  font-family: Avenir;
  src: url(fonts/avenir.ttc);
}

@font-face {
  font-family: Fontfont_mark_pro;
  src: url(fonts/fontfont_mark_pro.otf);
}


@font-face {
  font-family: Fontfont_mark_pro_black;
  src: url(fonts/fontfont_mark_pro_black.otf);
}

@font-face {
  font-family: Fontfont_mark_pro_medium;
  src: url(fonts/fontfont_mark_pro_medium.otf);
}


.alignleft {
    float: left;
    margin-right: 15px;
}

.alignright {
    float: right;
    margin-left: 15px;
}

.aligncenter {
    display: block;
    margin: 0 auto 15px;
}

a {
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

a:focus,
a:hover {
    outline: 0 solid;
    text-decoration: none;
}

button:focus {
    outline: 0;
}

img {
    max-width: 100%;
    height: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 15px;
    font-weight: 400;
    font-family: 'Montserrat', sans-serif;
}

html,
body {
    height: 100%
}

body {
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    line-height: 1.5em;
    font-weight: 400;
    color: #363636;
}

a:hover {
    text-decoration: none
}

.navbar-toggle {
    border: 2px solid #ef476f;
    border-radius: 0;
}

.navbar-toggle .icon-bar {
    background: #ef476f none repeat scroll 0 0;
}


/* Remove Chrome Input Field's Unwanted Yellow Background Color */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
}

header .welcome-text-area .welcome-mockup-two img {
    width: 90%;
}

.area-title {
    margin-bottom: 80px;
}

.area-title h2 {
    color: black;
    font-size: 30px;
    letter-spacing: 1px;
    line-height: 1;
    margin-bottom: 30px;
    padding: 0 10px;
    position: relative;
    font-weight: 500;
    /*text-transform: uppercase;*/
}

.area-title h2 span{
    font-weight: 600;
}

.area-title-after {
    display: inline-block;
    height: 1px;
    margin-bottom: 25px;
    position: relative;
    width: 180px;
}

.about-area .area-title p{
    font-size: 2rem;
    color: black;
}

.area-title-after::before,
.area-title-after::after {
    background: #fe2f43 none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 43%;
}

.area-title-after::after {
    left: auto;
    right: 0;
    width: 43%;
}

.section-caracteristicas .area-title-after::after {
    left: auto;
    right: 0;
    width: 41%;
}

.section-caracteristicas .about-details p{
    color: black;
}




.center-content{
    display: flex;
    justify-content: center;
}

.section-caracteristicas .area-icon{
    /*border: 2px solid;  */
    font-size: 29px;
    height: 30px;  
    width: 30px;
}

.area-icon {
    border: 1px solid;
    border-radius: 50%;
    color: #ef476f;
    font-size: 20px;
    height: 25px;
    left: 50%;
    margin-left: -12.5px;
    margin-top: -12.5px;
    position: absolute;
    top: 50%;
    width: 25px;
}

.area-title p {
    margin-bottom: 0;
}

.section-padding {
    padding: 100px 0;
}

.padding-top {
    padding-top: 100px;
}

.padding-bottom {
    padding-bottom: 100px;
}

.red-bg {
    background: #ef476f;
    color: #fff;
}

.dark-bg {
    background: gray;
    color: #fff;
}

.section-caracteristicas {
    padding-bottom: 3rem;
}


.elije-plan .area-title h1{
    font-weight: 500;
}

.elije-plan .area-title h2{
    font-weight: 400;
}

.elije-plan  .area-icon{
    color: white;
}

.elije-plan .area-title-after::before,.elije-plan .area-title-after::after{
    background-color: white;
}


.elije-plan .gray-bg{
    padding: 3rem 2rem;
}


.text-white{
    color: white !important;
}


.gray-bg {
    background: #F4F4F4;
}

.red-bg .area-title h2,
.dark-bg .area-title h2,
.download-area .area-title h2,
.subscriber-area .area-title h2 {
    color: #ffffff;
}

.red-bg .area-title-after:after,
.red-bg .area-title-after:before,
.dark-bg .area-title-after:after,
.dark-bg .area-title-after:before,
.download-area .area-title-after:after,
.download-area .area-title-after:before,
.subscriber-area .area-title-after:after,
.subscriber-area .area-title-after:before {
    background: #ffffff;
}

.dark-bg .area-icon,
.download-area .area-icon,
.subscriber-area .area-icon {
    color: #ffffff;
}


/*--------------------------
    2. TOP AREA
---------------------------*/

.top-area {
    height: 100%;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.top-area-bg {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.top-area-bg::before {
    background: #2d2242;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}


/*---------------------------------
    2.1 MAINMENU AREA
-----------------------------------*/

.header-top-area {
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 999;
}

.mainmenu-area {
    position: relative;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    z-index: 9999 !important;
    box-shadow: 0 0 4px #ef476f33, 0 4px 8px #ef476f3b;
    box-shadow: 0 0 4px #ffffff17, 0 4px 8px #ffffff17;
}

.navbar-header {
    /*margin-top: 15px;*/
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.navbar {
    border-bottom: 0 none;
    border-top: 0 none;
    margin-bottom: 0;
}

.navbar-brand > img {
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.is-sticky .navbar-brand > img {
    max-width: 44%;
}

header .navbar-brand img {
    width: 74%;
}

ul#nav {
    float: right;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

ul#nav li a {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    color: #fff;
    font-family: "Montserrat", sans-serif;
    font-size: 11px;
    letter-spacing: 1px;
    padding: 40px 15px;
    position: relative;
    text-transform: capitalize;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

ul#nav li a::after {
    background: #ef476f none repeat scroll 0 0;
    bottom: 0;
    content: "";
    height: 2px;
    left: 0;
    position: absolute;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 0;
}

ul#nav li.active a::after,
ul#nav li:hover a::after {
    width: 100%;
}

ul#nav li a:hover,
ul#nav li.active a {
    color: #ef476f;
}

.is-sticky ul#nav li a {
    padding: 20px 15px;
    color: #ffffff;
}

.is-sticky ul#nav li a:hover,
.is-sticky ul#nav li.active a {
    color: #ef476f;
}

.is-sticky .navbar-header {
    margin-top: -3px;
}

.download-area img{
    width: 70px;
    /*padding-bottom: 1rem;*/
}

.download-area h2{
    font-size: 33px;
}

.download-area h2 span{
    font-family: fontfont_mark_pro;
    font-weight: unset;
}

.download-area .area-title {
    margin-bottom: 30px;
}


.download-area ul p{
    padding-top: 1rem;
    font-size: 1.3rem;
    line-height: 1.6;
}

.download-area {
    padding: 70px 0;
    padding-bottom: 50px;
}

.section-te-llamamos a{
    background-color: #bccd27;
    padding: 0.8rem 2rem;
    color: white;
    font-size: 2rem;
}


.section-te-llamamos .subscriber-form{
    text-align: center;
}

.section-te-llamamos .area-title h2 {
    font-size: 33px;
    line-height: 1.2;
    font-family: Fontfont_mark_pro_medium;
}

.section-te-llamamos .area-title h2.mobile{
    display: none;
}

.manifiesto .mobile{
    display: none;
}

.section-te-llamamos .area-title h2 span{
    font-family: fontfont_mark_pro;
    font-weight: unset;
}



.is-sticky .mainmenu-area {
    background: #271d39;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
    z-index: 99999;
}

.app-download-button {
    float: right;
    padding: 37px 0;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.app-download-button a {
    background: #bccd27;
    border-radius: 0px;
    color: white;
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    letter-spacing: 1px;
    padding: 10px;
    text-transform: uppercase;
}

.is-sticky .app-download-button a {
    background: #ef476f;
    color: #fff;
}

.is-sticky .app-download-button {
    padding: 17px 0;
}

.is-sticky .app-download-button a:hover {
    background: #fff none repeat scroll 0 0;
    color: #ef476f;
}


/*-----------------------------------
    2.2 WELCOME TEXT AREA
-------------------------------------*/

.welcome-text-area {
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
    color: #ffffff;
    overflow: hidden;
    font-size: 24px;
}

.welcome-text {
    position: relative;
    z-index: 9;
}

.welcome-text h3,
.welcome-text h1 {
    font-size: 36px;
    letter-spacing: 1px;
    margin-bottom: 30px;
    /*text-transform: uppercase;*/
}

.welcome-text h1 {
    font-size: 43px;
    margin-bottom: 15px;
    font-family: Fontfont_mark_pro_black;
    line-height: 1.2;
    padding-top: 14rem;
    padding-bottom: 3rem;
}

.welcome-text h5 {
    font-size: 3rem;
    font-family: fontfont_mark_pro_black;
    color: #bccd27;
}

.welcome-text h5 span{
    color: white;
}

.welcome-text h1 span{   
    font-family: Fontfont_mark_pro;
    /*font-size: 37px;*/
}

.welcome-text{
    padding-left: 5rem;
}

.welcome-text a.callYou{
    background-color: #bccd27;
    color: white;
    padding: 1.4rem 2.5rem;
    font-family: Fontfont_mark_pro_medium;
    font-size: 2.8rem;
}

.welcome-text p{
    padding-top: 5rem;
    font-size: 3.1rem;
    font-family: fontfont_mark_pro;
}

.section-caracteristicas .center-content img{
    width: 70%;
}

.section-caracteristicas .center-content .about-icon{
    text-align: center;
}

.section-caracteristicas .center-content .single-about {
    margin-bottom: 40px;
}

.section-caracteristicas .center-content .about-details h4 span {
    font-weight: 600;
}

.section-caracteristicas .center-content .about-details h4  {
    color: #f0114f;
}


    

.welcome-text h3 span {
    color: #ef476f;
}

.home-button {
    margin-top: 100px;
}

.home-button a {
    background: #ef476f none repeat scroll 0 0;
    border-radius: 5px;
    color: #ffffff;
    display: inline-block;
    font-size: 15px;
    letter-spacing: 2px;
    margin-right: 20px;
    padding: 15px 30px;
    text-align: center;
    text-transform: uppercase;
    width: 200px;
}

.home-button a:hover {
    background: #ffffff;
    color: #ef476f;
}

.welcome-background-layer {
    height: 100%;
    position: absolute;
    right: 0;
    text-align: right;
    top: 0;
    width: 100%;
}

.layer-one {
    bottom: 0;
    height: 75%;
    position: absolute;
    right: 15%;
    width: 100%;
    z-index: 2;
}

.layer-two {
    bottom: 0;
    height: 100%;
    position: absolute;
    right: 0;
    width: auto;
    z-index: 3;
}

.welcome-img {
    bottom: 0;
    height: 100%;
    left: 0;
    position: absolute;
    width: 100%;
}

.welcome-mockup-one {
    bottom: 18%;
    position: absolute;
    right: 4%;
    width: 42%;
    z-index: 9;
}

.welcome-mockup-two {
    bottom: 0;
    height: auto;
    position: absolute;
    right: 0;
    width: 50%;
    z-index: 6;
}

.layer-one img {
    height: 100%;
}

.layer-two img {
    height: 100%;
}

header #myCarousel{
    /*padding-left: 8rem*/
}

.welcome-text-area .container-fluid{
    padding-right: 0;
}

.whatsapp {
    position: fixed;
    font-size: 25px;
    bottom: 1.8rem;
    text-align: center;
    z-index: 9999;
    background: #25d366;
    text-transform: capitalize;
    left: 48px;
    padding: .5em .6em;
    border-radius: 100%;
    color: white;
}

.whatsapp span{
    display: none;
}

.modal-dialog {
    width: 707px;
}

.modal-body{
    padding: 0;
}

.modal-content{
    background-color: #30266d;
}

.modal .close{
    color: white;
    opacity: 1;
}

.fixedTeLlamamos{
    position: fixed;
    bottom: 15%;
    /*border-bottom-left-radius: 12px;
    border-top-left-radius: 12px;*/
    background-color: #bccd27;
    right: 0;
    color: white !important;
    font-size: 13px;
    padding: 6px 9px;
    z-index: 2;
    margin: auto;
    box-shadow: 0 0 5px 1px #6f6f6f6b;
    /*opacity: 0;*/
    transition: all .5s ease-in;
    text-decoration: none;
    font-weight: 700;
    padding-right: 1rem;
}

.fixedTeLlamamos span{
    font-family: Fontfont_mark_pro;
    padding-left: 0.5rem;
}

    

.animarBotonWhite {
    animation: efectShadowWhite 4s linear infinite;
}


@keyframes efectShadowWhite {
    0% {      
         box-shadow: 0 0 0 0 rgba(255,255,255,.7),0 0 0 0 rgba(255,255,255,.7)
    }

    40% {
        box-shadow: 0 0 0 10px rgba(255,255,255,.0),0 0 0 0 rgba(255,255,255,.7)
    }

    80% {
        box-shadow: 0 0 0 10px rgba(255,255,255,.0),0 0 0 10px rgba(255,255,255,0)
    }

    to {
        box-shadow: 0 0 0 0 rgba(255,255,255,0),0 0 0 10px rgba(255,255,255,0)
    }
}


header .carousel-inner img{
    /*width: 85%;*/
    padding-top: 11rem;
}

header .carousel-inner .text-right{
    /*padding-top: 15rem;*/
}

.carousel-control.left,.carousel-control.right {
    background: unset;
}


/*-----------------------------
    3. FEATURES AREA
------------------------------*/

.features-menu-triger {
    margin-top: 50px;
    /*width: 90%;*/
}

.single-menu-items {
    cursor: pointer;
    margin-bottom: 60px;
    text-align: center;
}

.single-menu-items h4 {
    font-size: 16px;
    margin-bottom: 30px;
    text-transform: uppercase;
}

.features-icon {
    background: #ef476f none repeat scroll 0 0;
    padding: 30px 0;
    -webkit-transition: background-color 0.3s ease-in 0s;
    transition: background-color 0.3s ease-in 0s;
    position: relative;
}

.features-icon i {
    border: 1px solid;
    border-radius: 50%;
    color: #fff;
    font-size: 50px;
    height: 100px;
    margin: 0 auto;
    padding-top: 26px;
    text-align: center;
    width: 100px;
}

.single-menu-items.slick-current .features-icon {
    background: #673bb7;
}

.features-icon::after {
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-top: 0 solid #673bb7;
    bottom: 0;
    content: "";
    left: 50%;
    margin-left: -30px;
    opacity: 0;
    position: absolute;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.single-menu-items.slick-current .features-icon::after {
    border-width: 30px;
    bottom: -28px;
    opacity: 1;
}

.single-features-details h3 {
    text-transform: uppercase;
}

.slick-slide:focus {
    outline: 0;
}

.slick-list {
    display: block;
    margin: 0;
    overflow-x: hidden;
    padding: 0;
    position: relative;
}

.slick-slide .slick-next,
.slick-slide .slick-prev {
    background: #ddd none repeat scroll 0 0;
    bottom: 0;
    color: #ef476f;
    display: inline-block !important;
    height: 50px;
    left: 50%;
    margin-bottom: 0;
    margin-left: -25px;
    margin-right: 20px;
    position: absolute;
    width: 50px;
    z-index: 99;
}

.slick-slide .slick-next {
    left: 55%;
}

.slick-dots {
    list-style: outside none none;
    margin: 10px 0 0;
    padding: 0;
    text-align: center;
}

.slick-dots li {
    display: inline;
}

.slick-dots li button {
    background: #ffffff none repeat scroll 0 0;
    border: 0 none;
    border-radius: 50%;
    display: inline-block;
    height: 15px;
    margin: 0 10px;
    text-indent: -9999px;
    width: 15px;
}

.slick-dots li.slick-active button {
    background: #ef476f none repeat scroll 0 0;
}


/*-----------------------------------
    4. FUN FACT AREA
------------------------------------*/

.fact-icon {
    border: 1px solid;
    border-radius: 50%;
    font-size: 50px;
    height: 100px;
    margin: 0 auto 20px;
    padding-top: 25px;
    text-align: center;
    width: 100px;
}

.single-fun-fact h3 {
    font-size: 40px;
    font-weight: 700;
    letter-spacing: 2px;
    line-height: 1;
}

.single-fun-fact {
    font-family: "Montserrat", sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.section-te-llamamos{
    padding-top: 150px;
}


/*-----------------------------
    5. ABOUT AREA
-------------------------------*/

.single-about {
    margin-bottom: 80px;
    padding-left: 90px;
    position: relative;
}

.about-icon {
    font-size: 60px;
    left: 0;
    position: absolute;
    top: 0;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.about-details h4 {
    text-transform: uppercase;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.single-about:hover .about-icon,
.single-about:hover .about-details h4 {
    color: gray;
}


/*------------------------------
    5.1 VIDEO AREA
--------------------------------*/

.about-bottom-video {
    position: relative;
}

.about-bottom-video img {
    width: 100%;
}

.video-area {
    color: #fff;
    height: 86%;
    left: 14%;
    overflow: hidden;
    position: absolute;
    top: 3.5%;
    width: 74%;
}

video#bgvid {
    left: 0;
    position: absolute;
    top: 0;
    width: 134%;
}

.video-area::before,
.video-area::after {
    background: #2d2242;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.7;
    position: absolute;
    top: 0;
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
    width: 100%;
    z-index: 2;
}

.video-area::before {
    background: rgba(0, 0, 0, 0) url("img/video/video_mockup_top.jpg") repeat scroll center center / cover;
    opacity: 1;
}

.video-area.palying::before,
.video-area.palying::after {
    opacity: 0;
}

video {
    width: 100%;
}

.video-area > button {
    background: transparent none repeat scroll 0 0;
    border: 0;
    border-radius: 50%;
    font-size: 50px;
    height: 100px;
    width: 100px;
    position: absolute;
    left: 50%;
    margin-left: -50px;
    top: 50%;
    margin-top: -50px;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    z-index: 9;
}
.video-area > button:hover {
  color: #ef476f;
}
.video-area > button .fa {
    border: 5px solid;
    border-radius: 50%;
    height: 100px;
    padding-top: 20px;
    width: 100px;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.video-area > button .fa-play {
    padding-left: 15px;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.video-area > button .fa-pause {
    opacity: 0;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.video-area > button:hover .fa-pause {
    opacity: .3;
}


/*---------------------------------
    6. SCREENSHOT AREA
----------------------------------*/

.screenshot-area .area-title {
    margin-bottom: 0;
}

.screenshot-slider .owl-item {
    padding-top: 80px;
}

.screenshot-slider .owl-item img {
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.screenshot-slider .owl-item img:hover {
    -webkit-transform: translateY(-40px);
    transform: translateY(-40px);
}


/*------------------------------
    7. PRICEING AREA
-------------------------------*/

.single-price {
    background: #fff none repeat scroll 0 0;
}

.price-title-and-rate {
    background: #673bb7 none repeat scroll 0 0;
    border-radius: 10px 10px 0 0;
    color: #fff;
    padding: 20px 0;
    position: relative;
    z-index: 1;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    padding-bottom: 8px;
}

.price-title-and-rate::after {
    /*background: #ef476f none repeat scroll 0 0;*/
    content: "";
    height: 100%;
    left: 50%;
    margin-left: -70px;
    position: absolute;
    top: 0;
    -webkit-transform: skewX(-30deg);
    transform: skewX(-30deg);
    width: 140px;
    z-index: -1;
}

.price-title {
    font-family: "Fontfont_mark_pro", sans-serif;
    letter-spacing: 2px;
    margin-bottom: 5px;
    text-transform: uppercase;
    font-size: 1.8rem;
}

.price-title-and-rate h3 {
    font-size: 50px;
    font-weight: 600;
    margin-bottom: 0;
    font-family: Fontfont_mark_pro_black;
    color: #ef476f;
    font-size: 7rem;
    line-height: 1;
}

.price-details {
    background: #fff none repeat scroll 0 0;
    padding-top: 20px;
}

.elije-plan .price-title h3{
    color: #ef476f;
    font-size: 7rem;
}

.price-title-and-rate .text-megas{
    font-family: fontfont_mark_pro_black;
    font-size: 2.5rem;
}

.elije-plan .price-details{
    font-size: 1.23rem;
    text-align: left;
    padding-left: 2rem;
}


.elije-plan .price-details p:first-child{
    text-align: center;
    margin-bottom: 1.7rem;
    line-height: 1.3;
}

.elije-plan .ultraPlan .price-details p{
    line-height: 1.5;
}

.elije-plan .area-title{
    margin-bottom: 30px;
}

.elije-plan{
    padding: 55px 0;
} 

.elije-plan .ultraPlan .price-details {
    display: flex;
    align-items: center;
}

.elije-plan .price-details p:nth-child(2n){
    margin-bottom: 0;
}

.elije-plan .price-details ul li span{
    padding-left: 1rem;
}



.price-details ul {
    list-style: outside none none;
    margin: 0;
    padding: 0;
    line-height: 0;
}

.price-details ul li {
    padding: 5px 0;
}

.price-details ul li i {
    color: #673bb7;
    font-size: 1rem;
}

.price-button {
    padding: 40px 0;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.price-button a {
    background: #ef476f none repeat scroll 0 0;
    border-radius: 10px;
    color: #fff;
    display: inline-block;
    font-size: 17px;
    /*font-weight: 600;*/
    left: 50%;
    letter-spacing: 2px;
    margin: auto;
    padding: 8px;
    top: -20px;
    width: calc(100% - 30%);
    font-family: fontfont_mark_pro;
}

.ultraPlan .price-title-and-rate{
    display: flex;
    align-items: center;
}

.ultraPlan .price-title-and-rate .megas{
    font-size: 2.8rem;
    color: #ef476f;
}

.ultraPlan .price-title-and-rate .price-title{
    font-size: 2.5rem;
    text-align: left;
    padding-left: 4rem;
}

.ultraPlan .price-title-and-rate .text-megas{
    text-align: left;
    padding-left: 4rem;
}

.single-price.active .price-title-and-rate,
.single-price:hover .price-title-and-rate {
    background: #2d2242 none repeat scroll 0 0;
}

.price-button a:hover {
    background: #673bb7 none repeat scroll 0 0;
    color: #fff;
}


/*------------------------------
    8. DOWNLOAD AREA
--------------------------------*/

.download-area {
    color: #fff;
    position: relative;
}

.download-area-bg {
    /*background: rgba(0, 0, 0, 0) url("img/download_area_bg.jpg") no-repeat fixed center center / cover;*/
    height: 100%;
    left: 0;    
    top: 0;
    width: 100%;
    position: absolute;
}

.download-area-bg::after {
    background: #ef476f none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    /*opacity: 0.8;*/
    position: absolute;
    top: 0;
    width: 100%;
}

ul.download-button {
    list-style: outside none none;
    margin: 0;
    padding: 0;
    text-align: center;
}

ul.download-button li {
    display: inline;
}

ul.download-button li a {
    border-radius: 5rem;
    display: inline-block;
}

ul.download-button li a i {
    margin-right: 10px;
}

ul.download-button li a:hover {
    color: #fff;
    background: #673bb7;
}


/*------------------------------
    9. TESTMONIAL AREA
-------------------------------*/

.testmonial-author-name-title-img {
    min-height: 150px;
    padding-left: 180px;
    position: relative;
}

.author-img {
    border-radius: 50%;
    height: 150px;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 150px;
}

.author-img img {
    background: #ef476f none repeat scroll 0 0;
    border-radius: 50%;
    padding: 3px;
}

.testmonial-author-name-title-img h4 {
    font-size: 24px;
    text-transform: uppercase;
}

.testmonial-author-name-title-img h5 {
    font-weight: 500;
    letter-spacing: 1px;
}

.testmonial-author-social-bookmark ul {
    list-style: outside none none;
    margin: 30px 0 0;
    padding: 0;
}

.testmonial-author-social-bookmark ul li {
    display: inline;
}

.testmonial-author-social-bookmark ul li a {
    background: #ef476f none repeat scroll 0 0;
    border: 0 none;
    border-radius: 50%;
    color: #fff;
    display: inline-block;
    height: 35px;
    margin-right: 10px;
    padding-top: 5px;
    text-align: center;
    width: 35px;
}

.testmonial-author-social-bookmark ul li a:hover {
    background: #271d39 none repeat scroll 0 0;
}

.testmonial-author-details {
    font-size: 18px;
    font-style: italic;
    font-weight: 400;
    padding: 30px 100px;
    text-align: center;
    position: relative;
}

.testmonial-author-details::after {
    content: "\f10d";
    font-family: fontawesome;
    font-size: 40px;
    height: 60px;
    left: 35px;
    position: absolute;
    top: 15px;
    width: 60px;
    color: #271d39;
}

.single-client {
    display: inline-block;
    float: left;
    margin: 0 0.5%;
    width: 24%;
}

.testmonial-area .owl-item {
    padding-top: 40px;
    padding-bottom: 10px;
}

.single-client img {
    -webkit-transition: 0.3s;
    transition: 0.3s;
    margin: 0 7px;
}

.single-client.active img {
    box-shadow: 0 0 7px #464646;
    margin-top: -20px;
}


/*------------------------------
    10. SUBSCRIBER AREA
-------------------------------*/

.subscriber-area {
    color: #fff;
    position: relative;
}

.subscriber-area-bg {
    background: rgba(0, 0, 0, 0) url("img/optilink/IMAGEN-PARALAX.jpg") no-repeat fixed center center / cover;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    background-size: contain;
}

.parallax-footer .subscriber-area-bg{
    background: rgba(0, 0, 0, 0) url("img/optilink/imagen-footer.jpg") no-repeat fixed center center / cover;
} 

.parallax-footer .subscriber-area-bg::after{
    background: #ef476f2e none repeat scroll 0 0;
}

.ubication h1{
    color: #ef476f;
    font-size: 4.6rem;
    font-family: Fontfont_mark_pro_black;
    line-height: 1.2;
}

.align-center{
    display: flex;
    align-items: center;
}

.manifiesto img{
    width: 60%;
}

.manifiesto{
    padding: 5rem 0;
}
.features-area{
    background-color: #2d2242;
}

.features-area .area-title h2{
    font-size: 33px;
}

.features-area .area-icon{
    color: white;
}

.features-area .area-title-after::before,.features-area .area-title-after::after{
    background: white none repeat scroll 0 0;
}

.features-area .features-menu-triger img{
    width: 90px;
    margin: auto;
}

.features-area h3{
    font-size: 1.7rem;
}

.features-area .features-details-slider p{
    font-size: 1.7rem;
    font-weight: 300;
    font-family: Avenir;
}

.features-area {
    padding: 50px 0;
}


.features-area .area-title {
    margin-bottom: 20px;
}

.banner-flotante img{
    width: 80%;
}

.banner-flotante {
    padding: 40px 0;
}


.manifiesto p{
    font-size: 1.62rem;
    color: black;
}

.ubication h1 span{
    color: #ef476f;
    font-size: 4.6rem;
    font-family: fontfont_mark_pro;
}

.subscriber-area-bg::after {
    background: #ef476f none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.1;
    position: absolute;
    top: 0;
    width: 100%;
}

.subscriber-form form {
    border-radius: 50px;
    height: 50px;
    position: relative;
    width: 100%;
}

.subscriber-form input {
    border: 0 none;
    border-radius: 50px;
    color: #363636;
    height: 100%;
    left: 0;
    padding: 10px 20px;
    position: absolute;
    top: 0;
    width: 100%;
}

.subscriber-form input:focus {
    outline: 0;
}

.subscriber-form button {
    background: #673bb7 none repeat scroll 0 0;
    border: 0 none;
    border-radius: 0 50px 50px 0;
    color: #ffffff;
    font-size: 2.1rem;
    height: 100%;
    letter-spacing: 2px;
    position: absolute;
    right: 0;
    text-transform: uppercase;
    top: 0;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 38%;
    font-weight: 300;
}

.parallax-footer .subscriber-form button {
    background: #bccd27 none repeat scroll 0 0;
}

.parallax-footer .area-title-after::before, .parallax-footer .area-title-after::after{
    width: 0;
}



.subscriber-form button i{
    font-size: 2rem;
}

.parallax-footer.subscriber-area .area-title h2{
    font-size: 34px;
    line-height: 1.2;
    font-family: fontfont_mark_pro_medium;
}

.parallax-footer.subscriber-area .area-title h2 span{
    font-weight: 300;
    font-size: 33px;
    font-family: fontfont_mark_pro;
}

.parallax-footer.subscriber-area .area-title{
    margin-bottom: 40px;
}

.subscriber-form input::-webkit-input-placeholder {
   font-size: 2.3rem;
   color:#36363682;
   padding-left: 2rem;
}
.subscriber-form input:-moz-placeholder {
   font-size: 2.3rem;
   color:#36363682;
   padding-left: 2rem;
}
.subscriber-form input:-ms-input-placeholder { 
   font-size: 2.3rem; 
   color:#36363682;
   padding-left: 2rem;
}

.subscriber-form button:hover {
    background: #ef476f none repeat scroll 0 0;
    color: #fff;
}

.subscriber-form label {
    color: #ef476f;
    left: 0;
    margin: 0;
    position: absolute;
    text-align: center;
    top: -30px;
    width: 100%;
}

.subscriber-form label.valid {
    top: 10px;
}


/*------------------------------
    11. FOOTER AREA
-------------------------------*/

.footer-area {
    background: #271d39 none repeat scroll 0 0;
    border-top: 1px solid #ef476f;
    color: #fff;
    padding: 25px 0;
}

.footer-area a {
    color: white;
}

.footer-area a:hover {
    color: #ef476f;
}

.footer-area .footer-copyright span {
    color: #ef476f;
    padding: 0 0.3rem;
}

.footer-area .footer-copyright a:hover {
    color: #ef476f;
}

.footer-area .phone p {
    font-size: 2.3rem;
    letter-spacing: 0.8px;
}

.footer-area .location p {
    font-size: 1.6rem;
    letter-spacing: 0.8px;
    line-height: 1.3;
}

.footer-area .location p span {
    /*font-family: fontfont_mark_pro_medium;*/
        font-weight: 600;
}

.footer-area .footer-copyright i{
    font-size: 1.8rem;
    color: #f0114f;
    /*background-color: white;*/
}

.text-right{
    text-align: right;
}

.footer-area .padd-left-0{
    padding-left: 5px;
}

.footer-area .location i{
    font-size: 2.5rem;
    color:#ef476f;
}

.footer-area .phone i{
    font-size: 2rem;
    color:#ef476f;
}

.footer-area .footer-social-bookmark i{
    font-size: 2.3rem;
}

.footer-area .row.wow.fadeIn{
    display: flex;
    align-items: center;
}

.footer-area .footer-social-bookmark p{
    font-size: 1.8rem;
    letter-spacing: 0.8px;
    padding-left: 1.3rem;
}

.footer-area .footer-social-bookmark li{
    padding-right: 1.3rem;
}

.footer-area .location{
    padding-top: 0.8rem;
}








.footer-copyright p {
    margin-bottom: 0;
    /*margin-top: 10px;*/
    font-size: 1.5rem;
    letter-spacing: 0.2px;
}

.footer-social-bookmark ul {
    list-style: outside none none;
    margin: 4px 0 0;
    padding: 0;
}

.footer-social-bookmark ul li {
    display: inline;
}

.footer-social-bookmark ul li a {
    background: #ef476f none repeat scroll 0 0;
    border-radius: 50%;
    color: #fff;
    display: inline-block;
    font-size: 16px;
    height: 35px;
    margin-right: 4px;
    padding-top: 5px;
    text-align: center;
    width: 35px;
}

.footer-social-bookmark ul li a:hover {
    color: #ef476f;
    background: #fff;
}

.footer-logo{
    text-align: right;
}

.footer-logo img{
    width: 62%;
    padding-right: 2rem;
}


/*------------------------------
    12. SCROLL TO TOP
-------------------------------*/

a.scrolltotop {
    background: #ef476f none repeat scroll 0 0;
    bottom: 20px;
    color: #fff;
    display: none;
    font-size: 20px;
    height: 50px;
    padding-top: 10px;
    position: fixed;
    right: 20px;
    text-align: center;
    width: 50px;
    z-index: 99;
    box-shadow: 0 0 0 7px transparent;
}

a.scrolltotop:hover {
    box-shadow: 0 0 0 0 #272727;
    background: #272727;
}