/*
 Theme Name:     Divi Child
 Theme URI:      https://www.elegantthemes.com/gallery/divi/
 Description:    Divi Child Theme 2023
 Author:         Bright Yellow
 Author URI:     https://brightyellow.com.au/
 Template:       Divi
 Version:        1.0.3
*/
 
 
/* =Theme customization starts here
------------------------------------------------------- */

/* DOCUMENT STYLES ********************************************************/

/* Ivy Presto Headline 100 Thin "ivypresto-headline", serif*/
/* Work sans 400 Regular "work-sans", sans-serif */
@import url("https://use.typekit.net/mnz4feh.css");


/* --- Variables **********/

:root {
font-size: 14px;

/* Color */
   --purple: #3b0545;
   --ivory: #fffff2;

/* Type */
   --ivy: 'ivypresto-headline', serif;
   --work: 'work-sans', sans-serif;
   --100: 100;
   --400: 400;


/* Sizing */

}

h1::selection,
h6::selection {
   background-color: #701A6F;
}
/* --- Global **********/
body {
   background-color: var(--purple);
   max-height: 100vh;
   overflow-y:hidden;
}

html {
}


/* TEXT STYLES ********************************************************/

/* --- Headings **********/
h1 {
   font-family: var(--ivy);
   font-weight: 100;
   font-size: 3.9rem;
   line-height: 1.1;
   max-width: 60vw;
   margin: 0 auto;
   text-wrap: balance;
}

h2 {

}

h3 {

}

h4 {

}

h5 {

}

h6 {
   font-family: var(--work);
   font-weight: 400;
   font-size: 1.6rem;
   text-transform: uppercase;
   letter-spacing: 1px;
}


/* --- Heading spacing combos **********/
h1 + h6 {
   margin-top: 25px;
}

/* --- Body **********/
p {}
a {}

/* --- Bullets **********/
ul {}
ul li {}
ul li strong {}
ul li:before {}

/* --- Buttons **********/



/* STRUCTURE STYLES ********************************************************/

/* --- Navigation **********/

/* --- Header **********/

/* --- Footer **********/

/* --- Hero **********/
.gentry---hero {
   background-color: transparent!important;
   width: 100vw;
   height: 100vh;
/*   padding-top:15vh!important;*/
}
.gentry---hero .et_pb_row {
   width: 100vw;
   max-width: 100vw;
}
.gentry---hero .et_pb_row .et_pb_column {
   width: 100vw;
   max-width: 100vw;
}
.hero---logo {
   width:100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   position: absolute;
   top: 10vh;
   
}
.hero---logo img {
   width: 200px;
   max-width: 400px;
}

/* --- Body **********/
.circleDiv {
   width: 300px;
   height: 600px;
   display: inline-block;
   position: absolute;
   right: 0;
   bottom: -5px;
   background-image: linear-gradient(to top, var(--purple) 50%, var(--ivory) 50%);
   background-size: 100% 200%;
   background-position: top;
   border-right:0px;
   border-bottom:0px;
   border-top-left-radius: 50vw;
   padding-top:2px;
   padding-left:2px;
   padding-bottom:0px;
}
.circleInner {
   width: 100%;
   height: 100%;
   display: inline-block;
   background-color: var(--purple);
   border-top-left-radius: 50vw;
}

/* --- General sections **********/
.body-row {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
}


/* Form bit */
.gentry-form-row {
   width: 100vw;
   max-width: 100vw;
   display: flex;
   flex-direction: column;
   justify-content: center;
   position: absolute;
   bottom:10vh;
   z-index: 99999;
}
.gentry-form-row .et_pb_code_inner {
   display: flex;
   justify-content: center;
}
.gentry-form {
   border:1px solid var(--ivory);
   display: inline-block;
   padding:8px 50px 8px 50px;
   border-radius: 50px;
   position: absolute;
   overflow:hidden;
   cursor:pointer;
}
.formbg {
   width: 100%;
   height: 100%;
   display: block;
   position: absolute;
   top: 0;
   left: -100%;
   background-color: var(--ivory);
   border-radius: 50px;
   transition:0.4s ease-out;
   z-index:1;
}
.formbg.hover {
   left:0;
   transition:0.4s ease-out;
}
.gentry-form .form-inner {
   font-family:var(--work);
   font-weight: 400;
   font-size: 1.1rem;
   color: var(--ivory);
   text-transform: uppercase;
   letter-spacing: 0.5px;
   transition: 0.4s ease;
   position: relative;
   z-index: 3;
}
.form-inner.hover {
   color: var(--purple);
   transition: 0.4s ease;
}
.linkedin {
   width: 40px;
   height: 40px;
   position: relative;
   right: -140px;
   background-image: url('/wp-content/themes/Divi-child/svg/Gentry-Rose-Advisory-Trusted-Advisor-Generational-Wealth-Brisbane-Queensland-Australia-LinkedIn.svg');
   background-size: 55%;
   background-repeat: no-repeat;
   background-position: center center;
   cursor: pointer;
   transition:0.25s ease;
}
.linkedin.color {
   background-image: url('/wp-content/themes/Divi-child/svg/Gentry-Rose-Advisory-Trusted-Advisor-Generational-Wealth-Brisbane-Queensland-Australia-LinkedIn-Outline.svg');
   transition:0.25s ease;
}
.mouseCircle {
   width: 35px;
   height: 35px;
   position: absolute;
   border:1px solid #701A6F;
   transition: 0.3s transform ease;
   border-radius: 50px;
   transform: translate(-50%, -50%) scale(1.0);
   transform-origin:center center;
   pointer-events: none;
   z-index: 2;
}
.mouseCircle.grow {
   transform:translate(-50%, -50%) scale(0.3);
   transition: 0.3s transform ease;
   background-color: #701A6F;
   transform-origin: center;
   z-index: 2;
   pointer-events: none;
   mix-blend-mode: multiply;
}
.wiper {
   position: fixed;
   width: 100vw;
   height:100vh;
   background-color: var(--ivory);
   top: 0;
   left: 0;
   z-index: 999;
   overflow:hidden;
}
.logoContainer {
   width: 100vw;
   height: 100vh;
   background-image: url(/wp-content/themes/Divi-child/svg/Gentry-Rose-Advisory-Trusted-Advisor-Generational-Wealth-Brisbane-Queensland-Australia-Main-Logo-Purple.svg);
   position: fixed;
   top: 0;
   z-index: 999;
   background-repeat: no-repeat;
   background-size:27%;
   background-position: 50% 50%;
}


