@charset "UTF-8";

#aboutBody {
    z-index: 1;
    margin: 3%;
}

.columns {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
    
    -webkit-column-gap: 70px; /* Chrome, Safari, Opera */
    -moz-column-gap: 70px; /* Firefox */
    column-gap: 70px;
    
/*   -webkit-column-rule: 1px dotted #839893; /* Chrome, Safari, Opera */
/*    -moz-column-rule: 1px dotted #839893; /* Firefox */
/*    column-rule: 1px dotted #839893;*/
}

.columnsX {
    
}


#me {
    max-width: 384px;
    height:auto;
}

.paragraph_A {
     z-index: 9999;
   
    text-align: justify;
    color: #d5c2aa;
}

.paragraph_B {
    text-align: justify;
    color: #c69f79;
}

#motion {
    z-index: -1;
    position: fixed;
    right: 2%;
    bottom:2%;
}

#aboutimg1 {
    z-index: -3;
    position: fixed;
    right: 2%;
    bottom:2%;
    opacity: .4  
    -webkit-animation: fadeOne 10s infinite; /* Chrome, Safari, Opera */
    animation: fadeOne 10s infinite;
}

#aboutimg2 {
    z-index: -3;
    position: fixed;
    right: 2%;
    bottom:2%;
    opacity: 0;
    -webkit-animation: fadeTwo 10s 5s infinite; /* Chrome, Safari, Opera */
    animation: fadeTwo 10s 5s infinite;
}

#animateContainer1 {
    z-index: -2;
    position: relative;
    -webkit-animation: moveOne 10s infinite; /* Chrome, Safari, Opera */
    animation: moveOne 10s infinite;
}

#animateContainer2 {
    z-index: -2;
    position: relative;
    -webkit-animation: moveOne 10s 5s infinite; /* Chrome, Safari, Opera */
    animation: moveOne 10s 5s infinite;
}


/* Chrome, Safari, Opera */
@-webkit-keyframes fadeOne {
    0% {opacity: 0; }
    25% {opacity: 0; transform: scale(1);}
    50% {opacity: .6;}
    75% {opacity: .6;}
   100% {opacity: 0; transform: scale(1.4); }
}

@keyframes fadeOne {
    0% {opacity: 0; }
    25% {opacity: 0; transform: scale(1);}
    50% {opacity: .6;}
    75% {opacity: .6;}
   100% {opacity: 0; transform: scale(1.4); }
}

/* Chrome, Safari, Opera */
@-webkit-keyframes fadeTwo {
    0% {opacity: 0; }
    25% {opacity: 0; transform: scale(1);}
    50% {opacity: .6;}
    75% {opacity: .6;}
   100% {opacity: 0; transform: scale(1.4);}
}

@keyframes fadeTwo {
    0% {opacity: 0; }
    25% {opacity: 0; transform: scale(1);}
    50% {opacity: .6;}
    75% {opacity: .6;}
   100% {opacity: 0; transform: scale(1.4);}
}

@-webkit-keyframes  moveOne {
    0% {}
    25% {transform: translate(0,0);}
   100% {transform: translate(-80px,-20px);}
}

@keyframes moveOne {
    0% {}
    25% {transform: translate(0,0);}
   100% {transform: translate(-80px,-20px);}
}

/*Column Numbers and Footer widths*/

@media only screen and (max-width: 1800px) {
    .columns {
        -webkit-column-count: 2; /* Chrome, Safari, Opera */
        -moz-column-count: 2; /* Firefox */
        column-count: 2;

        -webkit-column-gap: 100px; /* Chrome, Safari, Opera */
        -moz-column-gap: 100px; /* Firefox */
        column-gap: 100px;
    }
    footer {
        width: 30%;
    }

}


@media only screen and (max-width: 1200px) {

    .columns {
        -webkit-column-count: 1; /* Chrome, Safari, Opera */
        -moz-column-count: 1; /* Firefox */
        column-count: 1;

        -webkit-column-gap: 125px; /* Chrome, Safari, Opera */
        -moz-column-gap: 125px; /* Firefox */
        column-gap: 125px;
    }
    footer {
        width: 40%;
    }
}

@media only screen and (max-width: 861px) {
    .columns {
        -webkit-column-count: 1; /* Chrome, Safari, Opera */
        -moz-column-count: 1; /* Firefox */
        column-count: 1;

        -webkit-column-gap: 25px; /* Chrome, Safari, Opera */
        -moz-column-gap: 25px; /* Firefox */
        column-gap: 25px;
    
    }
    footer {
        width: 50%;
    }
}