@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,200;0,400;0,700;1,200;1,400;1,700&display=swap');

/* Shine */

@font-face {
    font-family: 'Shine';
    src: url('webfonts/Shine_Crazy_Diamond');
    src: local('Shine'), url('webfonts/Shine_Crazy_Diamond.ttf') format('truetype');
    font-style: normal;
}

* {
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
    line-height: 150%;
}

a {
    font-weight: 400;
}

a:hover {
    text-decoration: none;
}

body,
html {
    background-color: #f4f2f1;
    scroll-behavior: smooth;
    color:#000000 !important;
}

p {
    color:#000000 !important;
}

.btn {
    border-radius: 0 !important;
}

/*MATERIAL ICONS*/

.material-icons {
    vertical-align: middle;
    font-size: 2rem;
}

/* COOKIES */
.cookiealert {
    background: #0000ff;
}

.cookiealert a {
    text-decoration: none;
}

/* COLORS */

.black {
    color: #000000 !important;
}

.bg-black {
    background-color: #000000 !important;
}

.red {
    color: red !important
}
.red:hover {
    color: #d20000 !important;
}

.bg-red {
    background-color: red !important; 
    color: white !important;
}
.bg-red:hover {
    background-color: #d20000 !important;
}

.green {
    color: #00ff00 !important
}
.green:hover {
    color: #00d600 !important;
}

.bg-green {
    background-color: #00ff00 !important
}
.bg-green:hover {
    background-color: #00d600 !important;
}

.blue {
    color: #0000ff !important
}
.blue:hover {
    color: #0000d5 !important;
}

.bg-blue {
    background-color: #0000ff !important
}
.bg-blue:hover {
    background-color: #0000d5 !important;
}

.cyan {
    color: #00ffff !important;
}
.cyan:hover {
    color: #00cece !important;
}

.bg-cyan {
    background-color: #00ffff !important;
}
.bg-cyan:hover {
    background-color: #00cece !important;
}

.magenta {
 color: #ff00ff !important;
}
.magenta:hover {
    color: #c200c2 !important;
}

.bg-magenta {
    background-color: #ff00ff !important;
    color: white !important;
}
.bg-magenta:hover {
    background-color: #dc00dc !important;
}
   

.yellow {
    color: #ffff00 !important;
}
.yellow:hover {
    color: #dec400 !important;
}

.jellow {
    color: #ffee00;
}

.bg-yellow {
    background-color: #ffff00 !important;
}
.bg-yellow:hover {
    background-color: #dec400 !important;
}

.bg-rainbow {
    background-image: linear-gradient(45deg, #ff00ff 15%, #ff0000,#ffff00,#00ff00,#00ffff 85%);
}

.bg-crea {
    background-image: linear-gradient(45deg, #ff0000, #ff00ff,#00ff00,#0000ff);
}


/* HEADERS */

h1 {
    font-family: 'Shine', Georgia, serif;
    font-size: 3rem;
    color: #000000;
}

@media (min-width: 576px) {
    h1 {
        text-align: left;
    }
}

h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.8rem;
    text-align: center;
    color: #000000;
}

@media (min-width: 576px) {
    h2 {
        font-size: 2.1rem;
        text-align: left;
    }
}

h3 {
    font-size: 1.4rem;
    font-family: 'Montserrat', sans-serif;
    color: #000000;
}

@media (min-width: 576px) {
    h3 {
        font-size: 1.6rem;
    }
}


h4 {
    font-family: 'Shine', Georgia, serif;
    font-size: 2rem;
    color:#000000;
}

h5 {
    color:#000000;
}

section h2 {
    padding: 2rem 0 1rem;
    color:#000000;
}

@media (min-width: 576px) {
    section h2 {
        padding: 5rem 0 3rem;
    }
}

#preview {
    background-color: #ffff;
    padding-bottom: 5rem;
}

/* HEADERS CLASSES */
.h1, .jumbotron .h1 {
    font-family: 'Shine', Georgia, serif;
    font-size: 3rem;
    /*color: #ff00ff;
    text-shadow: 3px 3px #000000;*/
    text-align: center; 
    transform: skew(5deg, -5deg);  
}

