/*#C4122F */
:root {
  --boxC: #4d0000;
  
  --textC: white; 
}


body{
 font-family: 'Roboto', sans-serif;
background-images: url('/images/bg_line.png');
}

#contentSection {color: black;}

 h3{background-color:#F3dE8A; padding: 5px;border-radius: 10 10 5 5; 
  clip-paths: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
  clip-paths: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
text-align: center;
margin:1px;
 }

h1,h2,h3,h4,h5,h6{ color:black ; opacitys: 0.7;

}
h4{color: white;}
h3{ color:var(--boxC);opacitys:1.0; }
a{}

i{ margin-right: 5px;color:var(--boxC); font-size: 60px;}

p{color:  black; opacitys: 1}

p.heading{color: var(--boxC); font-size: 24px;}
p.text{color: black; font-size: 16px;}
dd{color: black; font-size: 16px;}
  



#academics_rules dl dt{ list-style: bullets; color: var(--boxC);  }

dd {color: #000; margin-bottom: 10px; font-size: 18px;}
dd span{margin-right:10px; color:var(--boxC);}


.glyphicons{color: #000; margin-bottom: 10px; font-size: 18px;}

.glyphicon-time{color: var(--boxC); font-weight: 700;}


.more{background-color:var(--boxC);color: white; border-radius: 4px;padding:6px;float:right; }
.more:hover{background-color: black; color: white;}




.event-caption .event-title{ color:white; 

  font-size: 13px;
  position: absolute;
  top: 30%;
  left: 40%;
  font-weight: 700;
  -webkit-transform: translate(-30%, -30%);
  -ms-transform: translate(-30%, -30%);
  transform: translate(-30%, -30%);
  }

  .event-caption .glyphicon-time{
    color:white;
  }

.event-description{display: none;}

.event-stat{color: rgb(82, 194, 45);}

.event-caption{background-color:black; position:absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  color:white;
   }

.thumbnail{position: relative;}
.thumbnail:hover .event-caption{ 
  opacity: 0.8;
}

#principalpic img{

  width: 200px;
            height: 200px;
            border-radius: 50%;
            text-align: center;
            font-size: 30px;
            float: left;
            font-weight: bold;
             
            /* Change the shape according
                to the image */
            shape-outside: circle();
            background-color: Green;
            color: white;
}
#principal p{color: black;}

.border {border: 1pt solid lightgray; opacitys: 0.7;}

.red{color: var(--boxC);opacity: 1.0;}
.redWhite{background-color: var(--boxC);color: white; opacity: 1.0}
.white{color: white;opacity: 1.0}
.grey{color: black; opacity: 0.7}

.socialMobile{opacity: 1.0;}
.socialMobile a{ display: inline; margin-left: 10px; color: white; text-decoration: none;  }
.socialMobile a i.fa-facebook{color: white;}
.socialMobile a i{color:white; margin-right: 5px;}

.facebook{background-color:#3b5998; padding:8px;display: inline-block; border-radius: 7px;text-align: center;padding-left: 12px;  }
.facebook i{color:white;}
.twitter{background-color: #1da1f2;padding:8px;display: inline-block; border-radius: 7px;text-align: center; padding-left: 12px; } 
.twitter i{color:white;}
.instagram{background-color:#c32aa3;padding:8px;display: inline-block; border-radius: 7px;text-align: center;padding-left: 12px;   }
.instagram i{color:white;}



#leftmenu p{background-colors: grey;border-radius: 10px;paddings: 5px;text-align: left;padding-left; opacity: 1.0;
}
#leftmenu p i{font-size: 24px;color:var(--boxC); }
#leftmenu p a{font-size:16px; font-weight: 700;color: black; opacity: 0.8;text-decoration:underline ;  }
#leftmenu p span{font-size: 10px;colors:;display:block; }



p.admission_p{position: absolute;
  top: 60px; 
  right:40px;
  background-color: var(--boxC);
  border-radius:15px;
  padding: 20px;
  clip-paths: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%);
background-color: #8BC6EC;
background-image: linear-gradient(to right, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100%);
z-index: 5000000;
displays: none;
   }

p.admission_p a{color: white; font-size: 18px; font-weight: 800;}



.teaching_staff_table h4{
  color: black;
  

}


.topnav {
background-colors: #333;
overflow: hidden;
font-size:16px;
borders:1pt solid var(--boxC);
}

/* Style the links inside the navigation bar */
.topnav a {
float: left;
display: block;
color: var(--boxC);
text-align: center;
padding: 14px 16px;
text-decoration: none;

}

/* Change the color of links on hover */
.topnav a:hover {
background-colors: #ddd;
color: var(--boxC);
}

/* Add an active class to highlight the current page */
.actives {
background-color: #4CAF50;
color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
display: none;
}



#topheader{border-bottom: 1pt solid darkgrey;}

#collegelogo{ position: absolute; display: none;

  vertical-align: middle;
  margin-top:20px; 
}


#collegename{

font-size: 34px;
font-weight: 800;
margin-top: 10px;
text-align: center;
color: var(--boxC);
margin-left: -40px;

}


