/*
Theme Name:         Fyber3
Theme URI:          http://foundationpress.olefredrik.com
Github Theme URI:   https://github.com/olefredrik/FoundationPress
Description:        Scriptics Development
Version:            3.0
Author:             Scriptics
Author URI:         http://scriptics.ro/

License:            MIT License
License URI:        http://www.opensource.org/licenses/mit-license.php

*/

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

  Unfortunately WordPress will require a style.css file
  located in the theme's root folder for stuff to work.

  However, we will not be using vanilla CSS. We're using Sass.

  Sass is a superset of CSS that adds in amazing features
  such as variables, nested selectors and loops. It's also
  the easiest way to customize Foundation.

  All Sass files are located in the /assets/scss folder.
  Please note that none of your scss files will be compiled to /stylesheets/foundation.css before you run
  'npm run watch' or 'npm run build'.

  Please read the README.md file before getting started. More info on how
  to use Sass with Foundation can be found here:
  http://foundation.zurb.com/docs/sass.html

  If you for some reason would like to write plain css instead of using Sass,
  you could just enqueue this file (style.css) to the header and add your styles in this file

---------------------------------------------------------------------------- */
.header__legal {
    height: 500px;
    background: linear-gradient(to bottom, #3c51dd 0%, #3c51dd 32%, #1f2870 100%);
    background-repeat: no-repeat;
    background-size: cover;
}

.header__title {
    text-align: center;
    padding-top: 120px;
    font-size: 54px;
    font-weight: bold;
    letter-spacing: -1.3px;
    color: #fff;
    text-shadow: 0 0 40px rgba(0, 0, 0, 0.6);
}

.header__title p {
    font-family: AvertaCY-Bold, sans-serif;
    font-size: 50px;
}

.grid-container-legal {
    width: 80%;
    display: block;
    background-color: #FFFFFF;
    margin: 0 auto;
    position: relative;
    padding-top: 2%;
    padding-bottom: 5%;
    bottom: 170px;
    -webkit-box-shadow: 0 1px 10px 1px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 1px 10px 1px rgba(0, 0, 0, 0.5);
    box-shadow: 0 1px 50px 1px rgba(0, 0, 0, 0.04);
}

.grid-container-legal tbody,
.grid-container-legal thead,
.grid-container-legal thead {
    border: none;
    background-color: #ffffff;
}

.grid-container-legal ul {
    list-style-type: disc;
}

a.button-legal {
    font-family: AvertaCY-Light;
    font-size: 18px;
    color: #ffffff !important;
    letter-spacing: 0.4px;
    float: right;
    padding-right: 22px;
    padding-left: 25px;
    line-height: 42px;

}

.legalbutton {
    width: 176px;
    background: #3E53DE;
    height: 42px;
    border: solid 1px #3E53DE;
    position: absolute;
    right: 40px;
    bottom: 28px;
}

main.main {
    background: #f2f7f8; /* Old browsers */
    background: -moz-linear-gradient(top, #f2f7f8 0%, #f9fbfc 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #f2f7f8 0%, #f9fbfc 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #f2f7f8 0%, #f9fbfc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2f7f8', endColorstr='#f9fbfc', GradientType=0); /* IE6-9 */
}

.legalbutton:hover {
    background: #2638af;
}

.grid-container-legal {
    z-index: 15;
}

.header__topbar.scrolltopbar {
    background: #FFFFFF;
}

@media screen and (max-width: 1023px) {
    .header__title {
        font-size: 40px;
    }
}

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

    .header__title {
        font-size: 30px;
    }
}

/** Begin Marketo Form About Us **/
input#FirstName {
    position: relative;
    margin-bottom: 0;
    margin-top: 10px;
    font-family: AvertaCY-Light, sans-serif;
    font-size: 18px;
    letter-spacing: -0.54px;
    color: #4a4a4a;
    background-color: #f7fbff;
    padding: 21px;
    width: 100% !important;
    height: 2.4375rem;
}

input#FirstName:focus {
    background-color: #edf5fd;
    box-shadow: none;
}

