/* MAIN STYLESHEET */

@import url('https://fonts.googleapis.com/css?family=Open+Sans');
@import url('https://fonts.googleapis.com/css?family=Courgette|Roboto:100,100i,300,300i,400,500,700,900');
* {
	background: #fff;
	margin: 0;
	padding: 0;
	font-size: 'Open Sans',serif;
}
body, html {
  height: 100%
}
header {
	z-index: 1;
}
h1,h2,h3,h4,h5,p,small,strong,span,label {
	text-align: center;
	padding: 10px 0;
	color: #5a5a5a;
	width: 95%;
	margin: 0 auto;
	background-color: transparent;
}
.courgette-font {
	font-family: 'Courgette', cursive;
}
.robot-font {
	font-family: 'Roboto', sans-serif;
}

.wrapper {
	width: 100%;
	height: 100%;
	display: block;
	background: transparent;
	margin: 0 auto;
	padding: 0;
}
.header {
	background: #ef9d0f;
	width: 100%;
	height: auto;
	z-index: 50;
	position: fixed;
	top: 0;
  	transition: top 0.3s; /* Transition effect when sliding down (and up) */
  	-ms-transition: top 0.3s; /* Transition effect when sliding down (and up) */
  	-o-transition: top 0.3s; /* Transition effect when sliding down (and up) */
  	-moz-transition: top 0.3s; /* Transition effect when sliding down (and up) */
  	-webkit-transition: top 0.3s; /* Transition effect when sliding down (and up) */
}

.logo-holder {
	width: 220px;
	height: 55px;
	background: #fff;
  	transition: top 0.3s; /* Transition effect when sliding down (and up) */
  	-ms-transition: top 0.3s; /* Transition effect when sliding down (and up) */
  	-o-transition: top 0.3s; /* Transition effect when sliding down (and up) */
  	-moz-transition: top 0.3s; /* Transition effect when sliding down (and up) */
  	-webkit-transition: top 0.3s; /* Transition effect when sliding down (and up) */
  	position: absolute;
  	top: 0;
  	border-right: 4px solid #25a227;
}

.logo {
	width: 120px;
	height: 53px;
	background-image: url(../assets/images/aasd-logo.png);
	background-repeat: no-repeat;
	background-size: 49%;
	background-color: transparent;
	margin: 1px 7px 7px 87px;
	position: absolute;
}
.nav {
	width: 400px;
	display: block;
	height: auto;
	background: transparent;
	margin: 0 120px auto auto;
	float: right;
}
.nav ul {
	display: block;
	background: transparent;
}
.nav li {
	list-style-type: none;
	background: transparent;
	display: inline-block;
	margin-top: 14px;
}
.nav a {
	text-decoration: none;
	padding: 20px 20px;
	margin: 3px -2px;
	background: transparent;
	color: #fff;
	font-family: sans-serif;
	font-weight: 700;
  	transition: all ease-in-out 0.3s;
  	-ms-transition: all ease-in-out 0.3s;
  	-o-transition: all ease-in-out 0.3s;
  	-moz-transition: all ease-in-out 0.3s;
  	-webkit-transition: all ease-in-out 0.3s;
}
.nav a:hover {
	text-decoration: none;
	color: #ef9d0f;
	background: #fff;
}
.nav .current {
	color: #ef9d0f;
	background: #fff;
}

.flex {
	width: 400px;
	display: block;
	height: auto;
	background: transparent;
	margin: 0 120px auto auto;
	float: right;
}
.flex ul {
	display: block;
	background: transparent;
}
.flex li {
	list-style-type: none;
	background: transparent;
	display: inline-block;
	margin-top: 14px;
}
.flex a {
	text-decoration: none;
	padding: 20px 20px;
	margin: 3px -2px;
	background: transparent;
	color: #fff;
	font-family: sans-serif;
	font-weight: 700;
  	transition: all ease-in-out 0.3s;
  	-ms-transition: all ease-in-out 0.3s;
  	-o-transition: all ease-in-out 0.3s;
  	-moz-transition: all ease-in-out 0.3s;
  	-webkit-transition: all ease-in-out 0.3s;
}
.flex a:hover {
	text-decoration: none;
	color: #ef9d0f;
	background: #fff;
}
.flex .current {
	color: #ef9d0f;
	background: #fff;
}



/* MENU BURGER */
.menu-container {
  display: none;
  cursor: pointer;
  background: transparent;
}

.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: #fff;
  margin: 6px 0;
  transition: 0.4s;
}

/* Rotate first bar */
.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
  transform: rotate(-45deg) translate(-9px, 6px) ;
}

/* Fade out the second bar */
.change .bar2 {
  opacity: 0;
}

