/*
	Max width before this PARTICULAR table gets nasty
	This query will take effect for any screen smaller than 760px
	and also iPads specifically.
	*/
@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {

    /* Force table to not be like tables anymore */
    .trst_striped table, thead, tbody, th, td, tr {
        display: block;
    }

    /* Hide table headers (but not display: none;, for accessibility) */
    .trst_striped thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    .trst_striped tr {
        border: 1px solid #ccc;
    }

    .trst_striped td {
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50%;
    }

        .trst_striped td:before {
            /* Now like a table header */
            position: absolute;
            /* Top/left values mimic padding */
            top: 6px;
            left: 6px;
            width: 45%;
            padding-right: 10px;
            white-space: nowrap;
        }

        /*
		Label the data
		*/
        .trst_striped td:nth-of-type(1):before {
            content: "Year";
        }

        .trst_striped td:nth-of-type(2):before {
            content: "Jan";
        }

        .trst_striped td:nth-of-type(3):before {
            content: "Feb";
        }

        .trst_striped td:nth-of-type(4):before {
            content: "Mar";
        }

        .trst_striped td:nth-of-type(5):before {
            content: "Apr";
        }

        .trst_striped td:nth-of-type(6):before {
            content: "May";
        }

        .trst_striped td:nth-of-type(7):before {
            content: "Jun";
        }

        .trst_striped td:nth-of-type(8):before {
            content: "Jul";
        }

        .trst_striped td:nth-of-type(9):before {
            content: "Aug";
        }

        .trst_striped td:nth-of-type(10):before {
            content: "Sep";
        }

        .trst_striped td:nth-of-type(11):before {
            content: "Oct";
        }

        .trst_striped td:nth-of-type(12):before {
            content: "Nov";
        }

        .trst_striped td:nth-of-type(13):before {
            content: "Dec";
        }
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    body {
        padding: 0;
        margin: 0;
        width: 320px;
    }
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    body {
        width: 495px;
    }
}


body {
    font-size: 14px;
}

.trst_header,
.trst_header *,
.trst_content,
.trst_content * {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.trst_header {
    padding: 10px;
    display: block;
    width: 100%;
    font-family: arial;
    font-size: 0.9rem;
    margin-bottom: 0;
    background-color: #f7f7f9;
    border: 1px solid #e1e1e8;
    color: #636364;
    overflow: hidden;
    cursor: pointer;
}

.trst_assetmanagement {
    font-weight: bold;
    padding-right: 0;
    text-align: center;
    margin-top: 10px;
    padding-top: 5px;
    display: block;
    border-top: 1px solid #e1e1e8;
    margin-left: -10px;
    margin-right: -10px;
}



.trst_fixedopener {
    float: right;
    cursor: pointer;
}

.trst_row {
    display: table;
    width: 105%;
    margin-top: 10px;
    border-top: 1px solid #e1e1e8;
    padding-top: 10px;
    margin-left: -10px;
    margin-right: -10px;
}

    .trst_row > span {
        display: table-cell;
        width: 33%;
        vertical-align: middle;
    }

.trst_header .trst_strategy {
    width: 100%;
    padding-bottom: 10px;
}

.trst_header span span {
    font-weight: bold;
}

.trst_profitDrawdown,
.trst_monthlyGain,
.trst_pie {
    border: 1px solid #e1e1e8;
    background-color: white;
}

.trst_growth,
.trst_drawdown,
.trst_monthlyReturn {
    text-align: center;
}


    .trst_growth span,
    .trst_drawdown span,
    .trst_monthlyReturn span {
        display: block;
    }

.trst_content svg {
    max-width: 100%;
}

.trst_content {
    border: 1px solid #e1e1e8;
    border-top: 0;
    overflow: hidden;
    width: 100%;
    padding: 5px;
}

    .trst_content .trst_row {
        display: block;
        overflow: hidden;
        border-top: 0;
        margin: 10px 0;
        width: 100%;
    }

.trst_striped {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    margin: auto;
    border: 1px solid #e1e1e8;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}

    .trst_striped th {
        text-align: center;
    }

    .trst_striped td {
        padding: 8px;
        text-align: center;
    }

        .trst_striped td:first-child {
            width: 75%;
            border-right: 1px solid #e1e1e8;
        }

    .trst_striped tr:nth-child(odd) {
        background: #f7f7f9;
    }

.trst_content .trst_row > div {
    width: 100%;
    display: block;
    overflow: hidden;
}

.trst_description {
    padding: 10px;
    border: 1px solid #e1e1e8;
    margin: 25px 0 0 0;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    font-size: 0.9em;
}

.trst_chartLegend {
    font-weight: bold;
    text-align: center;
    display: block;
    color: #636364;
    padding-top: 15px;
    font-size: 0.9em;
}

.trst_pie .trst_chartLegend {
    padding-bottom: 10px;
}


.trst_pie {
    padding: 10px;
}

@media(min-width:720px) {
    .trst-large .trst_header .trst_row {
        display: inline-block;
        width: auto;
        margin-top: 0;
        padding-left: 15px;
        padding-right: 10px;
        margin-left: 0;
        margin-right: 0;
        padding-top: 0;
        border: 0;
        position: relative;
        top: -2px;
    }

    .trst-large .trst_row > span {
        display: inline-block;
        margin-right: 15px;
        width: auto;
    }

    .trst-large .trst_growth span,
    .trst-large .trst_drawdown span,
    .trst-large .trst_monthlyReturn span,
    .trst-large .trst_row > span {
        text-align: center;
    }

    .trst-large .trst_growth span,
    .trst-large .trst_drawdown span,
    .trst-large .trst_monthlyReturn span {
        display: inline-block;
    }

    .trst-large .trst_header .trst_strategy {
        padding-bottom: 0;
        margin-bottom: 0;
        font-weight: bold;
    }

    .trst-large .trst_content .trst_row > div {
        width: 49%;
        display: block;
        float: left;
        vertical-align: top;
    }

        .trst-large .trst_content .trst_row > div:last-child {
            margin-right: 0;
            margin-left: 1%;
        }

    .trst-large .trst_assetmanagement {
        margin: 10px 0 0 0;
        border: 0;
    }

    .trst-large .trst_header {
        position: relative;
    }

        .trst-large .trst_header .trst_fixedopener {
            position: absolute;
            top: 10px;
            right: 10px;
        }

    .trst-large .trst_content {
        padding: 10px 20px;
    }

        .trst-large .trst_content .trst_row .trst_striped {
            width: 100%;
        }

        .trst-large .trst_content .trst_row {
            display: table;
        }

        .trst-large .trst_content > div {
            margin-bottom: 15px;
        }

        .trst-large .trst_content > .description {
            margin-bottom: 0;
        }

    .trst-large .trst_chartLegend {
        position: relative;
        top: 10px;
        z-index: 99;
        margin-top: 10px;
    }

    .trst-large .trst_pie .trst_chartLegend {
        top: 0;
        padding-top: 0;
        margin-top: 0;
        padding-bottom: 10px;
    }

    .trst-large .trst_table {
        margin-right: 1%;
    }

    .trst-large .trst_content .trst_row {
        margin-top: 25px;
    }
}

@media(min-width:1100px) {
    .trst-large .trst_assetmanagement {
        margin: 0 0 0 0;
        width: auto;
        border: 0;
        padding-right: 0;
        display: inline-block;
        vertical-align: top;
        position: absolute;
        top: 5px;
        right: 45px;
    }
}