* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html,body {/* Allows content to fill the viewport and go beyond the bottom */
height: 100%;
 
/* Allows you to scroll below the viewport; default value is visible */
overflow-y: scroll;
 overflow-x: hidden; /* needed because hiding the menu on the right side is not perfect,  */
 
/* To smooth any scrolling behavior */
}
/*
body
{overflow-x: hidden !important;}

.overflow-wrapper {overflow-x: hidden;}
*/
.footer a {color:#fff !important}

span.data8error {
				
				color: red;font-weight: 1000;
				display:block;
				margin: -5px 0 5px 0;
			}


/* Start of Expanding Panels */
* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}


.accordion dl,
.accordion-list {
  
}

.accordion dt span {font-weight: 300}

.accordion dd,
.accordion__panel {
  background-color: #eee;
  font-size: 1em;
  line-height: 1.5em;
 
}

.accordion dd p {padding-top:0.5em}
.accordion p {
  padding: 1em;
}

.accordion {
  position: relative;

  background: #eee;
 
}



.accordionTitle,
.accordion__Heading {
  background-color: #fcbc05;
  text-align: center;
  font-weight: 700;
  padding: 1em;
  display: block;
  text-decoration: none;
  color: #fff;
  -webkit-transition: background-color 0.5s ease-in-out;
  transition: background-color 0.5s ease-in-out;
  border-bottom: 1px solid #30bb64;
}

.accordion-content {padding:0 0em;margin:0 0 0 0; text-align: left;}

.accordionTitle:before,
.accordion__Heading:before {
  content: "+";
  font-size: 1.5em;
  line-height: 1em;
  float: left;
  -webkit-transition: -webkit-transform 0.3s ease-in-out;
  transition: -webkit-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
}

.accordionTitle:hover,
.accordion__Heading:hover {
  background-color: #d49e05;
}

.accordionTitleActive,
.accordionTitle.is-expanded {
  background-color: #d49e05;
}

.accordionTitleActive:before,
.accordionTitle.is-expanded:before {
  -webkit-transform: rotate(-225deg);
          transform: rotate(-225deg);
}

.accordionItem {
  height: auto;
  overflow: hidden;
  max-height: 50em;
  -webkit-transition: max-height 1s;
  transition: max-height 1s;
}

@media screen and (min-width: 48em) {
  .accordionItem {
    max-height: 15em;
    -webkit-transition: max-height 0.5s;
    transition: max-height 0.5s;
  }
}

.accordionItem.is-collapsed {
  max-height: 0;
}

.no-js .accordionItem.is-collapsed {
  max-height: auto;
}

.animateIn {
  -webkit-animation: accordionIn 0.45s normal ease-in-out both 1;
          animation: accordionIn 0.45s normal ease-in-out both 1;
}

.animateOut {
  -webkit-animation: accordionOut 0.45s alternate ease-in-out both 1;
          animation: accordionOut 0.45s alternate ease-in-out both 1;
}

@-webkit-keyframes accordionIn {
  0% {
    opacity: 1;
    -webkit-transform: scale(1) rotateX(-60deg);
            transform: scale(1) rotateX(-60deg);
    -webkit-transform-origin: 50% 0;
            transform-origin: 50% 0;
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes accordionIn {
  0% {
    opacity: 1;
    -webkit-transform: scale(1) rotateX(-60deg);
            transform: scale(1) rotateX(-60deg);
    -webkit-transform-origin: 50% 0;
            transform-origin: 50% 0;
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@-webkit-keyframes accordionOut {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.9) rotateX(-60deg);
            transform: scale(0.9) rotateX(-60deg);
  }
}

@keyframes accordionOut {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.9) rotateX(-60deg);
            transform: scale(0.9) rotateX(-60deg);
  }
}
	        


/* End of Expanding Panels */

