/*************reset START**************/
   *{
  margin: 0;
  padding:0;
}
html,body,div.container{
  height: 100%;
  width:100%;
  margin: 0;
  padding:0;
}
div.container{
  width:99%;
  margin: 1% 0.5% 0 0.5%;
}
div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,nav,button{
	margin:0;
	padding:0;
}
.page1,  .page2, .page3,  .page4, .page5{
    width:100%;
    background: #aaa;
	float:left;
	clear:both;
}


h1,h2,h3,h4,h5,h6{
  font-weight: bold;
	text-transform: uppercase;
  text-shadow: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15);
}
a{
  text-decoration: none;
}
ul, ol{
  list-style-type: none;
  padding: 0;
  margin: 0;
}
/*************reset end**************/

/*Responsive font  begining***/
html {
  font-size: 100%; /* This means 16px */
  line-height: 1.3;
}
@media all and (min-width: 800px) {
  html {
    font-size: 112.5%; /* This means 18px */
  }
}
@media all and (min-width: 1200px) {
  html {
    font-size: 125%; /* This means 20px */
    line-height: 1.4;
  }
}
h1 {
  font-size: 3.129em;
  line-height: 1.2;
}
h2 {
  font-size: 2.3353em;
}
h3 {
  font-size: 1.769em;
}
@media (min-width: 1200px) {
  h1 {
    font-size: 2.3353em;
    line-height: 1.3;
  }
  h2 {
    font-size: 1.769em;
  }
  h3 {
    font-size: 1.333em;
  }
}
/*Responsive font  ending***/

/*******block element design*****/
.box{
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #c5c5c5;
    -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
    box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
    border-radius: 3px;
}
.logo{
  position: absolute;
  z-index: 2000;
  font-weight: bold;
  text-shadow: 0 1px 0 #000,
                 0 2px 0 #000,
                 0 3px 0 #000,
                 0 4px 0 #000,
                 0 5px 0 #000,
                 0 6px 1px rgba(0,0,0,.5),
                 0 0 5px rgba(0,0,0,.5),
                 0 1px 3px rgba(0,0,0,.7),
                 0 3px 5px rgba(0,0,0,.6),
                 0 5px 10px rgba(0,0,0,.65),
                 0 10px 10px rgba(0,0,0,.6),
                 0 20px 20px rgba(0,0,0,.55);
                 color: red;
}
.hovered{
  transition: all 0.5s linear;
	-webkit-transition: all 0.5s linear;
	-moz-transition: all 0.5s linear;
	-o-transition: all 0.5s linear;
	-ms-transition: all 0.5s linear;
}

.toggle-clp, #clicked{
	display:none;
}
#clicked:checked + .toggle-clp{
    display:block;
}
.full-fixed-bg{
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
  width:100%;
  height: 100%;
}
.parent-cntd-cont{
  display: table;
}
.cntd-cont{
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}
.middle-left{
  position: absolute;
  top:50%;
  left:0;
  -ms-transform: translate(0, -50%);; /* IE 9 */
  -webkit-transform: translate(0 , -50%); /* Safari 3-8 */
  transform: translate( 0 , -50%);
}
.centd-obj{
  position: absolute;
  top:60%;
  left:50%;
  -ms-transform: translate(-50% , -50%);; /* IE 9 */
  -webkit-transform: translate(-50% , -50%); /* Safari 3-8 */
  transform: translate( -50%, -50%);
}
.middle-right{
  position: absolute;
  top:50%;
  right:0;
  -ms-transform: translate(0 , -50%);; /* IE 9 */
  -webkit-transform: translate(0 , -50%); /* Safari 3-8 */
  transform: translate( 0 , -50%);
}
.clearfix {
    overflow: auto;
}
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

.before, .after{
  position: relative;
}
.before::before, .after::after{
  position: absolute;
  content: '';
}
.success {background-color: #4CAF50;} /* Green */
.info {background-color: #2196F3;} /* Blue */
.warning {background-color: #ff9800;} /* Orange */
.danger {background-color: #f44336;} /* Red */
.other {background-color: #e7e7e7; color: black;} /* Gray */

nav.navbar{
  background-color: rgba(0,0,0,.8);
  border-radius: 8px 8px 0 0px;
  padding: 0.5% 0;
  position: fixed;
  width: 99%;
  z-index: 1000;
}
/*--the dropdown menu drop out of the navigation--*/
ul.major{
  width: 60%;
  margin: 0 auto;
}
/*--the nav menu links appears horizontally--*/
ul.major  li{
       float:left;
       display: block;
       background-color: #eee;
        min-width: 25%;
       border-left: 1px solid #bbb;
       text-align: center;
       -webkit-box-sizing: border-box;
               box-sizing: border-box;
       padding: 10px 0;

}
ul.major  li a,.main a{
  color:brown;
}
ul.major  li:hover{
 background-color: red;
}
 ul.minor{
   position: absolute;
   padding-top: 1%;
   padding-bottom: 10px;
   -webkit-transform: scale(0);
       -ms-transform: scale(0);
           transform: scale(0);
   -webkit-transition: -webkit-transform 0.3s ease-in;
   transition: -webkit-transform 0.3s ease-in;
   -o-transition: transform 0.3s ease-in;
   transition: transform 0.3s ease-in;
   transition: transform 0.3s ease-in, -webkit-transform 0.3s ease-in;
   z-index: 1000;
 }

 .dropdown{
   width:100%;
 }
.dropdown:hover +  ul.minor,ul.minor:hover{
   -webkit-transform: scale(1);
       -ms-transform: scale(1);
           transform: scale(1);
}

 /*--the nav menu links appears vertically--*/
ul.minor > li{
      display: block;
      background-color: rgba(0,0,0,.3);
      text-align: left;
      padding:8px 10px;
      margin:0;
      border-bottom: 1px solid rgba(0,0,0,.5);
  }
/*****************nav end*****************/
  /****Round image wrapped by text start***************/
.circ-img-text{
      width: 150px;
      height:150px;
      float:left;
      margin-right: 2em;
      margin-bottom: 1.5em;
      border-radius: 50%;
      shape-outside:circle();
   }
  /****Round image wrapped by text end***************/
      .grid-no-gap{
        width: 33.33%;
        float: left;
		-webkit-box-sizing:border-box;
		        box-sizing:border-box;
      }