/*
 Theme Name:   YPV
 Theme URI:    
 Description:  YPV Wordpress Theme
 Author:       Rhys Edwards
 Author URI:   
 Template:     
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  
*/

@import url("https://use.fontawesome.com/releases/v5.8.1/css/all.css");

* {
    box-sizing: border-box;
    font-family: 'Open Sans', sans-serif;
}

a:link {
    text-decoration: none;
}

.container {
    max-width: 1740px !important;
    margin: auto !important;
    padding-left: 62px;
    padding-right: 60px;
}

.container-small {
    max-width: 1600px !important;
    margin: auto !important;
    padding-right: 30px;
    padding-left: 30px;
}

.container-smaller {
    max-width: 80% !important;
    margin: auto !important;

}

.container-tiny {
    max-width: 1270px !important;
    margin: auto !important;
    padding-right: 20px;
    padding-left: 20px;

}

.right-menu {
    list-style: none;
    display: inline-block;
    margin: 0px;
    padding: 0px;
}

.right-menu li {
    display: inline-block;
}

.right-menu .subscribe-now {
    padding: 10px 15px;
    background: #BDD542;
    color: white;
    display: block;
}

.right-menu img {
    margin-left: 30px;
    height: 35px;
}

.navbar {
    border-bottom: 0.5px solid #CACED0;
    margin-bottom: 15px;
    padding: 0px;
}

.hero-row {
    height: 400px;
}

.hero-front {
    height: 681px;
    max-height: 681px;
    width: 100%;
    background-repeat: no-repeat;
}

.hero-front-text {
    display: table-cell;
    vertical-align: middle;
    padding-top: 5vw;
    padding-bottom: 5vw;

}

.hero-front-text h1 {
    font-size: 4.0vw;
    font-family: 'Quicksand', sans-serif;
    color: #5B686D;
    line-height: 85px;

}

.hero-front-text p {
    font-size: 27px;
    padding: 11px 0px 0px 0px;
    color: #5B686D;
    font-weight: lighter;
    width: 80%;
background: rgba(255, 255, 255, 0.67);
    box-shadow: 0px 0px 20px 20px rgba(255, 255, 255, 0.65);
}




.double-box-text {
    padding: 60px 0px;
}

.page .double-box-image img {
    max-width: 480px;
    padding: 0px;
    display: block;
    margin: -50px auto 0px auto;
}

.home .double-box-image img {
    width: 100% !important;
    max-width: 605px !important;
    padding: 50px !important;
    margin: 0px !important;
}

.dropdown-toggle::after {
    display: none;
}

.dropdown-toggle-ellipsis::after {
    display: inline-block;
    padding: 0;
    font-family: FontAwesome;
    content: "\f078";
}

.dropdown-toggle-ellipsis::before {}


.nav-link {
    display: inline-block;
}

.page .double-box-text p {
    font-size: 21px !important;
}

.findoutmore {
    background: #F29100;
    padding: 15px 35px;
    color: white;
    display: inline-block;
    font-size: 20px;
}

h2 {
    color: #87C846;
    font-size: 48px;
    font-weight: 300;
}

.double-box-text .findoutmore {
    font-size: 17px;
    padding: 15px 64px;
}

.double-box-text p {
    color: #949CA0;
    font-size: 33px;
    font-weight: lighter;
    padding: 36px 0px;

}

.double-box-image img {
    width: 100%;
    max-width: 605px;
    padding: 50px;
}

.qoute {
    font-size: 47px;
    font-family: 'Quicksand', sans-serif;
    text-shadow: 0px 0px 8px black;
    color: white;
    position: absolute;
    bottom: 0px;
    right: 0;
    font-weight: 500;
    line-height: 68px;
    margin-bottom: 70px;
}

.logo {
    padding: 20px 0px;
    width: 226px;
    margin-right: 10px;
}

.navbar-nav .menu-item {
    padding: 0px 30px;
    color: #949CA0;
}

.learnmore {
    border-bottom: 1px solid #CACED0;
}

.learnmore .card {
    max-width: 400px;
    margin: auto;
    border: none;
}

.learnmore .img-wrap img {
    width: 100%;
    object-fit: cover;
    height: 300px;
}

