/*======================================================
 * Extra large devices (large desktops, 1200px and up)
=======================================================*/
@media (min-width: 1200px) { ... }


/*======================================================
 * Large devices (desktops, 992px and up)
=======================================================*/
@media (min-width: 992px) and (max-width: 1199.98px) { 

	.navbar .logo-big {
		display: none;
	}
	.navbar .logo-small {
		display: block;
	}

	.header-wrapper .header-content {
		margin-top: 50px;
	}
	.header-wrapper .header-img {
		margin-top: 40px;
	}



	/*Advantages Area*/
	.advantages-area .advantage-con .advantage-item {
		margin-bottom: 20px;
	}
	.advantages-area .advantage-con h3 {
		margin-bottom: 10px;
		font-size: 25px;
	}

	/*Login Page*/
	.header-wrapper .login-content .login-box {
		padding-left: 0;
	}
	.header-wrapper .login-content {
		margin-top: 60px;
	}

	/*Admin Panel*/
	.header-admin .admin-menu ul li a {
		padding: 10px;
	}
	.table-area .table-box .alltable {
		font-size: 16px;
	}
	.table-area .table-box .alltable tr td {
		padding: 8px 10px;
	}

 }


/*======================================================
 * Medium devices (tablets, 768px and up)
=======================================================*/
@media (min-width: 768px) and (max-width: 991.98px) { 

	body {
		font-size: 17px;
	}

	.navbar .logo-big {
		display: none;
	}
	.navbar .logo-small {
		display: block;
	}

	/*header-social-bar*/
	/*
	.header-social-bar .social-bar-left {
		display: none;
	}
	.header-social-bar .social-bar-right ul {
		text-align: center;
	}
*/
	.header-social-bar .social-bar-left ul li {
		font-size: 14px;
	}
	.header-social-bar .social-bar-right ul li {
		font-size: 14px;
	}


	/*Navbar*/
	.navbar-brand {
		margin-left: 0;
	}
	.navbar-nav {
		margin-right: 0;
	}
	.navbar-expand-md .navbar-nav .nav-link {
		padding-right: 0.5rem;
		padding-left: 0.5rem;
	}
	.navbar-expand-md .navbar-nav .btn-login,
	nav.sticky .navbar-nav .btn-login {
		margin-left: 30px;
		margin-right: 15px;
	}


	.header-wrapper .header-content .header-text h2 {
		width: 100%;
		margin-bottom: 20px;
		line-height: 50px;
		font-size: 35px;
	}
	.header-wrapper .header-content .header-text .top,
	.header-wrapper .header-content .header-text .top {
		margin-bottom: 20px;
	}
	.header-wrapper .header-content {
		margin-top: 50px;
	}
	.header-wrapper .header-img {
		margin-top: 40px;
	}



	/*Advantages Area*/
	.advantages-area .advantage-img {
		padding-right: 0;
		margin-bottom: 30px;
	}
	.advantages-area .margin-b {
		margin-bottom: 20px;
	}

	/*Contact Area*/
	.contact-area .contact {
		margin-bottom: 20px;
	}

	/*Login Page*/
	.header-wrapper .login-content .login-box {
		padding-left: 0;
	}
	.header-wrapper .login-content {
		margin-top: 60px;
	}
	.contact-login .login-address {
		margin-left: 20px;
	}

	/*Admin Panel*/
	.header-admin .admin-menu ul img {
		width: 20px;
		height: 20px;
	}
	.header-admin .admin-menu ul li a {
		padding: 10px;
		font-size: 17px;
	}
	.header-admin .logo .logo-small {
		display: block;
	}	
	.header-admin .logo .logo-big {
		display: none;
	}
	.table-area {
		padding-bottom: 45px;
	}
	.table-area .user-box .graph {
		margin-bottom: 20px;
	}

}


