#page-header{
	background-color:#f3f3f3;
	height:210px;
}
#page-title{
	color: #ff7f00;
	font-weight: 700;
	font-size: 30px;
}
#page-sub-title{
	color: #1b2e56;
	font-weight: 700;
	font-size: 30px;
}

#page-content{
	padding-left:40px;
	margin-top: -30px;
	padding-right: 30px;
	color: #0f3051
}

#sidebar-berekening{
	background-color:#f27e05;
	min-height: 430px;
	color:white;
	z-index: 1
}

#side-content{
	background-color:#6ab93c;
	min-height: 430px
}

#sidebar-image{
	width: 100%;
	bottom:0px;
	position: absolute
}
input[type="text"].error{
	border: 2px solid #f21010;
}
input[type="text"]:focus{
	border: 2px solid #0f3051;
}
input[type="text"]{
	font-size: 18px;
    	letter-spacing: 1px;
}
.affix {
    	left: 59.5%;
    	top: 75px;
    	width: 18.5%;
}

#bereken-energie-tarief-formulier h2{
	color: #ffffff;
}

form#bereken-energie-tarief-formulier {
	margin:10px 0px 0px 20px;
	padding-top:0px;
}

.promo-circle{
	width: 160px;
	height: 160px;
	border: 5px solid #b5f18f;
	border-radius: 50%;
	background-image: linear-gradient(to bottom, #02621b 0%, #6cb83e 100%) !important;
	margin-top:-130px;
	margin-left: 250px;
	
	-webkit-animation-name: spin;
    -webkit-animation-duration: 600ms;
    -webkit-animation-iteration-count: once;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin;
    -moz-animation-duration: 600ms;
    -moz-animation-iteration-count: once;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin;
    -ms-animation-duration: 600ms;
    -ms-animation-iteration-count: once;
    -ms-animation-timing-function: linear;
    -o-transition: rotate(360deg);
}

.promo-circle div{
	font-size: 21px;
	font-weight:700;
	margin-top: 30px;
	
	text-align: center;
	transform: rotate(12deg);

}

.panel-primary {
    border-color: #6bb83a;
}

.panel-primary > .panel-heading {
    background-image: linear-gradient(to bottom, #6bb83a 0%, #6bb83a 100%);
    background-repeat: repeat-x;
}
.panel-primary > .panel-heading {
    background-color: #6bb83a;
    border-color: #6bb83a;
    color: #ffffff;
}

#bereken-energie-tarief-formulier .looptijd input[type="radio"]:checked + label,
#bereken-energie-tarief-formulier .metertype input[type="radio"]:checked + label {
    background: #0f3051;
}

#bereken-energie-tarief-formulier .looptijd label,
#bereken-energie-tarief-formulier .metertype label {
     padding:5px;
     width: 45%;
     cursor:pointer;
     z-index:90;
     background: #3c7042;
     color: #ffffff;
     font-weight: 700;
}

#bereken-energie-tarief-formulier .looptijd label:hover,
#bereken-energie-tarief-formulier .metertype label:hover {
     background:#0f3051;
}