.learnmore .img-wrap {
    width: 100%;
    max-height: 300px;
    overflow: hidden;
}

.learnmore > div {
    margin-bottom: 30px;
}

.learnmore .card-title {
    text-align: center;
    color: #949CA0;
    font-size: 24px;
}

.learnmore .card-body {
    background: #EFF0F1;
    height: 172px;
}

.learnmore .btn {
    background: #F29100;
    border: none;
    border-radius: 0px;
    padding: 11px 26px;
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 16px;
}

.textlarge {
    font-size: 20px;
    font-weight: lighter;
}

.howitworks {
    background: #EFF0F1;
    padding: 60px;
    margin-bottom: 60px;
}

.howitworks .col .wrap {
    background: #DFE0E2;
    border-radius: 10px;
    padding: 20px;
    width: 90%;
    position: relative;
}

.wrap-right {
    float: right;
}

.howitworks .col .wrap-right:after,
.howitworks .col .wrap-right:before {
    right: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.howitworks .col .wrap-right:after {
    border-color: transparent;
    border-right-color: #DFE0E2;
    border-width: 30px;
    margin-top: -30px;
}

.howitworks .col .wrap-right:before {
    border-color: transparent;
    border-right-color: #DFE0E2;
    border-width: 36px;
    margin-top: -36px;
}


.howitworks .col .wrap-left:after,
.howitworks .col .wrap-left:before {

    left: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.howitworks .col .wrap-left:after {
    border-color: transparent;
    border-left-color: #DFE0E2;
    border-width: 30px;
    margin-top: -30px;
}

.howitworks .col .wrap-left:before {
    border-color: transparent;
    border-left-color: #DFE0E2;
    border-width: 36px;
    margin-top: -36px;
}

.howitworks .col p {
    color: #949CA0;
    font-weight: 300;
}

h3 {
    color: #D5DF66;
    font-size: 30px;
}

.testkit p span {
    font-size: 36px;
}

.testkit p {
    color: #5B686D;
    font-size: 25px;
}

.testkit ul {
    list-style-image: url('http://ypv.idmdesign.uk.com/wp-content/uploads/2020/06/bullet.png');
    padding-left: 23px;
    color: #949CA0;
    font-size: 18px;
    font-weight: lighter;
}

.darkgreen {
    color: #87C846 !important;
}

.feedback:before {
    content: url('http://ypv.idmdesign.uk.com/wp-content/uploads/2020/06/arrow.png');
    margin-left: -72px;
    position: absolute;

}

.feedback:after {
    content: url('http://ypv.idmdesign.uk.com/wp-content/uploads/2020/06/arrow.png');
    position: absolute;
    margin-right: -72px;
}

.feedback span {
    color: #7bb740;
    font-size: 0.85vw;
    overflow-wrap: break-word;
}

.commitment {
    background: url('http://ypv.idmdesign.uk.com/wp-content/uploads/2020/06/commitment-3.png');
    height: 600px;
    width: 100%;
    display: block;
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.commitment .col {
    background: white;
    padding: 40px;
    text-align: center;
    height: 402px;
}

.commitment .col .inside {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 295px;
}

.science p {
    color: #949CA0;
}

.science img {
    max-height: 596px;
}

.inner {
    padding: 3vw 1vw 2vw 5vw;
}

.footer .nav-link {
    color: #AFB0B3 !important;
}

.navbar-light .navbar-nav .active > .nav-link {
    color: #949CA0 !important;
}

.navbar-light .navbar-nav .active > .nav-link:hover {
    color: black;
}

.commitment p {
    font-size: 21px;
    font-weight: lighter;
    color: #949CA0;
}

#wpcf7-f34-o2,
#wpcf7-f34-o2 label,
.footer-form .wpcf7-text,
.footer-form textarea {
    width: 100%;
    color: #949CA0;
}

input,
textarea {
    border: 1px solid #949CA0;
}

textarea {
    height: 168px;
    font-size: 18px;
    padding: 11px;
}

.content img {
    height: 47px;
}

.footer-form .wpcf7-submit {
    width: 219px;
    color: white;
    font-size: 19px;
    padding: 4px;
    border: none;
    background: #BDD542;
    display: block;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 40px;
}

.subscribe .wpcf7-submit {
    width: 230px;
    color: white;
    font-size: 18px;
    padding: 10px;
    border: none;
    background: #BDD542;
    display: block;
    margin: auto;
}

.subscribe .try a {
    width: 100%;
    color: white;
    font-size: 18px;
    padding: 10px;
    border: none;
    background: #F29100;
    display: block;
    margin: auto;
    text-align: center;
}

.subscribe .try a {
    color: white;
    text-decoration: none;
}

.footer-form .wpcf7-text {
    padding: 8px;
    font-size: 18px;
}

#wpcf7-f34-o1 {
    display: inline-flex;
    width: 100%;
}

.subscribe .wpcf7-text {
    padding: 10px 10px 10px 20px;
    font-size: 18px;
}

.subscribe .wpcf7 {
    width: 600px;
}

.subscribe input {
    width: 100%;
}

.subscribe form {
    max-width: 600px;
    width: 100%;
}

.subscribe .wpcf7-form-control-wrap {
    display: block;
    margin: 25px 0;
}

.subscribe p {
    font-size: 24px;
    color: #949CA0;
    font-weight: lighter;
}

.footer-form ::-webkit-input-placeholder {
    font-size: 18px;
    color: #949CA0;
    padding: 0px;
    margin: 0px;
    font-weight: lighter;
}

.subscribe ::-webkit-input-placeholder {
    font-size: 18px;
    color: #949CA0;
    padding: 0px;
    margin: 0px;
    font-weight: lighter;
}

.subtext {
    font-size: 24px;
    color: #949CA0;
    font-weight: lighter;
}

.footer {
    background: #EFF0F1;
}

.subscribe {
    background: #F3F9EC;
}

.hero {
    background-repeat: no-repeat;
    width: 100%;
    background-size: cover;
    background-position: center;
    height: 520px;
    position: relative;
}


.hero h1 {
    color: white;
    font-size: 5vw;
    line-height: 110px;
    font-family: 'Quicksand', sans-serif;

    text-shadow: 0px 3px 6px #00000029;
}

.hero-heading {
    position: absolute;
    top: 56%;
    left: 54%;
    transform: translate(-50%, -50%);
    text-align: left;
    word-break: break-word;
    width: 90%;
}

.wpcf7-form {
    width: 790px;
    margin: auto;
}

.hero-col {
    height: 450px;
    max-height: 450px;
}

video {
    max-width: 100%;
    width: 1000px;
    display: block;
    margin: auto;

}

#blogs .blog {
    border-top: 0.5px solid #CACED0;
    padding: 20px 0px;
}

.image-wrap img {
    max-width: 500px;
    width: 100%;
    height: auto;
}

.content a {
    color: white;
    background: #F29100;
    padding: 10px;
    display: inline-block;
}

.excerpt {
    color: #949CA0;
    font-size: 20px;
    font-weight: lighter;
    display: block;
}

*::-webkit-media-controls-start-playback-button {
    display: none !important;
    -webkit-appearance: none;
}

video::-webkit-media-controls {
    opacity: 0;
}

.heretohelp {
    background: #F3FAEC;
}

.heretohelp .findoutmore {
    font-size: 16px;
    background: #BDD542;
    padding: 9px 59px;
}

.heretohelp p {
    font-size: 24px;
    font-weight: lighter;
    color: #5B686D;
}

.find-subscribe {
    border-top: 0.5px solid #CACED0;
    border-bottom: 0.5px solid #CACED0;
}

.find-subscribe a {
    font-size: 24px;
    background: #BDD542;
    padding: 9px 30px;
    color: white;
}

.dropdown-menu .menu-item {
    padding: 5px 0px !important;
}

.subscribe .try a:hover,
.content a:hover,
.card-body .btn-primary:hover {
    background: white !important;
    color: #F29100 !important;
    transition: all 0.3s ease !important;
    text-decoration: none;
}

.find-subscribe a:hover,
.wpcf7-submit:hover,
.subscribe-now:hover,
.findoutmore:hover {
    color: #BDD542;
    background: white;
    transition: all 0.3s ease !important;
    text-decoration: none;
}

.find-subscribe a,
.wpcf7-submit,
.subscribe-now,
.findoutmore {
    transition: all 0.3s ease !important;

}

/*** accordion  ***/


/*******************************
* ACCORDION WITH TOGGLE ICONS
* Does not work properly if "in" is added after "collapse".
*******************************/

.panel-group {
    max-width: 100%;
    margin: auto;
}

.panel-group .panel {
    border-radius: 0;
    box-shadow: none;
    border-top: 0.5px solid #CACED0;
    margin: 0;
}

.panel-group .panel:nth-last-of-type(1) {
    border-bottom: 1px solid #CACED0;
}

.panel-default > .panel-heading {
    padding: 0;
    border-radius: 0;
    color: #212121;
    margin 0;
    background: white;
}

.panel-title {
    font-size: 24px;
    font-weight: lighter;
    color: #5B686D;
}

.panel-title > a {
    display: block;
    padding: 39px 18px 36px 24px;
    text-decoration: none;
    color: #5B686D;
}

.fa-chevron-down {
    float: right;
    color: #5B686D;
}

.fa-chevron-up {
    float: right;
    display: none !important;
    color: #5B686D;
}

.panel-group .panel + .panel {
    margin: 0;
}

.panel-default {
    border: none;
}

.panel-default > .panel-heading + .panel-collapse > .panel-body {
    border: none;
    padding: 0px 53px 21px 25px;

}

.accordion p {
    color: #949CA0;
    font-size: 26px;
    font-weight: lighter;
    margin: 0px;
}

#rum_sst_tab {
    font-family: 'Open Sans', sans-serif !important;
    top: 140px;
    background-color: #F29100;
    color: #FFFFFF;
    border-style: solid;
    width: 160px;
    border-width: 0px;
    font-size: 20px;
    font-weight: normal;
    border-radius: 0px;
    transition: all 0.3s ease !important;
}

