/* 
Theme Name:		 banstead-portal
Theme URI:		 http://childtheme-generator.com/
Description:	 banstead-portal is a child theme of  Twenty Twenty, created by ChildTheme-Generator.com
Author:			 isonmedia
Author URI:		 http://childtheme-generator.com/
Template:		 twentytwenty
Version:		 1.0.0
Text Domain:	 banstead-portal
*/



/*------------------------------
FONTS
------------------------------*/
  @import url("https://use.typekit.net/gwt2oxh.css");

@font-face{font-family:"portal";src:url("fonts/portal.eot");src:url("fonts/portal.eot?#iefix") format("embedded-opentype"),url("fonts/portal.woff2") format("woff2"),url("fonts/portal.woff") format("woff"),url("fonts/portal.ttf") format("truetype"),url("fonts/portal.svg#font") format("svg");font-weight:normal;font-style:normal;}@media screen and (-webkit-min-device-pixel-ratio:0){@font-face {font-family: "portal";src: url("fonts/portal.svg#portal") format("svg");}}[data-icons8]:before{content:attr(data-icons8);}.icons8-pass-fail:before,.icons8-news:before,.icons8-speech-bubble:before,.icons8-facebook-f:before,.icons8-facebook:before,.icons8-twitter:before,.icons8-mailing:before,.icons8,[data-icons8]:before{display:inline-block;font-family:"portal";font-style:normal;font-weight:normal;font-variant:normal;line-height:1;text-decoration:inherit;text-rendering:optimizeLegibility;text-transform:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-smoothing:antialiased;}.icons8-pass-fail:before{content:"\f100";}.icons8-news:before{content:"\f101";}.icons8-speech-bubble:before{content:"\f102";}.icons8-facebook-f:before{content:"\f103";}.icons8-facebook:before{content:"\f104";}.icons8-twitter:before{content:"\f105";}.icons8-mailing:before{content:"\f106";}


/*------------------------------
GENERAL
------------------------------*/
body{
    font-family: proxima-nova, sans-serif;
}
.col-centered {
  float: none!important;
  margin: 0 auto!important; }

body p{
    font-size: 18px;
    line-height: 26px
}

body li{
    font-size: 18px;
    line-height: 26px
}

body a{
    color: #00adad
}
.mb-30{
    margin-bottom: 30px!important
}

/*------------------------------
BUTTONS
------------------------------*/


a.btn-white-transparent{
    background: #fff;
    border: 2px solid #fff;
    padding: 15px 20px;
    border-radius: 50px;
    text-align: center;
    color: #19215a;
    transition: all 0.3s ease; 
    font-size: 22px;
    display: inline-block
}

a.btn-white-transparent:hover{
    background: none;
    border: 2px solid #fff;
    color: #fff
}



/*------------------------------
HEADERS
------------------------------*/

h1.dark{
    font-family: museo-slab, serif;
font-weight: 300;
font-style: normal;
font-size: 56px;
    line-height: 60px;
    color: #333;
    position: relative;
    z-index: 20;
    margin-bottom: 30px;
}

h1.light{
    font-family: museo-slab, serif;
font-weight: 300;
font-style: normal;
font-size: 56px;
    line-height: 60px;
    color: #fff;
    position: relative;
    z-index: 20;
    margin-bottom: 30px;
}


h2.dark{
    font-family: museo-slab, serif;
font-weight: 300;
font-style: normal;
font-size: 42px;
    line-height: 50px;
    color: #333;
    position: relative;
    z-index: 20;
    margin-bottom: 30px;
}


h2.light{
    font-family: museo-slab, serif;
font-weight: 300;
font-style: normal;
font-size: 32px;
    line-height: 36px;
    color: #fff;
    position: relative;
    z-index: 20;
    margin-bottom: 30px;
}


/*------------------------------
NAVIGATION
------------------------------*/

#header {

    background: #00d7d7;
    padding: 15px 30px
}
.logo img{
    width: 80px
}
.mobile-nav{
    display: inline-flex!important;
    position: relative
}


li.menu-item a{
    text-decoration: none!important
}
ul.primary-menu{
    display: none
}
.primary-menu a{
    color: #fff!important;
    font-size: 20px;
    font-weight: 400
}

li.register a, .mobile-menu li.register a, li.take-part a, .mobile-menu li.take-part a{
    background: #ffd54e;
    border: 2px solid #ffd54e;
    padding: 15px 20px;
    border-radius: 50px;
    text-align: center;
    color: #19215a!important;
    transition: all 0.3s ease;    
}

li.register a:hover, .mobile-menu li.register a:hover{
    background: #19215a;
    border: 2px solid #19215a;
    color: #fff!important
}

li.login a, li.logout a, .mobile-menu li.logout a{
    background: none;
    border: 2px solid #fff;;
    padding: 15px 20px;
    border-radius: 50px;
    text-align: center;
    color: #fff!important;
    transition: all 0.3s ease;    
}

li.login a:hover, li.logout a:hover, .mobile-menu li.logout a:hover{
    background: #fff;
    border: 2px solid #fff;
    color: #19215a!important
}




