/*

Base
Typography
Colors
Buttons
Header
SearchResult
Main & grid styles
Section Page Content & editor styles
Footer
*/


/* Base
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
html {width: 100%;height: 100%;min-height: 100%;background-color: #fff;overflow-x: hidden;}
body {padding: 0;margin: 0;background-color: #fff;height: 100%;}

a {color: #008195}
a:hover, a:focus {text-decoration: none;color: #008195}
a:active {color: #008195}

div.lead a{color: white}


/* Extra small devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap*/

/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {  }

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
.container {max-width: 100%;}    
}

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
.container {max-width: 100%;}     
}

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
.container {max-width: 100%;}     
}

/* Extra large devices and retina (extra large desktops, 1920px and up)*/
@media (min-width: 1920px) {
.container {max-width: 1920px}     
    
}

/* Extra large retina devices (extra large retina desktops, 2560px and up)*/
@media (min-width: 2560px) {
}



/* Typography
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
html, body {font-family: adelle-sans, sans-serif;font-weight: 400;font-style: normal;}

.regular {font-family: adelle-sans, sans-serif;font-weight: 400;font-style: normal;}
.italic, em {font-family: adelle-sans, sans-serif;font-weight: 400;font-style: italic;}
.semibold {font-family: adelle-sans, sans-serif;font-weight: 600;font-style: normal;}
.semibold-italic {font-family: adelle-sans, sans-serif;font-weight: 600;font-style: italic;}
.bold, strong {font-family: adelle-sans, sans-serif;font-weight: 700;font-style: normal;}
.bold-italic {font-family: adelle-sans, sans-serif;font-weight: 700;font-style: italic;}
.heavy {font-family: adelle-sans, sans-serif;font-weight: 900;font-style: normal;}
.light {font-family: adelle-sans, sans-serif;font-weight: 300;font-style: normal;}
.lead {font-weight: 400;}

.uppercase {text-transform: uppercase !important;letter-spacing: 0.035rem;}

h1, h2, h3, h4, h5, .h1, .h2, .h3 {font-family: adelle-sans, sans-serif;font-weight: 700;font-style: normal;letter-spacing: .035rem}
h1, .h1 {font-size: 1.5rem;font-family: adelle-sans, sans-serif;font-weight: 900;font-style: normal;text-transform: uppercase; letter-spacing: .05rem}
h2, .h2{font-size: 1.4rem;}
h3, .h3{font-size: 1.3rem;}
h4, .h4{font-size: 1.2rem;}
h6, .h6 {font-weight: 700;}

.lh-condensed {line-height: 1.25;}
.nowrap {white-space: nowrap}

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
h1, .h1 {font-size: 2rem;}
}

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
}

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
h1, .h1 {font-size: 2.65rem;}
}

/* Extra large devices and retina (extra large desktops, 1920px and up)*/
@media (min-width: 1920px) {
html {font-size: 22px;}
}


/* Buttons
 –––––––––––––––––––––––––––––––––––––––––––––––––– */

.btn {border-radius: .1rem}

