/*
Theme Name:  Varia Teema
Theme URI:     https://webaula.fi
Description:     Powered By github.com/roots/sage
Version:           1.0
Author:             WebAula, Marko Mäkelä
Author URI:      https://webaula.fi
License:           MIT License
License URI:    http://opensource.org/licenses/MIT
*/

.content-section {
    padding-top: 0px;
    max-width: 100%;
}
body {
    word-break: break-word!important;
}

  p{
      font-family: 'Open Sans', sans serif;
 word-break: break-word;
  }

a,span {
    word-break: break-word;
}

@media  screen and (max-width: 768px){


.navbar-nav>li{
    width: 100%;
    clear: both;
}

 .intro .intro-body .brand-heading{
   padding-top: 60px!important;
   padding-bottom: 60px!important;
 }
}

/*Fonts*/

.dropdown-menu{
font-size:13px!important;
}

  p{
  font-weight:400!important;
  font-size:20px;
  }

  @media  screen and (max-width: 1024px){

span, p{font-size:16px!important;}


.navbar-nav{
width:100%;
}
  .navbar-nav>li {
    float: left;
    width: 100%;
    clear: both;
}
  
  .dropdown-menu{
  z-index:9999;
  }
  
  .navbar-header{
  width:100%;
height:65px;
  }

.menu-open{
height:100%!important;
}

ul li .dropdown-menu .dropdown-menu {
  display: block;
}


  .navbar-toggle{
  display:block;
  float:right!important;
  display: block;
  border: 5px solid #df457b;
  border-radius: 0;
  color: #004a8a;
  font-size: 24px;
  margin-top: 5px;
  margin-left: 5px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 5px;
  padding-top: 5px;
}

.navbar-brand{
float:left;
}
  
  p{
  font-weight:400!important;
  font-size:20px;
  }
  }
  
  a{
  color:#004a8a;
  }

  a:hover{
    color:#333333;
  }

h1{
font-size:32px;
}
  
/*Text select*/

::selection {
  background: #df457b; /* WebKit/Blink Browsers */
  color:#FFF;
}

::-moz-selection {
  background: #df457b; /* Gecko Browsers */
  color:#FFF;
}

.default-page{
margin-top:75px;
}

/*NAV*/

.navbar {
  min-height: 65px;
}

.navbar-nav{

font-size:16px;
font-weight:300;
}

.navbar-brand img{
margin-top:-13px;
max-height:60px;
}

.navbar-custom.top-nav-collapse, nav.navbar {
  background: #fff;
  z-index:9999;
}

.navbar-custom .nav li.active a, .nav a{
color:#333333;
font-weight:300;
}

.dropdown-menu>li>a{
font-weight:300;
font-size:14px;
}

.navbar-custom ul ul, .navbar-custom ul ul ul{
    -webkit-transition: all .25s ease;
       -moz-transition: all .25s ease;
        -ms-transition: all .25s ease;
         -o-transition: all .25s ease;
            transition: all .25s ease;
}

.navbar-custom .nav li.active a:hover, .nav a:hover{
color:#fff!important;
background-color:#ff4780!important;
transition: background 0.1s ease-in-out
}

.dropdown-menu>li>a{
    padding-top: 7px;
    padding-bottom: 8px;
}

.navbar-custom .nav li.active > a{
color:#ff4780!important;
}

.navbar-custom{
text-transform:none;
}

 .navbar-fixed-top{
 margin-top:none!important;
 }
 
 .dropdown:hover>.dropdown-menu{
	border-radius: 0px;
	    padding: 0px 0px 5px 0px;
 }
 
   
@media  screen and (max-width: 1024px){
 .navbar-fixed-top {
  margin-top: 0px!important;
}
 .navbar-fixed-top .container {
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}
.navbar-custom .navbar-brand {
  right: 15px;
float: left;
/*  position: absolute;*/

}
      .navbar-main-collapse{
  width:100%;
  }
}
 
 
   @media  screen and (min-width: 1025px){
 
   .navbar-toggle{
display:none;
}
   
      .navbar-main-collapse{
  float:right!important;
  display:inline-block;

}
   
   .navbar-right .dropdown-menu {
  right: auto!important;
  z-index:9999;
}

 .dropdown {
    position: relative;
}

.dropdown>.dropdown-menu {
    top: 48;
    margin-top: 0px;
    margin-left: -1px;
}

.dropdown:hover>.dropdown-menu {
    display: block;
}

.dropdown>a:after {
    display: block;
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #ccc;
    margin-top: 5px;
    margin-right: -10px;
}

ul.dropdown-menu .dropdown-menu {
    /*position: relative;
    border: none;
    margin: 0;
    box-shadow: none;*/
	    position: absolute;
    border: none;
    margin: 0;
    box-shadow: none;
    left: 100%;
    margin-top: -35px;
}
}

   @media  (max-width: 1024px){
   
   .navbar-main-collapse{
  float:left!important;
}
}

 .paivitetty {
     margin-bottom: 0px;
     padding-top: 15px;
     padding-bottom: 5px;
     color: #8c8c8c;
     font-size: 13px!important;
     text-align:left;
   }

 
 /*INTRO*/

 
 .events-archive .intro{
 display:none;
 }
 
 .intro {
  padding-top: 58px;
  background-color:#004a8a;
  background-image:none;
}

