.tablet
{   
	position: relative;
  width: 330px;
  height: 450px;
  margin: auto;
  border: 16px black solid;
  border-top-width: 60px;
  border-bottom-width: 60px;
  border-radius: 36px;
}

.tablet .tablet-view
{
	width: 300px;
  height: 281px;
  background: white;
  margin: 0px;
}

.tablet:before

{
	/*the horizontal line of tablet*/
	content: '';
  display: block;
  width: 60px;
  height: 5px;
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #333;
  border-radius: 10px;
}

.tablet:after
{
	/* The circle on the bottom of the device */

  content: '';
  display: block;
  width: 35px;
  height: 35px;
  position: absolute;
  left: 50%;
  bottom: -65px;
  transform: translate(-50%, -50%);
  background: #333;
  border-radius: 50%;
}

.mobile
{
  position: relative;
  width: 230px;
  height: 450px;
  margin: auto;
  border: 16px black solid;
  border-top-width: 45px;
  border-bottom-width: 60px;
  border-radius: 36px;
}

.mobile .tablet-view
{
  width: 100px;
  height: 10px;
  background: white;
}


.link
{
  text-align: center;
  color: #666666;
  font-size: 36px;
  font-family:'Open sans', sans-serif;
}
.bar
{
  width: 580px;
}
#features{
  background-color: #f8f9fa;
}
/*.menu
{
  float: left;
  width: 300px;

}*/

.menu
{
  width: 565px;
font-size: 35px;
/*margin-top: 10px;
*/text-align: center;
}

.heading{ font-size: 25px; }
/*.sub-menu{
  margin-top:25px !important;
  text-align: center;
  width: 800px;
  margin-top: 0px auto;
}*/
#all_tabs
{
  text-align: center;

/*margin-left: 145px;*/

/*margin-top: 10px;*/

/*height: 55px;*/
line-height: 50px;
}
.sub-menu
{
  width: 290px;
}
.sub-menu a
{
  font-size: 25px;
}
#brands_tabs
{
  text-align: center;

/*margin-left: 145px;*/

/*margin-top: 10px;*/
/*width: 1010px;*/
/*height: 55px;*/
line-height: 50px;
}
.section1
{
  height: 450px;
}
#admin {  height: 800px;}
#parent {  height: 748px;}
#teacher { height: 800px; }
#student { height: 690px;
 background-color: #9396e5;}

 #mob_admin{height: 851px;
}
#mob_teacher {
  height: 844px;
   background-color: #d4cafb;}
#mob_parent {height: 842px;}
#mob_student {
   height: 847px; 
  background: #efe7de;}


/*.tb{width: 558px}*/

.tablet-view
{
    float: right;
    /*margin-top: 484px;*/
    height: 347px;
    width: 200px;
    margin-right: 50px;
}

.tablet-view:before
{
  content: '';
  display: block;
  width: 60px;
  height: 5px;
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translate(-50%, -50%);
  background: black;
  border-radius: 10px;
  border: 1px solid silver;
}

.tablet-view:after
{
  content: '';
  display: block;
  width: 35px;
  height: 35px;
  position: absolute;
  left: 50%;
  bottom: -65px;
  transform: translate(-50%, -50%);
  background: black;
  border-radius: 50%;
  border: 1px solid silver;

}


.tablet-view123
{
    /*float: right;*/
    margin-top: 484px;
    height: 347px;
    width: 200px;
    /*margin-right: 50px;*/
    margin-left: 45px;
}

.tablet-view123:before
{
  content: '';
  display: block;
  width: 60px;
  height: 5px;
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translate(-50%, -50%);
  background: black;
  border-radius: 10px;
  border: 1px solid silver;
}

.tablet-view123:after
{
  content: '';
  display: block;
  width: 35px;
  height: 35px;
  position: absolute;
  left: 50%;
  bottom: -65px;
  transform: translate(-50%, -50%);
  background: black;
  border-radius: 50%;
  border: 1px solid silver;

}


.tablet-view1
{
  float: right;
margin-top: 0px;
height: 231px;
width: 283px;
/*margin-right: 50px;*/
position: relative;
border: 16px black solid;
border-top-width: 19px;
border-bottom-width: 21px;
border-radius: 4px;
}

