/*********************** fonts ************************/

@import url('/css/fonts/bodoni/font.css');


/*********************** basics ***********************/

html {   
    font-family: "Roboto",sans-serif;
}

body {
    color: #6f7c82;
    font-weight: 400;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    line-height: 26px;
}

a {
    color: #000;
}

.al-form {
  padding-top: 8em;
}

.localwarning       { visibility: hidden;position: fixed; width:100%;height:100%;background:rgba(0,0,0,0.5); z-index:100000; top:0px;left:0px; }
.localwarningimage  { width: 800px;height: 600px; position: absolute; top: 50%;left: 50%; margin-left: -400px; margin-top: -450px; background: #fff; box-shadow: 0px 0px 20px 10px rgba(0,0,0,0.3); background-image:url(jquery_preview_warning.jpg); background-size:contain;}
.localwarningadvert { cursor:pointer;width: 800px;height: 200px; position: absolute; top: 50%;left: 50%; margin-left: -400px; margin-top: 150px; background: #fff; box-shadow: 0px 20px 20px 10px rgba(0,0,0,0.3); background-image:url(jquery_visual_editor_ad.jpg); background-size:contain;}
.localwarningclose  { position: absolute; color:#fff; font-size:25px; top:30px;right:30px; cursor: pointer}

.appy-title {
    color: #C93E7A;
    font-weight: 400;
    font-family: 'SackersGothicStd-Medium', 'Times New Roman', Times, serif;
    font-size: 20px;
    line-height: 30px;
}

.content{
    letter-spacing:0;
}
/* Fonts */
.content h4, .content h1{
    font-family: 'Raleway', sans-serif;
    font-weight: 400;
    letter-spacing: .1em;
}

.h1-small, .content .h1-small{
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing:2px;
}
.m-button {
    font-family: 'Raleway', sans-serif;
	font-weight: 500;
	padding:10px 25px;
	background-color: transparent;
    border-color: #fff;
	color: #fff;
	border: 1px solid !important;
	font-size:13px;
}
.m-button-bk {
    border-color: #444;
	color: #444;
}
.m-button-bk:hover {
    border-color: #000;
    color: #000;
    cursor:pointer;
}
/*********************** header / ***********************/
.al-header-menu {
    position: absolute;
    z-index: 300;
    width: 100%;
    font-family: "Open Sans", serif;
}

.al-header-menu .navbar-item {
    text-transform: uppercase;
}

.al-header-menu .navbar-item span {
  font-family: "Open Sans", "Helvetica Neue", sans-serif;
  font-size: 11px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 11px;
}

.navbar {
    background-color: #000;
    transform: background-color;
}

.navbar.is-background-color-transparent {
    background-color: rgba(0,0,0,0);
}
/*.navbar.is-mobile .navbar-burger.is-active{
    background-color: rgba(0,0,0,0.3);
}
.navbar.is-mobile.is-background-color-transparent .navbar-menu {
    background-color: rgba(0,0,0,0.3);
    padding:0;
}
.navbar.is-mobile .navbar-menu a.navbar-item {
    border-bottom:1px solid rgba(255,255,255,0.5);
}
.navbar.is-mobile .navbar-menu .navbar-item span {
    font-size:13px;
}*/
.navbar #al-coming-soon-text {
    visibility: visible;
}

.navbar.is-background-color-transparent #al-coming-soon-text {
    visibility: hidden;
}

.navbar .navbar-burger {
    color: #ffffff;
}

.header-logo {
    padding: 0px;
    margin: 0px;
    height: 32px;
    width: 100px;
}

.header-logo.dark , .header-logo  {
    fill: #fff;
}

.header-logo.light , .is-background-color-transparent .header-logo {
    fill: #fff;
}


a.navbar-item.is-active, a.navbar-item:hover, a.navbar-link.is-active, a.navbar-link:hover {
    background-color: #000000;
}

/****************** moded form ****************************/

.input.is-active, .input.is-focused, .input:active, .input:focus, .textarea.is-active, .textarea.is-focused, .textarea:active, .textarea:focus {
    border-color: #000000;
    box-shadow: 0 0 0 0.125em rgba(0,0,0,.25);
}

.input.is-active, .input.is-focused, .input:active, .input:focus {
    box-shadow: inset 0 -2px 0 #000000;
}
.button { 
    font-family: 'SackersGothicLight', 'Times New Roman', Times, serif;
    border-radius: 0px; 
    font-size: 12px;
    font-weight: 300;
    height: 100%;
}

.button.is-wide {
    padding: 10px 3em 10px 3em !important;
}


/*------Footer ******/
.is-size-7.is-small{
    font-size:0.7em!important;
}

/*-- Revolution --*/
.tp-loader.spinner2 {
    background-color: white !important;
}

/** 3. SERVICE
*******************************************************************/

#tab_container .container_item {
    display: none;
}
  
