/*
Theme Name: Precinct
Theme URI: https://precinct.org.uk/
Author: Patryk Rozanski
Author URI: https://wordpress.org/
*/

/*Fonts*/

      @font-face {
    font-family: 'Swiss 721 Roman';
    src: url('./fonts/Swiss721BT-Roman.woff2') format('woff2'),
        url('./fonts/Swiss721BT-Roman.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Swiss 721 Bold';
    src: url('./fonts/Swiss721BT-Bold.woff2') format('woff2'),
        url('./fonts/Swiss721BT-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Swiss 721 Heavy';
    src: url('./fonts/Swiss721BT-Heavy.woff2') format('woff2'),
        url('./fonts/Swiss721BT-Heavy.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

            body, html {padding:0px; margin:0px;}
      
      
      * {
  box-sizing: border-box;
      -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    outline: 0;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
  background: #F8F6EA;
  font-family: 'Swiss 721 Roman';
  color: #003C45;
}
      
    	header,footer {background:#003C45; padding:50px 0px}
      
      header {text-align:center;position:relative; z-index:20}
      
      .container {padding:0px 70px;position:relative}
      footer {text-align:center;}
      header svg,footer svg {width:42px}
      
      header svg {
    position: absolute;
    right: 70px;
    top: 50%;
    margin-top: -21px;
            transition: all 0.3s ease-out;
      transform: rotate(0deg);
}
      
      .colwrap {
    display: flex;
    flex-wrap: wrap;
    min-height: 480px;
}

.coltext {
    width: 50%;
    margin-bottom: 0px;
    height: auto;
    display: flex;
          justify-content: center;
    align-items: center;
      background-size: cover;
          background-position: right;
          position: relative;
}
  
      h1, h2, h3, h4, h5, h6 {
        font-family: 'Swiss 721 Heavy';
    font-weight: normal !important;
}
      
.coltextwrap h2 {
    margin-top: 0px;
    font-size: 43pt;
    line-height: 38pt;
          margin-bottom: 30px;
          letter-spacing: -3px;
}
      


.coltext p:last-child {margin-bottom:0px !important;}

.coltextwrap {
    height: auto;
    position: relative;
      padding: 40px 60px 40px 60px;
    width: 100%;
      
}
      
      p {
    font-size: 19pt;
    line-height: 21pt;
      margin-bottom: 15px;
          margin-top: 0px;
              letter-spacing: -1px;

}
      
      p.special {
    font-size: 12pt;
    line-height: 19pt;
}
      
            p strong {
          font-family: 'Swiss 721 Heavy';
          font-weight: normal;
      }
      
      a.button {
    font-size: 12pt;
    text-decoration: none;
    font-family: 'Swiss 721 Heavy';
    font-weight: normal;
    line-height: 19pt;
    background: #d7684e;
    display: inline-block;
    color: #f8f6ea;
    padding: 7px 10px;
    border-radius: 5px;
    min-width: 205px;
}
      
      .textwrap {
    background: #4AC1AD;
    text-align: center;
    padding: 85px 60px 45px 60px;
      position:relative;
}
      
      .textwrap svg.sticker {
    width: 30px;
    margin-top: 45px;
}
      
h3 {
    color: #f8f6ea;
    font-size: 30pt;
    line-height: 31pt;
    margin: 0px 0px 15px 0px;
}
      
                  .strip {
    height: 13pt;
    background-image: url(./images/strip.webp);
    background-size: auto 100%;
    background-repeat: repeat no-repeat;
    margin-top: 0px;
    position: relative;
    z-index: 2;
      margin:20px 0px;
}
      
      .coltext svg.sticker {
    position: absolute;
    width: 30px;
    right: 30px;
    bottom: 30px;
}
      
      #strip {
    --offset: 0px;
    background-position: var(--offset) 0;
}
      
#overlay_menu {
    width: 100%;
    height: 100%;
    position: fixed;
    background: #013b45;
    z-index: 3;
    opacity: 0;
    top: 0px;
    left: 0px;
    pointer-events: none;
                  transition: all 0.3s ease-out;
}
      #overlay_menu.active {
      pointer-events:initial;
      opacity: 1;
      }

#overlay_menu .menu-main-menu-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 200px;
}
      
#overlay_menu .menu-main-menu-container ul.menu {
    list-style: none;
    padding: 0px;
    margin: 0px;
}

#overlay_menu .menu-main-menu-container ul li {
    padding: 5px 0px;
    font-size: 24px;
    text-transform: uppercase;
    text-align: center;
}

#overlay_menu .menu-main-menu-container ul li a {
    text-decoration: none;
    color: #f8f6ea;
    text-transform: uppercase;
    opacity: 1;
    transition: all 0.2s ease-out;
      font-family: 'Swiss 721 Roman';
    font-weight: 300;
}

#overlay_menu #socials {
    position: absolute;
    bottom: 30px;
        right: 50%;
        transform: translate(50%, 0%);
}

#overlay_menu #socials ul li {
    padding: 10px 10px;
    font-size: 19px;
    text-transform: uppercase;
    text-align: center;
    float: left;
}

#overlay_menu #socials ul li a {
    text-decoration: none;
    color: #0d1f2d;
    text-transform: uppercase;
    opacity: 1;
    transition: all 0.2s ease-out;
}

#overlay_menu #socials ul li a:hover, #overlay_menu .menu-main-menu-container ul li a:hover {
  opacity: 0.7;
}

#overlay_menu .menu-main-menu-container ul li.current-menu-item a {
    opacity: 0.7;
}

      header svg:hover,header svg.active {
cursor:pointer;
    transform: rotate(90deg);
}

.imglogo {
width: 182px;float:left;margin-right: 25px;margin-top: 3px;display: block;

}


.coltextwrap.values {padding: 120px 60px;}

      
       @media only screen and (min-width:1px) and (max-width:1500px){
      br {display:none}
     p.special br {display:block}
      }
              @media only screen and (min-width:1px) and (max-width:1200px){
.imglogo {
        width: 100px;
        margin-right: 0px;
        margin-top: 3px;
        float: none;
        display: block;
        margin-bottom: 8px;
    }

              }

             @media only screen and (min-width:1px) and (max-width:1100px){
      p {
    font-size: 17pt;
    line-height: 19pt;
}
      
      h3 {
    color: #f8f6ea;
    font-size: 26pt;
    line-height: 27pt;
      }
      
      }

                   @media only screen and (min-width:1px) and (max-width:780px){


.coltextwrap h2 {
    font-size: 38pt;
    line-height: 33pt;
}

.textwrap {
    padding: 65px 30px 35px 30px;
}

.coltextwrap.values {padding: 70px 40px;}

.coltextwrap {
    padding: 40px 40px 40px 40px;
}

p {
        font-size: 15pt;
        line-height: 17pt;
    }

        h3 {
        font-size: 20pt;
        line-height: 21pt;
    }

}

                   @media only screen and (min-width:1px) and (max-width:550px){

                    .coltext {
    width: 100%;
    min-height: 480px;
}

                    header {
    text-align: left;
                    }

                    .container {
    padding: 0px 40px;
                    }

header svg {
    right: 40px;
}

.coltext {
    min-height: 480px;
    width: 100%;
}

.swap .colwrap .coltext:first-child {
    order: 2;
}

.swap .colwrap .coltext:last-child {
    order: 1;
}

header img {
    height: 45px !important;
}


                   }