/* --------------------------------------------------------
Psychologist - Psychologist Practice HTML5 Template
Author: http://themeforest.net/user/rayoflightt
Website: http://rayoflightthemes.com
----------------------------------------------------------*/
/* -----------------------------------------------------------
CONTENTS:
color variables
variables
html5 and responsive content
reset
menu+ general clases
button
toptext
main columns
about - skills counter
team
banner
home blog
tabs2 - testimonials
portfolio 
services
contact
footer stick to bottom fix
twitter
inner page
accordion
blog pages
events page
timeline
------------------------------------------------------------*/

/*********** CHANGE COLOR HERE ************/
@dark-color: #252b3b;
@light-color: #ff6544;
@base-color1: #f0f0f0;
@base-color2: #555555;

/********* variables *********/
.transition {
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
          transition: all 0.5s ease;
}
.borderradius0 {
  -webkit-border-radius: 0;
     -moz-border-radius: 0;
          border-radius: 0;
}
.circle {
  -webkit-border-radius: 500px;
     -moz-border-radius: 500px;
          border-radius: 500px;
}
	   
/********* variables end *********/


/********* html5 and responsive content *********/
header, 
nav, 
article, 
section, 
aside, 
footer {
  display: block;
} 
img {
  max-width: 100%; 
  width: auto;
  -ms-interpolation-mode: bicubic; 
}
img, 
embed, 
object, 
video {
  max-width: 100%;
}
/********* html5 and responsive content end *********/


/********* reset *********/
a:link, 
a:visited { 
  outline: none;
  text-decoration: none;
  color: @base-color1;
  &:hover { 
    outline: none;
    text-decoration: none;
    color: @light-color;
  }
}
ul, 
ol { 
  margin: 0 0 22px 0;  
  padding: 0;
  list-style: none;
  line-height: 1.6; 
}
ul li, 
ol li { 
  margin: 0 0 11px 0; 
  padding: 0; 
  list-style: none;
}
h1, 
h2, 
h3, 
h4, 
h5, 
h6 {
  margin-top: 0;
  color: @dark-color;
  font-family: "Raleway", arial, san-serif;
}
h1, 
h2 
{
  font-weight: 900;
  margin-bottom: 22px;
}
h3, 
h4,
h5,
h6 {
  font-weight: 700;
  margin-bottom: 10px;
}
h1, 
h2 {
  line-height: 1.2;
}
h3, 
h4, 
h5, 
h6 {
  line-height: 1.4;
}
h6 {
  font-size: 14px;
}
h5 {
  font-size: 18px;
}
h4 {
  font-size: 22px;
}
h3 {
  font-size: 27px;
}
h2 {
  font-size: 36px;
}
h1 {
  font-size: 44px;
}
p {
  margin: 0 0 22px 0;
  color: @base-color2;
  font-size: 14px;
  font-family: "Raleway", arial, san-serif;
  font-weight: 400;
  line-height: 1.6;
}
blockquote {
  margin: 0 0 22px 0;
  padding: 22px;
}
blockquote p {
  margin: 0;
}
/***bootstrap fix important***/
.row {
  margin-right: 0;
  margin-left: 0;
}
@media (max-width: 767px) {
.pull-right{
  float: none;
  width: 100%;
  padding: 0;
  margin: 0;
}
}
@media (max-width: 767px) {
.navbar-fixed-top{
  position: relative!important;
}
}
/********* reset end *********/


