/*
Theme Name:   	Storefront Child Theme Meninas do mar
Theme URI:    	https://github.com/stuartduff/storefront-child-theme
Author:       	Stuart Duff
Author URI:     http://stuartduff.com
Template:     	storefront
Description:  	This is a blank child theme for WooThemes StoreFront theme
Version:      	1.0.0
License:      	GNU General Public License v2 or later
License URI:  	http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  	storefront
Tags:         	black, white, light, two-columns, left-sidebar, right-sidebar, responsive-layout, custom-background, custom-colors, custom-header, custom-menu, featured-images, full-width-template, threaded-comments, accessibility-ready
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
Storefront is based on Underscores http://underscores.me/, (C) 2012-2014 Automattic, Inc.
Resetting and rebuilding styles have been helped along thanks to the fine work of
Eric Meyer http://meyerweb.com/eric/tools/css/reset/index.html
along with Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/
FontAwesome License: SIL Open Font License - http://scripts.sil.org/OFL
Images License: GNU General Public License v2 or later
*/
/*
 * Add your own custom css below this text.
 * 
 */
 
@import url('//fonts.googleapis.com/css?family=Gamja+Flower');
@import url('//fonts.googleapis.com/css?family=Reenie+Beanie');
@import url('//fonts.googleapis.com/css?family=Coming+Soon');

/********SITE GENERAL**********/


/*STOREFRONT REMOVE DASHED FOCUS*/
a:focus, .focus a {outline: none !important;}
/*END STOREFRONT REMOVE DASHED FOCUS*/

.widget_search form {margin-top: 10px;}

textarea {max-width: 100%;}

/*TITLES*/

h1.sow-headline, .title-gallery h3, .title-about h5  {
font-family: 'Reenie Beanie', cursive;
line-height: 0;
}

.contactus h3.widget-title {
font-family: 'Reenie Beanie', cursive;
line-height: 0;
font-size: 2em;
}

h4.iw-so-person-name {
font-family: 'Reenie Beanie', cursive;
line-height: 30px;
font-size: 2em !important;
}


/** woocommerce hide breadcrumb display **/
.woocommerce-breadcrumb {
display: none;
}


/*HEADER*/

.site-header .site-branding {
		text-align: center;
		margin: 0 auto !important;
		float: none !important;
}


.site-header .site-branding img {
    height: auto;
    width: 200px;
    max-height: none;
    margin: 0 auto;
}

.custom-logo {
	width: 80%;
}

.site-header {
	margin-bottom: 0 !important;
}

.main-navigation ul.menu>li>a, .main-navigation ul.nav-menu>li>a {
	font-family: 'Reenie Beanie', cursive;
	font-size: 26px;
}

.woocommerce-active .site-header .main-navigation {
    width: 100%;
}

/*END - HEADER*/

/*FOOTER*/

.site-footer {
    background-color: #222222;
    color: #ffffff;
}

.site-footer a, .site-footer a:not(.button) {
    color: #ffffff;
 }

.site-footer a:hover {
    color: #cae9ff;
 }
 
/*****PAGES*******/

/*HOMEPAGE*/

.content-area, .hentry, .site-main {
    margin-bottom: 0;
}

/*INSTAGRAM FEED HOMEPAGE*/

ul.instagram-pics {
	width: 120%;
}

ul.instagram-pics li {
	float: left;
}

ul.instagram-pics li img {
	border-radius: 0px;
}

/*END - INSTAGRAM FEED HOMEPAGE*/

/*END HOMEPAGE*/



/*****MISCELLANEOUS*******/

