/*---------------------------------------
                BODY
-----------------------------------------*/
    .body
    {
        background: white;
        min-height: auto;
        width: 100%;
    }
/* ----------------------------------
                CONTENT
------------------------------------*/
    
    hr
    {
        border: 2px solid #021d49;
    }
    .content
    {
        min-height: 700px;
    }
    .rmsg-container
    {
        text-align: center;
        font-size: 40px;
        color: #021d49;
    }

/* ----------------------------------------
                    BUTTON
------------------------------------------*/
    .class-btn
    { 
        margin: 0;
        background-color: #021d49;
        font-size: 3em;
        font-family: "Comic Sans MS";
        color: white;
        text-align: center;
        padding: .5em;
        justify-content: space-between;
        flex-grow: 1;
        text-decoration: none;
    }
    .class-selectors
    {
        display: flex;
        margin-bottom: 115px;
    }
    .class-btn:hover
    {
        background-color:#021940;
    }
/* -----------------------------------------------
                    RESULT AREA
--------------------------------------------------*/
    .student-container
    {
        display: flex;
        background: #021d49;
        /*min-height: 475px;*/
        width: 100%;
        margin: 0 auto;   
        justify-content: center;
		margin-bottom: 50px;
		padding-bottom: 25px;
    }
 
    .pos
    {
        background-color: #021d49;
        /*display: grid;*/
        height: 100%;
        width: 27%;
        margin: 0 10px;
        /*grid-template-rows: 3;*/
        /* overflow: hidden; */
    }
    .pos img
    {
		width: 100%;
		display: block;
		height: 60%;
		background-color: black;
		margin: 20px auto;
		grid-row: 2;
    }
    #year
    {
        color: white;
        font-size: 50px;
        height: 50px;
    }
    .pos h3
    {
        color: white;
        text-align: center;
        font-size: 60px;
        margin-top: 15px;
        grid-row: 1;
    }
    .pos h5
    {
        color: white;
        text-align: center;
        font-size: 25px;
        margin-top: 25px;
        grid-row: 3;
    }



        /*----------------------------------
                LABTOP SCREEN
--------------------------------------------*/
    @media only screen and (min-width: 1279px)
    {
        #year
        {
            transform: rotate(90.0deg);
            display: inline-block;
            margin: auto 0;
        }

        .student-container
        {
            width: 75%;
            align-content: flex-end;
            flex-direction: row;            
            margin-bottom: 115px;
            margin-top:115px;
        }
		.pos img
		{
			height: 305px;
		}
    }        


    @media only screen and (min-width: 958px) and (max-width: 1278px)
    {
        #year
        {
            transform: rotate(90.0deg);
            display: inline-block;
            margin: auto auto;
        }
		.pos img
		{
			height: 305px;
		}
    }
	
	@media only screen and (min-width: 626px) and (max-width: 957px)
    {
        #year
        {
            transform: rotate(90.0deg);
            display: inline-block;
            margin: auto auto;
        }
        .pos img
        {
            height: 185px;
        }
    }

    @media only screen and (max-width: 625px)
    {
        .student-container
        {
            display: grid;
            grid-template-rows: 4;
        }
        .pos
        {
            display: flex;
			margin: 0 auto;
			flex-wrap: wrap;
			width: 243px;
			justify-content: center;
        }
        #year
        {
            display: block;
            margin: 12px auto;
        }
        .class-selectors
        {
            flex-direction: column;
        }        
    }