#tab_container .container_item.is-active {
display: block;
}

#tab_header ul{
    border-bottom:0;
}

.tabs li.is-active a {
    border-bottom-color: #855179;
    box-shadow: inset 0 -1px 0 #855179;
}

.tabs li.is-active span {
    color: #855179 !important;
}

.block-service-1 #tab_header
{
    width: 100%;
    margin: 0;
    padding: 0 0 40px 0;

    /*position: absolute;*/
}

.block-service-1 #tab_header li
{
    display: inline-block;
    float: left;

    width: 20%;
    margin: 0;
    padding: 0;

    list-style: none;

    text-align: center;
    vertical-align: top;

    border: 0;
}

.block-service-1 #tab_header li a
{
    font-family: 'Raleway', sans-serif;
    font-size: 13px;
    font-weight: 500;

    display: block;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    -webkit-transition: all 0ms ease;
            transition: all 0ms ease;
    letter-spacing: .1em;
    text-transform: uppercase;

    opacity: .5;
}

.block-service-1 #tab_header li.active a
{
    opacity: 1;
}

.block-service-1 #tab_header li a span
{
    font-size: 25px;

    display: block;

    margin-bottom: 10px;
}

.block-service-1 .tab-content h4
{
    font-family: "Open Sans", sans-serif;
    line-height: 1.7em;
    letter-spacing: 0;
    font-weight:300;
}




/** MEDIA QUERIES  **/

@media (max-width: 994px)
{
    .block-service-1 #tab_header li a
    {
        font-size: 13px;

        letter-spacing: .06em;
    }

    .block-service-1 #tab_header li a span
    {
        font-size: 40px;
    }

    .block-service-1 #tab_header
    {
        margin: 0;
        padding: 30px 0 30px 0;
    }

    .block-service-1 .tab-content h4
    {
        font-size: 22px;

        margin-bottom: 14px;
    }
    /*---------- Bulma ------------*/
    .columns.is-mobile>.column.is-two-fifths.is-three-quarters-mobile {
        width: 75%;
    }
}

@media (max-width: 480px)
{
    #service.section{
        padding:3rem 0.5rem;
    }

    .block-service-1 #tab_header ul
    {
        margin-left: 0;
    }


    .block-service-1 #tab_header li
    {
        width: 25%;
		float: none;
        margin-bottom: 20px;
    }

    .block-service-1 #tab_header li a 
    {
        font-size: 10px;
    }

    .block-service-1 #tab_header li a span
    {
        font-size: 16px;
        margin-bottom: 0;
    }

    .block-service-1 #tab_header
    {
        padding: 0 0 10px 0;
    }
    .block-service-1 .tab-content h4 {
        font-size: 17px;
        padding-left:2rem;
        padding-right:2rem;
    }
    .footer h3{
        font-weight:bold;
    }
    .footer .columns{
        border-bottom:1px solid rgba(255,255,255,0.4);
    }
    
}


/** BACKGROUND WHITE  **/

.block-service-1.bg-white #tab_header li a
{
    color: #000;
}

.block-service-1.bg-white #tab_header li a span
{
    color: #000;
}

.block-service-1.bg-white #tab_header li.active a span
{
    color: #af997f;
}

.block-service-1.bg-white .tab-content p
{
    color: #363636;
}

/********************* Footer ****************/
.footer {
    background-color: #d1d0d0d7;
    line-height: 1.6;
    padding: 3rem 1.5rem 2rem;
}
.legals a{
    text-decoration:underline;
}
.legals{
    font-size:0.7em!important;
}
.button-default.is-small{
        background-color: #fff;
        border-color: #363636;
        border-width: 1px;
        color: #363636;
        cursor: pointer;
        justify-content: center;
        padding-bottom: calc(.375em - 1px);
        padding-left: .75em;
        padding-right: .75em;
        padding-top: calc(.375em - 1px);
        text-align: center;
        white-space: nowrap;
}

