@charset "UTF-8";
/* CSS Document */

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {

}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {

}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
    
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {

}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {

}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
	
}

/* iPad 3 (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (-webkit-min-device-pixel-ratio : 2),
only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (min-resolution: 192dpi) { 

}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
	
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
	
}

/* Retina displays ----------- */
@media  only screen 
and (-webkit-min-device-pixel-ratio : 2), 
only screen 
and (min-resolution: 192dpi) {

}


/* PÖYTÄNÄYTÖT */
@media screen and (min-width: 1224px) {
}

/* LÄPPÄRI */
@media screen and (max-width: 1600px) {
}


@media screen and (max-width: 1400px) {
}


/* For non-retina based devices that have a smaller screen */
@media only screen and (min-width: 320px) {

}

/* Retina enabled devices with smaller screen */
@media  only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px), 
only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 320px),  
only screen and ( min-device-pixel-ratio: 2) and (min-width: 320px),  
only screen and ( min-resolution: 192dpi) and (min-width: 320px),  
only screen and ( min-resolution: 2dppx) and (min-width: 320px) {
}

/*Non- retina based devices with medium screen size */
@media only screen and (min-width: 768px) {

}

/* Retina devices with medium screen size */
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 768px),  
only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 768px),  
only screen and ( min-device-pixel-ratio: 2) and (min-width: 768px),  
only screen and ( min-resolution: 192dpi) and (min-width: 768px),  
only screen and ( min-resolution: 2dppx) and (min-width: 768px) {

}

/* Non-retina devices with large screen sizes */
@media only screen and (min-width: 1200px) {

}

/* Retina devices with large screen sizes */
@media  only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 1200px),  
only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 1200px),  
only screen and ( min-device-pixel-ratio: 2) and (min-width: 1200px),  
only screen and ( min-resolution: 192dpi) and (min-width: 1200px),  
only screen and ( min-resolution: 2dppx) and (min-width: 1200px) {

}




/* --- PÖYTÄNÄYTÖT --- */
       
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 1367px),  
only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 1367px),  
only screen and ( min-device-pixel-ratio: 2) and (min-width: 1367px) {
    
    .topnav {
        display: none;
    }
    
    .refa {
        float: left;
        width: 66%;
        padding: 0 17%;
        border-bottom:1px solid #B7B7B7;
        margin: 0 0 40px 0;
    }
}




/* --- PADIT --- */
    
 /* ISO iPAD PRO LANDSCAPE (2732 x 2048, 264ppi) */     
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1366px) and (max-height: 1024px) and (orientation:landscape),  
only screen and ( -o-min-device-pixel-ratio: 2/1) and (max-width: 1366px) and (max-height: 1024px) and (orientation:landscape),  
only screen and ( min-device-pixel-ratio: 2) and (max-width: 1366px) and (max-height: 1024px) and (orientation:landscape)  {

    h1.intro {
        top: 48vh;
    }
    
    .topnav {
        display: none;
    }
    
    img.graafista {
        width: 60%;
    }
    
    /* REFAT */
    page.refaikkuna {
        margin-left: 150px;
        width: calc(100% - 150px);
        padding-top: 80px;
    }
    
    .refa {
        float: left;
        width: 80%;
        padding: 0 13% 80px 7%;
        border-bottom: 1px solid #B7B7B7;
        margin: 0 0 40px 0;
    }
    
    /* TYÖNÄYTTEET */
    page.tyonaytteet {
      margin-left: 0;
      width: 100%;
    }
    
    .tyonayteikkuna {
      width: 100%;
    }
}




