/* - - - - - - - - - - - - - - - 
CSS principal
Desarrollado por: Upgrade Diseño Interactivo
Para: 
Fecha: 
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ */

/* ====== F O N T S ====== */


/* ====== F O N T S (end) ====== */

/*Eliminamos márgenes del "body" */
html, body{ margin:0px; padding:0px; height:100%; }

#big-container /* Div que va a manterner el "footer" siempre al fondo */
{
    min-height:100% !important;
    overflow-x: hidden;	
}

/* GENERAL */

a { text-decoration: none; }

/* HEADER */
header{
	display: flex;
    width: 100%;
    height: 120px;
    position: absolute;
    justify-items: center;
    align-items: center;
    position: fixed;
    z-index: 2;
    background-color: #ffffff00;
}

#logo {
 	width: 250px;
 	margin: auto;
}
#menu_header{
    width: 600px;
    display: flex;
    margin: auto;
}
#menu_header a{
	margin: auto;
	color: #D8D8D8;
    padding: 10px 35px 5px 35px;
    border-radius: 25px;	
    border: 2px solid transparent;
    font-weight: bold;
    color: #FFFFFF;
}
#menu_header a:hover{
    border: 2px solid #7DBE50;
    font-weight: inherit;
}
#menu_header a:hover ~ .selected_btn{
    border: none ;
}
#menu_header_mobile{
	display: none;
}
.content_menu_mobile{
    display: none !important;
}
/* FOOTER */

#footer_cut {
    padding-top:50px;
    clear:both; 
    padding-top: 0px;
}
footer { 
/*		margin-top: -50px;  */
	height: 50px; 
    background-color: rgb(246,246,246);
    min-height: 100px;
    display: flex;
    justify-content: space-between;
}
/* FOOTER */


/**********SECCIONES**********/
/* HOME */

#home{
	/*background-image: url('../../_images/home.jpg');*/
  /*  background-image: linear-gradient(rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 1%, rgba(0, 0, 0, 0.4) 66%, rgba(0, 0, 0, 0.7) 100%), url(../../_images/home.jpg);*/
    background-position: center;
    background-size: cover;
    height: 100vh;
    height: 700px;
    background-repeat: no-repeat;
    display: flex;
    color: white;
    position: relative;
    width: 100%;
    -webkit-transition:  2s; /* For Safari 3.1 to 6.0 */
    transition:  2s;
    transform: translateX(0px);

}
.slidHide{
    -webkit-transition:  2s; /* For Safari 3.1 to 6.0 */
    transition:  2s;
    transform: translateX(1700px) !important;
}
.slidHide2{
    transform: translateX(-1700px) !important;
}
#home div{
    display: flex;
    flex-direction: column;
    text-align: center;
    height: 400px;
    margin: auto;
}
#home h1{
	font-size: 3.7em;
    font-size: 40px;
}
#home p{
	width: 55%;
    margin: 1% auto;
}
#home div a,.content_menu_mobile a{
    width: 200px;
    margin: 2% auto;
    border-radius: 25px;
    padding: 15px 20px;
    border: none;
    color: black;	
    background-color: #7DBE50;
}

/* HOME */

/* ADVANTAGES */
#advantages{
    display: flex;
    flex-direction: column;
    height: auto;
    padding: 50px 0;
}
#advantages h2{
    text-align: center;
    font-size: 3em;
    color: #4B4B4B;
    margin-top: 0;
    font-size: 40px;
}
.advantages_container{
    display: flex;
    margin: auto;
    justify-content: space-evenly;
    align-items: center;
}
.advantages_left{
    width: 40%;
    display: flex;
    flex-direction: column;
}
.advantages_left div{
    display: flex;
    justify-content: center;
    width: 90%;
    padding-top: 20px;
    margin: 0 5%;
}
.advantages_left div div{
    width: 52%;
    flex-direction: column;
    color: #4B4B4B;
    color: rgb(97,97,97);   
}
.advantages_left div div h5{
    font-size: 0.9em;
    margin: 0;
    margin-top: 15px;
    letter-spacing: 0.7px;
}