#collegetagline{text-align: center;font-style: italic;
font-weight: 600;
letter-spacing: 7px;
opacitys: .6

color: #212221;padding-top: 4px;
borders:3pt solid var(--boxC);
margin-left:30px;

}


.carousel-inner .item {
  height: 400px;
}

.item img {
    position: absolute;
    top: 0;
    left: 0;
    min-height: 300px;
}




.boxstyles1{
  background: #02AAB0; /* fallback for old browsers */
  background: -webkit-linear-gradient(to left, #02AAB0 , #00CDAC); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to left, #02AAB0 , #00CDAC); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.boxstyles2{
  background: #F09819; /* fallback for old browsers */
  background: -webkit-linear-gradient(to left, #F09819 , #EDDE5D); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to left, #F09819 , #EDDE5D); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  
}

.boxstyles3{
  background: #DD5E89; /* fallback for old browsers */
  background: -webkit-linear-gradient(to left, #DD5E89 , #F7BB97); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to left, #DD5E89 , #F7BB97); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.boxstyles4{

  background: #DDDD89; /* fallback for old browsers */
  background: -webkit-linear-gradient(to left, #DDDD89 , #F7BB97); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to left, #DDDD89 , #F7BB97); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}

.boxstyle5{

  background: #F09819; /* fallback for old browsers */
  background: -webkit-linear-gradient(to bottom, #F09819 , #EDDE5D); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to bottom, #F09819 , #EDDE5D); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  
}
.bgTransparent{
  background-color: #fff;
  background-color: rgba(255,255,255,0.5);
  } 



  .bgBoxHeader{
background: #70e1f5; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #70e1f5 , #ffd194); 
/* Chrome 10-25, Safari 5.1-6 */

background: linear-gradient(to left, #70e1f5 , #ffd194); 
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}


.eventbox{

  width: 100%;
  height: 180px;



}

/* for events*/
div.polaroid {
  width: 100%;
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-bottom: 25px;
}

div.container {
  text-align: center;
  padding: 10px 20px;
  color: red;
}





.footer_menu_links{ displays: none;
list-style: none;

}

.footer_menu_links li a{ 
text-shadow: 0px -1px 0px #000; font-size: 14px;text-decoration: none;margin-left:5px; text-decoration: none; color: darkgrey; }

 .footer_menu_links li i{ color:var(--textC); font-size:26px; font-weight: 500; margin-right: 3px;text-decoration: none;  


 }

#footer {border :0pt solid black;
  clear:both;
/* background:#000 url(images/footer.gif)  ;*/
  
width:100%;
  height:auto;
  margin:0 auto 0 auto;
  text-align:left;padding-bottoms: 100px;
}

#footer h5{color: grey;  font-weight: 500;}


#footer p {border :0pt solid black;
  font:14px Arial, "Times New Roman", Times;width:400px;    color:#FDA041; ; 
  width:auto; -moz-border-radius:20px 20px 15px 15px; 
  
  
}
.copyright { margin-top:0px ; font:16px Arial, "Times New Roman", Times;  color:#fff ; 
 text-decorations:underline ;  color:silver; font-size:16px;  text-shadow: 2px 2px 4px #000000;  text-align:left 

 }

#footerss a {border :0pt solid black;
  color:#FFF;
  text-decoration:underline;
}

#footerss a:hover {
  color:#C46A00;
  text-decoration:none;
}


div.topmenu{ font-size:14px; }

div.topmenu .left {height: inherit;display:inline-block;margin-top: 1px;padding-left: 5px;  }
div.topmenu .left li i{color: var(--boxC); size:12px; font-weight: 500;}
div.topmenu .left li {height: inherit; list-style: none;display: inline;margin-right: 20px; }
div.topmenu .left li a{height: inherit; list-style: none;display: inline;margin-right: 20px;color:white;  text-decoration: none; }


div.topmenu .right {height: inherit;display:inline-block;margin-top: 1px;padding-left: 5px;  }
div.topmenu .right li i{color:#C46A00; size:12px; font-weight: 500;}
div.topmenu .right li {height: inherit; list-style: none;display: inline;margin-right: 20px; }
div.topmenu .right li a{height: inherit; list-style: none;display: inline;margin-right: 20px;color:white; }

div.topmenu  a:hover{color:var(--boxC);}


#footer h3{ text-align: center; padding: 5px;border-radius: 10px;}

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

[class*="col-"] {
    width: 100%;
}
.topNav{height: 60px;border:1pt solid red; display: none; color:#000;}
.topNav .right{display: none;}
.topMenu ul li{display: block;}


.copyright { margin-top:0px ; font:12px Arial, "Times New Roman", Times;  color:#fff ; 
 text-decorations:underline ;  color:silver; font-size:12px;  text-shadow: 2px 2px 4px #000000;  text-align:left 

 }
}

#menuCon{background-color: var(--boxC); }
/*
 .menuUl{display: block;
            height: 40px;border:1pt solid red;
            padding-top: 14px;
          }

          .menuUl li{display: inline-block}
          .menuUl li a {padding:10px 20px 10px 20px;
            text-decoration: none;color:#000;}
          .menuUl li a:hover{color:red;} 
          
*/
        /* Add a black background color to the top navigation */


#headerImg{height: 300px;margin-top: 31px;}

.onlyMobile{display: none;}


              /* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;

  }

.onlyMobiles{display: inline;}
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
    border-bottom:2pt inset grey;
  }
  .topnav.responsive a.icon {
    border-bottom:0pt inset grey;
  }
  #headerImg{height: 180px;margin-top: 0px;}

}

.onlyMobiles{display: inline;}
}

.arrow-down{float: right;cursor: pointer;display:inline-block;border-left:2px solid black;}


.border{border:3pt solid red;}

.borderg{border:1pt solid green;}
 

 .menuhover{}



 /* slider css *//


 .slider-pro {
    font-family: 'Open Sans', Arial;
}

/* Example 1 */

#example1 .sp-thumbnail {
  width: 100%;
  padding: 8px;
  background-color: #F0F0F0;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#example1 .sp-thumbnail-title {
  margin-bottom: 5px;
  text-transform: uppercase;
  color: #333;
}

#example1 .sp-thumbnail-description {
  font-size: 14px;
  color: #333;
}

@media (max-width: 860px) {
  #example1 .hide-medium-screen {
    display: none;
  }
}

@media (max-width: 640px) {
  #example1 .sp-layer {
    font-size: 12px;
  }

  #example1 .hide-small-screen {
    display: none;
  }
}

