/************************/
/*SYSTEMS STYLES IN FOLD*/
/************************/
/* CSS Reset mini*/
body, h1, h2, h3, h4, h5, h6, a, p, ul, ol, li, em, strong, pre, code, form {
    padding: 0;
    margin: 0;

}

/* Bootstrap */
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}/*! Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css */@media print{*,*:before,*:after{background:transparent !important;color:#000 !important;-webkit-box-shadow:none !important;box-shadow:none !important;text-shadow:none !important}a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}abbr[title]:after{content:" (" attr(title) ")"}a[href^="#"]:after,a[href^="javascript:"]:after{content:""}pre,blockquote{border:1px solid #999;page-break-inside:avoid}thead{display:table-header-group}tr,img{page-break-inside:avoid}img{max-width:100% !important}p,h2,h3{orphans:3;widows:3}h2,h3{page-break-after:avoid}select{background:#fff !important}.navbar{display:none}.btn>.caret,.dropup>.btn>.caret{border-top-color:#000 !important}.label{border:1px solid #000}.table{border-collapse:collapse !important}.table td,.table th{background-color:#fff !important}.table-bordered th,.table-bordered td{border:1px solid #ddd !important}}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html{font-size:10px;-webkit-tap-highlight-color:rgba(0,0,0,0)}body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.42857143;color:#333;}input,button,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit}a{color:#428bca;text-decoration:none}a:hover,a:focus{color:#2a6496;text-decoration:underline}a:focus{outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}figure{margin:0}img{vertical-align:middle}.img-responsive{display:block;max-width:100%;height:auto}.img-rounded{border-radius:6px}.img-thumbnail{padding:4px;line-height:1.42857143;background-color:#fff;border:1px solid #ddd;border-radius:4px;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out;display:inline-block;max-width:100%;height:auto}.img-circle{border-radius:50%}hr{margin-top:20px;margin-bottom:20px;border:0;border-top:1px solid #eee}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.sr-only-focusable:active,.sr-only-focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}.container{margin-right:auto;margin-left:auto;padding-left:15px;padding-right:15px}@media (min-width:768px){.container{width:750px}}@media (min-width:992px){.container{width:970px}}@media (min-width:1200px){.container{width:1170px}}.container-fluid{margin-right:auto;margin-left:auto;padding-left:15px;padding-right:15px}.row{margin-left:-15px;margin-right:-15px}.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12{position:relative;min-height:1px;padding-left:15px;padding-right:15px}.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12{float:left}.col-xs-12{width:100%}.col-xs-11{width:91.66666667%}.col-xs-10{width:83.33333333%}.col-xs-9{width:75%}.col-xs-8{width:66.66666667%}.col-xs-7{width:58.33333333%}.col-xs-6{width:50%}.col-xs-5{width:41.66666667%}.col-xs-4{width:33.33333333%}.col-xs-3{width:25%}.col-xs-2{width:16.66666667%}.col-xs-1{width:8.33333333%}.col-xs-pull-12{right:100%}.col-xs-pull-11{right:91.66666667%}.col-xs-pull-10{right:83.33333333%}.col-xs-pull-9{right:75%}.col-xs-pull-8{right:66.66666667%}.col-xs-pull-7{right:58.33333333%}.col-xs-pull-6{right:50%}.col-xs-pull-5{right:41.66666667%}.col-xs-pull-4{right:33.33333333%}.col-xs-pull-3{right:25%}.col-xs-pull-2{right:16.66666667%}.col-xs-pull-1{right:8.33333333%}.col-xs-pull-0{right:auto}.col-xs-push-12{left:100%}.col-xs-push-11{left:91.66666667%}.col-xs-push-10{left:83.33333333%}.col-xs-push-9{left:75%}.col-xs-push-8{left:66.66666667%}.col-xs-push-7{left:58.33333333%}.col-xs-push-6{left:50%}.col-xs-push-5{left:41.66666667%}.col-xs-push-4{left:33.33333333%}.col-xs-push-3{left:25%}.col-xs-push-2{left:16.66666667%}.col-xs-push-1{left:8.33333333%}.col-xs-push-0{left:auto}.col-xs-offset-12{margin-left:100%}.col-xs-offset-11{margin-left:91.66666667%}.col-xs-offset-10{margin-left:83.33333333%}.col-xs-offset-9{margin-left:75%}.col-xs-offset-8{margin-left:66.66666667%}.col-xs-offset-7{margin-left:58.33333333%}.col-xs-offset-6{margin-left:50%}.col-xs-offset-5{margin-left:41.66666667%}.col-xs-offset-4{margin-left:33.33333333%}.col-xs-offset-3{margin-left:25%}.col-xs-offset-2{margin-left:16.66666667%}.col-xs-offset-1{margin-left:8.33333333%}.col-xs-offset-0{margin-left:0}@media (min-width:768px){.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12{float:left}.col-sm-12{width:100%}.col-sm-11{width:91.66666667%}.col-sm-10{width:83.33333333%}.col-sm-9{width:75%}.col-sm-8{width:66.66666667%}.col-sm-7{width:58.33333333%}.col-sm-6{width:50%}.col-sm-5{width:41.66666667%}.col-sm-4{width:33.33333333%}.col-sm-3{width:25%}.col-sm-2{width:16.66666667%}.col-sm-1{width:8.33333333%}.col-sm-pull-12{right:100%}.col-sm-pull-11{right:91.66666667%}.col-sm-pull-10{right:83.33333333%}.col-sm-pull-9{right:75%}.col-sm-pull-8{right:66.66666667%}.col-sm-pull-7{right:58.33333333%}.col-sm-pull-6{right:50%}.col-sm-pull-5{right:41.66666667%}.col-sm-pull-4{right:33.33333333%}.col-sm-pull-3{right:25%}.col-sm-pull-2{right:16.66666667%}.col-sm-pull-1{right:8.33333333%}.col-sm-pull-0{right:auto}.col-sm-push-12{left:100%}.col-sm-push-11{left:91.66666667%}.col-sm-push-10{left:83.33333333%}.col-sm-push-9{left:75%}.col-sm-push-8{left:66.66666667%}.col-sm-push-7{left:58.33333333%}.col-sm-push-6{left:50%}.col-sm-push-5{left:41.66666667%}.col-sm-push-4{left:33.33333333%}.col-sm-push-3{left:25%}.col-sm-push-2{left:16.66666667%}.col-sm-push-1{left:8.33333333%}.col-sm-push-0{left:auto}.col-sm-offset-12{margin-left:100%}.col-sm-offset-11{margin-left:91.66666667%}.col-sm-offset-10{margin-left:83.33333333%}.col-sm-offset-9{margin-left:75%}.col-sm-offset-8{margin-left:66.66666667%}.col-sm-offset-7{margin-left:58.33333333%}.col-sm-offset-6{margin-left:50%}.col-sm-offset-5{margin-left:41.66666667%}.col-sm-offset-4{margin-left:33.33333333%}.col-sm-offset-3{margin-left:25%}.col-sm-offset-2{margin-left:16.66666667%}.col-sm-offset-1{margin-left:8.33333333%}.col-sm-offset-0{margin-left:0}}@media (min-width:992px){.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12{float:left}.col-md-12{width:100%}.col-md-11{width:91.66666667%}.col-md-10{width:83.33333333%}.col-md-9{width:75%}.col-md-8{width:66.66666667%}.col-md-7{width:58.33333333%}.col-md-6{width:50%}.col-md-5{width:41.66666667%}.col-md-4{width:33.33333333%}.col-md-3{width:25%}.col-md-2{width:16.66666667%}.col-md-1{width:8.33333333%}.col-md-pull-12{right:100%}.col-md-pull-11{right:91.66666667%}.col-md-pull-10{right:83.33333333%}.col-md-pull-9{right:75%}.col-md-pull-8{right:66.66666667%}.col-md-pull-7{right:58.33333333%}.col-md-pull-6{right:50%}.col-md-pull-5{right:41.66666667%}.col-md-pull-4{right:33.33333333%}.col-md-pull-3{right:25%}.col-md-pull-2{right:16.66666667%}.col-md-pull-1{right:8.33333333%}.col-md-pull-0{right:auto}.col-md-push-12{left:100%}.col-md-push-11{left:91.66666667%}.col-md-push-10{left:83.33333333%}.col-md-push-9{left:75%}.col-md-push-8{left:66.66666667%}.col-md-push-7{left:58.33333333%}.col-md-push-6{left:50%}.col-md-push-5{left:41.66666667%}.col-md-push-4{left:33.33333333%}.col-md-push-3{left:25%}.col-md-push-2{left:16.66666667%}.col-md-push-1{left:8.33333333%}.col-md-push-0{left:auto}.col-md-offset-12{margin-left:100%}.col-md-offset-11{margin-left:91.66666667%}.col-md-offset-10{margin-left:83.33333333%}.col-md-offset-9{margin-left:75%}.col-md-offset-8{margin-left:66.66666667%}.col-md-offset-7{margin-left:58.33333333%}.col-md-offset-6{margin-left:50%}.col-md-offset-5{margin-left:41.66666667%}.col-md-offset-4{margin-left:33.33333333%}.col-md-offset-3{margin-left:25%}.col-md-offset-2{margin-left:16.66666667%}.col-md-offset-1{margin-left:8.33333333%}.col-md-offset-0{margin-left:0}}@media (min-width:1200px){.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12{float:left}.col-lg-12{width:100%}.col-lg-11{width:91.66666667%}.col-lg-10{width:83.33333333%}.col-lg-9{width:75%}.col-lg-8{width:66.66666667%}.col-lg-7{width:58.33333333%}.col-lg-6{width:50%}.col-lg-5{width:41.66666667%}.col-lg-4{width:33.33333333%}.col-lg-3{width:25%}.col-lg-2{width:16.66666667%}.col-lg-1{width:8.33333333%}.col-lg-pull-12{right:100%}.col-lg-pull-11{right:91.66666667%}.col-lg-pull-10{right:83.33333333%}.col-lg-pull-9{right:75%}.col-lg-pull-8{right:66.66666667%}.col-lg-pull-7{right:58.33333333%}.col-lg-pull-6{right:50%}.col-lg-pull-5{right:41.66666667%}.col-lg-pull-4{right:33.33333333%}.col-lg-pull-3{right:25%}.col-lg-pull-2{right:16.66666667%}.col-lg-pull-1{right:8.33333333%}.col-lg-pull-0{right:auto}.col-lg-push-12{left:100%}.col-lg-push-11{left:91.66666667%}.col-lg-push-10{left:83.33333333%}.col-lg-push-9{left:75%}.col-lg-push-8{left:66.66666667%}.col-lg-push-7{left:58.33333333%}.col-lg-push-6{left:50%}.col-lg-push-5{left:41.66666667%}.col-lg-push-4{left:33.33333333%}.col-lg-push-3{left:25%}.col-lg-push-2{left:16.66666667%}.col-lg-push-1{left:8.33333333%}.col-lg-push-0{left:auto}.col-lg-offset-12{margin-left:100%}.col-lg-offset-11{margin-left:91.66666667%}.col-lg-offset-10{margin-left:83.33333333%}.col-lg-offset-9{margin-left:75%}.col-lg-offset-8{margin-left:66.66666667%}.col-lg-offset-7{margin-left:58.33333333%}.col-lg-offset-6{margin-left:50%}.col-lg-offset-5{margin-left:41.66666667%}.col-lg-offset-4{margin-left:33.33333333%}.col-lg-offset-3{margin-left:25%}.col-lg-offset-2{margin-left:16.66666667%}.col-lg-offset-1{margin-left:8.33333333%}.col-lg-offset-0{margin-left:0}}.clearfix:before,.clearfix:after,.container:before,.container:after,.container-fluid:before,.container-fluid:after,.row:before,.row:after{content:" ";display:table}.clearfix:after,.container:after,.container-fluid:after,.row:after{clear:both}.center-block{display:block;margin-left:auto;margin-right:auto}.pull-right{float:right !important}.pull-left{float:left !important}.hide{display:none !important}.show{display:block !important}.invisible{visibility:hidden}.text-hide{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.hidden{display:none !important;visibility:hidden !important}.affix{position:fixed}@-ms-viewport{width:device-width}.visible-xs,.visible-sm,.visible-md,.visible-lg{display:none !important}.visible-xs-block,.visible-xs-inline,.visible-xs-inline-block,.visible-sm-block,.visible-sm-inline,.visible-sm-inline-block,.visible-md-block,.visible-md-inline,.visible-md-inline-block,.visible-lg-block,.visible-lg-inline,.visible-lg-inline-block{display:none !important}@media (max-width:767px){.visible-xs{display:block !important}table.visible-xs{display:table}tr.visible-xs{display:table-row !important}th.visible-xs,td.visible-xs{display:table-cell !important}}@media (max-width:767px){.visible-xs-block{display:block !important}}@media (max-width:767px){.visible-xs-inline{display:inline !important}}@media (max-width:767px){.visible-xs-inline-block{display:inline-block !important}}@media (min-width:768px) and (max-width:991px){.visible-sm{display:block !important}table.visible-sm{display:table}tr.visible-sm{display:table-row !important}th.visible-sm,td.visible-sm{display:table-cell !important}}@media (min-width:768px) and (max-width:991px){.visible-sm-block{display:block !important}}@media (min-width:768px) and (max-width:991px){.visible-sm-inline{display:inline !important}}@media (min-width:768px) and (max-width:991px){.visible-sm-inline-block{display:inline-block !important}}@media (min-width:992px) and (max-width:1199px){.visible-md{display:block !important}table.visible-md{display:table}tr.visible-md{display:table-row !important}th.visible-md,td.visible-md{display:table-cell !important}}@media (min-width:992px) and (max-width:1199px){.visible-md-block{display:block !important}}@media (min-width:992px) and (max-width:1199px){.visible-md-inline{display:inline !important}}@media (min-width:992px) and (max-width:1199px){.visible-md-inline-block{display:inline-block !important}}@media (min-width:1200px){.visible-lg{display:block !important}table.visible-lg{display:table}tr.visible-lg{display:table-row !important}th.visible-lg,td.visible-lg{display:table-cell !important}}@media (min-width:1200px){.visible-lg-block{display:block !important}}@media (min-width:1200px){.visible-lg-inline{display:inline !important}}@media (min-width:1200px){.visible-lg-inline-block{display:inline-block !important}}@media (max-width:767px){.hidden-xs{display:none !important}}@media (min-width:768px) and (max-width:991px){.hidden-sm{display:none !important}}@media (min-width:992px) and (max-width:1199px){.hidden-md{display:none !important}}@media (min-width:1200px){.hidden-lg{display:none !important}}.visible-print{display:none !important}@media print{.visible-print{display:block !important}table.visible-print{display:table}tr.visible-print{display:table-row !important}th.visible-print,td.visible-print{display:table-cell !important}}.visible-print-block{display:none !important}@media print{.visible-print-block{display:block !important}}.visible-print-inline{display:none !important}@media print{.visible-print-inline{display:inline !important}}.visible-print-inline-block{display:none !important}@media print{.visible-print-inline-block{display:inline-block !important}}@media print{.hidden-print{display:none !important}}

html {
    height:100%;
    min-height:100%;
    overflow-x:hidden;
}

body {
    height:100%;
    min-height:100%;
    font-family: 'Roboto', 'Helvetica Neue', 'Helvetica', sans-serif, 'Arial';
    font-weight:400;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    text-align:center;
}

#background {
    min-height:100%;
    position:fixed;
    max-width:100%;
    height:100%;
    width:100%;
    overflow-x:hidden;
    overflow-y:auto;

    background-size: cover;
}

#overlay {
    min-height:100%;
    position:fixed;
    max-width:100%;
    height:100%;
    width:100%;
    overflow-y:auto;
    background-color:rgba(0,0,0,0.0);
}