/*======================================================
 * Small devices (landscape phones, 576px and up)
=======================================================*/
@media (min-width: 576px) and (max-width: 767.98px) { 

	body {
		font-size: 16px;
        /*font-size: 8px;*/
	}

	.side-sec { 
		width: 100%;
		height: 100px;
	}

	.navbar .logo-big {
		display: none;
	}
	.navbar .logo-small {
		display: none;
	}

	/*Navbar*/
	nav,
	nav.sticky,
	.navbar {
		display: none;
	}
	.navbar-brand {
		display: none;
	}
	.burger {
		display: block;
	}
	.side-bar ul.main li {
	  margin-bottom: 0px;
	}
	.side-bar ul.main li a {
		font-size: 16px;
	}
	.side-bar ul.main li a:after {
		bottom: 6px;
	}

	.logo a {
		display: block;
		position: absolute;
		z-index: 1030;
		float: left;
		top: 25px;
		left: 3%;
	}

	/*header-social-bar*/
	.header-social-bar {
		display: none;
	}

	.header-wrapper .header-content {
		top: 60%;
	}
	.header-wrapper .header-content .header-text h2 {
		width: 100%;
		margin-bottom: 20px;
		line-height: 45px;
		font-size: 30px;
	}
	.header-wrapper .header-content .header-text .top,
	.header-wrapper .header-content .header-text .top {
		margin-bottom: 20px;
	}
	.header-wrapper .header-content {
		margin-top: 40px;
	}
	.header-wrapper .header-img {
		margin-top: 30px;
	}

	/*Advantages Area*/
	.advantages-area .advantage-img h2 {
		font-size: 30px;
		margin-bottom: 20px;
	}
	.advantages-area .advantage-img {
		padding-right: 0;
		margin-bottom: 30px;
	}
	.advantages-area .margin-b {
		margin-bottom: 20px;
	}
	.advantages-area .advantage-box-item {
		height: 100%;
	}

	/*Contact Area*/
	.contact-area .contact,
	.contact-area .phone {
		margin-bottom: 20px;
	}
	.contact-area .phone {
		margin-top: 20px;
	}
	.contact-area .icon i {
		font-size: 30px;
		margin-left: 0;
		margin-bottom: 10px;
	}
	.contact-area .icon {
		text-align: center;
	}

	/*Login Page*/
	.header-wrapper .login-content .login-box {
		padding-left: 0;
	}
	.header-wrapper .login-content {
		margin-top: 60px;
	}
	.header-wrapper .login-content .login-con h2 {
		margin-bottom: 25px;
		font-size: 30px;
	}
	.header-wrapper .login-content .signup {
		margin-top: 25px;
		margin-bottom: 35px;
	}

	.contact-login {
		padding-top: 80px;
	}
	.contact-login .login-address,
	.contact-login .login-phone,
	.contact-login .login-email {
		margin-left: 0;
		text-align: center;
	}
	.contact-login .login-address,
	.contact-login .login-phone {
		margin-bottom: 30px;
	}
	.contact-login .login-address i,
	.contact-login .login-phone i,
	.contact-login .login-email i {
		margin-left: 0;	
	}

	/*Admin Panel*/
	.header-admin .admin-menu {
		display: none;
	}
	.header-admin .logo .logo-big,
	.header-admin .logo .logo-small {
		display: none;
	}

	/*Admin Panel Info Area*/
	.info-area .school,
	.info-area .student,
	.info-area .reports {
		margin-bottom: 15px;
	}

	.table-area {
		padding-bottom: 40px;
	}
	.table-area .user-box .graph {
		margin-bottom: 20px;
	}
	.table-area .table-box .alltable {
		font-size: 15px;
	}
	.table-area .table-box .alltable thead {
		height: 80px;
	}
	.table-area .table-box .alltable tr td {
		padding: 7px 8px;
	}


}


