/* Namari Landing Page Dynamic Style Index

1. Website Default Styling
2. Navigation
3. Primary and Secondary Colors
4. Banner
5. Typography
6. Buttons
7. Footer


/*------------------------------------------------------------------------------------------*/
/* 1. Website Default Styling */
/*------------------------------------------------------------------------------------------*/


body {
    background:#0f0f0f;
}

.bubblegumPage {
    background :#dc5873;
}

.ryokoPage {
    background :#222229;
}

.sorcerySeekerPage{
    background: #261f1d;
}

.spiritsPage{
    background: #0f0e0b;
}

.johannaPage{
    background: #51474b;
}

.voidhunterPage{
    background: #0b060b;
}

.aranaPage{
    background: #000000;
}

.aStoryPage{
    background: #d9904f;
}

.heropetsPage{
    background: #d9a19f;
}

.photographyPage{
    background: #09090b ;
}

.drawingsPage{
    background: #ddab72;
}

.designbasicsPage{
    background: #953d4e;
}

.aboutmePage {
    background :#000000;
}

/* Default Link Color */

a, .la-ball-triangle-path {
    color:#9c9c9c; 
}

a:hover, #header.nav-solid nav a:hover {
    color:#ffffff;
}

/* Default Icon Color */

.icon i {
    color:#993030;
}

/* Border Color */

#banner .section-heading:before, .testimonial.classic footer:before {
    background: #993030;
}

.pricing-block-content:hover {
    border-color:#993030;
}


/*------------------------------------------------------------------------------------------*/
/* 2. Navigation */
/*------------------------------------------------------------------------------------------*/

#navLightBackground{
    color: #141414!important;
}

#navLightBackground:hover{
    color:#ffffff !important;
}

/* Navigation Active State */

#header.nav-solid .active {
    color: #993030;
    border-color: #993030;
}    

#header{
    
    @media(max-width: 480px){
        padding-right: 0;
    }

    @media(min-width: 480px)and (max-width: 600px){
        padding-right: 0px;
    }

    @media (min-width: 600px) and (max-width:767px){
        padding-right: 45px;
    }

    @media (min-width: 767px)and (max-width: 1024px){
        padding-right: 95px;
    }

    @media (min-width: 1024px) and (max-width: 1100px) { 
        padding-left: 15%;
        padding-right: 15%;
    }

    @media (min-width: 1100px){
        padding-left: 10%;   
        padding-right: 10%; 
    }
}

#topBorder{
    animation-name: fadeInDown;
    visibility: visible !important; 
}
#rightBorder{
    animation-name: fadeInRight;
    visibility: visible !important; 
}
#leftBorder{
    animation-name: fadeInUp;
    visibility: visible !important; 
}
#bottomBorder{
    animation-name: fadeInLeft;
    visibility: visible !important; 
}


/*------------------------------------------------------------------------------------------*/
/* 3. Primary and Secondary Colors */
/*------------------------------------------------------------------------------------------*/


/* Primary Background and Text Colors */

.primary-color, .featured .pricing {
    background-color:#993030;
}

.primary-color, .primary-color .section-title, .primary-color .section-subtitle, .featured .pricing, .featured .pricing p {
    color:#fff;    
}

.section-heading h2:after {
    background:#993030;
    content:"";
    display:block;
    width:30px;
    height:5px;
    margin-top:30px;
    padding-bottom: 10px !important;
}

.text-center .section-heading h2:after {
    margin:30px auto 25px auto;
}

/* Primary Icon Colors */

.primary-color .icon i, .primary-color i {
    color:#fff;
}


/* Secondary Background and Text Colors */

.secondary-color {
    background-color:#141414;
}


/*------------------------------------------------------------------------------------------*/
/* 4. Banner */
/*------------------------------------------------------------------------------------------*/


/* Banner Background and Text Colors */

#banner{
    background: #000000;
    background-size:cover !important;
}

#banner-content{
    @media(max-width: 480px){
        padding-left: 15px;
        padding-right: 15px;
    }

    @media(min-width: 480px)and (max-width: 600px){
        padding-left: 30px;
        padding-right: 30px;
    }

    @media (min-width: 600px) and (max-width:767px){
        padding-left: 70px;
        padding-right: 70px;
    }

    @media (min-width: 767px)and (max-width: 1024px){
        padding-left: 120px;
        padding-right: 120px;
    }

    @media (min-width: 1024px) and (max-width: 1100px) { 
        padding-left: 16%;
    }

    @media (min-width: 1100px)and (max-width: 1264px){
        padding-left:11%;    
    }

    @media (min-width: 1264px)and (max-width: 1300px){
        padding-left: 130px;    
    }

    @media (min-width: 1300px)and (max-width: 1340px){
        padding-left: 115px;    
    }

    @media (min-width: 1340px)and (max-width: 1400px){
        padding-left: 100px;    
    }

    @media (min-width: 1400px)and (max-width: 1450px){
        padding-left: 90px;    
    }

    @media (min-width: 1450px)and (max-width: 1500px){
        padding-left: 70px;    
    }

    @media (min-width: 1500px)and (max-width: 1550px){
        padding-left: 40px;    
    }

    @media (min-width: 1550px)and (max-width: 1600px){
        padding-left: 10px;    
    }

    @media (min-width: 1600px){
            padding-left: 0;    
    }
}