@media (max-width: 500px) {
  #example1 .sp-thumbnail {
    text-align: center;
  }

  #example1 .sp-thumbnail-title {
    font-size: 12px;
    text-transform: uppercase;
  }

  #example1 .sp-thumbnail-description {
    display: none;
  }
}

/* Example 3 */

#example3 .sp-selected-thumbnail {
  border: 4px solid #000;
}

/* Example 4 */

#example4 .sp-slides-container {
  background-color: #F4F4F4;
}

#example4 h3 {
  margin: 0 0 10px 0;
}

#example4 p {
  margin: 0 0 30px 0;
}

#example4 .sp-thumbnail-container {
  width: 200px;
  height: 130px;
  overflow: hidden;
  margin-bottom: 10px;
}

#example4 .sp-image-text {
  background: rgba( 80, 80, 80, 0.5 );
  color: #FFF;
  padding: 20px;
}

.links {
  text-align: center;
  margin-top: 10px;
}

/* Example 5 */

#example5 .sp-thumbnail-image-container {
  width: 100px;
  height: 80px;
  overflow: hidden;
  float: left;
}

#example5 .sp-thumbnail-image {
  height: 100%;
}

#example5 .sp-thumbnail-text {
  width: 170px;
    float: right;
    padding: 8px;
    background-color: #F0F0F0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#example5 .sp-thumbnail-title {
  margin-bottom: 5px;
  text-transform: uppercase;
  color: #333;
}

#example5 .sp-thumbnail-description {
  font-size: 14px;
  color: #333;
}

@media (max-width: 500px) {
  #example5 .sp-thumbnail {
    text-align: center;
  }

  #example5 .sp-thumbnail-image-container {
    display: none;
  }

  #example5 .sp-thumbnail-text {
    width: 120px;
  }

  #example5 .sp-thumbnail-title {
    font-size: 12px;
    text-transform: uppercase;
  }

  #example5 .sp-thumbnail-description {
    display: none;
  }
}