.btn-primary {background-color: #e346b3;border-color:#e346b3; color: #fff !important; }
.btn-primary:hover, .btn-primary:focus {background-color: #EB7ECA !important;border-color: #EB7ECA !important;outline: none !important;}
.btn-primary:active, .btn-primary.active, .btn-primary.active:focus {background-color: #e346b3 !important;border-color: #e346b3 !important;box-shadow: none;}
.btn-primary.border, .btn-primary.border:hover, .btn-primary.border:focus {border-color: #fff !important;}

.btn-outline {background-color:transparent;border-color:#60b7c9 !important;color:#60b7c9 !important;text-transform: uppercase; font-weight: 600; letter-spacing: .025rem}
.btn-outline:hover, .btn-outline:focus,.btn-outline:active, .btn-outline.active, .btn-outline.active:focus {background-color: transparent;border-color: #008195 !important;color: #008195 !important;box-shadow: none;}

.btn-link {color: #fff}
.btn-link:hover, .btn-link:focus, .btn-link:active, .btn-link.active, .btn-link.active:focus {background-color: rgba(0,0,0,.25);color: #fff;text-decoration: none;box-shadow: none;}

.menu-btn {background-color:transparent;color: #fff !important;padding:.5rem .75rem;font-size:1.5rem; position:absolute; top:0; right: 0}
.menu-btn:hover, .menu-btn:focus {opacity: .75 !important; background-color: #152227}


/* Header
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#mobile-header {position: relative;}
.mobile-logo {position: absolute; top:-10px; left:-10px;}
#desktop-header{display: none}

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
header {position: relative;} 
}

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
#desktop-header{display: block}
.header-logo{width:400px; position: absolute; top:0; left: 0}
}

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
.header-logo{width:500px; position: absolute; top:0; left: 0}
}

/* Extra large devices and retina (extra large desktops, 1920px and up)*/
@media (min-width: 1920px) {
.header-logo{width:700px; position: absolute; top:0; left: 0}
}

/* Mobilemenu
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.overlay {height: 100%;width: 0;position: fixed;z-index: 1;top: 0;right: 0;background-color: #152227;overflow-x: hidden;transition: 0.5s;}
.overlay-content {position: relative;top: 15%;width: 100%;text-align: center;margin-top: 2rem;}
.overlay a {padding: .5rem;text-decoration: none;font-size: 1rem;color: #99999a;display: block;transition: 0.3s;}
.overlay a:hover, .overlay a:focus {color: #f6f8f4;}
.overlay .closebtn {position: absolute;top: 0;right: 0;font-size: 1.5rem;padding:.5rem .75rem;}

/* Desktop-menu
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
.nav {position: absolute;top: 2rem;right: 0.5rem; left:400px}
.nav-link {color: #fff;padding: .5rem .35rem;font-size: .875rem;} 
.nav-link:hover,.nav-link:focus  {background-color:rgba(255,255,255,.15);color:#fff}
.nav-link.active {border-bottom:2px solid #fff}
}

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
.nav { position: absolute; top:2.85rem; right: 1rem; left:500px}
.nav-link {padding: .5rem 1rem;font-size: 1rem;}
}

/* Extra large devices and retina (extra large desktops, 1920px and up)*/
@media (min-width: 1920px) {
.nav { position: absolute; top:2.85rem; right: 0; left:700px}
}


/* Section homepage-intro
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.homepage-intro, .contentpage-intro {min-height: 100vh; background-color: #152227;
background: url(../img/home-bg.jpg);
    background-position-x: 0%;
    background-position-y: 0%;
    background-repeat: repeat;
    background-size: auto;
background-repeat: no-repeat;
background-position: center center;
background-size: 100% auto;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding-top:11rem;}

.contentpage-intro {min-height: 60vh; min-height: 320px}
.intro-block  {color:#fff; padding:1rem 1.5rem}

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
.homepage-intro {min-height: 60vh; }   
.intro-block  {padding:5rem}
}

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
.intro-block  {padding:1rem 3.5rem 5rem 400px}
}

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
.homepage-intro {min-height: 100vh; }      
.intro-block  {padding:7rem 5rem 2rem 500px}    
}

/* Extra large devices and retina (extra large desktops, 1920px and up)*/
@media (min-width: 1920px) {
  .intro-block  {padding:5rem 5rem 1rem 700px}    
}


/* Extra large retina devices (extra large retina desktops, 2560px and up)*/
@media (min-width: 2560px) {
}


/* Section homepage-services
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.icon-block {
 /*   
background-color:#f6f8f4;
border: 2px solid #eee;
display: inline-block;
padding: 2rem;
border-radius: 25rem;*/
margin-bottom: 2rem;
height: 80px;
margin-top: 1rem;
position: relative;

}

.ohjelmistokehitys-icon  {position: relative; bottom:10px}  





/* Section content-page
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.content-block h2 {margin-top:1.5rem}  
.content-block h2:first-child {margin-top:0}  

/* Footer
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
footer {position: relative; 
    background: url(../img/footer-bg.jpg);
    background-position-x: 0%;
    background-position-y: 0%;
    background-repeat: repeat;
    background-size: auto;
background-repeat: no-repeat;
background-position: center center;
background-size: 100% auto;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;color: #4b5152;}

footer li a { }
footer li a:after {content: "\00BB";margin-left: 0.3rem; }

.footer-logo{width:300px;}

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
.footer-logo{width:400px;}
}

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
.footer-logo{width:500px;} 
}

/* Extra large devices and retina (extra large desktops, 1920px and up)*/
@media (min-width: 1920px) {
.footer-logo{width:700px;} 
}