/* -------------------------- EKA YRITYS PRELOAD ----------------------- */
.bg_load {
    position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	background: #EEE;
}

.wrapper {
    /* Size and position */
	font-size: 25px; /* 1em */
    width: 8em;
	height: 8em;
    position: fixed;
    left: 50%;
    top: 50%;
    margin-top: -100px;
    margin-left: -100px;

    /* Styles */
	border-radius: 50%;
    background: rgba(255,255,255,0.1);
    border: 1em dashed rgba(138,189,195,0.5);
    box-shadow: 
        inset 0 0 2em rgba(255,255,255,0.3),
        0 0 0 0.7em rgba(255,255,255,0.3);
    animation: rota 3.5s linear infinite;

    /* Font styles */
    font-family: 'Racing Sans One', sans-serif;
    
    color: #444;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 0 .04em rgba(255,255,255,0.9);
    line-height: 6em;
}

.wrapper:before,
.wrapper:after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: inherit;
    box-shadow: inset 0 0 2em rgba(255,255,255,0.3);
    border: 1em dashed;
}

.wrapper:before {
    border-color: rgba(138,189,195,0.2);
	top: 0; right: 0; bottom: 0; left: 0;
}

.wrapper:after {
	border-color: rgba(138,189,195,0.4);
    top: 1em; right: 1em; bottom: 1em; left: 1em; 
}

.wrapper .inner {
    width: 100%;
    height: 100%;
    animation: rota 3.5s linear reverse infinite;
}

.wrapper span {
    display: inline-block;
    animation: placeholder 1.5s ease-out infinite;
}

.wrapper span:nth-child(1)  { animation-name: loading-1;  }
.wrapper span:nth-child(2)  { animation-name: loading-2;  }
.wrapper span:nth-child(3)  { animation-name: loading-3;  }
.wrapper span:nth-child(4)  { animation-name: loading-4;  }
.wrapper span:nth-child(5)  { animation-name: loading-5;  }
.wrapper span:nth-child(6)  { animation-name: loading-6;  }
.wrapper span:nth-child(7)  { animation-name: loading-7;  }

@keyframes rota {
    to { transform: rotate(360deg); }
}

@keyframes loading-1 {
    14.28% { opacity: 0.3; }
}

@keyframes loading-2 {
    28.57% { opacity: 0.3; }
}

@keyframes loading-3 {
    42.86% { opacity: 0.3; }
}

@keyframes loading-4 {
    57.14% { opacity: 0.3; }
}

@keyframes loading-5 {
    71.43% { opacity: 0.3; }
}

@keyframes loading-6 {
    85.71% { opacity: 0.3; }
}

@keyframes loading-7 {
    100% { opacity: 0.3; }
}


/* ---------------------- TOINEN YRITYS PRELOAD ------------------------ */

.loader {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 99;
	background: url('https://6ed03b3e7ee716b29bc2dee79aafb8179ed53b19-www.googledrive.com/host/0B9VLbslO6g64UnFTUlQzWDVMdXM') 50% 50% no-repeat rgb(249,249,249);
}

.loader-container {
	width: 500px;
	height: 100px;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	
	margin: auto;
	text-align: center;
}


.navbar-custom {
	/* background-color: rgba(0,0,0,0.6); */
     background-color: rgba(0,0,0,0.96);
    color:#ffffff;
  	border-radius: 0;
    margin-bottom: 0;
    border: none;
}

body {
    background-color: white;
}
  
.navbar-custom .navbar-nav > li > a {
  	color:#fff;
    font-style: italic;
}

.navbar-custom .navbar-nav > .active > a {
    color: #ffffff;
	background-color:transparent;
}
      
.navbar-custom .navbar-nav > li > a:hover,
.navbar-custom .navbar-nav > li > a:focus,
.navbar-custom .navbar-nav > .active > a:hover,
.navbar-custom .navbar-nav > .active > a:focus,
.navbar-custom .navbar-nav > .open >a {
    text-decoration: none;
    background-color: rgba(15, 15, 15, 1);
}
     
.navbar-custom .navbar-brand {
  	color:#eeeeee;
}
.navbar-custom .navbar-toggle:hover {
  	background-color:rgba(15, 15, 15, 1);
} 

