/*
Theme Name: Vuggestuen Mariehønen
Theme URI: http://vires-artes.dk
Description: Wordpress theme developed for Vuggestuen Mariehønen
Author: <a href="http://vires-artes.dk">Yan Knudtskov Nielsen</a>
Version: 1.0
License: Private
License URI: http://vires-artes.dk
Tags:
*/


/* =============================================================================
   Typography
   ========================================================================== */
/* slabo-27px-regular - latin_latin-ext */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Slabo 27px';
	font-style: normal;
	font-weight: 400;
	src: url('./fonts/slabo-27px-v14-latin_latin-ext-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }

/* mystery-quest-regular - latin_latin-ext */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Mystery Quest';
	font-style: normal;
	font-weight: 400;
	src: url('./fonts/mystery-quest-v20-latin_latin-ext-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }

.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus {
	background-color: transparent;
}

*:focus { outline: 0 !important; }
*:focus { outline: none !important; }
*::-moz-focus-inner { border: none !important; }

body {
	font-family: 'Slabo 27px';
	color: #3c3c3c;
}

a {
	color: #df012a;
}

a:focus {
  	color: #df012a;
}

a:hover {
	color: #df012a;
}

em {

}

h1, h2, h3, h4, h5 {
	font-family: 'Mystery Quest';
	color: #72b5ab;
}

h1 {

}

h2 {
	font-size: 42px;
}

h3 {

}

h4 {

}

h5 {

}

p, ul li, ol li {
	font-size: 24px;
	line-height: 40px;
}

p {

}

.dropdown-toggle,
.dropdown-toggle>ul,
.dropdown-toggle>ul>li,
.dropdown-menu>li>a,
.navbar-custom #menu-main > li > a {
	font-family: 'Arial';
}

ol li {

}

/* =============================================================================
   Layout
   ========================================================================== */

body {
	background-color: #f9f9f9;
	background: url('./images/bg.jpg');
	background-repeat: no-repeat;
	background-size: cover;
}

.title-wrapper {
	margin-bottom: 60px;
}

.frontpage_title_line_1,
.frontpage_title_line_2 {
	color: #3c3c3c;
}

.frontpage_title_line_1 {
	font-size: 42px;
}

.frontpage_title_line_2 {
	font-size: 60px;
	margin-top: 0px;
}

.header {

}

.header .ladybug {

}

.header .ladybug img {
	width: 98%;
	margin-top: 20px;
}

@media screen and (max-width: 767px) {
	.header .ladybug img {
		object-fit: contain;
		margin-top: 0px;
		max-height: 100px;
	}
}

.mobile-menu {
	display: none;
}

.menu-left,
.menu-right,
.menu-bottom {
	/*margin-top: -30px !important;*/
}

.menu-left ul,
.menu-right ul,
.menu-bottom ul {
	list-style: none;
}

.menu-left ul li,
.menu-right ul li {
	padding: 10px 0px;
}

.menu-bottom ul li {
	display: inline-block;
	padding: 10px 20px;
}

.menu-left ul li a,
.menu-right ul li a,
.menu-bottom ul li a {
	font-size: 30px;
}

@media screen and (max-width: 767px) {
	.menu-left ul, .menu-right ul, .menu-bottom ul {
		margin: 0px;
		padding: 0px;
	}

	.menu-left ul li,
	.menu-right ul li,
	.menu-bottom ul li {
		padding: 0px;
	}

	.menu-left ul li a,
	.menu-right ul li a,
	.menu-bottom ul li a {
		font-size: 16px;
	}

	.menu-bottom ul li {
		width: 100%;
		text-align: center;
	}
}

.red, .red a {
	color: #de1b3f;
}

.green, .green a {
	color: #72b5ab;
}

.footer {
	text-align: center;
	margin-top: 25px;
}

.footer h3 {
	color: #3c3c3c;
}

.footer h3 a {
	color: #de1b3f;
}

.nav-circle, .gravityform-contact .button.gform_button {
	border: 2px solid #3c3c3c;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	height: 75px;
	width: 75px;
	display: inline-block;
	background: #72b5ab;
	margin: 10px;
}

.signup-button {
	font-size: 24px !important;
	padding-top: 20px;
	color: #3c3c3c !important;
}

.arrow-up, .arrow-left, .arrow-right {
	background-image: url(./images/arrow.png);
	background-repeat: no-repeat;
	background-position: center 47%;
}

.arrow-left {
	-webkit-transform:rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	transform: rotate(-90deg);
}

.arrow-right {
	-webkit-transform:rotate(90deg);
	-moz-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
}

.house {
	background-image: url(./images/house.png);
	background-repeat: no-repeat;
	background-position: center 47%;
}

.nav-link-wrapper {
	width: auto;
	display: inline-block;
	text-align: center;
	margin: 30px;
}

.nav-link-wrapper a {
	font-size: 16px;
	color: #df012a;
}

.google-styled-map {
	height: 320px;
}

.logo a:focus, .logo a:hover {
	text-decoration: none;
}

.logo {
	cursor: pointer;
}

.navbar-custom{
	margin: 50px 0;
}

.navbar-custom{
	padding: 15px 0;
	background-color: #72b5ab;
	border-color: #000;
	border-width: 2px;
	font-size: 1.5em;
}

.navbar-custom #menu-main > li > a{
	color: #fff;
}


