/* menu toggle stuff */

.mobileMenuToggle, .sideMenuToggle {
	display:none;
}

span.non-mobile {
    font-weight: 700;
    font-size: 20px;
    float: left;
    top: 3px;
    color: #003772;
    font-family: Fira Sans, sans-serif;
    padding-left: 60px;
}
#toggle-menu {
    cursor: pointer;
    display: block;
    /*height: 15px;
	width: 15px;*/
	height: 45px;
	width: 60px;
    left: 0px;
    padding: 9px 16px;
    position: absolute;
    top: 0px;
    
}
#toggle-menu div {
   width: 15px;
   
    height: 15px;
	
    position: relative;
}
ul#menuu {
	margin-bottom:0;
}
#toggle-menu span {
    display: block;
   /* width: 15px;
    height: 3px;*/
	width: 30px;
	height: 3px;
	
   background: #003772;
    position: absolute;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
#toggle-menu span.top {
    top: 0px;
}
#toggle-menu span.middle {
   top: 6px;
}
#toggle-menu span.bottom {
    top: 12px;
}
.mobileMenuToggle.toggleVisible #toggle-menu span.top,
.sideMenuToggle.toggleVisible #toggle-menu span.top {
    -webkit-animation: inTop 0.8s forwards;
    -moz-animation: inTop 0.8s forwards;
    animation: inTop 0.8s forwards;
}
.mobileMenuToggle.toggleVisible #toggle-menu span.middle,
.sideMenuToggle.toggleVisible #toggle-menu span.middle {
    -webkit-animation: inMiddle 0.8s forwards;
    -moz-animation: inMiddle 0.8s forwards;
    animation: inMiddle 0.8s forwards;
}
.mobileMenuToggle.toggleVisible #toggle-menu span.bottom,
.sideMenuToggle.toggleVisible #toggle-menu span.bottom {
    -webkit-animation: inBottom 0.8s forwards;
    -moz-animation: inBottom 0.8s forwards;
    animation: inBottom 0.8s forwards;
}   
.mobileMenuToggle.toggleHidden #toggle-menu span.top,
.sideMenuToggle.toggleHidden #toggle-menu span.top {
    -webkit-animation: outTop 0.8s backwards;
    -webkit-animation-direction: reverse;
    -moz-animation: outTop 0.8s backwards;
    -moz-animation-direction: reverse;
    animation: outTop 0.8s backwards;
    animation-direction: reverse;
}
.mobileMenuToggle.toggleHidden #toggle-menu span.middle,
.sideMenuToggle.toggleHidden #toggle-menu span.middle {
    -webkit-animation: outMiddle 0.8s backwards;
    -webkit-animation-direction: reverse;
    -moz-animation: outMiddle 0.8s backwards;
    -moz-animation-direction: reverse;
    animation: outMiddle 0.8s backwards;
    animation-direction: reverse;
}
.mobileMenuToggle.toggleHidden #toggle-menu span.bottom,
.sideMenuToggle.toggleHidden #toggle-menu span.bottom {
    -webkit-animation: outBottom 0.8s backwards;
    -webkit-animation-direction: reverse;
    -moz-animation: outBottom 0.8s backwards;
    -moz-animation-direction: reverse;
    animation: outBottom 0.8s backwards;
    animation-direction: reverse;
}   

@-webkit-keyframes inMiddle {
    25% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(45deg);
    }
}

@-moz-keyframes inMiddle {
    25% {
        -moz-transform: rotate(0deg);
    }
    100% {
        -moz-transform: rotate(45deg);
    }
}

@keyframes inMiddle {
    25% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(45deg);
    }
}

@-webkit-keyframes outMiddle {
    50% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(45deg);
    }
}

@-moz-keyframes outMiddle {
    50% {
        -moz-transform: rotate(0deg);
    }
    100% {
        -moz-transform: rotate(45deg);
    }
}

@keyframes outMiddle {
    50% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(45deg);
    }
}

@-webkit-keyframes inTop {
    0% {
        top: 0;
    }
    25% {
        top: 6px;
        -webkit-transform: rotate(0deg);
    }
    100% {
        top: 6px;
        -webkit-transform: rotate(135deg);
    }
}

@-moz-keyframes inTop {
    0% {
        top: 0;
    }
    25% {
        top: 6px;
        -moz-transform: rotate(0deg);
    }
    100% {
        top: 6px;
        -moz-transform: rotate(135deg);
    }
}

@keyframes inTop {
    0% {
        top: 0;
    }
    25% {
        top: 6px;
        transform: rotate(0deg);
    }
    100% {
        top: 6px;
        transform: rotate(135deg);
    }
}

@-webkit-keyframes outTop {
    0% {
        top: 0;
    }
    50% {
        top: 6px;
        -webkit-transform: rotate(0deg);
    }
    100% {
        top: 6px;
        -webkit-transform: rotate(135deg);
    }
}

@-moz-keyframes outTop {
    0% {
        top: 0;
    }
    50% {
        top: 6px;
        -moz-transform: rotate(0deg);
    }
    100% {
        top: 6px;
        -moz-transform: rotate(135deg);
    }
}

@keyframes outTop {
    0% {
        top: 0;
    }
    50% {
        top: 6px;
        transform: rotate(0deg);
    }
    100% {
        top: 6px;
        transform: rotate(135deg);
    }
}

@-webkit-keyframes inBottom {
    0% {
        top: 12px;
    }
    25% {
        top: 6px;
        -webkit-transform: rotate(0deg);
        opacity: 1;
    }
    100% {
        top: 6px;
        -webkit-transform: rotate(135deg);
        opacity: 0;
    }
}

