/* --------------------------------------
Project Name : CMS Portal (Beta v0.1)
Project Date : 2017
Project URL : www.denizozturk.com.tr
Project Author : ~ Deniz OZTURK
-------------------------------------- */
@charset "UTF-8";

@import "../plugins/materialcss/css/material.css";
@import "../plugins/animatecss/animate.css";
@import "../plugins/owl-slider/css/owl.carousel.css";
@import "../plugins/owl-slider/css/owl.theme.css";
/* -------------- STYLE -------------- */

@color-theme-darker : #15191e;
@color-theme-dark : #1f262d;
@color-theme : #2a333c;
@color-theme-light : #34404b;
@color-theme-lighter : #3f4d5a;

@color-primary : #6D5CAE;
@color-complete : #48B0F7;
@color-success : #10CFBD;
@color-warning : #F8D053;
@color-warning : #F55753;
@color-info : #3B4752;

@color-master-darkest : #0A0A0A;
@color-master-darker : #1A1A1A;
@color-master-dark : #2C2C2C;
@color-master : #626262;
@color-master-light : #E6E6E6;
@color-master-lighter : #F0F0F0;
@color-master-lightest : #FAFAFA;

@color-primary-darker : #413768;
@color-primary-dark : #5B4D91;
@color-primary : #6D5CAE;
@color-primary-light : #8A7DBE;
@color-primary-lighter : #E2DEEF;

@color-complete-darker : #2B6A94;
@color-complete-dark : #3C93CE;
@color-complete : #48B0F7;
@color-complete-light : #6DC0F9;
@color-complete-lighter : #DAEFFD;

@color-success-darker : #0A7C71;
@color-success-dark : #0DAD9E;
@color-success : #10CFBD;
@color-success-light : #40D9CA;
@color-success-lighter : #CFF5F2;

@color-warning-darker : #957D32;
@color-warning-dark : #CFAE45;
@color-warning : #F8D053;
@color-warning-light : #F9D975;
@color-warning-lighter : #FEF6DD;

@color-danger-darker : #933432;
@color-danger-dark : #CD4945;
@color-danger : #F55753;
@color-danger-light : #F77975;
@color-danger-lighter : #FDDDDD;

@color-info-darker : #232B31;
@color-info-dark : #313B44;
@color-info : #3B4752;
@color-info-light : #626C75;
@color-info-lighter : #D8DADC;

@twitter: #00aced;
@facebook: #3b5998;
@google: #dd4b39;
@pinterest: #cb2027;
@linkedin: #007bb6;
@youtube: #bb0000;
@vimeo: #1ab7ea;
@skype: #00aff0;
@tumblr: #32506d;
@instagram: #bc2a8d;
@flickr: #ff0084;
@dribbble: #ea4c89;
@quora: #a82400;
@foursquare: #0072b1;
@forrst: #5B9A68;
@vk: #45668e;
@wordpress: #21759b;
@stumbleupon: #EB4823;
@yahoo: #7B0099;
@blogger: #fb8f3d;
@soundcloud: #ff3a00;
@whatsapp: #25d366;

.twitter-text { color: @twitter;} .twitter-bg { background: @twitter;}
.facebook-text { color: @facebook;} .facebook-bg { background: @facebook;}
.google-text { color: @google;} .google-bg { background: @google;}
.pinterest-text { color: @pinterest;} .pinterest-bg { background: @pinterest;}
.linkedin-text { color: @linkedin;} .linkedin-bg { background: @linkedin;}
.youtube-text { color: @youtube;} .youtube-bg { background: @youtube;}
.vimeo-text { color: @vimeo;} .vimeo-bg { background: @vimeo;}
.skype-text { color: @skype;} .skype-bg { background: @skype;}
.tumblr-text { color: @tumblr;} .tumblr-bg { background: @tumblr;}
.instagram-text { color: @instagram;} .instagram-bg { background: @instagram;}
.flickr-text { color: @flickr;} .flickr-bg { background: @flickr;}
.dribbble-text { color: @dribbble;} .dribbble-bg { background: @dribbble;}
.quora-text { color: @quora;} .quora-bg { background: @quora;}
.foursquare-text { color: @foursquare;} .foursquare-bg { background: @foursquare;}
.forrst-text { color: @forrst;} .forrst-bg { background: @forrst;}
.vk-text { color: @vk;} .vk-bg { background: @vk;}
.wordpress-text { color: @wordpress;} .wordpress-bg { background: @wordpress;}
.stumbleupon-text { color: @stumbleupon;} .stumbleupon-bg { background: @stumbleupon;}
.yahoo-text { color: @yahoo;} .yahoo-bg { background: @yahoo;}
.blogger-text { color: @blogger;} .blogger-bg { background: @blogger;}
.soundcloud-text { color: @soundcloud;} .soundcloud-bg { background: @soundcloud;}
.whatsapp-text { color: @whatsapp;} .whatsapp-bg { background: @whatsapp;}

