/* Theme Information */
/*
Theme Name: TT Basic
Theme URI: http://themetailor.co.za
Author: ThemeTailor
Author URI: http://themetailor.co.za
Description: Webanchor Boiler Plate Theme
Version: 2.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: themetailor
Tags: editor-style
*/

/* Reset */

html {
  scroll-behavior: smooth;
}

:root { 
    --white: #FFFFFF;
    --lightgreen: #e8e8e1;
    --green: #c6dfd5;
    --othergreen: #a0c9b9;
    --yellow: #f5da5f;
    --lightyellow: #f9e99f;
    --grey: #4D4D4D;
    --black: #000000;

}
* :focus { outline: none; /* Remove the dotted outline */  text-decoration: none; /* Ensure no underline */ outline: none !important; outline-offset: 0px !important; box-shadow: none!important; }

a, button {  transition: all 0.3s ease-in-out; color: #333; }

img { width: 100%; height: auto; }
body, h1, h2, h3, h4, h5, h6, p, ul, ol { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 { font-family: "Barlow Condensed", sans-serif; font-weight: 500; letter-spacing: .2px; }

h2 { font-size: 30px; margin: 0 0 30px; position: relative; letter-spacing: .5px; }
h2:after { border-bottom: 2px solid var(--black); content: ""; position: absolute; left: 0; right: 0; width: 70px; bottom: -10px; margin: 0 auto; }
p { margin-bottom: 20px; font-size: 18px;  }
body { background: #FFF; color: #333; font-family: "Figtree", sans-serif; font-size: 22px; line-height: 1.5; margin: 0 auto;  }

.alignwide, .alignfull { margin: 0 calc(50% - 50vw); max-width: 100vw; width: 100vw; }
.alignwide { max-width: 1030px; width: 1030px; margin: 0 auto; }


@media (max-width: 920px) {
    .alignwide {
        max-width: 920px;
        width: 100%
    }
}

span.pointy { cursor: pointer; }


.lesswide { width: 800px; margin: 0 auto; max-width: 100%; }

.container { width: 1030px; margin: 0 auto; max-width: 100%; }


.has-white-color { color: var(--white); }
.has-white-background-color { background-color: var(--white); }

.has-yellow-color { color: var(--yellow); }
.has-yellow-background-color { background-color: var(--yellow); }

.has-lightyellow-color { color: var(--lightyellow); }
.has-lightyellow-background-color { background-color: var(--lightyellow); }

.has-lightgreen-color { color: var(--lightgreen); }
.has-lightgreen-background-color { background-color: var(--lightgreen); }

.has-green-color { color: var(--green); }
.has-green-background-color { background-color: var(--green); }

.has-othergreen-color { color: var(--othergreen); }
.has-othergreen-background-color { background-color: var(--othergreen); }

.has-grey-background { color: var(--grey); }
.has-grey-background-color { background-color: var(--grey); }

.has-black-color { color: var(--black); }
.has-black-background-color { background-color: var(--black); }


.wp-block-button a { font-family: "Barlow Condensed", sans-serif; padding: 8px 25px 12px;  line-height: 1; border: 2px solid var(--black); }
.wp-block-button a:hover { color: var(--black)!important; text-decoration: none; background: var(--yellow)!important; cursor: pointer; }

.wp-block-button.download a { background: var(--yellow)!important; font-family: "Barlow Condensed", sans-serif; padding: 8px 25px 12px;  line-height: 1; border: 2px solid var(--black); }
.wp-block-button.download a:hover { color: var(--yellow)!important; text-decoration: none; background: var(--black)!important; cursor: pointer; }


.slick-dots li button { border: 1px solid #FFF; border-radius: 50%; width: 8px; height: 8px; }
.slick-dots li button:before { content: ""; }
.slick-dots li.slick-active button { background-color: #FFF; }


header { background: var(--black); color: var(--white); padding: 40px; width: 100%; z-index: 9999; box-sizing: border-box; }
header .headcontainer { display: flex; width: 1030px; margin: 0 auto; max-width: 100%; justify-content: space-between; }
header h1 {  }
header h1 a { background: url('img/logo-rospen.png'); width: 300px; height: 83px; background-size: 100%; text-indent: -9999px; display: block; }
header .halfcontainer { display: flex; justify-content: space-between; align-content: center; align-items: center; }
header nav ul {  display: flex; }
header nav ul li { margin-left: 20px; }
header nav ul li a { color: var(--white); text-decoration: none; font-size: 21px; }
header nav ul li a:hover, header nav ul li a:focus { color: var(--yellow); }



.yellowfoot {  }
.yellowfoot h3 { margin: 0; font-family: "Figtree", sans-serif; line-height: 1.2; font-weight: 400; }
.yellowfoot p { margin: 0; }
.yellowfoot .wp-block-columns { margin: 0; }


#meetourteam { overflow: visible; }

.whoweare { gap: 4em; }

.wp-block-button.download a:after { mask: url('img/download.svg'); content: ''; display: inline-block; mask-size: cover; width: 20px; height: 20px; margin-left: 5px; vertical-align: middle;  background-color: black; }
.wp-block-button.download a:hover:after { background-color: var(--yellow)!important; }

footer { padding: 50px 0 20px; background: black; color: white; }
footer .bottom { display: flex; justify-content: space-between; border-bottom: 1px solid #FFF; padding-bottom: 20px; margin-bottom: 20px; }
footer .bottom-left { font-family: "Barlow Condensed", sans-serif; font-size: 16px; font-weight: 300; }
footer .bottom-left .btn-linkedin { margin-right: 10px; }
footer .bottom-left .btn-linkedin span .fa-circle { color: #e8e8e2; }
footer .bottom-left .btn-linkedin span .fa-linkedin-in { color: var(--black); font-size: 22px; }
footer .bottom-left .btn-linkedin:hover span .fa-circle { color: var(--yellow); }

footer .bottom-left p { display: flex; line-height: 32px; margin: 0; }
footer a { color: var(--white); text-decoration: none; }
footer a:hover { color: var(--yellow); }
footer .bottom-right { color: var(--yellow); }
footer .site-info { font-size: 10px; text-align: center; }

#showmobi { display: none; cursor: pointer; text-align: center; font-size: 40px; margin-top: 15px; }

.popup { display: none; position: fixed; left: 0; top: 0; right: 0; bottom: 0; margin: auto; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); justify-content: center; align-items: center; z-index: 99999; }

.popup-content { box-sizing: border-box; max-width: 100%; background-color: var(--lightyellow); padding: 30px; border-radius: 20px; text-align: center; position: relative; border: 1px solid black; max-height: 90vh; height: fit-content; z-index: 999; width: 500px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; font-size: 15px; }
.popup-content  p { font-size: 15px; }
.close-button { position: absolute; right: 30px; z-index: 999999; top: 30px; cursor: pointer; display: block; width: 25px; height: 25px; }
.close-button:after { mask: url('img/open.svg'); content: ''; display: inline-block; mask-size: cover; width: 30px; height: 30px; background-color: var(--black);  }
.gform-body input, .gform-body textarea { border-radius: 10px; border: none; padding: 10px 20px!important; }

#gform_submit_button_1 { cursor: pointer; display: block; border: 1px solid black; background-color: var(--black); color: var(--white); text-transform: uppercase; padding: 10px 20px; border-radius: 25px; margin: 0 auto; }
#gform_submit_button_1:hover { background: var(--yellow); color: var(--black); }
.sticky { position: fixed; top: 0; width: 100%; }

header.sticky { padding: 10px ; }
header.sticky h1 a { width: 150px; height: 41px; }
header.sticky nav ul li a { font-size: 18px; }
.sticky + #content { padding-top: 61px; }

.gform_wrapper.gravity-theme .gform_validation_errors, #gform_1 #validation_message_1_1, #gform_1 .validation_message, #gform_1 .gform_validation_errors { 
    background-color: var(--yellow)!important; font-family: "Barlow Condensed", sans-serif!important; text-transform: uppercase!important; border: 1.5px solid #000!important; padding: 10px!important; border-radius: 15px!important; color: #000!important; font-size:  12px!important; }
.gform_wrapper.gravity-theme .gform_validation_errors h2:after { border-bottom: none; color: var(--black); }
.gform_wrapper textarea { height: 80px!important; }
.gform-body input, .gform-body textarea { padding: 5px 10px!important; }

body img.gform_ajax_spinner {
	display: none !important;
}

@media only screen and (max-width: 768px) {
    header { padding: 20px; display: block; }
    header.sticky { padding: 20px; }
    header .container { display: flex; }
    header .headcontainer { display: block; }
    header #primary { padding: 40px 0 20px; }
    header nav ul { display: block;  }
    #showmobi { display: block; width: 40px; transition: all 0.3s ease; background: url('img/menu.png'); height: 40px; background-size: 100%; margin-top: 0; }
    header nav ul li { padding: 0; margin: 0; }

    nav .menu-primary-menu-container { display: none; }
    header h1 a { width: 260px; height: 72px; margin: 0 auto; }
    footer { padding: 25px; text-align: center; }
    footer .bottom { display: block; }

    .maincover p { font-size: 24px!important; }
    .wp-block-button a { font-size: 18px; padding: 8px 15px; }
    #content { padding: 0 20px; }
    footer .bottom-left p { display: block; }
    footer .bottom-left p span { display: block; text-align: center; }

    #contact img { width: 60%; }
    #contact h3 { font-size: 24px!important; }
    .whoweare figure { text-align: center; margin:  0 auto; }
    .whoweare img { max-width: 60%; }
    footer .bottom-left .btn-linkedin { display: flex; align-content: center; justify-content: center; }
    #contact { text-align: center;  }
    #contact .wp-block-buttons { justify-content: center; }
  }