/* Rotate last bar */
.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
  transform: rotate(45deg) translate(-8px, -8px) ;
}

.search-box {
	width: 44px;
	height: 44px;
	background-color: transparent;
	background-image: url(../assets/images/icons/search.png);
	background-repeat: no-repeat;
	background-size: 80%;
	background-position: center;
	display: block;
	position: absolute;
	top: 5px;
	right: 50px;
	cursor: pointer;
}
form {
	background: transparent;
}
.search-field {
	width: 45%;
	height: 80px;
	padding: 10px;
	position: absolute;
	top: 55px;
	right: 0;
	display: none;
	transition: all ease-in-out 0.3s;
	-o-transition: all ease-in-out 0.3s;
	-ms-transition: all ease-in-out 0.3s;
	-moz-transition: all ease-in-out 0.3s;
	-webkit-transition: all ease-in-out 0.3s;
}
.search-field input[type=search]{
	width: 90%;
	border: 2px solid #bbb;
	padding: 9px 11px;
	outline: none;
	position: relative;
	top: 8px;
}
.search-field input[type=search]:focus {
	border: 2px solid #7a7a7a;
}
.search-field-close {
	width: 45px;
	height: 46px;
	background-color: #ef9d0f;
	background-image: url(../assets/images/icons/close.png);
	background-repeat: no-repeat;
	background-size: 80%;
	border: 1px solid #ef9d0f;
	background-position: center;
	position: absolute;
	right: 20px;
	top: 18px;
	cursor: pointer;
}
.search-field-close:focus {
	outline: none;
}

.register-btn-wrap {
	width: 100%;
	height: 90px;
	display: block;
	position: absolute;
	top: 33%;
	background: transparent;
}
.register-btn {
	width: 190px;
	height: auto;
	border: 5px solid #fff;
	background: transparent;
	font-size: 25px;
	font-weight: 700;
	text-transform: uppercase;
	color: #fff;
	margin: 0 auto;
	display: block;
	padding: 20px;
	transition: all ease-in-out 0.3s;
	-ms-transition: all ease-in-out 0.3s;
	-o-transition: all ease-in-out 0.3s;
	-moz-transition: all ease-in-out 0.3s;
	-webkit-transition: all ease-in-out 0.3s;
	cursor: pointer;
	text-align: center;
}
.register-btn:hover{
	background: #fff;
	color: #333;
	text-decoration: none;
	outline: none;
}

.register-btn:focus{
	background: #fff;
	color: #333;
	text-decoration: none;
	outline: none;
}

.carousel-item {
  height: 100vh;
  min-height: 350px;
  background: no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.transparent {
	background: transparent;
}

.content {
	width: 100%;
	height: auto;
	display: block;
	background: transparent;
}

.sticky {
  	position: -webkit-sticky; /* Safari */
  	position: sticky;
  	top: 0;
	transition: top 0.3s; /* Transition effect when sliding down (and up) */
	-ms-transition: top 0.3s; /* Transition effect when sliding down (and up) */
	-o-transition: top 0.3s; /* Transition effect when sliding down (and up) */
	-moz-transition: top 0.3s; /* Transition effect when sliding down (and up) */
	-webkit-transition: top 0.3s; /* Transition effect when sliding down (and up) */
}

.block-image-1-parallex {
	width: 100%;
	min-height: 300px;
	background: #fff;
	display: block;
	background-image: url(../assets/images/DSC06262_DARK.jpg);
	background-size: cover;
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-image: rgba(0, 0, 0, 0.8);
}

.reg-form {
	width: 600px;
	height: auto;
	padding: 20px;
	display: block;
	margin: 0 auto;
	background-color: transparent;
}
.reg-form label {
	text-align: left;
}
.reg-form input[type=text]{
	width: 100%;
	height: 40px;
	padding: 7px 11px;
	border: 1px solid #ccc;
	margin: 5px auto;
}
.reg-form select{
	width: 100%;
	height: 40px;
	padding: 7px 11px;
	border: 1px solid #ccc;
	margin: 5px auto;
}
.reg-form button[type=submit]{
	width: 100%;
	height: 45px;
	padding: 7px 11px;
	border: none;
	margin: 5px auto;
	cursor: pointer;
	background-color: #ef9d0f;
	color: #fff;
	font-weight: 500;
	font-size: 20px;
	text-align: center;
	outline: none;
	transition: all ease-in-out 0.2s;
	-ms-transition: all ease-in-out 0.2s;
	-o-transition: all ease-in-out 0.2s;
	-moz-transition: all ease-in-out 0.2s;
	-webkit-transition: all ease-in-out 0.2s;
}
.reg-form button[type=submit]:hover{
	background-color: #fab030;
}
.reg-form button[type=submit]:focus{
	background-color: #ef9d0f;
}

.reg-form label{
	width: 100%;
	height: 10px;
	background-color: transparent;
	margin: 5px auto;
	font-size: 11px;
	font-weight: 500;
	font-style: italic;
}
.reg-error-wrap {
	width: 100%;
	height: 100%;
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.8);
	z-index: 100;
}
.errormsgBox {
	width: 600px;
	height: auto;
	background-color: #fff;
	color: #fc2323;
	text-align: center;
	margin: 160px auto;
	padding: 30px 0;
	font-size: 18px;
	font-weight: 700;
}
.successBox {
	width: 600px;
	height: auto;
	background-color: #fff;
	color: #5a5a5a;
	text-align: center;
	margin: 160px auto;
	padding: 30px 0;
}
#closeBox button{
	width: 100%;
	height: 30px;
	margin: 20px auto;
	display: block;
	border: none;
	color: #fff;
	background-color: #ef9d0f;
	outline: none;
}
.image-1 {
	width: 100%;
}
.block-clear {
	width: 100%;
	height: 500px;
	display: block;
	background: transparent;
}#closeBox {
	width: 130px;
	height: 30px;
	margin: 20px auto;
	display: block;
	border: none;
	color: #fff;
	background-color: #ef9d0f;
}

