/*
css para pagina order-process de translife
*/
*,
html,
body{
    margin: 0px;
    padding: 0px;
    font-family: GothamBookRegular, Arial, sans-serif; 
    font-size:12px; 
    line-height:18px;
    background-color: white;
}

p{
    margin: 0px;
    padding: 0px;
}

.menu ul li a{
    font-size: 16px;
}

    /**** telefonos *****/
    @media screen and (max-width: 359px){

                #pagina{
                    display: grid;
                    grid-template-columns: 1fr;
                    grid-template-rows: auto;
                    grid-template-areas: "contenedor"
                }
                /*****
                        Area del Encabezado 
                ******/
                .contenedor{
                    grid-area: contenedor;
                    display: grid;
                    grid-template-columns: 1fr;
                    grid-template-rows: 92px auto 1fr;

                    background-color:transparent;
                }

                .header{
                    display: grid;
                    grid-template-columns: 183px 90px 1fr;
                    grid-template-rows: 92px;
                    background-color: transparent;
                    height: 100%;
                    align-items: center;

                    grid-template-areas: 
                        "logo redesSociales iconMenu"
                }

                .header #logo{
                    background-image: url("imgs/principal/LogoTranslifeSlogan.png");
                    background-position: center;
                    background-repeat: no-repeat;
                    /*background-size: 92%;*/
                    height: 100%;
                    grid-area: logo;
                    cursor: pointer;
                }

                .header #redesSociales{
                    display: flex;
                    align-items: center;
                    align-content: center;
                    background-color: transparent;
                    height: 100%;
                    grid-area: redesSociales;
                 }

                 #redesSociales .redesSocialesItem{
                     flex: auto;
                     text-align: center;
                 }

                 #redesSociales img{
                     width: 80%;
                 }

                #iconoMenu{
                    display:grid;
                    width: 32px;
                    grid-area: iconMenu;
                    height: 34px;
                    background-color:transparent;
                    margin-right: 10px;
                    box-sizing: border-box;
                    grid-column-start: 5;
                    cursor: pointer;
                    
                }
                #iconoMenu span{
                    display: block;
                    width: 100%;
                    height: 8px;
                    background-color: #5f66bf;
                }

                /*/menu*/
                .header .menu{
                    position: fixed;
                    z-index: 100;
                    left:-200px;
                    top: 110px;
                    width: 200px;
                    height: auto;
                    transition: ease 0.5s;
                }

                .menu ul{
                        display:flex;
                        flex-direction: column;
                        list-style: none;
                        align-items: stretch;
                    }

                    .menu ul li{
                        flex: auto;
                    }

                    .menu li a{
                        display: block;
                        line-height: 4;
                        text-decoration: none;
                        color: white;
                        text-align: center;
                        background-color: rgba(0,0,0,0.5);
                    }

                    .menu li a:hover{
                        background: linear-gradient(#3e519c,#4e6fc1);
                        background-repeat: repeat-x;
                        color: white;
                    }


                    /*********************
                           Footer
                    ********************/

                                .footer{
                                    display: grid;
                                    color: #ccc;
                                }

                                #footerSection{
                                    display: grid;
                                    grid-template-columns: 1fr;
                                    grid-template-rows: auto 40px;
                                    background: linear-gradient(#3e519c,#4e6fc1);
                                    border-radius: 7px;
                                    font-size: 8px;
                                    text-align: center;
                                }

                                #footerSection span, #footerSection p, #footerSection div{
                                    background-color: transparent;
                                }

                                #footerInfo{
                                    display: grid;
                                    grid-template-columns: 1fr;
                                    grid-template-rows: 1fr 1fr;
                                    grid-template-areas: "tarjetasCredito"  
                                                         "telefonos";
                                    align-items: center;
                                }

                                #footerDireccion{
                                    text-align: center;
                                }

                                #footerInfo #footer1{
                                    padding: 0.5em;
                                    grid-area: "tarjetasCredito";
                                }

                                
                                #footerInfo #footer2{
                                    grid-area: "coryRight";
                                    display: none;
                                }

                                #footerInfo #footer3{
                                    grid-area: "telefonos";
                                    text-align: center;
                                }

                                #footerInfo #footer3 p{
                                    padding-right: 1em;
                                    text-align: left;
                                    color: white;
                                    text-align: center;
                                }
                                #footerInfo #footer3 p span{
                                    color: white;
                                    font-weight: bold;
                                    margin-right: 0.5em;
                                }
                                
                                

                    /****************************
                           Termina Footer
                    ******************************/


    }
    /**************************************/

    /**************** MEDIA TABLETS **********/
     @media screen and (min-width: 360px)  and (max-width: 899px){
        
                        #pagina{
                            display: grid;
                            grid-template-columns: 1fr;
                            grid-template-rows: auto;

                            grid-template-areas: "contenedor"
                        }
                        /*****
                                Area del Encabezado 
                        ******/
                        .contenedor{
                            grid-area: contenedor;
                            display: grid;
                            grid-template-columns: 1fr;
                            grid-template-rows: 152px auto 1fr;
        
                            background-color:transparent;
                        }
                
                        .header{
                            display: grid;
                            grid-template-columns: 240px 1fr;
                            grid-template-rows: 92px 52px;
                            background-color: transparent;
                            height: 100%;
        
                            grid-template-areas: 
                                "logo redesSociales"
                                "menu menu"
                        }
                        
                        .header #logo{
                            background-image: url("imgs/principal/LogoTranslifeSlogan.png");
                            background-position: center;
                            background-repeat: no-repeat;
                            height: 100%;
                            grid-area: logo;
                            cursor: pointer;
                        }
        
                        .header #redesSociales{
                           display: flex;
                           align-items: center;
                           align-content: center;
                           background-color: transparent;
                           height: 100%;
                           grid-area: redesSociales;
                        }
                        #redesSociales .redesSocialesItem{
                            flex: auto;
                            text-align: center;
                        }
        
                        .menu{
                            height: 100%;
                            grid-area: menu;
                          
                            width:100%;
                            border-top: 5px solid;
                            border-color: #5f66bf;
                        }
                    
                        .menu ul{
                            display:flex;
                            list-style: none;
                            height: 100%;
                         }
         
                         .menu ul li{
                             flex: auto;
                             
                         }
         
                         .menu li a{
                             display: block;
                             line-height: 4;
                             text-decoration: none;
                             color: #5f66bf;
                             text-align: center;
                         }
         
                         .menu li a:hover{
                             background: linear-gradient(#3e519c,#4e6fc1);
                             background-repeat: repeat-x;
                             color: white;
                         }
                        
                        #iconoMenu{
                            display:none;
                        }

                        

                        /*********************
                               Footer
                        ********************/

                                    .footer{
                                        display: grid;
                                        color: #ccc;
                                    }

                                    #footerSection{
                                        display: grid;
                                        grid-template-columns: 1fr;
                                        grid-template-rows: auto 40px;
                                        background: linear-gradient(#3e519c,#4e6fc1);
                                        border-radius: 7px;
                                        font-size: 8px;
                                    }

                                    #footerSection span, #footerSection p, #footerSection div{
                                        background-color: transparent;
                                    }

                                    #footerInfo{
                                        display: grid;
                                        grid-template-columns: auto 1fr;
                                        grid-template-rows: auto;
                                        grid-template-areas: "tarjetasCredito"  "telefonos";
                                        align-items: center;

                                    }

                                    #footerDireccion{
                                        text-align: center;
                                    }

                                    #footerInfo #footer1{
                                        padding-left: 0.5em;
                                        padding-right: 0.5em;
                                        grid-area: "tarjetasCredito";
                                    }
                                    
                                    #footerInfo #footer2{
                                        grid-area: "coryRight";
                                        display: none;
                                    }

                                    #footerInfo #footer3{
                                        grid-area: "telefonos";

                                    }

                                    #footerInfo #footer3 p{
                                        padding-right: 1em;
                                        text-align: right;
                                        color: white;
                                    }
                                    #footerInfo #footer3 p span{
                                        color: white;
                                        font-weight: bold;
                                        margin-right: 0.5em;
                                        /*display: block;*/
                                    }
                                    
                                    #footerInfo div{
                                        display: grid;
                                        background-color: transparent;
                                    }

                        /****************************
                               Termina Footer
                        ******************************/

        }
        
        
    /*****************************************/   

    
    /****************** Media para escritorio ****/
        @media screen and (min-width: 900px){
            
                #pagina{
                    display: grid;
                    grid-template-columns:  1fr 900px 1fr;
                    grid-template-rows: auto;
                
                    grid-template-areas: ". contenedor ."
                }
                
                /*****
                        Area del Encabezado 
                ******/
                .contenedor{
                    grid-area: contenedor;
                    display: grid;
                    grid-template-columns: 100%;
                    grid-template-rows: 92px 1fr auto;

                    background-color:transparent;
                    border-top: 5px solid;
                    border-color: #5f66bf;
                }
                
                .header{
                    display: grid;
                    grid-template-columns: 220px 140px 1fr;
                    grid-template-rows: auto;
                    background-color: transparent;
                    height: 100%;
                    grid-template-areas: "logo redesSociales menu";
                }

                .header #logo{
                    background-image: url("imgs/principal/LogoTranslifeSlogan.png");
                    background-position: center;
                    background-repeat: no-repeat;
                    height: 100%;
                    grid-area: logo;
                    cursor: pointer;
                }

                .header #redesSociales{
                   display: flex;
                   align-items: center;
                   align-content: center;
                   background-color: transparent;
                   height: 100%;
                   grid-area: redesSociales;
                }
                #redesSociales .redesSocialesItem{
                    flex: auto;
                    text-align: center;
                }

                .header .menu{
                    height: 100%;
                    grid-area: menu;
                }

                .menu ul{
                   display:flex;
                   list-style: none;
                   height: 100%;
                }

                .menu ul li{
                    flex: auto;
                    
                }

                .menu li a{
                    display: flex;
                    height: 90%;
                    text-decoration: none;
                    color: #5f66bf;
                    justify-content: center;
                    align-items: center;
                }

                .menu li a:hover{
                    background: linear-gradient(#3e519c,#4e6fc1);
                    background-repeat: repeat-x;
                    color: white;
                    /*font-weight: ;*/
                }

                


                #iconoMenu{
                    display:none;
                }



                /*********************
                       Footer
                ********************/

                            .footer{
                                display: grid;
                                color: #ccc;
                            }

                            #footerSection{
                                display: grid;
                                grid-template-columns: 1fr;
                                grid-template-rows: auto 25px;
                                background: linear-gradient(#3e519c,#4e6fc1);
                                border-radius: 7px;
                            }

                            #footerSection span, #footerSection p, #footerSection div{
                                background-color: transparent;
                            }

                            #footerInfo{
                                display: grid;
                                grid-template-columns: 1fr 1fr 1fr;
                                grid-template-rows: auto;
                                align-items: center;
                            }

                            #footerDireccion{
                                text-align: center;
                            }

                            #footerInfo #footer1{
                                padding-left: 1em;
                            }

                            #footerInfo #footer2{
                                text-align: center;
                            }

                            #footerInfo #footer3 p{
                                padding-right: 1em;
                                text-align: right;
                                color: white;
                            }
                            #footerInfo #footer3 p span{
                                color: white;
                                font-weight: bold;
                                margin-right: 0.5em;
                            }
                            s
                            #footerInfo div{
                                display: grid;
                                background-color: transparent;
                            }

                /****************************
                       Termina Footer
                ******************************/


        }
    /*******************************/
        
    


/*****
       Termina Area del Encabezado 
******/

/*****
       pageInfo
******/

.pageInfo{
    display: grid;
    width: 100%;
    min-height: 605px;
    max-height: auto;
    background-color: lightblue;
}


/*****
       Termina pageInfo
******/


/*****
       Termina Info
******/