/*
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:'Heebo',arial;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;background:#29333d}
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:rgba(0,0,0,.5);padding:5px 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:#fff;font-weight:500}
.header_phone span {border-right: 2px #f06c01 solid;padding-right:10px;display:block;line-height:1;}
.header_open_form {display:none}
.slogan {color:#fff}

.top {background-size:cover;padding:220px 0 150px 0;display:flex;align-items:center;justify-content:center;flex-direction:column;font-size:1.4em}
.top h1 {background: linear-gradient(to right, #f06c01, #f04e01);padding:0 20px;color:#fff;font-weight:500;}
.top h2 {color:#222;background:#fff;padding:5px 20px;font-weight:500}

.solutions {background:#f7f7f7}
.solutions h2 {font-size:2em;font-weight:500;line-height:1;padding:0 20px 20px;box-sizing:border-box;color: #f06c01;flex-basis:100%;text-align:center;}
.solutions .h {display:flex;flex-wrap:wrap;padding:20px;box-sizing:border-box;background:#f7f7f7;transform:translateY(-50px)}
.solutions figure {flex-basis:calc(25% - 4px);flex-grow:1;position:relative;margin:2px}
.solutions img {width:100%}
.solutions h3 {position:absolute;bottom:0;right:0;width:100%;background: linear-gradient(to right,#f06c01, #f04e01);text-align:center;padding:10px;color:#fff;box-sizing:border-box;}

.industries {background:#f7f7f7;text-align:center}
.industries h2 {background:#fff;padding:20px;font-size:2em;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 {background: linear-gradient(to right,#f06c01, #f04e01);display:block;margin:0 auto;width:120px;height:120px;border-radius:50%;position:relative;}
.industries img {position:absolute;top:50%;right:50%;transform:translate(50%,-50%);width:80%}
.industries h3 {font-weight:500;margin:20px 30px;line-height:1}

.content {background:#f7f7f7;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;filter:hue-rotate(200deg)}

.who {flex-basis:50%;border-left:1px #eee solid;padding-left:30px}
.adv {flex-basis:50%;padding-right:30px}

.contact {background:url('img/contact.jpg') center center;background-size:cover;padding:40px 20px}
.contact h2 {color:#fff;text-align:center;padding-bottom:20px}
.contact figure {display:flex}
.contact fieldset {padding:10px;flex-grow:1}
.contact fieldset.submit {flex-grow:0}
.contact input {width:100%;padding:10px;box-sizing:border-box;font-size:1.1em}
.contact input[type=submit] {background: linear-gradient(to right,#f06c01, #f04e01);color:#fff;padding:10px 30px;font-weight:bold;}

.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}
footer .h {display:flex;justify-content:space-between;align-items:center}
footer a {color:#fff}
.open-contact {background: linear-gradient(to right,#f06c01, #f04e01);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,#f06c01, #f04e01);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}
    .header_open_form img {filter:hue-rotate(200deg)}
    .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}
}