input, select, textarea { font-family:'focobold'; text-transform:uppercase; } 



::-webkit-input-placeholder { /* WebKit browsers */
    color:    #c6c6c6;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #c6c6c6;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #c6c6c6;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #c6c6c6;
}

input[type='submit']
{
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none; 
}
input[type=text]::-ms-clear {
    display: none;
}

input[type=password]::-ms-reveal {
    display: none;
}

.ar { display: block; text-align: right; }
.al { display: block; text-align: left; }
.ac { display: block; text-align: center; }
.acc { display: block; text-align: justify; }
.cl { clear: both; height: 0; line-height: 0; font-size: 0; text-indent: -4000px; }
.fr { float: right; display: inline; }
.fl { float: left; display: inline; }
.hidden { display: none; }
.notext { font-size: 0; line-height: 0; text-indent: -4000px; }
.shell { margin: 0 auto; width: 960px; }
.motionDanmarkForm .hidden{ display: none;}
.motionDanmarkForm textarea, .motionDanmarkForm input { outline: none; }

h1#logo{ width:80%; max-width:530px; text-align: center; margin:0px auto 0 auto; margin-bottom:50px; margin-top:50px;}
h1#logo img{ width:100%; }

#header { position:relative; z-index: 1; height:157px; background: url(images/header.jpg) no-repeat center 0;}


/************************ popup styles *********************************/
#popup{  position: absolute; top:70px; z-index: 1000; width:100%;}
#popup p.close-window{ 
    padding-bottom:15px; 
    display: block; 
    font-size: 14px; 
    text-align: center; 
    font-family:'focobold';
}
#popup p.close-window a{ color:#2fb0d7; }
#popup a:hover.close{ text-decoration: underline}
#popup .motionDanmarkForm{ position: relative;}

#black-screen{width:100%; background:#000; height:100%; position:fixed; top:0; left:0; z-index:10; opacity: 0.7; -moz-opacity: 0.7;}
#black-screen{filter:alpha(opacity=70); min-height: 100%; height: auto!important; height:100%;}

/***************************** end of popup styles *************************/


/************************** header bar styles ********************/