/* Start of Call Button */

	        @font-face {
      font-family: 'fontello';
      src: url('../../font/fontello.eot?27755593');
      src: url('../../font/fontello.eot?27755593#iefix') format('embedded-opentype'),
           url('../../font/fontello.woff?27755593') format('woff'),
           url('../../font/fontello.ttf?27755593') format('truetype'),
           url('../../font/fontello.svg?27755593#fontello') format('svg');
      font-weight: normal;
      font-style: normal;
    }

	        .demo-icon
    {
      font-family: "fontello";
      font-style: normal;
      font-weight: normal;
      speak: none;
     color:white;
      display: inline-block;
      text-decoration: inherit;
      width: 1em;
      margin-right: 2.5em;
      text-align: center;
      /* opacity: .8; */
     
      /* For safety - reset parent styles, that can break glyph codes*/
      font-variant: normal;
      text-transform: none;
     
      /* fix buttons height, for twitter bootstrap */
      line-height: 1em;
     
      /* Animation center compensation - margins should be symmetric */
      /* remove if not needed */
      margin-left: 0.1em;
      margin-top:0.1em;
     
      /* You can be more comfortable with increased icons size */
      font-size: 160%;
     
      /* Font smoothing. That was taken from TWBS */
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
     
      /* Uncomment for 3D effect */
      /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
    }
    
   .fixed-button {
  background-color: #0084ff;
  color: #FFFFFF;
  border: none;
  outline: none;
  position: fixed;
  bottom: 0px;
  right: 15px;
  height: 60px;
  width:60px;
  margin-bottom: 20px;
  border-radius: 60px;
  box-shadow: 1px 3px 5px rgba(102, 102, 102, 0.69);
  z-index: 1001;
  text-align: center;
overflow: scroll;
  -webkit-overflow-scrolling: touch;
}

.fixed-button2 {
  background-color: #00d35b;
  color: #FFFFFF;
  border: none;
  outline: none;
  position: fixed;
  bottom: 75px;
  right: 15px;
  height: 60px;
  width: 60px;
  margin-bottom: 20px;
  border-radius: 60px;
  box-shadow: 1px 3px 5px rgba(102, 102, 102, 0.69);
  z-index: 1002;
  text-align: center;
  -webkit-overflow-scrolling: touch
}