.bannerMilo {
    background: url("../images/banner-images/bannerMilo.gif") no-repeat center top !important;
}

.bannerBubblegum{
    background: url("../images/banner-images/littleLegendNew.jpg") no-repeat center top !important;
}

.bannerRyoko{
    background: url("../images/banner-images/ryoko.jpg") no-repeat center top !important;
}

.bannerSorcerySeeker{
    background: url("../images/banner-images/sorcerySeeker.jpg") no-repeat center top !important;
}

.bannerSpirits{
    background: url("../images/banner-images/spirits.jpg") no-repeat center top !important;
}

.bannerJohanna{
    background: url("../images/banner-images/johanna.jpg") no-repeat center top !important;
}

.bannerVoidhunter{
    background: url("../images/banner-images/voidHunter.jpg") no-repeat center top !important;
}   

.bannerArana{
    background: url("../images/banner-images/arana.jpg") no-repeat center top !important;
} 

.bannerAstory{
    background: url("../images/banner-images/aStory.jpg") no-repeat center top !important; 
}

.bannerHeropets{
    background: url("../images/banner-images/heroPets.jpg") no-repeat center top !important; 
}

.bannerPhotography{
    background: url("../images/banner-images/photography.jpg") no-repeat center top !important; 
}

.bannerDrawings{
    background: url("../images/banner-images/drawings.jpg") no-repeat center top !important; 
}

.bannerImprint{
    background-color: #0f0f0f !important;
}

.bannerDesignbasics{
    background: url("../images/banner-images/designbasics.jpg") no-repeat center top !important;
}

.bannerAboutme{
    background: url("../images/banner-images/aboutme.jpg") no-repeat center top !important;
}

/*------------------------------------------------------------------------------------------*/
/* 5. Typography */
/*------------------------------------------------------------------------------------------*/


body {
    font-family: 'Open Sans', sans-serif, Arial, Helvetica;
    font-size:15px;
    font-weight:normal;
    color:#9c9c9c;
}



/* Logo, if you are using Fonts as Logo and not image

#logo h1 {
    font-family:;
    font-size:; 
    font-weight:;
    color:;
}

#logo h2 {
    font-family:;
    font-size:; 
    font-weight:;
    color:;
}

*/


/* Banner Typography */

#banner h1 {
    font-family: 'Open Sans', sans-serif, Arial, Helvetica;
    font-size:62px;
    line-height:60px;
    font-weight:800;
    color:#f1f1f1 ;
    padding-bottom: 0px;
}

#banner h2 {
    font-family: 'Open Sans', sans-serif, Arial, Helvetica;
    font-size:18px;
    font-weight:300;
    color:#c2c2c2;
}

#banner h3{
    padding-top: 10px;
    padding-bottom: 20px;
}

#darkenBack{
    background-color: #000000cb;
    padding-left: 50px;
}


/* Section Title and Subtitle */

#projects{
    padding-top: 70px !important;
    padding-bottom: 70px!important;
}

#about-me{
    padding-top: 200px !important;
    padding-bottom: 200px!important;

    @media (max-width: 480px){
        padding-left: 40px;
        padding-right: 40px; 
    }

    @media (min-width: 480px) and (max-width:767px){
        padding-left: 70px;
        padding-right: 70px;        
    }

    @media (min-width: 767px)and (max-width: 1024px){
        padding-left: 120px;
        padding-right: 120px;        
    }

    @media (min-width: 1024px) and (max-width:1200px){
        padding-left: 15%;
        padding-right: 15%;
    }

    @media (min-width:1200px){
        padding-left: 30%;
        padding-right: 30%;
    
    }
}

.boxAboutme{
    background-color: #000000!important;
    height:200px;
}

#contact{
    padding-top: 70px !important;
    padding-bottom: 130px!important;
}


.section-title {
    font-family: 'Open Sans', sans-serif, Arial, Helvetica;
    font-size: 20px; 
    font-weight:700;
    color:#9c9c9c;
    padding-top: 0px !important;
}

.contactTitle{
    font-family: 'Open Sans', sans-serif, Arial, Helvetica;
    font-size: 20px; 
    font-weight:bold;
    color:#9c9c9c;
    padding-top: 0px !important;
}