@-moz-keyframes inBottom {
    0% {
        top: 12px;
    }
    25% {
        top: 6px;
        -moz-transform: rotate(0deg);
        opacity: 1;
    }
    100% {
        top: 6px;
        -moz-transform: rotate(135deg);
        opacity: 0;
    }
}

@keyframes inBottom {
    0% {
        top: 12px;
    }
    25% {
        top: 6px;
        transform: rotate(0deg);
        opacity: 1;
    }
    100% {
        top: 6px;
        transform: rotate(135deg);
        opacity: 0;
    }
}

@-webkit-keyframes outBottom {
    0% {
        top: 12px;
    }
    50% {
        top: 6px;
        -webkit-transform: rotate(0deg);
        opacity: 0;
    }
    100% {
        top: 6px;
        -webkit-transform: rotate(135deg);
        opacity: 1;
    }
}

@-moz-keyframes outBottom {
    0% {
        top: 12px;
    }
    50% {
        top: 6px;
        -moz-transform: rotate(0deg);
        opacity: 0;
    }
    100% {
        top: 6px;
        -moz-transform: rotate(135deg);
        opacity: 1;
    }
}

@keyframes outBottom {
    0% {
        top: 12px;
    }
    50% {
        top: 6px;
        transform: rotate(0deg);
        opacity: 0;
    }
    100% {
        top: 6px;
        transform: rotate(135deg);
        opacity: 1;
    }
}

.mainMenu {
	display:block;
}
@media all and (min-width:1201px){
	.mainMenu {
		display: block !important;				
	}
}
/*----------------------------------------------------SIIT MAALT ALGAB VALGE MENÜÜRIBA ÜLEVAL*/
@media all and (max-width: 1200px) {
	
	.mainMenu  /* kui menüü avaneb */{
		top: 0px;
		float:left !important;
		width:100%;
		padding-left:0 !important;
		display:none;
	}
	.mainMenu li {
		display:block !important;
		border-top: 1px solid #ccc;
		float:none !important;
	}	
	.mainMenu li:last-child {
		border-bottom: 1px solid #ccc;
	} 			
	.mainMenu li a{
		width:100%;
		padding-left:10px;
		padding-right:10px;
		
	}
	.mainMenu ul {
		margin-bottom:0;
	}	
	.mobileMenuToggle {
		top: 0;
		left: 0;		
	}
	
	.non-mobile {
		display: block;
	}
	
	.mainMenu a:hover, .mainMenu a:focus {
		text-decoration:none;
		color:#cd1041;
	}
	.mainMenu li.active a {
		color:#cd1041;
	}
	
	
	
	/*oli enne max-width:993px all*/
	.content-page .mobileMenuToggle {
		top:30px;
	}
	.mobileMenuToggle {
		display: block;
		position: absolute;		
		top: 6px;
		z-index: 7;
		width: 25%;
		left: 30px;		
	}	
	.content-page .mainMenu {
		padding-top: 97px;
	}
	.mainMenu {
		padding-top: 91px;
		position:absolute;
		z-index:6;
		background-color:#fff;
	}
	
	.mainMenu {
		
		float: right;

	}
		
	
} /*-------------------------------------------------------------------*/
@media all and (max-width:1050px) {
	.mobileMenuToggle {
    width: 30%;
	}
}
@media all and (max-width:913px) {
	.main-menu-wrapper .mainMenu li {
		padding: 9px 9px;
	}
}
@media all and (max-width:767px) {
	
	#header .main-menu-wrapper {
		width:99% !important;
		left:0;
	}
	.content-page .main-menu-wrapper {
		top: 26px;
	}
	.non-mobile {
		display:none;
	}
	.mainMenu {
		padding-top: 98px;
		position:absolute;
		z-index:6;
		background-color:#fff;
		width:75% !important;
		margin-left:15px !important;
		left:175px;
		padding-right:10px;
	}
	.content-page .mobileMenuToggle {
		left:140px;
		top:37px;
	}
	.content-page .mainMenu {
		left:140px;
	}
	.mobileMenuToggle {
		display: block;
		position: absolute;
		top: 0px;
		z-index: 8;
		width: 20%;
		left: 190px;
	}
	.mainMenu li {
		border-top: none;
	}	
	.mainMenu li:last-child {
		border-bottom: none;
	} 	
	.mainMenu li:first-child {
		border-top: 1px solid #ccc;
	} 
}
@media all and (max-width:450px) {
	.mobileMenuToggle {
		display: block;
		position: absolute;
		top: 50px;
		z-index: 8;
		width: 20%;
		left: 190px;
	}
	.content-page .mobileMenuToggle {
		top:77px;
	}
	.mainMenu {
		padding-top: 98px;
		position: absolute;
		z-index: 6;
		background-color: #FFF;
		width: 75% !important;
		margin-left: 15px !important;
		left: 175px;
		padding-right: 10px;
		margin-top:40px;
	}
}
@media all and (max-width:444px) {
	.mainMenu {
		padding-top: 98px;
		position: absolute;
		z-index: 6;
		background-color: #FFF;
		width: 55% !important;
		margin-left: 15px !important;
		right:0 !important;
		padding-right: 15px;
	}
	.main-menu-wrapper .mainMenu li {
    padding: 7px;
	}
}
@media all and (max-width:400px) {
	.newsletter-wrap h2 {
    
    padding-bottom: 10px;
	}
	
}
@media all and (max-width:383px) {
	.mainMenu {
		padding-top: 98px;
		position: absolute;
		z-index: 6;
		background-color: #FFF;
		width: 50% !important;
	}	
	.mainMenu li a {
    width: 100%;
    padding-left: 0px;
	}
	.mainMenu ul {
		padding-left:7px;
	}

@media all and (max-width:350px) {
	.content-page .mobileMenuToggle {
    left: 130px;
	}
	.content-page .mainMenu {
    left: 130px;
}
}