/********* menu + general classes *********/
html,
body {
  height: 100%;
}
body { 
  height: 100%;
  line-height: 1.6;
  background: #fff;
  background-attachment: fixed;
  font-size: 14px;
  font-family: "Raleway", Arial, sans-serif;
  font-weight: 400;
  color: @base-color2;
  overflow-x: hidden;
}
::selection {
  color: #fff;
  background: @dark-color; 
}
::-moz-selection {
  color: #fff;
  background: @dark-color; 
}
.wrapper100percent {
  float: left;
  width: 100%;
}
/*** sections ***/
.sectionwrapper {
  position: relative;
  float: left;
  margin-top: 1px;
  padding-bottom: 120px;
  width: 100%;
}
.section1 {
  padding: 0;
  background: #fff;
}
.section1a {
  padding: 120px 0 0 0;
  background: @base-color1 url(../images/map.png) center center no-repeat;
}
.section1b {
  padding: 0 0 120px 0;
  background: @base-color1;
}
.section2 {
  padding: 0 0 120px 0;
  background: #fff;
}
.section2a {
  padding: 0 0 120px 0;
  background: @dark-color;
  .mainheadlinewrapper .mainheadline{
    h2{
      color: #fff;
    }
	h4{
      color: #fff;
    }
  }
}
.section2b {
  padding: 0;
  background: #fff;
}
.sectioncta {
  background: @light-color;;
  .button1big a {
  display: block;
  width: 100%;
    &:link,
	&:visited {	
	padding: 60px 0;
	  text-wrap: none;
      font-size: 35px;
	  letter-spacing: 3px;
	  text-transform:uppercase;
	  text-align: center;
	  font-weight: 400;
	  border: none;
	  color: #fff;
    }
	&:hover{
	  background: @base-color1;
	  border: none;
	  color: @light-color;
	  .transition;
    }
 }
}
.section4a {
  padding: 120px 0;
  background: @base-color1;
}
/*** sections end ***/
.mainheadlinewrapper {
  margin-top: 0;
  margin-bottom: 66px; 
  float: left;
  width: 100%;
  .mainheadline {
    text-align: center;
    h2 {
      display: inline-block;
      font-weight: 800;
	  text-transform: uppercase;
      margin-bottom: 0;
      font-size: 36px;
      font-family: raleway;
      color: @dark-color;
	span {
      color: @light-color;
    }
   }
   h4 {
      font-weight: 400;
      margin-bottom: 10px;
      font-size: 22px;
   }
 }
 .mainheadlinesmall {
    text-align: center;
	 h3 {
      font-weight: 700;
      margin-bottom: 0;
      font-size: 27px;
   }
}
}
.mainheadlinewrapperpage {
  margin-top: 70px;
  margin-bottom: 66px;
  padding: 44px 0;
  background: @base-color1;
  h1 {
   font-size: 35px;
   margin-bottom: 0;
 }
}
.mainheadlinewrappersmall {
  margin-top: 0;
  margin-bottom: 44px; 
  float: left;
  width: 100%;
 .mainheadlinesmall {
    text-align: center;
	 h4 {
      font-weight: 400;
      margin-bottom: 0;
      font-size: 27px;
   }
}
}
@media (max-width: 767px) {
.mainheadlinewrapperpage {
  margin-top: 0;
  margin-bottom: 44px;

}
}
/****** menu ******/
.navbar-toggle {
  position: relative;
  float: right;
  width: 42px;
  height: 34px;
  margin-top: 22px;
  margin-bottom: 8px;
  background-color: @dark-color;
  border: none;
  border-radius: 0;
  &:hover,
  &:focus{
    background-color: @light-color
  }
  .icon-bar {
    background-color: #fff;
  }
}
.navbar-fixed-top .navbar-collapse,
.navbar-fixed-bottom .navbar-collapse {
  max-height: 30000px;
}
@media (max-width: 480px) and (orientation: landscape) {
  .navbar-fixed-top .navbar-collapse,
  .navbar-fixed-bottom .navbar-collapse {
    max-height: 30000px;
  }
}
.navbarwrapper {
  float: left;
  width: 100%;
  height: auto;
  background: @dark-color;
}
.navbar {
  float: left;
  width: 100%;
  min-height: 70px;
  height: 70px;
  padding-right: 15px;
  padding-left: 15px;
  margin-bottom: 0;
  border-radius: 0;
}
.nav > li > a:link, 
.nav > li > a:visited {
  position: relative;
  display: inlne-block;
  margin-top: -1px;
  padding: 27px 15px 25px 15px;
  color: @base-color1;
  background: transparent;
  font-size: 13px; 
  font-family: raleway;
  font-weight: 700;
  text-transform: uppercase;
  .transition
}
.nav > li > a:hover,
.nav > li > a:active {
  color: @light-color;
}
.navbar-nav > .active > a:link,
.navbar-nav > .active > a:visited,
.navbar-nav > .active > a:hover,
.navbar-nav > .active > a:focus {
  display: inlne-block; 
  color: @light-color;
  .borderradius0;
}
/*** for dropdown hide ***/
.navbar-nav li ul {
  position: absolute;
  z-index: 100;
  left: -9999px;
}
.navbar-nav li:hover ul {
  left: 0;
}
.navbar-nav li:hover ul li ul {
  left: -9999px;
}
.navbar-nav li ul li ul {
  postion: absolute;
  left: -9999px;
}
.navbar-nav li ul li:hover ul  {
  left: 0;
}
/*** for dropdown hide end ***/
/*** second level ***/
.navbar-nav > li > ul  {
  padding: 0;
  margin: 0;
  width: 100%;
}
.navbar-nav > li > ul > li {
  padding: 0;
  margin: 0;
  width: 100%;
}
.navbar-nav > li > ul > li > a:link, 
.navbar-nav > li > ul > li > a:visited {
  position: relative;
  display: block;
  padding: 7px 15px;
  width: 150px;
  margin: 0;
  background: #252b3b;
  font-weight: 700;
  color: #f0f0f0;
  font-size: 13px;
  text-transform: uppercase;
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
          transition: all 0.5s ease;
}
.navbar-nav > li > ul > li > a:hover {
  color: #ff6544;
}
.navbar-nav > li:hover ul { 
  left:0;
}
/*** second level end ***/
@media (max-width: 1200px) {
.nav > li > a:link, 
.nav > li > a:visited {
  padding: 27px 12px;
}
}
@media (max-width: 1000px) {
.nav > li > a:link, 
.nav > li > a:visited {
padding: 27px 4px;
font-size:13px;
}
}
@media (max-width: 767px) {
.navbar-nav > li > a {
  margin-bottom: 5px;
}
.navbar-nav > li > a {                                           
  margin-left: 0;
}
.navbar-nav > li > a{
  margin-right: 0;
  color: #fff;
}
.navbar {
  height: auto;
}
.nav  {
  margin-top: 20px;
}
.nav li {
  width: 100%;
  text-align: center;
}
.navbar-nav > li > ul > li > a:link, 
.navbar-nav > li > ul > li > a:visited {
  width: 100%;
  text-align: center;
  display: block;
}
.navbar-nav li ul {
  position: relative;
  z-index: 100;
  left: 0;
}
.navbar-nav li:hover ul {
  left: 0;
}
.navbar-nav li:hover ul li ul {
  left: 0;
}
.navbar-nav li ul li ul  {
  postion: relative;
  left: 0;
}
.navbar-nav li ul li:hover ul  {
  left: 0;
}
.navbarwrapper {
  position: relative;
  z-index: 900;
}
}
/*** menu end ***/
/********* menu + general classes end **********/  