.navbar-custom #menu-main > li > a:focus,
.navbar-custom #menu-main > li > a:hover{
	background: transparent !important;
}

.navbar-custom .dropdown-menu > li > a:hover{
	background-color: #649e96 !important;
}

.navbar-custom a .caret{
	border-top-color: #fff !important;
  border-bottom-color: #fff !important;
}

.main-menu-dropdown.open > button,
.main-menu-dropdown > button:focus,
.main-menu-dropdown > button:hover{
	padding: 15px 0;
	background-color: #649e96 !important;
	border-color: #000 !important;
	border-width: 2px;
	font-size: 1.5em;
}

.main-menu-dropdown .dropdown-menu>li>a:hover,
.main-menu-dropdown .dropdown-menu>li>a:focus{
	background-color: #649e96 !important;
}

.main-menu-dropdown .dropdown-menu,
.main-menu-dropdown > button{
	width: 100%;
}

.btn-custom{
	background-color: #72b5ab;
	border: 2px solid #000;
	color: #fff;
}

.btn-custom:hover,
.btn-custom:focus{
	background-color: #649e96;
	color: #fff;
}

/* =============================================================================
   Speechbubble Styling
   ========================================================================== */

.bubble
{
	position: relative;
	width: 310px;
	height: 120px;
	padding: 0px;
	background: rgba(255,255,255,0.75);
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	top: -40px;
	border: 1px solid black;
	left: 20px;
	transition: all 0.6s;
	-webkit-transition: all 0.6s; /* Safari */
	opacity: 0;
}

.bubble:after
{
	content: '';
	position: absolute;
	border-style: solid;
	border-width: 15px 15px 0;
	border-color: rgba(255,255,255,0.75) transparent;
	display: block;
	width: 0;
	z-index: 1;
	bottom: -15px;
	left: 216px;
}

.frontpage-logo {
	position: relative;
	top: -110px;
	z-index: -10;
}

.start-tour-ladybug{
	max-width: 50px;
  margin-left: 20px;
	display: inline-block;
}

.bubble p {
	color: #3c3c3c;
	padding: 25px 10px;
}


/* =============================================================================
   Polaroid Image Style for Images in Content
   ========================================================================== */

.page .wp-caption {
	-webkit-transform:rotate(-1deg);
	-moz-transform: rotate(-1deg);
	-o-transform: rotate(-1deg);
	-ms-transform: rotate(-1deg);
	transform: rotate(-1deg);
}

.page .wp-caption,
.page p > img[class*='wp-image-'],
.page p a > img[class*='wp-image-'] {
	min-width: 345px;
	transition: all 0.6s;
	-webkit-transition: all 0.6s; /* Safari */
	margin-right: 25px;
	margin-top: 40px;
	margin-bottom: 20px;
	display: inline-block;
}

.page .wp-caption:nth-child(2n) {
	-webkit-transform:rotate(3deg);
	-moz-transform: rotate(3deg);
	-o-transform: rotate(3deg);
	-ms-transform: rotate(3deg);
	transform: rotate(3deg);
}

.page p > img[class*='wp-image-'],
.page p a > img[class*='wp-image-'] {
	-webkit-transform:rotate(-1deg);
	-moz-transform: rotate(-1deg);
	-o-transform: rotate(-1deg);
	-ms-transform: rotate(-1deg);
	transform: rotate(-1deg);
}

.page p > img[class*='wp-image-']:nth-child(2n),
.page p a > img[class*='wp-image-']:nth-child(2n) {
	-webkit-transform:rotate(-2.5deg);
	-moz-transform: rotate(-2.5deg);
	-o-transform: rotate(-2.5deg);
	-ms-transform: rotate(-2.5deg);
	transform: rotate(-2.5deg);
}

.page .wp-caption .wp-caption-text {
	text-align: center;
	background: #eee6d8; /*fallback colour for browsers that don't support gradients*/

	display: inline-block;
	width: 100%;
}

.page .wp-caption .wp-caption-text { /*see support section below for more info on nth-child*/
	/*position: relative;
	left: 2px;*/
}

.page img[class*='wp-image-'] {
	padding: 10px;
	background: #eee6d8; /*fallback colour for browsers that don't support gradients*/
	min-width: 100%;
	min-height: 290px;
}

.page img[class*='wp-image-']:nth-child(even) { /*see support section below for more info on nth-child*/

}

.page .wp-caption > img[class*='wp-image-'] {
	width: 100%;
	min-height: 290px;
}

.page .wp-caption.aligncenter {
	display: inherit;
	margin-right: auto;
}