#looptijd-3, #looptijd-1, #metertype-enkel, #metertype-dubbel {
    opacity:0.011;
    z-index:100;
}
input[name="calculator[looptijd]"], input[name="calculator[metertype]"]{
    display:block;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

select {

  /* make arrow and background */

  background:
    linear-gradient(45deg, transparent 50%, #0f3053 50%),
    linear-gradient(135deg, #0f3053 50%, transparent 50%),
    linear-gradient(to right, #ffffff, #ffffff);
  background-position:
    calc(100% - 20px) calc(1em + 0px),
    calc(100% - 12px) calc(1em + 0px),
    100% 0;
  background-size:
    8px 8px,
    8px 8px,
    2.5em 2.5em;
  background-repeat: no-repeat;
  background-color: #ffffff;
  /* styling and reset */

  border: 0px;
  font: 300 1em/100% open-sans, sans-serif;
  line-height: 1.5em;
  padding: 0.5em 3.5em 0.5em 1em;

  /* reset */

  border-radius: 0;
  margin: 0;      
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance:none;
  -moz-appearance:none;
}

select option{
    color: #0f3053;
    font-weight: 400;
    margin: 4px;
}

.form-horizontal .form-group {
    margin-left: -5px;
    margin-right: -5px;
}

.big-blue-button:hover{
	background-color:#63983e;
	background-image: linear-gradient(to bottom, #78bc4b 0%, #63983e 100%) !important;
	text-decoration: none;
	color: #ffffff;
}
#btn-berekenen{
	width: 91%;
}
a.big-blue-button {
padding-top:8px;
text-decoration: none;
}
.big-blue-button {
    background-color: #0b2a47;
    background-image: linear-gradient(to bottom, #093055 0%, #0b2a47 100%) !important;
    border: 0 none;
    color: #ffffff;
    display: block;
    font-size: 22px;
    font-weight: 700;
    height: 50px;    
    text-align:center;
}

.ccheckbox, .cradio{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    opacity:0.011;
    z-index:100;
}

.ccheckbox:checked + label[for="geen-gas"]:before {
    background: #0f3051;
}

label[for="geen-gas"]:before{
    border: 4px solid #ffffff;
    content: "";
    display: inline-block;
    float: left;
    height: 22px;
    margin-left: -18px;
    margin-right: 4px;
    width: 22px;
}

label[for="geen-gas"]{
    margin-left: 22px;
}

.cradio:checked + label[for="geen-verbruik-bekend"]:before,
.cradio:checked + label[for="verbruik-bekend"]:before {
    background: #0f3051;
}
label[for="geen-verbruik-bekend"]:before,
label[for="verbruik-bekend"]:before{
    border: 4px solid #ffffff;
    content: "";
    display: inline-block;
    float: left;
    height: 22px;
    margin-right: 4px;
    width: 22px;
    border-radius: 50%;
}

.green-gradient-1{
    background-image: linear-gradient(to bottom, #7dc152 0%, #6cb83a 100%) !important;
}

.green-gradient-2{
    background-image: linear-gradient(to bottom, #569a29 0%, #418d0f 100%) !important;
}


@-webkit-keyframes spin {
    0%  {-webkit-transform: rotate(0deg);}
    100% {-webkit-transform: rotate(360deg);}   
}

@-webkit-keyframes swing
{
    15%
    {
        -webkit-transform: translateX(5px);
        transform: translateX(5px);
    }
    30%
    {
        -webkit-transform: translateX(-5px);
       transform: translateX(-5px);
    } 
    50%
    {
        -webkit-transform: translateX(3px);
        transform: translateX(3px);
    }
    65%
    {
        -webkit-transform: translateX(-3px);
        transform: translateX(-3px);
    }
    80%
    {
        -webkit-transform: translateX(2px);
        transform: translateX(2px);
    }
    100%
    {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@keyframes swing
{
    15%
    {
        -webkit-transform: translateX(5px);
        transform: translateX(5px);
    }
    30%
    {
        -webkit-transform: translateX(-5px);
        transform: translateX(-5px);
    }
    50%
    {
        -webkit-transform: translateX(3px);
        transform: translateX(3px);
    }
    65%
    {
        -webkit-transform: translateX(-3px);
        transform: translateX(-3px);
    }
    80%
    {
        -webkit-transform: translateX(2px);
        transform: translateX(2px);
    }
    100%
    {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}



.swing
{
        -webkit-animation: swing 1s ease;
        animation: swing 1s ease;
        -webkit-animation-iteration-count: 1;
        animation-iteration-count: 1;
}

.loader {
        border: 16px solid #f3f3f3; /* Light grey */
        border-top: 16px solid #3498db; /* Blue */
        border-radius: 50%;
        width: 120px;
        height: 120px;
        animation: spin 1s linear infinite;
        margin: 0 auto;
        margin-top:90px;
        display:none;
}