.marginForm{
    margin-top: 20px;
    margin-bottom: 20px;
}

@media (min-width: 1100px){

    .formcontainer{
        float:left;
        width:50%;
        padding-right: 2%;
        padding-left: 10%;
    }
    
    .formcontainerRight{
        float: right;
        width:50%;
    
        padding-left: 2%;
        padding-right: 10%;
    }

}

@media (min-width: 1024px) and (max-width: 1100px) { 
    .formcontainer{
        width:100%;
        padding-right: 15%;
        padding-left: 15%;
    }
    
    .formcontainerRight{
        float: right;
        width:100%;
    
        padding-left: 15%;
        padding-right: 15%;
    }
    .contactTextMiddle{
        text-align: center;
    }
    .iconsMiddle{
        padding-right: 11%;
    }
}

@media (min-width: 767px)and (max-width: 1024px){

    .formcontainer{
        width:100%;
        padding-left: 120px;
        padding-right: 120px;      
    }
    
    .formcontainerRight{
        float: right;
        width:100%;
    
        padding-left: 120px;
        padding-right: 120px;      
    }
    .contactTextMiddle{
        text-align: center;
    }
    .iconsMiddle{
        padding-right: 40px;
    }
}

@media (min-width: 600px) and (max-width:767px){
    .formcontainer{
        width:100%;  
        padding-left: 70px;   
        padding-right: 70px;  
    }
    
    .formcontainerRight{
        float: right;
        width:100%;   
        padding-left: 70px;  
        padding-right: 70px;  
    } 
}

@media (min-width: 480px) and (max-width:600px){
    .formcontainer{
        width:100%;  
        padding-left: 30px;   
        padding-right: 30px;  
    }
    
    .formcontainerRight{
        float: right;
        width:100%;   
        padding-left: 30px;  
        padding-right: 30px;  
    } 
}

@media (max-width: 480px){
    .formcontainer{
        width:100%;     
    }
    
    .formcontainerRight{
        float: right;
        width:100%;   
    }
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

input[type="email"],
input[type="text"],
input[type="message"],
textarea {
    font-family: 'Open Sans', sans-serif, Arial, Helvetica;
    font-weight: normal;
    width: 100%;
    margin-top: 5px;
    font-size: 16px;
    border-radius: 5px;
    border: none;
    color: #9c9c9c;
    background-color: #202020;
}

#message{
    height: 156px;
}

.spacingContact{
    padding-top: 15px;
}

/* Align labels to the right side */
label {
    text-align: left;
    display: block;
    padding-top: 10px;
}

/* Style the button */








.section-subtitle {
    font-family: 'Open Sans', sans-serif, Arial, Helvetica;
    font-size: 16px;
    font-weight:300;
    color:#616161;
}

/* Testimonial */

.testimonial q {
    font-family: 'Open Sans', sans-serif, Arial, Helvetica;
    font-size: 17px; 
    font-weight:300;
}

.testimonial.classic q, .testimonial.classic footer {
    color:#c2c2c2 ;
}


/* Standard Headings h1-h6 */

h1 {
    font-family: 'Open Sans', sans-serif, Arial, Helvetica;
    font-size: 40px; 
    font-weight:300;
    color:#111;
}

h2 {
    font-family: 'Open Sans', sans-serif, Arial, Helvetica;
    font-size: 34px; 
    font-weight:300;
    color:#111;
}

h3 {
    font-family: 'Open Sans', sans-serif, Arial, Helvetica;
    font-size: 30px; 
    font-weight:700;
    color:#111;
}

h4 {
    font-family: 'Open Sans', sans-serif, Arial, Helvetica;
    font-size: 18px; 
    font-weight:400;
    color:#111;
}

h5 {
    font-family: 'Open Sans', sans-serif, Arial, Helvetica;
    font-size: 16px; 
    font-weight:400;
    color:#111;
}

h6 {
    font-family: 'Open Sans', sans-serif, Arial, Helvetica;
    font-size: 14px; 
    font-weight:400;
    color:#111;
}


/*------------------------------------------------------------------------------------------*/
/* 6. Buttons */
/*------------------------------------------------------------------------------------------*/

/* ----------Default Buttons---------- */


/* Button Text */

.button, input[type="submit"]  {
    font-family: 'Open Sans', sans-serif, Arial, Helvetica;
    font-size:16px;
    font-weight:bold;
    color:#9c9c9c;
    padding: 11px 16px;
}


/* Button Color */

.button, input[type="submit"] {
    border-color:#9c9c9c;
    color: #9c9c9c;
    border-style: solid;
    border-width: 3px;
    background-color: #0f0f0f00;
}


/* Button Hover Color */