.mobile-menu li.logout a, .mobile-menu li.login a{
    background: #00d7d7;
    border: 2px solid #00d7d7;;
    padding: 15px 20px;
    border-radius: 50px;
    text-align: center;
    color: #fff!important;
    transition: all 0.3s ease;    
}

ul.primary-menu{
    display: none
}
.modal-menu li.logout{
    border: 0!important
}



.primary-menu > li{
    margin: 0.8rem 0 0 2.5rem
}

.mobile-nav i{
    font-size: 32px;
    color: #fff!important
}
.mobile-nav span.toggle-text{
    color: #fff!important;
    font-size: 16px!important;
    margin-top: 5px;
    font-weight: 400
}


.mobile-menu ul li a{
    color: #00d7d7!important;
    text-decoration: none;
    font-weight: 400!important
}
.modal-menu li{
    border-bottom: 1px solid #ececec!important;
    border-width: 0
}
.menu-modal nav{
    border: 0
}

/*------------------------------
HP BANNER
------------------------------*/

.slide {
    position: relative;
    background: #00d7d7;
    padding: 0 0 200px 0
}

.slide:after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    height: 0;
    border-right: 100vw solid #fff;
    border-top: 200px solid transparent;
    width: 0;
    z-index: 0;
}

.slide .content-bottom {
    padding-top: 30px;
    position: relative;
    z-index: 1;
}

.slide .content-bottom h2 {
    font-size: 90px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    line-height: 90px;
}

.slide .content-bottom p {
    color: #fff;
     font-size: 22px;
    line-height: 30px;
}

.slide-image{
    display: none
}
@media (max-width: 1366px) {
    .slide .content-bottom {
        padding-top: 170px;
    }
}

@media (min-width: 992px) {
    .slide .content-bottom img {
        max-width: 400px;
    }
}

@media (max-width: 768px) {
    .slide .content-bottom h2 {
        font-size: 60px;
        line-height: 60px;
    }
}

/*------------------------------
    MAIN BANNER
------------------------------*/
.slide h1{
    font-family: museo-slab, serif;
font-weight: 300;
font-style: normal;
font-size: 56px;
    line-height: 60px;
    color: #fff;
    position: relative;
    z-index: 20
}

span.highlight {
  background: linear-gradient(to top, #ffd54e 0%, #ffd54e 100%) no-repeat bottom left / 100% 20px;
}
span.highlight-green {
  background: linear-gradient(to top, #06d1d1 0%, #06d1d1 100%) no-repeat bottom left / 100% 20px;
}



/*------------------------------
INTRO
------------------------------*/
.intro p{
    font-size: 18px;
    color: #333;
    line-height: 26px
}

/*------------------------------
HELP
------------------------------*/
.help{
    padding: 60px 15px 30px 15px;
    background: #f0f3f8
}

.help-box{
    background: #fff;
    padding: 30px
    
}

.help-box i{
    font-size: 72px;
    color: #00d7d7;
}

.help-box h3{
    font-family: museo-slab, serif;
font-weight: 300;
font-style: normal;
font-size: 32px;
    line-height: 36px;
    color: #333;
    position: relative;
    z-index: 20;
    margin-bottom: 30px;
    border-left: 10px solid #ffd54e;
    padding-left: 15px;
}


.help-box ul {
    list-style: disc;
    margin-left: 0;
    padding-left: 35px;
}

.help-box ul li{
    list-style: disc;
    margin-left: 0;
    padding-left: 0;
}
.help-box ul li a{
    color: #00adad;
    display: block
}

.help-box ul li date{
    color: #666;
    font-size: 13px;
}





/*------------------------------
SIGNUP
------------------------------*/


.take-part-wrapper{
    background: #e5e9f0;
     padding: 60px 15px
}


.signup{
    background: #00d7d7;
    padding: 60px 30px 40px 30px;
    border-radius: 3px;

}


.signup p{
    color: #fff;
}


.user-testing-form{
    padding-top: 15px
}

.nf-form-content  nf-fields-wrap{
    display: block
}
.nf-form-content input.ninja-forms-field{
    border-radius: 50px!important;
    border: 0!important
}

.nf-field-label label{
    margin: 0 15px 0 30px !important
}



label[for="nf-field-20"]{
    color: #fff;
    font-size: 16px!important;
    font-weight: 400!important;
}
#nf-field-21{
    background: #ffd54e;
    border: 2px solid #ffd54e;
    padding: 0 35px;
    border-radius: 50px;
    text-align: center;
    color: #19215a!important;
    transition: all 0.3s ease; 
    font-size: 18px;
    font-weight: 400;
    text-transform: none;
    width: 100%;
}

.nf-before-form-content{
    display: none
}

.user-testing-form .nf-error.field-wrap .nf-field-element:after{
    border-radius: 50px;
        top: 3px;
    right: 3px;
    bottom: 4px;
    height: 44px;
    width: 46px;
    line-height: 46px;
    font-size: 22px
}

.nf-error .nf-error-msg, .nf-error-msg, .ninja-forms-req-symbol{
    font-size: 18px;
}

#nf-field-20-container{
    margin-bottom: 0;
}