/********* button **********/  
.button1 a {
    &:link,
	&:visited {	
	  display: inline-block;
	  text-wrap: none;
	  padding-top: 40px;
      font-size: 14px;
	  letter-spacing: 3px;
	  text-transform:uppercase;
	  padding: 15px 36px;
	  text-align: center;
	  font-weight: 600;
	  border: 2px solid @dark-color;
	  color: @dark-color;
    }
	&:hover{
	  color: @light-color;
	  .transition;
    }
}
.button1small a {
    &:link,
	&:visited {	
	  display: inline-block;
	  text-wrap: none;
	  padding-top: 40px;
      font-size: 12px;
	  letter-spacing: 2px;
	  text-transform:uppercase;
	  padding: 8px 18px;
	  text-align: center;
	  font-weight: 600;
	  border: 2px solid @dark-color;
	  color: @dark-color;
    }
	&:hover{
	  color: @light-color;
	  .transition;
    }
}
.button1big a {
    &:link,
	&:visited {	
	  display: inline-block;
	  text-wrap: none;
      font-size: 22px;
	  letter-spacing: 3px;
	  text-transform:uppercase;
	  padding: 15px 36px 10px 36px;
	  text-align: center;
	  font-weight: 600;
	  border: 2px solid @dark-color;
	  color: @dark-color;
    }
	&:hover{
	  color: @light-color;
	  color: #fff;
	  .transition;
    }
}
/********* button end **********/  


/********* toptext **********/  
/* parallax section */
.sectiontop {
  margin-top: 70px;
  min-height: 900px;
  background: #fff url(../images/parallax.jpg) 50% 0 no-repeat fixed;
}
@media (max-width: 1300px) {
.sectiontop {
  margin-top: 0;
  min-height: 700px;
}
}
@media (max-width: 962px) {
.sectiontop {
  margin-top: 0;
  min-height: 600px;
}
}
.sectiontopinner {
  position: relative;
  width: 100%;
  float: left;
  min-height: 900px;
  padding: 0;
  background: rgba(255, 255, 255, 0.8);
}
@media (max-width: 1300px) {
.sectiontopinner {
  margin-top: 0;
  min-height: 700px;
}
}
@media (max-width: 962px) {
.sectiontopinner {
  margin-top: 0;
  min-height: 600px;
}
}
.toptext {
  position: absolute;
  top: 50%;
  margin-top: -100px;
  width: 100%;
  float: left;
  text-align: center;
  h2 {
    font-size: 44px;
	text-transform: uppercase;
	color: @light-color;
	margin-bottom: 22px;
  }
   h3 {
    font-size: 18px;
	font-weight: 400;
	margin-bottom: 50px;
  }
  #toplink a {
    &:link,
	&:visited {
	  padding-top: 50px;
      font-size: 14px;
	  letter-spacing: 3px;
	  text-transform:uppercase;
	  padding: 15px 36px;
	  font-weight: 600;
	  border: 2px solid @dark-color;
	  color: @dark-color;
    }
	&:hover{
	  color: @light-color;
	  .transition;
    }
  }
}
@media (max-width: 767px) {
.toptext h2{
  font-size: 35px;
}
}
@media (max-width: 500px) {
.toptext {
  margin-top: -150px;
}
}
/********* toptext end **********/  