#webform-content {
    position:relative;
    width:100%;
    left:100%;
    overflow-x:hidden;
	/* -webkit-transform: translateZ(0); */
	padding-bottom:40px;
}

#template-summary {
    position:relative;
}

#template-start {
	-webkit-transform: translateZ(0);
}


a {
    color:#8D939A;
}

a:hover {
    color:#8D939A;
    text-decoration: none;
}

/*
* Placeholder styling
*/

/* do not group these rules */
*::-webkit-input-placeholder {
    font-size:24px;
    font-weight:300;
}
*:-moz-placeholder {
    /* FF 4-18 */
    font-size:24px;
    font-weight:300;
}
*::-moz-placeholder {
    /* FF 19+ */
    font-size:24px;
    font-weight:300;
}
*:-ms-input-placeholder {
    /* IE 10+ */
    font-size:24px;
    font-weight:300;
}

.engine-sprite {width:73px;height:319px;background:url('webengine-sprites.png?t=123') no-repeat;display:inline-block;text-indent:-9999px;}

/* Startpil */
.icon-engine-start-white {width:50px;height:44px;background-position:-1px -1px;}
.icon-engine-start-black {width:50px;height:44px;background-position:-1px -46px;}

/* Checkmark */
.icon-engine-checkmark-white {width:54px;height:48px;background-position:-73px -139px;}
.icon-engine-checkmark-black {width:54px;height:48px;background-position:-73px -188px;}
.icon-engine-checkmark-green-l {width:55px;height:38px;background-position:-129px -103px;}
.icon-engine-checkmark-green-s {width:35px;height:24px;background-position:-129px -143px;}

