/*----------------------------------*/
/* Mobile device css style          */
/* CSS style for cbustamante.co     */
/* Author: Christian Bustamante     */
/* Last modified: 25/05/2023        */
/*----------------------------------*/



/*----------------------------------------------------*/
/* Define CSS layout for screen sizes less than 800px */
/* Screen size = smartpohone px / pixel ratio         */
/*----------------------------------------------------*/
@media screen and (max-width: 800px) {
    /*----------------------------------*/
    /* Changes in canvas box            */
    /*----------------------------------*/
    #canvas {
        /* position: absolute; */
        width: 94%;
        margin: 3% 3% 3% 1%;
        padding: 0 0 0 0;
        border-style: solid;
        border-color: #ddd;
        border-width: 0;
        }
    /*----------------------------------*/
    /* Changes in header                */
    /*----------------------------------*/
    div.header-name > h1 {
        font-family: "Varela Round";
        font-size: 28px;
        line-height: 1.2em;
        letter-spacing: 3px;
        font-weight: normal;
        margin-bottom: 1px;
        text-align: center;
        }
    #body-text h2 {
        border-left: 0px solid #999; 
        text-align: center;
        margin-left: 0px; 
        padding-left: 0px;
        }
    #body-text h2 {
        position:relative;
        display:inline-block;
        width: 70%;
        left: 15%;
        right: 15%;
        margin-bottom:25px;
        }
    #body-text h2:after {
        content:'';
        position:absolute;
        left:0;
        right:0;
        top:100%;
        margin: 10px auto;
        width:50%;
        height:6px;
        background:#999;
        }
    #body-text h3 {
        text-align: center;
        margin-left: 0px; 
        padding-left: 0px;
        }
    /*----------------------------------*/
    /* Changes in navigation bar        */
    /*----------------------------------*/
    header > nav {
        padding: 10px 3% 5px 3%;
        font-size: 17px;
        letter-spacing: 1.5px;
        font-weight: 400;
        text-align: center;
        width: 115%;           /* ! */
        }
    header > nav > ul {
        display: inline-block; /* ! */
        text-align: center;    /* ! */
        }
    header > nav > ul > li {
        display: inline-block; /* ! */
        margin-left: 5px;
        }
    /*----------------------------------*/
    /* Changes in personal img          */
    /*----------------------------------*/
    .imgme {
        overflow: hidden; 
        width: 94%;
        text-align: center;
        }
    .circular--square {
        max-width: 90%;
        height: auto;
        }
    #body-text .me {
        max-width: 94%;
        height: auto;
        width: auto\9;
        display: inline-block;        
        padding: 0 3% 20px 3%;
        }
    .imgmeclear {
        clear: both;
        }
    /*----------------------------------*/
    /* Changes in body text style       */
    /*----------------------------------*/
    #body-text > .link4abs {
        margin-left: 15px;
        line-height: 25px;
        text-align: center;
        }
    #body-text > div.home .no-indent {
        margin-left: 15px;
        text-align: center;
        }
    #body-text > div.home .no-indent-contact {
        margin-left: 15px;
        text-align: center;
        }
    .abst {
        margin-left: 0;
        line-height: 20px; 
        text-align: center;
        }
    p.abst {
        margin-left: 0;
        line-height: 20px; 
        text-align: center;
        }
    #body-text > .abst_single {
        line-height: 20px;
        text-align: center;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
        }
    .refer {
        text-align: center;
        }
    /*----------------------------------*/
    /* Changes in show/hide links       */
    /*----------------------------------*/
    #body-text a.sh {
        color: #999;
        text-decoration: none;
        margin-left: -15px;
        text-align: left;
        }
    #body-text a.sh:hover {
        color: #111;
        }
    /*----------------------------------*/
    /* Changes in gridcv                */
    /*----------------------------------*/
    #body-text div.gridcv { 
        width: 100%;
        margin: auto;
        margin-left: 0;    
        font-family: "Raleway";
        font-size: 16px;
        line-height: 1.5em;
        }
    #body-text div.gridcv div { 
        float: left;
        }
    #body-text div.gridcv .coldates { 
        width: 70px; 
        }
    #body-text div.gridcv .coldescr { 
        width: calc(100% - 70px);
        }
    #body-text .clear { 
        clear: both; 
        }
    /*----------------------------------*/
    /* Changes in lists (body)          */
    /*----------------------------------*/
    #body-text ul {
        width: 90%;
        list-style-type: disc;
        padding: 5px;
        margin: 0;
        margin-left: 15px;
        font-family: "Raleway";
        font-size: 16px;
        }
    #body-text ul > li > ul > li {
        margin: 3px -20px 5px 5px;
        padding-left: 5px;
        list-style-position: outside;
        line-height: 20px;
        }
    }


/*----------------------------------------------------*/
/* CSS conditional: small screen devices vs the rest  */
/*----------------------------------------------------*/
.visibledevice  {
    display: none;
    line-height: 1.35em; 
    }
.visibledesktop {
    display: inline; 
    line-height: 1.35em; 
    text-align: justify;
    }
.visibleboth {
    display: inline; 
    line-height: 1.35em; 
    text-align: justify;
    }
@media screen and (max-width : 800px) {
    .visibledevice {
        display: block;
        line-height: 1.275em; 
        }
    .visibledesktop {
        display: none;
        line-height: 1.35em; 
        }
    .visibleboth {
        text-align: left;
        }
    }