/* ==========================================================================
  00.  BASE
  =========================================================================== */

@font-face {
    font-family: Rokkitt;
    src: url(../fonts/Rokkitt.otf);
}

/* ==========================================================================
  01. GENERAL & BASIC STYLES
  =========================================================================== */ 

html {
    -webkit-font-smoothing: antialiased;
    font-size: 16px;
} 
 
body {
    font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #333;
    font-weight: 300;
}

/*------------------------------------------------------------------*/
/*   IE10 in Windows 8 and Windows Phone 8 Bug fix
/*-----------------------------------------------------------------*/

@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }

/*------------------------------------------*/
/*  PAGE CONTENT
/*------------------------------------------*/

#page { overflow: hidden; }

/*------------------------------------------*/
/*  ONSCROLL ANIMATIONS
/*------------------------------------------*/

.animated { visibility: hidden; }
.visible { visibility: visible; } 

/*------------------------------------------*/
/*   BACKGROUND SETTINGS
/*------------------------------------------*/

.bg-scroll {
    width: 100%;
    background-attachment: fixed !important;
    background-repeat: no-repeat;
    background-position: center center;   
    background-size: cover;
}

.bg-fixed {
    width: 100%;
    background-repeat: no-repeat;
    background-position: center center;   
    background-size: cover;
}

/*------------------------------------------*/
/*   Background Colors for Sections
/*------------------------------------------*/

