/* pakkausmerkinnat */
.button-container{
		text-align: center;
	}
.modal-dialog{
	position: static !important;
}
div.panel-body ul, div.modal-body ul{
	padding: 0 20px 10px 20px;
}
.carton-content{
	margin-top: 20px;
}      

          
.carton-area div#text-area{
	padding: 0 !important;
}
.carton-content div#right-parsel, .carton-content div#right-parsel h4{
	padding-top: 0 !important;
	margin-top: 0 !important;
}

.carton-content #right-parsel .content {margin:0px;}

#text-area #right-parsel ul {padding: 0px 0 20px 0;}
#text-area #right-parsel ul li {margin:0px;padding: 0 0 6px 20px;line-height: 14px;background: url("/pics/orangeArrow.png") no-repeat 0 2px;}
#text-area #right-parsel a {text-decoration: none;color: #505050;font-weight: bold;}

/* MEDIA QUERIES BREAKPOINTS */
          
/* SMALLESTMOBI */

    .img-carton {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    width: 280px;
    }          
.visible-only-mobile{
		display: none;
	}

@media screen and ( max-width: 767px ){
	.visible-only-mobile{
		width: 100%;
		display: block;
		xfloat: left;
	}
	.carton-area.col-xs-12, .carton-area .col-xs-12{
		padding: 0; 
		margin: 0;
		float: left;
	}
}   
/* SMALLMOBI */       
@media (max-width: 480px) {
    .visible-smallmobi {
    display: block !important;
  }
    .visible-xs {
    display: none !important;
  }
    
    .img-carton {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    width: 320px;
    }
}
          
/* MOBI AND TABLET */
          
@media (min-width: 481px) {
    .visible-smallmobi {
    display: none !important;
  }
    
    .img-carton {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    width: 430px;
    }
}
 
/*TABLET AND DESKTOP*/          
@media (min-width: 767px) {
     .visible-smallmobi {
    display: none !important;
  }
    
    .img-carton {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    width: 488px;
   }
}  
  
        #main{
        width: 100%;
        max-width: 400px;
        height: 560px;
        position: relative;
        margin-left: auto; 
	    margin-right: auto; 
        }
         .img-carton{
        	width: 100%;
        	height: auto;
        	max-width: 400px;
        }
        .flipper{
        	display: none;
        }
        div.flipper a, div.flipper a:hover, div.flipper:active, h4.panel-title a, h4.panel-title a:hover, h4.panel-title a:active {
        	color: #fff !important;
        }
          
/* MODALS STYLE CHANGES */ 
        .modal-header{
        background: #f4980f;
        color: #fff;
        font-size: 1.2em;
        margin: 3px;        
        }
        .modal-body {
        position: relative;
        padding: 10px;
        }
        .modal-body2 {
        position: relative;
        padding: 10px;
        height: 220px;
        }
        .close {
        float: right;
        font-size: 21px;
        font-weight: bold;
        line-height: 1;
        color: #fff;
        text-shadow: 0 1px 0 #fff;
        opacity: 1;
        }
        .modal1{
        width: 100%;
        height: 100%;
         position: absolute;
        top: 70px;
        left: 50px;
        margin:140px 20px 30px 50px;
        }
        .modal2{
	    width: 100%;
        height: 100%;
        position: absolute;
        top: 60px;
        left: 200px;
        margin:140px 20px 30px 50px;
        }
        .modal3{
	    width: 100%;
        height: 100%;
        position: absolute;
        top: -80px;
        left: 100px;
        margin:140px 20px 30px 50px;
        }
        .modal4{
	    width: 100%;
        height: 100%;
        position: absolute;
        top: 290px;
		left: 160px;
        margin:140px 20px 30px 50px;
        }
        .modal5{
	    width: 100%;
        height: 100%;
        position: absolute;
        top: 20px;
		left: 150px;
        margin:140px 20px 30px 50px;
        }
        .modal6{
	    width: 100%;
        height: 100%;
        position: absolute;
        top: 290px;
		left: 160px;
        margin:140px 20px 30px 50px;
        }
        .modal7{
	    width: 100%;
        height: 100%;
        position: absolute;
        top: 140px;
		left: 20px;
        margin:140px 20px 30px 50px;
        }
        .modal8{
	    width: 100%;
        height: 100%;
        position: absolute;
        top: -80px;
        left: 170px;
        margin:140px 20px 30px 50px;
        }
          
          
/*PANEL STYLE CHANGES */
          .panel-default > .panel-heading {
            color: #fff;
            background-color: #f5f5f5;
            border-color: #ddd;
            }  

            .panel-default > .panel-heading {
            background-image: -webkit-linear-gradient(top, #f0ad4e 0%, #eb9316 100%);
            background-image:      -o-linear-gradient(top, #f0ad4e 0%, #eb9316 100%);
            background-image: -webkit-gradient(linear, left top, left bottom, from(#f0ad4e), to(#eb9316));
            background-image:         linear-gradient(to bottom, #f0ad4e 0%, #eb9316 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0ad4e', endColorstr='#eb9316', GradientType=0);
            background-repeat: repeat-x;
            }

/* LIST STYLE CHANGES */
          
            .list-reduced-padding{
            padding-left: 15px;
            }