.button:hover,  input[type="submit"]:hover {
    border-color:#993030;
    color:#993030;
    cursor: pointer;
}

#hoverSorceryseeker:hover {
    border-color:#9b7152 !important;
    color:#9b7152 !important;
}

#hoverSpirits:hover{
    border-color:#5c5c35 !important;
    color:#5c5c35 !important;
}

#hoverHeropets:hover{
    border-color:#d9a19f !important;
    color:#d9a19f !important;
}

#hoverDesignbasics:hover{
    border-color:#953d4e  !important;
    color:#953d4e  !important;
}




/* ----------Banner Buttons---------- */


/* Button Text */

#banner .button {
    font-family: 'Open Sans', sans-serif, Arial, Helvetica;
    font-size:16px;
    color:#9c9c9c ;
}


/* Button Color */

#banner .button {
    border-color:#9c9c9c ;
}


/* Button Hover Color */

#banner .button:hover {
    color:#993030;
    border-color:#993030;
}


/*------------------------------------------------------------------------------------------*/
/* 7. Footer */
/*------------------------------------------------------------------------------------------*/

#landing-footer, #landing-footer p, #landing-footer a {
    font-family: 'Open Sans', sans-serif, Arial, Helvetica;
    font-size:12px;
    font-weight:normal;
    color:#9c9c9c;
    background-color: #070707;
    
}

/* Footer Icon Color */

#landing-footer i {
    color:#c2c2c2;
}

#landing-footer{
    padding-bottom: 5px;
    padding-top: 5px;
}


.footer1 {
    border-right: 1px solid #9c9c9c; /* Add a right border to the first <p> element */
    padding-right: 30px; /* Add some padding to create space between the text and the border */
}

.footer2{
    padding-left: 30px;
}

#footerHover:hover{
    color:#ffffff !important;
}

#footer{

    display: flex; /* Use flexbox to make the elements appear next to each other */
    align-items: center;
    margin-top: 20px;
    margin-bottom: 20px;

    @media(max-width: 480px){
        padding-left: 15px;
    }

    @media(min-width: 480px)and (max-width: 600px){
        padding-left: 30px;
    }

    @media (min-width: 600px) and (max-width:767px){
        padding-left: 70px;
    }

    @media (min-width: 767px)and (max-width: 1024px){
        padding-left: 120px;
    }

    @media (min-width: 1024px) and (max-width: 1100px) { 
        padding-left: 15%;
    }


    @media (min-width: 1024px) and (max-width: 1100px) { 
        padding-left: 15%;
    }

    @media (min-width: 1100px)and (max-width: 1264px){
        padding-left:10%;    
    }

    @media (min-width: 1264px)and (max-width: 1400px){
        padding-left: 135px;    
    }

    @media (min-width: 1400px)and (max-width: 1600px){
        padding-left: 150px;    
    }

    @media (min-width: 1600px) and (max-width:1700px){
        padding-left: 13%;    
    }

    @media (min-width: 1700px) and (max-width:1800px){
            padding-left: 15%;    
    }

    @media (min-width: 1800px) and (max-width:1900px){
        padding-left: 290px;    
    }

    @media (min-width:1900px){
        padding-left: 330px;    
    }
}

#imprintPosition{
    padding-top:100px;
    
}

.specialLF{
    position:fixed;
    bottom: 20px;
    width: 100%;
}

#imprintFlexPosition{
    @media(max-width: 480px){
        padding-top: 100px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    @media(min-width: 480px)and (max-width: 600px){
        padding-left: 30px;
        padding-right: 30px;
    }

    @media (min-width: 600px) and (max-width:767px){
        padding-left: 70px;
        padding-right: 70px;
    }

    @media (min-width: 767px)and (max-width: 1024px){
        padding-left: 120px;
        padding-right: 120px;
    }

    @media (min-width: 1024px) and (max-width: 1100px) { 
        padding-left: 16%;
    }

    @media (min-width: 1100px)and (max-width: 1264px){
        padding-left:11%;    
    }

    @media (min-width: 1264px)and (max-width: 1300px){
        padding-left: 130px;    
    }

    @media (min-width: 1300px)and (max-width: 1340px){
        padding-left: 115px;    
    }

    @media (min-width: 1340px)and (max-width: 1400px){
        padding-left: 100px;    
    }

    @media (min-width: 1400px)and (max-width: 1450px){
        padding-left: 90px;    
    }

    @media (min-width: 1450px)and (max-width: 1500px){
        padding-left: 70px;    
    }

    @media (min-width: 1500px)and (max-width: 1550px){
        padding-left: 40px;    
    }

    @media (min-width: 1550px)and (max-width: 1600px){
        padding-left: 10px;    
    }

    @media (min-width: 1600px){
            padding-left: 10px;    
    }
}