.tablet-view1:after
{
  content: '';
  display: block;
  position: absolute;
  width: 50px;
  height: 60px;
  margin: 20px 0 0 -68px;
  background: black;
  border-radius: 6px;
  margin-left: 108px;
}

.tablet-view1:before
{
  content: '';
  display: block;
  position: absolute;
  width: 109px;
  height: 39px;
  bottom: -90px;
  left: 50%;
  -webkit-transform: translate(-50%);
  transform: translate(-50%);
  background: black;
  border-bottom-left-radius: 56px;
  border-bottom-right-radius: 56px;
  z-index: 1;
  border-top-right-radius: 50px;
  border-top-left-radius: 50px;
}
 
ul#interest_tabs li:focus, ul#interest_tabs li:hover 
{
  background-color: #eee;
  position: relative;
  display: inline-block;

}

.sub-menu a:focus, .sub-menu a:hover,
{
  border-bottom: 1px solid #4ac3f3;
}

/*ul#all_tabs:hover
{
  background-color: #eee;
  position: relative;
  /*display: block;

}*/

.list:focus, .list:hover 
{
 background-color: lightblue;
}

.list1:focus, .list1:hover
{
  background-color:#b2e2aa;

}
.list2:focus, .list2:hover
{
  background-color: lightgoldenrodyellow;
}

.list3:focus, .list3:hover
{
  background-color: #9396e5 ;
}

#sub-list:focus, #sub-list:hover
{
  background-color: #a5f3fc;
}

#sub-list1:focus, #sub-list1:hover
{
  background-color: #d4cafb;
}

#sub-list2:focus, #sub-list2:hover
{
  background-color: #61e7a4;
}

#sub-list3:focus, #sub-list3:hover
{
  background-color: #efe7de;
}

 @media only screen and (max-width:  320px)
 {
     .nav .nav-tabs{ width: 100%; height: auto;}
 }
.form-control
{
  margin-bottom: 40px;
}
   @media only screen and (max-width: 676px)
 {
     .nav .nav-tabs{ width: 100%; height: auto;}
 }
@media only screen and (max-width: 979px)
 {
     .nav .nav-tabs{ width: 100%; height: auto;}
 }
 @media only screen and (max-width: 992px)
 {
     .nav .nav-tabs{ width: 100%; height: auto;}
 }
 @media only screen and (min-width: 1192px)
 {
     .nav .nav-tabs{ width: 100%; height: auto;}
 }


 @media only screen and (min-width: 676px)
 {
     .tab-pane{ width: 100%;height: 50px; }
 }
@media only screen and (min-width: 979px)
 {
     .tab-pane{ width: 100%; height: 50px;}
 }
 @media only screen and (min-width: 992px)
 {
     .tab-pane{ width: 100%; height: 50px;}
 }
 @media only screen and (min-width: 1192px)
 {
     .tab-pane{ width: 100%; height: 50px;}
 }

@media only screen and (min-width: 676px)
 {
     .tab-content{ width: 100%;height: auto; }
 }
@media only screen and (min-width: 979px)
 {
     .tab-content{ width: 100%; height: auto;}
 }
 @media only screen and (min-width: 992px)
 {
     .tab-content{ width: 100%; height: auto;}
 }
 @media only screen and (min-width: 1192px)
 {
     .tab-content{ width: 100%; height: auto;}
 }



 @media only screen and (min-width: 676px)
 {
     #admin{ width: 100%;height: 325px; }
 }
@media only screen and (min-width: 979px)
 {
     #teacher{ width: 100%; height: 325px;}
 }
 @media only screen and (min-width: 992px)
 {
     #parent{ width: 100%; height: 325px;}
 }
 @media only screen and (min-width: 1192px)
 {
     #student{ width: 100%; height: 325px;}
 }

 @media only screen and (min-width: 676px)
 {
     #mob_admin{ width: 100%;height: 375px; }
 }
@media only screen and (min-width: 979px)
 {
     #mob_teacher{ width: 100%; height: 375px;}
 }
 @media only screen and (min-width: 992px)
 {
     #mob_parent{ width: 100%; height: 375px;}
 }
 @media only screen and (min-width: 1192px)
 {
     #mob_student{ width: 100%; height: 375px;}
 }



