/* ============================================== */
/* MENU */
/* ============================================== */
.menu-absolute{
    max-width: 1300px;
    width:100%;
    margin:0 auto;
}

@media screen and (max-width: 1200px){
  .menu-absolute{
      position:fixed;
  }
}

#menu {
  width: 100%;
  position: relative;
  z-index: 999;
  top: 0;
}



#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
  text-decoration: none;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
}

#cssmenu ul {
  float: right;
  background: transparent;
}

#cssmenu ul li {
  float: left;
  margin: 0;
  padding: 0;
  text-decoration: none;
}

#cssmenu ul li a {
  color:white;
  padding: 15px 20px;
  font-size: 0.90em;
  text-decoration: none;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}


#cssmenu ul li a:hover {
  text-decoration: none;
  color:#8bd50b;
}



#cssmenu:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}


/*************************
*******Navigation******
**************************/

#navigation,
.navbar-nav > li > a,
.ion-circle-facebook,
.ion-circle-twitter,
.ion-circle-instagram,
.logo{
  -webkit-transition: all 0.6s ease;
     -moz-transition: all 0.6s ease;
      -ms-transition: all 0.6s ease;
       -o-transition: all 0.6s ease;
          transition: all 0.6s ease;
}

#navigation,
.menu-absolute {
    background: #6C468D;
}

.navigation #cssmenu .navbar-nav > li > a{
  padding:35px 15px;
}

.animated-nav .navigation #cssmenu .navbar-nav > li > a{
  padding:15px;
}

@media screen and (max-width: 1200px){
  .navigation #cssmenu .navbar-nav > li > a,
  .animated-nav .navigation #cssmenu .navbar-nav > li > a{
    padding:25px;
  }
}

.navbar-fixed-top {
  top: 0;
  position: fixed;
  z-index: 9999;
}


/* ============================================== */
/* SOCIAL */
/* ============================================== */
.ion-circle-box{
  width: 150px;
  display: block;
  overflow: hidden;
}

.ion-circle-facebook,
.ion-circle-twitter,
.ion-circle-instagram{
  width: 40px;
  height: 40px;
  float: right;
  display: block;
  color:white;
  margin: 25px 5px 0 5px;
  font-size: 1.5em;
  padding: 10px;
  border-radius: 5px;
}


.ion-circle-facebook{
   background:#3B5998;
}
.ion-circle-twitter{
   background:#28A9E0;
}
.ion-circle-instagram{
   background:#f73466;
}

.ion-circle-instagram:hover,
.ion-circle-facebook:hover,
.ion-circle-twitter:hover{
  opacity: 0.8;
}


.animated-nav .ion-circle-instagram,
.animated-nav .ion-circle-facebook,
.animated-nav .ion-circle-twitter{
  margin-top: 0px;
}

@media screen and (max-width: 1200px){
  .ion-circle-box{
    margin:0 auto;
    width: 120px;
  }
  .ion-circle-instagram,
  .ion-circle-facebook,
  .ion-circle-twitter{
    font-size: 2em;
    width: 50px;
    height: 50px;
  }
  .animated-nav .ion-circle-instagram,
  .animated-nav .ion-circle-facebook,
  .animated-nav .ion-circle-twitter{
    margin-top: 25px;
  }
}
/* ============================================== */
/* LOGO */
/* ============================================== */

.navigation #cssmenu .logo{
  margin:30px 0;
}

.animated-nav .navigation #cssmenu .logo{
  margin:10px 0;
}


.logo{
    background: url("../../images/header/logo.png")no-repeat;
    width:300px;
    height:60px;
    margin:10px 0;
    float: left;
}

.icon-logo{display:none;}

@media screen and (max-width: 1200px){
    .logo{
        display:none;
    }
    .icon-logo{
        background: url("../../images/header/icon-logo.png")no-repeat;
        margin:8px;
        width:180px;
        height:45px;
        float: left;
        display:block;
    }
}

/* ============================================== */
/* DRAWER */
/* ============================================== */

.menu-hamburger {
  display: block;
  width: 60px;
  position: relative;
  overflow: hidden;
  z-index: 999;
  background: transparent;
  float:right;
}

.icon-drawer{
  left: 0;
  margin: 0px;
  height: 60px;
  width: 60px;
  position: relative;
  cursor: pointer;
}


#hamburger:before {content: '';display: block;position: absolute;height: 60px;width: 60px;background: transparent;}
#hamburger:hover {background: transparent;}

#hamburger span {
  display: block;
  width: 35%;
  height: 2px;
  left: 35%;
  position: absolute;

  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

#hamburger span,
#hamburger:hover span{background:white;}

#hamburger span:nth-of-type(1) {top: 22px;}
#hamburger span:nth-of-type(2) {top: 29px;}
#hamburger span:nth-of-type(3) {top: 36px;}
#hamburger.active:before {background: transparent;}

#hamburger.active span:nth-of-type(1) {width: 0;}
#hamburger.active span:nth-of-type(2) {-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);}
#hamburger.active span:nth-of-type(3) {top:29px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);}

@media screen and (min-width: 1200px) {
  #hamburger,.close-menu {
    visibility: hidden;
    display: none;
  }
}

/* -------------------RESPONSIVE----------------- */
/* ============================================== */
/* TOGGLE */
/* ============================================== */


@media screen and (max-width: 1200px) {

  #cssmenu {
    background: #222;
    width: 100%;
    height: 100%;
    position: relative;
    margin: 0;
    left: 0;
    padding: 0;

  }

  #cssmenu ul {
    float: left;
    width: 100%;
    margin: 0;
  }


  #cssmenu ul li {
    display: block;
    left:0px;
    margin:0;
    width: 260px;
    padding: 0;
    border-bottom: 1px solid #383A3F;
  }



  #cssmenu ul li a {
    color: #D3D9E5;
    /* padding:25px; */
    font-size: 1em;
    text-transform: none;
  }



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


  .cbp-spmenu {
    position: fixed;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
  }

  .cbp-spmenu ul {
    padding: 0px;
  }

  .cbp-spmenu li {
    width: 260px;
    list-style-type: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
  }

  .cbp-spmenu-vertical {
    width: 260px;
    height: 100%;
    top: 60px;
    z-index: 99999;
  }

  .cbp-spmenu-vertical a {
    padding: 0;
  }


  .cbp-spmenu-right.cbp-spmenu-open {
    right: 0;
  }

  .menu-push {
    overflow-x: hidden;
    position: relative;
    left: 0;
  }

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

  .cbp-spmenu-right {
    right: -260px;
  }

  .cbp-spmenu-push-toleft {
    left: 0;
    overflow-y: hidden;
  }

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

  .cbp-spmenu,
  .menu-push {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
  }

  .scrollbar {
    overflow-y: scroll;
  }
}

@media screen and (max-width: 520px) {
  #cssmenu ul li,
  .cbp-spmenu li,
  .cbp-spmenu-vertical{
    width: 100%;
  }
  .cbp-spmenu-right {
    right: -100%;
  }
  .ion-circle-box{
    margin:0 auto;
    max-width: 250px;
    width: 100%;
  }
  .ion-circle-facebook,
  .ion-circle-twitter{
    width: 100px;
    height: 50px;
  }

}