/* Menu icon */
.icon-engine-white-menu {width:35px;height:21px;background-position:-1px -91px;}
.icon-engine-white-menu-hover {width:35px;height:21px;background-position:-37px -91px;}

.icon-engine-black-menu {width:35px;height:21px;background-position:-1px -172px;}
.icon-engine-black-menu-hover {width:35px;height:21px;background-position:-37px -172px;}

/* Arrows */
.icon-engine-white-right {width:16px;height:28px;background-position:-1px -113px;}
.icon-engine-white-right-hover {width:16px;height:28px;background-position:-18px -113px;}
.icon-engine-white-left {width:16px;height:28px;background-position:-1px -142px;}
.icon-engine-white-left-hover {width:16px;height:28px;background-position:-18px -142px;}

.icon-engine-black-right {width:16px;height:28px;background-position:-1px -194px;}
.icon-engine-black-right-hover {width:16px;height:28px;background-position:-18px -194px;}
.icon-engine-black-left {width:16px;height:28px;background-position:-1px -223px;}
.icon-engine-black-left-hover {width:16px;height:28px;background-position:-18px -223px;}

.icon-engine-lock {width:31px;height:40px;background-position:-1px -252px;}
.icon-engine-info {width:24px;height:25px;background-position:-1px -293px;}
.icon-engine-error {width:24px;height:25px;background-position:-26px -293px;}

.icon-engine-camera {width:49px;height:36px;background-position:-73px -102px;}
.icon-engine-camera-large {width:136px;height:100px;background-position:-73px -1px;}

.icon-active, .icon-hover {display:none;}

.white {
    background:#fff!important;
    color:#5a5a5a;
}
.gray {
    background:#F0F0F0!important;
    color:#9d9d9d;
}

.green {
    background:#34DA76!important;
    color:#fff;
}

.darkergreen {
	background:#31c36b!important;
	color:#fff;
}

/*.green {
    background:#4CC964!important;
    color:#fff;
}
*/.blue {
    background:#00ACEE!important;
    color:#ffffff!important;
}
.red {
    background:#F04933!important;
    color:#fff;
}
.orange {
    background:#FFC600!important;
    color:#252525;
}
.black {
    background:#000000!important;
    color:#ffffff;
}

.scrollpane {
    position:relative;
    /*- overflow-scrolling: auto; */
    overflow-y: scroll !important;
    overflow-x:hidden !important;
    /* -webkit-overflow-scrolling: touch !important; */
    -moz-overflow-scrolling: touch !important;
    -o-overflow-scrolling: touch !important;
    -khtml-overflow-scrolling: touch;
    height:100%;
}

.debug {
    text-align:left;
    display:none;
    position:fixed;
    top:20px;left:10px;
    background-color:white;
    opacity:0.7;
    color:black;
    font-size:9px;
    padding:5px;
}


.design-preview-banner {
    -ms-transform: rotate(-45deg); /* IE 9 */
    -webkit-transform: rotate(-45deg); /* Safari */
    transform: rotate(-45deg);
    position:fixed;
	top: 25px;
	left: -45px;
	width: 180px;
    background: #fff;
    text-align: center;
    padding: 5px;
    box-shadow: 0px 0px 3px #888888;
}

.design-preview-banner span {
    font-size:75%;
    margin-top: -4px;
    position:relative;
    display: block;
}

.menu {
    z-index:100;
    cursor:pointer;
    position:fixed;
    top:16px; /* Adjusted due to click-padding */
    right:18px; /* Adjusted due to click-padding */
    width:50px;
    height:40px;
    padding-top:8px;
}

.progress-bar {
    display:none;
    z-index:100;
    width:100%;
    height:4px;
    position:fixed;
    bottom:0px;
    left:0px;
}

.progress-bar .empty {
    background-color:#ffffff;
    width:100%;
    height:100%;
    position:absolute;
    bottom:0px;
    left:0px;
    opacity:0.5;
}

.progress-bar .fill {
    background-color:lime;
    width:0%;
    height:100%;
    position:absolute;
    bottom:0px;
    left:0px;
}

.button-summary {
    display:none;
    cursor:pointer;
    position:fixed;
    bottom:0;
    left:0;
    z-index:50;
    width:100%;
    height:80px;
    line-height:80px;
    background:#34DA76!important;
	-webkit-transform: translateZ(0);
}

.button-summary-text {
    font-size:22px;
    color:#ffffff;
    font-weight:300;
	-webkit-transform: translateZ(0);
}

.button-summary:hover {
    background:#1DD867!important;
}

.table {
    display:table;
}

.table-row {
    display:table-row;
}

.table-col {
    display:table-cell;
}

/************************/
/*SYSTEMS STYLES IN FOLD*/
/************************/

/* Hide stuff */
.hidden-temp, #error, #errMsg, #missingAns, .template { display:none; }

/* Applied on all text elements */
.text {
    font-weight:300;
    word-wrap:break-word;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
	-webkit-transform: translateZ(0);
}

.text-container, .answer-options, .summary-container, .systems-buttons-container, .question-container, .question-image-container {
	-webkit-transform: translateZ(0);
	width:90%;
	max-width: 700px;
	-webkit-margin-before:15px;
	-webkit-margin-end:auto;
	-webkit-margin-start:auto;
	margin: 2vh auto 2vh auto;
}

.matrix-container.answer-options {
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
    margin: 2vh auto 0 auto;
}

.matrix-container.answer-labels {
	-webkit-transform: translateZ(0);
	width:90%;
	max-width: 700px;
	margin: 0 auto;
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
}