@media only screen and (min-width: 676px)
 {
     .sub-menu{ width: 276px; }
 }
@media only screen and (min-width: 979px)
 {
     .sub-menu{ width: 276px;}
 }
 @media only screen and (min-width: 992px)
 {
     .sub-menu{ width: 276px;}
 }
 @media only screen and (min-width: 1192px)
 {
     .sub-menu{ width: 277.5px; }
 }


 /*desktop view*/

@media only screen and (min-width: 676px)
 {
.tablet-view1
{
  float: right;
margin-top: -179;
height: 231px;
width: 362px;
margin-right: 50px;
position: relative;
border: 16px black solid;
border-top-width: 19px;
border-bottom-width: 21px;
border-radius: 4px;
}

.tablet-view1:after
{
  content: '';
  display: block;
  position: absolute;
  width: 50px;
  height: 60px;
  margin: 20px 0 0 -68px;
  background: black;
  border-radius: 6px;
  margin-left: 143px;
}

.tablet-view1:before
{
  content: '';
  display: block;
  position: absolute;
  width: 109px;
  height: 39px;
  bottom: -90px;
  left: 50%;
  -webkit-transform: translate(-50%);
  transform: translate(-50%);
  background: black;
  border-bottom-left-radius: 56px;
  border-bottom-right-radius: 56px;
  z-index: 1;
  border-top-right-radius: 50px;
  border-top-left-radius: 50px;
}
 
 }
@media(min-width: 979px)
 {
     .tablet-view1
{
  float: right;
margin-top: -179px;
height: 231px;
width: 362px;
margin-right: 50px;
position: relative;
border: 16px black solid;
border-top-width: 19px;
border-bottom-width: 21px;
border-radius: 4px;
}

.tablet-view1:after
{
  content: '';
  display: block;
  position: absolute;
  width: 50px;
  height: 60px;
  margin: 20px 0 0 -68px;
  background: black;
  border-radius: 6px;
  margin-left: 143px;
}

.tablet-view1:before
{
  content: '';
  display: block;
  position: absolute;
  width: 109px;
  height: 39px;
  bottom: -90px;
  left: 50%;
  -webkit-transform: translate(-50%);
  transform: translate(-50%);
  background: black;
  border-bottom-left-radius: 56px;
  border-bottom-right-radius: 56px;
  z-index: 1;
  border-top-right-radius: 50px;
  border-top-left-radius: 50px;
}
 
 }
 @media (min-width: 992px)
 {
     .tablet-view1
{
  float: right;
margin-top: -179px;
height: 231px;
width: 362px;
margin-right: 50px;
position: relative;
border: 16px black solid;
border-top-width: 19px;
border-bottom-width: 21px;
border-radius: 4px;
}

.tablet-view1:after
{
  content: '';
  display: block;
  position: absolute;
  width: 50px;
  height: 60px;
  margin: 20px 0 0 -68px;
  background: black;
  border-radius: 6px;
  margin-left: 143px;
}

.tablet-view1:before
{
  content: '';
  display: block;
  position: absolute;
  width: 109px;
  height: 39px;
  bottom: -90px;
  left: 50%;
  -webkit-transform: translate(-50%);
  transform: translate(-50%);
  background: black;
  border-bottom-left-radius: 56px;
  border-bottom-right-radius: 56px;
  z-index: 1;
  border-top-right-radius: 50px;
  border-top-left-radius: 50px;
}
 
 }
 @media (min-width: 1192px)
 {
     .tablet-view1
{
  float: right;
margin-top: -179px;
height: 231px;
width: 362px;
margin-right: 50px;
position: relative;
border: 16px black solid;
border-top-width: 19px;
border-bottom-width: 21px;
border-radius: 4px;
}

.tablet-view1:after
{
  content: '';
  display: block;
  position: absolute;
  width: 50px;
  height: 60px;
  margin: 20px 0 0 -68px;
  background: black;
  border-radius: 6px;
  margin-left: 143px;
}

.tablet-view1:before
{
  content: '';
  display: block;
  position: absolute;
  width: 109px;
  height: 39px;
  bottom: -90px;
  left: 50%;
  -webkit-transform: translate(-50%);
  transform: translate(-50%);
  background: black;
  border-bottom-left-radius: 56px;
  border-bottom-right-radius: 56px;
  z-index: 1;
  border-top-right-radius: 50px;
  border-top-left-radius: 50px;
}
 
 }

 /*for responsive*/
