.c_tittle_galery{

    width: 100%;
    /*height: 250px;*/
    background-image: linear-gradient(rgba(180,180,180),rgba(255,255,255));

    display: inline-block;

    background-color: red;
    
}


.tittle_galery{

    margin-left:      10%;
    width:            90%;
    font-family:  Raleway;
    font-size:      25px;   
    color:  rgb(20,20,20); 

}

.subtittle_galery{

    margin-left:              10%;
    width:                    60%;

    font-family:    Raleway;
    font-size:      20px;   
    color:          rgb(20,20,20); 

}


/*===========================================================================================================*/

#c_galery{

/*margin-top: -2px;*/
  width:        100%; 
  display:     block;
  overflow:   hidden;   

  background-image: url('../banner/logo.png');
  background-repeat: no-repeat;
  background-position: center;
  /* border: 1px solid red;*/ 

}

.galeria{

        margin-left: 5%;
        width:       90%;
        height:     auto;
        right:         0;

        display:    flex;               /* pone en linea los divs que van almacenar las imagenes*/
        flex-wrap:  wrap;               /* hace que los elementos o los divs se distribuya segun tamaño de pantalla que sea responsive*/
        justify-content: space-around;  /*hace que los elementos esten bien distribuido respecto a los bordes*/
        
        z-index: 1;    
        overflow-x: hidden;     
        overflow-y: hidden;           

/*        border: 1px solid black;*/
        background-color: white;

    }
        
.c_carta{

        /*  cumple una relacion de 1.777 */
        width:  322px;  
        height: 550px;    
        margin: 15px;                   /*espacio en y entre las cartas*/ 
       -webkit-perspective: 700px;    /* para que la pagina maneje 3d con css3 */
        border: 1px solid rgb(160,160,160);

         /*sombra*/
       -webkit-box-shadow: -4px 2px 5px 0px rgba(0,0,0,0.75);
       -moz-box-shadow: -4px 2px 5px 0px rgba(0,0,0,0.75);
        box-shadow: -4px 2px 5px 0px rgba(0,0,0,0.75);        
}

.c_image{
          position: relative;
          width:    100%;
          height: 39.47%;
}
.c_image img{
          position: absolute;
          top:     0px;
          left:    0px;
          width:  100%;
          height: 100%;
}

.negocio{
          position:        absolute;
          top:                 10px;
          left:                 0px;
          width:                60%;
          height:              30px;
          color:              white;
          font-family:    'Raleway';
          font-size:           20px;
          display: flex;
          justify-content: center;
          align-items: center;
          
          background-color: #107c10;  
          opacity: 0.7; 
}


.tittle{
          width: 100%;
          height: 10%;
}
.txt_tittle{
            
            position:     absolute;
            margin-top: 10px;
            left:               5%;    
            font-family: 'Raleway';
            font-weight:      bold;
            font-size:      30px;   /*modificar fuente*/
            color:   rgb(50,50,50);   
           /* border:    1px solid  red; */
}
.feature{
        position: relative;
        width: 100%;
        height: 30%;
        border-top:    1px dotted  rgb(160,160,160);  
}

.A{
   position: absolute;
   left:          0px;
   top:           0px;
   width:         40%;
   height:       100%;
}

.text_A{
        position:  relative;
        left:           10%;
        width:         100%;
        height:        25px; 
        font-family:  'Raleway';
        font-weight:     normal;
        font-size:        15px;
        color:    rgb(50,50,50); 
        /*border:    1px solid  red;  */
}

.B{
   position: absolute;
   right:         0px;
   top:           0px;
   width:         50%;
   height:       100%;
   /*border:    1px solid  green;*/
}

.text_B{
        position:      relative;
        left:               0;
        width:             100%;
        height:            25px;

        font-family:  'Raleway';
        font-weight:     normal;
        font-size:        15px;
        color:    rgb(50,50,50); 
        /*border:    1px solid  green;  */
}

.text_A_{
        position:  relative;
        left:           10%;
        width:         100%;
        height:        40px; 
        font-family:  'Raleway';
        font-weight:     normal;
        font-size:        15px;
        color:    rgb(50,50,50); 
        /*border:    1px solid  red;  */
}

.text_B_{
          position:  relative;
          left:           0;
          width:         100%;
          height:        40px; 
          font-family:  'Raleway';
          font-weight:     normal;
          font-size:        15px;
          color:    rgb(50,50,50); 
          /*border:    1px solid  red;  */
        }




.cost{
        position: relative;
        width:        100%;
        height:       8.77%;/*50px;*/
        border-top:    1px dotted  rgb(160,160,160);        
        /*border-right:  2px dashed rgb(160,160,160);*/
        border-bottom: 1px dotted rgb(160,160,160);  
        font-size:        15px;
}

.precio{
        position:      relative;
        top:25%;
        left:                5%;    
        font-family:  'Raleway';
        font-weight:     bolder;
        font-size:        15px;;
        color:    rgb(50,50,50); 
}
.div_black{
        position: absolute;
        top:           20%; 
        left:          40%;
        width:         50%;
        height:        60%;

        background-color: rgb(20,20,20);
        color: white;

        font-size:      15px;
        /*centramos texto del div...*/
        display: flex;
        justify-content: center;
        align-items: center;

        border: 1px solid black;

}

.ver_mas{
        position:      relative;
        left:              0px;
        height:            11.40%; 
        width:             100%;

        color:    rgb(50,50,50);
        color:            white;


        background-color: #107c10;
        /*background-image: linear-gradient(#107c10, #0b730b);*/
        /*background-image: linear-gradient(rgba(0,0,0),rgba(120,120,120));*/
        /*background-image: linear-gradient(rgba(120,120,120),rgba(0,0,0));*/

        font-family:  'Raleway';
        font-weight:     bolder;
        font-size:        20px;

        display: flex;
        justify-content: center;
        align-items: center;   
        cursor: pointer;
}

.ver_mas:hover{
    text-decoration: underline;
}
/*==========================================================================*/
.change_page{

    position: relative;
    width:        100%;
    height:      100px;
    background-image: linear-gradient(rgba(255,255,255),rgba(180,180,180));
    
    /*border: 1px solid black; */
}

#page{
    font-size: 30px;
    cursor: pointer;
}

.flechas{
    position: relative;
    top:           15%;
    left:          35%;
    width:         30%;
    height:        20%;

    font-family:  'antom';
    font-weight:     bolder;
    font-size:        1.2vw;

    display: flex;
    justify-content: center;
    align-items: center;   
     
    visibility: hidden; 

   /*border: 1px solid black; */
}

.flechas img{
    position: absolute;
    max-height: 100%;
    max-width:   auto;
    cursor: pointer;
    
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
    opacity: 0.6;
    
    /*border: 1px solid black;*/ 

}

.left{
    left:  0px;
}
.right{
    right: 0px;
}

.flechas img:hover{

    opacity: 1.0;
    
}

/*==========================================================================*/

@media screen and (max-width:800px){
.flechas{
   left:     20%;
   width:   60%;
}

.tittle_galery{
   top:              36%; 
   font-size:      30px;   
}
.subtittle_galery{

   top:             75%;
   font-size:      15px;   

}
.galeria{
    
    margin-left: 0%;
    width:  100%;

}

.c_carta{

        /*  cumple una relacion de 1.777 */
        width:  300px;  
        height: 570px;

    }

}