html
{ height: 100%;}

*
{ margin: 0;
  padding: 0;}

body
{ font: normal .80em 'Rajdhani', sans-serif;
  background: #FFFFFF url(pattern_proto.png) repeat fixed;
  color: #FFFFFF;}

p
{ font-size: 113%;
  padding: 0 0 15px 0;
  line-height: 1.5em;}

.imgcontainer {
    margin: 10px;
    width: 115px;
    height: 115px;
    line-height: 115px;
    text-align: center;
}
.resize_fit_center {
    max-width:90%;
    max-height:90%;
    vertical-align: middle;
}

h1, h2, h3, h4, h5, h6
{ 
    font: normal 150% 'Rajdhani', sans-serif;
    color: #FFFFFF;
    margin: 0 0 0px 0;
    padding: 0px 0 0px 0;
}
h1
{
    font: normal 150% 'Rajdhani', sans-serif;
    color: #FFFFFF;
}

h2
{ 
    font: normal 98% 'Rajdhani', sans-serif;
    color: #000000;
}

h3
{ 
    font: bold 100% 'Rajdhani', sans-serif;
    color: #000000;
}

h4
{ 
    font: normal 140% 'Rajdhani', sans-serif;
    color: #000000;
}

h5
{ 
    font: normal 90% 'Rajdhani', sans-serif;
    color: #000000;
    line-height: 1.3em;
}
h6
{ 
    font: normal 98% 'Kosugi Maru', sans-serif;
    color: #000000;
}

a, a:hover
{ background: transparent;
  outline: none;
  text-decoration: underline;
  color: #ffcbc4;}

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

ul
{ margin: 2px 0 22px 17px;}

ul li
{ list-style-type: circle;
  margin: 0 0 6px 0; 
  padding: 0 0 4px 5px;}

ol
{ margin: 8px 0 22px 20px;}

ol li
{ margin: 0 0 11px 0;}

.left
{ float: left;
  width: auto;
  margin-right: 10px;}

.right
{ float: right; 
  width: auto;
  margin-left: 10px;}

.center
{ display: block;
  text-align: center;
  margin: 20px auto;}

#main, #header, #logo, #menubar, #site_content, #footer
{ margin-left: auto; 
  margin-right: auto;}

#main
{ width: 950px;
  margin: 20px auto;}

#header
{ width: 950px;
  height: 80px;}

#logo
{ width: 910px;
  position: relative;
  height: 80px;
  background: transparent;
  padding: 0px 0 0px 0;}

#logo h1, #logo h2
{ 
    font: normal 300% 'Rajdhani', sans-serif;
    border-bottom: 0;
    text-transform: none;
    margin: 0 0 0 9px;
}

#logo_text h1, #logo_text h1 a, #logo_text h1 a:hover 
{ 
    padding: 0px 0 0 0;
    color: #000000;
    letter-spacing: 0.1em;
    text-decoration: none;
}

#logo_text h1 a .logo_colour
{ color: #FFF;}

#logo_text h2
{ font-size: 120%;
  padding: 4px 0 0 0;
  color: #000000;}

#menubar
{ height: 46px;
  width: 950px;
  margin: 1px auto 0 auto;
  background: transparent url(tab_proto.png);} 

ul#menu
{ float: left;
  margin: 0;padding: 0;}

ul#menu li
{ float: left;
  padding: 0 0 0 6px;
  list-style: none;
  margin: 0px 2px 0 0;}

ul#menu li a
{ 
    font: normal 100% 'Rajdhani', sans-serif;
    display: block; 
    float: left; 
    height: 27px;
    padding: 12px 28px 5px 22px;
    text-align: center;
    color: #FFF;
    border-right: 1px solid #636363;
    text-decoration: none;
} 

ul#menu li.tab_selected a
{ height: 27px;
  padding: 6px 28px 5px 22px;}

ul#menu li.selected a, ul#menu li.selected a:hover
{ color: #FF7F61;}

ul#menu li a:hover
{ color: #C31A1A;}

#site_content
{ width: 950px;
  overflow: hidden;
  margin: 44px auto 0 auto;
  padding: 15px 0 0 0px;
  background: #b88d92 url(bg_proto.png) repeat fixed;
  border-top: 0;
  border-bottom: 0;
  color: #000000;
  } 

#content{ 
  
  margin: auto 60px auto 60px; }

#content ul
{ margin: 2px 0 12px 0px;}

#content ul li
{ list-style-type: none;
  background: url(bullet.png) no-repeat;
  margin: 0 0 2px 0; 
  padding: 0 0 4px 25px;
  line-height: 1.5em;}

#footer
{ 
    width: 950px;
    font: normal 90% 'Rajdhani', sans-serif;
    height: 40px;
    padding: 20px 0 0px 0;
    text-align: center; 
    color: #FFF;
    background: transparent url(tab_proto.png) repeat;
}

#footer p
{ padding: 0 0 10px 0;}

#footer a, #footer a:hover
{ color: #FFF;
  text-decoration: underline;}

#footer a:hover
{ color: #FFF;
  text-decoration: none;}

/* Create two equal columns that floats next to each other */
.column {
  float: left;
  width: 47.5%;
  padding: 10px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

.column4 {
  float: left;
  width: 22%;
  padding: 10px;
}
.row4:after {
  content: "";
  display: table;
  clear: both;
}

.column3 {
  float: left;
  width: 33.3%;
}

/* Clear floats after the columns */
.row3:after {
  content: "";
  display: table;
  clear: both;
}

#myBtn {
  display: none;
  position: fixed;
  top: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: black;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#myBtn:hover {
  background-color: #555;
}



.modal {
z-index:1;
display:none;
padding-top:10px;
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
overflow:auto;
background-color:rgb(0,0,0);
background-color:rgba(0,0,0,0.8)
}

.modal-content{
margin: auto;
display: block;
    position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


.modal-hover-opacity {
opacity:1;
filter:alpha(opacity=100);
-webkit-backface-visibility:hidden
}

.modal-hover-opacity:hover {
opacity:0.60;
filter:alpha(opacity=60);
-webkit-backface-visibility:hidden
}


.close {
text-decoration:none;float:right;font-size:24px;font-weight:bold;color:white
}
.container1 {
width:200px;
display:inline-block;
}
.modal-content, #caption {   
  
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}


@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}

.button {
     font: normal 150% 'Rajdhani', sans-serif;
  display: inline-block;
  border-radius: 4px;
  background-color: #ffcbc4;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 22px;
  width: 200px;
    height: 40px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button:hover span {
  padding-right: 25px;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
}

.buttonP {
     font: normal 150% 'Rajdhani', sans-serif;
  display: inline-block;
  border-radius: 4px;
  background-color: #f4b488;
  border: none;
  color: #ffeed4;
  text-align: center;
  font-size: 22px;
  width: 240px;
    height: 40px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.buttonP span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.buttonP span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.buttonP:hover span {
  padding-right: 25px;
}

.buttonP:hover span:after {
  opacity: 1;
  right: 0;
}

.buttonS {
     font: normal 150% 'Rajdhani', sans-serif;
  display: inline-block;
  border-radius: 4px;
  background-color: #ffcbc4;
  border: none;
  color: #ffeed4;
  text-align: center;
  font-size: 22px;
  width: 240px;
    height: 40px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.buttonS span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.buttonS span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.buttonS:hover span {
  padding-right: 25px;
}

.buttonS:hover span:after {
  opacity: 1;
  right: 0;
}

.buttonT {
     font: normal 150% 'Rajdhani', sans-serif;
  display: inline-block;
  border-radius: 4px;
  background-color: #e0f4e9;
  border: none;
  color: #6a717e;
  text-align: center;
  font-size: 22px;
  width: 240px;
    height: 40px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.buttonT span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.buttonT span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.buttonT:hover span {
  padding-right: 25px;
}

.buttonT:hover span:after {
  opacity: 1;
  right: 0;
}

div.but1 a
{
     color: #FFFFFF;
     text-decoration: none;
}

div.but2 a 
{
    color: #6a717e;
    text-decoration: none;
}

div.but3 a 
{
    color: #797dc3;
    text-decoration: none;
}