/********* main columns **********/  
.maincolumns {
  width: 100%;
  float: left;
  text-align: center;
  .onecolumn {
    padding: 88px 0;
    width: 33.33%;
	float: left;
	i {
      color: #fff;
	  font-size: 88px;
	  margin-bottom: 20px;
    }
	h3 {
	  font-size: 27px;
      color: #fff;
	  text-transform: uppercase;
    }
	p {
      color: #fff;
	  margin-left: 60px;
	  margin-right: 60px;
    }
  }
  .onecolumn.onecolumn1 {
      background: @dark-color;
   }
   .onecolumn.onecolumn2 {
      background: #fff;
	  i {
        color: @light-color;
      }
	  h3 {
        color: @dark-color;
      }
	  p {
      color: @base-color2;
     }
   }
   .onecolumn.onecolumn3 {
      background: @light-color;
   }
  }	
@media (max-width: 767px) {
.maincolumns .onecolumn {
  width: 100%;
}
}
/********* maincolumns end **********/  

/********* about **********/ 
.aboutimage  {
  position: relative;
  width:525px; 
  height:700px;
  img {
   position:absolute; 
   bottom: 0;
   width:525px; 
    height:700px;
  }
}
@media (max-width: 767px) {
.aboutimage  {
  position: relative;
  width:auto; 
  height:auto;
  img {
   position: relative; 
   bottom: auto;
   width:auto; 
   height:auto;
  }
 }
}
/*** skills ***/
.skills { 
  margin-top: 22px;
  margin-bottom: 12px;
  float: left;
  width: 100%;
  .skillonewrapper  { 
    width: 100%;
	float: left;
    margin-bottom: 22px;
    p { 
      margin-bottom: 5px;
      color: @dark-color;
      font-size: 14px;
      font-weight: 400;
	  letter-spacing: 2px;
    }
    .skillone { 	
      width: 100%;
      height: 20px;
      background: @dark-color;
      margin-bottom: 22px; 
      .skilloneinner.skilloneinner1 { 
        width: 90%;
		height: 20px;
		background: @light-color;
      }
      .skilloneinner.skilloneinner2 { 
        width: 80%;
		height: 20px;
		background: @light-color;
      }
      .skilloneinner.skilloneinner3 { 
        width: 70%;
		height: 20px;
		background: @light-color;
      }
	  .skilloneinner.skilloneinner4 { 
        width: 60%;
		height: 20px;
		background: @light-color;
      }
	  .skilloneinner.skilloneinner5 { 
        width: 50%;
		height: 20px;
		background: @light-color;
      }
	  .skilloneinner.skilloneinner6 { 
        width: 40%;
		height: 25px;
		background: @light-color;
      }
	  .skilloneinner.skilloneinner7 { 
        width: 30%;
		height: 20px;
		background: @light-color;
      }
	  .skilloneinner.skilloneinner8 { 
        width: 20%;
		height: 20px;
		background: @light-color;
      }
	  .skilloneinner.skilloneinner9 { 
        width: 10%;
		height: 20px;
		background: @light-color;
      }
    }
  }
}
/*** skills end ***/
/*** counter ***/
.timerwrapper { 
  text-align: center;
  float: left;
  width: 100%;
  .onecounter { 
    padding: 10px 20px;
	margin-bottom: 3px;
    border: 1px solid @dark-color;
	.transition;
	&:hover { 
    border: 1px solid @light-color;
  }
  }
 p { 
    font-size:27px;
    color: @light-color;
    font-weight:700;
  }
  h6 { 
    font-size:14px;
    color: @dark-color;
    font-weight: 400;
	letter-spacing: 2px;
  }
}
/*** counter end ***/
/********* about end **********/  

