/* Do NOT REMOVE! Used by Kotimaa eKansio forms like https://www.lahjoitaapua.fi/kohde/kotimaanapu-kertalahjoitus Pekka L knows */

/*------------------------------------------------------------- 
                    GLOBAL STYLES
---------------------------------------------------------------*/

body,html {
	height: 100%;
	width: 100%;
}

body {
	font-size: 16px;
}

.body {
	position: relative;
	width: 100%;
	overflow: hidden;
}

h2, .container-form H4 {
	color: #0069b3;
	font-family: Oswald, sans-serif;
	font-weight: 400;
	font-size: 28px;
}

a {
	color: #587c00;
}


/*------------------------------------------------------------- 
                    EKANSI UI STYLES
---------------------------------------------------------------*/

.align-right {
  text-align: right;
}

.description {
  color: #999;
}

.progress {
	margin: 0px;
}

.progress .bar {
	display: block;
	background-color: #588c20;
	padding-left: 6px;
	font-size: 12px;
	line-height: 20px;
	color: #EEE;
}


/*------------------------------------------------------------- 
                    STYLING
---------------------------------------------------------------*/


.no-padding {
	padding: 0 !important;
}

.space10 {
	margin-bottom: 10px;
}

.space15 {
	margin-bottom: 15px;
}

.space20 {
	margin-bottom: 20px;
}

.space25 {
	margin-bottom: 25px;
}

.space30 {
	margin-bottom: 30px;
}

.space35 {
	margin-bottom: 35px;
}

.space40 {
	margin-bottom: 40px;
}

.space50 {
	margin-bottom: 50px;
}

.space60 {
	margin-bottom: 60px;
}

.space70 {
	margin-bottom: 70px;
}

.space80 {
	margin-bottom: 80px;
}

.space90 {
	margin-bottom: 90px;
}

.space100 {
	margin-bottom: 100px;
}

/*------------------------------------------------------------- 
                    FORM (Added)
---------------------------------------------------------------*/

.container-form H4 {
	font-size: 34px;
	font-family: Pacifico;
}

.container-ingress {
    padding-top: 10px;
    color: #777;
}


.btn-main {
	border: 2px solid #27ae60;
	color: #fff;
	border-radius: 5px;
	padding: 12px 20px;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
	border-color: #999;
	color: #777;
	background: #FFFFFF;
	margin-right: 10px;
	display: inline-block;
	margin-top: 4px;
	margin-bottom: 4px;
}
.btn-main:hover {
	color: #fff;
	background: #27ae60;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
	background: #588c20;
}

