/*-----------------------------------------------------------------------------------

    Template Name: Raswell 
    Template URI: http://xyz.com
    Description: This is html5 template
    Author: D2T
    Author URI: http://xyz.com
    Version: 1.0

-----------------------------------------------------------------------------------
    
    CSS INDEX
    ===================
	
    01. Theme Default CSS (body, link color, section etc)
    02. Header
    03. Welcome Area
    04. Working Area
    05. Portfolio Area
    06. Clients Area
    07. Expert Team Area
    08. Blog Area
    09. Contact Area
    10. Footer Area

-----------------------------------------------------------------------------------*/

/*----------------------------------------*/
/*  01.  Theme default CSS
/*----------------------------------------*/
html, body {
    height: 100%;
}
.floatleft {
    float:left
}
.floatright {
    float:right
}
.alignleft {
    float: left;
    margin-right: 15px;
    margin-bottom: 15px;
}
.alignright {
    float: right;
    margin-left: 15px;
    margin-bottom: 15px;
}
.aligncenter {
    display: block;
    margin: 0 auto 15px;
}
a:focus {
    outline: 0px solid;
}
img {
    height: auto;
    max-width: 100%;
}
.fix {
    overflow: hidden
}
h1, h2, h3, h4, h5, h6 {
    color: #000000;
    margin: 0 0 10px;
    text-transform: uppercase;
    font-family: 'Roboto', sans-serif;
}
a {
    color: #838383;
    transition: all 0.3s ease 0s;
    -webkit-all: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    text-decoration:none;
}
a {
    color: #000000;
    text-decoration: none;
}
a:active, a:focus, a:hover {
    outline: 0 none;
    text-decoration: none;
}
ul{
    list-style: outside none none;
    margin: 0;
    padding: 0
}
.clear {
    clear:both
}
body {
    color: #838383;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 400;
}
::-moz-selection {
    background: #46BAC0;
    text-shadow: none;
    color: #fff;
}
::selection {
    background: #46BAC0;
    text-shadow: none;
    color: #fff;
}
.browserupgrade {
    background: #cccccc;
    color: #000000;
    margin: 0.2em 0;
    padding: 0.2em 0;
}
.section-padding {
    padding: 110px 0px 90px;
}
.section-heading {
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 60px;
    letter-spacing: 3px;
}
.section-subheading {
    color: #999999;
    font-size: 24px;
    margin-bottom: 25px;
}
.section-paragraph {
    font-size: 18px;
    font-weight: 300;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
}
div#preloader { position: fixed; left: 0; top: 0; z-index: 999; width: 100%; height: 100%; overflow: visible; 
    background: #fff url('img/preloader/1.gif') no-repeat center center; }