/*-------------Form elements -----------------------------*/
.contact-form-container{
    margin-top:2rem;
}
.contact-form-container .form-element,
.contact-form-container textarea,
.comment-form .form-element,
.comment-form textarea {
    margin-bottom: 3rem;
    background-color: white;
    border: none;
    font-size: 14px;
    text-transform: initial;
    color: #999;
}
.appypro .form-element{
    margin-bottom: 30px;
}
.form-element:focus,
textarea:focus {
    background-color: #f9f9f9;
    box-shadow: none;
    color: #000;
}
.form-element.required-field:focus,
textarea.required-field:focus {
    background-color: #f9f9f9;
    box-shadow: none;
    color: #000;
}
.form-element, textarea {
    line-height: 1.4;
    border-radius: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
input, textarea {
    width: 100%;
    padding: 16px 30px;
    margin: 0 0 30px 0;
}
input, textarea, button, a {
    -webkit-transition-property: background, border-color, color, opacity;
    transition-property: background, border-color, color, opacity;
    -webkit-transition-duration: 300ms;
    transition-duration: 300ms;
}
input[type="submit"] {
    width: auto;
    border:0;
}
::-webkit-input-placeholder {
    color: #666;
}
:-moz-placeholder { /* Firefox 18- */
    color: #666;
}
::-moz-placeholder { /* Firefox 19+ */
    color: #666;
}
:-ms-input-placeholder {
    color: #666;
}
label{
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
label.middle-left{
    float: left;
    padding-left: 30px;
    padding-top: 20px;
    padding-right: 5px;
}
.css-input {
  position: relative;
  display: inline-block;
  margin: 2px 0;
  font-weight: 400;
  cursor: pointer;
  text-transform: initial;
  letter-spacing:initial;
}
.css-input input {
  position: absolute;
  opacity: 0;
}
.css-input input:focus + span {
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
}
.css-input input + span {
  position: relative;
  display: inline-block;
  margin-top: -2px;
  margin-right: 3px;
  vertical-align: middle;
}
.css-input input + span:after {
  position: absolute;
  content: "";
}
.css-input-disabled {
  opacity: .5;
  cursor: not-allowed;
}
.css-checkbox {
  margin: 7px 0;
}
.css-checkbox input + span {
  width: 20px;
  height: 20px;
  background-color: #fff;
  border: 1px solid #ddd;
  -moz-transition: background-color 0.2s;
  -o-transition: background-color 0.2s;
  -ms-transition: background-color 0.2s;
  -webkit-transition: background-color 0.2s;
  transition: background-color 0.2s;
}
.css-checkbox input + span:after {
    content: " ";
      display: block;
      width: 0.4em; /* the short bar of the mark is half as long as the long bar*/
      height: 0.65em;
      border: solid white;
      border-width: 0 0.2em 0.2em 0; 
      position: absolute;
      left: 0.5em;
      top: 35%;
      margin-top: -0.2em;
      -webkit-transform: rotate(45deg); 
      -moz-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      transform: rotate(45deg);
}
.css-checkbox:hover input + span {
  border-color: #ccc;
}
.css-checkbox.css-checkbox-sm {
  margin: 9px 0 8px;
  font-size: 12px;
}
.css-checkbox.css-checkbox-sm input + span {
  width: 16px;
  height: 16px;
}
.css-checkbox.css-checkbox-sm input + span:after {
  font-size: 8px;
  line-height: 15px;
}
.css-checkbox.css-checkbox-lg {
  margin: 3px 0;
}
.css-checkbox.css-checkbox-lg input + span {
  width: 30px;
  height: 30px;
}
.css-checkbox.css-checkbox-lg input + span:after {
  font-size: 12px;
  line-height: 30px;
}
.css-checkbox.css-checkbox-rounded input + span {
  border-radius: 3px;
}
.css-checkbox-default input:checked + span {
  background-color: #222;
  border-color: #222;
}

.errors{
    color:white;
}