/*
 Theme Name:   Soledad Child Theme
 Theme URI:    http://pencidesign.com/
 Description:  Soledad Child Theme - Made by PenciDesign
 Author:       Pencidesign
 Author URI:   http://pencidesign.com/
 Template:     soledad
 Text Domain:  soledad
*/

/* = Theme customization go here
-------------------------------------------------------------- */
/*
 Theme Name:   soledad child
 Theme URI:    http://pencidesign.com/
 Description:  Soledad Child Theme - Made by PenciDesign
 Author:       Pencidesign
 Author URI:   http://pencidesign.com/
 Template:     soledad
 Text Domain:  soledad
*/

@import url("../soledad/style.css");

/* = Theme customization your go here
-------------------------------------------------------------- */

/** Playfair Cabin Sketch **/
@import url(//fonts.googleapis.com/css?family=Cabin+Sketch);


/* Pas de bordure sous le logo
-------------------------------------------------------------- */
.header-header-1.has-bottom-line,
.header-header-4.has-bottom-line {
	border-bottom: none;
}

/* = Home Speciale Julie Barranger
-----------------------------------------------------*/
#home, #home-mobile {
    position:absolute;
}

#home img, #home-mobile img {
    display: block;
    margin: auto;
    width:100%;
    height: auto;
}

/* Mobile
-----------------------------------------------------*/
#home-mobile, .symboles-mobile{
    display: none;
}



.symboles img, .symboles-mobile img  {
    animation: heartBeat 1.5s infinite;
  -webkit-animation: heartBeat 1.5s infinite;
}

@keyframes heartBeat {
   0% {
    transform: scale(none);
    -webkit-transform: scale(none);
  }

  20% {
    transform: scale(1.04);
    -webkit-transform: scale(1.04);
  }
  
  30% {
    transform: scale(1.02);
    -webkit-transform: scale(1.02);
  }
  
  45% {
    transform: scale(1.06);
    -webkit-transform: scale(1.06);
  }
  
  50% {
    transform: scale(none);
    -webkit-transform: scale(none);
  }
  
  100% {
    transform: scale(none);
    -webkit-transform: scale(none);
  }
}

@-webkit-keyframes heartBeat {
   0% {
    transform: scale(none);
    -webkit-transform: scale(none);
  }

  20% {
    transform: scale(1.04);
    -webkit-transform: scale(1.04);
  }
  
  30% {
    transform: scale(1.02);
    -webkit-transform: scale(1.02);
  }
  
  45% {
    transform: scale(1.06);
    -webkit-transform: scale(1.06);
  }
  
  50% {
    transform: scale(none);
    -webkit-transform: scale(none);
  }
  
  100% {
    transform: scale(none);
    -webkit-transform: scale(none);
  }
}

.symboles ul li, .symboles-mobile ul li{
    display: inline-block;
    text-align: left;
    vertical-align: middle;
}

.symboles ul li a, .symboles-mobile ul li a {
    text-decoration: none;
}

.symboles ul li a:hover img, .symboles-mobile ul li a:hover img{
    -webkit-animation:spin 2s ease infinite;
    -moz-animation:spin 2s ease infinite;
    animation:spin 2s ease infinite;
}

@-moz-keyframes spin { 100% { -moz-transform: scale(1.2); } }
@-webkit-keyframes spin { 100% { -webkit-transform: scale(1.2); } }
@keyframes spin { 100% { -webkit-transform: scale(1.2); transform:scale(1.2); } }

.symboles img, p{
    position:relative;
    z-index: 2;
}

.symboles-mobile img, p{
    position:relative;
    z-index: 2;
}

.symboles p, .symboles-mobile p{
    font-family: 'Cabin Sketch', cursive;
    font-size: 16px;
    visibility: hidden;
    line-height: 24px;
    color:#313131;
}

.symboles ul li a:hover p, .symboles-mobile ul li a:hover p{
    visibility: visible;
}

.col-1 ul li {
    width: 24%;
    margin-top:3%;
}

.col-2 ul li{
    width: 19%;
}

.col-3 ul li{
    width: 49%;
}

.col-4 ul li{
    width: 24%;
}
.col-1 ul, .col-2 ul, .col-3 ul, .col-4 ul{
    margin:0%;
}