.main-menu-area {
  background: #0f151a none repeat scroll 0 0;
  bottom: 0;
  height: 70px;
  left: 0;
  position: relative;
  transition: all 0.3s ease 0s;
  width: 100%;
  z-index: 50000;
}
/*----------------------------------------*/
/*  02.  Header Area
/*----------------------------------------*/
/*Menu*/
header.header {
    position: absolute;
    z-index: 9999;
    width: 100%;
}
.nav-icon {
    display: inline-block;
    font-size: 23px;
    line-height: 20px;
    color: #fff;
    cursor: pointer;
    float: right;
}
.nav-menu ul li {
  display: inline-block;
}
.nav-menu ul li a {
  color: #fff;
  font-weight: 500;
  padding-right: 25px;
  text-transform: uppercase;
}
.header-logo-text {
  padding: 21px 0;
}
.mainmenu {
    position: relative;
    overflow: hidden;
    padding: 55px 0;
}
.nav-menu {
  display: none;
  right: -200px;
  text-align: right; 
  transition: all 0.3s ease-out 0s;
}
.mainmenu ul#nav > li:hover a,
.mainmenu ul#nav > li.current a {
    color: #6accd4;
}
/*-----------------
   Sticky Menu
------------------*/
.mainmenu-area .sticky-wrapper.is-sticky #sticker {
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.3);
  transition: all 0.4s ease 0s;
  background: rgba(31, 35, 46, 0.9) none repeat scroll 0 0;
}
.mainmenu-area .sticky-wrapper.is-sticky #sticker .mainmenu {
  padding: 32px 0;
  transition: all 0.3s ease-out 0s;
}
.mainmenu-area .sticky-wrapper.is-sticky #sticker .header-logo-text {
  padding: 19px 0;
  transition: all 0.3s ease-out 0s;
}
/*----------------------- 
 Mobile menu
------------------------*/
.mean-container .mean-nav ul li a.mean-expand {
  line-height: 25px;
}
.mean-container .mean-nav ul li:hover { 
  background: #fff none repeat scroll 0 0;
}
.mean-container .mean-bar { 
  background: #333 none repeat scroll 0 0;
}
.mean-container .mean-bar::after { 
  content: "Menu"; 
  top: 7px; 
  left: 12px;
}
.mean-container a.meanmenu-reveal { 
  padding: 9px 13px 11px;
}
.mobile-menu-area { 
  background: #6accd4 none repeat scroll 0 0; 
  padding: 30px 0;
}
.mean-container .mean-nav ul li a.mean-expand {
  height: 28px;
  width: 30px;
}
.mean-container .mean-nav ul li a:hover {
  color: #6accd4;
}
/*-----------------------
    slider-animation
------------------------*/
.home-1 .layer-1-1 .title1 {
  animation: 1s ease-in-out 1s normal backwards 1 running bounceInLeft;
  color: #fff;
  font-size: 48px;
  font-weight: 400;
  left: 110px;
  line-height: 48px;
  position: absolute;
  text-transform: uppercase;
  top: 40%;
}
.home-1 .layer-1-2 h2.title2 {
  animation: 1.2s ease-in-out 1s normal backwards 1 running bounceInRight;
  color: #fff;
  font-size: 48px;
  font-weight: 400;
  left: 110px;
  line-height: 30px;
  position: absolute;
  text-transform: uppercase;
  top: 50%;
}
.home-1 .layer-2-1 .title1 {
  animation: 1.2s ease-in-out 1s normal backwards 1 running bounceInUp;
  color: #fff;
  font-size: 48px;
  font-weight: 400;
  left: 110px;
  line-height: 48px;
  position: absolute;
  text-transform: uppercase;
  top: 40%;
}
.home-1 .layer-2-2 h2.title2 {
  animation: 1.4s ease-in-out 1s normal backwards 1 running bounceInDown;
  color: #fff;
  font-size: 48px;
  font-weight: 400;
  left: 110px;
  line-height: 30px;
  position: absolute;
  text-transform: uppercase;
  top: 50%;
}
/*----------------------------------------*/
/*  03.  Welcome Area
/*----------------------------------------*/
.welcome-area .section-intro {
    margin-bottom: 60px;
}
.welcome-area .section-heading {
    margin-bottom: 40px
}
.welcome-area .whats-new {
    border: 1px solid #ededed;
    padding: 140px 0 166px;
}
.welcome-area .whats-new .whats-new-text {
    margin-left: auto;
    margin-right: auto;
    width: 68%;
}
.welcome-area .whats-new h2 {
    font-weight: 400;
    margin-bottom: 30px;
    text-transform: capitalize;
}
.padding-r {
    padding-right: 0;
}
.padding-l {
    padding-left: 0;
}
.welcome-area .whats-new {
  border: 1px solid #ededed;
  box-shadow: -1px 1px 6px #e5e5e5;
  padding: 143px 0 166px;
}
.raswell-video {
    position: relative;
    overflow: hidden;
}
span.click-play {
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  position: absolute;
  text-align: center;
  text-transform: uppercase;
  top: 275px;
  width: 100%;
    right: 0;
}
.video-icon i {
  color: #fff !important;
  cursor: pointer;
  left: 0;
  margin: 0 auto;
  position: absolute;
  right: 0;
  text-align: center;
  top: 43%;
  border: 1px solid #fff !important;
  padding:  0 0 0 5px;
}
/*----------------------------------------*/
/*  04.  Working Area
/*----------------------------------------*/
.working-area, .clients-area, .blog-area, .footer-top {
    background: #f6f6f6;
}
.working-area .single-work, .portfolio-area .single-portfolio, .clients-area .single-client, .team-area .single-team, .blog-area .single-blog {
    margin-bottom: 30px;
}
.working-area .single-work i, .video-icon i {
    color: #606060;
    border: 1px solid #606060;
    border-radius: 100%;
    font-size: 20px;
    height: 60px;
    line-height: 60px;
    margin-bottom: 30px;
    width: 60px;
}
.working-area .single-work:hover {
    box-shadow: 0px 1px 3px 2px rgba(220, 220, 220, 0.8);
    transition: all 0.5s ease-out 0;
    -webkit-transition: all 0.5s ease-out 0;
}
.working-area .single-work {
    padding: 15px;
}
.working-area .single-work h3 {
    margin-bottom: 15px;
    font-size: 18px;
}
.working-area .single-work p {
    font-size: 16px;
    margin-bottom: 0;
}
/*----------------------------------------*/
/*  05.  Portfolio Area
/*----------------------------------------*/
.single-portfolio{
    position: relative;
    overflow: hidden;
}
.portfolio-image a span.moretag {
    animation-duration: 0.5s;
    border: 1px solid #fff;
    border-radius: 100%;
    color: #fff;
    display: inline-block;
    height: 30px;
    left: 0;
    line-height: 29px;
    margin: -20px auto 0;
    opacity: 0;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    transition: all 0.5s ease 0s;
    visibility: hidden;
    width: 30px;
    z-index: 3;
}
.portfolio-image a span.moretag:before {
    content: "\f067";
    display: inline-block;
    font: 13px/1 FontAwesome;
    text-rendering: auto;
    font-weight: 300;
    transform: translate(0px, 0px);
}
.portfolio-image a,.single-blog a,.single-team {
    display: block;
    overflow: hidden;
    position: relative;
    text-align: center;
}
.single-portfolio:hover .portfolio-image a span.moretag {
    opacity: 1;
    top: 33%;
    visibility: visible;
}
.portfolio-image a::after,.blog-img a:after,.team-image:after {
  background: rgba(31, 35, 46, 0.7) none repeat scroll 0 0;
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  display: block;
  opacity: 0;
  transform: scale(0.55);
  transition: all 300ms ease 0s;
}
.portfolio-image:hover a::after, .single-blog:hover a::after, .single-team:hover .team-image:after {
  opacity: 1;
  transform: scale(1);
}
.portfolio-text-hover h5 {
  background: #333 none repeat scroll 0 0;
  color: #fff;
  display: block;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 4px;
  margin: 0;
  padding: 40px 0;
  text-align: center;
}
.portfolio-text-hover,.team-image-hover {
    bottom: -100px;
    left: 0;
    position: absolute;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-out 0s;
    z-index: 9;
}
.single-portfolio:hover .portfolio-text-hover,.team-image:hover .team-image-hover {
    opacity: 1;
    visibility: visible;
    bottom: 0;
}
/*----------------------------------------*/
/*  06.  Clients Area
/*----------------------------------------*/
.single-client {
  margin-right: 18px;
    display: inline-block;l
}
.single-client:nth-child(5) {
  margin-right: 0px;
}
.single-client:hover {
  box-shadow: 0px 1px 3px 2px rgba(220, 220, 220, 0.8);
}
/*----------------------------------------*/
/*  07. Expert Team Area
/*----------------------------------------*/