/* 13" LÄPTÖP LANDSCAPE */
@media screen and (max-width: 1366px) and (max-height: 768px) and (orientation:landscape){
    page {
        margin-left: 80px;
        width: calc(100% - 80px);
    }
    
    page.refaikkuna {
        margin-top: 8%;
    }

    /* NAVIKKO */
    .topnav {
        display: none;
    }
    
    .sidenav:hover {
       width: 200px;  
    }

    .sidenav:hover .logo {
       width: 70px;
       height: 70px;
       margin: 25px calc(50% - 35px);  
    }
    
    .sidenav:hover img.graafista, .sidenav:target img.graafista {
        margin: 0 25%;
        width: 50%;
    }
    
    .sidenav .navit {
        margin-top: 45%;
    }


    /* YHTEYSIKONIT */
    li.yhteys {
        display: block;
        width: 100%;
    }

    ul.ikonit {
        margin-right: 25px;
    }
    
    .ikoni.mail {
        width: 20px;
        height: 20px;
    }

    .ikoni.kirje {
        width: 30px;
        height: 15px;
    }

    .ikoni.luuri {
        width: 16px;
        height: 30px;
    }
    
    h1.info {
        margin-top: 55%;
    }
    
    h2 {
        font-size: 2vw;
    }
    
    p.tiedot {
        font-size: 1em;
    }
    
    body, page, div, article, nav {
        font-size: 1.3vw;
    }
    
    /* REFAT */
    page.refaikkuna {
        margin-top: 0;
    }
    
    /* TYÖNÄYTTEET */
    .kategoria {
        width: 240px;
        height: 175px;
        margin: 10px;
    }
    
    /* YHTEYDENOTTO */
    h1.kiitos {
        margin: 45% 0 20px;
    }
}




/* --- ISO IPAD PYSTY --- */
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1100px) and (orientation:portrait),  
only screen and ( -o-min-device-pixel-ratio: 2/1) and (max-width: 1100px) and (orientation:portrait),  
only screen and ( min-device-pixel-ratio: 2) and (max-width: 1100px) and (orientation:portrait),  
only screen and ( min-resolution: 192dpi) and (max-width: 1100px) and (orientation:portrait),  
only screen and ( min-resolution: 2dppx) and (max-width: 1100px) and (orientation:portrait) {
    
    body, page, div, article, nav {
	    font-size: 17px;
    }
      
    page {
        margin-left: 0;
        width: 100%;
        padding-bottom: 50px;
    }
    
    page.tyonaytteet, page.tyonaytteet.korkea {
        margin: 80px 0 0;
    }
    
    /* NAVIKKO */
    .sidenav {
        display: none;
    }
    
    img.graafista {
        display: none;
    }

    .topnav {
        display: block;
        position: relative;
        float: left;
        top: 0;
        left: 0;
        width: 100%;
        height: 240px;
        padding-bottom: 20px;
        background-color: transparent;
        z-index: 900;
    }
    
    .topnavlogo {
        position: absolute;
        top: 30px;
        left: 30px;
        margin: 0;
    }
    
    img.graafista.topnav {
        display: block;
        position: absolute;
        top: 150px;
        left: 20px;
        margin: 0;
        width: 120px;
        height: auto;
        min-height: 16px;
        
    }
    
    .ylavalikko, ul.ikonit  {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        float: left;
    }
    
    .ylavalikko {
        width: 396px;
        height: auto;
        margin: 50px calc(50% - 197px) 10px;
    }
    
    .ylavalikko li.text {
        width: auto;
        height: auto;
        display: block;
        float: left;
        padding: 10px;
        margin: auto;
        text-transform: uppercase;
        text-align: center;
        font-weight: 600;
        letter-spacing: .1em;
    }
    
    .navit.refat {
        margin: 60px 0 0 calc(380px + 7.5%);
    }
    
    .topnav li, .sidenav li {
        font-size: 25px;
    }
    
    /* IKONIT */
    .ikonit {
        width: 180px;
        margin: 10px calc(50% - 90px);
    }
    
    .ikonit .mail {
        width: 30px;
    }

    .ikonit .kirje {
        width: 40px;
    }

    .ikonit .luuri {
        width: 20px;
    }
    /* END NAVIKKO */
    
    
    /* REFAT */
    .refa {
        float: left;
        width: 66%;
        padding: 0 17%;
        border-bottom:1px solid #B7B7B7;
        margin: 0 0 40px 0;
    }
    
    
    /* TYÖNÄYTESIVUT */
    page.tyonaytteet, page.tyonaytteet.korkea {
      margin: 40px 0;
    }

    .tyonayteikkuna {
        width: 75%;
    }
    
    .kategoria {
        margin: 5% calc(24.5% - 150px);
    }
    
    
    /* INFO */
    body.info {
        background-position: bottom center;
        background-image: url("../kuvat/potretti/taustapotretti_2021_padi.jpg");
    }
    
    .logo.info {
        background-image: url("../kuvat/logot/liikemerkki_musta.jpg");
    }
    
    page.info {
        left: 0;
        width: 60%;
        padding: 0 20% 80px;
    }

    h1 {
        font-size: 3.5vw;
    }

    h1.info {
        margin-top: 120%;
    }
    
    p.tiedot, p.tekija {
        font-size: 2vw;
        margin: 10px 0;
    }
    
    .bg {
        width: 100%;
        background-image: url("../kuvat/potretti/taustapotretti_2021_padi.jpg")
    }
}