.page .wp-caption:before,
.page p:before > img[class*='wp-image-'],
.page p:before a > img[class*='wp-image-'],
img[class*='wp-image-']:before
 { /*see the support section below to more info on using the :before psuedo element*/
	content: '';
	display: block;
	position: absolute;
	left:5px; /*postion from the left side of the frame (positive value move the tape right, negative moves it left)*/
	top: -15px; /*position from the top of the frame (positive move it above the frame, negative below)*/
	width: 75px; /*width of the tape*/
	height: 25px; /*height of the tape*/
	background-color: rgba(222,220,198,0.7); /*colour of the tape, use rgba to make it slightly transparent*/
	/*rotate the tape 12 degrees anti-clockwise*/
	-webkit-transform: rotate(-12deg);
	-moz-transform: rotate(-12deg);
	-o-transform: rotate(-12deg);
	-ms-transform: rotate(-12deg);
}
/**The tape for the even numbered images needs to be rotated the opposite way, as the images are, and positioned on the other side of the frame, I've also changed the width slightly**/
.page .wp-caption:nth-child(even):before,
.page img[class*='wp-image-']:nth-child(even),
.page p a > img[class*='wp-image-']:nth-child(even):before
 {
	left:150px;
	top: -15px;
	width: 55px;
	height: 25px;
	-webkit-transform: rotate(12deg);
	-moz-transform: rotate(12deg);
	-o-transform: rotate(12deg);
	-ms-transform: rotate(12deg);
}

.page .wp-caption:hover,
.page p > img[class*='wp-image-']:hover,
.page p a > img[class*='wp-image-']:hover {
  -webkit-transform: scale(1.15);
  -moz-transform: scale(1.15);
  position: relative;
  z-index: 5;
}

.signup-wrapper {
	position: absolute;
	left: 0;
	background-repeat: no-repeat;
	background-size: 80%;
	top: 93px;
	height: 100%;
	width: 100%;
	z-index: -1;
}

.container.page.signup div[class*=col-] {
	min-height: 600px;
}

.signup-image-mobile {
	display: none;
}

.signup-button-wrapper {
	text-align: center;
	width: 100%;
	margin: 10px 0px;
}

/* =============================================================================
   Shift Frontpage Menu Items Around
   ========================================================================== */

.menu-left ul li:nth-child(1) {
	margin-left: -60px;
	margin-top: -10px;
}

.menu-left ul li:nth-child(2) {
	margin-left: 80px;
	margin-top: 30px;
}

.menu-left ul li:nth-child(3) {
	margin-left: -90px;
	margin-top: 45px;
}

.menu-left ul li:nth-child(4) {
	margin-left: 120px;
	margin-top: 45px;
}

.menu-right ul li:nth-child(1) {
	margin-left: -60px;
	margin-top: -10px;
}

.menu-right ul li:nth-child(2) {
	margin-left: 80px;
	margin-top: 30px;
}

.menu-right ul li:nth-child(3) {
	margin-left: -80px;
	margin-top: 45px;
}

.menu-right ul li:nth-child(4) {
	margin-left: -140px;
	margin-top: 45px;
}

.menu-bottom ul li:nth-child(1) {

}

.menu-bottom ul li:nth-child(2) {
	position: relative;
	top: -30px;
}

.menu-bottom ul li:nth-child(3) {

}

.menu-bottom ul li:nth-child(4) {

}



/* =============================================================================
   Overrides
   ========================================================================== */

.pull-center {
    float: none;
    margin-left: auto;
    margin-right: auto;
}

.text-align-center {
	text-align: center;
}

.aligncenter {
	margin: 0px auto;
	float: none;
}

.alignright {
	float: right;
}

.alignleft {
	float: left;
}

/* =============================================================================
   Gravity Forms Contact Form
   ========================================================================== */

.gform_wrapper form {
	/*text-align: center !important;*/
}

.gravityform-contact .button.gform_button {
	font-size: 24px;
	padding-top: 7px;
}

.gravityform-contact .btn-override {
	margin-right: 0px !important;
}

.gravityform-contact input[type=text],
.gravityform-contact input[type=url],
.gravityform-contact input[type=email],
.gravityform-contact input[type=tel],
.gravityform-contact input[type=number],
.gravityform-contact input[type=password],
.gravityform-contact textarea {
	width: 100% !important;
	margin-bottom: 15px;
	background: transparent;
	border: none;
	border-bottom: 1px solid #3c3c3c;
	color: #3c3c3c;
}

.gform_wrapper li.gfield_error input[type=text], .gform_wrapper li.gfield_error input[type=url], .gform_wrapper li.gfield_error input[type=email], .gform_wrapper li.gfield_error input[type=tel], .gform_wrapper li.gfield_error input[type=number], .gform_wrapper li.gfield_error input[type=password], .gform_wrapper li.gfield_error textarea {
	border: none !important;
	border-bottom: 1px solid #790000 !important;
}

.gform_wrapper .top_label input.medium, .gform_wrapper .top_label input.large, .gform_wrapper .top_label select.large, .gform_wrapper .top_label textarea.textarea, .gform_wrapper .top_label .gfield_label {
	font-size: 24px !important;
	line-height: 30px !important;
	color: #3c3c3c !important;
}

.gravityform-contact .gform_footer {
	text-align: right;
	width: 100%;
}