.navbar-custom .navbar-toggle:focus {
    background-color: rgba(0,0,0,0.2);
}
/*
.navbar-custom .navbar-toggle:hover .icon-bar {
    background-color: red;
} */

.navbar-custom .navbar-toggle {
  border-color: rgba(0,0,0,0);
}

.navbar-custom .icon-bar {
  	background-color: #eeeeee;
}
 
 
/* Remove the navbar's default margin-bottom and rounded borders */ 

@font-face {
    font-family: "brandFont";
    src: url(../fonts/octavio/Octavio.ttf);
    /* src: url(..fonts/octavio/Octavio.ttf); */
}
.navbar-brand {
    font-family: "brandFont";
    font-size: 35px;
}
/*==========================CAROUSEL==========================*/

  .carousel-inner img {
      width: 100%; /* Set width to 100% */
      margin: auto;
      min-height:200px;
  }

.carousel-caption {
    top: 50%;
    position: absolute;
    bottom: auto;
}

.carousel-caption h1 {
    color: white;
}

html,body {
    height: 100%;
}

.carousel,.item,.active{height:100%;}
.carousel-inner {
    height: 100%;
}

.carouselContainer {
   /*  width: 100%;
    padding-top: 0px;
    padding-left: 0px;
    padding-right: 0px; */
    /*height: 90%;*/
}

.carousel .item {
    width: 100%; /*slider width*/
    max-height: 850px;
    /* max-height: 760px; /* slider height */
}

    #myCarousel .carousel-caption {
        text-shadow: 2px 2px 5px #000000;
    }

#myCarousel p {
    font-size: 25px;
    text-shadow: 5px 5px 7px #000000;
    
}

/*====================== CAROUSEL ANIMATIONS =============================*/

#ttest  h1{

    -webkit-animation: fadein 3s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 3s; /* Firefox < 16 */
        -ms-animation: fadein 3s; /* Internet Explorer */
         -o-animation: fadein 3s; /* Opera < 12.1 */
            animation: fadein 3s;
    
/*    -webkit-animation-delay: 2s;  Safari 4.0 - 8.0
    animation-delay: 2s; */
    
    -webkit-animation-fill-mode: forwards;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
} 


#ttest p {
    margin-top: 25px;
    font-size: 21px;
    text-align: center;
    opacity: 0;

    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
    
     -webkit-animation-delay: 1s;  Safari 4.0 - 8.0
    animation-delay: 1s;
    
    -webkit-animation-fill-mode: forwards;
    
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}


/* ============================== SLIDE IN ================================ */

 .slideanim {visibility:hidden;}
  .slide {
      animation-name: slide;
      -webkit-animation-name: slide;
      animation-duration: 1s;
      -webkit-animation-duration: 1s;
      visibility: visible;
  }
  @keyframes slide {
    0% {
      opacity: 0;
      transform: translateY(70%);
    } 
    100% {
      opacity: 1;
      transform: translateY(0%);
    }
  }
  @-webkit-keyframes slide {
    0% {
      opacity: 0;
      -webkit-transform: translateY(70%);
    } 
    100% {
      opacity: 1;
      -webkit-transform: translateY(0%);
    }
  }




/* .jumbotron-test {
    position: relative;
    padding-top: 0px;
    background-image: url(../../img/works/taiteilija/majakan_himmetessa.jpg);
    background-position: center;
    width: 100%;
    height: 100%;
    /* background-size: 100% 100vp; */
   /* background-size: cover;
    overflow: hidden;
    
}

.jumbotron-test h1 {
/* margin-top: 50%; 
 left: 10px;
 font-size: 15px; */
   /* position:static;
    margin-top: 30%;
    color: white;
    text-shadow: 2px 2px 5px #000000;
    text-align: center;
} */

 /* .affix {
      top: 0;
      width: 100%;
  } */

  
