@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) {
	
}

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

}


/* ISO PADI PORTRAIT, HUAWEI HONOR 7, SAMSUNG GALAXY A3 */
@media screen and (max-device-width: 1080px) and (orientation:portrait) {
    
    .sisalto.cv {
      width: 80%;
      padding: 40px 10%;
    }
}


/* PIKKUPADIT PORTRAIT, HUAWEI HONOR 7, SAMSUNG GALAXY A3 */
@media screen and (max-device-width: 770px) and (orientation:portrait) {
   #navikko ul.desktop {
        display: block;
        visibility: visible;
    }
    
    #navikko ul.mobilevalikko {
        visibility: hidden;
        display: none;
    }
    
     #navikko  {
		font-size: 1em;
	}
    
    /* ETUSIVU */
    .nimmari {
        transform: rotate(-60deg);
        width: 210%;
        height: auto;
        margin: 70% 0 0 -45%;
    }
    
    /* TYPO */
    h1 {
		font-size: 5em;
		margin-top: 80px;
	}
	
	h2 {
		font-size: 2.8em;
        line-height: 1em;
        margin-bottom: 20px;
	}
	
	h2.video {
		font-size:2.5em;
	}
    
    h3 {
        font-size: 2em;
    }
    
    p {
        font-size: .85em;
        line-height: 1.5em;
        margin-left: 0;
        margin-right: 0;
        padding: 0;
    }
}
    


/* LUURIT */
@media screen and (max-width: 599px) and (orientation:portrait){
    .sivualue {
        width: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
    
    .sisalto, .sisalto.cv {
      width: calc(100% - 20px);
      padding: 40px 10px;
    }
    
    #navikko ul.desktop {
        display: none;
        visibility: hidden;
    }
    
    #navikko ul.mobilevalikko {
        visibility: visible;
        display: block;
    }
    
    ul.pudotusvalikko {
        display: none;
        position: absolute;
        min-height: 120px;
        top: 0;
        left: 0;
        margin: 0;
        padding: 25px 0;
        height: 0;
        width: 100%;
        list-style: none;
        background-color: #292e70;
        background-image: url(../kuvat/taustamaalaus.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center top;
        background-attachment: fixed;
        z-index: 300;
        -webkit-box-shadow: -30px 0px 30px 0px #000000;
        -moz-box-shadow: -30px 0px 30px 0px #000000;
        box-shadow: -30px 0px 30px #000000;
        /* transitions */
        -webkit-transition: all .4s ease;
           -moz-transition: all .4s ease;
            -ms-transition: all .4s ease;
             -o-transition: all .4s ease;
                transition: all .4s ease;
    }
    
    ul.mobilevalikko:hover ul.pudotusvalikko, ul.mobilevalikko:active ul.pudotusvalikko, ul.mobilevalikko:target ul.pudotusvalikko {
        visibility: visible;
        display: block;
    }
    
    #navikko .pudotusvalikko li {
        padding-bottom: 5px;
    }
    
    #navikko .pudotusvalikko a {
        font-size: .75em;
    }
    
    
    /*  ETUSIVU  */
    .siipi {
        height:220%;
        width: auto;
        margin-left:-70px;
    }
    
    
	/* TYPO */
    h1, h2, h3, h4, h5, h6, p {
        width: 100%;
    }
    
    h1 {
		font-size:3em;
        margin: 40px 0 20px;
	}
	
	h2 {
		font-size: 1.8em;
        line-height: .8em;
        margin: 30px 0 0px;
	}
    
    .ajankohtaista h2 {
      margin: 40px 0 0;
    }
	
	h2.video {
		font-size:2em;
	}
    
    h3 {
        font-size: 1.5em;
        line-height: .9em;
        margin-bottom: 15px;
    }
    
    h3.otsikon_alla {
        margin-top: 10px;
    }
    
    p, .ajankohtaista p {
        font-size: .7em;
        text-align: center;
        margin: 0px auto 15px;
    }
    
    .ajankohtaista p.intro {
        text-align: left;
    }
    
    .lb-data .lb-caption {
        font-size: 15px;
    }
    
    
    /* GALLERIAT, AJANKOHTAISTA */  
    .galleriacontainer {
        width: 100%;
        padding: 0;
        margin-top: 40px;
    }
      
    .galleriacontainer h1 {
      margin-bottom: 30px;
    }
        
    .galleria, .ajankohtaisgalleria, .ajankohtaisgalleria.pysty {
        width: 70%;
        height: auto;
        margin-top: 20px;
    }
	
	#foggagalleria {
		margin-top:30px;
	}
    
    
    /* ESITTELY */ 
	.esittely, .ajankohtaista {
        text-align: left;
        width: 100%;
        margin: 0;
        padding: 0;
    }
    
    .esittely p {
        text-align: left;
    }
    
    .videoikkuna {
        width: calc(100% - 14px);
    }

    .esittely p:first-child::first-letter, .ajankohtaista p:first-child::first-letter  {
        font-family: "autheniaregular";
        font-size: 100px;
        line-height: .4;
        font-weight:normal;
        color:#CCC;
        float: left; 
        margin: 0 25px 0 0;
        padding: 0;
        vertical-align: bottom;
        -moz-text-shadow: 4px 4px 10px #000000;
        -webkit-text-shadow: 4px 4px 10px #000000;
        text-shadow: 4px 4px 10px #000000;
    }
    
    img.eka, img.portrait {
        padding: 8px;
        background-color: #515A8E;
        -webkit-box-shadow: 0px 0px 30px 0px #000000;
            -moz-box-shadow:0px 0px 30px 0px #000000;
                box-shadow: 0px 0px 30px #000000;
    }
    
    img.eka, img.portrait {
        width: calc(90% - 16px);
        margin: 30px 5% 30px;
        height: auto;
    }

    img.portrait {
        width: calc(70% - 16px);
        margin: 0 15% 30px;
        height: auto;
    }
    
    
    /* CV */
    .taulukkowrap {
        display: none;
    }
    
    .mobile-cv {
        display: table-row-group;
        background-color: transparent;
    }
    
    ul.mobile-cv li.underline {
        border-bottom: 1px #FFFFFF;
    }
    
    section.cv {
      width: 100%;
      padding: 0;
      margin: 0 auto 50px;
    }
    
    section.cv h2.cv {
        margin-top: 0;
    }
    
    section.cv h5 {
      margin-top: 20px;
    }
    
    section.cv h6 {
      margin-top: 0;
      margin-bottom: 5px;
    }
    
    /* YHTEYSTIEDOT */
    .yhteystiedot UL {
        padding: 0;
        margin: 0;
        width: 100%;
    }
    
    .yhteystiedot li {
        font-size: .9em;
    }
}