input.wpcf7-submit.send-btn {
   font-family:var(--work);
   font-weight: 400;
   font-size: 1.1rem;
   color: var(--purple)!important;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   position: relative;
   background-image: linear-gradient(to right, var(--purple) 50%, var(--ivory) 50%);
   background-size: 205% 100%;
   background-position: center right;
   border:1px solid var(--ivory)!important;
   padding:10px 30px 10px 30px!important;
   border-radius: 50px;
   transition: 0.4s ease-out;
   margin-top:40px;
   cursor:pointer;
}
input.wpcf7-submit.send-btn:hover {
   transition: 0.4s ease-out;
   background-position: center left;
   color: var(--ivory)!important;
}

/* Contact form */
/*.contactForm-Row {
   transform: scaleY(0.0);
   transform-origin: center bottom; 
}
.contactForm-Row.show {
   transform: scaleY(1.0);
   transition: 1s transform linear;
   transform-origin: center bottom;
}*/

.contactForm-Row {
   position: absolute;
   bottom: 0;
   display: none;
}

/*Contact form styles*/
.outer-form input,
.outer-form textarea {
   background-color: transparent;
   font-family: var(--work);
   font-size: 1.1rem;
   color: var(--ivory)!important;
   border:0px;
   border-bottom:1px solid var(--ivory);
   border-radius: 0px;
   padding:0px!important;
/*   margin-bottom:20px!important;*/
   padding-bottom:5px!important;
   width: 100%!important;
}
.outer-form input::placeholder,
.outer-form textarea::placeholder {
   color: var(--ivory);
   font-size: 1.1rem;
   padding-bottom:5px!important;
}
.outer-form textarea { width:100%;height:100px; }
.inner-form > div {
   margin-bottom:20px;
}
.outer-form input:focus {
   border-bottom: 1px solid var(--ivory);
}


.closeBtn {
   display: inline-block;
   font-family: var(--work);
   width: 100%;
   height: auto;
   display: flex;
   justify-content: center;
   color: var(--ivory);
   text-transform: uppercase;
   letter-spacing: 0.5px;
   cursor:pointer;
   transition: 0.3s ease-out;
   margin-top: 20px;
}
.closeBtn:hover {
   opacity:0.5;
   transition: 0.3s ease-out;
}
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.sent .wpcf7-response-output {
   border:0px;
   margin-top: 0px;
   padding:0px;
}
.wpcf7-response-output {
   max-width: 335px;
   text-align: center;
   font-family: var(--work);
   font-size: 1rem;
   color: var(--ivory);
   line-height: 1.1;
}



/*.outer-form:after {
   content:'';
   display: inline-block;
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   background-color: black;
}*/
.wpcf7-form {
   position: relative;
}
/*.outerformdiv {
   position: absolute;
   top: 0;
   width: 100%;
   height: 100%;
   background-color: black;
   display: inline-block;
}
*/
.contactForm {
   height: 100vh;
   top: 0;
   position: relative;
   display: flex;
   flex-direction: column;
   justify-content: center;
   padding-top: 15vh;
   opacity:0;
}

/* please fill out this field */
span.wpcf7-not-valid-tip {
   color: var(--ivory);
   font-size: 1rem;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   opacity: 0.6;
}



/****************************************** BREAKPOINTS ******************************************/

@media screen and (max-width: 1040px) {

   h1 {font-size: 3.6rem;}
   .logoContainer{background-size: 35%}


}




@media screen and (max-width:768px) {
   

   h1 {font-size: 3.4rem;max-width:80vw;}
   h6 {font-size: 1.4rem;}
   .circleDiv {display: none}
   .logoContainer{background-size: 50%;}
   .hero---logo img {width: 170px;}

}
@media screen and (max-width: 490px) {
   h1 {font-size: 2.1rem;}
   h6 {font-size: 1.2rem}
   .hero---logo {top: 0vh;}
   .logoContainer {background-size: 70%;}
}


@media screen and (min-width: 1675px) {
   h1 {font-size: 5.5rem!important;}
   .logoContainer{background-size: 17%}
   .circleDiv{width: 400px;height: 700px;}
}

@media screen and (min-width:1300px) {
   h1 {font-size: 4.5rem;}
}

@media screen and (max-device-width: 768px) {
   body {cursor:none;}
   .mouseCircle {display: none;}
   .contactForm{padding-top: 25vh;}
}