/** Image buttons stuff */
.imagebuttons.answer-options {
  max-width: 820px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.imagebuttons.answer-options .button-option {
  padding: 8px 8px 15px 8px;
}

@media (max-width: 767px) {
  .imagebuttons.answer-options .button-option {
    margin: 10px 1.5% 10px 1.5%;
    width: 47%;
  }

  .imagebuttons.answer-options .button-option:nth-child(2n) {
    //margin-right: 0;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .imagebuttons.answer-options .button-option {
    margin: 10px 1% 10px 1%;
    width: 31%;
  }

  .imagebuttons.answer-options .button-option:nth-child(3n) {
    //margin-right: 0;
  }
}

@media (min-width: 992px) {
  .imagebuttons.answer-options .button-option {
    margin: 10px 1% 10px 1%;
    width: 23%;
  }

  .imagebuttons.answer-options .button-option:nth-child(4n) {
    //margin-right: 0;
  }
}

.imagebuttons.answer-options .button-option .image-container {
  height: 170px;
  background: #fff;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.imagebuttons.answer-options .button-option .imagebuttons-image {
  max-width: 100%;
  max-height: 100%;
}


.ie9 .text-container, .ie9 .answer-options, .ie9 .summary-container, .ie9 .systems-buttons-container, .ie9 .question-container {
	margin: 40px auto 0 auto;
}

.text-container{
	margin-top: 6vh;
}

.ie9 .text-container{
	margin-top: 60px;
}

.text-question, .text-start, .text-disabled, .text-thank-you, .text-end-view-default {
    font-size:40px;
    line-height: 115%;
}

.text-description, .text-start-description, .text-thank-you-description, .text-disabled-description {
    margin-top:30px;
    font-size:24px;
}

.text-extra-info{
	font-size:14px;
	font-weight: 600;
	text-transform: uppercase;
	color: #c7c4c3!important;
	display:table;
	margin:30px auto 0 auto;
	background: rgba(0,0,0,0.5);
	padding:5px 15px 3px 12px;
	border-radius:22.5px;
}

.extra-info-icon-box, .extra-info-text-box{
	display:table-cell; vertical-align:middle;
}

.extra-info-icon-box{
	padding-top: 4px;
}

.extra-info-text-box{
	padding-left:10px;
	line-height: 24px;
}

.text-system {
    font-size:20px;
}

.summary-container {
    margin-bottom:150px;
}

.summary-container img {
	width:50px;
}

/* Applied to the "No answer" text on the summary screen */
.text-skipped {
    font-size:18px;
    font-weight:300;
    color:#9B9B9B!important;
}

.text-option-grading {
    color:#000000!important;
	transform: translateZ(0);
}

/************************/
/* DISABLED FORM SCREEN */
/************************/

.disabled-form-container {
    position:absolute;
    top:0;
    height:100%;
    left:0;
    width:100%;
    height:100%;
    text-align:center;
}

.text-disabled {
    font-size:45px;
}

.text-disabled-link {
	font-size:20px;
}

.disabled-circle {
    height:100px;
    width:100px;
    border-radius:50%;
    background-color:#F44141;
    margin:0 auto;
    padding-top:28px;
}

.text-container-disabled {
    margin:0 auto;
    margin-top:40px;
    width:90%;
}

/***********************/
/* END - DISABLED FORM */
/***********************/


/*********/
/* LOGOS */
/*********/

.responster-logo-container {
    margin-top:40px;
}

.responster-logo {
    height:42px;
}

.survey-logo {
    width:auto;
    height:auto;
    max-height:140px;
    max-width:80%;
    -webkit-margin-before:50px;
    margin: 8vh auto 0 auto;

}

.ie9 .survey-logo {
    margin: 40px auto 0 auto;

}

/***************/
/* END - LOGOS */
/***************/

.image-option {
	position:relative;
    display:inline-block;
    cursor:pointer;
    margin-top: 15px;
    margin-left:1.5%;
    margin-right:1.5%;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
	transform: translateZ(0);
    width:100%;
    height:100%;
}

.image-option img, .thumb-option img {
	max-width:300px;
	max-height:300px;
}

.image-option:first-child, .thumb-option:first-child {
	margin-left:0;
	text-align: right;
}

.image-option:last-child, .thumb-option:last-child {
	margin-right:0;
	text-align: left;
}

.thumb-option {
    position:relative;
    display:inline-block;
    width:100%;
    height:100%;
    margin-left:1.5%;
    margin-right:1.5%;
	cursor:pointer;
	-webkit-transform: translateZ(0);
}

.thumb-option img {
	-webkit-transform: translateZ(0);

}

.button-start {
    background:#000000;
    top:40px;
    left:50%;
    position:relative;
    width:160px;
    height:160px;
    border-radius:50%;
    font-size:50px;
    text-align:center;
    margin-left:-80px;
    cursor:pointer;
	box-shadow: inset 0 0 0 35px rgba(111,148,182,0);
	-webkit-transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
	margin-bottom: 80px;
}

.button-start-arrow-container {
    position:absolute;
    top:50%;
    left:50%;
    margin:-22px 0 0 -25px;
}

/* nps */
.nps-option {
	transition: all 0.2s ease;
	position: relative;
	display: inline-block;
	padding: 0;
	border-radius: 100%;
	box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.3);

	width: 6.80272109%;
	height: 0;
	padding-bottom: 6.80272109%;

	background: rgba(255, 255, 255, 1);

	margin-right: 0.444444444%;
	/*margin-right: 0.41%;*/
	-webkit-user-select: none;

	cursor: pointer;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

.nps-option span {

	font-size: 26px;

	line-height: 1;
	padding-top: 1px;
	color: #000;

	position: absolute;
	top: 50%; left: 50%;

	-ms-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);

	-webkit-user-select: none;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

.nps-option span > a {
	text-decoration: none;
	color: inherit;
}


.nps-option-selected {
	background: #6cbf65;
	color: #fff;
}

.nps-option:last-child {
	margin-right: 0;
}


.nps-option.not-chosen {
	background: rgba(255, 255, 255, 0.6);

}

.nps-option.active {

}
.nps-option.nps-option-selected span {
	padding-top: 2px;
	color: #fff;
}


/**************************/
/*ANIMATION STYLES IN FOLD*/
/**************************/
.image-option-selected, .thumb-option-selected {
	transform:  scaleX(1.10) scaleY(1.10);
	-moz-transform:  scaleX(1.10) scaleY(1.10);
	-webkit-transform:  scaleX(1.10) scaleY(1.10);
	-o-transform:  scaleX(1.10) scaleY(1.10);
	-ms-transform:  scaleX(1.10) scaleY(1.10);
}

.image-option-unselected, .thumb-option-unselected, .nps-option-unselected, .matrix-option-unselected span {
    opacity:0.6;
    transform:  scaleX(0.90) scaleY(0.90) ;
    -moz-transform:  scaleX(0.90) scaleY(0.90) ;
	-webkit-transform:  scaleX(0.90) scaleY(0.90);
	-o-transform:  scaleX(0.90) scaleY(0.90);
	-ms-transform:  scaleX(0.90) scaleY(0.90);
}

.image-option-click, .thumb-option-click, .nps-option-selected, .matrix-option-selected span {
  animation: image-option-animation ease-out 0.15s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: image-option-animation ease-out 0.15s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
  -moz-animation: image-option-animation ease-out 0.15s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -moz-animation-fill-mode:forwards; /*FF 5+*/
  -o-animation: image-option-animation ease-out 0.15s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -o-animation-fill-mode:forwards; /*Not implemented yet*/
  -ms-animation: image-option-animation ease-out 0.15s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
  -ms-animation-fill-mode:forwards; /*IE 10+*/
}

@keyframes image-option-animation{
  0% {
    transform:  scaleX(1.00) scaleY(1.00) ;
  }
  100% {
    transform:  scaleX(1.10) scaleY(1.10) ;
  }
}

@-moz-keyframes image-option-animation{
  0% {
    -moz-transform:  scaleX(1.00) scaleY(1.00) ;
  }
  100% {
    -moz-transform:  scaleX(1.10) scaleY(1.10) ;
  }
}

@-webkit-keyframes image-option-animation {
  0% {
    -webkit-transform:  scaleX(1.00) scaleY(1.00) ;
  }
  100% {
    -webkit-transform:  scaleX(1.10) scaleY(1.10) ;
  }
}

@-o-keyframes image-option-animation {
  0% {
    -o-transform:  scaleX(1.00) scaleY(1.00) ;
  }
  100% {
    -o-transform:  scaleX(1.10) scaleY(1.10) ;
  }
}

@-ms-keyframes image-option-animation {
  0% {
    -ms-transform:  scaleX(1.00) scaleY(1.00) ;
  }
  100% {
    -ms-transform:  scaleX(1.10) scaleY(1.10) ;
  }
}

.image-option-unclick, .thumb-option-unclick {
  animation: image-option-unclick-animation ease-out 0.15s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: image-option-unclick-animation ease-out 0.15s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
  -moz-animation: image-option-unclick-animation ease-out 0.15s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -moz-animation-fill-mode:forwards; /*FF 5+*/
  -o-animation: image-option-unclick-animation ease-out 0.15s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -o-animation-fill-mode:forwards; /*Not implemented yet*/
  -ms-animation: image-option-unclick-animation ease-out 0.15s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
  -ms-animation-fill-mode:forwards; /*IE 10+*/
}

@keyframes image-option-unclick-animation{
  0% {
    opacity:1;
    transform:  scaleX(1.00) scaleY(1.00) ;
  }
  100% {
    opacity:0.6;
    transform:  scaleX(0.90) scaleY(0.90) ;
  }
}

@-moz-keyframes image-option-unclick-animation{
  0% {
    opacity:1;
    -moz-transform:  scaleX(1.00) scaleY(1.00) ;
  }
  100% {
    opacity:0.6;
    -moz-transform:  scaleX(0.90) scaleY(0.90) ;
  }
}

@-webkit-keyframes image-option-unclick-animation {
  0% {
    opacity:1;
    -webkit-transform:  scaleX(1.00) scaleY(1.00) ;
  }
  100% {
    opacity:0.6;
    -webkit-transform:  scaleX(0.90) scaleY(0.90) ;
  }
}

@-o-keyframes image-option-unclick-animation {
  0% {
    opacity:1;
    -o-transform:  scaleX(1.00) scaleY(1.00) ;
  }
  100% {
    opacity:0.6;
    -o-transform:  scaleX(0.90) scaleY(0.90) ;
  }
}

@-ms-keyframes image-option-unclick-animation {
  0% {
    opacity:1;
    -ms-transform:  scaleX(1.00) scaleY(1.00) ;
  }
  100% {
    opacity:0.6;
    -ms-transform:  scaleX(0.90) scaleY(0.90) ;
  }
}

.image-option-confirm-click, .thumb-option-confirm-click{
  animation: image-option-confirm-click-animation linear 0.10s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: image-option-confirm-click-animation linear 0.10s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
  -moz-animation: image-option-confirm-click-animation linear 0.10s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -moz-animation-fill-mode:forwards; /*FF 5+*/
  -o-animation: image-option-confirm-click-animation linear 0.10s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -o-animation-fill-mode:forwards; /*Not implemented yet*/
  -ms-animation: image-option-confirm-click-animation linear 0.10s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
  -ms-animation-fill-mode:forwards; /*IE 10+*/
}

@keyframes image-option-confirm-click-animation{
  0% {
    opacity:1;
    transform:  scaleX(1.00) scaleY(1.00) ;
  }
  12% {
    opacity:0.85;
    transform:  scaleX(0.95) scaleY(0.95) ;
  }
  100% {
    opacity:1;
    transform:  scaleX(1.10) scaleY(1.10) ;
  }
}

@-moz-keyframes image-option-confirm-click-animation{
  0% {
    opacity:1;
    -moz-transform:  scaleX(1.00) scaleY(1.00) ;
  }
  12% {
    opacity:0.85;
    -moz-transform:  scaleX(0.95) scaleY(0.95) ;
  }
  100% {
    opacity:1;
    -moz-transform:  scaleX(1.10) scaleY(1.10) ;
  }
}

@-webkit-keyframes image-option-confirm-click-animation {
  0% {
    opacity:1;
    -webkit-transform:  scaleX(1.00) scaleY(1.00) ;
  }
  12% {
    opacity:0.85;
    -webkit-transform:  scaleX(0.95) scaleY(0.95) ;
  }
  100% {
    opacity:1;
    -webkit-transform:  scaleX(1.10) scaleY(1.10) ;
  }
}

@-o-keyframes image-option-confirm-click-animation {
  0% {
    opacity:1;
    -o-transform:  scaleX(1.00) scaleY(1.00) ;
  }
  12% {
    opacity:0.85;
    -o-transform:  scaleX(0.95) scaleY(0.95) ;
  }
  100% {
    opacity:1;
    -o-transform:  scaleX(1.10) scaleY(1.10) ;
  }
}

@-ms-keyframes image-option-confirm-click-animation {
  0% {
    opacity:1;
    -ms-transform:  scaleX(1.00) scaleY(1.00) ;
  }
  12% {
    opacity:0.85;
    -ms-transform:  scaleX(0.95) scaleY(0.95) ;
  }
  100% {
    opacity:1;
    -ms-transform:  scaleX(1.10) scaleY(1.10) ;
  }
}

.button-start-click {
  animation: button-start-anim linear 0.3s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  -webkit-animation: button-start-anim linear 0.3s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: button-start-anim linear 0.3s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -o-animation: button-start-anim linear 0.3s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -ms-animation: button-start-anim linear 0.3s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
}

@keyframes button-start-anim {
  0% {
    opacity:1;
    transform:  scaleX(1.00) scaleY(1.00) ;
  }
  7% {
    opacity:1;
    transform:  scaleX(0.80) scaleY(0.80) ;
  }
  100% {
    opacity:0;
    transform:  scaleX(1.30) scaleY(1.30) ;
  }
}

@-moz-keyframes button-start-anim{
  0% {
    opacity:1;
    -moz-transform:  scaleX(1.00) scaleY(1.00) ;
  }
  7% {
    opacity:1;
    -moz-transform:  scaleX(0.80) scaleY(0.80) ;
  }
  100% {
    opacity:0;
    -moz-transform:  scaleX(1.30) scaleY(1.30) ;
  }
}

@-webkit-keyframes button-start-anim {
  0% {
    opacity:1;
    -webkit-transform:  scaleX(1.00) scaleY(1.00) ;
  }
  7% {
    opacity:1;
    -webkit-transform:  scaleX(0.80) scaleY(0.80) ;
  }
  100% {
    opacity:0;
    -webkit-transform:  scaleX(1.30) scaleY(1.30) ;
  }
}

@-o-keyframes button-start-anim {
  0% {
    opacity:1;
    -o-transform:  scaleX(1.00) scaleY(1.00) ;
  }
  7% {
    opacity:1;
    -o-transform:  scaleX(0.80) scaleY(0.80) ;
  }
  100% {
    opacity:0;
    -o-transform:  scaleX(1.30) scaleY(1.30) ;
  }
}

@-ms-keyframes button-start-anim {
  0% {
    opacity:1;
    -ms-transform:  scaleX(1.00) scaleY(1.00) ;
  }
  7% {
    opacity:1;
    -ms-transform:  scaleX(0.80) scaleY(0.80) ;
  }
  100% {
    opacity:0;
    -ms-transform:  scaleX(1.30) scaleY(1.30) ;
  }
}


.button-multiple-selected {
	transform:  scaleX(1.05) scaleY(1.05)!important;
	-moz-transform:  scaleX(1.05) scaleY(1.05)!important;
	-webkit-transform:  scaleX(1.05) scaleY(1.05)!important;
	-o-transform:  scaleX(1.05) scaleY(1.05)!important;
	-ms-transform:  scaleX(1.05) scaleY(1.05)!important;
}

.button-multiple-click {
  animation: button-multiple-animation ease-out 0.15s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: button-multiple-animation ease-out 0.15s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
  -moz-animation: button-multiple-animation ease-out 0.15s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -moz-animation-fill-mode:forwards; /*FF 5+*/
  -o-animation: button-multiple-animation ease-out 0.15s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -o-animation-fill-mode:forwards; /*Not implemented yet*/
  -ms-animation: button-multiple-animation ease-out 0.15s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
  -ms-animation-fill-mode:forwards; /*IE 10+*/
}

@keyframes button-multiple-animation{
  0% {
    transform:  scaleX(1.00) scaleY(1.00) ;
  }
  100% {
    transform:  scaleX(1.05) scaleY(1.05) ;
  }
}

@-moz-keyframes button-multiple-animation{
  0% {
    -moz-transform:  scaleX(1.00) scaleY(1.00) ;
  }
  100% {
    -moz-transform:  scaleX(1.05) scaleY(1.05) ;
  }
}

@-webkit-keyframes button-multiple-animation {
  0% {
    -webkit-transform:  scaleX(1.00) scaleY(1.00) ;
  }
  100% {
    -webkit-transform:  scaleX(1.05) scaleY(1.05) ;
  }
}

@-o-keyframes button-multiple-animation {
  0% {
    -o-transform:  scaleX(1.00) scaleY(1.00) ;
  }
  100% {
    -o-transform:  scaleX(1.05) scaleY(1.05) ;
  }
}

@-ms-keyframes button-multiple-animation {
  0% {
    -ms-transform:  scaleX(1.00) scaleY(1.00) ;
  }
  100% {
    -ms-transform:  scaleX(1.05) scaleY(1.05) ;
  }
}

.button-option-selected {
	transform:  scaleX(1.05) scaleY(1.05)!important;
	-moz-transform:  scaleX(1.05) scaleY(1.05)!important;
	-webkit-transform:  scaleX(1.05) scaleY(1.05)!important;
	-o-transform:  scaleX(1.05) scaleY(1.05)!important;
	-ms-transform:  scaleX(1.05) scaleY(1.05)!important;
}

.button-option-unselected {
    opacity:0.6;
}

.button-option-click {
  animation: button-option-animation ease-out 0.15s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: button-option-animation ease-out 0.15s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
  -moz-animation: button-option-animation ease-out 0.15s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -moz-animation-fill-mode:forwards; /*FF 5+*/
  -o-animation: button-option-animation ease-out 0.15s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -o-animation-fill-mode:forwards; /*Not implemented yet*/
  -ms-animation: button-option-animation ease-out 0.15s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
  -ms-animation-fill-mode:forwards; /*IE 10+*/
}

@keyframes button-option-animation{
  0% {
    transform:  scaleX(1.00) scaleY(1.00) ;
  }
  100% {
    transform:  scaleX(1.05) scaleY(1.05) ;
  }
}

@-moz-keyframes button-option-animation{
  0% {
    -moz-transform:  scaleX(1.00) scaleY(1.00) ;
  }
  100% {
    -moz-transform:  scaleX(1.05) scaleY(1.05) ;
  }
}

@-webkit-keyframes button-option-animation {
  0% {
    -webkit-transform:  scaleX(1.00) scaleY(1.00) ;
  }
  100% {
    -webkit-transform:  scaleX(1.05) scaleY(1.05) ;
  }
}

@-o-keyframes button-option-animation {
  0% {
    -o-transform:  scaleX(1.00) scaleY(1.00) ;
  }
  100% {
    -o-transform:  scaleX(1.05) scaleY(1.05) ;
  }
}

@-ms-keyframes button-option-animation {
  0% {
    -ms-transform:  scaleX(1.00) scaleY(1.00) ;
  }
  100% {
    -ms-transform:  scaleX(1.05) scaleY(1.05) ;
  }
}

.button-option-unclick {
  animation: button-option-unclick-animation ease-out 0.15s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: button-option-unclick-animation ease-out 0.15s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
  -moz-animation: button-option-unclick-animation ease-out 0.15s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -moz-animation-fill-mode:forwards; /*FF 5+*/
  -o-animation: button-option-unclick-animation ease-out 0.15s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -o-animation-fill-mode:forwards; /*Not implemented yet*/
  -ms-animation: button-option-unclick-animation ease-out 0.15s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
  -ms-animation-fill-mode:forwards; /*IE 10+*/
}

@keyframes button-option-unclick-animation{
  0% {
    opacity:1;
    transform:  scaleX(1.00) scaleY(1.00) ;
  }
  100% {
    opacity:0.6;
  }
}

@-moz-keyframes button-option-unclick-animation{
  0% {
    opacity:1;
    -moz-transform:  scaleX(1.00) scaleY(1.00) ;
  }
  100% {
    opacity:0.6;
  }
}

@-webkit-keyframes button-option-unclick-animation {
  0% {
    opacity:1;
    -webkit-transform:  scaleX(1.00) scaleY(1.00) ;
  }
  100% {
    opacity:0.6;
  }
}

@-o-keyframes button-option-unclick-animation {
  0% {
    opacity:1;
    -o-transform:  scaleX(1.00) scaleY(1.00) ;
  }
  100% {
    opacity:0.6;
  }
}

@-ms-keyframes button-option-unclick-animation {
  0% {
    opacity:1;
    -ms-transform:  scaleX(1.00) scaleY(1.00) ;
  }
  100% {
    opacity:0.6;
  }
}
/**************************/
/*ANIMATION STYLES IN FOLD*/
/**************************/

.button-send-answers {
    cursor:pointer;
    width:40%;
    height:70px;
    border-radius:4px;
    text-align:center;
    padding-top:22px;
    margin:0 auto;
}

.button-skip, .button-answer, .forward, .back {
    background: rgba(0, 0, 0, 0.5);
    display: none;
    overflow: hidden;
    height: 100px;
    width: 100px;
    border-radius: 100px;
    content: '';
    position: absolute;
    top: 50%;
    margin-top: -50px;
    cursor: pointer;
    z-index: 1;
    transition: all 0.15s ease;
} .button-skip span, .button-answer span, .forward div span, .back div span {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
      z-index: 100;
  }
.back {
  left: 20px;
}

.button-answer, .button-skip, .forward {
    right: 20px;
}

.navigation-control-bottom {
    height: 50px;
    width: 100%;
    position: fixed;
    bottom: 0px;
    z-index:100;
    background: rgba(0, 0, 0, 0.25);
}

.button-option {
    cursor:pointer;
    background:#D87878;
    font-size:18px;
    font-weight:500;
    border-radius:4px;
    min-height:48px;
    padding:15px 15px 15px 15px;
    margin:0 auto;
    margin-bottom:7px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
	transform: translateZ(0);
}

.option-active {
    background:#34DA76!important;
    /*    background:#5EC519!important;*/
    color:#fff;
}

.question-unavailable {
	font-size:24px;
	color:#aaaaaa;
}
/***************************************************/
/* CAMERA QUESTION TYPE STYLING - DISABLED IN FOLD */
/***************************************************/

/*.option-camera {
	padding-top:100px;
}

.camera-container {
    position:relative;
    width:300px;
    height:380px;
    border-radius:4px;
    display:inline-block;
    cursor:pointer;
}

.open-camera-button {
	font-size:20px;
	font-weight:400;
	width:100%;
	height:80px;
	line-height:80px;
	position:absolute;
	bottom:0;
	border-radius:0 0 2px 2px;
}

.camera-button-retake-photo {
	width:200px;
	display:inline-block;
	height:60px;
	line-height:60px;
	background-color:rgba(0,0,0,.6);
	color:#fff;
	border-radius:2px;
	cursor:pointer;
	margin-top:30px;

}
.camera-preview {
	border-radius:2px 2px 0 0;
}

.camera-preview img {
	border-radius:2px 2px 0 0;
	max-height:300px;
}
*/
/***************************************************/
/* CAMERA QUESTION TYPE STYLING - DISABLED IN FOLD */
/***************************************************/

.answer-textarea {
    margin-top:40px;
    position:relative;
}

.answer-input {
    margin-top:40px;
    position:relative;
}

.input {
    position:relative;
    background:#ffffff;
    border-radius:4px 4px 0 0;
    width:100%;
    padding:15px 20px 15px 20px;
    border:none;
    resize:none;
    font-size:24px;
    text-align: center;
    line-height: 200%;
}

.input::-webkit-input-placeholder, .input:-moz-placeholder, .input::-moz-placeholder, .input:-ms-input-placeholder{
   font-size:24px;
}


.textarea {
    position:relative;
    background:#ffffff;
    border-radius:4px 4px 0 0;
    height:200px;
    width:100%;
    padding:15px 20px 15px 20px;
    border:none;
    resize:none;
    font-size:24px;
    display:block
}

.button-text {
    cursor:pointer;
    margin:0 auto;
    line-height: 100%;
    height:70px;
    text-align:center;
    padding-top:25px;
    border-radius:0 0 4px 4px;
    font-size:20px;
}

.summary-row {
    width:100%;
    margin-bottom:15px;
}

.summary-header {
    background:#C4C3C2;
    min-height:60px;
    color:#484848;
    font-size:18px;
    font-weight:400;
    padding:19px 40px 19px 40px;
    border-radius:2px 2px 0 0;
}

.summary-content {
    cursor:pointer;
    background:#ffffff;
    padding:20px 40px 20px 40px;
    border-radius:0 0 2px 2px;
    font-size:22px;
    color:#000000;
}

.summary-content .summary-header {
    min-height: 40px;
    padding: 8px 10px;
    font-size: 16px;
}

.summary-content .summary-content {
	padding: 10px 20px;
    font-size: 18px;
}

.summary-content:hover {
    background:#f5f5f5;
}

.text-alert-container, .text-info-container {
    padding:10px;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    display:none;
    background-color:rgba(244,65,65,1);
}

.text-alert {
    color:#ffffff;
    font-size:13px;
    font-weight:500;
    text-transform:uppercase;
}

.button-option-text{
	word-wrap:break-word;
	line-height: 200%;
}

.anslong{line-height:100%;}

/* Matrix before cleanup */
.icon-engine-gray-left {width:10px;height:16px;background-position: -56px -298px;}
.icon-engine-gray-right {width:10px;height:16px;background-position: -73px -298px;}

.matrix-container  {
	background: #fff;
	border-radius: 8px;
	overflow: hidden;

	position: relative;
}
.matrix-container.answer-options {
	margin-top: 10px;
}

.matrix-container .question-header {
	padding: 20px 0 16px 0;
	text-align: center;
	font-size: 14px;
	color: rgb(153, 153, 153);
	display: block;
	text-transform: uppercase;
	font-weight: 500;
	cursor: auto;
}
.matrix-container .question-header .arrow-left,
.matrix-container .question-header .arrow-right {
	position: absolute;
	cursor: pointer;
}
.matrix-container .question-header .arrow-left {
	left: 17px;
}
.matrix-container .question-header .arrow-right {
	right: 17px;
}

.matrix-container .question-questions {
	position: relative;
	height: 115px;
}

.matrix-container .question-content {
	font-size: 26px;
	font-weight: 300;
	text-align: center;
	line-height: 34px;
	padding: 0 2.22222222% 30px 2.22222222%;
	position: absolute;
	width: 100%;
}

.matrix-container .question-options {
	float: left;
	width: 100%;
	border-top: 1px solid #e7e7e7;

	padding: 30px 1.66666667% 0px 1.66666667%;
	background: #fff;
	overflow: hidden;
}
.matrix-container .question-options .matrix-option {
	float: left;
	width: 16.6666667%;
	position: relative;
	padding: 0 1.66666667%;
	cursor: pointer;
}
.matrix-container .question-options .matrix-option span {
	transition: all 0.15s ease;
	margin: 0px auto;

	display: block;
	width: 50px;
	height: 50px;
	border: 1px solid #d3d3d3;
	border-radius: 33.3px;
	margin-bottom: 15px;
	font-size: 22px;
	color: #000;
	padding: 9px;
}

.matrix-container .question-options .matrix-option.matrix-option-selected {
}

.matrix-container .question-options .matrix-option.matrix-option-selected span {
	background: #6cbf65;
	color: #fff;
	border: 1px solid #6cbf65;
}

.matrix-container .label-wrapper {
	padding: 0 1.66666667% 0px;
	clear: both;
}


.matrix-container .label {
	text-align: center;
	display: block;

	font-size: 14px;
	font-weight: 500;
	color: #999999;
	text-transform: uppercase;
}

.matrix-container .question-option-label-right,
.matrix-container .question-option-label-left {
	width: 50%;
	margin-bottom: 30px;
	padding: 0 1.66666667%;;
	word-wrap: break-word;
}

.matrix-container .question-option-label-right {
	float: right;
	text-align: right;
}

.matrix-container .question-option-label-left {
	float: left;
	text-align: left;
}

#custom-redirect-container {
    display: none;
    margin-top: 50px;
}