/*======================================================
 * Extra small devices (portrait phones, less than 576px)
=======================================================*/
@media (max-width: 575.98px) { 

	body {
		font-size: 16px;
	}

	.side-sec { 
		width: 100%;
		height: 100px;
	}

	.navbar .logo-big {
		display: none;
	}
	.navbar .logo-small {
		display: none;
	}

	/*burger*/
	.burger {
		top: 15px;
		right: 3%;
	}

	/*Navbar*/
	nav,
	nav.sticky,
	.navbar {
		display: none;
	}
	.navbar-brand {
		display: none;
	}
	.burger {
		display: block;
	}
	.side-bar ul.main li {
		margin-bottom: 0px;
	}
	.side-bar ul.main li a {
		font-size: 15px;
	}
	.side-bar ul.main li a:after {
		bottom: 6px;
	}
	.logo a {
		display: block;
		position: absolute;
		z-index: 1030;
		float: left;
		top: 15px;
		left: 3%;
	}

	/*header-social-bar*/
	.header-social-bar {
		display: none;
	}
	.header-wrapper .header-content {
		top: 60%;
	}
	.header-wrapper .header-content .header-text h2 {
		width: 100%;
		margin-bottom: 15px;
		line-height: 30px;
		font-size: 20px;
		font-weight: 400;
	}
	.header-wrapper .header-content .header-text .top,
	.header-wrapper .header-content .header-text .top {
		margin-bottom: 20px;
	}
	.header-wrapper .header-content {
		margin-top: 30px;
	}
	.header-wrapper .header-img {
		margin-top: 20px;
	}


	/*Advantages Area*/
	.advantages-area {
		padding-bottom: 20px;
	}
	.advantages-area .advantage-img h2 {
		font-size: 20px;
		margin-bottom: 20px;
		font-weight: 400;
	}
	.advantages-area .advantage-img {
		padding-right: 0;
		margin-bottom: 30px;
	}
	.advantages-area .advantage-con h3 {
		margin-bottom: 15px;
		font-weight: 400;
		font-size: 20px;
	}
	.advantages-area .margin-b {
		margin-bottom: 20px;
	}
	.advantages-area .advantage-box-item {
		height: 100%;
	}
	.advantages-area .advantages-bottom {
		margin-top: 20px;
	}

	/*Contact Area*/
	.contact-area {
		padding-bottom: 20px;
	}
	.contact-area .contact,
	.contact-area .phone {
		margin-bottom: 15px;
	}
	.contact-area .address{
		margin-top: 20px;
	}
	.contact-area .phone {
		margin-top: 15px;
	}
	.contact-area .icon i {
		font-size: 30px;
		margin-left: 0;
		margin-bottom: 10px;
	}
	.contact-area .icon {
		text-align: center;
	}
	.contact-area .address h2 {
		font-weight: 400;
		font-size: 20px;
		margin-bottom: 20px;
	}
	.contact-area .contact-field label {
		font-weight: 400;
		font-size: 18px;
	}

	/*Login Page*/
	.header-wrapper .login-content .login-box {
		padding-left: 0;
	}
	.header-wrapper .login-content {
		margin-top: 30px;
	}
	.header-wrapper .login-content .login-con h2 {
		margin-bottom: 20px;
		font-size: 20px;
	}
	.header-wrapper .login-content .signup {
		margin-top: 20px;
		margin-bottom: 35px;
	}

	.contact-login {
		padding-top: 60px;
	}
	.contact-login .login-address,
	.contact-login .login-phone,
	.contact-login .login-email {
		margin-left: 0;
		text-align: center;
	}
	.contact-login .login-address,
	.contact-login .login-phone {
		margin-bottom: 30px;
	}
	.contact-login .login-address i,
	.contact-login .login-phone i,
	.contact-login .login-email i {
		margin-left: 0;	
		font-size: 30px;
	}

	/*Admin Panel*/
	.header-admin .admin-menu {
		display: none;
	}
	.header-admin .logo .logo-big,
	.header-admin .logo .logo-small {
		display: none;
	}

	/*Admin Panel Info Area*/
	.info-area .school,
	.info-area .student,
	.info-area .reports {
		margin-bottom: 15px;
	}

	.table-area {
		padding-bottom: 35px;
	}
	.table-area .table-box .alltable {
		font-size: 13px;
	}
	.table-area .table-box .alltable thead {
		height: 80px;
		font-size: 16px;
	}
	.table-area .table-box .alltable tr td {
		padding: 8px 4px;
	}

}