input#LastName {
    position: relative;
    margin-bottom: 0;
    margin-top: 10px;
    font-family: AvertaCY-Light, sans-serif;
    font-size: 18px;
    letter-spacing: -0.54px;
    color: #4a4a4a;
    background-color: #f7fbff;
    padding: 21px;
    width: 100% !important;
    height: 2.4375rem;
}

input#LastName:focus {
    background-color: #edf5fd;
    box-shadow: none;
}

input#Email {
    position: relative;
    margin-bottom: 0;
    margin-top: 10px;
    font-family: AvertaCY-Light, sans-serif;
    font-size: 18px;
    letter-spacing: -0.54px;
    color: #4a4a4a;
    background-color: #f7fbff;
    padding: 21px;
    width: 100% !important;
    height: 2.4375rem;
}

input#Email:focus {
    background-color: #edf5fd;
    box-shadow: none;
}

input#Company {
    position: relative;
    margin-bottom: 0;
    margin-top: 10px;
    font-family: AvertaCY-Light, sans-serif;
    font-size: 18px;
    letter-spacing: -0.54px;
    color: #4a4a4a;
    background-color: #f7fbff;
    padding: 21px;
    width: 100% !important;
    height: 2.4375rem;
}

input#Company:focus {
    background-color: #edf5fd;
    box-shadow: none;
}

input#Phone {
    position: relative;
    margin-bottom: 0;
    margin-top: 10px;
    font-family: AvertaCY-Light, sans-serif;
    font-size: 18px;
    letter-spacing: -0.54px;
    color: #4a4a4a;
    background-color: #f7fbff;
    padding: 21px;
    width: 100% !important;
    height: 2.4375rem;
}

input#Phone:focus {
    background-color: #edf5fd;
    box-shadow: none;
}

input#MktoPersonNotes {
    position: relative;
    margin-bottom: 0;
    margin-top: 10px;
    font-family: AvertaCY-Light, sans-serif;
    font-size: 18px;
    letter-spacing: -0.54px;
    color: #4a4a4a;
    background-color: #f7fbff;
    padding-left: 21px;
    width: 100% !important;
    height: 150px;
}

input#MktoPersonNotes:focus {
    background-color: #edf5fd;
    box-shadow: none;
}

.mktoForm .mktoButtonWrap.mktoSimple .mktoButton {
    width: 166px;
    height: 42px;
    font-family: AvertaCY-Regular, sans-serif;
    font-size: 17px !important;
    letter-spacing: 0.4px;
    color: #FFFFFF !important;
    background-color: #00D691 !important;

    border: none !important;
    margin-top: 43px;
    background-image: none !important;
}

.mktoForm .mktoButtonWrap.mktoSimple .mktoButton:focus {
    outline-color: #00D691;
}

.mktoForm .mktoButtonWrap.mktoSimple .mktoButton:hover {
    opacity: 0.9;
}

span.mktoButtonWrap.mktoSimple {
    margin-left: 0% !important;
}

.mktoFieldWrap.mktoRequiredField {
    width: 100% !important;
}

form#mktoForm_1001 {
    width: 100% !important;
}

.mktoForm .mktoFormCol {
    float: left;
    position: relative;
    min-height: 2em;
    width: 100% !important;
}

.mktoForm .mktoFieldWrap {
    float: left;
    width: 100% !important;
}

.mktoFieldDescriptor.mktoFormCol {
    margin-bottom: 0px !important;
}

.mktoError {
    left: 0 !important;
}

label.mktoLabel.mktoHasWidth {
    padding-top: 0;
}

label.mktoLabel.mktoHasWidth .mktoAsterix {
    display: none !important;
}

/** End Marketo form About Us */