.tablet-view12
{
  float: right;
margin-top: 0px;
height: 231px;
width: 283px;
/*margin-right: 50px;*/
position: relative;
border: 16px black solid;
border-top-width: 19px;
border-bottom-width: 21px;
border-radius: 4px;
}

.tablet-view12:after
{
  content: '';
  display: block;
  position: absolute;
  width: 50px;
  height: 60px;
  margin: 20px 0 0 -68px;
  background: black;
  border-radius: 6px;
  margin-left: 108px;
}

.tablet-view12:before
{
  content: '';
  display: block;
  position: absolute;
  width: 109px;
  height: 39px;
  bottom: -90px;
  left: 50%;
  -webkit-transform: translate(-50%);
  transform: translate(-50%);
  background: black;
  border-bottom-left-radius: 56px;
  border-bottom-right-radius: 56px;
  z-index: 1;
  border-top-right-radius: 50px;
  border-top-left-radius: 50px;
}


 /*mobile view*/

@media only screen and (min-width: 676px)
 {
     .tablet-view
{
    float: right;
    margin-top: -230px;
    height: 347px;
    width: 200px;
    margin-right: 180px;
}

.tablet-view:before
{
  content: '';
  display: block;
  width: 60px;
  height: 5px;
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translate(-50%, -50%);
  background: black;
  border-radius: 10px;
  border: 1px solid silver;
}

.tablet-view:after
{
  content: '';
  display: block;
  width: 35px;
  height: 35px;
  position: absolute;
  left: 50%;
  bottom: -65px;
  transform: translate(-50%, -50%);
  background: black;
  border-radius: 50%;
  border: 1px solid silver;

}
 }
@media only screen and (min-width: 979px)
 {
     .tablet-view
{
    float: right;
    margin-top: -230px;
    height: 347px;
    width: 200px;
    margin-right: 180px;
}

.tablet-view:before
{
  content: '';
  display: block;
  width: 60px;
  height: 5px;
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translate(-50%, -50%);
  background: black;
  border-radius: 10px;
  border: 1px solid silver;
}

.tablet-view:after
{
  content: '';
  display: block;
  width: 35px;
  height: 35px;
  position: absolute;
  left: 50%;
  bottom: -65px;
  transform: translate(-50%, -50%);
  background: black;
  border-radius: 50%;
  border: 1px solid silver;

}
 }
 @media only screen and (min-width: 992px)
 {
     .tablet-view
{
    float: right;
    margin-top: -230px;
    height: 347px;
    width: 200px;
    margin-right: 180px;
}

.tablet-view:before
{
  content: '';
  display: block;
  width: 60px;
  height: 5px;
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translate(-50%, -50%);
  background: black;
  border-radius: 10px;
  border: 1px solid silver;
}

.tablet-view:after
{
  content: '';
  display: block;
  width: 35px;
  height: 35px;
  position: absolute;
  left: 50%;
  bottom: -65px;
  transform: translate(-50%, -50%);
  background: black;
  border-radius: 50%;
  border: 1px solid silver;

}
 }

 


 @media only screen and (min-width: 1192px)
 {
     .tablet-view
{
    float: right;
    margin-top: -230px;
    height: 347px;
    width: 200px;
    margin-right: 180px;
}

.tablet-view:before
{
  content: '';
  display: block;
  width: 60px;
  height: 5px;
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translate(-50%, -50%);
  background: black;
  border-radius: 10px;
  border: 1px solid silver;
}

.tablet-view:after
{
  content: '';
  display: block;
  width: 35px;
  height: 35px;
  position: absolute;
  left: 50%;
  bottom: -65px;
  transform: translate(-50%, -50%);
  background: black;
  border-radius: 50%;
  border: 1px solid silver;

}
 }


  /*teacher for desktop*/
