@charset "UTF-8";
/* CSS Document */

body{
	margin:0;
	padding:0;
}

html { 
    font-size: calc(0.75rem + 0.3vw);
}

/* BORDERS */

.br-dotted {
    border-right: thin dotted #666666;
}

.bl-dotted {
    border-left: thin dotted #666666;
}

.bb-dotted {
	border-bottom: thin dotted #666666;
}

.tb{
	border: thin solid #CC0000;
}

/* COLOURS */

.c-link{
	color: #3b6fb7 !important;
}

.c-white{
	color: #ffffff !important;
}

a.c-white, a.c-white:active, a.c-white:hover, a.c-white:visited{
    color: #ffffff !important;
}

.c-grey{
	color: #54565b !important;
}

.c-lt-grey{
	color: #9B9B9B !important;
}

.c-orange{
	color: #3b6fb7 !important;
}

.c-blue{
	color: #3b6fb7 !important;
}

.c-red{
	color: #FF0004 !important;
}

.bg-orange{
	background-color: #3b6fb7 !important;
}

.bg-blue{
	background-color:#d5e6fc !important;
}

.bg-lt-grey{
	background-color: #f1f1f1 !important;
}

.bg-md-grey{
	background-color: #C2C2C2 !important;
}

.bg-grey{
	background-color: #666666 !important;
}

.bg-white{
    background-color: #FFFFFF !important;
}

.bg-black{
    background-color: #000000 !important;
}

/* SPINNER */

@keyframes spinner-border {
  to { transform: rotate(360deg); }
} 

.spinner-border{
    display: inline-block;
    width: 2rem;
    height: 2rem;
    vertical-align: text-bottom;
    border: .25em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    -webkit-animation: spinner-border .75s linear infinite;
    animation: spinner-border .75s linear infinite;
}

.spinner-border-sm{
    height: 1rem;
    border-width: .2em;
}

/* IMAGES */

.image-scale{
	max-width:100%;
    height:auto;
    object-fit:contain;
}

.video-div{
	min-height: 1000px !important;
}

.video-scale{
	max-width: 480px !important;
	max-height: 848px !important;
	width: 100%;
	height: 100%;
}

.hero-home{
	min-height:90vh !important;
	background-position: bottom center;
	background-repeat: no-repeat;
	background-size: cover;
}

.banner-hero-large{
	
	width:100vw;
	height:100vh;
	position:fixed;
	z-index:-10;
	left:0;
	top:0;
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
	
}

.img-base{
	height: 70vh;
	background-image: url("../images/template/img-base.png");
	background-position: bottom center;
	background-repeat: no-repeat;
}

.img-base-sm{
	height: 30vh;
	background-image: url("../images/template/img-base.png");
	background-position: bottom center;
	background-repeat: no-repeat;

}

.img-survey{
	min-height: 100vh !important;
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
}

.dot-break{
	height: 848px !important;
	background-image: url("../images/lfb/dot-break.jpg");
	background-position: top center;
	background-repeat: no-repeat;
}

.line-break{
	background-image: url("../images/template/line-break.jpg");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	min-height: 90px;

}

/* LAYOUT */

.fixed-w{
	max-width: 1920px !important;
}

.button-right{
	max-height: 300px !important;
}

.hide-row{
	visibility: hidden;
}

.active{
	display: block;
}

.in-active{
	display:none;
}

/* BUTTONS */

.block-button{
    height:auto;
    width:auto;
	line-height:40%;
    border: none;
	cursor: pointer;
	padding: 15px;
	border-radius: 10px;
}

.block-button-large{
    height:auto;
    width:auto;
	background-repeat: none;
	line-height:40%;
    border: none;
	cursor: pointer;
	padding: 30px !important;
	border-radius: 10px;
}

.block-button-small{
	
    font-family: M-Regular,Arial, Helvetica, sans-serif !important;
	font-size:1em !important;
	font-weight:normal;
    height:auto;
    width:auto;
	background-color:#363d4c;
	color: #FFFFFF;
	line-height:40%;
    border: none;
	cursor: pointer;
	padding: 10px;
	border-radius: 5px;
	
}

.block-button-small-secondary{
    font-family: M-Regular,Arial, Helvetica, sans-serif !important;
	font-size:1em !important;
	font-weight:normal;
    height:auto;
    width:auto;
	background-color:#666666;
	color: #FFFFFF;
	line-height:40%;
    border: none;
	cursor: pointer;
	padding: 10px !important;
	border-radius: 5px;
}

.block-button-secondary{
	
    font-family: M-Regular,Arial, Helvetica, sans-serif !important;
	font-size:1.1em !important;
	font-weight:normal;
    height:auto;
    width:auto;
	background-color:#363d4c;
	color: #FFFFFF;
	line-height:40%;
    border: none;
	cursor: pointer;
	padding: 15px;
	border-radius: 10px;
	
}

.no-button{
    
    background: rgba(0, 0, 0, 0);
    border: none;
    cursor: pointer;
	padding: 5px !important;
	margin: 0;
	
}

/* SURVEY ELEMENTS */

.s-header{
	color: #666666 !important;
}

.s-nav-inactive{
	color: #666666 !important;
	background-color: #CCCCCC !important;
}

