/*
# Project Name        : Prof. J.N. Moorthy's Website
# Version             : 1.0
# Developed by        : Indian Institute Of Science Education and Research Thiruvananthapuram
# Language            : PHP
# Architecture        : MVC
# Software Dev Method : Agile
# File Name           : master.css
# File Type           : stylesheet
# File Location       : assets/styles/
# File Author         : Packiya Rajan S
*/

/* sample url : https://lmpixels.com/wp/breezycv-wp-lin/demo1-fw-dark/#about-me */


/* tags */

html{width: 100%;height: 100%;scroll-behavior: smooth;}
body{
    width: 100%;height: 100%;
    background: linear-gradient(to bottom, #1dc28e, #00baa1, #00b1af, #00a6b7, #009bb8, #0092b7, #0088b5, #167eb1, #2473ad);
    font-size:15px;
}
a{ color: {{a-color}};}
p{line-height: 1.8em;}
ul > li{line-height: 1.8em;font-size: 15px;}
ol > li{line-height: 1.8em;font-size: 15px;}

/* margin corrections */
.no_margin{margin: 0 !important;}
.no_padding{padding: 0  !important;}
.justify{text-align: justify;}
.textindent{ text-indent: 3em; }
.jnm_vertical_spacer{width: 100%; height: 2em;}

/* layouts */
.jnm_container{ width: 100%; height: 100%; display: block;}
.jnm_sidebar{ height: 100%; width: 105px; box-shadow: 0 0 5px black;float: left; overflow-x: hidden; overflow-y: auto; background-color: #232121; z-index: 1;}
.jnm_navigation{ height: auto; width: 100%; /* position: relative; top: 45%; transform: translateY(-45%); */ }
.jnm_navmenu{ padding: 0;margin: 0;list-style: none;}
.jnm_navmenu > .jnm_menuitem{ text-align: center; border-color: #54595F;border-style: solid;border-width: 0 0 1px 0;font-size: 1.0em;}
.jnm_navmenu > .jnm_menuitem:last-child{border-width: 0px;}
.jnm_navmenu > .jnm_menuitem > a{padding: 6px 0;display: block;color: #b5b6b7; transition: .3s; width: 100%;box-sizing: border-box;}
.jnm_navmenu > .jnm_menuitem > a > .icon{display: block;margin-left: auto;margin-right: auto; margin-top: 6px; margin-bottom: 6px; font-size: 1.5em; }
.jnm_navmenu > .jnm_menuitem > a:hover { color: #d9f3ff;  }
.jnm_navmenu > .jnm_menuitem.active > a { color: #0096b7; }
.jnm_submenu{ padding: 0;margin: 0; list-style: none; display:none; }
.jnm_submenu > .jnm_submenuitem{ text-align: center; font-size: 0.9em; line-height: 1.2em; padding: 3px 0; }
.jnm_submenu > .jnm_submenuitem > a{ padding: 3px 0; display: block; color: #b5b6b7; transition: .3s; width: 100%; box-sizing: border-box; }
.jnm_submenu > .jnm_submenuitem > a:hover{ color: #d9f3ff; }

.jnm_pusher{ height: 100%; width:  calc(100% - 105px); overflow-x: hidden; overflow-y: hidden; float: right; z-index: 0;scroll-behavior: smooth;}

.jnm_intro{ width: 360px; height: 100%; float: left; overflow-x: hidden; overflow-y: auto; background: transparent; }
.jnm_intro > .jnm_intro_container{ width: 100%; height: auto; max-height: 100%;box-sizing: border-box; /* position: relative; top: 45%; transform: translateY(-45%); */ padding: 1em;}

.jnm_intro_card{ width: auto;height: auto; margin: 0 auto;}
.jnm_intro_image{padding: 1em;}
.jnm_intro_image > .ui.circular.image{ border-style: solid;border-width: 3px; border-color:rgba(255, 255, 255, .90); box-shadow: 0 0 5px black; }
.jnm_intro_text > .jnm_intro_more { display: block;}
.jnm_intro_text > .jnm_intro_more > .ui.icon.buttons{margin: 0 auto; display: table;}
.jnm_intro_text > .jnm_intro_mblmore{ display: none;}

.jnm_content{ height: 100%; width: calc(100% - 363px); float: right;background: rgba(255, 255, 255, .90); overflow-y: auto; box-shadow: 0 0 5px black; box-sizing: border-box; padding: 1em 2em;scroll-behavior: smooth;}

.jnm_timeline{ display: block; }
.jnm_timeline_row {display: flex; width: 100%;}
.jnm_timeline_time{ width: 7.2em; float: left; box-sizing: border-box;  }
.jnm_timeline_data{ width: calc(100% - 7.6em); float: left; box-sizing:border-box; border-left: 2px solid rgba(34,36,38,.15); }
.jnm_timeline .jnm_timeline_time > .jnm_timeline_cell{ text-align: right; color: #0078ad; font-weight: bold;}
.jnm_timeline .jnm_timeline_time > .jnm_timeline_cell::after{position: relative;width: 4px; height: 4px;display: block; background: #0078ad;content:''; right:calc(-100% - 13px); top: 50%; transform: translateY(-300%);}
.jnm_timeline .jnm_timeline_cell{ padding: .6em 1em; }

.jnm_list{list-style: circle;padding-left: 1em;}
.jnm_list li{ line-height: 1.8em; margin: .5em 0;}

.jnm_members_card{max-width: 240px !important; font-size: .9em;}


/* for hd monitors */
@media screen and (max-width: 1366px) {

    body{font-size: 14px;}
    .jnm_intro{ width: 300px; }
    .jnm_content{ width: calc(100% - 301px);
}




/* for tables and net books */

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

    .jnm_sidebar{ width: 90px; box-shadow: 0 0 0px black; z-index: 3;}

    .jnm_navigation{ position: static; top: 0; transform: none;}

    .jnm_navmenu > .jnm_menuitem{ font-size: .9em;}
    .jnm_navmenu > .jnm_menuitem > a > .icon{ font-size: 1.2em; }

    .jnm_pusher{ overflow-y: auto;width:  calc(100% - 90px); }

    .jnm_intro{ width: 100%; height: auto; float: none; overflow-x: visible; overflow-y: visible; background: linear-gradient(to bottom, #1dc28e, #00baa1, #00b1af, #00a6b7, #009bb8, #0092b7, #0088b5, #167eb1, #2473ad); }
    .jnm_intro > .jnm_intro_container{ position: static; top: 0; transform: none; max-height: none;}
    .jnm_intro_card{ display: flex; }
    .jnm_intro_image{ width: 27%; height: auto; float: left;}
    .jnm_intro_image .ui.circular.image{position: relative; top: 50%; transform: translateY(-50%);}
    .jnm_intro_text{ width: 73%; height: auto; float: left; font-size: .9em !important; padding: 1.5em 0 0 0;}
    .jnm_intro_text > .jnm_intro_more { display: table; margin: 0 auto;}
    .jnm_intro_text br { display: none; }


    .jnm_content{ width: 100%; height: auto; float: none; overflow-x: visible; overflow-y: visible; min-height: 600px; box-shadow:  0 0 0 black;}

}



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

    body{font-size: 14px;}
    ul > li{line-height: 1.8em;font-size: 14px;}
    ol > li{line-height: 1.8em;font-size: 14px;}

    .jnm_intro > .jnm_intro_container{padding: 0;}
    .jnm_intro_image{ width: 24%; padding: 0;}
    .jnm_intro_image > .ui.circular.image{ border-width: 0px; box-shadow: 0 0 0 black; border-radius: 0px 50% 50% 0px; position: static; top: 0%; transform: none;}
    .jnm_intro_text{ padding: 0; }
    .jnm_intro_text{ width: 76%; padding: 1em 0;}
    .jnm_intro_text > h3{ font-size: 1.1em !important;}
    .jnm_intro_text > .jnm_intro_more{ display: none; }
    .jnm_intro_text > .jnm_intro_mblmore { display: block; padding:  0 2em;}
    .jnm_intro_text > .jnm_intro_mblmore > h4{ font-size: .9em !important; }

    .jnm_content{ padding: 1em; }

}

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

    .jnm_intro_text > h3{ font-size: 1.1em !important;}
    .jnm_intro_image{ width: 40%; padding: 0;}
    .jnm_intro_text{ width: 60%; padding: 1em 0;}
    .jnm_intro_text > .jnm_intro_mblmore > .ui.divider { margin: .36rem 0; }
}