#advantages span{
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    display: block;
    padding-top: 40px;
}
.lms{
    background-image: url('../../_images/_icos/lms.svg');
    height: 50px;
    width: 55px;
}
.employees_icon{
    background-image: url(../../_images/_icos/employees.svg);
    height: 48px;
    width: 65px;    
}
#advantages img{
    width: 500px;
}
/* ADVANTAGES */
/* CONTACT */
#contact{
    height: 100vh;
    height: 500px;
    background-image: url(../../_images/contact_img.jpeg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;    
}
#contact div{
    display: flex;
    flex-direction: column;
    margin: auto;
    justify-content: center;
    align-items: center;
    height: 100%;    
}
#contact h2{
    font-size: 5em;
    color: white;
    width: 80%;
    margin: 0 auto;
    text-align: center;
    font-size: 40px;
}
#contact a{
    background-color: #7DBE50;
    width: 180px;
    margin: 2% auto;
    border-radius: 25px;
    padding: 15px 0;
    border: none;
    color: black;
    display: flex;
    justify-content: center;
}
/* CONTACT */
/* FEATURES */
#features{
    height: auto;
    min-height: 650px;
    text-align: center;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    padding: 50px 0;
}
#features h2{
    text-align: center;
    font-size: 3em;
    color: #4B4B4B;
    margin: 0 auto;
    font-size: 40px;
}
.feat_icons{
    display: flex;
    justify-content: space-around;
    width: 80%;
    margin: auto;
    padding: 5%;
}
.feat_icons span{
    display: block;
    height: 100%;
    width: 100%;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    margin: auto;
}
.feat_icons div{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 25%;
}
.feat_icons p{
    width: 80%;
    text-align: center;
    font-size: 20px;
    margin: 0;
}
.feat_icons div div{
    border-radius: 100px;
    border: 2px solid rgb(97,97,97);
    width: 100px;
    height: 100px;
    display: flex;
    margin: 0 auto;
    justify-content: center;
    color: rgb(97,97,97);
    border: none;
}
.interactive_icon{
    background-image: url('../../_images/_icos/interactive.svg');
}
.video_icon{
    background-image: url('../../_images/_icos/video.svg');
}
.hime_icon{
    background-image: url('../../_images/_icos/hime.svg');
}
.download_icon{
    background-image: url('../../_images/_icos/download.svg');
}
#features h4{
    text-align: center;
    width: 50%;
    min-height: 40px;
    letter-spacing: 0.5px;
    padding: 5px 0;
    font-size: 20px;
}
#features a{
    background-color: #7DBE50;
    width: 180px;
    margin: 0 auto;
    border-radius: 25px;
    padding: 15px 10px;
    border: none;
    color: rgb(0,0,0);
    display: flex;
    justify-content: center;
}
.feat_txt{
    border: none !important;
    height: auto !important;
    width: auto !important;
}
/* FEATURES */

/* PLANS */
#plans{
    background-color: rgb(75,75,75);
    height: auto;
}
#plans h2{
    color: white;
    text-align: center;
    font-size: 40px;
    padding-top: 50px;
    margin: 0;
}
.plans_cards{
    display: flex;
    margin: auto;
    justify-content: space-evenly;
    min-height: 550px;
    padding: 50px 0px;
    width: 1200px;
}
.plans_cards div{
    text-align: center;
    display: flex;
    flex-direction: column;
    border-radius: 15px;
    width: 28%;
    width: 350px;
    box-shadow: 0px 0px 20px rgb(55,55,55);
}
.plans_cards h5{
    font-size: 3em;
    margin: 0;
    display: flex;
    justify-content: center;
}
.plans_cards h5 span{
    font-size: 0.3em;
    margin: 8px 5px;    
}
.plans_cards div div{
    width: 100%;
    height: 85%;
    background-color: transparent !important;
    box-shadow: none;
    background: transparent !important;
    padding-top: 20px;
}
.plans_cards p{
    width: 65%;
    margin: 4% auto;
    color: #7DBE50;
    color: #FFFFFF;
    font-size: 0.9em;
    font-weight: bold;
}
.plans_cards div a{
    color: rgb(75,75,75);
    background-color: rgb(127,187,85);
    width: 50%;
    margin: 10% auto;
    padding: 15px 20px;
    border: none;
    border-radius: 25px;

}
/*Primer Plan*/
.plans_cards div:nth-child(1){
    background-color: rgb(115,115,115);    
    background: linear-gradient(70deg, rgb(73,73,73), rgba(121,121,121,1));
    color: white;
}
.plans_cards div:nth-child(1) div p:nth-child(1),.plans_cards div:nth-child(3) div p:nth-child(1){
    color: #7DBE50;
}
/*Segundo Plan*/
.plans_cards div:nth-child(2){
    background-color: rgb(150,200,111);    
    background: linear-gradient(70deg, rgb(126,186,85), rgba(154,202,116,1));
    color: rgb(75,75,75);
}