/*
!** Marketo Contact overlay *!
.conta #FirstName{
    display: block;
    background-color: transparent;
    border: none;
    border-bottom: 2px solid #462e6c;

    color: #FFFFFF;
    font-family: AvertaCY-Regular, sans-serif;
    font-weight: 100;
    font-size: 15px;
    margin-bottom: 0;
    margin-top: 17px;
    position: relative;
    width: 30%!important;
}
.conta #FirstName:focus{
    background-color: #9a57ff;
    border: 1px solid #9a57ff;
    border-radius: 0;
    caret-color: #1D0047;
    outline: none;
    box-shadow: none;
}
.conta #LastName{
    display: block;
    background-color: transparent;
    border: none;
    border-bottom: 2px solid #462e6c;

    color: #FFFFFF;
    font-family: AvertaCY-Regular, sans-serif;
    font-weight: 100;
    font-size: 15px;
    margin-bottom: 0;
    margin-top: 17px;
    position: relative;
    width: 30%!important;
}
.conta #LastName:focus{
    background-color: #9a57ff;
    border: 1px solid #9a57ff;
    border-radius: 0;
    caret-color: #1D0047;
    outline: none;
    box-shadow: none;
}
.conta #LastName{
    display: block;
    background-color: transparent;
    border: none;
    border-bottom: 2px solid #462e6c;

    color: #FFFFFF;
    font-family: AvertaCY-Regular, sans-serif;
    font-weight: 100;
    font-size: 15px;
    margin-bottom: 0;
    margin-top: 17px;
    position: relative;
    width: 30%!important;
}
.conta #Phone:focus{
    background-color: #9a57ff;
    border: 1px solid #9a57ff;
    border-radius: 0;
    caret-color: #1D0047;
    outline: none;
    box-shadow: none;
}
.conta #Phone{
    display: block;
    background-color: transparent;
    border: none;
    border-bottom: 2px solid #462e6c;

    color: #FFFFFF;
    font-family: AvertaCY-Regular, sans-serif;
    font-weight: 100;
    font-size: 15px;
    margin-bottom: 0;
    margin-top: 17px;
    position: relative;
    width: 30%!important;
}
.conta #Email:focus{
    background-color: #9a57ff;
    border: 1px solid #9a57ff;
    border-radius: 0;
    caret-color: #1D0047;
    outline: none;
    box-shadow: none;
}
.conta #Email{
    display: block;
    background-color: transparent;
    border: none;
    border-bottom: 2px solid #462e6c;

    color: #FFFFFF;
    font-family: AvertaCY-Regular, sans-serif;
    font-weight: 100;
    font-size: 15px;
    margin-bottom: 0;
    margin-top: 17px;
    position: relative;
    width: 30%!important;
}
.conta #Company:focus{
    background-color: #9a57ff;
    border: 1px solid #9a57ff;
    border-radius: 0;
    caret-color: #1D0047;
    outline: none;
    box-shadow: none;
}
.conta #Company{
    display: block;
    background-color: transparent;
    border: none;
    border-bottom: 2px solid #462e6c;
    width: 30%!important;
    color: #FFFFFF;
    font-family: AvertaCY-Regular, sans-serif;
    font-weight: 100;
    font-size: 15px;
    margin-bottom: 0;
    margin-top: 17px;
    position: relative;
}
.conta #MktoPersonNotes:focus{
    background-color: #9a57ff;
    border: 1px solid #9a57ff;
    border-radius: 0;
    caret-color: #1D0047;
    outline: none;
    box-shadow: none;
}
.conta #MktoPersonNotes{
    display: block;
    background-color: transparent;
    border: none;
    border-bottom: 2px solid #462e6c;
    width: 30%!important;
    color: #FFFFFF;
    font-family: AvertaCY-Regular, sans-serif;
    font-weight: 100;
    font-size: 15px;
    margin-bottom: 0;
    margin-top: 17px;
    position: relative;
}
.conta.mktoForm .mktoButtonWrap.mktoSimple .mktoButton{
    margin-right: auto;
    margin-left: auto;
    display: block;
    background-color: transparent!important;
    width: 140px;
    height: 42px;
    border: 2px solid #FFFFFF!important;
    color: #FFFFFF!important;
    opacity: 0.25;
    margin-top: 52px;
}
.conta.mktoForm .mktoButtonWrap.mktoSimple .mktoButton:focus{
    outline-color: #FFFFFF!important;
}*/

#contactuscomment {
    width: 100% !important;
    padding-left: 21px;
    padding-top: 10px;
    margin-top: 10px;
}