/* PIKKUPADIT PORTRAIT, HUAWEI HONOR 7, SAMSUNG GALAXY A3 */
@media only screen and (max-device-width: 768px) and (orientation:portrait),
only screen and (max-device-width: 1080px) /*and (device-height: 1920px)*/ and (-webkit-device-pixel-ratio: 1) and (orientation: portrait) {
    .sidenav {
        display: none;
    }
    
    .topnav {
        display: block;
    }
    
    .topnavlogo {
        width: 80px;
        height: 80px;
    }
    
    .ylavalikko {
        position: relative;
        float: left;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        height: 40px;
        margin: 0;
    }
    
    .topnav li.yhteys {
    }
    
    .ikoni.mail {
        width: 20px;
    }

    .ikoni.kirje {
        width: 30px;
    }

    .ikoni.luuri {
        width: 15px;
    }
    
    page.tyonaytteet, page.tyonaytteet.korkea {
        margin: 0 40px;
    }
    
    .tyonayteikkuna {
        padding-bottom: 0;
    }
    
    h1.tyonayteportaali {
        margin: 0 0 60px;
    }
    
    h3.palaa {
        width: 100%;
        margin-bottom: 60px;
    }

    h1 {
        font-size: 4vw;
    }
    
    /* INFO */
    page.info {
        width: 80%;
        margin: 0 10%;
        padding: 0 0 50px;
    }

    h1.info {
        margin-top: 50%;
    }
    
    p.tiedot, p.tekija {
        font-size: 2.5vw;
    }
    
    .bg {
        width: 100%;
        background-image: url("../kuvat/potretti/taustapotretti_2021_padi.jpg")
    }
    
    /* REFAT */
    .ylavalikko.refat {
        width: 323px;
        margin: 60px 0 0 calc(50% - 170px);
    }
    
    page {
        margin: 0 40px;
        width: calc(100% - 80px);
    }
    
    .refa {
        width: 100%;
        padding: 0;
        margin: 0 0 40px 0;
    }
    
    .refa h1 {
        margin: 0 0 100px 188px;
        letter-spacing: .1em;
    }
    
    .refa img, .thumb {
        height: 148px;
        width: 148px;
        margin: 0 40px 10px 0;
    }
    
    .refa ul {
        width: calc(100% - 190px);
    }
}





