/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
    Created on : Dec 8, 2016, 12:25:49 PM
    Author     : grupohost
*/

.rightside{
    text-align: right;
    padding-top: 25px;
}

.titleheading{
    position: relative;
}

.titleheading span{}


.titleheading::before{
    bottom: 29px;
    content: "";
    display: block;
    height: 3px;
    left: 0%;
    margin: 0px;
    position: absolute;
    width: 70px;
}

.titleheading::after{
    background: rgba(133, 133, 133, 0.5);
    content: "";
    display: block;
    height: 1px;
    margin: 10px auto 0px;
    margin-left: 0;
    width: 150px;
}


.yellow{
    color:#EABD3F !important;
}

.green{
    color:#6EE548 !important;
}

.blue{
    color:#0D70FF !important;
}

.orange{
    color:#EF9645 !important;
}

.red{
    color:#EF4545 !important;
}

.transparent{
    opacity:.5;
}
body{
    font-family: 'Open Sans', sans-serif;
    font-size:18px;
    color:#544953;
}

/* The sticky class is added to the header with JS when it reaches its scroll position */
.sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99;
    background: #fff;
    border-bottom: 1px solid #ccc;
    text-align: center;
}

/* Add some top padding to the page content to prevent sudden quick movement (as the header gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content {
    padding-top: 102px;
}


.grab{
    cursor: grab;
}

.pagination .nav li.disabled:hover a{
    color:#ccc;
}

.nivelesitem hr{
  border-bottom:2px solid #7AC254;
    width:57px;
    margin:10px auto;
}

.nivelesitem h2{
    font-size:22px;
}

.nivelesitem li{
    text-align: left;
    list-style: none;
}

.nivelesitem li::before {
    content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
    color: #7AC254; /* Change the color */
    font-weight: bold; /* If you want it to be bold */
    display: inline-block; /* Needed to add space between the bullet and the text */
    width: 1em; /* Also needed for space (tweak if needed) */
    margin-left: -1em; /* Also needed for space (tweak if needed) */
}