@media (min-width: 576px) {
    .h1, .jumbotron .h1 {
        text-align: left;
        font-size: 3.4rem;
    }
}

.h2, .h3, .h4 {
    color: #000000 !important;
}


/* JUMBOTRON */

.jumbotron {
    background-color: #ffee00;
    overflow: visible;
}

.jumbotron h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.3rem;
    color: black;
    margin-bottom: 0px;
    text-align: center !important;
}

@media (min-width: 576px) {
 .jumbotron h2 {
    font-size: 1.6rem;
    text-align: left !important;
    }
}
.jumbotron p {
    text-align: center !important;
    }


.jumbotron h3 {
    font-size: 1.2rem;
    font-family: 'Montserrat', sans-serif;
    color: black;
    text-align: center !important;
}

@media (min-width: 768px) {
.jumbotron h3 {
        font-size: 1.4rem;
        text-align: left;
    }
}


.jumbotron .h3 {
    font-size: 1.6rem;
    font-family: 'Shine', Georgia, serif;
    color: black;
    text-align: center !important;
}

@media (min-width: 768px) {
.jumbotron .h3 {
        font-size: 1.8rem;
        text-align: left;
    }
}

.jumbotron ul {
    list-style: none; 
    text-indent: -2.4rem;
    text-align: center;
}
@media (min-width: 576px) {
    .jumbotron ul {
        text-align: left;
    }
}


#formats img {
    display: block;
    margin: 0 auto;
}



/* LOGO */

#logo {
    max-width: 10rem;
    transition: width .2s;
}

@media (min-width: 576px) {
    #logo {
        max-width: 12rem;
        transition: width .2s;
    }
}


/*#logo::after {
    content: " ";
    background-image: url(../images/The_Big_Whim_logo.png);
    background-repeat: repeat-x;
    width: 1000px;
    position: fixed;
}
    content: " ";
    height: 4px !important;
    position: fixed;
    top: 66px;
    margin-left: auto;
    z-index: 0;
    width: 100%;
    background-color: black;
}



#logo::before {
    content: " ";
    height: 4px !important;
    position: fixed;
    z-index: 0;
    top: 66px;
    left: 0;
    margin-right: auto;
    width: 10%;
    float: right;
    background-color: rgb(131, 85, 85);
}*/

.clearfix {
    overflow: auto;
  }


/* NAVBAR */

nav {
    background-color:white !important;
    z-index: 100;
}

#myNavbar {
    height: auto;
    transition: height 1s;
}


/*.navbar .container {
    display: block !important;
}*/


.navbar ul {
    list-style: none;
}

.navbar li {
    font-size: 1.6rem;
}

@media (min-width: 768px) {
    .navbar li {
        font-size: 1.4rem;
    }
}

@media (min-width: 992px) {
    .navbar li {
        font-size: 1.1rem;
    }
}


.navbar-toggler {
    border: none;
    border-color: none;
    color: black;
    float: right !important;
}


.social img {
    height: 32px;
    opacity: 0.5;
}

.social img:hover {
    opacity: 0.8;
}

@media (min-width: 768px) {
    .social img {
        height: 28px; 
    }
}
@media (min-width: 992px) {
    .social img {
        height: 21px; 
    }
}

#social_header {
    position: absolute;
    margin: 20px;
    width: auto;
}

.lang_sm {
    font-size: 1rem;
}

/* SECTIONS */

section, #flipa {
    padding-top: 6rem;
    margin-top: -6rem;
}

@media (min-width: 768px) {
    section, #flipa {
        padding-top: 8rem;
        margin-top: -8rem;
    }
}

#social {
    margin: 3rem;
}

#teens {
    padding: 4rem 0;
    margin: 6rem auto 0;
    text-align: center;
    background: url(../images/flipateens_background.png) right top no-repeat;
    background-size: cover;
    background-color: #FF7BAC;
}

#noir {
    background-color: #000000;
    padding: 4rem 0;
    margin: 0 auto;
    text-align: center;
}

/* TESTIMONIALS*/
.testimonial {
    min-height: 13rem;
}

/* BOTIGA SHOP */