/* ul {         
          padding:0 0 0 0;
          margin:0 0 0 0;
      }
      ul li {     
          list-style:none;
          margin-bottom:25px;           
      }
      ul li img {
          cursor: pointer;
      }
      .modal-body {
          padding:5px !important;
      }
      .modal-content {
          border-radius:0;
      }
      .modal-dialog img {
          text-align:center;
          margin:0 auto;
      }
    .controls{          
        width:50px;
        display:block;
        font-size:11px;
        padding-top:8px;
        font-weight:bold;          
    }
    .next {
        float:right;
        text-align:right;
    }
      /*override modal for demo only*/
      .modal-dialog {
          max-width:500px;
          padding-top: 90px;
      }
      @media screen and (min-width: 768px){
          .modal-dialog {
              width:500px;
              padding-top: 90px;
          }          
      }
      @media screen and (max-width:1500px){
          #ads {
              display:none;
          }
      }


/* ------------------------------ PARALLAX ---------------------------- */
body,html {
    height:100%;
}

.parallax {
    background-image: url(../../img/works/taiteilija/majakan_himmetessa.jpg);
    height: 100%;
    background-attachment:fixed;
    background-position:center;
    background-repeat: no-repeat;
    background-size: cover;
}

.artist_parallax {
    
    /*TAUSTAKUVA*/
    /* overflow: auto;
    background: url("../../img/works/varjo.jpg") no-repeat center center fixed;
    color:#fff;
    background-size:cover;
    height: 700px; */
    background: url("../../img/works/varjo_2000width.jpg") no-repeat center center;
    background-size: cover;
    height: 90%;
    
}

.artist_parallax h1 {
    font-size:50px;
    padding-top: 400px;
    color: white;
}

.working_picture {
    background: url("../../img/works/working_muokattu_teravoity_2000width.jpg") no-repeat center center;
    background-size: cover;
    height: 90%;
}

.galleria_small {
    display: none;
}

.working_picture h1{    
    font-size: 50px;
    padding-top: 350px;
    color: white;
}


.divider {
    height:50px;    
}

.page-break {
    width: 50%;
    height: 3px;
    background-color: #fff;
    margin: 0 auto;
}

/* ------------------- RESPONSIVE IMAGE HOVER EFFECT ------------------ */

.divImg .caption {
    height:100%;
    width: 100%;
		cursor: pointer;
		position: absolute;
    top:0;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.35s ease;
}

.caption-text h1{
		text-transform: uppercase;
		font-size: 24px;
}

.caption-text {
		z-index: 5;
		color: #fff;
    position: absolute;
    width: 100%;
    top: 50%;   
    transform: translateY(-50%); 
    text-align: center;
}

.blur {
		background-color: rgba(0,0,0,0.5);
		height: 100%;
		width: 100%;
    position: absolute;
    top:0;
}

.square {
    height: 100%;
    width: 100%;  
    outline: 2px solid white;
    outline-offset: -10px;
}

.square + .caption-text h1 {
  font-size: 30px;
}

.effect2 .blur {
  background-color: rgba(217,24,40,0.5);
}

.effect2:hover .caption{
  transform: scaleY(1);
}

.effect3:hover img {
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

.effect3:hover .caption{
  transform: scaleY(1);
}

.effect4 .caption{
  transition: opacity 0.35s ease-in-out;
  -moz-transition: opacity .35s ease-in-out;
  -webkit-transition: opacity .35s ease-in-out;
}
.effect4 .caption {
    top: 50%;   
    transform: translateY(-50%);
    opacity: 0;
    -webkit-backface-visibility: hidden;
}
.effect4:hover img {
  opacity: 0.92;
}
.effect4:hover .caption{
    opacity: 1;
}


/* --------------------------- MEDIA QUERIES -------------------------------*/


    /* Medium Devices, Desktops */
/* =========================== 992 ====================== */
    @media only screen and (max-width : 992px) {
            .firstPicture {
            height: 80%;
            width: 80%;
        } 
        
         #myCarousel .carousel-caption {
        font-size: 20px;
        top: 40%;
    }
        
        #myCarousel p {
            font-size: 23px;
        }
        
        #myCarousel h1 {
            font-size: 35px;
        }
        
        #muita h1 {
        padding-top: 250px;
    } 
        
    }
/* =========================== 800 ====================== */
 @media (max-width:800px) {

     .firstPicture {
            height: 70%;
            width: 70%;
        }
     
     
        #muita h1 {
        padding-top: 250px;
    }
     
} 

