/*
Theme Name: Sweet Damage Tattoo
Author: GN
Description: Theme developed for SWEET DAMAGE TATTOO.
Version: 2023
Requires at least: 5.2
Tested up to: 6.1
Requires PHP: 7.0
License: GNU General Public License v3 or Later
License URI: https://www.gnu.org/licenses/gpl.html

*/

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

section {
    overflow: hidden!important;

}

.slick-slide img {
    display: block;
    max-height: 100%;
}

/* * {
    outline: 1px solid red;
} */


/* Fonts */

/* @import url('https://fonts.googleapis.com/css2?family=Maven+Pro:wght@400;500&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=Tilt+Neon&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Golos+Text&display=swap');

:root {
    /* --font: 'Maven Pro', sans-serif;  */
    /* --font: 'Tilt Neon', cursive;  */
    --font: 'Golos Text', sans-serif; 
    --black: #151515
}


/* Custom */


* {
    box-sizing: border-box;
}

h1, h2, p, span, input {
    color: #fff;
    font-family: var(--font);
}

a {
    color: #fff!important;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

body {
    background-color: #000000;
    overflow-x: hidden;
    line-height: normal!important;
}

.hero-text {
    text-align: right;
    color: #fff;
    font-weight: 600;
    font-size: 3.7em;
    letter-spacing: 0.1em;
    z-index: 2;
    text-transform: uppercase;
    font-family: var(--font);
}

.hero-text-holder {
    display: flex;
    align-items: center;
    justify-content: center;
}


.hero-logo {
    z-index: 999;
}

.hero-holder {
    z-index: 999;
}

.hero-divider {
    background-color: #fff;
    display: block;
    height: 100%;
    padding: 0px;
    width: 4px;
    margin: 0 10px 0 10px;
}

.first {
    height: 100vh;
    background-size: cover;
    background-position: center;
    
    background: rgb(0,0,0);
background: linear-gradient(0deg, rgba(0,0,0,1) 13%, rgba(0,0,0,0.30575980392156865) 43%);
}

.landing {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    overflow-x: hidden;
    

}

.hero-video {
    object-fit: cover;
    width:100%;
    height: 100%;
    position: fixed;
    top:0;
    z-index: -999;
}

.second, .third, .forth, .fifth, .sixth, .footer-s {
    background-color: #000000;
}


.about-title, .about-desc {
    font-family: var(--font);
    color: #fff;
    line-height: 1.3em;
}

.about-title {
    font-size: 3em;
    text-align: right;
    padding: 5%;
    z-index: 22;
}

.about-desc {
    font-size: 1.2em;
    line-height: 1.3em;
    padding: 5%;
    z-index: 22;
} 

.about {
    padding-top: 100px;
    padding-bottom: 100px;
    background-image: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.6) 0%,
        rgba(0, 0, 0, 0.3) 100%
      ), url('/wp-content/themes/sweetdamage/assets/bg-fliped.jpg');
    background-position: top;
    background-position: top;
    background-size: cover;
    /* backdrop-filter: blur(5px); */
}

#header {
    z-index: 1000;
    position: fixed!important;
    width: 100%;
    left: 50%;
    transform: translatex(-50%);
}

.nav-color {
   background-color: #000000;
   border-bottom: 1px solid #fff;
}

.nav-transparent {
    background-color: transparent;
}

.point-down {
    color: #fff;
    position: absolute;
    left: 50%;
    bottom: 8%;
    font-size: 30px;
    transform: translatex(-50%);
    animation: 1s linear 1s infinite alternate bounce;
}

@keyframes bounce {
    from { bottom: 8%;}
    to { bottom: 6%;}
}

.main-header {
    text-align: center;
    color: #fff;
    padding: 100px 0px 50px 0;
    font-size: 3.5em;
    text-transform: uppercase;
}

.topnav {
    overflow: hidden;
}
  
  
.topnav, .navbar {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}

.topnav a {
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 20px;
    font-family: var(--font);
    letter-spacing: normal;
    transition-property: letter-spacing;
    transition-duration: 1.5s;
}

.topnav a:hover {
    color: rgba(255, 255, 255, 0.521)!important;
    transition-property: color;
    transition-duration: 1.5s;
}

.topnav .icon {
    display: none;
}

.navbar {
    z-index: 999;
}
  
.artists-slider {
    padding: 0px 0 0px 0;
}

.artist-holder img {
    width: 100%;
    height: 100%;
}

.artist-holder {
    position: relative;
    margin: 15px;
    transform: scale(1);
    transition: transform 1s;
    backface-visibility: hidden;
    cursor: pointer;
}

.artist-holder p {
    position: absolute;
    bottom: 10%;
    left: 50%;
    z-index: 22;
    color: #fff;
    transform: translate(-50%, -50%);
    font-size: 1.5em;
    transition-property: opacity, font-size, bottom;
    transition-duration: 1s;
    font-weight: 400;
    font-family: var(--font);
        text-shadow: 1px 1px 2px black, 0 0 1em black, 0 0 0.2em black;
}

.artist-holder:hover {
    transform: scale(1.04);
    transition: transform 1s;
    backface-visibility: hidden;
    backface-visibility: hidden;
}

.artist-holder img {
    position: relative;
    border-radius: 5px;
    filter: brightness(100%);
    transition: filter 1s;
    backface-visibility: hidden;
}

.artist-holder img:hover {
    position: relative;
    border-radius: 5px;
    filter: brightness(60%);
    transition: filter 1s;
    backface-visibility: hidden;
    
}

.inner {
    overflow: hidden;
}

.artist-holder:hover p {
    bottom: 15%;
    font-size: 1.6em;
    transition-property: font-size, bottom;
    transition-duration: 1s;
   }