/* LUURIT */
@media screen and (max-width: 570px) and (orientation:portrait)
/*and (-webkit-min-device-pixel-ratio: 3)*/{
    /* INTRO */
    .logo.intro {
        width: 120px;
        height: 120px;
        top: 30%;
        left: 50%;
        margin-left: -60px;
    }

    h1.intro {
        font-family: 'Open Sans', sans-serif;
        width: 100%;
        position: absolute;
        font-size: 30px;
        top: 50%;
    }
    
    h1.viimeisin {
        width: calc(100% - 15px);
        font-size: 8vw;
        text-shadow: 8px 7px 6px rgba(0, 0, 0, 0.7);
        top: 45%;
    }
    
    
    /* NAVI */
    .sidenav {
        display: none;
    }
    
    .topnav {
        display: block;
    }
    
    .topnavlogo {
        position: relative;
        float: left;
        width: 70px;
        height: 70px;
        top: 0;
        left: 0;
        margin: 30px calc(50% - 35px) 20px;
    }
    
    img.graafista.topnav {
        display: none;
    }
    
    .ylavalikko {
        width: 70%;
        margin: 20px 15%;
    }
    
    .topnav li {
        display: block;
        text-transform: uppercase;
    }

    .topnav .ikonit {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        float: left;
        width: 100%;
        margin: 20px 0 0;
        height: 40px;
    }

    .topnav .tekstivalikko {
        padding: 0 20px;
        width: calc(100% - 40px);
    }
    
    .topnav li.text {
        padding: 8px 4.5%;
    }
    
    .topnav a {
        font-size: 17px;
    }

    .topnav .yhteys {
        width: 100%;;
    }
    
    .topnav .yhteys li {
        float: left;
        margin: 0;
    }
    
    
    /* SISÄLTÖ */
    page {
      margin: 0 10px;
      width: calc(100% - 20px);
    }
    
    
    /* TYÖNÄYTTEET */
    page {
        padding-bottom: 20px;
    }
    
    page.tyonaytteet, page.tyonaytteet.korkea {
        width: calc(100% - 80px);
        margin: 0 40px;
    }
    
    .tyonayteikkuna {
        width: 100%;
    }
    
    h1 {
        font-size: 7vw;
        margin: 60px 0 20px;
    }
    
    h1.tyonayteportaali {
        margin: 0 0 30px;
    }
    
    h3.palaa {
        margin-bottom: 30px;
    }
    
    .kategoria {
        width: 230px;
        height: 170px;
        margin: 10px calc(50% - 115px);
    }
    
    
    /* REFAT */
    .refa h1 {
        width: 100%;
        margin-left: 0;
        margin-top: 50px;
        margin-bottom: 30px;
    }
    
    .refa {
        width: 100%;
        padding: 0;
    }
    
    .thumb {
       margin: 0 calc(50% - 75px) 10px;
    }
    
    .refa ul {
        width: 100%;
        margin: 0 0 10px 0;
    }
    
    .refa h2, h2.pvm {
        margin-top: 15px;
        font-size: 20px;
        text-align: center;
        width: 100%;
    }
    
    article {
        font-size: 16px;
    }
    
    p {
        line-height: 1.4;
        text-align: center;
    }
    
    
    /* INFO */
    .bg {
        background-image: url("../kuvat/potretti/taustapotretti_2021_luuri.jpg");
    }
    
    .topnav.info {
        position: relative;
    }
    
    h1.info {
        margin-top: 0;
    }
    
    h1.tekija {
        margin-top: 40px;
    }
    
    h2 {
        font-size: 24px;
    }
    
    p.tiedot, p.tekija {
        font-size: 4.5vw;
        width: 100%;
        margin: 0 auto;
    }
    
    article {
        width: calc(100% - 30px);
        margin: 0 15px 50px;
        margin-top: 0px;
    }
    
    /* YHTEYS */
    #lomake h1 {
        font-family: "Open Sans", sans-serif;
        font-size: 28px;
        font-weight: 600;
        margin-bottom: 30px;
    }
    
    form {
        width: 100%;
        margin:0 auto;
    }
    
    form input, form textarea {
      background-color: #808080;
      font-family: "Open Sans", sans-serif;
      font-size: 20px;
      font-weight: 400;
      line-height: 1.9em;
      color: #FFFFFF;
      -moz-box-shadow: inset 5px 5px 10px rgba(68,68,68,0.6);
      -webkit-box-shadow: inset 5px 5px 10px rgba(68,68,68,0.6);
      box-shadow: inset 5px 5px 10px rgba(68,68,68,0.6);
      border: 0;
      margin-bottom: 20px;
      padding: 0 12px;
    }
}




