:root {

    --header-bg-color:#f8f9fa;
    --header-text-color:rgb(0, 0, 0);

    --first-page-text-color: #000;

    --button-text-color: #fff;
    --button-background-color: #007bff;

    --questions-color:#000;

    --bg-color-value:#fff;
    --bg-color-opacity:0;
    --questions-color:#000;
    --questions-color:#000;
}
@font-face {
    font-family: "FontAwesome";
    font-style: normal;
    font-weight: 400;
    src: url(../../vendor/font-awesome/fa-solid.eot);
    src: url(../../vendor/font-awesome/fa-solid.eot?#iefix) format("embedded-opentype"), url(../../vendor/font-awesome/fa-solid.woff2) format("woff2"), url(../../vendor/font-awesome/fa-solid.woff) format("woff"), url(../../vendor/font-awesome/fa-solid.ttf) format("truetype"), url(../../vendor/font-awesome/fa-solid.svg#fontawesome) format("svg")
}

a,
a:focus,
a:hover {
  color: #000;
}

/* Custom default button */
.btn-secondary,
.btn-secondary:hover,
.btn-secondary:focus {
  color: #333;
  text-shadow: none; /* Prevent inheritance from `body` */
  background-color: #000;
  border: .05rem solid #000;
}


/*
 * Base structure
 */

html,
body {
  height: 100%;
}

body {
  display: -ms-flexbox;
  display: flex;
  color: var(--questions-color);
}

.cover-container {
  max-width: 70em;
}


/*
 * Header
 */
.masthead {
  margin-bottom: 2rem;
    background: var(--header-bg-color);
    color: var(--header-text-color);
}

.masthead-brand {
  margin-bottom: 0;
 /* width:250px;*/
  height:70px;
  line-height: 70px;
}

.masthead-brand img{
  max-width:100%;
  max-height:100%;
}
.phone-masthead .phone-link {
  padding: .25rem 0;
  font-weight: 700;
  background-color: transparent;
  border-bottom: .25rem solid transparent;
}

.phone-masthead .phone-link:hover,
.phone-masthead .phone-link:focus {
  border-bottom-color: rgba(255, 255, 255, .25);
}

.phone-masthead .phone-link + .phone-link {
  margin-left: 1rem;
}

.phone-masthead .active {
  border-bottom-color: #fff;
}

@media (min-width: 48em) {
  .masthead-brand {
    float: left;
  }
  .phone-masthead {
    float: right;
  }
}
.phone {
	line-height:70px;
}

/*
 * Cover
 */
.cover {
  padding: 0 1.5rem;
}
.cover .btn-lg {
  padding: .75rem 1.25rem;
  font-weight: 700;
}


/*
 * Footer
 */
.mastfoot {
  color: rgba(0, 0, 0, .5);
}



.answer {
    cursor:pointer;
	background:#fff;
	position:relative;
	box-shadow: 0 0 40px rgba(51, 51, 51, 0.56);
}
.answer_image {
	display: inline-block;
    max-width: 250px;
	min-width: 250px;
	margin: 15px;

}
.answer_text {
	min-width: 100%;
    margin: 15px;
    padding: 10px;
}
.answer:focus, .answer:hover, .selected {
    border-color: var(--teal);
    box-shadow: .6px 1.9px 9px 0 var(--teal);
}

.answer img {
    max-width: 100%;
    max-height: 215px;
	padding: 10px 10px 0;
}


.select {
	color: #268eff;
    -webkit-border-radius: 50%;
    position: absolute;
	right: 10px;
    top: 10px;
}
.text {
    line-height: 1;
    font-size: 17px;
    padding: 10px;
}
.question{
	display:flex;
	margin: 10px 0;
	font-size:25px;
	font-weight:900;
    color:var(--questions-color);
}
.question-number{
	display:inline-block;
	width: 40px;
    min-width: 40px;
    height: 40px;
    border: 3px solid var(--questions-color);
    border-radius: 50%;
    font-size: 20px;
    font-weight: bold;
    margin-right: 15px;
    font-family: 'Georgia';
}
.progress{
	    margin: 10px 0 20px;
}
.progress-bar{
	    background-color: var(--button-background-color);
}

.btn-next,.btn-start,.finish{
position: relative;
overflow: hidden;
text-transform: uppercase;
font-weight: bold;
color: var(--button-text-color);
background-color: var(--button-background-color);
}
.btn-next:before,.btn-start:before,.finish:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #fa4923;
    opacity: 0;
    z-index: 1;
    -webkit-transition: ease 0.3s;
    transition: ease 0.3s;
}