.question-image-container {

}

.question-image {
    width:auto;
    height:auto;
    max-width: 100%;
    /* max-height: 250px; */
}

#fadeRedirect {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #fff;
    display: none;
    z-index: 1000;
}

#fadeRedirect > div {
    visibility: hidden;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
#fadeRedirect #backToStartView {
    margin-top: 20px;
    cursor: pointer;
    padding: 20px;
    border-radius: 3px;
    width: 200px;
    margin: 30px auto;
    box-shadow: 2px 2px 2px 0px rgba(56,56,56,0.5);
    background: #00ACEE;
    color: #fff;
}
#fadeRedirect #backToStartView:hover {
    opacity: 0.5;
}


/***********************************
********** RESPONSIVENESS **********
***********************************/

/*smartphones PORTRAIT */
@media screen and (orientation: portrait) and (min-width: 0px) and (max-width: 320px), screen and (orientation: portrait) and (min-device-width: 0px) and (max-device-width: 320px){

	/*FOR IE*/
	.ie9 .text-container, .ie9 .answer-options, .ie9 .summary-container, .ie9 .systems-buttons-container, .ie9 .question-container {
		margin: 10px auto 0 auto;
	}

	/*FOR IE*/
	.ie9 .matrix-container .question-header .arrow-left {
		left: 30px;
	}
	.ie9 .matrix-container .question-header .arrow-right {
		right: 30px;
	}

	/*FOR IE*/
	.ie9 .input {
	    padding:0px;
	    line-height: 100%;
	}

	/*FOR IE*/
	.ie9 .survey-logo {
	    margin: 30px auto 0 auto;
	}

	/*FOR IE*/
	.ie9 .text-container{
		margin-top: 10px;
	}

	.text-question, .text-start, .text-disabled, .text-thank-you {
        font-size:8vw;
    }

    /*FOR IE*/
	.ie9 .text-question, .ie9 .text-start, .ie9 .text-disabled, .ie9 .text-thank-you {
        font-size:30px;
    }

    .text-question{
	    margin-top: 9vh;
    }

    /*FOR IE*/
    .ie9 .text-question{
	    margin-top: 15px;
    }

    .text-description, .text-start-description, .text-thank-you-description, .text-disabled-description{
	    font-size: 4.8vw;
	    line-height: 110%;
	    margin-top: 20px;
    }

    /*FOR IE*/
    .ie9 .text-description, .ie9 .text-start-description, .ie9 .text-thank-you-description, .ie9 .text-disabled-description{
	    font-size: 15px;
    }

    .button-option, .input, .input::-webkit-input-placeholder, .input:-moz-placeholder, .input::-moz-placeholder, .input:-ms-input-placeholder{
    	font-size: 3vw;
    }

    /*FOR IE*/
    .ie9 .button-option, .ie9 .input, .ie9 .input::-webkit-input-placeholder, .ie9 .input:-moz-placeholder, .ie9 .input::-moz-placeholder, .ie9 .input:-ms-input-placeholder{
    	font-size: 15px;
    }

    .text-extra-info{
	    margin-top: 10px;
    }

    .extra-info-icon-box{
    	display:none;
    }

	.extra-info-text-box{
	    font-size: 3.5vw;
    }

    /*FOR IE*/
	.ie9 .extra-info-text-box{
	    font-size: 11px;
    }

    .nps-option {
    	line-height: 26.4px;
    	width: 24px;
    	height: 24px;
		margin-right: 0.744444%;
    }
    .nps-option span {
    	font-size: 16px;
    }

    /* Web Intercept Start */

    /* Startview, Endview */
    .survey-logo {
    	max-height: 70px;
    }

    .text-container {
    	margin-top: 2vh;
    }

    .text-question, .text-start, .text-disabled, .text-thank-you, .text-end-view-default {
        font-size:20px;
        line-height: 115%;
    }

    .button-start {
    	top: 20px;
        width:100px;
        height:100px;
        margin-left:-50px;
    }

    /*FOR IE*/
    .ie9 .text-container {
    	margin-top: 5px;
    }

    #startButton {
    	width: 100px;
    	height: 100px;
    	margin-left: -50px;
    }

    /* Matrix */
    .matrix-container .question-header {
    	padding-top: 10px;
    	padding-bottom: 10px;
    }

    .matrix-container .question-options .matrix-option .label {
    	font-size: 12px;
    }

    .matrix-container .question-questions {
    	height: 100px;
    }

    .matrix-container .question-options {
    	padding-top: 10px;
    	padding-bottom: 10px;
    }

    /* Textarea & text */

    *::-webkit-input-placeholder {
        font-size:20px;
        font-weight:300;
    }
    *:-moz-placeholder {
        /* FF 4-18 */
        font-size:20px;
        font-weight:300;
    }
    *::-moz-placeholder {
        /* FF 19+ */
        font-size:20px;
        font-weight:300;
    }
    *:-ms-input-placeholder {
        /* IE 10+ */
        font-size:20px;
        font-weight:300;
    }

    .answer-textarea {
    	margin-top: 25px;
    }

    .textarea {
    	height: 160px;
    	font-size: 20px;
    }

    input {
    	font-size: 20px!important;
    	padding: 10px 20px 10px 20px!important;
    	line-height: 20px;
    }

    /*FOR IE*/
    .ie9 input {
    	padding: 0px;

    }

    .button-text {
    	height: 50px;
    	padding-top: 16px;
    	font-size: 18px;
    }

    /* Multiple choice */
    .button-option {
    	min-height: 48px;
    	padding-top: 15px;
    	padding-bottom: 15px;
    }

    .button-option-text {
    	line-height: 16px;
    	font-size: 16px;
    }

    /* Summary */
    .summary-header {
    	min-height: 36px;
    	padding-top: 10px;
    	padding-bottom: 10px;
    }

    .summary-content {
    	padding-top: 10px;
    	padding-bottom: 10px;
    }

    .summary-container img {
    	width: 40px;
    }

    /* Button forward / back */
    .button-summary {
    	height: 60px;
    	line-height: 60px;
    }

    .back {
    	left: 20px;
    }

    .button-summary-text {
    	font-size: 22px;
    }

    .button-answer, .button-skip, .forward {
    	right: 20px;
    }

    .ui-element-white span, .ui-element-black span {
    	margin-top: 2.5px;
    }

    /* Web Intercept End */
}