.s-nav-active{
	color: #333333 !important;
	background-color: #3b6fb7 !important;
}

.h-button{
	border: none;
    cursor: pointer;
	margin: 0;
	background-color: #ff5c35;
	color: #FFFFFF;
}

.h-active{
	border-top: thick solid #C68C27;
	background-color: #FFFFFF !important;
	color: #343E47 !important;
}

.no-button{
    background: rgba(0, 0, 0, 0);
    border: none;
    cursor: pointer;
	padding: 5px !important;
	margin: 0;
}

.no-button:focus {
  outline: none;
  box-shadow: none;
}

.rating-button{
	
	min-height: 60px;
	min-width: 60px;
	width: auto;
	border: thick solid #FFFFFF;
	border-radius: 15px;
	cursor: pointer;
	
}

.rating-button:focus {
  outline: none;
  box-shadow: none;
}

.multiple-button{
	
	min-height: 60px;
	width: 100%;
	max-width: 800px;
	border: thick solid #FFFFFF;
	border-radius: 15px;
	cursor: pointer;
	outline: none;
  	box-shadow: none;
	
}

.multiple-button:focus {
  outline: none;
  box-shadow: none;
}

.b-active{
	background-color: #e5e5e5 !important;
	outline: none;
  	box-shadow: none;
}

/* DEVICE PORTRAIT */

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1080px) 
and (orientation : portrait) {
	
	h1{
    	font-size:2.5em !important;
	}
	
	.hero-home{
        min-height:50vh !important;
        background-image: url('../images/lfb/heading-ml.jpg');
        background-position: bottom center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .img-survey{
        min-height: 80vh !important;
        background-image: url('../images/lfb/survey-ml.jpg');
        background-position: bottom center;
        background-repeat: no-repeat;
        background-size: cover;
    }
	
	/* BORDERS */

	.br-dotted {
		border-right: none !important;
		border-bottom: thin dotted #666666;
	}

	.bl-dotted {
		border-left: none !important;
		border-bottom: thin dotted #666666;
	}
	
	.logo{
		background-color: #FFFFFF !important;
	}
}

/* DEVICE LANDSCAPE */

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1080px) 
and (orientation : landscape) {
    
    html{
        font-size: 1rem;
    }
    .b-regular{
        font-size: 1rem;
	}
	.nav-link{
		font-size: 1rem !important;
	}
	
	a.nav-link, a.nav-link:active, a.nav-link:hover, a.nav-link:visited {
    	font-size: 1em !important;
	}
	
	h1{
    	font-size:2.5rem !important;
	}
	
	.hero-home{
        min-height:100vh !important;
    }

    .img-survey{
        min-height: 110vh !important;
		background-position: bottom center;
		background-size: contain;
    }

}

/* MOBILE LANDSCAPE */

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 920px)
and (orientation : landscape) {
    
    html{
        font-size: 1rem;
    }
    .b-regular{
        font-size: 1rem;
	}
	.nav-link{
		font-size: 1rem !important;
	}
	
	a.nav-link, a.nav-link:active, a.nav-link:hover, a.nav-link:visited {
    	font-size: 1rem !important;
	}
	
	h1{
    	font-size:2rem !important;
	}

	h3{
		font-size: 2rem !important;
	}
	
	.hero-home{
        min-height:150vh !important;
        background-image: url('../images/lfb/heading-ml.jpg');
        background-position: bottom center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .img-survey{
        min-height: 250vh !important;
        background-image: url('../images/lfb/survey-ml.jpg');
        background-position: bottom center;
        background-repeat: no-repeat;
        background-size: contain;
    }
	
	/* BORDERS */

	.br-dotted {
		border-right: none !important;
		border-bottom: thin dotted #666666;
	}

	.bl-dotted {
		border-left: none !important;
		border-bottom: thin dotted #666666;
	}
	
	/* LOGO */
	
	.logo{
		display: none !important;
	}

}

/* MOBILE PORTRAIT */

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 900px)
and (orientation : portrait) {
    
     html{
        font-size: 1rem;
    }
	
    .b-regular{
        font-size: 1rem;
	}
	.nav-link{
		font-size: 1rem !important;
	}
	
	.img-base{
		height: 80vh !important;
	}
	
	a.nav-link, a.nav-link:active, a.nav-link:hover, a.nav-link:visited {
    	font-size: 1rem !important;
	}
	
	h1{
    	font-size:2rem !important;
		line-height: 80% !important;
	}

	h3{
		font-size: 2rem !important;
		line-height: 80% !important;
	}
	
	.hero-home{
        min-height:70vh !important;
        background-image: url('../images/lfb/heading-mp.jpg');
        background-position: bottom center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .img-survey{
        min-height: 100vh !important;
        background-image: url('../images/lfb/survey-mp.jpg');
        background-position: bottom center;
        background-repeat: no-repeat;
        background-size: contain;
    }

	/* BORDERS */

	.br-dotted {
		border-right: none !important;
		border-bottom: thin dotted #666666;
	}

	.bl-dotted {
		border-left: none !important;
		border-bottom: thin dotted #666666;
	}
	
	/* LOGO */
	
	.logo{
		background-color: #FFFFFF !important;
		justify-content: center !important;
	}
	
}