.team-image {
    position: relative;
    overflow: hidden;    
}
.social-icon li {
    display: inline-block;
}
.social-icon li a {
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  padding: 11px;
  text-align: center;
}
.team-image-hover {
  background: #333 none repeat scroll 0 0;
  padding: 13px 0;
  text-align: center;
}
.team-image-hover p {
  color: #9e9e9e;
    letter-spacing: 1px;
}
.team-image-hover a h4 {
  color: #fff;
  font-size: 16px;
  font-weight: bold;
    letter-spacing: 2px;
    margin-bottom: 2px;
}
/*----------------------------------------*/
/*  08.  Blog Area
/*----------------------------------------*/
.blog-area .single-blog .blog-detail h3 {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 3px;
  margin: 30px 0 20px;
}
.single-blog a.mmm:before{content: "\f045 ";
    font: 30px/1 FontAwesome;
    font-weight: 300;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    color: #fff;
    bottom: 0;
    visibility: hidden;
    opacity: 0;
    z-index: 9;
    transition: all 0.3s ease-out 0s;
    -webkit-transition: all 0.3s ease-out 0s;
    animation-duration: 0.3s;
}
.single-blog:hover a.mmm:before{
    visibility: visible;
    opacity: 1;
    top: 45%;
}
.single-blog:hover .blog-detail h3{
    color: #6ACCD4; 
}
blog-detail
/*----------------------------------------*/
/*  09.  Contact Area
/*----------------------------------------*/
.contact-area .contact-details {
    margin-bottom: 45px;
}
.contact-area .contact-details i {
    color: #4d4d4d;
    font-size: 30px;
    margin-bottom: 15px;
}
.contact-area .contact-details h4 {
    font-size: 16px;
    margin-bottom: 20px;
}
.contact-area .contact-details p {
    margin-bottom: 5px;
}
.contact-area .contact-form {
    margin: 30px 0px;
}
.contact-area .contact-form h3 {
    margin-bottom: 30px;
}
.contact-area .contact-form .form-control {
    border-bottom: 1px solid #c9c9c9;
    border-left: none;
    border-right: none;
    border-top: none;
    box-shadow: none;
    margin-bottom: 30px;
    padding-left: 0;
}
.contact-area .contact-form .form-control:focus {
    color: #2e2e2e;
    border-bottom: 1px solid #808080;
}
.contact-area .contact-form .submit {
    background: #1f232e;
    border-radius: 0;
    color: #ffffff;
    padding: 13px 35px;
    text-transform: uppercase;
    transition: all 0.3s ease-out 0s;
    -webkit-transition: all 0.3s ease-out 0s;
}
.contact-area .contact-form .submit:hover {
    background: #5FA0A2;
    border-radius: 10px;
}
.contact-area .map-area {
  margin-bottom: 30px;
}
/*----------------------------------------*/
/*  10.  Footer Area
/*----------------------------------------*/
.footer-top {
  background: rgba(0, 0, 0, 0) url("img/footer/1.jpg") no-repeat scroll center center / cover ;
  padding-bottom: 120px;
}
.footer .section-heading {
    margin-bottom: 30px;
    text-transform: capitalize;
}
.footer .footer-menu ul li a {
    display: block;
    font-size: 14px;
    padding-bottom: 10px;
    text-transform: capitalize;
}
.footer .footer-copyright {
    background: #cccccc;
    padding: 30px 0px;
}
.footer .footer-copyright p {
    margin-bottom: 0;
    text-transform: uppercase;
}