/*
Theme Name: Costa
Theme URI: http://www.costa.co.il
Author: Studio Costa
Author URI: http://www.costa.co.il
Description: Studio Costa Custom Theme
Version: 2.1.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: costa
Tags: custom, costa

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

*/

* {margin:0;padding:0;list-style:none;outline:none;border:none;    font-family: 'Noto Sans Hebrew', sans-serif;vertical-align:top;text-decoration:none;font-smoothing:antialiased;text-rendering:optimizeLegibility;-webkit-appearance: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0)}
a[href], input[type='submit'], input[type='image'], label[for], select, button {cursor:pointer}
a {transition: all .2s linear;-o-transition: all .2s linear;-moz-transition: all .2s linear;-webkit-transition: all .2s linear}
img {max-width:100%}
body {cursor:default;padding-top:82px;background:#f4f4f4}
div.wpcf7-validation-errors {display:none!important;}
.h {margin:0 auto;position:relative;max-width:1200px;height:100%}
.header {position:fixed;top:0;right:0;z-index:500;width:100%;background:#f7f7f7;padding:20px;font-size:1.3em;box-sizing:border-box}
.header .h {display:flex;justify-content:space-between;align-items:center}
.header_contact {display:flex;align-items:center}
.header_phone {padding:0 20px;color:#222;font-weight:500}
.header_phone span {border-right:2px #08b1a7 solid;padding-right:10px;display:block;line-height:1}
.header_phone span:before {content:'טל. '}
.header_open_form {display:none}
.slogan {color:#333}

.top {background-size:cover;padding:150px 0;display:flex;align-items:center;justify-content:center;flex-direction:column;font-size:1.4em}
.top h1 {padding:0 50px;color:#fff;font-weight:700;background:#20b173;clip-path: polygon(3% 0%, 100% 0%, 97% 100%, 0% 100%);}
.top h2 {color:#958175;background:#fff;padding:5px 50px;font-weight:700;clip-path: polygon(0 0, 97% 0, 100% 100%, 3% 100%);}
.header_contact img {max-width:30px;margin:0 5px;}
.solutions {background:#f7f7f7}
.solutions h2 {font-size:2em;font-weight:500;line-height:1;padding:30px 20px 50px;box-sizing:border-box;color:#000000;flex-basis:100%;text-align:center;position:relative;}.solutions h2 img {width:17px;position:relative;top:12px;}
.solutions .h {display:flex;flex-wrap:wrap;padding:20px;box-sizing:border-box;background:#f7f7f7;}
.solutions figure {flex-basis:calc(33% - 4px);flex-grow:1;position:relative;margin:2px}
.solutions img {width:100%}
.solutions h3 {position:absolute;bottom:0;right:0;width:100%;text-align:center;padding:10px;color:#fff;box-sizing:border-box;font-weight:400;}.solutions figure:nth-child(odd) h3 {background:#20b173}.solutions figure:nth-child(even) h3 {background:#958175;}

.industries {background:transparent;text-align:center}
.industries h2 {padding:20px;font-size:2em;text-align:right;font-weight:500;margin:0 auto 1px auto;max-width:1200px;box-sizing:border-box}
.industries .h {display:flex;flex-wrap:wrap}
.industries figure {flex-basis:calc(16.66% - 2px);flex-grow:1;margin:0 1px;background:#fff;padding:30px 0}
.industries picture {display:block;margin:0 auto;width:120px;height:120px;border-radius:50%;position:relative}
.industries .h img {position:absolute;top:50%;right:50%;transform:translate(50%,-50%);width:80%;max-height:100px;object-fit:contain}
.industries h3 {font-weight:400;margin:20px 30px 0;line-height:1}.industries h4 {font-weight:400;}

.content {padding:40px 20px;font-size:1.2em;color:#666}
.content .h {display:flex}
.content h2 {color:#222;margin:0 0 20px 0;font-weight:500}
.content p {line-height:1.7}
.content ul li {position:relative;padding:0 40px 20px 0}
.content ul li:before {content:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAMAAACelLz8AAABXFBMVEUAAAAHpKcHmqYHp6cGjqYGi6YGjKYIr6cHo6cIsKcIqKcIsacHn6YGiaYIsacHl6YHk6YIr6cIr6cIqqcGiaUGjqYIracHo6cIrqcHp6cGk6YIsacIq6cIpacHl6YGkKYIr6cGi6YIr6cHn6YIsacGjKYHoqcHm6YHoacGiaYIrqcIpKcHm6YHlKYIr6cHl6YIpacHkaYHmaYHpKcGiqYIqacIsacHmqYHm6YGi6YGjKYGiaYHlKYGjaYHlqYIqqcIqKcHnKYHkKYGiKUHoqcHmKYHlKYIqqcHmqYIqqcHnKYGiKUHnqYGi6YHmKYIsacHmqYGiqYHnqYHkKYGi6YIqKcHnKYIsKcGjqYIpqcHkKYIqKcIsacGjaYIrqcHnqYIr6cGi6YHnqYGi6YIracHkqYGi6YGiKUIpqcIsacIrqcHl6YHkaYIpacHn6YIq6cHnKYHmqYHlKYHoqeTEwkBAAAAaXRSTlMAAwkR/v6+t6qh/vjg1r6Xk4ZzY2IxLiIaFAb8+fj29u7p5NjS0dDIxLaurZiXlYmIgHVycWxqWVBNLCAP+vnt2NPOzMq8t7Wvp6OhoKCdnJyYjoyMiX17bWhkXVpWT0Q+PDMqKCgbEA2OCS33AAABYUlEQVQoz2WSZXPDMAyG0zZUWpm5XZnbdYUxMzMz2Emawv+/W/iSTF8k+bEs+bUR2QLt8qYtk690FxGt+XcsTCxHHu7n43FnWAUMLpZd9ZiEONyrquqMBIx2DNpjvrNevoaAab+ugS9l/+GcCyY/daSfSC3wE0Tgs47co0tvvC8BQkeaNPrE+2AEvGqJk6ZvhWAepLXEMaGbYmQGZsFfecQrHlMTJx8M+sgMuBHWHpgGf7VTiqoK+VwRmQUesbzBkEakMqYcYurd4JBbalKeFs5HY46IVXbuQJesV2E4HNXlac5wpAZm5MyUGV4rg9oPkEdgDSnsXSEfmBcxWYVmejvCOBFPQDL0jwywIq+UFRJ6YsxiPkEqCGs6gqOXklYQlkwq8rWO4tKjG8yQXen8SiBUT9C4UdnnjrKWGNnuvXRbW8sT+kL9pwJ7FoaZcmqMKWrbpxsqeEfmbLa13VZAXvkDPQw3DQjkyDIAAAAASUVORK5CYII=");position:absolute;top:0;right:0}

.who {flex-basis:70%;border-left:1px #eee solid;padding-left:30px;color:#000}.who p {font-size:19px; line-height:21px;margin-bottom:20px;}
.adv {flex-basis:30%;padding-right:30px}

.contact {background:#20b173;padding:40px 20px}
.contact h2 {color:#fff;text-align:center;padding-bottom:20px;font-size: 33px;font-weight: 400;}
.contact figure {display:flex}
.contact fieldset {padding:10px;flex-grow:1}
.contact fieldset.submit {flex-grow:0}
.contact input[type=text],.contact input[type=tel],.contact input[type=email] {width:100%;padding:10px;box-sizing:border-box;font-size:1.1em;text-align:right;}.contact input[type=checkbox]{box-sizing:border-box;-webkit-appearance:auto;appearance:auto;margin-top:5px}.contact textarea {width:100%;padding:10px;box-sizing:border-box;font-size:1.1em;height:90px;}.contact .wpcf7-acceptance  {color:#fff;}
.contact input[type=submit] {background:#958175;color:#fff;padding:10px 30px;font-weight:bold;font-size:18px}

.clients {background:#f7f7f7;text-align:center}
.clients h2 {background:#fff;padding:20px;font-size:2em;font-weight:500;margin:0 auto 1px auto;max-width:1200px;box-sizing:border-box}
.clients .h {display:flex;flex-wrap:wrap;align-items:center}
.clients figure {flex-basis:calc(100% / 8);flex-grow:1;background:#fff;padding:30px 20px;box-sizing:border-box}

footer {padding:30px 20px;color:#fff;background:#2f2f2f}
footer .h {display:flex;justify-content:space-between;align-items:center}
footer a {color:#fff}
.open-contact {background:linear-gradient(to right,#08b1a7,#0688a5);padding:10px 20px}

.page404 {text-align:center;padding:80px}
.big404 {display:inline-block;font-size:15em;color:#fff;border:25px #fff solid;padding:20px;margin:40px auto;font-weight:900;line-height:1}
.page404 a {display:inline-block;background:#c22114;color:#fff;padding:20px 40px}
.popup {background:linear-gradient(to right,#08b1a7,#0688a5);box-shadow:0 0 10px rgba(0,0,0,0.9);margin:auto;position:relative;border-radius:5px;max-width:800px;padding:40px}
.popup h2 {color:#fff;text-align:center;padding:20px}
.popup figure {display:flex}
.popup fieldset {padding:10px;flex-grow:1}
.popup fieldset.submit {flex-grow:0}
.popup input {width:100%;padding:10px;box-sizing:border-box;font-size:1.1em}
.popup input[type=submit] {background:#111;color:#fff;padding:10px 30px;font-weight:bold}

.mfp-3d-unfold .mfp-content {perspective:2000px}
.mfp-3d-unfold .popup {opacity:0;transition:all .3s  ease-in-out;transform-style:preserve-3d;transform:rotateY(-60deg)}
.mfp-3d-unfold.mfp-bg {opacity:0;transition:all .5s}
.mfp-3d-unfold.mfp-ready .popup {opacity:1;transform:rotateY(0deg)}
.mfp-3d-unfold.mfp-removing .popup {transform:rotateY(60deg);opacity:0}
.mfp-3d-unfold.mfp-removing.mfp-bg{opacity:0}

nav {position:fixed;background:linear-gradient(to right,#08b1a7,#0688a5);display:none;bottom:0;right:0;width:100%;z-index:20}
nav a {color:#fff;display:flex;justify-content:center;align-items:center;font-weight:bold;flex-basis:50%;padding:10px 20px}
nav a:first-child {border-left:1px #fff solid}
nav svg {fill:#fff;width:1.1em;height:1.1em;margin:0 0 0 10px}

@media (max-width:900px) {
    .solutions figure {flex-basis:calc(33.33% - 4px)}
    .solutions figure:first-child {flex-basis:calc(66.66% - 4px)}
    .industries figure {flex-basis: calc(33.33% - 2px);}
    .content .h,
    .popup figure,
    .contact figure {display:block}
    .who,.adv {padding:20px 0}
    .clients figure {flex-basis:calc(100% / 4);}
    .slogan,
    .header_phone {display:none}
    nav {display:flex}
}
@media (max-width:600px) {
    .solutions .h {transform:none}
    .solutions h2 {font-size:1.3em}
    .header_open_form {display:block}
    .solutions figure {flex-basis: calc(50% - 4px)}
    .top {font-size:.8em;text-align:center}
    .solutions h3 {position:static;font-size:1rem}
    .industries figure {flex-basis: calc(50% - 2px);}
    footer .h {display:block;text-align:center;padding-bottom:40px}
    .popup {padding:30px}
    .popup h2 {font-size:1.3em;line-height:1}
    .open-contact,
    .header_email {display:none}
    .clients img {max-width:50px}		.contact h2 {font-size:20px;line-height:21px;}
}