/* COLORS */
@primary : #8E44AD;
@warning : #F4D03F;
@default : #FFFFFF;
@danger : #f53d55;
@success : #2ECC71;
@inverse : #34495E;
@info : #448aff;
@muted : #636c72;
@disabled : #DFDFDF;

/* BUTTON STYLES */
.btn { display: inline-block; border: none; color: #FFF; margin: 0; padding: 1em 2em; font-size: 14px; font-weight: 100; font-family: 'Asap',sans-serif; text-align: center; line-height: 1.5em; border-radius: 3px; letter-spacing: 1px; text-transform: uppercase; }
.btn { -webkit-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.07); box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.07); }
.btn i { margin: 0 .2em 0 0; font-size: 20px; -webkit-transition: opacity .2s ease; vertical-align: text-bottom; vertical-align: bottom; }
.btn.flat { border-radius: 0; }
.btn.icon { padding: 1em; }
.btn.icon i { margin: 0; }
.btn.raised { border-radius: 10em; }
.btn.block { display: block; width: 100%; margin: 1em 0 0; }

/* BUTTON THEME */
.primary.btn { color: #FFF; background: #8E44AD;
 &.outer{ border: 2px solid #8E44AD; color: #8E44AD; &:hover{ color: #FFF; background: #8E44AD; } }
  &.outer-hover{ border: 2px solid #8E44AD; color: #FFF; background: #8E44AD; &:hover{ color: #8E44AD; } }
}
.warning.btn { color: #111; background: #F4D03F;
 &.outer{ border: 2px solid #F4D03F; color: #F4D03F; &:hover{ color: #111; background: #F4D03F; } }
  &.outer-hover{ border: 2px solid #F4D03F; color: #FFF; background: #F4D03F; &:hover{ color: #F4D03F; } }
}
.default.btn { color: #111; background: #FFFFFF;
 &.outer{ border: 2px solid #FFFFFF; color: #FFFFFF; &:hover{ color: #111; background: #FFFFFF; } }
  &.outer-hover{ border: 2px solid #FFFFFF; color: #111; background: #FFFFFF; &:hover{ color: #111; } }
}
.danger.btn { color: #FFF; background: #f53d55;
 &.outer{ border: 2px solid #f53d55; color: #f53d55; &:hover{ color: #FFF; background: #f53d55; } }
  &.outer-hover{ border: 2px solid #f53d55; color: #FFF; background: #f53d55; &:hover{ color: #f53d55; } }
}
.success.btn { color: #FFF; background: #2ECC71;
 &.outer{ border: 2px solid #2ECC71; color: #2ECC71; &:hover{ color: #FFF; background: #2ECC71; } }
  &.outer-hover{ border: 2px solid #2ECC71; color: #FFF; background: #2ECC71; &:hover{ color: #2ECC71; } }
}
.inverse.btn { color: #FFF; background: #34495E;
 &.outer{ border: 2px solid #34495E; color: #34495E; &:hover{ color: #FFF; background: #34495E; } }
  &.outer-hover{ border: 2px solid #34495E; color: #FFF; background: #34495E; &:hover{ color: #34495E; } }
}
.info.btn { color: #FFF; background: #448aff;
 &.outer{ border: 2px solid #448aff; color: #448aff; &:hover{ color: #FFF; background: #448aff; } }
  &.outer-hover{ border: 2px solid #448aff; color: #FFF; background: #448aff; &:hover{ color: #448aff; } }
}
.muted.btn { color: #FFF; background: #636c72;
 &.outer{ border: 2px solid #636c72; color: #636c72; &:hover{ color: #FFF; background: #636c72; } }
  &.outer-hover{ border: 2px solid #636c72; color: #FFF; background: #636c72; &:hover{ color: #636c72; } }
}
.disabled.btn { color: #7F7F7F; background: #DFDFDF; pointer-events: none; cursor: default;
 &.outer{ border: 2px solid #DFDFDF; color: #DFDFDF; &:hover{ color: #7F7F7F; background: #DFDFDF; } }
  &.outer-hover{ border: 2px solid #DFDFDF; color: #111; background: #DFDFDF; &:hover{ color: #DFDFDF; } }
}
.outer.btn { font-weight: bold; background: transparent; &:hover{ transition: 0.5s ease; } }
.outer-hover.btn { font-weight: bold; &:hover{ transition: 0.5s ease; background: transparent; } }


/* COLOR SHADOW */
.primary.shadow-color.btn { -webkit-box-shadow: 0 5px 10px -4px @primary; box-shadow: 0 5px 10px -4px @primary; }
.warning.shadow-color.btn { -webkit-box-shadow: 0 5px 10px -4px @warning; box-shadow: 0 5px 10px -4px @warning; }
.default.shadow-color.btn { -webkit-box-shadow: 0 5px 10px -4px @default; box-shadow: 0 5px 10px -4px @default; }
.danger.shadow-color.btn { -webkit-box-shadow: 0 5px 10px -4px @danger; box-shadow: 0 5px 10px -4px @danger; }
.success.shadow-color.btn { -webkit-box-shadow: 0 5px 10px -4px @success; box-shadow: 0 5px 10px -4px @success; }
.inverse.shadow-color.btn { -webkit-box-shadow: 0 5px 10px -4px @inverse; box-shadow: 0 5px 10px -4px @inverse; }
.info.shadow-color.btn { -webkit-box-shadow: 0 5px 10px -4px @info; box-shadow: 0 5px 10px -4px @info; }
.muted.shadow-color.btn { -webkit-box-shadow: 0 5px 10px -4px @muted; box-shadow: 0 5px 10px -4px @muted; }


/* FORMS */
input[type="text"].default {
 background-color: transparent;
 border: none;
 border-bottom: 1px solid #9e9e9e;
 border-radius: 0;
 outline: none;
 height: 3rem;
 width: 100%;
 margin: 0 0 20px 0;
 padding: 0;
 font-size: 16px;
 font-family: 'Lato', sans-serif;

}
input[type="text"].default:focus{
 border-bottom:1px solid #4CAF50;-webkit-box-shadow:0 1px 0 0 #4CAF50;box-shadow:0 1px 0 0 #4CAF50;
}

input[type="text"].material, textarea.material {
  display: inline-block;
  width: 100%;
  padding: .75em;
  margin: 10px 0;
  outline: none;
  border-radius: 3px;
  background: #FFF;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  border: 1px solid rgba(0, 0, 0, 0.03);
  box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.04);
  font-size: 18px;
  font-family: 'Raleway', sans-serif;
}
textarea.material{ min-width: 100%; min-height: 100px; }
input[type="text"].material:focus, textarea.material:focus {
 box-shadow: 0 3px 15px 0 rgba(0, 0, 0, 0.1);
}

.material.input{
 position: relative;
 font-weight: 400;
 font-style: normal;
 display: -webkit-inline-box;
 display: -ms-inline-flexbox;
 display: inline-flex;
 color: rgba(0,0,0,.87);

 &.fluid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
 }

 &.labeled{
  & input[type="text"]{
   padding-left: 3.95142857em!important;
   padding-right: 1em!important;
  }
  & .label {
   cursor: default;
   pointer-events: none;
   background-color: #e8e8e8;
   color: rgba(0,0,0,.6);;
   background-image: none;
   padding: 1em .75em;
   border-radius: 3px;
   -webkit-transition: opacity .3s ease;
   transition: opacity .3s ease;
   left: 3px;
   position: absolute;
   bottom: 12.5px;
   font-family: 'Raleway', sans-serif;
  }
 }

 &.icon{
  &.left input[type="text"]{
   padding-left: 2.67142857em!important;
   padding-right: 1em!important;
  }
  &.left i {
   cursor: default; pointer-events: none;
   position: absolute;
   opacity: .5;
   border-radius: 0 .28571429rem .28571429rem 0;
   -webkit-transition: opacity .3s ease;
   transition: opacity .3s ease;
   left: .75em;
   position: absolute;
   top: 50%;
   margin-top: -.5em;
  }
  &.right input[type="text"]{
   padding-right: 2.67142857em!important;
  }
  &.right i {
   cursor: default; pointer-events: none;
   position: absolute;
   opacity: .5;
   border-radius: 0 .28571429rem .28571429rem 0;
   -webkit-transition: opacity .3s ease;
   transition: opacity .3s ease;
   right: .75em;
   position: absolute;
   bottom: 50%;
   margin-bottom: -0.5em;
  }
 }
}
/* */
#header{ display: block; width: 100%; height: 135px;
 & .header-top{ background: #e80c0c; display: flow-root; padding: 0 3em;

  & .top-left{ position: relative; float: left; }
  & .top-right{ position: relative; float: right; }
  & .top-links{
   & > ul { margin: 0; padding: 0; list-style: none; & li { float:left; padding: 10px 0; margin-right: 25px; & > a { font-size: 17px; color: #ffffff; & > i { color: #ffffff; padding-right: 5px; font-size: 20px; vertical-align: middle; } & > span {font-size: 13px; vertical-align: middle; font-family: 'Titillium Web',sans-serif;} } & > a:hover { text-shadow: 0 0 25px white; transition: 0.5s ease; } } }
  }
  & .social-links{
   & > ul { margin: 0; padding: 0; list-style: none; & li { float: left; margin-right: 25px; & > a { font-size: 17px; color: #ffffff; & > i { padding: 13px 0; color: #ffffff; font-size: 16px; vertical-align: middle; } &:hover {text-shadow: 0 0 25px white; transition: 0.5s ease;} } } }
  }
 }

 & .header-upper{ padding: 10px 0;

  & .logo {
   & a { padding: 5px 0; padding-left: 110px; position: relative; top: 7px; background-position: 0; background-repeat: no-repeat; display: inline-block; background-image: url(/assets/images/logo.png); background-size: 125px;
    & > h1 { color: #222; font-size: 26px; font-weight: 700; line-height: 36px; text-transform: capitalize; font-family: 'Titillium Web', sans-serif; }
    & > p { color: #222; font-size: 18px; font-weight: 300; margin: 0; font-family: 'Titillium Web', sans-serif; }
   }
  }

  .upper-right{ position: relative; padding: 18px 0px 15px;
   .info-box { position: relative; float: left; min-height: 56px; margin-left: 40px; font-size: 13px; text-transform: uppercase; color: #777777; padding: 0px 0px 0px 75px; font-family: 'Titillium Web',sans-serif;
    .icon {position: absolute; left: 0; top: 6px; width: 57px; height: 36px; padding-left: 8px; border-right: 1px solid rgba(19, 29, 51, 0.1); color: #e80c0c; text-align: left; -moz-transition: all 300ms ease; -webkit-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease;
     & > i { font-size: 35px; line-height: 35px; }
    }
    ul{ margin: 0; padding: 0; list-style: none; li { position: relative; line-height: 20px; color: #222222; font-size: 14px; margin-bottom: 5px; text-transform: capitalize; }}
   }
   .info-box:last-child { margin-right: 40px; padding: 0; & > .btn { font-size: 12px; } }
  }
 }
}

#navigation{ position: relative; width: 100%; height: 4em; padding: 0 0 4em; line-height: 4em; background: #1c1e27; border-bottom: 3px solid rgba(0,0,0, 0.2); font-family: 'Titillium Web',sans-serif;

 nav.desktop {
   ul:first-child { li { list-style: none; float: left; }
    & > li {
      &:hover:after { transform: scaleX(1); }
      &:hover > ul{ opacity:1; visibility: visible; top:4.2em;  }
      &:after { display:block; content: ''; border-bottom: solid 3px red; transform: scaleX(0); transition: transform 250ms ease-in-out; }
      &:after{ transform-origin: 100% 50%; }
      &:hover:after{ transform-origin:   0% 50%; }
      & > a { display: inline-block; width: 100%; height: auto; color: white; padding: 0 25px; background: transparent; }

      & ul { background: #16181f; width: 175px; position: absolute; top: 4.2em; opacity: 0; padding: 0; transition: 250ms all; visibility: hidden; z-index: 9999;
        & > li { position: relative; width: 100%; & > a { display: block; padding: 0 25px; color: #fff; font-size: 11px; }
        & ul { top:0; left:175px; background: #1c1e27; border-left: 1px solid rgba(0, 0, 0, .3); }
        }
        & li:hover >ul {opacity:1; visibility: visible; left:174px;}
      } & ul li a:hover {background-color: rgba(0,0,0, .1);}
    }
  }
 }
 & a.navbtn { width: 100%; padding: 10px; display: block; color: white; text-align: center;  text-transform: uppercase; i {display: block; font-size: 35px;}}
 nav.mobile{ display: none;
  ul { margin: 0; padding: 0 0 15px; }
  ul li { display: block; }
  ul li a { display: block; width: 100%; padding: 15px 50px; color: @color-master-lighter; font-size: 15px; font-weight: 100; text-transform: uppercase; text-align: center; }
  ul li.active a { color: @color-master-light; background: @color-theme-dark; }
 }
}

#slider { display: inline-block; width: 100%; height: 450px; background: #1c1e27; box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.3);

  .owl-buttons { position: absolute; width: 100%; top: 43%;
    & > .owl-prev {position: relative; float: left; color: rgba(255, 255, 255, 0.5); left: .5em; font-size: 50px;}
    & > .owl-next {position: relative; float: right; color: rgba(255, 255, 255, 0.5); right: .5em; font-size: 50px;}
  }
  & .item > img { width: 100%; }
}


#content { position: relative; background: white;

}

#our-services{

 .services-company { padding: 3em 0; color: #FFF; background: #243342 url(https://www.transparenttextures.com/patterns/asfalt-dark.png); border-top: 2em solid rgba(0, 0, 0, 0.2); border-bottom: 2em solid rgba(0, 0, 0, 0.2); box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.4); font-family: Montserrat, sans-serif;

  & .title {
   & > i {font-size: 3em; display: block;}
   & > h1 {display: inline-block; font-size: 1.5em; padding: 10px 0 0; font-weight: 700; vertical-align: top; font-family: 'Titillium Web', sans-serif;}
  }
  & .detail { & > p { margin: 10px 0 0; font-weight: 300; font-family: 'Titillium Web', sans-serif; } }
  & .widget { padding: 0 4em; border-left: 1px solid rgba(0, 0, 0, 0.3); text-align: center; &:first-child{border-left: none;} & .title{ text-shadow: 0 0 100px rgba(255, 255, 255, 0.5); }
  }
 }
}

#company-about{

 & .mission { padding: 5em 0 3em; text-align: center; border-top: 2em solid rgba(0, 0, 0, 0.05); border-bottom: 2em solid rgba(0, 0, 0, 0.05); background-image: url(/assets/images/about-bg.jpg); background-position: center center; background-repeat: no-repeat;
  & h1 {} & h2 { font-size: .9em; & > span { color: #e80c0c; }}
  & p { width: 75%; text-align: center; margin: 0 12.5%; padding: 1em; }
 }

 & .about{
  & .col-md-6 { color: #FFF; padding: 4em; box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.3); border: 2em solid rgba(0, 0, 0, 0.1); font-family: 'Titillium Web', sans-serif; background: url(https://www.transparenttextures.com/patterns/60-lines.png);
   & h1 { font-weight: bold; font-family: 'Titillium Web', sans-serif; text-shadow: 0 0 100px #ffffff; }
   & p, & ul { font-weight: lighter; } & p {padding: 5px 0 0 0; } & ul li { list-style: circle; padding: 5px 0 0 0; }
   &:first-child{ background-color: #004883; border-left: none; }
   &:last-child{ background-color: #e80c0c; border-right: none; }
  }
 }

}

#content-bg{ position: relative;width: 100%;height: 195px; overflow: hidden; background: #060201 url('../images/spage-bg.jpeg') no-repeat center;-webkit-box-shadow: 0 5px 15px 1px rgba(0,0,0,0.50);-moz-box-shadow: 0 5px 15px 1px rgba(0,0,0,0.50);box-shadow: 0 5px 15px 1px rgba(0,0,0,0.50);}
#content-bg .title h1{ position: absolute; width: 100%; height: auto; top: 130px; padding: .57em 2em; font-size: 25px; font-weight: 600; font-family: 'Titillium Web', sans-serif; color: #EEE; background: url('../images/misc/arrow-r.png') no-repeat rgba(255, 255, 255, 0.1); background-position: 25px; border-top-right-radius: 5px; border-top-left-radius: 5px; }
#content-bg .dark.title h1 { position: absolute; width: 100%; height: auto; top: 130px; padding: .55em 2em; font-size: 25px; font-weight: 600; font-family: 'Titillium Web', sans-serif; color: #EEE; background: url(/assets/images/misc/arrow-r.png) no-repeat rgba(0, 0, 0, 0.8); background-position: 25px; border-top-right-radius: 5px; border-top-left-radius: 5px; }
#content-bg.land-transport { background: #060201 url(/assets/images/land-transport.jpg) no-repeat center; }
#content-bg.air-transport { background: #060201 url(/assets/images/air-transport.jpg) no-repeat center; }
#content-bg.sea-transport { background: #060201 url(/assets/images/sea-transport.jpg) no-repeat center; }
#content-bg.animal-transport { background: #060201 url(/assets/images/animal-transport.jpg) no-repeat center; }
#content-bg.cmsMap { background: #060201; }

#content .c-references {
 & ul { margin: 0; padding: 0; list-style: none;
  & li { width: 24%; padding: 2em 0 0; text-align: center; display: inline-block; &:last-child{padding: 2em 0;}
   & a {
    & img {  }
   }
  }
 }
}

.content-nav { display: block; width: 100%; height: auto; color: #000; background: #FFF;

 & ul{ margin: 0; padding: 0; list-style: none;
  & li { margin: .5em 0; &.active {background: rgba(0,0,0, 0.03);}
   & a {display: inline-block; padding: .5em 1em;}
  }
 }
}

.about-detail{ padding: 2em 0;

 & .title {  & > h1 { padding: 0 2.5em; background-position: 0; background-repeat: no-repeat; display: inline-block; background-image: url(/assets/images/logo.png); background-size: 60px; font-size: 20px; font-weight: 600; font-family: 'Titillium Web',sans-serif; } }
 & .detail { padding: 1em; font-family: 'Asap',sans-serif;
  &.contact { & p { padding: .5em 0; } }
 }

 blockquote { margin: 0; text-align: right; border-right: 3px solid #CCC; padding: 1em; font-size: 13px; font-family: 'Titillium Web',sans-serif;
  & small { display: block; }
 }
}

.company-references { padding: .5em 1em; border-top: 2em solid rgba(0, 0, 0, 0.1); border-bottom: 2em solid rgba(0, 0, 0, 0.1); box-shadow: 0 0 50px rgba(0, 0, 0, 0.5); background: url(/assets/images/pattern-bg.gif);
 & .col-md-3 { text-align: center ; & > a > img { opacity: .7; transition: 250ms all; &:hover{opacity: 1;} } }
}

.services-static{ padding: 2em 0; color: #000000; background: url(https://www.toptal.com/designers/subtlepatterns/patterns/noisy_net.png); border-top: 2em solid rgba(0, 0, 0, 0.1); border-bottom: 2em solid rgba(0, 0, 0, 0.1); box-shadow: 0 0 50px rgba(0, 0, 0, 0.5); font-family: Montserrat,sans-serif; text-align: center;
 & .icon { display: inline-block; text-shadow: 0 0 75px rgba(193, 193, 193, 0.5); & > i { font-size: 3em; } }
 & .detail { display: inline-block; padding-left: 10px;  text-shadow: 0 0 75px rgba(193, 193, 193, 0.5); & > h1, & > p {margin: 0; font-weight: 100; text-align: left;} }
 & .widget { border-left: 1px solid rgba(0, 0, 0, 0.3); font-family: 'Titillium Web',sans-serif; &:first-child{border-left: none;} }
}

.cmsMap{
  & .links{
    position: absolute; width: 100%; height: auto; z-index: 999; top: -65px; left: 30px; background-color: rgba(0, 0, 0, 0.85); padding: 1.95em 2em; font-size: 13px; font-weight: lighter; font-family: 'Segoe UI', sans-serif; background-position: 25px; border-top-right-radius: 5px; border-top-left-radius: 5px;
    & > a { color: white; padding: 0 1.5em .5em; text-transform: uppercase; border-bottom: 6px dashed #a0795d; }
  }
}


#footer { font-family: 'Titillium Web', sans-serif; padding: 3em 0; box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.25); background: url(https://www.toptal.com/designers/subtlepatterns/patterns/geometry2.png);
 & .footer-logo{
   & a { padding: 5px 0; padding-left: 110px; position: relative; top: 7px; -webkit-filter: grayscale(100%); filter: grayscale(100%); background-position: 0; background-repeat: no-repeat; display: inline-block; background-image: url(/assets/images/logo.png); background-size: 125px; transition: 250ms all;
    & > h1 { color: #222; font-size: 26px; font-weight: 700; line-height: 36px; text-transform: capitalize; font-family: 'Titillium Web', sans-serif; }
    & > p { color: #222; font-size: 18px; font-weight: 300; margin: 0; font-family: 'Titillium Web', sans-serif; }
    &:hover{-webkit-filter: grayscale(0); filter: grayscale(0);}
   }
 }

 & .footer-about { border-top: 2px solid rgba(0, 0, 0, 0.05); margin: 1em 0 0 2.5em;
  & p { font-size: 12px; font-family: 'Asap',sans-serif; }
 }

 & .footer-social { margin: 2em 2.5em;
  & ul { margin: 0; padding: 0; list-style: none;
   & > li { display: inline-block; float: left; margin: 0 10px 0 0;
    & > a{ padding: 15px 20px; color: #243342; background: rgba(0,0,0, .05); border-radius: 3px; transition: 250ms all;
     &.facebook:hover { color: #FFF; background: @facebook; }
     &.twitter:hover { color: #FFF; background: @twitter; }
     &.youtube:hover { color: #FFF; background: @youtube; }
     &.instagram:hover { color: #FFF; background: @instagram; }
     &.google:hover { color: #FFF; background: @google; }
     &.skype:hover { color: #FFF; background: @skype; }
    }
   }
  }
 }

 & .footer-links{ padding: 12.25px 0 0;
  & h1 { color: #222; font-size: 26px; font-weight: 700; line-height: 36px; text-transform: capitalize; font-family: 'Titillium Web', sans-serif; }
  & p { color: #222; font-size: 18px; font-weight: 300; margin: 0; font-family: 'Titillium Web', sans-serif; }
  & ul { margin: 12px 0 0 0; padding: 0; list-style: none; border-top: 2px solid rgba(0, 0, 0, 0.05); font-size: 14px; font-family: 'Asap', sans-serif;
  & li {  display: block; margin: .25em 0 0;
   & > a { display: block; padding: .5em .75em; color: #191a22; font-size: 12px; border-radius: 3px;
     &:hover { text-shadow: 0 0 15px rgba(0,0,0, .3); }
     & > i { font-size: 11px; vertical-align: top; }
    }
   }
  }
 }

 & .footer-subscribe{ padding: 12.25px 0 0;
  & h1 { color: #222; font-size: 26px; font-weight: 700; line-height: 36px; text-transform: capitalize; font-family: 'Titillium Web', sans-serif; }
  & p { color: #222; font-size: 18px; font-weight: 300; font-family: 'Titillium Web', sans-serif; margin: 0; padding: 6px 0 6px 0; border-bottom: 2px solid rgba(0, 0, 0, 0.05); }
  & .subscribe { padding: 0; list-style: none; font-size: 14px; font-family: 'Asap', sans-serif; }
 }

 & .developer { position: absolute; bottom: 25%; left: 50%; & a { color: #000; & > span { transition: 250ms all; & > small { text-transform: uppercase; } } }
  & a span:nth-child(1):before {content: "\e875";font-family: 'Linearicons';}
  & a span:nth-child(2):before {content: "\e876";font-family: 'Linearicons';}
  & a span:nth-child(3):before {color: @color-danger;content: "\f004";font-family: 'FontAwesome';}
  & a:hover span:last-child {text-shadow: 0 0 5px rgba(0, 0, 0, 0.2);}
}
}