#products .row > div {
    min-height: 420px;
    padding-bottom: 1rem;
    /*padding: 1rem;*/
    margin-bottom: 3.2rem;;
}


.products h3{
    color:#000000;
    padding-top: .6rem;
    text-align: left;
    /*border-top: 2px solid black;*/
}

.products h4{
    position: absolute;
    margin: -1.2rem -.6rem;
    text-align: left;
    color: #fff;
    text-shadow: 4px 4px 8px #000000;
    transform: skew(10deg, -10deg);
    z-index: 200;
}

#productsCount {
    top:0rem;
}


.product img {
    display: block;
    position: relative;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all 0.35s;
    transition: all 0.35s;
    clip: initial;
  }
  
.product:hover img {
    -webkit-transform: scale(.925);
    -ms-transform: scale(.925);
    transform: scale(.925);
    opacity: 1;
  }

.breadcrumb {
    background-color: #f4f2f1;
    margin-bottom: 3rem;
}

#preview .breadcrumb {
    background-color: white !important;
}

.breadcrumb a {
    color: #ff00ff;
}

#details ul {
    list-style: none !important;
    text-indent: -20px;
    line-height: 1rem !important;
    margin-bottom: 3rem;
}

#details li {
    line-height: 1.5rem !important;
    margin-bottom: 1rem;
}

#details .material-icons {
    line-height: 1.5rem !important;
}

.price {
    border:1px solid #000000;
    padding: .6rem 1rem;
    font-size: 1.4rem;
}

.conte,.cartell,.postal,.samarreta,.altre, .crea {
    transition: ease 1s;
}


/*.conte h4 {
    color:#ff00ff;
}

.cartell h4 {
    color:#00ff00;
}

.samarreta h4 {
    color:#ff0000;
}*/

/* CAROUSEL PRODUCTS*/
.carousel-indicators ul {
    width: 100%;
}


.carousel-indicators li {
    width: 1vmax;
    height: 1vmax;
    border-radius: 100%;
    border: 3px solid #5e5e5e;
}

.active .carousel-indicators li {
    background-color:#000000;
}

.carousel-indicators {
    bottom: -64px;
}


/* SHARE */

.addthis_inline_share_toolbox .inline a {
    border-bottom: none !important;
    background: #ffff !important;
    background-color: #ffff !important;
}

.addthis_inline_share_toolbox .inline a:hover,
.addthis_inline_share_toolbox .inline a:focus {
    border-bottom: none !important;
    fill: #ff00ff !important;
}

.at-resp-share-element .at-share-btn:focus,
.at-resp-share-element .at-share-btn:hover {
    /*transform: none !important;*/
    fill: #ff00ff !important;
    text-decoration: none;
    border-bottom: none !important;
}


/*.works{
    background:url(/images/works_bg.jpg) center top no-repeat;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width: 100%;
    overflow: hidden;	
}

.works_content{
    padding-bottom:120px;
    display:inline-block;
}
.works .works_content .head_title h3{
    color:#000000;
}
.works .works_content .head_title h4{
    color:#000000;
}

.single_works_text{
    display:inline-block;
    padding:1rem;
    position:relative;
    overflow:hidden;

}
.single_works_text img{
    width:100%;
}

.single_works_text:hover .works_images_overlay{
    top:0;
    left: 0;
}

.works_images_overlay{
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, .5);
    padding: 2rem;
    margin: 0 auto;
    top:-100%;
    left: 0;
    position: absolute;
    transition:.5s;
}
.works_images_overlay h6{
    text-transform:uppercase;
    color:#000000;
    font-size:2rem;
    line-height:1.5rem;
    margin-bottom: 1rem;
    margin-top: 1rem;
}

.works_images_overlay p.product_price{
    font-size:2.5725rem;
    color:#fff;
}
.works_images_overlay .btn{
    margin-top: 0rem;
    text-transform:uppercase;
}

@media (min-width:769px) and (max-width:991px) {
    .works_images_overlay {
        padding: 0px;
    }
}
@media (max-width:768px) {
    .works_images_overlay{
        padding: 170px 20px;
    }
}
@media (max-width:580px) {
    .works_images_overlay{
        padding: 100px 20px;
    }
}
@media (max-width:480px) {
    .works_images_overlay{
        padding: 40px 20px;
    }
}
@media (max-width:320px) {
    .works_images_overlay{
        padding: 20px;
    }
}*/