.slick-next, .slick-prev {
    display: block!important;
}

.slick-next {
   margin-right: 30px;
   z-index: 999;
}
.slick-prev {
    z-index: 999;
    margin-left: 30px;
}

.care p {
    font-size: 1.2em;
    line-height: 1.3em;
    color: #fff;
    font-family: var(--font);
}

.sixth {
    background-color: #090909;
}

.fifth {
    padding-bottom: 100px;
    background-image: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.6) 0%,
        rgba(0, 0, 0, 0.3) 100%
      ), url('/wp-content/themes/sweetdamage/assets/bg-1.jpg');
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
}

.map-row {
    background-color: #000000;
    margin-top: 80px;
    
}

.contact-t-bold  {
    font-size: 1.3em;
    line-height: 1em;
    color: #fff;
    font-weight: 600;
    padding-bottom: 10px;
    font-family: var(--font);
}

.contact-t {
    font-size: 1em;
    line-height: 1.3em;
    color: #fff;
    font-weight: 400;
    font-family: var(--font);
}

#map {
    width: 100%;
    height: 100%;
    min-height: 300px;
    border-radius: 5px;
    padding: 0px!important;
    
}

.contact-holder {
    line-height: 1.6em;
}

.wpcf7-form, .wpcf7  {
    width: 100%;
}



.wpcf7-form p {
    margin: 5px 0 5px 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wpcf7-form-control-wrap {
    width: 100%;
}

.wpcf7-spinner {
    display: none;
}

.wpcf7-text {
    width: 100%;
    border-radius: 0px;
    background: transparent;
    border: none;
    border-bottom: 2px solid #fff;
    color: #fff;
}

.wpcf7-textarea {
    width: 100%;
    margin: 5px 0 5px 0;
    max-height: 100px;
    background: transparent;
    border: none;
    border-bottom: 2px solid #fff;
    color: #fff;
}

.wpcf7 form.sent .wpcf7-response-output {
    border-color: #46b450;
    color: #fff;
}

.wpcf7-submit {
    background: transparent;
    border: none;
    color: #fff;
    border-radius: 0px;
    border-bottom: 2px solid #fff
}

.cf-7 {
    
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

#wpcf7-f13-o1 > form > div.wpcf7-response-output {
    color: #fff;
}

.w-100:hover {
    transform: scale(1.05);
    transition-property: transform;
    transition-duration: 1s;
}
.w-100 {
    transform: scale(1);
    transition-property: transform;
    transition-duration: 1s;
}

.menu-logo, .icon {display: none;}

.mason-mobile {
    display: none;
}

#burger {
    
    min-width: 70px;
    float: right;
    border-bottom: none!important;
    text-decoration: none;

}

#burger .fa {
    float: right!important;

}

.main-single {
    padding-top: 150px;
}

.artist-img {
   
    width: 100%;
    float: right;
}

.single-logo-holder {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.main-header-signle {
    text-align: center;
    color: #fff;
    padding: 50px 0px 50px 0;
    font-size: 3.5em;
    text-transform: uppercase;
}

.back-btn {
    display: flex;
    flex-direction: row;
}

.single-content {
    margin: 0 auto;
}

.social {
    font-size: 0.5em!important;
}

#copyright {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    color: #fff;
    text-align: center;
    border-top: 1px solid #fff;
}


/* Mobile */

@media screen and (max-width: 1000px) {
    .navbar a {display: block;}
    .navbar img {display: block;}
    .topnav a.icon {
      float: right;
      display: block;
    }
}
  
@media screen and (max-width: 1000px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
    }
}

.hidden {
    display: none;
}

  
@media screen and (max-width: 1000px) {
    .hero-divider {
        background-color: #fff;
        display: block;
        height: 4px;
        padding: 0px;
        width: 100%;
        margin: 20px 10px 20px 10px;
    }

    .hero-holder {
        padding: 0px;
        margin: 0px;
        flex-wrap: nowrap;
    }
    
    .slick-dots li button:before {
        color: #fff;
    }

    .slick-dots li.slick-active button:before {
        color: #fff!important;
    }

    .hero-text {
        text-align: center;
    }
    
    .hero-holder, .logo-holder  {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .hero-holder {
        margin-top: -5vh;
    }

    .menu-logo {
        width: 70px;
    }

    .navbar {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        background-color: #000000;
        border-bottom: 1px solid #fff;
    }

    .icon {
        font-size: 30px;
        padding-top: 20px;
        padding-right: 5px;
    }

    .topnav {
        padding-top: 70px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .topnav{
        height: 0px;
        opacity: 0;
        transition: height 1s, opacity 0s linear;
    }

    .show {
        height: auto;
        opacity: 1;
        transition: height 1s, opacity 0.5s linear;
    }
    

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

    #tattoo-care, #about-section {
        padding: 5%;
    }

    .mason {
        display: none;
    }

    .mason-mobile {
        display: block;
        
    }

    .mason-card {
        margin: 0px 15px 0px 15px;
        position: relative;
        transform: scale(1);
        transition: transform 1s;
        backface-visibility: hidden;
        cursor: pointer;
    }

    .cf-7 {
        padding-top: 40px;
    }

    .about {
        padding-bottom: 50px;
    }

    .about-title {
        font-size: 2em;
        margin-top: 100px;
    }

    .main-header {
        
        font-size: 2em;
    }
    
    .hero-text {
        font-size: 2.5em;
    }
    
    .artist-holder img {
        margin: 0px;
    }

    .hero-logo {
        max-width: 170px;
    }

    .single-content {
        padding: 5%;
    }
}