/*smartphones PORTRAIT */
@media screen and (orientation: portrait) and (min-width: 321px) and (max-width: 640px), screen and (orientation: portrait) and (min-device-width: 321px) and (max-device-width: 640px){

	.text-question, .text-start, .text-disabled, .text-thank-you {
        font-size:8vw;
    }

    /*FOR IE*/
	.ie9 .text-question, .ie9 .text-start, .ie9 .text-disabled, .ie9 .text-thank-you {
        font-size:30px;
    }

    .text-question{
	    margin-top: 9vh;
    }

    /*FOR IE*/
    .ie9 .text-question{
	    margin-top: 10px;
    }

    .text-description, .text-start-description, .text-thank-you-description, .text-disabled-description{
	    font-size: 4.8vw;
	    line-height: 110%;
	    margin-top: 20px;
    }

    /*FOR IE*/
    .ie9 .text-description, .ie9 .text-start-description, .ie9 .text-thank-you-description, .ie9 .text-disabled-description{
	    font-size: 15px;
    }

    .button-option, .input, .input::-webkit-input-placeholder, .input:-moz-placeholder, .input::-moz-placeholder, .input:-ms-input-placeholder{
    	font-size: 3vw;
    }

    /*FOR IE*/
    .ie9 .button-option, .ie9 .input, .ie9 .input::-webkit-input-placeholder, .ie9 .input:-moz-placeholder, .ie9 .input::-moz-placeholder, .ie9 .input:-ms-input-placeholder{
    	font-size: 7px;
    }

    .text-extra-info{
	    margin-top: 10px;
    }

    .extra-info-icon-box{
    	display:none;
    }

    .extra-info-text-box{
	    font-size: 2.3vw;
    }

    /*FOR IE */
    .ie9 .extra-info-text-box{
	    font-size: 4px;
    }
}