/********* team *********/
.teamcolumn { 
  text-align: center;	
  img { 
    display: block;
    margin: 0 auto;
    float: none;
	width: 350px;
  }
  h4 { 
    margin-bottom: 10px;
  }
  p { 
    color: @base-color2;
	letter-spacing: 2px;
  }
  .maskinner { 
    margin: 43% 0;
	a { 
      display: inline-block;
	  width: 35px;
	  height: 35px;
      color: @base-color2;
	  margin: 2px;
      border: 1px solid @base-color2;
	  i { 
        font-size: 15px;
      }
	  &:hover i { 
        color: @light-color;
      }
    }
	a.teamlink { 
	display: block;
	text-align: center;
	border: none;
	margin: 11px 0;
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	width: 100%;
    color: @base-color2;
	letter-spacing: 2px;
	&:hover { 
      color: @light-color;
    }
	&:hover i { 
       color: @light-color;
    }
   }
  }
  @media (max-width: 767px) {
    .maskinner { 
      margin: 30% 0;
    }
  }
  .view {
   float: left;		
   height:auto;
   width: 100%;
   margin-bottom: 21px;
   overflow: hidden;
   position: relative;
   text-align: center;
   cursor: default;
  }
  .view .mask, 
  .view .content {
     position: absolute;
     overflow: hidden;
     top: 0;
     left: 0;
  }
  .view .mask { 
    width: 100%;
    height: 100%;
    float: left;
    text-align: center;
  }
  .view img {
    display: block;
    position: relative;
  }
  .view-first img {
   .transition;
  }
  .view-first .mask {
     -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
     filter: alpha(opacity=0);
     opacity: 0;
     background-color: rgba(255,255,255, 0.9);
     .transition;
  }
  .view-first:hover .mask {
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
  }
}
/********* team end *********/


/********* banner **********/  
.banner {
  width: 100%;
  float: left;
  background: @dark-color;
  max-height: 500;
  .bannerright {
    text-align: center;
	width: 100%;
	float: left;
	margin: 20% 0 0 0;
	h2 {
    text-transform: uppercase;
	color: @light-color;
	margin-bottom: 10px;
  }
  p {
    letter-spacing: 2px;
    font-size: 18px;  
    color: #fff;
  }
}
.bannerleft {
  .flexslider {
    width: 50%;
  }
}
}
@media (max-width: 962px) {
.banner .bannerright {
   	margin: 20% 0;
}
} 
/********* banner end *********/

/********* home blog *********/
.homeblog {
  margin-bottom: 66px;
  .homeblogrow {
    margin-bottom: 30px;
    .homeblogtext{
      background: @base-color1;
      padding: 120px 60px;
      text-align: center;
	  p{
        margin-bottom: 10px;
    }
    }
  }
}
@media (max-width: 500px) {
.homeblog .homeblogrow .homeblogtext{
  padding: 20px;
}
}
/********* home blog end *********/


/********* tabs2 - testimonials *********/
.tabspanel1 {
.tabs2 {
  text-align: center;
  li {
    float:none;
    display:inline-block;
	a {
      display: inline-block;
	  margin: 0 10px;
      width: 100px;
      height: 100px;
	  .transition;
	  img {
        .circle;
		border: 5px solid #fff;
		.transition;
	  &:hover{
        .circle;
		border: 5px solid @light-color;
      }
      }
    }
  }
  .active img{
      .circle;
      border: 5px solid @light-color;
    }
}
.tab-content {
  text-align: center;
  p {
    font-size: 18px;
	color: @dark-color;
  }
   cite {
    display: block;
  }
  .tab-pane {
    margin: 0;
  }
}
}	
@media (max-width: 500px) {
.tabs2 li a {
  width: 80px;
  height: 80px;
}
.tabs2 li a	  i {
  font-size: 27px;
}
}
/********* tabs2 end *********/


/**** portfolio ****/
#masonrycontainer {
  padding: 0;
  margin-bottom: 0;
  display: inline-block;
  width: 100%;
  height: 100%;
  position: relative;
  float: left;
  overflow: hidden; 
  .view {
    float: left;		
    height:auto;
    width: 100%;
    overflow: hidden;
    position: relative;
    text-align: center;
    cursor: default;
  }
  .view .mask, 
  .view .content {
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
  }
  .view .mask {
    width: 100%;
    height: 100%;
    float: left;
    text-align: center;
  }
  .view .maskinner {
    position: absolute;
    top: 50%;
    margin-top: -44px;
   width: 100%;
   height: 100%;
   float: left;
   text-align: center;
  }
  .view img {
    display: block;
    position: relative;
  }
  .view-first img {
    .transition;
  }
  .view-first .mask {
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    background-color: rgba(255,255,255, 0.9);
    .transition;
  }
  .view-first:hover .mask {
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
  }
}
.element {
  width: 25%;
  margin: 0;
  float: left;
  overflow: hidden;
  position: relative; 
}
@media (max-width: 1000px) {
.element {
  width: 33.33%;
}
} 
@media (max-width: 767px) {
.element {
  width: 50%;
}
} 
@media (max-width: 450px) {
.element {
  width: 100%;
}
} 
.maskinner h4 {
  margin-bottom: 5px;
  color: @light-color;
}
.maskinner h6 {
  color: @dark-color;
  letter-spacing: 2px;
  font-weight: 400;
}
.maskinner a{
  color: @dark-color;
  font-size: 20px;
  margin: 0 3px 12px 3px;
}
/********** portfolio end ***********/