@keyframes wobble {
  16.65% {
    -webkit-transform: translateY(8px);
    -ms-transform: translateY(8px);
    transform: translateY(8px);
  }
  33.3% {
    -webkit-transform: translateY(-6px);
    -ms-transform: translateY(-6px);
    transform: translateY(-6px);
  }
  49.95% {
    -webkit-transform: translateY(4px);
    -ms-transform: translateY(4px);
    transform: translateY(4px);
  }
  66.6% {
    -webkit-transform: translateY(-2px);
    -ms-transform: translateY(-2px);
    transform: translateY(-2px);
  }
  83.25% {
    -webkit-transform: translateY(1px);
    -ms-transform: translateY(1px);
    transform: translateY(1px);
  }
  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.wobble {
  -webkit-animation-name: wobble;
  animation-name: wobble;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
    -webkit-animation-delay: 0.07s; /* Safari 4.0 - 8.0 */
    animation-delay: 0.07s;
}




@keyframes wobble2 {
  16.65% {
    -webkit-transform: translateY(8px);
    -ms-transform: translateY(8px);
    transform: translateY(8px);
  }
  33.3% {
    -webkit-transform: translateY(-6px);
    -ms-transform: translateY(-6px);
    transform: translateY(-6px);
  }
  49.95% {
    -webkit-transform: translateY(4px);
    -ms-transform: translateY(4px);
    transform: translateY(4px);
  }
  66.6% {
    -webkit-transform: translateY(-2px);
    -ms-transform: translateY(-2px);
    transform: translateY(-2px);
  }
  83.25% {
    -webkit-transform: translateY(1px);
    -ms-transform: translateY(1px);
    transform: translateY(1px);
  }
  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.wobble2 {
  -webkit-animation-name: wobble;
  animation-name: wobble;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;

}
/* End of Call Button */

/* Carousel by Swiper Start */
   
    .swiper-container {
        margin-left: auto;
margin-right: auto;
margin-top:0px;
margin-bottom: 30px;
position: relative;

z-index: 1;
width: 100%;
overflow: hidden;
padding-top: 50px;
display: flex;
    }
    .swiper-slide {
        margin-top: 10px !important;
font-size: 100%;
line-height: 1.2em;
color: #1f1f1f;
border-radius: 6px;
box-sizing: border-box;
padding: 3px 8px 12px 8px;
width: calc(100% - 60px);
min-height: 340px;
background-color: #fcbc05;    }

.swiper-wrapper {position: relative;
width: 100%;
height: 100%;
z-index: 1;

}
.card-img-block {width: 100%;
margin-left: 10px;
vertical-align: bottom;
position: absolute;
top: -170px;
left: 0;
height: 110px;
z-index: 100;
overflow: visible}

.card-img-block img {height:200px}





h3.card-head{
font-size: 120%;
line-height: 1.2em;

font-weight: 700;
margin: 40px 0 0px 0;}
.card-analysis  {font-weight: 300}
.card-analysis span {font-weight: 700}

/* Hamburger CSS */
#menuToggle
{
  display: block;
  position: absolute;
  top: 1.5em;
  right: 1.5em;
  
  z-index: 100;
  
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle input
{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  
  cursor: pointer;
  
  opacity: 0; /* hide this */
  z-index: 101; /* and place it over the hamburger */
  
  -webkit-touch-callout: none;
}

/*
 * Just a quick hamburger
 */
#menuToggle span
{
  display: block;
  width: 24px;
  height: 3px;
  margin-bottom: 5px;
  position: relative;
  
  background: #393939;
  border-radius: 3px;
  
  z-index: 100;
  
  transform-origin: 0px 0px;
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

/* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, 0px);
  background: #fff;
}

/*
 * But let's hide the middle one.
 */
#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.3, 0.3);
}

/*
 * Ohyeah and the last one should go the other direction
 */
#menuToggle input:checked ~ span:nth-last-child(2)
{
  opacity: 1;
  transform: rotate(-45deg) translate(0, -2px);
}

/*
 * Make this absolute positioned
 * at the top left of the screen
 */
#menu
{
  position: absolute;
  width: 320px;
  margin: -100px 0 0 0;
  padding: 100px 1.5em 100px 1.5em;
  
  right: -100px;

  height: 200vh;
  background: #4385f5;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */
  
  transform-origin: 0% 0%;
  transform: translate(100%, 0);
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
  
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);



  
}

#menu li
{
  padding: 10px 0;
  font-size: 18px;
  font-family: 'Roboto' sans-serif;
  font-weight:300;
  color: white;
  z-index: 500
}

/*
 * And let's fade it in from the left
 */
#menuToggle input:checked ~ ul
{
  transform: scale(1.0, 1.0);
  opacity: 1;
}

/* End of Hamburger CSS */



/*
 * -- BASE STYLES --
 * Most of these are inherited from Base, but I want to change a few.
 */
body {
    line-height: 1.7em;
    color: #161000;
    font-size: 16px;
    font-family: 'Raleway', sans-serif;
    margin:0em;
}
.roboto {line-height: 1.7em;
    color: #161000;
    font-size: 16px;
    font-family: 'Raleway', sans-serif !important;
}
h1,
h2,
h3,
h4,
h5,
h6,
label {
    color: #637280;
    font-family: 'Raleway', serif;
    font-weight: 700;
  
}

input,select {width:100%}


.pure-img-responsive {
    max-width: 100%;
    height: auto;
}

a {color:#f4ece7; font-weight: 700; text-decoration: none}
a:hover {text-decoration: underline}
/*
 * -- LAYOUT STYLES --
 * These are some useful classes which I will need
 */
.l-box {
    padding: 1em;
}

.l-box-lrg {
    padding: 2em;
/*     border-bottom: 1px solid rgba(0,0,0,0.1); */
}

.is-center {
    text-align: center;
}

.smaller {font-size: 75%; line-height: 140%; color:#656565}

ul.sq {
	padding: 1em;
list-style-type: none;

list-style-position: outside;
border: 1px solid rgb(166, 166, 166);
border-radius: 10px;
margin-left: 0em;margin-top:0em}



ul.sq li::before {
  content: "▸";
  list-style-position: outside;
  margin-right: 10px;
  color: #09adee;
  /* or whatever color you prefer */
}
ul.sq li {margin-bottom:10px; line-height: 1em}
 
 
  li.required {list-style: none; margin-left: -40px; color: red;}
	       #no-zero {font-style: italic; font-family: 'Raleway', serif; color: #637280;}
	       form {padding-bottom: 3em}
 

.bg-contact { 

       
    
    color: #fff;
}
.bg-contact h1,.bg-contact h2,.bg-contact h3,.bg-contact h4,.bg-contact label {color:#515151}
.bg-contact label {font-family: 'Roboto', sans-serif}



/*
 * -- PURE FORM STYLES --
 * Style the form inputs and labels
 */
.pure-form label {
  
 line-height: 1.2em;
 margin-top:1em !important;
    
    font-weight: 400;
    color:#637280;
}
.pure-form-stacked label {margin-top:1em !important;}
/* .pure-form label .phonelabel {margin:0 !important} */

.pure-form input {
background-color: #fafbfc;
border: 1px solid #a8b0b8;
border-radius: 6px;
color: #62778c;
padding: 0 15px;
height: 50px;
font-size: 16px;
margin: 0 0 1.5em 0;
}

.pure-form input:focus {
border-color: #1f8ceb;
outline: 0}

.pure-form input[type=text] {color:black !important}

.pure-form select {
background-color: #fafbfc;
border: 1px solid #a8b0b8;
border-radius: 6px;
color: #62778c;
padding: 0 15px;
height: 50px;
font-size: 16px
}





/*
 * -- PURE BUTTON STYLES --
 * I want my pure-button elements to look a little different
 */
.pure-button {
    background-color: #1f8dd6;
    font-family: 'Raleway', serif; font-weight: 700;
    color: white;
    padding: 0.5em 1em;
    border-radius: 5px;
    border:none !important;
    margin:10px auto 0px auto;
    }
.pure-button-fullwidth {
    background-color: #1f8dd6;
    color: #dbdbdb;
    padding: 0.5em 1em;
    border-radius: 5px;
    width:100%;
    text-align: center;
    
    
}

.pure-button-orange {
    background-color: #FC5D2B;
    font-family: 'Raleway', serif; font-weight: 700;
    color: white;
    padding: 0.5em 1em;
    border-radius: 5px;
    
    margin:0 auto;
    }



.pure-button-orange:hover {
    background-color: #be3003;
    font-family: 'Raleway', serif; font-weight: 700;
    color: white;
    padding: 0.5em 1em;
    border-radius: 5px;
    text-decoration: none;
    margin:0 auto;
    }
    
    
 .pure-button-yellow {
    background-color: #fcbc05;
    font-family: 'Raleway', serif; font-weight: 700;
    color: white;
    padding: 1em 1.5em;
    border-radius: 5px;
    
    margin:0 auto;
    }



.pure-button-yellow:hover {
    background-color: #dda504;
    font-family: 'Raleway', serif; font-weight: 700;
    color: white;
    text-decoration: none;
     padding: 1em 1.5em;
    border-radius: 5px;
    
    margin:0 auto;
    }

   .pure-button-whatsappgreen {
    background-color: #25D366;
    font-family: 'Raleway', serif; font-weight: 700;
    color: white;
    padding: 0.5em 1em;
    border-radius: 5px;
    
    margin:0 auto;
    }



.pure-button-whatsappgreen:hover {
    background-color: #1fb356;
    font-family: 'Raleway', serif; font-weight: 700;
    color: white;
    text-decoration: none;
    padding: 0.5em 1em;
    border-radius: 5px;
    
    margin:0 auto;
    }  
    
       .pure-button-facebookblue {
    background-color: #0084ff;
    font-family: 'Raleway', serif; font-weight: 700;
    color: white;
    
    padding: 0.5em 1em;
    border-radius: 5px;
    
    margin:0 auto;
    }



.pure-button-facebookblue:hover {
    background-color: #036aca;
    font-family: 'Raleway', serif; font-weight: 700;
    color: white;
    text-decoration: none;
    padding: 0.5em 1em;
    border-radius: 5px;
    
    margin:0 auto;
    }  
    
    

.pure-button-shadow {box-shadow: 1px 3px 5px rgba(102, 102, 102, 0.69);}


.button-white {background: white; color: #1f8dd6;}

.button-xsmall {
            font-size: 70%;
        }

        .button-small {
            font-size: 85%;
        }

        .button-large {
            font-size: 110%;
        }

        .button-xlarge {
            font-size: 125%;
        }

a.pure-button span {font-family: 'Raleway', serif; font-weight: 700; color: #fff;}




/*
 * -- MENU STYLES --
 * I want to customize how my .pure-menu looks at the top of the page
 */

.home-menu {
    padding: 0.5em 0.5em 0.5em 0.5em;
    text-align: left;
 
/*     box-shadow: 0 1px 1px rgba(0,0,0, 0.10); */
}
.home-menu {
    background: #fff;
}

.pure-menu  {position: fixed;
  width: 100%;
  top: 0;
  z-index: 400}
.pure-menu.pure-menu-fixed {
    /* Fixed menus normally have a border at the bottom. */
    border-bottom: none;
    /* I need a higher z-index here because of the scroll-over effect. */
    z-index: 4;
}

.home-menu .pure-menu-heading {
    color: white;
    font-weight: 300;
    font-size: 120%;
    
  
}
.home-menu .pure-menu-heading img {
   max-width:25%;

}

.home-menu .pure-menu-selected a {
    color: white;
}

.home-menu a {
    color: #6FBEF3;
}
.home-menu li a:hover,
.home-menu li a:focus {
    background: none;
    border: none;
    color: #AECFE5;
}


/*
 * -- SPLASH STYLES --
 * This is the blue top section that appears on the page.
 */

.splash-container {
    background: #1f8dd6;
    z-index: 1;
    overflow: hidden;
    /* The following styles are required for the "scroll-over" effect */
    width: 100%;
    height: 88%;
/*
    top: 0;
    left: 0;
    position: fixed !important;
*/
}

.convertible-splash-container{ 
	background: url(../../img/convertiblebg-min.jpg) no-repeat center center;
   background-position-y: 0px;
 
    background-size: 200%;
    padding-bottom:2em;
    z-index: 1;
    overflow: hidden;
    /* The following styles are required for the "scroll-over" effect */
    width: 100%;
   
}




.chat-container {
    background: #e3dcce;
    z-index: 1;
    overflow: hidden;
    /* The following styles are required for the "scroll-over" effect */
    width: 100%;
    height: 88%;
/*
    top: 0;
    left: 0;
    position: fixed !important;
*/
}


.splash {
    /* absolute center .splash within .splash-container */
    width: 80%;
    height: 50%;
    margin: 20px auto;
/*
    position: absolute;
    top: 560px; left: 0; bottom: 0; right: 0;
*/
    text-align: center;
    
}

/* This is the main heading that appears on the blue section */
.splash-head {
    font-size: 250%;
    
    color: white;
    font-family: 'Raleway', serif;
        font-weight: 300;
        margin: 0;
   
    
}
.splash-head span {font-weight: 700; line-height: 1em}
.splash-head .havent {font-weight: 300; font-size:50%; font-style: italic; opacity: 0.8; line-height: 1em; }

/* This is the subheading that appears on the blue section */
.splash-subhead {
    color: white;
    line-height:1.5em;
    font-weight: 300;

   
}

/*
 * -- CONTENT STYLES --
 * This represents the content area (everything below the blue section)
 */
.content-wrapper {
 
    width: 100%;
   
    z-index: 2;
    background: white;
    padding-top: 3em

}

.content-wrapper-nopad {
 
    width: 100%;
   
    z-index: 2;
    background: white;
    padding-top: 0em

}




/* We want to give the content area some more padding */
.content {
    padding: 1em 1em 0em;
}


.content-carousel-head {
    padding:0em 1.5em;margin: 0;
   
}
.content-logo-head {
    padding:0em 1em;
   
}
.content-logo-head img {
    max-width:60%; margin:0; padding:0.75em 0 0 0
   
}
.content-carousel-head h3{
line-height:1em;
font-size:150%;
    }
.roboto {   font-family: 'Roboto' sans-serif;
  font-weight:300;}

    
    .content-carousel-head h3 span {
font-size:75%;
    font-weight:300
    }

/* This is the class used for the main content headers (<h2>) */
.content-head {
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 2em 0 1em;
}

/* This is a modifier class used when the content-head is inside a ribbon */
.content-head-ribbon {
    color: white;
}

/* This is the class used for the content sub-headers (<h3>) */
.content-subhead {
    color: #1f8dd6;
}
    .content-subhead i {
        margin-right: 7px;
    }

/* This is the class used for the dark-background areas. */
.ribbon {
padding-bottom: 250px;
    background: url(../../img/common/officedesk_small.png) no-repeat;
    background-position: center bottom;
    background-size: 100%;
    color: #222222;
 
}
.ribbon-homefeature {

   background: url(../../img/australia-girl-min.jpg) no-repeat center center;
   background-position-y: 0px;
   
    background-size: 100%;
   
    padding: 3em 1.5em 6.5em 1.5em;
    margin-top:2em
 
}

.ribbon-debthelp {

    background: url(../../img/top-debthelp-money.png) no-repeat;
    
    background-position: center top;
    background-size: 100%;
    color: #fff;
    padding-top: 60px;
    background-color: #f26c55;
}

.ribbon-head-debthelp {
    font-size: 200%;
    
    color: #fff;
    font-family: 'Raleway', serif;
        font-weight: 300;
        text-shadow: 1px 1px 1px #121212;
    line-height: 1.2em;
    
}
.ribbon-head-debthelp span {font-weight: 700}




.ribbon-bankruptcy {

    background: url(../../img/top-bankruptcy.png) no-repeat;
    background-position: center top;
    background-size: 100%;
    color: #050505;
    padding-top: 60px;
    background-color: #ffd006;
}

.ribbon-head-bankruptcy {
    font-size: 200%;
    
    color: #fff;
    font-family: 'Raleway', serif;
        font-weight: 300;
        text-shadow: 1px 1px 1px #121212;
    line-height: 1.2em;
    
}
.ribbon-head-bankruptcy span {font-weight: 700}




.ribbon-iva {

    background: url(../../img/top-ivas.png) no-repeat;
    background-position: center top;
    background-size: 100%;
    color: #050505;
    padding-top: 60px;
    background-color: #5bcacc;
}

.ribbon-head-iva {
    font-size: 200%;
    
    color: #fff;
    font-family: 'Raleway', serif;
        font-weight: 300;
        text-shadow: 1px 1px 1px #121212;
    line-height: 1.2em;
    
}
.ribbon-head-iva span {font-weight: 700}



.ribbon-head {
    font-size: 200%;
    
    color: black;
    font-family: 'Raleway', serif;
        font-weight: 300;
        text-shadow: 1px 1px 1px #f4ece7;
    line-height: 1.2em;
    
}
.ribbon-head span {font-weight: 700}


/* This is the class used for the footer */
.footer {
    background: #fcbc05;
    padding-bottom:3.5em;
    width: 100%;
    color:white}
    
p.smaller {color: white}


.swiper-noslide-wrapper {overflow: hidden; position:relative }
 .swiper-noslide {
        margin-top: 8.5em;
        margin-left:1.5em;
       margin-right:1.5em;
       margin-bottom: 1.5em;
font-size: 100%;
line-height: 1.2em;
color: #050505;
border-radius: 6px;
box-sizing: border-box;
padding: 2px 12px 12px 12px;


background-color: #f4ece7;    }

.swiper-info-wrapper {overflow: hidden; position:relative }
 .swiper-info {
        margin-top: 8.5em;
        margin-left:1.5em;
       margin-right:1.5em;
       margin-bottom: 1.5em;
font-size: 100%;
line-height: 1.2em;
color: #050505;
border-radius: 6px;
box-sizing: border-box;
padding: 2px 12px 12px 12px;


background-color: #f4ece7;    }


.noslide-img-block {width: 100%;
margin-left: 30px;
vertical-align: bottom;
position: absolute;

left: 0;
height: 100px;
z-index: -3;
}





.noslide-img-block-larger {width: 100%;
margin-left: 30px;
vertical-align: bottom;
position: absolute;
top: 8em;
left: 0;
height: 100px;
z-index: -3;
}

.noslide-img-block-larger img {height:100px}


ul.steps a {color:#4385f5; font-weight: 700; text-decoration: none}
ul.steps a:hover {text-decoration: none}
ul.steps a span {font-weight: 100}





/*
 * -- TABLET (AND UP) MEDIA QUERIES --
 * On tablets and other medium-sized devices, we want to customize some
 * of the mobile styles.
 */
@media (min-width: 48em) {

    /* We increase the body font size */
    body {
        font-size: 16px;
    }

    /* We can align the menu header to the left, but float the
    menu items to the right. */
    .home-menu {
        text-align: left;
        
    }
        .home-menu ul {
            float: right;
        }

    /* We increase the height of the splash-container */
/*    .splash-container {
        height: 500px;
    }*/

    /* We decrease the width of the .splash, since we have more width
    to work with */
    .splash {
        width: 50%;
        height: 50%;
    }

    .splash-head {
        font-size: 350%;
    }


    /* We remove the border-separator assigned to .l-box-lrg */
    .l-box-lrg {
        border: none;
    }
    .content-logo-head img {
   max-width:45%;

}
.ribbon-head {
    font-size: 300%;
    }


}

/*
 * -- DESKTOP (AND UP) MEDIA QUERIES --
 * On desktops and other large devices, we want to over-ride some
 * of the mobile and tablet styles.
 */
@media (min-width: 78em) {
    /* We increase the header font size even more */
    .splash-head {
        font-size: 350%;
    }
    .content-logo-head img {
   max-width:25%;

}
.ribbon-head {
    font-size: 300%;
    }
    
    
    .ribbon {
    background-color: rgba(0,0,0,.5);
background-blend-mode: darken;
    background: url(../../img/common/officedesk.png);
    background-size: cover;
    color: #222222;
}


}