@import "fonts.less";
@import "variabele.less";

html{
  body{   
    font-family: @text-font-family;
    font-size: @text-font-size;
    line-height: @text-line-height;
    font-weight: @text-font-weight;


    @media (min-width: 1590px){
        .container {
            max-width: 1810px;
        }
    }
    @media (min-width: 1440px){
        .container {
            max-width: 1810px;
        }
    }
    @media (min-width: 990px){
        .container{
            max-width: 1810px;
        }
    }
    @media (min-width: 760px){
        .container {
            max-width: 1810px;
        }
    }
    @media (min-width: 550px){
        .container {
            max-width: 1810px;
        }
    }

    .nopadding {
        padding: 0 !important;
    }
    
    .relative{
    	position:relative;
    }

    h1,h2,h3,h4,h5,h6{
        color: @heading-primary-color;
        font-family: @heading-family;
        font-weight: @heading-weight;

        &.secondary{
            color: @heading-secondary-color;
        }
        
        &.tertiary{
            color: @heading-tertiary-color;
        }
        
        &.quartary{
            color: @heading-quartary-color;  	
        }
    }

    h1{
        font-size: @heading-h1-size;
    }

    h2{
        font-size: @heading-h2-size;
    }

    h3{
        font-size: @heading-h3-size;
    }
    
    .hr-stippellijn{
    	height:3px;
    	background:transparent;
    	border-top: 3px dashed #7c7c7c;
    }
    
    .float-right{
    	float:right;
    }
    
    .switch {
	  position: relative;
	  display: inline-block;
	  width: 140px;
	  height: 70px;	  
	  input{ 
	      opacity: 0;
		  width: 0;
		  height: 0;
	  }
    }

    .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #707070;
    -webkit-transition: .4s;
    transition: .4s;

        &:before {
            position: absolute;
            content: "";
            height: 62px;
            width: 62px;
            left: 4px;
            bottom: 4px;
            background-color: #FEDD03;
            -webkit-transition: .4s;
            transition: .4s;
        }

        &:after {
            position: absolute;
            content: "";
            height: 70px;
            width: 140px;
            left:-140px;
            background:url('../images/click-to-switch.jpg')
        }
    }


    input:checked + .slider {
    	&:before {
	      background-color: #B3E0D7;
	 }
    }

    input:focus + .slider {
	box-shadow: 0 0 1px #2196F3;
    }  

    input:checked + .slider:before {
        -webkit-transform: translateX(70px);
        -ms-transform: translateX(70px);
        transform: translateX(70px);
    }

    /* Rounded sliders */
    .slider.round {
	    border-radius: 62px;
    	&:before {
	        border-radius: 50%;
	    }
    }

    .btn{
        &.btn-primary,
        &.btn-secondary{
            background-color: @btn-background;
            border-color: @btn-border;
            color: @btn-text-color;
            font-weight: @btn-font-weight;
            position: relative;
            padding-left:58px;
            padding-right:10px;
            border-radius:15px;
            min-height:57px;
            line-height:45px;

            &:before{
                content:'';
                background:url('../images/primary-arrow.jpg') @btn-primary-icon-background no-repeat center center;
                width:50px;
                height:100%;
                display:inline-block;
                position:absolute;
                left:0;
                top:0;
                border-top-left-radius: 15px;
                border-bottom-left-radius: 15px;
            }
        }

        &.btn-secondary{
            &:before{
                background:url('../images/secondary-arrow.jpg') @btn-secondary-icon-background no-repeat center center;
            }
        }
    }
    
    .navigator{
    	position:fixed;
    	top:10%;
    	left:3%;  
    	min-height:50px; 
    	
        @media (max-width: 1250px){
            left: 0%;
        }	
    	
    	ul{  	
            background:#FAFAFA; 
            border-radius:15px;
            padding:0 10px;
            margin:0;
            min-height:50px; 
            width:50px;

            li{
            display:inline-block;
            writing-mode: vertical-rl;
            transform: rotate(180deg);
            white-space: nowrap;
            display: inline-block;
            overflow: visible;


                    
            
                a{
                    text-decoration:none;
                    margin:0;
                    padding:10px 5px;
                    border-radius:10px;
                    color:#fff;
                    
                    @media (max-width: 1000px){
                        font-size: 16px;
                    }              
                
                }
            
                &:nth-child(1){
                    a{
                        background:#07206F;                
                    }
                }
                
                &:nth-child(2){
                    a{
                        background:#01C180;		
                    }
                }
                
                &:nth-child(3){
                    a{
                        background:#055975;		
                    }
                }
                
                &:nth-child(4){
                    a{
                        background:#FEDD03;		
                    }
                }
                
                &:nth-child(5){
                    a{
                        background:#B3E0D7;		
                    }
                }

            @media (max-height: 700px){
                writing-mode:horizontal-tb;
                transform: rotate(0deg);
                margin-bottom:20px;
            }
            
            }
    	}
    	
    	div{
            position:absolute;
            width:200px;
            top:0;
            left:70px;

            @media (max-height: 700px){
                width:100px;
                left:160px;
            }

            @media (max-height: 700px) and (max-width:1000px){
                width:100px;
                left:120px;
            }            
    	}
    }

    .cosumers-do-care,
    .the-packaging-is-evaluated-by,
    .perceived-sustainability,
    .in-shop-scenario,
    .packaging-waste,
    .user-limitations,
    .motivation-opportunity-ability,
    .limited-packaging-knowledge,
    .outdoor-disposal-scenario{
        position:relative;
        .info,.button{
            position:absolute;
            width:50%;
            height:50%;
            font-size: @tooltip-font-size;

            > span{
                visibility:hidden;
                position:absolute;
                opacity:0;
            }
            
            > a{
                display:block;
                width:100%;
                height:100%;
            }

            &:hover{
                > span{
                    visibility:visible;
                    opacity:1;
                    transition:opacity 1000ms;
                }
            }

            &.one{
                top:15%;
                left:0%;
                span{
                    top:60px;
                    left:-100px;
                    width:200px;
                }
            }

            &.two{
                top:0%;
                left:50%;
                span{
                    top:-40px;
                    right:-100px;
                    width:200px;
                }
            }

            &.three{
                top:60%;
                left:0%;
                span{
                    bottom:-50px;
                    left:-120px;
                    width:200px;
                }
            }

            &.four{
                top:50%;
                left:50%;
                span{
                    right:-150px;
                    bottom:-200px;
                }
            }
        }
    }

    .the-packaging-is-evaluated-by{
        .info{
            &.one{
                top:50%;
                left:50%;
                span{
                    top:-260px;
                    left:auto;
                    right:-100px;
                    width:200px;
                }
            }
        }
    }

    .perceived-sustainability{
        .info{
            width:30%;
            height:100%;

            &.one{
                top:0%;
                left:0%;
                
                span{
                    top:50px;
                    left:-150px;
                    right:auto;
                    width:200px;
                }
            }
            &.two{
                top:0%;
                left:30%;
                span{
                    top:380px;
                    left:75px;
                    right:auto;
                    width:200px;
                }
            }
            &.three{
                top:0%;
                left:60%;
                span{
                    top:-100px;
                    left:0px;
                    right:auto;
                    width:200px;
                }
            }
        }
    }
    .in-shop-scenario{
        .info{
            width:30%;
	        font-size: @text-font-size;

            &.one{
                top:auto;
                left:0%;
                bottom:0;                
                span{
                    top:-200px;
                    left:0px;
                    right:auto;
                    width:400px;
                    background:rgba(255,255,255,0.6);
                    padding:15px;
                    border-radius:15px;
                }
            }
            &.two{
                top:0%;
                left:auto;
                right:0;
                span{
                    top:250px;
                    left:25px;
                    right:auto;
                    width:360px;
                    background:#fff;
                    padding:15px;
                    border:1px solid #ccc;
                    border-bottom:0;
                    &:after{
		    	content:'';
		    	position:absolute;
		    	bottom:-28px;
		    	left:0;
		    	width:100%;
		    	height:30px;
		    	background:url('../images/ruitjes-background.png');             
		    }
		    
		    .lines{
		    	width:200px;
		    	margin:0 auto;		
		    	    	
		    	hr:nth-child(1),
		    	hr:nth-child(2){
		    		width:100px;
		    		margin:1rem auto;
		    	}
		    }
		    
		    .lines2{
		    	width:100px;
		    	float:left;
		    }
		    
		    .lines3{
		    	width:100px;
		    	float:right;
		    	text-align:right;
		    }
                }
                
            }
        }
    }
    .packaging-waste{
        .info{
            width:100%;
            height:100%;	    
            &.one{
                top:0;
                left:0;              
                span{
                    top:0px;
                    left:auto;
                    right:0px;
                    width:100%;
                    padding:15px;
                    background:#fff;
                }
            }
        }
    }
    .user-limitations{
        .info{
            width:30%;
            font-size: @text-font-size;

            &.one{
                top:auto;
                left:10%;
                bottom:10%;
                height:20%; 
                span{
                    top:40px;
                    left:auto;
                    bottom:0px;
                    right:-175px;
                    width:200px;
                    background:rgba(255,255,255,0.6);
                    padding:15px;
                    border-radius:15px;
                }
            }
            &.two{
                top:30%;
                left:40%;    
            	width:15%;
                span{
                    top:0;
                    left:-200px;
                    right:auto;
                    width:200px;
                    background:rgba(255,255,255,0.6);
                    padding:15px;
                    border-radius:15px;
                }
            }
            &.three{
                top:25%;
                left:60%;  
                width:15%;
                height:25%;   
                span{
                    top:-250px;
                    left:0px;
                    right:0px;
                    bottom:auto;
                    width:400px;
                    background:rgba(255,255,255,0.6);
                    padding:15px;
                    border-radius:15px;
                }
            }
            &.four{
                top:50%;
                left:60%;
                width:15%;
                height:25%;
                span{
                    top:auto;
                    left:auto;
                    bottom:-120px;
                    right:-100px;
                    width:250px;
                    background:rgba(255,255,255,0.6);
                    padding:15px;
                    border-radius:15px;
                }
            }
        }
    }
    .motivation-opportunity-ability{
    	.info{
            width:15%;
            font-size: @text-font-size;
            // background:#000;
            >span{
            // visibility:visible !important;
            // opacity:1 !important;
            
            }

            &.one{
                top:5%;
                left:38.5%;
                bottom:auto;
                right:auto;
                height:5%; 
                span{
                   top: -80px;
		    left: 0px;
		    bottom: auto;
		    right: auto;
		    width: 250px;
                }
            }
            &.two{
                top:5.5%;
                left:56.5%;
                bottom:auto;
                right:auto;
                height:5%; 
                width:20%;
                span{
                    top:-115px;
                    left:0px;
                    right:auto;
                    bottom:auto;
                    width:250px;
                }
            }
            &.three{
                top:5.5%;
                left:80%;
                bottom:auto;
                right:auto;
                height:5%;  
                span{
                    top:-60px;
                    left:-100px;
                    right:0px;
                    bottom:auto;
                    width:300px;
                }
            }
            &.four{
                top:14%;
                left:30%;
                bottom:auto;
                right:auto;
                height:5%; 
                span{
                    top:0;
                    left:-300px;
                    bottom:auto;
                    right:auto;
                    width:250px;
                }
            }
            &.five{
                top:14%;
                left:50%;
                bottom:auto;
                right:auto;
                height:5%; 
                span{
                    top:auto;
                    left:auto;
                    bottom:-70px;
                    right:-60px;
                    width:250px;
                }
            }
            &.six{
                top:14%;
                left:70%;
                bottom:auto;
                right:auto;
                height:5%; 
                span{
                    top:auto;
                    left:auto;
                    bottom:-200px;
                    right:-50px;
                    width:250px;
                }
            }
            &.seven{
                top: 44%;
	        left: 12.3%;
	        width: 22%;
                bottom:auto;
                right:auto;
                height:5%; 
                span{
                    top:-150px;
                    left:0px;
                    bottom:auto;
                    right:auto;
                    width:250px;
                }
            }
            &.eight{
                top: 44%;
	        left: 45.3%;
	        width: 22%;
                bottom:auto;
                right:auto;
                height:5%; 
                span{
                    top:-180px;
                    left:auto;
                    bottom:auto;
                    right:0px;
                    width:250px;
                }
            }
            &.nine{
                top: 53%;
	        left: 30.3%;
	        width: 22%;
                bottom:auto;
                right:auto;
                height:5%; 
                span{
                    top:auto;
                    left:auto;
                    bottom:-120px;
                    right:-250px;
                    width:600px;
                    div{
                    	float:left;
                    	&:nth-child(1){
                    		width:40%;
                    	}
                    	&:nth-child(2){
	                    	margin-left:5%;
                    		width:55%;
                    	}
                    }
                }
            }
            &.ten{
                top: 85%;
	        left: 32.3%;
	        width: 22%;
                bottom:auto;
                right:auto;
                height:5%; 
                span{
                    top:-75px;
                    left:0px;
                    bottom:auto;
                    right:auto;
                    width:250px;
                }
            }
            &.eleven{
                top: 85%;
	        left: 55.3%;
	        width: 22%;
                bottom:auto;
                right:auto;
                height:5%; 
                span{
                    top:-130px;
                    left:0px;
                    bottom:auto;
                    right:auto;
                    width:250px;
                }
            }
            &.twelve{
                top: 92%;
	        left: 41%;
	        width: 22%;
                bottom:auto;
                right:auto;
                height:5%; 
                span{
                    top:auto;
                    left:auto;
                    bottom:-100px;
                    right:-25px;
                    width:350px;
                }
            }
        }
    }
    
    .limited-packaging-knowledge{
    	.info{
            width:10%;
            font-size: @text-font-size;
            &.one{
                top:auto;
                left:10%;
                bottom:20%;
                height:25%; 
                span{
                    top:-200px;
                    left:-200px;
                    bottom:auto;
                    right:auto;
                    width:300px;
                    background:rgba(255,255,255,0.6);
                    padding:15px;
                    border-radius:15px;
                }
            }
            &.two{
                top:40%;
                left:45%;    
            	width:10%;
            	height:15%;
                span{
                    top:-200px;
                    left:-100px;
                    right:auto;
                    width:250px;
                    background:rgba(255,255,255,0.6);
                    padding:15px;
                    border-radius:15px;
                }
            }
            &.three{
                top:40%;
                left:56%;  
                width:10%;
                height:15%;   
                span{
                    top:-200px;
                    left:0px;
                    right:0px;
                    bottom:auto;
                    width:300px;
                    background:rgba(255,255,255,0.6);
                    padding:15px;
                    border-radius:15px;
                }
            }
        } 
        .button{
	    width:30%;
	    font-size: @text-font-size;
	    display:block;
	    
	    &.one{
		top:4%;
		left:0%;
		bottom:auto;
		height:10%; 
            span{
                top:-200px;
                left:-200px;
                bottom:auto;
                right:auto;
                width:300px;
                background:rgba(255,255,255,0.6);
                padding:15px;
                border-radius:15px;
            }
	    }
	    &.two{
		top:15%;
		left:0%;
		bottom:auto;
		height:10%; 
            span{
                top:-200px;
                left:-100px;
                right:auto;
                width:250px;
                background:rgba(255,255,255,0.6);
                padding:15px;
                border-radius:15px;
            }
	    }
	    &.three{
		top:auto;
		left:auto;
		right:8%;
		bottom:4%;
		height:10%;  
		width:35%;
		span{
		    top:-200px;
		    left:0px;
		    right:0px;
		    bottom:auto;
		    width:300px;
		    background:rgba(255,255,255,0.6);
		    padding:15px;
		    border-radius:15px;
		}
	    }
        }
    }
    
    .outdoor-disposal-scenario{
    	.info{
            width:10%;
            font-size: @text-font-size;
            &.one{
                top:auto;
                left:25%;
                bottom:20%;
                height:15%; 
                span{
                    top:-200px;
                    left:-200px;
                    bottom:auto;
                    right:auto;
                    width:300px;
                    background:rgba(255,255,255,0.6);
                    padding:15px;
                    border-radius:15px;
                }
            }
            &.two{
                top:30%;
                left:43%;    
            	width:10%;
            	height:15%;
                span{
                    top:-200px;
                    left:-100px;
                    right:auto;
                    width:250px;
                    background:rgba(255,255,255,0.6);
                    padding:15px;
                    border-radius:15px;
                }
            }
        } 
        .button{
	    width:30%;
	    font-size: @text-font-size;
	    display:block;
            
            &.one{
                top:auto;
                left:10%;
                bottom:11%;
                height:10%; 
                span{
                    top:-200px;
                    left:-200px;
                    bottom:auto;
                    right:auto;
                    width:300px;
                    background:rgba(255,255,255,0.6);
                    padding:15px;
                    border-radius:15px;
                }
            }
            &.two{
                top:auto;
                left:10%;
                bottom:0%;
                height:10%; 
                width:40%;
                span{
                    top:-200px;
                    left:-100px;
                    right:auto;
                    width:250px;
                    background:rgba(255,255,255,0.6);
                    padding:15px;
                    border-radius:15px;
                }
            }
        }
    }
  }
}