/* keep full widget on smaller screens */
/* =========================== 768 ====================== */
@media (max-width: 768px) { 
	body {
		padding-left: 0;
		padding-right: 0;
	}
    
    #myCarousel .carousel-caption {
        font-size: 20px;
        /* display: none !important; */
        top: 40%;
    }
    
    #myCarousel p {
        font-size: 20px;
    }
    
    #myCarousel h1 {
        font-size: 30px;
    }
    
    .artist_small {
        display: block!important;
        background: url("../../img/works/varjo_rajattu_small_1200width.jpg") no-repeat center center;
        background-size: cover;
        height: 70%;
    }
    
    .artist_small h1 {
        padding-top: 250px;
        font-size: 30px;
        color: white;
    }
    
    .muita {
        font-size: 30px;
    }
    
        #galleria {
        display: none!important;
    }
    
    
    
} 
/* ========================= 668 ========================= */
@media (max-width: 600px) {
    
    #myCarousel .carousel-caption {
        font-size: 20px;
        /* display: none !important; */
        top: 30%;
    }
    
    #myCarousel p {
        font-size: 18px;
    }
    
    #myCarousel h1 {
        font-size: 20px;
    }
    
        #galleria {
        display: none!important;
    }
    
    #muita h1 {
        font-size: 30px;
        padding-top: 165px;
    }
    #muita {
        height: 80%;
    }
    
    .artist_small {
        height: 80%;
    }
    
    .artist_small h1 {
        font-size: 30px;
    }
    
    .loader-container h3 {
        font-size: 30px;
    }
    
    loader-container {
        top: -40%;
    }
    
}

/* =========================== 480 ====================== */
@media (max-width : 480px) {
    
    #myCarousel p {
        font-size: 15px;
    }
    
    #myCarousel h1 {
        font-size: 18px;
    }
    
    #myCarousel .carousel-caption {
        top: 20%;
    }
    
        .firstPicture {
            height: 70%;
            width: 70%;
        }
    #galleria h1 {
        font-size: 25px;
        padding-top: 300px;
    }
    
    #galleria {
        display: none!important;
    }
    
    #yhteystiedot h2 {
        font-size: 25px;
    }
    
    .kurikkamap {
        height: 80%;
        width: 80%;
    }
    
    #muita {
        height: 70%;
    }
    
    #muita h1 {
        font-size: 25px;
        padding-top: 200px;
    }
    
    .artist_small {
        display: block!important;
        background: url("../../img/works/varjo_rajattu_small_1200width.jpg") no-repeat center center;
        background-size: cover;
        height: 70%;
    }
    
    .artist_small h1 {
        padding-top: 250px;
        font-size: 25px;
        color: white;
    }
    
        
    .loader-container h3 {
        font-size: 18px;
    }
    
        .loader-container {
        width: 100%;
            top: -40%;
    }
    

    
} /*END OF MAX 480*/


/* =================== ================ */

@media (max-width: 380px) {
    
    #myCarousel p {
        font-size: 15px;
    }
    
    #myCarousel h1 {
        display: none;
    }
    
    #myCarousel .carousel-caption {
        top: 20%;
    }
    
        #myCarousel .longer_slide_text {
        top: 8%;
    }
    
    #muita h1 {
        font-size: 25px;
        padding-top: 250px;
    }
    #muita {
        height: 70%;
    }
    .artist_small {
        height: 70%;
    }
    
    .artist_small h1 {
        font-size: 25px;
    }
    
       .thumbnail .caption h3 {
        font-size: 12px;
    }
    
    .loader-container h3 {
        font-size: 15px;
    }
    
    .loader-container {
        width: 100%;
        top: -40%;
    }
}

/* =========================== 320 ====================== */
@media (max-width: 320px) {
    
        .carouselContainer p {
            display: none;
        }
         .carouselContainer h1 {
            display: none;
        }
    
        #muita h1 {
        font-size: 25px;
        padding-top: 165px;
    }
    #muita {
        height: 50%;
    }
    
    #yhteystiedot h2 {
        font-size: 25px;
    }
    
    .artist_small {
        height: 50%;
    }
    
    .artist_small h1 {
        font-size: 25px;
    }
    
    .thumbnail .caption h3 {
        font-size: 10px;
    }
    
    .loader-container h3 {
        font-size: 12px;
    }
    
    .loader-container {
        width: 100%;
        top: -20%;
    }
}