/********** services ***********/
.services{
  text-align: center;
  i {
    color: @dark-color;
	font-size: 44px;
	margin-bottom: 10px;
  }
  .col-md-3 {
    margin-bottom: 44px;
    &:hover i{
	  color: @light-color;
	}
  }
}
/********** services end ***********/


/********** contact ***********/
/* for contact form */
#main {
  padding: 66px 20px 0 30px;
  float:right;
  width: 100%;
  text-align: right;
   h4 {
    margin-bottom: 66px;
    text-align: right;
    font-weight: 400;
    font-size: 27px;
  }
     h3 {
    margin-bottom: 66px;
    text-align: right;
    font-weight: 700;
	color: @light-color;
    font-size: 27px;
  }
  p {
    letter-spacing: 2px;
    margin-bottom: 0;
    font-weight: 400;
    color: @dark-color;
  }
  input {
    margin-top: 12px;
	padding: 0 10px;
    margin-bottom: 22px;
    width: 100%;
    font-size: 14px;
    outline: none;
    box-shadow: none;
  }
  .contact1 input {
    height: 30px;
    border: none;
    border-bottom: 1px solid @base-color2;
    box-shadow: none;
    outline: none;
    background: transparent;
	&:focus {
     box-shadow: none;
     outline: none;
     border: 1px solid @base-color2;
    }
  }
  .contact2 input {
    height: 30px;  
    outline: none;
    border: none;
    border-bottom: 1px solid @base-color2;
    box-shadow: none;
    transition: all .1s;
    -webkit-transition: all .1s; 
       -moz-transition: all .1s; 
         -o-transition: all .1s; 
	        transition: all .1s; 	
	&:focus {
      box-shadow: none;
      outline: none;
      border: 1px solid @base-color2;
    }
  }
  .textarea {
    width: 100%;
    padding: 10px;
    height: 70px;
    margin-bottom: 22px;
    margin-top: 12px;
    float: left;
    display: inline;
    box-shadow: none;
    outline: none;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid @base-color2;
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
	        border-radius: 3px;
    -webkit-transition:all .1s; 
      -moz-transition: all .1s; 
        -o-transition: all .1s; 
	       transition: all .1s;
	&:focus {
      box-shadow: none;
      outline: none;
      border: 1px solid @base-color2;
    }
  }
  .buttoncontact input {
    display: inline-block;
	text-wrap: none;
	padding-top: 40px;
    font-size: 14px;
	letter-spacing: 3px;
	text-transform:uppercase;
	padding: 15px 36px;
	text-align: center;
	font-weight: 600;
	background: transparent;
	border: 1px solid @dark-color;
	color: @dark-color;
	&:hover,
    &:focus {
      background: @light-color;
	  border: 1px solid @light-color;
	  color: #fff;
    }
  }
}
@media (max-width: 767px) {
#main {
  padding: 66px 20px 0 0;
}
}
li.success {
  padding: 10px;
  margin: 22px auto;
}
li.error {
  padding: 10px; 
  margin: 22px auto;
}
@media (max-width: 767px) {
#main {
  float: none;
  margin: 22px auto;
}
}
/* for contact form end */
.map {
  position: relative;
  margin-bottom: 22px;
  iframe {
    position: relative;
    z-index: 100;
   max-width: 100%;
    width: 100%;
    min-height: 305px;
    border: none;
  }
}
@media (max-width: 767px) {
.map iframe {
  width: auto!important;
  height: auto;
  max-width: auto;
  float: left;
  margin-bottom: 22px;
}
}
/** social icons **/
.socialicons { 
  li {
    margin:0 5px 5px 0;
    display: inline-block;
    text-align: center;
  }
  i {
    font-size: 18px;
    color: @dark-color; 
  }  
}
ul.socialicons li a:link, 
ul.socialicons li a:visited  {
  display: inline-block;
  border: 1px solid @base-color2;
  width: 45px;
  height: 45px;
  padding-top: 12px;
 .transition;
}
ul.socialicons li a:hover i {
  color: @light-color; 
}
/** social icons end **/
.copyright {
  width: 100%;
  float: left;
  margin-top: 44px;
  margin-bottom: 44px;
  p {
    margin-bottom: 0;
    color: #fff; 
    font-size: 12px;
    letter-spacing: 2px;
  }
  a {
    color: #fff; 
    margin-bottom: 0;
    -webkit-transition: all .1s;
       -moz-transition: all .1s; 
         -o-transition: all .1s;
            transition: all .1s;
  }
  &:hover {
  color: @light-color; 
  }
}
.maincolumnsbottom{
  margin-bottom: 66px;
}
.contactwrapper{
  padding:88px 0;    

}
@media (max-width: 767px) {
.contactwrapper{
  padding:0 0 88px 20px;
}
}
footer.bottom {
  width: 100%;
  float: left;
  padding: 66px 0;
  background: @dark-color;
  text-align: center;
}
  .socialicons { 
    li {
      margin: 12px 5px 5px 0;
      display: inline-block;
      text-align: center;
    }
    i {
      font-size: 18px;
      color: #fff; 
   }  
  }
  ul.socialicons li a:link, 
  ul.socialicons li a:visited  {
    display: inline-block;
    border: 1px solid #fff;
    width: 45px;
    height: 45px;
    padding-top: 12px;
   .transition;
  }
  ul.socialicons li a:hover i {
    color: @light-color; 
  }
