@font-face{
	font-family:lota-regular;
	src:url(LotaGrotesqueAlt3-Regular.eot);
	src:url(LotaGrotesqueAlt3-Regular.eot?#iefix) format("embedded-opentype"),url(LotaGrotesqueAlt3-Regular.woff) format("woff"),url(LotaGrotesqueAlt3-Regular.ttf) format("truetype"),url(LotaGrotesqueAlt3-Regular.svg#LotaGrotesqueAlt3-Regular) format("svg");
	font-weight:400;
	font-style:normal
}

@font-face{
	font-family:lota-bold;
	src:url(LotaGrotesqueAlt3-Bold.eot);
	src:url(LotaGrotesqueAlt3-Bold.eot?#iefix) format("embedded-opentype"),url(LotaGrotesqueAlt3-Bold.woff) format("woff"),url(LotaGrotesqueAlt3-Bold.ttf) format("truetype"),url(LotaGrotesqueAlt3-Bold.svg#LotaGrotesqueAlt3-Bold) format("svg");
	font-weight:700;
	font-style:normal
}

@font-face{
	font-family:lota-bold-italic;
	src:url(LotaGrotesqueAlt3-BoldIt.eot);
	src:url(LotaGrotesqueAlt3-BoldIt.eot?#iefix) format("embedded-opentype"),url(LotaGrotesqueAlt3-BoldIt.woff) format("woff"),url(LotaGrotesqueAlt3-BoldIt.ttf) format("truetype"),url(LotaGrotesqueAlt3-BoldIt.svg#LotaGrotesqueAlt3-BoldIt) format("svg");
	font-weight:700;
	font-style:italic
}



body,html{
    width:100%;
    height:100%
}
body{
    font-family:'lota-regular'
}
.btn-xl{
    padding:1.25rem 2.5rem
}
.content-section{
    padding-top:7.5rem;
    padding-bottom:7.5rem
}
.content-section-heading h2{
    font-size:3rem
}
.content-section-heading h3{
    font-size:1rem;
    text-transform:uppercase
}
h1,h2,h3,h4,h5,h6{
    font-weight:700;
    line-height: 1;
}
.text-faded{
    color:rgba(255,255,255,.7)
}
.map{
    height:30rem
}
@media (max-width:992px){
    .map{
        height:75%
    }
}
.map iframe{
    pointer-events:none
}
.scroll-to-top{
    position:fixed;
    right:15px;
    bottom:15px;
    display:none;
    width:50px;
    height:50px;
    text-align:center;
    color:#fff;
    background:rgba(52,58,64,.5);
    line-height:45px
}
.scroll-to-top:focus,.scroll-to-top:hover{
    color:#fff
}
.scroll-to-top:hover{
    background:#343a40
}
.scroll-to-top i{
    font-weight:800
}
.masthead{
    min-height:30rem;
    position:relative;
    display:table;
    width:100%;
    height:auto;
    padding-top:3rem;
    padding-bottom:3rem;
    background:linear-gradient(90deg,rgba(255,255,255,.1) 0,rgba(255,255,255,.1) 100%),url(https://action.labour.org.uk/page/-/member-survey/Hullsplash2.jpg);
    background-position:center center;
    background-repeat:no-repeat;
    background-size:cover
}
.masthead h1{
    font-size:3rem;
    margin:0;
    padding:0;
    font-family: lota-bold;
}
@media (min-width:992px){
    .masthead{
        height:100vh
    }
    .masthead h1{
        font-size:3	.5rem
    }
}

.intropanel {
	padding: 30px;
	background-color: rgba(0, 0, 0, 0.8) !important;
	color: #fff;
}


#sidebar-wrapper{
    position:fixed;
    z-index:2;
    right:0;
    width:250px;
    height:100%;
    -webkit-transition:all .4s ease 0s;
    -moz-transition:all .4s ease 0s;
    -ms-transition:all .4s ease 0s;
    -o-transition:all .4s ease 0s;
    transition:all .4s ease 0s;
    transform:translateX(250px);
    background:#1d809f;
    border-left:1px solid rgba(255,255,255,.1)
}
.sidebar-nav{
    position:absolute;
    top:0;
    width:250px;
    margin:0;
    padding:0;
    list-style:none
}
.sidebar-nav li.sidebar-nav-item a{
    display:block;
    text-decoration:none;
    color:#fff;
    padding:15px
}
.sidebar-nav li a:hover{
    text-decoration:none;
    color:#fff;
    background:rgba(255,255,255,.2)
}
.sidebar-nav li a:active,.sidebar-nav li a:focus{
    text-decoration:none
}
.sidebar-nav>.sidebar-brand{
    font-size:1.2rem;
    background:rgba(52,58,64,.1);
    height:80px;
    line-height:50px;
    padding-top:15px;
    padding-bottom:15px;
    padding-left:15px
}
.sidebar-nav>.sidebar-brand a{
    color:#fff
}
.sidebar-nav>.sidebar-brand a:hover{
    color:#fff;
    background:0 0
}
#sidebar-wrapper.active{
    right:250px;
    width:250px;
    -webkit-transition:all .4s ease 0s;
    -moz-transition:all .4s ease 0s;
    -ms-transition:all .4s ease 0s;
    -o-transition:all .4s ease 0s;
    transition:all .4s ease 0s
}
.menu-toggle{
    position:fixed;
    right:15px;
    top:15px;
    width:50px;
    height:50px;
    text-align:center;
    color:#fff;
    background:rgba(52,58,64,.5);
    line-height:50px;
    z-index:999
}
.menu-toggle:focus,.menu-toggle:hover{
    color:#fff
}
.menu-toggle:hover{
    background:#343a40
}
.service-icon{
    background-color:#fff;
    color:#e4003b;
    height:7rem;
    width:7rem;
    display:block;
    line-height:7.5rem;
    font-size:2.25rem;
    box-shadow:0 3px 3px 0 rgba(0,0,0,.1)
}
.callout{
    padding:15rem 0;
    background:linear-gradient(90deg,rgba(255,255,255,.1) 0,rgba(255,255,255,.1) 100%),url(../img/bg-masthead.jpg);
    background-position:center center;
    background-repeat:no-repeat;
    background-size:cover
}
.callout h2{
    font-size:3.5rem;
    font-weight:700;
    display:block;
    max-width:30rem
}
.portfolio-item{
    display:block;
    position:relative;
    overflow:hidden;
    max-width:530px;
    margin:auto auto 1rem
}
.portfolio-item .caption{
    display:flex;
    height:100%;
    width:100%;
    background-color:rgba(33,37,41,.2);
    position:absolute;
    top:0;
    bottom:0;
    z-index:1
}
.portfolio-item .caption .caption-content{
    color:#fff;
    margin:auto 2rem 2rem
}
.portfolio-item .caption .caption-content h2{
    font-size:.8rem;
    text-transform:uppercase
}
.portfolio-item .caption .caption-content p{
    font-weight:300;
    font-size:1.2rem
}
@media (min-width:992px){
    .portfolio-item{
        max-width:none;
        margin:0
    }
    .portfolio-item .caption{
        -webkit-transition:-webkit-clip-path .25s ease-out,background-color .7s;
        -webkit-clip-path:inset(0);
        clip-path:inset(0)
    }
    .portfolio-item .caption .caption-content{
        transition:opacity .25s;
        margin-left:5rem;
        margin-right:5rem;
        margin-bottom:5rem
    }
    .portfolio-item img{
        -webkit-transition:-webkit-clip-path .25s ease-out;
        -webkit-clip-path:inset(-1px);
        clip-path:inset(-1px)
    }
    .portfolio-item:hover img{
        -webkit-clip-path:inset(2rem);
        clip-path:inset(2rem)
    }
    .portfolio-item:hover .caption{
        background-color:rgba(29,128,159,.9);
        -webkit-clip-path:inset(2rem);
        clip-path:inset(2rem)
    }
}
footer.footer{
    padding-top:10px;
    padding-bottom:10px;
}
footer.footer .social-link{
    display:block;
    height:4rem;
    width:4rem;
    line-height:4.3rem;
    font-size:1.5rem;
    background-color:#1d809f;
    transition:background-color .15s ease-in-out;
    box-shadow:0 3px 3px 0 rgba(0,0,0,.1)
}
footer.footer .social-link:hover{
    background-color:#155d74;
    text-decoration:none
}
a{
    color:#1d809f
}
a:active,a:focus,a:hover{
    color:#11ad8e
}
.btn-primary{
    background-color:#e4003b!important;
    border-color:#e4003b!important;
    color:#fff!important
}
.btn-primary:active,.btn-primary:focus,.btn-primary:hover{
    background-color:#11ad8e!important;
    border-color:#155d74!important
}
.btn-secondary{
    background-color:#ecb807!important;
    border-color:#ecb807!important;
    color:#fff!important
}
.btn-secondary:active,.btn-secondary:focus,.btn-secondary:hover{
    background-color:#ba9106!important;
    border-color:#ba9106!important
}
.btn-dark{
    color:#fff!important
}
.btn{
    box-shadow:0 3px 3px 0 rgba(0,0,0,.1);
    font-weight:700
}
.bg-primary{
    background-color:#e4003b!important
}
.text-primary{
    color:#e4003b!important
}
.text-secondary{
    color:#ecb807!important
}
label{
    display: inline;
    min-width: 150px;
    vertical-align: top;
}
input[type="text"],input[type="tel"],input[type="email"]{
    display: block;
    min-width: 350px;
    vertical-align: top;
     font-size: 150%;
     padding: 5px;
}