/* FOOTER */

footer {
    background-image:linear-gradient(45deg,#ff00ff 25%, #00ffff 75%);
    padding: 2rem 0 3rem;
    margin-top: 4rem;
    color: black;
}


footer a {
    font-size: 1rem;
    color: black !important;
}

footer .material-icons {
    vertical-align: middle;
}


/* FUNCIONA */
#funciona h3, #howworks h3 {
    font-weight: bold;
    font-size: 2.8rem;
    font-weight: bold;
    margin-bottom: -.6rem;
    z-index: 2;
}
#funciona h3 span, #howworks h3 span {
    font-size: 1.6rem;
    position: relative;
    top: -16px;
    color: #a29e95;
    margin: 0 -10px 0px -16px;
}
#funciona h4, #howworks h4 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2rem;
    font-weight: bold;
}

/* FORM */
form .material-icons {
    vertical-align: middle;
}

@media (min-width: 768px) {
    footer a {
        font-size: 1rem;
    }
    footer .material-icons,
    form .material-icons {
        color: black;
        vertical-align: middle;
    }
}

form input:focus, form textarea:focus, .form-control:focus, button:focus {
    border-color: #ff00ff;
    box-shadow: 0 0 0 0.2rem rgba(255, 0, 255, 0.25);
}

#coupon {
    font-family: 'Lucida Sans', Monaco, monospace; 
    text-transform: uppercase; 
    letter-spacing: 2px; 
    text-align: center;
    border-bottom: 1px solid grey;
    width: auto !important;
}

/* FOCUS */

a:focus {
    background-color: none;
    border: none;
}

/* MODAL */
.close {
    opacity:1;
}

.modal, .modal-dialog, .modal-content, .modal-header {
    background-color:transparent;
    border: none !important;
}

.modalfull {
    width: 90%;
    height: 90%;
    margin: 0 auto;
  }

.modal-body {
    background-color: #ffff;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, .5);
}

.modal-header .modal-title {
    background-color: transparent;
    vertical-align: bottom !important;
    color: #ffffff !important;
    text-shadow: 0px 0px 5px rgba(0, 0, 0, 1);
}

.modal-header .material-icons {
    vertical-align: middle;
    color: #ffffff;
    font-size: 2.1rem !important;
    text-shadow: 0px 0px 5px rgba(0, 0, 0, .5);
}



/* FORM */

input::placeholder, textarea::placeholder, label { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #000000 !important;
    opacity: 1; /* Firefox */
  }
  
  :-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #000000 !important;
  }
  
  ::-ms-input-placeholder { /* Microsoft Edge */
    color: #000000 !important;
  }


  .in_white::placeholder { 
    /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #ffff !important;
    opacity: 1; /* Firefox */
  }
  
  :-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #ffff !important;
  }
  
  ::-ms-input-placeholder { /* Microsoft Edge */
    color: #ffff !important;
  }


/* Radio Buttons */
.custom-control-label::before {
    background-color: #ffff;
    cursor: pointer;
}

/* checked*/
.custom-radio .custom-control-input:checked ~ .custom-control-label::before,
.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
    background-color: #000000 ; 
    /* this bg image SVG is just a white circle, you can replace it with any valid SVG code */
    /*background-image: url(data:image/svg+xml;charset=utf8 <svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'> <circle r='3' fill='%23fff'/></svg>) !important; */
    border-radius: 50%;
}


/* BACK TO TOP */
#backtop {
    display: none;
    position: fixed;
    bottom: 1.6rem;
    right: 1.2rem;
    z-index: 1000;
    font-size: 18px;
    color: #ff00ff;
    background-color: none;
    cursor: pointer;
    padding: 0.2rem 0.5rem;
    border-radius: 0.1em;
}
#backtop .material-icons {
    line-height: 150% !important;   
}

#backtop:hover,
#backtop:focus {
    background-color: #ff00ff;
    color: #000000;
}