.contactaddress  {
  padding: 66px 20px 20px 0;
  h4 {
  font-size: 27px;
  font-weight: 400;margin-bottom: 66px;
  }
  ul  {  
  color: @base-color2;
  li {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 2px;
  span {
  text-transform: uppercase; 
  }
 }
} 
}
/********* contact end *********/

/** footer stick to bottom fix **/
.bodywrapper {
  min-height: 100%;
  height: 100%;
  margin-bottom: -44px;
}
.push {
  height: 44px;
}
.bottom {
  width: 100%;
  float: left;
  min-height: 44px;
  background: #fff; 
}
/** footer stick to bottom fix end **/

/********* twitter ********/
.user, .tweet, .timePosted {
  text-align: center;
}
.user {
  width:100%;
}
.tweet p{
  width:100%; 
}
.twitter p{
color: #fff; 
}
.timePosted {
  width:100%;
}
.user {
  clear:left;
}
.user a span[data-scribe="element:name"] {
 display: none;
}
.user a span[data-scribe="element:screen_name"] {
 display: block;margin:22px auto;
}
.twitter a:link, 
.twitter a:visited {
  letter-spacing: 2px;
}
.twitter a:hover {
color: @light-color;
}
.interact {
  text-align: center;
  width:100%;
  margin-top:-7px;
}
.interact a {
  margin: 0 5px;
}
.media img {
  max-width:250px;
  max-height:250px;
}
/********* twitter end *********/


/********* inner page *********/
@media (min-width: 767px) {
.leftsidebar {
  float: right;
}
.innerpagecontent {
  float: right;
}
}
.widget {
  margin:0 auto 44px auto;
}
/********** inner page end ***********/

/************ accordion ************/
.panel {
  margin-bottom: 20px;
  background-color: #fff; 
  border: none!important;
  border-radius: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
}
.panel-body {
  padding: 22px; 
  border: none!important;
}
.panel-body ul {
  margin-bottom: 0;
  font-weight: bold;
}
.panel-body img {
  margin-bottom: 22px;
}
.panel-heading {
  padding: 0 20px;
  background-color: @base-color1!important;
  border: none!important;
  color: @dark-color;
}
.panel-heading:hover,
.panel-heading:focus{
  background-color: @base-color1!important;
  border-bottom: none!important;
}
.panel-heading > .dropdown .dropdown-toggle {
  color: inherit;
}
.panel-heading {
  margin-top: 0;
  margin-bottom: 0;
}
.panel-heading i {
  float: right;
  padding-top: 6px;
  margin: 7px;
  text-align: center;
}
.panel-heading a.panellink {
  display: block;
  font-size: 18px;
  font-weight:400;
  color: @dark-color;
  letter-spacing: 3px;
  padding: 10px 0;
   background: url(../images/plus.png) right center no-repeat;
}
.panel-heading a.panellink:hover {
  color: @light-color;
}
.panel-heading a.panellink.activepanel  {
  background: url(../images/minus.png) right center no-repeat;
} 
/************ accordion end ************/


/********* blog pages *********/
.masonrycontainer2 {
  height: 100%;
  img {
    margin-bottom: 10px;
  }
  .masonrys {
    margin: 0 0 44px 0;
  }
}
  p {
   display: block;
   padding-bottom: 10px;
   margin: 0;
  }