.block-1-testimony {
	width: 100%;
	height: auto;
	display: block;
	background: #fff;
	background-repeat: no-repeat;
	background-size: cover;
	padding: 120px 0;
}

.block-2 {
	width: 100%;
	height: auto;
	display: block;
	background: #fff;
	background-repeat: no-repeat;
	background-size: cover;
	padding: 80px 0;
}

.block-3 {
	width: 100%;
	height: 760px;
	display: block;
	background: #fff;
	background-repeat: no-repeat;
	background-size: cover;
	padding: 120px 0;
}


.block-footer {
	background: #23272f;
	width: 100%;
	min-height: 200px;
	display: block;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	bottom: 0;
	left: 0;
	padding: 40px 0;
}


/*Cookie Consent Begin*/
#cookieConsent {
    background-color: rgba(20,20,20,0.8);
    min-height: 26px;
    font-size: 14px;
    color: #ccc;
    line-height: 26px;
    padding: 8px 0 8px 30px;
    font-family: "Trebuchet MS",Helvetica,sans-serif;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: none;
    z-index: 3;
    text-align: center;
}
#cookieConsent a {
    color: #4B8EE7;
    text-decoration: none;
}

#closeCookieConsent:hover {
    color: #FFF;
}
#cookieConsent a.cookieConsentOK {
    background-color: #ef9d0f;
    color: #000;
    display: inline-block;
    border-radius: 5px;
    padding: 0 20px;
    cursor: pointer;
    float: right;
    margin: 0 60px 0 10px;
	transition: all ease-in-out 0.3s;
	-ms-transition: all ease-in-out 0.3s;
	-o-transition: all ease-in-out 0.3s;
	-moz-transition: all ease-in-out 0.3s;
	-webkit-transition: all ease-in-out 0.3s;
}
#cookieConsent a.cookieConsentOK:hover {
    background-color: #E0C91F;
}


/*Text Underline Effect*/
.expand{
  position:relative;
  text-decoration:none;
  display:inline-block;
}
.expand:after {
  display:block;
  content: '';
  border-bottom: solid 3px #5a5a5a;  
  transform: scaleX(0);  
  transition: transform 250ms ease-in-out;
  transform-origin:100% 50%;
}
.expand:hover:after { 
  transform: scaleX(1);
  transform-origin:0 50%;
}

/*Move text forward*/
span {
  display: block;
}

span:hover {
  -webkit-animation: INDENT 2s 1; /* Safari 4+ */
  -moz-animation:    INDENT 2s 1; /* Fx 5+ */
  -o-animation:      INDENT 2s 1; /* Opera 12+ */
  animation:         INDENT 2s 1; /* IE 10+ */
}

@-webkit-keyframes INDENT{  
  0%   { text-indent: 0; }
  50% { text-indent: 5px; }
  100% { text-indent: 0; }
}
@-moz-keyframes INDENT {
  0%   { text-indent: 0; }
  50% { text-indent: 5px; }
  100% { text-indent: 0; }
}
@-o-keyframes INDENT {
  0%   { text-indent: 0; }
  50% { text-indent: 5px; }
  100% { text-indent: 0; }
}
@keyframes INDENT {
  0%   { text-indent: 0; }
  50% { text-indent: 5px; }
  100% { text-indent: 0; }
}span