.job__description {
    width: auto !important;
}

.grid-container-legal {
    max-width: 1200px;
}

.subcontainer-legal {
    max-width: 840px; /* adding 40px to compensate for the left and right padding */
    margin: 0 auto;
    padding: 0 20px 40px;
}

.grid-container-legal div,
.grid-container-legal p {
    font-family: 'AvertaCY-Regular', Helvetica, Arial, sans-serif;
    font-size: 18px;
    line-height: 30px;
    color: #515151;
}

.grid-container-legal h1 {
    font-family: 'AvertaCY-Semibold', Helvetica, Arial, sans-serif;
    font-size: 48px;
    line-height: 65px;
    color: #515151;
    letter-spacing: -1px;
    margin-bottom: 26px;
    margin-top: 62px;
}

.grid-container-legal h2 {
    font-family: 'AvertaCY-Semibold', Helvetica, Arial, sans-serif;
    font-size: 30px;
    line-height: 65px;
    letter-spacing: -1px;
    color: #515151;
    margin-top: 26px;
    margin-bottom: 5px;
}

.grid-container-legal h3 {
    font-family: 'AvertaCY-Bold', Helvetica, Arial, sans-serif;
    font-size: 24px;
    line-height: 35px;
    color: #515151;
}

.grid-container-legal h4 {
    font-family: 'AvertaCY-Bold', Helvetica, Arial, sans-serif;
    font-size: 20px;
    line-height: 35px;
    color: #515151;
}

.grid-container-legal h5 {
    font-family: 'AvertaCY-Bold', Helvetica, Arial, sans-serif;
    font-size: 24px;
    line-height: 35px;
    color: #515151;
}

.grid-container-legal h6 {
    font-family: 'AvertaCY-Bold', Helvetica, Arial, sans-serif;
    font-size: 24px;
    line-height: 35px;
    color: #515151;
}

.grid-container-legal a {
    font-size: 18px;
    color: #00D691;
    text-decoration: none;
}

.grid-container-legal ul {
    margin-top: 30px;
}

.grid-container-legal ul li {
    font-family: 'AvertaCY-Regular', Helvetica, Arial, sans-serif;
    font-size: 18px;
    line-height: 31px;
    color: #515151;
}

.grid-container-legal ol li {
    font-family: 'AvertaCY-Regular', Helvetica, Arial, sans-serif;
    font-size: 18px;
    line-height: 31px;
    color: #515151;
}

@media screen and (max-width: 768px) {
    .grid-container-legal {
        width: 100%;
        bottom: 0;
    }

    .header__title {
        display: table;
    }

    .header__title > div,
    .header__title > p {
        display: table-cell;
        text-align: center;
        vertical-align: middle;
    }
}

@media screen and (max-width: 640px) {
    .header__title p {
        font-size: 40px;
        line-height: 1.4;
    }

    .grid-container-legal h1 {
        font-size: 35px;
        line-height: 1.4;
        margin-top: 20px;
    }

    .legalbutton {
        position: static;
        margin-top: 60px;
    }
}

@media screen and (max-width: 480px) {
    .legal-hero-title {
        font-size: 30px;
    }

    .legal-main-title {
        font-size: 24px;
    }

    .grid-container-legal p {
        font-size: 16px;
        line-height: 26px;
    }

    .grid-container-legal h1 {
        font-size: 35px;
        line-height: 1;
    }

    .grid-container-legal h2 {
        font-size: 32px;
        line-height: 1;
    }

    .grid-container-legal h3 {
        font-size: 30px;
        line-height: 1;
    }

    .grid-container-legal h4 {
        font-size: 30px;
        line-height: 1;
    }

    .grid-container-legal h5 {
        font-size: 30px;
        line-height: 1;
    }

    .grid-container-legal h6 {
        font-size: 30px;
        line-height: 1;
    }

    .grid-container-legal ul li {
        font-size: 16px;
    }

    .grid-container-legal ol li {
        font-size: 16px;
    }
}

@media screen and (max-width: 320px) {
    .header__title p {
        font-size: 35px;
    }
}