h3{ 
    font-size: 24px; 
    line-height:69px; 
    color:#fff;
    background:#2fb0d7; 
    text-align: center; 
    font-weight: normal; 
    font-family: 'focobold';
    border:solid 1px #2fb0d7; 
    -webkit-border-radius: 5px 5px 0px 0px; 
    border-radius: 5px 5px 0px 0px; 
    margin:0;
}
h3.red{ background:#e14f49; border:solid 2px #e14f49;}
h3.green{ background:#07c8b3; border:solid 2px #07c8b3;}

/************************ end of header bar styles *************/

/************** form container styles*********************/
.motionDanmarkHolder{ width:48%; padding:0;  display: inline-block; background-color:#fff;}
.messageDimension{
	width:100%;
	}
.DA_radio_holder, 
.DA_check_holder, 
.DA_select_holder{ position:relative;}

.DA_check_holder, .DA_radio_holder{ margin:16px 10%;}
.DA_radio_holder{ padding:0px 0 0 0;}
/************** end of form container styles*********************/

/********************* text fields frames styles **********************/

.motionDanmarkForm{ margin:auto; width:100%; position: relative; z-index: 1}
.motionDanmarkForm .motionDanmarkFormContainer{ display: block; width:100%; height:25px; padding:4px 0;  border:solid 2px #ccc; }
.motionDanmarkForm .motionDanmarkFormContainer{ position: relative; z-index: 1;}

.motionDanmarkForm .textarea-frame{ display: block; width:100%; height:146px; padding:10px 0;  border:solid 2px #ccc; }
.motionDanmarkForm .textarea-frame{ -webkit-border-radius: 0px; border-radius: 0px;}
.motionDanmarkForm .textarea-frame{ position: relative; z-index: 1;}

.motionDanmarkForm p{ display:none;}
.motionDanmarkForm span{ color:#fff; float: right; text-align: left; width:30px; font-size: 21px; line-height:26px; }
.motionDanmarkForm  span.error, .motionDanmarkForm a.error{ color:#e74c3c;}
.motionDanmarkForm span.ok{ color:#306b88;}

.motionDanmarkForm .field{ float: left; display: inline; width:84%;  font-size: 14px; line-height:14px; border:0; color:#306b88; }
.motionDanmarkForm .field{  height:28px; padding:0 0 0 2%; overflow:auto; resize: none; position: relative; z-index: 1}

.messageDimension .field{
	height:146px;
	width:92%;
	}
.DA_inner_frame{ background:#fff; padding-top:10px; padding-bottom:20px;  -webkit-border-radius: 0px; }

/****************** end of text fields styles *******************/

/********************* submit buttons styles *********************/

.motionDanmarkForm .btnp input{ 
	width:584px;
	height:40px;
	background-color:#383838;
	color:#fff;
	text-decoration:none;
	text-transform:uppercase;
	border:none;
	float:left;
	margin-left:6px;
	margin-top:24px;
	font: 14px/26px 'focobold';
	cursor:pointer;
	}

.motionDanmarkForm input[type="submit"]:hover{ 
	background-color:#272727;
	}

.motionDanmarkForm input[type="submit"]:active{ 
	position:relative;
	top:1px;
	}

.motionDanmarkForm .btnp .processingSubmit{
	background:url(../img/loader.gif) no-repeat 230px center transparent;
	background-image:rgba(0, 0, 0, 0, .1);
	width:584px;
	height:40px;
	background-color:#272727;
	color:#fff;
	text-decoration:none;
	text-transform:uppercase;
	border:none;
	float:left;
	margin-left:6px;
	margin-top:24px;
	font: 14px/26px 'focobold';
	cursor:pointer;
	}

.motionDanmarkForm .btnp .processingSubmit:hover,
.motionDanmarkForm .btnp .processingSubmit:active{
	position:relative;
	top:0;
	}
	
.motionDanmarkForm .btnp .submittingComplete{
	background:url(../img/check-ok.png) no-repeat 170px center transparent;
	background-image:rgba(0, 0, 0, 0, .1);
	width:584px;
	height:40px;
	background-color:#26ae56;
	color:#fff;
	text-decoration:none;
	text-transform:uppercase;
	border:none;
	float:left;
	margin-left:6px;
	margin-top:24px;
	font: 14px/26px 'focobold';
	cursor:pointer;
	position:relative;
	top:0;
	}
	
.motionDanmarkForm .btnp .submittingComplete:hover,
.motionDanmarkForm .btnp .submittingComplete:active{
	background-color:#26ae56;
	position:relative;
	top:0;
	}

/********************** end of submit buttons styles *****************/

label.fl{ line-height:23px; margin-left:-10px; width:80%;}

/****************** check box and radio button styles **********************/

.motionDanmarkForm .check-box{ float: left; display: inline;  }

.motionDanmarkForm span.checkbox{ line-height:0px; padding:0; width:auto; float: left; display: inline; cursor:default; }
.motionDanmarkForm span.checkbox{ margin:0px 8px 0 0;  width:auto; height:23px;}
.motionDanmarkForm span.cust_checkbox_on{ }
.motionDanmarkForm span.cust_checkbox .icon-ok{ float: left; display: inline;  line-height:20px;  color:#fff; height:20px; width:20px; }
.motionDanmarkForm span.cust_checkbox .icon-ok{ border:solid 1px #ccc;}
.motionDanmarkForm span.cust_checkbox_on .icon-ok{ color:#f27669;}
.motionDanmarkForm .check{ float: left; display: inline; }

.motionDanmarkForm span.radio {  line-height:0px; padding:0; width:auto; float: left; display: inline; cursor:default; }
.motionDanmarkForm span.radio {  margin:0px 8px 0 0;    width:auto; height:21px; padding-bottom:6px}
.motionDanmarkForm span.cust_checkbox .icon-circle{ float: left; display: inline;  line-height:22px; width:21px; height:21px; color:#fff;  }
.motionDanmarkForm span.cust_checkbox .icon-circle{ border-radius:20px; -webkit-border-radius:20px;  border:solid 1px #ccc; }
.motionDanmarkForm span.cust_radio_on .icon-circle{ color:#306b88; border:solid 1px #ccc; font-size: 17px; text-align: center; }

.motionDanmarkForm .select_field{ border:0; visibility:hidden; font-size: 0; line-height:0; text-indent: -4000px; height:0!important; }
.motionDanmarkForm .select_field{ padding:0; float: left;}
 @-moz-document url-prefix() {.radio-btn, .check-box { visibility:hidden;  width:0;}}
 
 .motionDanmarkForm .radio-btn, .motionDanmarkForm .check-box{ border:0; font-size: 0; line-height:0; text-indent: -4000px; }
 .motionDanmarkForm .radio-btn, .motionDanmarkForm .check-box{ height:0!important; padding:0; float: left; margin-left:-4000px }

/****************** end of check box and radio button styles **********************/

/******************** two fields on one row in vertical form view ****************/

.motionDanmarkForm .DA_double{ width:37.5%!important; margin:16px 0; float:left; display: inline; }
.motionDanmarkForm .DA_double span{ width:11%!important; }
.motionDanmarkForm .DA_double .field{ width:85%!important; }
.motionDanmarkForm .left_aligned{ padding:0 5% 0 10%!important;}

/******************** end of two fields on one row in vertical form view ****************/

/***************** labels styles *********************/

.DA_check_holder label, .DA_radio_holder label{ padding:0; }
.motionDanmarkForm .DA_check_holder label.error{ bottom:-22px!important; }
.motionDanmarkForm .DA_radio_holder label.error{ bottom:-22px!important; }


.motionDanmarkForm .DA_radio_holder label.error, 
.motionDanmarkForm .DA_check_holder label.error{ left:0; right:auto!important;}

.DA_radio_holder label.error em, 
.DA_check_holder label.error em{ left:5px; right:auto;}
 

.motionDanmarkForm label{ font-size: 14px; color:#898989; display: block; font-family:'focobold'; font-weight: normal;}
.motionDanmarkForm label{ padding-bottom:8px}
.motionDanmarkForm label.valid{ display:none!important;}
.motionDanmarkForm label.error{ height:40px; font-size: 14px; line-height:40px; position:absolute;  top:-54px; right:50%; margin-right:-90px; z-index: 100; float: right; width:190px;}
.motionDanmarkForm label.error{ font-weight: normal; text-align:center; }
.motionDanmarkForm label.error{  background:#e74c3c; color:#fff; padding:0;}
.motionDanmarkForm label.error{ border:solid 2px #e74c3c; line-height:40px; }
.motionDanmarkForm label.error:after{
	border: solid;
    border-color: #111 transparent;
    border-color: #e74c3c transparent;
    border-width: 7px 7px 0 7px;
    bottom: -7px;
    content: "";
    display: block;
    right: 50%;
	margin-right:-3.5px;
    position: absolute;
    z-index: 99;
}
.DA_check_holder label.error:after, .DA_radio_holder label.error:after{
	border: solid;
    border-color: #111 transparent;
    border-color: #e74c3c transparent;
    border-width: 0 7px 7px 7px;
    top: -7px;
    content: "";
    display: block;
    right: auto;
    left:3px;
    position: absolute;
    z-index: 99;
}
.motionDanmarkForm .error.field{
	color:#e74c3c;
}
.motionDanmarkForm label.error em{ font-style: normal; width:0px; 
    height:0px; 
    border-left:7px solid transparent;  /* left arrow slant */
    border-right:7px solid transparent; /* right arrow slant */
    border-bottom:7px solid #e74c3c; /* bottom, add background color here */
    font-size:0px;
    line-height:0px;
    position:absolute;
    top:-7px;
    right:13px;
}

.motionDanmarkForm .arrow {
	width:0px; 
	height:0px; 
	border-left:7px solid transparent;  /* left arrow slant */
	border-right:7px solid transparent; /* right arrow slant */
	border-top:7px solid #e74c3c; /* bottom, add background color here */
	font-size:0px;
	line-height:0px;
	position:absolute;
	top:-7px;
	right:13px;
}
/***************** end of labels styles *********************/

/****************** forgot password link style ***************/

.motionDanmarkForm small.ac {  position:relative; z-index: 1; margin:-10px 0 10px 0; font-family: 'focobold'; }
.motionDanmarkForm small a{ font-size: 14px; color:#2fb0d7; position:relative; z-index: 1; margin:-10px 0 10px 0;}

/****************** forgot password link style ***************/

/****************************** select box custom styles ********************************/

.motionDanmarkForm .sbHolder{
    height:25px; border:solid 1px #ccc; -webkit-border-radius: 3px; border-radius: 3px;
    padding:10px 0;
    font-family: 'focobold';
    font-size: 14px;
    font-weight: normal;
    position: relative;
    width: 100%;
}
.motionDanmarkForm .sbHolder:focus .sbSelector{
    
}
.motionDanmarkForm .sbSelector{
    display: block;
    height: 25px;
    left: 0;
    line-height: 25px;
    outline: none;
    overflow: hidden;
    position: absolute;
    text-indent: 16px;
    padding:10px 0text-decoration: none;
    top: 10px;
    width: 80%;
}
.motionDanmarkForm .sbSelector:link, .sbSelector:visited, .sbSelector:hover{
    color: #c6c6c6;
    outline: none;
    text-decoration: none;
}
.motionDanmarkForm .sbToggle{
    display: block;
    height: 30px;
    outline: none;
    position: absolute;
    right: 1%;
    top: 13px;
    width: 30px;
    font-size: 20px;
    color:#306b88;
    text-align: center;
}
.motionDanmarkForm .sbToggle:hover{ text-decoration: none; }

.motionDanmarkForm .sbToggleOpen:hover{ text-decoration: none; }
.motionDanmarkForm .sbHolderDisabled{ background-color: #3C3C3C; border: solid 1px #515151; }

.motionDanmarkForm .sbOptions{
    background-color: #fff;
    border:solid 1px #b0b0b0; -webkit-border-radius: 3px; border-radius: 3px;
    list-style: none;
    left: -1px;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 60px!important;
    width: 100%!important;
    z-index: 1001;
    overflow-y: auto;
}
.motionDanmarkForm .sbOptions li{ width:100%!important; }

.motionDanmarkForm .sbOptions a{
    border-bottom: dotted 1px #515151;
    display: block;
    outline: none;
    width:97%;
    padding: 12px 0 12px 3%;
}
.motionDanmarkForm .sbOptions a:link, .motionDanmarkForm .sbOptions a:visited{
    color: #626262;
    text-decoration: none;
}
.motionDanmarkForm .sbOptions a:hover,
.motionDanmarkForm .sbOptions a:focus,
.motionDanmarkForm .sbOptions a.sbFocus{
    color: #306b88;
}
.motionDanmarkForm .sbOptions li.last a{ border-bottom: none; }

.motionDanmarkForm .sbOptions .sbDisabled{
    border-bottom: dotted 1px #515151;
    color: #999;
    display: block;
    padding: 7px 0 7px 3px;
}
.motionDanmarkForm .sbOptions .sbGroup{
    border-bottom: dotted 1px #515151;
    color: #EBB52D;
    display: block;
    
    padding: 7px 0 7px 3px;
}
.motionDanmarkForm .sbOptions .sbSub{ padding-left: 17px; }

/****************************** end of select box custom styles ********************************/

/*************************************** HORIZONTAL FORM STYLE *****************************************/

.motionDanmarkForm .horizontal{  width:90%; float: left; display: inline; margin:17px 5%;}
.motionDanmarkForm .horizontal label{ float: left; display: inline; width:35%; padding:0; line-height: 45px}
.motionDanmarkForm .horizontal  label.fl{ width:80%; line-height: 23px; padding-bottom:8px; }
.motionDanmarkForm .horizontal label.error{ display: block; float: none; width:auto; line-height: 22px; padding:0 5px;}
.motionDanmarkForm .horizontal .motionDanmarkFormContainer{ float: left; display: inline; width:64%;}
.motionDanmarkForm .horizontal  .motionDanmarkFormContainer span, .motionDanmarkForm .horizontal  .textarea-frame span{ width:6.5%;}
.motionDanmarkForm .horizontal .field{ width:91.5%;}
.motionDanmarkForm .horizontal .sbHolder{ width:64%; float:left;}
.motionDanmarkForm .horizontal .textarea-frame { width:64%; float: left; display: inline; }

/* -------------------------------  Media Query Max Width 320 ------------------------------- */

@media only screen and (max-width:320px){

	.motionDanmarkForm .field{ width:86%!important;}
    .motionDanmarkForm .DA_double .field{ width:86%!important;}
    .motionDanmarkForm .textarea-frame{ padding-top:4px;}
    .motionDanmarkForm .left_aligned{ padding:0!important;}
    .motionDanmarkForm .btnp input{ width:40%; height:40px; line-height:40px;}

    .motionDanmarkForm label.error{ font-size: 11px;  }
    .motionDanmarkForm label.fl{ font-size: 14px; margin-left:-15px;}
    .motionDanmarkForm label.error:after{ right:7px;}
    .motionDanmarkForm .DA_check_holder label.error:after{ right:auto;}
    .motionDanmarkForm .DA_radio_holder label.error:after{ right:auto;}

    .motionDanmarkForm h3{ font-size: 18px; line-height:25px;}
    .motionDanmarkForm span{width:10%;}
    
    .motionDanmarkForm .DA_double{ width:80%!important; padding:0; float: none; display: inline-block; margin:16px 10%;}
    .motionDanmarkForm .DA_double span{ width:10%!important;}

    .motionDanmarkForm .horizontal .field{ width:84%!important;}
    .motionDanmarkForm .horizontal .dbl-lbl{ line-height: 18px!important}
    .motionDanmarkForm .horizontal span{ width:12%!important;}
    .motionDanmarkForm .horizontal label{ width:35%; line-height: 36px}
    .motionDanmarkForm .horizontal .motionDanmarkFormContainer{ width:64%; padding:4px 0;}

    .motionDanmarkFormContainer {padding:4px 0!important;}
    .motionDanmarkForm .sbHolder { padding:4px 0!important;}
    .motionDanmarkForm .sbToggle{ width:23px; font-size: 16px; top:7px!important; right:4px!important;}
    .motionDanmarkForm .sbSelector{top:5px!important;}

    .motionDanmarkForm span.checkbox, .motionDanmarkForm span.radio{ width:21%!important; }

    .demo-nav li.sfs{ display: none; float:none; position: static;}
    .demo-nav li ul{ left:auto; right:0;}
    .demo-nav li li{ margin:2px 0;}

    #popup{ top:20px;}
    
}

/* -------------------------------  Media Query Min Width 321 Max Width 640 ------------------------------- */

@media only screen and (min-width: 321px) and (max-width:640px){

    .motionDanmarkForm h3{ font-size: 20px;}
    .motionDanmarkForm span{ width:8%!important; }

    .motionDanmarkForm .field{ width:87%!important; }
    .motionDanmarkForm .btnp input{ height:45px; line-height: 45px; width:25%; }

    .DA_double{ width:80%!important; padding:0; float: none; display: block; margin:13px auto;}
    .motionDanmarkForm .DA_double span{ width:15%!important; }
    .motionDanmarkForm .DA_double .field{ width:77%!important; }
    .motionDanmarkForm .sbToggle{ width:23px;  right:2%!important;}

    .motionDanmarkForm label{ font-size: 15px; padding-bottom: 2px; }
    .motionDanmarkForm label.fl{ font-size: 14px; margin-left:-20px;}
    .motionDanmarkForm label.error{ font-size: 13px; line-height: 20px; height:20px; bottom:-28px; }

    
        
    .motionDanmarkForm .horizontal label{ font-size: 14px}
    .motionDanmarkForm .horizontal span{ width:12%!important;}
    .motionDanmarkForm .horizontal .field{ width:85%!important;}
    .motionDanmarkForm .horizontal .sbHolder{ width:64%!important; float:left;}

    .motionDanmarkForm span.checkbox, .motionDanmarkForm span.radio{ width:15%!important; }
    
    .demo-nav li.sfs{ display: none; float:none; position: static; }
    .demo-nav li ul{ left:auto; right:0;}
    .demo-nav li li{ margin:2px 0;}

    #popup{ top:20px;}

}

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    /* Safari and Chrome */
    .motionDanmarkForm .horizontal .sbHolder {
     margin-top:-14px;
     position:relative;
    }

    /* Safari only override */
    ::i-block-chrome,.motionDanmarkForm .horizontal .sbHolder {
        margin-top:-14px;
        position:relative;
    }
}