@media (min-width: 1192px){
.tablet-view12 {
    float: right;
    margin-top: -221px;
    height: 231px;
    width: 362px;
    margin-right: 50px;
    position: relative;
    border: 16px black solid;
    border-top-width: 19px;
    border-bottom-width: 21px;
    border-radius: 4px;
}

.tablet-view12:after
{
  content: '';
  display: block;
  position: absolute;
  width: 50px;
  height: 60px;
  margin: 20px 0 0 -68px;
  background: black;
  border-radius: 6px;
  margin-left: 143px;
}

.tablet-view12:before
{
  content: '';
  display: block;
  position: absolute;
  width: 109px;
  height: 39px;
  bottom: -90px;
  left: 50%;
  -webkit-transform: translate(-50%);
  transform: translate(-50%);
  background: black;
  border-bottom-left-radius: 56px;
  border-bottom-right-radius: 56px;
  z-index: 1;
  border-top-right-radius: 50px;
  border-top-left-radius: 50px;
}
 
}
@media (min-width: 676px){
.tablet-view12 {
    float: right;
    margin-top: -221px;
    height: 231px;
    width: 362px;
    margin-right: 50px;
    position: relative;
    border: 16px black solid;
    border-top-width: 19px;
    border-bottom-width: 21px;
    border-radius: 4px;
}

.tablet-view12:after
{
  content: '';
  display: block;
  position: absolute;
  width: 50px;
  height: 60px;
  margin: 20px 0 0 -68px;
  background: black;
  border-radius: 6px;
  margin-left: 143px;
}

.tablet-view12:before
{
  content: '';
  display: block;
  position: absolute;
  width: 109px;
  height: 39px;
  bottom: -90px;
  left: 50%;
  -webkit-transform: translate(-50%);
  transform: translate(-50%);
  background: black;
  border-bottom-left-radius: 56px;
  border-bottom-right-radius: 56px;
  z-index: 1;
  border-top-right-radius: 50px;
  border-top-left-radius: 50px;
}
 

}@media (min-width: 992px){
.tablet-view12 {
    float: right;
    margin-top: -221px;
    height: 231px;
    width: 362px;
    margin-right: 50px;
    position: relative;
    border: 16px black solid;
    border-top-width: 19px;
    border-bottom-width: 21px;
    border-radius: 4px;
}

.tablet-view12:after
{
  content: '';
  display: block;
  position: absolute;
  width: 50px;
  height: 60px;
  margin: 20px 0 0 -68px;
  background: black;
  border-radius: 6px;
  margin-left: 143px;
}

.tablet-view12:before
{
  content: '';
  display: block;
  position: absolute;
  width: 109px;
  height: 39px;
  bottom: -90px;
  left: 50%;
  -webkit-transform: translate(-50%);
  transform: translate(-50%);
  background: black;
  border-bottom-left-radius: 56px;
  border-bottom-right-radius: 56px;
  z-index: 1;
  border-top-right-radius: 50px;
  border-top-left-radius: 50px;
}
 

}@media (min-width: 979px){
.tablet-view12 {
    float: right;
    margin-top: -221px;
    height: 231px;
    width: 362px;
    margin-right: 50px;
    position: relative;
    border: 16px black solid;
    border-top-width: 19px;
    border-bottom-width: 21px;
    border-radius: 4px;
}

.tablet-view12:after
{
  content: '';
  display: block;
  position: absolute;
  width: 50px;
  height: 60px;
  margin: 20px 0 0 -68px;
  background: black;
  border-radius: 6px;
  margin-left: 143px;
}

.tablet-view12:before
{
  content: '';
  display: block;
  position: absolute;
  width: 109px;
  height: 39px;
  bottom: -90px;
  left: 50%;
  -webkit-transform: translate(-50%);
  transform: translate(-50%);
  background: black;
  border-bottom-left-radius: 56px;
  border-bottom-right-radius: 56px;
  z-index: 1;
  border-top-right-radius: 50px;
  border-top-left-radius: 50px;
}
 

}



 @media only screen and (min-width: 676px)
 {
     .heading-title{ width: 100%;height: auto; }
 }