.pagination .nav li a{
    padding:10px;
    border:1px solid #efefef;
    margin-right:5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.pagination .nav li:hover a{
    color:#000;
}


.leftbuttonround{
    -webkit-border-radius: 5px;
    -webkit-border-top-right-radius: 0px;
    -webkit-border-bottom-right-radius: 0px;
    -moz-border-radius: 5px;
    -moz-border-radius-topright: 0px;
    -moz-border-radius-bottomright: 0px;
    border-radius: 5px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
;}

.rightbuttonround{
    -webkit-border-radius: 0px;
    -webkit-border-top-right-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius: 0px;
    -moz-border-radius-topright: 5px;
    -moz-border-radius-bottomright: 5px;
    border-radius: 0px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

ul.nav a.active{
    background-color:#E8E3E8 !important;
}
a, a:hover{
   color:#544953;
   text-decoration: none;
}

.height87v{
    height: 70vh;
}

.height60v{
    height: 60vh;
}
.font{
    font-family: 'Quicksand', sans-serif;
    font-weight: 300;
}

.rotate{
    transform: rotate(-5deg);
}

.fontd{
}
.no-padding{
    padding: 0;
}

.no-margin{
    margin: 0;
}

.titleunder{
    font-weight: lighter;
}

.titleunder:after{
    content: "";
    display: block;
    width: 70px;
    border-bottom: 3px solid #fff;
    margin: 25px 0;
}

.pillgas{
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#404041+0,585859+50,404041+51,2a2a2b+100 */
    background: #404041; /* Old browsers */
    background: -moz-linear-gradient(left, #404041 0%, #585859 50%, #404041 51%, #2a2a2b 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #404041 0%,#585859 50%,#404041 51%,#2a2a2b 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #404041 0%,#585859 50%,#404041 51%,#2a2a2b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#404041', endColorstr='#2a2a2b',GradientType=1 ); /* IE6-9 */
    padding: 5px 15px;
    -webkit-border-radius: 7px;
    border-radius: 7px;
    font-size: 27px;
    text-align: center
}

.gillgasd{
    padding: 5px 15px;
    -webkit-border-radius: 0 0 7px 7px;
    border-radius: 0 0 7px 7px;
    font-size: 21px;
    text-align: center;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#26a3da+0,26a3da+50,217ebc+51,26a3da+100 */
    background: #26a3da; /* Old browsers */
    background: -moz-linear-gradient(left, #26a3da 0%, #26a3da 50%, #217ebc 51%, #26a3da 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #26a3da 0%,#26a3da 50%,#217ebc 51%,#26a3da 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #26a3da 0%,#26a3da 50%,#217ebc 51%,#26a3da 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#26a3da', endColorstr='#26a3da',GradientType=1 ); /* IE6-9 */
}

.pillvgas{
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#404041+0,585859+50,404041+51,2a2a2b+100 */
    background: #6dd966; /* Old browsers */
    background: -moz-linear-gradient(left, #6dd966 0%, #6dd966 50%, #0ed800 51%, #6dd966 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #6dd966 0%,#6dd966 50%,#0ed800 51%,#6dd966 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #6dd966 0%,#6dd966 50%,#0ed800 51%,#6dd966 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6dd966', endColorstr='#6dd966',GradientType=1 ); /* IE6-9 */padding: 5px 15px;
    -webkit-border-radius: 7px;
    border-radius: 7px;
    font-size: 27px;
    text-align: center
}

.gillwgasd{
    padding: 5px 15px;
    -webkit-border-radius: 0 0 7px 7px;
    border-radius: 0 0 7px 7px;
    font-size: 21px;
    text-align: center;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#26a3da+0,26a3da+50,217ebc+51,26a3da+100 */
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+50,efefef+51,efefef+100 */
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(left, #ffffff 0%, #ffffff 50%, #efefef 51%, #efefef 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #ffffff 0%,#ffffff 50%,#efefef 51%,#efefef 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #ffffff 0%,#ffffff 50%,#efefef 51%,#efefef 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#efefef',GradientType=1 ); /* IE6-9 */}

.modal-body .select2-container{
    width:250px !important;
}

.products .select2-container{
    width:100% !important;
}

img{
    max-width: 100%;
}
.relative{
    position: relative;
}

.mainmenu {
    padding: 10px;
}

.mainmenu li.current a{
    color: #00abec;
    font-weight:bold;
}

.mainmenu li li a{
    padding: 10px;
    display: block;
    text-transform:none;
}

.mainmenu li a:hover{
    background-color: #00abec;
    color:#fff !important;
}

.border-red{
    border-bottom:9px solid #EE4137;
}

.red{
    color:#EE4137;
}

.titleborder,.titleborderd{
    position: relative;
}

.mainmenu .open>a{
    background-color:#444 !important;
}

.titleborder:before {
    content: "";
    width: 40px;
    bottom: -20px;
    transform: rotate(5deg);
    left: 50%;
    margin-left: -20px;
    position: absolute;
    border-top: 7px solid #ccc;
}

.titleborderd:before {
    content: "";
    width: 40px;
    bottom: -20px;
    transform: rotate(5deg);
    left: 0;
    position: absolute;
    border-top: 7px solid #ccc;
}

select{
    background-color: white;
    display: inline-block;

    line-height: 20px !important;
    background-image:
    linear-gradient(45deg, transparent 50%, white 50%),
    linear-gradient(135deg, white 50%, transparent 50%),
    linear-gradient(to right, #6DD966, #6DD966) !important;
    background-position:calc(100% - 23px) calc(1em + 2px), calc(100% - 18px) calc(1em + 2px), 100% 0 !important;
    background-size:
    5px 5px,
    5px 5px,
    2.5em 2.5em !important;
    background-repeat: no-repeat !important;
    margin: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.border-top{
    border-top:1px solid #efefef;
}

.border-bottom{
    border-bottom:1px solid #efefef;
}
.border-bottom-pink{
    border-bottom:5px solid #EC008C;
}


h1{
    font-size: 40px;
    position: relative;
    display: inline-block;
    padding: 0px 0px 30px;
    margin-bottom: 0px;
}

h3{
    font-size: 25px;
}

.absolute{
    position: absolute;
}

.fixed{
    position: fixed;
}

.no-padding-margin{
    margin:0;
    padding:0;
}


.circle{
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

.shadowpink{
    -webkit-box-shadow: -7px 7px 0 0 rgba(236,0,140,.3);
    box-shadow: -7px 7px 0 0 rgba(236,0,140,.3);
}

.shadowgrey{
    -webkit-box-shadow: -5px 5px 0 0 rgba(0,0,0,.3);
    box-shadow: -5px 5px 0 0 rgba(0,0,0,.3);
}

.pink{
    color:#EC008C !important;
}

.bgpink{
    background:#EC008C !important;
}

.black{
    color:#000;
}

.height100{
    height: 100%;
}

.height100px{
    height: 100px;
}

.bgdarkblue{
    background-color:#001a43;
}

.bgpink{
    background-color:#EC008C;
}

.cabecera a:focus, .cabecera a:hover {
    text-decoration: none;
    background-color: #000;
}

.bggrey{
    background-color:#f9f9f9;
    padding: 10px;
}


.bggreyd{
    background-color:#544953;
}

.textshadow{
    text-shadow:1px 1px 1px rgba(0,0,0,.5);
    width:80%;
}

.padding{
    padding: 40px;
}

.padding-horizontal{
    padding:0 40px;
}

.width60{
    max-width: 60%;
}

.width80{
    max-width: 80%;
}

.width100{
    width:100%;
}

.z-index1{
    z-index: 1;
}

.z-index2{
    z-index: 2;
}

.z-index3{
    z-index: 3;
}

.z-index4{
    z-index: 4;
}

.z-index101{
    z-index: 101;
}


.no-padding-margin-left{
    margin-left:0;
    padding-left:0;
}

.bgwhite{
    background:#fff;
}

.white,.white a,.white p{
    color:#fff !important;
}

.red{
    color:#e91b4a;
}

.grey{
    color:#999;
}

.carousel-item{
}

.bgred{
    background-color:#ee4238;
}

.hoverblue:hover{
    background: #00b3fd;
    color: #fff;
}

.bgblack{
    background-color: rgba(0,0,0,.5);
}

.bgblacka{
    background-color: rgba(0,0,0,1);
}

.bgblue{
    background-color:#30c1de;
}

.blue{
   color:#116DB4;
}

.bgblued{
    background-color:#116DB4;
}

.bgrightdiagonal{
    background-image:url('../img/bgdiagonal.png');
    background-position: right bottom;
    background-repeat: no-repeat;
    background-size: 34% 487px;
    padding-right: 47px;
}
.dotted{
    border-top:none;
    border-left:none;
    border-right:none;
    border-bottom: 1px dotted #fff;
}

.border{
    border:1px solid #dee2e6 !important;
}

.no-margin-padding{
    margin:0;
    padding: 0;
}

.no-border{
    border:none;
}

.borderbottom{

    border-bottom:1px solid #D3CDD3 !important;
}

.bggrey .leftless{
    border-left:none !important;;
    border-top:1px solid #544953;
    border-bottom:1px solid #544953;
    border-right:1px solid #544953;
    padding: 10px;
}

.selected.iconservice a {
    border-bottom: 5px solid #EC008C;
}

.border-left{
    border-left:1px solid #2e3192;
}

.border-right{
    border-right:1px solid #efefef;
}

.borderwhite{
    border:1px solid #fff;}

.bgimg{
    background-repeat:no-repeat;
    background-position:center;
    background-size:160% auto;
}

.bgimgh{
    background-repeat:no-repeat;
    background-position:center;
    background-size:100% auto;
}

.bgimgt{
    background-repeat:no-repeat;
    background-position:center;
    background-size:auto 80% ;
}

.bgimgd{
    background-repeat:no-repeat;
    background-position:center;
    background-size:auto 160%;
}

.bgimgvertical{
    background-size:auto 100%;
}

.titlegrey{
    color:#808080;
    font-size:43px;
}

.green{
    color:#b6dc77;
}

.bggreen{
    background-color:#6DD966;
}

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

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

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

.border-round{

    border-radius: 25px;
}
.iconsinside{
    line-height: 190px;
    text-align: center;
}

.justified{
    text-align: justify;
}

.menumain ul li{
    display:inline-block;
    position: relative;
}

.menumain ul li a{
    display:block;
    padding: 15px 30px;
}

.socialicons a{
    color:#4d4959;
}

.bold{
    font-weight: 800;
}

.light{
    font-weight: 200;
}

.uppercase{
    text-transform: uppercase;
}

.letterspacing{
    letter-spacing: 2px;
}

.letterspacingsm{
    letter-spacing: 1px;
}

.iconservice a{
    color: #323232;
    width: 100%;
}

.iconservice p{
    margin: 0;
    padding: 0;
}

.iconservice a i{
    margin-bottom: 20px;
    color:#ccc;
}


.selected.iconservice a i{
    margin-bottom: 20px;
    color:#EC008C;
}


.dt-sc-title.with-desc span:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    border-bottom: 2px solid #f0f0f0;
    display: inline-block;
    width: 203px;
    height: 2px;
    top: 0;
    margin: auto 0;
    z-index: 0;
}

.dt-sc-title.with-desc span {
    position: relative;
    clear: both;
    display: block;
    top: -10px;
    width: 470px;
    margin: 0 auto;
}

.dt-sc-title.with-desc span:after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    border-bottom: 2px solid #f0f0f0;
    display: inline-block;
    width: 203px;
    height: 2px;
    top: 0;
    margin: auto 0;
    z-index: 0;
}

.dt-sc-title {
    position: relative;
    clear: both;
    text-align: center;
    width: 100%;
}

footer .nav a{
    padding:5px 0;
    font-size:14px;
}

.margin-right{
    margin-right:25px;
}

.margin-left-small{
    margin-left:23px;
}

.margin-vertical{
    margin:45px 0;
}

.bottom{
    bottom:0;
}

.bottom35{
    bottom:35px;
}

.top{
    top:0;
}

.left{
    left:0;
}

.right{
    right:0px;
}

.margin-vertical-small{
    margin:25px 0;
}

.margin-vertical-xsmall{
    margin:15px 0;
}

.margin-bottom-small{
    margin-bottom:15px;
}

.margin-bottom-xsmall{
    margin-bottom:10px;
}

.margin{
    margin:45px;
}

.pointer, .pointer:hover{
    cursor: pointer;
}

.invisible{
    display:none;
}

.margin-right-small{
    margin-right:10px;
}

.margin-horizontal-small{
    margin:0 15px;
}

.inline-block{
    display:inline-block !important;
}

.inline-flex{
    display:inline-flex;
}

.paddingsm{
    padding:15px;
}

.paddingxs{
    padding:5px;
}

.padding-right-medium{
    padding-right: 45px;
}


.padding-vertical{
    padding:75px 0;
}

.padding-vertical-medium{
    padding:35px 0;
}

.block{
    display:block;
}

.margin-top{
    margin:75px 0 0 0;
}

.margin-top-small{
    margin-top:25px;
}

.margin-top-xsmall{
    margin-top:15px;
}

.margin-bottom{
    margin-bottom:40px;
}

.margin-bottom-small{
    margin-bottom:25px;
}

.margin-vertical{
    margin:75px 0;
}

.padding-vertical-small{
    padding:25px 0;
}

.padding-vertical-xsmall{
    padding:10px;
}

.margin-vertical-small{
    margin:25px 0;
}

.margin-vertical-xsmall{
    margin:10px 0;
}


.padding-small{

    padding: 10px 20px;
}

.padding-xsmall{
    padding:5px;
}

.round{
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
}

.bg-grey{
    background:#f4f4f4;
}

.bg-light-blue{
    background:#1bb7ea;
}

.width30{
    width:30%;
}

.width60{
    width:60%;
}

.width80{
    width:80%;
}

.height150{
    height:150px;
}

.height75{
    height:75px;
}

.height250{
    height:250px;
}

.height350{
    height:350px;
}

.height93vh{
    height: 93vh;
}


#datepicker{
    background-image:url(/img/calendar-3-xxl.png);
    background-repeat:no-repeat;
    background-position: 96% 4px;
    background-size: auto 80%;
}

.height40vh{
    height: 40vh;
}

.margin0auto{
    margin:0 auto;
}

.widthicon{
    width:60px;
}

.bg-white{
    background-color:#fff !important;
}

.lightgrey{
    background:#f4f4f4 !important;
    color:#333;
}

.float-right{
    float: right;
}

.float-left{
    float: left;
}

.bootstrap-select div.dropdown-menu {

    display: block !important;
    height: 300px !important;
    overflow: auto !important;
    width: 300px !important;
}

.pc{
        display:block;
    }

.ipad{
        display:none;
    }

.cell{
        display:none;
}

.dl-menu{
    position:absolute;
    top:50px;
    right: 0px;
    padding: 0;
    z-index: 999;
}

.dl-menu a{
    display:block;
    padding:10px;
    margin-bottom:5px;
    color:#fff !important;
    text-align: left;
}

.dl-menu li{
    display:block;
}


.logoside{
    with:195px;
}

.titlepersonalized{
    margin-top: 200px;
}

.youtubevideo, .iteminstructor{
    margin-top: 75px;
}

.imgtestimony{
    width:130px;
    height: 130px;
}

@media (max-width: 990px) {

    .nuestrosistema iframe{
        height:450px !important;
    }

    .logoside img{
        width: 200px;
    }

    .ipad{
        display:block;
    }

    .itemport{
        background-size:100%;
    }

    .logoside{
        text-align: left;
    }

    .pc{
        display:none;
    }

    .dt-sc-title.with-desc span {
        width: 100%;
    }

    .dt-sc-title.with-desc span:after {
        width: 42%;
    }

    .dt-sc-title.with-desc span:before {
        width: 42%;
    }

    footer, footer .align-right{
        text-align: center;
    }

    .bgimg {
        background-repeat: no-repeat;
        background-position: center;
        background-size: 200% auto;
    }

    .navigationanchor li a{
        font-size: 14px;
    }
}

@media (max-width: 650px) {

    .nuestrosistema iframe{
        height:200px !important;
    }

    .btnupsale {
        font-size: 1.5rem !important;
    }

    .texture.padding-vertical{
        padding:25px 0 !important;
    }
    .imgtestimony{
        width:100%;
        height: 260px;
        margin-bottom: 25px;
    }

    #upsaleModal h2.light{
        font-size: 22px;
        font-weight: bold;
    }

    #upsaleModal p{
        font-size: 16px;
        text-align: justify;
    }

    #upsaleModal p.align-center{
        text-align: center;
    }
    .alertspace{
        font-size: 13px;
        text-align: center;
    }

    .ratingspace{
        float:none !important;
        text-align: center;
        width: 100%;
    }

    .bannerhome{
        text-align:center
    }



    .titlepersonalized{
        margin-top: 30px;
        font-size:21px;
    }

    .aprendecon h2{
        font-size:25px;
    }

    .aprendecon p{
        font-size:14px;
    }

    .youtubevideo,.iteminstructor{
        margin-top: 30px;
    }

    .rightside{
        padding-top: 0;
    }

    .logoside{
        with:115px;
    }

    .allspacemenmovile{
        margin-top:16px;
    }

    h1 {
        font-size: 30px;
    }

    .footer{
        text-align: center;
    }

    .ipad{
        display:none;
    }

    .cell{
        display:block;
    }

    .bgimgh {
        background-repeat: no-repeat;
        background-position: center;
        background-size: auto 100%;
    }

    .pc{
        display:none;
    }

    .steps .badge {
        font-size: 64%;
    }


}