.bg-white       { background-color: #ffffff; }
.bg-dark        { background-color: #222222 !important; }
.bg-lightdark   { background-color: #252d35; }
.bg-deepdark    { background-color: #1a1a1a; }
.bg-grey        { background-color: #ede9e6; }
.bg-lightgrey   { background-color: #f2f2f2; }
.bg-yellow      { /* background-color: #fed841; */ background-color: #ffde00; }
.bg-coral       { background-color: #ea5c5a; }
.bg-purple      { background-color: #7a59e4; }
.bg-deeppurple  { background-color: #510fa7; }
.bg-lightpurple { background-color: #715fef; }
.bg-deepgreen   { background-color: #42a045; }
.bg-lightgreen  { background-color: #7afae3; }
.bg-rose        { background-color: #ff3366; }
.bg-tomato      { background-color: #eb2f5b; }
.bg-blue        { background-color: #2154cf; }
.bg-lightblue   { background-color: #1e88e5; }
.bg-skyblue     { background-color: #42a5f5; }

/* ==========================================================================
  02.  TYPOGRAPHY
  =========================================================================== */  

/*------------------------------------------*/
/*  HEADERS
/*------------------------------------------*/

h1, h2, h3, h4, h5, h6 {
    color: #222;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    letter-spacing: 0; 
    margin: 0px;
}

h5 { font-size: 23px; }
h4 { font-size: 30px; }
h3 { font-size: 42px; }
h2 { font-size: 56px; }

/*------------------------------------------*/
/*   PARAGRAPHS
/*------------------------------------------*/

p { font-size: 17px; line-height: 1.525; }

/*------------------------------------------*/
/*   LISTS
/*------------------------------------------*/

/*
ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
*/

/*------------------------------------------*/
/*   LINK SETTINGS
/*------------------------------------------*/

a {
    color: #333;
    text-decoration: none;
    -webkit-transition: all 450ms ease-in-out;
    -moz-transition: all 450ms ease-in-out;
    -o-transition: all 450ms ease-in-out;
    -ms-transition: all 450ms ease-in-out;
    transition: all 450ms ease-in-out;
}

a:hover {
    color: #666;
    text-decoration: none;
}

a.black-hover:hover { color: #000; }
a.white-hover:hover { color: #fff; }
a.green-hover:hover { color: #22bc3f; }
a.rose-hover:hover  { color: #ff3366; }
/* TODO: grey - OK */
a.grey-hover:hover  { color: #666666; /* color: #ff3366; */ }
a.red-hover:hover   { color: #fd1c1c; }
a.blue-hover:hover  { color: #00c1f0; }

a:focus {
    outline: none;
    text-decoration: none;
}

/*------------------------------------------*/
/*   BUTTON SETTINGS
/*------------------------------------------*/

.btn {
    color: #fff;
    font-size: 0.955rem;
    font-family: 'Montserrat', sans-serif;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0.25px;
    text-transform: uppercase;
    padding: 0.95rem 2.5rem;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;      
    -webkit-transition: all 150ms ease-in-out;
    -moz-transition: all 150ms ease-in-out;
    -o-transition: all 150ms ease-in-out;
    -ms-transition: all 150ms ease-in-out;
    transition: all 150ms ease-in-out;  
}

.btn-arrow {
    position: relative; 
}

.btn-arrow span {
    display: inline-block;
    position: relative;
    -webkit-transition: all 150ms ease-in-out;
    -moz-transition: all 150ms ease-in-out;
    -o-transition: all 150ms ease-in-out;
    -ms-transition: all 150ms ease-in-out;
    transition: all 150ms ease-in-out;
    will-change: transform;
}

.btn-arrow:hover span, 
.btn-arrow:focus span {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0); 
}

.btn-arrow .svg-inline--fa {
    position: absolute;
    line-height: 1rem!important;
    right: 0px;
    opacity: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: all 150ms ease-in-out;
    -moz-transition: all 150ms ease-in-out;
    -o-transition: all 150ms ease-in-out;
    -ms-transition: all 150ms ease-in-out;
    transition: all 150ms ease-in-out;
}

/*------------------------------------------*/
/*   Button Size
/*------------------------------------------*/

.btn.btn-sm {
    font-size: 0.925rem;
    padding: 0.85rem 1.95rem;
}

.btn.btn-md {
    font-size: 0.955rem;
    padding: 1.025rem 2.5rem;
}

.btn.btn-lg {
    font-size: 0.955rem;
    padding: 1.125rem 2.65rem;
}

/*------------------------------------------*/
/*   Button Color
/*------------------------------------------*/

.btn-black {
    color: #fff;
    background-color: #333;
    border-color: #333;
}

.btn-white {
    color: #333;
    background-color: #fff;
    border-color: #fff;
}

.white-color .btn-white span,
.white-color .btn-yellow span {
    color: #333;
}

.btn-tra-white {
    color: #fff;
    background-color: transparent;
    border-color: #fff;
}

.btn-tra-black {
    color: #333;
    background-color: transparent;
    border-color: #333;
}

.btn-yellow {
    color: #333;
    /* background-color: #feca16; */
    background-color: #ffde00;
    /* border-color: #feca16; */
    border-color: #ffde00;
}

.btn-green {
    color: #333;
    background-color: #40ad53;
    border-color: #40ad53;
}

/*------------------------------------------*/
/*   Button Hover
/*------------------------------------------*/

.btn:hover {
    color: #fff;
    background-color: #e62354;
    border-color: #e62354;
}

.btn-arrow:hover .svg-inline--fa, 
.btn-arrow:focus .svg-inline--fa {
    opacity: 1;
    right: -16px; 
}

.btn.tra-hover:hover,
.btn-yellow.tra-hover:hover,
.btn-purple.tra-hover:hover,
.btn-lightgreen.tra-hover:hover,
.btn-semiwhite:hover {
    color: #fff;
    background-color: transparent;
    border-color: #fff;
}

.btn-yellow.tra-hover:hover span {
    color: #fff;
}

.white-hover:hover {
    color: #333;
    background-color: #fff;
    border-color: #fff;
}

.white-hover:hover span {
    color: #333;
}

.black-hover:hover {
    color: #fff;
    background-color: #333;
    border-color: #333;
}

.black-hover:hover span {
    color: #fff;
}

/*------------------------------------------*/
/*   Button Focus
/*------------------------------------------*/

.btn:focus {
    color: #fff; 
    -webkit-box-shadow: none;
    box-shadow: none; 
}

.btn.btn-black:focus {
    color: #fff; 
    -webkit-box-shadow: none;
    box-shadow: none; 
}

/*------------------------------------------*/
/*   TEXT UNDERLINE
/*------------------------------------------*/

.underline,
.underline-rose,
.underline-grey,
.underline-green,
.underline-blue {
    /* background-image: linear-gradient(120deg, #fed841 0%, #fed841 90%); */
    background-image: linear-gradient(120deg, #ffde00 0%, #ffde00 90%);
    background-repeat: no-repeat;
    background-size: 100% 0.22em;
    background-position: 0 105%;
}

.underline-rose {
    background-image: linear-gradient(120deg, #f23472 0%, #f23472 90%);
}

/* TODO: drey */
.underline-grey {
    background-image: linear-gradient(120deg, #000 0%, #000 90%);
}

.underline-green {
    background-image: linear-gradient(120deg, #22bc3f 0%, #22bc3f 90%);
}

.underline-blue {
    background-image: linear-gradient(120deg, #00c1f0 0%, #00c1f0 90%);
}

/*------------------------------------------*/
/*   TEXT COLOR
/*------------------------------------------*/

.white-color,
.white-color h2, 
.white-color h3, 
.white-color h4, 
.white-color h5, 
.white-color h6, 
.white-color p, 
.white-color a, 
.white-color li,
.white-color i, 
.white-color span { 
    color: #fff; 
}

.grey-color,
.grey-color h2, 
.grey-color h3, 
.grey-color h4, 
.grey-color h5, 
.grey-color h6, 
.grey-color p, 
.grey-color a,
.grey-color li, 
.grey-color span  { 
    color: #666; 
}

.white-color .grey-color, 
.white-color .grey-color p, 
.white-color .grey-color span {
    color: #ccc;
}

.white-color .grey-icon span,
.white-color .grey-icon {
    color: #fff;
}

.lightgrey-color,
.lightgrey-color h2, 
.lightgrey-color h3, 
.lightgrey-color h4, 
.lightgrey-color h5, 
.lightgrey-color p, 
.lightgrey-color a,
.lightgrey-color li, 
.white-color .lightgrey-color,
.lightgrey-color span  { 
    color: #858585; 
}

.green-color,
.green-color h2, 
.green-color h3, 
.green-color h4, 
.green-color h5, 
.green-color h6, 
.green-color p, 
.green-color a, 
.green-color li,
.green-color i, 
.white-color .green-color,
.green-color span { 
    color: #7afae3; 
}

.deepgreen-color,
.deepgreen-color h2, 
.deepgreen-color h3, 
.deepgreen-color h4, 
.deepgreen-color h5, 
.deepgreen-color h6, 
.deepgreen-color p, 
.deepgreen-color a, 
.deepgreen-color li,
.deepgreen-color i, 
.white-color .deepgreen-color,
.deepgreen-color span { 
    color: #42a045; 
}

.yellow-color,
.yellow-color h2, 
.yellow-color h3, 
.yellow-color h4, 
.yellow-color h5, 
.yellow-color h6, 
.yellow-color p, 
.yellow-color a, 
.yellow-color li,
.yellow-color i, 
.white-color .yellow-color,
.yellow-color span { 
    /* color: #fed841; */
    color: #ffde00;
}

.rose-color,
.rose-color h2, 
.rose-color h3, 
.rose-color h4, 
.rose-color h5, 
.rose-color h6, 
.rose-color p, 
.rose-color a, 
.rose-color li,
.rose-color i, 
.white-color .rose-color,
.rose-color span { 
    color: #ff3366; 
}

.blue-color,
.blue-color h2, 
.blue-color h3, 
.blue-color h4, 
.blue-color h5, 
.blue-color h6, 
.blue-color p, 
.blue-color a, 
.blue-color li,
.blue-color i, 
.white-color .blue-color,
.blue-color span { 
    color: #00c1f0; 
}

.coral-color,
.coral-color h2, 
.coral-color h3, 
.coral-color h4, 
.coral-color h5, 
.coral-color h6, 
.coral-color p, 
.coral-color a, 
.coral-color li,
.coral-color i, 
.white-color .coral-color,
.coral-color span { 
    color: #ea5c5a; 
}

.purple-color,
.purple-color h2, 
.purple-color h3, 
.purple-color h4, 
.purple-color h5, 
.purple-color h6, 
.purple-color p, 
.purple-color a, 
.purple-color li,
.purple-color i, 
.white-color .purple-color,
.purple-color span { 
    color: #7a59e4; 
}

.deeppurple-color,
.deeppurple-color h2, 
.deeppurple-color h3, 
.deeppurple-color h4, 
.deeppurple-color h5, 
.deeppurple-color h6, 
.deeppurple-color p, 
.deeppurple-color a, 
.deeppurple-color li,
.deeppurple-color i, 
.white-color .deeppurple-color,
.deeppurple-color span { 
    color:  #510fa7; 
}

/*------------------------------------------*/
/*   RIBBONS
/*------------------------------------------*/

.corner-ribbon {
    width: 200px;
    background: #e43;
    position: absolute;
    top: 25px;
    left: -50px;
    text-align: center;
    line-height: 50px;
    letter-spacing: 1px;
    color: #f0f0f0;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
}
.corner-ribbon.top-left {
    top: 25px;
    left: -50px;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}
.corner-ribbon.top-right {
    top: 25px;
    right: -50px;
    left: auto;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}
.corner-ribbon.yellow {
    background: #ffde00; color: #222;
}

/* ==========================================================================
  03.  HEADER & NAVIGATION
  =========================================================================== */

/*------------------------------------------*/
/*   LOGO IMAGE    
/*------------------------------------------*/

.navbar-brand {
    padding-top: 0;
    padding-bottom: 0;
    margin-right: 5rem;
}

.navbar-dark .navbar-nav .nav-link {
    color: #fff;
}

.navbar-light .navbar-nav .nav-link {
    color: #3a3a3a;
}

.bg-light { 
    background-color: #fff!important; 
    box-shadow: 0 0 2px rgba(50, 50, 50, 0.4); 
}

/*------------------------------------------*/
/*   NAVIGATION BAR    
/*------------------------------------------*/

.navbar {
    padding: 0.75rem 0;
    -webkit-transition: all 400ms ease-in-out;
    -moz-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    -ms-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
}

.navbar.bg-tra  {
    padding: 2.25rem 0;
    background-color: transparent;  
}

/*------------------------------------------*/
/*   NAVIGATION MENU    
/*------------------------------------------*/

.nav-item { 
    margin: 0 1.4rem; 
}

.navbar-expand-lg .navbar-nav .nav-link {
    font-size: 0.875rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    padding: 0.65rem 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0; 
}

.navbar-text {
    font-size: 1.05rem;
    line-height: 1;
    padding: 0.5rem 0;
    font-weight: 700;
    padding-top: 0;
    padding-bottom: 0;
}

.navbar-dark .navbar-text.rose-color,
.navbar-light .navbar-text.rose-color {
    color: #f23472;
}

/* TODO: grey - OK? */
.navbar-dark .navbar-text.grey-color,
.navbar-light .navbar-text.grey-color {
    /* color: #f23472; */
    color: #666666;
}

.navbar-light.bg-light.bg-tra .navbar-text a {
    color: #fff!important;
}

.hover-menu .collapse ul .crmm-widget ul {
    display: block; position: relative;
}

/*------------------------------------------*/
/*   DROPDOWN MENU  
/*------------------------------------------*/

.dropdown-menu {
    background-color: #fbfbfb;
    padding: 0.25rem 0;
    margin: 0 0 0 2px; 
    border: 1px solid #ddd; 
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.dropdown-item { 
    font-size: 0.95rem;
    font-weight: 400;
    padding: 0.5rem 1.25rem;
}

.dropdown-toggle::after {
    vertical-align: .275em;
}

.dropdown-item.dropdown-toggle {
    position: relative;
}

.dropdown-item.dropdown-toggle::after {
    vertical-align: .275em;
    position: absolute;
    right: 15px;
    top: 15px;
    border-left: 0.31em solid;
    border-top: 0.31em solid transparent;
    border-right: 0;
    border-bottom: 0.31em solid transparent;
}

.hover-menu .active a,
.hover-menu .active a:focus,
.hover-menu .active a:hover,
.hover-menu li a:hover,
.hover-menu li a:focus ,
.navbar > .show > a,  
.navbar > .show > a:focus,  
.navbar > .show > a:hover{
    color: #3a3a3a;
    background: transparent;
    outline: 0;
}

.hover-menu .collapse ul ul > li:hover > a, 
.navbar .show .dropdown-menu > li > a:focus, 
.navbar .show .dropdown-menu > li > a:hover,
.hover-menu .collapse ul ul ul > li:hover > a {
    background: #eee;
    color: #636363;
}

.hover-menu .collapse.red-hover ul ul > li:hover > a, 
.navbar .red-hover .show .dropdown-menu > li > a:focus, 
.navbar .red-hover .show .dropdown-menu > li > a:hover,
.hover-menu .collapse.red-hover ul ul ul > li:hover > a {
    color: #fd1c1c;
}

.hover-menu .collapse.rose-hover ul ul > li:hover > a, 
.navbar .rose-hover .show .dropdown-menu > li > a:focus, 
.navbar .rose-hover .show .dropdown-menu > li > a:hover,
.hover-menu .collapse.rose-hover ul ul ul > li:hover > a {
    color: #f23472;
}

/* TODO: grey - OK? */
.hover-menu .collapse.grey-hover ul ul > li:hover > a, 
.navbar .grey-hover .show .dropdown-menu > li > a:focus, 
.navbar .grey-hover .show .dropdown-menu > li > a:hover,
.hover-menu .collapse.grey-hover ul ul ul > li:hover > a {
    /* color: #f23472; */
    color: #666666;
}

.hover-menu .collapse.yellow-hover ul ul > li:hover > a, 
.navbar .yellow-hover .show .dropdown-menu > li > a:focus, 
.navbar .yellow-hover .show .dropdown-menu > li > a:hover,
.hover-menu .collapse.yellow-hover ul ul ul > li:hover > a {
    color: #f23472;
}

.hover-menu .collapse.green-hover ul ul > li:hover > a, 
.navbar .green-hover .show .dropdown-menu > li > a:focus, 
.navbar .green-hover .show .dropdown-menu > li > a:hover,
.hover-menu .collapse.green-hover ul ul ul > li:hover > a {
    color: #22bc3f;
}

@media only screen and (max-width: 991px) {
    .hover-menu .show > .dropdown-toggle::after{ transform: rotate(-90deg); }
}

@media only screen and (min-width: 991px) {
    .hover-menu .collapse ul li { position:relative; }
    .hover-menu .collapse ul li:hover > .dropdown-menu { display:block; }
    .hover-menu .collapse ul ul { position: absolute; top:100%; left:0; min-width:180px; display:none; }
    /*******/
    .hover-menu .collapse ul ul li{ position:relative; }
    .hover-menu .collapse ul ul li:hover > ul { display:block; }
    .hover-menu .collapse ul ul ul { position:absolute; top:0; left:100%; min-width:180px; display:none; }
    /*******/
    .hover-menu .collapse ul ul ul li {position:relative; }
    .hover-menu .collapse ul ul ul li:hover ul { display:block; }
    .hover-menu .collapse ul ul ul ul { position:absolute; top:0; left:-100%; min-width:180px; display:none; z-index:1; }
}

/*------------------------------------------*/
/*   Navbar Social Icons  
/*------------------------------------------*/

.header-socials {
    margin-top: 4px;
    margin-left: 8px;
    display: inline-block; 
    text-align: center;
}

.header-socials span {
    float: left;
    width: auto !important;
    display: inline-block !important;
    vertical-align: top;
    clear: none !important;
    margin-left: 7px;
}

.header-socials a {
    width: 40px;
    height: 40px;
    background-color: transparent;
    display: block;
    color: #fff;
    font-size: 1rem;
    line-height: 33px !important;   
    border: 2px solid #fff;  
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
}

.navbar-light .header-socials a {
    color: #444;  
    border-color: #444;
}

.navbar-light .header-socials a:hover {
    color: #fff;  
}

.header-socials a.ico-facebook:hover,
.navbar.scroll .header-socials a.ico-facebook:hover { background-color: #3b5998; border-color: #3b5998; }
.header-socials a.ico-twitter:hover,
.navbar.scroll .header-socials a.ico-twitter:hover { background-color: #00a9ed; border-color: #00a9ed; }
.header-socials a.ico-behance:hover, 
.navbar.scroll .header-socials a.ico-behance:hover { background-color: #2473f6; border-color: #2473f6; }
.header-socials a.ico-google-plus:hover, 
.navbar.scroll .header-socials a.ico-google-plus:hover { background-color: #cd1111; border-color: #cd1111; }
.header-socials a.ico-linkedin:hover, 
.navbar.scroll .header-socials a.ico-linkedin:hover { background-color: #015886; border-color: #015886; }
.header-socials a.ico-dribbble:hover, 
.navbar.scroll .header-socials a.ico-dribbble:hover { background-color: #d92d84; border-color: #d92d84; }
.header-socials a.ico-instagram:hover, 
.navbar.scroll .header-socials a.ico-instagram:hover { background-color: #beb3a8; border-color: #beb3a8; }
.header-socials a.ico-pinterest:hover, 
.navbar.scroll .header-socials a.ico-pinterest:hover { background-color: #ac281a; border-color: #ac281a; }
.header-socials a.ico-youtube:hover, 
.navbar.scroll .header-socials a.ico-youtube:hover { background-color: #cd1b20; border-color: #cd1b20; }
.header-socials a.ico-tumblr:hover, 
.navbar.scroll .header-socials a.ico-tumblr:hover { background-color: #3a5976; border-color: #3a5976; }
.header-socials a.ico-vk:hover, 
.navbar.scroll .header-socials a.ico-vk:hover { background-color: #3b5998; border-color: #3b5998;}

/*------------------------------------------*/
/*   Navbar Button
/*------------------------------------------*/

.navbar .btn {  
    font-size: 0.85rem;
    font-weight: 800;
    padding: 0.8rem 1.65rem;
    margin-left: 15px;
}

/*------------------------------------------*/
/*   Navigation Menu Hover
/*------------------------------------------*/

.navbar-light .nav-link:focus,
.navbar-dark .nav-link:focus {
    color: #fff;
    background-color: transparent;
}

.navbar-dark .navbar-nav .nav-link:focus, 
.navbar-dark .navbar-nav .nav-link:hover {
    color: #fff;
}

.navbar-expand-lg .nl-simple a:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 3px;
    bottom: 1px;
    left: 0;
    background: #f23472;
    visibility: hidden;
    border-radius: 0;
    transform: scaleX(0);
    transition: .20s linear;
}

/* TODO: grey - OK */
.navbar-expand-lg .grey-hover .nl-simple a:before {
    /* background: #f4c744; */
    background: #999999;
}

.navbar-expand-lg .yellow-hover .nl-simple a:before {
    /* background: #f4c744; */
    background: #ffde00;
}

.navbar-expand-lg .green-hover .nl-simple a:before {
    background: #22bc3f;
}

.navbar-expand-lg .nl-simple a:hover:before,
.navbar-expand-lg .nl-simple a:focus:before {
    visibility: visible;
    transform: scaleX(1);
}

.navbar-light.bg-light.navbar-expand-lg .nl-simple a:before {
    display: none;
}

.navbar-light.bg-light.navbar-expand-lg .nl-simple a:hover:before,
.navbar-light.bg-light.navbar-expand-lg .nl-simple a:focus:before {
    display: none;
}

.navbar-light.bg-light.navbar-expand-lg .nl-simple a:hover {
    /* color: #f23472; */
    color: #999999;
}

/*------------------------------------------*/
/*   Navbar Scroll   
/*------------------------------------------*/

.navbar.scroll.bg-tra {
    padding: 13px 0;
    background-color: #fcfcfc;
    box-shadow: 0 0 2px rgba(50, 50, 50, 0.4);  
}

.navbar.scroll.navbar-expand-lg .nl-simple a:before {
    display: none;
}

.navbar.scroll.navbar-expand-lg .nl-simple a:hover:before,
.navbar.scroll.navbar-expand-lg .nl-simple a:focus:before {
    display: none;
}

.navbar.scroll.navbar-dark.bg-tra .nav-link {
    /* color: #333; */
    color: #fff;
}

.navbar.scroll.navbar-light .rose-hover .navbar-nav .nav-link:hover,
.navbar.scroll.navbar-dark .rose-hover .navbar-nav .nav-link:hover { 
    color:  #f23472;
}

/* TODO: grey - OK? */
.navbar.scroll.navbar-light .grey-hover .navbar-nav .nav-link:hover,
.navbar.scroll.navbar-dark .grey-hover .navbar-nav .nav-link:hover { 
    /* color:  #f23472; */
    color: #999999;
}

.navbar.scroll.navbar-light .yellow-hover .navbar-nav .nav-link:hover,
.navbar.scroll.navbar-dark .yellow-hover .navbar-nav .nav-link:hover { 
    /* color: #f23472; */
    color: #ffde00;
}

.navbar.scroll.navbar-light .green-hover .navbar-nav .nav-link:hover,
.navbar.scroll.navbar-dark .green-hover .navbar-nav .nav-link:hover { 
    color: #22bc3f;
}

.navbar.scroll .header-socials a,
.navbar.scroll .btn.btn-tra-white {
    color: #222;    
    border-color: #222;  
}

.navbar.scroll .btn.white-hover:hover {
    color: #fff;
    background-color: #333;
    border-color: #333;
}

.navbar.scroll .btn.tra-hover:hover {
    color: #333;
    background-color: transparent;
    border-color: #333;
}

.navbar.scroll .header-socials a:hover,
.navbar.scroll .btn.white-hover:hover span {
    color: #fff;
}

.navbar.scroll .btn.tra-hover:hover span {
    color: #333;
}

/*------------------------------------------*/
/*   Responsive Burger Menu   
/*------------------------------------------*/

.navbar-light .navbar-toggler,
.navbar.bg-tra .navbar-toggler {
    color: #fff;
    padding: 0px;
    padding-right: 5px;
    font-size: 22px;
    border: none;
}

.navbar-toggler:focus {
    outline: 0;
}

/*------------------------------------------*/
/*   Logo Image
/*------------------------------------------*/

.logo-white, 
.logo-black {
    display: block;
}

/*
.navbar-light.bg-light .logo-white,
.navbar-dark.bg-tra .logo-black,
.navbar-light.bg-tra .logo-white,
.scroll.navbar-dark.bg-tra .logo-white,
.navbar-dark.bg-dark .logo-black,
.navbar-light.bg-light .logo-white {
    display: none;
}

.navbar-dark.bg-tra .logo-white,
.navbar-light.bg-tra .logo-black,
.scroll.navbar-dark.bg-tra .logo-black,
.navbar-dark.bg-dark .logo-white,
.navbar-light.bg-light .logo-black {
    display: block;
}
*/

/* ==========================================================================
  04. CONTENTS
  =========================================================================== */

.contents {
    padding-top: 120px; 
    padding-bottom: 30px;
}

.contents .contents-body {

}

.contents .contents-body h2.title {
    text-transform: uppercase; 
    letter-spacing: 5px;
}

.contents .contents-body p.txt {
    margin-top: 10px;
}

.contents .contents-body p.txt.last {
    margin-top: 10px;
    margin-bottom: 40px;
}

.contents .contents-body p.txt b {
    font-weight: 700;
}

.contents .contents-body p.txt b.instamatica {
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 3px;
}

.contents .contents-body p.txt a {
    text-decoration: underline;
}

/*------------------------------------------*/
/*   SECTION ID
/*------------------------------------------*/

span.section-id {
    font-size: 0.8575rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    display: block;
    position: relative; 
    letter-spacing: 1px;
    margin-bottom: 30px;   
}

.bg-dark span.section-id.grey-color {
    color: #727272;  
}

/*------------------------------------------*/
/*   SECTION TITLE
/*------------------------------------------*/

.section-title {
    margin-bottom: 2.5rem;     
}

/*
.section-title h3.h3-xl {
    margin-bottom: 1rem;
}
*/

.section-title p {
    padding-right: 15%; 
    margin-bottom: 2.25rem;     
}

.section-title.text-center p {
    padding: 0 10%;     
}

/* ==========================================================================
  05. FOOTER
  =========================================================================== */

#footer.footer {
    padding-top: 20px;
    padding-bottom: 20px;
}

#footer.bg-dark {
    /* background-image: url("../images/world-map.png"); */
    background-color: #000;
}

#footer.bg-dark a {
    color: #fff;
}

.footer .footer-row {
    display: block;
}

.footer .footer-row-mobile {
    display: none;
}

.footer-box {
    margin-bottom: 40px;
    padding-left: 15%;
}

/*------------------------------------------*/
/*   FOOTER TYPOGRAPHY
/*------------------------------------------*/

.footer h4, 
.footer h5 {
    margin-bottom: 25px;
}

.footer p.p-md {
    font-weight: 600;
    margin-bottom: 3px;
}

.footer p.p-md a {
    text-decoration: underline;
}

.footer-box p,
.footer-links p {
    margin-bottom: 3px;
}

.footer-copyright p {
    margin-bottom: 0;
}

.footer-copyright p span {
    font-weight: 700;
}

.bg-dark .footer-box p,
.bg-dark .footer-form p,
.bg-dark .footer-info p,
.bg-dark .footer-copyright p,
.bg-dark .footer-box li a,
.bg-dark .footer-links li a {
    color: #fff;
}

.bg-dark .footer-copyright p span {
    color: #fff;
}

/*------------------------------------------*/
/*   FOOTER LINKS
/*------------------------------------------*/

.footer-box li,
.footer-links li {
    width: auto !important;
    display: block !important;
    vertical-align: top;
    clear: none !important;
    margin: 0 0 10px 0;
    padding: 0;
}

.footer-box li a:hover,
.footer-links li a:hover {
    color: #000;
    text-decoration: underline;
}

.bg-dark .footer-box li a:hover,
.bg-dark .footer-links li a:hover {
    color: #fff;
}

/*------------------------------------------*/
/*   FOOTER SOCIAL LINKS
/*------------------------------------------*/

.foo-links {
    display: inline-block; 
    padding-left: 0;
    margin: 15px auto 0;
}

.foo-links li {
    width: auto !important;
    display: inline-block !important;
    vertical-align: top;
    clear: none !important;
    margin: 0 0 8px 0;
    padding: 0;
}

.foo-links a {
    width: 40px;
    height: 40px;
    color: #888;
    border: 2px solid rgba(240, 240, 240, .05);
    background-color: rgba(200, 200, 200, .45);
    font-size: 1.1rem;
    line-height: 35px !important;
    margin-right: 6px;
    display: block;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    -webkit-transition: all 400ms ease-in-out;
    -moz-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    -ms-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
}

.bg-dark .foo-links a {
    color: #ccc;
    background-color: rgba(220, 220, 220, .2);
    border: 1px solid transparent;
}

.foo-links a:hover {
    color: #fff;
}

.foo-links a.ico-facebook:hover { background-color: #3b5998; border-color: #3b5998; }
.foo-links a.ico-twitter:hover { background-color: #00a9ed; border-color: #00a9ed; }
.foo-links a.ico-instagram:hover { background-color: #e44772; border-color: #e44772; }
.foo-links a.ico-dribbble:hover { background-color: #d92d84; border-color: #d92d84; }
.foo-links a.ico-behance:hover { background-color: #2473f6; border-color: #2473f6; }
.foo-links a.ico-pinterest:hover { background-color: #ac281a; border-color: #ac281a; }
.foo-links a.ico-linkedin:hover { background-color: #015886; border-color: #015886; }
.foo-links a.ico-google-plus:hover { background-color: #cd1111; border-color: #cd1111; }
.foo-links a.ico-youtube:hover { background-color: #cd1b20; border-color: #cd1b20; }
.foo-links a.ico-tumblr:hover { background-color: #3a5976; border-color: #3a5976; }
.foo-links a.ico-vk:hover { background-color: #3b5998; border-color: #3b5998; }

/* ==========================================================================
  06.  SCROLL DOWN MOUSE
  =========================================================================== */  

.scroll-down {
    display: block;
    width: 100%;
    position: absolute;
    z-index: 99;  
    left: 0px;
    bottom: 10%;
    text-transform: uppercase;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    -webkit-animation-name: Floatingx;
    -webkit-animation-duration: 1.8s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-name: Floating;
    -moz-animation-duration: 1.8s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: ease-in-out;
}

@-webkit-keyframes Floatingx {
    from {-webkit-transform:translate(0, 0px);}
    65% {-webkit-transform:translate(0, 10px);}
    to {-webkit-transform: translate(0, -0px);}    
}
    
@-moz-keyframes Floating {
    from {-moz-transform:translate(0, 0px);}
    65% {-moz-transform:translate(0, 10px);}
    to {-moz-transform: translate(0, -0px);}    
}

.mouse {
    width: 18px;
    height: 28px;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 9px;
    -webkit-border-radius: 9px;
    -moz-border-radius: 9px;
    border-radius: 9px;
    display: block;
    text-align: center;
    margin: 0px auto 10px; 
}

/* ==========================================================================
  06.  SCROLL TO TOP
  =========================================================================== */  

#scrollUp {
    display: none;
    width: 40px;
    height: 45px;
    position: fixed;
    bottom: 20px;
    right: 40px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background-image: url("../images/back-to-top.png");
    background-repeat: no-repeat;
    background-position: 50% 48%;
    background-color: rgba(35, 35, 35, 0.65);
    -webkit-transition: all 250ms linear;
    -moz-transition: all 250ms linear;
    transition: all 250ms linear; 
}

#scrollUp:hover {
    background-color: #151515;
}

nav a#pull {  
    display: none;  
}