#rum_sst_tab:hover {
    text-decoration: none;
    background: white;
    color: #F29100;
    transition: all 0.3s ease !important;
}

.menu-item-has-children:hover .dropdown-menu {
    display: block;
}

.dropdown-menu {
    padding: 0px;
    margin-top: -6px;
}

.feedback div {
    width: 75%;
}


.qoute-wrap {
    height: 681px;
}

@media screen and (min-width: 1920px) {

    .hero h1,
    .hero-front-text,
    .hero-front-text h1 {
        font-size: 80px;
    }
    
    .feedback span {
        font-size: 16px;
    }
}


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

    .qoute {
        font-size: 40px;
    }

    h2 {
        font-size: 44px;
    }

    h3 {
        font-size: 23px;
    }

    .feedback div {
        width: 100%;
    }

}

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

    .qoute {
        display: block;
        position: relative;
        bottom: auto;
    }

    .commitment .col .inside {
        width: 381px;

    }

    .commitment p {
        font-size: 18px;
    }

    .howitworks .col .wrap-right:before,
    .howitworks .col .wrap-left:before,
    .howitworks .col .wrap-left:after,
    .howitworks .col .wrap-right:after {
        display: none;
    }

    .howitworks .col .wrap {
        width: 100%;
    }

    .feedback:after,
    .feedback:before {
        display: none;
    }

    .feedback span {
        font-size: 12px;

    }

    .hero-front {
        max-height: fit-content;
        height: auto;
        background-color: rgba(255, 255, 255, 0.6) !important;
        background-blend-mode: lighten;
    }

    .qoute-wrap {
        height: auto;
    }
}

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


    .wpcf7-form {
        padding: 40px;
    }

    .howitworks {
        padding: 30px;
    }

    .qoute {
        font-size: 30px;
    }

    .hero h1,
    .hero-front-text h1 {
        font-size: 40px;
    }

    .double-box-text .findoutmore {
        padding: 15px 24px;
    }

    .navbar {
        padding-bottom: 20px;
    }

    .container {
        padding-right: 10px;
        padding-left: 10px;
    }

    .hero,
    .hero-col {
        height: 200px;
    }

    .hero h1 {
        line-height: 60px;
    }
    
    .right-menu {
        margin: auto;
    }
    
    .right-menu:nth-last-of-type(1) {
        margin-top: 20px;
    }

}

@media (min-width: 1000px) and (max-width: 1200px) {
    .collapse {
        display: none !important;
    }
}