.contact-form {
	width: 100%;
	height: 300px;
	display: block;
	padding: 10px 0;
	background-color: #fff;
	margin: 80px auto;
}
.contact-form label {
	text-align: left;
}
.contact-form input[type=text]{
	width: 100%;
	height: 40px;
	padding: 7px 11px;
	border: 1px solid #ccc;
	margin: 5px auto;
}
.contact-form input[type=text]:hover, .contact-form textarea:hover{
	border: 1px solid #ef9d0f;
	transition: all ease-in-out 0.2s;
	-ms-transition: all ease-in-out 0.2s;
	-o-transition: all ease-in-out 0.2s;
	-moz-transition: all ease-in-out 0.2s;
	-webkit-transition: all ease-in-out 0.2s;
}
.contact-form input[type=text]:focus, .contact-form textarea:focus{
	border-color: #ef9d0f;
	outline: none;
}
.contact-form button[type=submit]{
	width: 100%;
	height: 45px;
	padding: 7px 11px;
	border: none;
	margin: 5px auto;
	cursor: pointer;
	background-color: #ef9d0f;
	color: #fff;
	font-weight: 500;
	font-size: 20px;
	text-align: center;
	outline: none;
	transition: all ease-in-out 0.2s;
	-ms-transition: all ease-in-out 0.2s;
	-o-transition: all ease-in-out 0.2s;
	-moz-transition: all ease-in-out 0.2s;
	-webkit-transition: all ease-in-out 0.2s;
}
.contact-form button[type=submit]:hover{
	background-color: #fab030;
}
.contact-form button[type=submit]:focus{
	background-color: #ef9d0f;
}

.contact-form label{
	width: 100%;
	height: 10px;
	background-color: transparent;
	margin: 5px auto;
	font-size: 11px;
	font-weight: 500;
	font-style: italic;
}

.clear-60 {
	width: 100%;
	height: 60px;
	background-color: transparent;
	display: block;
}
.clear-80 {
	width: 100%;
	height: 80px;
	background-color: transparent;
	display: block;
}
.clear-120 {
	width: 100%;
	height: 120px;
	background-color: transparent;
	display: block;
}
.contact-form form {
	width: 600px;
	background: transparent;
	padding: 10px 12px;
	margin: 60px auto 60px 10%;
}
.contact-form h3 {
	text-align: center;
	font-weight: 700;
	color: #5a5a5a;
	border-bottom: 1px solid #ccc;
	padding-bottom: 12px;
}
.contact-form textarea {
	width: 100%;
	height: 145px;
	padding: 7px 11px;
	border: 1px solid #ccc;
	margin: 5px auto;
	color: #333;
	font-weight: 500;
	font-size: 15px;
	outline: none;
}
#initial {
	text-transform: uppercase;
}
.form-message {
	font-size: 16px;
	font-weight: 600;
	text-align: center;
	background: transparent;
	margin-top: 5px;
}
.form-error {
	color: #ff0000;
	background: transparent;
}
.form-warning {
	color: #ef9d0f;
	background: transparent;
}
.form-success {
	color: #0fc120;
	background: transparent;
}
.input-error {
	box-shadow: 0 0 5px #ff0000;
}

.contacts-right {
	width: 300px;
	height: auto;
	display: block;
	position: absolute;
	right: 150px;
	top: 200px;
	background-color: transparent;
	font-weight: 700;
	color: #5a5a5a;
}

.contact-style {
	width: 100%;
	font-size: 20px;
	font-weight: 600;
	color: #5a5a5a;
}
.contacts-right p{
	font-size: 15px;
	color: #5a5a5a;
}