.blogmeta {
  float: left;
  width: 100%;
  p {
   padding-bottom: 10px;
   margin: 0;
   letter-spacing: 2px;
  }
  a {
    color: @dark-color;
	text-decoration: none;
    &:hover {
    color: @light-color;
    }
  }
}
.pagination {
  margin-bottom: 66px;
  float: right;
}
.pagination a:link, 
.pagination a:visited {
  width: 33px;
  height: 33px;
  float: right;
  padding-top: 5px;
  margin-left: 5px;
  color: @dark-color; 
  text-align: center;
  border: 1px solid @base-color2; 
}
.pagination a:hover {
  color: @light-color; 
}
.blogpost {
  img {
    margin-bottom: 20px;
  }
}
.commentwrapper {
  margin: 12px 0;
  width: 100%;
  float: left;
   a {
      color: @dark-color;
	  letter-spacing: 2px;
   &:hover {
      color: @light-color;
  }
  }
}
/********* blog pages end *********/


/********* events page *********/
.eventspage {
  .panel {
    margin: 20px 0;
	.panel-heading {
      padding: 10px;
	  background: @base-color1;
      h3.panel-title {
	    font-weight: 400;
		letter-spacing: 2px;
      }
    }
	.panel-body {
		padding: 20px 0;
      }
	a {
	  display: block;
	  margin-top: 12px;
	  text-transform: uppercase;
	  font-weight: 400;
      letter-spacing: 2px;
	  color: @light-color;
    }
  }
}
/********* events page end *********/


/********* timeline *********/
.timeline {
  margin: 0 auto;
  overflow: hidden;
  height: auto;
  position: relative;
  padding: 0;
  list-style-type:none;
  .event {
    display: block;
    z-index: 15;
    position:relative;
    text-align:center;
    float: right;
    clear: right; 
    width: 45%;
    margin: 44px 2.5%;
    text-decoration: none;
    &.featured {
      width: 95% !important;
      &:after, &:before {
        display: none;
      }
    }
    @media all and (max-width: 767px) {
      width: 100%;
	  margin: 22px auto;
    }    
    &.offset-first {
      margin-top: -15px!important;
    }
    &:nth-of-type(2n) {
      float: left;
      clear: left;
        @media all and(min-width:600px){
          margin-top:2px;
        }
    }
    &:after {      
      @media all and (min-width: 767px) {
        display: block;
        content: ' ';
        height: 11px; 
		width: 11px;
        .circle;
        position:absolute;
        left: -4.6%;
        top: 15px;
        background: #fff;
      }
    }
    &:nth-child(2n):after {
      right: -5%;
      left: auto;
    }
  }
  li {
    margin-bottom: 44px;
    position: relative;
	.timeline-panel {
	  position: relative;
      width: 100%;
      float: left;
      border: 1px solid #fff;
      padding: 20px;
	  &:hover {
	    .transition;
        border: 1px solid @light-color;
      }
    }
	@media (max-width: 767px) { 
    .timeline-panel {
      width: 98%;
      width: calc(100% - 5px);  
      width: -moz-calc(100% - 5px);
      width: -webkit-calc(100% - 5px);
      }
    }
  }
  .tdate {
    display:block;
    clear: both; 
    font-size: 27px;
    font-weight: 900;
    background: @dark-color;
    color: #fff;
    padding: 20px 0;
    text-align: center;
    &:first-of-type {
      margin-top: 0 !important;
    }
  }
  .t-heading {
    h4 {
    color: @dark-color;
    font-size: 22px;
    letter-spacing: 2px;
    font-weight: 400;
    margin-bottom: 10px;
    color: @light-color;
    }
	p {
    color: #fff;
   }
  }
  .t-body {
  p {
    font-size: 14px;
    color: #fff;
  }
  a {
    font-weight: 600;
    text-transform: uppercase;
    color: @light-color;
	letter-spacing: 2px;
    font-weight: 400;
    &:hover {
      color: #fff;
    }
  }
 }
}
.timeline:before {
  top: 0;
  bottom: 0;
  position: absolute;
  content: " ";
  width: 1px;
  left: 50%;
  background: #fff;
}
.timeline li:before, 
.timeline li:after {
  content: " ";
  display: table;
}
.timeline li:after {
  clear: both;
}
.timeline li.timeline-inverted .timeline-panel {
  float: right;
}
@media (max-width: 767px) { 
ul.timeline:before {
  left: 0;
}
ul.timeline > li > .timeline-panel {
 float: right;
}
}
/********* timeline end *********/