.plans_cards div:nth-child(2) h5,.plans_cards div:nth-child(2) p{
    color: #4B4B4B;
}
.plans_cards div:nth-child(2) a{
    background-color: rgb(75,75,75);
    color: white;
}
.plans_cards div p:nth-child(1),.plans_cards div p:nth-child(3) {

}
.plans_cards div:nth-child(3){
    background-color: rgb(71,71,71);    
    background: linear-gradient(70deg, rgb(47,47,47), rgba(76,76,76,1));
    color: white;
}
/* PLANS */

/* HELP */
#help{
    background-image: url(../../_images/help_img.jpg);
    background-image: linear-gradient(rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 1%, rgba(0, 0, 0, 0.4) 66%, rgba(0, 0, 0, 0.7) 100%), url(../../_images/help_img.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#help h2{
    text-align: center;
    color: white;
    margin: 3% auto;
    font-size: 40px;
    width: 35%;
}
#help form{
    margin: auto;
    background: linear-gradient(70deg, rgb(71,71,71), rgba(122,122,122,1));
    width: 60%;
    width: 600px;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    border-radius: 10px;
    padding: 25px 0;
}
#help form div{
    display: flex;
    justify-content: space-between;
    width: 90%;
    margin: 0 auto;
}
#help form input{
    border-radius: 5px;
    border: none;
    text-align: initial;
    height: 50px;
    width: 40%;
    padding: 0 15px;
    font-size: 20px;
    outline: none;
    font-family: 'sans pro light';
    font-weight: 900;
}
.contact_msg{
    display: flex;
    justify-content: flex-start;
    margin: 0 auto;
    width: calc(90% - 20px) !important;
    min-height: 120px;
    border-radius: 5px;
    border: none;
    text-align: initial;
    height: 50px;
    padding: 10px 10px;
    font-size: 20px;
    outline: none;
    margin-top: 25px;
    font-family: 'sans pro light';
    font-weight: 900;
}
#help form a,.help_submit{
    color: white;
    background: #7DBE50;
    margin: 0 5%;
    padding: 15px !important;
    width: 120px !important;
    text-align: center !important;
    font-size: 1em !important;
    border-radius: 25px !important;
    border: none !important;
    padding: 25px 0;
    font-family: 'sans pro bold' !important;
}
.contact_info{
    display: flex;
    justify-content: space-evenly;
    margin: 3% 0;
}
.contact_info p{
    color: white;
    font-size: 1.4em;
    display: flex;
}
.contact_info a{
    color: white !important;
    background: none !important;
    min-width: 200px;
    font-size: 20px !important;
    padding: 0 !important;
    display: flex;
    justify-content: flex-start;
    margin: 2% 0 !important;
    display: flex;
    align-items: center;
}
.contact_info i{
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 20px;
    height: 20px;
    margin: 0 15px;
}
.location_icon{
    background-image: url(../../_images/_icos/location.svg);
}
.mail_icon{
    background-image: url(../../_images/_icos/mail.svg);
}
.phone_icon{
    background-image: url(../../_images/_icos/phone.svg);
}
/* HELP */
/* FOOTER */
.logoFS{
    background-image: url(../../_images/logo-fs.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 280px;
    display: block;
    height: 100%;
    margin: auto 40px;
}
footer div{
    height: 100%;
    width: 350px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
footer p{
    color: #4B4B4B;
    letter-spacing: 2px;
    margin: auto 0;
}
.icon-arrow{
    background-image: url(../../_images/_icos/arrow-footer.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 40px;
    display: block;
    height: 35%;
    margin: auto 0;
}
/* FOOTER */


/* SECCION ABOUT */
#about_home{
/*    background-image: url(../../_images/abot_home.jpg);*/
    background-image: linear-gradient(rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 1%, rgba(0, 0, 0, 0.4) 66%, rgba(0, 0, 0, 0.7) 100%), url(../../_images/abot_home.jpg);        
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 800px;
}
#about_home div{
    display: flex;
    flex-direction: column;
    margin: auto;
    width: 700px;
    height: auto;
    padding-top: 300px;
    color: #FFFFFF;
    align-items: center;
    text-align: center;    
}
#about_home h4{
    font-size: 20px;
}
#about_home h2{
    font-size: 40px;    
}
#about_home p{
    font-size: 20px;       
}
#about_lms{
    width: 100%;
    height: 300px;
    display: flex;
    padding: 75px;
    background-color: #F0F0F0;
}
#about_lms a{
    background-image: url(../../_images/ipad.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 450px;
    width: 500px;
    height: auto;
}
#about_lms div{
    margin: auto;
    width: 380px;    
}
#about_lms h3{
    font-size: 20px;    
}
#about_lms ul{
    list-style: none;    
}
#about_lms li{
    display: flex;
    align-items: center; 
    font-size: 20px;   
}
#about_lms i{
    width: 7px;
    height: 7px;
    display: block;
    background-color: transparent;
    border: 1.5px solid #7DBE50;
    border-radius: 100px;
    margin: 5px 10px;
    margin-left: 20px;  
}
#about_lms li:first-child i,#about_lms li:last-child i{
    background-color: #7DBE50;
    margin-left: 5px;
}
#we_can{
    background-image: url(../../_images/can_do.png);    
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 600px;    
}
#we_can div{
    display: flex;
    flex-direction: column;
    width: 67%;
    margin: auto;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #FFFFFF;
    padding-top: 100px;    
}
 #we_can h2{
    font-size: 40px;
 }
 #we_can p{
    font-size: 20px;
 }