.testimony {
	width: 90%;
	height: auto;
	margin: 10px auto;
	background-color: transparent;
	display: inline-block;
}
.map {
	width: 100%;
	height: 400px;
	display: block;
	background-color: #fff;
	position: relative;
	border-top: 1px solid #c28315;
}
.map h3{
	background-image: linear-gradient(#ef9d0f, #c28315);
	margin: 0;
	color: #fff;
}
.testimony-header {
	width: 240px;
	height: auto;
	display: inline-block;
	margin: 10px 12px 10px 40px;
	background-color: transparent;
	cursor: pointer;
	transition: all ease-in-out 0.5s;
	-ms-transition: all ease-in-out 0.5s;
	-o-transition: all ease-in-out 0.5s;
	-moz-transition: all ease-in-out 0.5s;
	-webkit-transition: all ease-in-out 0.5s;
}
.testimony-image {
	width: 190px;
	height: 190px;
	border-radius: 100%;
	background-color: #000;
	display: block;
	margin: 10px auto 30px auto;
}
.one {
	background-image: url(http://localhost/aasd/assets/images/aasd/AASD_Consultative_Conference_at_Mangaung_Resources_Centre.jpg);
	width: 190px;
	height: 190px;
	border-radius: 100%;
	background-color: #000;
	display: block;
	margin: 10px auto 30px auto;
	border: 5px solid #ef9d0f;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.two {
	background-image: url(http://localhost/aasd/assets/images/aasd/AASD_Delegates_queuing_for_Lunch.jpg);
	width: 190px;
	height: 190px;
	border-radius: 100%;
	background-color: #000;
	display: block;
	margin: 10px auto 30px auto;
	border: 5px solid #ef9d0f;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.three {
	background-image: url(http://localhost/aasd/assets/images/aasd/Pastor_Paseka_Mokoena.jpg);
	width: 190px;
	height: 190px;
	border-radius: 100%;
	background-color: #000;
	display: block;
	margin: 10px auto 30px auto;
	border: 5px solid #ef9d0f;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.four {
	background-image: url(http://localhost/aasd/assets/images/aasd/Youth_Delegates_at_the_AASD_Manifesto.jpg);
	width: 190px;
	height: 190px;
	border-radius: 100%;
	background-color: #000;
	display: block;
	margin: 10px auto 30px auto;
	border: 5px solid #ef9d0f;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.testimony-title {
	width: 100%;
	height: auto;
	padding-bottom: 10px;
	background: transparent;
	text-align: center;
	font-weight: 700;
	color: #fff;
	font-size: 15px;
}
.testimony-title-span {
	font-size: 13px;
	font-weight: 500;
	text-align: center;
	background-color: transparent;
}
.testimony-main-image {
	width: 90%;
	height: auto;
	border: 1px solid #ccc;
	margin: 30px auto;
	padding: 20px;
	background: #fafafa;
	position: relative;
}
.main-image {
	height: auto;
	width: 270px;
	outline: none;
	background-color: transparent;
	display: inline-block;
	margin-top: -260px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.main-image img {
	display: block;
}
.main-image-img {
	background-color: rgb(0,0,0,0.6);
	width: 100%;
	height: 100%;
	display: block;
	border-radius: 100%;
  	transition: all ease-in-out 0.3s; /* Transition effect when sliding down (and up) */
  	-ms-transition: all ease-in-out 0.3s; /* Transition effect when sliding down (and up) */
  	-o-transition: all ease-in-out 0.3s; /* Transition effect when sliding down (and up) */
  	-moz-transition: all ease-in-out 0.3s; /* Transition effect when sliding down (and up) */
  	-webkit-transition: all ease-in-out 0.3s; /* Transition effect when sliding down (and up) */
}
.main-image-img:hover {
	background-color: rgb(0, 0, 0, 0.2);
}
.image-main-content {
	width: 70%;
	height: auto;
	display: inline-block;
	padding: 15px;
	background-color: transparent;
}
.image-main-content-title {
	font-size: 30px;
	color: #5a5a5a;
	text-align: center;
	font-weight: 700;
	background-color: transparent;
}
.h1 {
	text-align: center;
	width: 100%;
	display: block;
	margin: 30px auto;
}
.h2 {
	text-align: center;
	width: 100%;
	display: block;
	margin: 30px auto;
	font-size: 15px;
}
.h3 {
	text-align: center;
	width: 100%;
	display: block;
	margin: 30px auto;
	font-size: 12px;
	font-weight: 500;
}
.p p{
	text-align: center;
	display: block;
	width: 80%;
	margin: 20px auto;
}
.load-more-wrap {
	width: 300px;
	padding: 0;
	background-color: transparent;
	margin: 25px auto 10px auto;
}
.load-more {
	width: 300px;
	border: 1px solid #cf8a13;
	background-color: #ef9d0f;
	background-image: linear-gradient(#ef9d0f, #c28315);
	cursor: pointer;
	color: #333;
	font-weight: 700;
  	transition: all ease-in-out 0.3s;
  	-ms-transition: all ease-in-out 0.3s;
  	-o-transition: all ease-in-out 0.3s;
  	-moz-transition: all ease-in-out 0.3s;
  	-webkit-transition: all ease-in-out 0.3s;
}
.load-more:hover {
	color: #eee;
}
.load-more:focus {
	outline-color: #c28315;
}

.sub-heading {
	font-size: 23px;
}
.block {
	width: 100%;
	height: 100%;
	display: block;
	padding-top: 40px;
	padding-bottom: 40px;
	padding-left: 0;
	padding-right: 0;
	background-color: #fff;
}
.orange {
	background: #f3a72d;
}
.white {
	color: #fff;
}
.green {
	background-color: #125e13;
}


.footer-logo {
	width: 70px;
	height: 70px;
	margin-left: 80px;
	margin-top: -69px;
	display: block;
	background-image: url(../assets/images/footer-logo.png);
	background-color: transparent;
	background-size: cover;
}
.footer {
	width: 100%;
	height: auto;
	padding-top: 0;
	padding-bottom: 10px;
	padding-left: 0;
	padding-right: 0;
	margin: 0 auto;
	background: #4C4C59;
}
.footer .links {
	width: 100%;
	height: auto;
	margin: 0 auto;
	text-align: center;
	color: #eee;
	font-size:  12px;
	background: #1a1c23;
	padding: 12px 0;
	background-image: linear-gradient(#222730, #171a1d);
	background-image: -o-linear-gradient(#222730, #171a1d);
	background-image: -webkit-linear-gradient(#222730, #171a1d);
	background-image: -moz-linear-gradient(#222730, #171a1d);
	background-image: -ms-linear-gradient(#222730, #171a1d);
	border-top: 1px solid #333;
	border-bottom: 1px solid #222;
}
.footer a {
	text-decoration: none;
	font-size: 12px;
	margin: 0 4px;
}
.footer a:hover {
	text-decoration: underline;
}
.social-media {
	width: 210px;
	height: auto;
	margin: 30px auto 20px auto;
	text-align: center;
	background-color: transparent;
}
.facebook,.twitter,.instagram,.google-plus,.linkedin,.youtube {
	transition: all ease-in-out 0.2s;
	-webkit-transition: all ease-in-out 0.2s;
	-moz-transition: all ease-in-out 0.2s;
	-o-transition: all ease-in-out 0.2s;
	-ms-transition: all ease-in-out 0.2s;
	cursor: pointer;
}
.facebook {
	width: 30px;
	height: 30px;
	background-image: url(../assets/images/icons/social-media/facebook.png);
	background-color: transparent;
	background-size: cover;
	display: inline-block;
}
.facebook:hover {
	background-image: url(../assets/images/icons/social-media/facebook-hover.png);
}

.twitter {
	width: 30px;
	height: 30px;
	background-image: url(../assets/images/icons/social-media/twitter.png);
	background-color: transparent;
	background-size: cover;
	display: inline-block;
}
.twitter:hover {
	background-image: url(../assets/images/icons/social-media/twitter-hover.png);
}

.instagram {
	width: 30px;
	height: 30px;
	background-image: url(../assets/images/icons/social-media/instagram.png);
	background-color: transparent;
	background-size: cover;
	display: inline-block;
}
.instagram:hover {
	background-image: url(../assets/images/icons/social-media/instagram-hover.png);
}

.linkedin {
	width: 30px;
	height: 30px;
	background-image: url(../assets/images/icons/social-media/linkedin.png);
	background-color: transparent;
	background-size: cover;
	display: inline-block;
}
.linkedin:hover {
	background-image: url(../assets/images/icons/social-media/linkedin-hover.png);
}

.youtube {
	width: 30px;
	height: 30px;
	background-image: url(../assets/images/icons/social-media/youtube.png);
	background-color: transparent;
	background-size: cover;
	display: inline-block;
}
.youtube:hover {
	background-image: url(../assets/images/icons/social-media/youtube-hover.png);
}

.google-plus {
	width: 30px;
	height: 30px;
	background-image: url(../assets/images/icons/social-media/google-plus.png);
	background-color: transparent;
	background-size: cover;
	display: inline-block;
}
.google-plus:hover {
	background-image: url(../assets/images/icons/social-media/google-plus-hover.png);
}

.footer small {
	color: #ccc;
	font-size: 12px;
	text-align: center;
	display: block;
	background: transparent;
	width: 100%;
	margin: 20px auto;
	border-top: 1px solid #3E4454;
	padding: 15px 0;
}
.footer a {
	background: transparent;
	text-decoration: none;
}
.footer a:hover {
	color: #208EFF;
}

.address {
	width: 20%;
	height: auto;
	margin-left: 10%;
	display: inline-block;
	background-color: transparent;
}
.email {
	width: 20%;
	height: auto;
	margin-left: 10%;
	display: inline-block;
	background-color: transparent;
}
.tel {
	width: 20%;
	height: auto;
	margin-left: 10%;
	display: inline-block;
	background-color: transparent;
}
.footer> span,small,strong {
	color: #aaa;
}
.center {
	text-align: center;
	display: block;
}

.lead {
	color: #fff;
}


/* The Modal (background) */
.modal-wrapper {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.8);
	z-index: 555;
}
.modal-image {
	width: 200px;
	height: 180px;
	display: inline-block;
	margin: 0.6%;
	cursor: pointer;
	background-color: #333;
}
.modal-image, img {
	width: 200px;
	height: auto;
	display: inline-block;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	cursor: pointer;
}
.modal-image-wrap {
	width: 85%;
	height: auto;
	padding: 0;
	display: block;
	background-color: #2a2a2a;
	margin: 30px auto;
	padding: 20px;
	z-index: 556;
}
.img {
	width: 15%;
	height: 20%;
	background-color: transparent;
	display: inline-block;
	padding: 5px 0;
	cursor: pointer;
}
.image-display {
	width: auto;
	height: 420px;
	display: block;
	margin: 0 auto 20px auto;
	background-color: #111;
	position: relative;
	z-index: 557;
	padding-bottom: 10px;
}
.image-display img {
	width: auto;
	height: 400px;
	display: block;
	background-color: #000;
	margin: 0 auto 10px auto;
	position: relative;
	z-index: 558;
}
.modal-close {
	width: 30px;
	height: 30px;
	background-color: transparent;
	display: block;
	position: absolute;
	top: 10px;
	right: 10px;
	background-image: url(../assets/images/icons/close.png);
	background-position: center;
	background-size: 70%;
	background-repeat: no-repeat;
	cursor: pointer;
	z-index: 559;
}
.alt-holder {
	width: 100%;
	height: auto;
	display: block;
	background-color: #111;
	margin-bottom: 5px;
}
.alt {
	max-width: 350px;
	height: auto;
	padding-bottom: 5px;
	border-radius: 40px;
	background-color: #1b1b1b;
	color: #aaa;
	margin: 0 auto;
	display: block;
	font-size: 12px;
}
.alt:hover {
	color: #ccc;
}


#initial {
	width: 10px;
	height: 10px;
	background: #125e13;
	text-align: center;
	padding: 8px 14px;
	border-radius: 100%;
	font-weight: 900;
	margin-left: 5px;
}
#initial:hover {
	background: #fff;
}
.submenu {
	background: #154718;
	height: auto;
	width: 300px;
	z-index: 888;
	padding: 5px;
	position: absolute;
	top: 50px;
	right: 0;
}
.submenu li{
	background: transparent;
	width: 100%;
	margin: 1px;
}
.submenu a{
	background: #06830c;
	color: #fff;
	display: block;
	width: 100%;
	text-align: center;
	padding: 10px 0;
	margin: 0;
}

/* BULK EMAIL STYLESHEET */

.mail {
	width: 100%;
	height: auto;
	background: transparent;
	margin-top: 120px;
}
.mail form {
	width: 60%;
	margin: 0 auto;
}
.mail input[type=text]{
	width: 97.8%;
	border: 1px solid #ccc;
	background: #fff;
	color: #333;
	padding: 5px 8px;
	margin: 5px auto;
}
.mail textarea{
	width: 97.8%;
	height: 220px;
	border: 1px solid #ccc;
	background: #fff;
	color: #333;
	padding: 5px 8px;
	margin: 5px auto;
}
.mail button{
	width: 100%;
	background: #ef9d0f;
	padding: 8px 0;
	color: #fff;
	border: none;
	font-weight: 700;
	font-size: 18px;
	cursor: pointer;
}


.sms {
	width: 60%;
	height: auto;
	background: transparent;
	margin: 120px auto 0 auto;
}
.sms form {
	width: 340px;
	margin: 0 30px;
	display: inline-block;
}
.sms input[type=text]{
	width: 97.8%;
	border: 1px solid #ccc;
	background: #fff;
	color: #333;
	padding: 5px 8px;
	margin: 5px auto;
}
.sms textarea{
	width: 97.8%;
	height: 120px;
	border: 1px solid #ccc;
	background: #fff;
	color: #333;
	padding: 5px 8px;
	margin: 5px auto;
}
.sms button{
	width: 100%;
	background: #ef9d0f;
	padding: 8px 0;
	color: #fff;
	border: none;
	font-weight: 700;
	font-size: 18px;
	cursor: pointer;
}

table {
    *border-collapse: collapse; /* IE7 and lower */
    border-spacing: 0;
    width: 100%;
}

.bordered {
    border: solid #ccc 1px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0 1px 1px #ccc; 
    -moz-box-shadow: 0 1px 1px #ccc; 
    box-shadow: 0 1px 1px #ccc;         
}

.bordered td, .bordered th {
    padding: 5px;
    border-bottom: 1px solid #f2f2f2;    
}

.bordered th {
     background-color: #eee;
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset; 
    -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;  
    box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;        
    border-top: none;
    text-shadow: 0 1px 0 rgba(255,255,255,.5); 
}

.bordered tbody tr:nth-child(even) {
    background: #f5f5f5;
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset; 
    -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;  
    box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
}


/* CHAT STYLESHEET */

.chat-wrapper {
	width: 100%;
	height: 100%;
	display: block;
	background: #babdba;
}
.left {
	width: 26.7%;
	display: inline-block;
	height: 100%;
	background: #d2d4d2;
	border-right: 1px solid #aaa;
}
.left-header {
	width: 100%;
	height: 40px;
	border-bottom: 1px solid #aaa;
	background: #ccc;
	margin-top: 55px;
}
.left-header span {
	color: #333;
	font-weight: 700;
	text-align: center;
	text-transform: uppercase;
	font-family: arial;
	background: transparent;
	display: block;
	width: 100%;
	height: 20px;
	margin-bottom: 5px;
}
.left-header small{
	width: 0;
	height: 0;
	background: #05d00f;
	margin: 10px;
	display: block;
	position: absolute;
	top: 57px;
	left: 6%;
	padding: 6px;
	border-radius: 100%;
	-o-border-radius: 100%;
	-ms-border-radius: 100%;
	-moz-border-radius: 100%;
	-webkit-border-radius: 100%;
	box-shadow: 0px 0px 10px rgb(0,0,0,0.5) inset;
	-o-box-shadow: 0px 0px 10px rgb(0,0,0,0.5) inset;
	-ms-box-shadow: 0px 0px 10px rgb(0,0,0,0.5) inset;
	-moz-box-shadow: 0px 0px 10px rgb(0,0,0,0.5) inset;
	-webkit-box-shadow: 0px 0px 10px rgb(0,0,0,0.5) inset;
}
.online-user {
	width: 100%;
	height: auto;
	display: block;
	background: #d9d9d9;
	padding: 3px 0;
	cursor: pointer;
	border-bottom: 1px solid #aaa;
}
.left-pic {
	width: 30px;
	height: 30px;
	background: red;
	border: 100%;
	margin: 5px;
	border-radius: 100%;
	-o-border-radius: 100%;
	-ms-border-radius: 100%;
	-moz-border-radius: 100%;
	-webkit-border-radius: 100%;
	position: absolute;
}
.online-user p {
	width: 85%;
	background: transparent;
	position: relative;
	top: -38px;
	display: block;
	float: right;
	text-align: left;
	font-family: arial;
	font-size: 13px;
	color: #333;
	font-weight: 700;
}
.online-user:hover {
	background: #ccc; 
	transition: all ease-in-out 0.2s;
	-o-transition: all ease-in-out 0.2s;
	-ms-transition: all ease-in-out 0.2s;
	-moz-transition: all ease-in-out 0.2s;
	-webkit-transition: all ease-in-out 0.2s;
}

.right {
	width: 73.2%;
	height: 100%;
	background: #eee;
	display: block;
	position: absolute;
	top: 55px;
	right: 0;
	overflow-y: auto;
}
.user {
	width: 98%;
	height: auto;
	padding: 3px;
	margin-top: 5px;
	display: block;
	background: transparent;
}
.chat-msg-agent {
	width: 370px;
	margin: 0 10px;
	text-align: left;
	background: #fff;
	position: relative;
	left: 58%;
	display: block;
	border: 1px solid #aaa;
	padding: 10px;
	font-size: 14px;
	font-weight: 500;
	font-family: arial;
	border-radius: 15px 15px 0 15px;
	box-shadow: 0 3px 3px rgb(0,0,0,0.2);
	-o-box-shadow: 0 3px 3px rgb(0,0,0,0.2);
	-ms-box-shadow: 0 3px 3px rgb(0,0,0,0.2);
	-moz-box-shadow: 0 3px 3px rgb(0,0,0,0.2);
	-webkit-box-shadow: 0 3px 3px rgb(0,0,0,0.2);
}
.chat-msg-user {
	width: 370px;
	margin: 0 10px;
	text-align: left;
	background: #fff;
	position: relative;
	left: 1%;
	display: block;
	border: 1px solid #aaa;
	padding: 10px;
	font-size: 14px;
	font-weight: 500;
	font-family: arial;
	border-radius: 15px 15px 10px 0;
	box-shadow: 0 3px 3px rgb(0,0,0,0.2);
	-o-box-shadow: 0 3px 3px rgb(0,0,0,0.2);
	-ms-box-shadow: 0 3px 3px rgb(0,0,0,0.2);
	-moz-box-shadow: 0 3px 3px rgb(0,0,0,0.2);
	-webkit-box-shadow: 0 3px 3px rgb(0,0,0,0.2);
}
.message-field {
	width: 100%;
	height: 70px;
	background: #ef9d0f;
	position: fixed;
	bottom: 0;
	border-top: 1px solid #aaa;
}
.message-field input[type=text]{
	width: 69%;
	height: 20px;
	display: block;
	position: absolute;
	bottom: 0;
	border-top-color: #eee;
	outline: none;
	margin-bottom: 30px;
	padding: 5px 8px;
	border-radius: 10px;
	margin: 0 auto 30px 10px;
}