/*------------------------------
COMMENTS
------------------------------*/
.comments{
    padding: 60px 15px
}

h2.comment-reply-title{
        font-family: museo-slab, serif;
font-weight: 300;
font-style: normal;
font-size: 32px;
    line-height: 36px;
    color: #333;
    position: relative;
    z-index: 20;
    margin-bottom: 30px;
}
#reply-title{
    margin-bottom: 60px;
    }


.comment-reply-title small a{
    font-weight: 400;
     font-family: proxima-nova, sans-serif;
    font-size: 18px
}

.comment-body{
    border-left: 3px solid #ccc;
    padding-left: 15px;
}


span.fn{
    font-family: museo-slab, serif;
font-weight: 300;
font-style: normal;
font-size: 28px;
    line-height: 36px;
    color: #333;
}


.comment-content p{
        font-family: museo-slab, serif;
font-weight: 400;
font-style: normal;
font-size: 20px;
    line-height: 36px;
    color: #333;
}


a.comment-reply-link{
    border-radius: 50px;
    background: #00d7d7;
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    text-transform: none;
    padding: 10px 15px
}
.by-post-author{
    text-transform: none;
    font-weight: 400;
    font-size: 13px;
}


.comment-respond #submit{
       background: #ffd54e;
    border: 2px solid #ffd54e;
    padding: 15px 20px;
    border-radius: 50px;
    text-align: center;
    color: #19215a!important;
    transition: all 0.3s ease;  
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400
}
.comment-reply-title small a{
    display: block
}

.entry-content hr, hr.styled-separator{
background: linear-gradient(to left, #ddd calc(50% - 16px), transparent calc(50% - 16px), transparent calc(50% + 16px), #ddd calc(50% + 16px))
}
.entry-content hr::before, .entry-content hr::after, hr.styled-separator::before, hr.styled-separator::after{
    color: #ddd
}



/*------------------------------
FOOTER
------------------------------*/
#site-footer{
    background: #00d7d7
}

.footer-credits{
    display: inline-block
}
p.footer-copyright{
    color: #fff;
    font-size: 18px;
    font-weight: 400
}
#site-footer a{
    color: #fff
}

.footer-links{
    display: block
}
.footer-links a{
    display: block
}

/*------------------------------
INSIDE
------------------------------*/

.inside-header {
    background: #00d7d7;
    padding: 100px 15px 150px 15px
}


.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
    margin: 60px 15px
}



/*------------------------------
INSIDE PAGE
------------------------------*/

.inside-header h1{
    font-size: 60px
}

.main-content{
    padding: 30px 15px 60px 15px
}

.main-content p{
    color: #333!important
}

.main-content h1{
    margin: 30px 0
}


/*------------------------------
FORM
------------------------------*/
.form{
    padding: 30px 0;
}



.nf-form-content{
    padding: 0!important;
    max-width: none!important
}

.nf-form-content nf-fields-wrap{
    display: block!important
}

.nf-field .nf-field-label label{
    margin: 0 0 0 0!important;
    
font-weight: 400;
font-style: normal;
font-size: 20px;
    line-height: 32px;
}
.nf-form-content hr.ninja-forms-field{
    margin: 15px 0 30px 0
}

#ninja_forms_required_items, .nf-field-container{
    margin-bottom: 40px!important
}



.form h2.dark{
    font-family: museo-slab, serif;
font-weight: 300;
font-style: normal;
font-size: 32px;
    line-height: 36px;
    color: #333;
    position: relative;
    z-index: 20;
    margin-bottom: 30px;
    border-left: 10px solid #ffd54e;
    padding-left: 15px;
}


.form input.ninja-forms-field {
        background: #f7f7f7!important;
    border: 1px solid #c4c4c4!important;
    border-radius: 0!important;
    box-shadow: none!important;
    color: #787878!important;
    transition: all .5s;
}


.checkbox-container.label-right label[for="nf-field-20"]{
    margin:  0 0 0 30px!important;
    font-size: 18px!important
}

.checkbox-container.label-right label[for="nf-field-20"]:before{
    top: -5px;
}


/*------------------------------
MEDIA QUERIES
------------------------------*/



/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px){
    #nf-field-20-container{
    margin-bottom: 0px;
}  


}

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) { 


      #nf-field-20-container{
    margin-bottom: 0
}  

}
@media (min-width:801px) and (max-width: 991px){
         #nf-field-20-container{
    margin-bottom: 25px;
}   
    
}


/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) { 
    

.mobile-nav{
    display: none!important
}

ul.primary-menu{
    display: inline-flex
}
    .slide {

    padding: 0 
}
    
    
.slide-image{
    display: block
}
    
    
      #nf-field-20-container{
    margin-bottom: 25px;
}  

    
}

/*Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) { 
    .nf-form-content nf-fields-wrap{
        display: flex;
        align-items: center
    }
    
   /* label[for="nf-field-20"]:after, label[for="nf-field-20"]:before{
    top: 10px!important
}
    .nf-field-label label{
    margin: 0 15px 0 45px !important
}

    .nf-field-element{
        margin-right: 15px;
    }*/


}