.btn-next:after,.btn-start:after,.finish:after {
    content: "";
    display: block;
    width: 30px;
    height: 300px;
    margin-left: 60px;
    background: #fff;
    position: absolute;
    left: -40px;
    top: -150px;
    z-index: 1;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: all 0.1s;
    transition: all 0.1s;
    -webkit-animation-name: slideme;
    animation-name: slideme;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-delay: 0.05s;
    animation-delay: 0.05s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

@-webkit-keyframes slideme { 0% { left: -30px; margin-left: 0px; }
  30% { left: 110%; margin-left: 80px; }
  100% { left: 110%; margin-left: 80px; } }

  .final-form {
	position: relative;
    top: 40%;
    margin-top: -0.625em;
	margin-bottom: 10px;
  }
  .final-form .text{
	  text-align:justify;
  }
  @media (min-width: 48em) {
   .final-form {
	  position: absolute;
}
  }
    .cssload-loader {
        position: absolute;
        left: calc(50% - 31px);
        width: 100px;
        height: 100px;
        margin: 130px 0;
        -webkit-perspective: 780px;
        perspective: 780px;
        margin-top: -50px;
        top: 50%;
    }

    .cssload-inner {
        position: absolute;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        border-radius: 50%;
        -o-border-radius: 50%;
        -ms-border-radius: 50%;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
    }
    .cssload-inner.cssload-one {
        left: 0%;
        top: 0%;
        animation: cssload-rotate-one 1.15s linear infinite;
        -o-animation: cssload-rotate-one 1.15s linear infinite;
        -ms-animation: cssload-rotate-one 1.15s linear infinite;
        -webkit-animation: cssload-rotate-one 1.15s linear infinite;
        -moz-animation: cssload-rotate-one 1.15s linear infinite;
        border-bottom: 3px solid #5C5EDC;
    }
    .cssload-inner.cssload-two {
        right: 0%;
        top: 0%;
        animation: cssload-rotate-two 1.15s linear infinite;
        -o-animation: cssload-rotate-two 1.15s linear infinite;
        -ms-animation: cssload-rotate-two 1.15s linear infinite;
        -webkit-animation: cssload-rotate-two 1.15s linear infinite;
        -moz-animation: cssload-rotate-two 1.15s linear infinite;
        border-right: 3px solid rgba(76, 70, 101, 0.99);
    }
    .cssload-inner.cssload-three {
        right: 0%;
        bottom: 0%;
        animation: cssload-rotate-three 1.15s linear infinite;
        -o-animation: cssload-rotate-three 1.15s linear infinite;
        -ms-animation: cssload-rotate-three 1.15s linear infinite;
        -webkit-animation: cssload-rotate-three 1.15s linear infinite;
        -moz-animation: cssload-rotate-three 1.15s linear infinite;
        border-top: 3px solid #e9908a;
    }

    @keyframes cssload-rotate-one {
        0% {
            -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
            transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
        }
        100% {
            -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
            transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
        }
    }
    @-webkit-keyframes cssload-rotate-one {
        0% {
            -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
        }
        100% {
            -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
        }
    }
    @keyframes cssload-rotate-two {
        0% {
            -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
            transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
        }
        100% {
            -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
            transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
        }
    }
    @-webkit-keyframes cssload-rotate-two {
        0% {
            -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
        }
        100% {
            -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
        }
    }
    @keyframes cssload-rotate-three {
        0% {
            -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
            transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
        }
        100% {
            -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
            transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
        }
    }
    @-webkit-keyframes cssload-rotate-three {
        0% {
            -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
        }
        100% {
            -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
        }
    }
    .first_page_container{
        color:var(--first-page-text-color);
    }
    @media (min-width: 768px) {
        .answer_text {
            min-width: 47%;
        }
    }
.color-picker {
    margin-bottom: 1rem
}
.color-picker_color,.color-picker_color_text {
    border: 1px solid #ccc;
    width: 40px;
    height: 38px;
    float: left;
    margin-right: 5px;
    cursor: pointer
}
.color-picker_color-selected {
    border: 3px solid #454960
}
input.form-control[type=color],
input.form-control[type=range] {
    height: 2.25rem
}
input.form-control.form-control-sm[type=color],
input.form-control.form-control-sm[type=range] {
    height: 1.9375rem
}
input.form-control.form-control-lg[type=color],
input.form-control.form-control-lg[type=range] {
    height: 3rem
}
input.form-control[type=color] {
    padding: .25rem
}
input.form-control.form-control-sm[type=color] {
    padding: .125rem
}
.color-picker_color-selected:after {
    font-family: 'FontAwesome';
    -webkit-font-smoothing: antialiased;
    font-size: 1.5em;
    content: '\f00c'; /* Ok/check mark */
    margin-right: 1px;
    margin-left: 1px;
}
.answers-error{
    background: #000;
    color: #f00;
    font-weight: 700;
    font-size: x-large;
    margin: 1em 0;
    padding: 1em;
}

#bg-color {
    background-color:var(--bg-color-value);
    opacity:var(--bg-color-opacity);
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}