@media only screen and (min-width: 979px)
 {
     .heading-title{ width: 100%; height: auto;}
 }
 @media only screen and (min-width: 992px)
 {
     .heading-title{ width: 100%; height: auto;}
 }
 @media only screen and (min-width: 1192px)
 {
     .heading-title{ width: 100%; height: auto;}
 }


@media only screen and (min-width: 676px)
 {
     .overview-block-ptb{ width: 100%;height: auto;}
 }
@media only screen and (min-width: 979px)
 {
     .overview-block-ptb{ width: 100%; height: auto;}
 }
 @media only screen and (min-width: 992px)
 {
     .overview-block-ptb { width: 100%; height: auto;}
 }
 @media only screen and (min-width: 1192px)
 {
     .overview-block-ptb{ width: 100%; height: auto;}
 }



@media only screen and (min-width: 676px)
 {
     .tablet-view123
{
    float: right;
    margin-top: -230px;
    height: 347px;
    width: 200px;
    margin-right: 85px;
    margin-top: 10px;
}

.tablet-view123:before
{
  content: '';
  display: block;
  width: 60px;
  height: 5px;
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translate(-50%, -50%);
  background: black;
  border-radius: 10px;
  border: 1px solid silver;
}

.tablet-view123:after
{
  content: '';
  display: block;
  width: 35px;
  height: 35px;
  position: absolute;
  left: 50%;
  bottom: -65px;
  transform: translate(-50%, -50%);
  background: black;
  border-radius: 50%;
  border: 1px solid silver;

}
 }
@media only screen and (min-width: 979px)
 {
     .tablet-view123
{
    float: right;
    margin-top: -230px;
    height: 347px;
    width: 200px;
    margin-right: 85px;
    margin-top: 10px;
}

.tablet-view123:before
{
  content: '';
  display: block;
  width: 60px;
  height: 5px;
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translate(-50%, -50%);
  background: black;
  border-radius: 10px;
  border: 1px solid silver;
}

.tablet-view123:after
{
  content: '';
  display: block;
  width: 35px;
  height: 35px;
  position: absolute;
  left: 50%;
  bottom: -65px;
  transform: translate(-50%, -50%);
  background: black;
  border-radius: 50%;
  border: 1px solid silver;

}
 }
 @media only screen and (min-width: 992px)
 {
     .tablet-view123
{
    float: right;
    margin-top: -230px;
    height: 347px;
    width: 200px;
    margin-right: 85px;
    margin-top: 10px;
}

.tablet-view123:before
{
  content: '';
  display: block;
  width: 60px;
  height: 5px;
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translate(-50%, -50%);
  background: black;
  border-radius: 10px;
  border: 1px solid silver;
}

.tablet-view123:after
{
  content: '';
  display: block;
  width: 35px;
  height: 35px;
  position: absolute;
  left: 50%;
  bottom: -65px;
  transform: translate(-50%, -50%);
  background: black;
  border-radius: 50%;
  border: 1px solid silver;

}
 }

 


 @media only screen and (min-width: 1192px)
 {
     .tablet-view123
{
    float: right;
    margin-top: -230px;
    height: 347px;
    width: 200px;
    margin-right: 85px;
    margin-top: 10px;
}

.tablet-view123:before
{
  content: '';
  display: block;
  width: 60px;
  height: 5px;
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translate(-50%, -50%);
  background: black;
  border-radius: 10px;
  border: 1px solid silver;
}

.tablet-view123:after
{
  content: '';
  display: block;
  width: 35px;
  height: 35px;
  position: absolute;
  left: 50%;
  bottom: -65px;
  transform: translate(-50%, -50%);
  background: black;
  border-radius: 50%;
  border: 1px solid silver;

}
 }


#interest_tabs
{
  width: 290px;
  margin-left: 15px;
}

@media only screen and (min-width: 676px)
 {
     #interest_tabs{ width: 100%;}
 }
@media only screen and (min-width: 979px)
 {
     #interest_tabs{ width: 100%; }
 }
 @media only screen and (min-width: 992px)
 {
     #interest_tabs { width: 100%; }
 }
 @media only screen and (min-width: 1192px)
 {
     #interest_tabs{ width: 100%;}
 }