.intro .intro-body {
  padding-bottom: 50px;
  height:350px;
  }
  
  .intro .intro-body .brand-heading{
  margin-top:150px;
  font-weight: 300;
  font-size: 32px!important;
  background-color: rgba(223,69,123, 0.8);
  padding-top: 20px;
  padding-bottom: 20px;
  border-radius: 15px;
  text-transform:none;
  }
  
      @media  (max-width: 1024px){
 .intro .intro-body .brand-heading{
 font-size:17px!important;
 line-height:26px;
 margin-top:0px!important;
 }
 
 .intro .intro-body {
  padding-bottom: 0px!important;
  height: 360px!important;
}
 }


  
  @media (min-width: 768px){
.intro {
  min-height: 450px;
  max-height: 550px;
}
}

  @media (max-width: 768px){


  .intro {
margin-top:40px;
  padding:0;
}
  }


/*Back to top*/

.back-to-top {
background: none;
margin: 0;
position: fixed;
bottom: 0;
right: 0;
width: 70px;
height: 70px;
z-index: 100;
display: none;
text-decoration: none;
color: #333333;
/*background-color: #ff9000;*/
bottom:20px;
}

.back-to-top:hover{
color:#df457b!important;
}


.back-to-top i {
  font-size: 60px;
}

/*ROW*/
.row{
margin-left:0px;
margin-right:0px;
}

/*Footer*/

footer{
text-align:center;
}

/*EVENTS*/
#tribe-events{margin: auto;padding:40px; display: block; max-width: 1024px; }





/*Hamburger*/

.hamburger-left #hamburger-button {
  right: auto !important;
  top: 8px;
}

div#hamburger-menu {
  margin-top: 30px!important;
}

#hamburger-menu-container{
	background:#FFF;
}

#hamburger-menu-container #hamburger-menu ul{
height:auto!important;
}

#hamburger-menu-container #hamburger-menu li a{
color:#333333!important;
font-family:'Nunito', sans-serif!important;
}

#hamburger-menu-container #hamburger-menu .active > a{
color:#ff4780!important;
}

body.admin-bar .hamburger-button-container{margin-top:0!important;}

#hamburger-menu li{
background:#FFF;
border:0!important;
}
  @media  screen and (min-width: 768px){
#hamburger-button{
display:none!important;
}
.hamburger-left #hamburger-button {
  right: auto !important;
  top: -28px!important;
  left: 15px;
}
}

#hamburger-button.close {
  left: -49px;
  top: 2px;
}

.hamburger-button-container {
  border-color: #df457b;
}

.hamburger-button-container .hamburger-button-icon, .hamburger-button-container .hamburger-button-icon:before, .hamburger-button-container .hamburger-button-icon:after {
  background-color: #004a8a;
}

/*Preloader*/

/* Paste this css to your style sheet file or under head tag */
/* This only works with JavaScript, 
if it's not present, don't show loader */
.no-js #loader { display: none;  }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: url(assets/images/preloader.gif) center no-repeat #fff;
} 

footer img {
    padding-bottom: 10%;
	width:125px;
}

.oma-container {
    max-width: 1015px;
    margin-right: auto;
    margin-left: auto;
    display: block;
	padding-top:10px;
}

@media  screen and (max-width: 1024px){
.oma-container {
    max-width: 90%;
	}
}

@media screen and (max-width: 768px){
.oma-container {
    max-width: 90%;
	}
}

@media screen and (max-width: 1281px){

#responsive-menu .appendLink{
background-color:rgba(223,69,123, 1)!important;
border-color:rgba(223,69,123, 1)!important;
}


#responsive-menu-title{display:none;}
#click-menu{
background-color:#FFF;
}
#click-menu .threeLines .line{
background-color:rgba(223,69,123, 1)!important;
}


#responsive-menu {
    background-color: #fff!important;
}

#responsive-menu .responsive-menu li a {
    border: 0px!important;
    color:rgba(223,69,123, 1)!important;
}

#responsive-menu .appendLink:hover{
background-color:rgba(223,69,123, 1)!important;
}

footer .col-md-2 {
    width: 100%!important;
    float: left;
}

#click-menu {
    margin-top: 10px!important;
}

}

@media screen and (max-width: 768px){

footer .col-md-2 {
    width: 20%!important;
    float: left;
}

#click-menu {
    margin-right: 20px!important;
    margin-top: 5px!important;
}
a,span,p{
    word-break: break-word!important;
}
}

  @media (max-width: 468px){
#click-menu {
top:-30px!important
    margin-top: -5px!important;
}
}