@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i');

[data-microsite] {
	background: white;
	font-family: Arial;
	padding: 15px;
	padding-left: 49px;
	padding-right: 49px;
}

[data-microsite] .row .header,
[data-microsite] .row .footer {
	text-align: center;
	padding: 15px;
}

[data-microsite] .row .box {
	background: #bbb;
	padding: 10px;
}

[data-microsite] h1 {
	margin-bottom: 10px;
	font-family: 'Open Sans', sans-serif;
    text-transform: uppercase;
    font-size: 22px;
    letter-spacing: 0.1em;
    font-weight: 700;
	line-height: 35px;
	text-decoration: line-through;
}

[data-microsite] p {
	margin-bottom: 10px;
	font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    letter-spacing: 0.1em;
    font-weight: 100;
	line-height: 20px;
}

[data-microsite] .logo {
    max-width: 115px; 
    text-align: left;
}

[data-microsite] .margin-bottom {
    margin-bottom: 70px;
}

[data-microsite] .margin-img {
	margin-bottom: 30px;
}

[data-microsite] .icons {
	padding-right: 16px;
	margin-top: 30px;
}

[data-microsite] .padding-right-img  {
  padding-right: 20px;
}

/*--------------------------------------------------------------*/

/* define a fixed width for the entire menu */
[data-microsite] .navigation {
  text-align: right;
	padding-right: 95px;
}

/* reset our lists to remove bullet points and padding */
[data-microsite] .mainmenu, .submenu {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* make ALL links (main and submenu) have padding and background color */
[data-microsite] .mainmenu a {
  display: block;
  text-decoration: none;
  padding: 10px;
  padding-left: 0px;
  color: #898989;
  font-family: 'Open Sans', sans-serif;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.4em;
  font-weight: 700;
}

/* add hover behaviour */
[data-microsite] .mainmenu a:hover {
   color: #ea3f55;
}

[data-microsite] .mainmenu a:active {
   color: black;
}



/* when hovering over a .mainmenu item,
  display the submenu inside it.
  we're changing the submenu's max-height from 0 to 200px;
*/

[data-microsite] .mainmenu li:hover .submenu {
  display: block;
  max-height: 200px;
}

/*
  we now overwrite the background-color for .submenu links only.
  CSS reads down the page, so code at the bottom will overwrite the code at the top.
*/

[data-microsite] .submenu a {
  background-color: #999;
}

/* hover behaviour for links inside .submenu */
[data-microsite] .submenu a:hover {
  background-color: #666;
}

/* this is the initial state of all submenus.
  we set it to max-height: 0, and hide the overflowed content.
*/
[data-microsite] .submenu {
  overflow: hidden;
  max-height: 0;
  -webkit-transition: all 0.5s ease-out;
}


/* button*/

[data-microsite] .button {
  font-family: 'Open Sans', sans-serif;
  font-size:13px;
  padding: 3px 5px;
  font-weight: 400; 
  background: #ea3f55;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  letter-spacing: 0.2em;
  transition: all 0.3s ease-out;
}

[data-microsite] .button:hover {
  background: white;
  color: #ea3f55;
  }



/*burger*/

 
[data-microsite] .container {
  text-align:center;
  /* perfect centering */
  left:50%;
  top:50%;
  position: absolute;
  /*transform:translate(-50%,-50%);*/
  width:100%;
  max-width:350px;
  z-index:1000;
  margin-top: -20px;
}
[data-microsite] .container ul {
  list-style: none;
  padding: 0;
  padding-left:20px;
  background: white;
  max-height: 0;
  transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1);
  overflow: hidden;
  visibility: hidden;
  border-radius:3px;
  opacity:0;
  text-align: left;
  box-shadow: 0px 0px 20px 0px black;
  /*transform:rotate(180deg);*/
}

[data-microsite] .container li a {
  padding:12px 0;
  display: block;
  transition:.25s
}
[data-microsite] .container li a:hover {
  background: white;
}

[data-microsite] .container a {
  text-transform:uppercase;
  text-decoration: none;
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  letter-spacing: 0.4em;
  font-weight: 500;
  color: #898989;
}

[data-microsite] .container a:active {
  color: black;
}

[data-microsite] .container i {
  padding:20px;
  background: rgba(255,255,255,.75);
  border-radius:3px;
  color:black;
  transition:.25s;
  animation: 1.25s bounce infinite;
}
[data-microsite] .container i:hover {
  cursor:pointer;
  background: rgba(255,255,255,.95);
  animation-play-state: paused;
}
[data-microsite] .container ul.open {
  max-height: 480px;
  visibility: visible;
  opacity:1;
  transform:rotate(0);
}






/* Querries*/


@media only screen 
and (min-width : 768px) 
and (max-width : 1024px)  { 
	
	[data-microsite] .margin-bottom {
    	margin-bottom: 30px;
	}
	
	[data-microsite] .icons {
		padding-right: 16px;
	}
	
	[data-microsite] .navigation {
		text-align: right;
		padding-right: 31px;
	}
	
	[data-microsite] .padding-right-img  {
  		padding-right: 20px;
	}
}

@media only screen 
and (min-width : 375px) 
and (max-width : 767px) { 
	
	[data-microsite] .margin-bottom {
    	margin-bottom: 10px;
	}
	
	[data-microsite] .padding-right-img  {
  		padding-right: 0px;
	}
	
	[data-microsite] .burger-margin {
		margin-bottom: 0px;
		margin-top:15px;
	}
	
	[data-microsite] .logo-mobile {
		width: 130px;
		margin: 0 auto;
		left: 20%;
		margin-bottom: 40px;
	}
	
	[data-microsite] .icons {
    padding-right: 0px;
    margin-top: 0px;
    text-align: center;
}
}