/*smartphones LANDSCAPE */
@media screen and (orientation: landscape) and (min-height: 0px) and (max-height: 640px), screen and (orientation: landscape) and (min-device-height: 0px) and (max-device-height: 640px){

	.text-question, .text-start, .text-disabled, .text-thank-you {
        font-size:7vh;
    }

    /*FOR IE*/
	.ie9 .text-question, .ie9 .text-start, .ie9 .text-disabled, .ie9 .text-thank-you {
    	font-size:30px;
    }

    .text-description, .text-start-description, .text-thank-you-description, .text-disabled-description{
	    font-size: 4vh;
	    line-height: 110%;
	    margin-top: 20px;
    }

    /*FOR IE*/
    .ie9 .text-description, .ie9 .text-start-description, .ie9 .text-thank-you-description, .ie9 .text-disabled-description{
	    font-size: 15px;
    }

    .button-option{
	    font-size: 4vh;
    }

    /*FOR IE*/
    .ie9 .button-option{
	    font-size: 7px;
    }

    .survey-logo{
	 	max-height: 10vh;
    }

    /*FOR IE*/
    .ie9 .survey-logo{
	 	max-height: 30px;
    }
}

/*small + low resolution tablets PORTRIAT*/
@media screen and (orientation: portrait) and (min-width: 641px) and (max-width: 800px), screen and (orientation: portrait) and (min-device-width: 641px) and (max-device-width: 800px) {

	.text-question{
	    margin-top: 7vh;
    }

    /*FOR IE*/
	.ie9 .text-question{
	    margin-top: 15px;
	}

	.button-option{
	    font-size: 3vw;
    }

    /*FOR IE*/
	.ie9 .button-option{
	    font-size: 7px;
    }

}