.col-1-mob ul li {
    width: 32%;
    margin-top:3%;
}

.col-2-mob ul li, .col-3-mob ul li{
    width: 49%;
}

#lipstick {
    width:18%;
    left:15%;
    margin-top: 10%;
}

#p-lipstick {
  left:17%;
}

#boxe {
    width:28%;
    left:5%;
}

#p-boxe {
  right:0%;
}

#tokyolips {
    width: 23%;
left: 72%;
margin-top: 30%;
}

#p-tokyolips {
  left:70%;
}

#shootingstars {
    width: 45%;
margin-top: -40%;
left: 70%;
}

#p-shootingstars {
    left:68%;
}

#girls{
  width:50%;
  left:10%;
  margin-top: 15%;
}

#p-girls{
  left:17%;
}

#danse {
  width:45%;
  left:35%;
}

#p-danse {
  left:35%;
}

#sang{
  width:65%;
  margin-top: 35%;
  left:65%;
}

#p-sang{
  left:84%;
}

#satok{
width: 40%;
left: 10%;
margin-top: -10%;
}

#p-satok{
  left:8%;
}

#videodemode {
  width: 29%;
  right: 5%;
  margin-top: -26%;
}

#p-videodemode {
  left:0%;
}

#grimoire{
  width:18%;
  left:59%;
  margin-top: 3%;
}

#p-grimoire{
  left:60%;
}

#tokyoangel{
  width:13%;
  left:43%;
}

#p-tokyoangel{
  left:42%;
}

#jules{
  width:30%;
  margin-top: -3%;
  left:30%;
}

#p-jules{
  left:20%;
}

#alambics{
  width:45%;
  right:8%;
  margin-top: 47%;
}

#p-alambics{
}

#galerie{
  width:35%;
  margin-top: 5%;
  left:54%;
}

#p-galerie{
  left:47%;
}

#tokyohero{
  width:30%;
  margin-top: 35%;
  left:50%;
}

#p-tokyohero{
  left:40%;
}

#boxe-mob {
    width:45%;
    left:10%;
}

#tokyolips-mob {
 width: 22%;
left: 24%;
margin-top: 33%;
}

#shootingstars-mob {
    width: 59%;
margin-top: 22%;
left: 32%;
}

#grimoire-mob{
  width: 40%;
left: -11%;
margin-top: 37%;
}

#satok-mob{
  width:40%;
  left:55%;
  margin-top: 40%;
}

#videodemode-mob {
width: 42%;
left: 20%;
margin-top: -38%;
}

#galerie-mob{
  width: 40%;
margin-top: 15%;
left: 30%;
}


/*-----------------------------------------------
	Responsive Design
------------------------------------------------*/

/*--------- Max width 960px and min width 768px ---------*/
@media only screen and (min-width: 768px) and (max-width: 960px) {
	#logo img {
		max-width: 600px;
		height: auto;
	}

    .symboles p{
    font-size: 14px;
    line-height: 18px;
    }
}

/*--------- Max width 767px ---------*/
@media only screen and (max-width: 767px) {
	#logo img {
		max-width: 70%;
		height: auto;
	}

    #home, .symboles{
    display: none ;
}

    #home-mobile, .symboles-mobile{
    display: block;
}
    .symboles p{
    font-size: 10px;
    line-height: 12px;
    }
}

/*--------- Max width 767px and Min width 480px ---------*/
@media only screen and (min-width: 480px) and (max-width: 767px) {
	#logo img {
		max-width: 70%;
		height: auto;
	}

    .symboles p{
    font-size: 10px;
    line-height: 12px;
    }

    #home, .symboles{
    display: none ;
}

    #home-mobile, .symboles-mobile{
    display: block;
}
}

/*--------- Max width 479px ---------*/
@media only screen and (max-width: 479px) {
    .symboles p{
    font-size: 10px;
    line-height: 12px;
    }

    #home, .symboles{
    display: none ;
}

    #home-mobile, .symboles-mobile{
    display: block;
}
}

/* = Portfolio
----------------------------------------------------*/

.penci-portfolio-filter {
	text-transform: uppercase;
}

.penci-portfolio-filter ul li a{
	font-weight: bold !important;
}