.btn-vihrea {
	color: #fff;
	border-color: #fff;
    opacity: 0.6;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

.btn-vihrea:hover {
	color: #fff;
	background: #587c00;
    opacity: 1;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
    }

.btn-orange {
	color: #fff;
	border-color: #fff;
    opacity: 0.6;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

.btn-orange:hover {
	color: #fff;
	background: #db5940;
    opacity: 1;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

A.btn-main:hover {
	text-decoration: none;
}


SELECT,
INPUT[type=text],
INPUT[type=password],
TEXTAREA {
    font-size: 20px;
    padding: 4px 10px;
    margin: 2px;
    background-clip: padding-box;
    -webkit-border-radius: 20px;
    -moz-border-radius:  20px;
    border-radius:  20px;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.0);
    color: #777;
    border: #CCCCCC 2px solid;
}

INPUT.required,
SELECT.required,
TEXTAREA.required
{
    /* red */
    border-color: #ef7370;
    color: #ef7370;
    
    /* violet */
    border-color: #9c2779;
    color: #9c2779;
    
	-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
}

/* checkbox */
DIV.checkbox-group {
    -webkit-border-radius: 20px;
    -moz-border-radius:  20px;
    border-radius:  20px;
    padding: 10px !important; /* yliaja row-form DIV */
}

/* checkbox */
DIV.required {
    /* violet */
    border-color: #9c2779;
    border-width: 2px;
    border-style: solid;
    
	-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
}


.btn-error, .btn-error:hover {
    background-color: #FFF;

    /* red */
    border-color: #ef7370;
    color: #ef7370;
    
    /* violet */
    border-color: #8c2769;
    color: #8c2769;
}

.btn-main:disabled,
.btn-main:disabled:hover
{
    border-color: #CCC;
    color: #CCC;
}

INPUT.success,
SELECT.success,
TEXTAREA.success
{
    border-color: #588c20;
    color: #588c20;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}
DIV.success {
    border-color: #588c20;
}

.btn-success {
  border-color: #588c20;
  background-color: #588c20;
  color: #EEE;
}

.btn-success:hover, .btn-success:focus {
  border-color: #588c20;
  background-color: #68Ac30;
  color: #FFF;
}



SELECT {
    height: 40px;
	background: #FFFFFF;
}


.row-form {
    margin-left: 0px;
    margin-right: 0px;
}
.row-form DIV {
    padding-left: 0px;
    padding-right: 0px;
    min-height: 30px;
    /*
    line-height: 30px;
    */
}
.row-form DIV.alert {
    padding-left: 10px;
    padding-right: 10px;
}
.row-form-buttons {
    margin-top: 12px;
}

.row-form .ingress-text {
    padding-top: 2px;
    padding-left: 10px;
}

/*------------------------------------------------------------- 
                    STYLES (Added)
---------------------------------------------------------------*/


.row-underline {
    border-bottom: #CCC 1px solid;
    padding-top: 12px;
    padding-bottom: 12px;
}
.row-underline:first-child {
    border-top: #CCC 1px solid;
}

a:hover {
	text-decoration: underline;
}

p.ingress-text {
    line-height: 110% !important;
    font-style: italic;
    color: #999;
}

.image-rounded img {
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}


/*------------------------------------------------------------- 
                    ALERT (Added)
---------------------------------------------------------------*/

.alert {
    background-color: #fffc92;
    border: #efec62 1px solid;
    padding: 10px 20px;
	border-radius: 5px;
    margin-top: 10px;
    margin-bottom: 20px;
    
    color:#bba700;
    background-color:#fff176;
    border-color:#fbcf55;
}
.alert H4 {
    font-size: 24px !important;
	font-family: Helvetica, Arial !important;
}
.alert P {
}

.alert-error {
    color:#ea0d0e;
    background-color: #F58383;
    border-color: #ef5350;;
}


/*------------------------------------------------------------- 
                    HEADER STYLES
---------------------------------------------------------------*/

header {
}

header .brand {
    display: inline-block;
    float: left;
    position: absolute;
    top: 0px;
    left: 0px;
    margin: 0px;
}

header .brand--logo {
    display: inline-block;
    padding: 6px 6px 0px 18px;
}
header .brand--logo A:hover {
    text-decoration: none;
}

header .brand--logo--title {
    font-size: 30px;
    font-family: Pacifico;
    color: #8c2769;
    text-shadow: 1px 1px 2px #CCCCCC;
    display: block;
    text-align: center;
    white-space: nowrap;
    letter-spacing: 1px;
}

header .brand--logo--slogan {
    font-size: 12px;
    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #222222;
    text-transform: uppercase;
    display: block;
    text-align: center;
    white-space: nowrap;
    letter-spacing: 1px;
}

header .brand--alue {
    font-size: 24px;
    font-family: Pacifico;
    color: #CCCCCC;
    font-size: 28px;
    position: relative;
    white-space: nowrap;
    left: -4px;
    top: -10px;
}


header span.alue {
	font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 700;
}

.navbar {
    min-height: 70px;
}

.navbar-default {
	background: #fff;
	border: none;
	/* Teki alkupaddingin, jonka localSroll poistaa kun scrollaaa
	padding: 50px 0;
	*/
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

.navbar-brand {
	color: #9c3779 !important;
	margin: 0;
	font-size: 42px;
	font-family: Pacifico;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

.navbar-default .navbar-nav > li > a {
	color: #393f4a;
	font-size: 15px;
	text-transform: uppercase;
	margin-top: 5px;
	font-weight: 700;
}

.nav > li > a {
	position: relative;
	display: block;
	padding: 25px 20px;
}

.topnav-pages {
	background: #fff;
}


.btn-dark {
	width: 140px;
	line-height: 28px !important;
	text-align: center;
	font-size: 15px;
	color: #fff !important;
	text-align: center;
	border-radius: 5px;
	background: #3a3a3a !important;
	border: 2px solid #3a3a3a;
	display: table;
	text-transform: uppercase;
	float: right;
	font-weight: 700;
	top: -4px;
	margin-left: 30px;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

.btn-dark:hover {
	color: #3a3a3a !important;
	background: transparent !important;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

.btn-lite {
	width: 160px;
	line-height: 50px;
	text-align: center;
	font-size: 15px;
	color: #393f4a;
	text-align: center;
	border-radius: 5px;
	border: 2px solid #fff;
	background: #fff;
	display: table;
	text-transform: uppercase;
	margin: 65px auto 0;
	font-weight: 700;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

.btn-lite:hover {
	color: #fff;
	background: transparent;
	border: 2px solid #fff;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

.btn-lite1 {
	width: 160px;
	line-height: 50px;
	text-align: center;
	font-size: 15px;
	color: #3a3a3a;
	border: 2px solid #3a3a3a;
	text-align: center;
	border-radius: 5px;
	background: #fff;
	display: table;
	text-transform: uppercase;
	margin: 40px auto 100px;
	font-weight: 700;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

.btn-lite1:hover {
	color: #27ae60;
	border: 2px solid #27ae60;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

/*------------------------------------------------------------- 
                    INFO STYLES
---------------------------------------------------------------*/

.info-wrap {
	margin: 80px 0;
	padding: 10px 0;
	background: #fff;
}


.info-content h4 {
	font-size: 34px;
	color: #393f4a;
	font-family: Pacifico;
}

.info-content p {
	font-size: 16px;
	color: #393f4a;
	line-height: 28px;
}


.info-content {
	display: table;
}


.submit {
	margin: 0;
}


/* #Tablet (Portrait)
================================================== */

/* Note: Design for a width of 768px */
@media only screen and (min-width: 768px) and (max-width: 959px) {

    
.intro-header {
	padding: 60px 0 0 0px;
}
    
.container {
	width: 90%;
	margin: 0 auto;
}

header .brand--logo--title {
    font-size: 24px;
}

header .brand--logo--slogan {
    font-size: 10px;
}

header .brand--alue {
    font-size: 22px;
    left: -10px;
    top: -10px;
}

.navbar-default .navbar-nav > li > a {
	color: #393f4a;
	font-size: 10px;
	text-transform: uppercase;
	margin-top: 5px;
	font-weight: 700;
}

.nav > li > a {
	position: relative;
	display: block;
	padding: 18px 5px;
}

.btn-dark {
	width: 90px;
	font-size: 14px;
	margin-left: 10px;
}

.intro-header h6 {
	font-size: 40px !important;
}


}



/*  #Mobile (Portrait)
================================================== */

/* Note: Design for a width of 320px */
@media only screen and (max-width: 767px) {

header .brand IMG {
    height: 40px;
}

header .brand--logo--title {
    font-size: 24px;
}
header .brand--logo--slogan {
    font-size: 10px;
}
header .brand--alue {
}

.intro-header h6 {
	font-size: 30px !important;
	margin-left: 25%;
}

.intro-header {
	background: #f8bc3b;
	/* Tekee turhaa reunusta 
	padding: 100px 0 20px;
	*/
}

.navbar-collapse.in {
	overflow-y: visible;
	display: table;
	width: 100%;
}i

.btn-dark {
	width: 140px;
	float: none;
	font-weight: 700;
	top: 0;
	margin: 0 auto;
	display: table;
}


.info-content h4 {
	font-size: 34px;
	color: #393f4a;
	margin: 25px 0 30px;
}

}

/* #Mobile (Landscape)
================================================== */

/* Note: Design for a width of 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) {

.container {
 	margin: 0 auto;
}

.intro-header h6 {
	font-size: 28px !important;
}

.intro-header .col-md-12 {
    /* Sekoittaa sliderin!
	width: 70%;
	*/
	margin: 0 auto;
}

}



/*  #Mobile slider
================================================== */


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

.intro-header h6 {
	font-size: 24px !important;
}


}

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

.intro-header h6 {
	font-size: 28px !important;
}

.fullwidthbanner .large_black {
    display: none;
}

}

/***
Aste pekka lisaamat tyylit
***/
body {
	font-family: Oswald, sans-serif;
}
.image-rounded img {
	max-width: 400px;
}
h2, .container-form H4 {
	color: #0069b3;
	font-family: Oswald, sans-serif;
	font-weight: 400;
	font-size: 28px;
}
.progress .bar {
	background-color: #0069b3;
}
.col-md-4 strong {
	display: block;
	margin-top: 8px;
}
SELECT,
INPUT[type=text],
INPUT[type=password],
TEXTAREA {
    margin: 2px 4px 5px 2px;
	margin-bottom: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius:  5px;
    border-radius:  5px;
}
INPUT.success,
SELECT.success,
TEXTAREA.success
{
    border-color: #0069b3;
    color: #0069b3;
}
DIV.success {
    border-color: #0069b3;
}

.btn-success {
  border-color: #0069b3;
  background-color: #0069b3;
  color: #EEE;
}

.btn-success:hover, .btn-success:focus {
  border-color: #0069b3;
  background-color: #2175c0;
  color: #FFF;
}