@charset "utf-8";


    main{
        max-width: 1366px;
        width: 100%;
        height: auto;
        margin: 80px 0px;
        color: #222222;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .left-content {
        color: #222222;
        padding: 0px 30px 30px 30px;
    }
    
        .title {
            height: 80px;
            text-align: right;
            text-transform: uppercase;
            align-content: flex-end;
        }
        
        .title h2 {}
        
        .text {
            text-align: justify;
            line-height: 20px;
        }
        
        .social-media {
            height: 80px;
            text-align: end;
            padding-right: 20px;
            align-content: center; 
            align-content: flex-end;
        }

            .social-media a {
                margin: 0 10px;
            }
            
                .social-media a img {
                    width: 30px;
                    cursor: pointer;
                    transition: 0.3s;
                    filter: grayscale(80%)
                }
                
                .social-media a img:hover {
                    scale: 1.2;
                    filter: grayscale(0%)
                }
    
    .picture {
        width: 100%;
        overflow: hidden;
        border-radius: 5px;
    }
    
        .picture img {
            float: right;
            border-radius: 5px;
            width: 100%;
        }


 /* DISPOSTIVOS MEDIANOS TIPO TABLETS, NOTEBOOKS, PORTATILES PEQUEÑOS, ETC. */
@media screen and (min-width:769px) and (max-width:1023px){
   
    .text {
        text-align: justify; 
        display: flex;
        flex-direction: row;
        height: 640px;
    }
   
      .pull-left {
          width: 50%;
          padding-right: 10px;
      }
      
      .pull-rigth {
          width: 50%;
          padding-left: 10px;
      }
    
      .picture {
          max-height: 100vh;
    }
}

@media screen and (min-width:1024px){

        main {
            flex-direction: row;
            justify-content: space-between;
        }
   
            .left-content {
                width: 66.66%;
                float: left;
                padding-right: 20px;
                flex-direction: column;
                padding-bottom: 0;
            }

                .text {
                    text-align: justify; 
                    display: flex;
                    flex-direction: row;
                    height: 640px;
                }

                    .pull-left {
                        width: 50%;
                        padding-right: 10px;
                    }
                    
                    .pull-rigth {
                        width: 50%;
                        padding-left: 10px;
                    }

            .picture {
                width: 33.33%;
                float: right;
            }

                .picture img {
                    height: 100%;
                    min-width: 440px;
                }


        

}