/* lower than 800px */
@media screen and (max-width: 800px) {
	.nps-option span {
		font-size: 3.2vw;
		font-size: 125%;
	}

	/*FOR IE*/
	.ie9 .nps-option span {
		font-size: 10px;
		font-size: 125%;
	}
}

@media screen and (max-width: 550px) {
	.nps-option {
		margin-right: 2%;
	}

	.nps-option span {
		font-size: 3vw;
		font-size: 14px;
		padding-top: 0;
		line-height: 1px;
	}

	/*FOR IE*/
	.ie9 .nps-option span {
		font-size: 10px;
		font-size: 14px;
		padding-top: 0;
		line-height: 1px;
	}

	.matrix-container .question-options .matrix-option span {
		width: 35px;
		height: 35px;
		font-size: 18px;
		padding: 5px;
	}

	.matrix-container .question-content {
    	font-size: 5.2vw;
    	font-weight: 400;
    }

    /*FOR IE*/
	.ie9 .matrix-container .question-content {
    	font-size: 15px;
    }
}

@media screen and (max-width: 330px) {
	.nps-option {
		margin-right: 0.8%;
	}

	.matrix-option {

	}

	.matrix-container .question-options .matrix-option span {
		width: 25px;
		height: 25px;
		font-size: 17px;
		padding: 0;
	}
}

/* IE FIX */
.preview.ie9 {

}

.preview.ie9 .answer-options {
	margin-top: 30px !important;
}
.preview.ie9 .text-container {
	margin-top: 45px !important;
}

@media all and (min-width: 1150px) {
    .navigation-control-bottom {
        display: none !important;
    }
    .icon-engine-white-right-small, .icon-engine-white-left-small {
        display: none;
    }
}

@media all and (max-width: 1150px) {
    .progress-bar {
        position: fixed;
        top: 0;
    }

    .button-answer, .button-skip, .forward {
        right: 5px;
    }
    .back {
        left: 5px;
    }

    .forward, .back, .button-skip, .button-answer {
        top: 100%;
        position: fixed;
        height: 40px;
        width: 40px;
        z-index: 999;
        margin-top: -45px;
        border-radius: 3px;
    }
    .button-skip span, .button-answer span, .forward div span {
        left: 4px;
    }

    .back div span {
        right: 4px;
    }

    .forward span, .back span, .button-skip span, .button-answer span {
        display: none;
    }

    .icon-engine-white-right-small, .icon-engine-white-left-small {
        display: block;
        position: absolute;
        left: 15px;
        top: 10px;
        width: 10px;
        height: 18px;
    }

    .icon-engine-white-right-small {
        background-position: -96px -296px;
    }
    .icon-engine-white-left-small {
        background-position: -85px -296px;
    }
}