﻿html, body   {
    max-width: 100%;
    overflow-x: hidden;
    padding: 0;
    margin: 0;
}
body {
	background-color: #F7F7F7;
	background-image: url('../images/bg-shapa.png');
	background-repeat: repeat;
}
/* New styles 2018 here */


#intro {
	position: relative;
	width: 100%; 
    background: url(../images/shapa-head-letterbox.jpg) center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  min-height:500px;
  max-height: 501px;

}
#introbox {
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
	position: relative;
	width: 40%;
	margin-right: auto;
	margin-left: auto;
	padding-top: 20px;
	text-align: center;
	background-color: #FFFFFF; /* background of container */;
	filter: alpha(opacity=80);
	-moz-opacity: 0.8;
	-khtml-opacity: 0.8;
	opacity: 0.8;
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 20px;
}
#topwrap {
	width:100%;
	background-color:#FFFFFF;
	padding-top:20px;
}
#logowrapper {
	position: relative;
	width: 100%;
	max-width:1020px;
	margin-right: auto;
	margin-left: auto;
	background-color:#FFFFFF;
	padding-left:10px;
	padding-right:10px;
}
#logo {
	position: relative;
	width: 15%;
	float: left;
}
#strap {
	position: relative;
	width: 51%;
	float: left;
	padding-right: 2%;
	padding-left: 2%;
	text-align:center;
	padding-top:10px;
}
#search1 {
	position: relative;
	width: 30%;
	float: left;
}
#contact-details {
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
	text-align: center;
	margin-top: 10px;
	background-color: #002F50;
	padding-top: 10px;
	padding-bottom: 10px;
}
#menu {
	position: relative;
	width: 100%;
	max-width: 1020px;
	margin-right: auto;
	margin-left: auto;
}



#newmenu {
	position: relative;
	width: 100%;
	background-color: #097FC4;
}



#twitter {
	 position: relative;
	width: 30%;
	float: left;
}

/* finish new header styles here */

#wrapper {
	width: 100%;
	max-width: 1020px;
	margin-right: auto;
	padding-left:10px;
	padding-right:10px;
	margin-left: auto;
	background-color: #FFFFFF;
	padding-top:20px;
}


#slider {
	position: relative;
	width: 100%;
}
#main {
	padding:1%; /*   10px*/
	position: relative;
	width: 62%;   /* 600px*/
	float: left;
	margin-top: 1%; /*   10px*/
}
#tech-main{
	padding:1%; /*   10px*/
	position: relative;
	width: 62%;   /* 600px*/
	float: left;
	margin-top: 1%; /*   10px*/
}
#news {
	overflow: auto;
	position: relative;
	padding: 1%; /*   10px*/
	margin-top: 10px; /*   10px*/
	margin-left: 1%; /*   10px*/
	float: left;
	width: 33%;     /*320px*/
	height: 300px;
}
div.bottom-content{
	padding: 1%;
}
.clear {
	position: relative;
	clear: both;
}
#box1 {
	position: relative;
	width: 31.33333333333333%;  /* 302px*/
	padding-top: 10px; /*   10px*/
	padding-right: 1%; /*   10px*/
	padding-bottom: 10px; /*   10px*/
	margin-left: 1%; /*   10px*/
	float: left;
}
#box2 {
	position: relative;
	width: 31.33333333333333%;  
	padding-top: 10px; 
	padding-right: 1%; 
	padding-bottom: 10px; 
	margin-left: 1%; 
	float: left;
}
#box3 {
	position: relative;
	width: 31.33333333333333%;  
	padding-top: 10px; 
	padding-right: 1%; 
	padding-bottom: 10px; 
	margin-left: 1%; 
	float: left;
}
#section-bottom {
    width:98%; 
	position: relative;
	padding: 1%; 
	margin-top: 10px; 
}


#footerwarapper {
	position: relative;
	width: 100%;
	background-color: #003358;
}

#footerinnerwrap {
	 position: relative;
	 width:100%;
	 max-width: 1020px;
	 margin-right: auto;
	margin-left: auto;
	padding-top: 10px;
	padding-bottom: 10px;
}

#bottom-contact {
	position: relative;
	width: 18%;
	padding:1%;
	float: left;
}

#breadcrumb {
   position: relative;
   width: 78%;
   float: left;
   padding:1%;
}


.sections {
   position: relative;
   width: 30%;
   padding: 1%;
   float: left;
   
}

img {
	max-width:100%; 
	height: auto !important;
}


/* NO NEED FOR BELOW IN MEDIA QUERIES */


.letter-space {
	padding-right: 5px;
}
.img-right {
	float: right;
}

.indent-text {
	text-indent: 10px;
	padding-left: 40px;
}


tr { 
    padding: 0px;
}
td  { 
    padding: 0px;
}

table  { 
    border-spacing: 0;
    border-collapse: collapse;
}

div.cta-button{
	text-align: center;
    margin: 15px;
}
div.iwd-landing-header{width: 100%; text-align: center;}
div.iwd-landing-header h1 {font-size: 3rem;}
div.iwd-landing-main {width: 100%;}
div.iwd-landing-main .profile-row {width: 98%; margin:15px 1%; background-color: #ebebeb;}
div.iwd-landing-main .profile-row:after {content:""; display: table; clear: both;}
div.profile-row .profile-img {width: 28%; height:300px; margin:0 1%; background-repeat:no-repeat; background-size:300px;}
div.profile-row .profile-img.right{float:right;}
div.profile-row .profile-img.left{float:left;}
div.profile-row .profile-bio {width: 68%; margin:0 1%;}
div.profile-row .profile-bio.right {float:right;}
div.profile-row .profile-bio.left {float:left;}
div.profile-row .profile-bio h2 {padding:10% 10% 0 10%; font-size:2rem; margin:0;}
div.profile-row .profile-bio p {padding:0 10% 10% 10%; font-size:1.5rem; margin:0;}

@media only screen and (max-width: 425px){
	div.profile-row .profile-img {width: 90%; margin:0 5%; background-size: 400px;}
	div.profile-row .profile-img.right {float:none;}
	div.profile-row .profile-img.left {float:none;}
	div.profile-row .profile-bio {width: 98%}
	div.profile-row .profile-bio.right{float: none;}
	div.profile-row .profile-bio.left{float:none;}
}

div.iwd-single-header {width:100%;}
div.iwd-single-header:after {content:""; display: table; clear: both;}
div.iwd-single-header-left {width:27%; margin-right:1%; float:left; padding:1%; background-color: aliceblue;}
div.iwd-single-header-right {width:68%; float:right; margin:0 1%;}
div.iwd-single-header-right h1 {text-align: center; margin-top: 40px; font-size: 38px;}
div.iwd-single-mainbody {width: 100%; margin:0 1%;}
p.sign-off {font-weight:500; font-size:1.5rem;}
div.iwd-single-mainbody-image {width: 60%; margin:0 20%;}
div.iwd-single-footer {height: 75px; background-color: grey}
div.iwd-single-mainbody h2 {font-size: 1.5rem;}
div.iwd-single-footer p {text-align: center; font-size:2.4rem; padding: 1%; margin:15px;}

@media only screen and (max-width: 425px){
	div.iwd-single-header-left {float: none; width:90%;}
	div.iwd-single-header-right{float:none; width:90%;}
	div.iwd-single-mainbody {width: 90%}
	div.iwd-single-footer{height: 200px}
}
div.news-feed-main div.post-item{
	background:#f3f2f2;
	padding: 10px;
	margin:10px 0;
}