/*
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;vertical-align:top;text-decoration:none;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,input {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;font-family:'Assistant',arial;padding:50px 0 0 0}
div.wpcf7-validation-errors {display:none!important;}
.h {margin:0 auto;position:relative;max-width:1200px}

.header {position:fixed;top:0;right:0;z-index:500;width:100%;padding:0 20px;box-sizing:border-box;background-color:#f2f2eb;height:50px}
.header_side {background-color:#0072bc;color:#fff;padding:5px 30px;font-weight:bold;font-size:1.4em;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}

.blink_me {
  animation: blinker 2s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

.custom-logo-link {position:relative;z-index:2}
.custom-logo-link img {max-height:80px;width:auto}
.header_phone {position:absolute;top:50%;left:20px;font-weight:bold;transform:translateY(-50%);color:#333;fill:#ec202f;font-weight:bold;font-size:1.5em}
.header_phone svg {height:1em;width:1em;vertical-align:middle}

.hello {padding:200px 20px;text-align:center;background-size:cover;background-position:center center}
.hello h1 {color:#fff;display:inline-flex;flex-direction:column}
.hello strong {font-weight:normal;background-color:#000;padding:3px 20px;font-size:1.2em}
.hello span {background-color:#ec202f;padding:3px 20px}

.slogan {background-color:#07112b;padding:10px 20px;text-align:center;color:#fff;font-size:2em}

.content {background-color:#262c3c;color:#fff;padding:40px 20px}
.content li {position:relative;font-size:1.5em;padding:0 2.3em 1em 0}
.content li:before {content:'';background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNlYzIwMmYiIHdpZHRoPSI4NiIgaGVpZ2h0PSI4NiIgdmlld0JveD0iMCAwIDg1LjUgODUuOSI+PHBhdGggZD0iTTgxLjggOS43QzY4LjEgMjAuOCA1NS4zIDMyLjkgNDMuMyA0NS44Yy00LjYtNC4xLTkuMi04LjItMTQtMTIuMSAtMC4zLTAuMy0xLjEgMC4xLTEuNyAwLjcgLTAuNiAwLjYtMSAxLjQtMC43IDEuN2wwLjEgMC4xYzQuNiA1LjcgOS40IDExLjIgMTQuMyAxNi41aDBjMS4yIDEuMyAzLjIgMS40IDQuNSAwLjJsMC4yLTAuMmMxMy43LTEyLjYgMjYuNi0yNi4xIDM4LjQtNDAuNiAwLjItMC4zLTAuMS0xLjEtMC43LTEuOEM4Mi45IDkuNyA4Mi4xIDkuNCA4MS44IDkuN0w4MS44IDkuN3oiLz48cGF0aCBkPSJNMS45IDU1LjRjMS41IDQuNiAzLjcgOSA2LjUgMTIuOSA4LjcgMTEuOSAyMi44IDE4LjUgMzcuNSAxNy41IDE0LjctMSAyNy44LTkuNSAzNC43LTIyLjUgNC40LTguMyA1LjgtMTcuOSA0LjEtMjcuMiAtMC4xLTEtMS0xLjgtMi0xLjcgLTAuOSAwLjMtMS41IDEuMi0xLjQgMi4ydjAuMyAwYzAuOCA4LjQtMS4xIDE2LjgtNS40IDI0QzcxLjcgNjggNjUuMSA3My40IDU3LjQgNzYuNGMtNy42IDIuOS0xNiAzLjItMjMuOSAwLjlDMjUuOCA3NSAxOSA3MC4yIDE0LjIgNjMuN2MtOS44LTEyLjktOS4yLTMyLjQgMS4zLTQ1QzIwLjggMTIuMiAyOCA3LjcgMzYgNS44YzguMi0xLjkgMTYuOS0xLjEgMjQuNiAyLjQgMC45IDAuNCAyIDAuMiAyLjUtMC43IDAuMi0wLjUgMC4yLTEgMC0xLjVzLTAuNi0wLjgtMS0xbC0wLjMtMC4xdjBDNTMuNSAwLjQgNDMuOS0xIDM0LjYgMC43Yy05LjUgMS44LTE4LjEgNi44LTI0LjQgMTQuMUM0IDIyLjIgMC40IDMxLjQgMCA0MS4xIC0wLjEgNDUuOSAwLjUgNTAuNyAxLjkgNTUuNEwxLjkgNTUuNHoiLz48L3N2Zz4=);width:1.5em;height:1.5em;background-size:cover;position:absolute;top:0;right:0}

nav {display:none;text-align:center;align-items:center;margin:40px 0}
nav a {flex-basis:50%;padding:10px;color:#fff;fill:#fff;font-weight:bold;font-size:1.4em;flex-grow:1}
nav a[href*='tel'] {background-color:#0072bc;display:none}
nav a[href*='tel'] span {display:none}
nav a[href*='branches'] {background-color:#ec202f;display:none}
nav img {height:1.4em;margin-left:10px}

.home_content {display:flex}
.home_content > div {flex-basis:50%}

.branches {display:flex;flex-wrap:wrap;text-align:center}
.branches a {flex-basis:calc(33% - 10px);margin:5px;background-size:cover;background-position:center center;padding:30px;color:#fff;box-sizing:border-box;font-weight:bold;position:relative}
.branches a:before {content:'';position:absolute;top:0;right:0;width:100%;height:100%;background-color:rgba(0,0,0,.6);z-index:1;text-shadow:0 0 5px rgba(0,0,0,.7)}
.branches span {z-index:1;position:relative}

.theform {padding:40px 0;margin:0 auto;max-width:600px}
.theform h3 {color:#fff;font-weight:900;display:block;text-align:center;font-size:1.3em}
.wpcf7 figure {display:flex}
.wpcf7 fieldset {flex-basis:33.33%;flex-grow:1;padding:5px}
.wpcf7 input,.wpcf7 textarea {width:100%;box-sizing:border-box;padding:10px;font-size:inherit;font-family:inherit;max-height:60px}
.wpcf7 input[type=submit] {background-color:#ec202f;color:#fff}

.popup {background:#c22114;box-shadow:0 0 10px rgba(0,0,0,0.9);margin:auto;position:relative;border-radius:5px;max-width:300px;padding:10px 0}
.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}
.popup a {text-align:center;font-weight:bold;display:block;padding:10px 20px;color:#fff;border-top:1px rgba(255,255,255,.4) solid}
.popup a:first-child {border:0}
.popup .mfp-close {color:#fff}

.contact {display:flex;flex-wrap:wrap;color:#fff;text-align:center;background-color:#262c3c;justify-content:center}
.contact h2 {flex-basis:100%;background-color:#07112b;padding:10px 20px;font-weight:normal}
.contact_item {padding:20px;box-sizing:border-box;border-right:1px #1e2330 solid;font-size:1.4em;color:inherit}
.contact_item:first-child {border:0}
.contact_item img {display:block;margin:0 auto 10px auto;height:3em}
.contact_item span {display:block}
.contact_item a {display:block;color:inherit}
a.contact_item {display:none}

.map {position:relative;padding-top:30%;height:0}
#map-canvas {position:absolute;top:0;width:100%;height:100%;right:0}

.branch_call {background-color:#0072bc;color:#fff;display:none;padding:20px;text-align:center;font-size:1.4em;font-weight:bold}
.branch_call svg {fill:#fff;height:1.3em}

.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}

@media (max-width:800px) {
    body {padding-top:50px}
    .hello {background-position:bottom center!important;padding:150px 20px}
    .header {height:50px;padding:0 5px}
    .header_side {font-size:.9em;padding:5px 50px 5px 5px;left:5px;transform:translateY(-50%)}
    .header_phone {display:none}
    .home_content {flex-direction:column}
    .branch_call,a.contact_item {display:block}
    .map {padding-top:50%}
    nav {position:fixed;bottom:0;right:0;width:100%;margin:0;z-index:100;display:flex}
    nav a[href*='branches'],nav a[href*='tel'] {display:block}
    .branches {display:none}
    .custom-logo-link img {width:105px;height:auto}
    .hello h1 {font-size:1.2em}
    .slogan {font-size:1.1em}
    .content li {font-size:1.2em}
    nav a {font-size:1.1em}
    .contact_item {font-size:.8em;flex-basis:48%}
    .contact_item img {height:2em}
}