@media screen and (max-width:800px) and (orientation:landscape)
/*and (-webkit-min-device-pixel-ratio: 3)*/{
     /* INTRO */
    .logo.intro {
        width: 50px;
        height: 50px;
        top: 20%;
        left: 50%;
        margin-left: -20px;
    }

    h1.intro {
        font-family: 'Open Sans', sans-serif;
        width: 100%;
        position: absolute;
        font-size: 20px;
        top: 60%;
    }
    
    
    /* VIIMEISIN */
    h1.viimeisin {
        width: calc(100% - 15px);
        font-size: 8vw;
        text-shadow: 8px 7px 6px rgba(0, 0, 0, 0.7);
        top: 45%;
    }
    
    
    /* NAVI */
    .sidenav {
        display: block;
    }
    
    .topnav {
        display: none;
    }
    
    .topnavlogo {
        position: relative;
        float: left;
        width: 50px;
        height: 50px;
        top: 0;
        left: 0;
        margin: 30px calc(50% - 35px) 20px;
    }
    
    img.graafista.topnav {
        display: none;
    }
    
    .topnav li {
        display: block;
    }

    .topnav .ikonit {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        float: left;
        width: 50%;
        margin: 5px 25% 0;
        height: 40px;
    }

    .topnav .tekstivalikko {
        padding: 0 20px;
        width: calc(100% - 40px);
    }
    
    .topnav li.text {
        padding: 8px 4.5%;
    }
    
    .topnav a {
        font-size: 17px;
    }

    .topnav .yhteys {
        width: 100%;;
    }
    
    .topnav .yhteys li {
        float: left;
        margin: 0;
    }
    
    h1.viimeisin {
        top: 27.3%;
        text-shadow: 6px 5px 5px rgba(0, 0, 0, 0.7);
    }
    
    .sidenav {
        width: 90px;
        background-color: transparent;
        opacity: 100%;
    }
    
    .sidenav .g-logo {
        width: 50px;
        height: 50px;
        margin: 20px calc(50% - 25px) 0;
    }
    
    .graafista {
        width: 900%;
        margin: 15px 5% 0;
    }
    
    img.navinuoli {
        height: 30px;
        top: 46.2%;
        left: 44%;
    }

    .sidenav:hover {
       width: 200px;  
    }

    .sidenav:hover .logo {
       width: 70px;
       height: 70px;
       margin: 25px calc(50% - 35px);  
    }
    
    .sidenav:hover img.graafista, .sidenav:target img.graafista {
        margin: 0 25%;
        width: 50%;
    }
    
    .sidenav .navit {
        margin-top: 45%;
    }


    /* YHTEYSIKONIT */
    li.yhteys {
        display: block;
        width: 100%;
    }

    ul.ikonit {
        margin-right: 25px;
    }
    
    .ikoni.mail {
        width: 20px;
        height: 20px;
    }

    .ikoni.kirje {
        width: 30px;
        height: 15px;
    }

    .ikoni.luuri {
        width: 16px;
        height: 30px;
    }
    
    
    /* SISÄLTÖ */
    page {
      margin: 0 10px;
      width: calc(100% - 20px);
        padding-bottom: 20px;
    }
    
    
    /* TYÖNÄYTESIVUT */
    page.tyonaytteet, page.tyonaytteet.korkea {
        width: calc(100% - 50px);
        padding: 10px 0 30px 50px;
        margin-top: 0
    }
    
    page.tyonaytteet h1.ylin {
      margin-top: 30px;
    }
    
    h1.tyonayteportaali {
        margin: 0 0 30px;
    }
    
    h3.palaa {
      margin-bottom: 20px;
    }
    
    .tyonayteikkuna {
        float: right;
        width: calc(100% - 90px);
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .kategoria {
        width: 175px;
        height: 130px;
        margin: 10px;
    }
    
    
    /* REFAT */
    .refa h1 {
        width: 100%;
        margin-left: 0;
        margin-top: 30px;
        margin-bottom: 20px;
        font-size: 25px;
    }
    
    .refa h2, h2.pvm {
      margin-top: 15px;
      font-size: 17px;
    }
    
    .refa {
        width: 100%;
        padding: 0;
    }
    
    .refa ul {
      width: 70%;
      margin: 0 15%;
    }
    
    .thumb {
        height: 120px;
        width: 120px;
        margin: 0 calc(50% - 60px) 10px;
    }
    
    article {
        font-size: 16px;
    }
    
    p {
        line-height: 1.4;
        text-align: center;
    }
    
    
    /* INFO */
    page.info {
      width: calc(100% - 240px);
      margin: 0;
      padding: 0 120px 20px;
    }

    .bg {
        background-image: url("../kuvat/potretti/luuripotretti_landscape.jpg");
        transition: all 1.0s ease-in-out;
    }
    
    h1.info {
        font-size: 35px;
        margin: 280px 0 20px
    }
    
    h1.tekija {
        margin-top: 40px;
    }
    
    h2 {
        font-size: 24px;
    }
    
    p.tiedot, p.tekija {
        font-size: 18px;
        width: 100%;
        margin: 0 auto;
    }
    
    article {
        width: calc(100% - 30px);
        margin: 0 15px 50px;
        margin-top: 0px;
    }
}