/*CAT*/
@keyframes tail {
  6.6666666667% {
    transform: rotate(0);
  }
  10% {
    transform: rotate(10deg);
  }
  16.6666666667% {
    transform: rotate(-5deg);
  }
  20% {
    transform: rotate(30deg);
  }
  26.6666666667% {
    transform: rotate(-2deg);
  }
  46.6666666667% {
    transform: rotate(10deg);
  }
  53.3333333333% {
    transform: rotate(-5deg);
  }
  56.6666666667% {
    transform: rotate(10deg);
  }
}
@keyframes body {
  6.6666666667% {
    transform: scaleY(1);
  }
  10% {
    transform: scaleY(1.15);
  }
  16.6666666667% {
    transform: scaleY(1);
  }
  20% {
    transform: scaleY(1.25);
  }
  26.6666666667% {
    transform: scaleY(1);
  }
  46.6666666667% {
    transform: scaleY(1.15);
  }
  53.3333333333% {
    transform: scaleY(1);
  }
  56.6666666667% {
    transform: scaleY(1.15);
  }
}
@keyframes left-whisker {
  6.6666666667% {
    transform: rotate(0);
  }
  10% {
    transform: rotate(0deg);
  }
  16.6666666667% {
    transform: rotate(-5deg);
  }
  20% {
    transform: rotate(0deg);
  }
  26.6666666667% {
    transform: rotate(0deg);
  }
  46.6666666667% {
    transform: rotate(10deg);
  }
  53.3333333333% {
    transform: rotate(-5deg);
  }
  56.6666666667% {
    transform: rotate(10deg);
  }
}
@keyframes right-whisker {
  6.6666666667% {
    transform: rotate(180deg);
  }
  10% {
    transform: rotate(190deg);
  }
  16.6666666667% {
    transform: rotate(180deg);
  }
  20% {
    transform: rotate(175deg);
  }
  26.6666666667% {
    transform: rotate(190deg);
  }
  46.6666666667% {
    transform: rotate(180deg);
  }
  53.3333333333% {
    transform: rotate(185deg);
  }
  56.6666666667% {
    transform: rotate(175deg);
  }
}
@keyframes left-ear {
  0% {
    transform: rotate(-20deg);
  }
  6.6666666667% {
    transform: rotate(-6deg);
  }
  13.3333333333% {
    transform: rotate(-15deg);
  }
  26.6666666667% {
    transform: rotate(-15deg);
  }
  33.3333333333% {
    transform: rotate(-30deg);
  }
  40% {
    transform: rotate(-30deg);
  }
  46.6666666667% {
    transform: rotate(0deg);
  }
  53.3333333333% {
    transform: rotate(0deg);
  }
  60% {
    transform: rotate(-15deg);
  }
  80% {
    transform: rotate(-15deg);
  }
  93.3333333333% {
    transform: rotate(-6deg);
  }
  100% {
    transform: rotateZ(-6deg);
  }
}
@keyframes right-ear {
  0% {
    transform: rotateZ(-16deg);
  }
  6.6666666667% {
    transform: rotateZ(-16deg);
  }
  13.3333333333% {
    transform: rotateZ(-19deg);
  }
  26.6666666667% {
    transform: rotateZ(-19deg);
  }
  33.3333333333% {
    transform: rotateZ(-30deg);
  }
  36.6666666667% {
    transform: rotateZ(-19deg);
  }
  37.3333333333% {
    transform: rotateZ(-30deg);
  }
  38% {
    transform: rotateZ(-19deg);
  }
  40% {
    transform: rotateZ(-19deg);
  }
  40.6666666667% {
    transform: rotateZ(-30deg);
  }
  41.3333333333% {
    transform: rotateZ(-19deg);
  }
  46.6666666667% {
    transform: rotateZ(-9deg);
  }
  53.3333333333% {
    transform: rotateZ(-9deg);
  }
  60% {
    transform: rotateZ(-19deg);
  }
  60.6666666667% {
    transform: rotateZ(-30deg);
  }
  61.3333333333% {
    transform: rotateZ(-19deg);
  }
  62.6666666667% {
    transform: rotateZ(-19deg);
  }
  63.3333333333% {
    transform: rotateZ(-30deg);
  }
  64% {
    transform: rotateZ(-19deg);
  }
  80% {
    transform: rotateZ(-19deg);
  }
  93.3333333333% {
    transform: rotateZ(-16deg);
  }
  100% {
    transform: rotateZ(-16deg);
  }
}


.form {
	z-index: 99;
}

.main-cat {
  width: 400px;
  position: relative;
  z-index: 1;
}
.main-cat .stand {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%);
  height: 20px;
  width: 200px;
  border-radius: 20px;
  background-color: #fd6e72;
  z-index: 2;
}
.main-cat .stand::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translate(-50%);
  height: 10px;
  width: 50px;
  border-radius: 20px;
}
.main-cat .cat {
  width: 110px;
  height: 50px;
  position: absolute;
  top: calc(50% - 50px);
  right: 130px;
  border-top-left-radius: 100px;
  border-top-right-radius: 100px;
}
.main-cat .cat .body {
  width: 110px;
  height: 50px;
  background-color: #745260;
  position: absolute;
  border-top-left-radius: 100px;
  border-top-right-radius: 100px;
  animation: body 12s none infinite;
}
.main-cat .cat .head {
  content: "";
  width: 70px;
  height: 35px;
  background-color: #745260;
  position: absolute;
  top: calc(50% - 10px);
  left: -40px;
  border-top-left-radius: 80px;
  border-top-right-radius: 80px;
}

.tail-container {
  position: absolute;
  right: 0;
  bottom: -13px;
  z-index: 3;
}

.tail {
  position: absolute;
  height: 30px;
  width: 14px;
  bottom: -10px;
  right: 0;
  border-bottom-right-radius: 5px;
  background: #745260;
  z-index: 0;
}
.tail > .tail {
  animation: tail 12s none infinite;
  height: 100%;
  width: 14px;
  transform-origin: left;
  border-bottom-left-radius: 20px 20px;
  border-bottom-right-radius: 20px 20px;
  border-top-right-radius: 40px;
}

.ear {
  position: absolute;
  left: 4px;
  top: -4px;
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 20px solid #745260;
  transform: rotate(-30deg);
  animation: left-ear 12s both infinite;
}
.ear + .ear {
  animation: right-ear 12s both infinite;
  top: -12px;
  left: 30px;
}

.nose {
  position: absolute;
  bottom: 10px;
  left: -10px;
  background-color: #fd6e72;
  height: 5px;
  width: 5px;
  border-radius: 50%;
}

.whisker-container {
  position: absolute;
  bottom: 5px;
  left: -36px;
  width: 20px;
  height: 10px;
  transform-origin: right;
  animation: left-whisker 12s both infinite;
}
.whisker-container:nth-child(2) {
  left: -20px;
  bottom: 12px;
  transform-origin: right;
  transform: rotate(180deg);
  animation: right-whisker 12s both infinite;
}

.whisker {
  position: absolute;
  top: 0;
  width: 100%;
  border: 1px solid #fdf9de;
  transform-origin: 100% 0;
  transform: rotate(10deg);
}
.whisker:last-child {
  top: 0;
  transform: rotate(-20deg);
}
 /*END CAT*/

/*Cool imperfect Borders for images*/

.this {
  border:solid 2px #41403E;
      align-self:center;
      background:transparent;
      padding:1rem 1rem;
      margin:0 1rem;
      transition:all .5s ease;
      color:#41403E;
      font-size:2rem;
      letter-spacing:1px;
      outline:none;
      box-shadow: 20px 38px 34px -26px hsla(0,0%,0%,.2);
      border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
}
/* END Cool imperfect Borders for images*/