#green_texts{
    display: flex;
    flex-direction: column;
    color: white;
    width: 100%;
    align-items: center;
    padding: 50px 0;
    background: linear-gradient(70deg, #7dbd4f, #9ad368);
}
#green_texts p{
    font-size: 20px;
    width: 80%;
}
#green_texts div{
    display: flex;
    width: 90%;
    justify-content: space-between;
    align-items: center;
    text-align: center;
}
#green_texts div div{
    flex-direction: column;
}
#green_texts div p{
    margin: 0;
    padding: 10px 0px;    
}
#green_texts div i{
    width: 5px;
    height: 5px;
    display: block;
    background-color: rgb(70,70,70);
    border-radius: 20px;    
}
#lang_desc{
    background-color: rgb(70,70,70);
    display: flex;
    flex-direction: column;
    color: #FFFFFF;    
}
#lang_desc p{
    margin: auto;
    font-size: 20px;
}
#lang_desc p:nth-child(1){
    padding-top: 100px;
    padding-bottom: 15px;
}
#lang_desc div{
    display: flex;
    justify-content: space-between;
    width: 50%;
    margin: auto;
    padding: 50px 0px;
}
#lang_desc div div{
    flex-direction: column;
    text-align: center;
    align-items: center;
}
#lang_desc span{
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 100px;
    height: 100px;    
}
#lang_desc div h5{
    font-size: 24px;
}
.en{
    background-image: url(../../_images/en.svg);
}
.es{
    background-image: url(../../_images/es.svg);    
}

#start_subs{
    background-image: url(../../_images/start_subs.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 800px;   
    box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.3); 
}
#start_subs div{
    display: flex;
    flex-direction: column;
    height: auto;
    width: 435px;
    color: #FFFFFF;
    padding: 50px;
    padding-left:0;
    margin-left: 7%;
}
#start_subs div h2,#start_subs div p{
    font-size: 20px;
}
#start_subs p{

}
#start_subs a{
    border: 2px solid rgb(149,200,111);
    padding: 10px 30px;
    border-radius: 20px;
    width: 100px;
    text-align: center;
    font-size: 16px;
}
/* SECCION ABOUT */